d719508733
Commit: 2e9aaf49
54 files changed — ACP protocol + RCS bridge enhancements
CCP-specific files (CLAUDE.md, mint.json, package.json, prompts.ts) kept ours
341 lines
12 KiB
TypeScript
341 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;
|
||
}
|