siwa updates and new article (#7197)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the chat functionality within the application by adding a feedback system, updating icons, and improving the knowledge base content related to ERC20 token transfers.

### Detailed summary
- Added a new knowledge base entry for "Transfer Amount Exceeds Allowance".
- Updated `Header` and `Hero` components to replace `BotIcon` with `MessageCircleIcon`.
- Introduced `sendFeedback` function to handle user feedback on chat messages.
- Modified `Chat` component to include feedback buttons (thumbs up/down) for messages.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
	- Introduced feedback buttons (thumbs up/down) for assistant messages in the AI chat, allowing users to rate responses.
	- Added a new "Ask AI" button on the main page, providing quick access to the chat assistant.
	- Added a new knowledge base article explaining the "ERC20: transfer amount exceeds allowance" error and its resolution.
- **Improvements**
	- Enhanced chat message payloads with source identifiers for better context.
	- Updated sidebar navigation with a new troubleshooting entry for ERC20 transfer allowance issues.
	- Updated chat and header icons to use a consistent message circle icon for AI-related features.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: Yash094

apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx

@@ -102,6 +102,7 @@ function CustomChatContentLoggedIn(props: {
           message:
             messageToSend.content.find((x) => x.type === "text")?.text ?? "",
           conversationId: sessionId,
+          source: "dashboard-support",
         };
         const apiUrl = process.env.NEXT_PUBLIC_SIWA_URL;
         const response = await fetch(`${apiUrl}/v1/chat`, {

apps/portal/src/app/Header.tsx

@@ -10,9 +10,9 @@ import {
 } from "@/components/ui/dropdown-menu";
 import clsx from "clsx";
 import {
-  BotIcon,
   ChevronDownIcon,
   MenuIcon,
+  MessageCircleIcon,
   TableOfContentsIcon,
 } from "lucide-react";
 import Link from "next/link";
@@ -222,12 +222,11 @@ export function Header() {
 
           <div className="hidden xl:block">
             <Button
-              variant="primary"
               onClick={() => {
                 router.push("/chat");
               }}
             >
-              <BotIcon className="mr-2 size-4" />
+              <MessageCircleIcon className="mr-2 size-4" />
               Ask AI
             </Button>
           </div>
@@ -254,7 +253,7 @@ export function Header() {
               className="p-2"
               onClick={() => router.push("/chat")}
             >
-              <BotIcon className="size-7" />
+              <MessageCircleIcon className="size-7" />
             </Button>
             <Button
               variant="ghost"

apps/portal/src/app/knowledge-base/sidebar.tsx

@@ -70,6 +70,10 @@ export const sidebar: SideBar = {
               name: "Batch Upload",
               href: "/knowledge-base/troubleshoot/contracts/batch-upload",
             },
+            {
+              name: "Transfer Amount Exceeds Allowance",
+              href: "/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance",
+            },
           ],
         },
       ],

apps/portal/src/app/knowledge-base/troubleshoot/contracts/erc20-transfer-allowance/page.mdx

@@ -0,0 +1,15 @@
+# ERC20 - Transfer Amount Exceeds Allowance
+
+## What it means
+
+The "ERC20: transfer amount exceeds allowance" error occurs when trying to transfer ERC20 tokens beyond the allowed limit set by the token owner. ERC20 tokens use an allowance system that grants specific addresses permission to transfer a certain amount of tokens on behalf of the owner.
+
+## How to fix it
+
+1. Check allowance: Use the thirdweb Dashboard to verify the current allowance for the sender’s address.
+2. Increase allowance: If the allowance is too low, the token owner should call the approve function to increase it.
+3. Transfer tokens: Once the allowance is updated, retry the transfer using transferFrom or transfer.
+
+Following these steps should resolve the error. Ensure the allowance covers the transfer amount before initiating.
+
+Can't get this working? [**Contact our support team**](https://thirdweb.com/support) for help. 

apps/portal/src/app/page.tsx

@@ -1,4 +1,6 @@
 import { Grid, Heading, SDKCard } from "@/components/Document";
+import { Button } from "@/components/ui/button";
+import { MessageCircleIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { UnityIcon } from "../icons";
@@ -40,6 +42,13 @@ function Hero() {
           <p className="mb-8 max-w-md text-lg text-muted-foreground leading-normal">
             Development framework for building onchain apps, games, and agents.
           </p>
+
+          <Link href="/chat">
+            <Button className="flex items-center gap-2">
+              <MessageCircleIcon className="size-4" />
+              Ask AI
+            </Button>
+          </Link>
         </div>
       </div>
 

apps/portal/src/components/AI/api.ts

@@ -11,6 +11,7 @@ export const getChatResponse = async (
     const payload = {
       message: userMessage,
       conversationId: sessionId,
+      source: "portal",
     };
     const response = await fetch(`${apiUrl}/v1/chat`, {
       method: "POST",
@@ -41,3 +42,31 @@ export const getChatResponse = async (
     return null;
   }
 };
+
+export const sendFeedback = async (
+  conversationId: string,
+  feedbackRating: 1 | -1,
+) => {
+  try {
+    const response = await fetch(`${apiUrl}/v1/chat/feedback`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-service-api-key": serviceKey,
+      },
+      body: JSON.stringify({ conversationId, feedbackRating }),
+    });
+
+    if (!response.ok) {
+      const error = await response.text();
+      throw new Error(`Failed to send feedback: ${response.status} - ${error}`);
+    }
+    return true;
+  } catch (error) {
+    console.error(
+      "Feedback API error:",
+      error instanceof Error ? error.message : "Unknown error",
+    );
+    return false;
+  }
+};

apps/portal/src/components/AI/chat.tsx

@@ -5,7 +5,8 @@ import { LoadingDots } from "@/components/ui/LoadingDots";
 import { Button } from "@/components/ui/button";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
-import { ArrowUpIcon, BotIcon } from "lucide-react";
+import { MessageCircleIcon } from "lucide-react";
+import { ArrowUpIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
 import { usePostHog } from "posthog-js/react";
 import {
   type ChangeEvent,
@@ -15,13 +16,14 @@ import {
   useRef,
   useState,
 } from "react";
-import { getChatResponse } from "./api";
+import { getChatResponse, sendFeedback } from "./api";
 
 interface Message {
   id: string;
   role: "user" | "assistant";
   content: string;
   isLoading?: boolean;
+  feedback?: 1 | -1;
 }
 
 const predefinedPrompts = [
@@ -36,7 +38,7 @@ function ChatEmptyState({
 }: { onPromptClick: (prompt: string) => void }) {
   return (
     <div className="flex flex-col items-center justify-center space-y-8 py-16 text-center">
-      <BotIcon className="size-16" />
+      <MessageCircleIcon className="size-16" />
 
       <h2 className="font-semibold text-3xl text-foreground">
         How can I help you <br />
@@ -153,6 +155,21 @@ export function Chat() {
     }
   };
 
+  const handleFeedback = async (messageId: string, feedback: 1 | -1) => {
+    if (!conversationId) return; // Don't send feedback if no conversation
+
+    try {
+      await sendFeedback(conversationId, feedback);
+      setMessages((prevMessages) =>
+        prevMessages.map((msg) =>
+          msg.id === messageId ? { ...msg, feedback } : msg,
+        ),
+      );
+    } catch (_e) {
+      // Optionally handle error
+    }
+  };
+
   return (
     <div
       className="mx-auto flex size-full flex-col overflow-hidden lg:min-w-[800px] lg:max-w-5xl"
@@ -183,11 +200,37 @@ export function Chat() {
                   {message.role === "assistant" && message.isLoading ? (
                     <LoadingDots />
                   ) : (
-                    <StyledMarkdownRenderer
-                      text={message.content}
-                      isMessagePending={false}
-                      type={message.role}
-                    />
+                    <>
+                      <StyledMarkdownRenderer
+                        text={message.content}
+                        isMessagePending={false}
+                        type={message.role}
+                      />
+                      {message.role === "assistant" && !message.isLoading && (
+                        <div className="mt-2 flex gap-2">
+                          {!message.feedback && (
+                            <>
+                              <button
+                                type="button"
+                                aria-label="Thumbs up"
+                                className="text-muted-foreground transition-colors hover:text-green-500"
+                                onClick={() => handleFeedback(message.id, 1)}
+                              >
+                                <ThumbsUpIcon className="size-5" />
+                              </button>
+                              <button
+                                type="button"
+                                aria-label="Thumbs down"
+                                className="text-muted-foreground transition-colors hover:text-red-500"
+                                onClick={() => handleFeedback(message.id, -1)}
+                              >
+                                <ThumbsDownIcon className="size-5" />
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    </>
                   )}
                 </div>
               </div>