@aircall/blocks 0.6.0 → 0.9.0

package/dist/index.js

@@ -1,10 +1,12 @@
-import { Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupButton, InputGroupTextarea, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, TabsList, 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, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, 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 { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AircallLogo, ArrowUp, Check, ChevronLeft, ChevronRight, Copy, Ellipsis, LockKeyhole, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, TriangleAlert } from "@aircall/react-icons";
-import { cva } from "class-variance-authority";
+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 ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import { useCallbackRef, useControllableState, useIsMounted, useUnmount } from "@aircall/hooks";
+import { cva } from "class-variance-authority";
 import { createFormHook, createFormHookContexts } from "@tanstack/react-form";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -26,7 +28,39 @@ const de = {
 	"chatbotInput.placeholder": "Stellen Sie eine Frage...",
 	"chatbotInput.messageLabel": "Nachricht",
 	"chatbotInput.stopGenerating": "Generierung stoppen",
-	"chatbotInput.sendMessage": "Nachricht senden"
+	"chatbotInput.sendMessage": "Nachricht senden",
+	"productBadge.beta": "Beta",
+	"productBadge.new": "Neu",
+	"productBadge.deprecated": "Veraltet",
+	"productBadge.trial": "Testversion",
+	"productBadge.professional": "Professional",
+	"roleBadge.agent": "Agent",
+	"roleBadge.supervisor": "Supervisor",
+	"roleBadge.admin": "Admin",
+	"roleBadge.owner": "Inhaber",
+	"chatbotResponse.copy": "Kopieren",
+	"chatbotResponse.helpful": "Hilfreich",
+	"chatbotResponse.notHelpful": "Nicht hilfreich",
+	"chatbotResponse.sourceCount_one": "{{count}} Quelle",
+	"chatbotResponse.sourceCount_other": "{{count}} Quellen",
+	"chatbotResponse.openSource": "{{title}} öffnen",
+	"chatbotPanel.sendFeedback": "Feedback senden",
+	"chatbotPanel.collapsePanel": "Panel einklappen",
+	"chatbotPanel.expandPanel": "Panel ausklappen",
+	"chatbotPanel.closePanel": "Panel schließen",
+	"chatbotSidebar.newChat": "Neuer Chat",
+	"chatbotSidebar.optionsFor": "Optionen für {{title}}",
+	"chatbotPage.footerBeforeLink": "Sie interagieren mit einem KI-Assistenten (Beta). Durch die Nutzung dieser Funktion akzeptieren Sie die ",
+	"chatbotPage.betaTermsLink": "Beta-Bedingungen",
+	"chatbotPage.footerAfterLink": " von Aircall. Die Antworten können ungenau oder unvollständig sein. Bitte überprüfen Sie diese bevor Sie sich darauf verlassen.",
+	"chatbotPage.scrollToBottom": "Nach unten scrollen",
+	"chatbotPanel.title": "Aircall fragen",
+	"chatbotPanel.emptyTitle": "Brauchen Sie Hilfe mit Aircall?",
+	"chatbotPanel.emptyDescription": "Finden Sie Antworten, entdecken Sie Funktionen und erhalten Sie Hilfe beim Verständnis von Aircall",
+	"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"
 };
 var de_default = de;
 
@@ -48,7 +82,39 @@ const en = {
 	"chatbotInput.placeholder": "Ask anything...",
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Stop generating",
-	"chatbotInput.sendMessage": "Send message"
+	"chatbotInput.sendMessage": "Send message",
+	"productBadge.beta": "Beta",
+	"productBadge.new": "New",
+	"productBadge.deprecated": "Deprecated",
+	"productBadge.trial": "Trial",
+	"productBadge.professional": "Professional",
+	"roleBadge.agent": "Agent",
+	"roleBadge.supervisor": "Supervisor",
+	"roleBadge.admin": "Admin",
+	"roleBadge.owner": "Owner",
+	"chatbotResponse.copy": "Copy",
+	"chatbotResponse.helpful": "Helpful",
+	"chatbotResponse.notHelpful": "Not helpful",
+	"chatbotResponse.sourceCount_one": "{{count}} Source",
+	"chatbotResponse.sourceCount_other": "{{count}} Sources",
+	"chatbotResponse.openSource": "Open {{title}}",
+	"chatbotPanel.sendFeedback": "Send feedback",
+	"chatbotPanel.collapsePanel": "Collapse panel",
+	"chatbotPanel.expandPanel": "Expand panel",
+	"chatbotPanel.closePanel": "Close panel",
+	"chatbotSidebar.newChat": "New chat",
+	"chatbotSidebar.optionsFor": "Options for {{title}}",
+	"chatbotPage.footerBeforeLink": "You are interacting with an AI assistant (Beta). By using this feature you accept Aircall's ",
+	"chatbotPage.betaTermsLink": "Beta terms",
+	"chatbotPage.footerAfterLink": ". Responses may be inaccurate or incomplete. Please verify before relying on them.",
+	"chatbotPage.scrollToBottom": "Scroll to bottom",
+	"chatbotPanel.title": "Ask Aircall",
+	"chatbotPanel.emptyTitle": "Need help with Aircall?",
+	"chatbotPanel.emptyDescription": "Find answers, explore features, and get help understanding Aircall",
+	"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"
 };
 var en_default = en;
 
@@ -70,7 +136,39 @@ const es = {
 	"chatbotInput.placeholder": "Pregunta lo que quieras...",
 	"chatbotInput.messageLabel": "Mensaje",
 	"chatbotInput.stopGenerating": "Detener la generación",
-	"chatbotInput.sendMessage": "Enviar mensaje"
+	"chatbotInput.sendMessage": "Enviar mensaje",
+	"productBadge.beta": "Beta",
+	"productBadge.new": "Nuevo",
+	"productBadge.deprecated": "Obsoleto",
+	"productBadge.trial": "Prueba",
+	"productBadge.professional": "Profesional",
+	"roleBadge.agent": "Agente",
+	"roleBadge.supervisor": "Supervisor",
+	"roleBadge.admin": "Administrador",
+	"roleBadge.owner": "Propietario",
+	"chatbotResponse.copy": "Copiar",
+	"chatbotResponse.helpful": "Útil",
+	"chatbotResponse.notHelpful": "No útil",
+	"chatbotResponse.sourceCount_one": "{{count}} Fuente",
+	"chatbotResponse.sourceCount_other": "{{count}} Fuentes",
+	"chatbotResponse.openSource": "Abrir {{title}}",
+	"chatbotPanel.sendFeedback": "Enviar comentarios",
+	"chatbotPanel.collapsePanel": "Contraer panel",
+	"chatbotPanel.expandPanel": "Expandir panel",
+	"chatbotPanel.closePanel": "Cerrar panel",
+	"chatbotSidebar.newChat": "Nueva conversación",
+	"chatbotSidebar.optionsFor": "Opciones para {{title}}",
+	"chatbotPage.footerBeforeLink": "Estás interactuando con un asistente de IA (Beta). Al usar esta función, aceptas los ",
+	"chatbotPage.betaTermsLink": "términos Beta",
+	"chatbotPage.footerAfterLink": " de Aircall. Las respuestas pueden ser inexactas o incompletas. Por favor verifica antes de confiar en ellas.",
+	"chatbotPage.scrollToBottom": "Desplazarse hacia abajo",
+	"chatbotPanel.title": "Preguntar a Aircall",
+	"chatbotPanel.emptyTitle": "¿Necesitas ayuda con Aircall?",
+	"chatbotPanel.emptyDescription": "Encuentra respuestas, explora funciones y obtén ayuda para entender Aircall",
+	"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"
 };
 var es_default = es;
 
@@ -92,7 +190,39 @@ const fr = {
 	"chatbotInput.placeholder": "Posez votre question...",
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Arrêter la génération",
-	"chatbotInput.sendMessage": "Envoyer un message"
+	"chatbotInput.sendMessage": "Envoyer un message",
+	"productBadge.beta": "Bêta",
+	"productBadge.new": "Nouveau",
+	"productBadge.deprecated": "Obsolète",
+	"productBadge.trial": "Essai",
+	"productBadge.professional": "Professionnel",
+	"roleBadge.agent": "Agent",
+	"roleBadge.supervisor": "Superviseur",
+	"roleBadge.admin": "Admin",
+	"roleBadge.owner": "Propriétaire",
+	"chatbotResponse.copy": "Copier",
+	"chatbotResponse.helpful": "Utile",
+	"chatbotResponse.notHelpful": "Pas utile",
+	"chatbotResponse.sourceCount_one": "{{count}} Source",
+	"chatbotResponse.sourceCount_other": "{{count}} Sources",
+	"chatbotResponse.openSource": "Ouvrir {{title}}",
+	"chatbotPanel.sendFeedback": "Envoyer un commentaire",
+	"chatbotPanel.collapsePanel": "Réduire le panneau",
+	"chatbotPanel.expandPanel": "Développer le panneau",
+	"chatbotPanel.closePanel": "Fermer le panneau",
+	"chatbotSidebar.newChat": "Nouvelle conversation",
+	"chatbotSidebar.optionsFor": "Options pour {{title}}",
+	"chatbotPage.footerBeforeLink": "Vous interagissez avec un assistant IA (Bêta). En utilisant cette fonctionnalité, vous acceptez les ",
+	"chatbotPage.betaTermsLink": "conditions Bêta",
+	"chatbotPage.footerAfterLink": " d'Aircall. Les réponses peuvent être inexactes ou incomplètes. Veuillez vérifier avant de vous y fier.",
+	"chatbotPage.scrollToBottom": "Défiler vers le bas",
+	"chatbotPanel.title": "Demander à Aircall",
+	"chatbotPanel.emptyTitle": "Besoin d'aide avec Aircall ?",
+	"chatbotPanel.emptyDescription": "Trouvez des réponses, explorez les fonctionnalités et obtenez de l’aide pour comprendre Aircall",
+	"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"
 };
 var fr_default = fr;
 
@@ -114,7 +244,39 @@ const it = {
 	"chatbotInput.placeholder": "Chiedi qualsiasi cosa...",
 	"chatbotInput.messageLabel": "Messaggio",
 	"chatbotInput.stopGenerating": "Interrompi la generazione",
-	"chatbotInput.sendMessage": "Invia messaggio"
+	"chatbotInput.sendMessage": "Invia messaggio",
+	"productBadge.beta": "Beta",
+	"productBadge.new": "Nuovo",
+	"productBadge.deprecated": "Obsoleto",
+	"productBadge.trial": "Prova",
+	"productBadge.professional": "Professional",
+	"roleBadge.agent": "Agente",
+	"roleBadge.supervisor": "Supervisore",
+	"roleBadge.admin": "Admin",
+	"roleBadge.owner": "Proprietario",
+	"chatbotResponse.copy": "Copia",
+	"chatbotResponse.helpful": "Utile",
+	"chatbotResponse.notHelpful": "Non utile",
+	"chatbotResponse.sourceCount_one": "{{count}} Fonte",
+	"chatbotResponse.sourceCount_other": "{{count}} Fonti",
+	"chatbotResponse.openSource": "Apri {{title}}",
+	"chatbotPanel.sendFeedback": "Invia feedback",
+	"chatbotPanel.collapsePanel": "Comprimi pannello",
+	"chatbotPanel.expandPanel": "Espandi pannello",
+	"chatbotPanel.closePanel": "Chiudi pannello",
+	"chatbotSidebar.newChat": "Nuova chat",
+	"chatbotSidebar.optionsFor": "Opzioni per {{title}}",
+	"chatbotPage.footerBeforeLink": "Stai interagendo con un assistente IA (Beta). Usando questa funzione, accetti i ",
+	"chatbotPage.betaTermsLink": "termini Beta",
+	"chatbotPage.footerAfterLink": " di Aircall. Le risposte potrebbero essere inesatte o incomplete. Si prega di verificare prima di affidarsi ad esse.",
+	"chatbotPage.scrollToBottom": "Scorri verso il basso",
+	"chatbotPanel.title": "Chiedi ad Aircall",
+	"chatbotPanel.emptyTitle": "Hai bisogno di aiuto con Aircall?",
+	"chatbotPanel.emptyDescription": "Trova risposte, esplora le funzionalità e ottieni aiuto per comprendere Aircall",
+	"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"
 };
 var it_default = it;
 
@@ -371,6 +533,255 @@ const UnknownErrorMedia = UnknownError.Media;
 const UnknownErrorTitle = UnknownError.Title;
 const UnknownErrorDescription = UnknownError.Description;
 
+//#endregion
+//#region src/hooks/use-copy-to-clipboard.ts
+function useCopyToClipboard(value, { timeout = 5e3, onCopied } = {}) {
+	const [copied, setCopied] = useState(false);
+	const timerRef = useRef(void 0);
+	const getIsMounted = useIsMounted();
+	const onCopiedRef = useCallbackRef(onCopied);
+	useUnmount(() => clearTimeout(timerRef.current));
+	useEffect(() => {
+		clearTimeout(timerRef.current);
+		setCopied(false);
+	}, [value]);
+	return {
+		copy: useCallback(async () => {
+			try {
+				await navigator.clipboard.writeText(value);
+				if (!getIsMounted()) return;
+				setCopied(true);
+				onCopiedRef();
+				clearTimeout(timerRef.current);
+				timerRef.current = setTimeout(() => {
+					if (getIsMounted()) setCopied(false);
+				}, timeout);
+			} catch {}
+		}, [
+			value,
+			timeout,
+			getIsMounted,
+			onCopiedRef
+		]),
+		copied
+	};
+}
+
+//#endregion
+//#region src/components/copy-button.tsx
+const CopyButtonContext = createContext(null);
+function useCopyButtonContext() {
+	const ctx = useContext(CopyButtonContext);
+	if (ctx === null) throw new Error("CopyButtonIcon and CopyButtonLabel must be rendered inside a CopyButton.");
+	return ctx;
+}
+const CopyButton = React.forwardRef((componentProps, forwardRef) => {
+	const { value, timeout, onCopied, variant = "outline", children, ...buttonProps } = componentProps;
+	const { copy, copied } = useCopyToClipboard(value, {
+		timeout,
+		onCopied
+	});
+	return /* @__PURE__ */ jsx(CopyButtonContext.Provider, {
+		value: { copied },
+		children: /* @__PURE__ */ jsx(Button, {
+			ref: forwardRef,
+			onClick: () => {
+				copy();
+			},
+			variant,
+			...buttonProps,
+			children
+		})
+	});
+});
+CopyButton.displayName = "CopyButton";
+const CopyButtonIcon = React.forwardRef((componentProps, forwardRef) => {
+	const { className } = componentProps;
+	const { copied } = useCopyButtonContext();
+	return /* @__PURE__ */ jsx(copied ? Check : Copy, {
+		ref: forwardRef,
+		className
+	});
+});
+CopyButtonIcon.displayName = "CopyButtonIcon";
+const CopyButtonLabel = React.forwardRef((componentProps, forwardRef) => {
+	const { label = "Copy", copiedLabel = "Copied", className } = componentProps;
+	const { copied } = useCopyButtonContext();
+	return /* @__PURE__ */ jsx("span", {
+		ref: forwardRef,
+		className: cn(className),
+		children: copied ? copiedLabel : label
+	});
+});
+CopyButtonLabel.displayName = "CopyButtonLabel";
+
+//#endregion
+//#region src/components/chatbot-response-block.tsx
+function SourcesBadge({ sources }) {
+	const t = useDsTranslation("blocks");
+	return /* @__PURE__ */ jsxs(HoverCard, { children: [/* @__PURE__ */ jsx(HoverCardTrigger, {
+		render: /* @__PURE__ */ jsx(Button, {
+			variant: "secondary",
+			size: "sm"
+		}),
+		children: t("chatbotResponse.sourceCount", { count: sources.length })
+	}), /* @__PURE__ */ jsx(HoverCardContent, {
+		side: "top",
+		align: "start",
+		className: "w-80 p-1",
+		children: /* @__PURE__ */ jsx(ItemGroup, { children: sources.map((source) => /* @__PURE__ */ jsx("div", {
+			role: "listitem",
+			children: /* @__PURE__ */ jsxs(Item, {
+				size: "xs",
+				render: /* @__PURE__ */ jsx("a", {
+					href: source.url,
+					target: "_blank",
+					rel: "noreferrer noopener",
+					"aria-label": t("chatbotResponse.openSource", { title: source.title })
+				}),
+				children: [
+					/* @__PURE__ */ jsx(ItemMedia, {
+						variant: "icon",
+						children: /* @__PURE__ */ jsx(FileText, {})
+					}),
+					/* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { children: source.title }) }),
+					/* @__PURE__ */ jsx(ItemActions, { children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-4" }) })
+				]
+			})
+		}, source.url)) })
+	})] });
+}
+function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources, onFeedback, className }) {
+	const t = useDsTranslation("blocks");
+	const [feedback, setFeedback] = useState(null);
+	const onFeedbackRef = useCallbackRef(onFeedback);
+	const isMounted = useRef(false);
+	const feedbackRef = useRef(feedback);
+	feedbackRef.current = feedback;
+	useEffect(() => {
+		if (!isMounted.current) {
+			isMounted.current = true;
+			return;
+		}
+		if (feedbackRef.current === null) return;
+		setFeedback(null);
+		onFeedbackRef(null);
+	}, [
+		messageId,
+		markdown,
+		onFeedbackRef
+	]);
+	function handleFeedback(value) {
+		const next = feedback === value ? null : value;
+		setFeedback(next);
+		onFeedback?.(next);
+	}
+	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
+		}), !streaming && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [sources && sources.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "flex flex-1",
+				children: /* @__PURE__ */ jsx(SourcesBadge, { sources })
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "ml-auto flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx(CopyButton, {
+						value: markdown,
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": t("chatbotResponse.copy"),
+						children: /* @__PURE__ */ jsx(CopyButtonIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-pressed": feedback === "up",
+						"aria-label": t("chatbotResponse.helpful"),
+						onClick: () => handleFeedback("up"),
+						className: cn(feedback === "up" && "text-primary"),
+						children: feedback === "up" ? /* @__PURE__ */ jsx(ThumbsUpFilled, {}) : /* @__PURE__ */ jsx(ThumbsUp, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-pressed": feedback === "down",
+						"aria-label": t("chatbotResponse.notHelpful"),
+						onClick: () => handleFeedback("down"),
+						className: cn(feedback === "down" && "text-primary"),
+						children: feedback === "down" ? /* @__PURE__ */ jsx(ThumbsDownFilled, {}) : /* @__PURE__ */ jsx(ThumbsDown, {})
+					})
+				]
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region src/components/chatbot-page.tsx
 const ChatbotPage = React.forwardRef((componentProps, forwardRef) => {
@@ -383,49 +794,326 @@ const ChatbotPage = React.forwardRef((componentProps, forwardRef) => {
 	});
 });
 ChatbotPage.displayName = "ChatbotPage";
