@cossistant/react 0.0.4 → 0.0.5

package/support/components/avatar.d.ts

@@ -1,15 +1,20 @@
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/components/avatar.d.ts
+type AvatarProps = {
+  className?: string;
+  image?: string | null;
+  name: string;
+};
+/**
+ * Renders a circular avatar with graceful fallbacks when no image is
+ * available.
+ */
 declare function Avatar({
   className,
   image,
   name
-}: {
-  className?: string;
-  image?: string | null;
-  name: string;
-}): react_jsx_runtime3.JSX.Element;
+}: AvatarProps): ReactElement;
 //#endregion
 export { Avatar };
 //# sourceMappingURL=avatar.d.ts.map

package/support/components/avatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;iBAOgB,MAAA;;;;;;;EAAA,IAAA,EAAA,MAAM;CAAA,CAAA,EAQrB,kBAAA,CAAA,GAAA,CAAA,OARqB"}
+{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;KASK,WAAA;;EAAA,KAAA,CAAA,EAAA,MAAW,GAAA,IAAA;EAUA,IAAA,EAAA,MAAM;CAAG;;;;;AAAoD,iBAA7D,MAAA,CAA6D;EAAA,SAAA;EAAA,KAAA;EAAA;AAAA,CAAA,EAA1B,WAA0B,CAAA,EAAZ,YAAY"}

package/support/components/avatar.js

@@ -5,6 +5,10 @@ import { AvatarImage } from "../../primitives/avatar/image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/avatar.tsx
+/**
+* Renders a circular avatar with graceful fallbacks when no image is
+* available.
+*/
 function Avatar({ className, image, name }) {
 	return /* @__PURE__ */ jsxs(Avatar$1, {
 		className: cn("flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500", className),

package/support/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["AvatarPrimitive"],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":["import {\n\tAvatarFallback,\n\tAvatarImage,\n\tAvatar as AvatarPrimitive,\n} from \"../../primitives/avatar\";\nimport { cn } from \"../utils\";\n\nexport function Avatar({\n\tclassName,\n\timage,\n\tname,\n}: {\n\tclassName?: string;\n\timage?: string | null;\n\tname: string;\n}) {\n\treturn (\n\t\t<AvatarPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{image && <AvatarImage alt={name} src={image} />}\n\t\t\t<AvatarFallback className=\"font-medium text-xs\" name={name} />\n\t\t</AvatarPrimitive>\n\t);\n}\n"],"mappings":";;;;;;;AAOA,SAAgB,OAAO,EACtB,WACA,OACA,QAKE;AACF,QACC,qBAACA;EACA,WAAW,GACV,qHACA,UACA;aAEA,SAAS,oBAAC;GAAY,KAAK;GAAM,KAAK;IAAS,EAChD,oBAAC;GAAe,WAAU;GAA4B;IAAQ;GAC7C"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive"],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport {\n\tAvatarFallback,\n\tAvatarImage,\n\tAvatar as AvatarPrimitive,\n} from \"../../primitives/avatar\";\nimport { cn } from \"../utils\";\n\ntype AvatarProps = {\n\tclassName?: string;\n\timage?: string | null;\n\tname: string;\n};\n\n/**\n * Renders a circular avatar with graceful fallbacks when no image is\n * available.\n */\nexport function Avatar({ className, image, name }: AvatarProps): ReactElement {\n\treturn (\n\t\t<AvatarPrimitive\n\t\t\tclassName={cn(\n\t\t\t\t\"flex size-9 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{image && <AvatarImage alt={name} src={image} />}\n\t\t\t<AvatarFallback className=\"font-medium text-xs\" name={name} />\n\t\t</AvatarPrimitive>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAmBA,SAAgB,OAAO,EAAE,WAAW,OAAO,QAAmC;AAC7E,QACC,qBAACA;EACA,WAAW,GACV,qHACA,UACA;aAEA,SAAS,oBAAC;GAAY,KAAK;GAAM,KAAK;IAAS,EAChD,oBAAC;GAAe,WAAU;GAA4B;IAAQ;GAC7C"}

package/support/components/bubble.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.d.ts","names":[],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":[],"mappings":";;;KAQY,WAAA;;AAAZ,CAAA;AAIa,cAAA,MAiEZ,EAjEoB,KAAA,CAAM,EAiE1B,CAjE6B,WAiE7B,CAAA"}
+{"version":3,"file":"bubble.d.ts","names":[],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":[],"mappings":";;;KASY,WAAA;;AAAZ,CAAA;AAIa,cAAA,MAAiB,EAAT,KAAA,CAAM,EAAG,CAAA,WAAD,CAAA"}

package/support/components/bubble.js

@@ -2,6 +2,7 @@
 
 
 import { cn } from "../utils/index.js";
+import { BouncingDots } from "./typing-indicator.js";
 import { SupportBubble } from "../../primitives/bubble.js";
 import icons_default from "./icons.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -10,7 +11,7 @@ import { AnimatePresence, motion } from "motion/react";
 //#region src/support/components/bubble.tsx
 const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 	className: cn("relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90", className),
-	children: ({ isOpen, unreadCount }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
+	children: ({ isOpen, unreadCount, isTyping }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AnimatePresence, {
 		mode: "wait",
 		children: isOpen ? /* @__PURE__ */ jsx(motion.div, {
 			animate: {
@@ -41,7 +42,30 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 				className: "h-5 w-5",
 				name: "chevron-down"
 			})
-		}, "chevron") : /* @__PURE__ */ jsx(motion.div, {
+		}, "chevron") : isTyping ? /* @__PURE__ */ jsx(motion.span, {
+			animate: {
+				opacity: 1,
+				scale: 1,
+				transition: {
+					duration: .2,
+					ease: "easeOut"
+				}
+			},
+			className: "pointer-events-none flex items-center rounded-full text-primary",
+			exit: {
+				opacity: 0,
+				scale: .9,
+				transition: {
+					duration: .1,
+					ease: "easeIn"
+				}
+			},
+			initial: {
+				opacity: 0,
+				scale: .9
+			},
+			children: /* @__PURE__ */ jsx(BouncingDots, { className: "bg-co-primary-foreground" })
+		}, "typing-indicator") : /* @__PURE__ */ jsx(motion.div, {
 			animate: {
 				scale: 1,
 				rotate: 0,
@@ -72,12 +96,12 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 				variant: "filled"
 			})
 		}, "chat")
-	}), unreadCount > 0 && /* @__PURE__ */ jsx(motion.span, {
+	}), unreadCount > 0 && /* @__PURE__ */ jsx(motion.div, {
 		animate: {
 			scale: 1,
 			opacity: 1
 		},
-		className: "-top-1 -right-1 absolute flex h-4 w-4 items-center justify-center rounded-full bg-co-destructive font-medium text-co-destructive-foreground text-xs",
+		className: "-top-0 -right-0 absolute flex h-3 w-3 items-center justify-center rounded-full bg-co-destructive font-medium text-[10px] text-co-destructive-foreground text-white text-xs",
 		exit: {
 			scale: 0,
 			opacity: 0
@@ -85,8 +109,7 @@ const Bubble = ({ className }) => /* @__PURE__ */ jsx(SupportBubble, {
 		initial: {
 			scale: 0,
 			opacity: 0
-		},
-		children: unreadCount
+		}
 	})] })
 });
 

