vhaudiquet
81da26b955
The stored `colors` key names a palette — rhema (the default, Jadeite), aquamarine, black-and-white, or dracula — and the Appearance page of /settings cycles it live, like the theme and icon toggles beside it. Each palette carries a dark and a light appearance under the existing `theme` key; dracula's light side is derived, the official palette ships only dark. The appearance decision moves off token comparison: Theme now answers is_dark() from the ground/text luminance, so palettes beyond the original two get the right per-profile fallback tones.
686 lines
17 KiB
Vue
686 lines
17 KiB
Vue
<script setup lang="ts">
|
||
// The transcript: sent lines and streamed turns, the turn in flight at
|
||
// the bottom. The claw owns the conversation — this renders what the
|
||
// event stream delivered, nothing more. The header names the session
|
||
// and hides the dispatch internals behind an info modal; the composer
|
||
// chips mirror live claw state; the backend chip jumps to settings.
|
||
import {
|
||
PASTE_INLINE_LINES,
|
||
chipLabel,
|
||
embedPastes,
|
||
lineCount,
|
||
normalizePaste,
|
||
pasteParts,
|
||
} from '~/composables/useTranscript'
|
||
import type { ClawSession, ConsentAnswer, StreamStatus } from '~/composables/useClaw'
|
||
import type { PastePart, TranscriptItem, TurnBlock } from '~/composables/useTranscript'
|
||
|
||
const props = defineProps<{
|
||
items: TranscriptItem[]
|
||
live: TurnBlock | null
|
||
activeKey: string
|
||
/** Only `interactive:*` keys accept messages (the claw 400s the rest). */
|
||
canSend: boolean
|
||
busy: boolean
|
||
session: ClawSession | null
|
||
activeBackend: { provider: string; model: string } | null
|
||
streamStatus: StreamStatus
|
||
identity?: { name: string | null; mark: string | null; initials: string | null } | null
|
||
avatarUrl?: string | null
|
||
}>()
|
||
|
||
const agentName = computed(() => props.identity?.name?.trim() || 'rhema')
|
||
|
||
const emit = defineEmits<{
|
||
send: [text: string]
|
||
openProviders: []
|
||
consentAnswer: [id: string, answer: ConsentAnswer]
|
||
consentDeny: [id: string]
|
||
downloadAttachment: [id: string, name: string]
|
||
}>()
|
||
|
||
const draft = ref('')
|
||
const scroller = ref<HTMLElement | null>(null)
|
||
/** Pin to the bottom only while the reader is already there. */
|
||
const pinned = ref(true)
|
||
|
||
function onScroll(): void {
|
||
const el = scroller.value
|
||
if (!el) return
|
||
pinned.value = el.scrollHeight - el.scrollTop - el.clientHeight < 48
|
||
}
|
||
|
||
watch(
|
||
() => [props.items.length, props.live?.reply.length, props.live?.thinking.length, props.live?.entries.length],
|
||
async () => {
|
||
if (!pinned.value) return
|
||
await nextTick()
|
||
const el = scroller.value
|
||
if (el) el.scrollTop = el.scrollHeight
|
||
},
|
||
)
|
||
|
||
function submit(): void {
|
||
const text = draft.value.trim()
|
||
if (!text || !props.canSend || props.busy) return
|
||
emit('send', embedPastes(text, pastes.value))
|
||
draft.value = ''
|
||
pastes.value = []
|
||
pinned.value = true
|
||
void nextTick(resizePrompt)
|
||
}
|
||
|
||
// --- the composer -----------------------------------------------------
|
||
const prompt = ref<HTMLTextAreaElement | null>(null)
|
||
|
||
/** The composer grows to this many rows, then scrolls instead. */
|
||
const MAX_PROMPT_ROWS = 10
|
||
|
||
/** Height follows the content; the CSS max-height clamps the growth. */
|
||
function resizePrompt(): void {
|
||
const el = prompt.value
|
||
if (!el) return
|
||
el.style.height = 'auto'
|
||
el.style.height = `${el.scrollHeight}px`
|
||
}
|
||
|
||
/** Enter submits, shift+enter is a newline, ctrl/cmd+enter submits. */
|
||
function onPromptKeydown(event: KeyboardEvent): void {
|
||
if (event.key === 'Enter' && !event.shiftKey) {
|
||
event.preventDefault()
|
||
submit()
|
||
}
|
||
}
|
||
|
||
// --- pasted attachments ----------------------------------------------
|
||
// A paste over PASTE_INLINE_LINES lines rides as a chip: the payload
|
||
// never lands in the box, it embeds into the sent text on submit —
|
||
// the same record the TUI keeps.
|
||
|
||
const pastes = ref<string[]>([])
|
||
|
||
function onPaste(event: ClipboardEvent): void {
|
||
const transfer = event.clipboardData
|
||
if (!transfer) return
|
||
const text = transfer.getData('text/plain')
|
||
if (text !== '') {
|
||
if (absorbPaste(text)) event.preventDefault()
|
||
return
|
||
}
|
||
// A file paste reads as its text when it claims a textual type; the
|
||
// rest the composer ignores.
|
||
const file = transfer.files[0]
|
||
if (!file || !file.type.startsWith('text/')) return
|
||
event.preventDefault()
|
||
void file.text().then((text) => {
|
||
if (!absorbPaste(text)) insertInline(text)
|
||
})
|
||
}
|
||
|
||
/** A long paste becomes one chip; whether it did is the answer. */
|
||
function absorbPaste(text: string): boolean {
|
||
const normalized = normalizePaste(text)
|
||
if (lineCount(normalized) <= PASTE_INLINE_LINES) return false
|
||
pastes.value.push(normalized)
|
||
return true
|
||
}
|
||
|
||
/** A short file paste joins the draft where the caret sits. */
|
||
function insertInline(text: string): void {
|
||
const el = prompt.value
|
||
if (el && !el.disabled) {
|
||
el.setRangeText(text, el.selectionStart ?? el.value.length, el.selectionEnd ?? el.value.length, 'end')
|
||
draft.value = el.value
|
||
} else {
|
||
draft.value += text
|
||
}
|
||
resizePrompt()
|
||
}
|
||
|
||
/** One render piece of a user message: literal text or a paste chip. */
|
||
type MessageSegment = PastePart | { kind: 'chip'; label: string }
|
||
|
||
/** The message's render pieces: literal text and resolved chips, the
|
||
* chips' one-based ids counted across the message. */
|
||
function messageSegments(text: string): MessageSegment[] {
|
||
const segments: MessageSegment[] = []
|
||
let chip = 0
|
||
for (const part of pasteParts(text)) {
|
||
if (part.kind === 'text') {
|
||
if (part.text !== '') segments.push(part)
|
||
} else {
|
||
segments.push({ kind: 'chip', label: chipLabel(part.text, chip++) })
|
||
}
|
||
}
|
||
return segments
|
||
}
|
||
|
||
const displayName = computed(() => props.activeKey.replace(/^interactive:/, ''))
|
||
|
||
// The dispatch internals live behind the info modal, not in the header.
|
||
const infoOpen = ref(false)
|
||
|
||
const infoRows = computed(() => [
|
||
{ label: 'state', value: props.session?.state ?? 'unknown' },
|
||
{ label: 'revision', value: props.session ? String(props.session.revision) : '—' },
|
||
{ label: 'inbox depth', value: props.session ? String(props.session.inbox_depth) : '—' },
|
||
{ label: 'last outcome', value: props.session?.last_outcome ?? '—' },
|
||
{ label: 'key', value: props.activeKey },
|
||
])
|
||
|
||
const streamLabel = computed(() =>
|
||
props.streamStatus === 'open' ? 'live' : props.streamStatus,
|
||
)
|
||
|
||
function streamTone(status: StreamStatus): 'ok' | 'warn' | 'error' {
|
||
if (status === 'open') return 'ok'
|
||
if (status === 'reconnecting') return 'error'
|
||
return 'warn'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<section class="chat">
|
||
<header class="head">
|
||
<AgentAvatar :avatar-url="avatarUrl" :mark="identity?.mark" :initials="identity?.initials ?? identity?.name?.slice(0, 1)" :size="34" />
|
||
<div class="text">
|
||
<h2>{{ displayName }}</h2>
|
||
</div>
|
||
<span class="stream-status" :title="`event stream: ${streamStatus}`">
|
||
<StatusDot :tone="streamTone(streamStatus)" />
|
||
{{ streamLabel }}
|
||
</span>
|
||
<button class="ghost info" title="session info" @click="infoOpen = true">ⓘ</button>
|
||
</header>
|
||
|
||
<AppModal :open="infoOpen" title="Session info" @close="infoOpen = false">
|
||
<dl class="info-rows">
|
||
<div v-for="row in infoRows" :key="row.label" class="info-row">
|
||
<dt class="label">{{ row.label }}</dt>
|
||
<dd class="mono">{{ row.value }}</dd>
|
||
</div>
|
||
</dl>
|
||
</AppModal>
|
||
|
||
<div ref="scroller" class="stream-area" @scroll.passive="onScroll">
|
||
<p v-if="items.length === 0 && !live" class="empty">
|
||
nothing streamed yet; messages post to the claw and replies arrive here live
|
||
</p>
|
||
|
||
<template v-for="item in items" :key="item.id">
|
||
<div v-if="item.kind === 'sent'" class="msg">
|
||
<div class="avatar user" aria-hidden="true">·</div>
|
||
<div class="msg-body">
|
||
<div class="who">you</div>
|
||
<div class="reply plain">
|
||
<template v-for="(segment, index) in messageSegments(item.text)" :key="index">
|
||
<span v-if="segment.kind === 'chip'" class="badge paste-chip">{{ segment.label }}</span>
|
||
<template v-else>{{ segment.text }}</template>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="item.kind === 'turn'" class="msg">
|
||
<AgentAvatar :avatar-url="avatarUrl" :mark="identity?.mark" :initials="identity?.initials ?? identity?.name?.slice(0, 1)" :size="32" />
|
||
<div class="msg-body">
|
||
<div class="who">{{ agentName }}</div>
|
||
<details v-if="item.turn.thinking" class="thinking">
|
||
<summary>thinking</summary>
|
||
<pre>{{ item.turn.thinking }}</pre>
|
||
</details>
|
||
<TurnEntries
|
||
:entries="item.turn.entries"
|
||
@consent-answer="(id, answer) => emit('consentAnswer', id, answer)"
|
||
@consent-deny="(id) => emit('consentDeny', id)"
|
||
@download-attachment="(id, name) => emit('downloadAttachment', id, name)"
|
||
/>
|
||
<AppMarkdown v-if="item.turn.reply" :text="item.turn.reply" class="reply" />
|
||
<div
|
||
v-if="item.turn.outcome"
|
||
class="outcome mono"
|
||
:class="{ failed: item.turn.outcome === 'failed' }"
|
||
>
|
||
{{ item.turn.outcome }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-else class="msg" :class="item.kind">
|
||
<div class="msg-body">
|
||
<TurnEntries
|
||
:entries="[item.kind === 'consent' ? { kind: 'consent', consent: item.consent } : { kind: 'attachment', attachment: item.attachment }]"
|
||
@consent-answer="(id, answer) => emit('consentAnswer', id, answer)"
|
||
@consent-deny="(id) => emit('consentDeny', id)"
|
||
@download-attachment="(id, name) => emit('downloadAttachment', id, name)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="live" class="msg live">
|
||
<AgentAvatar :avatar-url="avatarUrl" :mark="identity?.mark" :initials="identity?.initials ?? identity?.name?.slice(0, 1)" :size="32" />
|
||
<div class="msg-body">
|
||
<div class="who">{{ agentName }}</div>
|
||
<details v-if="live.thinking" class="thinking" open>
|
||
<summary>thinking</summary>
|
||
<pre>{{ live.thinking }}</pre>
|
||
</details>
|
||
<TurnEntries
|
||
:entries="live.entries"
|
||
@consent-answer="(id, answer) => emit('consentAnswer', id, answer)"
|
||
@consent-deny="(id) => emit('consentDeny', id)"
|
||
@download-attachment="(id, name) => emit('downloadAttachment', id, name)"
|
||
/>
|
||
<AppMarkdown v-if="live.reply" :text="live.reply" streaming class="reply" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<footer class="composer">
|
||
<div class="chips">
|
||
<span class="badge">{{ activeKey }}</span>
|
||
<button
|
||
class="badge chip-btn"
|
||
title="switch the model backend in settings"
|
||
:disabled="!activeBackend"
|
||
@click="emit('openProviders')"
|
||
>
|
||
{{ activeBackend ? `${activeBackend.provider} · ${activeBackend.model}` : 'no backend' }}
|
||
</button>
|
||
</div>
|
||
<div v-if="pastes.length > 0" class="paste-chips">
|
||
<span v-for="(paste, index) in pastes" :key="index" class="badge paste-chip">
|
||
{{ chipLabel(paste, index) }}
|
||
<button class="chip-x" :title="`drop paste ${index + 1}`" @click="pastes.splice(index, 1)">
|
||
×
|
||
</button>
|
||
</span>
|
||
</div>
|
||
<div class="input-row">
|
||
<textarea
|
||
ref="prompt"
|
||
v-model="draft"
|
||
rows="1"
|
||
:placeholder="canSend ? `Message ${agentName}…` : 'only interactive:* sessions accept messages'"
|
||
:disabled="!canSend"
|
||
@keydown="onPromptKeydown"
|
||
@paste="onPaste"
|
||
@input="resizePrompt"
|
||
/>
|
||
<button class="primary send" :disabled="!canSend || busy || draft.trim() === ''" title="send" @click="submit">
|
||
↑
|
||
</button>
|
||
</div>
|
||
</footer>
|
||
</section>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.chat {
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
min-width: 0;
|
||
flex: 1;
|
||
background: var(--ground);
|
||
}
|
||
|
||
.head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: var(--surface);
|
||
}
|
||
|
||
.avatar {
|
||
display: grid;
|
||
place-items: center;
|
||
width: 34px;
|
||
height: 34px;
|
||
flex: none;
|
||
border-radius: 10px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.avatar.user {
|
||
background: var(--elevated);
|
||
border: 1px solid var(--border-strong);
|
||
color: var(--text2);
|
||
}
|
||
|
||
.text {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.text h2 {
|
||
margin: 0;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.head .info {
|
||
flex: none;
|
||
padding: 0 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.info-rows {
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
padding: 7px 0;
|
||
}
|
||
|
||
.info-row + .info-row {
|
||
border-top: 1px solid var(--border);
|
||
}
|
||
|
||
.info-row dd {
|
||
margin: 0;
|
||
min-width: 0;
|
||
overflow-wrap: anywhere;
|
||
text-align: right;
|
||
}
|
||
|
||
.stream-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
color: var(--text3);
|
||
font-size: 12px;
|
||
flex: none;
|
||
}
|
||
|
||
.stream-area {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow-y: auto;
|
||
padding: 20px 24px;
|
||
}
|
||
|
||
.empty {
|
||
color: var(--text3);
|
||
padding: 24px;
|
||
}
|
||
|
||
.msg {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.msg-body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.who {
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.live .who {
|
||
color: var(--accent-text);
|
||
}
|
||
|
||
.thinking {
|
||
margin-bottom: 8px;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.thinking summary {
|
||
cursor: pointer;
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.thinking pre {
|
||
margin: 6px 0 0;
|
||
padding: 8px 10px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
color: var(--text3);
|
||
font-style: italic;
|
||
white-space: pre-wrap;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.reply {
|
||
color: var(--text);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
/* User lines are verbatim input; agent replies render markdown (see
|
||
main.css .md) and wrap by its rules instead. */
|
||
.plain {
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.outcome {
|
||
margin-top: 6px;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.outcome.failed {
|
||
color: var(--error);
|
||
}
|
||
|
||
/* A consent card: the agent asking its human something — distinct
|
||
from a tool row, toned by its resolution. */
|
||
.consent-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
padding: 10px 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-left: 3px solid var(--warn);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.consent-card.ok {
|
||
border-left-color: var(--ok);
|
||
}
|
||
|
||
.consent-card.denied {
|
||
border-left-color: var(--error);
|
||
}
|
||
|
||
.consent-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.consent-summary {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.denied .consent-summary {
|
||
color: var(--text3);
|
||
}
|
||
|
||
.consent-state {
|
||
flex: none;
|
||
font-size: 11px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--ok);
|
||
}
|
||
|
||
.denied .consent-state {
|
||
color: var(--error);
|
||
}
|
||
|
||
.consent-detail {
|
||
margin: 0;
|
||
color: var(--text2);
|
||
font-size: 12.5px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.consent-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
}
|
||
|
||
.consent-actions input {
|
||
flex: 1;
|
||
min-width: 160px;
|
||
}
|
||
|
||
/* An attachment card: the agent handing a file over — head row names
|
||
it, the image (when there is one) rides under it, capped so a
|
||
screenshot cannot take the stream. */
|
||
.attachment-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
max-width: 480px;
|
||
padding: 10px 12px;
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.attachment-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.attachment-glyph {
|
||
flex: none;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.attachment-name {
|
||
flex: 1;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: var(--text);
|
||
}
|
||
|
||
.attachment-size {
|
||
flex: none;
|
||
color: var(--text3);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.attachment-image {
|
||
max-width: 100%;
|
||
max-height: 240px;
|
||
align-self: flex-start;
|
||
border: 1px solid var(--border);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.attachment-caption {
|
||
margin: 0;
|
||
color: var(--text3);
|
||
font-size: 12.5px;
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.composer {
|
||
border-top: 1px solid var(--border);
|
||
background: var(--surface);
|
||
padding: 10px 16px 14px;
|
||
}
|
||
|
||
.chips {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 8px;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.chip-btn {
|
||
cursor: pointer;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.chip-btn:hover:not(:disabled) {
|
||
border-color: var(--accent);
|
||
color: var(--accent-text);
|
||
}
|
||
|
||
.paste-chips {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
/* One embedded paste, standing in for its payload — composer staging
|
||
and transcript rendering share the shape. */
|
||
.paste-chip {
|
||
gap: 2px;
|
||
padding-right: 4px;
|
||
background: var(--elevated);
|
||
}
|
||
|
||
.chip-x {
|
||
border: none;
|
||
background: none;
|
||
padding: 0 2px;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
color: var(--text3);
|
||
}
|
||
|
||
.chip-x:hover:not(:disabled) {
|
||
color: var(--error);
|
||
}
|
||
|
||
.input-row {
|
||
display: flex;
|
||
gap: 8px;
|
||
}
|
||
|
||
.input-row textarea {
|
||
flex: 1;
|
||
min-width: 0;
|
||
padding: 9px 12px;
|
||
resize: none;
|
||
overflow-y: auto;
|
||
/* MAX_PROMPT_ROWS rows, then the box scrolls instead of growing. */
|
||
max-height: calc(10 * 1.55em + 18px);
|
||
}
|
||
|
||
.send {
|
||
width: 38px;
|
||
padding: 0;
|
||
font-size: 16px;
|
||
border-radius: 9px;
|
||
flex: none;
|
||
}
|
||
</style>
|