gigaclaw 1.4.0

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

@@ -0,0 +1,394 @@
+'use client';
+
+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 = new Date();
+  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+  const yesterday = new Date(today.getTime() - 86400000);
+  const last7Days = new Date(today.getTime() - 7 * 86400000);
+  const last30Days = new Date(today.getTime() - 30 * 86400000);
+
+  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()) / 1000);
+  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`;
+}
+
+export 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 (
+    <PageLayout session={session}>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-6">
+        <h1 className="text-2xl font-semibold">Chats</h1>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <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"
+              >
+                <ExportIcon size={14} />
+                {isExportingAll ? 'Exporting…' : 'Export All'}
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem onClick={() => handleExportAll('md')}>
+                <span>Markdown (.md)</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExportAll('txt')}>
+                <span>Plain Text (.txt)</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExportAll('json')}>
+                <span>JSON (.json)</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <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' }}
+          >
+            <PlusIcon size={14} />
+            New chat
+          </a>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="relative mb-4">
+        <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"
+        />
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
+          <SearchIcon size={16} />
+        </div>
+      </div>
+
+      {/* Count */}
+      <p className="text-sm text-muted-foreground mb-4">
+        {filtered.length} {filtered.length === 1 ? 'chat' : 'chats'}
+      </p>
+
+      {/* Chat list */}
+      {loading ? (
+        <div className="flex flex-col gap-3">
+          {[...Array(5)].map((_, i) => (
+            <div key={i} className="h-14 animate-pulse rounded-md bg-border/50" />
+          ))}
+        </div>
+      ) : filtered.length === 0 ? (
+        <p className="text-sm text-muted-foreground py-8 text-center">
+          {query ? 'No chats match your search.' : 'No chats yet. Start a conversation!'}
+        </p>
+      ) : (
+        <div className="flex flex-col">
+          {Object.entries(grouped).map(([label, groupChats]) =>
+            groupChats.length > 0 ? (
+              <div key={label} className="mb-4">
+                <h2 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2">
+                  {label}
+                </h2>
+                <div className="flex flex-col divide-y divide-border">
+                  {groupChats.map((chat) => (
+                    <ChatRow
+                      key={chat.id}
+                      chat={chat}
+                      onNavigate={navigateToChat}
+                      onDelete={handleDelete}
+                      onStar={handleStar}
+                      onRename={handleRename}
+                    />
+                  ))}
+                </div>
+              </div>
+            ) : null
+          )}
+        </div>
+      )}
+    </PageLayout>
+  );
+}
+
+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 (
+    <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);
+        }
+      }}
+    >
+      {chat.codeWorkspaceId && chat.containerName ? <CodeIcon size={16} /> : <MessageIcon size={16} />}
+      <div className="flex-1 min-w-0">
+        {editing ? (
+          <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"
+          />
+        ) : (
+          <span
+            className="text-sm truncate block"
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+              startRename();
+            }}
+          >
+            {chat.title || 'New Chat'}
+          </span>
+        )}
+        <span className="text-xs text-muted-foreground">
+          Last message {timeAgo(chat.updatedAt)}
+        </span>
+      </div>
+      {!editing && (
+        <div className={cn(
+          'shrink-0',
+          showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'
+        )}>
+          <DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
+            <DropdownMenuTrigger asChild>
+              <button
+                className={cn(
+                  'rounded-md p-1.5',
+                  'text-muted-foreground hover:text-foreground hover:bg-muted'
+                )}
+                aria-label="Chat options"
+              >
+                <MoreHorizontalIcon size={14} />
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" side="bottom">
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onStar(chat.id);
+                }}
+              >
+                {chat.starred ? <StarFilledIcon size={14} /> : <StarIcon size={14} />}
+                {chat.starred ? 'Unstar' : 'Star'}
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={(e) => {
+                  e.stopPropagation();
+                  startRename();
+                }}
+              >
+                <PencilIcon size={14} />
+                Rename
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive hover:text-destructive"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setConfirmDelete(true);
+                }}
+              >
+                <TrashIcon size={14} />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      )}
+      <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)}
+      />
+    </a>
+  );
+}

package/lib/chat/components/code-mode-toggle.js

@@ -0,0 +1,132 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from "react";
+import { GitBranchIcon } from "./icons.js";
+import { Combobox } from "./ui/combobox.js";
+import { cn } from "../utils.js";
+function CodeModeToggle({
+  enabled,
+  onToggle,
+  repo,
+  onRepoChange,
+  branch,
+  onBranchChange,
+  locked,
+  getRepositories,
+  getBranches
+}) {
+  const [repos, setRepos] = useState([]);
+  const [branches, setBranches] = useState([]);
+  const [loadingRepos, setLoadingRepos] = useState(false);
+  const [loadingBranches, setLoadingBranches] = useState(false);
+  const [reposLoaded, setReposLoaded] = useState(false);
+  const handleToggle = useCallback(() => {
+    if (locked) return;
+    const next = !enabled;
+    onToggle(next);
+    if (next && !reposLoaded) {
+      setLoadingRepos(true);
+      getRepositories().then((data) => {
+        setRepos(data || []);
+        setReposLoaded(true);
+        setLoadingRepos(false);
+      }).catch(() => setLoadingRepos(false));
+    }
+    if (!next) {
+      onRepoChange("");
+      onBranchChange("");
+      setBranches([]);
+    }
+  }, [locked, enabled, reposLoaded, onToggle, onRepoChange, onBranchChange, getRepositories]);
+  useEffect(() => {
+    if (!repo || locked) return;
+    setLoadingBranches(true);
+    setBranches([]);
+    getBranches(repo).then((data) => {
+      const branchList = data || [];
+      setBranches(branchList);
+      const defaultBranch = branchList.find((b) => b.isDefault);
+      if (defaultBranch) {
+        onBranchChange(defaultBranch.name);
+      }
+      setLoadingBranches(false);
+    }).catch(() => setLoadingBranches(false));
+  }, [repo]);
+  if (!process.env.NEXT_PUBLIC_CODE_WORKSPACE) return null;
+  if (locked && enabled) {
+    return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2.5 text-sm text-muted-foreground", children: [
+      repo && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(GitBranchIcon, { size: 14 }),
+        /* @__PURE__ */ jsx("span", { children: repo })
+      ] }),
+      branch && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "opacity-40", children: "\xB7" }),
+        /* @__PURE__ */ jsx("span", { children: branch })
+      ] })
+    ] }) });
+  }
+  const repoOptions = repos.map((r) => ({ value: r.full_name, label: r.full_name }));
+  const branchOptions = branches.map((b) => ({ value: b.name, label: b.name }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: handleToggle,
+        className: "inline-flex items-center gap-2 group",
+        role: "switch",
+        "aria-checked": enabled,
+        "aria-label": "Toggle Code mode",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200",
+                enabled ? "bg-primary" : "bg-muted-foreground/30"
+              ),
+              children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200",
+                    enabled && "translate-x-4"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn(
+            "text-xs font-medium transition-colors",
+            enabled ? "text-foreground" : "text-muted-foreground group-hover:text-foreground"
+          ), children: "Code" })
+        ]
+      }
+    ),
+    enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: "w-full sm:w-auto sm:min-w-[220px]", children: /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          options: repoOptions,
+          value: repo,
+          onChange: onRepoChange,
+          placeholder: "Select repository...",
+          loading: loadingRepos
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: cn("w-full sm:w-auto sm:min-w-[180px]", !repo && "opacity-50 pointer-events-none"), children: /* @__PURE__ */ jsx(
+        Combobox,
+        {
+          options: branchOptions,
+          value: branch,
+          onChange: onBranchChange,
+          placeholder: "Select branch...",
+          loading: loadingBranches
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  CodeModeToggle
+};

package/lib/chat/components/code-mode-toggle.jsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { GitBranchIcon } from './icons.js';
+import { Combobox } from './ui/combobox.js';
+import { cn } from '../utils.js';
+
+/**
+ * Code mode toggle with repo/branch pickers.
+ *
+ * @param {object} props
+ * @param {boolean} props.enabled - Whether code mode is on
+ * @param {Function} props.onToggle - Toggle callback
+ * @param {string} props.repo - Selected repo
+ * @param {Function} props.onRepoChange - Repo change callback
+ * @param {string} props.branch - Selected branch
+ * @param {Function} props.onBranchChange - Branch change callback
+ * @param {boolean} props.locked - Whether the controls are locked (after first message)
+ * @param {Function} props.getRepositories - Server action to fetch repos
+ * @param {Function} props.getBranches - Server action to fetch branches
+ */
+export function CodeModeToggle({
+  enabled,
+  onToggle,
+  repo,
+  onRepoChange,
+  branch,
+  onBranchChange,
+  locked,
+  getRepositories,
+  getBranches,
+}) {
+  const [repos, setRepos] = useState([]);
+  const [branches, setBranches] = useState([]);
+  const [loadingRepos, setLoadingRepos] = useState(false);
+  const [loadingBranches, setLoadingBranches] = useState(false);
+  const [reposLoaded, setReposLoaded] = useState(false);
+
+  // Load repos on first toggle-on
+  const handleToggle = useCallback(() => {
+    if (locked) return;
+    const next = !enabled;
+    onToggle(next);
+    if (next && !reposLoaded) {
+      setLoadingRepos(true);
+      getRepositories().then((data) => {
+        setRepos(data || []);
+        setReposLoaded(true);
+        setLoadingRepos(false);
+      }).catch(() => setLoadingRepos(false));
+    }
+    if (!next) {
+      onRepoChange('');
+      onBranchChange('');
+      setBranches([]);
+    }
+  }, [locked, enabled, reposLoaded, onToggle, onRepoChange, onBranchChange, getRepositories]);
+
+  // Load branches when repo changes
+  useEffect(() => {
+    if (!repo || locked) return;
+    setLoadingBranches(true);
+    setBranches([]);
+    getBranches(repo).then((data) => {
+      const branchList = data || [];
+      setBranches(branchList);
+      // Auto-select default branch
+      const defaultBranch = branchList.find((b) => b.isDefault);
+      if (defaultBranch) {
+        onBranchChange(defaultBranch.name);
+      }
+      setLoadingBranches(false);
+    }).catch(() => setLoadingBranches(false));
+  }, [repo]);
+
+  if (!process.env.NEXT_PUBLIC_CODE_WORKSPACE) return null;
+
+  // Locked mode: show as centered inline label
+  if (locked && enabled) {
+    return (
+      <div className="flex justify-center">
+        <div className="inline-flex items-center gap-2.5 text-sm text-muted-foreground">
+          {repo && (
+            <>
+              <GitBranchIcon size={14} />
+              <span>{repo}</span>
+            </>
+          )}
+          {branch && (
+            <>
+              <span className="opacity-40">·</span>
+              <span>{branch}</span>
+            </>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  const repoOptions = repos.map((r) => ({ value: r.full_name, label: r.full_name }));
+  const branchOptions = branches.map((b) => ({ value: b.name, label: b.name }));
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3">
+      {/* Slide toggle + label */}
+      <button
+        type="button"
+        onClick={handleToggle}
+        className="inline-flex items-center gap-2 group"
+        role="switch"
+        aria-checked={enabled}
+        aria-label="Toggle Code mode"
+      >
+        {/* Track */}
+        <span
+          className={cn(
+            'relative inline-flex h-5 w-9 shrink-0 rounded-full transition-colors duration-200',
+            enabled ? 'bg-primary' : 'bg-muted-foreground/30'
+          )}
+        >
+          {/* Knob */}
+          <span
+            className={cn(
+              'absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white shadow-sm transition-transform duration-200',
+              enabled && 'translate-x-4'
+            )}
+          />
+        </span>
+        {/* Label */}
+        <span className={cn(
+          'text-xs font-medium transition-colors',
+          enabled ? 'text-foreground' : 'text-muted-foreground group-hover:text-foreground'
+        )}>
+          Code
+        </span>
+      </button>
+
+      {/* Repo/branch pickers — inline, both always visible */}
+      {enabled && (
+        <>
+          <div className="w-full sm:w-auto sm:min-w-[220px]">
+            <Combobox
+              options={repoOptions}
+              value={repo}
+              onChange={onRepoChange}
+              placeholder="Select repository..."
+              loading={loadingRepos}
+            />
+          </div>
+          <div className={cn("w-full sm:w-auto sm:min-w-[180px]", !repo && "opacity-50 pointer-events-none")}>
+            <Combobox
+              options={branchOptions}
+              value={branch}
+              onChange={onBranchChange}
+              placeholder="Select branch..."
+              loading={loadingBranches}
+            />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}