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

package/dist/svelte/components/surface/ChatConversationPane.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { createEmptyStagedContext } from '@vibesdotdev/ai/context/schemas/staged-context-helpers';
+	import type { TextGenerationStagedContext } from '@vibesdotdev/ai-schemas/generation/contracts';
+	import type { ChatRoomCreateInput, ChatRoom } from '@vibesdotdev/chat/client/contracts';
+	import type { RuntimeChatParticipantOption } from '../runtime/types.js';
+	import RuntimeChatDialogHost from '../runtime/RuntimeChatDialogHost.svelte';
+	import type {
+		RuntimeChatAfterSend,
+		RuntimeChatBeforeSend,
+		RuntimeChatInputSnippets,
+		RuntimeChatSendBlocked
+	} from '../runtime/RuntimeChatInput.types.js';
+	import type { RuntimeChatDialogWidgetProps } from '../../dialog-widgets.js';
+	import ChatRoomHeader from './ChatRoomHeader.svelte';
+	import ChatMessageViewport from './ChatMessageViewport.svelte';
+	import ChatApprovalBar from './ChatApprovalBar.svelte';
+	import ChatNewConversationEmptyState from './ChatNewConversationEmptyState.svelte';
+	import ChatComposerPanel from './ChatComposerPanel.svelte';
+
+	let {
+		activeRoomId = null,
+		isNewChat = activeRoomId === null,
+		title,
+		description,
+		placeholder = 'Type a message...',
+		createRoomInput = {},
+		baseStagedContext,
+		dialogMode = 'event',
+		agents = [],
+		users = [],
+		attachmentsEnabled = true,
+		dialogWidgetProps = {},
+		fileAccept,
+		sendDisabled = false,
+		showComposer = true,
+		requireWorkspace = false,
+		requireImplementedDialogs = false,
+		notice,
+		headerExtras,
+		emptyActions,
+		includeEmptyRuntimeActions = true,
+		showEmptyFocusAction = true,
+		includeRuntimeActions = true,
+		statusPrefix,
+		statusExtras,
+		composerPrefix,
+		inviteEnabled = false,
+		manageToolsEnabled = false,
+		onInvite,
+		onManageTools,
+		onRoomCreated,
+		beforeSend,
+		onSent,
+		onSendStart,
+		onSendBlocked,
+		onAttachFiles,
+		onNotice = (_message: string) => {},
+		onError = (_message: string) => {}
+	}: {
+		activeRoomId?: string | null;
+		isNewChat?: boolean;
+		title: string;
+		description?: string;
+		placeholder?: string;
+		createRoomInput?: ChatRoomCreateInput;
+		baseStagedContext?: TextGenerationStagedContext;
+		dialogMode?: 'event' | 'insert-command';
+		agents?: RuntimeChatParticipantOption[];
+		users?: RuntimeChatParticipantOption[];
+		attachmentsEnabled?: boolean;
+		dialogWidgetProps?: RuntimeChatDialogWidgetProps;
+		fileAccept?: string;
+		sendDisabled?: boolean;
+		/** Hide composer chrome while a prerequisite is owned by the primary canvas. */
+		showComposer?: boolean;
+		requireWorkspace?: boolean;
+		requireImplementedDialogs?: boolean;
+		notice?: Snippet;
+		headerExtras?: Snippet;
+		emptyActions?: Snippet;
+		includeEmptyRuntimeActions?: boolean;
+		showEmptyFocusAction?: boolean;
+		includeRuntimeActions?: boolean;
+		statusPrefix?: RuntimeChatInputSnippets['statusPrefix'];
+		statusExtras?: RuntimeChatInputSnippets['statusExtras'];
+		composerPrefix?: RuntimeChatInputSnippets['composerPrefix'];
+		inviteEnabled?: boolean;
+		manageToolsEnabled?: boolean;
+		onInvite?: () => void | Promise<void>;
+		onManageTools?: () => void | Promise<void>;
+		onRoomCreated?: (room: ChatRoom) => void | Promise<void>;
+		beforeSend?: RuntimeChatBeforeSend;
+		onSent?: RuntimeChatAfterSend;
+		/** The composer committed to a send (before the turn's round-trip). */
+		onSendStart?: () => void;
+		onSendBlocked?: RuntimeChatSendBlocked;
+		onAttachFiles?: (files: FileList, roomId: string | null) => void | Promise<void>;
+		onNotice?: (message: string) => void;
+		onError?: (message: string) => void;
+	} = $props();
+
+	let stagedContext = $state<TextGenerationStagedContext>(createEmptyStagedContext());
+
+	function insertText(content: string) {
+		window.dispatchEvent(new CustomEvent('chat:insert-text', { detail: { content } }));
+	}
+
+	$effect(() => {
+		stagedContext = baseStagedContext ?? createEmptyStagedContext();
+	});
+</script>
+
+<section class="chat-conversation-pane" aria-label={title}>
+	{#if notice}
+		{@render notice()}
+	{/if}
+
+	{#if activeRoomId}
+		<ChatRoomHeader
+			{title}
+			extras={headerExtras}
+			{inviteEnabled}
+			{manageToolsEnabled}
+			{onInvite}
+			{onManageTools}
+		/>
+		<ChatMessageViewport roomId={activeRoomId} />
+		<ChatApprovalBar />
+	{:else}
+		<div class="chat-conversation-pane__empty">
+			<ChatNewConversationEmptyState
+				{title}
+				description={description ??
+					'Ask about jobs, files, drawings, estimates, materials, or what to do next.'}
+				actionMode={dialogMode === 'insert-command' ? 'insert-command' : 'event'}
+				includeRuntimeActions={includeEmptyRuntimeActions}
+				showFocusAction={showEmptyFocusAction}
+				onFocusComposer={() => window.dispatchEvent(new CustomEvent('chat:focus-composer'))}
+			>
+				{#snippet actions()}
+					{#if emptyActions}
+						{@render emptyActions()}
+					{/if}
+				{/snippet}
+			</ChatNewConversationEmptyState>
+		</div>
+	{/if}
+
+	{#if showComposer}
+		<ChatComposerPanel
+			{isNewChat}
+			{placeholder}
+			{createRoomInput}
+			{baseStagedContext}
+			bind:stagedContext
+			{agents}
+			{users}
+			{dialogMode}
+			{attachmentsEnabled}
+			{includeRuntimeActions}
+			{fileAccept}
+			{sendDisabled}
+			{requireWorkspace}
+			{requireImplementedDialogs}
+			{statusPrefix}
+			{statusExtras}
+			{composerPrefix}
+			{onRoomCreated}
+			{beforeSend}
+			{onSent}
+			{onSendStart}
+			{onSendBlocked}
+			{onAttachFiles}
+			{onNotice}
+			{onError}
+		/>
+	{/if}
+
+	<RuntimeChatDialogHost
+		roomId={activeRoomId}
+		bind:stagedContext
+		widgetProps={dialogWidgetProps}
+		onPromptInsert={insertText}
+		{onNotice}
+		{onError}
+	/>
+</section>
+
+<style>
+	.chat-conversation-pane {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	.chat-conversation-pane__empty {
+		min-height: 0;
+		flex: 1 1 auto;
+		overflow-y: auto;
+	}
+</style>

package/dist/svelte/components/surface/ChatConversationPane.svelte.d.ts

@@ -0,0 +1,52 @@
+import type { Snippet } from 'svelte';
+import type { TextGenerationStagedContext } from '@vibesdotdev/ai-schemas/generation/contracts';
+import type { ChatRoomCreateInput, ChatRoom } from '@vibesdotdev/chat/client/contracts';
+import type { RuntimeChatParticipantOption } from '../runtime/types.ts';
+import type { RuntimeChatAfterSend, RuntimeChatBeforeSend, RuntimeChatInputSnippets, RuntimeChatSendBlocked } from '../runtime/RuntimeChatInput.types.ts';
+import type { RuntimeChatDialogWidgetProps } from '../../dialog-widgets.ts';
+type $$ComponentProps = {
+    activeRoomId?: string | null;
+    isNewChat?: boolean;
+    title: string;
+    description?: string;
+    placeholder?: string;
+    createRoomInput?: ChatRoomCreateInput;
+    baseStagedContext?: TextGenerationStagedContext;
+    dialogMode?: 'event' | 'insert-command';
+    agents?: RuntimeChatParticipantOption[];
+    users?: RuntimeChatParticipantOption[];
+    attachmentsEnabled?: boolean;
+    dialogWidgetProps?: RuntimeChatDialogWidgetProps;
+    fileAccept?: string;
+    sendDisabled?: boolean;
+    /** Hide composer chrome while a prerequisite is owned by the primary canvas. */
+    showComposer?: boolean;
+    requireWorkspace?: boolean;
+    requireImplementedDialogs?: boolean;
+    notice?: Snippet;
+    headerExtras?: Snippet;
+    emptyActions?: Snippet;
+    includeEmptyRuntimeActions?: boolean;
+    showEmptyFocusAction?: boolean;
+    includeRuntimeActions?: boolean;
+    statusPrefix?: RuntimeChatInputSnippets['statusPrefix'];
+    statusExtras?: RuntimeChatInputSnippets['statusExtras'];
+    composerPrefix?: RuntimeChatInputSnippets['composerPrefix'];
+    inviteEnabled?: boolean;
+    manageToolsEnabled?: boolean;
+    onInvite?: () => void | Promise<void>;
+    onManageTools?: () => void | Promise<void>;
+    onRoomCreated?: (room: ChatRoom) => void | Promise<void>;
+    beforeSend?: RuntimeChatBeforeSend;
+    onSent?: RuntimeChatAfterSend;
+    /** The composer committed to a send (before the turn's round-trip). */
+    onSendStart?: () => void;
+    onSendBlocked?: RuntimeChatSendBlocked;
+    onAttachFiles?: (files: FileList, roomId: string | null) => void | Promise<void>;
+    onNotice?: (message: string) => void;
+    onError?: (message: string) => void;
+};
+declare const ChatConversationPane: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatConversationPane = ReturnType<typeof ChatConversationPane>;
+export default ChatConversationPane;
+//# sourceMappingURL=ChatConversationPane.svelte.d.ts.map

package/dist/svelte/components/surface/ChatConversationPane.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatConversationPane.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatConversationPane.svelte.ts"],"names":[],"mappings":"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"}

package/dist/svelte/components/surface/ChatConversationSidebar.svelte

@@ -0,0 +1,134 @@
+<script module lang="ts">
+	export interface ChatConversationSidebarRoom {
+		id: string;
+		title?: string | null;
+		description?: string | null;
+		visibility?: string | null;
+		type?: string | null;
+		icon?: string | null;
+		createdAt?: string | null;
+		updatedAt?: string | null;
+		lastMessageAt?: string | null;
+	}
+</script>
+
+<script lang="ts">
+	import { useChatSurface } from '../../surface-context.js';
+	const { conversationsStore, chatStore, chatRoomStore, runtimeChatStore } = useChatSurface();
+
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import ConversationsTree from '../conversations/ConversationsTree.svelte';
+
+
+
+	let {
+		title = 'Chat',
+		rooms: providedRooms,
+		activeRoomId: providedActiveRoomId,
+		openRoomOnSelect = true,
+		newConversationLabel = 'New conversation',
+		onNew = () => {},
+		onSelectRoom = (_roomId: string) => {},
+		onClose = () => {}
+	}: {
+		title?: string;
+		rooms?: ChatConversationSidebarRoom[];
+		activeRoomId?: string | null;
+		openRoomOnSelect?: boolean;
+		newConversationLabel?: string;
+		onNew?: () => void;
+		onSelectRoom?: (roomId: string) => void;
+		onClose?: () => void;
+	} = $props();
+
+	const storeRooms = $derived(Array.from(chatStore.rooms.values()));
+	let tree = $state<ConversationsTree>();
+	const rooms = $derived(providedRooms ?? storeRooms);
+	const activeRoomId = $derived(
+		providedActiveRoomId === undefined ? chatRoomStore.roomId : providedActiveRoomId
+	);
+
+	async function selectRoom(roomId: string) {
+		onSelectRoom(roomId);
+		if (openRoomOnSelect && roomId !== activeRoomId) await runtimeChatStore.openRoom(roomId);
+	}
+
+	function roomTitle(room: ChatConversationSidebarRoom): string {
+		const trimmed = room.title?.trim();
+		return trimmed ? trimmed : 'Untitled conversation';
+	}
+
+	function roomMeta(room: ChatConversationSidebarRoom): string | null {
+		if (room.description?.trim()) return room.description.trim();
+		const timestamp = room.lastMessageAt ?? room.updatedAt ?? room.createdAt;
+		if (!timestamp) return null;
+		const date = new Date(timestamp);
+		if (Number.isNaN(date.getTime())) return null;
+		return `Updated ${date.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;
+	}
+</script>
+
+<section class="chat-conversation-sidebar flex h-full min-h-0 flex-col bg-background">
+	<header class="chat-conversation-sidebar__header flex items-center justify-between gap-3 border-b border-border p-3">
+		<div class="chat-conversation-sidebar__title flex min-w-0 items-center gap-2 font-bold">
+			<Icon icon="lucide:message-square" class="h-4 w-4" aria-hidden="true" />
+			<span>{title}</span>
+		</div>
+		<div class="chat-conversation-sidebar__actions flex items-center gap-1">
+			{#if !providedRooms}
+				<Button variant="ghost" size="icon" title="New folder" disabled={conversationsStore.busy} onclick={() => tree?.newFolder()}>
+					<Icon icon="lucide:folder-plus" class="size-4" /><span class="sr-only">New folder</span>
+				</Button>
+			{/if}
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				class="h-8 w-8"
+				onclick={onNew}
+				title={newConversationLabel}
+			>
+				<Icon icon="lucide:plus" class="h-4 w-4" aria-hidden="true" />
+				<span class="sr-only">{newConversationLabel}</span>
+			</Button>
+			<Button
+				type="button"
+				variant="ghost"
+				size="icon"
+				class="h-8 w-8"
+				onclick={onClose}
+				title="Close"
+			>
+				<Icon icon="lucide:x" class="h-4 w-4" aria-hidden="true" />
+				<span class="sr-only">Close</span>
+			</Button>
+		</div>
+	</header>
+	<nav class="chat-conversation-sidebar__list grid min-h-0 content-start gap-1 overflow-y-auto p-2" aria-label="Conversations">
+		{#if !providedRooms}
+			<ConversationsTree bind:this={tree} compact onSelectRoom={(id) => void selectRoom(id)} />
+		{:else if rooms.length === 0}
+			<div class="chat-conversation-sidebar__empty grid justify-items-center gap-3 p-4 text-center text-sm text-muted-foreground">
+				<p>Your conversations will appear here.</p>
+			</div>
+		{:else}
+			{#each rooms as room (room.id)}
+				<button
+					type="button"
+					class="chat-conversation-sidebar__item grid w-full gap-1 rounded-md px-2.5 py-2 text-left hover:bg-accent data-[active=true]:bg-accent"
+					class:chat-conversation-sidebar__item--active={room.id === activeRoomId}
+					data-active={room.id === activeRoomId ? 'true' : 'false'}
+					aria-current={room.id === activeRoomId ? 'page' : undefined}
+					title={roomTitle(room)}
+					onclick={() => void selectRoom(room.id)}
+				>
+						<span class="chat-conversation-sidebar__item-title block truncate">{roomTitle(room)}</span>
+					{#if roomMeta(room)}
+						<span class="chat-conversation-sidebar__item-meta block truncate text-xs text-muted-foreground">{roomMeta(room)}</span>
+					{/if}
+				</button>
+			{/each}
+		{/if}
+	</nav>
+</section>

package/dist/svelte/components/surface/ChatConversationSidebar.svelte.d.ts

@@ -0,0 +1,25 @@
+export interface ChatConversationSidebarRoom {
+    id: string;
+    title?: string | null;
+    description?: string | null;
+    visibility?: string | null;
+    type?: string | null;
+    icon?: string | null;
+    createdAt?: string | null;
+    updatedAt?: string | null;
+    lastMessageAt?: string | null;
+}
+type $$ComponentProps = {
+    title?: string;
+    rooms?: ChatConversationSidebarRoom[];
+    activeRoomId?: string | null;
+    openRoomOnSelect?: boolean;
+    newConversationLabel?: string;
+    onNew?: () => void;
+    onSelectRoom?: (roomId: string) => void;
+    onClose?: () => void;
+};
+declare const ChatConversationSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatConversationSidebar = ReturnType<typeof ChatConversationSidebar>;
+export default ChatConversationSidebar;
+//# sourceMappingURL=ChatConversationSidebar.svelte.d.ts.map

package/dist/svelte/components/surface/ChatConversationSidebar.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatConversationSidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatConversationSidebar.svelte.ts"],"names":[],"mappings":"AAGC,MAAM,WAAW,2BAA2B;IAC3C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B;AASD,KAAK,gBAAgB,GAAI;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,2BAA2B,EAAE,CAAC;IACtC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AA+FH,QAAA,MAAM,uBAAuB,sDAAwC,CAAC;AACtE,KAAK,uBAAuB,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,CAAC;AAC1E,eAAe,uBAAuB,CAAC"}

package/dist/svelte/components/surface/ChatConversationSplit.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Resizable from '@vibesdotdev/kit/components/ui/resizable';
+
+	let {
+		top,
+		bottom,
+		autoSaveId = 'chat:conversation-split',
+		defaultBottomSize = 28,
+		topMinSize = 20,
+		bottomMinSize = 14,
+		bottomMaxSize = 60,
+		handleClass = ''
+	}: {
+		top: Snippet;
+		bottom: Snippet;
+		autoSaveId?: string;
+		defaultBottomSize?: number;
+		topMinSize?: number;
+		bottomMinSize?: number;
+		bottomMaxSize?: number;
+		handleClass?: string;
+	} = $props();
+</script>
+
+<Resizable.PaneGroup direction="vertical" class="chat-conversation-split" {autoSaveId}>
+	<Resizable.Pane minSize={topMinSize} order={1}>
+		<div class="chat-conversation-split__top">
+			{@render top()}
+		</div>
+	</Resizable.Pane>
+
+	<Resizable.Handle
+		withHandle
+		class={`chat-conversation-split__handle ${handleClass}`.trim()}
+	/>
+
+	<Resizable.Pane
+		defaultSize={defaultBottomSize}
+		minSize={bottomMinSize}
+		maxSize={bottomMaxSize}
+		order={2}
+	>
+		<div class="chat-conversation-split__bottom">
+			{@render bottom()}
+		</div>
+	</Resizable.Pane>
+</Resizable.PaneGroup>
+
+<style>
+	:global(.chat-conversation-split) {
+		width: 100%;
+		height: 100%;
+		min-height: 0;
+		overflow: hidden;
+	}
+
+	.chat-conversation-split__top,
+	.chat-conversation-split__bottom {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		min-width: 0;
+		min-height: 0;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	:global(.chat-conversation-split__handle) {
+		background: var(--border, rgba(0, 0, 0, 0.1));
+	}
+</style>

package/dist/svelte/components/surface/ChatConversationSplit.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    top: Snippet;
+    bottom: Snippet;
+    autoSaveId?: string;
+    defaultBottomSize?: number;
+    topMinSize?: number;
+    bottomMinSize?: number;
+    bottomMaxSize?: number;
+    handleClass?: string;
+};
+declare const ChatConversationSplit: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatConversationSplit = ReturnType<typeof ChatConversationSplit>;
+export default ChatConversationSplit;
+//# sourceMappingURL=ChatConversationSplit.svelte.d.ts.map

package/dist/svelte/components/surface/ChatConversationSplit.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatConversationSplit.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatConversationSplit.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,GAAG,EAAE,OAAO,CAAC;IACb,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAqCH,QAAA,MAAM,qBAAqB,sDAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/components/surface/ChatMessageViewport.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import RuntimeChatMessages from '../runtime/RuntimeChatMessages.svelte';
+
+	let {
+		roomId = null,
+		emptyState
+	}: {
+		roomId?: string | null;
+		emptyState?: Snippet;
+	} = $props();
+</script>
+
+<div class="chat-message-viewport">
+	<RuntimeChatMessages {roomId} {emptyState} />
+</div>
+
+<style>
+	.chat-message-viewport {
+		min-height: 0;
+		flex: 1 1 auto;
+		overflow: hidden;
+	}
+</style>

package/dist/svelte/components/surface/ChatMessageViewport.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    roomId?: string | null;
+    emptyState?: Snippet;
+};
+declare const ChatMessageViewport: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatMessageViewport = ReturnType<typeof ChatMessageViewport>;
+export default ChatMessageViewport;
+//# sourceMappingURL=ChatMessageViewport.svelte.d.ts.map

package/dist/svelte/components/surface/ChatMessageViewport.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageViewport.svelte.d.ts","sourceRoot":"","sources":["../../../../src/svelte/components/surface/ChatMessageViewport.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGrC,KAAK,gBAAgB,GAAI;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAmBH,QAAA,MAAM,mBAAmB,sDAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}