diff --git a/implementation-plans/_index.md b/implementation-plans/_index.md index 4d28889..f4aa207 100644 --- a/implementation-plans/_index.md +++ b/implementation-plans/_index.md @@ -10,3 +10,4 @@ | #6 | Message input with send and keyboard shortcuts | COMPLETED | [issue-006.md](issue-006.md) | | #7 | Streaming response rendering | COMPLETED | [issue-007.md](issue-007.md) | | #8 | Orchestration state progress indicator | COMPLETED | [issue-008.md](issue-008.md) | +| #9 | Intermediate results display | COMPLETED | [issue-009.md](issue-009.md) | diff --git a/implementation-plans/issue-009.md b/implementation-plans/issue-009.md new file mode 100644 index 0000000..e412a75 --- /dev/null +++ b/implementation-plans/issue-009.md @@ -0,0 +1,17 @@ +--- +--- + +# Issue #9: Intermediate results display + +**Status:** COMPLETED +**Issue:** https://git.shahondin1624.de/llm-multiverse/llm-multiverse-ui/issues/9 +**Branch:** `feature/issue-9-intermediate-results` + +## Acceptance Criteria + +- [x] Collapsible "thinking" section component +- [x] Displays intermediate_result content when present in stream +- [x] Positioned below the orchestration progress indicator +- [x] Collapsed by default, expandable on click +- [x] Updates as new intermediate results arrive +- [x] Visually distinct from final results (muted amber styling) diff --git a/src/lib/components/ThinkingSection.svelte b/src/lib/components/ThinkingSection.svelte new file mode 100644 index 0000000..df4a829 --- /dev/null +++ b/src/lib/components/ThinkingSection.svelte @@ -0,0 +1,31 @@ + + +{#if content} +
+ + {#if expanded} +
+ {content} +
+ {/if} +
+{/if} diff --git a/src/routes/chat/+page.svelte b/src/routes/chat/+page.svelte index c86b2b1..d29a0a0 100644 --- a/src/routes/chat/+page.svelte +++ b/src/routes/chat/+page.svelte @@ -3,6 +3,7 @@ import MessageList from '$lib/components/MessageList.svelte'; import MessageInput from '$lib/components/MessageInput.svelte'; import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte'; + import ThinkingSection from '$lib/components/ThinkingSection.svelte'; import { processRequest, OrchestratorError } from '$lib/services/orchestrator'; import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb'; @@ -11,10 +12,12 @@ let error: string | null = $state(null); let sessionId = $state(crypto.randomUUID()); let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED); + let intermediateResult: string = $state(''); async function handleSend(content: string) { error = null; orchestrationState = OrchestrationState.UNSPECIFIED; + intermediateResult = ''; const userMessage: ChatMessage = { id: crypto.randomUUID(), @@ -37,6 +40,9 @@ try { for await (const response of processRequest(sessionId, content)) { orchestrationState = response.state; + if (response.intermediateResult) { + intermediateResult = response.intermediateResult; + } const idx = messages.length - 1; messages[idx] = { ...messages[idx], @@ -69,6 +75,7 @@ {#if isStreaming} + {/if} {#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}