28 lines
1.4 KiB
Svelte
28 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { AISessionItem, InspectorItem } from '../types';
|
|
|
|
export let sessions: AISessionItem[];
|
|
export let onInspect: (item: InspectorItem) => void;
|
|
let selectedSessionID = sessions[0]?.id;
|
|
|
|
$: selectedSession = sessions.find((session) => session.id === selectedSessionID) ?? sessions[0];
|
|
|
|
function inspectSession(session: AISessionItem) {
|
|
onInspect({ title: session.title, type: 'AI session', description: session.summary, properties: [{ label: 'Updated', value: session.updatedAt }, { label: 'References', value: session.references.join(', ') }] });
|
|
}
|
|
</script>
|
|
|
|
<section class="channel-page ai-sessions-channel">
|
|
<header class="channel-header"><p>Project intelligence</p><h1>AI Sessions</h1></header>
|
|
<div class="session-layout">
|
|
<div class="session-list">
|
|
{#each sessions as session}
|
|
<button class:active={selectedSession?.id === session.id} on:click={() => (selectedSessionID = session.id)}>{session.title}<small>{session.updatedAt}</small></button>
|
|
{/each}
|
|
</div>
|
|
{#if selectedSession}
|
|
<article class="conversation-summary"><h2>{selectedSession.title}</h2><p>{selectedSession.summary}</p><p>References: {selectedSession.references.join(', ')}</p><button aria-label={`Inspect ${selectedSession.title}`} on:click={() => inspectSession(selectedSession)}>Inspect</button></article>
|
|
{/if}
|
|
</div>
|
|
</section>
|