diff --git a/src/atoms/appAtoms.ts b/src/atoms/appAtoms.ts index c4d20ba..9a692b8 100644 --- a/src/atoms/appAtoms.ts +++ b/src/atoms/appAtoms.ts @@ -23,4 +23,6 @@ export const envVarsAtom = atom>({}); export const previewPanelKeyAtom = atom(0); -export const previewErrorMessageAtom = atom(undefined); +export const previewErrorMessageAtom = atom< + { message: string; source: "preview-app" | "dyad-app" } | undefined +>(undefined); diff --git a/src/components/preview_panel/PreviewIframe.tsx b/src/components/preview_panel/PreviewIframe.tsx index 90ecbff..37bb350 100644 --- a/src/components/preview_panel/PreviewIframe.tsx +++ b/src/components/preview_panel/PreviewIframe.tsx @@ -41,9 +41,10 @@ import { } from "@/components/ui/tooltip"; import { useRunApp } from "@/hooks/useRunApp"; import { useShortcut } from "@/hooks/useShortcut"; +import { cn } from "@/lib/utils"; interface ErrorBannerProps { - error: string | undefined; + error: { message: string; source: "preview-app" | "dyad-app" } | undefined; onDismiss: () => void; onAIFix: () => void; } @@ -52,12 +53,12 @@ const ErrorBanner = ({ error, onDismiss, onAIFix }: ErrorBannerProps) => { const [isCollapsed, setIsCollapsed] = useState(true); const { isStreaming } = useStreamChat(); if (!error) return null; - const isDockerError = error.includes("Cannot connect to the Docker"); + const isDockerError = error.message.includes("Cannot connect to the Docker"); const getTruncatedError = () => { - const firstLine = error.split("\n")[0]; + const firstLine = error.message.split("\n")[0]; const snippetLength = 250; - const snippet = error.substring(0, snippetLength); + const snippet = error.message.substring(0, snippetLength); return firstLine.length < snippet.length ? firstLine : snippet + (snippet.length === snippetLength ? "..." : ""); @@ -76,8 +77,20 @@ const ErrorBanner = ({ error, onDismiss, onAIFix }: ErrorBannerProps) => { + {/* Add a little chip that says "Internal error" if source is "dyad-app" */} + {error.source === "dyad-app" && ( +
+ Internal Dyad error +
+ )} + {/* Error message in the middle */} -
+
setIsCollapsed(!isCollapsed)} @@ -88,7 +101,7 @@ const ErrorBanner = ({ error, onDismiss, onAIFix }: ErrorBannerProps) => { isCollapsed ? "" : "rotate-90" }`} /> - {isCollapsed ? getTruncatedError() : error} + {isCollapsed ? getTruncatedError() : error.message}
@@ -102,13 +115,15 @@ const ErrorBanner = ({ error, onDismiss, onAIFix }: ErrorBannerProps) => { Tip: {isDockerError ? "Make sure Docker Desktop is running and try restarting the app." - : "Check if restarting the app fixes the error."} + : error.source === "dyad-app" + ? "Try restarting the Dyad app or restarting your computer to see if that fixes the error." + : "Check if restarting the app fixes the error."}
{/* AI Fix button at the bottom */} - {!isDockerError && ( + {!isDockerError && error.source === "preview-app" && (