1602 lines
66 KiB
TypeScript
1602 lines
66 KiB
TypeScript
"use client";
|
|
|
|
import type { ChatStatus } from "ai";
|
|
import {
|
|
BarChart3Icon,
|
|
BrainCircuitIcon,
|
|
BookMarkedIcon,
|
|
CheckIcon,
|
|
ClipboardCheckIcon,
|
|
FileTextIcon,
|
|
FolderTreeIcon,
|
|
GraduationCapIcon,
|
|
LightbulbIcon,
|
|
MessageCircleQuestionIcon,
|
|
PaperclipIcon,
|
|
PlusIcon,
|
|
RefreshCwIcon,
|
|
ShrinkIcon,
|
|
SparklesIcon,
|
|
RocketIcon,
|
|
XIcon,
|
|
ZapIcon,
|
|
} from "lucide-react";
|
|
import { useSearchParams } from "next/navigation";
|
|
import {
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type ComponentProps,
|
|
type ReactNode,
|
|
} 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 {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import {
|
|
DropdownMenuGroup,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { apiFetch } from "@/core/api";
|
|
import { getBackendBaseURL } from "@/core/config";
|
|
import { useI18n } from "@/core/i18n/hooks";
|
|
import { isHiddenFromUIMessage } from "@/core/messages/utils";
|
|
import { useModels } from "@/core/models/hooks";
|
|
import type { Model } from "@/core/models/types";
|
|
import type { AgentThreadContext } from "@/core/threads";
|
|
import { textOfMessage } from "@/core/threads/utils";
|
|
import { desensitize } from "@/lib/desensitize";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { AgentSelector } from "@/components/workspace/agents/agent-selector";
|
|
|
|
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 { useRecommendedQuestions } from "@/core/recommended-questions/hooks";
|
|
import { useUserPreferences } from "@/core/user-preferences";
|
|
import {
|
|
isThreadRagModeLocked,
|
|
lockThreadRagMode,
|
|
useLocalSettings,
|
|
} from "@/core/settings";
|
|
|
|
|
|
import { CustomPromptBar } from "./custom-prompt-menu";
|
|
import { useThread } from "./messages/context";
|
|
import { ModeHoverGuide } from "./mode-hover-guide";
|
|
import { Tooltip } from "./tooltip";
|
|
|
|
type InputMode = "flash" | "thinking" | "pro" | "ultra";
|
|
const COMPACT_QUICK_STARTS = [
|
|
{
|
|
id: "report",
|
|
title: "撰写报告",
|
|
content: "请帮我撰写一份结构清晰的专业报告，先向我确认主题、受众和篇幅要求。",
|
|
icon: FileTextIcon,
|
|
},
|
|
{
|
|
id: "knowledge",
|
|
title: "知识问答",
|
|
content: "请基于已有资料回答我的问题，并明确区分已知事实、推断和需要补充的信息。",
|
|
icon: MessageCircleQuestionIcon,
|
|
},
|
|
{
|
|
id: "planning",
|
|
title: "任务规划",
|
|
content: "请把我的目标拆解为可执行的任务计划，列出优先级、里程碑和风险。",
|
|
icon: ClipboardCheckIcon,
|
|
},
|
|
{
|
|
id: "analysis",
|
|
title: "数据分析",
|
|
content: "请帮我分析数据中的关键趋势、异常和可能原因，并给出下一步验证建议。",
|
|
icon: BarChart3Icon,
|
|
},
|
|
{
|
|
id: "solution",
|
|
title: "方案策划",
|
|
content: "请围绕我的目标设计一套完整方案，包含背景、目标、实施步骤、资源需求和风险预案。",
|
|
icon: LightbulbIcon,
|
|
},
|
|
{
|
|
id: "summary",
|
|
title: "内容总结",
|
|
content: "请提炼我提供内容的核心观点、关键结论和待办事项，并按重要程度整理。",
|
|
icon: BookMarkedIcon,
|
|
},
|
|
{
|
|
id: "research",
|
|
title: "调研提纲",
|
|
content: "请根据我的调研主题生成一份结构完整的调研提纲，覆盖对象、问题、方法和输出形式。",
|
|
icon: GraduationCapIcon,
|
|
},
|
|
{
|
|
id: "polish",
|
|
title: "文案润色",
|
|
content: "请在不改变原意的前提下润色我提供的内容，使表达更清晰、专业、简洁。",
|
|
icon: SparklesIcon,
|
|
},
|
|
] as const;
|
|
|
|
|
|
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,
|
|
onFollowupsVisibilityChange,
|
|
onSubmit,
|
|
onStop,
|
|
promptPrefix,
|
|
agentSelector,
|
|
knowledgeSelector,
|
|
extraModels = [],
|
|
assistantId,
|
|
hideAdminRecommendedQuestions,
|
|
compact,
|
|
...props
|
|
}: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
|
|
assistantId?: string | null;
|
|
status?: ChatStatus;
|
|
/** 紧凑模式（正常 App）新对话落地态：去掉旋转彩边、用 CM 参考图的白卡输入框，
|
|
* 并在推荐问题上方加「试试这些高频业务场景」标题。仅落地态生效，默认 false。 */
|
|
compact?: boolean;
|
|
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";
|
|
writing_mode?: boolean;
|
|
memory_injection_enabled?: boolean;
|
|
};
|
|
extraHeader?: React.ReactNode;
|
|
isNewThread?: boolean;
|
|
/** Suppress the global admin "recommended questions" row. The agent chat page
|
|
* sets this so only the agent's own common questions surface on its home. */
|
|
hideAdminRecommendedQuestions?: 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";
|
|
writing_mode?: boolean;
|
|
memory_injection_enabled?: boolean;
|
|
},
|
|
) => void;
|
|
onFollowupsVisibilityChange?: (visible: boolean) => void;
|
|
onSubmit?: (message: PromptInputMessage) => void;
|
|
onStop?: () => void;
|
|
/**
|
|
* Optional toggle rendered next to the model selector. Used for the
|
|
* admin-configurable prompt-prefix switch on the chat input. Omitting the
|
|
* prop hides the button entirely.
|
|
*/
|
|
promptPrefix?: {
|
|
label: string;
|
|
on: boolean;
|
|
onToggle: () => void;
|
|
};
|
|
/**
|
|
* Optional agent picker shown alongside the model selector. Only the new-chat
|
|
* homepage (``ChatPage``) passes this; ``AgentChatPage`` omits it because the
|
|
* thread is already bound to one agent.
|
|
*/
|
|
agentSelector?: {
|
|
selectedAgentId: string | null;
|
|
onAgentChange: (agentId: string | null) => void;
|
|
};
|
|
/** WeKnora-style knowledge-space picker rendered inside the composer toolbar. */
|
|
knowledgeSelector?: ReactNode;
|
|
/** Page-scoped model choices implemented outside the DeerFlow model API. */
|
|
extraModels?: Model[];
|
|
}) {
|
|
const { t } = useI18n();
|
|
const [localSettings, setLocalSettings] = useLocalSettings();
|
|
const searchParams = useSearchParams();
|
|
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
|
const { models } = useModels();
|
|
const singleRoundRagActive =
|
|
context.execution_profile === "single_round_rag";
|
|
const multiRoundRagActive =
|
|
context.execution_profile === "multi_round_rag";
|
|
const frontendRagActive = singleRoundRagActive || multiRoundRagActive;
|
|
const modelOptions = useMemo(() => {
|
|
return singleRoundRagActive ? extraModels : models;
|
|
}, [extraModels, models, singleRoundRagActive]);
|
|
const { thread, isMock } = useThread();
|
|
const { textInput } = usePromptInputController();
|
|
const promptRootRef = useRef<HTMLDivElement | null>(null);
|
|
|
|
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 [compactPromptOrder, setCompactPromptOrder] = useState(0);
|
|
const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
|
|
null,
|
|
);
|
|
|
|
const { questions: recommendedQuestions } = useRecommendedQuestions();
|
|
const userPreferences = useUserPreferences();
|
|
const showAdminRecommendedQuestions =
|
|
!hideAdminRecommendedQuestions &&
|
|
!userPreferences.hide_admin_prompt_prefix &&
|
|
recommendedQuestions.length > 0;
|
|
const compactQuickStarts = useMemo(() => {
|
|
if (showAdminRecommendedQuestions) {
|
|
return recommendedQuestions.map((configured, index) => {
|
|
const fallback =
|
|
COMPACT_QUICK_STARTS[index % COMPACT_QUICK_STARTS.length]!;
|
|
return {
|
|
...fallback,
|
|
id: configured.id,
|
|
title: desensitize(configured.title) || `提示词 ${index + 1}`,
|
|
content: configured.content || fallback.content,
|
|
};
|
|
});
|
|
}
|
|
return [...COMPACT_QUICK_STARTS];
|
|
}, [recommendedQuestions, showAdminRecommendedQuestions]);
|
|
const orderedCompactQuickStarts = useMemo(() => {
|
|
if (compactQuickStarts.length < 2) return compactQuickStarts;
|
|
const offset = compactPromptOrder % compactQuickStarts.length;
|
|
return [
|
|
...compactQuickStarts.slice(offset),
|
|
...compactQuickStarts.slice(0, offset),
|
|
];
|
|
}, [compactPromptOrder, compactQuickStarts]);
|
|
|
|
useEffect(() => {
|
|
// Multi-round RAG is a frontend execution profile, not a model option.
|
|
// Do not let the normal model fallback clear it on every render.
|
|
if (multiRoundRagActive) {
|
|
return;
|
|
}
|
|
if (modelOptions.length === 0) {
|
|
return;
|
|
}
|
|
const currentModel = modelOptions.find((m) => m.name === context.model_name);
|
|
const fallbackModel = currentModel ?? modelOptions[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 &&
|
|
context.execution_profile === fallbackModel.execution_profile
|
|
) {
|
|
return;
|
|
}
|
|
|
|
onContextChange?.({
|
|
...context,
|
|
model_name: nextModelName,
|
|
mode: nextMode,
|
|
execution_profile: fallbackModel.execution_profile,
|
|
});
|
|
}, [context, modelOptions, multiRoundRagActive, onContextChange]);
|
|
|
|
const selectedModel = useMemo(() => {
|
|
if (modelOptions.length === 0) {
|
|
return undefined;
|
|
}
|
|
return modelOptions.find((m) => m.name === context.model_name) ?? modelOptions[0];
|
|
}, [context.model_name, modelOptions]);
|
|
|
|
const resolvedModelName = selectedModel?.name;
|
|
const selectedSingleRoundRag = singleRoundRagActive;
|
|
|
|
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 = modelOptions.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,
|
|
execution_profile: model.execution_profile,
|
|
});
|
|
setModelDialogOpen(false);
|
|
},
|
|
[onContextChange, context, modelOptions],
|
|
);
|
|
|
|
const handleModeSelect = useCallback(
|
|
(mode: InputMode) => {
|
|
const ordinaryModel =
|
|
models.find((model) => model.name === context.model_name) ?? models[0];
|
|
onContextChange?.({
|
|
...context,
|
|
model_name: ordinaryModel?.name ?? context.model_name,
|
|
mode: getResolvedMode(
|
|
mode,
|
|
ordinaryModel?.supports_thinking ?? supportThinking,
|
|
),
|
|
reasoning_effort:
|
|
mode === "ultra"
|
|
? "high"
|
|
: mode === "pro"
|
|
? "medium"
|
|
: mode === "thinking"
|
|
? "low"
|
|
: "minimal",
|
|
execution_profile: undefined,
|
|
});
|
|
},
|
|
[onContextChange, context, models, supportThinking],
|
|
);
|
|
|
|
const handleSingleRoundRagSelect = useCallback(() => {
|
|
const ragModel =
|
|
extraModels.find((model) => model.name === context.model_name) ??
|
|
extraModels[0];
|
|
if (!ragModel) {
|
|
return;
|
|
}
|
|
|
|
onContextChange?.({
|
|
...context,
|
|
model_name: ragModel.name,
|
|
mode: getResolvedMode(
|
|
context.mode,
|
|
ragModel.supports_thinking ?? false,
|
|
),
|
|
execution_profile: "single_round_rag",
|
|
});
|
|
}, [context, extraModels, onContextChange]);
|
|
|
|
const handleMultiRoundRagSelect = useCallback(() => {
|
|
onContextChange?.({
|
|
...context,
|
|
execution_profile: "multi_round_rag",
|
|
});
|
|
}, [context, onContextChange]);
|
|
|
|
const handleReasoningEffortSelect = useCallback(
|
|
(effort: "minimal" | "low" | "medium" | "high") => {
|
|
onContextChange?.({
|
|
...context,
|
|
reasoning_effort: effort,
|
|
});
|
|
},
|
|
[onContextChange, context],
|
|
);
|
|
|
|
const handleWritingModeToggle = useCallback(() => {
|
|
onContextChange?.({
|
|
...context,
|
|
writing_mode: !context.writing_mode,
|
|
});
|
|
}, [context, onContextChange]);
|
|
|
|
const artifactDirectoryModeEnabled =
|
|
localSettings.display.artifactDirectoryModeEnabled ?? false;
|
|
const handleArtifactDirectoryModeToggle = useCallback(() => {
|
|
setLocalSettings("display", {
|
|
artifactDirectoryModeEnabled: !artifactDirectoryModeEnabled,
|
|
});
|
|
}, [artifactDirectoryModeEnabled, setLocalSettings]);
|
|
|
|
const memoryInjectionEnabled = context.memory_injection_enabled ?? true;
|
|
const handleMemoryInjectionToggle = useCallback(() => {
|
|
onContextChange?.({
|
|
...context,
|
|
memory_injection_enabled: !memoryInjectionEnabled,
|
|
});
|
|
}, [context, memoryInjectionEnabled, onContextChange]);
|
|
|
|
const ragModeLocked = isThreadRagModeLocked(threadId);
|
|
const ragModeEnabled = localSettings.display.ragModeEnabled || ragModeLocked;
|
|
const handleRagModeToggle = useCallback(() => {
|
|
if (ragModeLocked) {
|
|
return;
|
|
}
|
|
setLocalSettings("display", { ragModeEnabled: !ragModeEnabled });
|
|
}, [ragModeEnabled, ragModeLocked, setLocalSettings]);
|
|
|
|
const contextCompressionEnabled =
|
|
localSettings.display.contextCompressionEnabled ?? false;
|
|
const handleContextCompressionToggle = useCallback(() => {
|
|
setLocalSettings("display", {
|
|
contextCompressionEnabled: !contextCompressionEnabled,
|
|
});
|
|
}, [contextCompressionEnabled, setLocalSettings]);
|
|
|
|
const handleSubmit = useCallback(
|
|
async (message: PromptInputMessage) => {
|
|
if (status === "streaming") {
|
|
onStop?.();
|
|
return;
|
|
}
|
|
if (!message.text) {
|
|
return;
|
|
}
|
|
setFollowups([]);
|
|
setFollowupsHidden(false);
|
|
setFollowupsLoading(false);
|
|
if (ragModeEnabled) {
|
|
lockThreadRagMode(threadId);
|
|
}
|
|
|
|
// Guard against submitting before the initial model auto-selection
|
|
// effect has flushed thread settings to storage/state.
|
|
if (resolvedModelName && context.model_name !== resolvedModelName) {
|
|
onContextChange?.({
|
|
...context,
|
|
model_name: resolvedModelName,
|
|
mode: getResolvedMode(
|
|
context.mode,
|
|
selectedModel?.supports_thinking ?? false,
|
|
),
|
|
execution_profile: selectedModel?.execution_profile,
|
|
});
|
|
setTimeout(() => onSubmit?.(message), 0);
|
|
return;
|
|
}
|
|
|
|
onSubmit?.(message);
|
|
},
|
|
[
|
|
context,
|
|
onContextChange,
|
|
onSubmit,
|
|
onStop,
|
|
resolvedModelName,
|
|
ragModeEnabled,
|
|
selectedModel?.supports_thinking,
|
|
selectedModel?.execution_profile,
|
|
status,
|
|
threadId,
|
|
],
|
|
);
|
|
|
|
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]);
|
|
|
|
const showFollowups =
|
|
!disabled &&
|
|
!isNewThread &&
|
|
!selectedSingleRoundRag &&
|
|
!followupsHidden &&
|
|
(followupsLoading || followups.length > 0);
|
|
|
|
const followupsVisibilityChangeRef = useRef(onFollowupsVisibilityChange);
|
|
|
|
useEffect(() => {
|
|
followupsVisibilityChangeRef.current = onFollowupsVisibilityChange;
|
|
}, [onFollowupsVisibilityChange]);
|
|
|
|
useEffect(() => {
|
|
followupsVisibilityChangeRef.current?.(showFollowups);
|
|
}, [showFollowups]);
|
|
|
|
useEffect(() => {
|
|
return () => followupsVisibilityChangeRef.current?.(false);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const streaming = status === "streaming";
|
|
const wasStreaming = wasStreamingRef.current;
|
|
wasStreamingRef.current = streaming;
|
|
if (!wasStreaming || streaming) {
|
|
return;
|
|
}
|
|
|
|
if (disabled || isMock || selectedSingleRoundRag) {
|
|
return;
|
|
}
|
|
|
|
const visibleMessages = thread.messages.filter((m) => !isHiddenFromUIMessage(m));
|
|
const lastAi = [...visibleMessages].reverse().find((m) => m.type === "ai");
|
|
const lastAiId = lastAi?.id ?? null;
|
|
if (!lastAiId || lastAiId === lastGeneratedForAiIdRef.current) {
|
|
return;
|
|
}
|
|
lastGeneratedForAiIdRef.current = lastAiId;
|
|
|
|
const recent = visibleMessages
|
|
.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([]);
|
|
|
|
apiFetch(`${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, selectedSingleRoundRag, status, thread.messages, threadId]);
|
|
|
|
return (
|
|
<div ref={promptRootRef} className={cn("relative flex flex-col", compact ? "gap-[clamp(32px,6vh,58px)]" : "gap-6")}>
|
|
{extraHeader && (
|
|
<div className="flex items-center justify-center">
|
|
{extraHeader}
|
|
</div>
|
|
)}
|
|
|
|
{isNewThread && searchParams.get("mode") !== "skill" && compact && (
|
|
<section className="px-2" aria-labelledby="recommended-prompts-title">
|
|
<div className="mb-3 flex items-center justify-center gap-1.5">
|
|
<h2 id="recommended-prompts-title" className="text-[14px] font-normal text-slate-400 dark:text-slate-500">
|
|
你可以这样问我
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
data-prompt-order-refresh="true"
|
|
title="调整提示词顺序"
|
|
aria-label="调整提示词顺序"
|
|
onClick={() => setCompactPromptOrder((current) => current + 1)}
|
|
className="flex size-7 items-center justify-center rounded-full text-slate-400 transition-colors hover:bg-slate-100 hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/15 dark:hover:bg-slate-800 dark:hover:text-primary"
|
|
>
|
|
<RefreshCwIcon className="size-3.5" strokeWidth={1.8} />
|
|
</button>
|
|
</div>
|
|
<div className="mx-auto flex max-w-[900px] flex-wrap justify-center gap-x-3 gap-y-3">
|
|
{orderedCompactQuickStarts.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
data-quick-prompt={item.id}
|
|
title={item.content}
|
|
className="inline-flex min-h-11 max-w-full items-center justify-center rounded-xl border border-[#e5e7eb] bg-white px-4 py-2 text-center text-[14px] font-normal leading-5 text-slate-700 shadow-[0_2px_6px_rgba(15,23,42,0.025)] transition-[background-color,border-color,box-shadow] hover:border-primary/25 hover:bg-primary/5 hover:text-slate-900 hover:shadow-[0_4px_10px_rgba(15,23,42,0.04)] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/15 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-primary/35 dark:hover:bg-primary/10"
|
|
onClick={() => {
|
|
textInput.setInput(item.content);
|
|
requestAnimationFrame(() =>
|
|
document.querySelector<HTMLTextAreaElement>("textarea[name='message']")?.focus(),
|
|
);
|
|
}}
|
|
>
|
|
<span className="max-w-full whitespace-normal">{item.title}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{isNewThread && searchParams.get("mode") !== "skill" && !compact && showAdminRecommendedQuestions && (
|
|
<div className="flex flex-wrap justify-center gap-2.5 px-4 mb-[10px]">
|
|
{recommendedQuestions.map((q) => (
|
|
<button
|
|
key={q.id}
|
|
type="button"
|
|
className="rounded-full border border-[#e4e4e7] bg-white px-4 py-2 text-sm text-[#18181b] shadow-none transition-colors hover:bg-[#f4f4f5] cursor-pointer dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700"
|
|
onClick={() => {
|
|
textInput.setInput(q.content);
|
|
setFollowupsHidden(true);
|
|
setTimeout(() => requestFormSubmit(), 0);
|
|
}}
|
|
>
|
|
{desensitize(q.title)}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{showFollowups && (
|
|
<div className="flex items-center justify-center pb-2">
|
|
<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>
|
|
)}
|
|
<div className="flex flex-col gap-1.5">
|
|
{isNewThread && (
|
|
<CustomPromptBar
|
|
compact={compact}
|
|
className={cn(compact ? "px-2" : "px-1")}
|
|
currentAgentId={agentSelector?.selectedAgentId ?? assistantId ?? null}
|
|
onInsert={(content) => {
|
|
const current = textInput.value?.trim() ?? "";
|
|
textInput.setInput(current ? `${current}\n${content}` : content);
|
|
setTimeout(() => {
|
|
document
|
|
.querySelector<HTMLTextAreaElement>("textarea[name='message']")
|
|
?.focus();
|
|
}, 0);
|
|
}}
|
|
/>
|
|
)}
|
|
<div className={cn(isNewThread && !compact && "gemini-gradient-border gemini-shadow")}>
|
|
<PromptInput
|
|
className={cn(
|
|
"transition-all duration-300 ease-out",
|
|
// 紧凑落地态（CM 参考图）：表单作为白卡，内部 input-group 透明无边框，
|
|
// 避免双层描边；圆角对齐 2xl。
|
|
compact && isNewThread
|
|
? "*:data-[slot='input-group']:rounded-2xl *:data-[slot='input-group']:border-0 *:data-[slot='input-group']:bg-transparent *:data-[slot='input-group']:shadow-none"
|
|
: "*:data-[slot='input-group']:rounded-3xl",
|
|
// 紧凑落地态（CM 参考图）：白卡 + 细边 + 轻阴影 + 主色聚焦环（无旋转彩边）
|
|
compact && isNewThread
|
|
? "overflow-hidden rounded-[24px] border border-slate-200/90 bg-white shadow-[0_18px_50px_-32px_rgba(15,23,42,0.22),0_8px_24px_-20px_rgba(15,23,42,0.35)] transition-all duration-300 focus-within:border-primary/35 focus-within:ring-4 focus-within:ring-primary/10 dark:border-slate-700 dark:bg-slate-800"
|
|
: // landing 态：透明，让外层 gemini-gradient-border 提供白卡 + 旋转描边
|
|
// 对话态：常规白卡 + 中性边框 + 轻阴影
|
|
isNewThread
|
|
? "rounded-3xl bg-transparent border-0 shadow-none ring-0"
|
|
: "rounded-3xl bg-background border border-border shadow-sm transition-shadow hover:shadow-md focus-within:border-ring/40 focus-within:shadow-md focus-within:ring-1 focus-within:ring-ring/20 dark:bg-slate-800 dark:border-slate-700",
|
|
className,
|
|
)}
|
|
disabled={disabled}
|
|
globalDrop
|
|
multiple
|
|
onSubmit={handleSubmit}
|
|
{...props}
|
|
>
|
|
<PromptInputAttachments>
|
|
{(attachment) => <PromptInputAttachment data={attachment} />}
|
|
</PromptInputAttachments>
|
|
<PromptInputBody
|
|
className={cn(!compact && "absolute top-0 right-0 left-0 z-3")}
|
|
>
|
|
<PromptInputTextarea
|
|
className={cn(
|
|
"size-full px-2 py-1 text-[15px] leading-7 placeholder:text-muted-foreground/60",
|
|
isNewThread && "min-h-[110px]!",
|
|
compact && "min-h-[clamp(150px,18vh,176px)]! px-7 pt-7 pb-2 text-[15px]",
|
|
)}
|
|
disabled={disabled}
|
|
placeholder={t.inputBox.placeholder}
|
|
autoFocus={autoFocus}
|
|
defaultValue={initialValue}
|
|
/>
|
|
</PromptInputBody>
|
|
<PromptInputFooter
|
|
className={cn(
|
|
"flex items-center border-t-0 px-2 pt-1 pb-1.5",
|
|
compact && "gap-2 px-6 pt-2 pb-5",
|
|
)}
|
|
>
|
|
<PromptInputTools
|
|
className={cn("gap-1.5", compact && "flex-1 flex-wrap gap-2")}
|
|
>
|
|
{/* TODO: Add more connectors here
|
|
<PromptInputActionMenu>
|
|
<PromptInputActionMenuTrigger className="px-2!" />
|
|
<PromptInputActionMenuContent>
|
|
<PromptInputActionAddAttachments
|
|
label={t.inputBox.addAttachments}
|
|
/>
|
|
</PromptInputActionMenuContent>
|
|
</PromptInputActionMenu> */}
|
|
{!frontendRagActive && (
|
|
<AddAttachmentsButton
|
|
className={cn(
|
|
"rounded-full border-0 bg-transparent px-2.5! shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
compact &&
|
|
"gap-1.5! rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
)}
|
|
/>
|
|
)}
|
|
{!frontendRagActive && <Tooltip
|
|
content={
|
|
context.writing_mode
|
|
? "写作模式已开启：最终输出会强制保存为 Markdown 文件"
|
|
: "开启写作模式：最终输出保存为 Markdown 文件并进入画布"
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
className={cn(
|
|
"gap-1.5! rounded-full px-3! shadow-none",
|
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
context.writing_mode
|
|
? "border border-amber-300 bg-amber-50 text-amber-700 ring-1 ring-amber-300/35 hover:bg-amber-100 dark:border-amber-300/70 dark:bg-amber-400/20 dark:text-amber-100 dark:ring-amber-300/35 dark:shadow-[0_0_0_1px_rgba(251,191,36,0.18),0_0_18px_rgba(251,191,36,0.18)] dark:hover:bg-amber-400/25"
|
|
: compact
|
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
)}
|
|
onClick={handleWritingModeToggle}
|
|
>
|
|
{context.writing_mode && (
|
|
<CheckIcon className="size-3 text-amber-700 dark:text-amber-100" />
|
|
)}
|
|
<FileTextIcon className="size-3" />
|
|
<span className="text-xs font-normal">写作</span>
|
|
</PromptInputButton>
|
|
</Tooltip>}
|
|
{!frontendRagActive && <Tooltip
|
|
content={
|
|
artifactDirectoryModeEnabled
|
|
? "文件模式已开启：右侧会显示当前对话生成的全部文件目录"
|
|
: "开启文件模式：在右侧目录中浏览当前对话生成的全部文件"
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
type="button"
|
|
aria-pressed={artifactDirectoryModeEnabled}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"gap-1.5! rounded-full px-3! shadow-none",
|
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
artifactDirectoryModeEnabled
|
|
? "border border-sky-300 bg-sky-50 text-sky-700 hover:bg-sky-100 dark:border-sky-600 dark:bg-sky-950/45 dark:text-sky-200"
|
|
: compact
|
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
)}
|
|
onClick={handleArtifactDirectoryModeToggle}
|
|
>
|
|
{artifactDirectoryModeEnabled && (
|
|
<CheckIcon className="size-3 text-sky-700 dark:text-sky-200" />
|
|
)}
|
|
<FolderTreeIcon className="size-3" />
|
|
<span className="text-xs font-normal">文件</span>
|
|
</PromptInputButton>
|
|
</Tooltip>}
|
|
{!frontendRagActive && <Tooltip
|
|
content={
|
|
memoryInjectionEnabled
|
|
? "记忆注入已开启：对话前会注入历史记忆"
|
|
: "记忆注入已关闭：本次对话不注入记忆"
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
className={cn(
|
|
"gap-1.5! rounded-full px-3! shadow-none",
|
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
memoryInjectionEnabled
|
|
? "border border-blue-300 bg-blue-50 text-blue-700 ring-1 ring-blue-300/35 hover:bg-blue-100 dark:border-cyan-300/70 dark:bg-cyan-400/20 dark:text-cyan-50 dark:ring-cyan-300/35 dark:shadow-[0_0_0_1px_rgba(34,211,238,0.18),0_0_18px_rgba(34,211,238,0.18)] dark:hover:bg-cyan-400/25"
|
|
: compact
|
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
)}
|
|
onClick={handleMemoryInjectionToggle}
|
|
>
|
|
{memoryInjectionEnabled && (
|
|
<CheckIcon className="size-3 text-blue-700 dark:text-cyan-50" />
|
|
)}
|
|
<BrainCircuitIcon className="size-3" />
|
|
<span className="text-xs font-normal">记忆</span>
|
|
</PromptInputButton>
|
|
</Tooltip>}
|
|
{!frontendRagActive && <Tooltip
|
|
content={
|
|
ragModeEnabled
|
|
? "参考文献模式已开启：检索类结果会按编号引用展示"
|
|
: "参考文献模式已关闭：点击开启"
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
type="button"
|
|
aria-pressed={ragModeEnabled}
|
|
disabled={ragModeLocked || disabled}
|
|
className={cn(
|
|
"gap-1.5! rounded-full px-3! shadow-none",
|
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
ragModeLocked && "cursor-not-allowed opacity-80",
|
|
ragModeEnabled
|
|
? "border border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200"
|
|
: compact
|
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
)}
|
|
onClick={handleRagModeToggle}
|
|
>
|
|
{ragModeEnabled && (
|
|
<CheckIcon className="size-3 text-emerald-700 dark:text-emerald-200" />
|
|
)}
|
|
<BookMarkedIcon className="size-3" />
|
|
<span className="text-xs font-normal">参考文献</span>
|
|
</PromptInputButton>
|
|
</Tooltip>}
|
|
{!frontendRagActive && <Tooltip
|
|
content={
|
|
contextCompressionEnabled
|
|
? "上下文压缩已开启：超长对话会自动压缩历史以节省 token"
|
|
: "上下文压缩已关闭：点击开启"
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
type="button"
|
|
aria-pressed={contextCompressionEnabled}
|
|
disabled={disabled}
|
|
className={cn(
|
|
"gap-1.5! rounded-full px-3! shadow-none",
|
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
|
contextCompressionEnabled
|
|
? "border border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-950/40 dark:text-violet-200"
|
|
: compact
|
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
)}
|
|
onClick={handleContextCompressionToggle}
|
|
>
|
|
{contextCompressionEnabled && (
|
|
<CheckIcon className="size-3 text-violet-700 dark:text-violet-200" />
|
|
)}
|
|
<ShrinkIcon className="size-3" />
|
|
<span className="text-xs font-normal">上下文压缩</span>
|
|
</PromptInputButton>
|
|
</Tooltip>}
|
|
<PromptInputActionMenu>
|
|
<ModeHoverGuide
|
|
mode={
|
|
context.mode === "flash" ||
|
|
context.mode === "thinking" ||
|
|
context.mode === "pro" ||
|
|
context.mode === "ultra"
|
|
? context.mode
|
|
: "flash"
|
|
}
|
|
tooltipContent={
|
|
singleRoundRagActive
|
|
? "单轮 RAG 问答：基于知识库检索生成答案，并展示参考资料"
|
|
: multiRoundRagActive
|
|
? "多轮 RAG 问答：多次检索并展示检索过程与参考资料"
|
|
: undefined
|
|
}
|
|
>
|
|
<PromptInputActionMenuTrigger
|
|
className={cn(
|
|
"gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
compact && "rounded-lg border px-2.5! py-1! text-[11px] font-medium",
|
|
compact &&
|
|
(frontendRagActive
|
|
? "border-emerald-200 bg-emerald-50/60 text-emerald-700 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-200"
|
|
: context.mode === "thinking"
|
|
? "border-indigo-200 bg-indigo-50/60 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-700 dark:bg-indigo-950/40 dark:text-indigo-200"
|
|
: context.mode === "pro"
|
|
? "border-violet-200 bg-violet-50/60 text-violet-700 hover:bg-violet-100 dark:border-violet-700 dark:bg-violet-950/40 dark:text-violet-200"
|
|
: context.mode === "ultra"
|
|
? "border-amber-200 bg-amber-50/60 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
|
|
: "border-transparent bg-muted/40 hover:bg-muted hover:text-foreground"),
|
|
)}
|
|
>
|
|
<div>
|
|
{frontendRagActive ? (
|
|
<BookMarkedIcon className="size-3" />
|
|
) : 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]" />
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"text-xs font-normal",
|
|
context.mode === "ultra" ? "golden-text" : "",
|
|
)}
|
|
>
|
|
{frontendRagActive
|
|
? multiRoundRagActive
|
|
? "多轮 RAG"
|
|
: "单轮 RAG"
|
|
: (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>
|
|
<PromptInputActionMenuContent className="w-80">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
|
{t.inputBox.mode}
|
|
</DropdownMenuLabel>
|
|
<PromptInputActionMenu>
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
!frontendRagActive && 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",
|
|
!frontendRagActive && context.mode === "flash" &&
|
|
"text-accent-foreground",
|
|
)}
|
|
/>
|
|
{t.inputBox.flashMode}
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
{t.inputBox.flashModeDescription}
|
|
</div>
|
|
</div>
|
|
{!frontendRagActive && context.mode === "flash" ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
{supportThinking && (
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
!frontendRagActive && 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",
|
|
!frontendRagActive && context.mode === "thinking" &&
|
|
"text-accent-foreground",
|
|
)}
|
|
/>
|
|
{t.inputBox.reasoningMode}
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
{t.inputBox.reasoningModeDescription}
|
|
</div>
|
|
</div>
|
|
{!frontendRagActive && context.mode === "thinking" ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
)}
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
!frontendRagActive && 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",
|
|
!frontendRagActive && context.mode === "pro" &&
|
|
"text-accent-foreground",
|
|
)}
|
|
/>
|
|
{t.inputBox.proMode}
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
{t.inputBox.proModeDescription}
|
|
</div>
|
|
</div>
|
|
{!frontendRagActive && context.mode === "pro" ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
!frontendRagActive && 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",
|
|
!frontendRagActive &&
|
|
context.mode === "ultra" &&
|
|
"text-[#dabb5e]",
|
|
)}
|
|
/>
|
|
<div
|
|
className={cn(
|
|
!frontendRagActive &&
|
|
context.mode === "ultra" &&
|
|
"golden-text",
|
|
)}
|
|
>
|
|
{t.inputBox.ultraMode}
|
|
</div>
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
{t.inputBox.ultraModeDescription}
|
|
</div>
|
|
</div>
|
|
{!frontendRagActive && context.mode === "ultra" ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
{extraModels.length > 0 && (
|
|
<>
|
|
<DropdownMenuSeparator className="my-2" />
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
selectedSingleRoundRag
|
|
? "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 focus:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-200 dark:hover:bg-emerald-950/60 dark:focus:bg-emerald-950/60"
|
|
: "text-muted-foreground/65",
|
|
)}
|
|
onSelect={handleSingleRoundRagSelect}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-1 font-bold">
|
|
<BookMarkedIcon
|
|
className={cn(
|
|
"mr-2 size-4",
|
|
selectedSingleRoundRag && "text-emerald-700 dark:text-emerald-200",
|
|
)}
|
|
/>
|
|
单轮 RAG 问答
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
基于知识库检索生成答案，并展示思考内容与参考资料
|
|
</div>
|
|
</div>
|
|
{selectedSingleRoundRag ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
</>
|
|
)}
|
|
<PromptInputActionMenuItem
|
|
className={cn(
|
|
multiRoundRagActive
|
|
? "bg-emerald-50 text-emerald-800 hover:bg-emerald-100 focus:bg-emerald-100 dark:bg-emerald-950/40 dark:text-emerald-200 dark:hover:bg-emerald-950/60 dark:focus:bg-emerald-950/60"
|
|
: "text-muted-foreground/65",
|
|
)}
|
|
onSelect={handleMultiRoundRagSelect}
|
|
>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-1 font-bold">
|
|
<BookMarkedIcon
|
|
className={cn(
|
|
"mr-2 size-4",
|
|
multiRoundRagActive && "text-emerald-700 dark:text-emerald-200",
|
|
)}
|
|
/>
|
|
多轮 RAG 问答
|
|
</div>
|
|
<div className="pl-7 text-xs">
|
|
多次检索、展示过程与参考资料，适合复杂问题
|
|
</div>
|
|
</div>
|
|
{multiRoundRagActive ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</PromptInputActionMenuItem>
|
|
</PromptInputActionMenu>
|
|
</DropdownMenuGroup>
|
|
</PromptInputActionMenuContent>
|
|
</PromptInputActionMenu>
|
|
{!frontendRagActive && supportReasoningEffort && context.mode !== "flash" && (
|
|
<PromptInputActionMenu>
|
|
<PromptInputActionMenuTrigger className={cn("gap-1.5! rounded-full border-0 bg-transparent px-3! text-muted-foreground shadow-none hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100", compact && "rounded-lg border border-border px-2.5! py-1! text-[13px]")}>
|
|
<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 className={cn("gap-1.5", compact && "gap-2")}>
|
|
{!frontendRagActive && agentSelector && (
|
|
<AgentSelector
|
|
selectedAgentId={agentSelector.selectedAgentId}
|
|
onAgentChange={agentSelector.onAgentChange}
|
|
disabled={disabled}
|
|
compact={compact}
|
|
/>
|
|
)}
|
|
{!frontendRagActive && knowledgeSelector}
|
|
{!frontendRagActive && promptPrefix && (
|
|
<Tooltip
|
|
content={
|
|
promptPrefix.on
|
|
? `已开启：${promptPrefix.label}`
|
|
: `点击开启：${promptPrefix.label}`
|
|
}
|
|
>
|
|
<PromptInputButton
|
|
type="button"
|
|
onClick={promptPrefix.onToggle}
|
|
aria-pressed={promptPrefix.on}
|
|
className={cn(
|
|
"rounded-full px-3 shadow-none transition-colors",
|
|
promptPrefix.on
|
|
? "border border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
|
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground",
|
|
)}
|
|
>
|
|
<span className="max-w-[160px] truncate text-xs font-normal">
|
|
{promptPrefix.label}
|
|
</span>
|
|
{promptPrefix.on && (
|
|
<CheckIcon className="ml-1 size-3.5 text-amber-700 dark:text-amber-200" />
|
|
)}
|
|
</PromptInputButton>
|
|
</Tooltip>
|
|
)}
|
|
{!multiRoundRagActive && <ModelSelector
|
|
open={modelDialogOpen}
|
|
onOpenChange={setModelDialogOpen}
|
|
>
|
|
<ModelSelectorTrigger asChild>
|
|
<PromptInputButton
|
|
className={cn(
|
|
"rounded-full border-0 bg-transparent px-3 shadow-none text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
|
compact &&
|
|
"rounded-lg border border-transparent bg-gray-50/60 px-2.5! py-1! font-mono text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
|
|
)}
|
|
>
|
|
<div className="flex min-w-0 flex-col items-start text-left">
|
|
<ModelSelectorName
|
|
className={cn(
|
|
"text-xs font-normal",
|
|
compact && "text-[11px]",
|
|
)}
|
|
>
|
|
{selectedModel?.display_name}
|
|
</ModelSelectorName>
|
|
</div>
|
|
</PromptInputButton>
|
|
</ModelSelectorTrigger>
|
|
<ModelSelectorContent>
|
|
<ModelSelectorInput placeholder={t.inputBox.searchModels} />
|
|
<ModelSelectorList>
|
|
{modelOptions.map((m) => (
|
|
<ModelSelectorItem
|
|
key={m.name}
|
|
value={m.name}
|
|
onSelect={() => handleModelSelect(m.name)}
|
|
>
|
|
<div className="flex min-w-0 flex-1 flex-col">
|
|
<ModelSelectorName>{m.display_name}</ModelSelectorName>
|
|
<span className="text-muted-foreground truncate text-[10px]">
|
|
{selectedSingleRoundRag
|
|
? `单轮知识库问答 · ${m.name}`
|
|
: m.model}
|
|
</span>
|
|
</div>
|
|
{m.name === context.model_name ? (
|
|
<CheckIcon className="ml-auto size-4" />
|
|
) : (
|
|
<div className="ml-auto size-4" />
|
|
)}
|
|
</ModelSelectorItem>
|
|
))}
|
|
</ModelSelectorList>
|
|
</ModelSelectorContent>
|
|
</ModelSelector>}
|
|
<PromptInputSubmit
|
|
className={cn(
|
|
"rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
|
|
compact &&
|
|
"size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--button-foreground,var(--primary-foreground))] hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--button-foreground,var(--primary-foreground))] dark:hover:opacity-90 dark:disabled:bg-muted",
|
|
)}
|
|
disabled={disabled}
|
|
variant="outline"
|
|
status={status}
|
|
/>
|
|
</PromptInputTools>
|
|
</PromptInputFooter>
|
|
{!isNewThread && (
|
|
<div className="absolute right-0 -bottom-[17px] left-0 z-0 h-4 bg-background"></div>
|
|
)}
|
|
</PromptInput>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
function SuggestionList() {
|
|
const { t } = useI18n();
|
|
const { textInput } = usePromptInputController();
|
|
const handleSuggestionClick = useCallback(
|
|
(prompt: string | undefined) => {
|
|
if (!prompt) return;
|
|
textInput.setInput(prompt);
|
|
setTimeout(() => {
|
|
const textarea = document.querySelector<HTMLTextAreaElement>(
|
|
"textarea[name='message']",
|
|
);
|
|
if (textarea) {
|
|
const selStart = prompt.indexOf("[");
|
|
const selEnd = prompt.indexOf("]");
|
|
if (selStart !== -1 && selEnd !== -1) {
|
|
textarea.setSelectionRange(selStart, selEnd + 1);
|
|
textarea.focus();
|
|
}
|
|
}
|
|
}, 500);
|
|
},
|
|
[textInput],
|
|
);
|
|
return (
|
|
<Suggestions className="min-h-16 w-fit items-start">
|
|
<ConfettiButton
|
|
className="text-muted-foreground cursor-pointer rounded-full px-4 text-xs font-normal"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => handleSuggestionClick(t.inputBox.surpriseMePrompt)}
|
|
>
|
|
<SparklesIcon className="size-4" /> {t.inputBox.surpriseMe}
|
|
</ConfettiButton>
|
|
{t.inputBox.suggestions.map((suggestion) => (
|
|
<Suggestion
|
|
key={suggestion.suggestion}
|
|
icon={suggestion.icon}
|
|
suggestion={suggestion.suggestion}
|
|
onClick={() => handleSuggestionClick(suggestion.prompt)}
|
|
/>
|
|
))}
|
|
<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.prompt)}
|
|
>
|
|
{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("px-2!", className)}
|
|
onClick={() => attachments.openFileDialog()}
|
|
>
|
|
<PaperclipIcon className="size-3" />
|
|
</PromptInputButton>
|
|
</Tooltip>
|
|
);
|
|
}
|