@geminilight/mindos 0.6.39 → 0.6.41

package/_standalone/components/ask/AskHeader.tsx

@@ -0,0 +1,61 @@
+import { memo } from 'react';
+import { Sparkles, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+
+interface AskHeaderProps {
+  isPanel: boolean;
+  showHistory: boolean;
+  onToggleHistory: () => void;
+  onReset: () => void;
+  isLoading: boolean;
+  maximized?: boolean;
+  onMaximize?: () => void;
+  askMode?: 'panel' | 'popup';
+  onModeSwitch?: () => void;
+  onClose?: () => void;
+}
+
+export default memo(function AskHeader({
+  isPanel, showHistory, onToggleHistory, onReset, isLoading,
+  maximized, onMaximize, askMode, onModeSwitch, onClose,
+}: AskHeaderProps) {
+  const { t } = useLocale();
+  const iconSize = isPanel ? 13 : 14;
+
+  return (
+    <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+      {!isPanel && (
+        <div className="absolute top-2 left-1/2 -translate-x-1/2 w-8 h-1 rounded-full bg-muted-foreground/20 md:hidden" />
+      )}
+      <div className="flex items-center gap-2 text-sm font-medium text-foreground">
+        <Sparkles size={isPanel ? 14 : 15} className="text-[var(--amber)]" />
+        <span className={isPanel ? 'font-display text-xs uppercase tracking-wider text-muted-foreground' : 'font-display'}>
+          {isPanel ? 'MindOS Agent' : t.ask.title}
+        </span>
+      </div>
+      <div className="flex items-center gap-1 shrink-0">
+        <button type="button" onClick={(e) => { e.stopPropagation(); onToggleHistory(); }} aria-pressed={showHistory} className={`p-2 rounded transition-colors ${showHistory ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground hover:bg-muted'}`} title={t.hints.sessionHistory}>
+          <History size={iconSize} />
+        </button>
+        <button type="button" onClick={(e) => { e.stopPropagation(); onReset(); }} disabled={isLoading} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors disabled:opacity-40" title={t.hints.newSession}>
+          <SquarePen size={iconSize} />
+        </button>
+        {isPanel && onMaximize && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onMaximize(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={maximized ? t.hints.restorePanel : t.hints.maximizePanel}>
+            {maximized ? <Minimize2 size={iconSize} /> : <Maximize2 size={iconSize} />}
+          </button>
+        )}
+        {onModeSwitch && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onModeSwitch(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={askMode === 'popup' ? t.hints.dockToSide : t.hints.openAsPopup}>
+            {askMode === 'popup' ? <PanelRight size={iconSize} /> : <AppWindow size={iconSize} />}
+          </button>
+        )}
+        {onClose && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onClose(); }} className="p-2 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.hints.closePanel} aria-label="Close">
+            <X size={isPanel ? iconSize : 15} />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+});

package/_standalone/components/ask/FileChip.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot } from 'lucide-react';
+import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot, Folder } from 'lucide-react';
 
 interface FileChipProps {
   path: string;
@@ -38,9 +38,13 @@ export default function FileChip({ path, onRemove, variant = 'kb', imageData, im
 
   useEffect(() => setMounted(true), []);
 
-  const name = path.split('/').pop() ?? path;
-  const isCsv = variant === 'kb' && name.endsWith('.csv');
-  const { icon: Icon, cls: iconClass } = isCsv
+  const isDir = variant === 'kb' && path.endsWith('/');
+  const cleanPath = isDir ? path.slice(0, -1) : path;
+  const name = cleanPath.split('/').pop() ?? cleanPath;
+  const isCsv = variant === 'kb' && !isDir && name.endsWith('.csv');
+  const { icon: Icon, cls: iconClass } = isDir
+    ? { icon: Folder, cls: 'text-yellow-400' }
+    : isCsv
     ? { icon: Table, cls: 'text-success' }
     : VARIANT_ICON[variant];
   const style = VARIANT_STYLE[variant];
@@ -80,7 +84,7 @@ export default function FileChip({ path, onRemove, variant = 'kb', imageData, im
         onMouseLeave={() => setShowPreview(false)}
       >
         <Icon size={11} className={`${iconClass} shrink-0`} />
-        <span className="truncate" title={path}>{name}</span>
+        <span className="truncate" title={isDir ? cleanPath : path}>{name}</span>
         <button
           type="button"
           onClick={onRemove}

package/_standalone/components/ask/MessageList.tsx

@@ -1,16 +1,40 @@
 'use client';
 
-import { useRef, useEffect } from 'react';
-import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap } from 'lucide-react';
+import { useRef, useEffect, memo, useState, useCallback } from 'react';
+import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap, Copy, Check, ArrowDown } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import type { Message, ImagePart } from '@/lib/types';
 import { stripThinkingTags } from '@/hooks/useAiOrganize';
+import { copyToClipboard } from '@/lib/clipboard';
 import ToolCallBlock from './ToolCallBlock';
 import ThinkingBlock from './ThinkingBlock';
 
 const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
 
+function CopyMessageButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(() => {
+    copyToClipboard(text).then(ok => {
+      if (ok) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }
+    });
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="absolute -bottom-1 right-1 p-1 rounded-md bg-card border border-border/60 shadow-sm text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+      title="Copy"
+    >
+      {copied ? <Check size={11} className="text-success" /> : <Copy size={11} />}
+    </button>
+  );
+}
+
 function UserMessageContent({ content, skillName, images }: { content: string; skillName?: string; images?: ImagePart[] }) {
   const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
   const prefixMatch = content.match(SKILL_PREFIX_RE);
@@ -53,20 +77,21 @@ function AssistantMessage({ content, isStreaming }: { content: string; isStreami
   if (!cleaned && !isStreaming) return null;
   return (
     <div className="prose prose-sm prose-panel dark:prose-invert max-w-none text-foreground
-      prose-p:my-1 prose-p:leading-relaxed
-      prose-headings:font-semibold prose-headings:my-2 prose-headings:text-[13px]
-      prose-ul:my-1 prose-li:my-0.5
-      prose-ol:my-1
-      prose-code:text-[0.8em] prose-code:bg-muted prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
-      prose-pre:bg-muted prose-pre:text-foreground prose-pre:text-xs
-      prose-blockquote:border-l-amber-400 prose-blockquote:text-muted-foreground
-      prose-a:text-amber-500 prose-a:no-underline hover:prose-a:underline
+      prose-p:my-2 prose-p:leading-relaxed
+      prose-headings:font-semibold prose-headings:my-3
+      prose-h1:text-base prose-h2:text-[15px] prose-h3:text-sm
+      prose-ul:my-1.5 prose-li:my-0.5
+      prose-ol:my-1.5
+      prose-code:text-[0.8em] prose-code:bg-background/60 prose-code:px-1 prose-code:py-0.5 prose-code:rounded prose-code:before:content-none prose-code:after:content-none
+      prose-pre:bg-background/60 prose-pre:text-foreground prose-pre:text-xs
+      prose-blockquote:border-l-[var(--amber)] prose-blockquote:text-muted-foreground
+      prose-a:text-[var(--amber)] prose-a:no-underline hover:prose-a:underline
       prose-strong:text-foreground prose-strong:font-semibold
       prose-table:text-xs prose-th:py-1 prose-td:py-1
     ">
       <ReactMarkdown remarkPlugins={[remarkGfm]}>{cleaned}</ReactMarkdown>
       {isStreaming && (
-        <span className="inline-block w-1.5 h-3.5 bg-amber-400 ml-0.5 align-middle animate-pulse rounded-sm" />
+        <span className="inline-block w-1.5 h-3.5 bg-[var(--amber)] ml-0.5 align-middle animate-pulse rounded-sm" />
       )}
     </div>
   );
@@ -132,6 +157,7 @@ interface MessageListProps {
   isLoading: boolean;
   loadingPhase: 'connecting' | 'thinking' | 'streaming' | 'reconnecting';
   emptyPrompt: string;
+  emptyHint?: string;
   suggestions: readonly string[];
   onSuggestionClick: (text: string) => void;
   labels: {
@@ -142,33 +168,59 @@ interface MessageListProps {
   };
 }
 
-export default function MessageList({
+export default memo(function MessageList({
   messages,
   isLoading,
   loadingPhase,
   emptyPrompt,
+  emptyHint,
   suggestions,
   onSuggestionClick,
   labels,
 }: MessageListProps) {
   const endRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [showScrollDown, setShowScrollDown] = useState(false);
 
-  useEffect(() => {
+  const scrollToBottom = useCallback(() => {
     endRef.current?.scrollIntoView({ behavior: 'smooth' });
-  }, [messages]);
+  }, []);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, scrollToBottom]);
+
+  useEffect(() => {
+    const container = scrollContainerRef.current;
+    if (!container) return;
+    const handleScroll = () => {
+      const { scrollTop, scrollHeight, clientHeight } = container;
+      setShowScrollDown(scrollHeight - scrollTop - clientHeight > 100);
+    };
+    container.addEventListener('scroll', handleScroll, { passive: true });
+    return () => container.removeEventListener('scroll', handleScroll);
+  }, []);
 
   return (
-    <div className="flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 space-y-4 min-h-0">
+    <div ref={scrollContainerRef} className="relative flex-1 overflow-y-auto overflow-x-hidden px-4 py-4 space-y-4 min-h-0">
       {messages.length === 0 && (
-        <div className="mt-6 space-y-3">
-          <p className="text-center text-sm text-muted-foreground/60">{emptyPrompt}</p>
-          <div className="flex flex-col gap-2 px-2">
+        <div className="flex flex-col items-center justify-center flex-1 min-h-[200px] px-4">
+          {/* Brand anchor */}
+          <div className="w-10 h-10 rounded-xl bg-[var(--amber)]/10 flex items-center justify-center mb-4">
+            <Sparkles size={20} className="text-[var(--amber)]" />
+          </div>
+          <p className="text-center text-sm font-medium text-foreground/80 mb-1">{emptyPrompt}</p>
+          {emptyHint && (
+            <p className="text-center text-[11px] text-muted-foreground/50 mb-5">{emptyHint}</p>
+          )}
+          {/* Suggestion chips — centered 2-column grid */}
+          <div className="grid grid-cols-2 gap-2 max-w-sm w-full">
             {suggestions.map((s, i) => (
               <button
                 key={i}
                 type="button"
                 onClick={() => onSuggestionClick(s)}
-                className="text-left text-xs px-3 py-2 rounded-lg border border-border bg-muted/50 text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                className="text-left text-xs px-3 py-2.5 rounded-lg border border-border/60 bg-card text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30 hover:bg-[var(--amber)]/5 transition-colors leading-snug"
               >
                 {s}
               </button>
@@ -199,13 +251,16 @@ export default function MessageList({
               </div>
             </div>
           ) : (
-            <div className="max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
+            <div className="group relative max-w-[85%] px-3 py-2 rounded-xl rounded-bl-sm bg-muted text-foreground text-sm">
               {(m.parts && m.parts.length > 0) || stripThinkingTags(m.content) ? (
                 <>
                   <AssistantMessageWithParts message={m} isStreaming={isLoading && i === messages.length - 1} />
                   {isLoading && i === messages.length - 1 && (
                     <StepCounter parts={m.parts} />
                   )}
+                  {!(isLoading && i === messages.length - 1) && stripThinkingTags(m.content) && (
+                    <CopyMessageButton text={stripThinkingTags(m.content)} />
+                  )}
                 </>
               ) : isLoading && i === messages.length - 1 ? (
                 <div className="flex items-center gap-2 py-1">
@@ -230,6 +285,18 @@ export default function MessageList({
         </div>
       ))}
       <div ref={endRef} />
+
+      {/* Scroll-to-bottom FAB */}
+      {showScrollDown && messages.length > 0 && (
+        <button
+          type="button"
+          onClick={scrollToBottom}
+          className="sticky bottom-2 left-1/2 -translate-x-1/2 z-10 p-1.5 rounded-full border border-border/60 bg-card shadow-md text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+          title="Scroll to bottom"
+        >
+          <ArrowDown size={14} />
+        </button>
+      )}
     </div>
   );
-}
+});

package/_standalone/components/ask/ModeCapsule.tsx

@@ -0,0 +1,180 @@
+'use client';
+
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { MessageSquare, Sparkles, ChevronDown, Check } from 'lucide-react';
+import { useLocale } from '@/lib/stores/locale-store';
+import type { AskMode } from '@/lib/types';
+
+const STORAGE_KEY = 'mindos-ask-mode';
+
+interface ModeCapsuleProps {
+  mode: AskMode;
+  onChange: (mode: AskMode) => void;
+  disabled?: boolean;
+}
+
+interface DropdownPos {
+  top: number;
+  left: number;
+  direction: 'up' | 'down';
+}
+
+export function getPersistedMode(): AskMode {
+  if (typeof window === 'undefined') return 'agent';
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored === 'chat' || stored === 'agent') return stored;
+  } catch { /* localStorage unavailable */ }
+  return 'agent';
+}
+
+export function persistMode(mode: AskMode): void {
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch { /* localStorage unavailable */ }
+}
+
+const MODE_OPTIONS: AskMode[] = ['agent', 'chat'];
+
+export default function ModeCapsule({ mode, onChange, disabled }: ModeCapsuleProps) {
+  const { t } = useLocale();
+  const [open, setOpen] = useState(false);
+  const [pos, setPos] = useState<DropdownPos | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const reposition = useCallback(() => {
+    if (!triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    const spaceAbove = rect.top;
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const estimatedH = 120;
+    const direction: 'up' | 'down' = spaceAbove > spaceBelow && spaceAbove > estimatedH ? 'up' : 'down';
+    setPos({
+      left: rect.left,
+      top: direction === 'up' ? rect.top - 6 : rect.bottom + 6,
+      direction,
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!open) return;
+    reposition();
+  }, [open, reposition]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        triggerRef.current && !triggerRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) return;
+    window.addEventListener('scroll', reposition, true);
+    window.addEventListener('resize', reposition);
+    return () => {
+      window.removeEventListener('scroll', reposition, true);
+      window.removeEventListener('resize', reposition);
+    };
+  }, [open, reposition]);
+
+  const handleSelect = useCallback((m: AskMode) => {
+    onChange(m);
+    persistMode(m);
+    setOpen(false);
+  }, [onChange]);
+
+  const isChat = mode === 'chat';
+
+  const modeIcon = (m: AskMode, size: number) =>
+    m === 'chat'
+      ? <MessageSquare size={size} className="shrink-0" />
+      : <Sparkles size={size} className="shrink-0" />;
+
+  const modeName = (m: AskMode) => m === 'chat' ? t.ask.modeChat : t.ask.modeAgent;
+  const modeHint = (m: AskMode) => m === 'chat' ? t.ask.modeChatHint : t.ask.modeAgentHint;
+
+  const dropdown = open && pos ? (
+    <div
+      ref={dropdownRef}
+      role="listbox"
+      aria-label="Select mode"
+      className="fixed z-50 min-w-[200px] max-w-[260px] rounded-lg border border-border bg-card shadow-lg py-1 animate-in fade-in-0 zoom-in-95 duration-100"
+      style={{
+        left: pos.left,
+        ...(pos.direction === 'up'
+          ? { bottom: window.innerHeight - pos.top }
+          : { top: pos.top }),
+      }}
+    >
+      {MODE_OPTIONS.map((m) => {
+        const isSelected = mode === m;
+        return (
+          <button
+            key={m}
+            type="button"
+            role="option"
+            aria-selected={isSelected}
+            onClick={() => handleSelect(m)}
+            className="flex w-full items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors hover:bg-muted"
+          >
+            <span className="text-muted-foreground">{modeIcon(m, 13)}</span>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium">{modeName(m)}</div>
+              <div className="text-2xs text-muted-foreground mt-0.5">{modeHint(m)}</div>
+            </div>
+            {isSelected && <Check size={12} className="shrink-0 text-[var(--amber)]" />}
+          </button>
+        );
+      })}
+    </div>
+  ) : null;
+
+  return (
+    <>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => { if (!disabled) setOpen(v => !v); }}
+        disabled={disabled}
+        className={`
+          inline-flex items-center gap-1 rounded-full px-2.5 py-0.5
+          text-2xs font-medium transition-colors select-none
+          border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring
+          disabled:opacity-40 disabled:cursor-not-allowed
+          ${isChat
+            ? 'bg-muted/50 border-border/50 text-muted-foreground hover:bg-muted hover:text-foreground'
+            : 'bg-[var(--amber)]/10 border-[var(--amber)]/25 text-foreground hover:bg-[var(--amber)]/15'
+          }
+        `}
+        title={modeHint(mode)}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        {modeIcon(mode, 11)}
+        <span className="truncate max-w-[80px]">{modeName(mode)}</span>
+        <ChevronDown size={10} className="shrink-0 text-muted-foreground" />
+      </button>
+      {typeof document !== 'undefined' && dropdown && createPortal(dropdown, document.body)}
+    </>
+  );
+}