1170 lines
38 KiB
TypeScript
1170 lines
38 KiB
TypeScript
"use client";
|
||
|
||
import { useRouter } from "next/navigation";
|
||
|
||
import type { ChatStatus } from "ai";
|
||
import {
|
||
CheckIcon,
|
||
GraduationCapIcon,
|
||
LightbulbIcon,
|
||
Loader2Icon,
|
||
PaperclipIcon,
|
||
PlusIcon,
|
||
SparklesIcon,
|
||
RocketIcon,
|
||
XIcon,
|
||
ZapIcon,
|
||
} from "lucide-react";
|
||
import { useSearchParams } from "next/navigation";
|
||
import {
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type ChangeEvent,
|
||
type KeyboardEvent,
|
||
type ComponentProps,
|
||
} from "react";
|
||
|
||
import {
|
||
PromptInput,
|
||
PromptInputActionMenu,
|
||
PromptInputActionMenuContent,
|
||
PromptInputActionMenuItem,
|
||
PromptInputActionMenuTrigger,
|
||
PromptInputAttachment,
|
||
PromptInputAttachments,
|
||
PromptInputBody,
|
||
PromptInputButton,
|
||
PromptInputFooter,
|
||
PromptInputSubmit,
|
||
PromptInputTextarea,
|
||
PromptInputTools,
|
||
usePromptInputAttachments,
|
||
usePromptInputController,
|
||
type PromptInputMessage,
|
||
type PromptInputReference,
|
||
} 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 {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuGroup,
|
||
DropdownMenuItem,
|
||
DropdownMenuLabel,
|
||
DropdownMenuSeparator,
|
||
DropdownMenuTrigger,
|
||
} from "@/components/ui/dropdown-menu";
|
||
import { Tag } from "@/components/ui/tag";
|
||
import { useI18n } from "@/core/i18n/hooks";
|
||
import type { SelectedSkillPayloadItem } from "@/core/i18n/locales/types";
|
||
import { POST_MESSAGE_TYPES, sendToParent } from "@/core/iframe-messages";
|
||
import { useModels } from "@/core/models/hooks";
|
||
import type { AgentThreadContext } from "@/core/threads";
|
||
import { useUploadedFiles } from "@/core/uploads/hooks";
|
||
import { useIframeSkill } from "@/hooks/use-iframe-skill";
|
||
import { cn } from "@/lib/utils";
|
||
import { toast } from "sonner";
|
||
import { urlOfArtifact } from "@/core/artifacts/utils";
|
||
|
||
import {
|
||
ModelSelector,
|
||
ModelSelectorContent,
|
||
ModelSelectorInput,
|
||
ModelSelectorItem,
|
||
ModelSelectorList,
|
||
ModelSelectorName,
|
||
ModelSelectorTrigger,
|
||
} from "../ai-elements/model-selector";
|
||
import { Suggestion, Suggestions } from "../ai-elements/suggestion";
|
||
|
||
import { ModeHoverGuide } from "./mode-hover-guide";
|
||
import { Tooltip } from "./tooltip";
|
||
import { useThread } from "./messages/context";
|
||
import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||
|
||
const MAX_REFERENCES_PER_MESSAGE = 10;
|
||
|
||
const REFERENCE_SOURCE_LABELS = {
|
||
artifact: "生成文件",
|
||
upload: "上传附件",
|
||
} as const;
|
||
|
||
type MentionCandidate = {
|
||
key: string;
|
||
filename: string;
|
||
path?: string;
|
||
pathTail: string;
|
||
ref_source: "artifact" | "upload";
|
||
ref_kind: "mention";
|
||
typeLabel: string;
|
||
};
|
||
|
||
function getPathTail(path: string | undefined): string {
|
||
if (!path) return "";
|
||
const segments = path.split("/").filter(Boolean);
|
||
return segments.slice(-2).join("/");
|
||
}
|
||
|
||
function findMentionToken(text: string, caret: number) {
|
||
const uptoCaret = text.slice(0, caret);
|
||
const atIndex = uptoCaret.lastIndexOf("@");
|
||
if (atIndex < 0) {
|
||
return null;
|
||
}
|
||
const query = uptoCaret.slice(atIndex + 1);
|
||
if (/\s/.test(query)) {
|
||
return null;
|
||
}
|
||
return { query, start: atIndex, end: caret };
|
||
}
|
||
|
||
export function InputBox({
|
||
className,
|
||
threadId: threadIdFromProps,
|
||
disabled,
|
||
autoFocus,
|
||
status,
|
||
context,
|
||
extraHeader,
|
||
showWelcomeStyle,
|
||
hasSubmitted,
|
||
initialValue,
|
||
onContextChange,
|
||
onSubmit,
|
||
onStop,
|
||
...props
|
||
}: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
|
||
assistantId?: string | null;
|
||
threadId: string;
|
||
status?: ChatStatus;
|
||
disabled?: boolean;
|
||
context: Omit<
|
||
AgentThreadContext,
|
||
"thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
|
||
> & {
|
||
mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
|
||
};
|
||
extraHeader?: React.ReactNode;
|
||
showWelcomeStyle: boolean;
|
||
hasSubmitted?: boolean;
|
||
initialValue?: string;
|
||
onContextChange?: (
|
||
context: Omit<
|
||
AgentThreadContext,
|
||
"thread_id" | "is_plan_mode" | "thinking_enabled" | "subagent_enabled"
|
||
> & {
|
||
mode: "flash" | "thinking" | "pro" | "ultra" | undefined;
|
||
},
|
||
) => void;
|
||
onSubmit?: (message: PromptInputMessage) => void;
|
||
onStop?: () => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const { thread } = useThread();
|
||
const searchParams = useSearchParams();
|
||
const iframeSkill = useIframeSkill({ threadId: threadIdFromProps });
|
||
const isInputDisabled = (disabled ?? false) || iframeSkill.isBootstrapping;
|
||
const router = useRouter();
|
||
const threadId = threadIdFromProps;
|
||
const { textInput } = usePromptInputController();
|
||
const attachments = usePromptInputAttachments();
|
||
const promptRootRef = useRef<HTMLDivElement | null>(null);
|
||
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||
const mentionTriggerRef = useRef<HTMLButtonElement | null>(null);
|
||
const [followups, setFollowups] = useState<string[]>([]);
|
||
const [followupsHidden, setFollowupsHidden] = useState(false);
|
||
const [followupsLoading, setFollowupsLoading] = useState(false);
|
||
const [confirmOpen, setConfirmOpen] = useState(false);
|
||
const [pendingSuggestion, setPendingSuggestion] = useState<string | null>(
|
||
null,
|
||
);
|
||
const [isFocused, setIsFocused] = useState(false);
|
||
const [references, setReferences] = useState<PromptInputReference[]>([]);
|
||
const [mentionQuery, setMentionQuery] = useState("");
|
||
const [mentionOpen, setMentionOpen] = useState(false);
|
||
const [activeMentionIndex, setActiveMentionIndex] = useState(0);
|
||
const [mentionRange, setMentionRange] = useState<{
|
||
start: number;
|
||
end: number;
|
||
} | null>(null);
|
||
const { data: uploadedFilesData } = useUploadedFiles(threadIdFromProps);
|
||
|
||
// isNewThread 时禁用收缩，始终保持展开（除非已提交消息）
|
||
const effectiveIsFocused =
|
||
((showWelcomeStyle ?? false) && !hasSubmitted) || isFocused;
|
||
|
||
// 点击外部区域时收起输入框
|
||
useEffect(() => {
|
||
if (!isFocused) return;
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
if (
|
||
containerRef.current &&
|
||
!containerRef.current.contains(event.target as Node)
|
||
) {
|
||
setIsFocused(false);
|
||
}
|
||
};
|
||
document.addEventListener("mousedown", handleClickOutside);
|
||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||
}, [isFocused]);
|
||
|
||
const [modelDialogOpen, setModelDialogOpen] = useState(false);
|
||
const { models } = useModels();
|
||
const selectedModel = useMemo(() => {
|
||
if (!context.model_name && models.length > 0) {
|
||
const model = models[0]!;
|
||
setTimeout(() => {
|
||
onContextChange?.({
|
||
...context,
|
||
model_name: model.name,
|
||
mode: model.supports_thinking ? "pro" : "flash",
|
||
});
|
||
}, 0);
|
||
return model;
|
||
}
|
||
return models.find((m) => m.name === context.model_name);
|
||
}, [context, models, onContextChange]);
|
||
const supportThinking = useMemo(
|
||
() => selectedModel?.supports_thinking ?? false,
|
||
[selectedModel],
|
||
);
|
||
|
||
const mentionCandidates = useMemo<MentionCandidate[]>(() => {
|
||
const artifactCandidates = (thread.values.artifacts ?? []).map((path) => {
|
||
const filename = path.split("/").pop() ?? path;
|
||
return {
|
||
key: `artifact:${path}`,
|
||
filename,
|
||
path,
|
||
pathTail: getPathTail(path),
|
||
ref_source: "artifact" as const,
|
||
ref_kind: "mention" as const,
|
||
typeLabel: REFERENCE_SOURCE_LABELS.artifact,
|
||
};
|
||
});
|
||
|
||
const uploadCandidates =
|
||
uploadedFilesData?.files.map((file) => ({
|
||
key: `upload:${file.virtual_path || file.filename}`,
|
||
filename: file.filename,
|
||
path: file.virtual_path,
|
||
pathTail: getPathTail(file.virtual_path),
|
||
ref_source: "upload" as const,
|
||
ref_kind: "mention" as const,
|
||
typeLabel: REFERENCE_SOURCE_LABELS.upload,
|
||
})) ?? [];
|
||
|
||
const deduped = new Map<string, MentionCandidate>();
|
||
[...artifactCandidates, ...uploadCandidates].forEach((candidate) => {
|
||
deduped.set(candidate.key, candidate);
|
||
});
|
||
return [...deduped.values()];
|
||
}, [thread.values.artifacts, uploadedFilesData?.files]);
|
||
|
||
const filteredMentionCandidates = useMemo(() => {
|
||
const query = mentionQuery.trim().toLowerCase();
|
||
if (!query) {
|
||
return mentionCandidates;
|
||
}
|
||
return mentionCandidates.filter((candidate) =>
|
||
`${candidate.filename} ${candidate.typeLabel} ${candidate.pathTail}`
|
||
.toLowerCase()
|
||
.includes(query),
|
||
);
|
||
}, [mentionCandidates, mentionQuery]);
|
||
const handleModelSelect = useCallback(
|
||
(model_name: string) => {
|
||
onContextChange?.({
|
||
...context,
|
||
model_name,
|
||
});
|
||
setModelDialogOpen(false);
|
||
},
|
||
[onContextChange, context],
|
||
);
|
||
const handleModeSelect = useCallback(
|
||
(mode: "flash" | "thinking" | "pro" | "ultra") => {
|
||
onContextChange?.({
|
||
...context,
|
||
mode,
|
||
});
|
||
},
|
||
[onContextChange, context],
|
||
);
|
||
const handleSubmit = useCallback(
|
||
async (message: PromptInputMessage) => {
|
||
if (status === "streaming") {
|
||
onStop?.();
|
||
return;
|
||
}
|
||
if (!message.text && references.length === 0) {
|
||
return;
|
||
}
|
||
setIsFocused(false);
|
||
if (showWelcomeStyle) {
|
||
sendToParent({
|
||
type: POST_MESSAGE_TYPES.IS_CHATTING,
|
||
isChatting: true,
|
||
});
|
||
}
|
||
onSubmit?.({
|
||
...message,
|
||
references,
|
||
});
|
||
setReferences([]);
|
||
},
|
||
[showWelcomeStyle, onSubmit, onStop, references, status],
|
||
);
|
||
|
||
const requestFormSubmit = useCallback(() => {
|
||
const form = promptRootRef.current?.querySelector("form");
|
||
form?.requestSubmit();
|
||
}, []);
|
||
|
||
const selectMentionCandidate = useCallback(
|
||
(candidate: MentionCandidate) => {
|
||
setReferences((prev) => {
|
||
const exists = prev.some(
|
||
(item) =>
|
||
item.ref_source === candidate.ref_source &&
|
||
item.path === candidate.path &&
|
||
item.filename === candidate.filename,
|
||
);
|
||
if (exists) {
|
||
return prev;
|
||
}
|
||
if (prev.length >= MAX_REFERENCES_PER_MESSAGE) {
|
||
toast.error("单条消息最多引用 10 个文件");
|
||
return prev;
|
||
}
|
||
return prev.concat({
|
||
filename: candidate.filename,
|
||
path: candidate.path,
|
||
ref_kind: "mention",
|
||
ref_source: candidate.ref_source,
|
||
});
|
||
});
|
||
|
||
const current = textInput.value ?? "";
|
||
const range = mentionRange ?? findMentionToken(current, current.length);
|
||
if (range) {
|
||
const before = current.slice(0, range.start);
|
||
const after = current.slice(range.end);
|
||
const nextInput = `${before}${after}`;
|
||
textInput.setInput(nextInput);
|
||
requestAnimationFrame(() => {
|
||
textareaRef.current?.focus();
|
||
textareaRef.current?.setSelectionRange(before.length, before.length);
|
||
});
|
||
}
|
||
setMentionQuery("");
|
||
setMentionOpen(false);
|
||
setActiveMentionIndex(0);
|
||
setMentionRange(null);
|
||
setIsFocused(true);
|
||
},
|
||
[mentionRange, textInput],
|
||
);
|
||
|
||
const handleTextareaChange = useCallback(
|
||
(event: ChangeEvent<HTMLTextAreaElement>) => {
|
||
const value = event.currentTarget.value;
|
||
const caret = event.currentTarget.selectionStart ?? value.length;
|
||
const token = findMentionToken(value, caret);
|
||
if (!token) {
|
||
setMentionOpen(false);
|
||
setMentionQuery("");
|
||
setActiveMentionIndex(0);
|
||
setMentionRange(null);
|
||
return;
|
||
}
|
||
setMentionQuery(token.query);
|
||
setMentionRange({ start: token.start, end: token.end });
|
||
setMentionOpen(true);
|
||
setActiveMentionIndex(0);
|
||
},
|
||
[],
|
||
);
|
||
|
||
const handleTextareaKeyDown = useCallback(
|
||
(event: KeyboardEvent<HTMLTextAreaElement>) => {
|
||
if (event.nativeEvent.isComposing) {
|
||
return;
|
||
}
|
||
if (
|
||
event.key === "Backspace" &&
|
||
event.currentTarget.value === "" &&
|
||
references.length > 0
|
||
) {
|
||
event.preventDefault();
|
||
setReferences((prev) => prev.slice(0, -1));
|
||
return;
|
||
}
|
||
if (!mentionOpen || filteredMentionCandidates.length === 0) {
|
||
return;
|
||
}
|
||
if (event.key === "ArrowDown") {
|
||
event.preventDefault();
|
||
setActiveMentionIndex((prev) =>
|
||
(prev + 1) % filteredMentionCandidates.length,
|
||
);
|
||
} else if (event.key === "ArrowUp") {
|
||
event.preventDefault();
|
||
setActiveMentionIndex((prev) =>
|
||
(prev - 1 + filteredMentionCandidates.length) %
|
||
filteredMentionCandidates.length,
|
||
);
|
||
} else if (event.key === "Enter") {
|
||
event.preventDefault();
|
||
const selected = filteredMentionCandidates[activeMentionIndex];
|
||
if (selected) {
|
||
selectMentionCandidate(selected);
|
||
}
|
||
} else if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
setMentionOpen(false);
|
||
setMentionRange(null);
|
||
}
|
||
},
|
||
[
|
||
activeMentionIndex,
|
||
filteredMentionCandidates,
|
||
mentionOpen,
|
||
references.length,
|
||
selectMentionCandidate,
|
||
],
|
||
);
|
||
|
||
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) return;
|
||
textInput?.setInput(pendingSuggestion);
|
||
setFollowupsHidden(true);
|
||
setConfirmOpen(false);
|
||
setTimeout(() => requestFormSubmit(), 0);
|
||
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
||
|
||
const confirmAppendAndSend = useCallback(() => {
|
||
if (!pendingSuggestion) return;
|
||
const current = (textInput?.value ?? "").trim();
|
||
textInput?.setInput(
|
||
current ? `${current}\n${pendingSuggestion}` : pendingSuggestion,
|
||
);
|
||
setFollowupsHidden(true);
|
||
setConfirmOpen(false);
|
||
setTimeout(() => requestFormSubmit(), 0);
|
||
}, [pendingSuggestion, requestFormSubmit, textInput]);
|
||
|
||
useEffect(() => {
|
||
if (mentionOpen) {
|
||
mentionTriggerRef.current?.focus();
|
||
}
|
||
}, [mentionOpen]);
|
||
|
||
useEffect(() => {
|
||
/*
|
||
// 暂时禁用 suggestions 接口（/api/threads/{thread_id}/suggestions）
|
||
if (!threadId || isNewThread || disabled) return;
|
||
const controller = new AbortController();
|
||
setFollowupsHidden(false);
|
||
setFollowupsLoading(true);
|
||
setFollowups([]);
|
||
|
||
fetch(`/api/threads/${String(threadId)}/suggestions`, {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ messages: [], n: 3 }),
|
||
signal: controller.signal,
|
||
})
|
||
.then(async (res) => {
|
||
if (!res.ok) return { suggestions: [] };
|
||
return await res.json();
|
||
})
|
||
.then((data) => {
|
||
const suggestions = (data.suggestions ?? [])
|
||
.filter(Boolean)
|
||
.slice(0, 5);
|
||
setFollowups(suggestions);
|
||
})
|
||
.catch(() => setFollowups([]))
|
||
.finally(() => setFollowupsLoading(false));
|
||
|
||
return () => controller.abort();
|
||
*/
|
||
}, [disabled, showWelcomeStyle, threadId]);
|
||
|
||
return (
|
||
<div
|
||
ref={(el) => {
|
||
promptRootRef.current = el;
|
||
containerRef.current = el;
|
||
}}
|
||
className="relative w-full"
|
||
>
|
||
<AttachmentPreviewBar
|
||
references={references}
|
||
threadId={threadId}
|
||
onRemoveReference={(reference) =>
|
||
setReferences((prev) =>
|
||
prev.filter(
|
||
(item) =>
|
||
!(
|
||
item.ref_source === reference.ref_source &&
|
||
item.path === reference.path &&
|
||
item.filename === reference.filename
|
||
),
|
||
),
|
||
)
|
||
}
|
||
/>
|
||
|
||
{extraHeader && (
|
||
<ExtraHeaderContainer
|
||
hasAttachments={attachments.files.length > 0 || references.length > 0}
|
||
>
|
||
{extraHeader}
|
||
</ExtraHeaderContainer>
|
||
)}
|
||
|
||
<PromptInput
|
||
className={cn(
|
||
"bg-background w-full rounded-2xl transition-all duration-300 ease-out *:data-[slot='input-group']:rounded-2xl",
|
||
className,
|
||
)}
|
||
inputGroupClassName={cn(
|
||
"border-0 rounded-[20px] backdrop-blur-sm",
|
||
"transition-[height] duration-300 ease-out shadow-none ",
|
||
!showWelcomeStyle && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]",
|
||
hasSubmitted && "shadow-[0_0_20px_0_rgba(0,0,0,0.10)]!",
|
||
effectiveIsFocused ? "h-[200px]" : "h-[80px]",
|
||
)}
|
||
disabled={isInputDisabled}
|
||
globalDrop
|
||
multiple
|
||
onSubmit={handleSubmit}
|
||
{...props}
|
||
>
|
||
<PromptInputBody
|
||
className={cn(
|
||
"relative transition-[opacity,transform] duration-300 ease-out",
|
||
)}
|
||
>
|
||
<PromptInputTextarea
|
||
ref={textareaRef}
|
||
className={cn(
|
||
"size-full",
|
||
!effectiveIsFocused && "h-[80px] py-0 leading-20",
|
||
)}
|
||
disabled={isInputDisabled}
|
||
placeholder={t.inputBox.placeholder}
|
||
autoFocus={autoFocus}
|
||
defaultValue={initialValue}
|
||
onFocus={() => setIsFocused(true)}
|
||
onChange={handleTextareaChange}
|
||
onKeyDown={handleTextareaKeyDown}
|
||
/>
|
||
<DropdownMenu
|
||
modal={false}
|
||
open={mentionOpen && filteredMentionCandidates.length > 0}
|
||
onOpenChange={(open) => {
|
||
setMentionOpen(open);
|
||
if (!open) {
|
||
setMentionRange(null);
|
||
}
|
||
}}
|
||
>
|
||
<DropdownMenuTrigger asChild>
|
||
<button
|
||
ref={mentionTriggerRef}
|
||
type="button"
|
||
className="pointer-events-none absolute right-2 bottom-2 h-0 w-0 opacity-0"
|
||
aria-hidden="true"
|
||
tabIndex={-1}
|
||
/>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent
|
||
align="start"
|
||
side="top"
|
||
sideOffset={8}
|
||
className="w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] p-2"
|
||
data-testid="mention-candidate-panel"
|
||
onCloseAutoFocus={(event) => {
|
||
event.preventDefault();
|
||
textareaRef.current?.focus();
|
||
}}
|
||
>
|
||
<DropdownMenuLabel className="px-2 py-1 text-xs text-muted-foreground">
|
||
添加引用
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator />
|
||
<DropdownMenuGroup>
|
||
{filteredMentionCandidates.slice(0, 20).map((candidate, index) => {
|
||
const detail = [candidate.typeLabel, candidate.pathTail]
|
||
.filter(Boolean)
|
||
.join(" · ");
|
||
return (
|
||
<DropdownMenuItem
|
||
key={candidate.key}
|
||
className={cn(
|
||
"flex items-center justify-between gap-3 rounded-md px-2 py-2 text-left",
|
||
index === activeMentionIndex && "bg-accent",
|
||
)}
|
||
data-active={index === activeMentionIndex ? "true" : "false"}
|
||
data-candidate-key={candidate.key}
|
||
data-testid="mention-candidate-item"
|
||
aria-label={`${candidate.filename} ${candidate.typeLabel}${candidate.pathTail ? ` ${candidate.pathTail}` : ""}`}
|
||
onFocus={() => setActiveMentionIndex(index)}
|
||
onMouseDown={(event) => event.preventDefault()}
|
||
onSelect={(event) => {
|
||
event.preventDefault();
|
||
selectMentionCandidate(candidate);
|
||
}}
|
||
>
|
||
<div className="min-w-0 flex-1">
|
||
<span className="block truncate text-sm font-medium">
|
||
{candidate.filename}
|
||
</span>
|
||
<span className="text-muted-foreground block truncate text-xs">
|
||
{detail}
|
||
</span>
|
||
</div>
|
||
</DropdownMenuItem>
|
||
);
|
||
})}
|
||
</DropdownMenuGroup>
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</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",
|
||
!effectiveIsFocused &&
|
||
"pointer-events-none invisible h-[0px] translate-y-2 p-[0px] opacity-0",
|
||
)}
|
||
>
|
||
<PromptInputTools className="min-w-0 flex-1 gap-[20px]">
|
||
{/* TODO: Add more connectors here
|
||
<PromptInputActionMenu>
|
||
<PromptInputActionMenuTrigger className="px-2!" />
|
||
<PromptInputActionMenuContent>
|
||
<PromptInputActionAddAttachments
|
||
label={t.inputBox.addAttachments}
|
||
/>
|
||
</PromptInputActionMenuContent>
|
||
</PromptInputActionMenu> */}
|
||
{showWelcomeStyle && <HistoryButton
|
||
className="px-2!"
|
||
router={router}
|
||
threadId={threadIdFromProps}
|
||
/>}
|
||
<AddAttachmentsButton className="px-2!" />
|
||
<IframeSkillDialogButton
|
||
className="px-2!"
|
||
selectedSkills={iframeSkill.selectedSkills}
|
||
isBootstrapping={iframeSkill.isBootstrapping}
|
||
openSkillDialog={iframeSkill.openSkillDialog}
|
||
clearSkill={iframeSkill.clearSkill}
|
||
/>
|
||
|
||
{/* 参考 kexue 版本隐藏运行模式切换按钮 */}
|
||
</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> */}
|
||
<PromptInputTools>
|
||
{/* 占位符 */}
|
||
<div className="w-[150px]"></div>
|
||
</PromptInputTools>
|
||
</PromptInputFooter>
|
||
<PromptInputSubmit
|
||
className="absolute right-3 bottom-5 z-[20] border-0"
|
||
disabled={isInputDisabled}
|
||
variant="outline"
|
||
status={status}
|
||
/>
|
||
</PromptInput>
|
||
|
||
{showWelcomeStyle &&
|
||
!hasSubmitted &&
|
||
searchParams.get("mode") !== "skill" && (
|
||
<SuggestionListContainer
|
||
bootstrapAndLockSkills={iframeSkill.bootstrapAndLockSkills}
|
||
isBootstrapping={iframeSkill.isBootstrapping}
|
||
/>
|
||
)}
|
||
|
||
{!disabled &&
|
||
!showWelcomeStyle &&
|
||
!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">
|
||
加载中...
|
||
</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>提示</DialogTitle>
|
||
<DialogDescription>
|
||
请确认要如何处理当前的追加建议内容？
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
<DialogFooter>
|
||
<Button variant="outline" onClick={() => setConfirmOpen(false)}>
|
||
取消
|
||
</Button>
|
||
<Button variant="secondary" onClick={confirmAppendAndSend}>
|
||
追加内容
|
||
</Button>
|
||
<Button onClick={confirmReplaceAndSend}>替换发送</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// SuggestionList 容器
|
||
function SuggestionListContainer({
|
||
bootstrapAndLockSkills,
|
||
isBootstrapping,
|
||
}: {
|
||
bootstrapAndLockSkills: (params: {
|
||
selectedSkills: SelectedSkillPayloadItem[];
|
||
title: string;
|
||
}) => Promise<boolean>;
|
||
isBootstrapping: boolean;
|
||
}) {
|
||
return (
|
||
<div className="absolute right-0 bottom-0 left-0 z-0 flex translate-y-full items-center justify-center pt-4">
|
||
<SuggestionList
|
||
bootstrapAndLockSkills={bootstrapAndLockSkills}
|
||
isBootstrapping={isBootstrapping}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 快速选择skillbutton
|
||
function SuggestionList({
|
||
bootstrapAndLockSkills,
|
||
isBootstrapping,
|
||
}: {
|
||
bootstrapAndLockSkills: (params: {
|
||
selectedSkills: SelectedSkillPayloadItem[];
|
||
title: string;
|
||
}) => Promise<boolean>;
|
||
isBootstrapping: boolean;
|
||
}) {
|
||
const { t } = useI18n();
|
||
const { textInput } = usePromptInputController();
|
||
const suggestions = t.inputBox.suggestions;
|
||
const promptSuggestions = suggestions.filter(
|
||
(
|
||
suggestion,
|
||
): suggestion is Exclude<
|
||
(typeof suggestions)[number],
|
||
{ type: "separator" }
|
||
> => !("type" in suggestion),
|
||
);
|
||
|
||
const handleSuggestionClick = useCallback(
|
||
(suggestion: {
|
||
prompt: string;
|
||
skill_id?: string[];
|
||
children?: SelectedSkillPayloadItem[];
|
||
suggestion: string;
|
||
}) => {
|
||
if (isBootstrapping) return;
|
||
|
||
// 优先使用 children 中的 skill（保留每个 skill 自己的 name，用于 tag 展示）
|
||
const childSkills = (suggestion.children ?? [])
|
||
.map((item) => ({
|
||
id: String(item.id).trim(),
|
||
name: item.name?.trim() ?? "",
|
||
}))
|
||
.filter(
|
||
(item): item is { id: string; name: string } =>
|
||
Boolean(item.id) && Boolean(item.name),
|
||
);
|
||
if (childSkills.length > 0) {
|
||
void bootstrapAndLockSkills({
|
||
selectedSkills: childSkills,
|
||
title: suggestion.suggestion,
|
||
});
|
||
return;
|
||
}
|
||
if (suggestion.skill_id && suggestion.skill_id.length > 0) {
|
||
void bootstrapAndLockSkills({
|
||
selectedSkills: suggestion.skill_id.map((id) => ({
|
||
id,
|
||
name: suggestion.suggestion,
|
||
})),
|
||
title: suggestion.suggestion,
|
||
});
|
||
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);
|
||
},
|
||
[bootstrapAndLockSkills, isBootstrapping, textInput],
|
||
);
|
||
return (
|
||
<Suggestions
|
||
className="min-h-16 w-fit items-start"
|
||
data-testid="welcome-suggestions"
|
||
>
|
||
{promptSuggestions.map((suggestion) => (
|
||
<Suggestion
|
||
key={suggestion.suggestion}
|
||
icon={suggestion.icon}
|
||
suggestion={suggestion.suggestion}
|
||
onClick={() => handleSuggestionClick(suggestion)}
|
||
/>
|
||
))}
|
||
</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>
|
||
);
|
||
}
|
||
|
||
function HistoryButton({
|
||
className,
|
||
router,
|
||
threadId,
|
||
}: {
|
||
className?: string;
|
||
router: AppRouterInstance;
|
||
threadId: string;
|
||
}) {
|
||
const { t } = useI18n();
|
||
return (
|
||
<Tooltip content={t.inputBox.history}>
|
||
<PromptInputButton
|
||
className={cn("group px-2! hover:bg-[#EAE2F5]", className)}
|
||
onClick={() =>
|
||
router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
|
||
}
|
||
>
|
||
<svg
|
||
className="transition-[stroke] duration-200"
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 18 18"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle
|
||
className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
|
||
cx="9"
|
||
cy="9"
|
||
r="8.5"
|
||
/>
|
||
<path
|
||
className="stroke-[#150033] transition-[stroke] duration-200 group-hover:stroke-[#8E47F0]"
|
||
d="M9 6V10H12"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
|
||
</PromptInputButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
// 启动iframeSkillDialog
|
||
function IframeSkillDialogButton({
|
||
className,
|
||
selectedSkills,
|
||
isBootstrapping,
|
||
openSkillDialog,
|
||
clearSkill,
|
||
}: {
|
||
className?: string;
|
||
selectedSkills: Array<{ skill_id: string; title: string }>;
|
||
isBootstrapping: boolean;
|
||
openSkillDialog: () => void;
|
||
clearSkill: (skillId?: string) => void;
|
||
}) {
|
||
const { t } = useI18n();
|
||
|
||
return (
|
||
<div className="flex min-w-0 flex-1 items-center gap-2">
|
||
<Tooltip content={t.inputBox.selectSkill}>
|
||
<PromptInputButton
|
||
className={cn("group shrink-0 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>
|
||
{isBootstrapping ? (
|
||
<Tag className="bg-background text-muted-foreground gap-2 border">
|
||
<Loader2Icon className="size-3 animate-spin" />
|
||
{t.common.loading}
|
||
</Tag>
|
||
) : null}
|
||
{!isBootstrapping && selectedSkills.length > 0 ? (
|
||
<div
|
||
className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-hidden whitespace-nowrap [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||
onWheel={(event) => {
|
||
if (event.deltaY === 0) return;
|
||
event.currentTarget.scrollLeft += event.deltaY;
|
||
}}
|
||
>
|
||
{selectedSkills.map((skill, index) => (
|
||
<Tag
|
||
key={`${skill.skill_id}-${skill.title}-${index}`}
|
||
className="shrink-0"
|
||
>
|
||
{skill.title}
|
||
{/* TODO: 因为后端接口不支持取消选择skill，所以暂时禁用取消选择按钮 */}
|
||
<button
|
||
onClick={() => clearSkill(skill.skill_id)}
|
||
className="hover:bg-muted-foreground/20 ml-1 rounded-full"
|
||
type="button"
|
||
>
|
||
<XIcon className="size-3" />
|
||
</button>
|
||
</Tag>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 附件预览栏 - 在输入框上方显示
|
||
function AttachmentPreviewBar({
|
||
references,
|
||
threadId,
|
||
onRemoveReference,
|
||
}: {
|
||
references: PromptInputReference[];
|
||
threadId: string;
|
||
onRemoveReference: (reference: PromptInputReference) => void;
|
||
}) {
|
||
const attachments = usePromptInputAttachments();
|
||
const hasReferences = references.length > 0;
|
||
const hasAttachmentFiles = attachments.files.length > 0;
|
||
|
||
if (!hasAttachmentFiles && !hasReferences) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<div className="absolute bottom-full left-0 z-20 mb-3 ml-1 flex max-w-full justify-start">
|
||
<div className="flex max-w-full flex-wrap items-center gap-2">
|
||
{hasAttachmentFiles && (
|
||
<PromptInputAttachments>
|
||
{(attachment) => <PromptInputAttachment data={attachment} />}
|
||
</PromptInputAttachments>
|
||
)}
|
||
{hasReferences && (
|
||
<div className="inline-flex flex-row flex-wrap items-center gap-2 rounded-xl p-2" data-testid="reference-inline-preview">
|
||
{references.map((reference) => {
|
||
const referenceUrl =
|
||
threadId && reference.path
|
||
? urlOfArtifact({
|
||
filepath: reference.path,
|
||
threadId,
|
||
})
|
||
: null;
|
||
const filename = reference.filename ?? "reference";
|
||
const imageMatch = filename.match(/\.(png|jpe?g|gif|webp|bmp|svg)$/i);
|
||
const extension = imageMatch?.[1]?.toLowerCase();
|
||
const mediaType = extension
|
||
? extension === "jpg"
|
||
? "image/jpeg"
|
||
: extension === "svg"
|
||
? "image/svg+xml"
|
||
: `image/${extension}`
|
||
: "application/octet-stream";
|
||
return (
|
||
<PromptInputAttachment
|
||
key={`${reference.ref_source}:${reference.path ?? reference.filename}`}
|
||
className="border"
|
||
data={{
|
||
type: "file",
|
||
id: `reference:${reference.ref_source}:${reference.path ?? reference.filename}`,
|
||
filename,
|
||
mediaType,
|
||
url: referenceUrl ?? "",
|
||
}}
|
||
data-testid="reference-chip"
|
||
onRemove={() => onRemoveReference(reference)}
|
||
title={`${REFERENCE_SOURCE_LABELS[reference.ref_source]}${reference.path ? ` · ${getPathTail(reference.path)}` : ""}`}
|
||
/>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|