fixes

Author: joaquim-verges

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/layout.tsx

@@ -20,6 +20,7 @@ import { supportedERCs } from "./_utils/detectedFeatures/supportedERCs";
 import { getContractPageParamsInfo } from "./_utils/getContractFromParams";
 import { getContractPageMetadata } from "./_utils/getContractPageMetadata";
 import { getContractPageSidebarLinks } from "./_utils/getContractPageSidebarLinks";
+import { examplePrompts } from "../../../../../nebula-app/(app)/data/examplePrompts";
 
 export default async function Layout(props: {
   params: Promise<{
@@ -94,14 +95,6 @@ Users may be considering integrating the contract into their applications. Discu
 
 The following is the user's message:`;
 
-  const examplePrompts: string[] = [
-    "What does this contract do?",
-    "What permissions or roles exist in this contract?",
-    "Which functions are used the most?",
-    "Has this contract been used recently?",
-    "Who are the largest holders/users of this?",
-  ];
-
   return (
     <ContractPageLayout
       chainMetadata={chainMetadata}
@@ -124,10 +117,7 @@ The following is the user's message:`;
           chainIds: [chainId],
           wallet: accountAddress ?? undefined,
         }}
-        examplePrompts={examplePrompts.map((prompt) => ({
-          title: prompt,
-          message: prompt,
-        }))}
+        examplePrompts={examplePrompts}
       />
       {props.children}
     </ContractPageLayout>

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

@@ -1,6 +1,5 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { BookOpenIcon, ChevronRightIcon } from "lucide-react";
 import type { Metadata } from "next";
 import Image from "next/image";
@@ -10,6 +9,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 { getTeams } from "../../../../@/api/team";
 import { CustomChatButton } from "../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
 import {
   getAuthToken,
@@ -118,24 +118,21 @@ const HELP_PRODUCTS = [
   },
 ] as const;
 
+export const siwaExamplePrompts = [
+  "I see thirdweb support reference # in my console log please help me",
+  "What does this contract revert error mean",
+  "I want to add inapp wallet with sign in with X/twitter auth to my react app",
+  "Here is my code can you tell me why i'm seeing this error",
+];
+
 export default async function SupportPage() {
   const [authToken, accountAddress] = await Promise.all([
     getAuthToken(),
     getAuthTokenWalletAddress(),
   ]);
 
-  const client = getClientThirdwebClient({
-    jwt: authToken,
-    teamId: undefined,
-  });
-
-  const supportPromptPrefix = "";
-  const examplePrompts = [
-    "ERC20 - Transfer Amount Exceeds Allowance",
-    "Replacement transaction underpriced / Replacement fee too low",
-    "Nonce too low: next nonce #, tx nonce #",
-    "Nonce too high",
-  ];
+  const teams = await getTeams();
+  const teamId = teams?.[0]?.id ?? undefined;
 
   return (
     <main className="flex flex-col gap-12 pb-12">
@@ -161,18 +158,14 @@ export default async function SupportPage() {
                 networks="all"
                 isFloating={false}
                 pageType="support"
-                label="Ask Siwa AI for support"
-                client={client}
-                customApiParams={{
-                  messagePrefix: supportPromptPrefix,
-                  chainIds: [],
-                  wallet: accountAddress ?? undefined,
-                }}
+                label="Ask AI for support"
                 examplePrompts={examplePrompts.map((prompt) => ({
                   title: prompt,
                   message: prompt,
                 }))}
                 authToken={authToken || undefined}
+                teamId={teamId}
+                clientId={undefined}
               />
 
               <Link

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/layout.tsx

@@ -5,6 +5,8 @@ import { TabPathLinks } from "@/components/ui/tabs";
 import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
 import { redirect } from "next/navigation";
 import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
+import { CustomChatButton } from "../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
+import { examplePrompts } from "../../../../nebula-app/(app)/data/examplePrompts";
 import { getValidAccount } from "../../../account/settings/getAccount";
 import {
   getAuthToken,
@@ -91,6 +93,23 @@ export default async function TeamLayout(props: {
       </div>
 
       <main className="flex grow flex-col">{props.children}</main>
+      <div className="fixed right-6 bottom-6 z-50">
+        <CustomChatButton
+          isLoggedIn={true}
+          networks="all"
+          isFloating={true}
+          pageType="support"
+          label="Ask AI Assistant"
+          customApiParams={{
+            messagePrefix: `You are helping a user in the team "${team.name}". `,
+            chainIds: [],
+            wallet: undefined,
+          }}
+          examplePrompts={examplePrompts}
+          teamId={team.id}
+          authToken={authToken}
+        />
+      </div>
       <AppFooter />
     </div>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/layout.tsx

@@ -12,6 +12,8 @@ import {
 import { TeamHeaderLoggedIn } from "../../components/TeamHeader/team-header-logged-in.client";
 import { ProjectSidebarLayout } from "./components/ProjectSidebarLayout";
 import { SaveLastUsedProject } from "./components/SaveLastUsedProject";
+import { CustomChatButton } from "../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
+import { siwaExamplePrompts } from "../../../(dashboard)/support/page";
 
 export default async function ProjectLayout(props: {
   children: React.ReactNode;
@@ -78,6 +80,19 @@ export default async function ProjectLayout(props: {
           {props.children}
         </ProjectSidebarLayout>
       </div>
+      <div className="fixed right-6 bottom-6 z-50">
+        <CustomChatButton
+          isLoggedIn={true}
+          networks="all"
+          isFloating={true}
+          pageType="support"
+          label="Ask AI Assistant"
+          examplePrompts={siwaExamplePrompts}
+          teamId={team.id}
+          clientId={project.publishableKey}
+          authToken={authToken}
+        />
+      </div>
       <SaveLastUsedProject projectId={project.id} teamId={team.id} />
     </SidebarProvider>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/layout.tsx

@@ -5,6 +5,7 @@ import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { Suspense } from "react";
+import { getAuthToken } from "../../api/lib/getAuthToken";
 import { EnsureValidConnectedWalletLoginServer } from "../../components/EnsureValidConnectedWalletLogin/EnsureValidConnectedWalletLoginServer";
 import { isTeamOnboardingComplete } from "../../login/onboarding/isOnboardingRequired";
 import { SaveLastVisitedTeamPage } from "../components/last-visited-page/SaveLastVisitedPage";
@@ -18,12 +19,17 @@ export default async function RootTeamLayout(props: {
   params: Promise<{ team_slug: string }>;
 }) {
   const { team_slug } = await props.params;
+  const authToken = await getAuthToken();
   const team = await getTeamBySlug(team_slug).catch(() => null);
 
   if (!team) {
     redirect("/team");
   }
 
+  if (!authToken) {
+    redirect("/login");
+  }
+
   if (!isTeamOnboardingComplete(team)) {
     redirect(`/get-started/team/${team.slug}`);
   }

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

@@ -68,6 +68,7 @@ export function ChatBar(props: {
   isConnectingWallet: boolean;
   allowImageUpload: boolean;
   onLoginClick: undefined | (() => void);
+  placeholder: string;
 }) {
   const [message, setMessage] = useState(props.prefillMessage || "");
   const selectedChainIds = props.context?.chainIds?.map((x) => Number(x)) || [];
@@ -142,7 +143,7 @@ export function ChatBar(props: {
         <div className="p-2">
           <div className="max-h-[200px] overflow-y-auto">
             <AutoResizeTextarea
-              placeholder={"Ask Nebula"}
+              placeholder={props.placeholder}
               value={message}
               onChange={(e) => setMessage(e.target.value)}
               onKeyDown={(e) => {

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

@@ -353,6 +353,7 @@ export function ChatPageContent(props: {
 
               <div className="container max-w-[800px]">
                 <ChatBar
+                  placeholder="Ask Nebula"
                   isConnectingWallet={connectionStatus === "connecting"}
                   showContextSelector={true}
                   connectedWallets={connectedWalletsMeta}

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

@@ -166,6 +166,7 @@ function Variant(props: {
   return (
     <BadgeContainer label={props.label}>
       <ChatBar
+        placeholder={"Ask Nebula"}
         isConnectingWallet={props.isConnectingWallet || false}
         client={storybookThirdwebClient}
         abortChatStream={() => {}}

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

@@ -4,6 +4,7 @@ import { MarkdownRenderer } from "components/contract-components/published-contr
 import { AlertCircleIcon, ThumbsDownIcon, ThumbsUpIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
+import { Button } from "../../../../@/components/ui/button";
 import type { NebulaSwapData } from "../api/chat";
 import type { NebulaUserMessage, NebulaUserMessageContent } from "../api/types";
 import { NebulaIcon } from "../icons/NebulaIcon";
@@ -72,6 +73,7 @@ export function Chats(props: {
   enableAutoScroll: boolean;
   useSmallText?: boolean;
   sendMessage: (message: NebulaUserMessage) => void;
+  teamId: string | undefined;
 }) {
   const { messages, setEnableAutoScroll, enableAutoScroll } = props;
   const scrollAnchorRef = useRef<HTMLDivElement>(null);
@@ -153,6 +155,7 @@ export function Chats(props: {
                     nextMessage={props.messages[index + 1]}
                     authToken={props.authToken}
                     sessionId={props.sessionId}
+                    teamId={props.teamId}
                   />
                 </div>
               );
@@ -172,6 +175,7 @@ function RenderMessage(props: {
   sendMessage: (message: NebulaUserMessage) => void;
   nextMessage: ChatMessage | undefined;
   authToken: string;
+  teamId: string | undefined;
   sessionId: string | undefined;
 }) {
   const { message } = props;
@@ -251,6 +255,8 @@ function RenderMessage(props: {
             <FeedbackButtons
               sessionId={props.sessionId}
               messageText={message.type === "assistant" ? message.text : ""}
+              authToken={props.authToken}
+              teamId={props.teamId}
             />
           </div>
         </div>
@@ -460,17 +466,29 @@ function StyledMarkdownRenderer(props: {
 function FeedbackButtons({
   sessionId,
   messageText,
-}: { sessionId: string | undefined; messageText: string }) {
-  const [feedback, setFeedback] = useState<"good" | "bad" | null>(null);
+  authToken,
+  teamId,
+}: {
+  sessionId: string | undefined;
+  messageText: string;
+  authToken: string;
+  teamId: string | undefined;
+}) {
+  const [, 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", {
+      const apiUrl = process.env.NEXT_PUBLIC_SIWA_URL;
+      await fetch(`${apiUrl}/v1/chat/feedback`, {
         method: "POST",
-        headers: { "Content-Type": "application/json" },
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${authToken}`,
+          ...(teamId ? { "x-team-id": teamId } : {}),
+        },
         body: JSON.stringify({
           conversationId: sessionId,
           message: messageText,
@@ -479,39 +497,41 @@ function FeedbackButtons({
       });
       setFeedback(rating);
       setThankYou(true);
-    } catch (e) {
-      // handle error
+    } catch {
+      // TODO handle error
     } finally {
       setLoading(false);
     }
   }
 
   if (thankYou) {
     return (
-      <div className="mt-2 text-xs text-muted-foreground">
+      <div className="mt-2 text-muted-foreground text-xs">
         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"
+    <div className="mt-2 flex gap-2">
+      <Button
+        className="rounded-full border p-2 hover:bg-muted-foreground/10"
+        variant="ghost"
         onClick={() => sendFeedback("bad")}
         disabled={loading}
         aria-label="Thumbs down"
       >
         <ThumbsDownIcon className="size-4 text-red-500" />
-      </button>
+      </Button>
+      <Button
+        className="rounded-full border p-2 hover:bg-muted-foreground/10"
+        variant="ghost"
+        onClick={() => sendFeedback("good")}
+        disabled={loading}
+        aria-label="Thumbs up"
+      >
+        <ThumbsUpIcon className="size-4 text-green-500" />
+      </Button>
     </div>
   );
 }