@cossistant/react 0.0.25 → 0.0.28

package/support/index.js

@@ -1,65 +1,286 @@
 import "./support.js";
-import { SupportRealtimeProvider } from "../realtime/support-provider.js";
 import { SupportConfig } from "../support-config.js";
+import { SupportTrigger as SupportTrigger$1 } from "../primitives/trigger.js";
+import { ControlledStateProvider } from "./context/controlled-state.js";
 import { initializeSupportStore, useSupportConfig, useSupportNavigation, useSupportStore } from "./store/support-store.js";
+import { SupportRealtimeProvider } from "../realtime/support-provider.js";
+import { FooterSlot, HeaderSlot } from "./context/slots.js";
+import { Content } from "./components/content.js";
+import { Root } from "./components/root.js";
+import { ThemeWrapper } from "./components/theme-wrapper.js";
+import { DefaultTrigger } from "./components/trigger.js";
+import { SupportEventsProvider, useSupportEventEmitter, useSupportEvents } from "./context/events.js";
+import { SupportHandleProvider, useSupportHandle } from "./context/handle.js";
 import { CoButton } from "./components/button.js";
 import { Header } from "./components/header.js";
 import { SupportTextProvider, Text, useSupportText } from "./text/index.js";
-import { SupportContent } from "./components/support-content.js";
-import { ThemeWrapper } from "./components/theme-wrapper.js";
 import { WebSocketProvider, useWebSocket } from "./context/websocket.js";
+import { Page, Router } from "./router.js";
 import { useSupport } from "../provider.js";
-import React from "react";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/index.tsx
+function parseChildren(children) {
+	const result = {
+		trigger: null,
+		content: null,
+		pages: [],
+		other: []
+	};
+	React$1.Children.forEach(children, (child) => {
+		if (!React$1.isValidElement(child)) {
+			result.other.push(child);
+			return;
+		}
+		const displayName = child.type?.displayName ?? "";
+		if (displayName === "Support.Trigger" || child.type === SupportTrigger) result.trigger = child;
+		else if (displayName === "Support.Content" || child.type === SupportContent) result.content = child;
+		else if (displayName === "Support.Page" || child.type === Page) result.pages.push(child);
+		else result.other.push(child);
+	});
+	return result;
+}
 /**
 * Complete support widget with chat, routing, and real-time features.
 *
 * @example
-* // Zero config
+* // Zero config - works instantly
 * <Support />
 *
 * @example
-* // With customization and custom pages
+* // With styling
 * <Support
 *   theme="dark"
-*   classNames={{ bubble: "bg-purple-600" }}
-*   customPages={[
-*     { name: "FAQ", component: FAQPage }
-*   ]}
+*   classNames={{
+*     trigger: "bg-purple-600",
+*     content: "border-purple-200",
+*   }}
 * />
+*
+* @example
+* // With custom positioning
+* <Support side="bottom" align="end" sideOffset={8} />
+*
+* @example
+* // Controlled mode - external state management
+* const [isOpen, setIsOpen] = useState(false);
+* <Support open={isOpen} onOpenChange={setIsOpen} />
+*
+* @example
+* // With imperative ref
+* const supportRef = useRef<SupportHandle>(null);
+* supportRef.current?.open();
+* supportRef.current?.startConversation("Hello!");
+* <Support ref={supportRef} />
+*
+* @example
+* // With custom trigger
+* <Support side="bottom" align="end">
+*   <Support.Trigger className="px-4 py-2">
+*     {({ isOpen, unreadCount }) => (
+*       <span>{isOpen ? "Close" : `Help (${unreadCount})`}</span>
+*     )}
+*   </Support.Trigger>
+* </Support>
+*
+* @example
+* // With custom pages
+* <Support>
+*   <Support.Page name="FAQ" component={FAQPage} />
+* </Support>
 */
