92 lines
4.1 KiB
TypeScript
92 lines
4.1 KiB
TypeScript
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";
|
|
|
|
export function AnswerPartsView({
|
|
parts,
|
|
messageId,
|
|
disabled,
|
|
streaming,
|
|
streamDone,
|
|
persist = false,
|
|
onLocate,
|
|
onSubmit,
|
|
}: {
|
|
parts: AnswerUiPart[];
|
|
messageId: string;
|
|
disabled: boolean;
|
|
streaming: boolean;
|
|
streamDone: boolean;
|
|
persist?: boolean;
|
|
onLocate?: (target: AnswerUiMapTarget) => Promise<unknown> | void;
|
|
onSubmit?: (text: string) => Promise<void> | void;
|
|
}) {
|
|
const persistence = useAnswerViewPersistence();
|
|
return (
|
|
<div className="flex min-w-0 flex-col gap-5" data-answer-parts>
|
|
{parts.map((part, index) =>
|
|
part.type === "answer-ui" ? (
|
|
<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}
|
|
/>
|
|
) : (
|
|
<StreamingTokenResponse
|
|
key={`text-${index}`}
|
|
className="leading-6"
|
|
content={part.text}
|
|
messageId={`${messageId}-${index}`}
|
|
streamDone={streamDone}
|
|
streaming={streaming}
|
|
/>
|
|
)
|
|
)}
|
|
</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>;
|
|
}
|