1112 lines
40 KiB
TypeScript
1112 lines
40 KiB
TypeScript
"use client";
|
||
|
||
import type { ChatStatus } from "ai";
|
||
import {
|
||
CheckIcon,
|
||
GraduationCapIcon,
|
||
LightbulbIcon,
|
||
PaperclipIcon,
|
||
PlusIcon,
|
||
SparklesIcon,
|
||
RocketIcon,
|
||
XIcon,
|
||
ZapIcon,
|
||
} from "lucide-react";
|
||
import { useSearchParams } from "next/navigation";
|
||
import {
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type ComponentProps,
|
||
} from "react";
|
||
|
||
import {
|
||
PromptInput,
|
||
PromptInputActionMenu,
|
||
PromptInputActionMenuContent,
|
||
PromptInputActionMenuItem,
|
||
PromptInputActionMenuTrigger,
|
||
PromptInputAttachment,
|
||
PromptInputAttachments,
|
||
PromptInputBody,
|
||
PromptInputButton,
|
||
PromptInputFooter,
|
||
PromptInputSubmit,
|
||
PromptInputTextarea,
|
||
PromptInputTools,
|
||
usePromptInputAttachments,
|
||
usePromptInputController,
|
||
type PromptInputMessage,
|
||
} from "@/components/ai-elements/prompt-input";
|
||
import { Button } from "@/components/ui/button";
|
||
import { ConfettiButton } from "@/components/ui/confetti-button";
|
||
import { Badge } from "@/components/ui/badge";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/components/ui/dialog";
|
||
import {
|
||
DropdownMenuGroup,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import { getBackendBaseURL } from "@/core/config";
|
||
import { useI18n } from "@/core/i18n/hooks";
|
||
import { useModels } from "@/core/models/hooks";
|
||
import type { AgentThreadContext } from "@/core/threads";
|
||
import { textOfMessage } from "@/core/threads/utils";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
import {
|
||
ModelSelector,
|
||
ModelSelectorContent,
|
||
ModelSelectorInput,
|
||
ModelSelectorItem,
|
||
ModelSelectorList,
|
||
ModelSelectorName,
|
||
ModelSelectorTrigger,
|
||
} from "../ai-elements/model-selector";
|
||
import { Suggestion, Suggestions } from "../ai-elements/suggestion";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from "../ui/dropdown-menu";
|
||
|
||
import { useThread } from "./messages/context";
|
||
import { ModeHoverGuide } from "./mode-hover-guide";
|
||
import { Tooltip } from "./tooltip";
|
||
import { useIframeSkill } from "@/hooks/use-iframe-skill";
|
||
|
||
type InputMode = "flash" | "thinking" | "pro" | "ultra";
|
||
|
||
function getResolvedMode(
|
||
mode: InputMode | undefined,
|
||
supportsThinking: boolean,
|
||
): InputMode {
|
||
if (!supportsThinking && mode !== "flash") {
|
||
return "flash";
|
||
}
|
||
if (mode) {
|
||
return mode;
|
||
}
|
||
return supportsThinking ? "pro" : "flash";
|
||
}
|
||
|
||
export function InputBox({
|
||
className,
|
||
disabled,
|
||
autoFocus,
|
||
status = "ready",
|
||
context,
|
||
extraHeader,
|
||
isNewThread,
|
||
threadId,
|
||
initialValue,
|
||
onContextChange,
|
||
onSubmit,
|
||
onStop,
|
||
onFocusChange,
|
||
...props
|
||
}: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
|
||
assistantId?: string | null;
|
||
status?: ChatStatus;
|
||
disabled?: boolean;
|
||
context: Omit<
|
||
AgentThreadContext,
|
||
"thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
|
||
> & {
|
||
mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
|
||
reasoning_effort?: "minimal" | "low" | "medium" | "high";
|
||
};
|
||
extraHeader?: React.ReactNode;
|
||
isNewThread?: boolean;
|
||
threadId: string;
|
||
initialValue?: string;
|
||
onContextChange?: (
|
||
context: Omit<
|
||
AgentThreadContext,
|
||
"thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
|
||
> & {
|
||
mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
|
||
reasoning_effort?: "minimal" | "low" | "medium" | "high";
|
||
},
|
||
) => void;
|
||
onSubmit?: (message: PromptInputMessage) => void;
|
||
onStop?: () => void;
|
||
onFocusChange?: (focused: boolean) => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const searchParams = useSearchParams();
|
||
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
||
const { models } = useModels();
|
||
const { thread, isMock } = useThread();
|
||
const { textInput } = usePromptInputController();
|
||
const iframeSkill = useIframeSkill();
|
||
const promptRootRef = useRef<HTMLDivElement | null>(null);
|
||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||
const attachments = usePromptInputAttachments();
|
||
|
||
const [followups, setFollowups] = useState<string[]>([]);
|
||
const [followupsHidden, setFollowupsHidden] = useState(false);
|
||
const [followupsLoading, setFollowupsLoading] = useState(false);
|
||
const lastGeneratedForAiIdRef = useRef<string | null>(null);
|
||
const wasStreamingRef = useRef(false);
|
||
|
||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||
const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
|
||
null,
|
||
);
|
||
|
||
const [isFocused, setIsFocused] = useState(false);
|
||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||
|
||
// isNewThread 时禁用收缩，始终保持展开
|
||
const effectiveIsFocused = isNewThread || isFocused;
|
||
|
||
useEffect(() => {
|
||
if (!isFocused) return;
|
||
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
if (
|
||
containerRef.current &&
|
||
!containerRef.current.contains(event.target as Node)
|
||
) {
|
||
setIsFocused(false);
|
||
onFocusChange?.(false);
|
||
}
|
||
};
|
||
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||
}, [isFocused, onFocusChange]);
|
||
|
||
useEffect(() => {
|
||
if (models.length === 0) {
|
||
return;
|
||
}
|
||
const currentModel = models.find((m) => m.name === context.model_name);
|
||
const fallbackModel = currentModel ?? models[0]!;
|
||
const supportsThinking = fallbackModel.supports_thinking ?? false;
|
||
const nextModelName = fallbackModel.name;
|
||
const nextMode = getResolvedMode(context.mode, supportsThinking);
|
||
|
||
if (context.model_name === nextModelName && context.mode === nextMode) {
|
||
return;
|
||
}
|
||
|
||
onContextChange?.({
|
||
...context,
|
||
model_name: nextModelName,
|
||
mode: nextMode,
|
||
});
|
||
}, [context, models, onContextChange]);
|
||
|
||
const selectedModel = useMemo(() => {
|
||
if (models.length === 0) {
|
||
return undefined;
|
||
}
|
||
return models.find((m) => m.name === context.model_name) ?? models[0];
|
||
}, [context.model_name, models]);
|
||
|
||
const supportThinking = useMemo(
|
||
() => selectedModel?.supports_thinking ?? false,
|
||
[selectedModel],
|
||
);
|
||
|
||
const supportReasoningEffort = useMemo(
|
||
() => selectedModel?.supports_reasoning_effort ?? false,
|
||
[selectedModel],
|
||
);
|
||
|
||
const handleModelSelect = useCallback(
|
||
(model_name: string) => {
|
||
const model = models.find((m) => m.name === model_name);
|
||
if (!model) {
|
||
return;
|
||
}
|
||
onContextChange?.({
|
||
...context,
|
||
model_name,
|
||
mode: getResolvedMode(context.mode, model.supports_thinking ?? false),
|
||
reasoning_effort: context.reasoning_effort,
|
||
});
|
||
setModelDialogOpen(false);
|
||
},
|
||
[onContextChange, context, models],
|
||
);
|
||
|
||
const handleModeSelect = useCallback(
|
||
(mode: InputMode) => {
|
||
onContextChange?.({
|
||
...context,
|
||
mode: getResolvedMode(mode, supportThinking),
|
||
reasoning_effort:
|
||
mode === "ultra"
|
||
? "high"
|
||
: mode === "pro"
|
||
? "medium"
|
||
: mode === "thinking"
|
||
? "low"
|
||
: "minimal",
|
||
});
|
||
},
|
||
[onContextChange, context, supportThinking],
|
||
);
|
||
|
||
const handleReasoningEffortSelect = useCallback(
|
||
(effort: "minimal" | "low" | "medium" | "high") => {
|
||
onContextChange?.({
|
||
...context,
|
||
reasoning_effort: effort,
|
||
});
|
||
},
|
||
[onContextChange, context],
|
||
);
|
||
|
||
const handleSubmit = useCallback(
|
||
async (message: PromptInputMessage) => {
|
||
if (status === "streaming") {
|
||
onStop?.();
|
||
return;
|
||
}
|
||
if (!message.text) {
|
||
return;
|
||
}
|
||
setFollowups([]);
|
||
setFollowupsHidden(false);
|
||
setFollowupsLoading(false);
|
||
onSubmit?.(message);
|
||
},
|
||
[onSubmit, onStop, status],
|
||
);
|
||
|
||
const requestFormSubmit = useCallback(() => {
|
||
const form = promptRootRef.current?.querySelector("form");
|
||
form?.requestSubmit();
|
||
}, []);
|
||
|
||
const handleFollowupClick = useCallback(
|
||
(suggestion: string) => {
|
||
if (status === "streaming") {
|
||
return;
|
||
}
|
||
const current = (textInput.value ?? "").trim();
|
||
if (current) {
|
||
setPendingSuggestion(suggestion);
|
||
setConfirmOpen(true);
|
||
return;
|
||
}
|
||
textInput.setInput(suggestion);
|
||
setFollowupsHidden(true);
|
||
setTimeout(() => requestFormSubmit(), 0);
|
||
},
|
||
[requestFormSubmit, status, textInput],
|
||
);
|
||
|
||
const confirmReplaceAndSend = useCallback(() => {
|
||
if (!pendingSuggestion) {
|
||
setConfirmOpen(false);
|
||
return;
|
||
}
|
||
textInput.setInput(pendingSuggestion);
|
||
setFollowupsHidden(true);
|
||
setConfirmOpen(false);
|
||
setPendingSuggestion(null);
|
||
setTimeout(() => requestFormSubmit(), 0);
|
||
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
||
|
||
const confirmAppendAndSend = useCallback(() => {
|
||
if (!pendingSuggestion) {
|
||
setConfirmOpen(false);
|
||
return;
|
||
}
|
||
const current = (textInput.value ?? "").trim();
|
||
const next = current
|
||
? `${current}\n${pendingSuggestion}`
|
||
: pendingSuggestion;
|
||
textInput.setInput(next);
|
||
setFollowupsHidden(true);
|
||
setConfirmOpen(false);
|
||
setPendingSuggestion(null);
|
||
setTimeout(() => requestFormSubmit(), 0);
|
||
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
||
|
||
useEffect(() => {
|
||
const streaming = status === "streaming";
|
||
const wasStreaming = wasStreamingRef.current;
|
||
wasStreamingRef.current = streaming;
|
||
if (!wasStreaming || streaming) {
|
||
return;
|
||
}
|
||
|
||
if (disabled || isMock) {
|
||
return;
|
||
}
|
||
|
||
const lastAi = [...thread.messages].reverse().find((m) => m.type === "ai");
|
||
const lastAiId = lastAi?.id ?? null;
|
||
if (!lastAiId || lastAiId === lastGeneratedForAiIdRef.current) {
|
||
return;
|
||
}
|
||
lastGeneratedForAiIdRef.current = lastAiId;
|
||
|
||
const recent = thread.messages
|
||
.filter((m) => m.type === "human" || m.type === "ai")
|
||
.map((m) => {
|
||
const role = m.type === "human" ? "user" : "assistant";
|
||
const content = textOfMessage(m) ?? "";
|
||
return { role, content };
|
||
})
|
||
.filter((m) => m.content.trim().length > 0)
|
||
.slice(-6);
|
||
|
||
if (recent.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const controller = new AbortController();
|
||
setFollowupsHidden(false);
|
||
setFollowupsLoading(true);
|
||
setFollowups([]);
|
||
|
||
fetch(`${getBackendBaseURL()}/api/threads/${threadId}/suggestions`, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
messages: recent,
|
||
n: 3,
|
||
model_name: context.model_name ?? undefined,
|
||
}),
|
||
signal: controller.signal,
|
||
})
|
||
.then(async (res) => {
|
||
if (!res.ok) {
|
||
return { suggestions: [] as string[] };
|
||
}
|
||
return (await res.json()) as { suggestions?: string[] };
|
||
})
|
||
.then((data) => {
|
||
const suggestions = (data.suggestions ?? [])
|
||
.map((s) => (typeof s === "string" ? s.trim() : ""))
|
||
.filter((s) => s.length > 0)
|
||
.slice(0, 5);
|
||
setFollowups(suggestions);
|
||
})
|
||
.catch(() => {
|
||
setFollowups([]);
|
||
})
|
||
.finally(() => {
|
||
setFollowupsLoading(false);
|
||
});
|
||
|
||
return () => controller.abort();
|
||
}, [context.model_name, disabled, isMock, status, thread.messages, threadId]);
|
||
|
||
return (
|
||
<div
|
||
ref={(el) => {
|
||
promptRootRef.current = el;
|
||
containerRef.current = el;
|
||
}}
|
||
className="relative"
|
||
>
|
||
{/* 附件预览区域 - 在输入框上方 */}
|
||
<AttachmentPreviewBar />
|
||
|
||
{extraHeader && (
|
||
<ExtraHeaderContainer hasAttachments={attachments.files.length > 0}>
|
||
{extraHeader}
|
||
</ExtraHeaderContainer>
|
||
)}
|
||
{/* 输入框主容器 */}
|
||
<PromptInput
|
||
className={cn("w-full", className)}
|
||
inputGroupClassName={cn(
|
||
"border-0 backdrop-blur-sm w-[720px] rounded-[20px]",
|
||
"transition-[height] duration-300 ease-out",
|
||
!isNewThread && "shadow-[0_0_20px_2px_rgba(0,0,0,0.10)]",
|
||
effectiveIsFocused ? "h-[200px]" : "h-[80px]",
|
||
)}
|
||
disabled={disabled}
|
||
globalDrop
|
||
multiple
|
||
onSubmit={handleSubmit}
|
||
{...props}
|
||
>
|
||
<PromptInputBody
|
||
className={cn(
|
||
"transition-[opacity,transform] duration-300 ease-out",
|
||
!effectiveIsFocused && "opacity-100",
|
||
)}
|
||
>
|
||
<PromptInputTextarea
|
||
ref={textareaRef}
|
||
className={cn(
|
||
"size-full",
|
||
!effectiveIsFocused && "h-[80px] py-0 leading-20",
|
||
)}
|
||
disabled={disabled}
|
||
placeholder={t.inputBox.placeholder}
|
||
autoFocus={autoFocus}
|
||
defaultValue={initialValue}
|
||
onFocus={() => {
|
||
setIsFocused(true);
|
||
onFocusChange?.(true);
|
||
}}
|
||
/>
|
||
</PromptInputBody>
|
||
{!effectiveIsFocused && (
|
||
<div
|
||
className="absolute inset-0 z-1 cursor-text"
|
||
onClick={() => {
|
||
setIsFocused(true);
|
||
textareaRef.current?.focus();
|
||
}}
|
||
/>
|
||
)}
|
||
<PromptInputFooter
|
||
className={cn(
|
||
"flex transition-all duration-300 ease-out",
|
||
// height和padding都为0来隐藏
|
||
!effectiveIsFocused &&
|
||
"pointer-events-none invisible h-[0px] translate-y-2 p-[0px] opacity-0",
|
||
)}
|
||
>
|
||
{/* ========== 左侧工具栏 ========== */}
|
||
<PromptInputTools>
|
||
{/* 附件上传按钮 */}
|
||
<AddAttachmentsButton />
|
||
{/* [已禁用] 模式选择器触发器 (flash/thinking/pro/ultra) */}
|
||
{/*<PromptInputActionMenu>
|
||
<ModeHoverGuide
|
||
mode={
|
||
context.mode === "flash" ||
|
||
context.mode === "thinking" ||
|
||
context.mode === "pro" ||
|
||
context.mode === "ultra"
|
||
? context.mode
|
||
: "flash"
|
||
}
|
||
>
|
||
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
||
<div>
|
||
{context.mode === "flash" && <ZapIcon className="size-3" />}
|
||
{context.mode === "thinking" && (
|
||
<LightbulbIcon className="size-3" />
|
||
)}
|
||
{context.mode === "pro" && (
|
||
<GraduationCapIcon className="size-3" />
|
||
)}
|
||
{context.mode === "ultra" && (
|
||
<RocketIcon className="size-3 text-[#dabb5e]" />
|
||
)}
|
||
|
||
</div>
|
||
<div
|
||
className={cn(
|
||
"text-xs font-normal",
|
||
context.mode === "ultra" ? "golden-text" : "",
|
||
)}
|
||
>
|
||
{(context.mode === "flash" && t.inputBox.flashMode) ||
|
||
(context.mode === "thinking" && t.inputBox.reasoningMode) ||
|
||
(context.mode === "pro" && t.inputBox.proMode) ||
|
||
(context.mode === "ultra" && t.inputBox.ultraMode)}
|
||
</div>
|
||
</PromptInputActionMenuTrigger>
|
||
</ModeHoverGuide> */}
|
||
{/* Skill 选择按钮 (iframe 与宿主页通信) */}
|
||
<IframeSkillDialogButton
|
||
className="px-2!"
|
||
selectedSkill={iframeSkill.selectedSkill}
|
||
openSkillDialog={iframeSkill.openSkillDialog}
|
||
clearSkill={iframeSkill.clearSkill}
|
||
/>
|
||
{/* [已禁用] 模式选择下拉菜单内容 */}
|
||
{/* <PromptInputActionMenuContent className="w-80">
|
||
<DropdownMenuGroup>
|
||
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
||
{t.inputBox.mode}
|
||
</DropdownMenuLabel>
|
||
<PromptInputActionMenu>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.mode === "flash"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleModeSelect("flash")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
<ZapIcon
|
||
className={cn(
|
||
"mr-2 size-4",
|
||
context.mode === "flash" &&
|
||
"text-accent-foreground",
|
||
)}
|
||
/>
|
||
{t.inputBox.flashMode}
|
||
</div>
|
||
<div className="pl-7 text-xs">
|
||
{t.inputBox.flashModeDescription}
|
||
</div>
|
||
</div>
|
||
{context.mode === "flash" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
{supportThinking && (
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.mode === "thinking"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleModeSelect("thinking")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
<LightbulbIcon
|
||
className={cn(
|
||
"mr-2 size-4",
|
||
context.mode === "thinking" &&
|
||
"text-accent-foreground",
|
||
)}
|
||
/>
|
||
{t.inputBox.reasoningMode}
|
||
</div>
|
||
<div className="pl-7 text-xs">
|
||
{t.inputBox.reasoningModeDescription}
|
||
</div>
|
||
</div>
|
||
{context.mode === "thinking" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
)}
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.mode === "pro"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleModeSelect("pro")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
<GraduationCapIcon
|
||
className={cn(
|
||
"mr-2 size-4",
|
||
context.mode === "pro" && "text-accent-foreground",
|
||
)}
|
||
/>
|
||
{t.inputBox.proMode}
|
||
</div>
|
||
<div className="pl-7 text-xs">
|
||
{t.inputBox.proModeDescription}
|
||
</div>
|
||
</div>
|
||
{context.mode === "pro" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.mode === "ultra"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleModeSelect("ultra")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
<RocketIcon
|
||
className={cn(
|
||
"mr-2 size-4",
|
||
context.mode === "ultra" && "text-[#dabb5e]",
|
||
)}
|
||
/>
|
||
<div
|
||
className={cn(
|
||
context.mode === "ultra" && "golden-text",
|
||
)}
|
||
>
|
||
{t.inputBox.ultraMode}
|
||
</div>
|
||
</div>
|
||
<div className="pl-7 text-xs">
|
||
{t.inputBox.ultraModeDescription}
|
||
</div>
|
||
</div>
|
||
{context.mode === "ultra" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
</PromptInputActionMenu>
|
||
</DropdownMenuGroup>
|
||
</PromptInputActionMenuContent>
|
||
</PromptInputActionMenu>
|
||
{/* [已禁用] 推理强度选择器 (minimal/low/medium/high) */}
|
||
{supportReasoningEffort && context.mode !== "flash" && (
|
||
<PromptInputActionMenu>
|
||
<PromptInputActionMenuTrigger className="gap-1! px-2!">
|
||
<div className="text-xs font-normal">
|
||
{t.inputBox.reasoningEffort}:
|
||
{context.reasoning_effort === "minimal" &&
|
||
" " + t.inputBox.reasoningEffortMinimal}
|
||
{context.reasoning_effort === "low" &&
|
||
" " + t.inputBox.reasoningEffortLow}
|
||
{context.reasoning_effort === "medium" &&
|
||
" " + t.inputBox.reasoningEffortMedium}
|
||
{context.reasoning_effort === "high" &&
|
||
" " + t.inputBox.reasoningEffortHigh}
|
||
</div>
|
||
</PromptInputActionMenuTrigger>
|
||
<PromptInputActionMenuContent className="w-70">
|
||
<DropdownMenuGroup>
|
||
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
||
{t.inputBox.reasoningEffort}
|
||
</DropdownMenuLabel>
|
||
<PromptInputActionMenu>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.reasoning_effort === "minimal"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleReasoningEffortSelect("minimal")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
{t.inputBox.reasoningEffortMinimal}
|
||
</div>
|
||
<div className="pl-2 text-xs">
|
||
{t.inputBox.reasoningEffortMinimalDescription}
|
||
</div>
|
||
</div>
|
||
{context.reasoning_effort === "minimal" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.reasoning_effort === "low"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleReasoningEffortSelect("low")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
{t.inputBox.reasoningEffortLow}
|
||
</div>
|
||
<div className="pl-2 text-xs">
|
||
{t.inputBox.reasoningEffortLowDescription}
|
||
</div>
|
||
</div>
|
||
{context.reasoning_effort === "low" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.reasoning_effort === "medium" ||
|
||
!context.reasoning_effort
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleReasoningEffortSelect("medium")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
{t.inputBox.reasoningEffortMedium}
|
||
</div>
|
||
<div className="pl-2 text-xs">
|
||
{t.inputBox.reasoningEffortMediumDescription}
|
||
</div>
|
||
</div>
|
||
{context.reasoning_effort === "medium" ||
|
||
!context.reasoning_effort ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
<PromptInputActionMenuItem
|
||
className={cn(
|
||
context.reasoning_effort === "high"
|
||
? "text-accent-foreground"
|
||
: "text-muted-foreground/65",
|
||
)}
|
||
onSelect={() => handleReasoningEffortSelect("high")}
|
||
>
|
||
<div className="flex flex-col gap-2">
|
||
<div className="flex items-center gap-1 font-bold">
|
||
{t.inputBox.reasoningEffortHigh}
|
||
</div>
|
||
<div className="pl-2 text-xs">
|
||
{t.inputBox.reasoningEffortHighDescription}
|
||
</div>
|
||
</div>
|
||
{context.reasoning_effort === "high" ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</PromptInputActionMenuItem>
|
||
</PromptInputActionMenu>
|
||
</DropdownMenuGroup>
|
||
</PromptInputActionMenuContent>
|
||
</PromptInputActionMenu>
|
||
)}
|
||
</PromptInputTools>
|
||
{/* ========== 右侧工具栏 ========== */}
|
||
<PromptInputTools>
|
||
{/* [已禁用] 模型选择器 */}
|
||
{/* <ModelSelector
|
||
open={modelDialogOpen}
|
||
onOpenChange={setModelDialogOpen}
|
||
>
|
||
<ModelSelectorTrigger asChild>
|
||
<PromptInputButton>
|
||
<ModelSelectorName className="text-xs font-normal">
|
||
{selectedModel?.display_name}
|
||
</ModelSelectorName>
|
||
</PromptInputButton>
|
||
</ModelSelectorTrigger>
|
||
<ModelSelectorContent>
|
||
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
||
<ModelSelectorList>
|
||
{models.map((m) => (
|
||
<ModelSelectorItem
|
||
key={m.name}
|
||
value={m.name}
|
||
onSelect={() => handleModelSelect(m.name)}
|
||
>
|
||
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
||
{m.name === context.model_name ? (
|
||
<CheckIcon className="ml-auto size-4" />
|
||
) : (
|
||
<div className="ml-auto size-4" />
|
||
)}
|
||
</ModelSelectorItem>
|
||
))}
|
||
</ModelSelectorList>
|
||
</ModelSelectorContent>
|
||
</ModelSelector> */}
|
||
{/* 占位符 */}
|
||
<div className="w-[150px]"></div>
|
||
</PromptInputTools>
|
||
</PromptInputFooter>
|
||
{/* 移动出来 */}
|
||
<PromptInputSubmit
|
||
className="absolute right-3 bottom-5 z-[20] border-0"
|
||
disabled={disabled}
|
||
variant="outline"
|
||
status={status}
|
||
/>
|
||
{/* TODO: 神秘空div */}
|
||
{/* {!isNewThread && (
|
||
<div className="bg-background absolute right-0 -bottom-[17px] left-0 z-0 h-4"></div>
|
||
)} */}
|
||
</PromptInput>
|
||
{/* 小惊喜等 */}
|
||
{isNewThread && searchParams.get("mode") !== "skill" && (
|
||
<SuggestionListContainer
|
||
sendSelectSkill={iframeSkill.sendSelectSkill}
|
||
/>
|
||
)}
|
||
|
||
{!disabled &&
|
||
!isNewThread &&
|
||
!followupsHidden &&
|
||
(followupsLoading || followups.length > 0) && (
|
||
<div className="absolute -top-20 right-0 left-0 z-20 flex items-center justify-center">
|
||
<div className="flex items-center gap-2">
|
||
{followupsLoading ? (
|
||
<div className="text-muted-foreground bg-background/80 rounded-full border px-4 py-2 text-xs backdrop-blur-sm">
|
||
{t.inputBox.followupLoading}
|
||
</div>
|
||
) : (
|
||
<Suggestions className="min-h-16 w-fit items-start">
|
||
{followups.map((s) => (
|
||
<Suggestion
|
||
key={s}
|
||
suggestion={s}
|
||
onClick={() => handleFollowupClick(s)}
|
||
/>
|
||
))}
|
||
<Button
|
||
aria-label={t.common.close}
|
||
className="text-muted-foreground cursor-pointer rounded-full px-3 text-xs font-normal"
|
||
variant="outline"
|
||
size="sm"
|
||
type="button"
|
||
onClick={() => setFollowupsHidden(true)}
|
||
>
|
||
<XIcon className="size-4" />
|
||
</Button>
|
||
</Suggestions>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<Dialog open={confirmOpen} onOpenChange={setConfirmOpen}>
|
||
<DialogContent>
|
||
<DialogHeader>
|
||
<DialogTitle>{t.inputBox.followupConfirmTitle}</DialogTitle>
|
||
<DialogDescription>
|
||
{t.inputBox.followupConfirmDescription}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setConfirmOpen(false)}>
|
||
{t.common.cancel}
|
||
</Button>
|
||
<Button variant="secondary" onClick={confirmAppendAndSend}>
|
||
{t.inputBox.followupConfirmAppend}
|
||
</Button>
|
||
<Button onClick={confirmReplaceAndSend}>
|
||
{t.inputBox.followupConfirmReplace}
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|
||
// SuggestionList 容器
|
||
function SuggestionListContainer({
|
||
sendSelectSkill,
|
||
}: {
|
||
sendSelectSkill: (skill_id: string) => void;
|
||
}) {
|
||
return (
|
||
<div className="absolute right-0 bottom-0 left-0 z-0 flex translate-y-full items-center justify-center pt-4">
|
||
<SuggestionList sendSelectSkill={sendSelectSkill} />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 快速选择skillbutton
|
||
function SuggestionList({
|
||
sendSelectSkill,
|
||
}: {
|
||
sendSelectSkill: (skill_id: string) => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const { textInput } = usePromptInputController();
|
||
|
||
const handleSuggestionClick = useCallback(
|
||
(suggestion: { prompt: string; skill_id?: string }) => {
|
||
// 如果有 skill_id，发送给宿主页
|
||
if (suggestion.skill_id) {
|
||
sendSelectSkill(suggestion.skill_id);
|
||
return;
|
||
}
|
||
// 原有逻辑
|
||
if (!suggestion.prompt) return;
|
||
textInput.setInput(suggestion.prompt);
|
||
setTimeout(() => {
|
||
const textarea = document.querySelector<HTMLTextAreaElement>(
|
||
"textarea[name='message']",
|
||
);
|
||
if (textarea) {
|
||
const selStart = suggestion.prompt.indexOf("[");
|
||
const selEnd = suggestion.prompt.indexOf("]");
|
||
if (selStart !== -1 && selEnd !== -1) {
|
||
textarea.setSelectionRange(selStart, selEnd + 1);
|
||
textarea.focus();
|
||
}
|
||
}
|
||
}, 500);
|
||
},
|
||
[textInput, sendSelectSkill],
|
||
);
|
||
return (
|
||
<Suggestions className="min-h-16 w-fit items-start">
|
||
{/* <ConfettiButton
|
||
className="text-muted-foreground cursor-pointer rounded-full px-[20px] py-[15px] text-xs font-normal"
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => handleSuggestionClick(t.inputBox.surpriseMePrompt)}
|
||
>
|
||
{t.inputBox.surpriseMe}
|
||
</ConfettiButton> */}
|
||
{t.inputBox.suggestions.map((suggestion) => (
|
||
<Suggestion
|
||
key={suggestion.suggestion}
|
||
icon={suggestion.icon}
|
||
suggestion={suggestion.suggestion}
|
||
onClick={() => handleSuggestionClick(suggestion)}
|
||
/>
|
||
))}
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Suggestion icon={PlusIcon} suggestion={t.common.create} />
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="start">
|
||
<DropdownMenuGroup>
|
||
{t.inputBox.suggestionsCreate.map((suggestion, index) =>
|
||
"type" in suggestion && suggestion.type === "separator" ? (
|
||
<DropdownMenuSeparator key={index} />
|
||
) : (
|
||
!("type" in suggestion) && (
|
||
<DropdownMenuItem
|
||
key={suggestion.suggestion}
|
||
onClick={() => handleSuggestionClick(suggestion)}
|
||
>
|
||
{suggestion.icon && <suggestion.icon className="size-4" />}
|
||
{suggestion.suggestion}
|
||
</DropdownMenuItem>
|
||
)
|
||
),
|
||
)}
|
||
</DropdownMenuGroup>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</Suggestions>
|
||
);
|
||
}
|
||
// 上传附件
|
||
function AddAttachmentsButton({ className }: { className?: string }) {
|
||
const { t } = useI18n();
|
||
const attachments = usePromptInputAttachments();
|
||
return (
|
||
<Tooltip content={t.inputBox.addAttachments}>
|
||
<PromptInputButton
|
||
className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
|
||
onClick={() => attachments.openFileDialog()}
|
||
>
|
||
<svg
|
||
width="18"
|
||
height="15"
|
||
viewBox="0 0 18 15"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="transition-[stroke] duration-200 [&>path]:transition-[fill,stroke] [&>path]:duration-200 [&>path:first-child]:group-hover:fill-[#8E47F0] [&>path:last-child]:group-hover:stroke-[#8E47F0]"
|
||
>
|
||
<path
|
||
d="M7.05042 7.65254C6.9754 7.72756 6.90039 7.80257 6.90039 7.95258C6.90039 8.02759 6.9754 8.1776 7.05042 8.25262C7.20043 8.40263 7.42545 8.40263 7.57546 8.25262L8.8506 6.97747V10.7279C8.8506 10.9529 9.00061 11.1029 9.22563 11.1029C9.30065 11.1029 9.45066 11.0279 9.52567 11.0279C9.60067 10.9529 9.67568 10.8779 9.67568 10.7279V6.97747L10.9508 8.25262C11.1008 8.40263 11.3259 8.40263 11.4759 8.25262C11.5509 8.1776 11.6259 8.10259 11.6259 7.95258C11.6259 7.87757 11.5509 7.72756 11.4759 7.65254L9.52567 5.70235C9.37564 5.55234 9.15062 5.55234 9.00061 5.70235L7.05042 7.65254Z"
|
||
fill="#150033"
|
||
/>
|
||
<path
|
||
d="M1.12695 0.5H6.67871C6.87077 0.500077 7.01409 0.574515 7.07324 0.648438L7.09082 0.669922L8.30762 1.88672C8.6222 2.20119 9.01344 2.3681 9.44629 2.36816H16.875C17.2382 2.36842 17.5012 2.63339 17.5 2.99414V13.8848C17.5048 14.2408 17.2454 14.5056 16.8818 14.5059H1.12695C0.764649 14.5057 0.5 14.2401 0.5 13.877V1.12793C0.500049 0.810129 0.702664 0.567404 0.996094 0.511719L1.12695 0.5Z"
|
||
stroke="#150033"
|
||
/>
|
||
</svg>
|
||
</PromptInputButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
// 启动iframeSkillDialog
|
||
function IframeSkillDialogButton({
|
||
className,
|
||
selectedSkill,
|
||
openSkillDialog,
|
||
clearSkill,
|
||
}: {
|
||
className?: string;
|
||
selectedSkill: { skill_id: string; title: string } | null;
|
||
openSkillDialog: () => void;
|
||
clearSkill: () => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
|
||
return (
|
||
<div className="flex items-center gap-2">
|
||
<Tooltip content={t.inputBox.selectSkill}>
|
||
<PromptInputButton
|
||
className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
|
||
onClick={openSkillDialog}
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="size-4 transition-[stroke] duration-200 [&>path]:transition-[stroke] [&>path]:duration-200 [&>path]:group-hover:stroke-[#8E47F0]"
|
||
viewBox="0 0 12 16"
|
||
fill="none"
|
||
>
|
||
<path
|
||
d="M3.7998 0.5H9.19922C9.24033 0.5 9.26852 0.518136 9.28516 0.541992C9.30124 0.565318 9.30411 0.588767 9.29395 0.613281H9.29297L7.43066 5.07422L7.1416 5.76758H11.3994C11.4295 5.76765 11.4474 5.77552 11.459 5.7832C11.4724 5.79207 11.4846 5.80503 11.4922 5.82129C11.4997 5.83745 11.5013 5.85253 11.5 5.86328C11.4989 5.87156 11.4953 5.88556 11.4785 5.9043L2.87891 15.4629V15.4639C2.85396 15.4914 2.83406 15.4971 2.82031 15.499C2.80144 15.5016 2.77553 15.4981 2.74902 15.4844C2.72225 15.4705 2.70837 15.453 2.70312 15.4424C2.70056 15.4372 2.69457 15.4253 2.70312 15.3936V15.3926L4.30273 9.49512L4.47461 8.86426H0.600586C0.559682 8.86424 0.531324 8.84587 0.514648 8.82227C0.498608 8.79944 0.496551 8.777 0.505859 8.75293L3.70508 0.558594C3.71075 0.544183 3.72173 0.529788 3.73828 0.518555C3.74688 0.51277 3.75704 0.508037 3.76758 0.504883L3.7998 0.5Z"
|
||
stroke="#150033"
|
||
/>
|
||
</svg>
|
||
</PromptInputButton>
|
||
</Tooltip>
|
||
{selectedSkill && (
|
||
<Badge
|
||
variant="secondary"
|
||
className="gap-1 bg-[#EAE2F5] px-[15px] py-[4px] text-[#8E47F0]"
|
||
>
|
||
{selectedSkill.title}
|
||
<button
|
||
onClick={clearSkill}
|
||
className="hover:bg-muted-foreground/20 ml-1 rounded-full"
|
||
>
|
||
<XIcon className="size-3" />
|
||
</button>
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 附件预览栏 - 在输入框上方显示
|
||
function AttachmentPreviewBar() {
|
||
const attachments = usePromptInputAttachments();
|
||
|
||
if (!attachments.files.length) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="absolute bottom-full left-0 z-20 mb-3 ml-1 flex justify-start">
|
||
<PromptInputAttachments>
|
||
{(attachment) => <PromptInputAttachment data={attachment} />}
|
||
</PromptInputAttachments>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ExtraHeader 容器 - 有附件时上浮
|
||
function ExtraHeaderContainer({
|
||
hasAttachments,
|
||
children,
|
||
}: {
|
||
hasAttachments: boolean;
|
||
children: React.ReactNode;
|
||
}) {
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"absolute right-0 bottom-full left-0 z-30 flex items-center justify-center pb-4 transition-transform duration-300",
|
||
hasAttachments && "-translate-y-20",
|
||
)}
|
||
>
|
||
{children}
|
||
</div>
|
||
);
|
||
}
|