@vibesdotdev/chat 0.0.0-stage → 1.0.0-rc.1

package/dist/svelte/components/runtime/RuntimeChatComposer.svelte

@@ -0,0 +1,486 @@
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { chatParticipantsStore, chatRoomStore, runtimeChatStore } = useChatSurface();
+
+	import * as z from 'zod/v4';
+	import { onMount, tick } from 'svelte';
+	import { settle, valueFreeFailure } from '@vibesdotdev/kernel';
+	import { getRuntimeSvelteContext } from '@vibesdotdev/surface-sveltekit/svelte';
+	import type { AIAugmentDescriptor } from '@vibesdotdev/ai/augmentations/schemas/augment';
+	import type {
+		AIAugmentCompletion,
+		AIAugmentImplementation,
+		AIAugmentResult
+	} from '@vibesdotdev/ai/augmentations/schemas/augment-runtime';
+
+	import RuntimeChatCommandMenu from './RuntimeChatCommandMenu.svelte';
+	import type { RuntimeChatCommandMenuItem, RuntimeChatParticipantOption } from './types.js';
+
+	type StagedAugmentContext = Extract<AIAugmentResult, { type: 'augment' }>['staged'];
+
+	let {
+		value = $bindable(''),
+		placeholder = 'Type a message...',
+		disabledPlaceholder = null,
+		ariaLabel = 'Message composer',
+		canType = true,
+		agents = [],
+		users = [],
+		slashCommands = [],
+		onTypingChange = (_isTyping: boolean) => {},
+		onStageContext = (_staged: StagedAugmentContext) => {},
+		onSubmit = () => {},
+		onNotice = (_message: string) => {},
+		onError = (_message: string) => {},
+		onToast = (level: 'info' | 'success' | 'error', message: string) => {
+			if (level === 'error') onError(message);
+			else onNotice(message);
+		}
+	}: {
+		value?: string;
+		placeholder?: string;
+		disabledPlaceholder?: string | null;
+		ariaLabel?: string;
+		canType?: boolean;
+		agents?: RuntimeChatParticipantOption[];
+		users?: RuntimeChatParticipantOption[];
+		slashCommands?: RuntimeChatCommandMenuItem[];
+		onTypingChange?: (isTyping: boolean) => void;
+		onStageContext?: (staged: StagedAugmentContext) => void;
+		onSubmit?: () => void;
+		onNotice?: (message: string) => void;
+		onError?: (message: string) => void;
+		onToast?: (level: 'info' | 'success' | 'error', message: string) => void;
+	} = $props();
+
+	const runtimeStore = getRuntimeSvelteContext();
+	let textareaEl = $state<HTMLTextAreaElement | null>(null);
+	let menuOpen = $state(false);
+	let menuType = $state<string | null>(null);
+	let menuQuery = $state('');
+	let augmentItems = $state<RuntimeChatCommandMenuItem[] | undefined>(undefined);
+	let augmentAbort: AbortController | null = null;
+	let augmentRequestId = 0;
+	let augmentDebounceTimeout: ReturnType<typeof setTimeout> | undefined;
+	let typingTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	const aiAugmentImplementationSchema = z.looseObject({
+		complete: z.custom<AIAugmentImplementation['complete']>((v) => v instanceof Function),
+		execute: z.custom<AIAugmentImplementation['execute']>((v) => v instanceof Function)
+	});
+
+	const MENTION_TRIGGER_RE = /(?:^|\s)@([\w.-]*)$/;
+	const SLASH_TRIGGER_RE = /(?:^|\s)\/([^\n]*)$/;
+	const effectivePlaceholder = $derived(
+		canType ? placeholder : (disabledPlaceholder ?? placeholder)
+	);
+	const menuSlashCommands = $derived.by(() =>
+		slashCommands.map((command) => ({
+			...command,
+			action: () => {
+				menuOpen = false;
+				clearAugmentCompletions();
+				command.action();
+			}
+		}))
+	);
+
+	function findTriggerMatch(
+		text: string,
+		cursorPos: number
+	): { type: '@' | '/'; query: string; position: number } | null {
+		const before = text.slice(0, cursorPos);
+		const matches: Array<{ type: '@' | '/'; query: string; position: number }> = [];
+		const mentionMatch = before.match(MENTION_TRIGGER_RE);
+		if (mentionMatch) {
+			matches.push({
+				type: '@',
+				query: mentionMatch[1],
+				position: before.length - mentionMatch[0].length + (mentionMatch[0].startsWith(' ') ? 1 : 0)
+			});
+		}
+
+		const slashMatch = before.match(SLASH_TRIGGER_RE);
+		if (slashMatch) {
+			matches.push({
+				type: '/',
+				query: slashMatch[1],
+				position: before.length - slashMatch[0].length + (slashMatch[0].startsWith(' ') ? 1 : 0)
+			});
+		}
+
+		return matches.sort((left, right) => right.position - left.position)[0] ?? null;
+	}
+
+	function clearAugmentCompletions() {
+		augmentAbort?.abort();
+		augmentAbort = null;
+		augmentItems = undefined;
+	}
+
+	function handleInput() {
+		if (!textareaEl) return;
+		const trigger = findTriggerMatch(value, textareaEl.selectionStart);
+		if (trigger) {
+			menuType = trigger.type;
+			menuQuery = trigger.query;
+			menuOpen = true;
+			clearTimeout(augmentDebounceTimeout);
+			augmentDebounceTimeout = setTimeout(() => void refreshAugmentCompletions(trigger), 150);
+		} else {
+			clearTimeout(augmentDebounceTimeout);
+			augmentDebounceTimeout = undefined;
+			if (menuOpen) {
+				menuOpen = false;
+				clearAugmentCompletions();
+			}
+		}
+
+		onTypingChange(true);
+		clearTimeout(typingTimeout);
+		typingTimeout = setTimeout(() => onTypingChange(false), 3000);
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (menuOpen) {
+			if (['ArrowUp', 'ArrowDown', 'Tab'].includes(event.key)) return;
+			if (event.key === 'Escape') {
+				event.preventDefault();
+				menuOpen = false;
+				clearAugmentCompletions();
+				return;
+			}
+		}
+
+		if (event.key === 'Enter' && !event.shiftKey && !menuOpen) {
+			event.preventDefault();
+			onSubmit();
+		}
+	}
+
+	function replaceCurrentTrigger(insertText: string) {
+		if (!textareaEl) return;
+		const cursorPos = textareaEl.selectionStart;
+		const before = value.slice(0, cursorPos);
+		const after = value.slice(cursorPos);
+		const match = findTriggerMatch(value, cursorPos);
+		if (!match) return;
+		const prefix = before.slice(0, match.position);
+		value = `${prefix}${insertText}${after}`;
+	}
+
+	function insertAtCursor(content: string) {
+		const start = textareaEl?.selectionStart ?? value.length;
+		const end = textareaEl?.selectionEnd ?? start;
+		value = `${value.slice(0, start)}${content}${value.slice(end)}`;
+		void tick().then(() => {
+			const nextPosition = start + content.length;
+			textareaEl?.focus();
+			textareaEl?.setSelectionRange(nextPosition, nextPosition);
+		});
+	}
+
+	function handleMenuSelect(valueToInsert: string, type: 'mention' | 'command' | 'augment') {
+		if (!textareaEl) return;
+		const cursorPos = textareaEl.selectionStart;
+		const before = value.slice(0, cursorPos);
+		const after = value.slice(cursorPos);
+		const match = findTriggerMatch(value, cursorPos);
+
+		if (match) {
+			const prefix = before.slice(0, match.position);
+			value = type === 'mention' ? `${prefix}@${valueToInsert} ${after}` : `${prefix}${after}`;
+		}
+
+		menuOpen = false;
+		clearAugmentCompletions();
+		textareaEl.focus();
+	}
+
+	async function handleAugmentSelect(
+		impl: AIAugmentImplementation,
+		completion: AIAugmentCompletion
+	) {
+		replaceCurrentTrigger(completion.insertText);
+		menuOpen = false;
+		clearAugmentCompletions();
+		await tick();
+		textareaEl?.focus();
+
+		if (!completion.executeOnSelect) return;
+		const settled = await settle(async () => {
+			const runtime = await runtimeStore.load();
+			const result = await impl.execute({
+				runtime,
+				completion,
+				rawInput: `${menuType ?? ''}${menuQuery}`,
+				fullValue: value
+			});
+			await handleAugmentResult(result, completion);
+		});
+		if (!settled.ok) {
+			const failure = valueFreeFailure(settled.cause);
+			onError(
+				failure.reason ??
+					'The command could not complete. Try again or type your message directly.'
+			);
+		}
+	}
+
+	async function handleAugmentResult(result: AIAugmentResult, completion: AIAugmentCompletion) {
+		if (result.type === 'insert') {
+			insertAtCursor(result.text);
+			return;
+		}
+		if (result.type === 'clear') {
+			value = '';
+			return;
+		}
+		if (result.type === 'toast') {
+			onToast(result.level ?? 'info', result.message);
+			return;
+		}
+		if (result.type === 'augment' && result.augmentId === 'staged-context') {
+			onStageContext(result.staged);
+			onToast('success', `Attached ${completion.label}`);
+			return;
+		}
+		if (result.type === 'augment' && result.augmentId === 'chat.agent-teammate') {
+			const staged = result.staged;
+			window.dispatchEvent(
+				new CustomEvent('chat:open-add-agents', {
+					detail: {
+						intent: staged.action,
+						name: staged.name,
+						query: staged.query
+					}
+				})
+			);
+			return;
+		}
+		if (result.type !== 'augment' || result.augmentId !== 'participants') return;
+
+		await runtimeChatStore.setRoomMode('multi');
+		const staged = result.staged;
+		const agentIdSchema = z.string().trim().min(1);
+		const agentIds: string[] = [];
+		if (Array.isArray(staged.agentIds)) {
+			for (const item of staged.agentIds) {
+				const parsed = agentIdSchema.safeParse(item);
+				if (parsed.success) agentIds.push(parsed.data);
+			}
+		}
+		const userIdSchema = z.string().trim().min(1);
+		const userIds: string[] = [];
+		if (Array.isArray(staged.userIds)) {
+			for (const item of staged.userIds) {
+				const parsed = userIdSchema.safeParse(item);
+				if (parsed.success) userIds.push(parsed.data);
+			}
+		}
+		const stagedUserSchema = z.looseObject({
+			id: z.string(),
+			name: z.string().optional(),
+			email: z.string().optional()
+		});
+		type StagedUser = z.infer<typeof stagedUserSchema>;
+		const stagedUsers: StagedUser[] = [];
+		if (Array.isArray(staged.users)) {
+			for (const item of staged.users) {
+				const parsed = stagedUserSchema.safeParse(item);
+				if (parsed.success) stagedUsers.push(parsed.data);
+			}
+		}
+		const parsedCompletion = z
+			.looseObject({
+				participantType: z.string().optional(),
+				agentId: z.string().optional(),
+				userId: z.string().optional(),
+				name: z.string().optional(),
+				email: z.string().optional()
+			})
+			.safeParse(completion.data);
+		const completionData = parsedCompletion.success ? parsedCompletion.data : undefined;
+
+		if (completionData?.participantType === 'agent' && completionData.agentId) {
+			agentIds.push(completionData.agentId);
+		}
+		if (completionData?.participantType === 'friend' && completionData.userId) {
+			userIds.push(completionData.userId);
+			stagedUsers.push({
+				id: completionData.userId,
+				name: completionData.name,
+				email: completionData.email
+			});
+		}
+
+		for (const agentId of new Set(agentIds)) {
+			const alias = completion.label.replace(/^@/, '') || agentId;
+			if (runtimeChatStore.activeRoom) {
+				await runtimeChatStore.activeRoom.participants.add({
+					id: agentId,
+					type: 'agent',
+					name: alias,
+					responseStyle: 'reply',
+					enabled: true,
+					source: 'runtime'
+				});
+			} else {
+				chatRoomStore.pendingAgents.set(agentId, { responseMode: 'tagged', alias });
+				chatParticipantsStore.agents.set(agentId, {
+					chatRoomId: 'pending',
+					agentId,
+					alias,
+					responseMode: 'tagged'
+				});
+			}
+		}
+
+		for (const userId of new Set(userIds)) {
+			const user = stagedUsers.find((candidate) => candidate.id === userId);
+			const displayName = user?.name || completion.label.replace(/^@/, '') || userId;
+			if (runtimeChatStore.activeRoom) {
+				await runtimeChatStore.activeRoom.participants.add({
+					id: userId,
+					type: 'friend',
+					name: displayName,
+					source: 'runtime'
+				});
+			} else if (!chatRoomStore.pendingUsers.includes(userId)) {
+				chatRoomStore.pendingUsers = [...chatRoomStore.pendingUsers, userId];
+			}
+			chatParticipantsStore.users.set(userId, {
+				id: userId,
+				email: user?.email ?? null,
+				displayName,
+				avatarUrl: null,
+				role: 'member'
+			});
+		}
+	}
+
+	async function refreshAugmentCompletions(trigger: {
+		type: '@' | '/';
+		query: string;
+		position: number;
+	}) {
+		augmentAbort?.abort();
+		const controller = new AbortController();
+		augmentAbort = controller;
+		const requestId = ++augmentRequestId;
+		const settled = await settle(async () => {
+			const runtime = await runtimeStore.load();
+			if (!runtime.hasKind('ai/augment')) {
+				augmentItems = undefined;
+				return;
+			}
+			const descriptors = runtime
+				.query<AIAugmentDescriptor>('ai/augment')
+				.enabled()
+				.descriptors()
+				.filter((descriptor) => descriptor.trigger === trigger.type)
+				.sort((left, right) => (right.priority ?? 0) - (left.priority ?? 0));
+			const items: RuntimeChatCommandMenuItem[] = [];
+			for (const descriptor of descriptors) {
+				const descriptorSettled = await settle(async () => {
+					const resolved = await runtime
+						.query('ai/augment')
+						.withId(descriptor.id)
+						.resolve();
+					const parsed = aiAugmentImplementationSchema.safeParse(resolved);
+					if (!parsed.success) return;
+					const impl: AIAugmentImplementation = parsed.data;
+					const completions = await impl.complete({
+						runtime,
+						query: trigger.query,
+						raw: `${trigger.type}${trigger.query}`,
+						fullValue: value,
+						triggerPosition: trigger.position,
+						signal: controller.signal
+					});
+					for (const completion of completions) {
+						items.push({
+							id: `${descriptor.id}:${completion.id}`,
+							label: completion.label,
+							description: completion.description ?? descriptor.title,
+							icon:
+								completion.icon ??
+								(completion.category === 'People' ? 'lucide:user-plus' : 'lucide:bot'),
+							action: () => void handleAugmentSelect(impl, completion)
+						});
+					}
+				});
+				if (!descriptorSettled.ok && controller.signal.aborted) return;
+			}
+			if (requestId !== augmentRequestId || controller.signal.aborted) return;
+			augmentItems = items;
+		});
+		if (!settled.ok) {
+			if (controller.signal.aborted) return;
+			augmentItems = undefined;
+		}
+	}
+
+	export function focus() {
+		textareaEl?.focus();
+	}
+
+	onMount(() => {
+		const handleInsertText = (event: Event) => {
+			if (!(event instanceof CustomEvent)) return;
+			const parsed = z
+				.looseObject({
+					content: z.string(),
+					replace: z.boolean().optional()
+				})
+				.safeParse(event.detail);
+			if (!parsed.success) return;
+			const detail = parsed.data;
+			if (detail.replace) {
+				value = detail.content;
+				void tick().then(() => {
+					textareaEl?.focus();
+				});
+				return;
+			}
+			insertAtCursor(detail.content);
+		};
+		window.addEventListener('chat:insert-text', handleInsertText);
+		return () => {
+			window.removeEventListener('chat:insert-text', handleInsertText);
+			clearAugmentCompletions();
+			clearTimeout(augmentDebounceTimeout);
+			clearTimeout(typingTimeout);
+		};
+	});
+</script>
+
+<div class="relative flex min-h-0 flex-1 flex-col">
+	<textarea
+		bind:this={textareaEl}
+		bind:value
+		disabled={!canType}
+		placeholder={effectivePlaceholder}
+		aria-label={ariaLabel}
+		aria-disabled={!canType}
+		autocomplete="off"
+		autocapitalize="sentences"
+		class="min-h-11 max-h-56 w-full flex-1 resize-none border-0 bg-transparent px-3 py-2.5 text-sm leading-relaxed text-inherit outline-none [field-sizing:content] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+		enterkeyhint="send"
+		spellcheck="true"
+		rows={1}
+		oninput={handleInput}
+		onkeydown={handleKeydown}
+	></textarea>
+
+	<RuntimeChatCommandMenu
+		bind:open={menuOpen}
+		bind:type={menuType}
+		bind:query={menuQuery}
+		{agents}
+		{users}
+		slashCommands={menuSlashCommands}
+		{augmentItems}
+		onSelect={handleMenuSelect}
+	/>
+</div>

