@aircall/blocks 0.10.1 → 0.11.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { Anchor, Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, InputGroup, InputGroupButton, InputGroupTextarea, Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle, Popover, PopoverContent, PopoverTrigger, Separator, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, TabsList, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsTranslation, useSidebar } from "@aircall/ds";
+import { Anchor, Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, HoverCard, HoverCardContent, HoverCardTrigger, InputGroup, InputGroupButton, InputGroupTextarea, Item, ItemActions, ItemContent, ItemGroup, ItemMedia, ItemTitle, Popover, PopoverContent, PopoverTrigger, Separator, Sidebar, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, Spinner, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, TabsList, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsTranslation, useSidebar } from "@aircall/ds";
 import * as React from "react";
-import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, LockKeyhole, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
+import { AircallLoader, AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, LockKeyhole, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { useCallbackRef, useControllableState, useIsMounted, useUnmount } from "@aircall/hooks";
@@ -60,7 +60,9 @@ const de = {
 	"chatbotPanel.disclaimerBefore": "Sie interagieren mit einem KI-Assistenten (Beta). Durch die Nutzung dieser Funktion akzeptieren Sie die ",
 	"chatbotPanel.disclaimerLink": "Beta-Bedingungen",
 	"chatbotPanel.disclaimerAfter": " von Aircall. Antworten können ungenau oder unvollständig sein. Bitte überprüfen Sie sie, bevor Sie sich darauf verlassen.",
-	"chatbotPanel.resizeHandle": "Panel-Größe ändern"
+	"chatbotPanel.resizeHandle": "Panel-Größe ändern",
+	"chatbotResponse.renderingComponent": "Komponente wird geladen...",
+	"chatbotResponse.thinking": "Wird bearbeitet..."
 };
 var de_default = de;
 
@@ -114,7 +116,9 @@ const en = {
 	"chatbotPanel.disclaimerBefore": "You are interacting with an AI assistant (Beta). By using this feature you accept Aircall's ",
 	"chatbotPanel.disclaimerLink": "Beta terms",
 	"chatbotPanel.disclaimerAfter": ". Responses may be inaccurate or incomplete. Please verify before relying on them.",
-	"chatbotPanel.resizeHandle": "Resize panel"
+	"chatbotPanel.resizeHandle": "Resize panel",
+	"chatbotResponse.renderingComponent": "Rendering component...",
+	"chatbotResponse.thinking": "Thinking..."
 };
 var en_default = en;
 
@@ -168,7 +172,9 @@ const es = {
 	"chatbotPanel.disclaimerBefore": "Estás interactuando con un asistente de IA (Beta). Al usar esta función, aceptas los ",
 	"chatbotPanel.disclaimerLink": "términos de la Beta",
 	"chatbotPanel.disclaimerAfter": " de Aircall. Las respuestas pueden ser inexactas o incompletas. Verifícalas antes de confiar en ellas.",
-	"chatbotPanel.resizeHandle": "Redimensionar el panel"
+	"chatbotPanel.resizeHandle": "Redimensionar el panel",
+	"chatbotResponse.renderingComponent": "Renderizando componente...",
+	"chatbotResponse.thinking": "Pensando..."
 };
 var es_default = es;
 
@@ -222,7 +228,9 @@ const fr = {
 	"chatbotPanel.disclaimerBefore": "Vous interagissez avec un assistant IA (bêta). En utilisant cette fonctionnalité, vous acceptez les ",
 	"chatbotPanel.disclaimerLink": "conditions de la bêta",
 	"chatbotPanel.disclaimerAfter": " d’Aircall. Les réponses peuvent être inexactes ou incomplètes. Veuillez les vérifier avant de vous y fier.",
-	"chatbotPanel.resizeHandle": "Redimensionner le panneau"
+	"chatbotPanel.resizeHandle": "Redimensionner le panneau",
+	"chatbotResponse.renderingComponent": "Rendu du composant...",
+	"chatbotResponse.thinking": "Réflexion en cours..."
 };
 var fr_default = fr;
 
@@ -276,7 +284,9 @@ const it = {
 	"chatbotPanel.disclaimerBefore": "Stai interagendo con un assistente IA (Beta). Utilizzando questa funzionalità accetti i ",
 	"chatbotPanel.disclaimerLink": "termini della Beta",
 	"chatbotPanel.disclaimerAfter": " di Aircall. Le risposte possono essere inesatte o incomplete. Verificale prima di farne affidamento.",
-	"chatbotPanel.resizeHandle": "Ridimensiona il pannello"
+	"chatbotPanel.resizeHandle": "Ridimensiona il pannello",
+	"chatbotResponse.renderingComponent": "Rendering del componente...",
+	"chatbotResponse.thinking": "Elaborazione in corso..."
 };
 var it_default = it;
 
@@ -533,6 +543,295 @@ const UnknownErrorMedia = UnknownError.Media;
 const UnknownErrorTitle = UnknownError.Title;
 const UnknownErrorDescription = UnknownError.Description;
 
+//#endregion
+//#region src/helpers/content.helpers.ts
+function isTableCellValue(v) {
+	return v === null || typeof v === "string" || typeof v === "number" || typeof v === "boolean";
+}
+function parseTableComponent(obj) {
+	const { title, columns, rows } = obj;
+	if (typeof title !== "string") return null;
+	if (!Array.isArray(columns) || !columns.every((c) => typeof c === "string") || columns.length < 1) return null;
+	if (!Array.isArray(rows) || rows.length < 1 || !rows.every((row) => Array.isArray(row) && row.every(isTableCellValue))) return null;
+	return {
+		type: "table",
+		title,
+		columns,
+		rows
+	};
+}
+function parseAudioComponent(obj) {
+	const { url, title } = obj;
+	if (typeof url !== "string") return null;
+	try {
+		new URL(url);
+	} catch {
+		return null;
+	}
+	return {
+		type: "audio",
+		url,
+		...typeof title === "string" ? { title } : {}
+	};
+}
+function parseTranscriptComponent(obj) {
+	const { title, utterances } = obj;
+	if (!Array.isArray(utterances) || utterances.length < 1) return null;
+	const parsed = [];
+	for (const u of utterances) {
+		if (typeof u !== "object" || u === null) return null;
+		const uObj = u;
+		if (typeof uObj.speaker !== "string" || typeof uObj.text !== "string") return null;
+		parsed.push({
+			speaker: uObj.speaker,
+			text: uObj.text,
+			...typeof uObj.startTime === "number" ? { startTime: uObj.startTime } : {}
+		});
+	}
+	return {
+		type: "transcript",
+		utterances: parsed,
+		...typeof title === "string" ? { title } : {}
+	};
+}
+function parseComponentData(obj) {
+	if (typeof obj !== "object" || obj === null) return null;
+	const record = obj;
+	if (record.type === "table") return parseTableComponent(record);
+	if (record.type === "audio") return parseAudioComponent(record);
+	if (record.type === "transcript") return parseTranscriptComponent(record);
+	return null;
+}
+function parseJsonLenient(raw) {
+	const trimmed = raw.trim();
+	try {
+		return JSON.parse(trimmed);
+	} catch {
+		if (trimmed[0] === "{") {
+			let depth = 0;
+			let inString = false;
+			let escaped = false;
+			for (let i = 0; i < trimmed.length; i++) {
+				const ch = trimmed[i];
+				if (escaped) {
+					escaped = false;
+					continue;
+				}
+				if (ch === "\\" && inString) {
+					escaped = true;
+					continue;
+				}
+				if (ch === "\"") {
+					inString = !inString;
+					continue;
+				}
+				if (inString) continue;
+				if (ch === "{" || ch === "[") depth++;
+				if (ch === "}" || ch === "]") depth--;
+				if (depth === 0) return JSON.parse(trimmed.slice(0, i + 1));
+			}
+		}
+		throw new Error("Invalid JSON");
+	}
+}
+/**
+* Returns the [start, end) byte ranges of fenced code blocks in `text`.
+* Used to skip `:::component` directives that appear inside code examples.
+*/
+function getCodeFenceRanges(text) {
+	const ranges = [];
+	for (const m of text.matchAll(/^(`{3,}|~{3,})[^\n]*\n[\s\S]*?\n\1[ \t]*$/gm)) ranges.push([m.index, m.index + m[0].length]);
+	const lastClosed = ranges.length ? ranges[ranges.length - 1][1] : 0;
+	const openMatch = text.slice(lastClosed).match(/^(`{3,}|~{3,})[^\n]*$/m);
+	if (openMatch && openMatch.index !== void 0) ranges.push([lastClosed + openMatch.index, text.length]);
+	return ranges;
+}
+function inAnyRange(pos, ranges) {
+	return ranges.some(([s, e]) => pos >= s && pos < e);
+}
+/**
+* Parses AI-generated text and extracts `:::component <json> :::` directives.
+* Returns an ordered list of text, component, and loading-component blocks.
+*
+* @param streaming - Pass `true` while the response is still streaming so that
+*   an unclosed directive emits a `loading-component` placeholder. When `false`
+*   (the default, for a completed response) an unclosed directive is treated as
+*   raw text so no content is silently dropped.
+*/
+function parseContentBlocks(text) {
+	const COMPONENT_REGEX = /:::component\s+([\s\S]*?[}\]])\s*:::/g;
+	const fenceRanges = getCodeFenceRanges(text);
+	const blocks = [];
+	let lastIndex = 0;
+	for (const match of text.matchAll(COMPONENT_REGEX)) {
+		const matchStart = match.index ?? 0;
+		if (inAnyRange(matchStart, fenceRanges)) continue;
+		if (matchStart > lastIndex) {
+			const content = text.slice(lastIndex, matchStart).trim();
+			if (content) blocks.push({
+				type: "text",
+				content
+			});
+		}
+		try {
+			const data = parseComponentData(parseJsonLenient(match[1]));
+			blocks.push(data ? {
+				type: "component",
+				data
+			} : {
+				type: "text",
+				content: match[0]
+			});
+		} catch {
+			blocks.push({
+				type: "text",
+				content: match[0]
+			});
+		}
+		lastIndex = matchStart + match[0].length;
+	}
+	if (lastIndex < text.length) {
+		const remaining = text.slice(lastIndex);
+		let incompleteIdx = -1;
+		let searchFrom = 0;
+		while (incompleteIdx === -1) {
+			const idx = remaining.indexOf(":::component", searchFrom);
+			if (idx === -1) break;
+			if (!inAnyRange(lastIndex + idx, fenceRanges)) incompleteIdx = idx;
+			else searchFrom = idx + 1;
+		}
+		if (incompleteIdx !== -1) {
+			const before = remaining.slice(0, incompleteIdx).trim();
+			if (before) blocks.push({
+				type: "text",
+				content: before
+			});
+			blocks.push({ type: "loading-component" });
+		} else {
+			const content = remaining.trim();
+			if (content) blocks.push({
+				type: "text",
+				content
+			});
+		}
+	}
+	return blocks;
+}
+
+//#endregion
+//#region src/components/chatbot-audio-block.tsx
+/** Renders a :::component audio block inside a chatbot response. */
+function ChatbotAudioBlock({ data }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [data.title && /* @__PURE__ */ jsx("p", {
+			className: "text-sm font-medium text-foreground",
+			children: data.title
+		}), /* @__PURE__ */ jsx("audio", {
+			controls: true,
+			src: data.url,
+			className: "w-full"
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/chatbot-loading-block.tsx
+/** Placeholder shown while a :::component block is still streaming in. */
+function ChatbotLoadingBlock() {
+	const t = useDsTranslation("blocks");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-center gap-2 w-full rounded-md border border-border p-4",
+		children: [/* @__PURE__ */ jsx(Spinner, { size: "sm" }), /* @__PURE__ */ jsx("span", {
+			className: "text-sm text-muted-foreground",
+			children: t("chatbotResponse.renderingComponent")
+		})]
+	});
+}
+
+//#endregion
+//#region src/components/chatbot-table-block.tsx
+/** Renders a :::component table block inside a chatbot response. */
+function ChatbotTableBlock({ data }) {
+	const { columns, rows } = data;
+	return /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, { children: col }, col)) }) }), /* @__PURE__ */ jsx(TableBody, { children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx(TableCell, { children: cell != null ? String(cell) : "" }, cellIndex)) }, rowIndex)) })] });
+}
+
+//#endregion
+//#region src/components/chatbot-transcript-block.tsx
+const SPEAKER_COLORS = [
+	{
+		text: "text-blue-600",
+		bg: "bg-blue-600"
+	},
+	{
+		text: "text-amber-600",
+		bg: "bg-amber-600"
+	},
+	{
+		text: "text-purple-600",
+		bg: "bg-purple-600"
+	},
+	{
+		text: "text-rose-600",
+		bg: "bg-rose-600"
+	},
+	{
+		text: "text-teal-600",
+		bg: "bg-teal-600"
+	}
+];
+function formatTime(seconds) {
+	return `${Math.floor(seconds / 60)}:${Math.floor(seconds % 60).toString().padStart(2, "0")}`;
+}
+/** Renders a :::component transcript block inside a chatbot response. */
+function ChatbotTranscriptBlock({ data }) {
+	const { title, utterances } = data;
+	const speakerColors = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		let idx = 0;
+		for (const u of utterances) if (!map.has(u.speaker)) {
+			map.set(u.speaker, SPEAKER_COLORS[idx % SPEAKER_COLORS.length]);
+			idx++;
+		}
+		return map;
+	}, [utterances]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1",
+		children: [title && /* @__PURE__ */ jsx("p", {
+			className: "text-sm font-medium text-foreground",
+			children: title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-3 my-2 mx-2",
+			children: utterances.map((utterance, index) => {
+				const colors = speakerColors.get(utterance.speaker);
+				const prevSpeaker = index > 0 ? utterances[index - 1].speaker : null;
+				const showName = utterance.speaker !== prevSpeaker;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2 items-stretch",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: cn("w-0.5 rounded-sm shrink-0", colors.bg) }),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-col gap-0.5 flex-1 min-w-0",
+							children: [showName && /* @__PURE__ */ jsx("p", {
+								className: cn("text-xs font-semibold", colors.text),
+								children: utterance.speaker
+							}), /* @__PURE__ */ jsx("p", {
+								className: "text-sm text-foreground",
+								children: utterance.text
+							})]
+						}),
+						utterance.startTime != null && /* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground shrink-0",
+							children: formatTime(utterance.startTime)
+						})
+					]
+				}, index);
+			})
+		})]
+	});
+}
+
 //#endregion
 //#region src/hooks/use-copy-to-clipboard.ts
 function useCopyToClipboard(value, { timeout = 5e3, onCopied } = {}) {
@@ -651,6 +950,65 @@ function SourcesBadge({ sources }) {
 		}, source.url)) })
 	})] });
 }
+const MARKDOWN_COMPONENTS = {
+	h1: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h1", {
+		className: "mt-10 text-4xl font-semibold first:mt-0",
+		...props
+	}),
+	h2: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h2", {
+		className: "mt-11 border-b border-border pb-2 text-3xl font-semibold leading-9 first:mt-0",
+		...props
+	}),
+	h3: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h3", {
+		className: "mt-10 text-2xl font-semibold leading-8 first:mt-0",
+		...props
+	}),
+	p: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("p", {
+		className: "mt-4 text-base leading-6 text-foreground first:mt-0",
+		...props
+	}),
+	blockquote: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("blockquote", {
+		className: "mt-4 border-l-2 border-border pl-6 first:mt-0",
+		...props
+	}),
+	ul: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ul", {
+		className: "mt-4 list-disc pl-6 text-base leading-6 text-foreground first:mt-0",
+		...props
+	}),
+	ol: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ol", {
+		className: "mt-4 list-decimal pl-6 text-base leading-6 text-foreground first:mt-0",
+		...props
+	}),
+	li: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("li", {
+		className: "mb-2 last:mb-0",
+		...props
+	}),
+	a: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("a", {
+		className: "text-green-700 underline underline-offset-2 hover:text-green-700/80",
+		...props
+	}),
+	table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", {
+		className: "mt-4 overflow-x-auto rounded border border-border first:mt-0",
+		children: /* @__PURE__ */ jsx("table", {
+			className: "w-full text-base leading-6",
+			...props
+		})
+	}),
+	th: ({ node: _n, style, ...props }) => /* @__PURE__ */ jsx("th", {
+		className: "border-t border-border px-4 py-2 text-left font-bold text-foreground",
+		style,
+		...props
+	}),
+	td: ({ node: _n, style, ...props }) => /* @__PURE__ */ jsx("td", {
+		className: "border-t border-border px-4 py-2 text-foreground",
+		style,
+		...props
+	}),
+	tr: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("tr", {
+		className: "even:bg-muted",
+		...props
+	})
+};
 function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources, onFeedback, className }) {
 	const t = useDsTranslation("blocks");
 	const [feedback, setFeedback] = useState(null);
@@ -658,6 +1016,7 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 	const isMounted = useRef(false);
 	const feedbackRef = useRef(feedback);
 	feedbackRef.current = feedback;
+	const blocks = useMemo(() => parseContentBlocks(markdown), [markdown]);
 	useEffect(() => {
 		if (!isMounted.current) {
 			isMounted.current = true;
@@ -679,68 +1038,19 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "chatbot-response-block",
 		className: cn("flex flex-col gap-2", className),
-		children: [/* @__PURE__ */ jsx(ReactMarkdown, {
-			remarkPlugins: [remarkGfm],
-			components: {
-				h1: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h1", {
-					className: "mt-10 text-4xl font-semibold first:mt-0",
-					...props
-				}),
-				h2: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h2", {
-					className: "mt-11 border-b border-border pb-2 text-3xl font-semibold leading-9 first:mt-0",
-					...props
-				}),
-				h3: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("h3", {
-					className: "mt-10 text-2xl font-semibold leading-8 first:mt-0",
-					...props
-				}),
-				p: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("p", {
-					className: "mt-4 text-base leading-6 text-foreground first:mt-0",
-					...props
-				}),
-				blockquote: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("blockquote", {
-					className: "mt-4 border-l-2 border-border pl-6 first:mt-0",
-					...props
-				}),
-				ul: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ul", {
-					className: "mt-4 list-disc pl-6 text-base leading-6 text-foreground first:mt-0",
-					...props
-				}),
-				ol: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("ol", {
-					className: "mt-4 list-decimal pl-6 text-base leading-6 text-foreground first:mt-0",
-					...props
-				}),
-				li: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("li", {
-					className: "mb-2 last:mb-0",
-					...props
-				}),
-				a: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("a", {
-					className: "text-green-700 underline underline-offset-2 hover:text-green-700/80",
-					...props
-				}),
-				table: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("div", {
-					className: "mt-4 overflow-x-auto rounded border border-border first:mt-0",
-					children: /* @__PURE__ */ jsx("table", {
-						className: "w-full text-base leading-6",
-						...props
-					})
-				}),
-				th: ({ node: _n, style, ...props }) => /* @__PURE__ */ jsx("th", {
-					className: "border-t border-border px-4 py-2 text-left font-bold text-foreground",
-					style,
-					...props
-				}),
-				td: ({ node: _n, style, ...props }) => /* @__PURE__ */ jsx("td", {
-					className: "border-t border-border px-4 py-2 text-foreground",
-					style,
-					...props
-				}),
-				tr: ({ node: _n, ...props }) => /* @__PURE__ */ jsx("tr", {
-					className: "even:bg-muted",
-					...props
-				})
-			},
-			children: markdown
+		children: [blocks.map((block, index) => {
+			if (block.type === "text") return /* @__PURE__ */ jsx(ReactMarkdown, {
+				remarkPlugins: [remarkGfm],
+				components: MARKDOWN_COMPONENTS,
+				children: block.content
+			}, index);
+			if (block.type === "component") {
+				if (block.data.type === "table") return /* @__PURE__ */ jsx(ChatbotTableBlock, { data: block.data }, index);
+				if (block.data.type === "audio") return /* @__PURE__ */ jsx(ChatbotAudioBlock, { data: block.data }, index);
+				if (block.data.type === "transcript") return /* @__PURE__ */ jsx(ChatbotTranscriptBlock, { data: block.data }, index);
+			}
+			if (block.type === "loading-component") return /* @__PURE__ */ jsx(ChatbotLoadingBlock, {}, index);
+			return null;
 		}), !streaming && /* @__PURE__ */ jsxs("div", {
 			className: "flex items-center gap-1",
 			children: [sources && sources.length > 0 && /* @__PURE__ */ jsx("div", {
@@ -782,6 +1092,38 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 	});
 }
 
+//#endregion
+//#region src/components/chatbot-response-loading.tsx
+/**
+* Loading indicator rendered inside `ChatbotPageConversation` while the backend
+* is still streaming a response. Shows the Aircall animated logo next to a
+* customisable shimmer text label.
+*
+* @example
+* ```tsx
+* <ChatbotPageConversation>
+*   <ChatbotUserMessage>How do I set my phone line?</ChatbotUserMessage>
+*   {isLoading && <ChatbotResponseLoading text="Thinking..." />}
+* </ChatbotPageConversation>
+* ```
+*/
+function ChatbotResponseLoading({ text, className }) {
+	const t = useDsTranslation("blocks");
+	const label = text ?? t("chatbotResponse.thinking");
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chatbot-response-loading",
+		className: cn("flex items-center gap-2", className),
+		children: [/* @__PURE__ */ jsx(AircallLoader, {}), /* @__PURE__ */ jsx("span", {
+			className: cn("text-sm bg-clip-text text-transparent", "motion-safe:animate-chatbot-shimmer"),
+			style: {
+				backgroundImage: "linear-gradient(90deg, var(--color-muted-foreground) 25%, var(--color-foreground) 50%, var(--color-muted-foreground) 75%)",
+				backgroundSize: "200% auto"
+			},
+			children: label
+		})]
+	});
+}
+
 //#endregion
 //#region src/components/chatbot-page.tsx
 const ChatbotPage = React.forwardRef((componentProps, forwardRef) => {
@@ -919,14 +1261,18 @@ ChatbotPageFooter.displayName = "ChatbotPageFooter";
 * ```
 */
 const ChatbotPageConversation = React.forwardRef((componentProps, forwardRef) => {
-	const { className, children, ...props } = componentProps;
+	const { className, children, loading = false, loadingText, ...props } = componentProps;
 	const innerRef = React.useRef(null);
 	const [atBottom, setAtBottom] = React.useState(true);
+	const atBottomRef = React.useRef(true);
+	const prevChildCountRef = React.useRef(React.Children.count(children));
 	const t = useDsTranslation("blocks");
 	const handleScroll = React.useCallback(() => {
 		const el = innerRef.current;
 		if (!el) return;
-		setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 8);
+		const isAtBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 8;
+		setAtBottom(isAtBottom);
+		atBottomRef.current = isAtBottom;
 	}, []);
 	React.useEffect(() => {
 		const el = innerRef.current;
@@ -934,6 +1280,35 @@ const ChatbotPageConversation = React.forwardRef((componentProps, forwardRef) =>
 		el.addEventListener("scroll", handleScroll, { passive: true });
 		return () => el.removeEventListener("scroll", handleScroll);
 	}, [handleScroll]);
+	React.useEffect(() => {
+		const count = React.Children.count(children);
+		const isNewMessage = count > prevChildCountRef.current;
+		prevChildCountRef.current = count;
+		const el = innerRef.current;
+		if (!el) return;
+		if (isNewMessage) {
+			el.scrollTo({
+				top: el.scrollHeight,
+				behavior: "smooth"
+			});
+			atBottomRef.current = true;
+			setAtBottom(true);
+		} else if (atBottomRef.current) el.scrollTo({
+			top: el.scrollHeight,
+			behavior: "instant"
+		});
+	}, [children]);
+	React.useEffect(() => {
+		if (!loading) return;
+		const el = innerRef.current;
+		if (!el) return;
+		el.scrollTo({
+			top: el.scrollHeight,
+			behavior: "smooth"
+		});
+		atBottomRef.current = true;
+		setAtBottom(true);
+	}, [loading]);
 	const scrollToBottom = React.useCallback(() => {
 		innerRef.current?.scrollTo({
 			top: innerRef.current.scrollHeight,
@@ -949,10 +1324,10 @@ const ChatbotPageConversation = React.forwardRef((componentProps, forwardRef) =>
 		"data-slot": "chatbot-page-conversation",
 		className: cn("relative z-[2] flex flex-col overflow-hidden w-full max-w-[896px] flex-1", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("div", {
+		children: [/* @__PURE__ */ jsxs("div", {
 			ref: mergedRef,
 			className: cn("flex flex-1 flex-col gap-6 overflow-y-auto px-6 py-4", "[scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-transparent [&:hover::-webkit-scrollbar-thumb]:bg-black/20"),
-			children
+			children: [children, loading && /* @__PURE__ */ jsx(ChatbotResponseLoading, { text: loadingText })]
 		}), !atBottom && /* @__PURE__ */ jsx("div", {
 			className: "absolute bottom-4 right-6 z-10",
 			children: /* @__PURE__ */ jsx(Button, {
@@ -1067,53 +1442,93 @@ function ChatbotPanelHeader({ title = "Ask Aircall", onMenu, menuContent, menuOp
 
 //#endregion
 //#region src/components/chatbot-sidebar.tsx
+const SIDEBAR_MIN_WIDTH = 140;
+const SIDEBAR_MAX_WIDTH = 480;
 const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
 	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", popup = false, className } = componentProps;
 	const t = useDsTranslation("blocks");
-	const content = /* @__PURE__ */ jsxs(SidebarContent, { children: [/* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
-		isActive: !activeConversationId || !conversations.some((c) => c.id === activeConversationId),
-		onClick: onNewChat,
-		children: [/* @__PURE__ */ jsx(Plus, {}), /* @__PURE__ */ jsx("span", { children: t("chatbotSidebar.newChat") })]
-	}) }) }) }), conversations.length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: recentLabel }), /* @__PURE__ */ jsx(SidebarMenu, { children: conversations.map((conversation) => {
-		const isActive = conversation.id === activeConversationId;
-		return /* @__PURE__ */ jsx(SidebarMenuItem, { children: renderConversationMenuContent ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-			/* @__PURE__ */ jsx(SidebarMenuButton, {
+	const isNewChatActive = !activeConversationId || !conversations.some((c) => c.id === activeConversationId);
+	const sidebarInternalRef = React.useRef(null);
+	const mergedRef = React.useCallback((node) => {
+		sidebarInternalRef.current = node;
+		if (typeof forwardRef === "function") forwardRef(node);
+		else if (forwardRef) forwardRef.current = node;
+	}, [forwardRef]);
+	const handleResizeMouseDown = React.useCallback((e) => {
+		e.preventDefault();
+		const el = sidebarInternalRef.current;
+		if (!el) return;
+		const startX = e.clientX;
+		const startWidth = el.getBoundingClientRect().width;
+		document.body.style.cursor = "col-resize";
+		document.body.style.userSelect = "none";
+		const onMouseMove = (e$1) => {
+			const newWidth = Math.min(Math.max(startWidth + (e$1.clientX - startX), SIDEBAR_MIN_WIDTH), SIDEBAR_MAX_WIDTH);
+			el.style.setProperty("--sidebar-width", `${newWidth}px`);
+		};
+		const onMouseUp = () => {
+			document.body.style.cursor = "";
+			document.body.style.userSelect = "";
+			document.removeEventListener("mousemove", onMouseMove);
+			document.removeEventListener("mouseup", onMouseUp);
+		};
+		document.addEventListener("mousemove", onMouseMove);
+		document.addEventListener("mouseup", onMouseUp);
+	}, []);
+	const scrollableContent = /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-content",
+		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", "[scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:bg-transparent [&:hover::-webkit-scrollbar-thumb]:bg-black/20"),
+		children: [/* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			isActive: isNewChatActive,
+			onClick: onNewChat,
+			children: [/* @__PURE__ */ jsx(Plus, {}), /* @__PURE__ */ jsx("span", { children: t("chatbotSidebar.newChat") })]
+		}) }) }) }), conversations.length > 0 && /* @__PURE__ */ jsxs(SidebarGroup, { children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: recentLabel }), /* @__PURE__ */ jsx(SidebarMenu, { children: conversations.map((conversation) => {
+			const isActive = conversation.id === activeConversationId;
+			return /* @__PURE__ */ jsx(SidebarMenuItem, { children: renderConversationMenuContent ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+				/* @__PURE__ */ jsx(SidebarMenuButton, {
+					isActive,
+					onClick: () => onSelectConversation?.(conversation.id),
+					children: /* @__PURE__ */ jsx("span", {
+						className: "min-w-0 truncate",
+						children: conversation.title
+					})
+				}),
+				/* @__PURE__ */ jsx(SidebarMenuAction, {
+					showOnHover: true,
+					render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {}),
+					"aria-label": t("chatbotSidebar.optionsFor", { title: conversation.title }),
+					children: /* @__PURE__ */ jsx(Ellipsis, {})
+				}),
+				/* @__PURE__ */ jsx(DropdownMenuContent, {
+					side: "right",
+					children: renderConversationMenuContent(conversation)
+				})
+			] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
 				isActive,
 				onClick: () => onSelectConversation?.(conversation.id),
 				children: /* @__PURE__ */ jsx("span", {
 					className: "min-w-0 truncate",
 					children: conversation.title
 				})
-			}),
-			/* @__PURE__ */ jsx(SidebarMenuAction, {
-				showOnHover: true,
-				render: /* @__PURE__ */ jsx(DropdownMenuTrigger, {}),
-				"aria-label": t("chatbotSidebar.optionsFor", { title: conversation.title }),
-				children: /* @__PURE__ */ jsx(Ellipsis, {})
-			}),
-			/* @__PURE__ */ jsx(DropdownMenuContent, {
-				side: "right",
-				children: renderConversationMenuContent(conversation)
-			})
-		] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
-			isActive,
-			onClick: () => onSelectConversation?.(conversation.id),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "min-w-0 truncate",
-				children: conversation.title
-			})
-		}) }, conversation.id);
-	}) })] })] });
+			}) }, conversation.id);
+		}) })] })]
+	});
 	if (popup) return /* @__PURE__ */ jsx("div", {
 		ref: forwardRef,
 		className: cn("flex h-full w-full flex-col", className),
-		children: content
+		children: scrollableContent
 	});
-	return /* @__PURE__ */ jsx(Sidebar, {
-		ref: forwardRef,
+	return /* @__PURE__ */ jsxs(Sidebar, {
+		ref: mergedRef,
 		collapsible: "none",
-		className,
-		children: content
+		className: cn("relative", className),
+		children: [scrollableContent, /* @__PURE__ */ jsx("div", {
+			role: "separator",
+			"aria-orientation": "vertical",
+			className: "group/resize absolute inset-y-0 right-0 z-10 w-1 cursor-col-resize",
+			onMouseDown: handleResizeMouseDown,
+			children: /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 right-0 w-px bg-border transition-colors group-hover/resize:bg-muted-foreground/40" })
+		})]
 	});
 });
 ChatbotSidebar.displayName = "ChatbotSidebar";
@@ -1642,7 +2057,7 @@ const MAX_WIDTH = 768;
 const KEYBOARD_RESIZE_STEP = 16;
 const DISCLAIMER_LINK_HREF = "https://legal.aircall.io/#template-9jw4r0usl";
 const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
-function ChatbotPanel({ title, onMenu, conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, onExpand, onClose, emptyTitle, emptyDescription, suggestions = [], onSuggestionSelect, inputValue, onInputValueChange, onSubmit, onStop, loading = false, placeholder, autoFocus, disclaimer, resizable = true, defaultWidth = DEFAULT_WIDTH, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, onWidthChange, className, style, children, ...props }) {
+function ChatbotPanel({ title, onMenu, conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, onExpand, onClose, emptyTitle, emptyDescription, suggestions = [], onSuggestionSelect, inputValue, onInputValueChange, onSubmit, onStop, loading = false, loadingText, placeholder, autoFocus, disclaimer, resizable = true, defaultWidth = DEFAULT_WIDTH, minWidth = MIN_WIDTH, maxWidth = MAX_WIDTH, onWidthChange, className, style, children, ...props }) {
 	const t = useDsTranslation("blocks");
 	const [menuOpen, setMenuOpen] = React.useState(false);
 	const [width, setWidth] = React.useState(() => clamp(defaultWidth, minWidth, maxWidth));
@@ -1697,6 +2112,7 @@ function ChatbotPanel({ title, onMenu, conversations, activeConversationId, onNe
 	}, [
 		children,
 		width,
+		loading,
 		updateScrollState
 	]);
 	const scrollToBottom = () => {
@@ -1780,9 +2196,9 @@ function ChatbotPanel({ title, onMenu, conversations, activeConversationId, onNe
 					"data-slot": "chatbot-panel-body",
 					onScroll: updateScrollState,
 					className: "flex min-h-0 flex-1 flex-col overflow-y-auto px-6 py-4",
-					children: hasConversation ? /* @__PURE__ */ jsx("div", {
+					children: hasConversation ? /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-6",
-						children
+						children: [children, loading && /* @__PURE__ */ jsx(ChatbotResponseLoading, { text: loadingText })]
 					}) : /* @__PURE__ */ jsxs("div", {
 						"data-slot": "chatbot-panel-empty",
 						className: "flex flex-1 flex-col items-center",
@@ -2708,4 +3124,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotSidebar, ChatbotUserMessage, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormArrayField, FormComboboxField, FormFieldBase, FormFieldShell, FormInputField, FormMultiComboboxField, FormNumericField, FormOTPField, FormRadioGroupField, FormSelectField, FormSliderField, FormSwitchField, FormTextareaField, FormToggleGroupField, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, SubmitButton, TrialBadge, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };
+export { BetaBadge, CardSaveBar, ChatbotExpandSuggestion, ChatbotInput, ChatbotPage, ChatbotPageBody, ChatbotPageContent, ChatbotPageConversation, ChatbotPageFooter, ChatbotPageHeading, ChatbotPageInputBar, ChatbotPanel, ChatbotPanelHeader, ChatbotPanelSuggestion, ChatbotPanelTrigger, ChatbotResponseBlock, ChatbotResponseLoading, ChatbotSidebar, ChatbotUserMessage, ComingSoonDescription, ComingSoonEmptyState, ComingSoonMedia, ComingSoonTitle, CommonForm, CopyButton, CopyButtonIcon, CopyButtonLabel, DashboardPage, DashboardPageBanner, DashboardPageContent, DashboardPageHeader, DashboardPageHeaderAction, DashboardPageHeaderActions, DashboardPageHeaderDescription, DashboardPageHeaderNav, DashboardPageHeaderNavBack, DashboardPageHeaderPrefix, DashboardPageHeaderSubtitle, DashboardPageHeaderTitle, DashboardPageHeaderTitleGroup, DashboardPageMain, DashboardPageTabs, DashboardSidebar, DashboardSidebarContent, DashboardSidebarFooter, DashboardSidebarGroup, DashboardSidebarGroupLabel, DashboardSidebarHeader, DashboardSidebarMenu, DashboardSidebarMenuBadge, DashboardSidebarMenuButton, DashboardSidebarMenuItem, DashboardSidebarNav, DashboardSidebarProvider, DashboardSidebarSubmenu, DashboardSidebarSubmenuItem, DashboardSidebarSubmenuSeparator, DashboardSidebarTrigger, DashboardStandalonePage, DashboardStandalonePageAction, DashboardStandalonePageActions, DashboardStandalonePageContent, DashboardStandalonePageHeader, DashboardStandalonePageTitle, DeprecatedBadge, EmptyState, EmptyStateActions, EmptyStateButton, EmptyStateDescription, EmptyStateExternalLink, EmptyStateHeader, EmptyStateMedia, EmptyStateTitle, FormArrayField, FormComboboxField, FormFieldBase, FormFieldShell, FormInputField, FormMultiComboboxField, FormNumericField, FormOTPField, FormRadioGroupField, FormSelectField, FormSliderField, FormSwitchField, FormTextareaField, FormToggleGroupField, NewBadge, NoDataDescription, NoDataEmptyState, NoDataMedia, NoDataTitle, NoSupportDescription, NoSupportEmptyState, NoSupportMedia, NoSupportTitle, NotFoundDescription, NotFoundEmptyState, NotFoundMedia, NotFoundTitle, ProfessionalBadge, RestrictedAccessDescription, RestrictedAccessEmptyState, RestrictedAccessMedia, RestrictedAccessTitle, RoleBadge, SaveBar, SubmitButton, TrialBadge, UnknownErrorDescription, UnknownErrorEmptyState, UnknownErrorMedia, UnknownErrorTitle, fieldContext, formContext, toFieldErrors, useCopyToClipboard, useSidebar as useDashboardSidebar, useFieldContext, useForm, useFormContext, withFieldGroup, withForm };