@aircall/blocks 0.12.0 → 0.13.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { Anchor, Badge, Button, CounterBadge, DropdownMenu, DropdownMenuAddon, D
 import * as React from "react";
 import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AircallLoader, AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, LockKeyhole, Menu, MessageSquare, Minus, PanelLeft, PanelLeftClose, PanelLeftOpen, Plus, Search, Settings, Sprout, Square, SquareArrowOutUpRight, ThumbsDown, ThumbsDownFilled, ThumbsUp, ThumbsUpFilled, TriangleAlert } from "@aircall/react-icons";
+import { AircallLoader, AircallLogo, AircallMark, ArrowUp, Check, ChevronDown, ChevronLeft, ChevronRight, Copy, Ellipsis, ExternalLink, FileText, History, 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";
@@ -29,6 +29,9 @@ const de = {
 	"chatbotInput.messageLabel": "Nachricht",
 	"chatbotInput.stopGenerating": "Generierung stoppen",
 	"chatbotInput.sendMessage": "Nachricht senden",
+	"chatbotInput.conversationHistory": "Gesprächsverlauf",
+	"chatbotInput.noConversations": "Keine vergangenen Gespräche",
+	"chatbotInput.recentChatHistory": "Letzter Chatverlauf",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Neu",
 	"productBadge.deprecated": "Veraltet",
@@ -85,6 +88,9 @@ const en = {
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Stop generating",
 	"chatbotInput.sendMessage": "Send message",
+	"chatbotInput.conversationHistory": "Conversation history",
+	"chatbotInput.noConversations": "No past conversations",
+	"chatbotInput.recentChatHistory": "Recent chat history",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "New",
 	"productBadge.deprecated": "Deprecated",
@@ -141,6 +147,9 @@ const es = {
 	"chatbotInput.messageLabel": "Mensaje",
 	"chatbotInput.stopGenerating": "Detener la generación",
 	"chatbotInput.sendMessage": "Enviar mensaje",
+	"chatbotInput.conversationHistory": "Historial de conversaciones",
+	"chatbotInput.noConversations": "No hay conversaciones pasadas",
+	"chatbotInput.recentChatHistory": "Historial de chats recientes",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Nuevo",
 	"productBadge.deprecated": "Obsoleto",
@@ -197,6 +206,9 @@ const fr = {
 	"chatbotInput.messageLabel": "Message",
 	"chatbotInput.stopGenerating": "Arrêter la génération",
 	"chatbotInput.sendMessage": "Envoyer un message",
+	"chatbotInput.conversationHistory": "Historique des conversations",
+	"chatbotInput.noConversations": "Aucune conversation passée",
+	"chatbotInput.recentChatHistory": "Historique récent des chats",
 	"productBadge.beta": "Bêta",
 	"productBadge.new": "Nouveau",
 	"productBadge.deprecated": "Obsolète",
@@ -253,6 +265,9 @@ const it = {
 	"chatbotInput.messageLabel": "Messaggio",
 	"chatbotInput.stopGenerating": "Interrompi la generazione",
 	"chatbotInput.sendMessage": "Invia messaggio",
+	"chatbotInput.conversationHistory": "Cronologia conversazioni",
+	"chatbotInput.noConversations": "Nessuna conversazione passata",
+	"chatbotInput.recentChatHistory": "Cronologia recente delle chat",
 	"productBadge.beta": "Beta",
 	"productBadge.new": "Nuovo",
 	"productBadge.deprecated": "Obsoleto",
@@ -1445,7 +1460,7 @@ function ChatbotPanelHeader({ title = "Ask Aircall", onMenu, menuContent, menuOp
 const SIDEBAR_MIN_WIDTH = 140;
 const SIDEBAR_MAX_WIDTH = 480;
 const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
-	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", popup = false, className } = componentProps;
+	const { conversations, activeConversationId, onNewChat, onSelectConversation, renderConversationMenuContent, recentLabel = "Recent", showNewChat = true, popup = false, className } = componentProps;
 	const t = useDsTranslation("blocks");
 	const isNewChatActive = !activeConversationId || !conversations.some((c) => c.id === activeConversationId);
 	const sidebarInternalRef = React.useRef(null);
@@ -1478,7 +1493,7 @@ const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
 	const scrollableContent = /* @__PURE__ */ jsxs("div", {
 		"data-slot": "sidebar-content",
 		className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto", "[scrollbar-width:thin] [scrollbar-color:transparent_transparent] hover:[scrollbar-color:rgba(0,0,0,0.15)_transparent]", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:bg-transparent [&:hover::-webkit-scrollbar-thumb]:bg-black/20"),
-		children: [/* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+		children: [showNewChat && /* @__PURE__ */ jsx(SidebarGroup, { children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
 			isActive: isNewChatActive,
 			onClick: onNewChat,
 			children: [/* @__PURE__ */ jsx(Plus, {}), /* @__PURE__ */ jsx("span", { children: t("chatbotSidebar.newChat") })]
@@ -1533,6 +1548,17 @@ const ChatbotSidebar = React.forwardRef((componentProps, forwardRef) => {
 });
 ChatbotSidebar.displayName = "ChatbotSidebar";
 
+//#endregion
+//#region src/components/chatbot-panel-suggestion.tsx
+function ChatbotPanelSuggestion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "chatbot-panel-suggestion",
+		variant: "ghost",
+		className: cn("h-auto max-w-[280px] text-left rounded-[18px] border border-primary px-3 py-1.5", "bg-background text-primary whitespace-normal", "hover:bg-[color-mix(in_srgb,#5BF1B2_20%,var(--background))] hover:text-primary", className),
+		...props
+	});
+}
+
 //#endregion
 //#region src/components/chatbot-input.tsx
 const textareaVariants = cva([
@@ -1556,13 +1582,14 @@ const textareaVariants = cva([
 		expanded: false
 	}
 });
-function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", expanded = false, disabled, ...textareaProps }) {
+function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, placeholder, loading = false, size = "default", expanded = false, disabled, suggestions, onSuggestionClick, conversations, activeConversationId, onSelectConversation, ...textareaProps }) {
 	const t = useDsTranslation("blocks");
 	const [currentValue = "", setCurrentValue] = useControllableState({
 		prop: value,
 		defaultProp: "",
 		onChange: onValueChange
 	});
+	const [historyOpen, setHistoryOpen] = React.useState(false);
 	const hasValue = currentValue.trim().length > 0;
 	const handleChange = (event) => {
 		setCurrentValue(event.target.value);
@@ -1579,10 +1606,63 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 		}
 		textareaProps.onKeyDown?.(event);
 	};
+	const hasSuggestions = suggestions && suggestions.length > 0;
+	const hasBottomRow = hasSuggestions || conversations !== void 0;
+	const sendStopButton = loading ? /* @__PURE__ */ jsx(InputGroupButton, {
+		variant: "secondary",
+		size: "icon",
+		className: "rounded-full",
+		"aria-label": t("chatbotInput.stopGenerating"),
+		disabled,
+		onClick: onStop,
+		children: /* @__PURE__ */ jsx(Square, {})
+	}) : /* @__PURE__ */ jsx(InputGroupButton, {
+		variant: hasValue ? "default" : "ghost",
+		size: "icon",
+		className: "rounded-full",
+		"aria-label": t("chatbotInput.sendMessage"),
+		disabled: disabled || !hasValue,
+		onClick: submit,
+		children: /* @__PURE__ */ jsx(ArrowUp, {})
+	});
+	const historyButton = conversations !== void 0 ? /* @__PURE__ */ jsxs(Popover, {
+		open: historyOpen,
+		onOpenChange: setHistoryOpen,
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(Button, {
+			variant: "ghost",
+			size: "icon",
+			disabled,
+			"aria-label": t("chatbotInput.conversationHistory"),
+			children: /* @__PURE__ */ jsx(History, {})
+		}) }), /* @__PURE__ */ jsx(PopoverContent, {
+			align: "end",
+			sideOffset: 4,
+			className: "w-80 gap-0 p-0",
+			children: conversations.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-4 py-6 text-center text-sm text-muted-foreground",
+				children: t("chatbotInput.noConversations")
+			}) : /* @__PURE__ */ jsx(SidebarProvider, {
+				className: "!min-h-0",
+				style: { "--sidebar-width": "20rem" },
+				children: /* @__PURE__ */ jsx(ChatbotSidebar, {
+					popup: true,
+					showNewChat: false,
+					recentLabel: t("chatbotInput.recentChatHistory"),
+					className: "bg-sidebar [&_[data-slot=sidebar-content]]:gap-0 [&_[data-slot=sidebar-content]]:max-h-[280px]",
+					conversations,
+					activeConversationId,
+					onSelectConversation: (id) => {
+						onSelectConversation?.(id);
+						setHistoryOpen(false);
+					}
+				})
+			})
+		})]
+	}) : null;
 	return /* @__PURE__ */ jsxs(InputGroup, {
 		"data-slot": "chatbot-input",
 		"data-loading": loading || void 0,
-		className: cn("h-auto items-end gap-2 overflow-clip rounded-3xl bg-background py-2 pr-2 pl-6", "shadow-[0px_0px_8px_0px_var(--input)]", "hover:shadow-[0px_0px_8px_0px_var(--ring)]", "has-[[data-slot=input-group-control]:focus-visible]:border-green-400", "has-[[data-slot=input-group-control]:focus-visible]:ring-0", "has-[[data-slot=input-group-control]:focus-visible]:shadow-[0px_0px_8px_0px_var(--ring)]", className),
+		className: cn("h-auto gap-2 overflow-clip rounded-3xl bg-background py-2 pr-2 pl-6", hasBottomRow ? "w-fit flex-col items-stretch" : "items-end", "shadow-[0px_0px_8px_0px_var(--input)]", "hover:shadow-[0px_0px_8px_0px_var(--ring)]", "has-[[data-slot=input-group-control]:focus-visible]:border-green-400", "has-[[data-slot=input-group-control]:focus-visible]:ring-0", "has-[[data-slot=input-group-control]:focus-visible]:shadow-[0px_0px_8px_0px_var(--ring)]", className),
 		"aria-disabled": disabled || void 0,
 		children: [/* @__PURE__ */ jsx(InputGroupTextarea, {
 			rows: 1,
@@ -1597,40 +1677,27 @@ function ChatbotInput({ className, value, onValueChange, onSubmit, onStop, place
 				size,
 				expanded
 			}))
-		}), /* @__PURE__ */ jsx("div", {
+		}), hasBottomRow ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex gap-2",
+				children: hasSuggestions && suggestions.map((s) => /* @__PURE__ */ jsx(ChatbotPanelSuggestion, {
+					className: "max-w-none shrink-0 whitespace-nowrap",
+					disabled,
+					onClick: () => onSuggestionClick?.(s),
+					children: s.label
+				}, s.id))
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [historyButton, sendStopButton]
+			})]
+		}) : /* @__PURE__ */ jsx("div", {
 			className: "flex shrink-0 items-center gap-2",
-			children: loading ? /* @__PURE__ */ jsx(InputGroupButton, {
-				variant: "secondary",
-				size: "icon",
-				className: "rounded-full",
-				"aria-label": t("chatbotInput.stopGenerating"),
-				disabled,
-				onClick: onStop,
-				children: /* @__PURE__ */ jsx(Square, {})
-			}) : /* @__PURE__ */ jsx(InputGroupButton, {
-				variant: hasValue ? "default" : "ghost",
-				size: "icon",
-				className: "rounded-full",
-				"aria-label": t("chatbotInput.sendMessage"),
-				disabled: disabled || !hasValue,
-				onClick: submit,
-				children: /* @__PURE__ */ jsx(ArrowUp, {})
-			})
+			children: sendStopButton
 		})]
 	});
 }
 