package/dist/svelte/components/runtime/RuntimeChatComposer.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { AIAugmentResult } from '@vibesdotdev/ai/augmentations/schemas/augment-runtime';
+import type { RuntimeChatCommandMenuItem, RuntimeChatParticipantOption } from './types.ts';
+type StagedAugmentContext = Extract<AIAugmentResult, {
+    type: 'augment';
+}>['staged'];
+type $$ComponentProps = {
+    value?: string;
+    placeholder?: string;
+    disabledPlaceholder?: string | null;
+    ariaLabel?: string;
+    canType?: boolean;
+    agents?: RuntimeChatParticipantOption[];
+    users?: RuntimeChatParticipantOption[];
+    slashCommands?: RuntimeChatCommandMenuItem[];
+    onTypingChange?: (isTyping: boolean) => void;
+    onStageContext?: (staged: StagedAugmentContext) => void;
+    onSubmit?: () => void;
+    onNotice?: (message: string) => void;
+    onError?: (message: string) => void;
+    onToast?: (level: 'info' | 'success' | 'error', message: string) => void;
+};
+declare const RuntimeChatComposer: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+}, "value">;
+type RuntimeChatComposer = ReturnType<typeof RuntimeChatComposer>;
+export default RuntimeChatComposer;
+//# sourceMappingURL=RuntimeChatComposer.svelte.d.ts.map

package/dist/svelte/components/runtime/RuntimeChatComposer.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RuntimeChatComposer.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/runtime/RuntimeChatComposer.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAGV,eAAe,EACf,MAAM,uDAAuD,CAAC;AAGhE,OAAO,KAAK,EAAE,0BAA0B,EAAE,4BAA4B,EAAE,MAAM,YAAY,CAAC;AAG1F,KAAK,oBAAoB,GAAG,OAAO,CAAC,eAAe,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC,CAAC;AACpF,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mBAAmB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACxC,KAAK,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACvC,aAAa,CAAC,EAAE,0BAA0B,EAAE,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACzE,CAAC;AA8bH,QAAA,MAAM,mBAAmB;;WAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}