@aircall/blocks 0.6.0 → 0.7.0

package/dist/index.js

@@ -1,10 +1,12 @@
-import { Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldDescription, FieldError, FieldLabel, InputGroup, InputGroupButton, InputGroupTextarea, Sidebar, SidebarContent, SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarProvider, TabsList, Tooltip, TooltipContent, TooltipTrigger, cn, registerI18nNamespace, useDsTranslation, useSidebar } from "@aircall/ds";
+import { 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 { 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";
@@ -371,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) => {
@@ -384,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) => {
@@ -505,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 }) {
@@ -1777,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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -16,7 +16,8 @@
   "files": [
     "dist",
     "README.md",
-    "package.json"
+    "package.json",
+    "skills"
   ],
   "exports": {
     ".": {
@@ -40,6 +41,10 @@
       "optional": true
     }
   },
+  "dependencies": {
+    "react-markdown": "9.0.3",
+    "remark-gfm": "4.0.1"
+  },
   "devDependencies": {
     "@aircall/react-icons": "*",
     "@aircall/tsconfig": "1.4.3",
@@ -55,6 +60,7 @@
     "@storybook/react-vite": "10.3.3",
     "@tailwindcss/cli": "4.1.18",
     "@tailwindcss/postcss": "4.1.18",
+    "@tanstack/intent": "0.1.1",
     "@tanstack/react-form": "^1.33.0",
     "@types/node": "24",
     "@types/react": "19",
@@ -75,9 +81,17 @@
     "vite": "7.3.1",
     "vitest": "4.0.17",
     "zod": "4.4.3",
-    "@aircall/ds": "0.14.0",
+    "@aircall/ds": "0.15.0",
     "@aircall/hooks": "0.5.1"
   },
+  "keywords": [
+    "tanstack-intent"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/aircall/shared/hydra.git",
+    "directory": "packages/blocks"
+  },
   "scripts": {
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
     "build:js": "tsdown --config ./tsdown.config.ts",

package/skills/aircall-blocks/migrate-dashboard/SKILL.md

@@ -0,0 +1,127 @@
+---
+name: aircall-blocks/migrate-dashboard
+description: >
+  Migrate a file from @dashboard/library to @aircall/blocks / @aircall/ds. Load FIRST
+  to get the full component-level routing table before picking a recipe. Identifies what
+  has a blocks/ds equivalent, what is out of scope, and which sub-skill to load next.
+type: core
+library: aircall-blocks
+library_version: "0.5.1"
+requires:
+  - aircall-blocks/setup
+sources:
+  - "aircall/hydra:docs/migration-guides/dashboard-lib-to-blocks/AGENTS.md"
+---
+
+# Migrate @dashboard/library → @aircall/blocks / @aircall/ds
+
+This is the overview router for the `@dashboard/library` migration. Load it first to
+identify the right sub-skill for each component you are migrating, and to determine what
+falls outside the scope of blocks and ds entirely.
+
+## How to run this migration (end-to-end)
+
+Migrate incrementally — one screen/file at a time, shipping each green:
+
+0. **Set up once** — load `@aircall/blocks#aircall-blocks/setup` (it builds on
+   `@aircall/ds#aircall-ds/setup`): install `@aircall/blocks` + `@aircall/ds`, import both
+   `globals.css` bundles, and mount the DS root providers — including `DsI18nProvider`
+   (under your react-i18next provider, fed the user's language; importing `@aircall/blocks`
+   registers a `blocks` i18n namespace, so it needs DS's i18n engine) and
+   `NotificationQueueProvider` if you use banners. Add the jsdom test shims from setup.
+   (Loaded automatically via `requires`, but do the wiring first.)
+1. **Inventory** — list the file's `@dashboard/library` imports. The routing table below
+   says which have a blocks/ds equivalent and which are out of scope (hooks/utils/constants
+   don't migrate — leave them on `@dashboard/library`).
+2. **Migrate** — load the per-area recipe from the routing table for each UI component. Any
+   Tractor primitives in the same file migrate via `@aircall/ds#aircall-ds/migrate-tractor`;
+   icons via `@aircall/ds#aircall-ds/migrate-icons`.
+3. **Verify green** — `tsc --noEmit`, tests (DS popups/Switch need the setup jsdom shims),
+   biome/lint.
+4. **Repeat** until no in-scope `@dashboard/library` UI imports remain.
+
+## Cross-cutting note
+
+`@dashboard/library` mixes UI components with non-UI utilities. Only the UI components
+migrate. When writing replacement code:
+
+- Import block-level compositions (page layout, empty states, form layer) from
+  `'@aircall/blocks'`.
+- Import DS primitives (Card, Spinner, DataTable, Combobox, ItemGroup, etc.) from
+  `'@aircall/ds'`.
+- Never mix the two import paths for the same logical component — pick the package that
+  owns it per the table below.
+
+## Forms — never local state
+
+Any form that collects and submits data migrates to **`@aircall/blocks` `useForm` + the
+`Form*Field` wrappers** (the Storybook-proven `CommonForm` pattern) — NOT React
+`useState` per field, and NOT bare ds `Field`/`Input` primitives wired by hand. The form
+owns field state, validation, dirty/`canSubmit`/`isSubmitting`, and error display; those
+are what drive `SubmitButton`/`CardSaveBar`. Hand-rolled `useState` bypasses all of it and
+must be rewritten, not preserved, during migration. (`useState` for non-field UI — open,
+active tab — is fine.) Converting a large legacy `useState` form is a deliberate refactor,
+not a 1:1 swap. See `…/migrate-dashboard/form-wizard` and `@aircall/ds#aircall-ds/migrate-tractor/form-and-field`.
+
+## Out of scope
+
+The following `@dashboard/library` exports do NOT have an equivalent in `@aircall/blocks`
+or `@aircall/ds`. Do not try to map them to a DS component. They need a shared
+utils/data home or must stay in the consuming app.
+
+**Hooks**: `useGraphQuery`, `useGraphMutation`, `useToast`, `useToggle`,
+`useBroadcastChannel`
+
+**Helpers / utils**: `generateRandomUUID`, `isTruthy`, `toFixedNumber`,
+`capitalizeFirstLetter`, `getInitials`
+
+**Constants, types, and contexts**: `ROLE_NAME`, `RESOURCE`,
+`NavigationBlockerProvider`, `ClientError`
+
+**UI with no blocks/ds equivalent yet**: some `@dashboard/library` UI components have
+no target in `@aircall/blocks` or `@aircall/ds` yet (e.g. `PieChart` and other charts,
+`AudioPlayer`, `TileLegend`). If a UI component is not in the routing table below and
+not listed above, leave it imported from `@dashboard/library` for now — do not force a
+migration or invent a target.
+
+## Component routing table
+
+| @dashboard/library | Target (pkg) | Recipe to load | Status |
+|---|---|---|---|
+| `MessageScreen` family + `UnknownError` | `ComingSoonEmptyState`, `RestrictedAccessEmptyState`, `NotFoundEmptyState`, `NoDataEmptyState`, `NoSupportEmptyState`, `UnknownErrorEmptyState` and the `EmptyState*` parts (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/empty-states | available |
+| `PageHeader` | `DashboardPageHeader` (+ `DashboardPageHeaderTitle` / `DashboardPageHeaderActions` / `DashboardPageHeaderAction` / `DashboardPageHeaderNav` / `DashboardPageHeaderDescription`) (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/page-header | available |
+| Page / screen shell — incl. full-page flows (Campaign Creation, Add Contacts) | `DashboardPage` (standard: sidebar + header + tabs + content) / `DashboardStandalonePage` (full-page, no sidebar) (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/dashboard-page | available |
+| `Paper` | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`, `CardAction` (and @aircall/blocks `CardSaveBar` for a save bar) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/card | available |
+| `LoadMoreTable` | `DataTable` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/data-table | available |
+| `MultiSearchSelect` + `MultiInlineSearchSelect` + `MultiSelectOption` | `Combobox` with `multiple` (multi-select) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/combobox | available |
+| `SingleSearchSelect` / `SearchSelect` / single-value `MultiSelect` | `Combobox` WITHOUT `multiple` (single-select) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/combobox | available |
+| `FormWizard` + `useFormWizard` + `FormField` | `useForm`, `CommonForm`, `FormInputField`/`FormSelectField`/`FormComboboxField`/etc., `CardSaveBar`/`SaveBar` (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/form-wizard | available |
+| `Loading` | `Spinner` (and `Skeleton` for content placeholders) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/loading | available |
+| `List` + `ListItem` | `ItemGroup`, `Item`, `ItemMedia`, `ItemContent`, `ItemActions` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/list | available |
+| `Tile` + `TileHeader` + `TileValue` | `Card` (+ parts) as the tile container (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/tile | available |
+| `GridLayout` + `GridItem` + `Gap` | native `<div>` + Tailwind grid/flex/gap utilities (NO component import needed — these are layout primitives) (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/layout | available |
+| `InfoPopup` + `InfoPopupTrigger` + `InfoPopupContent` | `HoverCard`, `HoverCardTrigger`, `HoverCardContent` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/info-popup | available |
+| `CopyToClipboardButton` + `CopyToClipboardText` | `CopyButton`, `CopyButtonIcon`, `CopyButtonLabel` (@aircall/blocks) | load @aircall/blocks#aircall-blocks/migrate-dashboard/copy-button | available |
+| `ToggleRow` | `Field` (orientation="horizontal") + `Switch` + `FieldLabel` + optional `FieldDescription` (@aircall/ds) | load @aircall/blocks#aircall-blocks/migrate-dashboard/toggle-row | available |
+| `AddButton` + `SaveButton` + `LoadingButton` | `Button` (@aircall/ds) — `AddButton` → `Button` with leading icon; `LoadingButton` loading state → `Button disabled` + `Spinner`; `SaveButton` saved state → `Button variant="outline"` + check icon | load @aircall/ds#aircall-ds/migrate-tractor/button | available |
+| `ConditionalTooltip` | Conditional JSX: wrap children in `<Tooltip>` / `<TooltipTrigger>` / `<TooltipContent>` when condition is true, render children bare when false — no wrapper component needed (@aircall/ds) | inline — no sub-skill | available |
+| `RadioBoxGroup` + `RadioBox` | `RadioGroup` + `RadioGroupItem` wrapped in `Field` + `FieldLabel` + `FieldContent` (@aircall/ds) | inline — see @aircall/ds#aircall-ds/migrate-tractor/form-and-field for Field patterns | available |
+| `TagBeautified` | `Badge` with `legacyColor` prop for stored hex colors; `Badge` with `color` + `tone` props for new tags (@aircall/ds) | inline — `<Badge legacyColor="#0761b5">Sales</Badge>` | available |
+| `RolesTags` | `RoleBadge` with `role` prop (`"owner"` \| `"admin"` \| `"supervisor"` \| `"agent"`) (@aircall/blocks) | inline — `<RoleBadge role="admin" />` | available |
+| `Count` | `CounterBadge` — pass the capped value as children: `<CounterBadge>{n > 99 ? '99+' : n}</CounterBadge>` (@aircall/ds) | inline — no size or max props | available |
+| `Avatar` | `Avatar`, `AvatarImage`, `AvatarFallback` compound (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-tractor/avatar | available |
+| `ProgressBar` + `OptimisticProgressBar` | `Progress` with `value` prop (0–100) (@aircall/ds) | inline — `<Progress value={60} />` | available |
+| `ShadowScrollContainer` | `ScrollArea` with `scrollFade` prop — use a fixed `h-[…]` not `max-h-[…]` on the root (@aircall/ds) | inline — `<ScrollArea scrollFade className="h-[400px] rounded-md border">` | available |
+| `AccordionSection` | `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-tractor/accordion | available |
+| `ConfirmationModal` | `AlertDialog` and its parts (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-tractor/dialog | available |
+| `Tab` | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-tractor/tabs | available |
+| `Skeleton` + `SkeletonText` | `Skeleton` (@aircall/ds) | load @aircall/ds#aircall-ds/migrate-tractor/skeleton | available |
+
+## How to use this router
+
+1. Identify the `@dashboard/library` export(s) in the file you are migrating.
+2. Check the **Out of scope** section first — if the export is listed there, skip it.
+3. For each UI component, find the matching row in the table above and load the
+   indicated recipe sub-skill.
+4. Each sub-skill is self-contained: it carries the full prop mapping, common mistakes,
+   and import paths for its component family.