windmill/frontend/src/lib/components/AgentStreamDisplay.svelte

<script lang="ts">
	import { untrack } from 'svelte'
	import ChatCollapsibleCard from './copilot/chat/ChatCollapsibleCard.svelte'
	import GfmMarkdown from './GfmMarkdown.svelte'
	import { runPane } from './agentScroll'
	import { createBottomSticker } from './stickToBottom'
	import {
		advanceAgentStream,
		emptyAgentStreamProgress,
		type AgentStreamProgress
	} from './aiAgentResult'

	interface Props {
		/** The raw `result_stream` buffer, which only ever grows for a given run. */
		raw: string
		/** Identifies the run, so a viewer reused for another one starts over. */
		streamKey?: string
	}

	let { raw, streamKey }: Props = $props()

	let progress: AgentStreamProgress & { key?: string } = $state(emptyAgentStreamProgress())

	$effect(() => {
		raw
		streamKey
		untrack(() => {
			// A shorter buffer than what was already folded in cannot be a longer
			// version of the same stream, so treat it as a different one.
			const continues = progress.key === streamKey && raw.length >= progress.consumed
			const base = continues ? progress : emptyAgentStreamProgress()
			progress = { ...advanceAgentStream(raw, base), key: streamKey }
			if (!continues) {
				// Another run, so the reader's decision to stop following the previous
				// one does not carry over: this one starts at its latest output.
				following = true
			}
		})
	})

	let stream = $derived(progress.stream)

	let anchor: HTMLElement | undefined = $state()
	// Carry the reader along as the text is written, unless they have scrolled up
	// to read something — then the pane is theirs until they come back to the end.
	let following = true
	const sticker = createBottomSticker()

	// The listener goes on the pane, not on this element: a scroll event fires on
	// whatever actually scrolled and does not bubble, so a handler here would never
	// run and the reader would be dragged back on every poll.
	$effect(() => {
		const pane = runPane(anchor)
		if (!pane) {
			return
		}
		const onScroll = () => {
			if (!sticker.isOwnScroll()) {
				following = sticker.isAtEnd(pane)
			}
		}
		pane.addEventListener('scroll', onScroll, { passive: true })
		return () => pane.removeEventListener('scroll', onScroll)
	})

	$effect(() => {
		stream.current
		stream.reasoning
		stream.entries.length
		if (following) {
			sticker.scrollToEnd(runPane(anchor))
		}
	})
</script>

<!-- One gap on the container rather than margins per child, and the same gap the
     finished trace uses: a turn's text must not shift when a tool call turns it from
     the live text into a row. The text at the bottom is deliberately unlabelled — a
     turn that goes on to call a tool was narration, and the run's end settles which. -->
<div bind:this={anchor} class="flex flex-col w-full py-3 gap-1">
	{#each stream.entries as entry, index (entry.kind === 'tool' ? entry.callId : index)}
		{#if entry.kind === 'tool'}
			<ChatCollapsibleCard
				label={entry.name}
				expanded={false}
				toggleable={false}
				shimmer={entry.running}
				onToggle={() => {}}
				labelClass={entry.success === false ? 'text-red-500' : ''}
			/>
		{:else}
			<div>
				<GfmMarkdown md={entry.content} noPadding />
			</div>
		{/if}
	{/each}

	{#if stream.current !== ''}
		<div>
			<!-- Same sanitizing chain as a finished output: a partial answer is written
			     by the same model and is no more trusted for arriving in pieces. -->
			<GfmMarkdown md={stream.current} noPadding />
		</div>
	{:else if stream.reasoning !== ''}
		<!-- Reasoning arrives before the text, so on its own it means the model is
		     still thinking rather than that this run has nothing to say. -->
		<div class="text-secondary">
			<GfmMarkdown md={stream.reasoning} prose="xs" noPadding />
		</div>
	{/if}
</div>