@cossistant/react 0.0.3 → 0.0.5

package/support/pages/conversation-history.js

@@ -8,7 +8,6 @@ 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";
-import { TextEffect } from "../components/text-effect.js";
 import { useSupport } from "../../provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
@@ -49,36 +48,36 @@ const ConversationHistoryPage = () => {
 		if (canGoBack) goBack();
 		else navigate({ page: "HOME" });
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(Header, {
-			onGoBack: handleGoBack,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex w-full items-center justify-between gap-2 py-3",
-				children: [/* @__PURE__ */ jsx("div", { className: "flex flex-col" }), /* @__PURE__ */ jsx(AvatarStack, {
-					aiAgents: availableAIAgents,
-					gapWidth: 2,
-					humanAgents: availableHumanAgents,
-					size: 32,
-					spacing: 28
-				})]
-			})
-		}),
-		/* @__PURE__ */ jsx("div", {
-			className: "sticky top-4 flex flex-1 items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", {
-				className: "flex flex-col items-center gap-2",
-				children: /* @__PURE__ */ jsx(TextEffect, {
-					as: "h2",
-					className: "max-w-xs text-balance text-center font-co-sans text-2xl leading-normal",
-					delay: .5,
-					preset: "fade-in-blur",
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Header, {
+		onGoBack: handleGoBack,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center justify-between gap-2 py-3",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex flex-col",
+				children: /* @__PURE__ */ jsx("h2", {
+					className: "max-w-xs text-balance font-co-sans text-md leading-normal",
 					children: text("page.conversationHistory.title")
 				})
-			})
-		}),
-		/* @__PURE__ */ jsxs("div", {
-			className: "flex flex-shrink-0 flex-col items-center justify-center gap-2 px-6 pt-20 pb-4",
-			children: [history.conversations.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [history.hasMore && /* @__PURE__ */ jsx(Button, {
+			}), /* @__PURE__ */ jsx(AvatarStack, {
+				aiAgents: availableAIAgents,
+				gapWidth: 2,
+				humanAgents: availableHumanAgents,
+				size: 32,
+				spacing: 28
+			})]
+		})
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-1 flex-col items-center justify-between gap-2 px-6 pb-4",
+		children: [history.conversations.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center justify-between gap-2 pt-10",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex w-full flex-col overflow-clip rounded-md border border-co-border/80",
+				children: history.visibleConversations.map((conversation) => /* @__PURE__ */ jsx(ConversationButtonLink, {
+					className: "rounded-none",
+					conversation,
+					onClick: () => history.openConversation(conversation.id)
+				}, conversation.id))
+			}), history.hasMore && /* @__PURE__ */ jsx(Button, {
 				className: "relative mt-6 w-full text-co-primary/40 text-xs hover:text-co-primary",
 				onClick: history.showAll,
 				variant: "ghost",
@@ -87,32 +86,25 @@ const ConversationHistoryPage = () => {
 					textKey: "page.conversationHistory.showMore",
 					variables: { count: history.remainingCount }
 				})
-			}), /* @__PURE__ */ jsx("div", {
-				className: "mt-6 flex w-full flex-col overflow-clip rounded-md border border-co-border/80",
-				children: history.visibleConversations.map((conversation) => /* @__PURE__ */ jsx(ConversationButtonLink, {
-					className: "rounded-none",
-					conversation,
-					onClick: () => history.openConversation(conversation.id)
-				}, conversation.id))
-			})] }), /* @__PURE__ */ jsxs("div", {
-				className: "sticky bottom-4 z-10 flex w-full flex-col items-center gap-2",
-				children: [/* @__PURE__ */ jsxs(Button, {
-					className: "relative w-full justify-between",
-					onClick: () => history.startConversation(),
-					size: "large",
-					variant: "secondary",
-					children: [/* @__PURE__ */ jsx(icons_default, {
-						className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
-						name: "arrow-right",
-						variant: "default"
-					}), /* @__PURE__ */ jsx(Text, {
-						as: "span",
-						textKey: "common.actions.askQuestion"
-					})]
-				}), /* @__PURE__ */ jsx(Watermark, { className: "mt-4 mb-2" })]
 			})]
-		})
-	] });
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "sticky bottom-4 z-10 flex w-full flex-col items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				className: "relative w-full justify-between",
+				onClick: () => history.startConversation(),
+				size: "large",
+				variant: "secondary",
+				children: [/* @__PURE__ */ jsx(icons_default, {
+					className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
+					name: "arrow-right",
+					variant: "default"
+				}), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					textKey: "common.actions.askQuestion"
+				})]
+			}), /* @__PURE__ */ jsx(Watermark, { className: "mt-4 mb-2" })]
+		})]
+	})] });
 };
 
 //#endregion

