gigaclaw 1.4.0

package/lib/chat/components/chat.jsx

@@ -0,0 +1,199 @@
+'use client';
+
+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';
+
+export 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),
+  });
+
+  // After first message sent, update URL and notify sidebar
+  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'));
+      // Dispatch again after delay to pick up async title update
+      setTimeout(() => window.dispatchEvent(new Event('chatsupdated')), 5000);
+    }
+  }, [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 {
+      // Build FileUIPart[] from pre-read data URLs (File[] isn't a valid type)
+      const fileParts = currentFiles.map((f) => ({
+        type: 'file',
+        mediaType: f.file.type || 'text/plain',
+        url: f.previewUrl,
+        filename: f.file.name,
+      }));
+      sendMessage({ text: text || undefined, files: fileParts });
+    }
+  };
+
+  const handleRetry = useCallback((message) => {
+    if (message.role === 'assistant') {
+      regenerate({ messageId: message.id });
+    } else {
+      // User message — find the next assistant message and regenerate it
+      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 {
+        // No assistant response yet — extract text and resend
+        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;
+    // Truncate conversation to before this message, then send edited text
+    setMessages(messages.slice(0, idx));
+    sendMessage({ text: newText });
+  }, [messages, setMessages, sendMessage]);
+
+  // Workspace is launched if containerName is set or start_coding tool was called
+  const isWorkspaceLaunched = !!workspace?.containerName || messages.some((m) =>
+    m.parts?.some((p) => p.type === 'tool-invocation' && p.toolName === 'start_coding' && p.state === 'output-available')
+  );
+
+  // In code mode, disable send until repo+branch selected
+  const codeModeCanSend = !codeMode || (!!repo && !!branch);
+
+  const codeModeToggle = (
+    <CodeModeToggle
+      enabled={codeMode}
+      onToggle={setCodeMode}
+      repo={repo}
+      onRepoChange={setRepo}
+      branch={branch}
+      onBranchChange={setBranch}
+      locked={messages.length > 0}
+      getRepositories={getRepositories}
+      getBranches={getBranches}
+    />
+  );
+
+  return (
+    <div className="flex h-svh flex-col">
+      <ChatHeader chatId={chatId} />
+      {messages.length === 0 ? (
+        <div className="flex flex-1 flex-col items-center justify-center px-4 md:px-6">
+          <div className="w-full max-w-4xl">
+            <Greeting codeMode={codeMode} />
+            {error && (
+              <div className="mt-4 rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+                {error.message || 'Something went wrong. Please try again.'}
+              </div>
+            )}
+            <div className="mt-4">
+              <ChatInput
+                input={input}
+                setInput={setInput}
+                onSubmit={handleSend}
+                status={status}
+                stop={stop}
+                files={files}
+                setFiles={setFiles}
+                canSendOverride={codeModeCanSend ? undefined : false}
+              />
+            </div>
+            <div className="mt-5 pb-8">
+              {codeModeToggle}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <>
+          <Messages messages={messages} status={status} onRetry={handleRetry} onEdit={handleEdit} />
+          {error && (
+            <div className="mx-auto w-full max-w-4xl px-2 md:px-4">
+              <div className="rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-2 text-sm text-destructive">
+                {error.message || 'Something went wrong. Please try again.'}
+              </div>
+            </div>
+          )}
+          <ChatInput
+            input={input}
+            setInput={setInput}
+            onSubmit={handleSend}
+            status={status}
+            stop={stop}
+            files={files}
+            setFiles={setFiles}
+            disabled={isWorkspaceLaunched}
+            placeholder={isWorkspaceLaunched ? 'Workspace launched — click the link above to start coding.' : 'Send a message...'}
+          />
+          {codeMode && (
+            <div className="mx-auto w-full max-w-4xl px-4 pb-8 md:px-6">
+              {codeModeToggle}
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,367 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { PageLayout } from "./page-layout.js";
+import { MessageIcon, CodeIcon, TrashIcon, SearchIcon, PlusIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon, ExportIcon } from "./icons.js";
+import { getChats, deleteChat, renameChat, starChat, exportAllChats } from "../actions.js";
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from "./ui/dropdown-menu.js";
+import { ConfirmDialog } from "./ui/confirm-dialog.js";
+import { cn } from "../utils.js";
+function groupChatsByDate(chats) {
+  const now = /* @__PURE__ */ new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 864e5);
+  const last7Days = new Date(today.getTime() - 7 * 864e5);
+  const last30Days = new Date(today.getTime() - 30 * 864e5);
+  const groups = {
+    Starred: [],
+    Today: [],
+    Yesterday: [],
+    "Last 7 Days": [],
+    "Last 30 Days": [],
+    Older: []
+  };
+  for (const chat of chats) {
+    if (chat.starred) {
+      groups.Starred.push(chat);
+      continue;
+    }
+    const date = new Date(chat.updatedAt);
+    if (date >= today) {
+      groups.Today.push(chat);
+    } else if (date >= yesterday) {
+      groups.Yesterday.push(chat);
+    } else if (date >= last7Days) {
+      groups["Last 7 Days"].push(chat);
+    } else if (date >= last30Days) {
+      groups["Last 30 Days"].push(chat);
+    } else {
+      groups.Older.push(chat);
+    }
+  }
+  return groups;
+}
+function timeAgo(date) {
+  const seconds = Math.floor((Date.now() - new Date(date).getTime()) / 1e3);
+  if (seconds < 60) return "just now";
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  return `${months}mo ago`;
+}
+function ChatsPage({ session }) {
+  const [chats, setChats] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [query, setQuery] = useState("");
+  const [isExportingAll, setIsExportingAll] = useState(false);
+  const navigateToChat = (id) => {
+    window.location.href = id ? `/chat/${id}` : "/";
+  };
+  const loadChats = async () => {
+    try {
+      const result = await getChats();
+      setChats(result);
+    } catch (err) {
+      console.error("Failed to load chats:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    loadChats();
+  }, []);
+  useEffect(() => {
+    const handler = () => loadChats();
+    window.addEventListener("chatsupdated", handler);
+    return () => window.removeEventListener("chatsupdated", handler);
+  }, []);
+  const handleDelete = async (chatId) => {
+    setChats((prev) => prev.filter((c) => c.id !== chatId));
+    const { success } = await deleteChat(chatId);
+    if (!success) loadChats();
+  };
+  const handleStar = async (chatId) => {
+    setChats(
+      (prev) => prev.map((c) => c.id === chatId ? { ...c, starred: c.starred ? 0 : 1 } : c)
+    );
+    const { success } = await starChat(chatId);
+    if (!success) loadChats();
+  };
+  const handleExportAll = async (format) => {
+    if (isExportingAll) return;
+    setIsExportingAll(true);
+    try {
+      const exports = await exportAllChats(format);
+      if (!exports || exports.length === 0) return;
+      for (let i = 0; i < exports.length; i++) {
+        const { filename, content, mimeType } = exports[i];
+        const blob = new Blob([content], { type: mimeType });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+        if (i < exports.length - 1) await new Promise((r) => setTimeout(r, 120));
+      }
+    } catch (err) {
+      console.error("Export all failed:", err);
+    } finally {
+      setIsExportingAll(false);
+    }
+  };
+  const handleRename = async (chatId, title) => {
+    setChats(
+      (prev) => prev.map((c) => c.id === chatId ? { ...c, title } : c)
+    );
+    const { success } = await renameChat(chatId, title);
+    if (!success) loadChats();
+  };
+  const filtered = query ? chats.filter((c) => c.title?.toLowerCase().includes(query.toLowerCase())) : chats;
+  const grouped = groupChatsByDate(filtered);
+  return /* @__PURE__ */ jsxs(PageLayout, { session, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold", children: "Chats" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium border border-input bg-background hover:bg-muted disabled:opacity-50",
+              disabled: isExportingAll || chats.length === 0,
+              "aria-label": "Export all chats",
+              children: [
+                /* @__PURE__ */ jsx(ExportIcon, { size: 14 }),
+                isExportingAll ? "Exporting\u2026" : "Export All"
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExportAll("md"), children: /* @__PURE__ */ jsx("span", { children: "Markdown (.md)" }) }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExportAll("txt"), children: /* @__PURE__ */ jsx("span", { children: "Plain Text (.txt)" }) }),
+            /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => handleExportAll("json"), children: /* @__PURE__ */ jsx("span", { children: "JSON (.json)" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: "/",
+            onClick: (e) => {
+              e.preventDefault();
+              navigateToChat(null);
+            },
+            className: "inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium bg-foreground text-background hover:bg-foreground/90",
+            style: { textDecoration: "inherit" },
+            children: [
+              /* @__PURE__ */ jsx(PlusIcon, { size: 14 }),
+              "New chat"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "relative mb-4", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search your chats...",
+          value: query,
+          onChange: (e) => setQuery(e.target.value),
+          className: "w-full rounded-md border border-input bg-background px-9 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsx(SearchIcon, { size: 16 }) })
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mb-4", children: [
+      filtered.length,
+      " ",
+      filtered.length === 1 ? "chat" : "chats"
+    ] }),
+    loading ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(5)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-14 animate-pulse rounded-md bg-border/50" }, i)) }) : filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground py-8 text-center", children: query ? "No chats match your search." : "No chats yet. Start a conversation!" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: Object.entries(grouped).map(
+      ([label, groupChats]) => groupChats.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: label }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col divide-y divide-border", children: groupChats.map((chat) => /* @__PURE__ */ jsx(
+          ChatRow,
+          {
+            chat,
+            onNavigate: navigateToChat,
+            onDelete: handleDelete,
+            onStar: handleStar,
+            onRename: handleRename
+          },
+          chat.id
+        )) })
+      ] }, label) : null
+    ) })
+  ] });
+}
+function ChatRow({ chat, onNavigate, onDelete, onStar, onRename }) {
+  const [hovered, setHovered] = useState(false);
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(chat.title || "");
+  const inputRef = useRef(null);
+  const showMenu = hovered || dropdownOpen;
+  useEffect(() => {
+    if (editing && inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, [editing]);
+  const startRename = () => {
+    setEditTitle(chat.title || "");
+    setEditing(true);
+  };
+  const saveRename = () => {
+    const trimmed = editTitle.trim();
+    if (trimmed && trimmed !== chat.title) {
+      onRename(chat.id, trimmed);
+    }
+    setEditing(false);
+  };
+  const cancelRename = () => {
+    setEditing(false);
+    setEditTitle(chat.title || "");
+  };
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: chat.codeWorkspaceId && chat.containerName ? `/code/${chat.codeWorkspaceId}` : `/chat/${chat.id}`,
+      className: "relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md",
+      style: { textDecoration: "inherit", color: "inherit" },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick: (e) => {
+        if (editing) {
+          e.preventDefault();
+          return;
+        }
+        e.preventDefault();
+        if (chat.codeWorkspaceId && chat.containerName) {
+          window.location.href = `/code/${chat.codeWorkspaceId}`;
+        } else {
+          onNavigate(chat.id);
+        }
+      },
+      children: [
+        chat.codeWorkspaceId && chat.containerName ? /* @__PURE__ */ jsx(CodeIcon, { size: 16 }) : /* @__PURE__ */ jsx(MessageIcon, { size: 16 }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          editing ? /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              type: "text",
+              value: editTitle,
+              onChange: (e) => setEditTitle(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter") saveRename();
+                if (e.key === "Escape") cancelRename();
+              },
+              onBlur: saveRename,
+              onClick: (e) => e.stopPropagation(),
+              className: "w-full text-sm bg-background border border-input rounded px-1.5 py-0.5 focus:outline-none focus:ring-2 focus:ring-ring"
+            }
+          ) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "text-sm truncate block",
+              onDoubleClick: (e) => {
+                e.stopPropagation();
+                startRename();
+              },
+              children: chat.title || "New Chat"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            "Last message ",
+            timeAgo(chat.updatedAt)
+          ] })
+        ] }),
+        !editing && /* @__PURE__ */ jsx("div", { className: cn(
+          "shrink-0",
+          showMenu ? "opacity-100" : "opacity-0 pointer-events-none"
+        ), children: /* @__PURE__ */ jsxs(DropdownMenu, { open: dropdownOpen, onOpenChange: setDropdownOpen, children: [
+          /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: cn(
+                "rounded-md p-1.5",
+                "text-muted-foreground hover:text-foreground hover:bg-muted"
+              ),
+              "aria-label": "Chat options",
+              children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { size: 14 })
+            }
+          ) }),
+          /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", side: "bottom", children: [
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                },
+                children: [
+                  chat.starred ? /* @__PURE__ */ jsx(StarFilledIcon, { size: 14 }) : /* @__PURE__ */ jsx(StarIcon, { size: 14 }),
+                  chat.starred ? "Unstar" : "Star"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  startRename();
+                },
+                children: [
+                  /* @__PURE__ */ jsx(PencilIcon, { size: 14 }),
+                  "Rename"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(
+              DropdownMenuItem,
+              {
+                className: "text-destructive hover:text-destructive",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(true);
+                },
+                children: [
+                  /* @__PURE__ */ jsx(TrashIcon, { size: 14 }),
+                  "Delete"
+                ]
+              }
+            )
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            open: confirmDelete,
+            title: "Delete chat?",
+            description: "This will permanently delete this chat and all its messages.",
+            confirmLabel: "Delete",
+            onConfirm: () => {
+              setConfirmDelete(false);
+              onDelete(chat.id);
+            },
+            onCancel: () => setConfirmDelete(false)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  ChatsPage
+};