@harbinger-ai/harbinger 0.1.0

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

@@ -0,0 +1,230 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+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;
+  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";
+}
+function ChatInput({ input, setInput, onSubmit, status, stop, files, setFiles }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === "streaming" || status === "submitted";
+  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]);
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+    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 (!input.trim() && files.length === 0 || isStreaming) 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 = input.trim() || files.length > 0;
+  return /* @__PURE__ */ jsx("div", { className: "mx-auto w-full max-w-4xl px-4 pb-4 md:px-6", children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, className: "relative", children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-col rounded-lg border bg-[--card] p-2 transition-colors backdrop-blur-sm",
+        isDragging ? "border-[--primary] bg-[--primary]/5" : "border-white/[0.06]"
+      ),
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        files.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2 flex gap-2 overflow-x-auto px-1 py-1", children: files.map((f, i) => {
+          const isImage = f.file.type.startsWith("image/");
+          return /* @__PURE__ */ jsxs("div", { className: "group relative flex-shrink-0", children: [
+            isImage ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: f.previewUrl,
+                alt: f.file.name,
+                className: "h-16 w-16 rounded-lg object-cover"
+              }
+            ) : /* @__PURE__ */ jsxs("div", { className: "flex h-16 items-center gap-1.5 rounded-lg bg-white/[0.04] border border-white/[0.06] px-3", children: [
+              /* @__PURE__ */ jsx(FileTextIcon, { size: 14 }),
+              /* @__PURE__ */ jsx("span", { className: "max-w-[100px] truncate text-xs font-mono", children: f.file.name })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "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}`,
+                children: /* @__PURE__ */ jsx(XIcon, { size: 10 })
+              }
+            )
+          ] }, i);
+        }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-end gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRef.current?.click(),
+              className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-[--cyan] transition-colors",
+              "aria-label": "Attach files",
+              disabled: isStreaming,
+              children: /* @__PURE__ */ jsx(PaperclipIcon, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              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 = "";
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: input,
+              onChange: (e) => setInput(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: "Send a message...",
+              rows: 1,
+              className: cn(
+                "flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground font-mono",
+                "placeholder:text-muted-foreground/50 focus:outline-none",
+                "max-h-[200px]"
+              ),
+              disabled: isStreaming
+            }
+          ),
+          isStreaming ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: stop,
+              className: "inline-flex items-center justify-center rounded-md bg-foreground p-2 text-background hover:opacity-80 transition-opacity",
+              "aria-label": "Stop generating",
+              children: /* @__PURE__ */ jsx(StopIcon, { size: 16 })
+            }
+          ) : /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              disabled: !canSend,
+              className: cn(
+                "inline-flex items-center justify-center rounded-md p-2 transition-all",
+                canSend ? "bg-[--primary] text-primary-foreground hover:opacity-80" : "bg-white/[0.04] text-muted-foreground/40 cursor-not-allowed"
+              ),
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ jsx(SendIcon, { size: 16 })
+            }
+          )
+        ] })
+      ]
+    }
+  ) }) });
+}
+export {
+  ChatInput
+};

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