-//#endregion
-//#region src/components/chatbot-panel-suggestion.tsx
-function ChatbotPanelSuggestion({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Button, {
-		"data-slot": "chatbot-panel-suggestion",
-		variant: "ghost",
-		className: cn("h-auto max-w-[280px] text-left rounded-[18px] border border-primary px-3 py-1.5", "bg-background text-primary whitespace-normal", "hover:bg-[color-mix(in_srgb,#5BF1B2_20%,var(--background))] hover:text-primary", className),
-		...props
-	});
-}
-
 //#endregion
 //#region src/components/chatbot-user-message.tsx
 function ChatbotUserMessage({ className, children, ...props }) {
@@ -2366,7 +2433,7 @@ function toFieldErrors(errors) {
 
 //#endregion
 //#region src/components/form-field.tsx
-function FormFieldShell({ label, description, necessityIndicator, children }) {
+function FormFieldShell({ label, description, necessityIndicator, id, children }) {
 	const errors = useFieldContext().state.meta.errors;
 	const labelContent = typeof label === "string" ? label : label?.content;
 	const labelInfo = typeof label === "object" ? label.info : void 0;
@@ -2376,6 +2443,7 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 	const descriptionVariant = (typeof description === "object" ? description.variant : void 0) ?? "instructional";
 	const labelNode = labelContent !== void 0 && /* @__PURE__ */ jsx(FieldLabel, {
 		necessityIndicator,
+		htmlFor: id,
 		children: labelContent
 	});
 	const labelRow = labelContent !== void 0 && (hasAddons ? /* @__PURE__ */ jsxs(FieldLabelRow, { children: [
@@ -2405,6 +2473,7 @@ function FormFieldShell({ label, description, necessityIndicator, children }) {
 */
 function FormFieldBase(props) {
 	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, buildControl, children } = props;
+	const id = `${React.useId()}-${name}`;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
@@ -2417,20 +2486,22 @@ function FormFieldBase(props) {
 			label,
 			description,
 			necessityIndicator,
-			children: children(field, buildControl(field))
+			id,
+			children: children(field, buildControl(field, id))
 		})
 	});
 }
 
 //#endregion
 //#region src/components/form-select-field.tsx
-function selectControl(field) {
+function selectControl(field, id) {
 	return {
 		selectProps: {
 			value: field.state.value || null,
 			onValueChange: (value) => field.handleChange(value ?? "")
 		},
 		selectTriggerProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2463,8 +2534,9 @@ function FormSelectField(props) {
 
 //#endregion
 //#region src/components/form-input-field.tsx
-function inputControl(field) {
+function inputControl(field, id) {
 	return { inputProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (event) => field.handleChange(event.target.value),
 		onBlur: field.handleBlur,
@@ -2490,13 +2562,14 @@ function FormInputField(props) {
 
 //#endregion
 //#region src/components/form-combobox-field.tsx
-function comboboxControl(field) {
+function comboboxControl(field, id) {
 	return {
 		comboboxProps: {
 			value: field.state.value || null,
 			onValueChange: (value) => field.handleChange(value ?? "")
 		},
 		comboboxInputProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2530,13 +2603,14 @@ function FormComboboxField(props) {
 
 //#endregion
 //#region src/components/form-multi-combobox-field.tsx
-function multiComboboxControl(field) {
+function multiComboboxControl(field, id) {
 	return {
 		comboboxProps: {
 			value: field.state.value ?? [],
 			onValueChange: (values) => field.handleChange(values)
 		},
 		comboboxInputProps: {
+			id,
 			onBlur: field.handleBlur,
 			"aria-invalid": field.state.meta.errors.length > 0 ? true : void 0
 		}
@@ -2594,6 +2668,7 @@ function FormMultiComboboxField(props) {
 */
 function FormArrayField(props) {
 	const { form, name, validators, listeners, defaultValue, asyncDebounceMs, asyncAlways, label, description, necessityIndicator, children } = props;
+	const id = `${React.useId()}-${name}`;
 	const AppField = form.AppField;
 	return /* @__PURE__ */ jsx(AppField, {
 		name,
@@ -2607,6 +2682,7 @@ function FormArrayField(props) {
 			label,
 			description,
 			necessityIndicator,
+			id,
 			children: children(field)
 		})
 	});
@@ -2614,8 +2690,9 @@ function FormArrayField(props) {
 
 //#endregion
 //#region src/components/form-textarea-field.tsx
-function textareaControl(field) {
+function textareaControl(field, id) {
 	return { textareaProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (event) => field.handleChange(event.target.value),
 		onBlur: field.handleBlur,
@@ -2641,7 +2718,7 @@ function FormTextareaField(props) {
 
 //#endregion
 //#region src/components/form-radio-group-field.tsx
-function radioGroupControl(field) {
+function radioGroupControl(field, _id) {
 	return { radioGroupProps: {
 		value: field.state.value || null,
 		onValueChange: (value) => field.handleChange(value ?? ""),
@@ -2672,8 +2749,9 @@ function FormRadioGroupField(props) {
 
 //#endregion
 //#region src/components/form-otp-field.tsx
-function otpControl(field) {
+function otpControl(field, id) {
 	return { otpProps: {
+		id,
 		value: field.state.value ?? "",
 		onChange: (value) => field.handleChange(value),
 		onBlur: field.handleBlur,
@@ -2699,8 +2777,9 @@ function FormOTPField(props) {
 
 //#endregion
 //#region src/components/form-switch-field.tsx
-function switchControl(field) {
+function switchControl(field, id) {
 	return { switchProps: {
+		id,
 		checked: field.state.value,
 		onCheckedChange: (checked) => field.handleChange(checked),
 		onBlur: field.handleBlur,
@@ -2726,8 +2805,9 @@ function FormSwitchField(props) {
 
 //#endregion
 //#region src/components/form-numeric-field.tsx
-function numericControl(field) {
+function numericControl(field, id) {
 	return { numericProps: {
+		id,
 		value: field.state.value,
 		onValueChange: (value) => field.handleChange(value ?? 0),
 		onBlur: field.handleBlur,
@@ -2753,10 +2833,11 @@ function FormNumericField(props) {
 
 //#endregion
 //#region src/components/form-slider-field.tsx
-function sliderControl(field) {
+function sliderControl(field, id) {
 	return { sliderProps: {
+		id,
 		value: [field.state.value],
-		onValueChange: (values) => field.handleChange(values[0] ?? 0),
+		onValueChange: (value) => field.handleChange(Array.isArray(value) ? value[0] ?? 0 : value),
 		onBlur: field.handleBlur
 	} };
 }
@@ -2779,7 +2860,7 @@ function FormSliderField(props) {
 
 //#endregion
 //#region src/components/form-toggle-group-field.tsx
-function toggleGroupControl(field) {
+function toggleGroupControl(field, _id) {
 	return { toggleGroupProps: {
 		value: field.state.value ? [field.state.value] : [],
 		onValueChange: (values) => field.handleChange(values[values.length - 1] ?? null),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aircall/blocks",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "type": "module",
   "private": false,
   "sideEffects": [
@@ -81,7 +81,7 @@
     "vite": "7.3.1",
     "vitest": "4.0.17",
     "zod": "4.4.3",
-    "@aircall/ds": "0.18.0",
+    "@aircall/ds": "0.19.0",
     "@aircall/hooks": "0.5.1"
   },
   "keywords": [
@@ -97,7 +97,7 @@
     "build:js": "tsdown --config ./tsdown.config.ts",
     "build:css": "tailwindcss -i ./src/styles/globals.css -o ./dist/globals.css --minify",
     "build:package": "pnpm run build:js && pnpm run build:css",
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.strict.json",
     "lint": "eslint . --max-warnings 0",
     "sb:dev": "storybook dev -p 6009",
     "sb:build": "storybook build",