package/support/components/bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"bubble.js","names":["Bubble: React.FC<BubbleProps>","Primitive.Bubble","Icon"],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\n\nexport type BubbleProps = {\n\tclassName?: string;\n};\n\nexport const Bubble: React.FC<BubbleProps> = ({ className }) => (\n\t<Primitive.Bubble\n\t\tclassName={cn(\n\t\t\t\"relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{({ isOpen, unreadCount }) => (\n\t\t\t<>\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isOpen ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: -45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: 45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chevron\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" name=\"chevron-down\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: 45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: -45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chat\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"chat\" variant=\"filled\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{unreadCount > 0 && (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\tanimate={{ scale: 1, opacity: 1 }}\n\t\t\t\t\t\tclassName=\"-top-1 -right-1 absolute flex h-4 w-4 items-center justify-center rounded-full bg-co-destructive font-medium text-co-destructive-foreground text-xs\"\n\t\t\t\t\t\texit={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t\tinitial={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t>\n\t\t\t\t\t\t{unreadCount}\n\t\t\t\t\t</motion.span>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)}\n\t</Primitive.Bubble>\n);\n"],"mappings":";;;;;;;;;;AAYA,MAAaA,UAAiC,EAAE,gBAC/C,oBAACC;CACA,WAAW,GACV,qMACA,UACA;YAEC,EAAE,QAAQ,kBACX,4CACC,oBAAC;EAAgB,MAAK;YACpB,SACA,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAI,SAAS;IAAG;aAG/C,oBAACC;IAAK,WAAU;IAAU,MAAK;KAAiB;KAF5C,UAGQ,GAEb,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAK,SAAS;IAAG;aAGhD,oBAACA;IAAK,WAAU;IAAU,MAAK;IAAO,SAAQ;KAAW;KAFrD,OAGQ;GAEG,EACjB,cAAc,KACd,oBAAC,OAAO;EACP,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;EACjC,WAAU;EACV,MAAM;GAAE,OAAO;GAAG,SAAS;GAAG;EAC9B,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;YAEhC;GACY,IAEb;EAEc"}
+{"version":3,"file":"bubble.js","names":["Bubble: React.FC<BubbleProps>","Primitive.Bubble","Icon"],"sources":["../../../src/support/components/bubble.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type BubbleProps = {\n\tclassName?: string;\n};\n\nexport const Bubble: React.FC<BubbleProps> = ({ className }) => (\n\t<Primitive.Bubble\n\t\tclassName={cn(\n\t\t\t\"relative flex size-12 cursor-pointer items-center justify-center rounded-full bg-co-primary text-co-primary-foreground transition-colors hover:bg-co-primary/90 data-[open=true]:bg-co-primary/90\",\n\t\t\tclassName\n\t\t)}\n\t>\n\t\t{({ isOpen, unreadCount, isTyping }) => (\n\t\t\t<>\n\t\t\t\t<AnimatePresence mode=\"wait\">\n\t\t\t\t\t{isOpen ? (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: -45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: 45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chevron\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-5 w-5\" name=\"chevron-down\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t) : isTyping ? (\n\t\t\t\t\t\t<motion.span\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\tduration: 0.2,\n\t\t\t\t\t\t\t\t\tease: \"easeOut\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"pointer-events-none flex items-center rounded-full text-primary\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\ttransition: {\n\t\t\t\t\t\t\t\t\tduration: 0.1,\n\t\t\t\t\t\t\t\t\tease: \"easeIn\",\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, scale: 0.9 }}\n\t\t\t\t\t\t\tkey=\"typing-indicator\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<BouncingDots className=\"bg-co-primary-foreground\" />\n\t\t\t\t\t\t</motion.span>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{\n\t\t\t\t\t\t\t\tscale: 1,\n\t\t\t\t\t\t\t\trotate: 0,\n\t\t\t\t\t\t\t\topacity: 1,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.2, ease: \"easeOut\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tclassName=\"flex items-center justify-center\"\n\t\t\t\t\t\t\texit={{\n\t\t\t\t\t\t\t\tscale: 0.9,\n\t\t\t\t\t\t\t\trotate: 45,\n\t\t\t\t\t\t\t\topacity: 0,\n\t\t\t\t\t\t\t\ttransition: { duration: 0.1, ease: \"easeIn\" },\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tinitial={{ scale: 0.9, rotate: -45, opacity: 0 }}\n\t\t\t\t\t\t\tkey=\"chat\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-6 w-6\" name=\"chat\" variant=\"filled\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</AnimatePresence>\n\n\t\t\t\t{unreadCount > 0 && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tanimate={{ scale: 1, opacity: 1 }}\n\t\t\t\t\t\tclassName=\"-top-0 -right-0 absolute flex h-3 w-3 items-center justify-center rounded-full bg-co-destructive font-medium text-[10px] text-co-destructive-foreground text-white text-xs\"\n\t\t\t\t\t\texit={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t\tinitial={{ scale: 0, opacity: 0 }}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</>\n\t\t)}\n\t</Primitive.Bubble>\n);\n"],"mappings":";;;;;;;;;;;AAaA,MAAaA,UAAiC,EAAE,gBAC/C,oBAACC;CACA,WAAW,GACV,qMACA,UACA;YAEC,EAAE,QAAQ,aAAa,eACxB,4CACC,oBAAC;EAAgB,MAAK;YACpB,SACA,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAI,SAAS;IAAG;aAG/C,oBAACC;IAAK,WAAU;IAAU,MAAK;KAAiB;KAF5C,UAGQ,GACV,WACH,oBAAC,OAAO;GACP,SAAS;IACR,SAAS;IACT,OAAO;IACP,YAAY;KACX,UAAU;KACV,MAAM;KACN;IACD;GACD,WAAU;GACV,MAAM;IACL,SAAS;IACT,OAAO;IACP,YAAY;KACX,UAAU;KACV,MAAM;KACN;IACD;GACD,SAAS;IAAE,SAAS;IAAG,OAAO;IAAK;aAGnC,oBAAC,gBAAa,WAAU,6BAA6B;KAFjD,mBAGS,GAEd,oBAAC,OAAO;GACP,SAAS;IACR,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAW;IAC9C;GACD,WAAU;GACV,MAAM;IACL,OAAO;IACP,QAAQ;IACR,SAAS;IACT,YAAY;KAAE,UAAU;KAAK,MAAM;KAAU;IAC7C;GACD,SAAS;IAAE,OAAO;IAAK,QAAQ;IAAK,SAAS;IAAG;aAGhD,oBAACA;IAAK,WAAU;IAAU,MAAK;IAAO,SAAQ;KAAW;KAFrD,OAGQ;GAEG,EAEjB,cAAc,KACd,oBAAC,OAAO;EACP,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;EACjC,WAAU;EACV,MAAM;GAAE,OAAO;GAAG,SAAS;GAAG;EAC9B,SAAS;GAAE,OAAO;GAAG,SAAS;GAAG;GAChC,IAED;EAEc"}

package/support/components/button.d.ts

@@ -1,20 +1,23 @@
 import * as React$1 from "react";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
-import * as class_variance_authority_types0 from "class-variance-authority/types";
 import { VariantProps } from "class-variance-authority";
+import * as class_variance_authority_dist_types0 from "class-variance-authority/dist/types";
 
 //#region src/support/components/button.d.ts
 declare const coButtonVariants: (props?: ({
-  variant?: "default" | "tab" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
+  variant?: "tab" | "default" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
   size?: "default" | "large" | "icon" | null | undefined;
-} & class_variance_authority_types0.ClassProp) | undefined) => string;
+} & class_variance_authority_dist_types0.ClassProp) | undefined) => string;
 type CossistantButtonProps = React$1.ComponentProps<"button"> & VariantProps<typeof coButtonVariants>;
