@cossistant/react 0.0.32 → 0.1.0

package/support/components/timeline-message-item.js

@@ -1,14 +1,20 @@
 import { cn } from "../utils/index.js";
 import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "../../primitives/timeline-item.js";
 import { extractFileParts, extractImageParts } from "../../primitives/timeline-item-attachments.js";
+import { hasExpandedTimelineContent } from "../../primitives/timeline-message-layout.js";
 import icons_default from "./icons.js";
 import { useSupportText } from "../text/index.js";
 import { ImageLightbox } from "./image-lightbox.js";
-import { useState } from "react";
+import { TimelineCodeBlock } from "./timeline-code-block.js";
+import { TimelineCommandBlock } from "./timeline-command-block.js";
+import { useMemo, useState } from "react";
 import { formatFileSize } from "@cossistant/core";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/timeline-message-item.tsx
+function getSupportMessageWidthClasses(text) {
+	return hasExpandedTimelineContent(text) ? "w-full max-w-full" : "max-w-[300px]";
+}
 /**
 * Message bubble renderer that adapts layout depending on whether the visitor
 * or an agent sent the message.
@@ -21,6 +27,19 @@ function TimelineMessageItem({ item, isLast = false, isSentByViewer = false }) {
 	const files = extractFileParts(item.parts);
 	const hasAttachments = images.length > 0 || files.length > 0;
 	const hasText = item.text && item.text.trim().length > 0;
+	const messageWidthClassName = getSupportMessageWidthClasses(item.text);
+	const markdownRenderers = useMemo(() => ({
+		codeBlock: ({ code, fileName, language }) => /* @__PURE__ */ jsx(TimelineCodeBlock, {
+			code,
+			fileName,
+			language
+		}),
+		commandBlock: ({ commands }) => /* @__PURE__ */ jsx(TimelineCommandBlock, { commands }),
+		inlineCode: ({ code }) => /* @__PURE__ */ jsx("code", {
+			className: "rounded bg-co-background-300 px-1 py-0.5 text-xs",
+			children: code
+		})
+	}), []);
 	const openLightbox = (index) => {
 		setLightboxIndex(index);
 		setLightboxOpen(true);
@@ -35,12 +54,13 @@ function TimelineMessageItem({ item, isLast = false, isSentByViewer = false }) {
 					className: cn("flex w-full min-w-0 flex-1 flex-col gap-1", isSentByViewerFinal && "items-end"),
 					children: [
 						hasText && /* @__PURE__ */ jsx(TimelineItemContent, {
-							className: cn("block min-w-0 max-w-[300px] break-words rounded-lg px-3.5 py-2.5 text-sm", {
+							className: cn("block min-w-0 break-words rounded-lg px-3.5 py-2.5 text-sm", messageWidthClassName, {
 								"bg-co-background-300 text-co-foreground dark:bg-co-background-600": !isSentByViewerFinal,
 								"bg-co-primary text-co-primary-foreground": isSentByViewerFinal,
 								"rounded-br-sm": isLast && isSentByViewerFinal && !hasAttachments,
 								"rounded-bl-sm": isLast && !isSentByViewerFinal && !hasAttachments
 							}),
+							markdownRenderers,
 							renderMarkdown: true,
 							text: item.text
 						}),
@@ -106,5 +126,5 @@ function TimelineMessageItem({ item, isLast = false, isSentByViewer = false }) {
 }
 
 //#endregion
-export { TimelineMessageItem };
+export { TimelineMessageItem, getSupportMessageWidthClasses };
 //# sourceMappingURL=timeline-message-item.js.map

package/support/components/timeline-message-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-message-item.js","names":["PrimitiveTimelineItem","Icon"],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":["import { formatFileSize } from \"@cossistant/core\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport {\n\tTimelineItem as PrimitiveTimelineItem,\n\tTimelineItemContent,\n\tTimelineItemTimestamp,\n} from \"../../primitives/timeline-item\";\nimport {\n\textractFileParts,\n\textractImageParts,\n} from \"../../primitives/timeline-item-attachments\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { ImageLightbox } from \"./image-lightbox\";\n\nexport type TimelineMessageItemProps = {\n\titem: TimelineItem;\n\tisLast?: boolean;\n\tisSentByViewer?: boolean;\n};\n\n/**\n * Message bubble renderer that adapts layout depending on whether the visitor\n * or an agent sent the message.\n */\nexport function TimelineMessageItem({\n\titem,\n\tisLast = false,\n\tisSentByViewer = false,\n}: TimelineMessageItemProps): React.ReactElement {\n\tconst text = useSupportText();\n\tconst [lightboxOpen, setLightboxOpen] = useState(false);\n\tconst [lightboxIndex, setLightboxIndex] = useState(0);\n\n\t// Extract image and file parts\n\tconst images = extractImageParts(item.parts);\n\tconst files = extractFileParts(item.parts);\n\tconst hasAttachments = images.length > 0 || files.length > 0;\n\tconst hasText = item.text && item.text.trim().length > 0;\n\n\tconst openLightbox = (index: number) => {\n\t\tsetLightboxIndex(index);\n\t\tsetLightboxOpen(true);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PrimitiveTimelineItem item={item}>\n\t\t\t\t{({ isAI, timestamp }) => {\n\t\t\t\t\t// isSentByViewer defaults to false, meaning messages are treated as received\n\t\t\t\t\t// (left side with background) unless explicitly marked as sent by viewer\n\t\t\t\t\tconst isSentByViewerFinal = isSentByViewer;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t\t\tisSentByViewerFinal && \"flex-row-reverse\",\n\t\t\t\t\t\t\t\t!isSentByViewerFinal && \"flex-row\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"flex w-full min-w-0 flex-1 flex-col gap-1\",\n\t\t\t\t\t\t\t\t\tisSentByViewerFinal && \"items-end\"\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Text content */}\n\t\t\t\t\t\t\t\t{hasText && (\n\t\t\t\t\t\t\t\t\t<TimelineItemContent\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"block min-w-0 max-w-[300px] break-words rounded-lg px-3.5 py-2.5 text-sm\",\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-co-foreground dark:bg-co-background-600\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-primary text-co-primary-foreground\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-br-sm\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLast && isSentByViewerFinal && !hasAttachments,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-bl-sm\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLast && !isSentByViewerFinal && !hasAttachments,\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\trenderMarkdown\n\t\t\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Image attachments */}\n\t\t\t\t\t\t\t\t{images.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"flex flex-wrap gap-2\",\n\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal && \"justify-end\"\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{images.map((image, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"group relative overflow-hidden rounded-lg focus:outline-none focus:ring-2 focus:ring-co-primary/50\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={image.url}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => openLightbox(index)}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: React package, not Next.js specific */}\n\t\t\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/nursery/useImageSize: Dynamic image dimensions not known at render time */}\n\t\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\t\talt={image.filename || `Image ${index + 1}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"max-h-[150px] max-w-[200px] cursor-pointer rounded-lg object-cover transition-transform group-hover:scale-105\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc={image.url}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* File attachments */}\n\t\t\t\t\t\t\t\t{files.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t\t{files.map((file) => (\n\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-lg px-3 py-2 text-xs transition-colors\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-co-foreground hover:bg-co-background-400 dark:bg-co-background-600 dark:hover:bg-co-background-500\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-primary/80 text-co-primary-foreground hover:bg-co-primary\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\tdownload={file.filename}\n\t\t\t\t\t\t\t\t\t\t\t\thref={file.url}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={file.url}\n\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"h-4 w-4 shrink-0\" name=\"file\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 truncate font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{file.filename || \"Download file\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{file.size && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground opacity-70\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{isLast && (\n\t\t\t\t\t\t\t\t\t<TimelineItemTimestamp\n\t\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-co-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\t\ttimestamp={timestamp}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t{timestamp.toLocaleTimeString([], {\n\t\t\t\t\t\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t{isAI &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t` ${text(\"component.message.timestamp.aiIndicator\")}`}\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TimelineItemTimestamp>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t</PrimitiveTimelineItem>\n\n\t\t\t{/* Lightbox for images */}\n\t\t\t{images.length > 0 && (\n\t\t\t\t<ImageLightbox\n\t\t\t\t\timages={images}\n\t\t\t\t\tinitialIndex={lightboxIndex}\n\t\t\t\t\tisOpen={lightboxOpen}\n\t\t\t\t\tonClose={() => setLightboxOpen(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;AA4BA,SAAgB,oBAAoB,EACnC,MACA,SAAS,OACT,iBAAiB,SAC+B;CAChD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CAGrD,MAAM,SAAS,kBAAkB,KAAK,MAAM;CAC5C,MAAM,QAAQ,iBAAiB,KAAK,MAAM;CAC1C,MAAM,iBAAiB,OAAO,SAAS,KAAK,MAAM,SAAS;CAC3D,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,MAAM,CAAC,SAAS;CAEvD,MAAM,gBAAgB,UAAkB;AACvC,mBAAiB,MAAM;AACvB,kBAAgB,KAAK;;AAGtB,QACC,4CACC,oBAACA;EAA4B;aAC1B,EAAE,MAAM,gBAAgB;GAGzB,MAAM,sBAAsB;AAE5B,UACC,oBAAC;IACA,WAAW,GACV,qBACA,uBAAuB,oBACvB,CAAC,uBAAuB,WACxB;cAED,qBAAC;KACA,WAAW,GACV,6CACA,uBAAuB,YACvB;;MAGA,WACA,oBAAC;OACA,WAAW,GACV,4EACA;QACC,qEACC,CAAC;QACF,4CACC;QACD,iBACC,UAAU,uBAAuB,CAAC;QACnC,iBACC,UAAU,CAAC,uBAAuB,CAAC;QACpC,CACD;OACD;OACA,MAAM,KAAK;QACV;MAIF,OAAO,SAAS,KAChB,oBAAC;OACA,WAAW,GACV,wBACA,uBAAuB,cACvB;iBAEA,OAAO,KAAK,OAAO,UACnB,oBAAC;QACA,WAAU;QAEV,eAAe,aAAa,MAAM;QAClC,MAAK;kBAIL,oBAAC;SACA,KAAK,MAAM,YAAY,SAAS,QAAQ;SACxC,WAAU;SACV,SAAQ;SACR,KAAK,MAAM;UACV;UAXG,MAAM,IAYH,CACR;QACG;MAIN,MAAM,SAAS,KACf,oBAAC;OAAI,WAAU;iBACb,MAAM,KAAK,SACX,qBAAC;QACA,WAAW,GACV,0EACA;SACC,gIACC,CAAC;SACF,mEACC;SACD,CACD;QACD,UAAU,KAAK;QACf,MAAM,KAAK;QAEX,KAAI;QACJ,QAAO;;SAEP,oBAACC;UAAK,WAAU;UAAmB,MAAK;WAAS;SACjD,oBAAC;UAAK,WAAU;oBACd,KAAK,YAAY;WACZ;SACN,KAAK,QACL,oBAAC;UAAK,WAAU;oBACd,eAAe,KAAK,KAAK;WACpB;;UAXH,KAAK,IAaP,CACH;QACG;MAGN,UACA,oBAAC;OACA,WAAU;OACC;uBAGV,4CACE,UAAU,mBAAmB,EAAE,EAAE;QACjC,MAAM;QACN,QAAQ;QACR,CAAC,EACD,QACA,IAAI,KAAK,0CAA0C,MAClD;QAEmB;;MAEpB;KACD;;GAGe,EAGvB,OAAO,SAAS,KAChB,oBAAC;EACQ;EACR,cAAc;EACd,QAAQ;EACR,eAAe,gBAAgB,MAAM;GACpC,IAED"}
+{"version":3,"file":"timeline-message-item.js","names":["PrimitiveTimelineItem","Icon"],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":["import { formatFileSize } from \"@cossistant/core\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useMemo, useState } from \"react\";\nimport {\n\tTimelineItem as PrimitiveTimelineItem,\n\tTimelineItemContent,\n\ttype TimelineItemContentMarkdownRenderers,\n\tTimelineItemTimestamp,\n} from \"../../primitives/timeline-item\";\nimport {\n\textractFileParts,\n\textractImageParts,\n} from \"../../primitives/timeline-item-attachments\";\nimport { hasExpandedTimelineContent } from \"../../primitives/timeline-message-layout\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { ImageLightbox } from \"./image-lightbox\";\nimport { TimelineCodeBlock } from \"./timeline-code-block\";\nimport { TimelineCommandBlock } from \"./timeline-command-block\";\n\nexport type TimelineMessageItemProps = {\n\titem: TimelineItem;\n\tisLast?: boolean;\n\tisSentByViewer?: boolean;\n};\n\nexport function getSupportMessageWidthClasses(\n\ttext: string | null | undefined\n): string {\n\treturn hasExpandedTimelineContent(text)\n\t\t? \"w-full max-w-full\"\n\t\t: \"max-w-[300px]\";\n}\n\n/**\n * Message bubble renderer that adapts layout depending on whether the visitor\n * or an agent sent the message.\n */\nexport function TimelineMessageItem({\n\titem,\n\tisLast = false,\n\tisSentByViewer = false,\n}: TimelineMessageItemProps): React.ReactElement {\n\tconst text = useSupportText();\n\tconst [lightboxOpen, setLightboxOpen] = useState(false);\n\tconst [lightboxIndex, setLightboxIndex] = useState(0);\n\n\t// Extract image and file parts\n\tconst images = extractImageParts(item.parts);\n\tconst files = extractFileParts(item.parts);\n\tconst hasAttachments = images.length > 0 || files.length > 0;\n\tconst hasText = item.text && item.text.trim().length > 0;\n\tconst messageWidthClassName = getSupportMessageWidthClasses(item.text);\n\tconst markdownRenderers = useMemo<TimelineItemContentMarkdownRenderers>(\n\t\t() => ({\n\t\t\tcodeBlock: ({ code, fileName, language }) => (\n\t\t\t\t<TimelineCodeBlock\n\t\t\t\t\tcode={code}\n\t\t\t\t\tfileName={fileName}\n\t\t\t\t\tlanguage={language}\n\t\t\t\t/>\n\t\t\t),\n\t\t\tcommandBlock: ({ commands }) => (\n\t\t\t\t<TimelineCommandBlock commands={commands} />\n\t\t\t),\n\t\t\tinlineCode: ({ code }) => (\n\t\t\t\t<code className=\"rounded bg-co-background-300 px-1 py-0.5 text-xs\">\n\t\t\t\t\t{code}\n\t\t\t\t</code>\n\t\t\t),\n\t\t}),\n\t\t[]\n\t);\n\n\tconst openLightbox = (index: number) => {\n\t\tsetLightboxIndex(index);\n\t\tsetLightboxOpen(true);\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<PrimitiveTimelineItem item={item}>\n\t\t\t\t{({ isAI, timestamp }) => {\n\t\t\t\t\t// isSentByViewer defaults to false, meaning messages are treated as received\n\t\t\t\t\t// (left side with background) unless explicitly marked as sent by viewer\n\t\t\t\t\tconst isSentByViewerFinal = isSentByViewer;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t\t\tisSentByViewerFinal && \"flex-row-reverse\",\n\t\t\t\t\t\t\t\t!isSentByViewerFinal && \"flex-row\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"flex w-full min-w-0 flex-1 flex-col gap-1\",\n\t\t\t\t\t\t\t\t\tisSentByViewerFinal && \"items-end\"\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{/* Text content */}\n\t\t\t\t\t\t\t\t{hasText && (\n\t\t\t\t\t\t\t\t\t<TimelineItemContent\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"block min-w-0 break-words rounded-lg px-3.5 py-2.5 text-sm\",\n\t\t\t\t\t\t\t\t\t\t\tmessageWidthClassName,\n\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-co-foreground dark:bg-co-background-600\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-primary text-co-primary-foreground\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-br-sm\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLast && isSentByViewerFinal && !hasAttachments,\n\t\t\t\t\t\t\t\t\t\t\t\t\"rounded-bl-sm\":\n\t\t\t\t\t\t\t\t\t\t\t\t\tisLast && !isSentByViewerFinal && !hasAttachments,\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\tmarkdownRenderers={markdownRenderers}\n\t\t\t\t\t\t\t\t\t\trenderMarkdown\n\t\t\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* Image attachments */}\n\t\t\t\t\t\t\t\t{images.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"flex flex-wrap gap-2\",\n\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal && \"justify-end\"\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{images.map((image, index) => (\n\t\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"group relative overflow-hidden rounded-lg focus:outline-none focus:ring-2 focus:ring-co-primary/50\"\n\t\t\t\t\t\t\t\t\t\t\t\tkey={image.url}\n\t\t\t\t\t\t\t\t\t\t\t\tonClick={() => openLightbox(index)}\n\t\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/performance/noImgElement: React package, not Next.js specific */}\n\t\t\t\t\t\t\t\t\t\t\t\t{/* biome-ignore lint/nursery/useImageSize: Dynamic image dimensions not known at render time */}\n\t\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\t\talt={image.filename || `Image ${index + 1}`}\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"max-h-[150px] max-w-[200px] cursor-pointer rounded-lg object-cover transition-transform group-hover:scale-105\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tloading=\"lazy\"\n\t\t\t\t\t\t\t\t\t\t\t\t\tsrc={image.url}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{/* File attachments */}\n\t\t\t\t\t\t\t\t{files.length > 0 && (\n\t\t\t\t\t\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t\t\t\t\t\t{files.map((file) => (\n\t\t\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"flex items-center gap-2 rounded-lg px-3 py-2 text-xs transition-colors\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-co-foreground hover:bg-co-background-400 dark:bg-co-background-600 dark:hover:bg-co-background-500\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"bg-co-primary/80 text-co-primary-foreground hover:bg-co-primary\":\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\tdownload={file.filename}\n\t\t\t\t\t\t\t\t\t\t\t\thref={file.url}\n\t\t\t\t\t\t\t\t\t\t\t\tkey={file.url}\n\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"h-4 w-4 shrink-0\" name=\"file\" />\n\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"flex-1 truncate font-medium\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t{file.filename || \"Download file\"}\n\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t{file.size && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground opacity-70\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t\t\t{isLast && (\n\t\t\t\t\t\t\t\t\t<TimelineItemTimestamp\n\t\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-co-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\t\ttimestamp={timestamp}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t\t{timestamp.toLocaleTimeString([], {\n\t\t\t\t\t\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t\t{isAI &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t` ${text(\"component.message.timestamp.aiIndicator\")}`}\n\t\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</TimelineItemTimestamp>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t);\n\t\t\t\t}}\n\t\t\t</PrimitiveTimelineItem>\n\n\t\t\t{/* Lightbox for images */}\n\t\t\t{images.length > 0 && (\n\t\t\t\t<ImageLightbox\n\t\t\t\t\timages={images}\n\t\t\t\t\tinitialIndex={lightboxIndex}\n\t\t\t\t\tisOpen={lightboxOpen}\n\t\t\t\t\tonClose={() => setLightboxOpen(false)}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;AA4BA,SAAgB,8BACf,MACS;AACT,QAAO,2BAA2B,KAAK,GACpC,sBACA;;;;;;AAOJ,SAAgB,oBAAoB,EACnC,MACA,SAAS,OACT,iBAAiB,SAC+B;CAChD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;CACvD,MAAM,CAAC,eAAe,oBAAoB,SAAS,EAAE;CAGrD,MAAM,SAAS,kBAAkB,KAAK,MAAM;CAC5C,MAAM,QAAQ,iBAAiB,KAAK,MAAM;CAC1C,MAAM,iBAAiB,OAAO,SAAS,KAAK,MAAM,SAAS;CAC3D,MAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,MAAM,CAAC,SAAS;CACvD,MAAM,wBAAwB,8BAA8B,KAAK,KAAK;CACtE,MAAM,oBAAoB,eAClB;EACN,YAAY,EAAE,MAAM,UAAU,eAC7B,oBAAC;GACM;GACI;GACA;IACT;EAEH,eAAe,EAAE,eAChB,oBAAC,wBAA+B,WAAY;EAE7C,aAAa,EAAE,WACd,oBAAC;GAAK,WAAU;aACd;IACK;EAER,GACD,EAAE,CACF;CAED,MAAM,gBAAgB,UAAkB;AACvC,mBAAiB,MAAM;AACvB,kBAAgB,KAAK;;AAGtB,QACC,4CACC,oBAACA;EAA4B;aAC1B,EAAE,MAAM,gBAAgB;GAGzB,MAAM,sBAAsB;AAE5B,UACC,oBAAC;IACA,WAAW,GACV,qBACA,uBAAuB,oBACvB,CAAC,uBAAuB,WACxB;cAED,qBAAC;KACA,WAAW,GACV,6CACA,uBAAuB,YACvB;;MAGA,WACA,oBAAC;OACA,WAAW,GACV,8DACA,uBACA;QACC,qEACC,CAAC;QACF,4CACC;QACD,iBACC,UAAU,uBAAuB,CAAC;QACnC,iBACC,UAAU,CAAC,uBAAuB,CAAC;QACpC,CACD;OACkB;OACnB;OACA,MAAM,KAAK;QACV;MAIF,OAAO,SAAS,KAChB,oBAAC;OACA,WAAW,GACV,wBACA,uBAAuB,cACvB;iBAEA,OAAO,KAAK,OAAO,UACnB,oBAAC;QACA,WAAU;QAEV,eAAe,aAAa,MAAM;QAClC,MAAK;kBAIL,oBAAC;SACA,KAAK,MAAM,YAAY,SAAS,QAAQ;SACxC,WAAU;SACV,SAAQ;SACR,KAAK,MAAM;UACV;UAXG,MAAM,IAYH,CACR;QACG;MAIN,MAAM,SAAS,KACf,oBAAC;OAAI,WAAU;iBACb,MAAM,KAAK,SACX,qBAAC;QACA,WAAW,GACV,0EACA;SACC,gIACC,CAAC;SACF,mEACC;SACD,CACD;QACD,UAAU,KAAK;QACf,MAAM,KAAK;QAEX,KAAI;QACJ,QAAO;;SAEP,oBAACC;UAAK,WAAU;UAAmB,MAAK;WAAS;SACjD,oBAAC;UAAK,WAAU;oBACd,KAAK,YAAY;WACZ;SACN,KAAK,QACL,oBAAC;UAAK,WAAU;oBACd,eAAe,KAAK,KAAK;WACpB;;UAXH,KAAK,IAaP,CACH;QACG;MAGN,UACA,oBAAC;OACA,WAAU;OACC;uBAGV,4CACE,UAAU,mBAAmB,EAAE,EAAE;QACjC,MAAM;QACN,QAAQ;QACR,CAAC,EACD,QACA,IAAI,KAAK,0CAA0C,MAClD;QAEmB;;MAEpB;KACD;;GAGe,EAGvB,OAAO,SAAS,KAChB,oBAAC;EACQ;EACR,cAAc;EACd,QAAQ;EACR,eAAe,gBAAgB,MAAM;GACpC,IAED"}

package/support/pages/home.js

@@ -127,7 +127,7 @@ const HomePage = (_props = {}) => {
 					})
 				}),
 				home.lastOpenConversation && /* @__PURE__ */ jsx("div", {
-					className: "flex w-full flex-col overflow-clip rounded-md border border-co-border/80",
+					className: "flex w-full flex-col overflow-clip rounded border border-co-border/80",
 					children: /* @__PURE__ */ jsx(ConversationButtonLink, {
 						className: "rounded-none",
 						conversation: home.lastOpenConversation,

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 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 { CoButton } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\ntype HomePageProps = {\n\tparams?: undefined;\n};\n\n/**\n * Home page with welcome message, quick options, and conversation starter.\n */\nexport const HomePage = (_props: HomePageProps = {}): 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\tclassName=\"mb-4\"\n\t\t\t\t\t\t\thideDefaultAIAgent={false}\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={42}\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 text-co-primary leading-normal tracking-wide\">\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<CoButton\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</CoButton>\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<CoButton\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</CoButton>\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<CoButton\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</CoButton>\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":";;;;;;;;;;;;;;;;;;AAqBA,MAAa,YAAY,SAAwB,EAAE,KAAmB;CACrE,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,WAAU;MACV,oBAAoB;MACpB,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,OAMK,CACV;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;MACQ;IAGX,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;OAC7C,EACX,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 { CoButton } from \"../components/button\";\nimport { ConversationButtonLink } from \"../components/conversation-button-link\";\nimport { Header } from \"../components/header\";\nimport Icon from \"../components/icons\";\nimport { Watermark } from \"../components/watermark\";\nimport { useSupportNavigation } from \"../store/support-store\";\nimport { Text, useSupportText } from \"../text\";\n\ntype HomePageProps = {\n\tparams?: undefined;\n};\n\n/**\n * Home page with welcome message, quick options, and conversation starter.\n */\nexport const HomePage = (_props: HomePageProps = {}): 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\tclassName=\"mb-4\"\n\t\t\t\t\t\t\thideDefaultAIAgent={false}\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={42}\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 text-co-primary leading-normal tracking-wide\">\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<CoButton\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</CoButton>\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<CoButton\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</CoButton>\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 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<CoButton\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</CoButton>\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":";;;;;;;;;;;;;;;;;;AAqBA,MAAa,YAAY,SAAwB,EAAE,KAAmB;CACrE,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,WAAU;MACV,oBAAoB;MACpB,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,OAMK,CACV;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;MACQ;IAGX,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;OAC7C,EACX,oBAAC,aAAU,WAAU,cAAc;MAC9B;IACN,oBAAC,UAAM;;IACF;KACJ"}

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":";;;;KA+CY,qBAAA,GAAwB,oBACnC,KACC;;;AAFF;;;;AACK,iBAkBW,eAAA,CAAA,CAlBX,EAkB8B,qBAlB9B;AAkBW,KAmBJ,sBAAA,GAnBuB;EAmBvB,MAAA,EAAA,OAAA;EA0BC,IAAA,EAxBN,aAuEN,CAAA,MAAA,CAAA;EAQY,IAAA,EAAA,GAAA,GAAA,IAAA;EAiBZ,KAAA,EAAA,GAAA,GAAA,IAAA;;;;;;;;;AAKD;;;;;;;;;;;;cA7Ea,wBAAuB;;;;;;;cAuDvB;6CAiBZ,iBAAA,CAAA,aAAA;;;;;;;;;;;;;;;cAKY;SACL"}
+{"version":3,"file":"support-store.d.ts","names":[],"sources":["../../../src/support/store/support-store.ts"],"sourcesContent":[],"mappings":";;;;KAgDY,qBAAA,GAAwB,oBACnC,KACC;;;AAFF;;;;AACK,iBAkBW,eAAA,CAAA,CAlBX,EAkB8B,qBAlB9B;AAkBW,KAmBJ,sBAAA,GAnBuB;EAmBvB,MAAA,EAAA,OAAA;EA0BC,IAAA,EAxBN,aAuEN,CAAA,MAAA,CAAA;EAQY,IAAA,EAAA,GAAA,GAAA,IAAA;EAiBZ,KAAA,EAAA,GAAA,GAAA,IAAA;;;;;;;;;AAKD;;;;;;;;;;;;cA7Ea,wBAAuB;;;;;;;cAuDvB;6CAiBZ,iBAAA,CAAA,aAAA;;;;;;;;;;;;;;;cAKY;SACL"}

package/support/store/support-store.js

@@ -6,12 +6,12 @@ import { createSupportStore } from "@cossistant/core";
 
 //#region src/support/store/support-store.ts
 const store = createSupportStore({ storage: typeof window !== "undefined" ? window.localStorage : void 0 });
+const stableSubscribe = (onStoreChange) => store.subscribe(() => {
+	onStoreChange();
+});
 function useSelector(selector, isEqual = Object.is) {
 	const selectionRef = useRef(void 0);
-	const subscribe = (onStoreChange) => store.subscribe(() => {
-		onStoreChange();
-	});
-	const selected = selector(useSyncExternalStore(subscribe, store.getState, store.getState));
+	const selected = selector(useSyncExternalStore(stableSubscribe, store.getState, store.getState));
 	if (selectionRef.current === void 0 || !isEqual(selectionRef.current, selected)) selectionRef.current = selected;
 	return selectionRef.current;
 }

package/support/store/support-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"support-store.js","names":["patch: Partial<SupportConfig>"],"sources":["../../../src/support/store/support-store.ts"],"sourcesContent":["\"use client\";\n\nimport {\n\tcreateSupportStore,\n\ttype SupportConfig,\n\ttype SupportStore,\n\ttype SupportStoreState,\n} from \"@cossistant/core\";\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport { useControlledState } from \"../context/controlled-state\";\n\nconst storage = typeof window !== \"undefined\" ? window.localStorage : undefined;\nconst store = createSupportStore({ storage });\n\ntype Selector<T> = (state: SupportStoreState) => T;\n\ntype EqualityChecker<T> = (previous: T, next: T) => boolean;\n\nfunction useSelector<TSelected>(\n\tselector: Selector<TSelected>,\n\tisEqual: EqualityChecker<TSelected> = Object.is\n): TSelected {\n\tconst selectionRef = useRef<TSelected>(undefined);\n\n\tconst subscribe = (onStoreChange: () => void) =>\n\t\tstore.subscribe(() => {\n\t\t\tonStoreChange();\n\t\t});\n\n\tconst snapshot = useSyncExternalStore(\n\t\tsubscribe,\n\t\tstore.getState,\n\t\tstore.getState\n\t);\n\n\tconst selected = selector(snapshot);\n\n\tif (\n\t\tselectionRef.current === undefined ||\n\t\t!isEqual(selectionRef.current, selected)\n\t) {\n\t\tselectionRef.current = selected;\n\t}\n\n\treturn selectionRef.current as TSelected;\n}\n\nexport type UseSupportStoreResult = SupportStoreState &\n\tPick<\n\t\tSupportStore,\n\t\t| \"navigate\"\n\t\t| \"replace\"\n\t\t| \"goBack\"\n\t\t| \"open\"\n\t\t| \"close\"\n\t\t| \"toggle\"\n\t\t| \"updateConfig\"\n\t\t| \"reset\"\n\t>;\n\n/**\n * Access the support widget store state and actions.\n *\n * @example\n * const { isOpen, navigate, toggle } = useSupportStore();\n */\nexport function useSupportStore(): UseSupportStoreResult {\n\tconst state = useSelector((current) => current);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\t...state,\n\t\t\tnavigate: store.navigate,\n\t\t\treplace: store.replace,\n\t\t\tgoBack: store.goBack,\n\t\t\topen: store.open,\n\t\t\tclose: store.close,\n\t\t\ttoggle: store.toggle,\n\t\t\tupdateConfig: store.updateConfig,\n\t\t\treset: store.reset,\n\t\t}),\n\t\t[state]\n\t);\n}\n\nexport type UseSupportConfigResult = {\n\tisOpen: boolean;\n\tsize: SupportConfig[\"size\"];\n\topen: () => void;\n\tclose: () => void;\n\ttoggle: () => void;\n};\n\n/**\n * Access widget configuration (isOpen, size) and toggle helpers.\n * Supports both controlled and uncontrolled modes.\n *\n * In controlled mode (when `open` prop is provided to Support),\n * the `isOpen` state is driven by the prop, and `open`/`close`/`toggle`\n * will call `onOpenChange` instead of updating internal state.\n *\n * @example\n * // Uncontrolled (internal state)\n * const { isOpen, open, close, toggle } = useSupportConfig();\n *\n * @example\n * // Controlled (external state via Support props)\n * <Support open={isOpen} onOpenChange={setIsOpen}>\n *   <MyComponent />\n * </Support>\n */\nexport const useSupportConfig = (): UseSupportConfigResult => {\n\tconst config = useSelector((state) => state.config);\n\tconst controlledState = useControlledState();\n\n\t// Determine if we're in controlled mode\n\tconst isControlled = controlledState?.isControlled ?? false;\n\tconst controlledOpen = controlledState?.open;\n\tconst onOpenChange = controlledState?.onOpenChange;\n\n\t// Use controlled state if available, otherwise use store state\n\tconst isOpen = isControlled ? (controlledOpen ?? false) : config.isOpen;\n\n\t// Create wrapped actions that respect controlled mode\n\tconst open = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(true);\n\t\t} else {\n\t\t\tstore.open();\n\t\t}\n\t}, [isControlled, onOpenChange]);\n\n\tconst close = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(false);\n\t\t} else {\n\t\t\tstore.close();\n\t\t}\n\t}, [isControlled, onOpenChange]);\n\n\tconst toggle = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(!controlledOpen);\n\t\t} else {\n\t\t\tstore.toggle();\n\t\t}\n\t}, [isControlled, onOpenChange, controlledOpen]);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\tsize: config.size,\n\t\t\topen,\n\t\t\tclose,\n\t\t\ttoggle,\n\t\t}),\n\t\t[isOpen, config.size, open, close, toggle]\n\t);\n};\n\n/**\n * Access navigation state and routing methods.\n *\n * @example\n * const { navigate, goBack, page, params } = useSupportNavigation();\n */\nexport const useSupportNavigation = () => {\n\tconst navigation = useSelector((state) => state.navigation);\n\tconst { current, previousPages } = navigation;\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tcurrent,\n\t\t\tpage: current.page,\n\t\t\tparams: current.params,\n\t\t\tpreviousPages,\n\t\t\tnavigate: store.navigate,\n\t\t\treplace: store.replace,\n\t\t\tgoBack: store.goBack,\n\t\t\tcanGoBack: previousPages.length > 0,\n\t\t}),\n\t\t[current, previousPages]\n\t);\n};\n\n/**\n * Initialize store with default configuration (used internally by Support component).\n */\nexport const initializeSupportStore = (props: {\n\tsize?: SupportConfig[\"size\"];\n\tdefaultOpen?: boolean;\n}) => {\n\tconst patch: Partial<SupportConfig> = {};\n\n\tif (props.size !== undefined) {\n\t\tpatch.size = props.size;\n\t}\n\n\tif (props.defaultOpen !== undefined) {\n\t\tpatch.isOpen = props.defaultOpen;\n\t}\n\n\tif (Object.keys(patch).length > 0) {\n\t\tstore.updateConfig(patch);\n\t}\n};\n"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,mBAAmB,EAAE,SADnB,OAAO,WAAW,cAAc,OAAO,eAAe,QAC1B,CAAC;AAM7C,SAAS,YACR,UACA,UAAsC,OAAO,IACjC;CACZ,MAAM,eAAe,OAAkB,OAAU;CAEjD,MAAM,aAAa,kBAClB,MAAM,gBAAgB;AACrB,iBAAe;GACd;CAQH,MAAM,WAAW,SANA,qBAChB,WACA,MAAM,UACN,MAAM,SACN,CAEkC;AAEnC,KACC,aAAa,YAAY,UACzB,CAAC,QAAQ,aAAa,SAAS,SAAS,CAExC,cAAa,UAAU;AAGxB,QAAO,aAAa;;;;;;;;AAsBrB,SAAgB,kBAAyC;CACxD,MAAM,QAAQ,aAAa,YAAY,QAAQ;AAE/C,QAAO,eACC;EACN,GAAG;EACH,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,GACD,CAAC,MAAM,CACP;;;;;;;;;;;;;;;;;;;;AA6BF,MAAa,yBAAiD;CAC7D,MAAM,SAAS,aAAa,UAAU,MAAM,OAAO;CACnD,MAAM,kBAAkB,oBAAoB;CAG5C,MAAM,eAAe,iBAAiB,gBAAgB;CACtD,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,eAAe,iBAAiB;CAGtC,MAAM,SAAS,eAAgB,kBAAkB,QAAS,OAAO;CAGjE,MAAM,OAAO,kBAAkB;AAC9B,MAAI,gBAAgB,aACnB,cAAa,KAAK;MAElB,OAAM,MAAM;IAEX,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,QAAQ,kBAAkB;AAC/B,MAAI,gBAAgB,aACnB,cAAa,MAAM;MAEnB,OAAM,OAAO;IAEZ,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,SAAS,kBAAkB;AAChC,MAAI,gBAAgB,aACnB,cAAa,CAAC,eAAe;MAE7B,OAAM,QAAQ;IAEb;EAAC;EAAc;EAAc;EAAe,CAAC;AAEhD,QAAO,eACC;EACN;EACA,MAAM,OAAO;EACb;EACA;EACA;EACA,GACD;EAAC;EAAQ,OAAO;EAAM;EAAM;EAAO;EAAO,CAC1C;;;;;;;;AASF,MAAa,6BAA6B;CAEzC,MAAM,EAAE,SAAS,kBADE,aAAa,UAAU,MAAM,WAAW;AAG3D,QAAO,eACC;EACN;EACA,MAAM,QAAQ;EACd,QAAQ,QAAQ;EAChB;EACA,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,cAAc,SAAS;EAClC,GACD,CAAC,SAAS,cAAc,CACxB;;;;;AAMF,MAAa,0BAA0B,UAGjC;CACL,MAAMA,QAAgC,EAAE;AAExC,KAAI,MAAM,SAAS,OAClB,OAAM,OAAO,MAAM;AAGpB,KAAI,MAAM,gBAAgB,OACzB,OAAM,SAAS,MAAM;AAGtB,KAAI,OAAO,KAAK,MAAM,CAAC,SAAS,EAC/B,OAAM,aAAa,MAAM"}
+{"version":3,"file":"support-store.js","names":["patch: Partial<SupportConfig>"],"sources":["../../../src/support/store/support-store.ts"],"sourcesContent":["\"use client\";\n\nimport {\n\tcreateSupportStore,\n\ttype SupportConfig,\n\ttype SupportStore,\n\ttype SupportStoreState,\n} from \"@cossistant/core\";\nimport { useCallback, useMemo, useRef, useSyncExternalStore } from \"react\";\nimport { useControlledState } from \"../context/controlled-state\";\n\nconst storage = typeof window !== \"undefined\" ? window.localStorage : undefined;\nconst store = createSupportStore({ storage });\n\ntype Selector<T> = (state: SupportStoreState) => T;\n\ntype EqualityChecker<T> = (previous: T, next: T) => boolean;\n\n// Stable subscribe function — store is module-level so this never changes\nconst stableSubscribe = (onStoreChange: () => void) =>\n\tstore.subscribe(() => {\n\t\tonStoreChange();\n\t});\n\nfunction useSelector<TSelected>(\n\tselector: Selector<TSelected>,\n\tisEqual: EqualityChecker<TSelected> = Object.is\n): TSelected {\n\tconst selectionRef = useRef<TSelected>(undefined);\n\n\tconst snapshot = useSyncExternalStore(\n\t\tstableSubscribe,\n\t\tstore.getState,\n\t\tstore.getState\n\t);\n\n\tconst selected = selector(snapshot);\n\n\tif (\n\t\tselectionRef.current === undefined ||\n\t\t!isEqual(selectionRef.current, selected)\n\t) {\n\t\tselectionRef.current = selected;\n\t}\n\n\treturn selectionRef.current as TSelected;\n}\n\nexport type UseSupportStoreResult = SupportStoreState &\n\tPick<\n\t\tSupportStore,\n\t\t| \"navigate\"\n\t\t| \"replace\"\n\t\t| \"goBack\"\n\t\t| \"open\"\n\t\t| \"close\"\n\t\t| \"toggle\"\n\t\t| \"updateConfig\"\n\t\t| \"reset\"\n\t>;\n\n/**\n * Access the support widget store state and actions.\n *\n * @example\n * const { isOpen, navigate, toggle } = useSupportStore();\n */\nexport function useSupportStore(): UseSupportStoreResult {\n\tconst state = useSelector((current) => current);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\t...state,\n\t\t\tnavigate: store.navigate,\n\t\t\treplace: store.replace,\n\t\t\tgoBack: store.goBack,\n\t\t\topen: store.open,\n\t\t\tclose: store.close,\n\t\t\ttoggle: store.toggle,\n\t\t\tupdateConfig: store.updateConfig,\n\t\t\treset: store.reset,\n\t\t}),\n\t\t[state]\n\t);\n}\n\nexport type UseSupportConfigResult = {\n\tisOpen: boolean;\n\tsize: SupportConfig[\"size\"];\n\topen: () => void;\n\tclose: () => void;\n\ttoggle: () => void;\n};\n\n/**\n * Access widget configuration (isOpen, size) and toggle helpers.\n * Supports both controlled and uncontrolled modes.\n *\n * In controlled mode (when `open` prop is provided to Support),\n * the `isOpen` state is driven by the prop, and `open`/`close`/`toggle`\n * will call `onOpenChange` instead of updating internal state.\n *\n * @example\n * // Uncontrolled (internal state)\n * const { isOpen, open, close, toggle } = useSupportConfig();\n *\n * @example\n * // Controlled (external state via Support props)\n * <Support open={isOpen} onOpenChange={setIsOpen}>\n *   <MyComponent />\n * </Support>\n */\nexport const useSupportConfig = (): UseSupportConfigResult => {\n\tconst config = useSelector((state) => state.config);\n\tconst controlledState = useControlledState();\n\n\t// Determine if we're in controlled mode\n\tconst isControlled = controlledState?.isControlled ?? false;\n\tconst controlledOpen = controlledState?.open;\n\tconst onOpenChange = controlledState?.onOpenChange;\n\n\t// Use controlled state if available, otherwise use store state\n\tconst isOpen = isControlled ? (controlledOpen ?? false) : config.isOpen;\n\n\t// Create wrapped actions that respect controlled mode\n\tconst open = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(true);\n\t\t} else {\n\t\t\tstore.open();\n\t\t}\n\t}, [isControlled, onOpenChange]);\n\n\tconst close = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(false);\n\t\t} else {\n\t\t\tstore.close();\n\t\t}\n\t}, [isControlled, onOpenChange]);\n\n\tconst toggle = useCallback(() => {\n\t\tif (isControlled && onOpenChange) {\n\t\t\tonOpenChange(!controlledOpen);\n\t\t} else {\n\t\t\tstore.toggle();\n\t\t}\n\t}, [isControlled, onOpenChange, controlledOpen]);\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tisOpen,\n\t\t\tsize: config.size,\n\t\t\topen,\n\t\t\tclose,\n\t\t\ttoggle,\n\t\t}),\n\t\t[isOpen, config.size, open, close, toggle]\n\t);\n};\n\n/**\n * Access navigation state and routing methods.\n *\n * @example\n * const { navigate, goBack, page, params } = useSupportNavigation();\n */\nexport const useSupportNavigation = () => {\n\tconst navigation = useSelector((state) => state.navigation);\n\tconst { current, previousPages } = navigation;\n\n\treturn useMemo(\n\t\t() => ({\n\t\t\tcurrent,\n\t\t\tpage: current.page,\n\t\t\tparams: current.params,\n\t\t\tpreviousPages,\n\t\t\tnavigate: store.navigate,\n\t\t\treplace: store.replace,\n\t\t\tgoBack: store.goBack,\n\t\t\tcanGoBack: previousPages.length > 0,\n\t\t}),\n\t\t[current, previousPages]\n\t);\n};\n\n/**\n * Initialize store with default configuration (used internally by Support component).\n */\nexport const initializeSupportStore = (props: {\n\tsize?: SupportConfig[\"size\"];\n\tdefaultOpen?: boolean;\n}) => {\n\tconst patch: Partial<SupportConfig> = {};\n\n\tif (props.size !== undefined) {\n\t\tpatch.size = props.size;\n\t}\n\n\tif (props.defaultOpen !== undefined) {\n\t\tpatch.isOpen = props.defaultOpen;\n\t}\n\n\tif (Object.keys(patch).length > 0) {\n\t\tstore.updateConfig(patch);\n\t}\n};\n"],"mappings":";;;;;;;AAYA,MAAM,QAAQ,mBAAmB,EAAE,SADnB,OAAO,WAAW,cAAc,OAAO,eAAe,QAC1B,CAAC;AAO7C,MAAM,mBAAmB,kBACxB,MAAM,gBAAgB;AACrB,gBAAe;EACd;AAEH,SAAS,YACR,UACA,UAAsC,OAAO,IACjC;CACZ,MAAM,eAAe,OAAkB,OAAU;CAQjD,MAAM,WAAW,SANA,qBAChB,iBACA,MAAM,UACN,MAAM,SACN,CAEkC;AAEnC,KACC,aAAa,YAAY,UACzB,CAAC,QAAQ,aAAa,SAAS,SAAS,CAExC,cAAa,UAAU;AAGxB,QAAO,aAAa;;;;;;;;AAsBrB,SAAgB,kBAAyC;CACxD,MAAM,QAAQ,aAAa,YAAY,QAAQ;AAE/C,QAAO,eACC;EACN,GAAG;EACH,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,MAAM,MAAM;EACZ,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,cAAc,MAAM;EACpB,OAAO,MAAM;EACb,GACD,CAAC,MAAM,CACP;;;;;;;;;;;;;;;;;;;;AA6BF,MAAa,yBAAiD;CAC7D,MAAM,SAAS,aAAa,UAAU,MAAM,OAAO;CACnD,MAAM,kBAAkB,oBAAoB;CAG5C,MAAM,eAAe,iBAAiB,gBAAgB;CACtD,MAAM,iBAAiB,iBAAiB;CACxC,MAAM,eAAe,iBAAiB;CAGtC,MAAM,SAAS,eAAgB,kBAAkB,QAAS,OAAO;CAGjE,MAAM,OAAO,kBAAkB;AAC9B,MAAI,gBAAgB,aACnB,cAAa,KAAK;MAElB,OAAM,MAAM;IAEX,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,QAAQ,kBAAkB;AAC/B,MAAI,gBAAgB,aACnB,cAAa,MAAM;MAEnB,OAAM,OAAO;IAEZ,CAAC,cAAc,aAAa,CAAC;CAEhC,MAAM,SAAS,kBAAkB;AAChC,MAAI,gBAAgB,aACnB,cAAa,CAAC,eAAe;MAE7B,OAAM,QAAQ;IAEb;EAAC;EAAc;EAAc;EAAe,CAAC;AAEhD,QAAO,eACC;EACN;EACA,MAAM,OAAO;EACb;EACA;EACA;EACA,GACD;EAAC;EAAQ,OAAO;EAAM;EAAM;EAAO;EAAO,CAC1C;;;;;;;;AASF,MAAa,6BAA6B;CAEzC,MAAM,EAAE,SAAS,kBADE,aAAa,UAAU,MAAM,WAAW;AAG3D,QAAO,eACC;EACN;EACA,MAAM,QAAQ;EACd,QAAQ,QAAQ;EAChB;EACA,UAAU,MAAM;EAChB,SAAS,MAAM;EACf,QAAQ,MAAM;EACd,WAAW,cAAc,SAAS;EAClC,GACD,CAAC,SAAS,cAAc,CACxB;;;;;AAMF,MAAa,0BAA0B,UAGjC;CACL,MAAMA,QAAgC,EAAE;AAExC,KAAI,MAAM,SAAS,OAClB,OAAM,OAAO,MAAM;AAGpB,KAAI,MAAM,gBAAgB,OACzB,OAAM,SAAS,MAAM;AAGtB,KAAI,OAAO,KAAK,MAAM,CAAC,SAAS,EAC/B,OAAM,aAAa,MAAM"}

package/support/{support-DmViRaga.css → support-Dc5L__HC.css}

@@ -320,6 +320,17 @@
 }
 
 @layer utilities {
+	@keyframes co-bounce-dot {
+		0%,
+		80%,
+		100% {
+			transform: translateY(0);
+		}
+		40% {
+			transform: translateY(-6px);
+		}
+	}
+
 	.cossistant {
 		/* Native scrollbar styling */
 		.co-scrollbar-thin {
@@ -355,33 +366,22 @@
 			animation-delay: 400ms;
 		}
 
-		@keyframes bounce-dot {
-			0%,
-			80%,
-			100% {
-				transform: translateY(0);
-			}
-			40% {
-				transform: translateY(-6px);
-			}
-		}
-
 		.dot-bounce-1 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0s;
 		}
 
 		.dot-bounce-2 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0.16s;
 		}
 
 		.dot-bounce-3 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0.32s;
 		}
 	}
 }
 
 
-/*# sourceMappingURL=support-DmViRaga.css.map*/
+/*# sourceMappingURL=support-Dc5L__HC.css.map*/

package/support/{support-DmViRaga.css.map → support-Dc5L__HC.css.map}

@@ -1 +1 @@
-{"version":3,"file":"support-DmViRaga.css","names":[],"sources":["../../src/support/support.css"],"sourcesContent":["/*\n* This indicates to tailwind to\n* compile classes from Cossistant with the host tailwind config\n*/\n@source \"./components\";\n@source \"./pages\";\n\n@layer base {\n\t.cossistant {\n\t\t@apply text-co-primary;\n\n\t\tcolor-scheme: inherit;\n\n\t\t/* Typeface tokens */\n\t\t--co-font-sans: var(--co-theme-font-sans, \"Geist\", \"Inter\", sans-serif);\n\t\t--co-font-mono: var(\n\t\t\t--co-theme-font-mono,\n\t\t\t\"Geist Mono\",\n\t\t\t\"Inter Mono\",\n\t\t\tmonospace\n\t\t);\n\n\t\t/* Core surfaces */\n\t\t--co-radius: var(--co-theme-radius, 0.375rem);\n\t\t--co-background-base: var(--co-theme-background, oklch(99% 0 0));\n\t\t--co-foreground-base: var(--co-theme-foreground, oklch(20.5% 0 0));\n\t\t--co-popover-base: var(--co-theme-popover, var(--co-background-base));\n\t\t--co-popover-foreground-base: var(\n\t\t\t--co-theme-popover-foreground,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-primary-base: var(--co-theme-primary, oklch(14.5% 0 0));\n\t\t--co-primary-foreground-base: var(\n\t\t\t--co-theme-primary-foreground,\n\t\t\toklch(98.5% 0 0)\n\t\t);\n\t\t--co-secondary-base: var(--co-theme-secondary, oklch(97% 0 0));\n\t\t--co-secondary-foreground-base: var(\n\t\t\t--co-theme-secondary-foreground,\n\t\t\toklch(14.5% 0 0)\n\t\t);\n\t\t--co-border-base: var(--co-theme-border, oklch(92.2% 0 0));\n\t\t--co-input-base: var(--co-theme-input, oklch(92.2% 0 0));\n\t\t--co-ring-base: var(--co-theme-ring, var(--co-primary-base));\n\t\t--co-accent-base: var(--co-theme-accent, var(--co-primary-base));\n\t\t--co-accent-foreground-base: var(\n\t\t\t--co-theme-accent-foreground,\n\t\t\tvar(--co-primary-foreground-base)\n\t\t);\n\n\t\t/* Neutral shades derived from the background */\n\t\t--co-background-50-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 98%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-100-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 97%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-200-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 96%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-300-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 95%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-400-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 94%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-500-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 93%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-600-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 92%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\n\t\t/* Muted tones */\n\t\t--co-muted-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 85%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-muted-foreground-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-foreground-base) 70%,\n\t\t\twhite\n\t\t);\n\n\t\t/* Public tokens consumed by Tailwind theme */\n\t\t--co-background: var(--co-background-base);\n\t\t--co-background-50: var(\n\t\t\t--co-theme-background-50,\n\t\t\tvar(--co-background-50-mix, oklch(92% 0 0))\n\t\t);\n\t\t--co-background-100: var(\n\t\t\t--co-theme-background-100,\n\t\t\tvar(--co-background-100-mix, oklch(93% 0 0))\n\t\t);\n\t\t--co-background-200: var(\n\t\t\t--co-theme-background-200,\n\t\t\tvar(--co-background-200-mix, oklch(94% 0 0))\n\t\t);\n\t\t--co-background-300: var(\n\t\t\t--co-theme-background-300,\n\t\t\tvar(--co-background-300-mix, oklch(95% 0 0))\n\t\t);\n\t\t--co-background-400: var(\n\t\t\t--co-theme-background-400,\n\t\t\tvar(--co-background-400-mix, oklch(96% 0 0))\n\t\t);\n\t\t--co-background-500: var(\n\t\t\t--co-theme-background-500,\n\t\t\tvar(--co-background-500-mix, oklch(97% 0 0))\n\t\t);\n\t\t--co-background-600: var(\n\t\t\t--co-theme-background-600,\n\t\t\tvar(--co-background-600-mix, oklch(98% 0 0))\n\t\t);\n\n\t\t--co-foreground: var(--co-foreground-base);\n\t\t--co-popover: var(--co-popover-base);\n\t\t--co-popover-foreground: var(--co-popover-foreground-base);\n\t\t--co-primary: var(--co-primary-base);\n\t\t--co-primary-foreground: var(--co-primary-foreground-base);\n\t\t--co-secondary: var(--co-secondary-base);\n\t\t--co-secondary-foreground: var(--co-secondary-foreground-base);\n\t\t--co-muted: var(--co-theme-muted, var(--co-muted-mix, oklch(97% 0 0)));\n\t\t--co-muted-foreground: var(\n\t\t\t--co-theme-muted-foreground,\n\t\t\tvar(--co-muted-foreground-mix, oklch(55.6% 0 0))\n\t\t);\n\t\t--co-border: var(--co-border-base);\n\t\t--co-input: var(--co-input-base);\n\t\t--co-ring: var(--co-ring-base);\n\t\t--co-accent: var(--co-accent-base);\n\t\t--co-accent-foreground: var(--co-accent-foreground-base);\n\n\t\t/* Accent palette */\n\t\t--co-pink: var(--co-theme-pink, oklch(76.3% 0.152 354));\n\t\t--co-yellow: var(--co-theme-yellow, oklch(86.4% 0.144 99));\n\t\t--co-blue: var(--co-theme-blue, oklch(72.5% 0.132 241));\n\t\t--co-orange: var(--co-theme-orange, oklch(74.5% 0.166 50));\n\n\t\t/* Status colors */\n\t\t--co-destructive: var(--co-theme-destructive, oklch(57.7% 0.245 27.325));\n\t\t--co-destructive-foreground: var(\n\t\t\t--co-theme-destructive-foreground,\n\t\t\toklch(57.7% 0.245 27.325)\n\t\t);\n\t\t--co-success: var(--co-theme-success, oklch(71.7% 0.18 142));\n\t\t--co-success-foreground: var(\n\t\t\t--co-theme-success-foreground,\n\t\t\toklch(26.5% 0.052 142.7)\n\t\t);\n\t\t--co-neutral: var(--co-theme-neutral, oklch(60.8% 0 0));\n\t\t--co-neutral-foreground: var(\n\t\t\t--co-theme-neutral-foreground,\n\t\t\toklch(25.6% 0 0)\n\t\t);\n\t\t--co-warning: var(--co-theme-warning, oklch(86.4% 0.144 99));\n\t\t--co-warning-foreground: var(\n\t\t\t--co-theme-warning-foreground,\n\t\t\toklch(41.4% 0.071 99)\n\t\t);\n\n\t\t/* Tailwind theme mapping - scoped to widget */\n\t\t@theme inline {\n\t\t\t--font-co-sans: var(--co-font-sans);\n\t\t\t--font-co-mono: var(--co-font-mono);\n\t\t\t--color-co-background: var(--co-background);\n\t\t\t--color-co-background-50: var(--co-background-50);\n\t\t\t--color-co-background-100: var(--co-background-100);\n\t\t\t--color-co-background-200: var(--co-background-200);\n\t\t\t--color-co-background-300: var(--co-background-300);\n\t\t\t--color-co-background-400: var(--co-background-400);\n\t\t\t--color-co-background-500: var(--co-background-500);\n\t\t\t--color-co-background-600: var(--co-background-600);\n\n\t\t\t--color-co-foreground: var(--co-foreground);\n\n\t\t\t--color-co-primary: var(--co-primary);\n\t\t\t--color-co-primary-foreground: var(--co-primary-foreground);\n\t\t\t--color-co-secondary: var(--co-secondary);\n\t\t\t--color-co-secondary-foreground: var(--co-secondary-foreground);\n\t\t\t--color-co-muted: var(--co-muted);\n\t\t\t--color-co-muted-foreground: var(--co-muted-foreground);\n\t\t\t--color-co-border: var(--co-border);\n\t\t\t--color-co-input: var(--co-input);\n\t\t\t--color-co-ring: var(--co-ring);\n\t\t\t--radius-co: var(--co-radius);\n\n\t\t\t/* custom colors */\n\t\t\t--color-co-pink: var(--co-pink);\n\t\t\t--color-co-yellow: var(--co-yellow);\n\t\t\t--color-co-blue: var(--co-blue);\n\t\t\t--color-co-orange: var(--co-orange);\n\n\t\t\t/* status colors */\n\t\t\t--color-co-destructive: var(--co-destructive);\n\t\t\t--color-co-destructive-foreground: var(--co-destructive-foreground);\n\t\t\t--color-co-success: var(--co-success);\n\t\t\t--color-co-success-foreground: var(--co-success-foreground);\n\t\t\t--color-co-neutral: var(--co-neutral);\n\t\t\t--color-co-neutral-foreground: var(--co-neutral-foreground);\n\t\t\t--color-co-warning: var(--co-warning);\n\t\t\t--color-co-warning-foreground: var(--co-warning-foreground);\n\t\t}\n\t}\n\n\t.dark .cossistant,\n\t.cossistant[data-color-scheme=\"dark\"] {\n\t\t/* Dark mode defaults */\n\t\t--co-background-base: var(--co-theme-background, oklch(15.5% 0 0));\n\t\t--co-foreground-base: var(--co-theme-foreground, oklch(95% 0 0));\n\t\t--co-popover-base: var(--co-theme-popover, oklch(14.5% 0 0));\n\t\t--co-popover-foreground-base: var(\n\t\t\t--co-theme-popover-foreground,\n\t\t\toklch(95% 0 0)\n\t\t);\n\t\t--co-primary-base: var(--co-theme-primary, oklch(98.5% 0 0));\n\t\t--co-primary-foreground-base: var(\n\t\t\t--co-theme-primary-foreground,\n\t\t\toklch(14.5% 0 0)\n\t\t);\n\t\t--co-secondary-base: var(--co-theme-secondary, oklch(26.9% 0 0));\n\t\t--co-secondary-foreground-base: var(\n\t\t\t--co-theme-secondary-foreground,\n\t\t\toklch(95% 0 0)\n\t\t);\n\t\t--co-border-base: var(--co-theme-border, oklch(26.9% 0 0));\n\t\t--co-input-base: var(--co-theme-input, oklch(26.9% 0 0));\n\t\t--co-ring-base: var(--co-theme-ring, var(--co-primary-base));\n\t\t--co-accent-base: var(--co-theme-accent, var(--co-primary-base));\n\t\t--co-accent-foreground-base: var(\n\t\t\t--co-theme-accent-foreground,\n\t\t\tvar(--co-primary-foreground-base)\n\t\t);\n\n\t\t--co-muted-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 55%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-muted-foreground-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-foreground-base) 65%,\n\t\t\twhite\n\t\t);\n\n\t\t--co-background-50-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 98%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-100-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 96%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-200-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 94%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-300-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 92%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-400-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 90%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-500-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 88%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-600-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 86%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\n\t\t--co-pink: var(--co-theme-pink, oklch(84.2% 0.109 354));\n\t\t--co-yellow: var(--co-theme-yellow, oklch(90.3% 0.111 99));\n\t\t--co-blue: var(--co-theme-blue, oklch(79.8% 0.089 241));\n\t\t--co-orange: var(--co-theme-orange, oklch(68.2% 0.194 50));\n\n\t\t--co-destructive: var(--co-theme-destructive, oklch(39.6% 0.141 25.723));\n\t\t--co-destructive-foreground: var(\n\t\t\t--co-theme-destructive-foreground,\n\t\t\toklch(63.7% 0.237 25.331)\n\t\t);\n\t\t--co-success: var(--co-theme-success, oklch(60% 0.15 142));\n\t\t--co-success-foreground: var(\n\t\t\t--co-theme-success-foreground,\n\t\t\toklch(85% 0.12 142)\n\t\t);\n\t\t--co-neutral: var(--co-theme-neutral, oklch(50% 0 0));\n\t\t--co-neutral-foreground: var(--co-theme-neutral-foreground, oklch(85% 0 0));\n\t\t--co-warning: var(--co-theme-warning, oklch(90.3% 0.111 99));\n\t\t--co-warning-foreground: var(\n\t\t\t--co-theme-warning-foreground,\n\t\t\toklch(85% 0.1 99)\n\t\t);\n\t}\n}\n\n@layer utilities {\n\t.cossistant {\n\t\t/* Native scrollbar styling */\n\t\t.co-scrollbar-thin {\n\t\t\tscrollbar-width: thin;\n\t\t\tscrollbar-color: oklch(from var(--co-primary) l c h / 0.3) transparent;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar {\n\t\t\twidth: 8px;\n\t\t\theight: 8px;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-track {\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-thumb {\n\t\t\tbackground-color: oklch(from var(--co-primary) l c h / 0.3);\n\t\t\tborder-radius: 4px;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-thumb:hover {\n\t\t\tbackground-color: oklch(from var(--co-primary) l c h / 0.5);\n\t\t}\n\n\t\t.animation-delay-0 {\n\t\t\tanimation-delay: 0ms;\n\t\t}\n\t\t.animation-delay-200 {\n\t\t\tanimation-delay: 200ms;\n\t\t}\n\t\t.animation-delay-400 {\n\t\t\tanimation-delay: 400ms;\n\t\t}\n\n\t\t@keyframes bounce-dot {\n\t\t\t0%,\n\t\t\t80%,\n\t\t\t100% {\n\t\t\t\ttransform: translateY(0);\n\t\t\t}\n\t\t\t40% {\n\t\t\t\ttransform: translateY(-6px);\n\t\t\t}\n\t\t}\n\n\t\t.dot-bounce-1 {\n\t\t\tanimation: bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0s;\n\t\t}\n\n\t\t.dot-bounce-2 {\n\t\t\tanimation: bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0.16s;\n\t\t}\n\n\t\t.dot-bounce-3 {\n\t\t\tanimation: bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}
+{"version":3,"file":"support-Dc5L__HC.css","names":[],"sources":["../../src/support/support.css"],"sourcesContent":["/*\n* This indicates to tailwind to\n* compile classes from Cossistant with the host tailwind config\n*/\n@source \"./components\";\n@source \"./pages\";\n\n@layer base {\n\t.cossistant {\n\t\t@apply text-co-primary;\n\n\t\tcolor-scheme: inherit;\n\n\t\t/* Typeface tokens */\n\t\t--co-font-sans: var(--co-theme-font-sans, \"Geist\", \"Inter\", sans-serif);\n\t\t--co-font-mono: var(\n\t\t\t--co-theme-font-mono,\n\t\t\t\"Geist Mono\",\n\t\t\t\"Inter Mono\",\n\t\t\tmonospace\n\t\t);\n\n\t\t/* Core surfaces */\n\t\t--co-radius: var(--co-theme-radius, 0.375rem);\n\t\t--co-background-base: var(--co-theme-background, oklch(99% 0 0));\n\t\t--co-foreground-base: var(--co-theme-foreground, oklch(20.5% 0 0));\n\t\t--co-popover-base: var(--co-theme-popover, var(--co-background-base));\n\t\t--co-popover-foreground-base: var(\n\t\t\t--co-theme-popover-foreground,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-primary-base: var(--co-theme-primary, oklch(14.5% 0 0));\n\t\t--co-primary-foreground-base: var(\n\t\t\t--co-theme-primary-foreground,\n\t\t\toklch(98.5% 0 0)\n\t\t);\n\t\t--co-secondary-base: var(--co-theme-secondary, oklch(97% 0 0));\n\t\t--co-secondary-foreground-base: var(\n\t\t\t--co-theme-secondary-foreground,\n\t\t\toklch(14.5% 0 0)\n\t\t);\n\t\t--co-border-base: var(--co-theme-border, oklch(92.2% 0 0));\n\t\t--co-input-base: var(--co-theme-input, oklch(92.2% 0 0));\n\t\t--co-ring-base: var(--co-theme-ring, var(--co-primary-base));\n\t\t--co-accent-base: var(--co-theme-accent, var(--co-primary-base));\n\t\t--co-accent-foreground-base: var(\n\t\t\t--co-theme-accent-foreground,\n\t\t\tvar(--co-primary-foreground-base)\n\t\t);\n\n\t\t/* Neutral shades derived from the background */\n\t\t--co-background-50-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 98%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-100-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 97%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-200-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 96%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-300-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 95%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-400-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 94%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-500-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 93%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-600-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 92%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\n\t\t/* Muted tones */\n\t\t--co-muted-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 85%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-muted-foreground-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-foreground-base) 70%,\n\t\t\twhite\n\t\t);\n\n\t\t/* Public tokens consumed by Tailwind theme */\n\t\t--co-background: var(--co-background-base);\n\t\t--co-background-50: var(\n\t\t\t--co-theme-background-50,\n\t\t\tvar(--co-background-50-mix, oklch(92% 0 0))\n\t\t);\n\t\t--co-background-100: var(\n\t\t\t--co-theme-background-100,\n\t\t\tvar(--co-background-100-mix, oklch(93% 0 0))\n\t\t);\n\t\t--co-background-200: var(\n\t\t\t--co-theme-background-200,\n\t\t\tvar(--co-background-200-mix, oklch(94% 0 0))\n\t\t);\n\t\t--co-background-300: var(\n\t\t\t--co-theme-background-300,\n\t\t\tvar(--co-background-300-mix, oklch(95% 0 0))\n\t\t);\n\t\t--co-background-400: var(\n\t\t\t--co-theme-background-400,\n\t\t\tvar(--co-background-400-mix, oklch(96% 0 0))\n\t\t);\n\t\t--co-background-500: var(\n\t\t\t--co-theme-background-500,\n\t\t\tvar(--co-background-500-mix, oklch(97% 0 0))\n\t\t);\n\t\t--co-background-600: var(\n\t\t\t--co-theme-background-600,\n\t\t\tvar(--co-background-600-mix, oklch(98% 0 0))\n\t\t);\n\n\t\t--co-foreground: var(--co-foreground-base);\n\t\t--co-popover: var(--co-popover-base);\n\t\t--co-popover-foreground: var(--co-popover-foreground-base);\n\t\t--co-primary: var(--co-primary-base);\n\t\t--co-primary-foreground: var(--co-primary-foreground-base);\n\t\t--co-secondary: var(--co-secondary-base);\n\t\t--co-secondary-foreground: var(--co-secondary-foreground-base);\n\t\t--co-muted: var(--co-theme-muted, var(--co-muted-mix, oklch(97% 0 0)));\n\t\t--co-muted-foreground: var(\n\t\t\t--co-theme-muted-foreground,\n\t\t\tvar(--co-muted-foreground-mix, oklch(55.6% 0 0))\n\t\t);\n\t\t--co-border: var(--co-border-base);\n\t\t--co-input: var(--co-input-base);\n\t\t--co-ring: var(--co-ring-base);\n\t\t--co-accent: var(--co-accent-base);\n\t\t--co-accent-foreground: var(--co-accent-foreground-base);\n\n\t\t/* Accent palette */\n\t\t--co-pink: var(--co-theme-pink, oklch(76.3% 0.152 354));\n\t\t--co-yellow: var(--co-theme-yellow, oklch(86.4% 0.144 99));\n\t\t--co-blue: var(--co-theme-blue, oklch(72.5% 0.132 241));\n\t\t--co-orange: var(--co-theme-orange, oklch(74.5% 0.166 50));\n\n\t\t/* Status colors */\n\t\t--co-destructive: var(--co-theme-destructive, oklch(57.7% 0.245 27.325));\n\t\t--co-destructive-foreground: var(\n\t\t\t--co-theme-destructive-foreground,\n\t\t\toklch(57.7% 0.245 27.325)\n\t\t);\n\t\t--co-success: var(--co-theme-success, oklch(71.7% 0.18 142));\n\t\t--co-success-foreground: var(\n\t\t\t--co-theme-success-foreground,\n\t\t\toklch(26.5% 0.052 142.7)\n\t\t);\n\t\t--co-neutral: var(--co-theme-neutral, oklch(60.8% 0 0));\n\t\t--co-neutral-foreground: var(\n\t\t\t--co-theme-neutral-foreground,\n\t\t\toklch(25.6% 0 0)\n\t\t);\n\t\t--co-warning: var(--co-theme-warning, oklch(86.4% 0.144 99));\n\t\t--co-warning-foreground: var(\n\t\t\t--co-theme-warning-foreground,\n\t\t\toklch(41.4% 0.071 99)\n\t\t);\n\n\t\t/* Tailwind theme mapping - scoped to widget */\n\t\t@theme inline {\n\t\t\t--font-co-sans: var(--co-font-sans);\n\t\t\t--font-co-mono: var(--co-font-mono);\n\t\t\t--color-co-background: var(--co-background);\n\t\t\t--color-co-background-50: var(--co-background-50);\n\t\t\t--color-co-background-100: var(--co-background-100);\n\t\t\t--color-co-background-200: var(--co-background-200);\n\t\t\t--color-co-background-300: var(--co-background-300);\n\t\t\t--color-co-background-400: var(--co-background-400);\n\t\t\t--color-co-background-500: var(--co-background-500);\n\t\t\t--color-co-background-600: var(--co-background-600);\n\n\t\t\t--color-co-foreground: var(--co-foreground);\n\n\t\t\t--color-co-primary: var(--co-primary);\n\t\t\t--color-co-primary-foreground: var(--co-primary-foreground);\n\t\t\t--color-co-secondary: var(--co-secondary);\n\t\t\t--color-co-secondary-foreground: var(--co-secondary-foreground);\n\t\t\t--color-co-muted: var(--co-muted);\n\t\t\t--color-co-muted-foreground: var(--co-muted-foreground);\n\t\t\t--color-co-border: var(--co-border);\n\t\t\t--color-co-input: var(--co-input);\n\t\t\t--color-co-ring: var(--co-ring);\n\t\t\t--radius-co: var(--co-radius);\n\n\t\t\t/* custom colors */\n\t\t\t--color-co-pink: var(--co-pink);\n\t\t\t--color-co-yellow: var(--co-yellow);\n\t\t\t--color-co-blue: var(--co-blue);\n\t\t\t--color-co-orange: var(--co-orange);\n\n\t\t\t/* status colors */\n\t\t\t--color-co-destructive: var(--co-destructive);\n\t\t\t--color-co-destructive-foreground: var(--co-destructive-foreground);\n\t\t\t--color-co-success: var(--co-success);\n\t\t\t--color-co-success-foreground: var(--co-success-foreground);\n\t\t\t--color-co-neutral: var(--co-neutral);\n\t\t\t--color-co-neutral-foreground: var(--co-neutral-foreground);\n\t\t\t--color-co-warning: var(--co-warning);\n\t\t\t--color-co-warning-foreground: var(--co-warning-foreground);\n\t\t}\n\t}\n\n\t.dark .cossistant,\n\t.cossistant[data-color-scheme=\"dark\"] {\n\t\t/* Dark mode defaults */\n\t\t--co-background-base: var(--co-theme-background, oklch(15.5% 0 0));\n\t\t--co-foreground-base: var(--co-theme-foreground, oklch(95% 0 0));\n\t\t--co-popover-base: var(--co-theme-popover, oklch(14.5% 0 0));\n\t\t--co-popover-foreground-base: var(\n\t\t\t--co-theme-popover-foreground,\n\t\t\toklch(95% 0 0)\n\t\t);\n\t\t--co-primary-base: var(--co-theme-primary, oklch(98.5% 0 0));\n\t\t--co-primary-foreground-base: var(\n\t\t\t--co-theme-primary-foreground,\n\t\t\toklch(14.5% 0 0)\n\t\t);\n\t\t--co-secondary-base: var(--co-theme-secondary, oklch(26.9% 0 0));\n\t\t--co-secondary-foreground-base: var(\n\t\t\t--co-theme-secondary-foreground,\n\t\t\toklch(95% 0 0)\n\t\t);\n\t\t--co-border-base: var(--co-theme-border, oklch(26.9% 0 0));\n\t\t--co-input-base: var(--co-theme-input, oklch(26.9% 0 0));\n\t\t--co-ring-base: var(--co-theme-ring, var(--co-primary-base));\n\t\t--co-accent-base: var(--co-theme-accent, var(--co-primary-base));\n\t\t--co-accent-foreground-base: var(\n\t\t\t--co-theme-accent-foreground,\n\t\t\tvar(--co-primary-foreground-base)\n\t\t);\n\n\t\t--co-muted-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 55%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-muted-foreground-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-foreground-base) 65%,\n\t\t\twhite\n\t\t);\n\n\t\t--co-background-50-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 98%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-100-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 96%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-200-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 94%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-300-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 92%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-400-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 90%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-500-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 88%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\t\t--co-background-600-mix: color-mix(\n\t\t\tin oklch,\n\t\t\tvar(--co-background-base) 86%,\n\t\t\tvar(--co-foreground-base)\n\t\t);\n\n\t\t--co-pink: var(--co-theme-pink, oklch(84.2% 0.109 354));\n\t\t--co-yellow: var(--co-theme-yellow, oklch(90.3% 0.111 99));\n\t\t--co-blue: var(--co-theme-blue, oklch(79.8% 0.089 241));\n\t\t--co-orange: var(--co-theme-orange, oklch(68.2% 0.194 50));\n\n\t\t--co-destructive: var(--co-theme-destructive, oklch(39.6% 0.141 25.723));\n\t\t--co-destructive-foreground: var(\n\t\t\t--co-theme-destructive-foreground,\n\t\t\toklch(63.7% 0.237 25.331)\n\t\t);\n\t\t--co-success: var(--co-theme-success, oklch(60% 0.15 142));\n\t\t--co-success-foreground: var(\n\t\t\t--co-theme-success-foreground,\n\t\t\toklch(85% 0.12 142)\n\t\t);\n\t\t--co-neutral: var(--co-theme-neutral, oklch(50% 0 0));\n\t\t--co-neutral-foreground: var(--co-theme-neutral-foreground, oklch(85% 0 0));\n\t\t--co-warning: var(--co-theme-warning, oklch(90.3% 0.111 99));\n\t\t--co-warning-foreground: var(\n\t\t\t--co-theme-warning-foreground,\n\t\t\toklch(85% 0.1 99)\n\t\t);\n\t}\n}\n\n@layer utilities {\n\t@keyframes co-bounce-dot {\n\t\t0%,\n\t\t80%,\n\t\t100% {\n\t\t\ttransform: translateY(0);\n\t\t}\n\t\t40% {\n\t\t\ttransform: translateY(-6px);\n\t\t}\n\t}\n\n\t.cossistant {\n\t\t/* Native scrollbar styling */\n\t\t.co-scrollbar-thin {\n\t\t\tscrollbar-width: thin;\n\t\t\tscrollbar-color: oklch(from var(--co-primary) l c h / 0.3) transparent;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar {\n\t\t\twidth: 8px;\n\t\t\theight: 8px;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-track {\n\t\t\tbackground: transparent;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-thumb {\n\t\t\tbackground-color: oklch(from var(--co-primary) l c h / 0.3);\n\t\t\tborder-radius: 4px;\n\t\t}\n\n\t\t.co-scrollbar-thin::-webkit-scrollbar-thumb:hover {\n\t\t\tbackground-color: oklch(from var(--co-primary) l c h / 0.5);\n\t\t}\n\n\t\t.animation-delay-0 {\n\t\t\tanimation-delay: 0ms;\n\t\t}\n\t\t.animation-delay-200 {\n\t\t\tanimation-delay: 200ms;\n\t\t}\n\t\t.animation-delay-400 {\n\t\t\tanimation-delay: 400ms;\n\t\t}\n\n\t\t.dot-bounce-1 {\n\t\t\tanimation: co-bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0s;\n\t\t}\n\n\t\t.dot-bounce-2 {\n\t\t\tanimation: co-bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0.16s;\n\t\t}\n\n\t\t.dot-bounce-3 {\n\t\t\tanimation: co-bounce-dot 1.4s infinite;\n\t\t\tanimation-delay: 0.32s;\n\t\t}\n\t}\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA"}

package/{tailwind.css → support/support.css}

@@ -320,6 +320,17 @@
 }
 
 @layer utilities {
+	@keyframes co-bounce-dot {
+		0%,
+		80%,
+		100% {
+			transform: translateY(0);
+		}
+		40% {
+			transform: translateY(-6px);
+		}
+	}
+
 	.cossistant {
 		/* Native scrollbar styling */
 		.co-scrollbar-thin {
@@ -355,29 +366,18 @@
 			animation-delay: 400ms;
 		}
 
-		@keyframes bounce-dot {
-			0%,
-			80%,
-			100% {
-				transform: translateY(0);
-			}
-			40% {
-				transform: translateY(-6px);
-			}
-		}
-
 		.dot-bounce-1 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0s;
 		}
 
 		.dot-bounce-2 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0.16s;
 		}
 
 		.dot-bounce-3 {
-			animation: bounce-dot 1.4s infinite;
+			animation: co-bounce-dot 1.4s infinite;
 			animation-delay: 0.32s;
 		}
 	}

package/support-config.d.ts

@@ -1,10 +1,36 @@
 import * as React$1 from "react";
-import { DefaultMessage } from "@cossistant/types";
+import { DefaultMessage as DefaultMessage$1, SenderType } from "@cossistant/types";
 
 //#region src/support-config.d.ts
+type DefaultMessageProps = {
+  content: string;
+  senderType: SenderType;
+  senderId?: string;
+};
+/**
+ * Declarative message entry for `SupportConfig`.
+ *
+ * @example
+ * <SupportConfig>
+ *   <DefaultMessage senderType="team_member" content="How can we help?" />
+ * </SupportConfig>
+ */
+declare function DefaultMessage(_props: DefaultMessageProps): React$1.ReactElement | null;
+declare namespace DefaultMessage {
+  var displayName: string;
+}
+declare function extractDefaultMessagesFromChildren(children: React$1.ReactNode): DefaultMessage$1[];
+declare function resolveSupportConfigMessages({
+  children,
+  defaultMessages
+}: {
+  children?: React$1.ReactNode;
+  defaultMessages?: DefaultMessage$1[];
+}): DefaultMessage$1[] | undefined;
 type SupportConfigProps = {
-  defaultMessages?: DefaultMessage[];
+  defaultMessages?: DefaultMessage$1[];
   quickOptions?: string[];
+  children?: React$1.ReactNode;
 };
 /**
  * Component exposed by Cossistant allowing you to change the support widget default messages and quick response whenever rendered.
@@ -12,10 +38,11 @@ type SupportConfigProps = {
 declare const SupportConfig: {
   ({
     defaultMessages,
-    quickOptions
+    quickOptions,
+    children
   }: SupportConfigProps): React$1.ReactElement | null;
   displayName: string;
 };
 //#endregion
-export { SupportConfig, SupportConfigProps };
+export { DefaultMessage, DefaultMessageProps, SupportConfig, SupportConfigProps, extractDefaultMessagesFromChildren, resolveSupportConfigMessages };
 //# sourceMappingURL=support-config.d.ts.map

package/support-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"support-config.d.ts","names":[],"sources":["../src/support-config.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,kBAAA;oBACO;EADP,YAAA,CAAA,EAAA,MAAkB,EAAA;AAQ9B,CAAA;;;;AAGwB,cAHX,aAGiB,EAAA;EAAY,CAAA;IAAA,eAAA;IAAA;EAAA,CAAA,EAAvC,kBAAuC,CAAA,EAAlB,OAAA,CAAM,YAAY,GAAA,IAAA"}
+{"version":3,"file":"support-config.d.ts","names":[],"sources":["../src/support-config.tsx"],"sourcesContent":[],"mappings":";;;;KASY,mBAAA;;EAAA,UAAA,EAEC,UAFkB;EAcf,QAAA,CAAA,EAAA,MAAc;;AAc9B;AA0CA;;;;;;;AAeY,iBAvEI,cAAA,CAwEG,MAAA,EAvEV,mBAyES,CAAA,EAxEf,OAAA,CAAM,YAwEkB,GAAA,IAAA;AAMd,kBAhFG,cAAA,CAyGf;;;iBA3Fe,kCAAA,WACL,OAAA,CAAM,YACd;AAoEA,iBA5Ba,4BAAA,CA4Bb;EAAA,QAAA;EAAA;CAAA,EAAA;EAAqB,QAAM,CAAA,EAxBlB,OAAA,CAAM,SAwBY;EAAY,eAAA,CAAA,EAvBvB,gBAuBuB,EAAA;IAtBtC;KASQ,kBAAA;oBACO;;aAEP,OAAA,CAAM;;;;;cAML;;;;;KAIV,qBAAqB,OAAA,CAAM"}

package/support-config.js

@@ -5,13 +5,61 @@ import * as React$1 from "react";
 
 //#region src/support-config.tsx
 /**
+* Declarative message entry for `SupportConfig`.
+*
+* @example
+* <SupportConfig>
+*   <DefaultMessage senderType="team_member" content="How can we help?" />
+* </SupportConfig>
+*/
+function DefaultMessage(_props) {
+	return null;
+}
+DefaultMessage.displayName = "DefaultMessage";
+function isDefaultMessageElement(value) {
+	return React$1.isValidElement(value) && value.type === DefaultMessage;
+}
+function extractDefaultMessagesFromChildren(children) {
+	const messages = [];
+	const collect = (node) => {
+		React$1.Children.forEach(node, (child) => {
+			if (!child) return;
+			if (!React$1.isValidElement(child)) return;
+			if (child.type === React$1.Fragment) {
+				const fragmentProps = child.props;
+				collect(fragmentProps.children);
+				return;
+			}
+			if (!isDefaultMessageElement(child)) return;
+			const { content, senderType, senderId } = child.props;
+			if (!content) return;
+			messages.push({
+				content,
+				senderId,
+				senderType
+			});
+		});
+	};
+	collect(children);
+	return messages;
+}
+function resolveSupportConfigMessages({ children, defaultMessages }) {
+	if (defaultMessages !== void 0) return defaultMessages;
+	const childMessages = extractDefaultMessagesFromChildren(children);
+	return childMessages.length ? childMessages : void 0;
+}
+/**
 * Component exposed by Cossistant allowing you to change the support widget default messages and quick response whenever rendered.
 */
-const SupportConfig = ({ defaultMessages, quickOptions }) => {
+const SupportConfig = ({ defaultMessages, quickOptions, children }) => {
 	const { setDefaultMessages, setQuickOptions } = useSupport();
+	const resolvedDefaultMessages = React$1.useMemo(() => resolveSupportConfigMessages({
+		children,
+		defaultMessages
+	}), [children, defaultMessages]);
 	React$1.useEffect(() => {
-		if (defaultMessages) setDefaultMessages(defaultMessages);
-	}, [defaultMessages, setDefaultMessages]);
+		if (resolvedDefaultMessages) setDefaultMessages(resolvedDefaultMessages);
+	}, [resolvedDefaultMessages, setDefaultMessages]);
 	React$1.useEffect(() => {
 		if (quickOptions) setQuickOptions(quickOptions);
 	}, [quickOptions, setQuickOptions]);
@@ -20,5 +68,5 @@ const SupportConfig = ({ defaultMessages, quickOptions }) => {
 SupportConfig.displayName = "SupportConfig";
 
 //#endregion
-export { SupportConfig };
+export { DefaultMessage, SupportConfig, extractDefaultMessagesFromChildren, resolveSupportConfigMessages };
 //# sourceMappingURL=support-config.js.map

package/support-config.js.map

@@ -1 +1 @@
-{"version":3,"file":"support-config.js","names":[],"sources":["../src/support-config.tsx"],"sourcesContent":["\"use client\";\n\nimport type { DefaultMessage } from \"@cossistant/types\";\nimport * as React from \"react\";\nimport { useSupport } from \"./provider\";\n\nexport type SupportConfigProps = {\n\tdefaultMessages?: DefaultMessage[];\n\tquickOptions?: string[];\n};\n\n/**\n * Component exposed by Cossistant allowing you to change the support widget default messages and quick response whenever rendered.\n */\nexport const SupportConfig = ({\n\tdefaultMessages,\n\tquickOptions,\n}: SupportConfigProps): React.ReactElement | null => {\n\tconst { setDefaultMessages, setQuickOptions } = useSupport();\n\n\t// Only update when the arrays actually change content\n\tReact.useEffect(() => {\n\t\tif (defaultMessages) {\n\t\t\tsetDefaultMessages(defaultMessages);\n\t\t}\n\t}, [defaultMessages, setDefaultMessages]);\n\n\tReact.useEffect(() => {\n\t\tif (quickOptions) {\n\t\t\tsetQuickOptions(quickOptions);\n\t\t}\n\t}, [quickOptions, setQuickOptions]);\n\n\treturn null;\n};\n\nSupportConfig.displayName = \"SupportConfig\";\n"],"mappings":";;;;;;;;;AAcA,MAAa,iBAAiB,EAC7B,iBACA,mBACoD;CACpD,MAAM,EAAE,oBAAoB,oBAAoB,YAAY;AAG5D,SAAM,gBAAgB;AACrB,MAAI,gBACH,oBAAmB,gBAAgB;IAElC,CAAC,iBAAiB,mBAAmB,CAAC;AAEzC,SAAM,gBAAgB;AACrB,MAAI,aACH,iBAAgB,aAAa;IAE5B,CAAC,cAAc,gBAAgB,CAAC;AAEnC,QAAO;;AAGR,cAAc,cAAc"}
+{"version":3,"file":"support-config.js","names":["React","messages: DefaultMessageValue[]"],"sources":["../src/support-config.tsx"],"sourcesContent":["\"use client\";\n\nimport type {\n\tDefaultMessage as DefaultMessageValue,\n\tSenderType,\n} from \"@cossistant/types\";\nimport * as React from \"react\";\nimport { useSupport } from \"./provider\";\n\nexport type DefaultMessageProps = {\n\tcontent: string;\n\tsenderType: SenderType;\n\tsenderId?: string;\n};\n\n/**\n * Declarative message entry for `SupportConfig`.\n *\n * @example\n * <SupportConfig>\n *   <DefaultMessage senderType=\"team_member\" content=\"How can we help?\" />\n * </SupportConfig>\n */\nexport function DefaultMessage(\n\t_props: DefaultMessageProps\n): React.ReactElement | null {\n\treturn null;\n}\n\nDefaultMessage.displayName = \"DefaultMessage\";\n\nfunction isDefaultMessageElement(\n\tvalue: React.ReactNode\n): value is React.ReactElement<DefaultMessageProps> {\n\treturn React.isValidElement(value) && value.type === DefaultMessage;\n}\n\nexport function extractDefaultMessagesFromChildren(\n\tchildren: React.ReactNode\n): DefaultMessageValue[] {\n\tconst messages: DefaultMessageValue[] = [];\n\n\tconst collect = (node: React.ReactNode) => {\n\t\tReact.Children.forEach(node, (child) => {\n\t\t\tif (!child) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!React.isValidElement(child)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (child.type === React.Fragment) {\n\t\t\t\tconst fragmentProps = child.props as { children?: React.ReactNode };\n\t\t\t\tcollect(fragmentProps.children);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif (!isDefaultMessageElement(child)) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst { content, senderType, senderId } = child.props;\n\t\t\tif (!content) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tmessages.push({\n\t\t\t\tcontent,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t});\n\t\t});\n\t};\n\n\tcollect(children);\n\treturn messages;\n}\n\nexport function resolveSupportConfigMessages({\n\tchildren,\n\tdefaultMessages,\n}: {\n\tchildren?: React.ReactNode;\n\tdefaultMessages?: DefaultMessageValue[];\n}): DefaultMessageValue[] | undefined {\n\tif (defaultMessages !== undefined) {\n\t\treturn defaultMessages;\n\t}\n\n\tconst childMessages = extractDefaultMessagesFromChildren(children);\n\treturn childMessages.length ? childMessages : undefined;\n}\n\nexport type SupportConfigProps = {\n\tdefaultMessages?: DefaultMessageValue[];\n\tquickOptions?: string[];\n\tchildren?: React.ReactNode;\n};\n\n/**\n * Component exposed by Cossistant allowing you to change the support widget default messages and quick response whenever rendered.\n */\nexport const SupportConfig = ({\n\tdefaultMessages,\n\tquickOptions,\n\tchildren,\n}: SupportConfigProps): React.ReactElement | null => {\n\tconst { setDefaultMessages, setQuickOptions } = useSupport();\n\n\tconst resolvedDefaultMessages = React.useMemo(\n\t\t() => resolveSupportConfigMessages({ children, defaultMessages }),\n\t\t[children, defaultMessages]\n\t);\n\n\tReact.useEffect(() => {\n\t\tif (resolvedDefaultMessages) {\n\t\t\tsetDefaultMessages(resolvedDefaultMessages);\n\t\t}\n\t}, [resolvedDefaultMessages, setDefaultMessages]);\n\n\tReact.useEffect(() => {\n\t\tif (quickOptions) {\n\t\t\tsetQuickOptions(quickOptions);\n\t\t}\n\t}, [quickOptions, setQuickOptions]);\n\n\treturn null;\n};\n\nSupportConfig.displayName = \"SupportConfig\";\n"],"mappings":";;;;;;;;;;;;;;AAuBA,SAAgB,eACf,QAC4B;AAC5B,QAAO;;AAGR,eAAe,cAAc;AAE7B,SAAS,wBACR,OACmD;AACnD,QAAOA,QAAM,eAAe,MAAM,IAAI,MAAM,SAAS;;AAGtD,SAAgB,mCACf,UACwB;CACxB,MAAMC,WAAkC,EAAE;CAE1C,MAAM,WAAW,SAA0B;AAC1C,UAAM,SAAS,QAAQ,OAAO,UAAU;AACvC,OAAI,CAAC,MACJ;AAGD,OAAI,CAACD,QAAM,eAAe,MAAM,CAC/B;AAGD,OAAI,MAAM,SAASA,QAAM,UAAU;IAClC,MAAM,gBAAgB,MAAM;AAC5B,YAAQ,cAAc,SAAS;AAC/B;;AAGD,OAAI,CAAC,wBAAwB,MAAM,CAClC;GAGD,MAAM,EAAE,SAAS,YAAY,aAAa,MAAM;AAChD,OAAI,CAAC,QACJ;AAGD,YAAS,KAAK;IACb;IACA;IACA;IACA,CAAC;IACD;;AAGH,SAAQ,SAAS;AACjB,QAAO;;AAGR,SAAgB,6BAA6B,EAC5C,UACA,mBAIqC;AACrC,KAAI,oBAAoB,OACvB,QAAO;CAGR,MAAM,gBAAgB,mCAAmC,SAAS;AAClE,QAAO,cAAc,SAAS,gBAAgB;;;;;AAY/C,MAAa,iBAAiB,EAC7B,iBACA,cACA,eACoD;CACpD,MAAM,EAAE,oBAAoB,oBAAoB,YAAY;CAE5D,MAAM,0BAA0BA,QAAM,cAC/B,6BAA6B;EAAE;EAAU;EAAiB,CAAC,EACjE,CAAC,UAAU,gBAAgB,CAC3B;AAED,SAAM,gBAAgB;AACrB,MAAI,wBACH,oBAAmB,wBAAwB;IAE1C,CAAC,yBAAyB,mBAAmB,CAAC;AAEjD,SAAM,gBAAgB;AACrB,MAAI,aACH,iBAAgB,aAAa;IAE5B,CAAC,cAAc,gBAAgB,CAAC;AAEnC,QAAO;;AAGR,cAAc,cAAc"}

package/support.css

@@ -1,2 +1 @@
-/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
-@layer base{.cossistant{color:var(--co-primary);color-scheme:normal;--co-font-sans:var(--co-theme-font-sans,"Geist","Inter",sans-serif);--co-font-mono:var(--co-theme-font-mono,"Geist Mono","Inter Mono",monospace);--co-radius:var(--co-theme-radius,.375rem);--co-background-base:var(--co-theme-background,oklch(99% 0 0));--co-foreground-base:var(--co-theme-foreground,oklch(20.5% 0 0));--co-popover-base:var(--co-theme-popover,var(--co-background-base));--co-popover-foreground-base:var(--co-theme-popover-foreground,var(--co-foreground-base));--co-primary-base:var(--co-theme-primary,oklch(14.5% 0 0));--co-primary-foreground-base:var(--co-theme-primary-foreground,oklch(98.5% 0 0));--co-secondary-base:var(--co-theme-secondary,oklch(97% 0 0));--co-secondary-foreground-base:var(--co-theme-secondary-foreground,oklch(14.5% 0 0));--co-border-base:var(--co-theme-border,oklch(92.2% 0 0));--co-input-base:var(--co-theme-input,oklch(92.2% 0 0));--co-ring-base:var(--co-theme-ring,var(--co-primary-base));--co-accent-base:var(--co-theme-accent,var(--co-primary-base));--co-accent-foreground-base:var(--co-theme-accent-foreground,var(--co-primary-foreground-base));--co-background-50-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-50-mix:color-mix(in oklch,var(--co-background-base)98%,var(--co-foreground-base))}}.cossistant{--co-background-100-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-100-mix:color-mix(in oklch,var(--co-background-base)97%,var(--co-foreground-base))}}.cossistant{--co-background-200-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-200-mix:color-mix(in oklch,var(--co-background-base)96%,var(--co-foreground-base))}}.cossistant{--co-background-300-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-300-mix:color-mix(in oklch,var(--co-background-base)95%,var(--co-foreground-base))}}.cossistant{--co-background-400-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-400-mix:color-mix(in oklch,var(--co-background-base)94%,var(--co-foreground-base))}}.cossistant{--co-background-500-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-500-mix:color-mix(in oklch,var(--co-background-base)93%,var(--co-foreground-base))}}.cossistant{--co-background-600-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-background-600-mix:color-mix(in oklch,var(--co-background-base)92%,var(--co-foreground-base))}}.cossistant{--co-muted-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-muted-mix:color-mix(in oklch,var(--co-background-base)85%,var(--co-foreground-base))}}.cossistant{--co-muted-foreground-mix:var(--co-foreground-base)}@supports (color:color-mix(in lab, red, red)){.cossistant{--co-muted-foreground-mix:color-mix(in oklch,var(--co-foreground-base)70%,white)}}.cossistant{--co-background:var(--co-background-base);--co-background-50:var(--co-theme-background-50,var(--co-background-50-mix,oklch(92% 0 0)));--co-background-100:var(--co-theme-background-100,var(--co-background-100-mix,oklch(93% 0 0)));--co-background-200:var(--co-theme-background-200,var(--co-background-200-mix,oklch(94% 0 0)));--co-background-300:var(--co-theme-background-300,var(--co-background-300-mix,oklch(95% 0 0)));--co-background-400:var(--co-theme-background-400,var(--co-background-400-mix,oklch(96% 0 0)));--co-background-500:var(--co-theme-background-500,var(--co-background-500-mix,oklch(97% 0 0)));--co-background-600:var(--co-theme-background-600,var(--co-background-600-mix,oklch(98% 0 0)));--co-foreground:var(--co-foreground-base);--co-popover:var(--co-popover-base);--co-popover-foreground:var(--co-popover-foreground-base);--co-primary:var(--co-primary-base);--co-primary-foreground:var(--co-primary-foreground-base);--co-secondary:var(--co-secondary-base);--co-secondary-foreground:var(--co-secondary-foreground-base);--co-muted:var(--co-theme-muted,var(--co-muted-mix,oklch(97% 0 0)));--co-muted-foreground:var(--co-theme-muted-foreground,var(--co-muted-foreground-mix,oklch(55.6% 0 0)));--co-border:var(--co-border-base);--co-input:var(--co-input-base);--co-ring:var(--co-ring-base);--co-accent:var(--co-accent-base);--co-accent-foreground:var(--co-accent-foreground-base);--co-pink:var(--co-theme-pink,oklch(76.3% .152 354));--co-yellow:var(--co-theme-yellow,oklch(86.4% .144 99));--co-blue:var(--co-theme-blue,oklch(72.5% .132 241));--co-orange:var(--co-theme-orange,oklch(74.5% .166 50));--co-destructive:var(--co-theme-destructive,oklch(57.7% .245 27.325));--co-destructive-foreground:var(--co-theme-destructive-foreground,oklch(57.7% .245 27.325));--co-success:var(--co-theme-success,oklch(71.7% .18 142));--co-success-foreground:var(--co-theme-success-foreground,oklch(26.5% .052 142.7));--co-neutral:var(--co-theme-neutral,oklch(60.8% 0 0));--co-neutral-foreground:var(--co-theme-neutral-foreground,oklch(25.6% 0 0));--co-warning:var(--co-theme-warning,oklch(86.4% .144 99));--co-warning-foreground:var(--co-theme-warning-foreground,oklch(41.4% .071 99))}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-base:var(--co-theme-background,oklch(15.5% 0 0));--co-foreground-base:var(--co-theme-foreground,oklch(95% 0 0));--co-popover-base:var(--co-theme-popover,oklch(14.5% 0 0));--co-popover-foreground-base:var(--co-theme-popover-foreground,oklch(95% 0 0));--co-primary-base:var(--co-theme-primary,oklch(98.5% 0 0));--co-primary-foreground-base:var(--co-theme-primary-foreground,oklch(14.5% 0 0));--co-secondary-base:var(--co-theme-secondary,oklch(26.9% 0 0));--co-secondary-foreground-base:var(--co-theme-secondary-foreground,oklch(95% 0 0));--co-border-base:var(--co-theme-border,oklch(26.9% 0 0));--co-input-base:var(--co-theme-input,oklch(26.9% 0 0));--co-ring-base:var(--co-theme-ring,var(--co-primary-base));--co-accent-base:var(--co-theme-accent,var(--co-primary-base));--co-accent-foreground-base:var(--co-theme-accent-foreground,var(--co-primary-foreground-base));--co-muted-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-muted-mix:color-mix(in oklch,var(--co-background-base)55%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-muted-foreground-mix:var(--co-foreground-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-muted-foreground-mix:color-mix(in oklch,var(--co-foreground-base)65%,white)}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-50-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-50-mix:color-mix(in oklch,var(--co-background-base)98%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-100-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-100-mix:color-mix(in oklch,var(--co-background-base)96%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-200-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-200-mix:color-mix(in oklch,var(--co-background-base)94%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-300-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-300-mix:color-mix(in oklch,var(--co-background-base)92%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-400-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-400-mix:color-mix(in oklch,var(--co-background-base)90%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-500-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-500-mix:color-mix(in oklch,var(--co-background-base)88%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-600-mix:var(--co-background-base)}@supports (color:color-mix(in lab, red, red)){.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-background-600-mix:color-mix(in oklch,var(--co-background-base)86%,var(--co-foreground-base))}}.dark .cossistant,.cossistant[data-color-scheme=dark]{--co-pink:var(--co-theme-pink,oklch(84.2% .109 354));--co-yellow:var(--co-theme-yellow,oklch(90.3% .111 99));--co-blue:var(--co-theme-blue,oklch(79.8% .089 241));--co-orange:var(--co-theme-orange,oklch(68.2% .194 50));--co-destructive:var(--co-theme-destructive,oklch(39.6% .141 25.723));--co-destructive-foreground:var(--co-theme-destructive-foreground,oklch(63.7% .237 25.331));--co-success:var(--co-theme-success,oklch(60% .15 142));--co-success-foreground:var(--co-theme-success-foreground,oklch(85% .12 142));--co-neutral:var(--co-theme-neutral,oklch(50% 0 0));--co-neutral-foreground:var(--co-theme-neutral-foreground,oklch(85% 0 0));--co-warning:var(--co-theme-warning,oklch(90.3% .111 99));--co-warning-foreground:var(--co-theme-warning-foreground,oklch(85% .1 99))}}@layer utilities{.cossistant .co-scrollbar-thin{scrollbar-width:thin;scrollbar-color:oklch(from var(--co-primary)l c h/.3)transparent}.cossistant .co-scrollbar-thin::-webkit-scrollbar{width:8px;height:8px}.cossistant .co-scrollbar-thin::-webkit-scrollbar-track{background:0 0}.cossistant .co-scrollbar-thin::-webkit-scrollbar-thumb{background-color:oklch(from var(--co-primary)l c h/.3);border-radius:4px}.cossistant .co-scrollbar-thin::-webkit-scrollbar-thumb:hover{background-color:oklch(from var(--co-primary)l c h/.5)}.cossistant .animation-delay-0{animation-delay:0s}.cossistant .animation-delay-200{animation-delay:.2s}.cossistant .animation-delay-400{animation-delay:.4s}.cossistant .dot-bounce-1{animation:1.4s infinite bounce-dot}.cossistant .dot-bounce-2{animation:1.4s .16s infinite bounce-dot}.cossistant .dot-bounce-3{animation:1.4s .32s infinite bounce-dot}}
+@import "./support/support.css";

package/utils/metadata-hash.d.ts

@@ -4,7 +4,7 @@
  * This is used to check if metadata has changed without comparing the entire object.
  * Returns a short hash string (first 8 characters of SHA256).
  *
- * Note: This uses SubtleCrypto API in the browser and crypto module in Node.js
+ * Uses Web Crypto when available and falls back to a deterministic non-crypto hash.
  */
 declare function computeMetadataHash(metadata: Record<string, unknown> | null | undefined): Promise<string>;
 //#endregion

package/utils/metadata-hash.js

@@ -4,7 +4,7 @@
 * This is used to check if metadata has changed without comparing the entire object.
 * Returns a short hash string (first 8 characters of SHA256).
 *
-* Note: This uses SubtleCrypto API in the browser and crypto module in Node.js
+* Uses Web Crypto when available and falls back to a deterministic non-crypto hash.
 */
 async function computeMetadataHash(metadata) {
 	if (!metadata || Object.keys(metadata).length === 0) return "";
@@ -13,12 +13,17 @@ async function computeMetadataHash(metadata) {
 		return acc;
 	}, {});
 	const metadataString = JSON.stringify(sortedMetadata);
-	if (typeof window !== "undefined" && window.crypto?.subtle) {
+	if (globalThis.crypto?.subtle) {
 		const data = new TextEncoder().encode(metadataString);
-		const hashBuffer = await window.crypto.subtle.digest("SHA-256", data);
+		const hashBuffer = await globalThis.crypto.subtle.digest("SHA-256", data);
 		return Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("").slice(0, 8);
 	}
-	return (await import("node:crypto")).createHash("sha256").update(metadataString).digest("hex").slice(0, 8);
+	let hash = 2166136261;
+	for (let i = 0; i < metadataString.length; i += 1) {
+		hash ^= metadataString.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0).toString(16).padStart(8, "0");
 }
 
 //#endregion