768 lines
30 KiB
TypeScript
768 lines
30 KiB
TypeScript
/**
|
|
* Chat Input Component
|
|
* Textarea with send button and universal file upload support.
|
|
* Enter to send, Shift+Enter for new line.
|
|
* Supports: native file picker, clipboard paste, drag & drop.
|
|
* Files are staged to disk via IPC — only lightweight path references
|
|
* are sent with the message (no base64 over WebSocket).
|
|
*/
|
|
import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
|
|
import { Check, ChevronDown, SendHorizontal, Square, X, Paperclip, FileText, Film, Music, FileArchive, File, Loader2, BookOpen } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { hostApiFetch } from '@/lib/host-api';
|
|
import { invokeIpc } from '@/lib/api-client';
|
|
import { buildQuickTaskPrompt } from '@/lib/quick-task-prompt';
|
|
import { cn } from '@/lib/utils';
|
|
import { useGatewayStore } from '@/stores/gateway';
|
|
import { useQuickTasksStore } from '@/stores/quick-tasks';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
// ── Types ────────────────────────────────────────────────────────
|
|
|
|
export interface FileAttachment {
|
|
id: string;
|
|
fileName: string;
|
|
mimeType: string;
|
|
fileSize: number;
|
|
stagedPath: string; // disk path for gateway
|
|
preview: string | null; // data URL for images, null for others
|
|
status: 'staging' | 'ready' | 'error';
|
|
error?: string;
|
|
}
|
|
|
|
export interface KnowledgeContextDocument {
|
|
id: string;
|
|
name: string;
|
|
mimeType: string;
|
|
storedPath: string;
|
|
textPath?: string;
|
|
}
|
|
|
|
const EMPTY_KNOWLEDGE_DOCUMENTS: KnowledgeContextDocument[] = [];
|
|
|
|
interface ChatInputProps {
|
|
onSend: (
|
|
text: string,
|
|
attachments?: FileAttachment[],
|
|
targetAgentId?: string | null,
|
|
options?: {
|
|
useKnowledgeBase?: boolean;
|
|
workspaceId?: string;
|
|
selectedKnowledgeDocumentIds?: string[];
|
|
quickTaskContext?: { taskNames: string[]; skillIds: string[]; prompt: string };
|
|
},
|
|
) => void;
|
|
onStop?: () => void;
|
|
disabled?: boolean;
|
|
sending?: boolean;
|
|
isEmpty?: boolean;
|
|
knowledgeDocuments?: KnowledgeContextDocument[];
|
|
workspaceId?: string;
|
|
}
|
|
|
|
// ── Helpers ──────────────────────────────────────────────────────
|
|
|
|
function formatFileSize(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`;
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
|
|
if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
|
|
return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
|
|
}
|
|
|
|
function FileIcon({ mimeType, className }: { mimeType: string; className?: string }) {
|
|
if (mimeType.startsWith('video/')) return <Film className={className} />;
|
|
if (mimeType.startsWith('audio/')) return <Music className={className} />;
|
|
if (mimeType.startsWith('text/') || mimeType === 'application/json' || mimeType === 'application/xml') return <FileText className={className} />;
|
|
if (mimeType.includes('zip') || mimeType.includes('compressed') || mimeType.includes('archive') || mimeType.includes('tar') || mimeType.includes('rar') || mimeType.includes('7z')) return <FileArchive className={className} />;
|
|
if (mimeType === 'application/pdf') return <FileText className={className} />;
|
|
return <File className={className} />;
|
|
}
|
|
|
|
/**
|
|
* Read a browser File object as base64 string (without the data URL prefix).
|
|
*/
|
|
function readFileAsBase64(file: globalThis.File): Promise<string> {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.onload = () => {
|
|
const dataUrl = reader.result as string;
|
|
if (!dataUrl || !dataUrl.includes(',')) {
|
|
reject(new Error(`Invalid data URL from FileReader for ${file.name}`));
|
|
return;
|
|
}
|
|
const base64 = dataUrl.split(',')[1];
|
|
if (!base64) {
|
|
reject(new Error(`Empty base64 data for ${file.name}`));
|
|
return;
|
|
}
|
|
resolve(base64);
|
|
};
|
|
reader.onerror = () => reject(new Error(`Failed to read file: ${file.name}`));
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
// ── Component ────────────────────────────────────────────────────
|
|
|
|
export function ChatInput({
|
|
onSend,
|
|
onStop,
|
|
disabled = false,
|
|
sending = false,
|
|
isEmpty = false,
|
|
knowledgeDocuments = EMPTY_KNOWLEDGE_DOCUMENTS,
|
|
workspaceId,
|
|
}: ChatInputProps) {
|
|
const { t } = useTranslation('chat');
|
|
const [input, setInput] = useState('');
|
|
const [attachments, setAttachments] = useState<FileAttachment[]>([]);
|
|
const [knowledgePickerOpen, setKnowledgePickerOpen] = useState(false);
|
|
const [selectedKnowledgeIds, setSelectedKnowledgeIds] = useState<string[]>([]);
|
|
const [selectedQuickTaskIds, setSelectedQuickTaskIds] = useState<string[]>([]);
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const knowledgePickerRef = useRef<HTMLDivElement>(null);
|
|
const isComposingRef = useRef(false);
|
|
const quickTaskPromptRef = useRef('');
|
|
const gatewayStatus = useGatewayStore((s) => s.status);
|
|
const quickTasks = useQuickTasksStore((state) => state.tasks);
|
|
const knowledgeBaseAvailable = knowledgeDocuments.length > 0;
|
|
const composerQuickTasks = useMemo(
|
|
() => quickTasks.filter((task) => task.enabled && task.showInComposer),
|
|
[quickTasks],
|
|
);
|
|
const selectedQuickTasks = useMemo(
|
|
() => composerQuickTasks.filter((task) => selectedQuickTaskIds.includes(task.id)),
|
|
[composerQuickTasks, selectedQuickTaskIds],
|
|
);
|
|
const selectedQuickTaskPrompt = useMemo(
|
|
() => buildQuickTaskPrompt(selectedQuickTasks),
|
|
[selectedQuickTasks],
|
|
);
|
|
const selectedKnowledgeDocuments = knowledgeDocuments.filter((doc) => selectedKnowledgeIds.includes(doc.id));
|
|
|
|
// Auto-resize textarea
|
|
useEffect(() => {
|
|
if (textareaRef.current) {
|
|
textareaRef.current.style.height = 'auto';
|
|
textareaRef.current.style.height = `${Math.min(textareaRef.current.scrollHeight, 240)}px`;
|
|
}
|
|
}, [input]);
|
|
|
|
// Focus textarea on mount (avoids Windows focus loss after session delete + native dialog)
|
|
useEffect(() => {
|
|
if (!disabled && textareaRef.current) {
|
|
textareaRef.current.focus();
|
|
}
|
|
}, [disabled]);
|
|
|
|
useEffect(() => {
|
|
setSelectedKnowledgeIds((current) => {
|
|
const next = current.filter((id) => knowledgeDocuments.some((doc) => doc.id === id));
|
|
return next.length === current.length ? current : next;
|
|
});
|
|
}, [knowledgeDocuments]);
|
|
|
|
useEffect(() => {
|
|
setSelectedQuickTaskIds((current) => {
|
|
const next = current.filter((id) => composerQuickTasks.some((task) => task.id === id));
|
|
return next.length === current.length ? current : next;
|
|
});
|
|
}, [composerQuickTasks]);
|
|
|
|
useEffect(() => {
|
|
const previousPrompt = quickTaskPromptRef.current;
|
|
const nextPrompt = selectedQuickTaskPrompt.trim();
|
|
if (previousPrompt === nextPrompt) return;
|
|
|
|
setInput((current) => {
|
|
let body = current;
|
|
if (previousPrompt) {
|
|
if (body === previousPrompt) {
|
|
body = '';
|
|
} else if (body.startsWith(`${previousPrompt} `)) {
|
|
body = body.slice(previousPrompt.length + 1);
|
|
} else if (body.startsWith(`${previousPrompt}\n\n`)) {
|
|
body = body.slice(previousPrompt.length + 2);
|
|
}
|
|
}
|
|
return body.trimStart();
|
|
});
|
|
quickTaskPromptRef.current = nextPrompt;
|
|
}, [selectedQuickTaskPrompt]);
|
|
|
|
useEffect(() => {
|
|
if (!knowledgePickerOpen) return;
|
|
const handlePointerDown = (event: MouseEvent) => {
|
|
if (!knowledgePickerRef.current?.contains(event.target as Node)) {
|
|
setKnowledgePickerOpen(false);
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handlePointerDown);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handlePointerDown);
|
|
};
|
|
}, [knowledgePickerOpen]);
|
|
|
|
// ── File staging via native dialog ─────────────────────────────
|
|
|
|
const pickFiles = useCallback(async () => {
|
|
try {
|
|
const result = await invokeIpc('dialog:open', {
|
|
properties: ['openFile', 'multiSelections'],
|
|
}) as { canceled: boolean; filePaths?: string[] };
|
|
if (result.canceled || !result.filePaths?.length) return;
|
|
|
|
// Add placeholder entries immediately
|
|
const tempIds: string[] = [];
|
|
for (const filePath of result.filePaths) {
|
|
const tempId = crypto.randomUUID();
|
|
tempIds.push(tempId);
|
|
// Handle both Unix (/) and Windows (\) path separators
|
|
const fileName = filePath.split(/[\\/]/).pop() || 'file';
|
|
setAttachments(prev => [...prev, {
|
|
id: tempId,
|
|
fileName,
|
|
mimeType: '',
|
|
fileSize: 0,
|
|
stagedPath: '',
|
|
preview: null,
|
|
status: 'staging' as const,
|
|
}]);
|
|
}
|
|
|
|
// Stage all files via IPC
|
|
console.log('[pickFiles] Staging files:', result.filePaths);
|
|
const staged = await hostApiFetch<Array<{
|
|
id: string;
|
|
fileName: string;
|
|
mimeType: string;
|
|
fileSize: number;
|
|
stagedPath: string;
|
|
preview: string | null;
|
|
}>>('/api/files/stage-paths', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ filePaths: result.filePaths }),
|
|
});
|
|
console.log('[pickFiles] Stage result:', staged?.map(s => ({ id: s?.id, fileName: s?.fileName, mimeType: s?.mimeType, fileSize: s?.fileSize, stagedPath: s?.stagedPath, hasPreview: !!s?.preview })));
|
|
|
|
// Update each placeholder with real data
|
|
setAttachments(prev => {
|
|
let updated = [...prev];
|
|
for (let i = 0; i < tempIds.length; i++) {
|
|
const tempId = tempIds[i];
|
|
const data = staged[i];
|
|
if (data) {
|
|
updated = updated.map(a =>
|
|
a.id === tempId
|
|
? { ...data, status: 'ready' as const }
|
|
: a,
|
|
);
|
|
} else {
|
|
console.warn(`[pickFiles] No staged data for tempId=${tempId} at index ${i}`);
|
|
updated = updated.map(a =>
|
|
a.id === tempId
|
|
? { ...a, status: 'error' as const, error: 'Staging failed' }
|
|
: a,
|
|
);
|
|
}
|
|
}
|
|
return updated;
|
|
});
|
|
} catch (err) {
|
|
console.error('[pickFiles] Failed to stage files:', err);
|
|
// Mark any stuck 'staging' attachments as 'error' so the user can remove them
|
|
// and the send button isn't permanently blocked
|
|
setAttachments(prev => prev.map(a =>
|
|
a.status === 'staging'
|
|
? { ...a, status: 'error' as const, error: String(err) }
|
|
: a,
|
|
));
|
|
}
|
|
}, []);
|
|
|
|
// ── Stage browser File objects (paste / drag-drop) ─────────────
|
|
|
|
const stageBufferFiles = useCallback(async (files: globalThis.File[]) => {
|
|
for (const file of files) {
|
|
const tempId = crypto.randomUUID();
|
|
setAttachments(prev => [...prev, {
|
|
id: tempId,
|
|
fileName: file.name,
|
|
mimeType: file.type || 'application/octet-stream',
|
|
fileSize: file.size,
|
|
stagedPath: '',
|
|
preview: null,
|
|
status: 'staging' as const,
|
|
}]);
|
|
|
|
try {
|
|
console.log(`[stageBuffer] Reading file: ${file.name} (${file.type}, ${file.size} bytes)`);
|
|
const base64 = await readFileAsBase64(file);
|
|
console.log(`[stageBuffer] Base64 length: ${base64?.length ?? 'null'}`);
|
|
const staged = await hostApiFetch<{
|
|
id: string;
|
|
fileName: string;
|
|
mimeType: string;
|
|
fileSize: number;
|
|
stagedPath: string;
|
|
preview: string | null;
|
|
}>('/api/files/stage-buffer', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
base64,
|
|
fileName: file.name,
|
|
mimeType: file.type || 'application/octet-stream',
|
|
}),
|
|
});
|
|
console.log(`[stageBuffer] Staged: id=${staged?.id}, path=${staged?.stagedPath}, size=${staged?.fileSize}`);
|
|
setAttachments(prev => prev.map(a =>
|
|
a.id === tempId ? { ...staged, status: 'ready' as const } : a,
|
|
));
|
|
} catch (err) {
|
|
console.error(`[stageBuffer] Error staging ${file.name}:`, err);
|
|
setAttachments(prev => prev.map(a =>
|
|
a.id === tempId
|
|
? { ...a, status: 'error' as const, error: String(err) }
|
|
: a,
|
|
));
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// ── Attachment management ──────────────────────────────────────
|
|
|
|
const removeAttachment = useCallback((id: string) => {
|
|
setAttachments(prev => prev.filter(a => a.id !== id));
|
|
}, []);
|
|
|
|
const allReady = attachments.length === 0 || attachments.every(a => a.status === 'ready');
|
|
const hasFailedAttachments = attachments.some((a) => a.status === 'error');
|
|
const canSend = (input.trim() || attachments.length > 0 || selectedQuickTasks.length > 0) && allReady && !disabled && !sending;
|
|
const canStop = sending && !disabled && !!onStop;
|
|
|
|
const handleSend = useCallback(() => {
|
|
if (!canSend) return;
|
|
const readyAttachments = attachments.filter(a => a.status === 'ready');
|
|
// Capture values before clearing — clear input immediately for snappy UX,
|
|
// but keep attachments available for the async send
|
|
const textToSend = [selectedQuickTaskPrompt, input.trim()].filter(Boolean).join(' ');
|
|
const attachmentsToSend = readyAttachments.length > 0 ? readyAttachments : undefined;
|
|
console.log(`[handleSend] text="${textToSend.substring(0, 50)}", attachments=${attachments.length}, ready=${readyAttachments.length}, sending=${!!attachmentsToSend}`);
|
|
if (attachmentsToSend) {
|
|
console.log('[handleSend] Attachment details:', attachmentsToSend.map(a => ({
|
|
id: a.id, fileName: a.fileName, mimeType: a.mimeType, fileSize: a.fileSize,
|
|
stagedPath: a.stagedPath, status: a.status, hasPreview: !!a.preview,
|
|
})));
|
|
}
|
|
if (selectedQuickTasks.length > 0) {
|
|
console.log('[handleSend] Quick task prompt:', selectedQuickTaskPrompt);
|
|
}
|
|
setInput('');
|
|
setAttachments([]);
|
|
if (textareaRef.current) {
|
|
textareaRef.current.style.height = 'auto';
|
|
}
|
|
onSend(textToSend, attachmentsToSend, null, {
|
|
useKnowledgeBase: selectedKnowledgeIds.length > 0,
|
|
workspaceId,
|
|
selectedKnowledgeDocumentIds: selectedKnowledgeIds,
|
|
});
|
|
setKnowledgePickerOpen(false);
|
|
setSelectedQuickTaskIds([]);
|
|
quickTaskPromptRef.current = '';
|
|
}, [input, attachments, canSend, onSend, selectedKnowledgeIds, workspaceId, selectedQuickTasks, selectedQuickTaskPrompt]);
|
|
|
|
const handleStop = useCallback(() => {
|
|
if (!canStop) return;
|
|
onStop?.();
|
|
}, [canStop, onStop]);
|
|
|
|
const handleKeyDown = useCallback(
|
|
(e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
const nativeEvent = e.nativeEvent as KeyboardEvent;
|
|
if (isComposingRef.current || nativeEvent.isComposing || nativeEvent.keyCode === 229) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
},
|
|
[handleSend],
|
|
);
|
|
|
|
const toggleKnowledgeDocument = useCallback((id: string) => {
|
|
setSelectedKnowledgeIds((current) => (
|
|
current.includes(id)
|
|
? current.filter((item) => item !== id)
|
|
: [...current, id]
|
|
));
|
|
}, []);
|
|
|
|
const toggleQuickTask = useCallback((id: string) => {
|
|
setSelectedQuickTaskIds((current) => (
|
|
current.includes(id)
|
|
? []
|
|
: [id]
|
|
));
|
|
}, []);
|
|
|
|
// Handle paste (Ctrl/Cmd+V with files)
|
|
const handlePaste = useCallback(
|
|
(e: React.ClipboardEvent) => {
|
|
const items = e.clipboardData?.items;
|
|
if (!items) return;
|
|
|
|
const pastedFiles: globalThis.File[] = [];
|
|
for (const item of Array.from(items)) {
|
|
if (item.kind === 'file') {
|
|
const file = item.getAsFile();
|
|
if (file) pastedFiles.push(file);
|
|
}
|
|
}
|
|
if (pastedFiles.length > 0) {
|
|
e.preventDefault();
|
|
stageBufferFiles(pastedFiles);
|
|
}
|
|
},
|
|
[stageBufferFiles],
|
|
);
|
|
|
|
// Handle drag & drop
|
|
const [dragOver, setDragOver] = useState(false);
|
|
|
|
const handleDragOver = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragOver(true);
|
|
}, []);
|
|
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragOver(false);
|
|
}, []);
|
|
|
|
const handleDrop = useCallback(
|
|
(e: React.DragEvent) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
setDragOver(false);
|
|
if (e.dataTransfer?.files?.length) {
|
|
stageBufferFiles(Array.from(e.dataTransfer.files));
|
|
}
|
|
},
|
|
[stageBufferFiles],
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"w-full shrink-0 px-0 pb-0 pt-3 mx-auto transition-all duration-300",
|
|
isEmpty ? "max-w-4xl" : "max-w-4xl"
|
|
)}
|
|
onDragOver={handleDragOver}
|
|
onDragLeave={handleDragLeave}
|
|
onDrop={handleDrop}
|
|
>
|
|
<div className="w-full">
|
|
{/* Attachment Previews */}
|
|
{attachments.length > 0 && (
|
|
<div className="flex gap-2 mb-3 flex-wrap">
|
|
{attachments.map((att) => (
|
|
<AttachmentPreview
|
|
key={att.id}
|
|
attachment={att}
|
|
onRemove={() => removeAttachment(att.id)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{composerQuickTasks.length > 0 && (
|
|
<div className="mb-2 flex flex-wrap gap-1.5">
|
|
{composerQuickTasks.map((task) => {
|
|
const selected = selectedQuickTaskIds.includes(task.id);
|
|
const skillNames = task.skills.map((skill) => skill.name).filter(Boolean).join('、') || task.name;
|
|
return (
|
|
<div key={task.id} className="group relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleQuickTask(task.id)}
|
|
disabled={disabled || sending}
|
|
data-testid={`chat-quick-task-${task.id}`}
|
|
className={cn(
|
|
'inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border px-2.5 py-1 text-[12px] font-medium transition-colors',
|
|
selected
|
|
? 'border-[#7DBADB] bg-[#F4FAFD] text-[#075985]'
|
|
: 'border-slate-200/80 bg-white text-muted-foreground hover:bg-[#F8FBFE] dark:border-white/10 dark:bg-card dark:hover:bg-white/10',
|
|
)}
|
|
>
|
|
<span className="truncate">{task.name}</span>
|
|
</button>
|
|
<div className="pointer-events-none absolute bottom-full left-0 z-30 mb-2 hidden w-72 rounded-lg border border-slate-200/80 bg-white p-3 text-left shadow-[0_18px_48px_rgba(15,23,42,0.14)] group-hover:block dark:border-white/10 dark:bg-card">
|
|
<div className="text-[13px] font-semibold text-foreground">{task.name}</div>
|
|
<div className="mt-1 text-[12px] leading-5 text-muted-foreground">
|
|
{task.description || t('composer.quickTaskHelp')}
|
|
</div>
|
|
{skillNames && (
|
|
<div className="mt-2 rounded-md bg-slate-50 px-2 py-1.5 text-[11px] leading-4 text-slate-600 dark:bg-white/5 dark:text-slate-300">
|
|
{skillNames}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Input Container */}
|
|
<div className={`relative rounded-lg border bg-white px-3 pb-2 pt-3 shadow-none transition-colors dark:bg-card ${dragOver ? 'border-[#0369A1] ring-1 ring-[#0369A1]' : 'border-slate-200/80 dark:border-white/10'}`}>
|
|
{selectedKnowledgeDocuments.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5 pb-1.5">
|
|
{selectedKnowledgeDocuments.map((doc) => (
|
|
<button
|
|
key={doc.id}
|
|
type="button"
|
|
onClick={() => toggleKnowledgeDocument(doc.id)}
|
|
className="inline-flex max-w-[220px] items-center gap-1.5 rounded-lg border border-[#7DBADB]/70 bg-[#F4FAFD] px-2.5 py-1 text-[13px] font-medium text-foreground transition-colors hover:bg-[#EAF5FA]"
|
|
title={doc.name}
|
|
>
|
|
<BookOpen className="h-3 w-3 shrink-0 text-[#1E3A8A]" />
|
|
<span className="truncate">{doc.name}</span>
|
|
<X className="h-3 w-3 shrink-0 text-muted-foreground" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Text Row — flush-left */}
|
|
<div className="flex min-h-[48px] items-start text-[14px] font-normal leading-6">
|
|
{selectedQuickTaskPrompt && (
|
|
<span
|
|
onClick={() => textareaRef.current?.focus()}
|
|
className="mt-0 select-none whitespace-nowrap pr-1.5 font-sans text-[14px] font-normal leading-6 text-muted-foreground/60"
|
|
>
|
|
{selectedQuickTaskPrompt}
|
|
</span>
|
|
)}
|
|
<Textarea
|
|
ref={textareaRef}
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
onCompositionStart={() => {
|
|
isComposingRef.current = true;
|
|
}}
|
|
onCompositionEnd={() => {
|
|
isComposingRef.current = false;
|
|
}}
|
|
onPaste={handlePaste}
|
|
placeholder={disabled ? t('composer.gatewayDisconnectedPlaceholder') : ''}
|
|
disabled={disabled}
|
|
data-testid="chat-composer-input"
|
|
className="block min-h-[48px] max-h-[240px] min-w-0 flex-1 resize-none border-0 bg-transparent p-0 font-sans text-[14px] font-normal leading-6 shadow-none placeholder:text-muted-foreground/60 focus-visible:ring-0 focus-visible:ring-offset-0"
|
|
rows={1}
|
|
/>
|
|
</div>
|
|
|
|
{/* Action Row — icons on their own line */}
|
|
<div className="mt-1.5 flex items-center gap-1">
|
|
{/* Attach Button */}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-8 w-8 shrink-0 rounded-lg text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10"
|
|
onClick={pickFiles}
|
|
disabled={disabled || sending}
|
|
title={t('composer.attachFiles')}
|
|
>
|
|
<Paperclip className="h-3.5 w-3.5" />
|
|
</Button>
|
|
|
|
<div ref={knowledgePickerRef} className="relative shrink-0">
|
|
<Button
|
|
variant="ghost"
|
|
className={cn(
|
|
'h-8 rounded-lg px-2 text-[12px] text-muted-foreground transition-colors hover:bg-[#EAF5FA] hover:text-[#075985] dark:hover:bg-white/10',
|
|
selectedKnowledgeIds.length > 0 && 'bg-[#F4FAFD] text-[#075985] hover:bg-[#EAF5FA]',
|
|
)}
|
|
onClick={() => setKnowledgePickerOpen((open) => !open)}
|
|
disabled={!knowledgeBaseAvailable || disabled || sending}
|
|
data-testid="chat-composer-knowledge-button"
|
|
title={knowledgeBaseAvailable ? '选择知识库文件作为上下文' : '当前组织空间暂无知识文件'}
|
|
>
|
|
<BookOpen className="mr-1.5 h-3.5 w-3.5" />
|
|
知识库
|
|
<span className="ml-1 text-muted-foreground">
|
|
{selectedKnowledgeIds.length > 0 ? selectedKnowledgeIds.length : knowledgeDocuments.length}
|
|
</span>
|
|
<ChevronDown className="ml-1 h-3 w-3" />
|
|
</Button>
|
|
|
|
{knowledgePickerOpen && (
|
|
<div
|
|
data-testid="chat-composer-knowledge-popover"
|
|
className="absolute bottom-full left-0 z-30 mb-2 w-80 max-w-[calc(100vw-7rem)] overflow-hidden rounded-lg border border-slate-200/80 bg-white/95 p-2 shadow-[0_18px_48px_rgba(15,23,42,0.14)] backdrop-blur dark:border-white/10 dark:bg-card"
|
|
>
|
|
<div className="flex items-center justify-between px-2 py-1.5">
|
|
<div className="text-[12px] font-medium text-foreground">选择知识库上下文</div>
|
|
{selectedKnowledgeIds.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setSelectedKnowledgeIds([])}
|
|
className="text-[11px] text-muted-foreground transition-colors hover:text-foreground"
|
|
>
|
|
清空
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="max-h-64 overflow-y-auto">
|
|
{knowledgeDocuments.map((doc) => {
|
|
const selected = selectedKnowledgeIds.includes(doc.id);
|
|
return (
|
|
<button
|
|
key={doc.id}
|
|
type="button"
|
|
onClick={() => toggleKnowledgeDocument(doc.id)}
|
|
className={cn(
|
|
'flex w-full items-center gap-2 rounded-lg px-2 py-2 text-left transition-colors',
|
|
selected ? 'bg-[#EAF5FA] text-foreground' : 'hover:bg-[#F8FBFE] dark:hover:bg-white/5',
|
|
)}
|
|
>
|
|
<span className={cn(
|
|
'flex h-4 w-4 shrink-0 items-center justify-center rounded border',
|
|
selected ? 'border-[#1E3A8A] bg-[#1E3A8A] text-white' : 'border-slate-300 text-transparent',
|
|
)}>
|
|
<Check className="h-3 w-3" />
|
|
</span>
|
|
<span className="min-w-0 flex-1">
|
|
<span className="block truncate text-[13px] font-medium">{doc.name}</span>
|
|
<span className="block truncate text-[11px] text-muted-foreground">
|
|
{doc.textPath ? '已提取文本' : doc.mimeType}
|
|
</span>
|
|
</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Send Button — pushed to the right */}
|
|
<Button
|
|
onClick={sending ? handleStop : handleSend}
|
|
disabled={sending ? !canStop : !canSend}
|
|
size="icon"
|
|
data-testid="chat-composer-send"
|
|
className={`ml-auto h-8 w-8 shrink-0 rounded-lg transition-colors ${
|
|
(sending || canSend)
|
|
? 'bg-[#0369A1] text-white hover:bg-[#075985]'
|
|
: 'text-muted-foreground/50 hover:bg-transparent bg-transparent'
|
|
}`}
|
|
variant="ghost"
|
|
title={sending ? t('composer.stop') : t('composer.send')}
|
|
>
|
|
{sending ? (
|
|
<Square className="h-3.5 w-3.5" fill="currentColor" />
|
|
) : (
|
|
<SendHorizontal className="h-4 w-4" strokeWidth={2} />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="mt-2.5 flex items-center justify-between gap-2 px-1 text-[11px] text-muted-foreground/60">
|
|
<div className="flex items-center gap-1.5">
|
|
<div className={cn("w-1.5 h-1.5 rounded-full", gatewayStatus.state === 'running' ? "bg-green-500/80" : "bg-red-500/80")} />
|
|
<span>
|
|
{t('composer.gatewayStatus', {
|
|
state: gatewayStatus.state === 'running'
|
|
? t('composer.gatewayConnected')
|
|
: gatewayStatus.state,
|
|
port: gatewayStatus.port,
|
|
pid: gatewayStatus.pid ? `| pid: ${gatewayStatus.pid}` : '',
|
|
})}
|
|
</span>
|
|
</div>
|
|
{hasFailedAttachments && (
|
|
<Button
|
|
variant="link"
|
|
size="sm"
|
|
className="h-auto p-0 text-[11px]"
|
|
onClick={() => {
|
|
setAttachments((prev) => prev.filter((att) => att.status !== 'error'));
|
|
void pickFiles();
|
|
}}
|
|
>
|
|
{t('composer.retryFailedAttachments')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ── Attachment Preview ───────────────────────────────────────────
|
|
|
|
function AttachmentPreview({
|
|
attachment,
|
|
onRemove,
|
|
}: {
|
|
attachment: FileAttachment;
|
|
onRemove: () => void;
|
|
}) {
|
|
const isImage = attachment.mimeType.startsWith('image/') && attachment.preview;
|
|
|
|
return (
|
|
<div className="group relative overflow-hidden rounded-lg border border-slate-200/80 dark:border-white/10">
|
|
{isImage ? (
|
|
// Image thumbnail
|
|
<div className="w-16 h-16">
|
|
<img
|
|
src={attachment.preview!}
|
|
alt={attachment.fileName}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
) : (
|
|
// Generic file card
|
|
<div className="flex max-w-[200px] items-center gap-2 bg-slate-50 px-3 py-2 dark:bg-white/5">
|
|
<FileIcon mimeType={attachment.mimeType} className="h-5 w-5 shrink-0 text-muted-foreground" />
|
|
<div className="min-w-0 overflow-hidden">
|
|
<p className="text-xs font-medium truncate">{attachment.fileName}</p>
|
|
<p className="text-[10px] text-muted-foreground">
|
|
{attachment.fileSize > 0 ? formatFileSize(attachment.fileSize) : '...'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Staging overlay */}
|
|
{attachment.status === 'staging' && (
|
|
<div className="absolute inset-0 bg-black/40 flex items-center justify-center">
|
|
<Loader2 className="h-4 w-4 text-white animate-spin" />
|
|
</div>
|
|
)}
|
|
|
|
{/* Error overlay */}
|
|
{attachment.status === 'error' && (
|
|
<div className="absolute inset-0 bg-destructive/20 flex items-center justify-center">
|
|
<span className="text-[10px] text-destructive font-medium px-1">Error</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Remove button */}
|
|
<button
|
|
onClick={onRemove}
|
|
className="absolute -top-1 -right-1 bg-destructive text-destructive-foreground rounded-full p-0.5 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|