@aircall/blocks 0.5.1 → 0.7.0

package/dist/index.js

@@ -1,14 +1,136 @@
+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 * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
-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, useSidebar } from "@aircall/ds";
 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, 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 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";
 
+//#region src/i18n/locales/de.ts
+const de = {
+	"emptyState.comingSoon.title": "Demnächst verfügbar!",
+	"emptyState.comingSoon.description": "Sie werden in naher Zukunft auf diese Funktion zugreifen können.",
+	"emptyState.noData.title": "Keine passenden Ergebnisse",
+	"emptyState.noData.description": "Versuchen Sie, Ihre Suche zurückzusetzen oder einen Filter zu entfernen.",
+	"emptyState.restrictedAccess.title": "Sie haben keinen Zugriff auf diese Seite.",
+	"emptyState.restrictedAccess.description": "Wenden Sie sich an einen Administrator in Ihrem Team, um Zugriff zu erhalten.",
+	"emptyState.unknownError.title": "Diese Seite konnte nicht geladen werden",
+	"emptyState.unknownError.description": "Beim Laden ist ein Problem aufgetreten. Versuchen Sie es erneut, um die Daten zu laden.",
+	"emptyState.notFound.title": "Diese Seite konnte nicht gefunden werden",
+	"emptyState.notFound.description": "Sie wurde möglicherweise verschoben, gelöscht, oder der Link ist falsch.",
+	"emptyState.noSupport.title": "Diese Seite wird nicht unterstützt",
+	"emptyState.noSupport.description": "Versuchen Sie, Ihren Browser auf die neueste Version zu aktualisieren.",
+	"chatbotInput.placeholder": "Stellen Sie eine Frage...",
+	"chatbotInput.messageLabel": "Nachricht",
+	"chatbotInput.stopGenerating": "Generierung stoppen",
+	"chatbotInput.sendMessage": "Nachricht senden"
+};
+var de_default = de;
+
+//#endregion
+//#region src/i18n/locales/en.ts
+const en = {
+	"emptyState.comingSoon.title": "Coming soon!",
+	"emptyState.comingSoon.description": "You'll be able to access this feature in the near future.",
+	"emptyState.noData.title": "No results matching",
+	"emptyState.noData.description": "Try resetting your search or removing a filter.",
+	"emptyState.restrictedAccess.title": "You don't have access to this page.",
+	"emptyState.restrictedAccess.description": "Contact an admin on your team to get access.",
+	"emptyState.unknownError.title": "We couldn't load this page",
+	"emptyState.unknownError.description": "Something went wrong while loading. Try again to load the data.",
+	"emptyState.notFound.title": "We couldn't find that page",
+	"emptyState.notFound.description": "It may have been moved, deleted, or the link may be incorrect.",
+	"emptyState.noSupport.title": "We can't support this page",
+	"emptyState.noSupport.description": "Try updating your browser to the latest version.",
+	"chatbotInput.placeholder": "Ask anything...",
+	"chatbotInput.messageLabel": "Message",
+	"chatbotInput.stopGenerating": "Stop generating",
+	"chatbotInput.sendMessage": "Send message"
+};
+var en_default = en;
+
+//#endregion
+//#region src/i18n/locales/es.ts
+const es = {
+	"emptyState.comingSoon.title": "¡Próximamente!",
+	"emptyState.comingSoon.description": "Podrás acceder a esta función en un futuro próximo.",
+	"emptyState.noData.title": "No hay resultados que coincidan",
+	"emptyState.noData.description": "Intenta restablecer tu búsqueda o eliminar un filtro.",
+	"emptyState.restrictedAccess.title": "No tienes acceso a esta página.",
+	"emptyState.restrictedAccess.description": "Contacta a un administrador de tu equipo para obtener acceso.",
+	"emptyState.unknownError.title": "No pudimos cargar esta página",
+	"emptyState.unknownError.description": "Algo salió mal durante la carga. Inténtalo de nuevo para cargar los datos.",
+	"emptyState.notFound.title": "No pudimos encontrar esa página",
+	"emptyState.notFound.description": "Es posible que haya sido movida, eliminada, o el enlace sea incorrecto.",
+	"emptyState.noSupport.title": "No podemos mostrar esta página",
+	"emptyState.noSupport.description": "Intenta actualizar tu navegador a la última versión.",
+	"chatbotInput.placeholder": "Pregunta lo que quieras...",
+	"chatbotInput.messageLabel": "Mensaje",
+	"chatbotInput.stopGenerating": "Detener la generación",
+	"chatbotInput.sendMessage": "Enviar mensaje"
+};
+var es_default = es;
+
+//#endregion
+//#region src/i18n/locales/fr.ts
+const fr = {
+	"emptyState.comingSoon.title": "Bientôt disponible !",
+	"emptyState.comingSoon.description": "Vous pourrez accéder à cette fonctionnalité dans un futur proche.",
+	"emptyState.noData.title": "Aucun résultat correspondant",
+	"emptyState.noData.description": "Réinitialisez votre recherche ou supprimez un filtre.",
+	"emptyState.restrictedAccess.title": "Vous n'avez pas accès à cette page.",
+	"emptyState.restrictedAccess.description": "Contactez un administrateur de votre équipe pour obtenir l'accès.",
+	"emptyState.unknownError.title": "Impossible de charger cette page",
+	"emptyState.unknownError.description": "Un problème est survenu lors du chargement. Réessayez pour charger les données.",
+	"emptyState.notFound.title": "Impossible de trouver cette page",
+	"emptyState.notFound.description": "Elle a peut-être été déplacée, supprimée, ou le lien est incorrect.",
+	"emptyState.noSupport.title": "Nous ne pouvons pas prendre en charge cette page",
+	"emptyState.noSupport.description": "Essayez de mettre à jour votre navigateur vers la dernière version.",
+	"chatbotInput.placeholder": "Posez votre question...",
+	"chatbotInput.messageLabel": "Message",
+	"chatbotInput.stopGenerating": "Arrêter la génération",
+	"chatbotInput.sendMessage": "Envoyer un message"
+};
+var fr_default = fr;
+
+//#endregion
+//#region src/i18n/locales/it.ts
+const it = {
+	"emptyState.comingSoon.title": "Prossimamente!",
+	"emptyState.comingSoon.description": "Potrai accedere a questa funzionalità nel prossimo futuro.",
+	"emptyState.noData.title": "Nessun risultato corrispondente",
+	"emptyState.noData.description": "Prova a reimpostare la ricerca o a rimuovere un filtro.",
+	"emptyState.restrictedAccess.title": "Non hai accesso a questa pagina.",
+	"emptyState.restrictedAccess.description": "Contatta un amministratore del tuo team per ottenere l'accesso.",
+	"emptyState.unknownError.title": "Impossibile caricare questa pagina",
+	"emptyState.unknownError.description": "Si è verificato un problema durante il caricamento. Riprova a caricare i dati.",
+	"emptyState.notFound.title": "Impossibile trovare quella pagina",
+	"emptyState.notFound.description": "Potrebbe essere stata spostata, eliminata, o il link potrebbe essere errato.",
+	"emptyState.noSupport.title": "Non possiamo supportare questa pagina",
+	"emptyState.noSupport.description": "Prova ad aggiornare il browser all'ultima versione.",
+	"chatbotInput.placeholder": "Chiedi qualsiasi cosa...",
+	"chatbotInput.messageLabel": "Messaggio",
+	"chatbotInput.stopGenerating": "Interrompi la generazione",
+	"chatbotInput.sendMessage": "Invia messaggio"
+};
+var it_default = it;
+
+//#endregion
+//#region src/i18n/register.ts
+registerI18nNamespace("blocks", {
+	en: en_default,
+	fr: fr_default,
+	es: es_default,
+	de: de_default,
+	it: it_default
+});
+
+//#endregion
 //#region src/components/empty-state.tsx
 /** Generic root. Anchor of the family + escape hatch for ad-hoc empty states. */
 const EmptyState = React.forwardRef((componentProps, forwardRef) => {
@@ -102,17 +224,23 @@ function createEmptyStateVariant(config) {
 		children: config.icon
 	}));
 	Media.displayName = `${config.name}Media`;
