[Dashboard] siwa chat widget

apps/dashboard/src/app/(app)/(dashboard)/support/page.tsx

@@ -10,7 +10,7 @@ import contractsIcon from "../../../../../public/assets/support/contracts.png";
 import engineIcon from "../../../../../public/assets/support/engine.png";
 import miscIcon from "../../../../../public/assets/support/misc.svg";
 import connectIcon from "../../../../../public/assets/support/wallets.png";
-import { NebulaChatButton } from "../../../nebula-app/(app)/components/FloatingChat/FloatingChat";
+import { CustomChatButton } from "../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
 import {
   getAuthToken,
   getAuthTokenWalletAddress,
@@ -129,8 +129,7 @@ export default async function SupportPage() {
     teamId: undefined,
   });
 
-  const supportPromptPrefix =
-    "You are a Customer Success Agent at thirdweb, assisting customers with blockchain and Web3-related issues. Use the following details to craft a professional, empathetic response: ";
+  const supportPromptPrefix = "";
   const examplePrompts = [
     "ERC20 - Transfer Amount Exceeds Allowance",
     "Replacement transaction underpriced / Replacement fee too low",
@@ -157,14 +156,14 @@ export default async function SupportPage() {
               team.
             </p>
             <div className="mt-6 flex w-full flex-col items-center gap-3">
-              <NebulaChatButton
+              <CustomChatButton
                 isLoggedIn={!!accountAddress}
                 networks="all"
                 isFloating={false}
                 pageType="support"
-                label="Ask Nebula AI for support"
+                label="Ask Siwa AI for support"
                 client={client}
-                nebulaParams={{
+                customApiParams={{
                   messagePrefix: supportPromptPrefix,
                   chainIds: [],
                   wallet: accountAddress ?? undefined,
@@ -173,6 +172,7 @@ export default async function SupportPage() {
                   title: prompt,
                   message: prompt,
                 }))}
+                authToken={authToken || undefined}
               />
 
               <Link

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

@@ -1,8 +1,8 @@
 import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { cn } from "@/lib/utils";
 import { MarkdownRenderer } from "components/contract-components/published-contract/markdown-renderer";
-import { AlertCircleIcon } from "lucide-react";
-import { useEffect, useRef } from "react";
+import { AlertCircleIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import type { NebulaSwapData } from "../api/chat";
 import type { NebulaUserMessage, NebulaUserMessageContent } from "../api/types";
@@ -224,6 +224,40 @@ function RenderMessage(props: {
     );
   }
 
+  // Feedback for assistant messages
+  if (props.message.type === "assistant") {
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-3">
+          {/* Left Icon */}
+          <div className="-translate-y-[2px] relative shrink-0">
+            <div className="flex size-9 items-center justify-center rounded-full border bg-card">
+              <NebulaIcon className="size-5 text-muted-foreground" />
+            </div>
+          </div>
+          {/* Right Message */}
+          <div className="min-w-0 grow">
+            <ScrollShadow className="rounded-lg">
+              <RenderResponse
+                message={message}
+                isMessagePending={props.isMessagePending}
+                client={props.client}
+                sendMessage={props.sendMessage}
+                nextMessage={props.nextMessage}
+                sessionId={props.sessionId}
+                authToken={props.authToken}
+              />
+            </ScrollShadow>
+            <FeedbackButtons
+              sessionId={props.sessionId}
+              messageText={message.type === "assistant" ? message.text : ""}
+            />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex gap-3">
       {/* Left Icon */}
@@ -422,3 +456,62 @@ function StyledMarkdownRenderer(props: {
     />
   );
 }
+
+function FeedbackButtons({
+  sessionId,
+  messageText,
+}: { sessionId: string | undefined; messageText: string }) {
+  const [feedback, setFeedback] = useState<"good" | "bad" | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [thankYou, setThankYou] = useState(false);
+
+  async function sendFeedback(rating: "good" | "bad") {
+    setLoading(true);
+    try {
+      await fetch("https://siwa-api.thirdweb-dev.com/v1/feedback", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          conversationId: sessionId,
+          message: messageText,
+          rating,
+        }),
+      });
+      setFeedback(rating);
+      setThankYou(true);
+    } catch (e) {
+      // handle error
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  if (thankYou) {
+    return (
+      <div className="mt-2 text-xs text-muted-foreground">
+        Thank you for your feedback!
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2 mt-2">
+      <button
+        className="p-1 rounded-full border hover:bg-muted-foreground/10"
+        onClick={() => sendFeedback("good")}
+        disabled={loading}
+        aria-label="Thumbs up"
+      >
+        <ThumbsUpIcon className="size-4 text-green-500" />
+      </button>
+      <button
+        className="p-1 rounded-full border hover:bg-muted-foreground/10"
+        onClick={() => sendFeedback("bad")}
+        disabled={loading}
+        aria-label="Thumbs down"
+      >
+        <ThumbsDownIcon className="size-4 text-red-500" />
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { MessageCircleIcon, XIcon } from "lucide-react";
+import { useCallback, useRef, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import type { ExamplePrompt } from "../../data/examplePrompts";
+import CustomChatContent from "./CustomChatContent";
+
+export function CustomChatButton(props: {
+  isLoggedIn: boolean;
+  networks: "mainnet" | "testnet" | "all" | null;
+  isFloating: boolean;
+  pageType: "chain" | "contract" | "support";
+  label: string;
+  client: ThirdwebClient;
+  customApiParams: any;
+  examplePrompts: ExamplePrompt[];
+  authToken: string | undefined;
+  requireLogin?: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasBeenOpened, setHasBeenOpened] = useState(false);
+  const [isDismissed, setIsDismissed] = useState(false);
+  const closeModal = useCallback(() => setIsOpen(false), []);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  // (optional: can add if you want exact Nebula behavior)
+  // useEffect(() => { ... }, [onOutsideClick]);
+
+  if (isDismissed) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Inline Button (not floating) */}
+      <Button
+        onClick={() => {
+          setIsOpen(true);
+          setHasBeenOpened(true);
+        }}
+        variant="default"
+        className="gap-2 rounded-full shadow-lg"
+      >
+        <MessageCircleIcon className="size-4" />
+        {props.label}
+      </Button>
+
+      {/* Popup/Modal */}
+      <div
+        className={cn(
+          "slide-in-from-bottom-20 zoom-in-95 fade-in-0 fixed bottom-0 left-0 z-50 flex h-[80vh] w-[100vw] animate-in flex-col overflow-hidden rounded-t-2xl border bg-background shadow-2xl duration-200 lg:right-6 lg:bottom-6 lg:left-auto lg:h-[80vh] lg:max-w-xl lg:rounded-xl",
+          !isOpen && "hidden",
+        )}
+        ref={ref}
+      >
+        {/* Header with close button */}
+        <div className="flex items-center justify-between border-b px-4 py-2">
+          <div className="font-semibold text-lg flex items-center gap-2">
+            <MessageCircleIcon className="size-5 text-muted-foreground" />
+            {props.label}
+          </div>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={closeModal}
+            className="h-auto w-auto p-1 text-muted-foreground"
+            aria-label="Close chat"
+          >
+            <XIcon className="size-5" />
+          </Button>
+        </div>
+        {/* Chat Content */}
+        <div className="relative flex grow flex-col overflow-hidden">
+          {hasBeenOpened && isOpen && (
+            <CustomChatContent
+              authToken={props.authToken}
+              client={props.client}
+              examplePrompts={props.examplePrompts}
+              pageType={props.pageType}
+              customApiParams={props.customApiParams}
+              networks={props.networks}
+              requireLogin={props.requireLogin}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+}