package/support/pages/conversation-history.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-history.js","names":["ConversationHistoryPage: React.FC","Icon"],"sources":["../../../src/support/pages/conversation-history.tsx"],"sourcesContent":["import { useSupport } from \"@cossistant/react\";\nimport { PENDING_CONVERSATION_ID } from \"@cossistant/react/utils/id\";\nimport type React from \"react\";\nimport { useConversationHistoryPage } from \"../../hooks/use-conversation-history-page\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { Button } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { TextEffect } from \"../components/text-effect\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\n/**\n * Conversation history page component.\n *\n * Displays:\n * - List of all conversations\n * - Pagination controls\n * - Button to start new conversation\n *\n * All logic is handled by the useConversationHistoryPage hook.\n */\nexport const ConversationHistoryPage: React.FC = () => {\n\tconst { goBack, canGoBack, navigate } = useSupportNavigation();\n\tconst { availableAIAgents, availableHumanAgents } = useSupport();\n\tconst text = useSupportText();\n\n\tconst history = useConversationHistoryPage({\n\t\tinitialVisibleCount: 4,\n\t\tonOpenConversation: (conversationId) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonStartConversation: (initialMessage) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId: PENDING_CONVERSATION_ID,\n\t\t\t\t\tinitialMessage,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t});\n\n\tconst handleGoBack = () => {\n\t\tif (canGoBack) {\n\t\t\tgoBack();\n\t\t} else {\n\t\t\tnavigate({\n\t\t\t\tpage: \"HOME\",\n\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\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<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\t\t\t<div className=\"sticky top-4 flex flex-1 items-center justify-center\">\n\t\t\t\t<div className=\"flex flex-col items-center gap-2\">\n\t\t\t\t\t<TextEffect\n\t\t\t\t\t\tas=\"h2\"\n\t\t\t\t\t\tclassName=\"max-w-xs text-balance text-center font-co-sans text-2xl leading-normal\"\n\t\t\t\t\t\tdelay={0.5}\n\t\t\t\t\t\tpreset=\"fade-in-blur\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{text(\"page.conversationHistory.title\")}\n\t\t\t\t\t</TextEffect>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex flex-shrink-0 flex-col items-center justify-center gap-2 px-6 pt-20 pb-4\">\n\t\t\t\t{history.conversations.length > 0 && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{history.hasMore && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"relative mt-6 w-full text-co-primary/40 text-xs hover:text-co-primary\"\n\t\t\t\t\t\t\t\tonClick={history.showAll}\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\ttextKey=\"page.conversationHistory.showMore\"\n\t\t\t\t\t\t\t\t\tvariables={{ count: history.remainingCount }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<div className=\"mt-6 flex w-full flex-col overflow-clip rounded-md border border-co-border/80\">\n\t\t\t\t\t\t\t{history.visibleConversations.map((conversation) => (\n\t\t\t\t\t\t\t\t<ConversationButtonLink\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-none\"\n\t\t\t\t\t\t\t\t\tconversation={conversation}\n\t\t\t\t\t\t\t\t\tkey={conversation.id}\n\t\t\t\t\t\t\t\t\tonClick={() => history.openConversation(conversation.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t<div className=\"sticky bottom-4 z-10 flex w-full flex-col items-center gap-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full justify-between\"\n\t\t\t\t\t\tonClick={() => history.startConversation()}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Text as=\"span\" textKey=\"common.actions.askQuestion\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Watermark className=\"mt-4 mb-2\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAaA,gCAA0C;CACtD,MAAM,EAAE,QAAQ,WAAW,aAAa,sBAAsB;CAC9D,MAAM,EAAE,mBAAmB,yBAAyB,YAAY;CAChE,MAAM,OAAO,gBAAgB;CAE7B,MAAM,UAAU,2BAA2B;EAC1C,qBAAqB;EACrB,qBAAqB,mBAAmB;AACvC,YAAS;IACR,MAAM;IACN,QAAQ,EACP,gBACA;IACD,CAAC;;EAEH,sBAAsB,mBAAmB;AACxC,YAAS;IACR,MAAM;IACN,QAAQ;KACP,gBAAgB;KAChB;KACA;IACD,CAAC;;EAEH,CAAC;CAEF,MAAM,qBAAqB;AAC1B,MAAI,UACH,SAAQ;MAER,UAAS,EACR,MAAM,QACN,CAAC;;AAIJ,QACC;EACC,oBAAC;GAAO,UAAU;aACjB,qBAAC;IAAI,WAAU;eACd,oBAAC,SAAI,WAAU,kBAAkB,EACjC,oBAAC;KACA,UAAU;KACV,UAAU;KACV,aAAa;KACb,MAAM;KACN,SAAS;MACR;KACG;IACE;EACT,oBAAC;GAAI,WAAU;aACd,oBAAC;IAAI,WAAU;cACd,oBAAC;KACA,IAAG;KACH,WAAU;KACV,OAAO;KACP,QAAO;eAEN,KAAK,iCAAiC;MAC3B;KACR;IACD;EACN,qBAAC;GAAI,WAAU;cACb,QAAQ,cAAc,SAAS,KAC/B,4CACE,QAAQ,WACR,oBAAC;IACA,WAAU;IACV,SAAS,QAAQ;IACjB,SAAQ;cAER,oBAAC;KACA,IAAG;KACH,SAAQ;KACR,WAAW,EAAE,OAAO,QAAQ,gBAAgB;MAC3C;KACM,EAEV,oBAAC;IAAI,WAAU;cACb,QAAQ,qBAAqB,KAAK,iBAClC,oBAAC;KACA,WAAU;KACI;KAEd,eAAe,QAAQ,iBAAiB,aAAa,GAAG;OADnD,aAAa,GAEjB,CACD;KACG,IACJ,EAGJ,qBAAC;IAAI,WAAU;eACd,qBAAC;KACA,WAAU;KACV,eAAe,QAAQ,mBAAmB;KAC1C,MAAK;KACL,SAAQ;gBAER,oBAACC;MACA,WAAU;MACV,MAAK;MACL,SAAQ;OACP,EACF,oBAAC;MAAK,IAAG;MAAO,SAAQ;OAA+B;MAC/C,EACT,oBAAC,aAAU,WAAU,cAAc;KAC9B;IACD;KACJ"}
+{"version":3,"file":"conversation-history.js","names":["ConversationHistoryPage: React.FC","Icon"],"sources":["../../../src/support/pages/conversation-history.tsx"],"sourcesContent":["import { useSupport } from \"@cossistant/react\";\nimport { PENDING_CONVERSATION_ID } from \"@cossistant/react/utils/id\";\nimport type React from \"react\";\nimport { useConversationHistoryPage } from \"../../hooks/use-conversation-history-page\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { Button } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { TextEffect } from \"../components/text-effect\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\n/**\n * Conversation history page component.\n *\n * Displays:\n * - List of all conversations\n * - Pagination controls\n * - Button to start new conversation\n *\n * All logic is handled by the useConversationHistoryPage hook.\n */\nexport const ConversationHistoryPage: React.FC = () => {\n\tconst { goBack, canGoBack, navigate } = useSupportNavigation();\n\tconst { availableAIAgents, availableHumanAgents } = useSupport();\n\tconst text = useSupportText();\n\n\tconst history = useConversationHistoryPage({\n\t\tinitialVisibleCount: 4,\n\t\tonOpenConversation: (conversationId) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonStartConversation: (initialMessage) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId: PENDING_CONVERSATION_ID,\n\t\t\t\t\tinitialMessage,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t});\n\n\tconst handleGoBack = () => {\n\t\tif (canGoBack) {\n\t\t\tgoBack();\n\t\t} else {\n\t\t\tnavigate({\n\t\t\t\tpage: \"HOME\",\n\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<>\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<h2 className=\"max-w-xs text-balance font-co-sans text-md leading-normal\">\n\t\t\t\t\t\t\t{text(\"page.conversationHistory.title\")}\n\t\t\t\t\t\t</h2>\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<div className=\"flex flex-1 flex-col items-center justify-between gap-2 px-6 pb-4\">\n\t\t\t\t{history.conversations.length > 0 && (\n\t\t\t\t\t<div className=\"flex flex-col items-center justify-between gap-2 pt-10\">\n\t\t\t\t\t\t<div className=\"flex w-full flex-col overflow-clip rounded-md border border-co-border/80\">\n\t\t\t\t\t\t\t{history.visibleConversations.map((conversation) => (\n\t\t\t\t\t\t\t\t<ConversationButtonLink\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-none\"\n\t\t\t\t\t\t\t\t\tconversation={conversation}\n\t\t\t\t\t\t\t\t\tkey={conversation.id}\n\t\t\t\t\t\t\t\t\tonClick={() => history.openConversation(conversation.id)}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{history.hasMore && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tclassName=\"relative mt-6 w-full text-co-primary/40 text-xs hover:text-co-primary\"\n\t\t\t\t\t\t\t\tonClick={history.showAll}\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\t\t\ttextKey=\"page.conversationHistory.showMore\"\n\t\t\t\t\t\t\t\t\tvariables={{ count: history.remainingCount }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<div className=\"sticky bottom-4 z-10 flex w-full flex-col items-center gap-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full justify-between\"\n\t\t\t\t\t\tonClick={() => history.startConversation()}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Text as=\"span\" textKey=\"common.actions.askQuestion\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Watermark className=\"mt-4 mb-2\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAaA,gCAA0C;CACtD,MAAM,EAAE,QAAQ,WAAW,aAAa,sBAAsB;CAC9D,MAAM,EAAE,mBAAmB,yBAAyB,YAAY;CAChE,MAAM,OAAO,gBAAgB;CAE7B,MAAM,UAAU,2BAA2B;EAC1C,qBAAqB;EACrB,qBAAqB,mBAAmB;AACvC,YAAS;IACR,MAAM;IACN,QAAQ,EACP,gBACA;IACD,CAAC;;EAEH,sBAAsB,mBAAmB;AACxC,YAAS;IACR,MAAM;IACN,QAAQ;KACP,gBAAgB;KAChB;KACA;IACD,CAAC;;EAEH,CAAC;CAEF,MAAM,qBAAqB;AAC1B,MAAI,UACH,SAAQ;MAER,UAAS,EACR,MAAM,QACN,CAAC;;AAIJ,QACC,4CACC,oBAAC;EAAO,UAAU;YACjB,qBAAC;GAAI,WAAU;cACd,oBAAC;IAAI,WAAU;cACd,oBAAC;KAAG,WAAU;eACZ,KAAK,iCAAiC;MACnC;KACA,EACN,oBAAC;IACA,UAAU;IACV,UAAU;IACV,aAAa;IACb,MAAM;IACN,SAAS;KACR;IACG;GACE,EAET,qBAAC;EAAI,WAAU;aACb,QAAQ,cAAc,SAAS,KAC/B,qBAAC;GAAI,WAAU;cACd,oBAAC;IAAI,WAAU;cACb,QAAQ,qBAAqB,KAAK,iBAClC,oBAAC;KACA,WAAU;KACI;KAEd,eAAe,QAAQ,iBAAiB,aAAa,GAAG;OADnD,aAAa,GAEjB,CACD;KACG,EACL,QAAQ,WACR,oBAAC;IACA,WAAU;IACV,SAAS,QAAQ;IACjB,SAAQ;cAER,oBAAC;KACA,IAAG;KACH,SAAQ;KACR,WAAW,EAAE,OAAO,QAAQ,gBAAgB;MAC3C;KACM;IAEL,EAGP,qBAAC;GAAI,WAAU;cACd,qBAAC;IACA,WAAU;IACV,eAAe,QAAQ,mBAAmB;IAC1C,MAAK;IACL,SAAQ;eAER,oBAACC;KACA,WAAU;KACV,MAAK;KACL,SAAQ;MACP,EACF,oBAAC;KAAK,IAAG;KAAO,SAAQ;MAA+B;KAC/C,EACT,oBAAC,aAAU,WAAU,cAAc;IAC9B;GACD,IACJ"}

package/support/pages/conversation.d.ts

@@ -1,5 +1,5 @@
 import { TimelineItem } from "../../timeline-item.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/pages/conversation.d.ts
 type ConversationPageProps = {
@@ -22,11 +22,8 @@ type ConversationPageProps = {
  * All conversation logic is handled by the useConversationPage hook,
  * making this component focused purely on rendering and user interaction.
  */
-declare const ConversationPage: ({
-  conversationId: initialConversationId,
-  initialMessage,
-  items: passedItems
-}: ConversationPageProps) => react_jsx_runtime8.JSX.Element;
+type ConversationPageComponent = (props: ConversationPageProps) => ReactElement;
+declare const ConversationPage: ConversationPageComponent;
 //#endregion
 export { ConversationPage };
 //# sourceMappingURL=conversation.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","names":[],"sources":["../../../src/support/pages/conversation.tsx"],"sourcesContent":[],"mappings":";;;;KAUK,qBAAA;;;AAVmE;EAiC3D,cAAA,EAAA,MA+EZ;EAAA;;;gBA/EgC,CAAA,EAAA,MAAA;;;;UATxB;;;;;;;;cASI;kBAAoB;;SAAA;GAI9B,0BAAqB,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"conversation.d.ts","names":[],"sources":["../../../src/support/pages/conversation.tsx"],"sourcesContent":[],"mappings":";;;;KAcK,qBAAA;;AAZ8C;AA0B9B;EAWR,cAAA,EAAA,MA2GZ;;;;;;;;UAtHQ;;;;;;;;KASJ,yBAAA,WAAoC,0BAA0B;cAEtD,kBAAkB"}

package/support/pages/conversation.js

@@ -1,28 +1,29 @@
 import { AvatarStack } from "../components/avatar-stack.js";
-import { useSupportNavigation } from "../store/support-store.js";
+import { useSupportConfig, useSupportNavigation } from "../store/support-store.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 { ConversationTimelineList } from "../components/conversation-timeline.js";
 import { MultimodalInput } from "../components/multimodal-input.js";
+import { IdentificationTimelineTool } from "../components/timeline-identification-tool.js";
 import { useSupport } from "../../provider.js";
+import { useMemo } from "react";
+import { ConversationStatus } from "@cossistant/types";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/pages/conversation.tsx
-/**
-* Main conversation page component.
-*
-* All conversation logic is handled by the useConversationPage hook,
-* making this component focused purely on rendering and user interaction.
-*/
 const ConversationPage = ({ conversationId: initialConversationId, initialMessage, items: passedItems = [] }) => {
 	const { website, availableAIAgents, availableHumanAgents, visitor } = useSupport();
 	const { navigate, replace, goBack, canGoBack } = useSupportNavigation();
+	const { isOpen } = useSupportConfig();
 	const text = useSupportText();
+	const timelineTools = useMemo(() => ({ identification: { component: IdentificationTimelineTool } }), []);
 	const conversation = useConversationPage({
 		conversationId: initialConversationId,
 		items: passedItems,
 		initialMessage,
+		autoSeenEnabled: isOpen,
 		onConversationIdChange: (newConversationId) => {
 			replace({
 				page: "CONVERSATION",
@@ -30,6 +31,8 @@ const ConversationPage = ({ conversationId: initialConversationId, initialMessag
 			});
 		}
 	});
+	const { conversation: activeConversation } = useConversation(conversation.isPending ? null : conversation.conversationId, { enabled: !conversation.isPending });
+	const isConversationClosed = Boolean(activeConversation && (activeConversation.status === ConversationStatus.RESOLVED || activeConversation.status === ConversationStatus.SPAM || activeConversation.deletedAt));
 	const handleGoBack = () => {
 		if (canGoBack) goBack();
 		else navigate({ page: "HOME" });
@@ -66,9 +69,16 @@ const ConversationPage = ({ conversationId: initialConversationId, initialMessag
 				className: "min-h-0 flex-1 px-4",
 				conversationId: conversation.conversationId,
 				currentVisitorId: visitor?.id,
-				items: conversation.items
+				items: conversation.items,
+				tools: timelineTools
 			}),
-			/* @__PURE__ */ jsx("div", {
+			isConversationClosed ? /* @__PURE__ */ jsx("div", {
+				className: "m-4 flex items-center justify-center text-balance px-4 pb-6 text-center font-medium text-muted-foreground text-sm",
+				children: /* @__PURE__ */ jsx(Text, {
+					as: "p",
+					textKey: "component.conversationPage.closedMessage"
+				})
+			}) : /* @__PURE__ */ jsx("div", {
 				className: "flex-shrink-0 p-1",
 				children: /* @__PURE__ */ jsx(MultimodalInput, {
 					disabled: conversation.composer.isSubmitting,

package/support/pages/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","names":[],"sources":["../../../src/support/pages/conversation.tsx"],"sourcesContent":["import type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { useConversationPage } from \"../../hooks/use-conversation-page\";\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 { useSupportNavigation } from \"../store\";\nimport { Text, useSupportText } from \"../text\";\n\ntype ConversationPageProps = {\n\t/**\n\t * The conversation ID to display (can be PENDING_CONVERSATION_ID or a real ID).\n\t */\n\tconversationId: string;\n\n\t/**\n\t * Optional initial message to send when opening the conversation.\n\t */\n\tinitialMessage?: string;\n\n\t/**\n\t * Optional timeline items to display (for optimistic updates or initial state).\n\t */\n\titems?: TimelineItem[];\n};\n\n/**\n * Main conversation page component.\n *\n * All conversation logic is handled by the useConversationPage hook,\n * making this component focused purely on rendering and user interaction.\n */\nexport const ConversationPage = ({\n\tconversationId: initialConversationId,\n\tinitialMessage,\n\titems: passedItems = [],\n}: ConversationPageProps) => {\n\tconst { website, availableAIAgents, availableHumanAgents, visitor } =\n\t\tuseSupport();\n\tconst { navigate, replace, goBack, canGoBack } = useSupportNavigation();\n\tconst text = useSupportText();\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\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 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\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-sm\">{website?.name}</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-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/>\n\n\t\t\t<div className=\"flex-shrink-0 p-1\">\n\t\t\t\t<MultimodalInput\n\t\t\t\t\tdisabled={conversation.composer.isSubmitting}\n\t\t\t\t\terror={conversation.error}\n\t\t\t\t\tfiles={conversation.composer.files}\n\t\t\t\t\tisSubmitting={conversation.composer.isSubmitting}\n\t\t\t\t\tonChange={conversation.composer.setMessage}\n\t\t\t\t\tonFileSelect={conversation.composer.addFiles}\n\t\t\t\t\tonRemoveFile={conversation.composer.removeFile}\n\t\t\t\t\tonSubmit={conversation.composer.submit}\n\t\t\t\t\tplaceholder={text(\"component.multimodalInput.placeholder\")}\n\t\t\t\t\tvalue={conversation.composer.message}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAiCA,MAAa,oBAAoB,EAChC,gBAAgB,uBAChB,gBACA,OAAO,cAAc,EAAE,OACK;CAC5B,MAAM,EAAE,SAAS,mBAAmB,sBAAsB,YACzD,YAAY;CACb,MAAM,EAAE,UAAU,SAAS,QAAQ,cAAc,sBAAsB;CACvE,MAAM,OAAO,gBAAgB;CAG7B,MAAM,eAAe,oBAAoB;EACxC,gBAAgB;EAChB,OAAO;EACP;EACA,yBAAyB,sBAAsB;AAE9C,WAAQ;IACP,MAAM;IACN,QAAQ,EAAE,gBAAgB,mBAAmB;IAC7C,CAAC;;EAEH,CAAC;CAEF,MAAM,qBAAqB;AAC1B,MAAI,UACH,SAAQ;MAER,UAAS,EAAE,MAAM,QAAQ,CAAC;;AAI5B,QACC,qBAAC;EAAI,WAAU;;GACd,oBAAC;IAAO,UAAU;cACjB,qBAAC;KAAI,WAAU;gBACd,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAE,WAAU;iBAAuB,SAAS;QAAS,EACtD,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;KACnB;GAEF,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;;GACD"}
+{"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, useMemo } from \"react\";\nimport { useConversation } from \"../../hooks/use-conversation\";\nimport { useConversationPage } from \"../../hooks/use-conversation-page\";\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 * The conversation ID to display (can be PENDING_CONVERSATION_ID or a real ID).\n\t */\n\tconversationId: string;\n\n\t/**\n\t * Optional initial message to send when opening the conversation.\n\t */\n\tinitialMessage?: string;\n\n\t/**\n\t * Optional timeline items to display (for optimistic updates or initial state).\n\t */\n\titems?: TimelineItem[];\n};\n\n/**\n * Main conversation page component.\n *\n * All conversation logic is handled by the useConversationPage hook,\n * making this component focused purely on rendering and user interaction.\n */\ntype ConversationPageComponent = (props: ConversationPageProps) => ReactElement;\n\nexport const ConversationPage: ConversationPageComponent = ({\n\tconversationId: initialConversationId,\n\tinitialMessage,\n\titems: passedItems = [],\n}: ConversationPageProps) => {\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\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\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-sm\">{website?.name}</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-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-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":";;;;;;;;;;;;;;;AAuCA,MAAaA,oBAA+C,EAC3D,gBAAgB,uBAChB,gBACA,OAAO,cAAc,EAAE,OACK;CAC5B,MAAM,EAAE,SAAS,mBAAmB,sBAAsB,YACzD,YAAY;CACb,MAAM,EAAE,UAAU,SAAS,QAAQ,cAAc,sBAAsB;CACvE,MAAM,EAAE,WAAW,kBAAkB;CACrC,MAAM,OAAO,gBAAgB;CAE7B,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;;AAI5B,QACC,qBAAC;EAAI,WAAU;;GACd,oBAAC;IAAO,UAAU;cACjB,qBAAC;KAAI,WAAU;gBACd,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAE,WAAU;iBAAuB,SAAS;QAAS,EACtD,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"}

package/support/pages/home.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime10 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/pages/home.d.ts
 
@@ -14,7 +14,7 @@ import * as react_jsx_runtime10 from "react/jsx-runtime";
  *
  * All logic is handled by the useHomePage hook.
  */
-declare const HomePage: () => react_jsx_runtime10.JSX.Element;
+declare const HomePage: () => ReactElement;
 //#endregion
 export { HomePage };
 //# sourceMappingURL=home.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"home.d.ts","names":[],"sources":["../../../src/support/pages/home.tsx"],"sourcesContent":[],"mappings":";;;;;;;AA0BA;;;;;;;;;cAAa,gBAAQ,mBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"home.d.ts","names":[],"sources":["../../../src/support/pages/home.tsx"],"sourcesContent":[],"mappings":";;;;;;AA2BA;;;;;;;;;;cAAa,gBAAe"}

package/support/pages/home.js

@@ -7,7 +7,6 @@ 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 { TextEffect } from "../components/text-effect.js";
 import { useHomePage } from "../../hooks/use-home-page.js";
 import { useSupport } from "../../provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -53,84 +52,72 @@ const HomePage = () => {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsx(Header, {}),
 		/* @__PURE__ */ jsx("div", {
-			className: "sticky top-4 flex flex-1 items-center justify-center",
+			className: "sticky top-0 flex flex-1 px-6",
 			children: /* @__PURE__ */ jsxs("div", {
-				className: "flex flex-col items-center gap-2",
-				children: [
-					/* @__PURE__ */ jsxs(motion.div, {
-						animate: "visible",
-						className: "flex flex-col items-center justify-center gap-2",
-						exit: "exit",
-						initial: "hidden",
-						transition: { delay: .1 },
-						variants: {
-							hidden: {
-								opacity: 0,
-								y: 20,
-								filter: "blur(12px)"
-							},
-							visible: {
-								opacity: 1,
-								y: 0,
-								filter: "blur(0px)"
-							},
-							exit: {
-								opacity: 0,
-								y: 20,
-								filter: "blur(12px)"
-							}
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs(motion.div, {
+					animate: "visible",
+					className: "flex flex-col gap-2",
+					exit: "exit",
+					initial: "hidden",
+					transition: { delay: .1 },
+					variants: {
+						hidden: {
+							opacity: 0,
+							y: 20,
+							filter: "blur(12px)"
 						},
-						children: [/* @__PURE__ */ jsx(AvatarStack, {
-							aiAgents: website?.availableAIAgents || [],
-							humanAgents: availableHumanAgents,
-							size: 44,
-							spacing: 32
-						}), /* @__PURE__ */ jsx(Text, {
-							as: "p",
-							className: "mb-4 text-co-primary/80 text-sm",
-							textKey: "page.home.tagline",
-							variables: { websiteName: website?.name ?? null }
-						})]
-					}),
-					/* @__PURE__ */ jsx(TextEffect, {
-						as: "h2",
-						className: "max-w-xs text-balance text-center font-co-sans text-2xl leading-normal",
-						delay: .5,
-						preset: "fade-in-blur",
-						children: text("page.home.greeting", { visitorName: visitor?.contact?.name ?? void 0 })
-					}),
-					quickOptions.length > 0 && /* @__PURE__ */ jsx(motion.div, {
-						animate: "visible",
-						className: "mt-6 inline-flex gap-2",
-						exit: "exit",
-						initial: "hidden",
-						transition: { delay: 1.3 },
-						variants: {
-							hidden: {
-								opacity: 0,
-								y: 20,
-								filter: "blur(12px)"
-							},
-							visible: {
-								opacity: 1,
-								y: 0,
-								filter: "blur(0px)"
-							},
-							exit: {
-								opacity: 0,
-								y: 20,
-								filter: "blur(12px)"
-							}
+						visible: {
+							opacity: 1,
+							y: 0,
+							filter: "blur(0px)"
 						},
-						children: quickOptions?.map((option) => /* @__PURE__ */ jsx(Button, {
-							className: "rounded-full border-dashed",
-							onClick: () => home.startConversation(option),
-							size: "default",
-							variant: "outline",
-							children: option
-						}, option))
-					})
-				]
+						exit: {
+							opacity: 0,
+							y: 20,
+							filter: "blur(12px)"
+						}
+					},
+					children: [/* @__PURE__ */ jsx(AvatarStack, {
+						aiAgents: website?.availableAIAgents || [],
+						humanAgents: availableHumanAgents,
+						size: 44,
+						spacing: 32
+					}), /* @__PURE__ */ jsx("h2", {
+						className: "max-w-xs text-balance font-co-sans font-medium text-2xl leading-normal",
+						children: text("page.home.greeting", { visitorName: visitor?.contact?.name?.split(" ")[0] ?? void 0 })
+					})]
+				}), quickOptions.length > 0 && /* @__PURE__ */ jsx(motion.div, {
+					animate: "visible",
+					className: "mt-6 space-x-2 space-y-2",
+					exit: "exit",
+					initial: "hidden",
+					transition: { delay: .1 },
+					variants: {
+						hidden: {
+							opacity: 0,
+							y: 20,
+							filter: "blur(12px)"
+						},
+						visible: {
+							opacity: 1,
+							y: 0,
+							filter: "blur(0px)"
+						},
+						exit: {
+							opacity: 0,
+							y: 20,
+							filter: "blur(12px)"
+						}
+					},
+					children: quickOptions?.map((option) => /* @__PURE__ */ jsx(Button, {
+						className: "inline-flex w-fit rounded-lg border-dashed px-2",
+						onClick: () => home.startConversation(option),
+						size: "default",
+						variant: "outline",
+						children: option
+					}, option))
+				})]
 			})
 		}),
 		/* @__PURE__ */ jsxs("div", {
@@ -171,7 +158,7 @@ const HomePage = () => {
 							as: "span",
 							textKey: "common.actions.askQuestion"
 						})]
-					}), /* @__PURE__ */ jsx(Watermark, { className: "mt-4 mb-2" })]
+					}), /* @__PURE__ */ jsx(Watermark, { className: "mt-4 mb-0" })]
 				}),
 				/* @__PURE__ */ jsx("div", {})
 			]

package/support/pages/home.js.map

@@ -1 +1 @@
-{"version":3,"file":"home.js","names":["Icon"],"sources":["../../../src/support/pages/home.tsx"],"sourcesContent":["import { motion } from \"motion/react\";\nimport { useHomePage } from \"../../hooks/use-home-page\";\nimport { useSupport } from \"../../provider\";\nimport { PENDING_CONVERSATION_ID } from \"../../utils/id\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { Button } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { TextEffect } from \"../components/text-effect\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\n/**\n * Home page component for the support widget.\n *\n * Displays:\n * - Welcome message with available agents\n * - Quick action buttons\n * - Last open conversation (if any)\n * - Button to start new conversation\n * - Link to conversation history\n *\n * All logic is handled by the useHomePage hook.\n */\nexport const HomePage = () => {\n\tconst { website, availableHumanAgents, visitor, quickOptions } = useSupport();\n\tconst { navigate } = useSupportNavigation();\n\tconst text = useSupportText();\n\n\t// Main home page hook - handles all logic\n\tconst home = useHomePage({\n\t\tonStartConversation: (initialMessage) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId: PENDING_CONVERSATION_ID,\n\t\t\t\t\tinitialMessage,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonOpenConversation: (conversationId) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonOpenConversationHistory: () => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION_HISTORY\",\n\t\t\t});\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<Header>{/* <NavigationTab /> */}</Header>\n\t\t\t<div className=\"sticky top-4 flex flex-1 items-center justify-center\">\n\t\t\t\t<div className=\"flex flex-col items-center gap-2\">\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\tclassName=\"flex flex-col items-center justify-center gap-2\"\n\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tdelay: 0.1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\t\taiAgents={website?.availableAIAgents || []}\n\t\t\t\t\t\t\thumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tsize={44}\n\t\t\t\t\t\t\tspacing={32}\n\t\t\t\t\t\t/>\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=\"mb-4 text-co-primary/80 text-sm\"\n\t\t\t\t\t\t\ttextKey=\"page.home.tagline\"\n\t\t\t\t\t\t\tvariables={{ websiteName: website?.name ?? null }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</motion.div>\n\n\t\t\t\t\t<TextEffect\n\t\t\t\t\t\tas=\"h2\"\n\t\t\t\t\t\tclassName=\"max-w-xs text-balance text-center font-co-sans text-2xl leading-normal\"\n\t\t\t\t\t\tdelay={0.5}\n\t\t\t\t\t\tpreset=\"fade-in-blur\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{text(\"page.home.greeting\", {\n\t\t\t\t\t\t\tvisitorName: visitor?.contact?.name ?? undefined,\n\t\t\t\t\t\t})}\n\t\t\t\t\t</TextEffect>\n\n\t\t\t\t\t{quickOptions.length > 0 && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tclassName=\"mt-6 inline-flex gap-2\"\n\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tdelay: 1.3,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\t\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{quickOptions?.map((option) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"rounded-full border-dashed\"\n\t\t\t\t\t\t\t\t\tkey={option}\n\t\t\t\t\t\t\t\t\tonClick={() => home.startConversation(option)}\n\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex flex-shrink-0 flex-col items-center justify-center gap-2 px-6 pb-4\">\n\t\t\t\t{home.availableConversationsCount > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full text-co-primary/40 text-xs hover:text-co-primary\"\n\t\t\t\t\t\tonClick={home.openConversationHistory}\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\ttextKey=\"page.home.history.more\"\n\t\t\t\t\t\t\tvariables={{ count: home.availableConversationsCount }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\n\t\t\t\t{home.lastOpenConversation && (\n\t\t\t\t\t<div className=\"flex w-full flex-col overflow-clip rounded-md border border-co-border/80\">\n\t\t\t\t\t\t<ConversationButtonLink\n\t\t\t\t\t\t\tclassName=\"rounded-none\"\n\t\t\t\t\t\t\tconversation={home.lastOpenConversation}\n\t\t\t\t\t\t\tkey={home.lastOpenConversation.id}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (home.lastOpenConversation) {\n\t\t\t\t\t\t\t\t\thome.openConversation(home.lastOpenConversation.id);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<div className=\"sticky bottom-4 z-10 flex w-full flex-col items-center gap-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full justify-between\"\n\t\t\t\t\t\tonClick={() => home.startConversation()}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Text as=\"span\" textKey=\"common.actions.askQuestion\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Watermark className=\"mt-4 mb-2\" />\n\t\t\t\t</div>\n\t\t\t\t<div />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,iBAAiB;CAC7B,MAAM,EAAE,SAAS,sBAAsB,SAAS,iBAAiB,YAAY;CAC7E,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,OAAO,gBAAgB;CAG7B,MAAM,OAAO,YAAY;EACxB,sBAAsB,mBAAmB;AACxC,YAAS;IACR,MAAM;IACN,QAAQ;KACP,gBAAgB;KAChB;KACA;IACD,CAAC;;EAEH,qBAAqB,mBAAmB;AACvC,YAAS;IACR,MAAM;IACN,QAAQ,EACP,gBACA;IACD,CAAC;;EAEH,iCAAiC;AAChC,YAAS,EACR,MAAM,wBACN,CAAC;;EAEH,CAAC;AAEF,QACC;EACC,oBAAC,WAAyC;EAC1C,oBAAC;GAAI,WAAU;aACd,qBAAC;IAAI,WAAU;;KACd,qBAAC,OAAO;MACP,SAAQ;MACR,WAAU;MACV,MAAK;MACL,SAAQ;MACR,YAAY,EACX,OAAO,IACP;MACD,UAAU;OACT,QAAQ;QAAE,SAAS;QAAG,GAAG;QAAI,QAAQ;QAAc;OACnD,SAAS;QAAE,SAAS;QAAG,GAAG;QAAG,QAAQ;QAAa;OAClD,MAAM;QAAE,SAAS;QAAG,GAAG;QAAI,QAAQ;QAAc;OACjD;iBAED,oBAAC;OACA,UAAU,SAAS,qBAAqB,EAAE;OAC1C,aAAa;OACb,MAAM;OACN,SAAS;QACR,EACF,oBAAC;OACA,IAAG;OACH,WAAU;OACV,SAAQ;OACR,WAAW,EAAE,aAAa,SAAS,QAAQ,MAAM;QAChD;OACU;KAEb,oBAAC;MACA,IAAG;MACH,WAAU;MACV,OAAO;MACP,QAAO;gBAEN,KAAK,sBAAsB,EAC3B,aAAa,SAAS,SAAS,QAAQ,QACvC,CAAC;OACU;KAEZ,aAAa,SAAS,KACtB,oBAAC,OAAO;MACP,SAAQ;MACR,WAAU;MACV,MAAK;MACL,SAAQ;MACR,YAAY,EACX,OAAO,KACP;MACD,UAAU;OACT,QAAQ;QAAE,SAAS;QAAG,GAAG;QAAI,QAAQ;QAAc;OACnD,SAAS;QAAE,SAAS;QAAG,GAAG;QAAG,QAAQ;QAAa;OAClD,MAAM;QAAE,SAAS;QAAG,GAAG;QAAI,QAAQ;QAAc;OACjD;gBAEA,cAAc,KAAK,WACnB,oBAAC;OACA,WAAU;OAEV,eAAe,KAAK,kBAAkB,OAAO;OAC7C,MAAK;OACL,SAAQ;iBAEP;SALI,OAMG,CACR;OACU;;KAET;IACD;EACN,qBAAC;GAAI,WAAU;;IACb,KAAK,8BAA8B,KACnC,oBAAC;KACA,WAAU;KACV,SAAS,KAAK;KACd,SAAQ;eAER,oBAAC;MACA,IAAG;MACH,SAAQ;MACR,WAAW,EAAE,OAAO,KAAK,6BAA6B;OACrD;MACM;IAGT,KAAK,wBACL,oBAAC;KAAI,WAAU;eACd,oBAAC;MACA,WAAU;MACV,cAAc,KAAK;MAEnB,eAAe;AACd,WAAI,KAAK,qBACR,MAAK,iBAAiB,KAAK,qBAAqB,GAAG;;QAHhD,KAAK,qBAAqB,GAM9B;MACG;IAGP,qBAAC;KAAI,WAAU;gBACd,qBAAC;MACA,WAAU;MACV,eAAe,KAAK,mBAAmB;MACvC,MAAK;MACL,SAAQ;iBAER,oBAACA;OACA,WAAU;OACV,MAAK;OACL,SAAQ;QACP,EACF,oBAAC;OAAK,IAAG;OAAO,SAAQ;QAA+B;OAC/C,EACT,oBAAC,aAAU,WAAU,cAAc;MAC9B;IACN,oBAAC,UAAM;;IACF;KACJ"}
+{"version":3,"file":"home.js","names":["Icon"],"sources":["../../../src/support/pages/home.tsx"],"sourcesContent":["import { motion } from \"motion/react\";\nimport type { ReactElement } from \"react\";\nimport { useHomePage } from \"../../hooks/use-home-page\";\nimport { useSupport } from \"../../provider\";\nimport { PENDING_CONVERSATION_ID } from \"../../utils/id\";\nimport { AvatarStack } from \"../components/avatar-stack\";\nimport { Button } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { TextEffect } from \"../components/text-effect\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\n/**\n * Home page component for the support widget.\n *\n * Displays:\n * - Welcome message with available agents\n * - Quick action buttons\n * - Last open conversation (if any)\n * - Button to start new conversation\n * - Link to conversation history\n *\n * All logic is handled by the useHomePage hook.\n */\nexport const HomePage = (): ReactElement => {\n\tconst { website, availableHumanAgents, visitor, quickOptions } = useSupport();\n\tconst { navigate } = useSupportNavigation();\n\tconst text = useSupportText();\n\n\t// Main home page hook - handles all logic\n\tconst home = useHomePage({\n\t\tonStartConversation: (initialMessage) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId: PENDING_CONVERSATION_ID,\n\t\t\t\t\tinitialMessage,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonOpenConversation: (conversationId) => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION\",\n\t\t\t\tparams: {\n\t\t\t\t\tconversationId,\n\t\t\t\t},\n\t\t\t});\n\t\t},\n\t\tonOpenConversationHistory: () => {\n\t\t\tnavigate({\n\t\t\t\tpage: \"CONVERSATION_HISTORY\",\n\t\t\t});\n\t\t},\n\t});\n\n\treturn (\n\t\t<>\n\t\t\t<Header>{/* <NavigationTab /> */}</Header>\n\t\t\t<div className=\"sticky top-0 flex flex-1 px-6\">\n\t\t\t\t<div className=\"flex flex-col gap-2\">\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\tclassName=\"flex flex-col gap-2\"\n\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\tdelay: 0.1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\t\taiAgents={website?.availableAIAgents || []}\n\t\t\t\t\t\t\thumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tsize={44}\n\t\t\t\t\t\t\tspacing={32}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<h2 className=\"max-w-xs text-balance font-co-sans font-medium text-2xl leading-normal\">\n\t\t\t\t\t\t\t{text(\"page.home.greeting\", {\n\t\t\t\t\t\t\t\tvisitorName: visitor?.contact?.name?.split(\" \")[0] ?? undefined,\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t</motion.div>\n\n\t\t\t\t\t{quickOptions.length > 0 && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\t\t\tclassName=\"mt-6 space-x-2 space-y-2\"\n\t\t\t\t\t\t\texit=\"exit\"\n\t\t\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\t\t\ttransition={{\n\t\t\t\t\t\t\t\tdelay: 0.1,\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tvariants={{\n\t\t\t\t\t\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\t\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{quickOptions?.map((option) => (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"inline-flex w-fit rounded-lg border-dashed px-2\"\n\t\t\t\t\t\t\t\t\tkey={option}\n\t\t\t\t\t\t\t\t\tonClick={() => home.startConversation(option)}\n\t\t\t\t\t\t\t\t\tsize=\"default\"\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{option}\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div className=\"flex flex-shrink-0 flex-col items-center justify-center gap-2 px-6 pb-4\">\n\t\t\t\t{home.availableConversationsCount > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full text-co-primary/40 text-xs hover:text-co-primary\"\n\t\t\t\t\t\tonClick={home.openConversationHistory}\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\tas=\"span\"\n\t\t\t\t\t\t\ttextKey=\"page.home.history.more\"\n\t\t\t\t\t\t\tvariables={{ count: home.availableConversationsCount }}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\n\t\t\t\t{home.lastOpenConversation && (\n\t\t\t\t\t<div className=\"flex w-full flex-col overflow-clip rounded-md border border-co-border/80\">\n\t\t\t\t\t\t<ConversationButtonLink\n\t\t\t\t\t\t\tclassName=\"rounded-none\"\n\t\t\t\t\t\t\tconversation={home.lastOpenConversation}\n\t\t\t\t\t\t\tkey={home.lastOpenConversation.id}\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tif (home.lastOpenConversation) {\n\t\t\t\t\t\t\t\t\thome.openConversation(home.lastOpenConversation.id);\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t<div className=\"sticky bottom-4 z-10 flex w-full flex-col items-center gap-2\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tclassName=\"relative w-full justify-between\"\n\t\t\t\t\t\tonClick={() => home.startConversation()}\n\t\t\t\t\t\tsize=\"large\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Text as=\"span\" textKey=\"common.actions.askQuestion\" />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Watermark className=\"mt-4 mb-0\" />\n\t\t\t\t</div>\n\t\t\t\t<div />\n\t\t\t</div>\n\t\t</>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,iBAA+B;CAC3C,MAAM,EAAE,SAAS,sBAAsB,SAAS,iBAAiB,YAAY;CAC7E,MAAM,EAAE,aAAa,sBAAsB;CAC3C,MAAM,OAAO,gBAAgB;CAG7B,MAAM,OAAO,YAAY;EACxB,sBAAsB,mBAAmB;AACxC,YAAS;IACR,MAAM;IACN,QAAQ;KACP,gBAAgB;KAChB;KACA;IACD,CAAC;;EAEH,qBAAqB,mBAAmB;AACvC,YAAS;IACR,MAAM;IACN,QAAQ,EACP,gBACA;IACD,CAAC;;EAEH,iCAAiC;AAChC,YAAS,EACR,MAAM,wBACN,CAAC;;EAEH,CAAC;AAEF,QACC;EACC,oBAAC,WAAyC;EAC1C,oBAAC;GAAI,WAAU;aACd,qBAAC;IAAI,WAAU;eACd,qBAAC,OAAO;KACP,SAAQ;KACR,WAAU;KACV,MAAK;KACL,SAAQ;KACR,YAAY,EACX,OAAO,IACP;KACD,UAAU;MACT,QAAQ;OAAE,SAAS;OAAG,GAAG;OAAI,QAAQ;OAAc;MACnD,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG,QAAQ;OAAa;MAClD,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI,QAAQ;OAAc;MACjD;gBAED,oBAAC;MACA,UAAU,SAAS,qBAAqB,EAAE;MAC1C,aAAa;MACb,MAAM;MACN,SAAS;OACR,EACF,oBAAC;MAAG,WAAU;gBACZ,KAAK,sBAAsB,EAC3B,aAAa,SAAS,SAAS,MAAM,MAAM,IAAI,CAAC,MAAM,QACtD,CAAC;OACE;MACO,EAEZ,aAAa,SAAS,KACtB,oBAAC,OAAO;KACP,SAAQ;KACR,WAAU;KACV,MAAK;KACL,SAAQ;KACR,YAAY,EACX,OAAO,IACP;KACD,UAAU;MACT,QAAQ;OAAE,SAAS;OAAG,GAAG;OAAI,QAAQ;OAAc;MACnD,SAAS;OAAE,SAAS;OAAG,GAAG;OAAG,QAAQ;OAAa;MAClD,MAAM;OAAE,SAAS;OAAG,GAAG;OAAI,QAAQ;OAAc;MACjD;eAEA,cAAc,KAAK,WACnB,oBAAC;MACA,WAAU;MAEV,eAAe,KAAK,kBAAkB,OAAO;MAC7C,MAAK;MACL,SAAQ;gBAEP;QALI,OAMG,CACR;MACU;KAET;IACD;EACN,qBAAC;GAAI,WAAU;;IACb,KAAK,8BAA8B,KACnC,oBAAC;KACA,WAAU;KACV,SAAS,KAAK;KACd,SAAQ;eAER,oBAAC;MACA,IAAG;MACH,SAAQ;MACR,WAAW,EAAE,OAAO,KAAK,6BAA6B;OACrD;MACM;IAGT,KAAK,wBACL,oBAAC;KAAI,WAAU;eACd,oBAAC;MACA,WAAU;MACV,cAAc,KAAK;MAEnB,eAAe;AACd,WAAI,KAAK,qBACR,MAAK,iBAAiB,KAAK,qBAAqB,GAAG;;QAHhD,KAAK,qBAAqB,GAM9B;MACG;IAGP,qBAAC;KAAI,WAAU;gBACd,qBAAC;MACA,WAAU;MACV,eAAe,KAAK,mBAAmB;MACvC,MAAK;MACL,SAAQ;iBAER,oBAACA;OACA,WAAU;OACV,MAAK;OACL,SAAQ;QACP,EACF,oBAAC;OAAK,IAAG;OAAO,SAAQ;QAA+B;OAC/C,EACT,oBAAC,aAAU,WAAU,cAAc;MAC9B;IACN,oBAAC,UAAM;;IACF;KACJ"}

package/support/store/support-store.d.ts

@@ -3,12 +3,20 @@ import { SupportConfig, SupportStore, SupportStoreState } from "@cossistant/core
 
 //#region src/support/store/support-store.d.ts
 type UseSupportStoreResult = SupportStoreState & Pick<SupportStore, "navigate" | "replace" | "goBack" | "open" | "close" | "toggle" | "updateConfig" | "reset">;
+/**
+ * React hook wrapper around the shared support widget store. Exposes both the
+ * raw state and imperative actions so UI components can drive navigation or
+ * change configuration without importing the store singleton directly.
+ */
 declare function useSupportStore(): UseSupportStoreResult;
+/**
+ * Shortcut hook that returns the persisted widget configuration along with
+ * open/close/toggle helpers for common UI bindings.
+ */
 declare const useSupportConfig: () => {
   open: () => void;
   close: () => void;
   toggle: () => void;
-  mode: "floating" | "responsive";
   size: "normal" | "larger";
   isOpen: boolean;
   content: {
@@ -19,6 +27,10 @@ declare const useSupportConfig: () => {
     };
   };
 };
+/**
+ * Provides the current navigation entry, the stack history and helpers to
+ * transition between screens inside the support widget.
+ */
 declare const useSupportNavigation: () => {
   current: _cossistant_core0.NavigationState;
   page: "HOME" | "ARTICLES" | "CONVERSATION" | "CONVERSATION_HISTORY";
@@ -32,8 +44,12 @@ declare const useSupportNavigation: () => {
   goBack: () => void;
   canGoBack: boolean;
 };
+/**
+ * Applies initial configuration derived from provider props or server state to
+ * the singleton support store. Call this once during bootstrapping so that the
+ * UI renders with the expected open state.
+ */
 declare const initializeSupportStore: (props: {
-  mode?: SupportConfig["mode"];
   size?: SupportConfig["size"];
   defaultOpen?: boolean;
 }) => void;

package/support/store/support-store.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"support-store.d.ts","names":[],"sources":["../../../src/support/store/support-store.ts"],"sourcesContent":[],"mappings":";;;;KA8CY,qBAAA,GAAwB,oBACnC,KACC;iBAWc,eAAA,CAAA,GAAmB;cAmBtB;EAhCD,IAAA,EAAA,GAAA,GAAA,IAAA;EAAqB,KAAA,EAAA,GAAA,GAAA,IAAA;QAAG,EAAA,GAAA,GAAA,IAAA;MAElC,EAAA,UAAA,GAAA,YAAA;MADD,EAAA,QAAA,GAAA,QAAA;EAAI,MAAA,EAAA,OAAA;EAYW,OAAA,EAAA;IAmBH,IAAA,CAAA,EAAA;MAcA,MAAA,CAAA,EAAA,MAiBZ;MAAA,SAAA,CAAA,EAAA,MAAA;MAAA,QAAA,CAAA,EAAA,MAAA;;;;cAjBY;EAmBA,OAAA,EAFZ,iBAAA,CAAA,eAwBA;EAAA,IAAA,EAAA,MAAA,GAAA,UAAA,GAAA,cAAA,GAAA,sBAAA;QArBO,EAAA;IACA,cAAA,EAAA,MAAA;IAAa,cAAA,CAAA,EAAA,MAAA;;;;;;;;cAFR;SACL;SACA"}
+{"version":3,"file":"support-store.d.ts","names":[],"sources":["../../../src/support/store/support-store.ts"],"sourcesContent":[],"mappings":";;;;KA8CY,qBAAA,GAAwB,oBACnC,KACC;;;AAFF;;;AACC,iBAiBe,eAAA,CAAA,CAjBf,EAiBkC,qBAjBlC;;AAiBD;AAuBA;AAkBA;AAiBC,cAnCY,gBAmCZ,EAAA,GAAA,GAAA;;;;;EAOY,MAAA,EAAA,OAAA;;;;;;;;;;;;;cAxBA;WAiBZ,iBAAA,CAAA;;;;;;;;;;;;;;;;;cAOY;SACL"}

package/support/store/support-store.js

@@ -5,18 +5,21 @@ import { useMemo, useRef, useSyncExternalStore } from "react";
 import { createSupportStore } from "@cossistant/core";
 
 //#region src/support/store/support-store.ts
-const storage = typeof window !== "undefined" ? window.localStorage : void 0;
-const store = createSupportStore({ storage });
+const store = createSupportStore({ storage: typeof window !== "undefined" ? window.localStorage : void 0 });
 function useSelector(selector, isEqual = Object.is) {
 	const selectionRef = useRef(void 0);
 	const subscribe = (onStoreChange) => store.subscribe(() => {
 		onStoreChange();
 	});
-	const snapshot = useSyncExternalStore(subscribe, store.getState, store.getState);
-	const selected = selector(snapshot);
+	const selected = selector(useSyncExternalStore(subscribe, store.getState, store.getState));
 	if (selectionRef.current === void 0 || !isEqual(selectionRef.current, selected)) selectionRef.current = selected;
 	return selectionRef.current;
 }
+/**
+* React hook wrapper around the shared support widget store. Exposes both the
+* raw state and imperative actions so UI components can drive navigation or
+* change configuration without importing the store singleton directly.
+*/
 function useSupportStore() {
 	const state = useSelector((current) => current);
 	return useMemo(() => ({
@@ -31,6 +34,10 @@ function useSupportStore() {
 		reset: store.reset
 	}), [state]);
 }
+/**
+* Shortcut hook that returns the persisted widget configuration along with
+* open/close/toggle helpers for common UI bindings.
+*/
 const useSupportConfig = () => {
 	const config = useSelector((state) => state.config);
 	return useMemo(() => ({
@@ -40,6 +47,10 @@ const useSupportConfig = () => {
 		toggle: store.toggle
 	}), [config]);
 };
+/**
+* Provides the current navigation entry, the stack history and helpers to
+* transition between screens inside the support widget.
+*/
 const useSupportNavigation = () => {
 	const { current, previousPages } = useSelector((state) => state.navigation);
 	return useMemo(() => ({
@@ -53,9 +64,13 @@ const useSupportNavigation = () => {
 		canGoBack: previousPages.length > 0
 	}), [current, previousPages]);
 };
+/**
+* Applies initial configuration derived from provider props or server state to
+* the singleton support store. Call this once during bootstrapping so that the
+* UI renders with the expected open state.
+*/
 const initializeSupportStore = (props) => {
 	const patch = {};
-	if (props.mode !== void 0) patch.mode = props.mode;
 	if (props.size !== void 0) patch.size = props.size;
 	if (props.defaultOpen !== void 0) patch.isOpen = props.defaultOpen;
 	if (Object.keys(patch).length > 0) store.updateConfig(patch);