Provide a way to fix dyad-output errors with AI (#67)

src/components/chat/DyadOutput.tsx

@@ -4,8 +4,11 @@ import {
   ChevronsUpDown,
   AlertTriangle,
   XCircle,
+  Sparkles,
 } from "lucide-react";
-
+import { useAtom, useSetAtom } from "jotai";
+import { chatInputValueAtom, selectedChatIdAtom } from "@/atoms/chatAtoms";
+import { useStreamChat } from "@/hooks/useStreamChat";
 interface DyadOutputProps {
   type: "error" | "warning";
   message?: string;
@@ -18,6 +21,8 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
   children,
 }) => {
   const [isContentVisible, setIsContentVisible] = useState(false);
+  const [selectedChatId, setSelectedChatId] = useAtom(selectedChatIdAtom);
+  const { streamMessage } = useStreamChat();
 
   // If the type is not warning, it is an error (in case LLM gives a weird "type")
   const isError = type !== "warning";
@@ -30,9 +35,19 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
   );
   const label = isError ? "Error" : "Warning";
 
+  const handleAIFix = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (message && selectedChatId) {
+      streamMessage({
+        prompt: `Fix the error: ${message}`,
+        chatId: selectedChatId,
+      });
+    }
+  };
+
   return (
     <div
-      className={`relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer ${borderColor}`}
+      className={`relative bg-(--background-lightest) hover:bg-(--background-lighter) rounded-lg px-4 py-2 border my-2 cursor-pointer min-h-18 ${borderColor}`}
       onClick={() => setIsContentVisible(!isContentVisible)}
     >
       {/* Top-left label badge */}
@@ -43,12 +58,26 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
         {icon}
         <span>{label}</span>
       </div>
+
+      {/* Fix with AI button - always visible for errors */}
+      {isError && message && (
+        <div className="absolute top-9 left-2">
+          <button
+            onClick={handleAIFix}
+            className="cursor-pointer flex items-center justify-center bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-800 text-white rounded text-xs p-1 w-24 h-6"
+          >
+            <Sparkles size={16} className="mr-1" />
+            <span>Fix with AI</span>
+          </button>
+        </div>
+      )}
+
       {/* Main content, padded to avoid label */}
-      <div className="flex items-center justify-between pl-20">
+      <div className="flex items-center justify-between pl-24 pr-6">
         <div className="flex items-center gap-2">
           {message && (
             <span className="text-gray-700 dark:text-gray-300 font-medium text-sm">
-              {message.slice(0, isContentVisible ? undefined : 80) +
+              {message.slice(0, isContentVisible ? undefined : 100) +
                 (!isContentVisible ? "..." : "")}
             </span>
           )}
@@ -67,8 +96,10 @@ export const DyadOutput: React.FC<DyadOutputProps> = ({
           )}
         </div>
       </div>
+
+      {/* Content area */}
       {isContentVisible && children && (
-        <div className="text-sm mt-2 text-gray-800 dark:text-gray-200 pl-20">
+        <div className="mt-4 pl-20 text-sm text-gray-800 dark:text-gray-200">
           {children}
         </div>
       )}