@aircall/blocks 0.7.0 → 0.10.0

package/dist/index.js

@@ -1,8 +1,8 @@
-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, Popover, PopoverContent, PopoverTrigger, 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, ExternalLink, FileText, LockKeyhole, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert, X } from "@aircall/react-icons";
+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";
@@ -28,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;
 
@@ -50,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;
 
@@ -72,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;
 
@@ -94,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;
 
@@ -116,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;
 
@@ -458,76 +618,41 @@ CopyButtonLabel.displayName = "CopyButtonLabel";
 //#endregion
 //#region src/components/chatbot-response-block.tsx
 function SourcesBadge({ sources }) {
-	const [open, setOpen] = useState(false);
-	const closeTimerRef = useRef();
-	const openedByHoverRef = useRef(false);
-	useUnmount(() => clearTimeout(closeTimerRef.current));
-	function handlePointerEnter(e) {
-		if (e.pointerType !== "mouse") return;
-		openedByHoverRef.current = true;
-		clearTimeout(closeTimerRef.current);
-		setOpen(true);
-	}
-	function handlePointerLeave(e) {
-		if (e.pointerType !== "mouse") return;
-		clearTimeout(closeTimerRef.current);
-		closeTimerRef.current = setTimeout(() => {
-			openedByHoverRef.current = false;
-			setOpen(false);
-		}, 150);
-	}
-	return /* @__PURE__ */ jsxs(Popover, {
-		open,
-		onOpenChange: (nextOpen, eventDetails) => {
-			if (!nextOpen) {
-				if (eventDetails.reason === "trigger-press" && openedByHoverRef.current) return;
-				openedByHoverRef.current = false;
-				clearTimeout(closeTimerRef.current);
-			}
-			setOpen(nextOpen);
-		},
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			className: "cursor-default rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-			onPointerEnter: handlePointerEnter,
-			onPointerLeave: handlePointerLeave,
-			children: /* @__PURE__ */ jsx(Badge, {
-				className: "!rounded-full !bg-charcoal-400/20",
-				children: `${sources.length} ${sources.length === 1 ? "Source" : "Sources"}`
-			})
-		}), /* @__PURE__ */ jsx(PopoverContent, {
-			side: "top",
-			align: "start",
-			sideOffset: 8,
-			className: "w-80",
-			onPointerEnter: handlePointerEnter,
-			onPointerLeave: handlePointerLeave,
-			children: /* @__PURE__ */ jsx("div", {
-				role: "list",
-				className: "flex flex-col",
-				children: sources.map((source) => /* @__PURE__ */ jsxs("div", {
-					role: "listitem",
-					className: "flex items-center gap-2 px-2 py-2",
-					children: [
-						/* @__PURE__ */ jsx(FileText, { className: "size-3.5 shrink-0 text-foreground" }),
-						/* @__PURE__ */ jsx("span", {
-							className: "min-w-0 flex-1 line-clamp-2 text-sm",
-							children: source.title
-						}),
-						/* @__PURE__ */ jsx("a", {
-							href: source.url,
-							target: "_blank",
-							rel: "noreferrer",
-							"aria-label": `Open ${source.title}`,
-							className: "shrink-0 text-foreground hover:text-primary",
-							children: /* @__PURE__ */ jsx(ExternalLink, { className: "size-3.5" })
-						})
-					]
-				}, source.url))
+	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);
@@ -628,7 +753,7 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 						value: markdown,
 						variant: "ghost",
 						size: "icon-sm",
-						"aria-label": "Copy",
+						"aria-label": t("chatbotResponse.copy"),
 						children: /* @__PURE__ */ jsx(CopyButtonIcon, {})
 					}),
 					/* @__PURE__ */ jsx(Button, {
@@ -636,7 +761,7 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 						variant: "ghost",
 						size: "icon-sm",
 						"aria-pressed": feedback === "up",
-						"aria-label": "Helpful",
+						"aria-label": t("chatbotResponse.helpful"),
 						onClick: () => handleFeedback("up"),
 						className: cn(feedback === "up" && "text-primary"),
 						children: feedback === "up" ? /* @__PURE__ */ jsx(ThumbsUpFilled, {}) : /* @__PURE__ */ jsx(ThumbsUp, {})
@@ -646,7 +771,7 @@ function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources,
 						variant: "ghost",
 						size: "icon-sm",
 						"aria-pressed": feedback === "down",
-						"aria-label": "Not helpful",
+						"aria-label": t("chatbotResponse.notHelpful"),
 						onClick: () => handleFeedback("down"),
 						className: cn(feedback === "down" && "text-primary"),
 						children: feedback === "down" ? /* @__PURE__ */ jsx(ThumbsDownFilled, {}) : /* @__PURE__ */ jsx(ThumbsDown, {})
@@ -669,23 +794,237 @@ 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.
-*
-* Always visible — the panel body collapses/expands below it. Controlled by
-* the parent via `open` + `onOpenChange`; pass `onClose` to show the dismiss (×) button.
+* 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", open, onOpenChange, onFeedback, onClose, className, ...props }) {
+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: [
-			/* @__PURE__ */ jsx("span", {
+			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" })
@@ -697,23 +1036,30 @@ function ChatbotPanelHeader({ title = "Ask Aircall", open, onOpenChange, onFeedb
 			onFeedback != null && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				size: "icon",
-				"aria-label": "Send feedback",
+				"aria-label": t("chatbotPanel.sendFeedback"),
 				onClick: onFeedback,
 				children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" })
 			}),
-			/* @__PURE__ */ jsx(Button, {
+			onExpand != null && /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				size: "icon",
-				"aria-label": open ? "Collapse panel" : "Expand panel",
+				"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": "Close panel",
+				"aria-label": t("chatbotPanel.closePanel"),
 				onClick: onClose,
-				children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+				children: /* @__PURE__ */ jsx(Minus, { className: "size-4" })
 			})
 		]
 	});
@@ -722,45 +1068,52 @@ function ChatbotPanelHeader({ title = "Ask Aircall", open, onOpenChange, onFeedb
 //#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";
@@ -773,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,
@@ -816,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, {
@@ -1115,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 */
@@ -1154,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";
@@ -1170,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";
@@ -1216,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
 /**
@@ -1309,7 +1930,7 @@ const CommonForm = createFormHook({
 	}
 });
 const useForm = CommonForm.useAppForm;
-const { withForm } = CommonForm;
+const { withForm, withFieldGroup } = CommonForm;
 
 //#endregion
 //#region src/form/field-errors.ts
@@ -1329,12 +1950,16 @@ function toFieldErrors(errors) {
 
 //#endregion
 //#region src/components/form-field.tsx
-function FormFieldShell({ label, description, children }) {
+function FormFieldShell({ label, description, required, necessityIndicator, children }) {
 	const errors = useFieldContext().state.meta.errors;
 	return /* @__PURE__ */ jsxs(Field, {
 		"data-invalid": errors.length > 0 ? true : void 0,
 		children: [
-			/* @__PURE__ */ jsx(FieldLabel, { children: label }),
+			label && /* @__PURE__ */ jsx(FieldLabel, {
+				required,
+				necessityIndicator,
+				children: label
+			}),
 			description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
 			children,
 			/* @__PURE__ */ jsx(FieldError, { errors: toFieldErrors(errors) })
@@ -1347,14 +1972,20 @@ function FormFieldShell({ label, description, children }) {
 * the AppField + shared shell. `TData`/`TControl` carry the precise field + bundle shapes through.
 */
 function FormFieldBase(props) {
-	const { form, name, validators, label, description, buildControl, children } = props;
+	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, required, necessityIndicator, buildControl, children } = props;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
 		validators,
+		listeners,
+		defaultValue,
+		asyncDebounceMs,
+		asyncAlways,
 		children: (field) => /* @__PURE__ */ jsx(FormFieldShell, {
 			label,
 			description,
+			required,
+			necessityIndicator,
 			children: children(field, buildControl(field))
 		})
 	});
@@ -1614,29 +2245,29 @@ function FormSwitchField(props) {
 }
 
 //#endregion
-//#region src/components/form-number-field.tsx
-function numberControl(field) {
-	return { numberProps: {
+//#region src/components/form-numeric-field.tsx
+function numericControl(field) {
+	return { numericProps: {
 		value: field.state.value,
-		onChange: (event) => field.handleChange(event.target.value === "" ? 0 : event.target.valueAsNumber),
+		onValueChange: (value) => field.handleChange(value ?? 0),
 		onBlur: field.handleBlur,
 		"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 	} };
 }
 /**
-* Numeric-input field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
-* with a `numberProps` bundle. `name` is restricted to the form's **number** fields — a
-* string/boolean `name` is a type error.
+* Numeric field wrapper — same threaded-`form` typing and shared shell as `FormSelectField`,
+* with a `numericProps` bundle for the DS `NumericInput` (prefer it over `Input type="number"`).
+* `name` is restricted to the form's **number** fields — a string/boolean `name` is a type error.
 *
 * @example
-* <FormNumberField form={form} name="age" label="Age" validators={{ onChange }}>
-*   {(field, { numberProps }) => <Input type="number" {...numberProps} />}
-* </FormNumberField>
+* <FormNumericField form={form} name="age" label="Age" validators={{ onChange }}>
+*   {(field, { numericProps }) => <NumericInput {...numericProps} />}
+* </FormNumericField>
 */
-function FormNumberField(props) {
+function FormNumericField(props) {
 	return /* @__PURE__ */ jsx(FormFieldBase, {
 		...props,
-		buildControl: numberControl
+		buildControl: numericControl
 	});
 }
 
@@ -2030,4 +2661,4 @@ function DashboardSidebarNav({ groups, renderLink }) {
 }
 
 //#endregion
-export { BetaBadge, CardSaveBar, ChatbotInput, ChatbotPage, 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 };
+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, 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 };