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

package/dist/svelte/components/ChatMessageBubble.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ChatRenderableMessage } from './utils/types.js';
+interface Props {
+    message: ChatRenderableMessage;
+    compact?: boolean;
+    allowUnsafeHtml?: boolean;
+    class?: string;
+}
+declare const ChatMessageBubble: import("svelte").Component<Props, {}, "">;
+type ChatMessageBubble = ReturnType<typeof ChatMessageBubble>;
+export default ChatMessageBubble;
+//# sourceMappingURL=ChatMessageBubble.svelte.d.ts.map

package/dist/svelte/components/ChatMessageBubble.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBubble.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageBubble.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,qBAAqB,EAAgB,MAAM,kBAAkB,CAAC;AAI3E,UAAU,KAAK;IACd,OAAO,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA4GF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/svelte/components/ChatMessageContent.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+	import { MarkdownRenderer } from '@vibesdotdev/kit/components/markdown';
+	import { normalizeChatMarkdownContent } from './utils/message-utils.js';
+	import {
+		hasOpenFence,
+		splitSettledMarkdown,
+		toArrivalChunks
+	} from './utils/streaming-markdown.js';
+
+	let {
+		content,
+		allowUnsafeHtml = false,
+		streaming = false,
+		caret = false
+	}: {
+		content: string;
+		allowUnsafeHtml?: boolean;
+		streaming?: boolean;
+		/**
+		 * Append a blinking caret after the streamed text — the "this is the live,
+		 * currently-appending text" affordance. Only the active tail segment should
+		 * pass this; finished text never shows a caret.
+		 */
+		caret?: boolean;
+	} = $props();
+
+	// Chat messages enable GFM tables and `\n` → `<br>` so streamed
+	// tokens render readably as they arrive. HTML stays sanitized by
+	// default — opt-in via `allowUnsafeHtml` for trusted system messages.
+	//
+	// This object is deliberately derived from `allowUnsafeHtml` alone: its
+	// identity has to stay stable across tokens, or the settled renderer below
+	// re-parses on every frame and we are back to the O(n²) behaviour of GH #580.
+	const config = $derived({
+		allowUnsafeHtml,
+		enableGfm: true,
+		enableBreaks: true
+	});
+	const displayContent = $derived(normalizeChatMarkdownContent(content));
+
+	// Split the live buffer at the last COMPLETE block. The settled prefix is
+	// stable, so the markdown renderer re-parses it once per completed block
+	// rather than once per token; only the trailing partial block is plain text.
+	// See `utils/streaming-markdown.ts` for why this is safe mid-fence.
+	const split = $derived(
+		streaming ? splitSettledMarkdown(displayContent) : { settled: displayContent, tail: '' }
+	);
+
+	// The tail is ALSO markdown-rendered. A typical chat reply is a single
+	// paragraph that never reaches a block boundary until it finishes, so
+	// settling-only left the common case showing raw `**bold**` for the whole
+	// stream. Parsing one block per token is O(block); the O(n²) of GH #580 came
+	// from re-parsing the entire reply, which the settled prefix now prevents.
+	//
+	// The exception is an unclosed fence: there the renderer would re-highlight
+	// growing code every token and paint a block whose end keeps moving, so the
+	// tail falls back to chunked plain text.
+	const tailIsCode = $derived(streaming && hasOpenFence(split.tail));
+	const arrivalChunks = $derived(tailIsCode ? toArrivalChunks(split.tail) : []);
+</script>
+
+<div class="chat-message-content">
+	{#if streaming}
+		{#if split.settled}
+			<MarkdownRenderer content={split.settled} {config} />
+		{/if}
+		{#if tailIsCode}
+			<p
+				class="chat-message-content__streaming"
+				class:has-settled={!!split.settled}
+				class:has-caret={caret}
+			>
+				<!-- Keyed by index on purpose: appending a token adds spans at the end
+				     and reuses every earlier one, so only genuinely new text plays the
+				     arrival animation and settled words never re-flash. -->
+				{#each arrivalChunks as chunk, index (index)}<span class="chat-message-content__chunk"
+						>{chunk}</span
+					>{/each}
+			</p>
+		{:else if split.tail}
+			<div
+				class="chat-message-content__tail"
+				class:has-settled={!!split.settled}
+				class:has-caret={caret}
+			>
+				<MarkdownRenderer content={split.tail} {config} />
+			</div>
+		{:else if caret}
+			<!-- A turn that has opened but produced no text yet still owes the reader
+			     a "something is coming" mark. Both branches above are content-gated,
+			     so without this the caret would vanish for exactly the moment it is
+			     most needed. -->
+			<p class="chat-message-content__streaming has-caret" class:has-settled={!!split.settled}></p>
+		{/if}
+	{:else}
+		<MarkdownRenderer content={displayContent} {config} />
+	{/if}
+</div>
+
+<style lang="postcss">
+	.chat-message-content {
+		/* Layout is owned by the bubble; this is a transparent wrapper. */
+		display: contents;
+	}
+
+	.chat-message-content__streaming {
+		margin: 0;
+		white-space: pre-wrap;
+		word-break: break-word;
+		overflow-wrap: break-word;
+	}
+
+	/* The settled prefix always ends at a block boundary, so the live tail is a
+	   new block and owes it the same gap a paragraph would get. */
+	.chat-message-content__streaming.has-settled,
+	.chat-message-content__tail.has-settled {
+		margin-top: 0.75rem;
+	}
+
+	/* The caret rides the END of the last rendered block as a pseudo-element, so
+	   the live tail keeps full markdown rendering and still shows the "text is
+	   arriving here" affordance — no DOM surgery on the renderer's output. */
+	.chat-message-content__tail.has-caret :global(> * > *:last-child::after),
+	.chat-message-content__streaming.has-caret::after {
+		content: '';
+		display: inline-block;
+		width: 0.5ch;
+		height: 1.05em;
+		margin-left: 0.12ch;
+		vertical-align: text-bottom;
+		border-radius: 1px;
+		background: var(--primary, currentColor);
+		animation: chat-caret-blink 1.1s ease-in-out infinite;
+	}
+
+	/* Per-chunk arrival. `both` fill-mode matters: without it a chunk is briefly
+	   painted at full opacity before the animation's first frame lands, which
+	   reads as a flicker at token rate. Durations come from the kit motion tokens,
+	   so `[data-vibes-motion]` actually governs this. */
+	.chat-message-content__chunk {
+		display: inline;
+		animation: chat-chunk-arrive var(--motion-orient, 220ms) var(--ease-arrive, ease-out) both;
+	}
+
+	@keyframes chat-chunk-arrive {
+		from {
+			opacity: 0;
+			filter: blur(1.5px);
+		}
+		to {
+			opacity: 1;
+			filter: blur(0);
+		}
+	}
+
+	@keyframes chat-caret-blink {
+		0%,
+		100% {
+			opacity: 0.15;
+		}
+		50% {
+			opacity: 0.85;
+		}
+	}
+
+	/* `--motion-orient` collapses to 0ms under the reduced/off states, which
+	   removes the arrival animation's duration. The caret's own infinite loop and
+	   the OS-level preference still need explicit handling: a blinking bar is the
+	   exact kind of persistent motion a reduced-motion request is about. */
+	:global([data-vibes-motion='reduced']) .chat-message-content__tail.has-caret
+		:global(> * > *:last-child::after),
+	:global([data-vibes-motion='off']) .chat-message-content__tail.has-caret
+		:global(> * > *:last-child::after),
+	:global([data-vibes-motion='reduced']) .chat-message-content__streaming.has-caret::after,
+	:global([data-vibes-motion='off']) .chat-message-content__streaming.has-caret::after {
+		animation: none;
+		opacity: 0.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.chat-message-content__tail.has-caret :global(> * > *:last-child::after),
+		.chat-message-content__streaming.has-caret::after {
+			animation: none;
+			opacity: 0.5;
+		}
+
+		.chat-message-content__chunk {
+			animation: none;
+		}
+	}
+</style>

package/dist/svelte/components/ChatMessageContent.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    content: string;
+    allowUnsafeHtml?: boolean;
+    streaming?: boolean;
+    /**
+     * Append a blinking caret after the streamed text — the "this is the live,
+     * currently-appending text" affordance. Only the active tail segment should
+     * pass this; finished text never shows a caret.
+     */
+    caret?: boolean;
+};
+declare const ChatMessageContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatMessageContent = ReturnType<typeof ChatMessageContent>;
+export default ChatMessageContent;
+//# sourceMappingURL=ChatMessageContent.svelte.d.ts.map

package/dist/svelte/components/ChatMessageContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageContent.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageContent.svelte.ts"],"names":[],"mappings":"AAWC,KAAK,gBAAgB,GAAI;IACxB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AA2EH,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/svelte/components/ChatMessageReactions.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	/**
+	 * ChatMessageReactions — up/down reaction chips for a chat message.
+	 *
+	 * Store-free and transport-free by contract: the app owns identity,
+	 * optimistic state, and the room reaction route; this component renders
+	 * counts and reports click intent. Counts/mine are plain props so the
+	 * app can pass either server-folded metadata or its optimistic override.
+	 */
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import type { ReactionType } from './utils/types.js';
+
+	type Props = {
+		/** Current tallies. Chips render when non-zero or when toggling is allowed. */
+		counts: { up: number; down: number };
+		/** The viewer's own reaction, if any (drives the active chip state). */
+		mine?: ReactionType | undefined;
+		/** Whether the viewer may add/remove a reaction right now. */
+		canToggle?: boolean;
+		/** Disable chips while the app applies a reaction (optimistic round-trip). */
+		busy?: boolean;
+		/** Click intent. The app decides POST-vs-DELETE semantics (toggle = remove mine). */
+		onReact?: (type: ReactionType) => void;
+	};
+
+	let { counts, mine = undefined, canToggle = false, busy = false, onReact }: Props = $props();
+
+	const visible = $derived(counts.up > 0 || counts.down > 0 || canToggle);
+
+	function handle(type: ReactionType) {
+		if (!canToggle || busy) return;
+		onReact?.(type);
+	}
+</script>
+
+{#if visible}
+	<div class="mt-1.5 flex gap-1.5" role="group" aria-label="Message reactions">
+		<Button
+			type="button"
+			variant={mine === 'up' ? 'secondary' : 'outline'}
+			size="sm"
+			class="h-7 rounded-full px-2 text-xs"
+			disabled={!canToggle || busy}
+			aria-pressed={mine === 'up'}
+			title={canToggle ? 'Upvote' : 'Upvotes'}
+			onclick={() => handle('up')}
+		>
+			<Icon icon="lucide:thumbs-up" class="h-3.5 w-3.5" />
+			{#if counts.up > 0}<span class="tabular-nums">{counts.up}</span>{/if}
+		</Button>
+		<Button
+			type="button"
+			variant={mine === 'down' ? 'secondary' : 'outline'}
+			size="sm"
+			class="h-7 rounded-full px-2 text-xs"
+			disabled={!canToggle || busy}
+			aria-pressed={mine === 'down'}
+			title={canToggle ? 'Downvote' : 'Downvotes'}
+			onclick={() => handle('down')}
+		>
+			<Icon icon="lucide:thumbs-down" class="h-3.5 w-3.5" />
+			{#if counts.down > 0}<span class="tabular-nums">{counts.down}</span>{/if}
+		</Button>
+	</div>
+{/if}

package/dist/svelte/components/ChatMessageReactions.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ReactionType } from './utils/types.js';
+type Props = {
+    /** Current tallies. Chips render when non-zero or when toggling is allowed. */
+    counts: {
+        up: number;
+        down: number;
+    };
+    /** The viewer's own reaction, if any (drives the active chip state). */
+    mine?: ReactionType | undefined;
+    /** Whether the viewer may add/remove a reaction right now. */
+    canToggle?: boolean;
+    /** Disable chips while the app applies a reaction (optimistic round-trip). */
+    busy?: boolean;
+    /** Click intent. The app decides POST-vs-DELETE semantics (toggle = remove mine). */
+    onReact?: (type: ReactionType) => void;
+};
+declare const ChatMessageReactions: import("svelte").Component<Props, {}, "">;
+type ChatMessageReactions = ReturnType<typeof ChatMessageReactions>;
+export default ChatMessageReactions;
+//# sourceMappingURL=ChatMessageReactions.svelte.d.ts.map

package/dist/svelte/components/ChatMessageReactions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageReactions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageReactions.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGpD,KAAK,KAAK,GAAG;IACZ,+EAA+E;IAC/E,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,wEAAwE;IACxE,IAAI,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IAChC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,8EAA8E;IAC9E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,qFAAqF;IACrF,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;CACvC,CAAC;AAiCH,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/ChatMessageSkeleton.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Skeleton } from '@vibesdotdev/kit/components/ui/skeleton';
+
+	interface Props {
+		compact?: boolean;
+	}
+
+	let { compact = false }: Props = $props();
+</script>
+
+<div class="motion-safe:animate-pulse space-y-2">
+	<Skeleton class={compact ? 'h-2 w-11/12' : 'h-3 w-11/12'} />
+	<Skeleton class={compact ? 'h-2 w-10/12' : 'h-3 w-10/12'} />
+	<Skeleton class={compact ? 'h-2 w-8/12' : 'h-3 w-8/12'} />
+</div>

package/dist/svelte/components/ChatMessageSkeleton.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    compact?: boolean;
+}
+declare const ChatMessageSkeleton: import("svelte").Component<Props, {}, "">;
+type ChatMessageSkeleton = ReturnType<typeof ChatMessageSkeleton>;
+export default ChatMessageSkeleton;
+//# sourceMappingURL=ChatMessageSkeleton.svelte.d.ts.map

package/dist/svelte/components/ChatMessageSkeleton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageSkeleton.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageSkeleton.svelte.ts"],"names":[],"mappings":"AAMC,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAgBF,QAAA,MAAM,mBAAmB,2CAAwC,CAAC;AAClE,KAAK,mBAAmB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,CAAC;AAClE,eAAe,mBAAmB,CAAC"}

package/dist/svelte/components/ChatMessageStatusBadge.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { Badge } from '@vibesdotdev/kit/components/ui/badge';
+	import { Icon } from '@vibesdotdev/kit/components/icon';
+	import { cn } from '@vibesdotdev/kit/utils';
+	import type { ChatMessageStatus } from './utils/types.js';
+	import {
+		getMessageStatusColor,
+		getMessageStatusText,
+		isLiveMessageStatus
+	} from './utils/message-utils.js';
+
+	interface Props {
+		status: ChatMessageStatus;
+		variant?: 'full' | 'icons' | 'text';
+		count?: number;
+	}
+
+	let { status, variant = 'full', count }: Props = $props();
+
+	const live = $derived(isLiveMessageStatus(status));
+	const view = $derived(statusView(status));
+	const label = $derived(count ? `${count} ${view.text}` : view.text);
+	const iconClass = $derived(cn(view.color, view.spin && 'motion-safe:animate-spin'));
+
+	type StatusView = {
+		icon: string;
+		text: string;
+		color: string;
+		spin?: boolean;
+	};
+
+	function statusView(status: ChatMessageStatus): StatusView {
+		const text = getMessageStatusText(status);
+		const color = getMessageStatusColor(status);
+		if (status === 'sent' || status === 'completed') {
+			return { icon: 'lucide:check-circle-2', text, color };
+		}
+		if (status === 'failed' || status === 'declined' || status === 'cancelled') {
+			return { icon: 'lucide:alert-circle', text, color };
+		}
+		if (status === 'pending' || status === 'processing' || status === 'queued') {
+			return { icon: 'lucide:clock', text, color };
+		}
+		return { icon: 'lucide:loader-circle', text, color, spin: true };
+	}
+</script>
+
+{#if variant === 'full' || variant === 'text'}
+	<Badge
+		variant="secondary"
+		class={cn('flex items-center gap-1', live && 'motion-safe:animate-pulse')}
+		aria-label={label}
+	>
+		{#if variant === 'full'}
+			<Icon icon={view.icon} class={iconClass} size={14} aria-hidden="true" />
+		{/if}
+		<span>{label}</span>
+	</Badge>
+{:else}
+	<span class="inline-flex" role="img" aria-label={label} title={label}>
+		<Icon icon={view.icon} class={iconClass} size={16} aria-hidden="true" />
+	</span>
+{/if}

package/dist/svelte/components/ChatMessageStatusBadge.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { ChatMessageStatus } from './utils/types.js';
+interface Props {
+    status: ChatMessageStatus;
+    variant?: 'full' | 'icons' | 'text';
+    count?: number;
+}
+declare const ChatMessageStatusBadge: import("svelte").Component<Props, {}, "">;
+type ChatMessageStatusBadge = ReturnType<typeof ChatMessageStatusBadge>;
+export default ChatMessageStatusBadge;
+//# sourceMappingURL=ChatMessageStatusBadge.svelte.d.ts.map

package/dist/svelte/components/ChatMessageStatusBadge.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageStatusBadge.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageStatusBadge.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAQzD,UAAU,KAAK;IACd,MAAM,EAAE,iBAAiB,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAuDF,QAAA,MAAM,sBAAsB,2CAAwC,CAAC;AACrE,KAAK,sBAAsB,GAAG,UAAU,CAAC,OAAO,sBAAsB,CAAC,CAAC;AACxE,eAAe,sBAAsB,CAAC"}

package/dist/svelte/components/ChatMessageTimestamp.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { formatDistanceToNow } from 'date-fns';
+	import { settleNow } from '@vibesdotdev/kernel';
+	import { BROWSER } from 'esm-env';
+	import { subscribeRelativeTimeTick, getRelativeTimeTick } from './relative-time-tick.svelte.js';
+
+	interface Props {
+		createdAt: string | Date | undefined;
+		class?: string;
+	}
+
+	let { createdAt, class: className }: Props = $props();
+
+	function toDate(value: Props['createdAt']): Date | null {
+		if (!value) return null;
+		const date = value instanceof Date ? value : new Date(value);
+		return Number.isNaN(date.getTime()) ? null : date;
+	}
+
+	function formatTimestamp(value: Props['createdAt']): string {
+		const date = toDate(value);
+		if (!date) return 'just now';
+		const formatted = settleNow(() => formatDistanceToNow(date, { addSuffix: true }));
+		return formatted.ok ? formatted.value : 'just now';
+	}
+
+	const timestamp = $derived(toDate(createdAt));
+	const datetime = $derived(timestamp?.toISOString());
+	const fullLabel = $derived(timestamp?.toLocaleString() ?? 'Just now');
+	const baseClass = $derived(
+		className ? `${className} text-muted-foreground` : 'text-muted-foreground'
+	);
+
+	// Subscribe to the shared 30s tick — one timer for all timestamps.
+	$effect(() => {
+		if (!BROWSER) return;
+		return subscribeRelativeTimeTick();
+	});
+
+	const text = $derived.by(() => {
+		void getRelativeTimeTick();
+		return formatTimestamp(createdAt);
+	});
+</script>
+
+<time class={baseClass} {datetime} title={fullLabel} aria-label={fullLabel}>{text}</time>

package/dist/svelte/components/ChatMessageTimestamp.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    createdAt: string | Date | undefined;
+    class?: string;
+}
+declare const ChatMessageTimestamp: import("svelte").Component<Props, {}, "">;
+type ChatMessageTimestamp = ReturnType<typeof ChatMessageTimestamp>;
+export default ChatMessageTimestamp;
+//# sourceMappingURL=ChatMessageTimestamp.svelte.d.ts.map

package/dist/svelte/components/ChatMessageTimestamp.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageTimestamp.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageTimestamp.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IACd,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AA8CF,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/ChatMessageToolCalls.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Button } from '@vibesdotdev/kit/components/ui/button';
+	import {
+		DefaultToolCard,
+		MessageToolCalls,
+		ToolWidgetStateCard,
+		type ToolCallView,
+		type ToolWidgetFallbackState
+	} from '@vibesdotdev/kit/components/tool-widgets';
+
+	import type { VibesRuntime } from '@vibesdotdev/kernel';
+	import { useChatToolWidgetResolver } from '../tool-widget-resolver.svelte.js';
+	import { withCanonicalToolWidgetNames } from '../tool-widgets.js';
+	import MissingToolCard from './MissingToolCard.svelte';
+	import ChatResponseStopButton from './ChatResponseStopButton.svelte';
+	import {
+		isCancellableToolCall,
+		ToolCallCancellationIntent
+	} from './tool-call-cancellation.svelte.js';
+
+	interface Props {
+		runtime?: VibesRuntime;
+		tools: ToolCallView[];
+		compact?: boolean;
+		inlineBeforeBody?: boolean;
+		body?: Snippet;
+		/** Consumer tail marker: older calls cut from this projection. */
+		history?: { total: number; omitted: number } | null;
+		/** Recovery in flight (disables the button, shows progress). */
+		historyLoading?: boolean;
+		/** Recovery failure, rendered under the button. */
+		historyError?: string | null;
+		/** Load the omitted calls; the app owns transport + merge. */
+		onLoadHistory?: () => void;
+		onCancel?: () => void | Promise<void>;
+	}
+
+	let {
+		tools,
+		runtime,
+		compact = false,
+		inlineBeforeBody = false,
+		body,
+		history = null,
+		historyLoading = false,
+		historyError = null,
+		onLoadHistory,
+		onCancel
+	}: Props = $props();
+	const cancellation = new ToolCallCancellationIntent();
+	const binding = useChatToolWidgetResolver(() => runtime);
+	const canonicalTools = $derived(withCanonicalToolWidgetNames(tools));
+	const visibleTools = $derived(canonicalTools.map((tool) => cancellation.project(tool)));
+</script>
+
+{#if history && history.omitted > 0 && onLoadHistory}
+	<div class="flex flex-col items-start gap-1 mb-1">
+		<Button variant="ghost" size="sm" disabled={historyLoading} onclick={onLoadHistory}>
+			{historyLoading
+				? 'Loading earlier tool calls…'
+				: `Show ${history.omitted} earlier tool ${history.omitted === 1 ? 'call' : 'calls'} (${history.total} total)`}
+		</Button>
+		{#if historyError}
+			<p class="m-0 text-xs text-destructive" role="alert">{historyError}</p>
+		{/if}
+	</div>
+{/if}
+
+{#snippet actions(tool: ToolCallView)}
+	{#if onCancel && isCancellableToolCall(tool)}
+		<ChatResponseStopButton onStop={() => cancellation.request(tool, onCancel)} />
+	{/if}
+{/snippet}
+
+{#snippet fallback(tool: ToolCallView, state: ToolWidgetFallbackState)}
+	{#if state.kind === 'unregistered-user'}
+		<DefaultToolCard {tool} {compact} />
+	{:else if state.kind === 'first-party-missing'}
+		<MissingToolCard {tool} {compact} />
+	{:else}
+		<ToolWidgetStateCard {tool} {compact} {state} />
+	{/if}
+{/snippet}
+
+<MessageToolCalls
+	tools={visibleTools}
+	{compact}
+	{inlineBeforeBody}
+	{body}
+	resolver={binding.resolver}
+	actions={onCancel ? actions : undefined}
+	{fallback}
+/>

package/dist/svelte/components/ChatMessageToolCalls.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import { type ToolCallView } from '@vibesdotdev/kit/components/tool-widgets';
+import type { VibesRuntime } from '@vibesdotdev/kernel';
+interface Props {
+    runtime?: VibesRuntime;
+    tools: ToolCallView[];
+    compact?: boolean;
+    inlineBeforeBody?: boolean;
+    body?: Snippet;
+    /** Consumer tail marker: older calls cut from this projection. */
+    history?: {
+        total: number;
+        omitted: number;
+    } | null;
+    /** Recovery in flight (disables the button, shows progress). */
+    historyLoading?: boolean;
+    /** Recovery failure, rendered under the button. */
+    historyError?: string | null;
+    /** Load the omitted calls; the app owns transport + merge. */
+    onLoadHistory?: () => void;
+    onCancel?: () => void | Promise<void>;
+}
+declare const ChatMessageToolCalls: import("svelte").Component<Props, {}, "">;
+type ChatMessageToolCalls = ReturnType<typeof ChatMessageToolCalls>;
+export default ChatMessageToolCalls;
+//# sourceMappingURL=ChatMessageToolCalls.svelte.d.ts.map

package/dist/svelte/components/ChatMessageToolCalls.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageToolCalls.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/ChatMessageToolCalls.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,EAIL,KAAK,YAAY,EAEjB,MAAM,0CAA0C,CAAC;AAEnD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAWvD,UAAU,KAAK;IACd,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,kEAAkE;IAClE,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;IACpD,gEAAgE;IAChE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mDAAmD;IACnD,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACtC;AAiEF,QAAA,MAAM,oBAAoB,2CAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}