siwa updates and new article

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/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

@@ -15,6 +15,8 @@ import { PlaygroundIcon } from "../icons/products/PlaygroundIcon";
 import { cn } from "../lib/utils";
 import DocsHeroDark from "./_images/docs-hero-dark.png";
 import DocsHeroLight from "./_images/docs-hero-light.png";
+import { Button } from "@/components/ui/button";
+import { MessageCircleIcon } from "lucide-react";
 export default function Page() {
   return (
     <main className="container max-w-[900px] grow pb-20" data-noindex>
@@ -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 Assistant
+            </Button>
+          </Link>
         </div>
       </div>
 
@@ -227,4 +236,4 @@ function ArticleCardIndex(props: {
       </div>
     </Link>
   );
-}
+}

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,33 @@ 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,7 @@ 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 { ArrowUpIcon, ThumbsUpIcon, ThumbsDownIcon } from "lucide-react";
 import { usePostHog } from "posthog-js/react";
 import {
   type ChangeEvent,
@@ -15,13 +15,15 @@ import {
   useRef,
   useState,
 } from "react";
-import { getChatResponse } from "./api";
+import { getChatResponse, sendFeedback } from "./api";
+import siwaIcon from "@/icons/siwa-icon.png";
 
 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" />
+      <img src={siwaIcon.src} alt="SIWA" className="size-16" />
 
       <h2 className="font-semibold text-3xl text-foreground">
         How can I help you <br />
@@ -132,13 +134,17 @@ export function Chat() {
   );
 
   useEffect(() => {
-    if (lastMessageRef.current && messages.length > 0) {
-      lastMessageRef.current.scrollIntoView({
-        behavior: "smooth",
-        block: "start",
-      });
-    }
-  }, [messages.length]);
+    const timer = setTimeout(() => {
+      if (lastMessageRef.current) {
+        lastMessageRef.current.scrollIntoView({
+          behavior: "smooth",
+          block: "end",
+        });
+      }
+    }, 100);
+    
+    return () => clearTimeout(timer);
+  }, [messages]);
 
   const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     setInput(e.target.value);
@@ -153,6 +159,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 +204,35 @@ 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="flex gap-2 mt-2">
+                          {!message.feedback && (
+                            <>
+                              <button
+                                aria-label="Thumbs up"
+                                className="hover:text-green-500 transition-colors text-muted-foreground"
+                                onClick={() => handleFeedback(message.id, 1)}
+                              >
+                                <ThumbsUpIcon className="size-5" />
+                              </button>
+                              <button
+                                aria-label="Thumbs down"
+                                className="hover:text-red-500 transition-colors text-muted-foreground"
+                                onClick={() => handleFeedback(message.id, -1)}
+                              >
+                                <ThumbsDownIcon className="size-5" />
+                              </button>
+                            </>
+                          )}
+                        </div>
+                      )}
+                    </>
                   )}
                 </div>
               </div>