@docyrus/ui-pro-ai-assistant 0.0.2 → 0.0.3

package/src/components/input-area.tsx

@@ -1,1209 +0,0 @@
-import {
-  useCallback, useState, type ChangeEvent, type FC, type FormEvent
-} from 'react';
-
-import {
-  PromptInput,
-  PromptInputButton,
-  PromptInputFooter,
-  PromptInputSubmit,
-  PromptInputTextarea,
-  PromptInputTools,
-  usePromptInputAttachments
-} from '@docyrus/ui-pro-shared/ai';
-import { Badge } from '@docyrus/ui-pro-shared/components/badge';
-import { Button } from '@docyrus/ui-pro-shared/components/button';
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@docyrus/ui-pro-shared/components/dialog';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger
-} from '@docyrus/ui-pro-shared/components/dropdown-menu';
-import { ScrollArea } from '@docyrus/ui-pro-shared/components/scroll-area';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger
-} from '@docyrus/ui-pro-shared/components/tooltip';
-import { cn } from '@docyrus/ui-pro-shared/lib/utils';
-import {
-  AlertCircle, AudioLines, Brain, BrainCircuit, ChevronDown, File, FileSearch, Globe, Inbox, Mic, Microscope, Plug, Plus, Ruler, SlidersHorizontal, Star, X
-} from 'lucide-react';
-import { toast } from 'sonner';
-
-import { useDeploymentData } from '../hooks/use-deployment-data';
-import { useAssistantTranslation } from '../i18n';
-import { useApiClient } from '../lib/api-client';
-import { useAssistantConfig } from '../lib/assistant-config';
-
-interface SubmitOptions {
-  modelId?: string;
-  supportMultipleModels?: boolean;
-  supportFiles?: boolean;
-  supportWebSearch?: boolean;
-  supportDeepResearch?: boolean;
-  supportDocumentSearch?: boolean;
-  supportThinking?: boolean;
-  supportWorkCanvas?: boolean;
-  files?: { url: string; mediaType: string; filename: string }[];
-  mcpServerIds?: string[];
-}
-
-interface McpServer {
-  id: string;
-  name: string;
-  logo?: { url?: string; signedUrl?: string };
-}
-
-function McpServersDropdown({
-  servers,
-  activeMcpServers,
-  onToggle,
-  disabled,
-  tooltip
-}: {
-  servers: McpServer[];
-  activeMcpServers: Record<string, boolean>;
-  onToggle: (id: string, active: boolean) => void;
-  disabled?: boolean;
-  tooltip: string;
-}) {
-  const activeCount = Object.values(activeMcpServers).filter(Boolean).length;
-
-  return (
-    <DropdownMenu>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
-            <PromptInputButton
-              aria-label={tooltip}
-              className="relative"
-              disabled={disabled}>
-              <Plug className="w-4 h-4" />
-              {activeCount > 0 && (
-                <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-                  {activeCount}
-                </span>
-              )}
-            </PromptInputButton>
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="top">{tooltip}</TooltipContent>
-      </Tooltip>
-      <DropdownMenuContent align="start" className="min-w-[220px] p-2 z-[10000]">
-        <div className="flex flex-col gap-2">
-          {servers.map((server) => {
-            const isActive = !!activeMcpServers[server.id];
-            const logoUrl = server.logo?.signedUrl ?? server.logo?.url;
-
-            return (
-              <div className="flex items-center justify-between gap-2" key={server.id}>
-                <div className="flex min-w-0 items-center gap-2">
-                  {logoUrl ? (
-                    <img alt="" className="size-4 flex-shrink-0 rounded-full" src={logoUrl} />
-                  ) : (
-                    <Plug className="size-4 flex-shrink-0 text-muted-foreground" />
-                  )}
-                  <span className="truncate text-sm font-medium">{server.name}</span>
-                </div>
-                <button
-                  aria-checked={isActive}
-                  className={cn(
-                    'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2',
-                    isActive ? 'bg-primary focus:ring-primary' : 'bg-muted focus:ring-muted-foreground',
-                    disabled && 'cursor-not-allowed opacity-50'
-                  )}
-                  disabled={disabled}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    onToggle(server.id, !isActive);
-                  }}
-                  role="switch"
-                  type="button">
-                  <span className="sr-only">{isActive ? 'Disable' : 'Enable'} {server.name}</span>
-                  <span className={cn(
-                    'inline-block size-3 transform rounded-full bg-white shadow transition-transform',
-                    isActive ? 'translate-x-5' : 'translate-x-1'
-                  )} />
-                </button>
-              </div>
-            );
-          })}
-        </div>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
-/** File upload button - must be rendered inside PromptInput children */
-function FileUploadButton({ tooltip }: { tooltip: string }) {
-  const attachments = usePromptInputAttachments();
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <PromptInputButton variant="ghost" onClick={() => attachments.openFileDialog()}>
-          <Plus className="w-4 h-4" />
-        </PromptInputButton>
-      </TooltipTrigger>
-      <TooltipContent side="top">{tooltip}</TooltipContent>
-    </Tooltip>
-  );
-}
-
-/** Attachment preview strip - must be rendered inside PromptInput children */
-function AttachmentPreview() {
-  const attachments = usePromptInputAttachments();
-
-  if (attachments.files.length === 0) return null;
-
-  return (
-    <div className="flex items-center gap-2 px-3 pt-2 pb-1 overflow-x-auto">
-      {attachments.files.map((file) => {
-        const isImage = file.mediaType?.startsWith('image/');
-
-        return (
-          <div
-            key={file.id}
-            className="relative group flex-shrink-0 flex items-center gap-1.5 rounded-lg border bg-background px-2 py-1.5 text-xs">
-            {isImage && file.url ? (
-              <img
-                src={file.url}
-                alt={file.filename || 'attachment'}
-                className="h-8 w-8 rounded object-cover" />
-            ) : (
-              <File className="h-4 w-4 text-muted-foreground" />
-            )}
-            <span className="max-w-24 truncate text-muted-foreground">
-              {file.filename || 'file'}
-            </span>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              onClick={() => attachments.remove(file.id)}
-              className="ml-0.5 h-5 w-5 rounded-full text-muted-foreground hover:bg-destructive/10 hover:text-destructive">
-              <X className="h-3 w-3" />
-            </Button>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-/*
- * ---------------------------------------------------------------------------
- * Memory Extraction
- * ---------------------------------------------------------------------------
- */
-
-const MEMORY_LEVELS = [
-  { id: 'user', name: 'User' },
-  { id: 'user_agent', name: 'User Agent' },
-  { id: 'project', name: 'Project' },
-  { id: 'team', name: 'Team' },
-  { id: 'team_agent', name: 'Team Agent' },
-  { id: 'tenant', name: 'Tenant' },
-  { id: 'tenant_agent', name: 'Tenant Agent' }
-];
-
-interface MemoryCandidate {
-  id?: string;
-  title: string;
-  content?: string;
-  suggestedLevel?: string;
-  suggestedImportance?: number;
-  tags?: string[];
-  reason?: string;
-  sourceMessageId?: string;
-  _animating?: 'save' | 'skip' | null;
-}
-
-interface MemoryExtractionDialogProps {
-  open: boolean;
-  onClose: () => void;
-  candidates: MemoryCandidate[];
-  loading: boolean;
-  error: string | null;
-  saving: boolean;
-  onSave: (index: number) => void;
-  onSkip: (index: number) => void;
-  onSaveAll: () => void;
-  onSkipAll: () => void;
-  onLevelChange: (index: number, level: string) => void;
-}
-
-function MemoryExtractionDialog({
-  open,
-  onClose,
-  candidates,
-  loading,
-  error,
-  saving,
-  onSave,
-  onSkip,
-  onSaveAll,
-  onSkipAll,
-  onLevelChange
-}: MemoryExtractionDialogProps) {
-  const { t } = useAssistantTranslation();
-
-  return (
-    <Dialog open={open} onOpenChange={o => !o && onClose()}>
-      <DialogContent className="flex max-h-[80vh] max-w-xl flex-col">
-        <DialogHeader>
-          <DialogTitle className="flex items-center gap-2">
-            <Brain className="h-4 w-4" />
-            {t('memory_extraction.title')}
-          </DialogTitle>
-        </DialogHeader>
-
-        <div className="min-h-0 flex-1 overflow-hidden">
-          {loading && (
-            <div className="flex flex-col items-center justify-center py-12">
-              <div className="mb-4 h-10 w-10 animate-spin rounded-full border-b-2 border-purple-600" />
-              <p className="text-sm text-muted-foreground">{t('memory_extraction.loading')}</p>
-            </div>
-          )}
-
-          {!loading && error && (
-            <div className="flex items-start gap-2 rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-destructive">
-              <AlertCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
-              <p className="text-sm">{error}</p>
-            </div>
-          )}
-
-          {!loading && !error && candidates.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-12">
-              <Inbox className="mb-4 h-12 w-12 text-muted-foreground/40" />
-              <p className="text-sm text-muted-foreground">{t('memory_extraction.no_suggestions')}</p>
-            </div>
-          )}
-
-          {!loading && !error && candidates.length > 0 && (
-            <div className="space-y-3">
-              <div className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-xs text-blue-700">
-                {t('memory_extraction.info')}
-              </div>
-              <p className="text-xs text-muted-foreground">
-                {t('memory_extraction.count').replace('{{count}}', String(candidates.length))}
-              </p>
-              <ScrollArea className="h-[340px] pr-2">
-                <div className="space-y-2">
-                  {candidates.map((memory, index) => (
-                    <div
-                      key={memory.id ?? index}
-                      className={cn(
-                        'rounded-md border bg-background p-2.5 transition-all duration-300',
-                        memory._animating === 'save' && 'translate-x-full opacity-0',
-                        memory._animating === 'skip' && '-translate-x-full opacity-0'
-                      )}>
-                      <div className="min-w-0 flex-1">
-                        <div className="flex items-center gap-1.5">
-                          <p className="truncate text-sm font-medium">{memory.title}</p>
-                          {memory.suggestedImportance && (
-                            <span className="flex flex-shrink-0 items-center gap-0.5 text-xs text-muted-foreground">
-                              <Star className="h-2.5 w-2.5" />
-                              {memory.suggestedImportance}/10
-                            </span>
-                          )}
-                        </div>
-                        {memory.content && (
-                          <p className="mt-0.5 line-clamp-3 text-left text-xs text-muted-foreground">
-                            {memory.content}
-                          </p>
-                        )}
-                        {memory.tags && memory.tags.length > 0 && (
-                          <div className="mt-1 flex flex-wrap gap-1">
-                            {memory.tags.map(tag => (
-                              <Badge key={tag} variant="secondary" className="px-1.5 py-0 text-xs">
-                                {tag}
-                              </Badge>
-                            ))}
-                          </div>
-                        )}
-                        <div className="mt-1.5 flex items-center justify-between gap-1.5">
-                          <div className="flex items-center gap-1">
-                            <span className="text-xs text-muted-foreground">{t('memory_extraction.level')}:</span>
-                            <select
-                              value={memory.suggestedLevel ?? 'user'}
-                              onChange={e => onLevelChange(index, e.target.value)}
-                              onClick={e => e.stopPropagation()}
-                              className="rounded border bg-background px-1.5 py-0.5 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary">
-                              {MEMORY_LEVELS.map(level => (
-                                <option key={level.id} value={level.id}>{level.name}</option>
-                              ))}
-                            </select>
-                          </div>
-                          <div className="flex flex-shrink-0 gap-1.5">
-                            <Button
-                              size="sm"
-                              variant="outline"
-                              className="h-6 px-2 text-xs"
-                              disabled={!!memory._animating}
-                              onClick={() => onSkip(index)}>
-                              {t('memory_extraction.skip')}
-                            </Button>
-                            <Button
-                              size="sm"
-                              className="h-6 bg-emerald-600 px-2 text-xs text-white hover:bg-emerald-700"
-                              disabled={!!memory._animating}
-                              onClick={() => onSave(index)}>
-                              {t('memory_extraction.save')}
-                            </Button>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            </div>
-          )}
-        </div>
-
-        <DialogFooter className="gap-2">
-          <Button variant="outline" size="sm" disabled={saving || loading} onClick={onSkipAll}>
-            {t('memory_extraction.skip_all')}
-          </Button>
-          <Button
-            size="sm"
-            className="bg-emerald-600 text-white hover:bg-emerald-700"
-            disabled={saving || loading || candidates.length === 0}
-            onClick={onSaveAll}>
-            {saving ? '...' : t('memory_extraction.save_all')}
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-interface AIInputAreaProps {
-  onSubmit?: (e?: FormEvent, options?: SubmitOptions) => void;
-  onStop?: () => void;
-  value?: string;
-  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  isLoading?: boolean;
-  supportFiles?: boolean;
-  supportWebSearch?: boolean;
-  supportDocumentSearch?: boolean;
-  supportDeepResearch?: boolean;
-  supportThinking?: boolean;
-  supportWorkCanvas?: boolean;
-  supportMultiModels?: boolean;
-  deploymentId?: string;
-  tenantAiAgentId?: string;
-  enableMicrophone?: boolean;
-  enableVoice?: boolean;
-  isRecording?: boolean;
-  recognition?: any;
-  onMicrophoneClick?: () => void;
-  footerText?: string;
-  className?: string;
-  showToolbar?: boolean;
-  compactToolbar?: boolean;
-  threadId?: string;
-  hasMessages?: boolean;
-  tenantAiProjectId?: string;
-}
-
-export const AIInputArea: FC<AIInputAreaProps> = ({
-  onSubmit,
-  onStop,
-  value = '',
-  onChange,
-  placeholder = 'Type a message...',
-  disabled = false,
-  isLoading = false,
-  supportFiles = false,
-  supportWebSearch = false,
-  supportDocumentSearch = false,
-  supportDeepResearch = false,
-  supportThinking = false,
-  supportMultiModels = false,
-  supportWorkCanvas = false,
-  deploymentId,
-  tenantAiAgentId,
-  enableMicrophone = false,
-  enableVoice = false,
-  isRecording = false,
-  recognition = null,
-  onMicrophoneClick,
-  footerText,
-  className,
-  showToolbar = true,
-  compactToolbar = false,
-  threadId,
-  hasMessages = false,
-  tenantAiProjectId
-}) => {
-  const { t } = useAssistantTranslation();
-
-  // Determine if we're using a base agent (tenantAiAgentId without deploymentId)
-  const isBaseAgent = !deploymentId && !!tenantAiAgentId;
-  const idToUse = deploymentId || tenantAiAgentId;
-
-  const {
-    models,
-    selectedModel,
-    setSelectedModel,
-    showMultiModels,
-    agents,
-    selectedAgent,
-    setSelectedAgent,
-    showAgents,
-    agentAvatar,
-    mcpServers,
-    activeMcpServers,
-    toggleMcpServer,
-    capabilities
-  } = useDeploymentData(idToUse, supportMultiModels, isBaseAgent);
-
-  // When agent capabilities are loaded from the API, use them; otherwise fall back to props
-  const effectiveSupportWebSearch = capabilities ? capabilities.supportWebSearch : supportWebSearch;
-  const effectiveSupportDocumentSearch = capabilities ? capabilities.supportDocumentSearch : supportDocumentSearch;
-  const effectiveSupportThinking = capabilities ? capabilities.supportThinking : supportThinking;
-  const effectiveSupportDeepResearch = capabilities ? capabilities.supportDeepResearch : supportDeepResearch;
-  const effectiveSupportWorkCanvas = capabilities ? capabilities.supportWorkCanvas : supportWorkCanvas;
-
-  // Toggle states for toolbar features
-  const [webSearchActive, setWebSearchActive] = useState(false);
-  const [documentSearchActive, setDocumentSearchActive] = useState(false);
-  const [thinkingActive, setThinkingActive] = useState(false);
-  const [deepResearchActive, setDeepResearchActive] = useState(false);
-  const [workCanvasActive, setWorkCanvasActive] = useState(false);
-
-  const toggleActiveClass = 'bg-primary/10 text-primary hover:bg-primary/20 ring-1 ring-primary/30';
-
-  // Memory extraction state
-  const [memoryExtractionOpen, setMemoryExtractionOpen] = useState(false);
-  const [memoryExtractionLoading, setMemoryExtractionLoading] = useState(false);
-  const [memoryExtractionError, setMemoryExtractionError] = useState<string | null>(null);
-  const [memoryExtractionCandidates, setMemoryExtractionCandidates] = useState<MemoryCandidate[]>([]);
-  const [memorySaving, setMemorySaving] = useState(false);
-  const apiClient = useApiClient();
-  const assistantConfig = useAssistantConfig();
-  const tenantUserId = assistantConfig.user?.id;
-
-  const handleExtractMemories = useCallback(async () => {
-    if (!threadId) return;
-    setMemoryExtractionOpen(true);
-    setMemoryExtractionLoading(true);
-    setMemoryExtractionError(null);
-    setMemoryExtractionCandidates([]);
-    try {
-      const result = await apiClient.get('/ai/memory-candidates', { threadId });
-
-      if ((result as any)?.success === false) {
-        throw new Error((result as any)?.error_description || (result as any)?.error || t('memory_extraction.error_extract'));
-      }
-      const raw = (result as any)?.data?.candidates ?? (result as any)?.candidates ?? result ?? [];
-
-      setMemoryExtractionCandidates(Array.isArray(raw) ? raw : []);
-    } catch (err: unknown) {
-      setMemoryExtractionError(err instanceof Error ? err.message : t('memory_extraction.error_extract'));
-    } finally {
-      setMemoryExtractionLoading(false);
-    }
-  }, [threadId, apiClient, t]);
-
-  const saveMemoryCandidate = useCallback(async (index: number) => {
-    const memory = memoryExtractionCandidates[index];
-
-    if (!memory || memory._animating) return;
-    setMemoryExtractionCandidates((prev) => {
-      const next = [...prev];
-
-      next[index] = { ...next[index], _animating: 'save' };
-
-      return next;
-    });
-    try {
-      const result = await apiClient.post('/ai/memories', {
-        title: memory.title,
-        content: memory.content,
-        memoryLevel: memory.suggestedLevel ?? 'user_agent',
-        importance: memory.suggestedImportance ?? 3,
-        sourceType: 'llm_extraction',
-        sourceThreadId: threadId,
-        sourceMessageId: memory.sourceMessageId ?? null,
-        tenantUserId: tenantUserId ?? null,
-        tenantAiAgentId: tenantAiAgentId ?? null,
-        tenantAiProjectId: tenantAiProjectId ?? null,
-        tags: memory.tags ?? []
-      });
-
-      if ((result as any)?.success === false) {
-        throw new Error((result as any)?.error_description || (result as any)?.error || t('memory_extraction.error_save'));
-      }
-      toast.success(t('memory_extraction.success_saved'));
-      setTimeout(() => {
-        setMemoryExtractionCandidates((prev) => {
-          const next = prev.filter((_, i) => i !== index);
-
-          if (next.length === 0) {
-            setMemoryExtractionOpen(false);
-          }
-
-          return next;
-        });
-      }, 300);
-    } catch {
-      setMemoryExtractionCandidates((prev) => {
-        const next = [...prev];
-
-        next[index] = { ...next[index], _animating: null };
-
-        return next;
-      });
-      toast.error(t('memory_extraction.error_save'));
-    }
-  }, [
-    memoryExtractionCandidates,
-    threadId,
-    apiClient,
-    tenantUserId,
-    tenantAiAgentId,
-    tenantAiProjectId,
-    t
-  ]);
-
-  const skipMemoryCandidate = useCallback((index: number) => {
-    const memory = memoryExtractionCandidates[index];
-
-    if (!memory || memory._animating) return;
-    setMemoryExtractionCandidates((prev) => {
-      const next = [...prev];
-
-      next[index] = { ...next[index], _animating: 'skip' };
-
-      return next;
-    });
-    setTimeout(() => {
-      setMemoryExtractionCandidates((prev) => {
-        const next = prev.filter((_, i) => i !== index);
-
-        if (next.length === 0) {
-          toast.info(t('memory_extraction.success_all_skipped'));
-          setMemoryExtractionOpen(false);
-        }
-
-        return next;
-      });
-    }, 300);
-  }, [memoryExtractionCandidates, t]);
-
-  const saveAllMemoryCandidates = useCallback(async () => {
-    if (memoryExtractionCandidates.length === 0) return;
-    setMemorySaving(true);
-    try {
-      const results = await Promise.all(
-        memoryExtractionCandidates.map(memory => apiClient.post('/ai/memories', {
-          title: memory.title,
-          content: memory.content,
-          memoryLevel: memory.suggestedLevel ?? 'user_agent',
-          importance: memory.suggestedImportance ?? 3,
-          sourceType: 'llm_extraction',
-          sourceThreadId: threadId,
-          tenantUserId: tenantUserId ?? null,
-          tenantAiAgentId: tenantAiAgentId ?? null,
-          tenantAiProjectId: tenantAiProjectId ?? null,
-          tags: memory.tags ?? []
-        }))
-      );
-      const failed = results.find((r: any) => r?.success === false);
-
-      if (failed) {
-        throw new Error((failed as any)?.error_description || (failed as any)?.error || t('memory_extraction.error_save'));
-      }
-      toast.success(t('memory_extraction.success_all_saved'));
-      setMemoryExtractionCandidates([]);
-      setMemoryExtractionOpen(false);
-    } catch {
-      toast.error(t('memory_extraction.error_save'));
-    } finally {
-      setMemorySaving(false);
-    }
-  }, [
-    memoryExtractionCandidates,
-    threadId,
-    apiClient,
-    tenantUserId,
-    tenantAiAgentId,
-    tenantAiProjectId,
-    t
-  ]);
-
-  const skipAllMemoryCandidates = useCallback(() => {
-    setMemoryExtractionCandidates([]);
-    setMemoryExtractionOpen(false);
-    toast.info(t('memory_extraction.success_all_skipped'));
-  }, [t]);
-
-  const handleMemoryLevelChange = useCallback((index: number, level: string) => {
-    setMemoryExtractionCandidates((prev) => {
-      const next = [...prev];
-
-      next[index] = { ...next[index], suggestedLevel: level };
-
-      return next;
-    });
-  }, []);
-
-  const handlePromptSubmit = useCallback((message: { text: string; files: any[] }) => {
-    if (onSubmit) {
-      const activeMcpServerIds = Object.entries(activeMcpServers)
-        .filter(([, active]) => active)
-        .map(([id]) => id);
-
-      const options: SubmitOptions = {
-        modelId: selectedModel?.id,
-        supportMultipleModels: showMultiModels,
-        supportFiles,
-        supportWebSearch: effectiveSupportWebSearch && webSearchActive,
-        supportDeepResearch: effectiveSupportDeepResearch && deepResearchActive,
-        supportDocumentSearch: effectiveSupportDocumentSearch && documentSearchActive,
-        supportThinking: effectiveSupportThinking && thinkingActive,
-        supportWorkCanvas: effectiveSupportWorkCanvas && workCanvasActive,
-        files: message.files?.length > 0 ? message.files : undefined,
-        mcpServerIds: activeMcpServerIds.length > 0 ? activeMcpServerIds : undefined
-      };
-
-      onSubmit(undefined, options);
-    }
-  }, [
-    onSubmit,
-    selectedModel?.id,
-    showMultiModels,
-    supportFiles,
-    effectiveSupportWebSearch,
-    webSearchActive,
-    effectiveSupportDeepResearch,
-    deepResearchActive,
-    effectiveSupportDocumentSearch,
-    documentSearchActive,
-    effectiveSupportThinking,
-    thinkingActive,
-    effectiveSupportWorkCanvas,
-    workCanvasActive,
-    activeMcpServers
-  ]);
-
-  const status = isLoading ? 'streaming' : 'ready';
-  const isDisabled = isLoading ? false : (disabled || !value.trim());
-
-  return (
-    <div className={className}>
-      <PromptInput
-        onSubmit={handlePromptSubmit}
-        accept={supportFiles ? 'image/*,.pdf,.docx,.csv,.xlsx,.md,.txt,.json' : undefined}
-        multiple
-        className="shadow-md bg-background rounded-2xl focus:border-none">
-        {supportFiles && <AttachmentPreview />}
-        <PromptInputTextarea
-          placeholder={placeholder}
-          className="text-sm min-h-12"
-          value={value}
-          onChange={onChange} />
-
-        {compactToolbar && (() => {
-          const hasSupport = effectiveSupportWebSearch || effectiveSupportDocumentSearch || effectiveSupportThinking || effectiveSupportDeepResearch || effectiveSupportWorkCanvas;
-          const activeCount = [
-            effectiveSupportWebSearch && webSearchActive,
-            effectiveSupportDocumentSearch && documentSearchActive,
-            effectiveSupportThinking && thinkingActive,
-            effectiveSupportDeepResearch && deepResearchActive,
-            effectiveSupportWorkCanvas && workCanvasActive
-          ].filter(Boolean).length;
-
-          return (
-            <PromptInputFooter className="gap-2">
-              <PromptInputTools>
-                {supportFiles && <FileUploadButton tooltip={t('tools.file_upload')} />}
-
-                {hasSupport && (
-                  <DropdownMenu>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                          <PromptInputButton
-                            variant="ghost"
-                            aria-label={t('tools.options')}
-                            className={cn('relative', activeCount > 0 && toggleActiveClass)}>
-                            <SlidersHorizontal className="w-4 h-4" />
-                            {activeCount > 0 && (
-                              <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground">
-                                {activeCount}
-                              </span>
-                            )}
-                          </PromptInputButton>
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <TooltipContent side="top">{t('tools.options')}</TooltipContent>
-                    </Tooltip>
-                    <DropdownMenuContent align="start" className="min-w-[220px] p-2 z-[10000]">
-                      <div className="flex flex-col gap-2">
-                        {effectiveSupportWebSearch && (
-                          <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-center gap-2">
-                              <Globe className="w-4 h-4 text-muted-foreground" />
-                              <span className="text-sm font-medium">{t('tools.web_search')}</span>
-                            </div>
-                            <button
-                              role="switch"
-                              type="button"
-                              aria-checked={webSearchActive}
-                              onClick={() => setWebSearchActive(p => !p)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none',
-                                webSearchActive ? 'bg-primary' : 'bg-muted'
-                              )}>
-                              <span className={cn('inline-block size-3 transform rounded-full bg-white shadow transition-transform', webSearchActive ? 'translate-x-5' : 'translate-x-1')} />
-                            </button>
-                          </div>
-                        )}
-                        {effectiveSupportDocumentSearch && (
-                          <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-center gap-2">
-                              <FileSearch className="w-4 h-4 text-muted-foreground" />
-                              <span className="text-sm font-medium">{t('tools.document_search')}</span>
-                            </div>
-                            <button
-                              role="switch"
-                              type="button"
-                              aria-checked={documentSearchActive}
-                              onClick={() => setDocumentSearchActive(p => !p)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none',
-                                documentSearchActive ? 'bg-primary' : 'bg-muted'
-                              )}>
-                              <span className={cn('inline-block size-3 transform rounded-full bg-white shadow transition-transform', documentSearchActive ? 'translate-x-5' : 'translate-x-1')} />
-                            </button>
-                          </div>
-                        )}
-                        {effectiveSupportThinking && (
-                          <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-center gap-2">
-                              <Brain className="w-4 h-4 text-muted-foreground" />
-                              <span className="text-sm font-medium">{t('tools.thinking')}</span>
-                            </div>
-                            <button
-                              role="switch"
-                              type="button"
-                              aria-checked={thinkingActive}
-                              onClick={() => setThinkingActive(p => !p)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none',
-                                thinkingActive ? 'bg-primary' : 'bg-muted'
-                              )}>
-                              <span className={cn('inline-block size-3 transform rounded-full bg-white shadow transition-transform', thinkingActive ? 'translate-x-5' : 'translate-x-1')} />
-                            </button>
-                          </div>
-                        )}
-                        {effectiveSupportDeepResearch && (
-                          <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-center gap-2">
-                              <Microscope className="w-4 h-4 text-muted-foreground" />
-                              <span className="text-sm font-medium">{t('tools.deep_research')}</span>
-                            </div>
-                            <button
-                              role="switch"
-                              type="button"
-                              aria-checked={deepResearchActive}
-                              onClick={() => setDeepResearchActive(p => !p)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none',
-                                deepResearchActive ? 'bg-primary' : 'bg-muted'
-                              )}>
-                              <span className={cn('inline-block size-3 transform rounded-full bg-white shadow transition-transform', deepResearchActive ? 'translate-x-5' : 'translate-x-1')} />
-                            </button>
-                          </div>
-                        )}
-                        {effectiveSupportWorkCanvas && (
-                          <div className="flex items-center justify-between gap-2">
-                            <div className="flex items-center gap-2">
-                              <Ruler className="w-4 h-4 text-muted-foreground" />
-                              <span className="text-sm font-medium">{t('tools.work_canvas')}</span>
-                            </div>
-                            <button
-                              role="switch"
-                              type="button"
-                              aria-checked={workCanvasActive}
-                              onClick={() => setWorkCanvasActive(p => !p)}
-                              className={cn(
-                                'relative inline-flex h-5 w-9 flex-shrink-0 cursor-pointer items-center rounded-full transition-colors focus:outline-none',
-                                workCanvasActive ? 'bg-primary' : 'bg-muted'
-                              )}>
-                              <span className={cn('inline-block size-3 transform rounded-full bg-white shadow transition-transform', workCanvasActive ? 'translate-x-5' : 'translate-x-1')} />
-                            </button>
-                          </div>
-                        )}
-                      </div>
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
-
-                {/* MCP Servers */}
-                {mcpServers.length > 0 && (
-                  <McpServersDropdown
-                    servers={mcpServers.map(s => ({
-                      id: s.id,
-                      name: s.name,
-                      logo: s.logo ? { url: s.logo.url, signedUrl: s.logo.signed_url } : undefined
-                    }))}
-                    activeMcpServers={activeMcpServers}
-                    onToggle={toggleMcpServer}
-                    disabled={disabled}
-                    tooltip={t('tools.mcp_servers')} />
-                )}
-
-                {/* Model selector */}
-                {showMultiModels && models.length > 0 && (
-                  <DropdownMenu>
-                    <DropdownMenuTrigger asChild>
-                      <PromptInputButton variant="ghost" size="sm" className="h-7 px-2 gap-1">
-                        {selectedModel?.providerLogoUrl && (
-                          <img
-                            src={selectedModel.providerLogoUrl}
-                            alt={selectedModel.providerName}
-                            className="w-3.5 h-3.5 rounded-sm" />
-                        )}
-                        <span className="text-xs font-medium max-w-16 truncate">{selectedModel?.name}</span>
-                        <ChevronDown className="w-3 h-3" />
-                      </PromptInputButton>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent className="w-56 h-auto max-h-60 z-[10000]">
-                      {models.map(model => (
-                        <DropdownMenuItem
-                          key={model.id}
-                          onClick={() => setSelectedModel(model)}
-                          className="cursor-pointer flex items-center gap-2">
-                          {model.providerLogoUrl && (
-                            <img
-                              src={model.providerLogoUrl}
-                              alt={model.providerName}
-                              className="w-4 h-4 rounded-sm" />
-                          )}
-                          <div className="flex flex-col">
-                            <span className="text-sm font-medium">{model.name}</span>
-                            <span className="text-xs text-muted-foreground">{model.providerName}</span>
-                          </div>
-                        </DropdownMenuItem>
-                      ))}
-                    </DropdownMenuContent>
-                  </DropdownMenu>
-                )}
-              </PromptInputTools>
-              <PromptInputTools>
-                {enableMicrophone && recognition && (
-                  <Tooltip>
-                    <TooltipTrigger asChild>
-                      <PromptInputButton
-                        variant="ghost"
-                        onClick={onMicrophoneClick}
-                        className={cn('transition-all duration-200', isRecording && 'bg-destructive/10 text-destructive hover:bg-destructive/20 ring-1 ring-destructive/30')}>
-                        <Mic className="w-4 h-4" />
-                        {isRecording && <div className="absolute -top-1 -right-1 w-2 h-2 bg-destructive rounded-full animate-pulse" />}
-                      </PromptInputButton>
-                    </TooltipTrigger>
-                    <TooltipContent side="top">{isRecording ? t('tools.stop_recording') : t('tools.microphone')}</TooltipContent>
-                  </Tooltip>
-                )}
-                <PromptInputSubmit disabled={isDisabled} status={status} onStop={onStop} />
-              </PromptInputTools>
-            </PromptInputFooter>
-          );
-        })()}
-
-        {showToolbar && !compactToolbar && (
-          <PromptInputFooter className="gap-2">
-            <PromptInputTools>
-              {/* File Upload */}
-              {supportFiles && (
-                <FileUploadButton tooltip={t('tools.file_upload')} />
-              )}
-
-              {/* Web Search */}
-              {effectiveSupportWebSearch && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={() => setWebSearchActive(prev => !prev)}
-                      className={cn(
-                        'transition-all duration-200',
-                        webSearchActive && toggleActiveClass
-                      )}>
-                      <Globe className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {t('tools.web_search')}{webSearchActive ? ` (${t('common.active')})` : ''}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Document Search */}
-              {effectiveSupportDocumentSearch && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={() => setDocumentSearchActive(prev => !prev)}
-                      className={cn(
-                        'transition-all duration-200',
-                        documentSearchActive && toggleActiveClass
-                      )}>
-                      <FileSearch className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {t('tools.document_search')}{documentSearchActive ? ` (${t('common.active')})` : ''}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Thinking */}
-              {effectiveSupportThinking && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={() => setThinkingActive(prev => !prev)}
-                      className={cn(
-                        'transition-all duration-200',
-                        thinkingActive && toggleActiveClass
-                      )}>
-                      <Brain className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {t('tools.thinking')}{thinkingActive ? ` (${t('common.active')})` : ''}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Deep Research */}
-              {effectiveSupportDeepResearch && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={() => setDeepResearchActive(prev => !prev)}
-                      className={cn(
-                        'transition-all duration-200',
-                        deepResearchActive && toggleActiveClass
-                      )}>
-                      <Microscope className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {t('tools.deep_research')}{deepResearchActive ? ` (${t('common.active')})` : ''}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Work Canvas */}
-              {effectiveSupportWorkCanvas && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={() => setWorkCanvasActive(prev => !prev)}
-                      className={cn(
-                        'transition-all duration-200',
-                        workCanvasActive && toggleActiveClass
-                      )}>
-                      <Ruler className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {t('tools.work_canvas')}{workCanvasActive ? ` (${t('common.active')})` : ''}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* MCP Servers */}
-              {mcpServers.length > 0 && (
-                <McpServersDropdown
-                  servers={mcpServers.map(s => ({
-                    id: s.id,
-                    name: s.name,
-                    logo: s.logo ? { url: s.logo.url, signedUrl: s.logo.signed_url } : undefined
-                  }))}
-                  activeMcpServers={activeMcpServers}
-                  onToggle={toggleMcpServer}
-                  disabled={disabled}
-                  tooltip={t('tools.mcp_servers')} />
-              )}
-
-              {/* Multi Models */}
-              {showMultiModels && models.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <PromptInputButton variant="ghost" size="sm" className="h-7 px-2 gap-1">
-                      {selectedModel?.providerLogoUrl && (
-                        <img
-                          src={selectedModel.providerLogoUrl}
-                          alt={selectedModel.providerName}
-                          className="w-3.5 h-3.5 rounded-sm" />
-                      )}
-                      <span className="text-xs font-medium max-w-16 truncate">{selectedModel?.name}</span>
-                      <ChevronDown className="w-3 h-3" />
-                    </PromptInputButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-56 h-auto max-h-60 z-[10000]">
-                    {models.map(model => (
-                      <DropdownMenuItem
-                        key={model.id}
-                        onClick={() => setSelectedModel(model)}
-                        className="cursor-pointer flex items-center gap-2">
-                        {model.providerLogoUrl && (
-                          <img
-                            src={model.providerLogoUrl}
-                            alt={model.providerName}
-                            className="w-4 h-4 rounded-sm" />
-                        )}
-                        <div className="flex flex-col">
-                          <span className="text-sm font-medium">{model.name}</span>
-                          <span className="text-xs text-muted-foreground">{model.providerName}</span>
-                        </div>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-
-              {/* Agent Select */}
-              {showAgents && agents.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <PromptInputButton variant="ghost" size="sm">
-                      {agentAvatar && (
-                        <img src={agentAvatar} alt="Agent" className="w-4 h-4 rounded-full object-cover" />
-                      )}
-                      <span className="text-xs font-medium max-w-24 truncate">{selectedAgent?.skillName}</span>
-                      <ChevronDown className="w-3 h-3" />
-                    </PromptInputButton>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent className="w-64 z-[10000]">
-                    {agents.map(agent => (
-                      <DropdownMenuItem
-                        key={agent.id}
-                        onClick={() => setSelectedAgent(agent)}
-                        className="cursor-pointer flex items-center gap-2">
-                        {agentAvatar && (
-                          <img
-                            src={agentAvatar}
-                            alt={agent.skillName}
-                            className="w-5 h-5 rounded-full object-cover" />
-                        )}
-                        <span className="text-sm font-medium">{agent.skillName}</span>
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
-            </PromptInputTools>
-
-            <PromptInputTools>
-
-              {/* Microphone Button */}
-              {enableMicrophone && recognition && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton
-                      variant="ghost"
-                      onClick={onMicrophoneClick}
-                      className={cn(
-                        'transition-all duration-200',
-                        isRecording && 'bg-destructive/10 text-destructive hover:bg-destructive/20 ring-1 ring-destructive/30'
-                      )}>
-                      <Mic className="w-4 h-4" />
-                      {isRecording && (
-                        <div className="absolute -top-1 -right-1 w-2 h-2 bg-destructive rounded-full animate-pulse" />
-                      )}
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">
-                    {isRecording ? t('tools.stop_recording') : t('tools.microphone')}
-                  </TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Voice Button */}
-              {enableVoice && (
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <PromptInputButton variant="ghost">
-                      <AudioLines className="w-4 h-4" />
-                    </PromptInputButton>
-                  </TooltipTrigger>
-                  <TooltipContent side="top">{t('tools.voice')}</TooltipContent>
-                </Tooltip>
-              )}
-
-              {/* Submit Button */}
-              <PromptInputSubmit
-                disabled={isDisabled}
-                status={status}
-                onStop={onStop} />
-            </PromptInputTools>
-          </PromptInputFooter>
-        )}
-
-        {!showToolbar && !compactToolbar && (
-          <PromptInputFooter className="border-t-0 pt-0 pb-1 justify-end">
-            <PromptInputSubmit
-              disabled={isDisabled}
-              status={status}
-              onStop={onStop} />
-          </PromptInputFooter>
-        )}
-      </PromptInput>
-
-      {/* Footer */}
-      <div className="relative mt-2 flex items-center px-1">
-        {footerText && <span className="flex-1 text-center text-xs text-muted-foreground">{footerText}</span>}
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="absolute right-0 h-6 w-6 text-muted-foreground"
-              disabled={!threadId || !hasMessages}
-              onClick={handleExtractMemories}>
-              <BrainCircuit className="h-3.5 w-3.5" />
-            </Button>
-          </TooltipTrigger>
-          <TooltipContent side="top">{t('tools.extract_memories')}</TooltipContent>
-        </Tooltip>
-      </div>
-
-      <MemoryExtractionDialog
-        open={memoryExtractionOpen}
-        onClose={() => setMemoryExtractionOpen(false)}
-        candidates={memoryExtractionCandidates}
-        loading={memoryExtractionLoading}
-        error={memoryExtractionError}
-        saving={memorySaving}
-        onSave={saveMemoryCandidate}
-        onSkip={skipMemoryCandidate}
-        onSaveAll={saveAllMemoryCandidates}
-        onSkipAll={skipAllMemoryCandidates}
-        onLevelChange={handleMemoryLevelChange} />
-    </div>
-  );
-};