feat: add collapsible thinking section for intermediate results

- ThinkingSection component with expand/collapse toggle
- Displays intermediate_result from stream in amber-styled panel
- Positioned below orchestration progress indicator
- Updates in real-time as new intermediate results arrive

Closes #9

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:35:46 +01:00
parent 0674752e80
commit 959bb59874
4 changed files with 56 additions and 0 deletions

View File

@@ -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}
<OrchestrationProgress state={orchestrationState} />
<ThinkingSection content={intermediateResult} />
{/if}
{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}