1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script lang="ts">
import SessionBreadcrumb from "../layout/SessionBreadcrumb.svelte";
import MessageList from "./MessageList.svelte";
import { sessions } from "../../stores/sessions.svelte.js";
import type { DisplayItem } from "../../utils/display-items.js";
interface Props {
bindMessageList?: {
scrollToOrdinal: (o: number) => void;
getDisplayItems: () => DisplayItem[];
getNormalDisplayItems: () => DisplayItem[];
} | undefined;
}
let { bindMessageList = $bindable() }: Props = $props();
</script>
{#if sessions.activeSessionId}
<SessionBreadcrumb
session={sessions.activeSession}
onBack={() => sessions.deselectSession()}
/>
<MessageList bind:this={bindMessageList} />
{:else}
<div class="session-empty">Select a session from the sidebar.</div>
{/if}
<style>
.session-empty {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: var(--vscode-disabledForeground);
font-size: var(--wb-font-size-13);
}
</style>