-function Support({ className, position = "bottom", align = "right", positioning = "fixed", quickOptions, defaultMessages, defaultOpen, locale, content, theme, slots, classNames, customPages, children }) {
+function SupportComponentInner({ className, side = "top", align = "end", sideOffset = 16, avoidCollisions = true, collisionPadding = 8, classNames = {}, theme, open, onOpenChange, defaultOpen, quickOptions, defaultMessages, locale, content, customPages, onConversationStart, onConversationEnd, onMessageSent, onMessageReceived, onError, children }, ref) {
 	const { website } = useSupport();
 	const isVisitorBlocked = website?.visitor?.isBlocked ?? false;
-	React.useEffect(() => {
-		if (defaultOpen !== void 0) initializeSupportStore({ defaultOpen });
-	}, [defaultOpen]);
+	React$1.useEffect(() => {
+		if (open === void 0 && defaultOpen !== void 0) initializeSupportStore({ defaultOpen });
+	}, [open, defaultOpen]);
 	if (!website || isVisitorBlocked) return null;
-	return /* @__PURE__ */ jsxs(ThemeWrapper, {
-		theme,
-		children: [/* @__PURE__ */ jsx(SupportRealtimeProvider, { children: /* @__PURE__ */ jsx(SupportTextProvider, {
-			content,
-			locale,
-			children: /* @__PURE__ */ jsx(SupportContent, {
-				align,
-				className,
-				classNames,
-				customPages,
-				position,
-				positioning,
-				slots,
-				children
+	const parsed = parseChildren(children);
+	return /* @__PURE__ */ jsx(ControlledStateProvider, {
+		onOpenChange,
+		open,
+		children: /* @__PURE__ */ jsx(SupportEventsProvider, {
+			onConversationEnd,
+			onConversationStart,
+			onError,
+			onMessageReceived,
+			onMessageSent,
+			children: /* @__PURE__ */ jsx(SupportHandleProvider, {
+				forwardedRef: ref,
+				children: /* @__PURE__ */ jsxs(ThemeWrapper, {
+					theme,
+					children: [/* @__PURE__ */ jsx(SupportRealtimeProvider, { children: /* @__PURE__ */ jsx(SupportTextProvider, {
+						content,
+						locale,
+						children: /* @__PURE__ */ jsxs(Root, {
+							className,
+							children: [parsed.trigger ?? /* @__PURE__ */ jsx(DefaultTrigger, { className: classNames.trigger }), parsed.content ?? /* @__PURE__ */ jsx(Content, {
+								align,
+								avoidCollisions,
+								className: classNames.content,
+								collisionPadding,
+								side,
+								sideOffset,
+								children: /* @__PURE__ */ jsx(Router, {
+									customPages,
+									children: parsed.pages
+								})
+							})]
+						})
+					}) }), /* @__PURE__ */ jsx(SupportConfig, {
+						defaultMessages,
+						quickOptions
+					})]
+				})
 			})
-		}) }), /* @__PURE__ */ jsx(SupportConfig, {
-			defaultMessages,
-			quickOptions
-		})]
+		})
 	});
 }
+const SupportComponent = React$1.forwardRef(SupportComponentInner);
+/**
+* Custom trigger component for the support widget.
+* Use this inside <Support> to replace the default floating button.
+*
+* @example
+* <Support.Trigger className="my-button">
+*   {({ isOpen, unreadCount }) => (
+*     <span>{isOpen ? "Close" : `Help (${unreadCount})`}</span>
+*   )}
+* </Support.Trigger>
+*/
+const SupportTrigger = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => /* @__PURE__ */ jsx(SupportTrigger$1, {
+	asChild,
+	className,
+	ref,
+	...props,
+	children
+}));
+SupportTrigger.displayName = "Support.Trigger";
+/**
+* Custom content wrapper for the support widget.
+* Use this inside <Support> for custom positioning or styling.
+*
+* @example
+* <Support>
+*   <Support.Trigger>Help</Support.Trigger>
+*   <Support.Content side="bottom" align="end" className="my-content">
+*     <Support.Router />
+*   </Support.Content>
+* </Support>
+*/
+const SupportContent = ({ className, side = "top", align = "end", sideOffset = 16, avoidCollisions = true, collisionPadding = 8, children }) => /* @__PURE__ */ jsx(Content, {
+	align,
+	avoidCollisions,
+	className,
+	collisionPadding,
+	side,
+	sideOffset,
+	children: children ?? /* @__PURE__ */ jsx(Router, {})
+});
+SupportContent.displayName = "Support.Content";
+/**
+* Router with all default pages (Home, Conversation, etc.).
+* Use inside <Support.Content> for full control.
+*
+* @example
+* <Support.Content>
+*   <Support.Router />
+* </Support.Content>
+*
+* @example
+* // With custom pages
+* <Support.Router>
+*   <Support.Page name="FAQ" component={FAQPage} />
+* </Support.Router>
+*/
+const SupportRouter = ({ customPages, children }) => /* @__PURE__ */ jsx(Router, {
+	customPages,
+	children
+});
+SupportRouter.displayName = "Support.Router";
+/**
+* Declarative page registration for custom routes.
+*
+* @example
+* <Support>
+*   <Support.Page name="FAQ" component={FAQPage} />
+*   <Support.Page name="SETTINGS" component={SettingsPage} />
+* </Support>
+*/
+const SupportPage = Page;
+SupportPage.displayName = "Support.Page";
+/**
+* Root component for full composition mode.
+* Use when you need complete control over the widget structure.
+*
+* @example
+* // Uncontrolled
+* <Support.Root defaultOpen={false}>
+*   <Support.Trigger asChild>
+*     <button>Help</button>
+*   </Support.Trigger>
+*   <Support.Content side="bottom" align="end">
+*     <Support.Router />
+*   </Support.Content>
+* </Support.Root>
+*
+* @example
+* // Controlled
+* const [isOpen, setIsOpen] = useState(false);
+* <Support.Root open={isOpen} onOpenChange={setIsOpen}>
+*   ...
+* </Support.Root>
+*
+* @example
+* // With imperative ref
+* const supportRef = useRef<SupportHandle>(null);
+* <Support.Root ref={supportRef}>
+*   ...
+* </Support.Root>
+*/
+const SupportRoot = React$1.forwardRef(({ open, onOpenChange, defaultOpen, theme, className, onConversationStart, onConversationEnd, onMessageSent, onMessageReceived, onError, children }, ref) => {
+	const { website } = useSupport();
+	const isVisitorBlocked = website?.visitor?.isBlocked ?? false;
+	React$1.useEffect(() => {
+		if (open === void 0 && defaultOpen !== void 0) initializeSupportStore({ defaultOpen });
+	}, [open, defaultOpen]);
+	if (!website || isVisitorBlocked) return null;
+	return /* @__PURE__ */ jsx(ControlledStateProvider, {
+		onOpenChange,
+		open,
+		children: /* @__PURE__ */ jsx(SupportEventsProvider, {
+			onConversationEnd,
+			onConversationStart,
+			onError,
+			onMessageReceived,
+			onMessageSent,
+			children: /* @__PURE__ */ jsx(SupportHandleProvider, {
+				forwardedRef: ref,
+				children: /* @__PURE__ */ jsx(ThemeWrapper, {
+					theme,
+					children: /* @__PURE__ */ jsx(SupportRealtimeProvider, { children: /* @__PURE__ */ jsx(Root, {
+						className,
+						children
+					}) })
+				})
+			})
+		})
+	});
+});
+SupportRoot.displayName = "Support.Root";
+const Support = Object.assign(SupportComponent, {
+	Root: SupportRoot,
+	Trigger: SupportTrigger,
+	Content: SupportContent,
+	Router: SupportRouter,
+	Page: SupportPage,
+	Header: HeaderSlot,
+	Footer: FooterSlot
+});
 var support_default = Support;
 
 //#endregion
-export { CoButton as Button, Header, Support, Text, WebSocketProvider, support_default as default, useSupportConfig, useSupportNavigation, useSupportStore, useSupportText, useWebSocket };
+export { CoButton as Button, Header, Support, Text, WebSocketProvider, support_default as default, useSupportConfig, useSupportEventEmitter, useSupportEvents, useSupportHandle, useSupportNavigation, useSupportStore, useSupportText, useWebSocket };
 //# sourceMappingURL=index.js.map

package/support/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/support/index.tsx"],"sourcesContent":["import \"./support.css\";\n\nimport type { DefaultMessage } from \"@cossistant/types\";\nimport React, { type ReactElement } from \"react\";\nimport { useSupport } from \"../provider\";\nimport { SupportRealtimeProvider } from \"../realtime\";\nimport { SupportConfig } from \"../support-config\";\nimport { SupportContent } from \"./components/support-content\";\nimport { ThemeWrapper } from \"./components/theme-wrapper\";\nimport type { CustomPage } from \"./router\";\nimport { initializeSupportStore } from \"./store/support-store\";\nimport type { SupportLocale, SupportTextContentOverrides } from \"./text\";\nimport { SupportTextProvider } from \"./text\";\nimport type {\n\tBubbleSlotProps,\n\tContainerSlotProps,\n\tRouterSlotProps,\n} from \"./types\";\n\nexport type SupportProps<Locale extends string = SupportLocale> = {\n\t// Existing props\n\tclassName?: string;\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n\tpositioning?: \"fixed\" | \"absolute\";\n\tquickOptions?: string[];\n\tdefaultMessages?: DefaultMessage[];\n\tdefaultOpen?: boolean;\n\tlocale?: Locale;\n\tcontent?: SupportTextContentOverrides<Locale>;\n\n\t// NEW: Theme control\n\ttheme?: \"light\" | \"dark\";\n\n\t// NEW: Slot customization\n\tslots?: {\n\t\tbubble?: React.ComponentType<BubbleSlotProps>;\n\t\tcontainer?: React.ComponentType<ContainerSlotProps>;\n\t\trouter?: React.ComponentType<RouterSlotProps>;\n\t};\n\n\t// NEW: Granular className overrides\n\tclassNames?: {\n\t\troot?: string;\n\t\tbubble?: string;\n\t\tcontainer?: string;\n\t};\n\n\t// NEW: Type-safe custom pages\n\tcustomPages?: CustomPage[];\n\n\tchildren?: React.ReactNode;\n};\n\n/**\n * Complete support widget with chat, routing, and real-time features.\n *\n * @example\n * // Zero config\n * <Support />\n *\n * @example\n * // With customization and custom pages\n * <Support\n *   theme=\"dark\"\n *   classNames={{ bubble: \"bg-purple-600\" }}\n *   customPages={[\n *     { name: \"FAQ\", component: FAQPage }\n *   ]}\n * />\n */\nexport function Support<Locale extends string = SupportLocale>({\n\tclassName,\n\tposition = \"bottom\",\n\talign = \"right\",\n\tpositioning = \"fixed\",\n\tquickOptions,\n\tdefaultMessages,\n\tdefaultOpen,\n\tlocale,\n\tcontent,\n\ttheme,\n\tslots,\n\tclassNames,\n\tcustomPages,\n\tchildren,\n}: SupportProps<Locale>): ReactElement | null {\n\tconst { website } = useSupport();\n\tconst isVisitorBlocked = website?.visitor?.isBlocked ?? false;\n\n\t// Initialize support store with defaultOpen when component mounts or prop changes\n\tReact.useEffect(() => {\n\t\tif (defaultOpen !== undefined) {\n\t\t\tinitializeSupportStore({ defaultOpen });\n\t\t}\n\t}, [defaultOpen]);\n\n\tif (!website || isVisitorBlocked) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ThemeWrapper theme={theme}>\n\t\t\t<SupportRealtimeProvider>\n\t\t\t\t<SupportTextProvider content={content} locale={locale}>\n\t\t\t\t\t<SupportContent\n\t\t\t\t\t\talign={align}\n\t\t\t\t\t\tclassName={className}\n\t\t\t\t\t\tclassNames={classNames}\n\t\t\t\t\t\tcustomPages={customPages}\n\t\t\t\t\t\tposition={position}\n\t\t\t\t\t\tpositioning={positioning}\n\t\t\t\t\t\tslots={slots}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</SupportContent>\n\t\t\t\t</SupportTextProvider>\n\t\t\t</SupportRealtimeProvider>\n\t\t\t<SupportConfig\n\t\t\t\tdefaultMessages={defaultMessages}\n\t\t\t\tquickOptions={quickOptions}\n\t\t\t/>\n\t\t</ThemeWrapper>\n\t);\n}\n\nexport default Support;\n\n// Type exports from core\nexport type {\n\tDefaultRoutes,\n\tNavigationState,\n\tRouteRegistry,\n\tSupportPage,\n} from \"@cossistant/core\";\nexport { CoButton as Button } from \"./components/button\";\n// UI components for building custom pages\nexport { Header } from \"./components/header\";\n// WebSocket context\nexport type { WebSocketContextValue } from \"./context/websocket\";\nexport { useWebSocket, WebSocketProvider } from \"./context/websocket\";\n// Custom page type for type-safe routing\nexport type { CustomPage } from \"./router\";\n// Navigation hooks and store\nexport {\n\tuseSupportConfig,\n\tuseSupportNavigation,\n\tuseSupportStore,\n} from \"./store\";\n// Text and localization\nexport type { SupportLocale, SupportTextContentOverrides } from \"./text\";\nexport { Text, useSupportText } from \"./text\";\n\n// Slot prop types\nexport type {\n\tBubbleSlotProps,\n\tContainerSlotProps,\n\tRouterSlotProps,\n} from \"./types\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEA,SAAgB,QAA+C,EAC9D,WACA,WAAW,UACX,QAAQ,SACR,cAAc,SACd,cACA,iBACA,aACA,QACA,SACA,OACA,OACA,YACA,aACA,YAC6C;CAC7C,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,mBAAmB,SAAS,SAAS,aAAa;AAGxD,OAAM,gBAAgB;AACrB,MAAI,gBAAgB,OACnB,wBAAuB,EAAE,aAAa,CAAC;IAEtC,CAAC,YAAY,CAAC;AAEjB,KAAI,CAAC,WAAW,iBACf,QAAO;AAGR,QACC,qBAAC;EAAoB;aACpB,oBAAC,qCACA,oBAAC;GAA6B;GAAiB;aAC9C,oBAAC;IACO;IACI;IACC;IACC;IACH;IACG;IACN;IAEN;KACe;IACI,GACG,EAC1B,oBAAC;GACiB;GACH;IACb;GACY;;AAIjB,sBAAe"}
+{"version":3,"file":"index.js","names":["result: ParsedChildren","React","Primitive.Trigger","SupportContent: React.FC<SupportContentProps>","SupportRouter: React.FC<SupportRouterProps>"],"sources":["../../src/support/index.tsx"],"sourcesContent":["import \"./support.css\";\n\nimport type { DefaultMessage } from \"@cossistant/types\";\nimport * as React from \"react\";\nimport * as Primitive from \"../primitives\";\nimport { useSupport } from \"../provider\";\nimport { SupportRealtimeProvider } from \"../realtime\";\nimport { SupportConfig } from \"../support-config\";\nimport { Content } from \"./components/content\";\nimport { Root } from \"./components/root\";\nimport { ThemeWrapper } from \"./components/theme-wrapper\";\nimport { DefaultTrigger } from \"./components/trigger\";\nimport { ControlledStateProvider } from \"./context/controlled-state\";\nimport {\n\ttype ConversationEndEvent,\n\ttype ConversationStartEvent,\n\ttype ErrorEvent,\n\ttype MessageReceivedEvent,\n\ttype MessageSentEvent,\n\tSupportEventsProvider,\n} from \"./context/events\";\nimport { type SupportHandle, SupportHandleProvider } from \"./context/handle\";\nimport { FooterSlot, HeaderSlot } from \"./context/slots\";\nimport { type CustomPage, Page, Router } from \"./router\";\nimport { initializeSupportStore } from \"./store/support-store\";\nimport type { SupportLocale, SupportTextContentOverrides } from \"./text\";\nimport { SupportTextProvider } from \"./text\";\nimport type {\n\tAlign,\n\tCollisionPadding,\n\tSide,\n\tTriggerRenderProps,\n} from \"./types\";\n\n// =============================================================================\n// Support Props\n// =============================================================================\n\nexport type SupportProps<Locale extends string = SupportLocale> = {\n\t/**\n\t * Additional CSS classes for the root wrapper.\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Which side of the trigger to place the content.\n\t * @default \"top\"\n\t */\n\tside?: Side;\n\n\t/**\n\t * Alignment along the side axis.\n\t * @default \"end\"\n\t */\n\talign?: Align;\n\n\t/**\n\t * Distance (in pixels) between the trigger and the content.\n\t * @default 16\n\t */\n\tsideOffset?: number;\n\n\t/**\n\t * Enable automatic collision avoidance.\n\t * When true, the content repositions to stay within the viewport.\n\t * @default true\n\t */\n\tavoidCollisions?: boolean;\n\n\t/**\n\t * Padding from viewport edges when avoiding collisions.\n\t * @default 8\n\t */\n\tcollisionPadding?: CollisionPadding;\n\n\t/**\n\t * Granular className overrides for specific parts.\n\t */\n\tclassNames?: {\n\t\ttrigger?: string;\n\t\tcontent?: string;\n\t};\n\n\t/**\n\t * Force a specific theme. Omit for automatic detection.\n\t */\n\ttheme?: \"light\" | \"dark\";\n\n\t/**\n\t * Controlled open state.\n\t * When provided, the widget operates in controlled mode.\n\t * Use with `onOpenChange` to manage state externally.\n\t */\n\topen?: boolean;\n\n\t/**\n\t * Callback fired when the open state should change.\n\t * Use with `open` prop for controlled mode.\n\t *\n\t * @example\n\t * const [isOpen, setIsOpen] = useState(false);\n\t * <Support open={isOpen} onOpenChange={setIsOpen} />\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\n\t/**\n\t * Whether the widget should open automatically on mount (uncontrolled mode).\n\t * Ignored when `open` prop is provided (controlled mode).\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\n\t/**\n\t * Quick reply options displayed to users.\n\t */\n\tquickOptions?: string[];\n\n\t/**\n\t * Custom welcome messages shown before a conversation starts.\n\t */\n\tdefaultMessages?: DefaultMessage[];\n\n\t/**\n\t * Locale string for widget translations.\n\t */\n\tlocale?: Locale;\n\n\t/**\n\t * Custom text content overrides for internationalization.\n\t */\n\tcontent?: SupportTextContentOverrides<Locale>;\n\n\t/**\n\t * Custom pages to add to the router.\n\t */\n\tcustomPages?: CustomPage[];\n\n\t// =========================================================================\n\t// Event Callbacks\n\t// =========================================================================\n\n\t/**\n\t * Called when a new conversation is started.\n\t */\n\tonConversationStart?: (event: ConversationStartEvent) => void;\n\n\t/**\n\t * Called when a conversation ends (resolved, closed, etc.).\n\t */\n\tonConversationEnd?: (event: ConversationEndEvent) => void;\n\n\t/**\n\t * Called when the visitor sends a message.\n\t */\n\tonMessageSent?: (event: MessageSentEvent) => void;\n\n\t/**\n\t * Called when a message is received from an agent (human or AI).\n\t */\n\tonMessageReceived?: (event: MessageReceivedEvent) => void;\n\n\t/**\n\t * Called when an error occurs within the widget.\n\t */\n\tonError?: (event: ErrorEvent) => void;\n\n\t/**\n\t * Children for composition. Can include:\n\t * - <Support.Trigger> for custom trigger\n\t * - <Support.Content> for custom content positioning\n\t * - <Support.Page> components for custom routes\n\t */\n\tchildren?: React.ReactNode;\n};\n\n// =============================================================================\n// Child Component Detection\n// =============================================================================\n\ntype ParsedChildren = {\n\ttrigger: React.ReactNode | null;\n\tcontent: React.ReactNode | null;\n\tpages: React.ReactNode[];\n\tother: React.ReactNode[];\n};\n\nfunction parseChildren(children: React.ReactNode): ParsedChildren {\n\tconst result: ParsedChildren = {\n\t\ttrigger: null,\n\t\tcontent: null,\n\t\tpages: [],\n\t\tother: [],\n\t};\n\n\tReact.Children.forEach(children, (child) => {\n\t\tif (!React.isValidElement(child)) {\n\t\t\tresult.other.push(child);\n\t\t\treturn;\n\t\t}\n\n\t\t// Check component type by displayName or the component reference\n\t\tconst displayName = (child.type as React.ComponentType)?.displayName ?? \"\";\n\n\t\tif (displayName === \"Support.Trigger\" || child.type === SupportTrigger) {\n\t\t\tresult.trigger = child;\n\t\t} else if (\n\t\t\tdisplayName === \"Support.Content\" ||\n\t\t\tchild.type === SupportContent\n\t\t) {\n\t\t\tresult.content = child;\n\t\t} else if (displayName === \"Support.Page\" || child.type === Page) {\n\t\t\tresult.pages.push(child);\n\t\t} else {\n\t\t\tresult.other.push(child);\n\t\t}\n\t});\n\n\treturn result;\n}\n\n// =============================================================================\n// Main Support Component\n// =============================================================================\n\n/**\n * Complete support widget with chat, routing, and real-time features.\n *\n * @example\n * // Zero config - works instantly\n * <Support />\n *\n * @example\n * // With styling\n * <Support\n *   theme=\"dark\"\n *   classNames={{\n *     trigger: \"bg-purple-600\",\n *     content: \"border-purple-200\",\n *   }}\n * />\n *\n * @example\n * // With custom positioning\n * <Support side=\"bottom\" align=\"end\" sideOffset={8} />\n *\n * @example\n * // Controlled mode - external state management\n * const [isOpen, setIsOpen] = useState(false);\n * <Support open={isOpen} onOpenChange={setIsOpen} />\n *\n * @example\n * // With imperative ref\n * const supportRef = useRef<SupportHandle>(null);\n * supportRef.current?.open();\n * supportRef.current?.startConversation(\"Hello!\");\n * <Support ref={supportRef} />\n *\n * @example\n * // With custom trigger\n * <Support side=\"bottom\" align=\"end\">\n *   <Support.Trigger className=\"px-4 py-2\">\n *     {({ isOpen, unreadCount }) => (\n *       <span>{isOpen ? \"Close\" : `Help (${unreadCount})`}</span>\n *     )}\n *   </Support.Trigger>\n * </Support>\n *\n * @example\n * // With custom pages\n * <Support>\n *   <Support.Page name=\"FAQ\" component={FAQPage} />\n * </Support>\n */\nfunction SupportComponentInner<Locale extends string = SupportLocale>(\n\t{\n\t\tclassName,\n\t\tside = \"top\",\n\t\talign = \"end\",\n\t\tsideOffset = 16,\n\t\tavoidCollisions = true,\n\t\tcollisionPadding = 8,\n\t\tclassNames = {},\n\t\ttheme,\n\t\topen,\n\t\tonOpenChange,\n\t\tdefaultOpen,\n\t\tquickOptions,\n\t\tdefaultMessages,\n\t\tlocale,\n\t\tcontent,\n\t\tcustomPages,\n\t\tonConversationStart,\n\t\tonConversationEnd,\n\t\tonMessageSent,\n\t\tonMessageReceived,\n\t\tonError,\n\t\tchildren,\n\t}: SupportProps<Locale>,\n\tref: React.Ref<SupportHandle>\n): React.ReactElement | null {\n\tconst { website } = useSupport();\n\tconst isVisitorBlocked = website?.visitor?.isBlocked ?? false;\n\n\t// Initialize store for uncontrolled mode (when open prop is not provided)\n\tReact.useEffect(() => {\n\t\tif (open === undefined && defaultOpen !== undefined) {\n\t\t\tinitializeSupportStore({ defaultOpen });\n\t\t}\n\t}, [open, defaultOpen]);\n\n\tif (!website || isVisitorBlocked) {\n\t\treturn null;\n\t}\n\n\t// Parse children to detect custom components\n\tconst parsed = parseChildren(children);\n\n\t// Determine which components to render\n\tconst triggerElement = parsed.trigger ?? (\n\t\t<DefaultTrigger className={classNames.trigger} />\n\t);\n\n\t// If custom content is provided, use it; otherwise create default\n\tconst contentElement = parsed.content ?? (\n\t\t<Content\n\t\t\talign={align}\n\t\t\tavoidCollisions={avoidCollisions}\n\t\t\tclassName={classNames.content}\n\t\t\tcollisionPadding={collisionPadding}\n\t\t\tside={side}\n\t\t\tsideOffset={sideOffset}\n\t\t>\n\t\t\t<Router customPages={customPages}>{parsed.pages}</Router>\n\t\t</Content>\n\t);\n\n\treturn (\n\t\t<ControlledStateProvider onOpenChange={onOpenChange} open={open}>\n\t\t\t<SupportEventsProvider\n\t\t\t\tonConversationEnd={onConversationEnd}\n\t\t\t\tonConversationStart={onConversationStart}\n\t\t\t\tonError={onError}\n\t\t\t\tonMessageReceived={onMessageReceived}\n\t\t\t\tonMessageSent={onMessageSent}\n\t\t\t>\n\t\t\t\t<SupportHandleProvider forwardedRef={ref}>\n\t\t\t\t\t<ThemeWrapper theme={theme}>\n\t\t\t\t\t\t<SupportRealtimeProvider>\n\t\t\t\t\t\t\t<SupportTextProvider content={content} locale={locale}>\n\t\t\t\t\t\t\t\t<Root className={className}>\n\t\t\t\t\t\t\t\t\t{triggerElement}\n\t\t\t\t\t\t\t\t\t{contentElement}\n\t\t\t\t\t\t\t\t</Root>\n\t\t\t\t\t\t\t</SupportTextProvider>\n\t\t\t\t\t\t</SupportRealtimeProvider>\n\t\t\t\t\t\t<SupportConfig\n\t\t\t\t\t\t\tdefaultMessages={defaultMessages}\n\t\t\t\t\t\t\tquickOptions={quickOptions}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</ThemeWrapper>\n\t\t\t\t</SupportHandleProvider>\n\t\t\t</SupportEventsProvider>\n\t\t</ControlledStateProvider>\n\t);\n}\n\n// Forward ref with proper generic typing\nconst SupportComponent = React.forwardRef(SupportComponentInner) as <\n\tLocale extends string = SupportLocale,\n>(\n\tprops: SupportProps<Locale> & { ref?: React.Ref<SupportHandle> }\n) => React.ReactElement | null;\n\n// =============================================================================\n// Trigger Compound Component\n// =============================================================================\n\nexport type SupportTriggerProps = Omit<\n\tReact.ButtonHTMLAttributes<HTMLButtonElement>,\n\t\"children\"\n> & {\n\t/**\n\t * Content to render inside the trigger.\n\t * Can be static content or a function receiving render props.\n\t */\n\tchildren?: React.ReactNode | ((props: TriggerRenderProps) => React.ReactNode);\n\t/**\n\t * When true, renders children directly with all props passed through.\n\t */\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Custom trigger component for the support widget.\n * Use this inside <Support> to replace the default floating button.\n *\n * @example\n * <Support.Trigger className=\"my-button\">\n *   {({ isOpen, unreadCount }) => (\n *     <span>{isOpen ? \"Close\" : `Help (${unreadCount})`}</span>\n *   )}\n * </Support.Trigger>\n */\nconst SupportTrigger = React.forwardRef<HTMLButtonElement, SupportTriggerProps>(\n\t({ children, className, asChild = false, ...props }, ref) => (\n\t\t<Primitive.Trigger\n\t\t\tasChild={asChild}\n\t\t\tclassName={className}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Primitive.Trigger>\n\t)\n);\n\nSupportTrigger.displayName = \"Support.Trigger\";\n\n// =============================================================================\n// Content Compound Component\n// =============================================================================\n\nexport type SupportContentProps = {\n\tclassName?: string;\n\t/**\n\t * Which side of the trigger to place the content.\n\t * @default \"top\"\n\t */\n\tside?: Side;\n\t/**\n\t * Alignment along the side axis.\n\t * @default \"end\"\n\t */\n\talign?: Align;\n\t/**\n\t * Distance (in pixels) between the trigger and the content.\n\t * @default 16\n\t */\n\tsideOffset?: number;\n\t/**\n\t * Enable automatic collision avoidance.\n\t * When true, the content repositions to stay within the viewport.\n\t * @default true\n\t */\n\tavoidCollisions?: boolean;\n\t/**\n\t * Padding from viewport edges when avoiding collisions.\n\t * @default 8\n\t */\n\tcollisionPadding?: CollisionPadding;\n\tchildren?: React.ReactNode;\n};\n\n/**\n * Custom content wrapper for the support widget.\n * Use this inside <Support> for custom positioning or styling.\n *\n * @example\n * <Support>\n *   <Support.Trigger>Help</Support.Trigger>\n *   <Support.Content side=\"bottom\" align=\"end\" className=\"my-content\">\n *     <Support.Router />\n *   </Support.Content>\n * </Support>\n */\nconst SupportContent: React.FC<SupportContentProps> = ({\n\tclassName,\n\tside = \"top\",\n\talign = \"end\",\n\tsideOffset = 16,\n\tavoidCollisions = true,\n\tcollisionPadding = 8,\n\tchildren,\n}) => (\n\t<Content\n\t\talign={align}\n\t\tavoidCollisions={avoidCollisions}\n\t\tclassName={className}\n\t\tcollisionPadding={collisionPadding}\n\t\tside={side}\n\t\tsideOffset={sideOffset}\n\t>\n\t\t{children ?? <Router />}\n\t</Content>\n);\n\n(SupportContent as React.FC & { displayName?: string }).displayName =\n\t\"Support.Content\";\n\n// =============================================================================\n// Router Compound Component\n// =============================================================================\n\nexport type SupportRouterProps = {\n\t/**\n\t * Custom pages to add alongside built-in pages.\n\t */\n\tcustomPages?: CustomPage[];\n\t/**\n\t * Page components to register.\n\t */\n\tchildren?: React.ReactNode;\n};\n\n/**\n * Router with all default pages (Home, Conversation, etc.).\n * Use inside <Support.Content> for full control.\n *\n * @example\n * <Support.Content>\n *   <Support.Router />\n * </Support.Content>\n *\n * @example\n * // With custom pages\n * <Support.Router>\n *   <Support.Page name=\"FAQ\" component={FAQPage} />\n * </Support.Router>\n */\nconst SupportRouter: React.FC<SupportRouterProps> = ({\n\tcustomPages,\n\tchildren,\n}) => <Router customPages={customPages}>{children}</Router>;\n\n(SupportRouter as React.FC & { displayName?: string }).displayName =\n\t\"Support.Router\";\n\n// =============================================================================\n// Page Compound Component\n// =============================================================================\n\nexport type SupportPageProps<\n\tK extends\n\t\tkeyof import(\"@cossistant/core\").RouteRegistry = keyof import(\"@cossistant/core\").RouteRegistry,\n> = {\n\tname: K;\n\tcomponent: React.ComponentType<{\n\t\tparams?: import(\"@cossistant/core\").RouteRegistry[K];\n\t}>;\n};\n\n/**\n * Declarative page registration for custom routes.\n *\n * @example\n * <Support>\n *   <Support.Page name=\"FAQ\" component={FAQPage} />\n *   <Support.Page name=\"SETTINGS\" component={SettingsPage} />\n * </Support>\n */\nconst SupportPage = Page;\n\n(SupportPage as unknown as { displayName?: string }).displayName =\n\t\"Support.Page\";\n\n// =============================================================================\n// Root Compound Component (for full composition)\n// =============================================================================\n\nexport type SupportRootProps = {\n\t/**\n\t * Controlled open state.\n\t * When provided, the widget operates in controlled mode.\n\t */\n\topen?: boolean;\n\t/**\n\t * Callback fired when the open state should change.\n\t * Use with `open` prop for controlled mode.\n\t */\n\tonOpenChange?: (open: boolean) => void;\n\t/**\n\t * Whether the widget should open automatically (uncontrolled mode).\n\t * Ignored when `open` prop is provided.\n\t * @default false\n\t */\n\tdefaultOpen?: boolean;\n\t/**\n\t * Force a specific theme.\n\t */\n\ttheme?: \"light\" | \"dark\";\n\t/**\n\t * Additional CSS classes.\n\t */\n\tclassName?: string;\n\t/**\n\t * Called when a new conversation is started.\n\t */\n\tonConversationStart?: (event: ConversationStartEvent) => void;\n\t/**\n\t * Called when a conversation ends.\n\t */\n\tonConversationEnd?: (event: ConversationEndEvent) => void;\n\t/**\n\t * Called when the visitor sends a message.\n\t */\n\tonMessageSent?: (event: MessageSentEvent) => void;\n\t/**\n\t * Called when a message is received from an agent.\n\t */\n\tonMessageReceived?: (event: MessageReceivedEvent) => void;\n\t/**\n\t * Called when an error occurs.\n\t */\n\tonError?: (event: ErrorEvent) => void;\n\tchildren: React.ReactNode;\n};\n\n/**\n * Root component for full composition mode.\n * Use when you need complete control over the widget structure.\n *\n * @example\n * // Uncontrolled\n * <Support.Root defaultOpen={false}>\n *   <Support.Trigger asChild>\n *     <button>Help</button>\n *   </Support.Trigger>\n *   <Support.Content side=\"bottom\" align=\"end\">\n *     <Support.Router />\n *   </Support.Content>\n * </Support.Root>\n *\n * @example\n * // Controlled\n * const [isOpen, setIsOpen] = useState(false);\n * <Support.Root open={isOpen} onOpenChange={setIsOpen}>\n *   ...\n * </Support.Root>\n *\n * @example\n * // With imperative ref\n * const supportRef = useRef<SupportHandle>(null);\n * <Support.Root ref={supportRef}>\n *   ...\n * </Support.Root>\n */\nconst SupportRoot = React.forwardRef<SupportHandle, SupportRootProps>(\n\t(\n\t\t{\n\t\t\topen,\n\t\t\tonOpenChange,\n\t\t\tdefaultOpen,\n\t\t\ttheme,\n\t\t\tclassName,\n\t\t\tonConversationStart,\n\t\t\tonConversationEnd,\n\t\t\tonMessageSent,\n\t\t\tonMessageReceived,\n\t\t\tonError,\n\t\t\tchildren,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst { website } = useSupport();\n\t\tconst isVisitorBlocked = website?.visitor?.isBlocked ?? false;\n\n\t\t// Initialize store for uncontrolled mode\n\t\tReact.useEffect(() => {\n\t\t\tif (open === undefined && defaultOpen !== undefined) {\n\t\t\t\tinitializeSupportStore({ defaultOpen });\n\t\t\t}\n\t\t}, [open, defaultOpen]);\n\n\t\tif (!website || isVisitorBlocked) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<ControlledStateProvider onOpenChange={onOpenChange} open={open}>\n\t\t\t\t<SupportEventsProvider\n\t\t\t\t\tonConversationEnd={onConversationEnd}\n\t\t\t\t\tonConversationStart={onConversationStart}\n\t\t\t\t\tonError={onError}\n\t\t\t\t\tonMessageReceived={onMessageReceived}\n\t\t\t\t\tonMessageSent={onMessageSent}\n\t\t\t\t>\n\t\t\t\t\t<SupportHandleProvider forwardedRef={ref}>\n\t\t\t\t\t\t<ThemeWrapper theme={theme}>\n\t\t\t\t\t\t\t<SupportRealtimeProvider>\n\t\t\t\t\t\t\t\t<Root className={className}>{children}</Root>\n\t\t\t\t\t\t\t</SupportRealtimeProvider>\n\t\t\t\t\t\t</ThemeWrapper>\n\t\t\t\t\t</SupportHandleProvider>\n\t\t\t\t</SupportEventsProvider>\n\t\t\t</ControlledStateProvider>\n\t\t);\n\t}\n);\n\nSupportRoot.displayName = \"Support.Root\";\n\n// =============================================================================\n// Compound Component Assembly\n// =============================================================================\n\nexport const Support = Object.assign(SupportComponent, {\n\tRoot: SupportRoot,\n\tTrigger: SupportTrigger,\n\tContent: SupportContent,\n\tRouter: SupportRouter,\n\tPage: SupportPage,\n\tHeader: HeaderSlot,\n\tFooter: FooterSlot,\n});\n\nexport default Support;\n\n// =============================================================================\n// Type Exports\n// =============================================================================\n\nexport type {\n\tDefaultRoutes,\n\tNavigationState,\n\tRouteRegistry,\n\tSupportPage as SupportPageType,\n} from \"@cossistant/core\";\n// Custom page type\nexport type { CustomPage } from \"./router\";\n// Types from ./types.ts\nexport type {\n\tAlign,\n\tCollisionPadding,\n\tContentProps,\n\tRootProps,\n\tSide,\n\tTriggerRenderProps,\n} from \"./types\";\n\n// =============================================================================\n// Component Exports\n// =============================================================================\n\nexport { CoButton as Button } from \"./components/button\";\nexport { Header } from \"./components/header\";\n\n// =============================================================================\n// Hook Exports\n// =============================================================================\n\nexport type { WebSocketContextValue } from \"./context/websocket\";\nexport { useWebSocket, WebSocketProvider } from \"./context/websocket\";\nexport {\n\tuseSupportConfig,\n\tuseSupportNavigation,\n\tuseSupportStore,\n} from \"./store\";\n\n// =============================================================================\n// Text & Localization\n// =============================================================================\n\nexport type { SupportLocale, SupportTextContentOverrides } from \"./text\";\nexport { Text, useSupportText } from \"./text\";\n\n// =============================================================================\n// Events\n// =============================================================================\n\nexport type {\n\tConversationEndEvent,\n\tConversationStartEvent,\n\tErrorEvent,\n\tMessageReceivedEvent,\n\tMessageSentEvent,\n\tSupportEvent,\n\tSupportEventCallbacks,\n\tSupportEventType,\n} from \"./context/events\";\nexport { useSupportEventEmitter, useSupportEvents } from \"./context/events\";\n\n// =============================================================================\n// Imperative Handle\n// =============================================================================\n\nexport type { SupportHandle } from \"./context/handle\";\nexport { useSupportHandle } from \"./context/handle\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0LA,SAAS,cAAc,UAA2C;CACjE,MAAMA,SAAyB;EAC9B,SAAS;EACT,SAAS;EACT,OAAO,EAAE;EACT,OAAO,EAAE;EACT;AAED,SAAM,SAAS,QAAQ,WAAW,UAAU;AAC3C,MAAI,CAACC,QAAM,eAAe,MAAM,EAAE;AACjC,UAAO,MAAM,KAAK,MAAM;AACxB;;EAID,MAAM,cAAe,MAAM,MAA8B,eAAe;AAExE,MAAI,gBAAgB,qBAAqB,MAAM,SAAS,eACvD,QAAO,UAAU;WAEjB,gBAAgB,qBAChB,MAAM,SAAS,eAEf,QAAO,UAAU;WACP,gBAAgB,kBAAkB,MAAM,SAAS,KAC3D,QAAO,MAAM,KAAK,MAAM;MAExB,QAAO,MAAM,KAAK,MAAM;GAExB;AAEF,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDR,SAAS,sBACR,EACC,WACA,OAAO,OACP,QAAQ,OACR,aAAa,IACb,kBAAkB,MAClB,mBAAmB,GACnB,aAAa,EAAE,EACf,OACA,MACA,cACA,aACA,cACA,iBACA,QACA,SACA,aACA,qBACA,mBACA,eACA,mBACA,SACA,YAED,KAC4B;CAC5B,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,mBAAmB,SAAS,SAAS,aAAa;AAGxD,SAAM,gBAAgB;AACrB,MAAI,SAAS,UAAa,gBAAgB,OACzC,wBAAuB,EAAE,aAAa,CAAC;IAEtC,CAAC,MAAM,YAAY,CAAC;AAEvB,KAAI,CAAC,WAAW,iBACf,QAAO;CAIR,MAAM,SAAS,cAAc,SAAS;AAqBtC,QACC,oBAAC;EAAsC;EAAoB;YAC1D,oBAAC;GACmB;GACE;GACZ;GACU;GACJ;aAEf,oBAAC;IAAsB,cAAc;cACpC,qBAAC;KAAoB;gBACpB,oBAAC,qCACA,oBAAC;MAA6B;MAAiB;gBAC9C,qBAAC;OAAgB;kBA/BD,OAAO,WAC7B,oBAAC,kBAAe,WAAW,WAAW,UAAW,EAI3B,OAAO,WAC7B,oBAAC;QACO;QACU;QACjB,WAAW,WAAW;QACJ;QACZ;QACM;kBAEZ,oBAAC;SAAoB;mBAAc,OAAO;UAAe;SAChD;QAmBG;OACc,GACG,EAC1B,oBAAC;MACiB;MACH;OACb;MACY;KACQ;IACD;GACC;;AAK5B,MAAM,mBAAmBA,QAAM,WAAW,sBAAsB;;;;;;;;;;;;AAqChE,MAAM,iBAAiBA,QAAM,YAC3B,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACpD,oBAACC;CACS;CACE;CACN;CACL,GAAI;CAEH;EACkB,CAErB;AAED,eAAe,cAAc;;;;;;;;;;;;;AAiD7B,MAAMC,kBAAiD,EACtD,WACA,OAAO,OACP,QAAQ,OACR,aAAa,IACb,kBAAkB,MAClB,mBAAmB,GACnB,eAEA,oBAAC;CACO;CACU;CACN;CACO;CACZ;CACM;WAEX,YAAY,oBAAC,WAAS;EACd;AAGX,AAAC,eAAuD,cACvD;;;;;;;;;;;;;;;;AAgCD,MAAMC,iBAA+C,EACpD,aACA,eACK,oBAAC;CAAoB;CAAc;EAAkB;AAE3D,AAAC,cAAsD,cACtD;;;;;;;;;;AAyBD,MAAM,cAAc;AAEpB,AAAC,YAAoD,cACpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFD,MAAM,cAAcH,QAAM,YAExB,EACC,MACA,cACA,aACA,OACA,WACA,qBACA,mBACA,eACA,mBACA,SACA,YAED,QACI;CACJ,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,mBAAmB,SAAS,SAAS,aAAa;AAGxD,SAAM,gBAAgB;AACrB,MAAI,SAAS,UAAa,gBAAgB,OACzC,wBAAuB,EAAE,aAAa,CAAC;IAEtC,CAAC,MAAM,YAAY,CAAC;AAEvB,KAAI,CAAC,WAAW,iBACf,QAAO;AAGR,QACC,oBAAC;EAAsC;EAAoB;YAC1D,oBAAC;GACmB;GACE;GACZ;GACU;GACJ;aAEf,oBAAC;IAAsB,cAAc;cACpC,oBAAC;KAAoB;eACpB,oBAAC,qCACA,oBAAC;MAAgB;MAAY;OAAgB,GACpB;MACZ;KACQ;IACD;GACC;EAG5B;AAED,YAAY,cAAc;AAM1B,MAAa,UAAU,OAAO,OAAO,kBAAkB;CACtD,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,CAAC;AAEF,sBAAe"}

package/support/pages/articles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"articles.d.ts","names":[],"sources":["../../../src/support/pages/articles.tsx"],"sourcesContent":[],"mappings":";;;KAKK,iBAAA;;AAL0B,CAAA;AASlB,cAAA,YAAuB,EAAT,KAAA,CAAM,EAAG,CAAA,iBAAD,CAAA"}
+{"version":3,"file":"articles.d.ts","names":[],"sources":["../../../src/support/pages/articles.tsx"],"sourcesContent":[],"mappings":";;;KAIK,iBAAA;;AAJ0B,CAAA;AAQlB,cAAA,YAAuB,EAAT,KAAA,CAAM,EAAG,CAAA,iBAAD,CAAA"}

package/support/pages/articles.js

@@ -1,11 +1,10 @@
-import { Container } from "../components/container.js";
 import { Header } from "../components/header.js";
 import { NavigationTab } from "../components/navigation-tab.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/pages/articles.tsx
-const ArticlesPage = (_props = {}) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(NavigationTab, {}) }), /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx("div", {
-	className: "p-2",
+const ArticlesPage = (_props = {}) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header, { children: /* @__PURE__ */ jsx(NavigationTab, {}) }), /* @__PURE__ */ jsx("div", {
+	className: "flex flex-1 flex-col p-2",
 	children: /* @__PURE__ */ jsxs("div", {
 		className: "flex flex-col gap-5",
 		children: [
@@ -32,7 +31,7 @@ const ArticlesPage = (_props = {}) => /* @__PURE__ */ jsxs(Fragment, { children:
 			})] })
 		]
 	})
-}) })] });
+})] });
 
 //#endregion
 export { ArticlesPage };

