- ({
- title: prompt,
- message: prompt,
- }))}
+ label="Ask AI for support"
+ examplePrompts={siwaExamplePrompts}
+ authToken={authToken || undefined}
+ teamId={teamId}
+ clientId={undefined}
/>
{props.children}
+
);
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/layout.tsx
index 524059cef0c..aeda1c9d704 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/layout.tsx
@@ -3,7 +3,9 @@ import { getTeams } from "@/api/team";
import { SidebarProvider } from "@/components/ui/sidebar";
import { AnnouncementBanner } from "components/notices/AnnouncementBanner";
import { redirect } from "next/navigation";
+import { siwaExamplePrompts } from "../../../(dashboard)/support/page";
import { getClientThirdwebClient } from "../../../../../@/constants/thirdweb-client.client";
+import { CustomChatButton } from "../../../../nebula-app/(app)/components/CustomChat/CustomChatButton";
import { getValidAccount } from "../../../account/settings/getAccount";
import {
getAuthToken,
@@ -78,6 +80,19 @@ export default async function ProjectLayout(props: {
{props.children}
+
+
+
+
+ );
+ }
+
return (
+ {/* Left Icon */}
+
+
+
+ {/* Right Message */}
+
+
+
+
+
+
+
{/* Left Icon */}
@@ -422,3 +462,81 @@ function StyledMarkdownRenderer(props: {
/>
);
}
+
+function FeedbackButtons({
+ sessionId,
+ authToken,
+ teamId,
+}: {
+ sessionId: string | undefined;
+ authToken: string;
+ teamId: string | undefined;
+}) {
+ const [, setFeedback] = useState<1 | -1 | null>(null);
+ const [loading, setLoading] = useState(false);
+ const [thankYou, setThankYou] = useState(false);
+ const trackEvent = useTrack();
+
+ async function sendFeedback(rating: 1 | -1) {
+ setLoading(true);
+ try {
+ trackEvent({
+ category: "siwa",
+ action: "submit-feedback",
+ rating: rating === 1 ? "good" : "bad",
+ sessionId,
+ teamId,
+ });
+ const apiUrl = process.env.NEXT_PUBLIC_SIWA_URL;
+ await fetch(`${apiUrl}/v1/chat/feedback`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${authToken}`,
+ ...(teamId ? { "x-team-id": teamId } : {}),
+ },
+ body: JSON.stringify({
+ conversationId: sessionId,
+ feedbackRating: rating,
+ }),
+ });
+ setFeedback(rating);
+ setThankYou(true);
+ } catch {
+ // TODO handle error
+ } finally {
+ setLoading(false);
+ }
+ }
+
+ if (thankYou) {
+ return (
+ (null);
+ const trackEvent = useTrack();
+
+ return (
+ <>
+ {/* Inline Button (not floating) */}
+
+
+ {/* Popup/Modal */}
+ >([]);
+ // sessionId is initially undefined, will be set to conversationId from API after first response
+ const [sessionId, setSessionId] = useState(undefined);
+ const [chatAbortController, setChatAbortController] = useState<
+ AbortController | undefined
+ >();
+ const trackEvent = useTrack();
+ const [isChatStreaming, setIsChatStreaming] = useState(false);
+ const [enableAutoScroll, setEnableAutoScroll] = useState(false);
+ const connectionStatus = useActiveWalletConnectionStatus();
+
+ const handleSendMessage = useCallback(
+ async (userMessage: NebulaUserMessage) => {
+ const abortController = new AbortController();
+ setUserHasSubmittedMessage(true);
+ setIsChatStreaming(true);
+ setEnableAutoScroll(true);
+
+ const textMessage = userMessage.content.find((x) => x.type === "text");
+
+ trackEvent({
+ category: "siwa",
+ action: "send-message",
+ message: textMessage?.text,
+ sessionId: sessionId,
+ });
+
+ setMessages((prev) => [
+ ...prev,
+ {
+ type: "user",
+ content: userMessage.content,
+ },
+ // instant loading indicator feedback to user
+ {
+ type: "presence",
+ texts: [],
+ },
+ ]);
+
+ // if this is first message, set the message prefix
+ // deep clone `userMessage` to avoid mutating the original message, its a pretty small object so JSON.parse is fine
+ const messageToSend = JSON.parse(
+ JSON.stringify(userMessage),
+ ) as NebulaUserMessage;
+
+ try {
+ setChatAbortController(abortController);
+ // --- Custom API call ---
+ const payload = {
+ message:
+ messageToSend.content.find((x) => x.type === "text")?.text ?? "",
+ conversationId: sessionId,
+ };
+ const apiUrl = process.env.NEXT_PUBLIC_SIWA_URL;
+ const response = await fetch(`${apiUrl}/v1/chat`, {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${props.authToken}`,
+ ...(props.teamId ? { "x-team-id": props.teamId } : {}),
+ ...(props.clientId ? { "x-client-id": props.clientId } : {}),
+ },
+ body: JSON.stringify(payload),
+ signal: abortController.signal,
+ });
+ const data = await response.json();
+ // If the response contains a conversationId, set it as the sessionId for future messages
+ if (data.conversationId && data.conversationId !== sessionId) {
+ setSessionId(data.conversationId);
+ }
+ setMessages((prev) => [
+ ...prev.slice(0, -1), // remove presence indicator
+ {
+ type: "assistant",
+ request_id: undefined,
+ text: data.data,
+ },
+ ]);
+ } catch (error) {
+ if (abortController.signal.aborted) {
+ return;
+ }
+ setMessages((prev) => [
+ ...prev.slice(0, -1),
+ {
+ type: "assistant",
+ request_id: undefined,
+ text: `Sorry, something went wrong. ${error instanceof Error ? error.message : "Unknown error"}`,
+ },
+ ]);
+ } finally {
+ setIsChatStreaming(false);
+ setEnableAutoScroll(false);
+ }
+ },
+ [props.authToken, props.clientId, props.teamId, sessionId, trackEvent],
+ );
+
+ const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
+ return (
+
void;
-}) {
+function ExamplePrompt(props: { label: string; onClick: () => void }) {
return (
) : (
void;
-}) {
+function ExamplePromptButton(props: { label: string; onClick: () => void }) {
return (
+ Thank you for your feedback!
+
+ );
+ }
+
+ return (
+
+
+
+
+ );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
new file mode 100644
index 00000000000..72801f5a5b9
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatButton.tsx
@@ -0,0 +1,98 @@
+"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 { createThirdwebClient } from "thirdweb";
+import { NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID } from "../../../../../@/constants/public-envs";
+import { useTrack } from "../../../../../hooks/analytics/useTrack";
+import CustomChatContent from "./CustomChatContent";
+
+// Create a thirdweb client for the chat functionality
+const client = createThirdwebClient({
+ clientId: NET_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID,
+});
+
+export function CustomChatButton(props: {
+ isLoggedIn: boolean;
+ networks: "mainnet" | "testnet" | "all" | null;
+ isFloating: boolean;
+ pageType: "chain" | "contract" | "support";
+ label: string;
+ examplePrompts: string[];
+ authToken: string | undefined;
+ teamId: string | undefined;
+ clientId: string | undefined;
+ requireLogin?: boolean;
+}) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [hasBeenOpened, setHasBeenOpened] = useState(false);
+ const closeModal = useCallback(() => setIsOpen(false), []);
+ const ref = useRef
+ {/* Header with close button */}
+
+
+ );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
new file mode 100644
index 00000000000..6eb1b3767a0
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
@@ -0,0 +1,284 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { useTrack } from "hooks/analytics/useTrack";
+import { ArrowRightIcon } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useCallback, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { useActiveWalletConnectionStatus } from "thirdweb/react";
+import type { NebulaContext } from "../../api/chat";
+import type { NebulaUserMessage } from "../../api/types";
+import type { ExamplePrompt } from "../../data/examplePrompts";
+import { NebulaIcon } from "../../icons/NebulaIcon";
+import { ChatBar } from "../ChatBar";
+import { Chats } from "../Chats";
+import type { ChatMessage } from "../Chats";
+
+export default function CustomChatContent(props: {
+ authToken: string | undefined;
+ teamId: string | undefined;
+ clientId: string | undefined;
+ client: ThirdwebClient;
+ examplePrompts: ExamplePrompt[];
+ networks: NebulaContext["networks"];
+ requireLogin?: boolean;
+}) {
+ if (props.requireLogin !== false && !props.authToken) {
+ return
+
+ {/* Chat Content */}
+
+
+
+
+ {hasBeenOpened && isOpen && (
+ ({
+ message: prompt,
+ title: prompt,
+ }))}
+ networks={props.networks}
+ requireLogin={props.requireLogin}
+ />
+ )}
+
+
+ {showEmptyState ? (
+ {}}
+ showContextSelector={false}
+ connectedWallets={[]}
+ setActiveWallet={() => {}}
+ abortChatStream={() => {
+ chatAbortController?.abort();
+ setChatAbortController(undefined);
+ setIsChatStreaming(false);
+ // if last message is presence, remove it
+ if (messages[messages.length - 1]?.type === "presence") {
+ setMessages((prev) => prev.slice(0, -1));
+ }
+ }}
+ isChatStreaming={isChatStreaming}
+ prefillMessage={undefined}
+ sendMessage={handleSendMessage}
+ className="rounded-none border-x-0 border-b-0"
+ allowImageUpload={false}
+ />
+
+ );
+}
+
+function LoggedOutStateChatContent() {
+ const pathname = usePathname();
+ return (
+
+
+ How can I help you
+
+
+
+ );
+}
+
+function EmptyStateChatPageContent(props: {
+ sendMessage: (message: NebulaUserMessage) => void;
+ examplePrompts: { title: string; message: string }[];
+}) {
+ return (
+
+
+
+
+
+
+
+
+ How can I help you
+ today?
+
+
+
+ + Sign in to use AI Assistant +
+ + + +
+
+ How can I help you
+
+
+
+ );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
index 011c803c80f..d23f9e02ba3 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -43,6 +43,7 @@ export function EmptyStateChatPageContent(props: {
+
+
+
+
+
+
+
+ How can I help you
+ today?
+
+
+
+
+ {props.examplePrompts.map((prompt) => (
+
+ ))}
+
+