<script lang="ts">
import Markdown from '../shared/Markdown.svelte';
let { role, content }: { role: 'user' | 'assistant' | 'system'; content: string } = $props();
</script>
<div class="message {role}">
{#if role === 'assistant'}
<div class="role-header assistant-header" aria-hidden="true">
<span class="diamond">◆</span>
<span class="role-name">assistant</span>
<span class="role-line">────────────────────────────────</span>
</div>
<div class="content">
<Markdown text={content} />
</div>
{:else if role === 'user'}
<div class="user-row">
<span class="prompt" aria-hidden="true">❯</span>
<pre class="user-text">{content}</pre>
</div>
{:else}
<!-- system message -->
<div class="system-row" role="note">
<span class="sys-bullet" aria-hidden="true">·</span>
<span class="sys-text">{content}</span>
</div>
{/if}
</div>
<style>
.message {
padding: 0.125rem 0;
}
/* ── Assistant ── */
.assistant-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 {
font-size: 0.9375rem;
line-height: 1.6;
padding-left: 0.0625rem;
}
/* ── User ── */
.user-row {
display: flex;
gap: 0.5rem;
align-items: flex-start;
}
.prompt {
color: var(--green);
font-weight: 700;
flex-shrink: 0;
line-height: 1.6;
font-size: 0.9375rem;
}
.user-text {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
color: var(--fg-bright);
font-family: inherit;
font-size: 0.9375rem;
line-height: 1.6;
}
/* ── System ── */
.system-row {
display: flex;
gap: 0.375rem;
align-items: baseline;
padding: 0.125rem 0;
}
.sys-bullet {
color: var(--fg-dim);
flex-shrink: 0;
font-size: 1rem;
}
.sys-text {
color: var(--fg-dim);
font-size: 0.8125rem;
white-space: pre-wrap;
word-break: break-word;
}
</style>