npm - groove-dev - Versions diffs - 0.27.55 → 0.27.57 - Mend

groove-dev 0.27.55 → 0.27.57

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (42) hide show

package/node_modules/@groove-dev/gui/dist/index.html CHANGED Viewed

@@ -6,12 +6,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <title>Groove GUI</title>
-    <script type="module" crossorigin src="/assets/index-De-OWmBX.js"></script>
+    <script type="module" crossorigin src="/assets/index-X58BAjGp.js"></script>
     <link rel="modulepreload" crossorigin href="/assets/vendor-C0HXlhrU.js">
     <link rel="modulepreload" crossorigin href="/assets/reactflow-BQPfi37R.js">
     <link rel="modulepreload" crossorigin href="/assets/codemirror-BBL3i_JW.js">
     <link rel="modulepreload" crossorigin href="/assets/xterm--7_ns2zW.js">
-    <link rel="stylesheet" crossorigin href="/assets/index-CyVj0fHl.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-C5WTeZO4.css">
   </head>
   <body>
     <div id="root"></div>

package/node_modules/@groove-dev/gui/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@groove-dev/gui",
-  "version": "0.27.55",
+  "version": "0.27.57",
   "description": "GROOVE GUI — visual agent control plane",
   "license": "FSL-1.1-Apache-2.0",
   "type": "module",

package/node_modules/@groove-dev/gui/src/app.jsx CHANGED Viewed

@@ -19,6 +19,7 @@ import ModelsView from './views/models';
 import FederationView from './views/federation';
 import ToysView from './views/toys';
 import NetworkView from './views/network';
+import ChatView from './views/chat';
 // Agent components
 import { AgentPanel } from './components/agents/agent-panel';
@@ -70,6 +71,7 @@ function ViewRouter() {
     case 'models':      content = <ModelsView />;      break;
     case 'federation':  content = <FederationView />;  break;
     case 'settings':    content = <SettingsView />;    break;
+    case 'chat':        content = <ChatView />;        break;
     case 'network':     content = networkUnlocked ? <NetworkView /> : <AgentsView />; break;
     default:            content = <AgentsView />;
   }

package/node_modules/@groove-dev/gui/src/components/chat/chat-header.jsx ADDED Viewed