-	const Title = React.forwardRef(({ children, ...componentProps }, forwardRef) => /* @__PURE__ */ jsx(EmptyStateTitle, {
-		ref: forwardRef,
-		...componentProps,
-		children: children ?? config.title
-	}));
+	const Title = React.forwardRef(({ children, ...componentProps }, forwardRef) => {
+		const t = useDsTranslation("blocks");
+		return /* @__PURE__ */ jsx(EmptyStateTitle, {
+			ref: forwardRef,
+			...componentProps,
+			children: children ?? t(config.titleKey)
+		});
+	});
 	Title.displayName = `${config.name}Title`;
-	const Description = React.forwardRef(({ children, ...componentProps }, forwardRef) => /* @__PURE__ */ jsx(EmptyStateDescription, {
-		ref: forwardRef,
-		...componentProps,
-		children: children ?? config.description
-	}));
+	const Description = React.forwardRef(({ children, ...componentProps }, forwardRef) => {
+		const t = useDsTranslation("blocks");
+		return /* @__PURE__ */ jsx(EmptyStateDescription, {
+			ref: forwardRef,
+			...componentProps,
+			children: children ?? (config.descriptionKey ? t(config.descriptionKey) : void 0)
+		});
+	});
 	Description.displayName = `${config.name}Description`;
 	return {
 		Root,
@@ -148,8 +276,8 @@ function createEmptyStateVariant(config) {
 const ComingSoon = createEmptyStateVariant({
 	name: "ComingSoon",
 	icon: /* @__PURE__ */ jsx(Sprout, {}),
-	title: "Coming soon!",
-	description: "You’ll be able to access this feature in the near future."
+	titleKey: "emptyState.comingSoon.title",
+	descriptionKey: "emptyState.comingSoon.description"
 });
 const ComingSoonEmptyState = ComingSoon.Root;
 const ComingSoonMedia = ComingSoon.Media;
@@ -165,8 +293,8 @@ const ComingSoonDescription = ComingSoon.Description;
 const RestrictedAccess = createEmptyStateVariant({
 	name: "RestrictedAccess",
 	icon: /* @__PURE__ */ jsx(LockKeyhole, {}),
-	title: "You don’t have access to this page.",
-	description: "Contact an admin on your team to get access."
+	titleKey: "emptyState.restrictedAccess.title",
+	descriptionKey: "emptyState.restrictedAccess.description"
 });
 const RestrictedAccessEmptyState = RestrictedAccess.Root;
 const RestrictedAccessMedia = RestrictedAccess.Media;
@@ -182,8 +310,8 @@ const RestrictedAccessDescription = RestrictedAccess.Description;
 const NotFound = createEmptyStateVariant({
 	name: "NotFound",
 	icon: /* @__PURE__ */ jsx(Search, {}),
-	title: "We couldn’t find that page",
-	description: "It may have been moved, deleted, or the link may be incorrect."
+	titleKey: "emptyState.notFound.title",
+	descriptionKey: "emptyState.notFound.description"
 });
 const NotFoundEmptyState = NotFound.Root;
 const NotFoundMedia = NotFound.Media;
@@ -200,8 +328,8 @@ const NotFoundDescription = NotFound.Description;
 const NoData = createEmptyStateVariant({
 	name: "NoData",
 	icon: /* @__PURE__ */ jsx(Search, {}),
-	title: "No results matching",
-	description: "Try resetting your search or removing a filter.",
+	titleKey: "emptyState.noData.title",
+	descriptionKey: "emptyState.noData.description",
 	role: "status"
 });
 const NoDataEmptyState = NoData.Root;
@@ -218,8 +346,8 @@ const NoDataDescription = NoData.Description;
 const NoSupport = createEmptyStateVariant({
 	name: "NoSupport",
 	icon: /* @__PURE__ */ jsx(Settings, {}),
-	title: "We can’t support this page",
-	description: "Try updating your browser to the latest version."
+	titleKey: "emptyState.noSupport.title",
+	descriptionKey: "emptyState.noSupport.description"
 });
 const NoSupportEmptyState = NoSupport.Root;
 const NoSupportMedia = NoSupport.Media;
@@ -236,8 +364,8 @@ const NoSupportDescription = NoSupport.Description;
 const UnknownError = createEmptyStateVariant({
 	name: "UnknownError",
 	icon: /* @__PURE__ */ jsx(TriangleAlert, {}),
-	title: "We couldn’t load this page",
-	description: "Something went wrong while loading. Try again to load the data.",
+	titleKey: "emptyState.unknownError.title",
+	descriptionKey: "emptyState.unknownError.description",
 	role: "alert"
 });
 const UnknownErrorEmptyState = UnknownError.Root;
@@ -245,6 +373,290 @@ 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 [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))
+			})
+		})]
+	});
+}
+function ChatbotResponseBlock({ messageId, markdown, streaming = false, sources, onFeedback, className }) {
+	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": "Copy",
+						children: /* @__PURE__ */ jsx(CopyButtonIcon, {})
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-pressed": feedback === "up",
+						"aria-label": "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": "Not helpful",
+						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) => {
@@ -258,6 +670,55 @@ const ChatbotPage = React.forwardRef((componentProps, forwardRef) => {
 });
 ChatbotPage.displayName = "ChatbotPage";
 
+//#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.
+*/
+function ChatbotPanelHeader({ title = "Ask Aircall", open, onOpenChange, onFeedback, onClose, className, ...props }) {
+	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", {
+				"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": "Send feedback",
+				onClick: onFeedback,
+				children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-4" })
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "icon",
+				"aria-label": open ? "Collapse panel" : "Expand panel",
+				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",
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(X, { className: "size-4" })
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/chatbot-sidebar.tsx
 const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
@@ -318,7 +779,8 @@ const textareaVariants = cva([
 	} },
 	defaultVariants: { size: "default" }
 });
