Add "Start new chat" button to error box for Dyad Pro users (#2494)

src/components/chat/ChatErrorBox.tsx

@@ -4,18 +4,26 @@ import {
   X,
   ExternalLink as ExternalLinkIcon,
   CircleArrowUp,
+  MessageSquarePlus,
 } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 export function ChatErrorBox({
   onDismiss,
   error,
   isDyadProEnabled,
+  onStartNewChat,
 }: {
   onDismiss: () => void;
   error: string;
   isDyadProEnabled: boolean;
+  onStartNewChat?: () => void;
 }) {
   if (error.includes("doesn't have a free quota tier")) {
     return (
@@ -138,6 +146,22 @@ export function ChatErrorBox({
               Upgrade to Dyad Pro
             </ExternalLink>
           )}
+        {isDyadProEnabled && onStartNewChat && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button
+                onClick={onStartNewChat}
+                className="cursor-pointer inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium shadow-sm focus:outline-none focus:ring-2 bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500"
+              >
+                <span>Start new chat</span>
+                <MessageSquarePlus size={18} />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent>
+              Starting a new chat can fix some issues
+            </TooltipContent>
+          </Tooltip>
+        )}
         <ExternalLink href="https://www.dyad.sh/docs/faq">
           Read docs
         </ExternalLink>

src/components/chat/ChatInput.tsx

@@ -80,6 +80,9 @@ import {
   shouldShowContextLimitBanner,
 } from "./ContextLimitBanner";
 import { useCountTokens } from "@/hooks/useCountTokens";
+import { useChats } from "@/hooks/useChats";
+import { useRouter } from "@tanstack/react-router";
+import { showError as showErrorToast } from "@/lib/toast";
 
 const showTokenBarAtom = atom(false);
 
@@ -128,6 +131,9 @@ export function ChatInput({ chatId }: { chatId?: number }) {
   const chatTodos = chatId ? (agentTodosByChatId.get(chatId) ?? []) : [];
   const { checkProblems } = useCheckProblems(appId);
   const { refreshAppIframe } = useRunApp();
+  const { navigate } = useRouter();
+  const setSelectedChatId = useSetAtom(selectedChatIdAtom);
+  const { invalidateChats } = useChats(appId);
   // Use the attachments hook
   const {
     attachments,
@@ -254,6 +260,26 @@ export function ChatInput({ chatId }: { chatId?: number }) {
     setShowError(false);
   };
 
+  const handleNewChat = async () => {
+    if (appId) {
+      try {
+        const newChatId = await ipc.chat.createChat(appId);
+        setSelectedChatId(newChatId);
+        navigate({
+          to: "/chat",
+          search: { id: newChatId },
+        });
+        await invalidateChats();
+      } catch (err) {
+        showErrorToast(
+          `Failed to create new chat: ${(err as Error).toString()}`,
+        );
+      }
+    } else {
+      navigate({ to: "/" });
+    }
+  };
+
   const handleApprove = async () => {
     if (!chatId || !messageId || isApproving || isRejecting || isStreaming)
       return;
@@ -328,6 +354,7 @@ export function ChatInput({ chatId }: { chatId?: number }) {
           onDismiss={dismissError}
           error={error}
           isDyadProEnabled={settings.enableDyadPro ?? false}
+          onStartNewChat={handleNewChat}
         />
       )}
       {/* Display loading or error state for proposal */}