package/support/pages/articles.js.map

@@ -1 +1 @@
-{"version":3,"file":"articles.js","names":["ArticlesPage: React.FC<ArticlesPageProps>"],"sources":["../../../src/support/pages/articles.tsx"],"sourcesContent":["import type React from \"react\";\nimport { Container } from \"../components/container\";\nimport { Header } from \"../components/header\";\nimport { NavigationTab } from \"../components/navigation-tab\";\n\ntype ArticlesPageProps = {\n\tparams?: undefined;\n};\n\nexport const ArticlesPage: React.FC<ArticlesPageProps> = (_props = {}) => (\n\t<>\n\t\t<Header>\n\t\t\t<NavigationTab />\n\t\t</Header>\n\t\t<Container>\n\t\t\t<div className=\"p-2\">\n\t\t\t\t<div className=\"flex flex-col gap-5\">\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\t\tHow do I start a conversation?\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\t\tClick the \"Start New Conversation\" button on the home page to\n\t\t\t\t\t\t\tbegin chatting with our support team.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\t\tCan I view previous conversations?\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\t\tYes! Navigate to the Conversation History page to see all your\n\t\t\t\t\t\t\tpast conversations.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\t\tHow quickly will I get a response?\n\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\t\tOur team typically responds within a few minutes during business\n\t\t\t\t\t\t\thours.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</Container>\n\t</>\n);\n"],"mappings":";;;;;;AASA,MAAaA,gBAA6C,SAAS,EAAE,KACpE,4CACC,oBAAC,oBACA,oBAAC,kBAAgB,GACT,EACT,oBAAC,uBACA,oBAAC;CAAI,WAAU;WACd,qBAAC;EAAI,WAAU;;GACd,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;GACN,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;GACN,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;;GACD;EACD,GACK,IACV"}
+{"version":3,"file":"articles.js","names":["ArticlesPage: React.FC<ArticlesPageProps>"],"sources":["../../../src/support/pages/articles.tsx"],"sourcesContent":["import type React from \"react\";\nimport { Header } from \"../components/header\";\nimport { NavigationTab } from \"../components/navigation-tab\";\n\ntype ArticlesPageProps = {\n\tparams?: undefined;\n};\n\nexport const ArticlesPage: React.FC<ArticlesPageProps> = (_props = {}) => (\n\t<>\n\t\t<Header>\n\t\t\t<NavigationTab />\n\t\t</Header>\n\t\t<div className=\"flex flex-1 flex-col p-2\">\n\t\t\t<div className=\"flex flex-col gap-5\">\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\tHow do I start a conversation?\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\tClick the \"Start New Conversation\" button on the home page to begin\n\t\t\t\t\t\tchatting with our support team.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\tCan I view previous conversations?\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\tYes! Navigate to the Conversation History page to see all your past\n\t\t\t\t\t\tconversations.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<h3 className=\"mb-2 font-medium text-base text-co-primary\">\n\t\t\t\t\t\tHow quickly will I get a response?\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p className=\"text-co-primary/60 text-sm leading-relaxed\">\n\t\t\t\t\t\tOur team typically responds within a few minutes during business\n\t\t\t\t\t\thours.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</>\n);\n"],"mappings":";;;;;AAQA,MAAaA,gBAA6C,SAAS,EAAE,KACpE,4CACC,oBAAC,oBACA,oBAAC,kBAAgB,GACT,EACT,oBAAC;CAAI,WAAU;WACd,qBAAC;EAAI,WAAU;;GACd,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;GACN,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;GACN,qBAAC,oBACA,oBAAC;IAAG,WAAU;cAA6C;KAEtD,EACL,oBAAC;IAAE,WAAU;cAA6C;KAGtD,IACC;;GACD;EACD,IACJ"}