@@ -0,0 +1,228 @@
+'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;
+  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 }) {
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const isStreaming = status === 'streaming' || status === 'submitted';
+
+  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]);
+
+  useEffect(() => {
+    textareaRef.current?.focus();
+  }, []);
+
+  const handleFiles = useCallback((fileList) => {
+    const newFiles = Array.from(fileList).filter(isAcceptedType);
+    if (newFiles.length === 0) return;
+
+    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 ((!input.trim() && files.length === 0) || isStreaming) 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 = input.trim() || files.length > 0;
+
+  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-lg border bg-[--card] p-2 transition-colors backdrop-blur-sm',
+            isDragging ? 'border-[--primary] bg-[--primary]/5' : 'border-white/[0.06]'
+          )}
+          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-white/[0.04] border border-white/[0.06] px-3">
+                        <FileTextIcon size={14} />
+                        <span className="max-w-[100px] truncate text-xs font-mono">
+                          {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>
+          )}
+
+          <div className="flex items-end gap-2">
+            {/* Paperclip button */}
+            <button
+              type="button"
+              onClick={() => fileInputRef.current?.click()}
+              className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:text-[--cyan] transition-colors"
+              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 = '';
+              }}
+            />
+
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              placeholder="Send a message..."
+              rows={1}
+              className={cn(
+                'flex-1 resize-none bg-transparent px-2 py-1.5 text-sm text-foreground font-mono',
+                'placeholder:text-muted-foreground/50 focus:outline-none',
+                'max-h-[200px]'
+              )}
+              disabled={isStreaming}
+            />
+
+            {isStreaming ? (
+              <button
+                type="button"
+                onClick={stop}
+                className="inline-flex items-center justify-center rounded-md bg-foreground p-2 text-background hover:opacity-80 transition-opacity"
+                aria-label="Stop generating"
+              >
+                <StopIcon size={16} />
+              </button>
+            ) : (
+              <button
+                type="submit"
+                disabled={!canSend}
+                className={cn(
+                  'inline-flex items-center justify-center rounded-md p-2 transition-all',
+                  canSend
+                    ? 'bg-[--primary] text-primary-foreground hover:opacity-80'
+                    : 'bg-white/[0.04] text-muted-foreground/40 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,81 @@
+"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 } 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 navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, "", `/chat/${id}`);
+      setResolvedChatId(null);
+      setInitialMessages([]);
+      setActiveChatId(id);
+    } else {
+      window.history.pushState({}, "", "/");
+      setInitialMessages([]);
+      setActiveChatId(null);
+      setResolvedChatId(uuidv4());
+    }
+  }, []);
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      if (match) {
+        setResolvedChatId(null);
+        setInitialMessages([]);
+        setActiveChatId(match[1]);
+      } else {
+        setInitialMessages([]);
+        setActiveChatId(null);
+        setResolvedChatId(uuidv4());
+      }
+    };
+    window.addEventListener("popstate", onPopState);
+    return () => window.removeEventListener("popstate", onPopState);
+  }, []);
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then((dbMessages) => {
+        if (dbMessages.length === 0) {
+          setInitialMessages([]);
+          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);
+        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
+      },
+      resolvedChatId
+    ) })
+  ] }) });
+}
+export {
+  ChatPage
+};

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

@@ -0,0 +1,100 @@
+'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 } 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 navigateToChat = useCallback((id) => {
+    if (id) {
+      window.history.pushState({}, '', `/chat/${id}`);
+      setResolvedChatId(null);
+      setInitialMessages([]);
+      setActiveChatId(id);
+    } else {
+      window.history.pushState({}, '', '/');
+      setInitialMessages([]);
+      setActiveChatId(null);
+      setResolvedChatId(uuidv4());
+    }
+  }, []);
+
+  // Browser back/forward
+  useEffect(() => {
+    const onPopState = () => {
+      const match = window.location.pathname.match(/^\/chat\/(.+)/);
+      if (match) {
+        setResolvedChatId(null);
+        setInitialMessages([]);
+        setActiveChatId(match[1]);
+      } else {
+        setInitialMessages([]);
+        setActiveChatId(null);
+        setResolvedChatId(uuidv4());
+      }
+    };
+    window.addEventListener('popstate', onPopState);
+    return () => window.removeEventListener('popstate', onPopState);
+  }, []);
+
+  // Load messages when activeChatId changes
+  useEffect(() => {
+    if (activeChatId) {
+      getChatMessages(activeChatId).then((dbMessages) => {
+        if (dbMessages.length === 0) {
+          // Stale chat (e.g. after login with old UUID) — start fresh
+          setInitialMessages([]);
+          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);
+        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}
+            />
+          )}
+        </SidebarInset>
+      </SidebarProvider>
+    </ChatNavProvider>
+  );
+}