420 lines
16 KiB
TypeScript
420 lines
16 KiB
TypeScript
"use client";
|
||
|
||
import { useRef, useState, useCallback, useImperativeHandle, forwardRef, type KeyboardEvent, type DragEvent, type ClipboardEvent } from "react";
|
||
import { motion } from "framer-motion";
|
||
import { ModelSelector } from "./model-selector";
|
||
import { DataStream } from "@/components/ui/data-stream";
|
||
import { useRipple, RippleLayer } from "@/components/ui/ripple-effect";
|
||
import { uploadRefImage, type UploadProgress } from "@/lib/api";
|
||
import { sendBounce } from "@/components/ui/motion-presets";
|
||
|
||
type UploadStatus = "idle" | "uploading" | "done" | "error";
|
||
|
||
interface UploadItem {
|
||
id: string;
|
||
status: UploadStatus;
|
||
previewUrl: string | null;
|
||
serverUrl: string | null;
|
||
progress: number;
|
||
errorMsg: string | null;
|
||
}
|
||
|
||
interface ChatInputProps {
|
||
onSend: (text: string, refImageServerUrls: string[], imageModel: string | null) => void;
|
||
disabled: boolean;
|
||
/** 上次使用的参考图服务端路径列表，用于自动沿用 */
|
||
lastRefServerUrls?: string[];
|
||
/** 上次参考图的完整可预览 URL 列表 */
|
||
lastRefPreviewUrls?: string[];
|
||
/** 用户主动清除沿用参考图时的回调 */
|
||
onClearLastRefImage?: () => void;
|
||
/** 文件在 ChatInput 区域内被 drop 时触发，通知父组件清除拖拽覆盖层 */
|
||
onFileDrop?: () => void;
|
||
/** 是否正在生成图片（用于数据流光加速） */
|
||
isGeneratingImage?: boolean;
|
||
}
|
||
|
||
export interface ChatInputHandle {
|
||
uploadFile: (file: File) => void;
|
||
}
|
||
|
||
let _uploadCounter = 0;
|
||
|
||
function imageFilesFromClipboard(data: DataTransfer | null): File[] {
|
||
if (!data?.items?.length) return [];
|
||
const out: File[] = [];
|
||
for (let i = 0; i < data.items.length; i++) {
|
||
const it = data.items[i];
|
||
if (it.kind === "file" && it.type.startsWith("image/")) {
|
||
const f = it.getAsFile();
|
||
if (f) out.push(f);
|
||
}
|
||
}
|
||
return out;
|
||
}
|
||
|
||
export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(function ChatInput(
|
||
{ onSend, disabled, lastRefServerUrls, lastRefPreviewUrls, onClearLastRefImage, onFileDrop, isGeneratingImage },
|
||
ref
|
||
) {
|
||
const [text, setText] = useState("");
|
||
const [uploads, setUploads] = useState<UploadItem[]>([]);
|
||
const [isDragging, setIsDragging] = useState(false);
|
||
const [selectedModel, setSelectedModel] = useState<string>("");
|
||
const [isFocused, setIsFocused] = useState(false);
|
||
const { ripples, trigger: triggerRipple } = useRipple();
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const sendBtnRef = useRef<HTMLButtonElement>(null);
|
||
const abortRefs = useRef<Map<string, AbortController>>(new Map());
|
||
|
||
const hasActiveUpload = uploads.some((u) => u.status === "uploading");
|
||
const allDone = uploads.length > 0 && uploads.every((u) => u.status === "done" || u.status === "error");
|
||
const doneUrls = uploads.filter((u) => u.status === "done" && u.serverUrl).map((u) => u.serverUrl!);
|
||
|
||
const canSend = text.trim() && !disabled && !hasActiveUpload;
|
||
|
||
const handleSubmit = () => {
|
||
const trimmed = text.trim();
|
||
if (!trimmed || disabled) return;
|
||
if (hasActiveUpload) return;
|
||
|
||
// 投石入水涟漪
|
||
if (sendBtnRef.current) {
|
||
const rect = sendBtnRef.current.getBoundingClientRect();
|
||
const parent = sendBtnRef.current.offsetParent as HTMLElement | null;
|
||
const parentRect = parent?.getBoundingClientRect() ?? rect;
|
||
triggerRipple(rect.left - parentRect.left + rect.width / 2, rect.top - parentRect.top + rect.height / 2);
|
||
}
|
||
|
||
const refUrls = doneUrls.length > 0 ? doneUrls : (lastRefServerUrls ?? []);
|
||
onSend(trimmed, refUrls, selectedModel || null);
|
||
setText("");
|
||
clearAllUploads();
|
||
};
|
||
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
if (e.key === "Enter" && !e.shiftKey) {
|
||
e.preventDefault();
|
||
handleSubmit();
|
||
}
|
||
};
|
||
|
||
const clearAllUploads = useCallback(() => {
|
||
abortRefs.current.forEach((c) => c.abort());
|
||
abortRefs.current.clear();
|
||
setUploads((prev) => {
|
||
prev.forEach((u) => { if (u.previewUrl) URL.revokeObjectURL(u.previewUrl); });
|
||
return [];
|
||
});
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
}, []);
|
||
|
||
const removeUpload = useCallback((id: string) => {
|
||
abortRefs.current.get(id)?.abort();
|
||
abortRefs.current.delete(id);
|
||
setUploads((prev) => {
|
||
const item = prev.find((u) => u.id === id);
|
||
if (item?.previewUrl) URL.revokeObjectURL(item.previewUrl);
|
||
return prev.filter((u) => u.id !== id);
|
||
});
|
||
}, []);
|
||
|
||
const startUpload = useCallback(async (file: File) => {
|
||
const id = `upload-${++_uploadCounter}`;
|
||
const controller = new AbortController();
|
||
abortRefs.current.set(id, controller);
|
||
|
||
const previewUrl = URL.createObjectURL(file);
|
||
const newItem: UploadItem = {
|
||
id,
|
||
status: "uploading",
|
||
previewUrl,
|
||
serverUrl: null,
|
||
progress: 0,
|
||
errorMsg: null,
|
||
};
|
||
setUploads((prev) => [...prev, newItem]);
|
||
|
||
try {
|
||
const result = await uploadRefImage(
|
||
file,
|
||
(p: UploadProgress) => {
|
||
setUploads((prev) =>
|
||
prev.map((u) => (u.id === id ? { ...u, progress: p.percent } : u))
|
||
);
|
||
},
|
||
controller.signal
|
||
);
|
||
setUploads((prev) =>
|
||
prev.map((u) =>
|
||
u.id === id ? { ...u, status: "done", serverUrl: result.url, progress: 100 } : u
|
||
)
|
||
);
|
||
} catch (err) {
|
||
if (err instanceof DOMException && err.name === "AbortError") return;
|
||
const msg = err instanceof Error ? err.message : "上传失败";
|
||
setUploads((prev) =>
|
||
prev.map((u) =>
|
||
u.id === id ? { ...u, status: "error", progress: 0, errorMsg: msg } : u
|
||
)
|
||
);
|
||
}
|
||
}, []);
|
||
|
||
useImperativeHandle(ref, () => ({ uploadFile: startUpload }), [startUpload]);
|
||
|
||
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const files = e.target.files;
|
||
if (files) {
|
||
Array.from(files).forEach((f) => startUpload(f));
|
||
}
|
||
if (fileInputRef.current) fileInputRef.current.value = "";
|
||
};
|
||
|
||
const handleDragOver = (e: DragEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsDragging(true);
|
||
};
|
||
const handleDragLeave = () => setIsDragging(false);
|
||
const handleDrop = (e: DragEvent) => {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
setIsDragging(false);
|
||
onFileDrop?.();
|
||
const files = Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/"));
|
||
files.forEach((f) => startUpload(f));
|
||
};
|
||
|
||
const handlePasteCapture = useCallback(
|
||
(e: ClipboardEvent) => {
|
||
if (disabled) return;
|
||
const files = imageFilesFromClipboard(e.clipboardData);
|
||
if (files.length === 0) return;
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
files.forEach((f) => startUpload(f));
|
||
},
|
||
[disabled, startUpload]
|
||
);
|
||
|
||
return (
|
||
<div
|
||
className={`border-t border-[var(--border)] bg-[var(--bg-secondary)]/80 backdrop-blur-xl
|
||
transition-colors ${
|
||
isDragging ? "bg-[var(--accent)]/5 border-[var(--accent)]/40" : ""
|
||
}`}
|
||
onDragOver={handleDragOver}
|
||
onDragLeave={handleDragLeave}
|
||
onDrop={handleDrop}
|
||
onPasteCapture={handlePasteCapture}
|
||
>
|
||
{/* 数据流光 */}
|
||
<DataStream active={disabled} speed={isGeneratingImage ? "fast" : "slow"} />
|
||
|
||
<div className="relative px-3 md:px-5 py-2.5 md:py-3">
|
||
{isDragging && (
|
||
<div className="mb-2 text-center text-xs text-[var(--accent)]">
|
||
松开以添加参考图（可多张）
|
||
</div>
|
||
)}
|
||
|
||
{/* 沿用上次参考图提示 */}
|
||
{uploads.length === 0 && lastRefPreviewUrls && lastRefPreviewUrls.length > 0 && (
|
||
<div className="mb-3 flex items-center gap-2.5">
|
||
<div className="flex gap-1.5">
|
||
{lastRefPreviewUrls.map((url, i) => (
|
||
<img
|
||
key={i}
|
||
src={url}
|
||
alt={`沿用参考图 ${i + 1}`}
|
||
className="w-10 h-10 rounded-lg object-cover border border-[var(--accent)]/30
|
||
shadow-[0_0_8px_rgba(46,139,122,0.1)]"
|
||
/>
|
||
))}
|
||
</div>
|
||
<span className="text-xs text-[var(--text-secondary)]">
|
||
沿用上次参考图（{lastRefPreviewUrls.length} 张）
|
||
</span>
|
||
<button
|
||
onClick={onClearLastRefImage}
|
||
className="ml-auto text-xs text-[var(--text-secondary)] hover:text-[var(--hot)]
|
||
cursor-pointer transition-colors"
|
||
title="清除参考图"
|
||
>
|
||
✕ 清除
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 参考图上传状态区（多图） */}
|
||
{uploads.length > 0 && (
|
||
<div className="mb-3 flex flex-wrap gap-2">
|
||
{uploads.map((item) => (
|
||
<div key={item.id} className="relative flex-shrink-0">
|
||
{item.previewUrl && (
|
||
<img
|
||
src={item.previewUrl}
|
||
alt="参考图"
|
||
className={`w-16 h-16 rounded-xl object-cover border border-[var(--border)] transition-opacity ${
|
||
item.status === "uploading" ? "opacity-60" : ""
|
||
}`}
|
||
/>
|
||
)}
|
||
{item.status === "uploading" && (
|
||
<div className="absolute inset-0 flex items-center justify-center">
|
||
<svg className="w-8 h-8 -rotate-90" viewBox="0 0 36 36">
|
||
<circle cx="18" cy="18" r="14" fill="none" stroke="rgba(46,139,122,0.12)" strokeWidth="3" />
|
||
<circle
|
||
cx="18" cy="18" r="14" fill="none"
|
||
stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"
|
||
strokeDasharray={`${item.progress * 0.88} 88`}
|
||
className="transition-all duration-200"
|
||
/>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
{item.status === "done" && (
|
||
<div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[var(--accent)]
|
||
text-[var(--bg-primary)] text-[10px] flex items-center justify-center font-bold
|
||
shadow-[0_0_8px_rgba(46,139,122,0.3)]">
|
||
✓
|
||
</div>
|
||
)}
|
||
{item.status === "error" && (
|
||
<div className="absolute -top-1 -right-1 w-5 h-5 rounded-full bg-[var(--hot)]
|
||
text-white text-[10px] flex items-center justify-center font-bold">
|
||
!
|
||
</div>
|
||
)}
|
||
{item.status !== "uploading" && (
|
||
<button
|
||
onClick={() => removeUpload(item.id)}
|
||
className="absolute -top-1.5 -left-1.5 w-5 h-5 rounded-full
|
||
bg-[var(--bg-secondary)] border border-[var(--border)]
|
||
text-[var(--text-secondary)] text-xs flex items-center justify-center
|
||
hover:bg-[var(--hot)] hover:text-white hover:border-[var(--hot)]
|
||
cursor-pointer transition-colors"
|
||
>
|
||
×
|
||
</button>
|
||
)}
|
||
</div>
|
||
))}
|
||
<div className="flex flex-col justify-center gap-1 min-w-0">
|
||
{hasActiveUpload && (
|
||
<span className="text-xs text-[var(--accent)] flex items-center gap-1.5">
|
||
<span className="inline-block w-2 h-2 rounded-full bg-[var(--accent)] animate-pulse
|
||
shadow-[0_0_6px_rgba(46,139,122,0.3)]" />
|
||
上传中...
|
||
</span>
|
||
)}
|
||
{allDone && (
|
||
<span className="text-xs text-[var(--accent)]">
|
||
{doneUrls.length} 张参考图已就绪
|
||
</span>
|
||
)}
|
||
{uploads.some((u) => u.status === "error") && (
|
||
<span className="text-xs text-[var(--hot)]">
|
||
{uploads.filter((u) => u.status === "error").length} 张上传失败
|
||
</span>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex items-end gap-2">
|
||
<ModelSelector value={selectedModel} onChange={setSelectedModel} />
|
||
|
||
{/* 上传参考图按钮 */}
|
||
<button
|
||
onClick={() => fileInputRef.current?.click()}
|
||
disabled={disabled || hasActiveUpload}
|
||
className={`relative flex-shrink-0 w-10 h-10 rounded-xl border
|
||
bg-[var(--bg-tertiary)] text-[var(--text-secondary)]
|
||
hover:text-[var(--accent)] hover:border-[var(--accent)]/40
|
||
hover:bg-[var(--accent)]/5
|
||
flex items-center justify-center transition-all
|
||
disabled:opacity-50 cursor-pointer btn-hover-lift ${
|
||
doneUrls.length > 0
|
||
? "border-[var(--accent)]/40 text-[var(--accent)]"
|
||
: "border-[var(--border)]"
|
||
}`}
|
||
title="上传参考图（可多选）"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||
<circle cx="8.5" cy="8.5" r="1.5" />
|
||
<polyline points="21 15 16 10 5 21" />
|
||
</svg>
|
||
{doneUrls.length > 0 && (
|
||
<span className="absolute -top-1 -right-1 w-4 h-4 rounded-full bg-[var(--accent)]
|
||
text-[var(--bg-primary)] text-[9px] flex items-center justify-center font-bold">
|
||
{doneUrls.length}
|
||
</span>
|
||
)}
|
||
</button>
|
||
<input
|
||
ref={fileInputRef}
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
onChange={handleFileChange}
|
||
className="hidden"
|
||
/>
|
||
|
||
{/* 文字输入框 — 水面感应 */}
|
||
<div className={`relative flex-1 ${isFocused ? "water-focus-active" : ""}`}>
|
||
<textarea
|
||
value={text}
|
||
onChange={(e) => setText(e.target.value)}
|
||
onKeyDown={handleKeyDown}
|
||
onFocus={() => setIsFocused(true)}
|
||
onBlur={() => setIsFocused(false)}
|
||
placeholder="描述你想要的美术资源...（可粘贴图片）"
|
||
title="支持 Ctrl+V / 右键粘贴剪贴板图片为参考图"
|
||
disabled={disabled}
|
||
rows={1}
|
||
className="w-full resize-none rounded-xl border border-[var(--border)]
|
||
bg-[var(--bg-tertiary)] text-[var(--text-primary)]
|
||
placeholder:text-[var(--text-secondary)]
|
||
px-4 py-2.5 text-sm leading-relaxed
|
||
focus:outline-none focus:border-[var(--accent)]/50
|
||
disabled:opacity-50 transition-all
|
||
min-h-[42px] max-h-[120px]"
|
||
style={{
|
||
fieldSizing: "content",
|
||
boxShadow: isFocused
|
||
? `0 0 ${8 + Math.min(text.length, 50) * 0.3}px rgba(46,139,122,${0.04 + Math.min(text.length, 50) * 0.002})`
|
||
: "none",
|
||
} as React.CSSProperties}
|
||
/>
|
||
<div className="water-focus-line" />
|
||
</div>
|
||
|
||
{/* 发送按钮 — 投石入水 */}
|
||
<motion.button
|
||
ref={sendBtnRef}
|
||
onClick={handleSubmit}
|
||
disabled={!canSend}
|
||
whileTap={canSend ? sendBounce : undefined}
|
||
className={`flex-shrink-0 w-10 h-10 rounded-xl
|
||
bg-[var(--accent)] text-[var(--bg-primary)]
|
||
hover:bg-[var(--accent-hover)]
|
||
hover:shadow-[0_0_15px_rgba(46,139,122,0.25)]
|
||
flex items-center justify-center transition-all
|
||
disabled:opacity-50 cursor-pointer
|
||
${canSend ? "breath-pulse" : ""}`}
|
||
>
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" />
|
||
</svg>
|
||
</motion.button>
|
||
</div>
|
||
{/* 涟漪层 */}
|
||
<RippleLayer ripples={ripples} />
|
||
</div>
|
||
</div>
|
||
);
|
||
});
|