apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-13 17:52:38 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chat: unify HITL approval UX behind a single paginated card and harden timeline supersede.

Browse source
This commit is contained in:
CREDO23 2026-05-09 21:44:54 +02:00
parent 89e4953800
commit 2e132513be
25 changed files with 604 additions and 1157 deletions
Download patch file Download diff file Expand all files Collapse all files

36
surfsense_web/features/chat-messages/timeline/data-renderer.tsx
View file

@ -2,25 +2,32 @@
import { makeAssistantDataUI, useAuiState } from "@assistant-ui/react";
import { useMemo } from "react";
import { PendingInterruptProvider, usePendingInterrupt } from "@/features/chat-messages/hitl";
import { buildTimeline, type ThinkingStepInput } from "./build-timeline";
import { Timeline } from "./timeline";
const noopSubmit = () => {};
/**
* assistant-ui data UI for the ``thinking-steps`` data-part. Receives
* the relay's step array as ``data``, reads message ``content`` via
* ``useAuiState``, builds the unified ``TimelineItem[]`` once
* (``buildTimeline`` is pure), and renders the ``Timeline``.
* assistant-ui data UI for the ``thinking-steps`` data-part.
*
* ``isMessageStreaming`` is the AND of thread-running + this-message-
* is-last; that flag drives the ``isThreadRunning`` runtime override
* in ``Timeline`` (stale "running" → "completed" once the thread
* stops). Mirrors the legacy ``ThinkingStepsDataRenderer`` semantics.
* 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).
*/
function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
const isThreadRunning = useAuiState(({ thread }) => thread.isRunning);
const isLastMessage = useAuiState(({ message }) => message?.isLast ?? false);
const isMessageStreaming = isThreadRunning && isLastMessage;
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 onSubmit = pendingValue?.onSubmit ?? noopSubmit;
const steps = useMemo<ThinkingStepInput[]>(
() => (data as { steps: ThinkingStepInput[] } | null)?.steps ?? [],
@ -32,21 +39,18 @@ function TimelineDataRenderer({ data }: { name: string; data: unknown }) {
[steps, content]
);
if (items.length === 0) return null;
if (items.length === 0 && !pendingForThisMessage) return null;
return (
<div className="mb-3 -mx-2 leading-normal">
<Timeline items={items} isThreadRunning={isMessageStreaming} />
<PendingInterruptProvider pendingInterrupt={pendingForThisMessage} onSubmit={onSubmit}>
<Timeline items={items} isThreadRunning={isMessageStreaming} />
</PendingInterruptProvider>
</div>
);
}
/**
* Drop-in replacement for the legacy ``ThinkingStepsDataUI``. Same
* registration name (``thinking-steps``) so consumers (assistant-
* message.tsx, public-thread.tsx, free-chat-page.tsx, etc.) just swap
* the import — no SSE relay changes, no message format changes.
*/
/** Registers under ``thinking-steps`` so consumers swap the import only. */
export const TimelineDataUI = makeAssistantDataUI({
name: "thinking-steps",
render: TimelineDataRenderer,