@antelopejs/dms-ai 0.1.4 → 0.1.6

package/frontend-vue/app/chat/components/ConnectionBanner.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+	BANNER_LABELS,
+	RECONNECT_BUTTON_LABEL,
+} from "../constants/connection-banner";
+import {
+	CONNECTION_STATUSES,
+	type ConnectionStatus,
+} from "../constants/protocol";
+
+interface Props {
+	status: ConnectionStatus;
+}
+
+const props = defineProps<Props>();
+interface Emits {
+	reconnect: [];
+}
+
+const emit = defineEmits<Emits>();
+
+const LABEL_BY_STATUS: Record<
+	Exclude<ConnectionStatus, typeof CONNECTION_STATUSES.CONNECTED>,
+	string
+> = {
+	[CONNECTION_STATUSES.CONNECTING]: BANNER_LABELS.connecting,
+	[CONNECTION_STATUSES.RECONNECTING]: BANNER_LABELS.reconnecting,
+	[CONNECTION_STATUSES.DISCONNECTED]: BANNER_LABELS.disconnected,
+};
+
+const isVisible = computed<boolean>(
+	() => props.status !== CONNECTION_STATUSES.CONNECTED,
+);
+
+const label = computed<string>(() => {
+	if (props.status === CONNECTION_STATUSES.CONNECTED) return "";
+	return LABEL_BY_STATUS[props.status];
+});
+
+function onReconnect(): void {
+	emit("reconnect");
+}
+</script>
+
+<template>
+	<div
+		v-if="isVisible"
+		class="connection-banner"
+		:data-status="props.status"
+		role="status"
+		aria-live="polite"
+	>
+		<span class="connection-banner-label">{{ label }}</span>
+		<button type="button" class="connection-banner-button" @click="onReconnect">
+			{{ RECONNECT_BUTTON_LABEL }}
+		</button>
+	</div>
+</template>
+
+<style scoped>
+.connection-banner {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	padding: 6px 12px;
+	font-size: 12px;
+	border-bottom: 1px solid transparent;
+}
+
+.connection-banner[data-status="connecting"],
+.connection-banner[data-status="reconnecting"] {
+	color: var(--warning-400);
+	background: var(--warning-bg);
+	border-bottom-color: color-mix(in srgb, var(--warning-400) 25%, transparent);
+}
+
+.connection-banner[data-status="disconnected"] {
+	color: var(--danger-400);
+	background: var(--danger-bg);
+	border-bottom-color: color-mix(in srgb, var(--danger-400) 25%, transparent);
+}
+
+.connection-banner-label {
+	flex: 1;
+	text-align: left;
+}
+
+.connection-banner-button {
+	background: transparent;
+	border: 1px solid currentColor;
+	color: inherit;
+	border-radius: var(--corner-sm);
+	padding: 2px 8px;
+	font: inherit;
+	font-size: 11px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.connection-banner-button:hover {
+	background: rgba(255, 255, 255, 0.08);
+}
+</style>

package/frontend-vue/app/chat/components/ConversationDrawer.vue

@@ -0,0 +1,266 @@
+<script setup lang="ts">
+import {
+	CLOSE_DRAWER_LABEL,
+	DAYS_BEFORE_DATE,
+	DELETE_BUTTON_GLYPH,
+	DELETE_BUTTON_LABEL,
+	DRAWER_TITLE,
+	EMPTY_LIST_LABEL,
+	HOURS_PER_DAY,
+	MINUTES_PER_HOUR,
+	NEW_CONVERSATION_LABEL,
+	RELATIVE_TIME_NOW,
+	SECONDS_PER_MINUTE,
+} from "../constants/conversation-drawer";
+import type { ConversationSummary } from "../types/conversation";
+
+interface Props {
+	open: boolean;
+	conversations: ConversationSummary[];
+	activeId: string;
+	nowMs: number;
+}
+
+const props = defineProps<Props>();
+interface Emits {
+	select: [id: string];
+	delete: [id: string];
+	new: [];
+	close: [];
+}
+
+const emit = defineEmits<Emits>();
+
+const MS_PER_SECOND = 1000;
+const SECONDS_PER_HOUR = SECONDS_PER_MINUTE * MINUTES_PER_HOUR;
+const SECONDS_PER_DAY = SECONDS_PER_HOUR * HOURS_PER_DAY;
+
+function formatRelativeTime(timestampMs: number): string {
+	const deltaSeconds = Math.max(
+		0,
+		Math.floor((props.nowMs - timestampMs) / MS_PER_SECOND),
+	);
+	if (deltaSeconds < SECONDS_PER_MINUTE) return RELATIVE_TIME_NOW;
+	if (deltaSeconds < SECONDS_PER_HOUR) {
+		return `${Math.floor(deltaSeconds / SECONDS_PER_MINUTE)}m ago`;
+	}
+	if (deltaSeconds < SECONDS_PER_DAY) {
+		return `${Math.floor(deltaSeconds / SECONDS_PER_HOUR)}h ago`;
+	}
+	if (deltaSeconds < SECONDS_PER_DAY * DAYS_BEFORE_DATE) {
+		return `${Math.floor(deltaSeconds / SECONDS_PER_DAY)}d ago`;
+	}
+	return new Date(timestampMs).toLocaleDateString();
+}
+
+function onSelect(id: string): void {
+	emit("select", id);
+}
+
+function onDelete(id: string): void {
+	emit("delete", id);
+}
+
+function onNew(): void {
+	emit("new");
+}
+
+function onClose(): void {
+	emit("close");
+}
+</script>
+
+<template>
+	<div v-if="props.open" class="drawer-root">
+		<div class="drawer-backdrop" @click="onClose" />
+		<aside class="drawer-panel" aria-label="Conversations">
+			<header class="drawer-header">
+				<span class="drawer-title">{{ DRAWER_TITLE }}</span>
+				<button type="button" class="drawer-new" @click="onNew">
+					{{ NEW_CONVERSATION_LABEL }}
+				</button>
+				<button
+					type="button"
+					class="drawer-close"
+					:aria-label="CLOSE_DRAWER_LABEL"
+					@click="onClose"
+				>
+					×
+				</button>
+			</header>
+
+			<ul v-if="props.conversations.length > 0" class="drawer-list">
+				<li
+					v-for="item in props.conversations"
+					:key="item.id"
+					class="drawer-item"
+					:data-active="item.id === props.activeId"
+				>
+					<button
+						type="button"
+						class="drawer-item-main"
+						@click="onSelect(item.id)"
+					>
+						<span class="drawer-item-title">{{ item.title }}</span>
+						<span class="drawer-item-time">
+							{{ formatRelativeTime(item.updatedAtMs) }}
+						</span>
+					</button>
+					<button
+						type="button"
+						class="drawer-item-delete"
+						:aria-label="DELETE_BUTTON_LABEL"
+						:title="DELETE_BUTTON_LABEL"
+						@click="onDelete(item.id)"
+					>
+						{{ DELETE_BUTTON_GLYPH }}
+					</button>
+				</li>
+			</ul>
+			<p v-else class="drawer-empty">{{ EMPTY_LIST_LABEL }}</p>
+		</aside>
+	</div>
+</template>
+
+<style scoped>
+.drawer-root {
+	position: absolute;
+	inset: 0;
+	z-index: 20;
+}
+
+.drawer-backdrop {
+	position: absolute;
+	inset: 0;
+	background: rgba(0, 0, 0, 0.35);
+}
+
+.drawer-panel {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	width: 80%;
+	max-width: 320px;
+	display: flex;
+	flex-direction: column;
+	background: var(--surface-card);
+	border-right: 1px solid var(--hair-strong);
+	box-shadow: 12px 0 40px rgba(0, 0, 0, 0.5);
+}
+
+.drawer-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 12px 14px;
+	border-bottom: 1px solid var(--hair);
+	color: var(--fg);
+}
+
+.drawer-title {
+	flex: 1;
+	font-weight: 600;
+}
+
+.drawer-new {
+	background: var(--accent);
+	border: none;
+	color: var(--accent-fg);
+	border-radius: var(--corner-md);
+	padding: 3px 9px;
+	font: inherit;
+	font-size: 11px;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+.drawer-new:hover {
+	background: var(--accent-strong);
+}
+
+.drawer-close {
+	background: transparent;
+	border: none;
+	color: var(--fg-tertiary);
+	font-size: 18px;
+	line-height: 1;
+	cursor: pointer;
+	padding: 0 4px;
+}
+
+.drawer-close:hover {
+	color: var(--fg);
+}
+
+.drawer-list {
+	flex: 1;
+	overflow-y: auto;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.drawer-item {
+	display: flex;
+	align-items: stretch;
+	border-bottom: 1px solid var(--hair);
+}
+
+.drawer-item[data-active="true"] {
+	background: var(--accent-bg);
+}
+
+.drawer-item-main {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 2px;
+	background: transparent;
+	border: none;
+	padding: 9px 14px;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+	min-width: 0;
+}
+
+.drawer-item-main:hover {
+	background: var(--surface-card-2);
+}
+
+.drawer-item-title {
+	font-weight: 500;
+	color: var(--fg);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 100%;
+}
+
+.drawer-item-time {
+	font-family: var(--font-code);
+	font-size: 10px;
+	color: var(--fg-tertiary);
+}
+
+.drawer-item-delete {
+	background: transparent;
+	border: none;
+	color: var(--fg-tertiary);
+	padding: 0 12px;
+	font-size: 13px;
+	cursor: pointer;
+}
+
+.drawer-item-delete:hover {
+	color: var(--danger-400);
+}
+
+.drawer-empty {
+	padding: 16px 14px;
+	color: var(--fg-tertiary);
+	font-size: 12px;
+}
+</style>

package/frontend-vue/app/chat/components/MarkdownContent.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref, watch } from "vue";
+import { createIncrementalMarkdown, renderMarkdown } from "../utils/markdown";
+
+interface Props {
+	content: string;
+	/** True while the answer is still arriving: the tail is re-rendered once a frame. */
+	isStreaming?: boolean;
+}
+
+const props = defineProps<Props>();
+
+const STREAMED_RENDER_DELAY_MS = 50;
+
+const settled = ref<readonly string[]>([]);
+const open = ref("");
+let incremental = createIncrementalMarkdown();
+let pendingFrame: ReturnType<typeof setTimeout> | null = null;
+
+function renderWhole(): void {
+	incremental = createIncrementalMarkdown();
+	settled.value = [];
+	open.value = renderMarkdown(props.content);
+}
+
+function renderStreamed(): void {
+	pendingFrame = null;
+	const blocks = incremental.render(props.content);
+	settled.value = blocks.settled;
+	open.value = blocks.open;
+}
+
+function scheduleStreamed(): void {
+	if (pendingFrame !== null) return;
+	pendingFrame = setTimeout(renderStreamed, STREAMED_RENDER_DELAY_MS);
+}
+
+function cancelStreamed(): void {
+	if (pendingFrame !== null) clearTimeout(pendingFrame);
+	pendingFrame = null;
+}
+
+watch(
+	() => [props.content, props.isStreaming === true] as const,
+	([, isStreaming]) => {
+		if (isStreaming) {
+			scheduleStreamed();
+			return;
+		}
+		cancelStreamed();
+		renderWhole();
+	},
+	{ immediate: true },
+);
+
+onBeforeUnmount(cancelStreamed);
+</script>
+
+<template>
+	<div class="chat-markdown">
+		<div
+			v-for="(block, index) in settled"
+			:key="index"
+			class="chat-markdown-block"
+			v-html="block"
+		/>
+		<div class="chat-markdown-block" v-html="open" />
+	</div>
+</template>
+
+<style scoped>
+.chat-markdown-block {
+	display: contents;
+}
+
+.chat-markdown-block:first-child > :deep(:first-child) {
+	margin-top: 0;
+}
+
+.chat-markdown-block:last-child > :deep(:last-child) {
+	margin-bottom: 0;
+}
+
+.chat-markdown :deep(p) {
+	margin: 0 0 8px;
+}
+
+.chat-markdown :deep(ul),
+.chat-markdown :deep(ol) {
+	margin: 0 0 8px;
+	padding-left: 20px;
+}
+
+.chat-markdown :deep(li) {
+	margin: 2px 0;
+}
+
+.chat-markdown :deep(li > ul),
+.chat-markdown :deep(li > ol) {
+	margin: 2px 0;
+}
+
+.chat-markdown :deep(h1),
+.chat-markdown :deep(h2),
+.chat-markdown :deep(h3),
+.chat-markdown :deep(h4),
+.chat-markdown :deep(h5),
+.chat-markdown :deep(h6) {
+	margin: 12px 0 6px;
+	line-height: 1.3;
+	font-weight: 600;
+	color: var(--fg);
+}
+
+.chat-markdown :deep(h1) {
+	font-size: 1.3em;
+}
+
+.chat-markdown :deep(h2) {
+	font-size: 1.2em;
+}
+
+.chat-markdown :deep(h3) {
+	font-size: 1.1em;
+}
+
+.chat-markdown :deep(h4),
+.chat-markdown :deep(h5),
+.chat-markdown :deep(h6) {
+	font-size: 1em;
+}
+
+.chat-markdown :deep(a) {
+	color: var(--accent);
+	text-decoration: underline;
+	text-underline-offset: 2px;
+}
+
+.chat-markdown :deep(code) {
+	font-family: var(--font-code);
+	font-size: 0.9em;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-sm);
+	padding: 1px 4px;
+}
+
+.chat-markdown :deep(pre) {
+	margin: 0 0 8px;
+	padding: 10px 12px;
+	overflow-x: auto;
+	background: var(--surface-inset);
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+}
+
+.chat-markdown :deep(pre code) {
+	background: none;
+	border: 0;
+	padding: 0;
+}
+
+.chat-markdown :deep(blockquote) {
+	margin: 0 0 8px;
+	padding: 2px 0 2px 12px;
+	border-left: 3px solid var(--hair-strong);
+	color: var(--fg-tertiary);
+}
+
+.chat-markdown :deep(table) {
+	display: block;
+	overflow-x: auto;
+	border-collapse: collapse;
+	margin: 0 0 8px;
+	font-size: 0.95em;
+}
+
+.chat-markdown :deep(th),
+.chat-markdown :deep(td) {
+	border: 1px solid var(--hair);
+	padding: 4px 8px;
+	text-align: left;
+}
+
+.chat-markdown :deep(th) {
+	background: var(--surface-inset);
+	font-weight: 600;
+	color: var(--fg);
+}
+
+.chat-markdown :deep(hr) {
+	border: 0;
+	border-top: 1px solid var(--hair);
+	margin: 12px 0;
+}
+</style>