package/support/pages/conversation-history.js

@@ -1,10 +1,10 @@
 import { AvatarStack } from "../components/avatar-stack.js";
 import { useSupportNavigation } from "../store/support-store.js";
-import { CoButton } from "../components/button.js";
 import icons_default from "../components/icons.js";
+import { PENDING_CONVERSATION_ID } from "../../utils/id.js";
+import { CoButton } from "../components/button.js";
 import { Header } from "../components/header.js";
 import { Text, useSupportText } from "../text/index.js";
-import { PENDING_CONVERSATION_ID } from "../../utils/id.js";
 import { Watermark } from "../components/watermark.js";
 import { useConversationHistoryPage } from "../../hooks/use-conversation-history-page.js";
 import { ConversationButtonLink } from "../components/conversation-button-link.js";

package/support/pages/conversation.js

@@ -1,10 +1,10 @@
+import { useStoreSelector } from "../../hooks/private/store/use-store-selector.js";
 import { AvatarStack } from "../components/avatar-stack.js";
 import { useSupportConfig, useSupportNavigation } from "../store/support-store.js";
+import { useNewMessageSound } from "../../hooks/use-new-message-sound.js";
 import { Header } from "../components/header.js";
 import { Text, useSupportText } from "../text/index.js";
-import { useConversation } from "../../hooks/use-conversation.js";
 import { useConversationPage } from "../../hooks/use-conversation-page.js";
