chat-messages: render and batch-submit multiple HITL approval cards

This commit is contained in:
CREDO23 2026-05-13 21:00:01 +02:00
parent 0fd87ccb7f
commit 1bb9f435e5
5 changed files with 160 additions and 76 deletions

View file

@ -11,10 +11,9 @@ const noopSubmit = () => {};
/**
* assistant-ui data UI for the ``thinking-steps`` data-part.
*
* Re-scopes the global ``PendingInterruptProvider`` per message: the
* approval card only mounts under the assistant message that owns
* the interrupt (otherwise every message in scrollback would render
* its own card).
* Re-scopes the global ``PendingInterruptProvider`` per message: approval
* cards only mount under the assistant message that owns the interrupt
* (otherwise every message in scrollback would render its own cards).
*/
function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);
@ -23,10 +22,10 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
const content = useAuiState(({ message }) => message?.content);
const messageId = useAuiState(({ message }) => message?.id);
const pendingValue = usePendingInterrupt();
const pendingForThisMessage =
pendingValue?.pendingInterrupt && pendingValue.pendingInterrupt.assistantMsgId === messageId
? pendingValue.pendingInterrupt
: null;
const pendingForThisMessage = useMemo(
() => (pendingValue?.pendingInterrupts ?? []).filter((p) => p.assistantMsgId === messageId),
[pendingValue?.pendingInterrupts, messageId]
);
const onSubmit = pendingValue?.onSubmit ?? noopSubmit;
const steps = useMemo<ThinkingStepInput[]>(
@ -39,11 +38,11 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
[steps, content]
);
if (items.length === 0 && !pendingForThisMessage) return null;
if (items.length === 0 && pendingForThisMessage.length === 0) return null;
return (
<div className="mb-3 -mx-2 leading-normal">
<PendingInterruptProvider pendingInterrupt={pendingForThisMessage} onSubmit={onSubmit}>
<PendingInterruptProvider pendingInterrupts={pendingForThisMessage} onSubmit={onSubmit}>
<Timeline items={items} isThreadRunning={isMessageStreaming} />
</PendingInterruptProvider>
</div>