feat: expand intelligent investigation workspace

src/features/agent/answer-ui/answer-parts-view.tsx

@@ -1,7 +1,11 @@
+import { useState, type ComponentProps } from "react";
+import { X } from "lucide-react";
+import { Button } from "@/shared/ui/button";
+import { useAnswerViewPersistence, useAnswerViewState } from "../session-state/use-answer-view-state";
+import type { AnswerViewStateScope } from "../session-state/answer-view-state-scope";
 import { StreamingTokenResponse } from "../components/streaming-token-response";
 import { AnswerUiView, type AnswerUiMapTarget } from "./answer-ui-view";
 import type { AnswerUiPart } from "./contract";
-import type { AnswerUiSelection } from "./answer-ui-interaction-context";
 
 export function AnswerPartsView({
   parts,
@@ -9,30 +13,33 @@ export function AnswerPartsView({
   disabled,
   streaming,
   streamDone,
+  persist = false,
   onLocate,
   onSubmit,
-  onAsk
 }: {
   parts: AnswerUiPart[];
   messageId: string;
   disabled: boolean;
   streaming: boolean;
   streamDone: boolean;
+  persist?: boolean;
   onLocate?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
   onSubmit?: (text: string) => Promise<void> | void;
-  onAsk?: (selection: AnswerUiSelection) => void;
 }) {
+  const persistence = useAnswerViewPersistence();
   return (
-    <div className="space-y-4" data-answer-parts>
+    <div className="flex min-w-0 flex-col gap-5" data-answer-parts>
       {parts.map((part, index) =>
         part.type === "answer-ui" ? (
-          <AnswerUiView
+          <PersistableAnswerUiView
             key={`ui-${part.block.block_id}`}
             block={part.block}
+            persistence={persistence}
+            active={persist && part.block.phase !== "process"}
+            messageId={messageId}
             disabled={disabled}
             onLocate={onLocate}
             onSubmit={onSubmit}
-            onAsk={onAsk}
           />
         ) : (
           <StreamingTokenResponse
@@ -48,3 +55,37 @@ export function AnswerPartsView({
     </div>
   );
 }
+
+
+type PersistableProps = ComponentProps<typeof AnswerUiView> & {
+  messageId: string;
+  active: boolean;
+  persistence: { scope: AnswerViewStateScope; sessionId: string } | null;
+};
+function PersistableAnswerUiView({ persistence, messageId, active, ...props }: PersistableProps) {
+  if (!persistence) return <AnswerUiView {...props} />;
+  return <SavedAnswerUiView key={`${persistence.scope.scope}:${persistence.sessionId}:${messageId}:${props.block.block_id}`}
+    {...props} messageId={messageId} active={active} persistence={persistence} />;
+}
+function SavedAnswerUiView({ persistence, messageId, active, ...props }: PersistableProps & { persistence: NonNullable<PersistableProps["persistence"]> }) {
+  const saved = useAnswerViewState(persistence.scope, persistence.sessionId, messageId, props.block.block_id, props.block.spec, active);
+  const [confirmReload, setConfirmReload] = useState(false);
+  const label = { loading: "正在恢复交互状态", saving: "正在保存", saved: "已保存", unsaved: "未保存", conflict: "保存冲突" }[saved.status];
+  return <div className="space-y-2" data-answer-state={active ? saved.status : undefined}>
+    <AnswerUiView {...props} viewState={saved.state} onViewStateChange={saved.update} />
+    {active ? <div className="flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
+      <span role="status">{label}</span>
+      {saved.error ? <span>{saved.error}</span> : null}
+      {saved.status === "unsaved" ? <Button size="sm" variant="ghost" onClick={saved.retry}>重试保存</Button> : null}
+      {saved.status === "conflict" && !confirmReload ? <>
+        <Button size="sm" variant="ghost" onClick={() => setConfirmReload(true)}>重新加载远端</Button>
+        <Button size="sm" variant="ghost" onClick={saved.resave}>保留本地并重新保存</Button>
+      </> : null}
+      {confirmReload ? <div role="alert" className="flex flex-wrap items-center gap-2">
+        <span>重新加载将替换本块的本地筛选与表单草稿。</span>
+        <Button size="sm" variant="outline" onClick={() => { setConfirmReload(false); saved.reload(); }}>确认替换本地草稿</Button>
+        <Button size="icon-sm" variant="ghost" aria-label="取消重新加载" onClick={() => setConfirmReload(false)}><X aria-hidden /></Button>
+      </div> : null}
+    </div> : null}
+  </div>;
+}