-import { useNewMessageSound } from "../../hooks/use-new-message-sound.js";
 import { ConversationTimelineList } from "../components/conversation-timeline.js";
 import { MultimodalInput } from "../components/multimodal-input.js";
 import { IdentificationTimelineTool } from "../components/timeline-identification-tool.js";
@@ -18,7 +18,7 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 	const initialConversationId = params?.conversationId ?? legacyConversationId ?? "";
 	const initialMessage = params?.initialMessage ?? legacyInitialMessage;
 	const passedItems = params?.items ?? legacyItems ?? [];
-	const { website, availableAIAgents, availableHumanAgents, visitor } = useSupport();
+	const { website, availableAIAgents, availableHumanAgents, visitor, client } = useSupport();
 	const { navigate, replace, goBack, canGoBack } = useSupportNavigation();
 	const { isOpen } = useSupportConfig();
 	const text = useSupportText();
@@ -40,7 +40,7 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 			});
 		}
 	});
-	const { conversation: activeConversation } = useConversation(conversation.isPending ? null : conversation.conversationId, { enabled: !conversation.isPending });
+	const activeConversation = useStoreSelector(client.conversationsStore, (state) => conversation.isPending ? null : state.byId[conversation.conversationId]);
 	const isConversationClosed = Boolean(activeConversation && (activeConversation.status === ConversationStatus.RESOLVED || activeConversation.status === ConversationStatus.SPAM || activeConversation.deletedAt));
 	const handleGoBack = () => {
 		if (canGoBack) goBack();
@@ -102,10 +102,11 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 			}) : /* @__PURE__ */ jsx("div", {
 				className: "flex-shrink-0 p-1",
 				children: /* @__PURE__ */ jsx(MultimodalInput, {
-					disabled: conversation.composer.isSubmitting,
+					disabled: conversation.composer.isSubmitting || conversation.composer.isUploading,
 					error: conversation.error,
 					files: conversation.composer.files,
 					isSubmitting: conversation.composer.isSubmitting,
+					isUploading: conversation.composer.isUploading,
 					onChange: conversation.composer.setMessage,
 					onFileSelect: conversation.composer.addFiles,
 					onRemoveFile: conversation.composer.removeFile,

package/support/pages/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":["ConversationPage: ConversationPageComponent"],"sources":["../../../src/support/pages/conversation.tsx"],"sourcesContent":["import { ConversationStatus } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { type ReactElement, useEffect, useMemo, useRef } from \"react\";\nimport { useConversation } from \"../../hooks/use-conversation\";\nimport { useConversationPage } from \"../../hooks/use-conversation-page\";\nimport { useNewMessageSound } from \"../../hooks/use-new-message-sound\";\nimport { useSupport } from \"../../provider\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { ConversationTimelineList } from \"../components/conversation-timeline\";\nimport { Header } from \"../components/header\";\nimport { MultimodalInput } from \"../components/multimodal-input\";\nimport { IdentificationTimelineTool } from \"../components/timeline-identification-tool\";\nimport { useSupportConfig, useSupportNavigation } from \"../store\";\nimport { Text, useSupportText } from \"../text\";\n\ntype ConversationPageProps = {\n\t/**\n\t * Page params object (for compatibility with Page component)\n\t */\n\tparams?: {\n\t\t/**\n\t\t * The conversation ID to display (can be PENDING_CONVERSATION_ID or a real ID).\n\t\t */\n\t\tconversationId: string;\n\n\t\t/**\n\t\t * Optional initial message to send when opening the conversation.\n\t\t */\n\t\tinitialMessage?: string;\n\n\t\t/**\n\t\t * Optional timeline items to display (for optimistic updates or initial state).\n\t\t */\n\t\titems?: TimelineItem[];\n\t};\n\n\t// Legacy direct props support (deprecated but maintained for backward compatibility)\n\tconversationId?: string;\n\tinitialMessage?: string;\n\titems?: TimelineItem[];\n};\n\n/**\n * Conversation page with message timeline and input composer.\n */\ntype ConversationPageComponent = (props: ConversationPageProps) => ReactElement;\n\nexport const ConversationPage: ConversationPageComponent = ({\n\tparams,\n\tconversationId: legacyConversationId,\n\tinitialMessage: legacyInitialMessage,\n\titems: legacyItems,\n}: ConversationPageProps) => {\n\t// Support both params object (new) and direct props (legacy)\n\tconst initialConversationId =\n\t\tparams?.conversationId ?? legacyConversationId ?? \"\";\n\tconst initialMessage = params?.initialMessage ?? legacyInitialMessage;\n\tconst passedItems = params?.items ?? legacyItems ?? [];\n\tconst { website, availableAIAgents, availableHumanAgents, visitor } =\n\t\tuseSupport();\n\tconst { navigate, replace, goBack, canGoBack } = useSupportNavigation();\n\tconst { isOpen } = useSupportConfig();\n\tconst text = useSupportText();\n\tconst playNewMessageSound = useNewMessageSound({\n\t\tvolume: 0.7,\n\t\tplaybackRate: 1.0,\n\t});\n\tconst previousItemsRef = useRef<TimelineItem[]>([]);\n\n\tconst timelineTools = useMemo(\n\t\t() => ({\n\t\t\tidentification: { component: IdentificationTimelineTool },\n\t\t}),\n\t\t[]\n\t);\n\n\t// Main conversation hook - handles all logic\n\tconst conversation = useConversationPage({\n\t\tconversationId: initialConversationId,\n\t\titems: passedItems,\n\t\tinitialMessage,\n\t\tautoSeenEnabled: isOpen,\n\t\tonConversationIdChange: (newConversationId) => {\n\t\t\t// Update navigation when conversation is created\n\t\t\treplace({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: { conversationId: newConversationId },\n\t\t\t});\n\t\t},\n\t});\n\n\tconst { conversation: activeConversation } = useConversation(\n\t\tconversation.isPending ? null : conversation.conversationId,\n\t\t{ enabled: !conversation.isPending }\n\t);\n\n\tconst isConversationClosed = Boolean(\n\t\tactiveConversation &&\n\t\t\t(activeConversation.status === ConversationStatus.RESOLVED ||\n\t\t\t\tactiveConversation.status === ConversationStatus.SPAM ||\n\t\t\t\tactiveConversation.deletedAt)\n\t);\n\n\tconst handleGoBack = () => {\n\t\tif (canGoBack) {\n\t\t\tgoBack();\n\t\t} else {\n\t\t\tnavigate({ page: \"HOME\" });\n\t\t}\n\t};\n\n\t// Play sound when new messages arrive from agents (not visitor)\n\tuseEffect(() => {\n\t\tconst currentItems = conversation.items;\n\t\tconst previousItems = previousItemsRef.current;\n\n\t\t// Check if there are new items\n\t\tif (currentItems.length > previousItems.length) {\n\t\t\t// Find the new items\n\t\t\tconst newItems = currentItems.slice(previousItems.length);\n\n\t\t\t// Play sound only if new message is from agent (not visitor)\n\t\t\tfor (const item of newItems) {\n\t\t\t\tif (item.type === \"message\" && !item.visitorId) {\n\t\t\t\t\tplayNewMessageSound();\n\t\t\t\t\tbreak; // Only play once per batch\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Update the ref\n\t\tpreviousItemsRef.current = currentItems;\n\t}, [conversation.items, playNewMessageSound]);\n\n\treturn (\n\t\t<div className=\"flex h-full flex-col gap-0 overflow-hidden\">\n\t\t\t<Header onGoBack={handleGoBack}>\n\t\t\t\t<div className=\"flex w-full items-center justify-between gap-2 py-3\">\n\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t<p className=\"font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t{website?.name}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tclassName=\"text-co-muted-foreground text-sm\"\n\t\t\t\t\t\t\ttextKey=\"common.labels.supportOnline\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\taiAgents={availableAIAgents}\n\t\t\t\t\t\tgapWidth={2}\n\t\t\t\t\t\thumanAgents={availableHumanAgents}\n\t\t\t\t\t\tsize={32}\n\t\t\t\t\t\tspacing={28}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</Header>\n\n\t\t\t<ConversationTimelineList\n\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\tclassName=\"min-h-0 flex-1 px-4\"\n\t\t\t\tconversationId={conversation.conversationId}\n\t\t\t\tcurrentVisitorId={visitor?.id}\n\t\t\t\titems={conversation.items}\n\t\t\t\ttools={timelineTools}\n\t\t\t/>\n\n\t\t\t{isConversationClosed ? (\n\t\t\t\t<div className=\"m-4 flex items-center justify-center text-balance px-4 pb-6 text-center font-medium text-co-muted-foreground text-sm\">\n\t\t\t\t\t<Text as=\"p\" textKey=\"component.conversationPage.closedMessage\" />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<div className=\"flex-shrink-0 p-1\">\n\t\t\t\t\t<MultimodalInput\n\t\t\t\t\t\tdisabled={conversation.composer.isSubmitting}\n\t\t\t\t\t\terror={conversation.error}\n\t\t\t\t\t\tfiles={conversation.composer.files}\n\t\t\t\t\t\tisSubmitting={conversation.composer.isSubmitting}\n\t\t\t\t\t\tonChange={conversation.composer.setMessage}\n\t\t\t\t\t\tonFileSelect={conversation.composer.addFiles}\n\t\t\t\t\t\tonRemoveFile={conversation.composer.removeFile}\n\t\t\t\t\t\tonSubmit={conversation.composer.submit}\n\t\t\t\t\t\tplaceholder={text(\"component.multimodalInput.placeholder\")}\n\t\t\t\t\t\tvalue={conversation.composer.message}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,MAAaA,oBAA+C,EAC3D,QACA,gBAAgB,sBAChB,gBAAgB,sBAChB,OAAO,kBACqB;CAE5B,MAAM,wBACL,QAAQ,kBAAkB,wBAAwB;CACnD,MAAM,iBAAiB,QAAQ,kBAAkB;CACjD,MAAM,cAAc,QAAQ,SAAS,eAAe,EAAE;CACtD,MAAM,EAAE,SAAS,mBAAmB,sBAAsB,YACzD,YAAY;CACb,MAAM,EAAE,UAAU,SAAS,QAAQ,cAAc,sBAAsB;CACvE,MAAM,EAAE,WAAW,kBAAkB;CACrC,MAAM,OAAO,gBAAgB;CAC7B,MAAM,sBAAsB,mBAAmB;EAC9C,QAAQ;EACR,cAAc;EACd,CAAC;CACF,MAAM,mBAAmB,OAAuB,EAAE,CAAC;CAEnD,MAAM,gBAAgB,eACd,EACN,gBAAgB,EAAE,WAAW,4BAA4B,EACzD,GACD,EAAE,CACF;CAGD,MAAM,eAAe,oBAAoB;EACxC,gBAAgB;EAChB,OAAO;EACP;EACA,iBAAiB;EACjB,yBAAyB,sBAAsB;AAE9C,WAAQ;IACP,MAAM;IACN,QAAQ,EAAE,gBAAgB,mBAAmB;IAC7C,CAAC;;EAEH,CAAC;CAEF,MAAM,EAAE,cAAc,uBAAuB,gBAC5C,aAAa,YAAY,OAAO,aAAa,gBAC7C,EAAE,SAAS,CAAC,aAAa,WAAW,CACpC;CAED,MAAM,uBAAuB,QAC5B,uBACE,mBAAmB,WAAW,mBAAmB,YACjD,mBAAmB,WAAW,mBAAmB,QACjD,mBAAmB,WACrB;CAED,MAAM,qBAAqB;AAC1B,MAAI,UACH,SAAQ;MAER,UAAS,EAAE,MAAM,QAAQ,CAAC;;AAK5B,iBAAgB;EACf,MAAM,eAAe,aAAa;EAClC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAI,aAAa,SAAS,cAAc,QAAQ;GAE/C,MAAM,WAAW,aAAa,MAAM,cAAc,OAAO;AAGzD,QAAK,MAAM,QAAQ,SAClB,KAAI,KAAK,SAAS,aAAa,CAAC,KAAK,WAAW;AAC/C,yBAAqB;AACrB;;;AAMH,mBAAiB,UAAU;IACzB,CAAC,aAAa,OAAO,oBAAoB,CAAC;AAE7C,QACC,qBAAC;EAAI,WAAU;;GACd,oBAAC;IAAO,UAAU;cACjB,qBAAC;KAAI,WAAU;gBACd,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAE,WAAU;iBACX,SAAS;QACP,EACJ,oBAAC;OACA,IAAG;OACH,WAAU;OACV,SAAQ;QACP;OACG,EACN,oBAAC;MACA,UAAU;MACV,UAAU;MACV,aAAa;MACb,MAAM;MACN,SAAS;OACR;MACG;KACE;GAET,oBAAC;IACmB;IACG;IACtB,WAAU;IACV,gBAAgB,aAAa;IAC7B,kBAAkB,SAAS;IAC3B,OAAO,aAAa;IACpB,OAAO;KACN;GAED,uBACA,oBAAC;IAAI,WAAU;cACd,oBAAC;KAAK,IAAG;KAAI,SAAQ;MAA6C;KAC7D,GAEN,oBAAC;IAAI,WAAU;cACd,oBAAC;KACA,UAAU,aAAa,SAAS;KAChC,OAAO,aAAa;KACpB,OAAO,aAAa,SAAS;KAC7B,cAAc,aAAa,SAAS;KACpC,UAAU,aAAa,SAAS;KAChC,cAAc,aAAa,SAAS;KACpC,cAAc,aAAa,SAAS;KACpC,UAAU,aAAa,SAAS;KAChC,aAAa,KAAK,wCAAwC;KAC1D,OAAO,aAAa,SAAS;MAC5B;KACG;;GAEF"}
+{"version":3,"file":"conversation.js","names":["ConversationPage: ConversationPageComponent"],"sources":["../../../src/support/pages/conversation.tsx"],"sourcesContent":["import { ConversationStatus } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { type ReactElement, useEffect, useMemo, useRef } from \"react\";\nimport { useStoreSelector } from \"../../hooks/private/store/use-store-selector\";\nimport { useConversationPage } from \"../../hooks/use-conversation-page\";\nimport { useNewMessageSound } from \"../../hooks/use-new-message-sound\";\nimport { useSupport } from \"../../provider\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { ConversationTimelineList } from \"../components/conversation-timeline\";\nimport { Header } from \"../components/header\";\nimport { MultimodalInput } from \"../components/multimodal-input\";\nimport { IdentificationTimelineTool } from \"../components/timeline-identification-tool\";\nimport { useSupportConfig, useSupportNavigation } from \"../store\";\nimport { Text, useSupportText } from \"../text\";\n\ntype ConversationPageProps = {\n\t/**\n\t * Page params object (for compatibility with Page component)\n\t */\n\tparams?: {\n\t\t/**\n\t\t * The conversation ID to display (can be PENDING_CONVERSATION_ID or a real ID).\n\t\t */\n\t\tconversationId: string;\n\n\t\t/**\n\t\t * Optional initial message to send when opening the conversation.\n\t\t */\n\t\tinitialMessage?: string;\n\n\t\t/**\n\t\t * Optional timeline items to display (for optimistic updates or initial state).\n\t\t */\n\t\titems?: TimelineItem[];\n\t};\n\n\t// Legacy direct props support (deprecated but maintained for backward compatibility)\n\tconversationId?: string;\n\tinitialMessage?: string;\n\titems?: TimelineItem[];\n};\n\n/**\n * Conversation page with message timeline and input composer.\n */\ntype ConversationPageComponent = (props: ConversationPageProps) => ReactElement;\n\nexport const ConversationPage: ConversationPageComponent = ({\n\tparams,\n\tconversationId: legacyConversationId,\n\tinitialMessage: legacyInitialMessage,\n\titems: legacyItems,\n}: ConversationPageProps) => {\n\t// Support both params object (new) and direct props (legacy)\n\tconst initialConversationId =\n\t\tparams?.conversationId ?? legacyConversationId ?? \"\";\n\tconst initialMessage = params?.initialMessage ?? legacyInitialMessage;\n\tconst passedItems = params?.items ?? legacyItems ?? [];\n\tconst { website, availableAIAgents, availableHumanAgents, visitor, client } =\n\t\tuseSupport();\n\tconst { navigate, replace, goBack, canGoBack } = useSupportNavigation();\n\tconst { isOpen } = useSupportConfig();\n\tconst text = useSupportText();\n\tconst playNewMessageSound = useNewMessageSound({\n\t\tvolume: 0.7,\n\t\tplaybackRate: 1.0,\n\t});\n\tconst previousItemsRef = useRef<TimelineItem[]>([]);\n\n\tconst timelineTools = useMemo(\n\t\t() => ({\n\t\t\tidentification: { component: IdentificationTimelineTool },\n\t\t}),\n\t\t[]\n\t);\n\n\t// Main conversation hook - handles all logic\n\tconst conversation = useConversationPage({\n\t\tconversationId: initialConversationId,\n\t\titems: passedItems,\n\t\tinitialMessage,\n\t\tautoSeenEnabled: isOpen,\n\t\tonConversationIdChange: (newConversationId) => {\n\t\t\t// Update navigation when conversation is created\n\t\t\treplace({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: { conversationId: newConversationId },\n\t\t\t});\n\t\t},\n\t});\n\n\t// Get conversation from store (no API call) to check status\n\tconst activeConversation = useStoreSelector(\n\t\tclient.conversationsStore,\n\t\t(state) =>\n\t\t\tconversation.isPending ? null : state.byId[conversation.conversationId]\n\t);\n\n\tconst isConversationClosed = Boolean(\n\t\tactiveConversation &&\n\t\t\t(activeConversation.status === ConversationStatus.RESOLVED ||\n\t\t\t\tactiveConversation.status === ConversationStatus.SPAM ||\n\t\t\t\tactiveConversation.deletedAt)\n\t);\n\n\tconst handleGoBack = () => {\n\t\tif (canGoBack) {\n\t\t\tgoBack();\n\t\t} else {\n\t\t\tnavigate({ page: \"HOME\" });\n\t\t}\n\t};\n\n\t// Play sound when new messages arrive from agents (not visitor)\n\tuseEffect(() => {\n\t\tconst currentItems = conversation.items;\n\t\tconst previousItems = previousItemsRef.current;\n\n\t\t// Check if there are new items\n\t\tif (currentItems.length > previousItems.length) {\n\t\t\t// Find the new items\n\t\t\tconst newItems = currentItems.slice(previousItems.length);\n\n\t\t\t// Play sound only if new message is from agent (not visitor)\n\t\t\tfor (const item of newItems) {\n\t\t\t\tif (item.type === \"message\" && !item.visitorId) {\n\t\t\t\t\tplayNewMessageSound();\n\t\t\t\t\tbreak; // Only play once per batch\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Update the ref\n\t\tpreviousItemsRef.current = currentItems;\n\t}, [conversation.items, playNewMessageSound]);\n\n\treturn (\n\t\t<div className=\"flex h-full flex-col gap-0 overflow-hidden\">\n\t\t\t<Header onGoBack={handleGoBack}>\n\t\t\t\t<div className=\"flex w-full items-center justify-between gap-2 py-3\">\n\t\t\t\t\t<div className=\"flex flex-col\">\n\t\t\t\t\t\t<p className=\"font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t{website?.name}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"p\"\n\t\t\t\t\t\t\tclassName=\"text-co-muted-foreground text-sm\"\n\t\t\t\t\t\t\ttextKey=\"common.labels.supportOnline\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\taiAgents={availableAIAgents}\n\t\t\t\t\t\tgapWidth={2}\n\t\t\t\t\t\thumanAgents={availableHumanAgents}\n\t\t\t\t\t\tsize={32}\n\t\t\t\t\t\tspacing={28}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t</Header>\n\n\t\t\t<ConversationTimelineList\n\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\tclassName=\"min-h-0 flex-1 px-4\"\n\t\t\t\tconversationId={conversation.conversationId}\n\t\t\t\tcurrentVisitorId={visitor?.id}\n\t\t\t\titems={conversation.items}\n\t\t\t\ttools={timelineTools}\n\t\t\t/>\n\n\t\t\t{isConversationClosed ? (\n\t\t\t\t<div className=\"m-4 flex items-center justify-center text-balance px-4 pb-6 text-center font-medium text-co-muted-foreground text-sm\">\n\t\t\t\t\t<Text as=\"p\" textKey=\"component.conversationPage.closedMessage\" />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t<div className=\"flex-shrink-0 p-1\">\n\t\t\t\t\t<MultimodalInput\n\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\tconversation.composer.isSubmitting ||\n\t\t\t\t\t\t\tconversation.composer.isUploading\n\t\t\t\t\t\t}\n\t\t\t\t\t\terror={conversation.error}\n\t\t\t\t\t\tfiles={conversation.composer.files}\n\t\t\t\t\t\tisSubmitting={conversation.composer.isSubmitting}\n\t\t\t\t\t\tisUploading={conversation.composer.isUploading}\n\t\t\t\t\t\tonChange={conversation.composer.setMessage}\n\t\t\t\t\t\tonFileSelect={conversation.composer.addFiles}\n\t\t\t\t\t\tonRemoveFile={conversation.composer.removeFile}\n\t\t\t\t\t\tonSubmit={conversation.composer.submit}\n\t\t\t\t\t\tplaceholder={text(\"component.multimodalInput.placeholder\")}\n\t\t\t\t\t\tvalue={conversation.composer.message}\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;AA+CA,MAAaA,oBAA+C,EAC3D,QACA,gBAAgB,sBAChB,gBAAgB,sBAChB,OAAO,kBACqB;CAE5B,MAAM,wBACL,QAAQ,kBAAkB,wBAAwB;CACnD,MAAM,iBAAiB,QAAQ,kBAAkB;CACjD,MAAM,cAAc,QAAQ,SAAS,eAAe,EAAE;CACtD,MAAM,EAAE,SAAS,mBAAmB,sBAAsB,SAAS,WAClE,YAAY;CACb,MAAM,EAAE,UAAU,SAAS,QAAQ,cAAc,sBAAsB;CACvE,MAAM,EAAE,WAAW,kBAAkB;CACrC,MAAM,OAAO,gBAAgB;CAC7B,MAAM,sBAAsB,mBAAmB;EAC9C,QAAQ;EACR,cAAc;EACd,CAAC;CACF,MAAM,mBAAmB,OAAuB,EAAE,CAAC;CAEnD,MAAM,gBAAgB,eACd,EACN,gBAAgB,EAAE,WAAW,4BAA4B,EACzD,GACD,EAAE,CACF;CAGD,MAAM,eAAe,oBAAoB;EACxC,gBAAgB;EAChB,OAAO;EACP;EACA,iBAAiB;EACjB,yBAAyB,sBAAsB;AAE9C,WAAQ;IACP,MAAM;IACN,QAAQ,EAAE,gBAAgB,mBAAmB;IAC7C,CAAC;;EAEH,CAAC;CAGF,MAAM,qBAAqB,iBAC1B,OAAO,qBACN,UACA,aAAa,YAAY,OAAO,MAAM,KAAK,aAAa,gBACzD;CAED,MAAM,uBAAuB,QAC5B,uBACE,mBAAmB,WAAW,mBAAmB,YACjD,mBAAmB,WAAW,mBAAmB,QACjD,mBAAmB,WACrB;CAED,MAAM,qBAAqB;AAC1B,MAAI,UACH,SAAQ;MAER,UAAS,EAAE,MAAM,QAAQ,CAAC;;AAK5B,iBAAgB;EACf,MAAM,eAAe,aAAa;EAClC,MAAM,gBAAgB,iBAAiB;AAGvC,MAAI,aAAa,SAAS,cAAc,QAAQ;GAE/C,MAAM,WAAW,aAAa,MAAM,cAAc,OAAO;AAGzD,QAAK,MAAM,QAAQ,SAClB,KAAI,KAAK,SAAS,aAAa,CAAC,KAAK,WAAW;AAC/C,yBAAqB;AACrB;;;AAMH,mBAAiB,UAAU;IACzB,CAAC,aAAa,OAAO,oBAAoB,CAAC;AAE7C,QACC,qBAAC;EAAI,WAAU;;GACd,oBAAC;IAAO,UAAU;cACjB,qBAAC;KAAI,WAAU;gBACd,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAE,WAAU;iBACX,SAAS;QACP,EACJ,oBAAC;OACA,IAAG;OACH,WAAU;OACV,SAAQ;QACP;OACG,EACN,oBAAC;MACA,UAAU;MACV,UAAU;MACV,aAAa;MACb,MAAM;MACN,SAAS;OACR;MACG;KACE;GAET,oBAAC;IACmB;IACG;IACtB,WAAU;IACV,gBAAgB,aAAa;IAC7B,kBAAkB,SAAS;IAC3B,OAAO,aAAa;IACpB,OAAO;KACN;GAED,uBACA,oBAAC;IAAI,WAAU;cACd,oBAAC;KAAK,IAAG;KAAI,SAAQ;MAA6C;KAC7D,GAEN,oBAAC;IAAI,WAAU;cACd,oBAAC;KACA,UACC,aAAa,SAAS,gBACtB,aAAa,SAAS;KAEvB,OAAO,aAAa;KACpB,OAAO,aAAa,SAAS;KAC7B,cAAc,aAAa,SAAS;KACpC,aAAa,aAAa,SAAS;KACnC,UAAU,aAAa,SAAS;KAChC,cAAc,aAAa,SAAS;KACpC,cAAc,aAAa,SAAS;KACpC,UAAU,aAAa,SAAS;KAChC,aAAa,KAAK,wCAAwC;KAC1D,OAAO,aAAa,SAAS;MAC5B;KACG;;GAEF"}

package/support/pages/home.js

@@ -1,10 +1,10 @@
 import { AvatarStack } from "../components/avatar-stack.js";
 import { useSupportNavigation } from "../store/support-store.js";
-import { CoButton } from "../components/button.js";
 import icons_default from "../components/icons.js";
+import { PENDING_CONVERSATION_ID } from "../../utils/id.js";
+import { CoButton } from "../components/button.js";
 import { Header } from "../components/header.js";
 import { Text, useSupportText } from "../text/index.js";
-import { PENDING_CONVERSATION_ID } from "../../utils/id.js";
 import { Watermark } from "../components/watermark.js";
 import { ConversationButtonLink } from "../components/conversation-button-link.js";
 import { useHomePage } from "../../hooks/use-home-page.js";

package/support/router.d.ts

@@ -1,29 +1,69 @@
-import React from "react";
+import * as React$1 from "react";
 import { RouteRegistry } from "@cossistant/core";
 
 //#region src/support/router.d.ts
+
+/**
+ * Type for custom pages that ensures they match RouteRegistry.
+ */
 type CustomPage<K extends keyof RouteRegistry = keyof RouteRegistry> = {
   name: K;
-  component: React.ComponentType<{
+  component: React$1.ComponentType<{
     params?: RouteRegistry[K];
   }>;
 };
-type SupportRouterProps = {
+type RouterProps = {
+  /**
+   * Custom pages to add alongside the built-in pages.
+   */
   customPages?: CustomPage[];
-  children?: React.ReactNode;
+  /**
+   * Children can include <Support.Page /> components.
+   */
+  children?: React$1.ReactNode;
 };
 /**
  * Router with default support pages (HOME, ARTICLES, CONVERSATION, CONVERSATION_HISTORY).
- * Add custom pages via customPages prop.
+ * Add custom pages via the customPages prop or as children.
+ *
+ * @example
+ * // Default pages only
+ * <Support.Router />
+ *
+ * @example
+ * // With custom pages via prop
+ * <Support.Router customPages={[{ name: "FAQ", component: FAQPage }]} />
+ *
+ * @example
+ * // With custom pages as children
+ * <Support.Router>
+ *   <Support.Page name="FAQ" component={FAQPage} />
+ *   <Support.Page name="SETTINGS" component={SettingsPage} />
+ * </Support.Router>
+ */
+declare const Router: React$1.FC<RouterProps>;
+type PageProps<K extends keyof RouteRegistry = keyof RouteRegistry> = {
+  /**
+   * The route name for this page.
+   */
+  name: K;
+  /**
+   * The component to render for this page.
+   */
+  component: React$1.ComponentType<{
+    params?: RouteRegistry[K];
+  }>;
+};
+/**
+ * Declarative way to register custom pages.
+ * This component is collected by the Router and doesn't render anything itself.
  *
  * @example
- * <SupportRouter
- *   customPages={[
- *     { name: "SETTINGS", component: SettingsPage }
- *   ]}
- * />
+ * <Support.Router>
+ *   <Support.Page name="FAQ" component={FAQPage} />
+ * </Support.Router>
  */
-declare const SupportRouter: React.FC<SupportRouterProps>;
+declare const Page: <K extends keyof RouteRegistry>(_props: PageProps<K>) => null;
 //#endregion
-export { CustomPage, SupportRouter, SupportRouterProps };
+export { CustomPage, Page, PageProps, Router, RouterProps };
 //# sourceMappingURL=router.d.ts.map