@geminilight/mindos 0.6.58 → 0.6.60

package/_standalone/components/ask/AskHeader.tsx

@@ -1,6 +1,9 @@
-import { memo } from 'react';
-import { Sparkles, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow } from 'lucide-react';
+import { memo, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Sparkles, SquarePen, History, X, Maximize2, Minimize2, PanelRight, AppWindow, ChevronDown, Check, Trash2, Pencil, Pin, PinOff } from 'lucide-react';
 import { useLocale } from '@/lib/stores/locale-store';
+import type { ChatSession } from '@/lib/types';
+import { sessionTitle } from '@/hooks/useAskSession';
 
 interface AskHeaderProps {
   isPanel: boolean;
@@ -13,49 +16,246 @@ interface AskHeaderProps {
   askMode?: 'panel' | 'popup';
   onModeSwitch?: () => void;
   onClose?: () => void;
+  hideTitle?: boolean;
+  /** Session switching — inline in header when >=2 sessions */
+  sessions?: ChatSession[];
+  activeSessionId?: string | null;
+  onLoadSession?: (id: string) => void;
+  onDeleteSession?: (id: string) => void;
+  onRenameSession?: (id: string, name: string) => void;
+  onTogglePinSession?: (id: string) => void;
 }
 
 export default memo(function AskHeader({
   isPanel, showHistory, onToggleHistory, onReset, isLoading,
-  maximized, onMaximize, askMode, onModeSwitch, onClose,
+  maximized, onMaximize, askMode, onModeSwitch, onClose, hideTitle,
+  sessions, activeSessionId, onLoadSession, onDeleteSession, onRenameSession, onTogglePinSession,
 }: AskHeaderProps) {
   const { t } = useLocale();
-  const iconSize = isPanel ? 13 : 14;
+  const iconSize = 14;
+  const hasMultipleSessions = sessions && sessions.length >= 1;
+  const activeSession = sessions?.find(s => s.id === activeSessionId);
+  const activeTitle = activeSession ? sessionTitle(activeSession) : null;
+
+  // Session switcher dropdown state
+  const [switcherOpen, setSwitcherOpen] = useState(false);
+  const switcherRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  // Inline rename state
+  const [renamingId, setRenamingId] = useState<string | null>(null);
+  const [renameValue, setRenameValue] = useState('');
+  const renameInputRef = useRef<HTMLInputElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!switcherOpen) return;
+    const handler = (e: MouseEvent) => {
+      const target = e.target as Node;
+      if (
+        switcherRef.current && !switcherRef.current.contains(target) &&
+        dropdownRef.current && !dropdownRef.current.contains(target)
+      ) {
+        setSwitcherOpen(false);
+        setRenamingId(null);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [switcherOpen]);
+
+  useEffect(() => {
+    if (!switcherOpen) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (renamingId) { setRenamingId(null); } else { setSwitcherOpen(false); }
+      }
+    };
+    document.addEventListener('keydown', handler);
+    return () => document.removeEventListener('keydown', handler);
+  }, [switcherOpen, renamingId]);
+
+  // Focus rename input when it appears
+  useEffect(() => {
+    if (renamingId) setTimeout(() => renameInputRef.current?.focus(), 0);
+  }, [renamingId]);
+
+  const handleSelectSession = useCallback((id: string) => {
+    onLoadSession?.(id);
+    setSwitcherOpen(false);
+  }, [onLoadSession]);
+
+  const handleStartRename = useCallback((id: string, currentTitle: string) => {
+    setRenamingId(id);
+    setRenameValue(currentTitle === '(empty session)' ? '' : currentTitle);
+  }, []);
+
+  const handleCommitRename = useCallback(() => {
+    if (renamingId && onRenameSession && renameValue.trim()) {
+      onRenameSession(renamingId, renameValue.trim());
+    }
+    setRenamingId(null);
+  }, [renamingId, renameValue, onRenameSession]);
+
+  // Position dropdown below trigger
+  const [dropPos, setDropPos] = useState<{ top: number; left: number; width: number } | null>(null);
+  useEffect(() => {
+    if (!switcherOpen || !switcherRef.current) return;
+    const rect = switcherRef.current.getBoundingClientRect();
+    setDropPos({ top: rect.bottom + 4, left: rect.left, width: Math.max(rect.width, 240) });
+  }, [switcherOpen]);
+
+  const switcherDropdown = switcherOpen && dropPos && sessions ? createPortal(
+    <div
+      ref={dropdownRef}
+      className="fixed z-50 rounded-xl border border-border/50 bg-card shadow-lg py-1 animate-in fade-in-0 slide-in-from-top-1 duration-100"
+      style={{ top: dropPos.top, left: dropPos.left, minWidth: dropPos.width, maxWidth: 320 }}
+      role="listbox"
+    >
+      {sessions.map((s) => {
+        const isActive = s.id === activeSessionId;
+        const title = sessionTitle(s);
+        const displayTitle = title === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : title;
+
+        if (renamingId === s.id) {
+          return (
+            <div key={s.id} className="flex items-center gap-1 px-2 py-1.5">
+              <input
+                ref={renameInputRef}
+                type="text"
+                value={renameValue}
+                onChange={(e) => setRenameValue(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') handleCommitRename();
+                  if (e.key === 'Escape') setRenamingId(null);
+                }}
+                onBlur={handleCommitRename}
+                className="flex-1 min-w-0 px-2 py-1 text-xs rounded-md border border-border bg-background text-foreground outline-none focus:border-[var(--amber)]/50"
+                placeholder="Session name..."
+              />
+            </div>
+          );
+        }
+
+        return (
+          <div key={s.id} className="group/item flex items-center">
+            <button
+              type="button"
+              role="option"
+              aria-selected={isActive}
+              onClick={() => handleSelectSession(s.id)}
+              className={`flex-1 min-w-0 flex items-center gap-2 px-3 py-2 text-xs text-left transition-colors ${
+                isActive ? 'text-foreground font-medium' : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+              }`}
+            >
+              {s.pinned && <Pin size={10} className="shrink-0 text-[var(--amber)]/60 -rotate-45" />}
+              {isActive && !s.pinned && <Check size={11} className="shrink-0 text-[var(--amber)]" />}
+              <span className="truncate">{displayTitle}</span>
+            </button>
+            <div className="shrink-0 flex items-center gap-0.5 mr-1 opacity-0 group-hover/item:opacity-100 transition-opacity">
+              {onTogglePinSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); onTogglePinSession(s.id); }}
+                  className={`p-1.5 rounded-md transition-colors ${s.pinned ? 'text-[var(--amber)] hover:text-muted-foreground hover:bg-muted/60' : 'text-muted-foreground/40 hover:text-[var(--amber)] hover:bg-[var(--amber)]/5'}`}
+                  aria-label={s.pinned ? 'Unpin' : 'Pin'}
+                >
+                  {s.pinned ? <PinOff size={10} /> : <Pin size={10} />}
+                </button>
+              )}
+              {onRenameSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); handleStartRename(s.id, title); }}
+                  className="p-1.5 rounded-md text-muted-foreground/40 hover:text-foreground hover:bg-muted/60"
+                  aria-label={`Rename: ${displayTitle}`}
+                >
+                  <Pencil size={10} />
+                </button>
+              )}
+              {sessions.length > 1 && onDeleteSession && (
+                <button
+                  type="button"
+                  onClick={(e) => { e.stopPropagation(); onDeleteSession(s.id); }}
+                  className="p-1.5 rounded-md text-muted-foreground/40 hover:text-error hover:bg-error/5"
+                  aria-label={`Delete: ${displayTitle}`}
+                >
+                  <Trash2 size={10} />
+                </button>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>,
+    document.body,
+  ) : null;
 
   return (
-    <div className="flex items-center justify-between px-4 py-3 border-b border-border shrink-0">
+    <div className="flex items-center justify-between px-4 py-2.5 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 ? 'text-xs uppercase tracking-wider text-muted-foreground' : ''}>
-          {isPanel ? 'MindOS Agent' : t.ask.title}
-        </span>
-      </div>
+      {!hideTitle && (
+        <div className="flex items-center gap-2 min-w-0">
+          <div className="w-6 h-6 rounded-lg bg-[var(--amber)]/10 flex items-center justify-center shrink-0">
+            <Sparkles size={13} className="text-[var(--amber)]" />
+          </div>
+          {hasMultipleSessions && activeTitle ? (
+            <button
+              ref={switcherRef}
+              type="button"
+              onClick={() => {
+                if (sessions && sessions.length >= 2) {
+                  setSwitcherOpen(v => !v);
+                } else {
+                  onToggleHistory();
+                }
+              }}
+              className="flex items-center gap-1 min-w-0 text-sm font-medium text-[var(--amber)] hover:text-[var(--amber)]/80 transition-colors"
+              aria-expanded={switcherOpen}
+              aria-haspopup="listbox"
+            >
+              <span className="truncate max-w-[180px]">{activeTitle === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : activeTitle}</span>
+              <ChevronDown size={12} className={`shrink-0 text-muted-foreground transition-transform duration-150 ${switcherOpen ? 'rotate-180' : ''}`} />
+            </button>
+          ) : activeTitle ? (
+            <span className="text-sm font-medium text-muted-foreground/60 truncate max-w-[180px]">
+              {activeTitle === '(empty session)' ? (t.hints?.newChat ?? 'New chat') : activeTitle}
+            </span>
+          ) : (
+            /* Placeholder while sessions load — avoids flash of "MindOS Agent" text */
+            <span className="text-sm font-medium text-muted-foreground/40">
+              {t.hints?.newChat ?? 'New chat'}
+            </span>
+          )}
+        </div>
+      )}
+      {hideTitle && <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}>
+        <button type="button" onClick={(e) => { e.stopPropagation(); onToggleHistory(); }} aria-pressed={showHistory} className={`p-2 rounded-lg transition-colors ${showHistory ? 'bg-[var(--amber)]/10 text-[var(--amber)]' : '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}>
+        <button type="button" onClick={(e) => { e.stopPropagation(); onReset(); }} disabled={isLoading} className="p-2 rounded-lg 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}>
+        {onMaximize && (
+          <button type="button" onClick={(e) => { e.stopPropagation(); onMaximize(); }} className="p-2 rounded-lg 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}>
+          <button type="button" onClick={(e) => { e.stopPropagation(); onModeSwitch(); }} className="p-2 rounded-lg 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 type="button" onClick={(e) => { e.stopPropagation(); onClose(); }} className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors" title={t.hints.closePanel} aria-label="Close">
+            <X size={iconSize} />
           </button>
         )}
       </div>
+      {typeof document !== 'undefined' && switcherDropdown}
     </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, Folder } from 'lucide-react';
+import { X, FileText, Table, Paperclip, ImageIcon, Zap, Bot, Folder, Loader2, CheckCircle2, AlertCircle, AlertTriangle } from 'lucide-react';
 
 interface FileChipProps {
   path: string;
@@ -12,6 +12,16 @@ interface FileChipProps {
   imageData?: string;
   /** MIME type for image preview */
   imageMime?: string;
+  /** Extraction status for uploaded files (e.g. PDF). */
+  status?: 'loading' | 'success' | 'error';
+  /** Human-readable error message shown on hover when status='error'. */
+  error?: string;
+  /** Present when the PDF text was truncated due to length. */
+  truncatedInfo?: {
+    totalChars: number;
+    includedChars: number;
+    totalPages: number;
+  };
 }
 
 const VARIANT_ICON = {
@@ -30,11 +40,13 @@ const VARIANT_STYLE = {
   agent: 'border-[var(--amber)]/25 bg-[var(--amber)]/10 text-foreground',
 } as const;
 
-export default function FileChip({ path, onRemove, variant = 'kb', imageData, imageMime }: FileChipProps) {
+export default function FileChip({ path, onRemove, variant = 'kb', imageData, imageMime, status, error, truncatedInfo }: FileChipProps) {
   const [showPreview, setShowPreview] = useState(false);
+  const [showTooltip, setShowTooltip] = useState(false);
   const [mounted, setMounted] = useState(false);
   const chipRef = useRef<HTMLSpanElement>(null);
   const [previewPos, setPreviewPos] = useState<{ top: number; left: number } | null>(null);
+  const [tooltipPos, setTooltipPos] = useState<{ top: number; left: number } | null>(null);
 
   useEffect(() => setMounted(true), []);
 
@@ -42,23 +54,63 @@ export default function FileChip({ path, onRemove, variant = 'kb', imageData, im
   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
+
+  // Determine the base icon from variant / file type
+  const { icon: BaseIcon, cls: baseIconCls } = isDir
     ? { icon: Folder, cls: 'text-yellow-400' }
     : isCsv
     ? { icon: Table, cls: 'text-success' }
     : VARIANT_ICON[variant];
-  const style = VARIANT_STYLE[variant];
 
-  // Position preview above the chip using getBoundingClientRect
+  // Determine status trailing indicator
+  const isTruncated = !!truncatedInfo;
+  let StatusIndicator: React.ComponentType<{ size: number; className?: string }> | null = null;
+  let statusIndicatorCls = '';
+  if (status === 'loading') {
+    StatusIndicator = Loader2;
+    statusIndicatorCls = 'text-muted-foreground animate-spin';
+  } else if (status === 'error') {
+    StatusIndicator = AlertCircle;
+    statusIndicatorCls = 'text-destructive';
+  } else if (isTruncated) {
+    StatusIndicator = AlertTriangle;
+    statusIndicatorCls = 'text-amber-500';
+  } else if (status === 'success') {
+    StatusIndicator = CheckCircle2;
+    statusIndicatorCls = 'text-emerald-500';
+  }
+
+  const style = status === 'error'
+    ? 'border-destructive/30 bg-destructive/5 text-foreground'
+    : isTruncated
+    ? 'border-amber-500/30 bg-amber-500/5 text-foreground'
+    : VARIANT_STYLE[variant];
+
+  // Build tooltip text
+  let tooltipText: string | null = null;
+  if (status === 'error' && error) {
+    tooltipText = error;
+  } else if (isTruncated) {
+    const pct = truncatedInfo.totalChars > 0
+      ? Math.round((truncatedInfo.includedChars / truncatedInfo.totalChars) * 100)
+      : 0;
+    tooltipText = `Document truncated — only ${pct}% included (${Math.round(truncatedInfo.includedChars / 1000)}K / ${Math.round(truncatedInfo.totalChars / 1000)}K chars, ${truncatedInfo.totalPages} pages total)`;
+  }
+
+  // Position image preview above the chip
   useEffect(() => {
     if (!showPreview || !chipRef.current) { setPreviewPos(null); return; }
     const rect = chipRef.current.getBoundingClientRect();
-    setPreviewPos({
-      top: rect.top - 8, // 8px gap above chip
-      left: rect.left,
-    });
+    setPreviewPos({ top: rect.top - 8, left: rect.left });
   }, [showPreview]);
 
+  // Position tooltip above the chip
+  useEffect(() => {
+    if (!showTooltip || !chipRef.current) { setTooltipPos(null); return; }
+    const rect = chipRef.current.getBoundingClientRect();
+    setTooltipPos({ top: rect.top - 8, left: rect.left });
+  }, [showTooltip]);
+
   const preview = showPreview && previewPos && imageData && imageMime ? (
     <div
       className="fixed z-50 p-1 rounded-lg border border-border bg-card shadow-lg pointer-events-none"
@@ -75,16 +127,44 @@ export default function FileChip({ path, onRemove, variant = 'kb', imageData, im
     </div>
   ) : null;
 
+  const tooltipBorderCls = status === 'error'
+    ? 'border-destructive/20 text-destructive'
+    : 'border-amber-500/20 text-amber-600 dark:text-amber-400';
+
+  const tooltip = showTooltip && tooltipPos && tooltipText ? (
+    <div
+      className={`fixed z-50 px-2.5 py-1.5 rounded-lg border bg-card text-xs shadow-lg pointer-events-none max-w-[280px] ${tooltipBorderCls}`}
+      style={{
+        left: tooltipPos.left,
+        bottom: window.innerHeight - tooltipPos.top,
+      }}
+    >
+      {tooltipText}
+    </div>
+  ) : null;
+
+  const handleMouseEnter = () => {
+    if (imageData) setShowPreview(true);
+    if (tooltipText) setShowTooltip(true);
+  };
+  const handleMouseLeave = () => {
+    setShowPreview(false);
+    setShowTooltip(false);
+  };
+
   return (
     <>
       <span
         ref={chipRef}
         className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs border max-w-[220px] ${style}`}
-        onMouseEnter={() => imageData && setShowPreview(true)}
-        onMouseLeave={() => setShowPreview(false)}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
       >
-        <Icon size={11} className={`${iconClass} shrink-0`} />
+        <BaseIcon size={11} className={`${baseIconCls} shrink-0`} />
         <span className="truncate" title={isDir ? cleanPath : path}>{name}</span>
+        {StatusIndicator && (
+          <StatusIndicator size={10} className={`${statusIndicatorCls} shrink-0`} />
+        )}
         <button
           type="button"
           onClick={onRemove}
@@ -95,6 +175,7 @@ export default function FileChip({ path, onRemove, variant = 'kb', imageData, im
         </button>
       </span>
       {mounted && preview && createPortal(preview, document.body)}
+      {mounted && tooltip && createPortal(tooltip, document.body)}
     </>
   );
 }