@antelopejs/dms-ai 0.1.3 → 0.1.5

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

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from "vue";
+import {
+	TOOL_CLUSTER_COLLAPSE_LINGER_MS,
+	TOOL_CLUSTER_LABEL,
+	TOOL_CLUSTER_VISIBLE_LIMIT,
+	TOOL_STATUS,
+} from "../constants/conversation";
+import type { ToolCallMessage, ToolStatus } from "../types/conversation";
+import { toolSummary } from "../utils/tool-summary";
+import ToolCallEntry from "./ToolCallEntry.vue";
+
+interface Props {
+	tools: ToolCallMessage[];
+	/** True while this is the trailing tool activity of a running turn. */
+	live: boolean;
+}
+
+const props = defineProps<Props>();
+
+const override = ref<boolean | null>(null);
+const showAll = ref(false);
+
+const lingering = ref(false);
+let lingerTimer: ReturnType<typeof setTimeout> | null = null;
+
+watch(
+	() => props.live,
+	(isLive, wasLive) => {
+		if (isLive) {
+			lingering.value = false;
+			if (lingerTimer !== null) clearTimeout(lingerTimer);
+			lingerTimer = null;
+			return;
+		}
+		if (!wasLive) return;
+		lingering.value = true;
+		if (lingerTimer !== null) clearTimeout(lingerTimer);
+		lingerTimer = setTimeout(() => {
+			lingering.value = false;
+			lingerTimer = null;
+		}, TOOL_CLUSTER_COLLAPSE_LINGER_MS);
+	},
+);
+
+onUnmounted(() => {
+	if (lingerTimer !== null) clearTimeout(lingerTimer);
+});
+
+const rollupStatus = computed<ToolStatus>(() => {
+	if (props.tools.some((t) => t.status === TOOL_STATUS.PENDING)) {
+		return TOOL_STATUS.PENDING;
+	}
+	if (props.tools.some((t) => t.status === TOOL_STATUS.ERROR)) {
+		return TOOL_STATUS.ERROR;
+	}
+	return TOOL_STATUS.SUCCESS;
+});
+
+const hasError = computed<boolean>(() =>
+	props.tools.some((t) => t.status === TOOL_STATUS.ERROR),
+);
+
+const autoOpen = computed<boolean>(
+	() => props.live || lingering.value || hasError.value,
+);
+const isOpen = computed<boolean>(() =>
+	override.value !== null ? override.value : autoOpen.value,
+);
+const isFull = computed<boolean>(
+	() => override.value === true || showAll.value,
+);
+
+const visibleTools = computed<ToolCallMessage[]>(() =>
+	isFull.value ? props.tools : props.tools.slice(-TOOL_CLUSTER_VISIBLE_LIMIT),
+);
+const hiddenCount = computed<number>(
+	() => props.tools.length - visibleTools.value.length,
+);
+
+const glyphStatus = computed<ToolStatus>(() =>
+	props.live ? TOOL_STATUS.PENDING : rollupStatus.value,
+);
+
+const headline = computed<string>(() => {
+	const active =
+		props.tools.find((t) => t.status === TOOL_STATUS.PENDING) ??
+		props.tools.at(-1);
+	if (active === undefined) return "";
+	return toolSummary(active.toolName, active.args);
+});
+
+const countLabel = computed<string>(
+	() => `${TOOL_CLUSTER_LABEL} ${props.tools.length} tools`,
+);
+
+function toggle(): void {
+	override.value = !isOpen.value;
+}
+
+function revealEarlier(): void {
+	showAll.value = true;
+}
+</script>
+
+<template>
+	<section class="tool-cluster" :data-status="rollupStatus">
+		<button
+			type="button"
+			class="cluster-header"
+			:aria-expanded="isOpen"
+			@click="toggle"
+		>
+			<span class="cluster-toggle">{{ isOpen ? "▾" : "▸" }}</span>
+			<span class="cluster-glyph" :data-status="glyphStatus" aria-hidden="true">
+				<svg
+					v-if="glyphStatus === 'pending'"
+					class="cluster-spin"
+					viewBox="0 0 24 24"
+					width="13"
+					height="13"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+				>
+					<path d="M21 12a9 9 0 1 1-6.2-8.6" />
+				</svg>
+				<svg
+					v-else-if="glyphStatus === 'error'"
+					viewBox="0 0 24 24"
+					width="13"
+					height="13"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M18 6 6 18M6 6l12 12" />
+				</svg>
+				<svg
+					v-else
+					viewBox="0 0 24 24"
+					width="13"
+					height="13"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M20 6 9 17l-5-5" />
+				</svg>
+			</span>
+			<span class="cluster-count">{{ countLabel }}</span>
+			<span v-if="!isOpen && headline.length > 0" class="cluster-headline">
+				{{ headline }}
+			</span>
+		</button>
+		<div v-if="isOpen" class="cluster-body">
+			<button
+				v-if="hiddenCount > 0"
+				type="button"
+				class="cluster-earlier"
+				@click="revealEarlier"
+			>
+				▴ {{ hiddenCount }} earlier
+			</button>
+			<ToolCallEntry
+				v-for="tool in visibleTools"
+				:key="tool.id"
+				:message="tool"
+			/>
+		</div>
+	</section>
+</template>
+
+<style scoped>
+.tool-cluster {
+	border: 1px solid var(--hair);
+	border-radius: var(--corner-md);
+	background: var(--surface-card);
+	overflow: hidden;
+}
+
+.cluster-header {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+	padding: 8px 10px;
+	background: transparent;
+	border: none;
+	cursor: pointer;
+	font: inherit;
+	text-align: left;
+	color: var(--fg);
+}
+
+.cluster-header:hover {
+	background: var(--surface-card-2);
+}
+
+.cluster-toggle {
+	color: var(--fg-tertiary);
+	font-size: 11px;
+	flex: 0 0 auto;
+}
+
+.cluster-glyph {
+	width: 20px;
+	height: 20px;
+	flex: 0 0 auto;
+	display: grid;
+	place-items: center;
+	border-radius: 6px;
+}
+
+.cluster-glyph[data-status="pending"] {
+	color: var(--warning-400);
+}
+
+.cluster-glyph[data-status="success"] {
+	color: var(--success-400);
+}
+
+.cluster-glyph[data-status="error"] {
+	color: var(--danger-400);
+}
+
+.cluster-spin {
+	animation: cluster-spin 0.9s linear infinite;
+}
+
+@keyframes cluster-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.cluster-count {
+	font-weight: 600;
+	font-size: 12.5px;
+	flex: 0 0 auto;
+}
+
+.cluster-headline {
+	font-family: var(--font-code);
+	font-size: 11px;
+	color: var(--fg-tertiary);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+	flex: 1;
+}
+
+.cluster-body {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	padding: 6px;
+	border-top: 1px solid var(--hair);
+	background: var(--surface-inset);
+}
+
+.cluster-earlier {
+	align-self: flex-start;
+	background: none;
+	border: none;
+	padding: 2px 2px 0;
+	font: inherit;
+	font-size: 11px;
+	color: var(--fg-tertiary);
+	cursor: pointer;
+}
+
+.cluster-earlier:hover {
+	color: var(--accent);
+}
+</style>

