feat: add orchestration state progress indicator
- 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>
This commit is contained in:
@@ -2,15 +2,19 @@
|
||||
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(),
|
||||
@@ -32,6 +36,7 @@
|
||||
|
||||
try {
|
||||
for await (const response of processRequest(sessionId, content)) {
|
||||
orchestrationState = response.state;
|
||||
const idx = messages.length - 1;
|
||||
messages[idx] = {
|
||||
...messages[idx],
|
||||
@@ -44,7 +49,6 @@
|
||||
? `Error (${err.code}): ${err.message}`
|
||||
: 'An unexpected error occurred';
|
||||
error = msg;
|
||||
// Update the assistant message with the error
|
||||
const idx = messages.length - 1;
|
||||
messages[idx] = {
|
||||
...messages[idx],
|
||||
@@ -63,6 +67,10 @@
|
||||
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user