549 lines
30 KiB
TypeScript
549 lines
30 KiB
TypeScript
// 画布 Agent 输入区：场景胶囊、输入框（附件、@ 引用、/ 技能）、发送/插话/停止按钮与图片预览。
|
||
//
|
||
// 运行中输入框保持可用（产品约定，勿收紧）：发送走插话，停止由 running 驱动，两者互不排斥。
|
||
|
||
import type { Skill, SkillPreset } from "@/services/api/skills";
|
||
import { ArrowLeft, ArrowUp, AtSign, Bookmark, Clapperboard, ImagePlus, Layers3, LoaderCircle, Palette, Shapes, Share2, ShoppingBag, Sparkles, Square, X } from "lucide-react";
|
||
import { canvasThemes } from "@/lib/canvas-theme";
|
||
import { type ClipboardEvent as ReactClipboardEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, type PointerEvent as ReactPointerEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||
import type { CanvasResourceReference } from "@/lib/canvas/canvas-resource-references";
|
||
import { buildSkillMentionReferences } from "@/services/skill-runtime";
|
||
import { motion, useReducedMotion } from "motion/react";
|
||
import { WorkingGlow } from "@/components/ai/working-indicator";
|
||
import { CanvasResourceMentionTextarea } from "./canvas-resource-mention-textarea";
|
||
import { Tooltip } from "@/components/ui/base/tooltip";
|
||
import { Button } from "antd";
|
||
import { agentAttachmentReferences, type CloudAgentChatAttachment } from "./canvas-cloud-agent-attachments";
|
||
|
||
export const MIN_AGENT_PROMPT_HEIGHT = 60;
|
||
|
||
export const MAX_AGENT_PROMPT_HEIGHT = 240;
|
||
|
||
export function clampAgentPromptHeight(height: number) {
|
||
return Math.min(MAX_AGENT_PROMPT_HEIGHT, Math.max(MIN_AGENT_PROMPT_HEIGHT, Math.ceil(height)));
|
||
}
|
||
|
||
/**
|
||
* 场景起步胶囊：把「我大概想做 X」一步翻译成一组技能。
|
||
* 两组来源，都不限剧典技能：
|
||
* 1) 配方组——只读消费 GET /skills/presets（随二进制内置的手工策展配方）
|
||
* 2) 常用组——用户已装（其中可含已收藏）及自建的技能，按常用度排序（含官方种子库与自定义）
|
||
* 选择只作用于本会话；缺失的技能会持久安装到当前用户的技能库。
|
||
* 挂上之后具体用哪张卡由 Agent 在任务里检索判断，胶囊只负责"把对的技能送到手边"。
|
||
*/
|
||
export type AgentSceneBucket = {
|
||
key: string;
|
||
label: string;
|
||
presets: SkillPreset[];
|
||
skills: Skill[];
|
||
};
|
||
|
||
/** 场景分类：与 presets.json 的 scene 字段、技能的 tag 字段共用同一套 key。 */
|
||
export const AGENT_SCENE_DEFS: Array<{ key: string; label: string; icon: typeof Sparkles }> = [
|
||
{ key: "frequent", label: "我的常用", icon: Bookmark },
|
||
{ key: "drama", label: "短剧故事", icon: Clapperboard },
|
||
{ key: "ecommerce", label: "广告电商", icon: ShoppingBag },
|
||
{ key: "creative", label: "视觉创意", icon: Palette },
|
||
{ key: "social", label: "传播社媒", icon: Share2 },
|
||
{ key: "others", label: "其他", icon: Shapes },
|
||
];
|
||
|
||
export function AgentSceneCapsules({
|
||
buckets,
|
||
installedIds,
|
||
theme,
|
||
disabled = false,
|
||
onPick,
|
||
onPickSkill,
|
||
}: {
|
||
buckets: AgentSceneBucket[];
|
||
installedIds: Set<string>;
|
||
theme: (typeof canvasThemes)[keyof typeof canvasThemes];
|
||
disabled?: boolean;
|
||
onPick: (preset: SkillPreset) => void;
|
||
onPickSkill: (skill: Skill) => void;
|
||
}) {
|
||
// 始终只占一排：默认显示场景分类，点某个场景后在同一排内就地切换内容。
|
||
const [activeKey, setActiveKey] = useState<string | null>(null);
|
||
const capsuleClass = "agent-scene-capsule shrink-0";
|
||
const stop = {
|
||
onMouseDown: (event: { stopPropagation(): void }) => event.stopPropagation(),
|
||
onPointerDown: (event: { stopPropagation(): void }) => event.stopPropagation(),
|
||
};
|
||
const visible = buckets.filter((bucket) => bucket.presets.length + bucket.skills.length > 0);
|
||
const active = activeKey ? visible.find((bucket) => bucket.key === activeKey) || null : null;
|
||
if (!visible.length) return null;
|
||
return (
|
||
<div className="agent-scene-capsules mx-3 mb-2 min-w-0" style={{ color: theme.node.text }}>
|
||
<div className="agent-scene-capsules-heading">
|
||
<Sparkles aria-hidden="true" />
|
||
<span>{active ? active.label : "技能组合推荐"}</span>
|
||
</div>
|
||
<div className="agent-scene-capsules-scroll thin-scrollbar flex gap-2 overflow-x-auto px-1 py-2">
|
||
{active ? (
|
||
<>
|
||
<button
|
||
type="button"
|
||
disabled={disabled}
|
||
title="返回全部场景"
|
||
className={capsuleClass}
|
||
data-scene="back"
|
||
{...stop}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
setActiveKey(null);
|
||
}}
|
||
>
|
||
<ArrowLeft aria-hidden="true" />
|
||
<span>全部场景</span>
|
||
</button>
|
||
{active.presets.map((preset) => {
|
||
const missing = preset.skillIds.filter((id) => !installedIds.has(id)).length;
|
||
return (
|
||
<button
|
||
key={preset.presetId}
|
||
type="button"
|
||
disabled={disabled}
|
||
title={preset.rationale}
|
||
className={capsuleClass}
|
||
data-scene={active.key}
|
||
{...stop}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
onPick(preset);
|
||
}}
|
||
>
|
||
<Layers3 aria-hidden="true" />
|
||
<span className="agent-scene-capsule-label">{preset.name}</span>
|
||
<span className="agent-scene-capsule-meta">{missing > 0 ? `${preset.skillIds.length} 技能 · ${missing} 待装` : `${preset.skillIds.length} 技能`}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
{active.skills.map((skill) => {
|
||
const owned = skill.isOwner ? "自建" : skill.isLike ? "已收藏" : installedIds.has(skill.skillId) ? "已装" : "待装";
|
||
return (
|
||
<button
|
||
key={skill.skillId}
|
||
type="button"
|
||
disabled={disabled}
|
||
title={skill.description}
|
||
className={capsuleClass}
|
||
data-scene={active.key}
|
||
{...stop}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
onPickSkill(skill);
|
||
}}
|
||
>
|
||
<Sparkles aria-hidden="true" />
|
||
<span className="agent-scene-capsule-label">{skill.skillName}</span>
|
||
<span className="agent-scene-capsule-meta">{owned}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</>
|
||
) : (
|
||
visible.map((bucket) => {
|
||
const count = bucket.presets.length + bucket.skills.length;
|
||
const Icon = AGENT_SCENE_DEFS.find((definition) => definition.key === bucket.key)?.icon || Shapes;
|
||
return (
|
||
<button
|
||
key={bucket.key}
|
||
type="button"
|
||
disabled={disabled}
|
||
title={`查看「${bucket.label}」下的技能组合`}
|
||
className={capsuleClass}
|
||
data-scene={bucket.key}
|
||
{...stop}
|
||
onClick={(event) => {
|
||
event.stopPropagation();
|
||
setActiveKey(bucket.key);
|
||
}}
|
||
>
|
||
<Icon aria-hidden="true" />
|
||
<span className="agent-scene-capsule-label">{bucket.label}</span>
|
||
<span className="agent-scene-capsule-meta">{count} 项</span>
|
||
</button>
|
||
);
|
||
})
|
||
)}
|
||
</div>
|
||
<p className="agent-scene-capsules-note">仅本会话生效 · 缺失技能将加入技能库 · Agent 按任务调用</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function AgentChatComposer({
|
||
prompt,
|
||
attachments = [],
|
||
disabled,
|
||
sending,
|
||
running,
|
||
placeholder,
|
||
theme,
|
||
onPromptChange,
|
||
onSubmit,
|
||
onAddFiles,
|
||
onRemoveAttachment,
|
||
left,
|
||
submitAccessory,
|
||
footer,
|
||
onStop,
|
||
stopping,
|
||
references = [],
|
||
slashSkills,
|
||
includeAssetLibrary,
|
||
}: {
|
||
prompt: string;
|
||
attachments?: CloudAgentChatAttachment[];
|
||
disabled?: boolean;
|
||
sending?: boolean;
|
||
running?: boolean;
|
||
placeholder: string;
|
||
theme: (typeof canvasThemes)[keyof typeof canvasThemes];
|
||
onPromptChange: (value: string) => void;
|
||
onSubmit: () => void;
|
||
onStop?: () => void | Promise<void>;
|
||
stopping?: boolean;
|
||
onAddFiles?: (files: FileList | File[] | null) => void | Promise<void>;
|
||
onRemoveAttachment?: (id: string) => void;
|
||
left?: ReactNode;
|
||
/** 发送按钮左侧的附属控件，例如上下文用量环。 */
|
||
submitAccessory?: ReactNode;
|
||
/** 输入区底部的附加内容（例如连接器条）。 */
|
||
footer?: ReactNode;
|
||
/** 供「@」插入的画布节点/素材/技能引用候选（可选，默认空，缺省时退化为普通输入框） */
|
||
references?: CanvasResourceReference[];
|
||
/** 供「/」弹出的技能候选（可选） */
|
||
slashSkills?: Skill[];
|
||
/** 是否在「@」候选里包含素材库资源 */
|
||
includeAssetLibrary?: boolean;
|
||
}) {
|
||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||
const [slash, setSlash] = useState<{ start: number; query: string } | null>(null);
|
||
const [slashIndex, setSlashIndex] = useState(0);
|
||
const [previewAttachment, setPreviewAttachment] = useState<CloudAgentChatAttachment | null>(null);
|
||
const [promptHeight, setPromptHeight] = useState(MIN_AGENT_PROMPT_HEIGHT);
|
||
const promptResizeRef = useRef<{ startY: number; startHeight: number } | null>(null);
|
||
const manualPromptHeightRef = useRef<number | null>(null);
|
||
const availableSlashSkills = slashSkills ?? [];
|
||
const slashCandidates = useMemo(() => {
|
||
const query = slash?.query.trim().toLocaleLowerCase() || "";
|
||
if (!query) return availableSlashSkills;
|
||
return availableSlashSkills.filter((skill) => `${skill.skillName} ${skill.description || ""}`.toLocaleLowerCase().includes(query));
|
||
}, [availableSlashSkills, slash?.query]);
|
||
const attachmentReferences = useMemo(() => agentAttachmentReferences(attachments), [attachments]);
|
||
const skillReferences = useMemo(() => buildSkillMentionReferences(availableSlashSkills), [availableSlashSkills]);
|
||
const composerReferences = useMemo(() => [...references, ...skillReferences, ...attachmentReferences].filter((reference, index, all) => all.findIndex((item) => item.id === reference.id) === index), [attachmentReferences, references, skillReferences]);
|
||
const canStop = Boolean(running && onStop);
|
||
const canSubmit = !disabled && !sending && Boolean(prompt.trim() || attachments.length);
|
||
const reducedMotion = useReducedMotion();
|
||
const activeSlashIndex = Math.min(Math.max(slashIndex, 0), Math.max(slashCandidates.length - 1, 0));
|
||
|
||
const handlePromptContentSizeChange = useCallback((naturalHeight: number) => {
|
||
const nextHeight = clampAgentPromptHeight(naturalHeight);
|
||
// 用户开始拖动后，面板高度由用户掌控；超出部分交给内部滚动区，
|
||
// 避免输入新内容时又把手动缩小的面板强行撑开。
|
||
setPromptHeight((currentHeight) => (manualPromptHeightRef.current === null ? nextHeight : currentHeight));
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (prompt.trim()) return;
|
||
manualPromptHeightRef.current = null;
|
||
setPromptHeight(MIN_AGENT_PROMPT_HEIGHT);
|
||
}, [prompt]);
|
||
|
||
const startPromptResize = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||
if (disabled) return;
|
||
event.preventDefault();
|
||
manualPromptHeightRef.current = promptHeight;
|
||
promptResizeRef.current = { startY: event.clientY, startHeight: promptHeight };
|
||
event.currentTarget.setPointerCapture(event.pointerId);
|
||
};
|
||
|
||
const resizePrompt = (event: ReactPointerEvent<HTMLButtonElement>) => {
|
||
const resize = promptResizeRef.current;
|
||
if (!resize) return;
|
||
setPromptHeight(clampAgentPromptHeight(resize.startHeight + resize.startY - event.clientY));
|
||
};
|
||
|
||
const finishPromptResize = (event?: ReactPointerEvent<HTMLButtonElement>) => {
|
||
promptResizeRef.current = null;
|
||
if (event?.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
|
||
};
|
||
|
||
const resizePromptByKeyboard = (event: ReactKeyboardEvent<HTMLButtonElement>) => {
|
||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
||
event.preventDefault();
|
||
manualPromptHeightRef.current = promptHeight;
|
||
setPromptHeight(clampAgentPromptHeight(promptHeight + (event.key === "ArrowUp" ? 20 : -20)));
|
||
};
|
||
|
||
// 在输入值末尾检测「/ 或 、+ 关键词」打开技能候选：中文输入法下 "/" 会打成 "、"，两者等价，且都必须紧跟行首或空白，避免中文顿号误触发。选中后写入稳定 token，编辑器再把它渲染为技能 chip。
|
||
const handlePromptChange = (value: string) => {
|
||
onPromptChange(value);
|
||
const match = /(^|\s)[/、]([^\s/、]*)$/.exec(value);
|
||
if (match && availableSlashSkills.length) {
|
||
const next = { start: match.index + match[1].length, query: match[2] };
|
||
setSlash((current) => (current && current.start === next.start && current.query === next.query ? current : next));
|
||
setSlashIndex(0);
|
||
} else if (slash) {
|
||
setSlash(null);
|
||
}
|
||
};
|
||
|
||
const applySlashSkill = (skill: Skill) => {
|
||
const token = `@[skill:${skill.skillId}] `;
|
||
// 触发符 "/" 与 "、" 都是单字符，替换长度固定为 1。
|
||
const next = slash ? `${prompt.slice(0, slash.start)}${token}${prompt.slice(slash.start + 1 + slash.query.length)}` : prompt ? `${prompt.replace(/\s+$/u, "")} ${token}` : token;
|
||
setSlash(null);
|
||
setSlashIndex(0);
|
||
onPromptChange(next);
|
||
};
|
||
|
||
// slash 菜单的键盘控制在 capture 阶段拦截（contentEditable/textarea 内部先消费 Enter，外层冒泡拿不到）
|
||
const handleSlashKeyCapture = (event: ReactKeyboardEvent) => {
|
||
if (!slash || !slashCandidates.length) return;
|
||
if (event.nativeEvent.isComposing || event.keyCode === 229) return;
|
||
if (event.key === "ArrowDown") {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setSlashIndex((index) => Math.min(index + 1, slashCandidates.length - 1));
|
||
} else if (event.key === "ArrowUp") {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setSlashIndex((index) => Math.max(index - 1, 0));
|
||
} else if (event.key === "Enter" || event.key === "Tab") {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
applySlashSkill(slashCandidates[activeSlashIndex]);
|
||
} else if (event.key === "Escape") {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
setSlash(null);
|
||
}
|
||
};
|
||
|
||
// 保留粘贴图片成附件（contentEditable 模式内部会把粘贴转纯文本，capture 阶段先拦截图片）
|
||
const handlePasteCapture = (event: ReactClipboardEvent) => {
|
||
if (!onAddFiles) return;
|
||
const images = Array.from(event.clipboardData.files).filter((file) => file.type.startsWith("image/"));
|
||
if (!images.length) return;
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
void onAddFiles(images);
|
||
};
|
||
|
||
const insertAttachmentMention = (item: CloudAgentChatAttachment) => {
|
||
const token = `@[attachment:${item.id}] `;
|
||
if (prompt.includes(`@[attachment:${item.id}]`)) return;
|
||
onPromptChange(prompt ? `${prompt.replace(/\s+$/u, "")} ${token}` : token);
|
||
};
|
||
|
||
return (
|
||
<div className="agent-composer-wrap min-w-0 shrink-0" onWheelCapture={(event) => event.stopPropagation()}>
|
||
{/* 有底部附加内容时，外壳托住输入卡片与底部条，形成一张整卡。 */}
|
||
<div className="agent-composer-shell relative" data-has-footer={footer ? "" : undefined}>
|
||
{/* 整卡模式下发送光环包住整张卡，避免画在输入区与连接器之间形成一条线。 */}
|
||
{footer && sending && !reducedMotion ? <WorkingGlow active color={theme.accent.primary} radius={22} /> : null}
|
||
<div
|
||
className="agent-composer-surface group/composer relative transition-[background-color,box-shadow] duration-200"
|
||
style={{
|
||
color: theme.accent.primary,
|
||
}}
|
||
>
|
||
{!footer && sending && !reducedMotion ? <WorkingGlow active color={theme.accent.primary} radius={22} /> : null}
|
||
{attachments.length ? (
|
||
<div className="thin-scrollbar mb-2 flex gap-2 overflow-x-auto pb-1">
|
||
{attachments.map((item, index) => (
|
||
<div key={item.id} className="group relative w-20 shrink-0">
|
||
<button
|
||
type="button"
|
||
className="relative block size-20 overflow-hidden rounded-lg"
|
||
title="点击放大预览"
|
||
aria-label={`预览 ${item.name || `图片${index + 1}`}`}
|
||
onClick={() => setPreviewAttachment(item)}
|
||
onDoubleClick={() => setPreviewAttachment(item)}
|
||
>
|
||
<img src={item.url} alt={item.name} className="size-full object-cover" />
|
||
</button>
|
||
<div className="mt-1 flex min-w-0 items-center justify-between gap-1">
|
||
<button type="button" className="flex min-w-0 items-center gap-0.5 truncate text-[var(--fs-tiny)] opacity-80 hover:opacity-100" title={`插入 @图片${index + 1}`} onClick={() => insertAttachmentMention(item)}>
|
||
<AtSign className="size-2.5 shrink-0" />
|
||
<span className="truncate">图片{index + 1}</span>
|
||
</button>
|
||
{onRemoveAttachment ? (
|
||
<button
|
||
type="button"
|
||
className="grid size-4 shrink-0 place-items-center rounded-full opacity-70 hover:opacity-100"
|
||
style={{ background: theme.toolbar.panel, color: theme.node.text }}
|
||
onClick={() => onRemoveAttachment(item.id)}
|
||
aria-label="移除图片"
|
||
>
|
||
<X className="size-3" />
|
||
</button>
|
||
) : null}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
<div className="relative" onKeyDownCapture={handleSlashKeyCapture} onPasteCapture={handlePasteCapture}>
|
||
<button
|
||
type="button"
|
||
role="separator"
|
||
aria-orientation="horizontal"
|
||
aria-label="调整提示词面板高度"
|
||
aria-valuemin={MIN_AGENT_PROMPT_HEIGHT}
|
||
aria-valuemax={MAX_AGENT_PROMPT_HEIGHT}
|
||
aria-valuenow={promptHeight}
|
||
className="agent-composer-resize-handle"
|
||
style={{ color: theme.node.muted }}
|
||
onPointerDown={startPromptResize}
|
||
onPointerMove={resizePrompt}
|
||
onPointerUp={finishPromptResize}
|
||
onPointerCancel={finishPromptResize}
|
||
onKeyDown={resizePromptByKeyboard}
|
||
>
|
||
<span />
|
||
</button>
|
||
<div className="agent-composer-prompt-scroll" style={{ height: promptHeight }}>
|
||
<CanvasResourceMentionTextarea
|
||
value={prompt}
|
||
references={composerReferences}
|
||
includeAssetLibrary={includeAssetLibrary}
|
||
sendOnEnter={canSubmit ? "both" : false}
|
||
disabled={disabled}
|
||
onChange={handlePromptChange}
|
||
onSubmit={() => {
|
||
if (canSubmit) onSubmit();
|
||
}}
|
||
onContentSizeChange={handlePromptContentSizeChange}
|
||
className="w-full resize-none border-0 bg-transparent px-1 py-1 text-sm leading-5 outline-none placeholder:opacity-45"
|
||
containerClassName="min-h-[60px] h-full"
|
||
style={{ color: theme.node.text }}
|
||
placeholder={placeholder}
|
||
aria-label="Agent 输入"
|
||
/>
|
||
</div>
|
||
{slash && slashCandidates.length ? (
|
||
<div
|
||
data-agent-slash-menu
|
||
className="absolute bottom-full left-0 z-[var(--z-toolbar)] mb-2 w-full max-w-xs overflow-hidden rounded-2xl p-1.5 shadow-2xl"
|
||
style={{ background: theme.toolbar.panel, boxShadow: `0 18px 44px ${theme.spatial.shadow}` }}
|
||
onMouseDown={(event) => event.preventDefault()}
|
||
>
|
||
{slashCandidates.map((skill, index) => (
|
||
<button
|
||
key={skill.skillId}
|
||
type="button"
|
||
className="flex w-full min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs"
|
||
style={{ background: index === activeSlashIndex ? theme.toolbar.itemHover : "transparent", color: theme.node.text }}
|
||
onMouseEnter={() => setSlashIndex(index)}
|
||
onClick={() => applySlashSkill(skill)}
|
||
>
|
||
<Sparkles className="size-3.5 shrink-0 opacity-70" />
|
||
<span className="min-w-0 truncate font-medium">{skill.skillName}</span>
|
||
{skill.description ? <span className="min-w-0 flex-1 truncate opacity-50">{skill.description}</span> : null}
|
||
</button>
|
||
))}
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
<div className="agent-composer-toolbar mt-2">
|
||
<div className="agent-composer-controls flex min-w-0 items-center gap-1">
|
||
{onAddFiles ? (
|
||
<>
|
||
<input
|
||
ref={fileInputRef}
|
||
hidden
|
||
type="file"
|
||
accept="image/*"
|
||
multiple
|
||
onChange={(event) => {
|
||
void onAddFiles(event.target.files);
|
||
event.target.value = "";
|
||
}}
|
||
/>
|
||
<Tooltip title="上传图片">
|
||
<Button
|
||
type="text"
|
||
shape="circle"
|
||
className="!h-8 !w-8 !min-w-8 !transition-transform hover:!scale-105 active:!scale-95"
|
||
disabled={sending}
|
||
style={{ color: theme.node.muted }}
|
||
icon={<ImagePlus className="size-4" />}
|
||
onClick={() => fileInputRef.current?.click()}
|
||
/>
|
||
</Tooltip>
|
||
</>
|
||
) : null}
|
||
{left}
|
||
</div>
|
||
<div className="agent-composer-submit flex items-center gap-2">
|
||
{submitAccessory}
|
||
{canStop ? (
|
||
<motion.button
|
||
type="button"
|
||
disabled={stopping}
|
||
aria-label="停止本轮"
|
||
title="停止当前 Agent 运行"
|
||
onClick={() => void onStop?.()}
|
||
whileHover={!reducedMotion && !stopping ? { scale: 1.06, y: -1 } : undefined}
|
||
whileTap={!reducedMotion && !stopping ? { scale: 0.9, y: 1 } : undefined}
|
||
animate={stopping && !reducedMotion ? { scale: [1, 0.94, 1] } : { scale: 1 }}
|
||
transition={{ type: "spring", stiffness: 420, damping: 24 }}
|
||
className="grid size-7 shrink-0 place-items-center rounded-full p-0 outline-none transition-[background-color,box-shadow,color,transform] duration-200 focus-visible:ring-2 focus-visible:ring-current/35 disabled:cursor-not-allowed"
|
||
style={{ background: theme.accent.danger, color: theme.accent.onPrimary }}
|
||
>
|
||
{stopping ? <LoaderCircle className="size-4 animate-spin" /> : <Square className="size-3.5" fill="currentColor" />}
|
||
</motion.button>
|
||
) : null}
|
||
<motion.button
|
||
type="button"
|
||
disabled={!canSubmit}
|
||
aria-label={sending ? "发送中" : canStop ? "插话" : "发送"}
|
||
title={canStop ? "插话：Agent 下一次开口时看到它" : "点击发送；Enter 或 ⌘/Ctrl+Enter 发送"}
|
||
onClick={() => onSubmit()}
|
||
whileHover={canSubmit && !reducedMotion ? { scale: 1.06, y: -1 } : undefined}
|
||
whileTap={canSubmit && !reducedMotion ? { scale: 0.9, y: 1 } : undefined}
|
||
animate={stopping && !reducedMotion ? { scale: [1, 0.94, 1] } : { scale: 1, rotate: 0 }}
|
||
transition={sending && !reducedMotion ? { duration: 0.42, ease: "easeOut" } : { type: "spring", stiffness: 420, damping: 24 }}
|
||
data-icon-only
|
||
className="agent-composer-send grid size-7 shrink-0 place-items-center rounded-full p-0 outline-none transition-[background-color,box-shadow,color,transform] duration-200 focus-visible:ring-2 focus-visible:ring-current/35 disabled:cursor-not-allowed"
|
||
style={{
|
||
background: canSubmit || sending ? theme.accent.primary : theme.spatial.surface,
|
||
color: canSubmit || sending ? theme.accent.onPrimary : theme.node.muted,
|
||
}}
|
||
>
|
||
<motion.span
|
||
key={stopping ? "stopping" : sending ? "sending" : "ready"}
|
||
initial={reducedMotion ? false : { opacity: 0, scale: 0.65, rotate: sending ? -25 : 25 }}
|
||
animate={{ opacity: 1, scale: 1, rotate: 0 }}
|
||
transition={{ duration: reducedMotion ? 0 : 0.18, ease: "easeOut" }}
|
||
className="grid place-items-center"
|
||
>
|
||
{sending ? <LoaderCircle className="size-3.5 animate-spin" /> : <ArrowUp className="size-3.5" />}
|
||
</motion.span>
|
||
</motion.button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{footer}
|
||
</div>
|
||
{previewAttachment ? <AgentImagePreview attachment={previewAttachment} onClose={() => setPreviewAttachment(null)} /> : null}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export function AgentImagePreview({ attachment, onClose }: { attachment: CloudAgentChatAttachment; onClose: () => void }) {
|
||
return (
|
||
<div className="fixed inset-0 z-[var(--z-dialog-popover)] grid place-items-center bg-black/80 p-6" role="dialog" aria-label={attachment.name} onClick={onClose}>
|
||
<img src={attachment.url} alt={attachment.name} className="max-h-[90vh] max-w-[92vw] rounded-xl object-contain shadow-2xl" onClick={(event) => event.stopPropagation()} />
|
||
<button type="button" className="absolute right-5 top-5 rounded-full bg-black/60 p-2 text-white" onClick={onClose} aria-label="关闭图片预览">
|
||
<X className="size-5" />
|
||
</button>
|
||
</div>
|
||
);
|
||
}
|