+/**
+ * Styled button primitive that forwards variant and size props to the shared
+ * design tokens.
+ */
 declare function Button({
   className,
   variant,
   size,
   ...props
-}: CossistantButtonProps): react_jsx_runtime5.JSX.Element;
+}: CossistantButtonProps): React$1.ReactElement;
 //#endregion
 export { Button, CossistantButtonProps, coButtonVariants };
 //# sourceMappingURL=button.d.ts.map

package/support/components/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;;cAKa;;;IA4BZ,+BAAA,CAAA;AA5BY,KA8BD,qBAAA,GAAwB,OAAA,CAAM,cAFzC,CAAA,QAAA,CAAA,GAGA,YAHA,CAAA,OAGoB,gBAHpB,CAAA;AAEW,iBAGI,MAAA,CAHiB;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAQ9B,qBAR8B,CAAA,EAQT,kBAAA,CAAA,GAAA,CAAA,OARS"}
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":[],"mappings":";;;;;cAKa,wBA4BZ;;;AA5BD,CAAA,GA4BC,oCAAA,CAAA,SAAA,CAAA,GAAA,SAAA,EAAA,GAAA,MAAA;AAEW,KAAA,qBAAA,GAAwB,OAAA,CAAM,cAAT,CAAA,QAAA,CAAA,GAChC,YADgC,CAAA,OACZ,gBADY,CAAA;;;;;AAOjB,iBAAA,MAAA,CAAM;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAKnB,qBALmB,CAAA,EAKK,OAAA,CAAM,YALX"}

package/support/components/button.js

@@ -1,7 +1,7 @@
 import { cn } from "../utils/index.js";
 import { Button as Button$1 } from "../../primitives/button.js";
-import { cva } from "../../node_modules/class-variance-authority/dist/index.js";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 
 //#region src/support/components/button.tsx
 const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
@@ -25,6 +25,10 @@ const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justif
 		size: "default"
 	}
 });