-function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder = "Ask anything...", loading = false, size = "default", disabled, ...textareaProps }) {
+function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", disabled, ...textareaProps }) {
+	const t = useDsTranslation("blocks");
 	const [currentValue = "", setCurrentValue] = useControllableState({
 		prop: value,
 		defaultProp: "",
@@ -347,8 +809,8 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 		"aria-disabled": disabled || void 0,
 		children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
 			rows: 1,
-			placeholder,
-			"aria-label": "Message",
+			placeholder: placeholder ?? t("chatbotInput.placeholder"),
+			"aria-label": t("chatbotInput.messageLabel"),
 			...textareaProps,
 			value: currentValue,
 			disabled,
@@ -361,7 +823,7 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 				variant: "secondary",
 				size: "icon",
 				className: "rounded-full",
-				"aria-label": "Stop generating",
+				"aria-label": t("chatbotInput.stopGenerating"),
 				disabled,
 				onClick: onStop,
 				children: /* @__PURE__ */ jsx(Square, {})
@@ -369,7 +831,7 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 				variant: hasValue ? "default" : "ghost",
 				size: "icon",
 				className: "rounded-full",
-				"aria-label": "Send message",
+				"aria-label": t("chatbotInput.sendMessage"),
 				disabled: disabled || !hasValue,
 				onClick: submit,
 				children: /* @__PURE__ */ jsx(ArrowUp, {})
@@ -378,88 +840,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 }) {
@@ -1650,4 +2030,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, 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 };