+/**
+* Content area that fills the right side of `ChatbotPage`. Use alongside
+* `ChatbotSidebar` as a direct child of `ChatbotPage`.
+*
+* In the **idle state** place `ChatbotPageBody`, then `ChatbotPageFooter`.
+* In the **active conversation state** place `ChatbotPageConversation`,
+* `ChatbotPageInputBar`, then `ChatbotPageFooter`.
+*
+* @example
+* ```tsx
+* <ChatbotPage>
+*   <ChatbotSidebar conversations={[...]} />
+*   <ChatbotPageContent>
+*     <ChatbotPageBody>
+*       <ChatbotPageHeading>Need help with Aircall?</ChatbotPageHeading>
+*       <ChatbotInput />
+*       <ChatbotExpandSuggestion categories={[...]} suggestions={[...]} />
+*     </ChatbotPageBody>
+*     <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/..." />
+*   </ChatbotPageContent>
+* </ChatbotPage>
+* ```
+*/
+const ChatbotPageContent = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "chatbot-page-content",
+		className: cn("flex flex-1 flex-col items-center bg-background px-4", className),
+		...props
+	});
+});
+ChatbotPageContent.displayName = "ChatbotPageContent";
+/**
+* Centered content area for the idle/empty state inside `ChatbotPageContent`.
+* Constrains children to a max-width of 896px and vertically centers them.
+* Place `ChatbotPageHeading`, `ChatbotInput`, and `ChatbotExpandSuggestion`
+* as children.
+*/
+const ChatbotPageBody = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "chatbot-page-body",
+		className: cn("relative z-[2] flex w-full max-w-[896px] flex-1 flex-col items-center justify-center gap-6", className),
+		...props
+	});
+});
+ChatbotPageBody.displayName = "ChatbotPageBody";
+/**
+* Centered heading displayed above the input area in the idle state.
+* Renders an `<h2>` element styled at 24px / medium weight.
+*
+* @example
+* ```tsx
+* <ChatbotPageHeading>Need help with Aircall?</ChatbotPageHeading>
+* ```
+*/
+const ChatbotPageHeading = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("h2", {
+		ref: forwardRef,
+		"data-slot": "chatbot-page-heading",
+		className: cn("min-w-full text-center text-2xl font-medium text-foreground", className),
+		...props
+	});
+});
+ChatbotPageHeading.displayName = "ChatbotPageHeading";
+/**
+* Footer bar showing the AI beta disclaimer. The "Beta terms" phrase is
+* rendered as an external `Anchor` link pointing to `betaTermsHref`.
+*
+* @example
+* ```tsx
+* <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/#template-9jw4r0usl" />
+* ```
+*/
+const ChatbotPageFooter = React.forwardRef((componentProps, forwardRef) => {
+	const { className, betaTermsHref, ...props } = componentProps;
+	const t = useDsTranslation("blocks");
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "chatbot-page-footer",
+		className: cn("relative z-[1] flex w-full shrink-0 flex-col items-center justify-center pb-4", className),
+		...props,
+		children: /* @__PURE__ */ jsxs("p", {
+			className: "text-center text-xs text-muted-foreground",
+			children: [
+				t("chatbotPage.footerBeforeLink"),
+				/* @__PURE__ */ jsx(Anchor, {
+					href: betaTermsHref,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					children: t("chatbotPage.betaTermsLink")
+				}),
+				t("chatbotPage.footerAfterLink")
+			]
+		})
+	});
+});
+ChatbotPageFooter.displayName = "ChatbotPageFooter";
+/**
+* Scrollable conversation thread for the active chatbot state. Place
+* `ChatbotUserMessage` and `ChatbotResponseBlock` as alternating children.
+* Use alongside `ChatbotPageInputBar` and `ChatbotPageFooter` inside
+* `ChatbotPageContent`.
+*
+* The component is `relative` so consumers can absolutely-position a
+* scroll-to-bottom FAB inside it.
+*
+* @example
+* ```tsx
+* <ChatbotPageContent>
+*   <ChatbotPageConversation>
+*     <ChatbotUserMessage>How do I set my phone line?</ChatbotUserMessage>
+*     <ChatbotResponseBlock messageId="1" markdown="..." />
+*   </ChatbotPageConversation>
+*   <ChatbotPageInputBar>
+*     <ChatbotInput size="large" />
+*   </ChatbotPageInputBar>
+*   <ChatbotPageFooter betaTermsHref="https://legal.aircall.io/..." />
+* </ChatbotPageContent>
+* ```
+*/
+const ChatbotPageConversation = React.forwardRef((componentProps, forwardRef) => {
+	const { className, children, ...props } = componentProps;
+	const innerRef = React.useRef(null);
+	const [atBottom, setAtBottom] = React.useState(true);
+	const t = useDsTranslation("blocks");
+	const handleScroll = React.useCallback(() => {
+		const el = innerRef.current;
+		if (!el) return;
+		setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 8);
+	}, []);
+	React.useEffect(() => {
+		const el = innerRef.current;
+		if (!el) return;
+		el.addEventListener("scroll", handleScroll, { passive: true });
+		return () => el.removeEventListener("scroll", handleScroll);
+	}, [handleScroll]);
+	const scrollToBottom = React.useCallback(() => {
+		innerRef.current?.scrollTo({
+			top: innerRef.current.scrollHeight,
+			behavior: "smooth"
+		});
+	}, []);
+	const mergedRef = React.useCallback((node) => {
+		innerRef.current = node;
+		if (typeof forwardRef === "function") forwardRef(node);
+		else if (forwardRef) forwardRef.current = node;
+	}, [forwardRef]);
+	return /* @__PURE__ */ jsxs("div", {
+		"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", {
+			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
+		}), !atBottom && /* @__PURE__ */ jsx("div", {
+			className: "absolute bottom-4 right-6 z-10",
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon-lg",
+				className: "shadow-lg",
+				"aria-label": t("chatbotPage.scrollToBottom"),
+				onClick: scrollToBottom,
+				children: /* @__PURE__ */ jsx(ChevronDown, {})
+			})
+		})]
+	});
+});
+ChatbotPageConversation.displayName = "ChatbotPageConversation";
+/**
+* Wrapper that anchors `ChatbotInput` to the bottom of `ChatbotPageContent`
+* at the correct max-width. Place between `ChatbotPageConversation` and
+* `ChatbotPageFooter`.
+*
+* @example
+* ```tsx
+* <ChatbotPageInputBar>
+*   <ChatbotInput size="large" />
+* </ChatbotPageInputBar>
+* ```
+*/
+const ChatbotPageInputBar = React.forwardRef((componentProps, forwardRef) => {
+	const { className, ...props } = componentProps;
+	return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		"data-slot": "chatbot-page-input-bar",
+		className: cn("relative z-[1] flex w-full max-w-[896px] shrink-0 flex-col pb-4", className),
+		...props
+	});
+});
+ChatbotPageInputBar.displayName = "ChatbotPageInputBar";
+
+//#endregion
+//#region src/components/chatbot-panel-header.tsx
+/**
+* Header bar for the chatbot panel. Each control renders only when its handler is
+* provided. The leading ☰ opens a Popover (conversation history) when
+* `menuContent` is set, otherwise fires `onMenu`; with no menu handler it falls
+* back to a non-interactive panel indicator. Title is optional — pass an empty
+* string to hide it.
+*/
+function ChatbotPanelHeader({ title = "Ask Aircall", onMenu, menuContent, menuOpen, onMenuOpenChange, onFeedback, onExpand, open = false, onOpenChange, onClose, className, ...props }) {
+	const t = useDsTranslation("blocks");
+	const menuButton = /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": "Open menu",
+		onClick: onMenu,
+		children: /* @__PURE__ */ jsx(Menu, { className: "size-4" })
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chatbot-panel-header",
+		"data-state": open ? "open" : "closed",
+		className: cn("flex w-full items-center gap-2 border-b border-border bg-background p-2", className),
+		...props,
+		children: [
+			menuContent != null ? /* @__PURE__ */ jsxs(Popover, {
+				open: menuOpen,
+				onOpenChange: onMenuOpenChange,
+				children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: menuButton }), /* @__PURE__ */ jsx(PopoverContent, {
+					align: "start",
+					alignOffset: 6,
+					sideOffset: 4,
+					className: "h-[404px] w-80 gap-0 p-0",
+					children: menuContent
+				})]
+			}) : onMenu != null ? menuButton : /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground",
+				children: /* @__PURE__ */ jsx(PanelLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-base font-bold leading-none text-foreground",
+				children: title
+			}),
+			onFeedback != null && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": t("chatbotPanel.sendFeedback"),
+				onClick: onFeedback,
+				children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" })
+			}),
+			onExpand != null && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": "Expand to fullscreen",
+				onClick: onExpand,
+				children: /* @__PURE__ */ jsx(SquareArrowOutUpRight, { className: "size-4" })
+			}),
+			onOpenChange != null && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": open ? t("chatbotPanel.collapsePanel") : t("chatbotPanel.expandPanel"),
+				onClick: () => onOpenChange(!open),
+				children: open ? /* @__PURE__ */ jsx(Minus, { className: "size-4" }) : /* @__PURE__ */ jsx(Plus, { className: "size-4" })
+			}),
+			onClose != null && /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": t("chatbotPanel.closePanel"),
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
+			})
+		]
+	});
+}
 
 //#endregion
 //#region src/components/chatbot-sidebar.tsx
 const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
