gigaclaw 1.4.0

package/lib/chat/components/chat-input.jsx

@@ -0,0 +1,249 @@
+'use client';
+
+import { useRef, useEffect, useCallback, useState } from 'react';
+import { SendIcon, StopIcon, PaperclipIcon, XIcon, FileTextIcon } from './icons.js';
+import { cn } from '../utils.js';
+
+const ACCEPTED_TYPES = [
+  'image/jpeg', 'image/png', 'image/gif', 'image/webp',
+  'application/pdf',
+  'text/plain', 'text/markdown', 'text/csv', 'text/html', 'text/css',
+  'text/javascript', 'text/x-python', 'text/x-typescript',
+  'application/json',
+];
+
+const MAX_FILES = 5;
+
+function isAcceptedType(file) {
+  if (ACCEPTED_TYPES.includes(file.type)) return true;
+  // Fall back to extension for files with generic MIME types
+  const ext = file.name?.split('.').pop()?.toLowerCase();
+  const textExts = ['txt', 'md', 'csv', 'json', 'js', 'ts', 'jsx', 'tsx', 'py', 'html', 'css', 'yml', 'yaml', 'xml', 'sh', 'bash', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'hpp'];
+  return textExts.includes(ext);
+}
+
+function getEffectiveType(file) {
+  if (ACCEPTED_TYPES.includes(file.type) && file.type !== '') return file.type;
+  const ext = file.name?.split('.').pop()?.toLowerCase();
+  const extMap = {
+    txt: 'text/plain', md: 'text/markdown', csv: 'text/csv',
+    json: 'application/json', js: 'text/javascript', ts: 'text/x-typescript',
+    jsx: 'text/javascript', tsx: 'text/x-typescript', py: 'text/x-python',
+    html: 'text/html', css: 'text/css', yml: 'text/plain', yaml: 'text/plain',
+    xml: 'text/plain', sh: 'text/plain', bash: 'text/plain', rb: 'text/plain',
+    go: 'text/plain', rs: 'text/plain', java: 'text/plain', c: 'text/plain',
+    cpp: 'text/plain', h: 'text/plain', hpp: 'text/plain',
+  };
+  return extMap[ext] || file.type || 'text/plain';
+}
+
+export function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles, disabled = false, placeholder = 'Send a message...', canSendOverride }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === 'streaming' || status === 'submitted';
+
+  // Auto-resize textarea
+  const adjustHeight = useCallback(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = 'auto';
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 200)}px`;
+  }, []);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [input, adjustHeight]);
+
+  // Focus textarea on mount
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+
+    // Read files outside state updater to avoid React strict mode double-invocation
+    newFiles.forEach((file) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        setFiles((current) => {
+          if (current.length >= MAX_FILES) return current;
+          return [...current, { file, previewUrl: reader.result }];
+        });
+      };
+      reader.readAsDataURL(file);
+    });
+  }, [setFiles]);
+
+  const removeFile = (index) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if (disabled || (!input.trim() && files.length === 0) || isStreaming) return;
+    if (canSendOverride !== undefined && !canSendOverride) return;
+    onSubmit();
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const handleDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+  };
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  };
+
+  const canSend = canSendOverride !== undefined
+    ? canSendOverride && (input.trim() || files.length > 0)
+    : (input.trim() || files.length > 0);
+
+  // Disabled state — show locked message
+  if (disabled && !isStreaming) {
+    return (
+      <div className="mx-auto w-full max-w-4xl px-4 pb-4 md:px-6">
+        <div className="flex flex-col rounded-xl border border-border bg-muted p-2">
+          <div className="flex items-center px-2 py-1.5">
+            <span className="text-sm text-muted-foreground">{placeholder}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-4xl px-4 pb-4 md:px-6">
+      <form onSubmit={handleSubmit} className="relative">
+        <div
+          className={cn(
+            'flex flex-col rounded-xl border bg-muted p-2 transition-colors',
+            isDragging ? 'border-primary bg-primary/5' : 'border-border'
+          )}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {/* File preview strip */}
+          {files.length > 0 && (
+            <div className="mb-2 flex gap-2 overflow-x-auto px-1 py-1">
+              {files.map((f, i) => {
+                const isImage = f.file.type.startsWith('image/');
+                return (
+                  <div key={i} className="group relative flex-shrink-0">
+                    {isImage ? (
+                      <img
+                        src={f.previewUrl}
+                        alt={f.file.name}
+                        className="h-16 w-16 rounded-lg object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-16 items-center gap-1.5 rounded-lg bg-foreground/10 px-3">
+                        <FileTextIcon size={14} />
+                        <span className="max-w-[100px] truncate text-xs">
+                          {f.file.name}
+                        </span>
+                      </div>
+                    )}
+                    <button
+                      type="button"
+                      onClick={() => removeFile(i)}
+                      className="absolute -right-1.5 -top-1.5 hidden rounded-full bg-foreground p-0.5 text-background group-hover:flex items-center justify-center"
+                      aria-label={`Remove ${f.file.name}`}
+                    >
+                      <XIcon size={10} />
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          <textarea
+            ref={textareaRef}
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            rows={1}
+            className={cn(
+              'w-full resize-none bg-transparent px-2 py-1.5 text-sm text-foreground',
+              'placeholder:text-muted-foreground focus:outline-none',
+              'max-h-[200px]'
+            )}
+            disabled={isStreaming}
+          />
+
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-1">
+              <button
+                type="button"
+                onClick={() => fileInputRef.current?.click()}
+                className="inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:text-foreground"
+                aria-label="Attach files"
+                disabled={isStreaming}
+              >
+                <PaperclipIcon size={16} />
+              </button>
+
+              <input
+                ref={fileInputRef}
+                type="file"
+                multiple
+                accept="image/*,application/pdf,text/*,application/json,.md,.csv,.json,.js,.ts,.jsx,.tsx,.py,.html,.css,.yml,.yaml,.xml,.sh,.rb,.go,.rs,.java,.c,.cpp,.h"
+                className="hidden"
+                onChange={(e) => {
+                  if (e.target.files?.length) handleFiles(e.target.files);
+                  e.target.value = '';
+                }}
+              />
+            </div>
+
+            {isStreaming ? (
+              <button
+                type="button"
+                onClick={stop}
+                className="inline-flex items-center justify-center rounded-lg bg-foreground p-2 text-background hover:opacity-80"
+                aria-label="Stop generating"
+              >
+                <StopIcon size={16} />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!canSend}
+                className={cn(
+                  'inline-flex items-center justify-center rounded-lg p-2',
+                  canSend
+                    ? 'bg-foreground text-background hover:opacity-80'
+                    : 'bg-muted-foreground/20 text-muted-foreground cursor-not-allowed'
+                )}
+                aria-label="Send message"
+              >
+                <SendIcon size={16} />
+              </button>
+            )}
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+}

package/lib/chat/components/chat-nav-context.js

@@ -0,0 +1,11 @@
+"use client";
+import { createContext, useContext } from "react";
+const ChatNavContext = createContext(null);
+const ChatNavProvider = ChatNavContext.Provider;
+function useChatNav() {
+  return useContext(ChatNavContext);
+}
+export {
+  ChatNavProvider,
+  useChatNav
+};

package/lib/chat/components/chat-nav-context.jsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+const ChatNavContext = createContext(null);
+
+export const ChatNavProvider = ChatNavContext.Provider;
+
+export function useChatNav() {
+  return useContext(ChatNavContext);
+}

package/lib/chat/components/chat-page.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { AppSidebar } from "./app-sidebar.js";
+import { Chat } from "./chat.js";
+import { SidebarProvider, SidebarInset } from "./ui/sidebar.js";
+import { ChatNavProvider } from "./chat-nav-context.js";
+import { getChatMessages, getChatMeta, getWorkspace } from "../actions.js";
+import { v4 as uuidv4 } from "uuid";
+function ChatPage({ session, needsSetup, chatId }) {
+  const [activeChatId, setActiveChatId] = useState(chatId || null);
+  const [resolvedChatId, setResolvedChatId] = useState(() => chatId ? null : uuidv4());
+  const [initialMessages, setInitialMessages] = useState([]);
+  const [workspace, setWorkspace] = useState(null);
+  const navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, "", `/chat/${id}`);
+      setResolvedChatId(null);
+      setInitialMessages([]);
+      setWorkspace(null);
+      setActiveChatId(id);
+    } else {
+      window.history.pushState({}, "", "/");
+      setInitialMessages([]);
+      setWorkspace(null);
+      setActiveChatId(null);
+      setResolvedChatId(uuidv4());
+    }
+  }, []);
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      if (match) {
+        setResolvedChatId(null);
+        setInitialMessages([]);
+        setWorkspace(null);
+        setActiveChatId(match[1]);
+      } else {
+        setInitialMessages([]);
+        setWorkspace(null);
+        setActiveChatId(null);
+        setResolvedChatId(uuidv4());
+      }
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then(async (dbMessages) => {
+        if (dbMessages.length === 0) {
+          setInitialMessages([]);
+          setWorkspace(null);
+          setResolvedChatId(uuidv4());
+          window.history.replaceState({}, "", "/");
+          return;
+        }
+        const uiMessages = dbMessages.map((msg) => ({
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          parts: [{ type: "text", text: msg.content }],
+          createdAt: new Date(msg.createdAt)
+        }));
+        setInitialMessages(uiMessages);
+        try {
+          const meta = await getChatMeta(activeChatId);
+          if (meta?.codeWorkspaceId) {
+            const ws = await getWorkspace(meta.codeWorkspaceId);
+            setWorkspace(ws);
+          } else {
+            setWorkspace(null);
+          }
+        } catch {
+          setWorkspace(null);
+        }
+        setResolvedChatId(activeChatId);
+      });
+    }
+  }, [activeChatId]);
+  if (needsSetup || !session) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(ChatNavProvider, { value: { activeChatId: resolvedChatId, navigateToChat }, children: /* @__PURE__ */ jsxs(SidebarProvider, { children: [
+    /* @__PURE__ */ jsx(AppSidebar, { user: session.user }),
+    /* @__PURE__ */ jsx(SidebarInset, { children: resolvedChatId && /* @__PURE__ */ jsx(
+      Chat,
+      {
+        chatId: resolvedChatId,
+        initialMessages,
+        workspace
+      },
+      resolvedChatId
+    ) })
+  ] }) });
+}
+export {
+  ChatPage
+};

package/lib/chat/components/chat-page.jsx

@@ -0,0 +1,121 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { AppSidebar } from './app-sidebar.js';
+import { Chat } from './chat.js';
+import { SidebarProvider, SidebarInset } from './ui/sidebar.js';
+import { ChatNavProvider } from './chat-nav-context.js';
+import { getChatMessages, getChatMeta, getWorkspace } from '../actions.js';
+import { v4 as uuidv4 } from 'uuid';
+
+/**
+ * Main chat page component.
+ *
+ * @param {object} props
+ * @param {object|null} props.session - Auth session (null = not logged in)
+ * @param {boolean} props.needsSetup - Whether setup is needed
+ * @param {string} [props.chatId] - Chat ID from URL (only used for initial mount)
+ */
+export function ChatPage({ session, needsSetup, chatId }) {
+  const [activeChatId, setActiveChatId] = useState(chatId || null);
+  const [resolvedChatId, setResolvedChatId] = useState(() => chatId ? null : uuidv4());
+  const [initialMessages, setInitialMessages] = useState([]);
+  const [workspace, setWorkspace] = useState(null);
+
+  const navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, '', `/chat/${id}`);
+      setResolvedChatId(null);
+      setInitialMessages([]);
+      setWorkspace(null);
+      setActiveChatId(id);
+    } else {
+      window.history.pushState({}, '', '/');
+      setInitialMessages([]);
+      setWorkspace(null);
+      setActiveChatId(null);
+      setResolvedChatId(uuidv4());
+    }
+  }, []);
+
+  // Browser back/forward
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      if (match) {
+        setResolvedChatId(null);
+        setInitialMessages([]);
+        setWorkspace(null);
+        setActiveChatId(match[1]);
+      } else {
+        setInitialMessages([]);
+        setWorkspace(null);
+        setActiveChatId(null);
+        setResolvedChatId(uuidv4());
+      }
+    };
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  // Load messages and workspace data when activeChatId changes
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then(async (dbMessages) => {
+        if (dbMessages.length === 0) {
+          // Stale chat (e.g. after login with old UUID) — start fresh
+          setInitialMessages([]);
+          setWorkspace(null);
+          setResolvedChatId(uuidv4());
+          window.history.replaceState({}, '', '/');
+          return;
+        }
+        const uiMessages = dbMessages.map((msg) => ({
+          id: msg.id,
+          role: msg.role,
+          content: msg.content,
+          parts: [{ type: 'text', text: msg.content }],
+          createdAt: new Date(msg.createdAt),
+        }));
+        setInitialMessages(uiMessages);
+
+        // Check if this is a code chat
+        try {
+          const meta = await getChatMeta(activeChatId);
+          if (meta?.codeWorkspaceId) {
+            const ws = await getWorkspace(meta.codeWorkspaceId);
+            setWorkspace(ws);
+          } else {
+            setWorkspace(null);
+          }
+        } catch {
+          setWorkspace(null);
+        }
+
+        setResolvedChatId(activeChatId);
+      });
+    }
+  }, [activeChatId]);
+
+  if (needsSetup || !session) {
+    return null;
+  }
+
+  return (
+    <ChatNavProvider value={{ activeChatId: resolvedChatId, navigateToChat }}>
+      <SidebarProvider>
+        <AppSidebar user={session.user} />
+        <SidebarInset>
+          {resolvedChatId && (
+            <Chat
+              key={resolvedChatId}
+              chatId={resolvedChatId}
+              initialMessages={initialMessages}
+              workspace={workspace}
+            />
+          )}
+        </SidebarInset>
+      </SidebarProvider>
+    </ChatNavProvider>
+  );
+}

package/lib/chat/components/chat.js

@@ -0,0 +1,153 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useChat } from "@ai-sdk/react";
+import { DefaultChatTransport } from "ai";
+import { useState, useEffect, useRef, useMemo, useCallback } from "react";
+import { Messages } from "./messages.js";
+import { ChatInput } from "./chat-input.js";
+import { ChatHeader } from "./chat-header.js";
+import { Greeting } from "./greeting.js";
+import { CodeModeToggle } from "./code-mode-toggle.js";
+import { getRepositories, getBranches } from "../actions.js";
+function Chat({ chatId, initialMessages = [], workspace = null }) {
+  const [input, setInput] = useState("");
+  const [files, setFiles] = useState([]);
+  const hasNavigated = useRef(false);
+  const [codeMode, setCodeMode] = useState(!!workspace);
+  const [repo, setRepo] = useState(workspace?.repo || "");
+  const [branch, setBranch] = useState(workspace?.branch || "");
+  const codeModeRef = useRef({ codeMode, repo, branch });
+  codeModeRef.current = { codeMode, repo, branch };
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: "/stream/chat",
+      body: () => ({
+        chatId,
+        ...codeModeRef.current.codeMode && codeModeRef.current.repo && codeModeRef.current.branch ? { codeMode: true, repo: codeModeRef.current.repo, branch: codeModeRef.current.branch } : {}
+      })
+    }),
+    [chatId]
+  );
+  const {
+    messages,
+    status,
+    stop,
+    error,
+    sendMessage,
+    regenerate,
+    setMessages
+  } = useChat({
+    id: chatId,
+    messages: initialMessages,
+    transport,
+    onError: (err) => console.error("Chat error:", err)
+  });
+  useEffect(() => {
+    if (!hasNavigated.current && messages.length >= 1 && status !== "ready" && window.location.pathname !== `/chat/${chatId}`) {
+      hasNavigated.current = true;
+      window.history.replaceState({}, "", `/chat/${chatId}`);
+      window.dispatchEvent(new Event("chatsupdated"));
+      setTimeout(() => window.dispatchEvent(new Event("chatsupdated")), 5e3);
+    }
+  }, [messages.length, status, chatId]);
+  const handleSend = () => {
+    if (!input.trim() && files.length === 0) return;
+    const text = input;
+    const currentFiles = files;
+    setInput("");
+    setFiles([]);
+    if (currentFiles.length === 0) {
+      sendMessage({ text });
+    } else {
+      const fileParts = currentFiles.map((f) => ({
+        type: "file",
+        mediaType: f.file.type || "text/plain",
+        url: f.previewUrl,
+        filename: f.file.name
+      }));
+      sendMessage({ text: text || void 0, files: fileParts });
+    }
+  };
+  const handleRetry = useCallback((message) => {
+    if (message.role === "assistant") {
+      regenerate({ messageId: message.id });
+    } else {
+      const idx = messages.findIndex((m) => m.id === message.id);
+      const nextAssistant = messages.slice(idx + 1).find((m) => m.role === "assistant");
+      if (nextAssistant) {
+        regenerate({ messageId: nextAssistant.id });
+      } else {
+        const text = message.parts?.filter((p) => p.type === "text").map((p) => p.text).join("\n") || message.content || "";
+        if (text.trim()) {
+          sendMessage({ text });
+        }
+      }
+    }
+  }, [messages, regenerate, sendMessage]);
+  const handleEdit = useCallback((message, newText) => {
+    const idx = messages.findIndex((m) => m.id === message.id);
+    if (idx === -1) return;
+    setMessages(messages.slice(0, idx));
+    sendMessage({ text: newText });
+  }, [messages, setMessages, sendMessage]);
+  const isWorkspaceLaunched = !!workspace?.containerName || messages.some(
+    (m) => m.parts?.some((p) => p.type === "tool-invocation" && p.toolName === "start_coding" && p.state === "output-available")
+  );
+  const codeModeCanSend = !codeMode || !!repo && !!branch;
+  const codeModeToggle = /* @__PURE__ */ jsx(
+    CodeModeToggle,
+    {
+      enabled: codeMode,
+      onToggle: setCodeMode,
+      repo,
+      onRepoChange: setRepo,
+      branch,
+      onBranchChange: setBranch,
+      locked: messages.length > 0,
+      getRepositories,
+      getBranches
+    }
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-svh flex-col", children: [
+    /* @__PURE__ */ jsx(ChatHeader, { chatId }),
+    messages.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center px-4 md:px-6", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-4xl", children: [
+      /* @__PURE__ */ jsx(Greeting, { codeMode }),
+      error && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }),
+      /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(
+        ChatInput,
+        {
+          input,
+          setInput,
+          onSubmit: handleSend,
+          status,
+          stop,
+          files,
+          setFiles,
+          canSendOverride: codeModeCanSend ? void 0 : false
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "mt-5 pb-8", children: codeModeToggle })
+    ] }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Messages, { messages, status, onRetry: handleRetry, onEdit: handleEdit }),
+      error && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-2 md:px-4", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive", children: error.message || "Something went wrong. Please try again." }) }),
+      /* @__PURE__ */ jsx(
+        ChatInput,
+        {
+          input,
+          setInput,
+          onSubmit: handleSend,
+          status,
+          stop,
+          files,
+          setFiles,
+          disabled: isWorkspaceLaunched,
+          placeholder: isWorkspaceLaunched ? "Workspace launched \u2014 click the link above to start coding." : "Send a message..."
+        }
+      ),
+      codeMode && /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-4 pb-8 md:px-6", children: codeModeToggle })
+    ] })
+  ] });
+}
+export {
+  Chat
+};