<script lang="ts">
import { appStore } from '$lib/store.svelte.js';
</script>
{#if appStore.streamingTokens}
<div class="message" role="status" aria-label="Assistant is typing">
<div class="role-header" aria-hidden="true">
<span class="diamond">◆</span>
<span class="role-name">assistant</span>
<span class="role-line">────────────────────────────────</span>
</div>
<pre class="content">{appStore.streamingTokens}<span class="cursor" aria-hidden="true">▋</span></pre>
</div>
{/if}
<style>
.message {
padding: 0.125rem 0;
}
.role-header {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.375rem;
font-size: 0.8125rem;
line-height: 1;
}
.diamond {
color: var(--accent);
flex-shrink: 0;
}
.role-name {
color: var(--accent);
font-weight: 600;
flex-shrink: 0;
}
.role-line {
color: var(--border);
overflow: hidden;
white-space: nowrap;
flex: 1;
min-width: 0;
letter-spacing: -0.05em;
}
.content {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--fg);
font-family: inherit;
font-size: 0.9375rem;
line-height: 1.6;
}
.cursor {
color: var(--accent);
animation: blink 1s step-end infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
</style>