package/frontend-vue/app/chat/composables/useChatChannel.ts

@@ -0,0 +1,116 @@
+import { onBeforeUnmount, onMounted, type Ref, ref } from "vue";
+import type { ChatTransport } from "../../runtime/chat-transport";
+import { createListeners } from "../../runtime/listeners";
+import {
+	CHAT_ROLE,
+	CLIENT_MESSAGE_TYPES,
+	CONNECTION_STATUSES,
+	type ConnectionStatus,
+} from "../constants/protocol";
+
+export interface UseChatChannelOptions {
+	transport: ChatTransport;
+	getConversationId: () => string;
+}
+
+export type ChannelMessageHandler = (msg: unknown) => void;
+
+export interface UseChatChannelResult {
+	/** False when the message was dropped: the stream is not connected. */
+	send: (msg: object) => boolean;
+	onMessage: (handler: ChannelMessageHandler) => () => void;
+	reconnect: () => void;
+	reidentify: () => void;
+	isConnected: Ref<boolean>;
+	connectionStatus: Ref<ConnectionStatus>;
+}
+
+interface ChannelState {
+	options: UseChatChannelOptions;
+	dispatch: ChannelMessageHandler;
+	isConnected: Ref<boolean>;
+	connectionStatus: Ref<ConnectionStatus>;
+	isAttached: boolean;
+	detachers: Array<() => void>;
+}
+
+const KNOWN_STATUSES = new Set<string>(Object.values(CONNECTION_STATUSES));
+
+function setStatus(state: ChannelState, status: string): void {
+	if (!KNOWN_STATUSES.has(status)) return;
+	state.connectionStatus.value = status as ConnectionStatus;
+	state.isConnected.value = status === CONNECTION_STATUSES.CONNECTED;
+}
+
+function sendHello(state: ChannelState): void {
+	state.options.transport.send({
+		type: CLIENT_MESSAGE_TYPES.HELLO,
+		role: CHAT_ROLE,
+		conversationId: state.options.getConversationId(),
+	});
+}
+
+function attach(state: ChannelState): void {
+	const { transport } = state.options;
+	state.isAttached = true;
+	state.detachers = [
+		transport.onMessage(state.dispatch),
+		transport.onReady(() => sendHello(state)),
+		transport.onStatus((status) => setStatus(state, status)),
+	];
+	setStatus(state, transport.getStatus());
+	if (state.isConnected.value) sendHello(state);
+}
+
+function detach(state: ChannelState): void {
+	state.isAttached = false;
+	for (const stop of state.detachers) stop();
+	state.detachers = [];
+}
+
+export interface ChatChannel {
+	result: UseChatChannelResult;
+	/** Listens to the dashboard's stream and says hello once it is connected. */
+	start: () => void;
+	/** Stops listening: no message reaches the chat after this. */
+	stop: () => void;
+}
+
+/** The chat's channel without the component lifecycle, which `useChatChannel` adds. */
+export function createChatChannel(options: UseChatChannelOptions): ChatChannel {
+	const subscribers = createListeners<unknown>();
+	const state: ChannelState = {
+		options,
+		dispatch: subscribers.emit,
+		isConnected: ref(false),
+		connectionStatus: ref<ConnectionStatus>(CONNECTION_STATUSES.CONNECTING),
+		isAttached: false,
+		detachers: [],
+	};
+	return {
+		result: {
+			send: (msg) => state.isAttached && options.transport.send(msg),
+			onMessage: subscribers.add,
+			reconnect: () => options.transport.reconnect(),
+			reidentify: () => sendHello(state),
+			isConnected: state.isConnected,
+			connectionStatus: state.connectionStatus,
+		},
+		start: () => attach(state),
+		stop: () => detach(state),
+	};
+}
+
+/**
+ * The chat's channel to the sidecar: its side of the dashboard's one stream per
+ * tab. A `hello` with the conversation goes out on every (re)connection, and
+ * the chat stops listening when it unmounts.
+ */
+export function useChatChannel(
+	options: UseChatChannelOptions,
+): UseChatChannelResult {
+	const channel = createChatChannel(options);
+	onMounted(channel.start);
+	onBeforeUnmount(channel.stop);
+	return channel.result;
+}