@docyrus/ui-pro-ai-assistant 0.0.1

package/src/components/input-area.tsx

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