@@ -0,0 +1,138 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect } from 'react';
+import { Pencil, Pin, PinOff, Trash2, Hash, MoreHorizontal, Zap, Bot } from 'lucide-react';
+import { useGrooveStore } from '../../stores/groove';
+import { fmtNum } from '../../lib/format';
+import { ModelPicker } from './model-picker';
+import { Tooltip } from '../ui/tooltip';
+export function ChatHeader({ conversation, model, onModelChange, onModeChange }) {
+  const renameConversation = useGrooveStore((s) => s.renameConversation);
+  const pinConversation = useGrooveStore((s) => s.pinConversation);
+  const deleteConversation = useGrooveStore((s) => s.deleteConversation);
+  const [editing, setEditing] = useState(false);
+  const [title, setTitle] = useState(conversation.title || '');
+  const [menuOpen, setMenuOpen] = useState(false);
+  const inputRef = useRef(null);
+  const menuRef = useRef(null);
+  useEffect(() => {
+    setTitle(conversation.title || '');
+    setEditing(false);
+  }, [conversation.id, conversation.title]);
+  useEffect(() => {
+    if (editing && inputRef.current) inputRef.current.focus();
+  }, [editing]);
+  useEffect(() => {
+    if (!menuOpen) return;
+    function handleClick(e) {
+      if (menuRef.current && !menuRef.current.contains(e.target)) setMenuOpen(false);
+    }
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [menuOpen]);
+  function handleRename() {
+    const trimmed = title.trim();
+    if (trimmed && trimmed !== conversation.title) {
+      renameConversation(conversation.id, trimmed);
+    } else {
+      setTitle(conversation.title || '');
+    }
+    setEditing(false);
+  }
+  const agent = useGrooveStore((s) => s.agents.find((a) => a.id === conversation.agentId));
+  const tokens = agent?.tokensUsed || 0;
+  const mode = conversation.mode || 'api';
+  return (
+    <div className="h-11 flex items-center gap-3 px-4 border-b border-border bg-surface-1 flex-shrink-0">
+      <Hash size={14} className="text-text-4 flex-shrink-0" />
+      {editing ? (
+        <input
+          ref={inputRef}
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') handleRename(); if (e.key === 'Escape') { setTitle(conversation.title || ''); setEditing(false); } }}
+          onBlur={handleRename}
+          className="flex-1 min-w-0 bg-transparent text-sm font-semibold text-text-0 font-sans outline-none border-b border-accent"
+          maxLength={100}
+        />
+      ) : (
+        <button
+          onClick={() => setEditing(true)}
+          className="flex-1 min-w-0 text-left text-sm font-semibold text-text-0 font-sans truncate hover:text-accent transition-colors cursor-pointer"
+        >
+          {conversation.title || 'New Chat'}
+        </button>
+      )}
+      <div className="flex items-center gap-2 flex-shrink-0">
+        <div className="flex items-center h-7 rounded-lg bg-surface-3 border border-border-subtle p-0.5">
+          <Tooltip content="Lightweight — fast and cheap, no tools" side="bottom">
+            <button
+              onClick={() => onModeChange?.('api')}
+              className={`flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer ${mode === 'api' ? 'bg-accent/15 text-accent border border-accent/25' : 'text-text-3 hover:text-text-1'}`}
+            >
+              <Zap size={11} /> Chat
+            </button>
+          </Tooltip>
+          <Tooltip content="Full agent — tools, files, session resume" side="bottom">
+            <button
+              onClick={() => onModeChange?.('agent')}
+              className={`flex items-center gap-1 h-6 px-2 rounded-md text-2xs font-semibold font-sans transition-colors cursor-pointer ${mode === 'agent' ? 'bg-purple/15 text-purple border border-purple/25' : 'text-text-3 hover:text-text-1'}`}
+            >
+              <Bot size={11} /> Agent
+            </button>
+          </Tooltip>
+        </div>
+        <ModelPicker
+          value={model || { provider: conversation.provider, model: conversation.model }}
+          onChange={onModelChange}
+          disabled={false}
+        />
+        {tokens > 0 && (
+          <span className="text-2xs text-text-3 font-mono">{fmtNum(tokens)} tokens</span>
+        )}
+        <div ref={menuRef} className="relative">
+          <button
+            onClick={() => setMenuOpen(!menuOpen)}
+            className="w-7 h-7 flex items-center justify-center rounded-md text-text-3 hover:text-text-1 hover:bg-surface-3 transition-colors cursor-pointer"
+          >
+            <MoreHorizontal size={14} />
+          </button>
+          {menuOpen && (
+            <div className="absolute right-0 top-full mt-1 w-40 rounded-md border border-border bg-surface-1 shadow-xl z-50 py-1">
+              <button
+                onClick={() => { setEditing(true); setMenuOpen(false); }}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-text-1 hover:bg-surface-5 cursor-pointer font-sans"
+              >
+                <Pencil size={12} /> Rename
+              </button>
+              <button
+                onClick={() => { pinConversation(conversation.id, !conversation.pinned); setMenuOpen(false); }}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-text-1 hover:bg-surface-5 cursor-pointer font-sans"
+              >
+                {conversation.pinned ? <PinOff size={12} /> : <Pin size={12} />}
+                {conversation.pinned ? 'Unpin' : 'Pin'}
+              </button>
+              <div className="h-px my-1 bg-border-subtle" />
+              <button
+                onClick={() => { deleteConversation(conversation.id); setMenuOpen(false); }}
+                className="w-full flex items-center gap-2 px-3 py-1.5 text-sm text-danger hover:bg-danger/10 cursor-pointer font-sans"
+              >
+                <Trash2 size={12} /> Delete
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/chat/chat-input.jsx ADDED Viewed

@@ -0,0 +1,112 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Send, Loader2, Square, Paperclip } from 'lucide-react';
+import { cn } from '../../lib/cn';
+export function ChatInput({ onSend, onStop, sending, streaming, disabled }) {
+  const [input, setInput] = useState('');
+  const textareaRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const adjustHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = 'auto';
+    el.style.height = Math.min(el.scrollHeight, 200) + 'px';
+  }, []);
+  useEffect(() => {
+    adjustHeight();
+  }, [input, adjustHeight]);
+  useEffect(() => {
+    if (!disabled && textareaRef.current) textareaRef.current.focus();
+  }, [disabled]);
+  function handleSend() {
+    const text = input.trim();
+    if (!text || sending || disabled) return;
+    onSend(text);
+    setInput('');
+    if (textareaRef.current) {
+      textareaRef.current.style.height = 'auto';
+    }
+  }
+  function onKeyDown(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  }
+  function handleFileSelect(e) {
+    const files = Array.from(e.target.files || []);
+    if (files.length === 0) return;
+    const pathList = files.map((f) => f.name).join(', ');
+    setInput((prev) => prev + (prev ? '\n' : '') + `[Attached: ${pathList}]`);
+    e.target.value = '';
+  }
+  const isActive = streaming || sending;
+  const canSend = input.trim() && !sending && !disabled;
+  return (
+    <div className="px-4 py-3">
+      <div className="flex items-end gap-2 rounded-2xl bg-surface-3/60 border border-border-subtle px-3 py-2 focus-within:border-accent/30 transition-colors">
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept=".pdf,.png,.jpg,.jpeg,.gif,.svg,.csv,.txt,.md,.json,.yaml,.yml,.docx,.pptx,.xlsx"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+          className="w-8 h-8 flex items-center justify-center rounded-lg text-text-4 hover:text-text-1 hover:bg-surface-4 transition-colors cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed flex-shrink-0"
+          title="Attach file"
+        >
+          <Paperclip size={15} />
+        </button>
+        <textarea
+          ref={textareaRef}
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={onKeyDown}
+          placeholder={disabled ? 'Select a model to start chatting...' : 'Send a message...'}
+          disabled={disabled}
+          rows={1}
+          style={{ minHeight: '36px' }}
+          className="flex-1 resize-none bg-transparent text-sm text-text-0 font-sans placeholder:text-text-4 focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed py-1.5"
+        />
+        {isActive ? (
+          <button
+            onClick={onStop}
+            className="w-8 h-8 flex items-center justify-center rounded-xl bg-danger/80 text-white hover:bg-danger transition-all cursor-pointer shadow-lg shadow-danger/20 flex-shrink-0"
+            title="Stop generation"
+          >
+            <Square size={14} fill="currentColor" />
+          </button>
+        ) : (
+          <button
+            onClick={handleSend}
+            disabled={!canSend}
+            className={cn(
+              'w-8 h-8 flex items-center justify-center rounded-xl transition-all cursor-pointer flex-shrink-0',
+              'disabled:opacity-20 disabled:cursor-not-allowed',
+              canSend
+                ? 'bg-accent/15 text-accent hover:bg-accent/25 border border-accent/25'
+                : 'bg-surface-4 text-text-4',
+            )}
+          >
+            {sending ? <Loader2 size={16} className="animate-spin" /> : <Send size={16} />}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/node_modules/@groove-dev/gui/src/components/chat/chat-messages.jsx ADDED Viewed

@@ -0,0 +1,347 @@
+// FSL-1.1-Apache-2.0 — see LICENSE
+import { useRef, useEffect, useState } from 'react';
+import { Copy, Check, ArrowRight, MessageCircle, Sparkles } from 'lucide-react';
+import { cn } from '../../lib/cn';
+import { timeAgo } from '../../lib/format';
+import { ThinkingIndicator } from '../ui/thinking-indicator';
+function CopyButton({ text }) {
+  const [copied, setCopied] = useState(false);
+  function handleCopy() {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+  return (
+    <button
+      onClick={handleCopy}
+      className="flex items-center gap-1 px-2 py-1 text-2xs font-sans text-text-3 hover:text-text-1 transition-colors cursor-pointer"
+    >
+      {copied ? <Check size={12} className="text-success" /> : <Copy size={12} />}
+      {copied ? 'Copied' : 'Copy'}
+    </button>
+  );
+}
+function CodeBlock({ language, code }) {
+  return (
+    <div className="my-3 rounded-lg border border-border-subtle overflow-hidden bg-surface-0">
+      <div className="flex items-center justify-between px-3 py-1.5 bg-surface-3 border-b border-border-subtle">
+        <span className="text-2xs font-mono text-text-3">{language || 'code'}</span>
+        <CopyButton text={code} />
+      </div>
+      <pre className="px-4 py-3 overflow-x-auto">
+        <code className="text-xs font-mono text-text-1 leading-relaxed whitespace-pre">{code}</code>
+      </pre>
+    </div>
+  );
+}
+function parseMarkdown(text) {
+  if (!text) return [];
+  const lines = text.split('\n');
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    // Fenced code block
+    if (line.startsWith('```')) {
+      const lang = line.slice(3).trim();
+      const codeLines = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith('```')) {
+        codeLines.push(lines[i]);
+        i++;
+      }
+      i++; // skip closing ```
+      blocks.push({ type: 'code', language: lang, code: codeLines.join('\n') });
+      continue;
+    }
+    // Heading
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)/);
+    if (headingMatch) {
+      blocks.push({ type: 'heading', level: headingMatch[1].length, text: headingMatch[2] });
+      i++;
+      continue;
+    }
+    // Horizontal rule
+    if (/^(-{3,}|_{3,}|\*{3,})$/.test(line.trim())) {
+      blocks.push({ type: 'hr' });
+      i++;
+      continue;
+    }
+    // Blockquote
+    if (line.startsWith('> ')) {
+      const quoteLines = [line.slice(2)];
+      i++;
+      while (i < lines.length && lines[i].startsWith('> ')) {
+        quoteLines.push(lines[i].slice(2));
+        i++;
+      }
+      blocks.push({ type: 'blockquote', text: quoteLines.join('\n') });
+      continue;
+    }
+    // Unordered list
+    if (/^[-*+]\s/.test(line)) {
+      const items = [line.replace(/^[-*+]\s/, '')];
+      i++;
+      while (i < lines.length && /^[-*+]\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^[-*+]\s/, ''));
+        i++;
+      }
+      blocks.push({ type: 'ul', items });
+      continue;
+    }
+    // Ordered list
+    if (/^\d+\.\s/.test(line)) {
+      const items = [line.replace(/^\d+\.\s/, '')];
+      i++;
+      while (i < lines.length && /^\d+\.\s/.test(lines[i])) {
+        items.push(lines[i].replace(/^\d+\.\s/, ''));
+        i++;
+      }
+      blocks.push({ type: 'ol', items });
+      continue;
+    }
+    // Table
+    if (line.includes('|') && i + 1 < lines.length && /^\|?\s*[-:]+/.test(lines[i + 1])) {
+      const headerCells = line.split('|').map((c) => c.trim()).filter(Boolean);
+      i += 2; // skip header + separator
+      const rows = [];
+      while (i < lines.length && lines[i].includes('|')) {
+        rows.push(lines[i].split('|').map((c) => c.trim()).filter(Boolean));
+        i++;
+      }
+      blocks.push({ type: 'table', headers: headerCells, rows });
+      continue;
+    }
+    // Empty line
+    if (line.trim() === '') {
+      i++;
+      continue;
+    }
+    // Paragraph — collect consecutive non-empty lines
+    const paraLines = [line];
+    i++;
+    while (i < lines.length && lines[i].trim() !== '' && !lines[i].startsWith('```') && !lines[i].startsWith('#') && !/^[-*+]\s/.test(lines[i]) && !/^\d+\.\s/.test(lines[i]) && !lines[i].startsWith('> ') && !/^(-{3,}|_{3,}|\*{3,})$/.test(lines[i].trim())) {
+      paraLines.push(lines[i]);
+      i++;
+    }
+    blocks.push({ type: 'paragraph', text: paraLines.join('\n') });
+  }
+  return blocks;
+}
+function InlineMarkdown({ text }) {
+  if (!text) return null;
+  const parts = text.split(/(```[\s\S]*?```|`[^`]+`|\*\*[^*]+\*\*|\*[^*]+\*|~~[^~]+~~|\[([^\]]+)\]\(([^)]+)\))/g);
+  return (
+    <>
+      {parts.map((part, i) => {
+        if (!part) return null;
+        if (part.startsWith('`') && part.endsWith('`') && !part.startsWith('``')) {
+          return <code key={i} className="px-1.5 py-0.5 rounded bg-surface-0 text-xs font-mono text-accent">{part.slice(1, -1)}</code>;
+        }
+        if (part.startsWith('**') && part.endsWith('**')) {
+          return <strong key={i} className="font-semibold text-text-0">{part.slice(2, -2)}</strong>;
+        }
+        if (part.startsWith('*') && part.endsWith('*') && !part.startsWith('**')) {
+          return <em key={i} className="italic">{part.slice(1, -1)}</em>;
+        }
+        if (part.startsWith('~~') && part.endsWith('~~')) {
+          return <del key={i} className="line-through text-text-3">{part.slice(2, -2)}</del>;
+        }
+        const linkMatch = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+        if (linkMatch) {
+          return <a key={i} href={linkMatch[2]} target="_blank" rel="noopener noreferrer" className="text-accent hover:underline">{linkMatch[1]}</a>;
+        }
+        return <span key={i}>{part}</span>;
+      })}
+    </>
+  );
+}
+function RenderedMarkdown({ text }) {
+  const blocks = parseMarkdown(text);
+  return (
+    <div className="space-y-2">
+      {blocks.map((block, i) => {
+        switch (block.type) {
+          case 'code':
+            return <CodeBlock key={i} language={block.language} code={block.code} />;
+          case 'heading': {
+            const sizes = ['text-lg font-bold', 'text-base font-bold', 'text-sm font-semibold', 'text-sm font-semibold', 'text-xs font-semibold', 'text-xs font-semibold'];
+            return <div key={i} className={cn(sizes[block.level - 1] || sizes[0], 'text-text-0 font-sans mt-3 mb-1')}><InlineMarkdown text={block.text} /></div>;
+          }
+          case 'hr':
+            return <hr key={i} className="border-border-subtle my-3" />;
+          case 'blockquote':
+            return (
+              <div key={i} className="border-l-2 border-accent/40 pl-3 py-1 text-sm text-text-2 italic font-sans">
+                <InlineMarkdown text={block.text} />
+              </div>
+            );
+          case 'ul':
+            return (
+              <ul key={i} className="list-disc list-inside space-y-0.5 text-sm text-text-1 font-sans">
+                {block.items.map((item, j) => <li key={j}><InlineMarkdown text={item} /></li>)}
+              </ul>
+            );
+          case 'ol':
+            return (
+              <ol key={i} className="list-decimal list-inside space-y-0.5 text-sm text-text-1 font-sans">
+                {block.items.map((item, j) => <li key={j}><InlineMarkdown text={item} /></li>)}
+              </ol>
+            );
+          case 'table':
+            return (
+              <div key={i} className="overflow-x-auto my-2">
+                <table className="text-xs font-sans border-collapse w-full">
+                  <thead>
+                    <tr className="border-b border-border">
+                      {block.headers.map((h, j) => (
+                        <th key={j} className="px-3 py-1.5 text-left font-semibold text-text-0">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {block.rows.map((row, j) => (
+                      <tr key={j} className="border-b border-border-subtle">
+                        {row.map((cell, k) => (
+                          <td key={k} className="px-3 py-1.5 text-text-1"><InlineMarkdown text={cell} /></td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            );
+          case 'paragraph':
+            return <p key={i} className="text-sm text-text-1 font-sans leading-relaxed whitespace-pre-wrap break-words"><InlineMarkdown text={block.text} /></p>;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+function UserMessage({ msg }) {
+  return (
+    <div className="flex justify-end">
+      <div className="max-w-[75%]">
+        <div className="px-4 py-3 rounded-2xl rounded-br-md bg-accent/10 border border-accent/15">
+          <p className="text-sm text-text-0 font-sans whitespace-pre-wrap break-words leading-relaxed">{msg.text}</p>
+        </div>
+        <div className="text-2xs text-text-4 font-sans mt-1 text-right">{timeAgo(msg.timestamp)}</div>
+      </div>
+    </div>
+  );
+}
+function AssistantMessage({ msg, model }) {
+  return (
+    <div className="flex gap-3">
+      <div className="w-7 h-7 rounded-full bg-surface-4 border border-border-subtle flex items-center justify-center flex-shrink-0 mt-0.5">
+        <Sparkles size={13} className="text-accent" />
+      </div>
+      <div className="flex-1 min-w-0 max-w-[85%]">
+        {model && <div className="text-2xs text-text-3 font-sans mb-1 font-medium">{model}</div>}
+        <div className="px-4 py-3 rounded-2xl rounded-bl-md bg-surface-4 border border-border-subtle">
+          <RenderedMarkdown text={msg.text} />
+        </div>
+        <div className="text-2xs text-text-4 font-sans mt-1">{timeAgo(msg.timestamp)}</div>
+      </div>
+    </div>
+  );
+}
+function SystemMessage({ msg }) {
+  return (
+    <div className="flex justify-center py-1">
+      <div className="flex items-center gap-1.5 px-3 py-1 rounded-full bg-surface-4/50">
+        <ArrowRight size={10} className="text-text-4" />
+        <span className="text-2xs text-text-3 font-sans">{msg.text}</span>
+      </div>
+    </div>
+  );
+}
+function StreamingCursor() {
+  return (
+    <span className="inline-block w-2 h-4 bg-accent/60 ml-0.5 animate-pulse rounded-sm" />
+  );
+}
+function WelcomeMessage() {
+  return (
+    <div className="flex flex-col items-center justify-center h-full text-center py-16">
+      <div className="w-16 h-16 rounded-full bg-accent/8 flex items-center justify-center mb-5">
+        <MessageCircle size={28} className="text-accent" />
+      </div>
+      <h2 className="text-xl font-bold text-text-0 font-sans mb-2">Start a conversation</h2>
+      <p className="text-sm text-text-2 font-sans max-w-sm leading-relaxed">
+        Send a message to begin. Your conversation history is saved locally and syncs across sessions.
+      </p>
+    </div>
+  );
+}
+export function ChatMessages({ messages, isStreaming, model }) {
+  const scrollRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    function handleScroll() {
+      isAtBottomRef.current = el.scrollHeight - el.scrollTop - el.clientHeight < 50;
+    }
+    el.addEventListener('scroll', handleScroll);
+    return () => el.removeEventListener('scroll', handleScroll);
+  }, []);
+  useEffect(() => {
+    if (isAtBottomRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages?.length, isStreaming]);
+  if (!messages || messages.length === 0) {
+    return (
+      <div ref={scrollRef} className="flex-1 overflow-y-auto">
+        <WelcomeMessage />
+      </div>
+    );
+  }
+  return (
+    <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
+      {messages.map((msg, i) => {
+        if (msg.from === 'user') return <UserMessage key={i} msg={msg} />;
+        if (msg.from === 'system') return <SystemMessage key={i} msg={msg} />;
+        return <AssistantMessage key={i} msg={msg} model={model} />;
+      })}
+      {isStreaming && (
+        <div className="flex gap-3">
+          <div className="w-7 h-7 rounded-full bg-surface-4 border border-border-subtle flex items-center justify-center flex-shrink-0">
+            <Sparkles size={13} className="text-accent" />
+          </div>
+          <ThinkingIndicator className="py-1" />
+        </div>
+      )}
+    </div>
+  );
+}