+/**
+* Styled button primitive that forwards variant and size props to the shared
+* design tokens.
+*/
 function Button({ className, variant, size,...props }) {
 	return /* @__PURE__ */ jsx(Button$1, {
 		className: cn(coButtonVariants({

package/support/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Button as ButtonPrimitive } from \"../../primitives/button\";\nimport { cn } from \"../utils\";\n\nexport const coButtonVariants = cva(\n\t\"group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-co-primary text-co-primary-foreground hover:bg-co-primary/90\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"border-co-border/50 bg-co-background-50 hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400\",\n\t\t\t\tghost:\n\t\t\t\t\t\"border-transparent hover:bg-co-background-200 hover:text-co-foreground dark:hover:bg-co-background-300\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-co-border bg-co-background hover:bg-co-background-100 dark:bg-co-background-200 dark:hover:bg-co-background-300\",\n\t\t\t\ttab: \"opacity-40 hover:bg-co-background-100 hover:text-co-foreground hover:opacity-90 dark:hover:bg-co-background-200\",\n\t\t\t\t\"tab-selected\":\n\t\t\t\t\t\"hover:bg-co-background-100 hover:text-co-foreground dark:hover:bg-co-background-200\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 px-4 py-2 has-[>svg]:px-3\",\n\t\t\t\tlarge: \"h-14 px-6 has-[>svg]:px-4\",\n\t\t\t\ticon: \"size-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n);\n\nexport type CossistantButtonProps = React.ComponentProps<\"button\"> &\n\tVariantProps<typeof coButtonVariants>;\n\nexport function Button({\n\tclassName,\n\tvariant,\n\tsize,\n\t...props\n}: CossistantButtonProps) {\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tclassName={cn(coButtonVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,IAC/B,qeACA;CACC,UAAU;EACT,SAAS;GACR,SACC;GACD,WACC;GACD,OACC;GACD,SACC;GACD,KAAK;GACL,gBACC;GACD;EACD,MAAM;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN;EACD;CACD,iBAAiB;EAChB,SAAS;EACT,MAAM;EACN;CACD,CACD;AAKD,SAAgB,OAAO,EACtB,WACA,SACA,KACA,GAAG,SACsB;AACzB,QACC,oBAACA;EACA,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC7D,GAAI;GACH"}
+{"version":3,"file":"button.js","names":["ButtonPrimitive"],"sources":["../../../src/support/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport type * as React from \"react\";\nimport { Button as ButtonPrimitive } from \"../../primitives/button\";\nimport { cn } from \"../utils\";\n\nexport const coButtonVariants = cva(\n\t\"group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md border font-medium text-sm outline-none transition-all hover:cursor-pointer focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault:\n\t\t\t\t\t\"bg-co-primary text-co-primary-foreground hover:bg-co-primary/90\",\n\t\t\t\tsecondary:\n\t\t\t\t\t\"border-co-border/50 bg-co-background-50 hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400\",\n\t\t\t\tghost:\n\t\t\t\t\t\"border-transparent hover:bg-co-background-200 hover:text-co-foreground dark:hover:bg-co-background-300\",\n\t\t\t\toutline:\n\t\t\t\t\t\"border border-co-border bg-co-background hover:bg-co-background-100 dark:bg-co-background-200 dark:hover:bg-co-background-300\",\n\t\t\t\ttab: \"opacity-40 hover:bg-co-background-100 hover:text-co-foreground hover:opacity-90 dark:hover:bg-co-background-200\",\n\t\t\t\t\"tab-selected\":\n\t\t\t\t\t\"hover:bg-co-background-100 hover:text-co-foreground dark:hover:bg-co-background-200\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"h-8 px-4 py-2 has-[>svg]:px-3\",\n\t\t\t\tlarge: \"h-14 px-6 has-[>svg]:px-4\",\n\t\t\t\ticon: \"size-6\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tvariant: \"default\",\n\t\t\tsize: \"default\",\n\t\t},\n\t}\n);\n\nexport type CossistantButtonProps = React.ComponentProps<\"button\"> &\n\tVariantProps<typeof coButtonVariants>;\n\n/**\n * Styled button primitive that forwards variant and size props to the shared\n * design tokens.\n */\nexport function Button({\n\tclassName,\n\tvariant,\n\tsize,\n\t...props\n}: CossistantButtonProps): React.ReactElement {\n\treturn (\n\t\t<ButtonPrimitive\n\t\t\tclassName={cn(coButtonVariants({ variant, size, className }))}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAAmB,IAC/B,qeACA;CACC,UAAU;EACT,SAAS;GACR,SACC;GACD,WACC;GACD,OACC;GACD,SACC;GACD,KAAK;GACL,gBACC;GACD;EACD,MAAM;GACL,SAAS;GACT,OAAO;GACP,MAAM;GACN;EACD;CACD,iBAAiB;EAChB,SAAS;EACT,MAAM;EACN;CACD,CACD;;;;;AASD,SAAgB,OAAO,EACtB,WACA,SACA,KACA,GAAG,SAC0C;AAC7C,QACC,oBAACA;EACA,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC7D,GAAI;GACH"}

package/support/components/container.d.ts

@@ -4,7 +4,6 @@ import React from "react";
 type ContainerProps = {
   className?: string;
   children: React.ReactNode;
-  mode?: "floating" | "responsive";
   position?: "top" | "bottom";
   align?: "right" | "left";
 };

package/support/components/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":[],"mappings":";;;KAQY,cAAA;;EAAA,QAAA,EAED,KAAA,CAAM,SAFS;EAQb,IAAA,CAAA,EAAA,UAwIZ,GAAA,YAAA;EAAA,QAAA,CAAA,EAAA,KAAA,GAAA,QAAA;OAxIgC,CAAA,EAAA,OAAA,GAAA,MAAA;;AAAD,cAAnB,SAAmB,EAAR,KAAA,CAAM,EAAE,CAAC,cAAD,CAAA"}
+{"version":3,"file":"container.d.ts","names":[],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":[],"mappings":";;;KAQY,cAAA;;EAAA,QAAA,EAED,KAAA,CAAM,SAFS;EAOb,QAAA,CAAA,EAAA,KA6HZ,GAAA,QA7HgC;;;cAApB,WAAW,KAAA,CAAM,GAAG"}

package/support/components/container.js

@@ -8,7 +8,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion } from "motion/react";
 
 //#region src/support/components/container.tsx
-const Container = ({ className, children, mode = "floating", position = "bottom", align = "right" }) => {
+const Container = ({ className, children, position = "bottom", align = "right" }) => {
 	const [showScrollIndicator, setShowScrollIndicator] = useState(false);
 	const containerRef = useRef(null);
 	const checkScroll = useCallback(() => {
@@ -49,13 +49,7 @@ const Container = ({ className, children, mode = "floating", position = "bottom"
 		asChild: true,
 		children: /* @__PURE__ */ jsx(motion.div, {
 			animate: "visible",
-			className: cn("flex flex-col overflow-hidden overscroll-none bg-co-background", mode === "floating" ? "max-md:fixed max-md:inset-0" : "max-md:relative max-md:h-full max-md:w-full", mode === "floating" && [
-				"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50",
-				position === "bottom" && "md:bottom-16",
-				position === "top" && "md:top-16",
-				align === "right" && "md:right-0",
-				align === "left" && "md:left-0"
-			], mode === "responsive" && "md:relative md:h-full md:w-full md:rounded-none md:border-0 md:shadow-none", className),
+			className: cn("flex flex-col overflow-hidden overscroll-none bg-co-background max-md:fixed max-md:inset-0", "z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50", position === "bottom" && "md:bottom-16", position === "top" && "md:top-16", align === "right" && "md:right-0", align === "left" && "md:left-0", className),
 			exit: "exit",
 			initial: "hidden",
 			transition: {

package/support/components/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","names":["Container: React.FC<ContainerProps>","Primitive.Window"],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\n\nexport type ContainerProps = {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n\tmode?: \"floating\" | \"responsive\";\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n};\n\nexport const Container: React.FC<ContainerProps> = ({\n\tclassName,\n\tchildren,\n\tmode = \"floating\",\n\tposition = \"bottom\",\n\talign = \"right\",\n}) => {\n\tconst [showScrollIndicator, setShowScrollIndicator] = useState(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tconst checkScroll = useCallback(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollTop, scrollHeight, clientHeight } = container;\n\t\tconst isScrollable = scrollHeight > clientHeight;\n\t\tconst isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5; // 5px threshold\n\n\t\tsetShowScrollIndicator(isScrollable && !isAtBottom);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Instant initial check\n\t\tcheckScroll();\n\n\t\t// Direct scroll listener on the container\n\t\tconst handleScroll = () => {\n\t\t\tcheckScroll();\n\t\t};\n\n\t\tcontainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n\t\t// Use ResizeObserver to detect content changes instantly\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tresizeObserver.observe(container);\n\n\t\t// Also observe all child elements for dynamic content\n\t\tconst mutationObserver = new MutationObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tmutationObserver.observe(container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tcharacterData: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener(\"scroll\", handleScroll);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [checkScroll]);\n\n\treturn (\n\t\t<Primitive.Window asChild>\n\t\t\t<motion.div\n\t\t\t\tanimate=\"visible\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Common base styles\n\t\t\t\t\t\"flex flex-col overflow-hidden overscroll-none bg-co-background\",\n\n\t\t\t\t\tmode === \"floating\"\n\t\t\t\t\t\t? \"max-md:fixed max-md:inset-0\"\n\t\t\t\t\t\t: \"max-md:relative max-md:h-full max-md:w-full\",\n\n\t\t\t\t\t// Desktop floating mode\n\t\t\t\t\tmode === \"floating\" && [\n\t\t\t\t\t\t\"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50\",\n\t\t\t\t\t\tposition === \"bottom\" && \"md:bottom-16\",\n\t\t\t\t\t\tposition === \"top\" && \"md:top-16\",\n\t\t\t\t\t\talign === \"right\" && \"md:right-0\",\n\t\t\t\t\t\talign === \"left\" && \"md:left-0\",\n\t\t\t\t\t],\n\n\t\t\t\t\t// Desktop responsive mode\n\t\t\t\t\tmode === \"responsive\" &&\n\t\t\t\t\t\t\"md:relative md:h-full md:w-full md:rounded-none md:border-0 md:shadow-none\",\n\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\texit=\"exit\"\n\t\t\t\tinitial=\"hidden\"\n\t\t\t\ttransition={{\n\t\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t\t}}\n\t\t\t\tvariants={{\n\t\t\t\t\thidden: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\texit: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"relative flex h-full w-full flex-col\">\n\t\t\t\t\t{/* Scrollable content area */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto pt-18\"\n\t\t\t\t\t\tref={containerRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{showScrollIndicator && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 0.6 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4, ease: \"easeInOut\", delay: 0.05 }}\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</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</Primitive.Window>\n\t);\n};\n"],"mappings":";;;;;;;;;;AAgBA,MAAaA,aAAuC,EACnD,WACA,UACA,OAAO,YACP,WAAW,UACX,QAAQ,cACH;CACL,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,cAAc,kBAAkB;EACrC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;EAGD,MAAM,EAAE,WAAW,cAAc,iBAAiB;EAClD,MAAM,eAAe,eAAe;EACpC,MAAM,aAAa,KAAK,IAAI,eAAe,YAAY,aAAa,GAAG;AAEvE,yBAAuB,gBAAgB,CAAC,WAAW;IACjD,EAAE,CAAC;AAEN,iBAAgB;EACf,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;AAID,eAAa;EAGb,MAAM,qBAAqB;AAC1B,gBAAa;;AAGd,YAAU,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;EAGrE,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,gBAAa;IACZ;AAEF,iBAAe,QAAQ,UAAU;EAGjC,MAAM,mBAAmB,IAAI,uBAAuB;AACnD,gBAAa;IACZ;AAEF,mBAAiB,QAAQ,WAAW;GACnC,WAAW;GACX,SAAS;GACT,eAAe;GACf,CAAC;AAEF,eAAa;AACZ,aAAU,oBAAoB,UAAU,aAAa;AACrD,kBAAe,YAAY;AAC3B,oBAAiB,YAAY;;IAE5B,CAAC,YAAY,CAAC;AAEjB,QACC,oBAACC;EAAiB;YACjB,oBAAC,OAAO;GACP,SAAQ;GACR,WAAW,GAEV,kEAEA,SAAS,aACN,gCACA,+CAGH,SAAS,cAAc;IACtB;IACA,aAAa,YAAY;IACzB,aAAa,SAAS;IACtB,UAAU,WAAW;IACrB,UAAU,UAAU;IACpB,EAGD,SAAS,gBACR,8EAED,UACA;GACD,MAAK;GACL,SAAQ;GACR,YAAY;IACX,SAAS,EAAE,MAAM,cAAc;IAC/B,QAAQ,EAAE,UAAU,IAAK;IACzB;GACD,UAAU;IACT,QAAQ;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAClD,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,QAAQ;KAAa;IAClD,MAAM;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAChD;aAED,qBAAC;IAAI,WAAU;eAEd,oBAAC;KACA,WAAU;KACV,KAAK;KAEJ;MACI,EAEN,oBAAC,6BACC,uBACA,4CACC,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,GAAG;KACvB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;MAC/C,EACF,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,IAAK;KACzB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa,OAAO;MAAM;MAC5D,IACA,GAEa;KACb;IACM;GACK"}
+{"version":3,"file":"container.js","names":["Container: React.FC<ContainerProps>","Primitive.Window"],"sources":["../../../src/support/components/container.tsx"],"sourcesContent":["\"use client\";\n\nimport { AnimatePresence, motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport * as Primitive from \"../../primitives\";\nimport { cn } from \"../utils\";\n\nexport type ContainerProps = {\n\tclassName?: string;\n\tchildren: React.ReactNode;\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n};\n\nexport const Container: React.FC<ContainerProps> = ({\n\tclassName,\n\tchildren,\n\tposition = \"bottom\",\n\talign = \"right\",\n}) => {\n\tconst [showScrollIndicator, setShowScrollIndicator] = useState(false);\n\tconst containerRef = useRef<HTMLDivElement>(null);\n\n\tconst checkScroll = useCallback(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst { scrollTop, scrollHeight, clientHeight } = container;\n\t\tconst isScrollable = scrollHeight > clientHeight;\n\t\tconst isAtBottom = Math.abs(scrollHeight - scrollTop - clientHeight) < 5; // 5px threshold\n\n\t\tsetShowScrollIndicator(isScrollable && !isAtBottom);\n\t}, []);\n\n\tuseEffect(() => {\n\t\tconst container = containerRef.current;\n\t\tif (!container) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Instant initial check\n\t\tcheckScroll();\n\n\t\t// Direct scroll listener on the container\n\t\tconst handleScroll = () => {\n\t\t\tcheckScroll();\n\t\t};\n\n\t\tcontainer.addEventListener(\"scroll\", handleScroll, { passive: true });\n\n\t\t// Use ResizeObserver to detect content changes instantly\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tresizeObserver.observe(container);\n\n\t\t// Also observe all child elements for dynamic content\n\t\tconst mutationObserver = new MutationObserver(() => {\n\t\t\tcheckScroll();\n\t\t});\n\n\t\tmutationObserver.observe(container, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tcharacterData: true,\n\t\t});\n\n\t\treturn () => {\n\t\t\tcontainer.removeEventListener(\"scroll\", handleScroll);\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t};\n\t}, [checkScroll]);\n\n\treturn (\n\t\t<Primitive.Window asChild>\n\t\t\t<motion.div\n\t\t\t\tanimate=\"visible\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Common base styles\n\t\t\t\t\t\"flex flex-col overflow-hidden overscroll-none bg-co-background max-md:fixed max-md:inset-0\",\n\n\t\t\t\t\t// Desktop floating mode\n\t\t\t\t\t\"z-[9999] md:absolute md:z-[9900] md:aspect-[9/18] md:max-h-[calc(100vh-6rem)] md:w-[400px] md:rounded-lg md:border md:border-co-border md:shadow-xl md:dark:shadow-co-background-600/50\",\n\t\t\t\t\tposition === \"bottom\" && \"md:bottom-16\",\n\t\t\t\t\tposition === \"top\" && \"md:top-16\",\n\t\t\t\t\talign === \"right\" && \"md:right-0\",\n\t\t\t\t\talign === \"left\" && \"md:left-0\",\n\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t\texit=\"exit\"\n\t\t\t\tinitial=\"hidden\"\n\t\t\t\ttransition={{\n\t\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t\t}}\n\t\t\t\tvariants={{\n\t\t\t\t\thidden: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\t\t\texit: { opacity: 0, y: 10, filter: \"blur(6px)\" },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div className=\"relative flex h-full w-full flex-col\">\n\t\t\t\t\t{/* Scrollable content area */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"flex flex-1 flex-col overflow-y-auto pt-18\"\n\t\t\t\t\t\tref={containerRef}\n\t\t\t\t\t>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{showScrollIndicator && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 1 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-32 bg-gradient-to-t from-co-background via-co-background/70 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tanimate={{ opacity: 0.6 }}\n\t\t\t\t\t\t\t\t\tclassName=\"pointer-events-none absolute inset-x-0 bottom-0 z-5 h-48 bg-gradient-to-t from-co-background/80 via-co-background/30 to-transparent\"\n\t\t\t\t\t\t\t\t\texit={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\tinitial={{ opacity: 0 }}\n\t\t\t\t\t\t\t\t\ttransition={{ duration: 0.4, ease: \"easeInOut\", delay: 0.05 }}\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</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t</motion.div>\n\t\t</Primitive.Window>\n\t);\n};\n"],"mappings":";;;;;;;;;;AAeA,MAAaA,aAAuC,EACnD,WACA,UACA,WAAW,UACX,QAAQ,cACH;CACL,MAAM,CAAC,qBAAqB,0BAA0B,SAAS,MAAM;CACrE,MAAM,eAAe,OAAuB,KAAK;CAEjD,MAAM,cAAc,kBAAkB;EACrC,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;EAGD,MAAM,EAAE,WAAW,cAAc,iBAAiB;EAClD,MAAM,eAAe,eAAe;EACpC,MAAM,aAAa,KAAK,IAAI,eAAe,YAAY,aAAa,GAAG;AAEvE,yBAAuB,gBAAgB,CAAC,WAAW;IACjD,EAAE,CAAC;AAEN,iBAAgB;EACf,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UACJ;AAID,eAAa;EAGb,MAAM,qBAAqB;AAC1B,gBAAa;;AAGd,YAAU,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;EAGrE,MAAM,iBAAiB,IAAI,qBAAqB;AAC/C,gBAAa;IACZ;AAEF,iBAAe,QAAQ,UAAU;EAGjC,MAAM,mBAAmB,IAAI,uBAAuB;AACnD,gBAAa;IACZ;AAEF,mBAAiB,QAAQ,WAAW;GACnC,WAAW;GACX,SAAS;GACT,eAAe;GACf,CAAC;AAEF,eAAa;AACZ,aAAU,oBAAoB,UAAU,aAAa;AACrD,kBAAe,YAAY;AAC3B,oBAAiB,YAAY;;IAE5B,CAAC,YAAY,CAAC;AAEjB,QACC,oBAACC;EAAiB;YACjB,oBAAC,OAAO;GACP,SAAQ;GACR,WAAW,GAEV,8FAGA,2LACA,aAAa,YAAY,gBACzB,aAAa,SAAS,aACtB,UAAU,WAAW,cACrB,UAAU,UAAU,aAEpB,UACA;GACD,MAAK;GACL,SAAQ;GACR,YAAY;IACX,SAAS,EAAE,MAAM,cAAc;IAC/B,QAAQ,EAAE,UAAU,IAAK;IACzB;GACD,UAAU;IACT,QAAQ;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAClD,SAAS;KAAE,SAAS;KAAG,GAAG;KAAG,QAAQ;KAAa;IAClD,MAAM;KAAE,SAAS;KAAG,GAAG;KAAI,QAAQ;KAAa;IAChD;aAED,qBAAC;IAAI,WAAU;eAEd,oBAAC;KACA,WAAU;KACV,KAAK;KAEJ;MACI,EAEN,oBAAC,6BACC,uBACA,4CACC,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,GAAG;KACvB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa;MAC/C,EACF,oBAAC,OAAO;KACP,SAAS,EAAE,SAAS,IAAK;KACzB,WAAU;KACV,MAAM,EAAE,SAAS,GAAG;KACpB,SAAS,EAAE,SAAS,GAAG;KACvB,YAAY;MAAE,UAAU;MAAK,MAAM;MAAa,OAAO;MAAM;MAC5D,IACA,GAEa;KACb;IACM;GACK"}

package/support/components/conversation-button-link.d.ts

@@ -5,30 +5,17 @@ import { Conversation } from "@cossistant/types";
 type ConversationButtonLinkProps = {
   conversation: Conversation;
   onClick?: () => void;
-  className?: string | ((state: ConversationButtonLinkState) => string);
-  render?: (props: React.HTMLProps<HTMLButtonElement>, state: ConversationButtonLinkState) => React.ReactElement;
-};
-type ConversationButtonLinkAgent = {
-  name: string;
-  image: string | null;
-  type: "human" | "ai" | "fallback";
-};
-type ConversationButtonLinkState = {
-  conversation: Conversation;
-  lastMessage: {
-    content: string;
-    time: string;
-    isFromVisitor: boolean;
-    senderName?: string;
-    senderImage?: string | null;
-  } | null;
-  assignedAgent: ConversationButtonLinkAgent;
+  className?: string;
 };
+/**
+ * Renders a navigable preview card for a conversation including assigned agent
+ * details, last message snippets and typing indicators.
+ */
 declare function ConversationButtonLink({
   conversation,
   onClick,
-  ...props
-}: ConversationButtonLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+  className
+}: ConversationButtonLinkProps): React.ReactElement | null;
 //#endregion
-export { ConversationButtonLink, ConversationButtonLinkAgent, ConversationButtonLinkProps, ConversationButtonLinkState };
+export { ConversationButtonLink, ConversationButtonLinkProps };
 //# sourceMappingURL=conversation-button-link.d.ts.map

package/support/components/conversation-button-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-button-link.d.ts","names":[],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,2BAAA;gBACG;EADH,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA2B,SAAA,CAAA,EAAA,MAAA,GAAA,CAAA,CAAA,KAAA,EAGR,2BAHQ,EAAA,GAAA,MAAA,CAAA;QACxB,CAAA,EAAA,CAAA,KAAA,EAIN,KAAA,CAAM,SAJA,CAIU,iBAJV,CAAA,EAAA,KAAA,EAKN,2BALM,EAAA,GAMT,KAAA,CAAM,YANG;;AAIU,KAKb,2BAAA,GALa;MAAhB,EAAA,MAAM;OACN,EAAA,MAAA,GAAA,IAAA;MACH,EAAA,OAAM,GAAA,IAAA,GAAA,UAAA;CAAY;AAGZ,KAMA,2BAAA,GAN2B;EAM3B,YAAA,EACG,YADH;EAA2B,WAAA,EAAA;IACxB,OAAA,EAAA,MAAA;IAQC,IAAA,EAAA,MAAA;IAA2B,aAAA,EAAA,OAAA;IA+C3B,UAAA,CAAA,EAAA,MAAA;IAAsB,WAAA,CAAA,EAAA,MAAA,GAAA,IAAA;MACrC,IAAA;eACA,EAjDe,2BAiDf;;AAE6B,iBAJd,sBAAA,CAIc;EAAA,YAAA;EAAA,OAAA;EAAA,GAAA;AAAA,CAAA,EAA3B,2BAA2B,CAAA,EAAA,KAAA,CAAA,YAAA,CAAA,OAAA,EAAA,MAAA,GAAA,KAAA,CAAA,qBAAA,CAAA,GAAA,CAAA,CAAA,GAAA,IAAA"}
+{"version":3,"file":"conversation-button-link.d.ts","names":[],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,2BAAA;gBACG;EADH,OAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EA0BI,SAAA,CAAA,EAAA,MAAA;CACf;;;;;AAGkD,iBAJnC,sBAAA,CAImC;EAAA,YAAA;EAAA,OAAA;EAAA;AAAA,CAAA,EAAhD,2BAAgD,CAAA,EAAlB,KAAA,CAAM,YAAY,GAAA,IAAA"}

package/support/components/conversation-button-link.js

@@ -1,192 +1,76 @@
 import { cn } from "../utils/index.js";
-import { useRenderElement } from "../../utils/use-render-element.js";
 import { Avatar } from "./avatar.js";
 import { BouncingDots } from "./typing-indicator.js";
 import { coButtonVariants } from "./button.js";
 import icons_default from "./icons.js";
 import { useSupportText } from "../text/index.js";
-import { useConversationTimelineItems } from "../../hooks/use-conversation-timeline-items.js";
-import { formatTimeAgo } from "../utils/time.js";
-import { useSupport } from "../../provider.js";
-import { useConversationTyping } from "../../hooks/use-conversation-typing.js";
-import { useMemo } from "react";
+import { useConversationPreview } from "../../hooks/use-conversation-preview.js";
 import { ConversationStatus } from "@cossistant/types";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/conversation-button-link.tsx
-function getLastTimelineItemInfo(item, availableHumanAgents, website, text) {
-	const isFromVisitor = item.visitorId !== null;
-	let senderName = text("common.fallbacks.unknown");
-	let senderImage = null;
-	if (isFromVisitor) senderName = text("common.fallbacks.you");
-	else if (item.userId) {
-		const agent = availableHumanAgents.find((a) => a.id === item.userId);
-		if (agent) {
-			senderName = agent.name;
-			senderImage = agent.image;
-		} else senderName = text("common.fallbacks.supportTeam");
-	} else if (item.aiAgentId && website?.availableAIAgents) {
-		const aiAgent = website.availableAIAgents.find((a) => a.id === item.aiAgentId);
-		if (aiAgent) {
-			senderName = aiAgent.name;
-			senderImage = aiAgent.image;
-		} else senderName = text("common.fallbacks.aiAssistant");
-	} else senderName = text("common.fallbacks.supportTeam");
-	return {
-		content: item.text || "",
-		time: formatTimeAgo(item.createdAt),
-		isFromVisitor,
-		senderName,
-		senderImage
-	};
-}
-function ConversationButtonLink({ conversation, onClick,...props }) {
-	const { availableHumanAgents, availableAIAgents, website, visitor } = useSupport();
-	const { items } = useConversationTimelineItems(conversation.id);
+const STATUS_BADGE_CLASSNAMES = {
+	[ConversationStatus.OPEN]: "bg-co-success/20 text-co-success-foreground",
+	[ConversationStatus.RESOLVED]: "bg-co-neutral/20 text-co-neutral-foreground",
+	[ConversationStatus.SPAM]: "bg-co-warning/20 text-co-warning-foreground"
+};
+const DEFAULT_STATUS_BADGE_CLASSNAME = "bg-co-neutral/20 text-co-neutral-foreground";
+const STATUS_TEXT_KEYS = {
+	[ConversationStatus.OPEN]: "component.conversationButtonLink.status.open",
+	[ConversationStatus.RESOLVED]: "component.conversationButtonLink.status.resolved",
+	[ConversationStatus.SPAM]: "component.conversationButtonLink.status.spam"
+};
+/**
+* Renders a navigable preview card for a conversation including assigned agent
+* details, last message snippets and typing indicators.
+*/
+function ConversationButtonLink({ conversation, onClick, className }) {
+	const preview = useConversationPreview({ conversation });
 	const text = useSupportText();
-	const typingEntries = useConversationTyping(conversation.id, { excludeVisitorId: visitor?.id ?? null });
-	const typingInfo = useMemo(() => {
-		if (typingEntries.length === 0) return null;
-		const entry = typingEntries[0];
-		let name = text("common.fallbacks.someone");
-		if (entry?.actorType === "user") {
-			const human = availableHumanAgents.find((agent) => agent.id === entry.actorId);
-			name = human?.name || text("common.fallbacks.supportTeam");
-			human?.image;
-		} else if (entry?.actorType === "ai_agent") {
-			const ai = availableAIAgents.find((agent) => agent.id === entry.actorId);
-			name = ai?.name || text("common.fallbacks.aiAssistant");
-			ai?.image;
-		}
-		return { name };
-	}, [
-		typingEntries,
-		availableHumanAgents,
-		availableAIAgents,
-		text
-	]);
-	const lastMessage = useMemo(() => {
-		const timelineItemToDisplay = (items.length > 0 ? items[items.length - 1] : null) || conversation.lastTimelineItem;
-		return timelineItemToDisplay ? getLastTimelineItemInfo(timelineItemToDisplay, availableHumanAgents, website, text) : null;
-	}, [
-		items,
-		conversation.lastTimelineItem,
-		availableHumanAgents,
-		website,
-		text
-	]);
-	const assignedAgent = useMemo(() => {
-		const supportFallbackName = text("common.fallbacks.supportTeam");
-		const aiFallbackName = text("common.fallbacks.aiAssistant");
-		const knownItems = items.slice();
-		if (conversation.lastTimelineItem && !knownItems.some((item) => item.id === conversation.lastTimelineItem?.id)) knownItems.push(conversation.lastTimelineItem);
-		const lastAgentItem = [...knownItems].reverse().find((item) => item.userId !== null || item.aiAgentId !== null);
-		if (lastAgentItem?.userId) {
-			const human = availableHumanAgents.find((agent) => agent.id === lastAgentItem.userId);
-			if (human) return {
-				type: "human",
-				name: human.name,
-				image: human.image ?? null
-			};
-			return {
-				type: "human",
-				name: supportFallbackName,
-				image: null
-			};
-		}
-		if (lastAgentItem?.aiAgentId) {
-			const ai = availableAIAgents.find((agent) => agent.id === lastAgentItem.aiAgentId);
-			if (ai) return {
-				type: "ai",
-				name: ai.name,
-				image: ai.image ?? null
-			};
-			return {
-				type: "ai",
-				name: aiFallbackName,
-				image: null
-			};
-		}
-		const fallbackHuman = availableHumanAgents[0];
-		if (fallbackHuman) return {
-			type: "human",
-			name: fallbackHuman.name,
-			image: fallbackHuman.image ?? null
-		};
-		const fallbackAi = availableAIAgents[0];
-		if (fallbackAi) return {
-			type: "ai",
-			name: fallbackAi.name,
-			image: fallbackAi.image ?? null
-		};
-		return {
-			type: "fallback",
-			name: supportFallbackName,
-			image: null
-		};
-	}, [
-		items,
-		conversation.lastTimelineItem,
-		availableHumanAgents,
-		availableAIAgents,
-		text
-	]);
-	const conversationTitle = useMemo(() => {
-		if (conversation.title) return conversation.title;
-		if (lastMessage?.content) return lastMessage.content;
-		return text("component.conversationButtonLink.fallbackTitle");
-	}, [
-		conversation.title,
-		lastMessage?.content,
-		text
-	]);
-	const state = {
-		conversation,
-		lastMessage,
-		assignedAgent
-	};
-	return useRenderElement("button", props, {
-		state,
-		props: {
-			onClick,
-			type: "button",
-			className: cn(coButtonVariants({
-				variant: "secondary",
-				size: "large"
-			}), "relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0", typeof props.className === "function" ? props.className(state) : props.className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
-				/* @__PURE__ */ jsx(Avatar, {
-					className: "size-8 flex-shrink-0",
-					image: assignedAgent.image,
-					name: assignedAgent.name
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "flex min-w-0 flex-1 flex-col gap-0.5",
-					children: typingInfo ? /* @__PURE__ */ jsx(BouncingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-						className: "flex max-w-[90%] items-center justify-between gap-2",
-						children: /* @__PURE__ */ jsx("h3", {
-							className: "truncate font-medium text-co-primary text-sm",
-							children: conversationTitle
-						})
-					}), lastMessage ? /* @__PURE__ */ jsx("p", {
-						className: "text-co-primary/60 text-xs",
-						children: lastMessage.isFromVisitor ? /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.visitor", { time: lastMessage.time }) }) : /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.agent", {
-							name: lastMessage.senderName || text("common.fallbacks.supportTeam"),
-							time: lastMessage.time
-						}) })
-					}) : null] })
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: cn("mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase", conversation.status === ConversationStatus.OPEN ? "bg-co-success/20 text-co-success-foreground" : conversation.status === ConversationStatus.RESOLVED ? "bg-co-neutral/20 text-co-neutral-foreground" : "bg-co-warning/20 text-co-warning-foreground"),
-					children: conversation.status
-				}),
-				/* @__PURE__ */ jsx(icons_default, {
-					className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
-					name: "arrow-right",
-					variant: "default"
-				})
-			] })
-		}
+	const { lastMessage, assignedAgent, typing } = preview;
+	const statusBadgeClassName = conversation.deletedAt ? STATUS_BADGE_CLASSNAMES[ConversationStatus.RESOLVED] : STATUS_BADGE_CLASSNAMES[conversation.status] ?? DEFAULT_STATUS_BADGE_CLASSNAME;
+	const statusTextKey = conversation.deletedAt ? STATUS_TEXT_KEYS[ConversationStatus.RESOLVED] : STATUS_TEXT_KEYS[conversation.status];
+	const statusText = conversation.deletedAt ? text("component.conversationButtonLink.status.closed") : statusTextKey ? text(statusTextKey) : text("common.fallbacks.unknown");
+	const lastMessageContent = lastMessage ? lastMessage.isFromVisitor ? /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.visitor", { time: lastMessage.time }) }) : /* @__PURE__ */ jsx("span", { children: text("component.conversationButtonLink.lastMessage.agent", {
+		name: lastMessage.senderName || text("common.fallbacks.supportTeam"),
+		time: lastMessage.time
+	}) }) : void 0;
+	return /* @__PURE__ */ jsxs("button", {
+		className: cn(coButtonVariants({
+			variant: "secondary",
+			size: "large"
+		}), "group/btn relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0", className),
+		onClick,
+		type: "button",
+		children: [
+			/* @__PURE__ */ jsx(Avatar, {
+				className: "flex size-8 flex-shrink-0 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500",
+				image: assignedAgent?.image,
+				name: assignedAgent?.name ?? text("common.fallbacks.supportTeam")
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: typing.isTyping ? /* @__PURE__ */ jsx(BouncingDots, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+					className: "flex max-w-[90%] items-center justify-between gap-2",
+					children: /* @__PURE__ */ jsx("h3", {
+						className: "truncate font-medium text-co-primary text-sm",
+						children: preview.title
+					})
+				}), lastMessageContent ? /* @__PURE__ */ jsx("p", {
+					className: "text-co-primary/60 text-xs",
+					children: lastMessageContent
+				}) : null] })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase", statusBadgeClassName),
+				children: statusText
+			}),
+			/* @__PURE__ */ jsx(icons_default, {
+				className: "-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary",
+				name: "arrow-right",
+				variant: "default"
+			})
+		]
 	});
 }