@geminilight/mindos 0.6.73 → 0.6.74

package/_standalone/components/ask/MessageList.tsx

@@ -1,371 +0,0 @@
-'use client';
-
-import { useRef, useEffect, memo, useState, useCallback } from 'react';
-import { Sparkles, Loader2, AlertCircle, Wrench, WifiOff, Zap, Copy, Check, ArrowDown, FolderInput, Search, PenLine, Lightbulb, FileText, Paperclip } 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';
-import { SaveMessageButton } from './SaveSessionInline';
-
-const SKILL_PREFIX_RE = /^Use the skill ([^:]+):\s*/;
-
-function CopyMessageButton({ text, label }: { text: string; label?: 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="p-1 rounded-md bg-card border border-border/60 shadow-sm text-muted-foreground hover:text-foreground transition-colors"
-      title={label ?? 'Copy'}
-    >
-      {copied ? <Check size={11} className="text-success" /> : <Copy size={11} />}
-    </button>
-  );
-}
-
-function UserMessageContent({ content, skillName, images, attachedFiles, uploadedFileNames }: { content: string; skillName?: string; images?: ImagePart[]; attachedFiles?: string[]; uploadedFileNames?: string[] }) {
-  const resolved = skillName ?? content.match(SKILL_PREFIX_RE)?.[1];
-  const prefixMatch = content.match(SKILL_PREFIX_RE);
-  const rest = prefixMatch ? content.slice(prefixMatch[0].length) : content;
-
-  // Deduplicate: uploaded files already shown shouldn't repeat as attached
-  const uploadedSet = new Set(uploadedFileNames ?? []);
-  const dedupedAttached = attachedFiles?.filter(fp => !uploadedSet.has(fp.split('/').pop() ?? fp));
-  const hasContext = (dedupedAttached && dedupedAttached.length > 0)
-    || (uploadedFileNames && uploadedFileNames.length > 0);
-
-  return (
-    <>
-      {/* Images */}
-      {images && images.length > 0 && (
-        <div className={`flex flex-wrap gap-1.5${content ? ' mb-2' : ''}`}>
-          {images.map((img, idx) => (
-            img.data ? (
-              <img
-                key={idx}
-                src={`data:${img.mimeType};base64,${img.data}`}
-                alt={`Image ${idx + 1}`}
-                className="max-h-48 max-w-full rounded-md object-contain"
-              />
-            ) : (
-              <div key={idx} className="h-12 px-3 rounded-md bg-muted flex items-center gap-1.5 text-xs text-muted-foreground">
-                <span>[Image {idx + 1}]</span>
-              </div>
-            )
-          ))}
-        </div>
-      )}
-      {/* Skill capsule + text */}
-      {resolved && (
-        <span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded-full text-[11px] font-medium bg-white/20 text-white/90 mr-1 align-middle">
-          <Zap size={10} className="shrink-0" />
-          {resolved}
-        </span>
-      )}
-      {resolved ? rest : content}
-      {/* File context chips */}
-      {hasContext && (
-        <div className="mt-2 pt-1.5 border-t border-white/15 flex flex-wrap gap-1 whitespace-normal" role="list" aria-label="Attached files">
-          {dedupedAttached?.map(fp => (
-            <span
-              key={fp}
-              role="listitem"
-              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] bg-white/10 text-white/80 min-w-0"
-              title={fp}
-            >
-              <FileText size={9} className="shrink-0 opacity-70" />
-              <span className="truncate max-w-[120px]">{fp.split('/').pop()}</span>
-            </span>
-          ))}
-          {uploadedFileNames?.map(name => (
-            <span
-              key={name}
-              role="listitem"
-              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] bg-white/10 text-white/80 min-w-0"
-              title={name}
-            >
-              <Paperclip size={9} className="shrink-0 opacity-70" />
-              <span className="truncate max-w-[120px]">{name}</span>
-            </span>
-          ))}
-        </div>
-      )}
-    </>
-  );
-}
-
-function AssistantAgentBadge({ agentName }: { agentName?: string }) {
-  if (!agentName) return null;
-  return (
-    <div className="mb-2 inline-flex items-center gap-1 rounded-full border border-[var(--amber)]/15 bg-[var(--amber)]/8 px-2 py-0.5 text-[10px] font-medium tracking-wide text-[var(--amber)]">
-      <Sparkles size={10} className="shrink-0" />
-      <span>{agentName}</span>
-    </div>
-  );
-}
-
-function AssistantMessage({ content, isStreaming }: { content: string; isStreaming: boolean }) {
-  const cleaned = stripThinkingTags(content);
-  if (!cleaned && !isStreaming) return null;
-  return (
-    <div className="prose prose-sm prose-panel dark:prose-invert max-w-none text-foreground
-      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-muted/80 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded-md prose-code:before:content-none prose-code:after:content-none prose-code:font-mono
-      prose-pre:bg-muted/60 prose-pre:text-foreground prose-pre:text-xs prose-pre:rounded-lg
-      prose-blockquote:border-l-[var(--amber)] prose-blockquote:text-muted-foreground prose-blockquote:not-italic
-      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.5 prose-td:py-1
-    ">
-      <ReactMarkdown remarkPlugins={[remarkGfm]}>{cleaned}</ReactMarkdown>
-      {isStreaming && (
-        <span className="inline-block w-1.5 h-3.5 bg-[var(--amber)] ml-0.5 align-middle animate-pulse rounded-full" />
-      )}
-    </div>
-  );
-}
-
-function AssistantMessageWithParts({ message, isStreaming }: { message: Message; isStreaming: boolean }) {
-  const parts = message.parts;
-  if (!parts || parts.length === 0) {
-    // Fallback to plain text rendering
-    return message.content ? (
-      <AssistantMessage content={message.content} isStreaming={isStreaming} />
-    ) : null;
-  }
-
-  // Check if the last part is a running tool call — show a spinner after it
-  const lastPart = parts[parts.length - 1];
-  const showTrailingSpinner = isStreaming && lastPart.type === 'tool-call' && (lastPart.state === 'running' || lastPart.state === 'pending');
-
-  return (
-    <div>
-      {parts.map((part, idx) => {
-        if (part.type === 'reasoning') {
-          const isLastPart = isStreaming && idx === parts.length - 1;
-          return <ThinkingBlock key={`reasoning-${idx}`} text={part.text} isStreaming={isLastPart} />;
-        }
-        if (part.type === 'text') {
-          const isLastTextPart = isStreaming && idx === parts.length - 1;
-          return part.text ? (
-            <AssistantMessage key={idx} content={part.text} isStreaming={isLastTextPart} />
-          ) : null;
-        }
-        if (part.type === 'tool-call') {
-          return <ToolCallBlock key={part.toolCallId} part={part} />;
-        }
-        return null;
-      })}
-      {showTrailingSpinner && (
-        <div className="flex items-center gap-2 py-1.5 mt-1.5">
-          <Loader2 size={12} className="animate-spin text-[var(--amber)]" />
-          <span className="text-xs text-muted-foreground animate-pulse">Executing tool…</span>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StepCounter({ parts }: { parts: Message['parts'] }) {
-  if (!parts) return null;
-  const toolCalls = parts.filter(p => p.type === 'tool-call');
-  if (toolCalls.length === 0) return null;
-  const lastToolCall = toolCalls[toolCalls.length - 1];
-  const toolLabel = lastToolCall.type === 'tool-call' ? lastToolCall.toolName : '';
-  return (
-    <div className="flex items-center gap-1.5 mt-2 pt-1.5 border-t border-border/15 text-xs text-muted-foreground/60">
-      <Wrench size={10} />
-      <span className="font-medium">Step {toolCalls.length}{toolLabel ? ` — ${toolLabel}` : ''}</span>
-    </div>
-  );
-}
-
-interface MessageListProps {
-  messages: Message[];
-  isLoading: boolean;
-  loadingPhase: 'connecting' | 'thinking' | 'streaming' | 'reconnecting';
-  emptyPrompt: string;
-  emptyHint?: string;
-  suggestions: readonly { label: string; prompt: string }[];
-  onSuggestionClick: (text: string) => void;
-  labels: {
-    connecting: string;
-    thinking: string;
-    generating: string;
-    reconnecting?: string;
-    copyMessage?: string;
-  };
-}
-
-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);
-
-  const scrollToBottom = useCallback(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-    container.scrollTo({ top: container.scrollHeight, behavior: 'smooth' });
-  }, []);
-
-  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 ref={scrollContainerRef} role="log" aria-live="polite" className="relative flex-1 overflow-y-auto overflow-x-hidden px-4 py-5 space-y-5 min-h-0">
-      {messages.length === 0 && (
-        <div className="flex flex-col items-center justify-center flex-1 min-h-[260px] px-6 pt-10 pb-4">
-          {/* Brand anchor — refined presence */}
-          <div className="relative w-12 h-12 rounded-2xl bg-[var(--amber)]/10 flex items-center justify-center mb-6">
-            <div className="absolute inset-0 rounded-2xl bg-[var(--amber)]/5 scale-[1.4]" />
-            <Sparkles size={22} className="text-[var(--amber)] relative z-10" />
-          </div>
-          <p className="text-center text-[15px] font-semibold text-foreground tracking-tight mb-2">{emptyPrompt}</p>
-          {emptyHint && (
-            <p className="text-center text-xs text-muted-foreground/80 mb-10 tracking-wide">{emptyHint}</p>
-          )}
-          {/* Suggestion chips — refined single column */}
-          <div className="flex flex-col gap-2.5 max-w-[280px] w-full">
-            {suggestions.map((s, i) => {
-              const icons = [FolderInput, Search, PenLine, Lightbulb];
-              const SugIcon = icons[i % icons.length];
-              return (
-                <button
-                  key={i}
-                  type="button"
-                  onClick={() => onSuggestionClick(s.prompt)}
-                  className="group/sug flex items-center gap-3 text-left text-[13px] px-3.5 py-3 rounded-xl border border-border/40 bg-transparent text-muted-foreground hover:text-foreground hover:border-[var(--amber)]/30 hover:bg-[var(--amber)]/5 transition-all leading-snug"
-                  aria-label={s.prompt}
-                >
-                  <span className="shrink-0 w-8 h-8 rounded-lg bg-muted/60 flex items-center justify-center group-hover/sug:bg-[var(--amber)]/10 transition-colors">
-                    <SugIcon size={15} className="text-muted-foreground/70 group-hover/sug:text-[var(--amber)] transition-colors" />
-                  </span>
-                  <span className="flex-1">{s.label}</span>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-      )}
-      {messages.map((m, i) => (
-        <div key={i} className={`flex gap-3 animate-[fadeSlideUp_0.22s_ease_both] ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
-          {m.role === 'assistant' && (
-            <div
-              className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 mt-0.5 bg-[var(--amber)]/8"
-            >
-              <Sparkles size={13} className="text-[var(--amber)]" />
-            </div>
-          )}
-          {m.role === 'user' ? (
-            <div
-              className="max-w-[85%] px-3.5 py-2.5 rounded-2xl rounded-br-lg text-sm leading-relaxed whitespace-pre-wrap bg-[var(--amber)] text-[var(--amber-foreground)] shadow-sm shadow-[var(--amber)]/10"
-            >
-              <UserMessageContent content={m.content} skillName={m.skillName} images={m.images} attachedFiles={m.attachedFiles} uploadedFileNames={m.uploadedFileNames} />
-            </div>
-          ) : m.content.startsWith('__error__') ? (
-            <div className="max-w-[85%] px-3.5 py-3 rounded-2xl rounded-bl-md border border-error/30 bg-error/10 text-sm shadow-sm">
-              <AssistantAgentBadge agentName={m.agentName} />
-              <div className="flex items-start gap-2.5 text-error">
-                <AlertCircle size={15} className="shrink-0 mt-0.5" />
-                <span className="leading-relaxed font-medium">{m.content.slice(9)}</span>
-              </div>
-            </div>
-          ) : (
-            <div className="group relative max-w-[85%] px-3.5 py-2.5 rounded-2xl rounded-bl-lg bg-card border border-border/30 shadow-sm text-foreground text-sm">
-              <AssistantAgentBadge agentName={m.agentName} />
-              {(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) && (
-                    <div className="absolute -bottom-1 right-1 z-10 flex items-center gap-1 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
-                      <SaveMessageButton text={m.content} />
-                      <CopyMessageButton text={stripThinkingTags(m.content)} label={labels.copyMessage} />
-                    </div>
-                  )}
-                </>
-              ) : isLoading && i === messages.length - 1 ? (
-                <div className="flex items-center gap-2.5 py-1">
-                  {loadingPhase === 'reconnecting' ? (
-                    <WifiOff size={14} className="text-[var(--amber)] animate-pulse" />
-                  ) : (
-                    <Loader2 size={14} className="animate-spin text-[var(--amber)]" />
-                  )}
-                  <span className="text-xs text-muted-foreground">
-                    <span className="inline-flex items-center gap-1">
-                    {loadingPhase === 'reconnecting'
-                      ? (labels.reconnecting ?? 'Reconnecting...')
-                      : loadingPhase === 'connecting'
-                        ? labels.connecting
-                        : loadingPhase === 'thinking'
-                          ? labels.thinking
-                          : labels.generating}
-                    <span className="inline-flex gap-0.5">
-                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:0ms]"></span>
-                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:150ms]"></span>
-                      <span className="w-1 h-1 rounded-full bg-[var(--amber)] animate-bounce [animation-delay:300ms]"></span>
-                    </span>
-                    </span>
-                  </span>
-                </div>
-              ) : null}
-            </div>
-          )}
-        </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-2 rounded-full border border-border/60 bg-card shadow-md text-muted-foreground hover:text-foreground hover:bg-muted transition-all hover:shadow-lg"
-          title="Scroll to bottom"
-        >
-          <ArrowDown size={14} />
-        </button>
-      )}
-    </div>
-  );
-});

package/_standalone/components/ask/ModeCapsule.tsx

@@ -1,180 +0,0 @@
-'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)}
-    </>
-  );
-}