945dbb9f84
- OrchestrationProgress stepper component with 5 phases - Visual state: completed (green check), active (blue ring), pending (gray) - Smooth CSS transitions between states - Integrated into chat page, visible during streaming Closes #8 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
95 lines
2.7 KiB
Svelte
95 lines
2.7 KiB
Svelte
<script lang="ts">
|
|
import type { ChatMessage } from '$lib/types';
|
|
import MessageList from '$lib/components/MessageList.svelte';
|
|
import MessageInput from '$lib/components/MessageInput.svelte';
|
|
import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte';
|
|
import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
|
|
import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
|
|
|
|
let messages: ChatMessage[] = $state([]);
|
|
let isStreaming = $state(false);
|
|
let error: string | null = $state(null);
|
|
let sessionId = $state(crypto.randomUUID());
|
|
let orchestrationState: OrchestrationState = $state(OrchestrationState.UNSPECIFIED);
|
|
|
|
async function handleSend(content: string) {
|
|
error = null;
|
|
orchestrationState = OrchestrationState.UNSPECIFIED;
|
|
|
|
const userMessage: ChatMessage = {
|
|
id: crypto.randomUUID(),
|
|
role: 'user',
|
|
content,
|
|
timestamp: new Date()
|
|
};
|
|
messages.push(userMessage);
|
|
|
|
const assistantMessage: ChatMessage = {
|
|
id: crypto.randomUUID(),
|
|
role: 'assistant',
|
|
content: '',
|
|
timestamp: new Date()
|
|
};
|
|
messages.push(assistantMessage);
|
|
|
|
isStreaming = true;
|
|
|
|
try {
|
|
for await (const response of processRequest(sessionId, content)) {
|
|
orchestrationState = response.state;
|
|
const idx = messages.length - 1;
|
|
messages[idx] = {
|
|
...messages[idx],
|
|
content: response.message
|
|
};
|
|
}
|
|
} catch (err) {
|
|
const msg =
|
|
err instanceof OrchestratorError
|
|
? `Error (${err.code}): ${err.message}`
|
|
: 'An unexpected error occurred';
|
|
error = msg;
|
|
const idx = messages.length - 1;
|
|
messages[idx] = {
|
|
...messages[idx],
|
|
content: `⚠ ${msg}`
|
|
};
|
|
} finally {
|
|
isStreaming = false;
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="flex h-screen flex-col">
|
|
<header class="border-b border-gray-200 bg-white px-4 py-3">
|
|
<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
|
|
</header>
|
|
|
|
<MessageList {messages} />
|
|
|
|
{#if isStreaming}
|
|
<OrchestrationProgress state={orchestrationState} />
|
|
{/if}
|
|
|
|
{#if isStreaming && messages.length > 0 && messages[messages.length - 1].content === ''}
|
|
<div class="flex justify-start px-4 pb-2">
|
|
<div class="flex items-center gap-1.5 rounded-2xl bg-gray-200 px-4 py-2.5">
|
|
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:0ms]"
|
|
></span>
|
|
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:150ms]"
|
|
></span>
|
|
<span class="h-2 w-2 animate-bounce rounded-full bg-gray-500 [animation-delay:300ms]"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if error}
|
|
<div class="mx-4 mb-2 rounded-lg bg-red-50 px-4 py-2 text-sm text-red-600">
|
|
{error}
|
|
</div>
|
|
{/if}
|
|
|
|
<MessageInput onSend={handleSend} disabled={isStreaming} />
|
|
</div>
|