fix: unify chat process and reply presentation

src/features/agent/components/agent-chat-message-chrome.tsx

@@ -1,36 +1,49 @@
-import { useState } from "react";
-import { Check, Copy, LoaderCircle } from "lucide-react";
-import { Badge } from "@/shared/ui/badge";
+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,
-  interactive
-}: {
-  running: boolean;
-  interactive: boolean;
-}) {
-  if (!running && !interactive) return null;
-
+export function AgentChatMessageHeader({ running }: { running: boolean }) {
+  if (!running) return null;
   return (
-    <div className="agent-chat-message-header">
-      {running ? (
-        <span
-          role="status"
-          className="ml-auto inline-flex items-center gap-1.5 text-[11px] text-muted-foreground"
-        >
-          <LoaderCircle size={12} className="motion-safe:animate-spin" aria-hidden="true" />
-          正在回复
-        </span>
-      ) : interactive ? (
-        <Badge
-          variant="secondary"
-          className="ml-auto border-0 px-2 py-0.5 text-[10px] font-medium shadow-none"
-        >
-          交互回答
-        </Badge>
-      ) : null}
+    <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>
   );
 }
@@ -38,18 +51,16 @@ export function AgentChatMessageHeader({
 export function AgentChatMessageActions({ parts }: { parts: AnswerUiPart[] }) {
   const [copied, setCopied] = useState(false);
   const [error, setError] = useState(false);
-  const text = parts
-    .map((part) => (part.type === "text" ? part.text : part.block.fallback_text))
-    .join("\n\n");
+  const text = getAnswerPartsTranscript(parts);
   if (!text.trim()) return null;
 
   return (
     <MessageActions className="agent-chat-message-actions">
       <MessageAction
-        tooltip={copied ? "回复已复制" : "复制回复"}
+        tooltip={error ? "复制失败，点击重试" : copied ? "回复已复制" : "复制回复"}
         label={copied ? "回复已复制" : "复制回复"}
         size="sm"
-        className="h-10 gap-1.5 px-2 text-[11px] font-normal shadow-none"
+        className={AGENT_MESSAGE_ACTION_CLASS_NAME}
         aria-label={copied ? "回复已复制" : "复制回复"}
         onClick={async () => {
           try {
@@ -62,10 +73,18 @@ export function AgentChatMessageActions({ parts }: { parts: AnswerUiPart[] }) {
           }
         }}
       >
-        {copied ? <Check size={13} aria-hidden="true" /> : <Copy size={13} aria-hidden="true" />}
-        {copied ? "已复制" : "复制回复"}
+        {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="text-[11px] text-muted-foreground">
+      <span role="status" className="sr-only">
         {error ? "复制失败，请选择文字复制" : copied ? "已复制回复文字与交互内容摘要" : ""}
       </span>
     </MessageActions>