@harbinger-ai/harbinger 0.1.0

package/lib/chat/components/chat.js

@@ -0,0 +1,150 @@
+"use client";
+import { 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 { StatusBar } from "./status-bar.js";
+import { ToolPanel } from "./tool-panel.js";
+import { Greeting } from "./greeting.js";
+function Chat({ chatId, initialMessages = [] }) {
+  const [input, setInput] = useState("");
+  const [files, setFiles] = useState([]);
+  const [showToolPanel, setShowToolPanel] = useState(false);
+  const hasNavigated = useRef(false);
+  const transport = useMemo(
+    () => new DefaultChatTransport({
+      api: "/stream/chat",
+      body: { chatId }
+    }),
+    [chatId]
+  );
+  const {
+    messages,
+    status,
+    stop,
+    error,
+    sendMessage,
+    regenerate,
+    setMessages
+  } = useChat({
+    id: chatId,
+    messages: initialMessages,
+    transport,
+    onError: (err) => console.error("Chat error:", err)
+  });
+  const toolCount = useMemo(() => {
+    let count = 0;
+    for (const msg of messages) {
+      if (!msg.parts) continue;
+      for (const part of msg.parts) {
+        if (part.type?.startsWith("tool-")) count++;
+      }
+    }
+    return count;
+  }, [messages]);
+  useEffect(() => {
+    if (toolCount > 0 && !showToolPanel) {
+      setShowToolPanel(true);
+    }
+  }, [toolCount]);
+  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]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex h-svh flex-col", children: [
+    /* @__PURE__ */ jsx(ChatHeader, { chatId }),
+    /* @__PURE__ */ jsx(
+      StatusBar,
+      {
+        status,
+        toolCount,
+        showToolPanel,
+        onToggleToolPanel: () => setShowToolPanel(!showToolPanel)
+      }
+    ),
+    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, {}),
+      error && /* @__PURE__ */ jsx("div", { className: "mt-4 rounded-lg border border-[--destructive]/30 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
+        }
+      ) })
+    ] }) }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col min-w-0", 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]/30 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
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(ToolPanel, { messages, show: showToolPanel })
+    ] })
+  ] });
+}
+export {
+  Chat
+};

package/lib/chat/components/chat.jsx

@@ -0,0 +1,182 @@
+'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 { StatusBar } from './status-bar.js';
+import { ToolPanel } from './tool-panel.js';
+import { Greeting } from './greeting.js';
+
+export function Chat({ chatId, initialMessages = [] }) {
+  const [input, setInput] = useState('');
+  const [files, setFiles] = useState([]);
+  const [showToolPanel, setShowToolPanel] = useState(false);
+  const hasNavigated = useRef(false);
+
+  const transport = useMemo(
+    () =>
+      new DefaultChatTransport({
+        api: '/stream/chat',
+        body: { chatId },
+      }),
+    [chatId]
+  );
+
+  const {
+    messages,
+    status,
+    stop,
+    error,
+    sendMessage,
+    regenerate,
+    setMessages,
+  } = useChat({
+    id: chatId,
+    messages: initialMessages,
+    transport,
+    onError: (err) => console.error('Chat error:', err),
+  });
+
+  // Count tool parts for status bar
+  const toolCount = useMemo(() => {
+    let count = 0;
+    for (const msg of messages) {
+      if (!msg.parts) continue;
+      for (const part of msg.parts) {
+        if (part.type?.startsWith('tool-')) count++;
+      }
+    }
+    return count;
+  }, [messages]);
+
+  // Auto-show tool panel when tools are detected
+  useEffect(() => {
+    if (toolCount > 0 && !showToolPanel) {
+      setShowToolPanel(true);
+    }
+  }, [toolCount]);
+
+  // 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'));
+      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 {
+      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 {
+      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]);
+
+  return (
+    <div className="flex h-svh flex-col">
+      <ChatHeader chatId={chatId} />
+      <StatusBar
+        status={status}
+        toolCount={toolCount}
+        showToolPanel={showToolPanel}
+        onToggleToolPanel={() => setShowToolPanel(!showToolPanel)}
+      />
+      {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 />
+            {error && (
+              <div className="mt-4 rounded-lg border border-[--destructive]/30 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}
+              />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-1 min-h-0">
+          {/* Main chat area */}
+          <div className="flex flex-1 flex-col min-w-0">
+            <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]/30 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}
+            />
+          </div>
+
+          {/* Right tool panel */}
+          <ToolPanel messages={messages} show={showToolPanel} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,302 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { PageLayout } from "./page-layout.js";
+import { MessageIcon, TrashIcon, SearchIcon, PlusIcon, MoreHorizontalIcon, StarIcon, StarFilledIcon, PencilIcon } from "./icons.js";
+import { getChats, deleteChat, renameChat, starChat } 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 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 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(
+        "button",
+        {
+          onClick: () => 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",
+          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(
+    "div",
+    {
+      className: "relative group flex items-center gap-3 px-3 py-3 cursor-pointer hover:bg-muted/50 rounded-md",
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      onClick: () => !editing && onNavigate(chat.id),
+      children: [
+        /* @__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
+};