-	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", className } = componentProps;
-	return /* @__PURE__ */ jsx(Sidebar, {
-		ref: forwardRef,
-		collapsible: "none",
-		className,
-		children: /* @__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: "New chat" })]
-		}) }) }) }), 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": `Options for ${conversation.title}`,
-					children: /* @__PURE__ */ jsx(Ellipsis, {})
-				}),
-				/* @__PURE__ */ jsx(DropdownMenuContent, {
-					side: "right",
-					children: renderConversationMenuContent(conversation)
-				})
-			] }) : /* @__PURE__ */ jsx(SidebarMenuButton, {
+	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, {
 				isActive,
 				onClick: () => onSelectConversation?.(conversation.id),
 				children: /* @__PURE__ */ jsx("span", {
 					className: "min-w-0 truncate",
 					children: conversation.title
 				})
-			}) }, conversation.id);
-		}) })] })] })
+			}),
+			/* @__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);
+	}) })] })] });
+	if (popup) return /* @__PURE__ */ jsx("div", {
+		ref: forwardRef,
+		className: cn("flex h-full w-full flex-col", className),
+		children: content
+	});
+	return /* @__PURE__ */ jsx(Sidebar, {
+		ref: forwardRef,
+		collapsible: "none",
+		className,
+		children: content
 	});
 });
 ChatbotSidebar.displayName = "ChatbotSidebar";
