1523 lines
49 KiB
TypeScript
1523 lines
49 KiB
TypeScript
"use client";
|
||
|
||
import type { ChatStatus } from "ai";
|
||
import { Tour } from "antd";
|
||
import {
|
||
CheckIcon,
|
||
GraduationCapIcon,
|
||
LightbulbIcon,
|
||
Loader2Icon,
|
||
PaperclipIcon,
|
||
PlusIcon,
|
||
SparklesIcon,
|
||
RocketIcon,
|
||
XIcon,
|
||
ZapIcon,
|
||
} from "lucide-react";
|
||
import type { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||
import { useRouter } from "next/navigation";
|
||
import { useSearchParams } from "next/navigation";
|
||
import {
|
||
forwardRef,
|
||
useCallback,
|
||
useEffect,
|
||
useMemo,
|
||
useRef,
|
||
useState,
|
||
type ChangeEvent,
|
||
type KeyboardEvent,
|
||
type ComponentProps,
|
||
type RefObject,
|
||
} from "react";
|
||
import { toast } from "sonner";
|
||
|
||
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 { useReferenceFiles } from "@/core/artifacts/references";
|
||
import { urlOfArtifact } from "@/core/artifacts/utils";
|
||
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 {
|
||
MENTION_REFERENCE_EVENT,
|
||
type MentionReferenceEventDetail,
|
||
} from "@/core/threads/reference-events";
|
||
import { useIframeSkill } from "@/hooks/use-iframe-skill";
|
||
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 { ScrollArea } from "../ui/scroll-area";
|
||
|
||
import { ModeHoverGuide } from "./mode-hover-guide";
|
||
import { Tooltip } from "./tooltip";
|
||
|
||
|
||
const MAX_REFERENCES_PER_MESSAGE = 10;
|
||
const INPUT_TOOLS_TOUR_SEEN_KEY = "workspace.input_tools_tour_seen.v1";
|
||
type InputToolsTourSeenState = {
|
||
seen: boolean;
|
||
threadIds?: string[];
|
||
};
|
||
|
||
function parseInputToolsTourSeenState(
|
||
value: string | null,
|
||
): InputToolsTourSeenState | null {
|
||
if (!value) return null;
|
||
if (value === "1") {
|
||
return { seen: true };
|
||
}
|
||
try {
|
||
const parsed = JSON.parse(value) as InputToolsTourSeenState & {
|
||
threadId?: string;
|
||
};
|
||
if (typeof parsed?.seen !== "boolean") {
|
||
return null;
|
||
}
|
||
if (
|
||
parsed.threadIds != null &&
|
||
(!Array.isArray(parsed.threadIds) ||
|
||
parsed.threadIds.some((id) => typeof id !== "string"))
|
||
) {
|
||
return null;
|
||
}
|
||
return {
|
||
seen: parsed.seen,
|
||
threadIds:
|
||
parsed.threadIds ??
|
||
(typeof parsed.threadId === "string" ? [parsed.threadId] : undefined),
|
||
};
|
||
} catch {
|
||
return null;
|
||
}
|
||
}
|
||
|
||
type WorkspaceToolButtonProps = ComponentProps<typeof PromptInputButton>;
|
||
|
||
function WorkspaceToolButton({
|
||
className,
|
||
...props
|
||
}: WorkspaceToolButtonProps) {
|
||
return (
|
||
<PromptInputButton
|
||
className={cn(
|
||
"group h-full rounded-[10px] p-[10px]! hover:bg-ws-surface-subtle hover:text-ws-interactive-primary",
|
||
className,
|
||
)}
|
||
{...props}
|
||
/>
|
||
);
|
||
}
|
||
|
||
type MentionCandidate = {
|
||
key: string;
|
||
filename: string;
|
||
path?: string;
|
||
pathTail: string;
|
||
ref_source: "artifact" | "upload";
|
||
ref_kind: "mention";
|
||
typeLabel: string;
|
||
isImage: boolean;
|
||
previewUrl?: string;
|
||
};
|
||
|
||
const IMAGE_EXTENSIONS = new Set([
|
||
"jpg",
|
||
"jpeg",
|
||
"png",
|
||
"webp",
|
||
"gif",
|
||
"bmp",
|
||
"svg",
|
||
"avif",
|
||
]);
|
||
|
||
function isImageFilename(filename: string): boolean {
|
||
const parts = filename.toLowerCase().split(".");
|
||
if (parts.length < 2) return false;
|
||
return IMAGE_EXTENSIONS.has(parts[parts.length - 1] ?? "");
|
||
}
|
||
|
||
function fileExtensionLabel(filename: string): string {
|
||
const parts = filename.split(".");
|
||
if (parts.length < 2) return "FILE";
|
||
return (parts[parts.length - 1] ?? "FILE").toUpperCase().slice(0, 4);
|
||
}
|
||
|
||
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 referenceSourceLabels = useMemo(
|
||
() => ({
|
||
artifact: t.inputBox.referenceSourceArtifact,
|
||
upload: t.inputBox.referenceSourceUpload,
|
||
}),
|
||
[t],
|
||
);
|
||
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 historyButtonTourRef = useRef<HTMLDivElement | null>(null);
|
||
const attachmentsButtonTourRef = useRef<HTMLDivElement | null>(null);
|
||
const skillButtonTourRef = useRef<HTMLDivElement | null>(null);
|
||
const suggestionListTourRef = useRef<HTMLDivElement | 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 [isInputToolsTourOpen, setIsInputToolsTourOpen] = useState(false);
|
||
const [isInputToolsTourReady, setIsInputToolsTourReady] = useState(false);
|
||
const { data: referenceFilesData } = useReferenceFiles(threadIdFromProps);
|
||
|
||
// isNewThread 时禁用收缩，始终保持展开（除非已提交消息）
|
||
const effectiveIsFocused =
|
||
((showWelcomeStyle ?? false) && !hasSubmitted) || isFocused;
|
||
const shouldShowSuggestionList =
|
||
showWelcomeStyle && !hasSubmitted && searchParams.get("mode") !== "skill";
|
||
|
||
useEffect(() => {
|
||
if (!showWelcomeStyle || hasSubmitted) {
|
||
setIsInputToolsTourReady(false);
|
||
return;
|
||
}
|
||
const frameId = window.requestAnimationFrame(() => {
|
||
setIsInputToolsTourReady(
|
||
Boolean(
|
||
historyButtonTourRef.current &&
|
||
attachmentsButtonTourRef.current &&
|
||
skillButtonTourRef.current &&
|
||
(!shouldShowSuggestionList || suggestionListTourRef.current),
|
||
),
|
||
);
|
||
});
|
||
return () => window.cancelAnimationFrame(frameId);
|
||
}, [
|
||
showWelcomeStyle,
|
||
hasSubmitted,
|
||
shouldShowSuggestionList,
|
||
iframeSkill.isBootstrapping,
|
||
iframeSkill.selectedSkills.length,
|
||
]);
|
||
|
||
useEffect(() => {
|
||
if (!showWelcomeStyle || hasSubmitted || !isInputToolsTourReady) {
|
||
setIsInputToolsTourOpen(false);
|
||
return;
|
||
}
|
||
const seenState = parseInputToolsTourSeenState(
|
||
window.localStorage.getItem(INPUT_TOOLS_TOUR_SEEN_KEY),
|
||
);
|
||
const hasSeenTourForCurrentThread =
|
||
seenState?.seen === true && Boolean(seenState.threadIds?.includes(threadId));
|
||
if (!hasSeenTourForCurrentThread) {
|
||
setIsInputToolsTourOpen(true);
|
||
}
|
||
}, [showWelcomeStyle, hasSubmitted, isInputToolsTourReady, threadId]);
|
||
|
||
const finishInputToolsTour = useCallback(() => {
|
||
const seenState = parseInputToolsTourSeenState(
|
||
window.localStorage.getItem(INPUT_TOOLS_TOUR_SEEN_KEY),
|
||
);
|
||
const seenThreadIds = new Set(seenState?.threadIds ?? []);
|
||
seenThreadIds.add(threadId);
|
||
window.localStorage.setItem(
|
||
INPUT_TOOLS_TOUR_SEEN_KEY,
|
||
JSON.stringify({
|
||
seen: true,
|
||
threadIds: Array.from(seenThreadIds),
|
||
} satisfies InputToolsTourSeenState),
|
||
);
|
||
setIsInputToolsTourOpen(false);
|
||
}, [threadId]);
|
||
const closeInputToolsTour = useCallback(() => {
|
||
setIsInputToolsTourOpen(false);
|
||
}, []);
|
||
|
||
const inputToolsTourSteps = useMemo(() => {
|
||
const baseSteps = [
|
||
{
|
||
title: "查看历史",
|
||
description: "点击这里，可以查看历史会话与文档。",
|
||
target: () => historyButtonTourRef.current ?? document.body,
|
||
},
|
||
{
|
||
title: "上传附件",
|
||
description: "点击这里，上传参考文档或拟处理的文档。",
|
||
target: () => attachmentsButtonTourRef.current ?? document.body,
|
||
},
|
||
{
|
||
title: "选择 Skill",
|
||
description: (
|
||
<>
|
||
点击这里，从“我的skill”中选择要使用的skill。
|
||
<br />
|
||
在广场中选择skill，在详情页选择“去使用”，也可选中skill。
|
||
</>
|
||
),
|
||
target: () => skillButtonTourRef.current ?? document.body,
|
||
},
|
||
...(shouldShowSuggestionList
|
||
? [
|
||
{
|
||
title: "试试我吧",
|
||
target: () => suggestionListTourRef.current ?? document.body,
|
||
},
|
||
]
|
||
: []),
|
||
];
|
||
|
||
return baseSteps.map((step, index) => ({
|
||
...step,
|
||
prevButtonProps: { children: "上一步" },
|
||
nextButtonProps: {
|
||
children: index === baseSteps.length - 1 ? "完成" : "下一步",
|
||
},
|
||
}));
|
||
}, [shouldShowSuggestionList]);
|
||
|
||
// 点击外部区域时收起输入框
|
||
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 deduped = new Map<string, MentionCandidate>();
|
||
(referenceFilesData?.files ?? []).forEach((file) => {
|
||
const path = file.virtual_path || "";
|
||
const filename = file.filename ?? path.split("/").pop() ?? path;
|
||
const refSource = file.source === "upload" ? "upload" : "artifact";
|
||
const typeLabel =
|
||
refSource === "upload"
|
||
? referenceSourceLabels.upload
|
||
: referenceSourceLabels.artifact;
|
||
const previewUrl =
|
||
file.artifact_url ||
|
||
(threadId
|
||
? urlOfArtifact({
|
||
filepath: path,
|
||
threadId,
|
||
})
|
||
: undefined);
|
||
|
||
deduped.set(`${refSource}:${path || filename}`, {
|
||
key: `${refSource}:${path || filename}`,
|
||
filename,
|
||
path,
|
||
pathTail: getPathTail(path),
|
||
ref_source: refSource,
|
||
ref_kind: "mention",
|
||
typeLabel,
|
||
isImage: isImageFilename(filename),
|
||
previewUrl,
|
||
});
|
||
});
|
||
return [...deduped.values()];
|
||
}, [
|
||
referenceFilesData?.files,
|
||
referenceSourceLabels.artifact,
|
||
referenceSourceLabels.upload,
|
||
threadId,
|
||
]);
|
||
|
||
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,
|
||
selectedSkills: iframeSkill.selectedSkills,
|
||
});
|
||
setReferences([]);
|
||
},
|
||
[
|
||
showWelcomeStyle,
|
||
onSubmit,
|
||
onStop,
|
||
references,
|
||
status,
|
||
iframeSkill.selectedSkills,
|
||
],
|
||
);
|
||
|
||
const requestFormSubmit = useCallback(() => {
|
||
const form = promptRootRef.current?.querySelector("form");
|
||
form?.requestSubmit();
|
||
}, []);
|
||
|
||
const addMentionReference = useCallback(
|
||
(reference: PromptInputReference) => {
|
||
setReferences((prev) => {
|
||
const exists = prev.some(
|
||
(item) =>
|
||
item.ref_source === reference.ref_source &&
|
||
item.path === reference.path &&
|
||
item.filename === reference.filename,
|
||
);
|
||
if (exists) {
|
||
return prev;
|
||
}
|
||
if (prev.length >= MAX_REFERENCES_PER_MESSAGE) {
|
||
toast.error(t.inputBox.maxReferencesReached);
|
||
return prev;
|
||
}
|
||
return prev.concat(reference);
|
||
});
|
||
},
|
||
[t.inputBox.maxReferencesReached],
|
||
);
|
||
|
||
const selectMentionCandidate = useCallback(
|
||
(candidate: MentionCandidate) => {
|
||
addMentionReference({
|
||
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);
|
||
},
|
||
[addMentionReference, mentionRange, textInput],
|
||
);
|
||
|
||
useEffect(() => {
|
||
const onMentionReference = (event: Event) => {
|
||
const detail = (event as CustomEvent<MentionReferenceEventDetail>).detail;
|
||
if (detail?.threadId !== threadIdFromProps) {
|
||
return;
|
||
}
|
||
addMentionReference({
|
||
filename: detail.filename,
|
||
path: detail.path,
|
||
ref_kind: "mention",
|
||
ref_source: detail.ref_source,
|
||
});
|
||
setIsFocused(true);
|
||
requestAnimationFrame(() => {
|
||
textareaRef.current?.focus();
|
||
});
|
||
};
|
||
|
||
window.addEventListener(MENTION_REFERENCE_EVENT, onMentionReference);
|
||
return () => {
|
||
window.removeEventListener(MENTION_REFERENCE_EVENT, onMentionReference);
|
||
};
|
||
}, [addMentionReference, threadIdFromProps]);
|
||
|
||
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"
|
||
>
|
||
<Tour
|
||
open={isInputToolsTourOpen}
|
||
onClose={closeInputToolsTour}
|
||
onFinish={finishInputToolsTour}
|
||
rootClassName="workspace-input-tools-tour"
|
||
gap={
|
||
{ offset: 3 , radius:10 }
|
||
}
|
||
mask={{
|
||
color: 'rgba(255,255,255, .8)',
|
||
}}
|
||
steps={inputToolsTourSteps}
|
||
/>
|
||
<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={
|
||
showWelcomeStyle
|
||
? t.inputBox.welcomePlaceholder
|
||
: t.inputBox.chatPlaceholder
|
||
}
|
||
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-0 h-0 w-0 opacity-0"
|
||
aria-hidden="true"
|
||
tabIndex={-1}
|
||
/>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent
|
||
align="start"
|
||
side="top"
|
||
sideOffset={8}
|
||
className="max-h-[400px] w-[min(32rem,var(--radix-dropdown-menu-trigger-width)+28rem)] overflow-y-hidden p-[20px]"
|
||
data-testid="mention-candidate-panel"
|
||
onCloseAutoFocus={(event) => {
|
||
event.preventDefault();
|
||
textareaRef.current?.focus();
|
||
}}
|
||
>
|
||
<DropdownMenuLabel className="p-0 text-sm text-ws-fg-primary">
|
||
{t.inputBox.addReference}
|
||
</DropdownMenuLabel>
|
||
<DropdownMenuSeparator className="mx-0 mt-[20px] mb-0" />
|
||
<DropdownMenuGroup className="flex min-h-0 flex-col gap-[10px] px-0">
|
||
<ScrollArea className="h-[320px] pt-[20px]" hideScrollbar={false}>
|
||
{filteredMentionCandidates.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);
|
||
}}
|
||
>
|
||
{candidate.isImage && candidate.previewUrl ? (
|
||
<img
|
||
src={candidate.previewUrl}
|
||
alt={candidate.filename}
|
||
className="h-10 w-10 shrink-0 rounded-md border object-cover object-top"
|
||
/>
|
||
) : (
|
||
<div className="bg-muted text-muted-foreground flex h-10 w-10 shrink-0 items-center justify-center rounded-md border text-xs font-semibold">
|
||
{fileExtensionLabel(candidate.filename)}
|
||
</div>
|
||
)}
|
||
<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>
|
||
);
|
||
})}
|
||
</ScrollArea>
|
||
</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 w-full overflow-hidden gap-[20px]">
|
||
{/* TODO: Add more connectors here
|
||
<PromptInputActionMenu>
|
||
<PromptInputActionMenuTrigger className="px-2!" />
|
||
<PromptInputActionMenuContent>
|
||
<PromptInputActionAddAttachments
|
||
label={t.inputBox.addAttachments}
|
||
/>
|
||
</PromptInputActionMenuContent>
|
||
</PromptInputActionMenu> */}
|
||
{showWelcomeStyle && (
|
||
<div ref={historyButtonTourRef} className="shrink-0 h-full">
|
||
<HistoryButton
|
||
router={router}
|
||
threadId={threadIdFromProps}
|
||
/>
|
||
</div>
|
||
)}
|
||
{!showWelcomeStyle && (
|
||
<div className="shrink-0 h-full">
|
||
<ExitChattingButton
|
||
router={router}
|
||
threadId={threadIdFromProps}
|
||
/>
|
||
</div>
|
||
)}
|
||
<div ref={attachmentsButtonTourRef} className="shrink-0 h-full">
|
||
<AddAttachmentsButton />
|
||
</div>
|
||
<div className="min-w-0 grow basis-0 h-full">
|
||
<IframeSkillDialogButton
|
||
skillButtonRef={skillButtonTourRef}
|
||
selectedSkills={iframeSkill.selectedSkills}
|
||
isBootstrapping={iframeSkill.isBootstrapping}
|
||
openSkillDialog={iframeSkill.openSkillDialog}
|
||
clearSkill={iframeSkill.clearSkill}
|
||
/>
|
||
</div>
|
||
{/* <div className="h-[40px] w-[140px] shrink-0" aria-hidden="true" /> */}
|
||
|
||
{/* 参考 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] h-[40px]"></div>
|
||
</PromptInputTools>
|
||
</PromptInputFooter>
|
||
<PromptInputSubmit
|
||
className="absolute right-3 bottom-5 z-[20] border-0"
|
||
disabled={isInputDisabled}
|
||
variant="outline"
|
||
status={status}
|
||
/>
|
||
</PromptInput>
|
||
|
||
{shouldShowSuggestionList && (
|
||
<SuggestionListContainer
|
||
ref={suggestionListTourRef}
|
||
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">
|
||
{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 容器
|
||
const SuggestionListContainer = forwardRef<HTMLDivElement, {
|
||
bootstrapAndLockSkills: (params: {
|
||
selectedSkills: SelectedSkillPayloadItem[];
|
||
title: string;
|
||
}) => Promise<boolean>;
|
||
isBootstrapping: boolean;
|
||
}>(
|
||
function SuggestionListContainer(
|
||
{ bootstrapAndLockSkills, isBootstrapping },
|
||
ref,
|
||
) {
|
||
return (
|
||
<div className="absolute right-0 bottom-0 left-0 z-0 flex translate-y-full items-center justify-center pt-4">
|
||
<div ref={ref} className="w-fit">
|
||
<SuggestionList
|
||
bootstrapAndLockSkills={bootstrapAndLockSkills}
|
||
isBootstrapping={isBootstrapping}
|
||
/>
|
||
</div>
|
||
</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="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}>
|
||
<WorkspaceToolButton
|
||
className={cn("text-ws-base-1 hover:text-ws-interactive-primary", 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-[color] duration-200"
|
||
>
|
||
<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="currentColor"
|
||
/>
|
||
<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="currentColor"
|
||
/>
|
||
</svg>
|
||
</WorkspaceToolButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
|
||
function HistoryButton({
|
||
className,
|
||
router,
|
||
threadId,
|
||
}: {
|
||
className?: string;
|
||
router: AppRouterInstance;
|
||
threadId: string;
|
||
}) {
|
||
const { t } = useI18n();
|
||
return (
|
||
<Tooltip content={t.inputBox.history}>
|
||
<WorkspaceToolButton
|
||
className={cn("text-ws-base-1 hover:text-ws-interactive-primary", className)}
|
||
onClick={() =>
|
||
router.replace(`/workspace/chats/${threadId}?is_chatting=true`)
|
||
}
|
||
>
|
||
<svg
|
||
className="transition-[color] duration-200"
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 18 18"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle
|
||
className="stroke-current transition-[stroke] duration-200"
|
||
cx="9"
|
||
cy="9"
|
||
r="8.5"
|
||
/>
|
||
<path
|
||
className="stroke-current transition-[stroke] duration-200"
|
||
d="M9 6V10H12"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</WorkspaceToolButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
|
||
function ExitChattingButton({
|
||
className,
|
||
router,
|
||
threadId,
|
||
}: {
|
||
className?: string;
|
||
router: AppRouterInstance;
|
||
threadId: string;
|
||
}) {
|
||
const { t } = useI18n();
|
||
return (
|
||
<Tooltip content={t.inputBox.welcome}>
|
||
<WorkspaceToolButton
|
||
className={cn(
|
||
"text-ws-base-1 hover:text-ws-interactive-primary",
|
||
className,
|
||
)}
|
||
onClick={() =>
|
||
router.replace(`/workspace/chats/${threadId}?is_chatting=false`)
|
||
}
|
||
>
|
||
<svg
|
||
className="transition-[color] duration-200"
|
||
width="18"
|
||
height="18"
|
||
viewBox="0 0 18 18"
|
||
fill="none"
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
>
|
||
<circle
|
||
className="stroke-current transition-[stroke] duration-200"
|
||
cx="9"
|
||
cy="9"
|
||
r="8.5"
|
||
/>
|
||
<path
|
||
className="stroke-current transition-[stroke] duration-200"
|
||
d="M6 9H12"
|
||
strokeLinecap="round"
|
||
strokeLinejoin="round"
|
||
/>
|
||
</svg>
|
||
</WorkspaceToolButton>
|
||
</Tooltip>
|
||
);
|
||
}
|
||
// 启动iframeSkillDialog
|
||
function IframeSkillDialogButton({
|
||
className,
|
||
skillButtonRef,
|
||
selectedSkills,
|
||
isBootstrapping,
|
||
openSkillDialog,
|
||
clearSkill,
|
||
}: {
|
||
className?: string;
|
||
skillButtonRef?: RefObject<HTMLDivElement | null>;
|
||
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 w-full items-center h-full gap-2">
|
||
<Tooltip content={t.inputBox.selectSkill}>
|
||
<div ref={skillButtonRef} className="shrink-0">
|
||
<WorkspaceToolButton
|
||
className={cn("shrink-0", className)}
|
||
onClick={openSkillDialog}
|
||
>
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
className="size-4 text-ws-base-1 transition-[color] duration-200 group-hover:text-ws-interactive-primary"
|
||
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="currentColor"
|
||
/>
|
||
</svg>
|
||
</WorkspaceToolButton>
|
||
</div>
|
||
</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 grow basis-0 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"
|
||
>
|
||
<span className="text-xs leading-3">{skill.title}</span>
|
||
{/* TODO: 因为后端接口不支持取消选择skill，所以暂时禁用取消选择按钮 */}
|
||
<button
|
||
onClick={() => clearSkill(skill.skill_id)}
|
||
className="hover:bg-muted-foreground/20 ml-1 inline-flex size-4 items-center justify-center rounded-full align-middle"
|
||
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 { t } = useI18n();
|
||
const referenceSourceLabels = {
|
||
artifact: t.inputBox.referenceSourceArtifact,
|
||
upload: t.inputBox.referenceSourceUpload,
|
||
} as const;
|
||
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 = /\.(png|jpe?g|gif|webp|bmp|svg)$/i.exec(filename);
|
||
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={`${referenceSourceLabels[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>
|
||
);
|
||
}
|