mirror of
https://github.com/claude-code-best/claude-code.git
synced 2026-06-15 21:05:51 +00:00
344 lines
12 KiB
TypeScript
344 lines
12 KiB
TypeScript
import { useState, useRef, useCallback, type KeyboardEvent, type ClipboardEvent } from 'react';
|
||
import { cn } from '../../src/lib/utils';
|
||
import { Send, Square, Paperclip, Slash } from 'lucide-react';
|
||
import type { ChatInputMessage, UserMessageImage } from '../../src/lib/types';
|
||
import type { AvailableCommand } from '../../src/acp/types';
|
||
import { CommandMenu } from './CommandMenu';
|
||
import imageCompression from 'browser-image-compression';
|
||
|
||
// 图片压缩配置
|
||
const IMAGE_COMPRESSION_OPTIONS = {
|
||
maxSizeMB: 2,
|
||
maxWidthOrHeight: 2048,
|
||
useWebWorker: true,
|
||
fileType: 'image/jpeg' as const,
|
||
};
|
||
|
||
// =============================================================================
|
||
// Anthropic 风格聊天输入框 — 底部居中浮动卡片，橙色焦点环
|
||
// =============================================================================
|
||
|
||
interface ChatInputProps {
|
||
onSubmit: (message: ChatInputMessage) => void;
|
||
isLoading?: boolean;
|
||
onInterrupt?: () => void;
|
||
disabled?: boolean;
|
||
placeholder?: string;
|
||
/** 是否支持图片上传 */
|
||
supportsImages?: boolean;
|
||
/** Agent 提供的可用 slash 命令 */
|
||
commands?: AvailableCommand[];
|
||
className?: string;
|
||
}
|
||
|
||
export function ChatInput({
|
||
onSubmit,
|
||
isLoading = false,
|
||
onInterrupt,
|
||
disabled = false,
|
||
placeholder = '给 Claude 发送消息…',
|
||
supportsImages = false,
|
||
commands,
|
||
className,
|
||
}: ChatInputProps) {
|
||
const [text, setText] = useState('');
|
||
const [images, setImages] = useState<UserMessageImage[]>([]);
|
||
const [showCommandMenu, setShowCommandMenu] = useState(false);
|
||
const [commandFilter, setCommandFilter] = useState('');
|
||
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
|
||
const handleSubmit = useCallback(() => {
|
||
const trimmed = text.trim();
|
||
if ((!trimmed && images.length === 0) || disabled) return;
|
||
|
||
onSubmit({ text: trimmed, images: images.length > 0 ? images : undefined });
|
||
setText('');
|
||
setImages([]);
|
||
setShowCommandMenu(false);
|
||
setCommandFilter('');
|
||
// 重置 textarea 高度
|
||
if (textareaRef.current) {
|
||
textareaRef.current.style.height = 'auto';
|
||
}
|
||
}, [text, images, disabled, onSubmit]);
|
||
|
||
const handleKeyDown = useCallback(
|
||
(e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (showCommandMenu) {
|
||
if (e.key === 'Escape') {
|
||
e.preventDefault();
|
||
setShowCommandMenu(false);
|
||
return;
|
||
}
|
||
// Arrow keys and Enter are handled by CommandMenu via document-level listener
|
||
// Don't submit or move cursor when menu is open
|
||
if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (e.key === 'Tab') {
|
||
e.preventDefault();
|
||
setShowCommandMenu(false);
|
||
return;
|
||
}
|
||
}
|
||
if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
|
||
e.preventDefault();
|
||
if (isLoading) {
|
||
onInterrupt?.();
|
||
} else {
|
||
handleSubmit();
|
||
}
|
||
}
|
||
},
|
||
[handleSubmit, isLoading, onInterrupt, showCommandMenu],
|
||
);
|
||
|
||
const handleInput = useCallback(
|
||
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
|
||
const value = e.target.value;
|
||
setText(value);
|
||
|
||
// 检测 slash 命令模式：仅在输入开头输入 / 时触发
|
||
if (value.startsWith('/') && commands && commands.length > 0) {
|
||
setShowCommandMenu(true);
|
||
setCommandFilter(value.slice(1).split(/\s/)[0] || '');
|
||
} else if (showCommandMenu) {
|
||
setShowCommandMenu(false);
|
||
setCommandFilter('');
|
||
}
|
||
|
||
// 自动调整高度
|
||
const el = e.target;
|
||
el.style.height = 'auto';
|
||
el.style.height = Math.min(el.scrollHeight, 200) + 'px';
|
||
},
|
||
[commands, showCommandMenu],
|
||
);
|
||
|
||
// 粘贴图片
|
||
const handlePaste = useCallback(
|
||
async (e: ClipboardEvent) => {
|
||
if (!supportsImages) return;
|
||
const files = Array.from(e.clipboardData.files).filter(f => f.type.startsWith('image/'));
|
||
if (files.length === 0) return;
|
||
|
||
e.preventDefault();
|
||
const newImages = await processImageFiles(files);
|
||
setImages(prev => [...prev, ...newImages]);
|
||
},
|
||
[supportsImages],
|
||
);
|
||
|
||
// 选择文件
|
||
const handleFileSelect = useCallback(async () => {
|
||
if (!fileInputRef.current) return;
|
||
const files = fileInputRef.current.files;
|
||
if (!files || files.length === 0) return;
|
||
|
||
const newImages = await processImageFiles(Array.from(files));
|
||
setImages(prev => [...prev, ...newImages]);
|
||
// 清空 input 以便重复选择
|
||
fileInputRef.current.value = '';
|
||
}, []);
|
||
|
||
const removeImage = useCallback((index: number) => {
|
||
setImages(prev => prev.filter((_, i) => i !== index));
|
||
}, []);
|
||
|
||
const handleCommandSelect = useCallback((command: AvailableCommand) => {
|
||
setText(`/${command.name} `);
|
||
setShowCommandMenu(false);
|
||
setCommandFilter('');
|
||
textareaRef.current?.focus();
|
||
}, []);
|
||
|
||
const toggleCommandMenu = useCallback(() => {
|
||
if (showCommandMenu) {
|
||
setShowCommandMenu(false);
|
||
setCommandFilter('');
|
||
} else {
|
||
if (!text.startsWith('/')) {
|
||
setText('/' + text);
|
||
}
|
||
setShowCommandMenu(true);
|
||
setCommandFilter(text.startsWith('/') ? text.slice(1).split(/\s/)[0] || '' : '');
|
||
textareaRef.current?.focus();
|
||
}
|
||
}, [showCommandMenu, text]);
|
||
|
||
const canSend = (text.trim() || images.length > 0) && !disabled;
|
||
|
||
return (
|
||
<div className={cn('w-full max-w-3xl mx-auto px-4 sm:px-8 pb-4 pt-2', className)}>
|
||
<div className="relative">
|
||
{/* Slash command menu — floating above input */}
|
||
{showCommandMenu && commands && commands.length > 0 && (
|
||
<CommandMenu
|
||
commands={commands}
|
||
filter={commandFilter}
|
||
onSelect={handleCommandSelect}
|
||
onClose={() => {
|
||
setShowCommandMenu(false);
|
||
setCommandFilter('');
|
||
}}
|
||
className="absolute bottom-full left-0 right-0 mb-1 z-50"
|
||
/>
|
||
)}
|
||
<div
|
||
className={cn(
|
||
'rounded-xl border border-border bg-surface-2 overflow-hidden',
|
||
'focus-within:border-brand/50 focus-within:shadow-[0_0_0_3px_rgba(217,119,87,0.15)] transition-all',
|
||
)}
|
||
>
|
||
{/* 图片预览 */}
|
||
{images.length > 0 && (
|
||
<div className="flex flex-wrap gap-2 px-3 pt-3">
|
||
{images.map((img, i) => (
|
||
<div key={i} className="relative group">
|
||
<img
|
||
src={`data:${img.mimeType};base64,${img.data}`}
|
||
alt={`Attached image ${i + 1}`}
|
||
className="h-14 w-14 object-cover rounded-lg border border-border"
|
||
/>
|
||
<button
|
||
type="button"
|
||
onClick={() => removeImage(i)}
|
||
className="absolute -top-1.5 -right-1.5 min-h-[32px] min-w-[32px] h-5 w-5 rounded-full bg-surface-2 border border-border flex items-center justify-center text-text-muted hover:text-text-primary text-xs opacity-0 group-hover:opacity-100 transition-opacity"
|
||
aria-label={`Remove image ${i + 1}`}
|
||
>
|
||
{'\u00D7'}
|
||
</button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* 输入区域 — Anthropic 单行紧凑布局 */}
|
||
<div className="flex items-end gap-2 px-3 py-2.5">
|
||
{/* 左侧附件按钮 */}
|
||
{supportsImages && (
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={() => fileInputRef.current?.click()}
|
||
className="flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-lg text-text-muted hover:text-text-secondary hover:bg-surface-1/50 transition-colors"
|
||
disabled={disabled}
|
||
>
|
||
<Paperclip className="h-4 w-4" />
|
||
<span className="sr-only">Attach file</span>
|
||
</button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
className="hidden"
|
||
onChange={handleFileSelect}
|
||
/>
|
||
</>
|
||
)}
|
||
|
||
{/* Slash 命令按钮 */}
|
||
{commands && commands.length > 0 && (
|
||
<button
|
||
type="button"
|
||
onClick={toggleCommandMenu}
|
||
className={cn(
|
||
'flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-lg transition-colors',
|
||
showCommandMenu
|
||
? 'bg-brand/15 text-brand'
|
||
: 'text-text-muted hover:text-text-secondary hover:bg-surface-1/50',
|
||
)}
|
||
disabled={disabled}
|
||
title="命令列表"
|
||
>
|
||
<Slash className="h-4 w-4" />
|
||
</button>
|
||
)}
|
||
|
||
{/* Textarea — Poppins font */}
|
||
<textarea
|
||
ref={textareaRef}
|
||
value={text}
|
||
onChange={handleInput}
|
||
onKeyDown={handleKeyDown}
|
||
onPaste={handlePaste}
|
||
placeholder={placeholder}
|
||
disabled={disabled}
|
||
rows={1}
|
||
className={cn(
|
||
'flex-1 resize-none border-none bg-transparent outline-none',
|
||
'text-sm text-text-primary placeholder:text-text-muted font-display',
|
||
'max-h-[200px] min-h-[24px] leading-normal',
|
||
)}
|
||
/>
|
||
|
||
{/* 右侧发送/取消按钮 */}
|
||
<button
|
||
type="button"
|
||
onClick={isLoading ? onInterrupt : handleSubmit}
|
||
disabled={!isLoading && !canSend}
|
||
className={cn(
|
||
'flex-shrink-0 h-8 w-8 flex items-center justify-center rounded-lg transition-all',
|
||
isLoading
|
||
? 'bg-text-primary text-surface-2 hover:bg-text-secondary'
|
||
: canSend
|
||
? 'bg-brand text-white hover:bg-brand-light hover:scale-[1.05] active:scale-[0.97]'
|
||
: 'bg-surface-1 text-text-muted',
|
||
)}
|
||
>
|
||
{isLoading ? <Square className="h-3.5 w-3.5" fill="currentColor" /> : <Send className="h-4 w-4" />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* end relative */}
|
||
|
||
{/* 提示文本 */}
|
||
<div className="text-center mt-1.5">
|
||
<span className="text-[11px] text-text-muted font-display">Enter 发送，Shift+Enter 换行</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// =============================================================================
|
||
// 图片处理工具
|
||
// =============================================================================
|
||
|
||
async function processImageFiles(files: File[]): Promise<UserMessageImage[]> {
|
||
const results: UserMessageImage[] = [];
|
||
|
||
for (const file of files) {
|
||
try {
|
||
let blob: Blob = file;
|
||
let mimeType = file.type;
|
||
|
||
if (file.size > 2 * 1024 * 1024) {
|
||
const compressed = await imageCompression(file, IMAGE_COMPRESSION_OPTIONS);
|
||
blob = compressed;
|
||
mimeType = 'image/jpeg';
|
||
}
|
||
|
||
const base64 = await new Promise<string>((resolve, reject) => {
|
||
const reader = new FileReader();
|
||
reader.onloadend = () => {
|
||
const result = reader.result as string;
|
||
const commaIdx = result.indexOf(',');
|
||
resolve(commaIdx >= 0 ? result.slice(commaIdx + 1) : result);
|
||
};
|
||
reader.onerror = () => reject(new Error('FileReader error'));
|
||
reader.readAsDataURL(blob);
|
||
});
|
||
|
||
results.push({ mimeType, data: base64 });
|
||
} catch (err) {
|
||
console.error('Failed to process image:', err);
|
||
}
|
||
}
|
||
|
||
return results;
|
||
}
|