llm-multiverse/llm-multiverse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add session history sidebar with delete and navigation

Browse Source 
- SessionSidebar component listing past sessions sorted by recency
- Session title preview and relative date display
- Click to switch sessions, delete with confirmation
- Added deleteSession method to session store
- Integrated sidebar into chat page layout

Closes #12

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
shahondin1624
2026-03-12 11:55:58 +01:00
parent ed0a01c857
commit 19c3c2bcdc
5 changed files with 165 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/routes/chat/+page.svelte
View File

@@ -9,6 +9,7 @@
import OrchestrationProgress from '$lib/components/OrchestrationProgress.svelte';
import ThinkingSection from '$lib/components/ThinkingSection.svelte';
import FinalResult from '$lib/components/FinalResult.svelte';
import SessionSidebar from '$lib/components/SessionSidebar.svelte';
import { processRequest, OrchestratorError } from '$lib/services/orchestrator';
import { OrchestrationState } from '$lib/proto/llm_multiverse/v1/orchestrator_pb';
import { sessionStore } from '$lib/stores/sessions.svelte';
@@ -20,15 +21,18 @@
let intermediateResult: string = $state('');
let finalResult: SubagentResult | null = $state(null);
// Initialize session from URL or create new one
function navigateToSession(sessionId: string, replace = false) {
const url = `${resolveRoute('/chat')}?session=${sessionId}`;
// eslint-disable-next-line svelte/no-navigation-without-resolve
goto(url, { replaceState: replace });
}
$effect(() => {
const sessionParam = $page.url.searchParams.get('session');
const session = sessionStore.getOrCreateSession(sessionParam ?? undefined);
messages = [...session.messages];
if (!sessionParam || sessionParam !== session.id) {
const url = `${resolveRoute('/chat')}?session=${session.id}`;
// eslint-disable-next-line svelte/no-navigation-without-resolve
goto(url, { replaceState: true });
navigateToSession(session.id, true);
}
});
@@ -37,9 +41,18 @@
messages = [];
error = null;
finalResult = null;
const url = `${resolveRoute('/chat')}?session=${session.id}`;
// eslint-disable-next-line svelte/no-navigation-without-resolve
goto(url);
navigateToSession(session.id);
}
function handleSelectSession(id: string) {
sessionStore.switchSession(id);
const session = sessionStore.activeSession;
if (session) {
messages = [...session.messages];
error = null;
finalResult = null;
navigateToSession(id);
}
}
async function handleSend(content: string) {
@@ -102,47 +115,46 @@
}
</script>
<div class="flex h-screen flex-col">
<header class="flex items-center justify-between border-b border-gray-200 bg-white px-4 py-3">
<h1 class="text-lg font-semibold text-gray-900">Chat</h1>
<button
type="button"
onclick={handleNewChat}
class="rounded-lg bg-gray-100 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-200"
>
New Chat
</button>
</header>
<div class="flex h-screen">
<SessionSidebar onSelectSession={handleSelectSession} onNewChat={handleNewChat} />
<MessageList {messages} />
<div class="flex flex-1 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>
{#if isStreaming}
<OrchestrationProgress state={orchestrationState} />
<ThinkingSection content={intermediateResult} />
{/if}
<MessageList {messages} />
{#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>
{#if isStreaming}
<OrchestrationProgress state={orchestrationState} />
<ThinkingSection content={intermediateResult} />
{/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>
</div>
{/if}
{/if}
{#if finalResult && !isStreaming}
<FinalResult result={finalResult} />
{/if}
{#if finalResult && !isStreaming}
<FinalResult result={finalResult} />
{/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}
{#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} />
<MessageInput onSend={handleSend} disabled={isStreaming} />
</div>
</div>