fix: tweak error display in ttd (#10668)

fix: better error handling for ttd

packages/excalidraw/components/TTDDialog/Chat/Chat.scss

@@ -339,12 +339,21 @@ $verticalBreakpoint: 861px;
       gap: 0.5rem;
     }
 
+    &__error_message {
+      background: var(--color-warning-background);
+      color: var(--color-warning-color);
+
+      padding: 0.5rem 0.75rem;
+      border-radius: var(--border-radius-md);
+      margin-top: 1rem;
+      font-size: 0.875rem;
+    }
+
     &__error-link {
       display: flex;
       align-items: center;
       background: none;
       border: none;
-      color: var(--color-primary);
       cursor: pointer;
       font-size: 0.875rem;
       font-weight: 500;
@@ -352,6 +361,14 @@ $verticalBreakpoint: 861px;
       margin-top: 1rem;
       text-decoration: underline;
       font-family: inherit;
+      color: var(--link-color);
+
+      &:hover {
+        color: var(--link-color-hover);
+      }
+      &:active {
+        color: var(--link-color-active);
+      }
 
       &:disabled {
         cursor: not-allowed;

packages/excalidraw/components/TTDDialog/Chat/ChatMessage.tsx

@@ -123,8 +123,13 @@ export const ChatMessage: React.FC<{
           {message.error ? (
             <>
               <div className="chat-message__error">{message.content}</div>
+              {message.errorType !== "parse" && (
+                <div className="chat-message__error_message">
+                  Error: {message.error || t("chat.errors.generationFailed")}
+                </div>
+              )}
               {message.errorType === "parse" && allowFixingParseError && (
-                <>
+                <div className="chat-message__error_message">
                   <p>{t("chat.errors.invalidDiagram")}</p>
                   <div className="chat-message__error-actions">
                     {onMermaidTabClick && (
@@ -147,7 +152,7 @@ export const ChatMessage: React.FC<{
                       </button>
                     )}
                   </div>
-                </>
+                </div>
               )}
             </>
           ) : (

packages/excalidraw/components/TTDDialog/utils/TTDStreamFetch.ts

@@ -32,7 +32,7 @@ export type StreamChunk =
       type: "error";
       error: {
         message: string;
-        code?: string;
+        status?: number;
       };
     };
 

packages/excalidraw/css/theme.scss

@@ -26,6 +26,8 @@
   --island-bg-color-alt: #fff;
   --keybinding-color: var(--color-gray-40);
   --link-color: #{$color-blue-7};
+  --link-color-hover: #{$color-blue-8};
+  --link-color-active: #{$color-blue-2};
   --overlay-bg-color: #{color.adjust(#fff, $alpha: -0.12)};
   --popup-bg-color: var(--island-bg-color);
   --popup-secondary-bg-color: #{$color-gray-1};