93 lines
3.1 KiB
TypeScript
93 lines
3.1 KiB
TypeScript
import { useState, type ReactNode } from "react";
|
|
import { Check, Copy, LoaderCircle, CircleAlert } from "lucide-react";
|
|
import { MessageAction, MessageActions } from "@/shared/ai-elements/message";
|
|
import { getAnswerPartsTranscript } from "../answer-ui/answer-presentation";
|
|
import type { AnswerUiPart } from "../answer-ui/contract";
|
|
|
|
export function AgentChatMessageHeader({ running }: { running: boolean }) {
|
|
if (!running) return null;
|
|
return (
|
|
<div className="agent-chat-message-header justify-start text-left">
|
|
<span
|
|
role="status"
|
|
className="inline-flex items-center gap-1.5 text-sm leading-5 text-muted-foreground"
|
|
>
|
|
<LoaderCircle size={14} className="motion-safe:animate-spin" aria-hidden="true" />
|
|
正在回复
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export const AGENT_MESSAGE_ACTION_CLASS_NAME =
|
|
"h-8 min-w-8 gap-1.5 px-2 text-sm font-normal text-muted-foreground shadow-none after:inset-0";
|
|
export const AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME = "hidden @[320px]/agent-message-actions:inline";
|
|
|
|
export function AgentChatMessageToolbar({
|
|
speech,
|
|
copy,
|
|
children
|
|
}: {
|
|
speech?: ReactNode;
|
|
copy?: ReactNode;
|
|
children?: ReactNode;
|
|
}) {
|
|
return (
|
|
<div
|
|
data-agent-message-footer
|
|
className="@container/agent-message-actions mt-2 border-t border-border/70 pt-1"
|
|
>
|
|
<div data-agent-message-toolbar className="flex min-h-8 min-w-0 items-center gap-1">
|
|
{children}
|
|
<div className="ml-auto flex shrink-0 items-center gap-1">
|
|
{speech}
|
|
{copy}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function AgentChatMessageActions({ parts }: { parts: AnswerUiPart[] }) {
|
|
const [copied, setCopied] = useState(false);
|
|
const [error, setError] = useState(false);
|
|
const text = getAnswerPartsTranscript(parts);
|
|
if (!text.trim()) return null;
|
|
|
|
return (
|
|
<MessageActions className="agent-chat-message-actions">
|
|
<MessageAction
|
|
tooltip={error ? "复制失败，点击重试" : copied ? "回复已复制" : "复制回复"}
|
|
label={copied ? "回复已复制" : "复制回复"}
|
|
size="sm"
|
|
className={AGENT_MESSAGE_ACTION_CLASS_NAME}
|
|
aria-label={copied ? "回复已复制" : "复制回复"}
|
|
onClick={async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(text);
|
|
setCopied(true);
|
|
setError(false);
|
|
} catch {
|
|
setCopied(false);
|
|
setError(true);
|
|
}
|
|
}}
|
|
>
|
|
{error ? (
|
|
<CircleAlert size={16} className="text-destructive" aria-hidden="true" />
|
|
) : copied ? (
|
|
<Check size={16} aria-hidden="true" />
|
|
) : (
|
|
<Copy size={16} aria-hidden="true" />
|
|
)}
|
|
<span className={AGENT_MESSAGE_ACTION_LABEL_CLASS_NAME}>
|
|
{error ? "重试复制" : copied ? "已复制" : "复制"}
|
|
</span>
|
|
</MessageAction>
|
|
<span role="status" className="sr-only">
|
|
{error ? "复制失败，请选择文字复制" : copied ? "已复制回复文字与交互内容摘要" : ""}
|
|
</span>
|
|
</MessageActions>
|
|
);
|
|
}
|