@@ -438,13 +1126,22 @@ const textareaVariants = cva([
 	"disabled:bg-transparent dark:disabled:bg-transparent disabled:opacity-100",
 	"[scrollbar-color:rgba(0,0,0,0.1)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-black/10 [&::-webkit-scrollbar-track]:bg-transparent"
 ], {
-	variants: { size: {
-		default: "max-h-20",
-		large: "max-h-32 min-h-20"
-	} },
-	defaultVariants: { size: "default" }
+	variants: {
+		size: {
+			default: "max-h-20",
+			large: "max-h-32"
+		},
+		expanded: {
+			true: "min-h-20",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		expanded: false
+	}
 });
-function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", disabled, ...textareaProps }) {
+function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", expanded = false, disabled, ...textareaProps }) {
 	const t = useDsTranslation("blocks");
 	const [currentValue = "", setCurrentValue] = useControllableState({
 		prop: value,
@@ -481,7 +1178,10 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 			disabled,
 			onChange: handleChange,
 			onKeyDown: handleKeyDown,
-			className: cn(textareaVariants({ size }))
+			className: cn(textareaVariants({
+				size,
+				expanded
+			}))
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center gap-2",
 			children: loading ? /* @__PURE__ */ jsx(InputGroupButton, {
@@ -505,88 +1205,6 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 	});
 }
 
-//#endregion
-//#region src/hooks/use-copy-to-clipboard.ts
-function useCopyToClipboard(value, { timeout = 5e3, onCopied } = {}) {
-	const [copied, setCopied] = useState(false);
-	const timerRef = useRef(void 0);
-	const getIsMounted = useIsMounted();
-	const onCopiedRef = useCallbackRef(onCopied);
-	useUnmount(() => clearTimeout(timerRef.current));
-	useEffect(() => {
-		clearTimeout(timerRef.current);
-		setCopied(false);
-	}, [value]);
-	return {
-		copy: useCallback(async () => {
-			try {
-				await navigator.clipboard.writeText(value);
-				if (!getIsMounted()) return;
-				setCopied(true);
-				onCopiedRef();
-				clearTimeout(timerRef.current);
-				timerRef.current = setTimeout(() => {
-					if (getIsMounted()) setCopied(false);
-				}, timeout);
-			} catch {}
-		}, [
-			value,
-			timeout,
-			getIsMounted,
-			onCopiedRef
-		]),
-		copied
-	};
-}
-
-//#endregion
-//#region src/components/copy-button.tsx
-const CopyButtonContext = createContext(null);
-function useCopyButtonContext() {
-	const ctx = useContext(CopyButtonContext);
-	if (ctx === null) throw new Error("CopyButtonIcon and CopyButtonLabel must be rendered inside a CopyButton.");
-	return ctx;
-}
-const CopyButton = React.forwardRef((componentProps, forwardRef) => {
-	const { value, timeout, onCopied, variant = "outline", children, ...buttonProps } = componentProps;
-	const { copy, copied } = useCopyToClipboard(value, {
-		timeout,
-		onCopied
-	});
-	return /* @__PURE__ */ jsx(CopyButtonContext.Provider, {
-		value: { copied },
-		children: /* @__PURE__ */ jsx(Button, {
-			ref: forwardRef,
-			onClick: () => {
-				copy();
-			},
-			variant,
-			...buttonProps,
-			children
-		})
-	});
-});
-CopyButton.displayName = "CopyButton";
-const CopyButtonIcon = React.forwardRef((componentProps, forwardRef) => {
-	const { className } = componentProps;
-	const { copied } = useCopyButtonContext();
-	return /* @__PURE__ */ jsx(copied ? Check : Copy, {
-		ref: forwardRef,
-		className
-	});
-});
-CopyButtonIcon.displayName = "CopyButtonIcon";
-const CopyButtonLabel = React.forwardRef((componentProps, forwardRef) => {
-	const { label = "Copy", copiedLabel = "Copied", className } = componentProps;
-	const { copied } = useCopyButtonContext();
-	return /* @__PURE__ */ jsx("span", {
-		ref: forwardRef,
-		className: cn(className),
-		children: copied ? copiedLabel : label
-	});
-});
-CopyButtonLabel.displayName = "CopyButtonLabel";
-
 //#endregion
 //#region src/components/chatbot-panel-suggestion.tsx
 function ChatbotPanelSuggestion({ className, ...props }) {
@@ -862,32 +1480,35 @@ DashboardPageHeaderAction.displayName = "DashboardPageHeaderAction";
 
 //#endregion
 //#region src/components/product-badges.tsx
-const GRADIENT_BASE = cn("border-transparent text-foreground", "bg-[image:linear-gradient(90deg,var(--badge-overlay),var(--badge-overlay)),linear-gradient(90deg,var(--badge-accent),var(--badge-accent))]");
+const GRADIENT_BASE = cn("border-transparent bg-transparent text-foreground", "bg-[image:linear-gradient(90deg,var(--badge-overlay),var(--badge-overlay)),linear-gradient(90deg,var(--badge-accent),var(--badge-accent))]");
 const productBadgeVariants = cva(GRADIENT_BASE, { variants: { type: {
 	beta: "[--badge-accent:var(--color-blue-300)]",
 	new: "[--badge-accent:var(--color-green-300)]",
 	deprecated: "[--badge-accent:var(--color-yellow-300)]",
 	trial: "[--badge-accent:var(--color-blue-300)]"
 } } });
-const PRODUCT_BADGE_LABEL = {
-	beta: "Beta",
-	new: "New",
-	deprecated: "Deprecated",
-	trial: "Trial"
+const PRODUCT_BADGE_KEY = {
+	beta: "productBadge.beta",
+	new: "productBadge.new",
+	deprecated: "productBadge.deprecated",
+	trial: "productBadge.trial"
 };
 function createProductBadge(type) {
-	const label = PRODUCT_BADGE_LABEL[type];
+	const labelKey = PRODUCT_BADGE_KEY[type];
 	const ProductBadge = React.forwardRef((componentProps, forwardRef) => {
 		const { className, ...props } = componentProps;
+		const t = useDsTranslation("blocks");
 		return /* @__PURE__ */ jsx(Badge, {
 			ref: forwardRef,
 			"data-slot": `badge-${type}`,
+			color: "charcoal",
+			tone: "dark",
 			className: cn(productBadgeVariants({ type }), className),
 			...props,
-			children: label
+			children: t(labelKey)
 		});
 	});
-	ProductBadge.displayName = label.replace(/\s+/g, "") + "Badge";
+	ProductBadge.displayName = `${type.charAt(0).toUpperCase()}${type.slice(1)}Badge`;
 	return ProductBadge;
 }
 /** Blue pill — feature in beta, not yet GA */
@@ -901,13 +1522,14 @@ const TrialBadge = createProductBadge("trial");
 /** Charcoal pill — Professional tier (no gradient; solid secondary Badge) */
 const ProfessionalBadge = React.forwardRef((componentProps, forwardRef) => {
 	const { className, ...props } = componentProps;
+	const t = useDsTranslation("blocks");
 	return /* @__PURE__ */ jsx(Badge, {
 		ref: forwardRef,
 		"data-slot": "badge-professional",
 		tone: "dark",
 		color: "charcoal",
 		...props,
-		children: "Professional"
+		children: t("productBadge.professional")
 	});
 });
 ProfessionalBadge.displayName = "ProfessionalBadge";
@@ -917,20 +1539,23 @@ const roleBadgeVariants = cva(GRADIENT_BASE, { variants: { role: {
 	admin: "[--badge-accent:var(--color-purple-500)]",
 	owner: "[--badge-accent:var(--color-green-400)]"
 } } });
-const ROLE_BADGE_LABEL = {
-	agent: "Agent",
-	supervisor: "Supervisor",
-	admin: "Admin",
-	owner: "Owner"
+const ROLE_BADGE_KEY = {
+	agent: "roleBadge.agent",
+	supervisor: "roleBadge.supervisor",
+	admin: "roleBadge.admin",
+	owner: "roleBadge.owner"
 };
 const RoleBadge = React.forwardRef((componentProps, forwardRef) => {
 	const { role, className, ...props } = componentProps;
+	const t = useDsTranslation("blocks");
 	return /* @__PURE__ */ jsx(Badge, {
 		ref: forwardRef,
 		"data-slot": `badge-${role}`,
+		color: "charcoal",
+		tone: "dark",
 		className: cn(roleBadgeVariants({ role }), className),
 		...props,
-		children: ROLE_BADGE_LABEL[role]
+		children: t(ROLE_BADGE_KEY[role])
 	});
 });
 RoleBadge.displayName = "RoleBadge";
@@ -963,6 +1588,255 @@ function ChatbotPanelTrigger({ children = "Ask anything", icon = /* @__PURE__ */
 	});
 }
 
+//#endregion
+//#region src/components/chatbot-expand-suggestion.tsx
+const ChatbotExpandSuggestion = React.forwardRef((componentProps, forwardRef) => {
+	const { categories, selectedCategory: selectedCategoryProp, onCategoryChange, label = "Suggestions", suggestions, onSuggestionClick, className, ...props } = componentProps;
+	const [selectedCategory, setSelectedCategory] = useControllableState({
+		prop: selectedCategoryProp,
+		onChange: onCategoryChange
+	});
+	const hasCategories = categories != null && categories.length > 0;
+	const hasSuggestions = suggestions != null && suggestions.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: forwardRef,
+		className: cn("flex w-full flex-col items-center gap-6", className),
+		...props,
+		children: [hasCategories && /* @__PURE__ */ jsx(ToggleGroup, {
+			variant: "outline",
+			spacing: 2,
+			value: selectedCategory != null ? [selectedCategory] : [],
+			onValueChange: (vals) => setSelectedCategory(vals.at(-1)),
+			children: categories.map((cat) => /* @__PURE__ */ jsx(ToggleGroupItem, {
+				value: cat.value,
+				className: "data-pressed:bg-secondary data-pressed:text-secondary-foreground data-pressed:border-secondary",
+				children: cat.label
+			}, cat.value))
+		}), hasSuggestions && /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-col gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "px-3 py-2",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "text-sm font-semibold text-foreground leading-none",
+					children: label
+				})
+			}), suggestions.map((suggestion, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(Item, {
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				size: "sm",
+				className: "cursor-pointer",
+				onClick: () => onSuggestionClick?.(suggestion),
+				children: /* @__PURE__ */ jsx(ItemContent, { children: /* @__PURE__ */ jsx(ItemTitle, { children: suggestion.text }) })
+			}), index < suggestions.length - 1 && /* @__PURE__ */ jsx(Separator, {})] }, suggestion.id))]
+		})]
+	});
+});
+ChatbotExpandSuggestion.displayName = "ChatbotExpandSuggestion";
+
+//#endregion
+//#region src/components/chatbot-panel.tsx
+/** Resize bounds (px), from Figma: min 320 / max 768 / default 400. */
+const DEFAULT_WIDTH = 400;
+const MIN_WIDTH = 320;
+const MAX_WIDTH = 768;
+/** Width delta applied per Arrow key press on the resize handle. */
+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 }) {
+	const t = useDsTranslation("blocks");
+	const [menuOpen, setMenuOpen] = React.useState(false);
+	const [width, setWidth] = React.useState(() => clamp(defaultWidth, minWidth, maxWidth));
+	const applyWidth = React.useCallback((next) => {
+		const clamped = clamp(next, minWidth, maxWidth);
+		setWidth(clamped);
+		onWidthChange?.(clamped);
+	}, [
+		minWidth,
+		maxWidth,
+		onWidthChange
+	]);
+	const dragRef = React.useRef(null);
+	React.useEffect(() => {
+		if (!resizable) return void 0;
+		const handlePointerMove = (event) => {
+			const drag = dragRef.current;
+			if (!drag) return;
+			applyWidth(drag.startWidth - (event.clientX - drag.startX));
+		};
+		const handlePointerUp = () => {
+			dragRef.current = null;
+		};
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerUp);
+		window.addEventListener("pointercancel", handlePointerUp);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerUp);
+			window.removeEventListener("pointercancel", handlePointerUp);
+		};
+	}, [resizable, applyWidth]);
+	const handleResizeKeyDown = (event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			applyWidth(width + KEYBOARD_RESIZE_STEP);
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			applyWidth(width - KEYBOARD_RESIZE_STEP);
+		}
+	};
+	const hasConversation = React.Children.toArray(children).length > 0;
+	const bodyRef = React.useRef(null);
+	const [showScrollDown, setShowScrollDown] = React.useState(false);
+	const updateScrollState = React.useCallback(() => {
+		const el = bodyRef.current;
+		if (!el) return;
+		setShowScrollDown(el.scrollHeight - el.scrollTop - el.clientHeight > 8);
+	}, []);
+	React.useLayoutEffect(() => {
+		updateScrollState();
+	}, [
+		children,
+		width,
+		updateScrollState
+	]);
+	const scrollToBottom = () => {
+		bodyRef.current?.scrollTo({
+			top: bodyRef.current.scrollHeight,
+			behavior: "smooth"
+		});
+	};
+	const resolvedDisclaimer = disclaimer === void 0 ? /* @__PURE__ */ jsxs("p", {
+		className: "text-xs text-muted-foreground",
+		children: [
+			t("chatbotPanel.disclaimerBefore"),
+			/* @__PURE__ */ jsx("a", {
+				href: DISCLAIMER_LINK_HREF,
+				target: "_blank",
+				rel: "noreferrer",
+				className: "text-primary underline",
+				children: t("chatbotPanel.disclaimerLink")
+			}),
+			t("chatbotPanel.disclaimerAfter")
+		]
+	}) : disclaimer;
+	const menuContent = conversations != null ? /* @__PURE__ */ jsx(SidebarProvider, {
+		className: "!min-h-0 flex-1",
+		style: { "--sidebar-width": "20rem" },
+		children: /* @__PURE__ */ jsx(ChatbotSidebar, {
+			popup: true,
+			className: "[&_[data-slot=sidebar-content]]:gap-0",
+			conversations,
+			activeConversationId,
+			onNewChat: onNewChat && (() => {
+				onNewChat();
+				setMenuOpen(false);
+			}),
+			onSelectConversation: onSelectConversation && ((id) => {
+				onSelectConversation(id);
+				setMenuOpen(false);
+			}),
+			renderConversationMenuContent
+		})
+	}) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chatbot-panel",
+		className: cn("relative flex h-full flex-col overflow-clip rounded-xl border border-border bg-background", className),
+		style: {
+			width,
+			...style
+		},
+		...props,
+		children: [
+			resizable && /* @__PURE__ */ jsx("div", {
+				role: "separator",
+				"aria-orientation": "vertical",
+				"aria-label": t("chatbotPanel.resizeHandle"),
+				"aria-valuenow": width,
+				"aria-valuemin": minWidth,
+				"aria-valuemax": maxWidth,
+				tabIndex: 0,
+				onPointerDown: (event) => {
+					dragRef.current = {
+						startX: event.clientX,
+						startWidth: width
+					};
+				},
+				onKeyDown: handleResizeKeyDown,
+				className: cn("absolute inset-y-0 left-0 z-10 w-1.5 cursor-ew-resize touch-none select-none", "hover:bg-border/60 focus-visible:bg-border/60 focus-visible:outline-none")
+			}),
+			/* @__PURE__ */ jsx(ChatbotPanelHeader, {
+				title: title ?? t("chatbotPanel.title"),
+				onMenu,
+				menuContent,
+				menuOpen: conversations != null ? menuOpen : void 0,
+				onMenuOpenChange: setMenuOpen,
+				onExpand,
+				onClose
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex min-h-0 flex-1 flex-col",
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: bodyRef,
+					"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", {
+						className: "flex flex-col gap-6",
+						children
+					}) : /* @__PURE__ */ jsxs("div", {
+						"data-slot": "chatbot-panel-empty",
+						className: "flex flex-1 flex-col items-center",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 flex-col items-center justify-center gap-2 text-center",
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									"aria-hidden": "true",
+									className: "grid size-12 place-items-center rounded-full border border-green-400 bg-[#00bd82] shadow-[0px_0px_8px_0px_var(--color-green-300)] [&_path]:fill-current [&_svg]:size-7 text-white dark:text-[#101820]",
+									children: /* @__PURE__ */ jsx(AircallMark, {})
+								}),
+								/* @__PURE__ */ jsx("h2", {
+									className: "text-sm font-medium text-foreground",
+									children: emptyTitle ?? t("chatbotPanel.emptyTitle")
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "max-w-[280px] text-sm text-muted-foreground",
+									children: emptyDescription ?? t("chatbotPanel.emptyDescription")
+								})
+							]
+						}), suggestions.length > 0 && /* @__PURE__ */ jsx("div", {
+							className: "flex w-full flex-col items-center gap-2 py-4",
+							children: suggestions.map((suggestion) => /* @__PURE__ */ jsx(ChatbotPanelSuggestion, {
+								onClick: () => onSuggestionSelect?.(suggestion),
+								children: suggestion.label
+							}, suggestion.id ?? suggestion.label))
+						})]
+					})
+				}), hasConversation && showScrollDown && /* @__PURE__ */ jsx(Button, {
+					variant: "outline",
+					size: "icon",
+					"aria-label": "Scroll to bottom",
+					onClick: scrollToBottom,
+					className: "absolute right-4 bottom-4 size-10 rounded-md shadow-lg",
+					children: /* @__PURE__ */ jsx(ChevronDown, { className: "size-6" })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "chatbot-panel-footer",
+				className: "flex flex-col gap-2.5 bg-gradient-to-b from-background/10 to-background px-4 pt-0 pb-4",
+				children: [/* @__PURE__ */ jsx(ChatbotInput, {
+					value: inputValue,
+					onValueChange: onInputValueChange,
+					onSubmit,
+					onStop,
+					loading,
+					placeholder,
+					autoFocus
+				}), resolvedDisclaimer]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/form/form-context.ts
 /**
@@ -1777,4 +2651,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CardSaveBar, ChatbotInput, ChatbotPage, ChatbotPanelSuggestion, ChatbotPanelTrigger, 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, FormComboboxField, FormFieldBase, FormInputField, FormMultiComboboxField, FormNumberField, 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, withForm };
+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, FormComboboxField, FormFieldBase, FormInputField, FormMultiComboboxField, FormNumberField, 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, withForm };