Add console, theme and screenshot to views (rebased) (#1738)

* feat: implement theme-aware views with real-time updates and AI integration

- Added a new `THEMED_VIEWS_IMPLEMENTATION.md` document summarizing the feature.
- Enhanced `view-template.ts` to inject theme variables into generated HTML.
- Updated `view-detail.tsx` to listen for theme changes and regenerate views accordingly.
- Introduced comprehensive AI prompts in `api.ts` to guide theme token usage.
- Created `view-console.tsx` for logging and debugging within views.
- Added new example and documentation files to demonstrate theme token usage.
- Updated package dependencies to include `html2canvas` for improved functionality.

* refactor(ChatInput): replace hardcoded focus delay with constant

- Introduced a constant `EDITOR_FOCUS_DELAY` for the focus delay in ChatInput, improving code readability and maintainability.
- Updated focus handling to use the new constant instead of a hardcoded value.
- Removed unused `handleSendMessage` function from AgenticChatProvider to streamline event handling.
- Simplified log formatting in SendLogsButton by utilizing the `formatLogEntry` utility function.

* feat(ChatInput): enhance screenshot and logs handling with custom events

- Introduced `ChatTemplates` for standardized message formatting in chat input.
- Replaced direct event handling with custom event listeners for screenshots and logs, improving code clarity and maintainability.
- Updated error handling to provide user feedback via toast notifications when adding screenshots fails.

* refactor(ChatMessages): simplify message handling by removing deduplication logic

- Removed the deduplication of messages by ID, streamlining the message rendering process.
- Updated related logic to directly use the `messages` array from the chat context, improving clarity and performance.

Author: vibegui

THEMED_VIEWS_IMPLEMENTATION.md

@@ -50,6 +50,7 @@
     "cronstrue": "^2.59.0",
     "date-fns": "^4.1.0",
     "gsap": "^3.12.7",
+    "html2canvas": "^1.4.1",
     "json-schema": "^0.4.0",
     "lucide-react": "^0.545.0",
     "marked": "^15.0.7",

apps/web/package.json

@@ -19,18 +19,21 @@ import {
   type KeyboardEvent,
   type ReactNode,
 } from "react";
+import { toast } from "sonner";
 import { useAgentSettingsToolsSet } from "../../hooks/use-agent-settings-tools-set.ts";
 import { useFileUpload } from "../../hooks/use-file-upload.ts";
 import { useUserPreferences } from "../../hooks/use-user-preferences.ts";
 import { ContextResources } from "../chat/context-resources.tsx";
 import { useThreadContext } from "../decopilot/thread-context-provider.tsx";
 import { SelectConnectionDialog } from "../integrations/select-connection-dialog.tsx";
 import { AudioButton } from "./audio-button.tsx";
+import { ChatTemplates } from "./chat-templates.ts";
 import { ErrorBanner } from "./error-banner.tsx";
 import { ModelSelector } from "./model-selector.tsx";
 import { useAgenticChat } from "./provider.tsx";
 import { RichTextArea, type RichTextAreaHandle } from "./rich-text.tsx";
 import type { ToolsetContextItem } from "./types.ts";
+import { onLogsAdded, onScreenshotAdded } from "../../utils/custom-events.ts";
 
 export function ChatInput({
   disabled,
@@ -61,6 +64,7 @@ export function ChatInput({
 
   const {
     uploadedFiles,
+    setUploadedFiles,
     isDragging,
     fileInputRef,
     handleFileChange,
@@ -74,6 +78,9 @@ export function ChatInput({
   // Read from ThreadContextProvider
   const { contextItems, addContextItem } = useThreadContext();
 
+  // Delay for editor focus to ensure DOM is ready
+  const EDITOR_FOCUS_DELAY = 100;
+
   // Check if there are any context resources to display
   const hasContextResources = useMemo(() => {
     const hasFiles = uploadedFiles.length > 0;
@@ -112,6 +119,65 @@ export function ChatInput({
     }
   }, [isLoading]);
 
+  // Listen for screenshot events from view detail
+  useEffect(() => {
+    return onScreenshotAdded(({ blob, filename, url }) => {
+      try {
+        // Create File object from the blob (no re-fetch needed!)
+        const file = new File([blob], filename, {
+          type: "image/png",
+        });
+
+        // Add to uploaded files
+        setUploadedFiles((prev) => [
+          ...prev,
+          {
+            file,
+            status: "done",
+            url,
+          },
+        ]);
+
+        // Add default screenshot text to input
+        setTimeout(() => {
+          const currentInput = input || "";
+          const newText = currentInput
+            ? `${ChatTemplates.screenshot}${currentInput}`
+            : ChatTemplates.screenshot;
+
+          setInput(newText);
+
+          // Focus the editor
+          if (richTextRef.current) {
+            richTextRef.current.focus();
+          }
+        }, EDITOR_FOCUS_DELAY);
+      } catch (error) {
+        console.error("Failed to add screenshot:", error);
+        toast.error("Failed to add screenshot to chat");
+      }
+    });
+  }, [setUploadedFiles, input, setInput]);
+
+  // Listen for logs events from view detail
+  useEffect(() => {
+    return onLogsAdded(({ logs }) => {
+      // Add logs to the input
+      setTimeout(() => {
+        const currentInput = input || "";
+        const logsText = ChatTemplates.logs(logs);
+        const newText = currentInput ? `${logsText}${currentInput}` : logsText;
+
+        setInput(newText);
+
+        // Focus the editor
+        if (richTextRef.current) {
+          richTextRef.current.focus();
+        }
+      }, EDITOR_FOCUS_DELAY);
+    });
+  }, [input, setInput]);
+
   const isMobile =
     typeof window !== "undefined" &&
     ("ontouchstart" in window ||

apps/web/src/components/chat/chat-input.tsx

@@ -0,0 +1,9 @@
+/**
+ * Text templates for chat input messages
+ */
+
+export const ChatTemplates = {
+  screenshot: "Here's a screenshot of the current view:\n\n",
+  logs: (logs: string) =>
+    `Here are the console logs:\n\n\`\`\`\n${logs}\n\`\`\`\n\n`,
+} as const;

apps/web/src/components/chat/chat-templates.ts

@@ -215,7 +215,7 @@ const ToolStatus = memo(function ToolStatus({
           tabIndex={0}
           onClick={onClick}
           className={cn(
-            "w-full flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors",
+            "w-full flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
             !isSingle && "hover:bg-accent rounded-lg p-2",
           )}
         >
@@ -230,19 +230,22 @@ const ToolStatus = memo(function ToolStatus({
             <div className="size-5 rounded-full bg-muted/30 shrink-0" />
           )}
           <div className="flex-1 min-w-0">
-            <div className="flex items-center gap-2">
-              <div className="flex items-center gap-2">
+            <div className="flex items-center gap-2 min-w-0">
+              <div className="flex items-center gap-2 min-w-0 flex-1">
                 <div
                   className={cn(
-                    "font-medium truncate max-w-[60vw] md:max-w-full",
+                    "font-medium truncate",
                     isLoading &&
                       "bg-linear-to-r from-foreground via-foreground/50 to-foreground bg-size-[200%_100%] animate-shimmer bg-clip-text text-transparent",
                   )}
                 >
                   {toolName}
                 </div>
                 <div
-                  className={cn("text-xs opacity-70", statusConfig.className)}
+                  className={cn(
+                    "text-xs opacity-70 shrink-0",
+                    statusConfig.className,
+                  )}
                 >
                   {statusText}
                 </div>