gongzhiyongandClaude Sonnet 4.6
c2e14c48a0
- Replace Flash/Pro dual model buttons with single "gpt-5.4" label - Backend still receives "flash" as model param (matches schema validation) - Remove unused selectedModel/onSelectedModelChange props from GeminiInput - Fix SSE stream parsing: process remaining buffer data when stream ends without trailing newline (potential cause of "no return" issue) Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
252 lines
8.9 KiB
TypeScript
252 lines
8.9 KiB
TypeScript
"use client";
|
|
|
|
import { useRef, useEffect, KeyboardEvent, useState } from "react";
|
|
import {
|
|
Plus,
|
|
Mic,
|
|
ArrowUp,
|
|
Box,
|
|
Search,
|
|
Database,
|
|
FileText,
|
|
Code2,
|
|
X,
|
|
} from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Tool {
|
|
id: string;
|
|
icon: React.ElementType;
|
|
label: string;
|
|
}
|
|
|
|
interface GeminiInputProps {
|
|
value: string;
|
|
onChange: (val: string) => void;
|
|
onSubmit: () => void;
|
|
isLoading?: boolean;
|
|
activeTools: Set<string>;
|
|
onActiveToolsChange: (tools: Set<string>) => void;
|
|
}
|
|
|
|
const TOOLS: Tool[] = [
|
|
{ id: "search", icon: Search, label: "搜索" },
|
|
{ id: "knowledge", icon: Database, label: "内部知识库" },
|
|
{ id: "sandbox", icon: Box, label: "沙盒" },
|
|
{ id: "document", icon: FileText, label: "文档生成" },
|
|
];
|
|
|
|
export function GeminiInput({
|
|
value,
|
|
onChange,
|
|
onSubmit,
|
|
isLoading,
|
|
activeTools,
|
|
onActiveToolsChange,
|
|
}: GeminiInputProps) {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [showTools, setShowTools] = useState(false);
|
|
|
|
// Auto-resize textarea
|
|
useEffect(() => {
|
|
const ta = textareaRef.current;
|
|
if (!ta) return;
|
|
ta.style.height = "auto";
|
|
ta.style.height = Math.min(ta.scrollHeight, 200) + "px";
|
|
}, [value]);
|
|
|
|
const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
|
if (e.key === "Enter" && !e.shiftKey) {
|
|
e.preventDefault();
|
|
if (value.trim() && !isLoading) onSubmit();
|
|
}
|
|
};
|
|
|
|
const toggleTool = (id: string) => {
|
|
const next = new Set(activeTools);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
onActiveToolsChange(next);
|
|
};
|
|
|
|
const removeTool = (id: string) => {
|
|
const next = new Set(activeTools);
|
|
next.delete(id);
|
|
onActiveToolsChange(next);
|
|
};
|
|
|
|
const canSend = value.trim().length > 0 && !isLoading;
|
|
|
|
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const files = e.target.files;
|
|
if (files && files.length > 0) {
|
|
// Handle file upload
|
|
console.log("上传文件:", files[0].name);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="sticky bottom-0 left-0 right-0 pb-6 pt-4 bg-gradient-to-t from-[var(--gem-bg)] via-[var(--gem-bg)]/90 to-transparent pointer-events-none">
|
|
<div className="max-w-3xl mx-auto px-4 pointer-events-auto">
|
|
{/* Input container */}
|
|
<div className="bg-[var(--gem-surface)] border border-[var(--gem-border)] rounded-3xl shadow-lg focus-within:border-[var(--gem-border-hover)] transition-colors duration-150">
|
|
{/* Selected tools chips (auto show when has active tools) */}
|
|
{activeTools.size > 0 && (
|
|
<div className="flex items-center gap-2 px-4 pt-3 pb-1 flex-wrap">
|
|
{Array.from(activeTools).map((toolId) => {
|
|
const tool = TOOLS.find((t) => t.id === toolId);
|
|
if (!tool) return null;
|
|
const Icon = tool.icon;
|
|
return (
|
|
<span
|
|
key={tool.id}
|
|
className="flex items-center gap-2 px-2.5 py-1.5 rounded-lg text-xs font-medium bg-[var(--gem-blue)] text-white border border-[var(--gem-blue)]"
|
|
>
|
|
<Icon size={14} />
|
|
<span>{tool.label}</span>
|
|
<button
|
|
onClick={() => removeTool(tool.id)}
|
|
className="ml-1 hover:opacity-80 transition-opacity cursor-pointer"
|
|
aria-label={`移除${tool.label}`}
|
|
>
|
|
<X size={12} />
|
|
</button>
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{/* Main input row */}
|
|
<div className="flex items-end gap-2 px-4 py-3">
|
|
{/* Left: File upload button */}
|
|
<button
|
|
onClick={() => fileInputRef.current?.click()}
|
|
className="p-1.5 rounded-full text-[var(--gem-text-muted)] hover:text-[var(--gem-text)] hover:bg-[var(--gem-surface-2)] transition-colors duration-150 flex-shrink-0 cursor-pointer mb-0.5"
|
|
aria-label="文件上传"
|
|
title="上传文件"
|
|
>
|
|
<Plus size={20} />
|
|
</button>
|
|
<input
|
|
ref={fileInputRef}
|
|
type="file"
|
|
multiple
|
|
onChange={handleFileUpload}
|
|
className="hidden"
|
|
aria-label="文件选择"
|
|
/>
|
|
|
|
{/* Tools toggle */}
|
|
<button
|
|
onClick={() => setShowTools(!showTools)}
|
|
className={cn(
|
|
"p-1.5 rounded-full transition-colors duration-150 flex-shrink-0 cursor-pointer mb-0.5",
|
|
showTools
|
|
? "bg-[var(--gem-blue)]/20 text-[var(--gem-blue)]"
|
|
: "text-[var(--gem-text-muted)] hover:text-[var(--gem-text)] hover:bg-[var(--gem-surface-2)]"
|
|
)}
|
|
aria-label="工具菜单"
|
|
title="工具"
|
|
aria-expanded={showTools}
|
|
>
|
|
<Box size={20} />
|
|
</button>
|
|
|
|
{/* Textarea */}
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="阐述你的图片"
|
|
rows={1}
|
|
className={cn(
|
|
"flex-1 bg-transparent text-[var(--gem-text)] text-sm placeholder:text-[var(--gem-text-placeholder)] resize-none outline-none",
|
|
"leading-relaxed py-0.5 min-h-[28px] max-h-[200px] overflow-y-auto scrollbar-thin"
|
|
)}
|
|
aria-label="消息输入"
|
|
aria-multiline="true"
|
|
/>
|
|
|
|
{/* Right controls */}
|
|
<div className="flex items-center gap-1 flex-shrink-0 mb-0.5">
|
|
<button
|
|
className="p-1.5 rounded-full text-[var(--gem-text-muted)] hover:text-[var(--gem-text)] hover:bg-[var(--gem-surface-2)] transition-colors duration-150 cursor-pointer"
|
|
aria-label="语音输入"
|
|
>
|
|
<Mic size={20} />
|
|
</button>
|
|
<button
|
|
onClick={() => canSend && onSubmit()}
|
|
disabled={!canSend}
|
|
aria-label="发送消息"
|
|
className={cn(
|
|
"w-9 h-9 rounded-full flex items-center justify-center transition-all duration-150",
|
|
canSend
|
|
? "bg-[var(--gem-blue)] text-white hover:bg-[var(--gem-blue-hover)] cursor-pointer shadow-md"
|
|
: "bg-[var(--gem-surface-2)] text-[var(--gem-text-placeholder)] cursor-not-allowed"
|
|
)}
|
|
>
|
|
<ArrowUp
|
|
size={18}
|
|
className={cn(canSend ? "translate-y-px" : "")}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom row: Model indicator */}
|
|
<div className="flex items-center justify-end px-4 pb-3 pt-0 gap-2">
|
|
<span
|
|
className="px-3 py-1.5 rounded-full text-xs font-medium bg-[var(--gem-blue)] text-white"
|
|
>
|
|
gpt-5.4
|
|
</span>
|
|
</div>
|
|
|
|
{/* Tools panel (collapsible, below input) */}
|
|
{showTools && (
|
|
<div className="px-4 pb-3 pt-2 border-t border-[var(--gem-surface-2)]">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
{TOOLS.map((tool) => {
|
|
const Icon = tool.icon;
|
|
const isActive = activeTools.has(tool.id);
|
|
return (
|
|
<button
|
|
key={tool.id}
|
|
onClick={() => toggleTool(tool.id)}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-all duration-150 cursor-pointer whitespace-nowrap",
|
|
isActive
|
|
? "bg-[var(--gem-blue)] text-white border border-[var(--gem-blue)]"
|
|
: "bg-[var(--gem-surface-2)] text-[var(--gem-text-muted)] border border-transparent hover:bg-[var(--gem-surface-3)] hover:text-[var(--gem-text)]"
|
|
)}
|
|
aria-pressed={isActive}
|
|
>
|
|
<Icon size={14} />
|
|
<span>{tool.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Disclaimer */}
|
|
<p className="text-center text-[11px] text-[var(--gem-text-placeholder)] mt-2.5">
|
|
运营大脑可能会出错，请仔细检查其回复。{" "}
|
|
<button className="underline hover:text-[var(--gem-text-muted)] transition-colors cursor-pointer">
|
|
你的隐私与运营大脑应用
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|