273 lines
9.4 KiB
TypeScript
273 lines
9.4 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;
|
|
}
|
|
|
|
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,
|
|
}: GeminiInputProps) {
|
|
const textareaRef = useRef<HTMLTextAreaElement>(null);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
const [selectedModel, setSelectedModel] = useState<"flash" | "pro">("pro");
|
|
const [activeTools, setActiveTools] = useState<Set<string>>(new Set());
|
|
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) => {
|
|
setActiveTools((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(id)) {
|
|
next.delete(id);
|
|
} else {
|
|
next.add(id);
|
|
}
|
|
return next;
|
|
});
|
|
};
|
|
|
|
const removeTool = (id: string) => {
|
|
setActiveTools((prev) => {
|
|
const next = new Set(prev);
|
|
next.delete(id);
|
|
return 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-[#131314] via-[#131314]/90 to-transparent pointer-events-none">
|
|
<div className="max-w-3xl mx-auto px-4 pointer-events-auto">
|
|
{/* Input container */}
|
|
<div className="bg-[#1e1e1e] border border-[#3a3a3a] rounded-3xl shadow-lg focus-within:border-[#4a4a4a] 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-[#4285f4] text-white border border-[#4285f4]"
|
|
>
|
|
<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-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#2a2a2a] 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-[#4285f4]/20 text-[#4285f4]"
|
|
: "text-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#2a2a2a]"
|
|
)}
|
|
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-[#e3e3e3] text-sm placeholder:text-[#5f6368] 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-[#9aa0a6] hover:text-[#e3e3e3] hover:bg-[#2a2a2a] 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-[#4285f4] text-white hover:bg-[#3b78e7] cursor-pointer shadow-md"
|
|
: "bg-[#2a2a2a] text-[#5f6368] cursor-not-allowed"
|
|
)}
|
|
>
|
|
<ArrowUp
|
|
size={18}
|
|
className={cn(canSend ? "translate-y-px" : "")}
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom row: Model selector */}
|
|
<div className="flex items-center justify-end px-4 pb-3 pt-0 gap-2">
|
|
<button
|
|
onClick={() => setSelectedModel("flash")}
|
|
className={cn(
|
|
"px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer",
|
|
selectedModel === "flash"
|
|
? "bg-[#4285f4] text-white"
|
|
: "bg-[#2a2a2a] text-[#9aa0a6] hover:bg-[#333333] hover:text-[#e3e3e3]"
|
|
)}
|
|
aria-pressed={selectedModel === "flash"}
|
|
>
|
|
Flash
|
|
</button>
|
|
<button
|
|
onClick={() => setSelectedModel("pro")}
|
|
className={cn(
|
|
"px-3 py-1.5 rounded-full text-xs font-medium transition-all duration-150 cursor-pointer",
|
|
selectedModel === "pro"
|
|
? "bg-[#a855f7] text-white"
|
|
: "bg-[#2a2a2a] text-[#9aa0a6] hover:bg-[#333333] hover:text-[#e3e3e3]"
|
|
)}
|
|
aria-pressed={selectedModel === "pro"}
|
|
>
|
|
Pro
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tools panel (collapsible, below input) */}
|
|
{showTools && (
|
|
<div className="px-4 pb-3 pt-2 border-t border-[#2a2a2a]">
|
|
<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-[#4285f4] text-white border border-[#4285f4]"
|
|
: "bg-[#2a2a2a] text-[#9aa0a6] border border-transparent hover:bg-[#333333] hover:text-[#e3e3e3]"
|
|
)}
|
|
aria-pressed={isActive}
|
|
>
|
|
<Icon size={14} />
|
|
<span>{tool.label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Disclaimer */}
|
|
<p className="text-center text-[11px] text-[#5f6368] mt-2.5">
|
|
运营大脑可能会出错，请仔细检查其回复。{" "}
|
|
<button className="underline hover:text-[#9aa0a6] transition-colors cursor-pointer">
|
|
你的隐私与运营大脑应用
|
|
</button>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|