@cossistant/react 0.0.29 → 0.0.31

package/support/components/avatar-stack.js

@@ -1,23 +1,39 @@
 import { cn } from "../utils/index.js";
 import { useRenderElement } from "../../utils/use-render-element.js";
 import { Avatar } from "./avatar.js";
-import { CossistantLogo } from "./cossistant-branding.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/avatar-stack.tsx
-const AvatarStackItem = ({ children, index, size = 44, spacing = 28, gapWidth = 2, className }) => {
+/**
+* Creates an SVG mask with a rounded rectangle cutout on the left side.
+* This respects the border radius of the avatars.
+*/
+function createRoundedCutoutMask(size, cutoutWidth, borderRadius) {
+	const extension = borderRadius * .15;
+	const svg = `
+		<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}">
+			<defs>
+				<mask id="m">
+					<rect width="${size}" height="${size}" fill="white"/>
+					<rect x="${-size + cutoutWidth}" y="${-extension}" width="${size}" height="${size + extension * 2}" rx="${borderRadius}" ry="${borderRadius}" fill="black"/>
+				</mask>
+			</defs>
+			<rect width="${size}" height="${size}" fill="white" mask="url(#m)"/>
+		</svg>
+	`.replace(/\s+/g, " ");
+	return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+const AvatarStackItem = ({ children, index, size = 44, spacing = 32, gapWidth = 1, className }) => {
 	const isFirst = index === 0;
-	const circleRadius = size * .5;
-	const cutoutRadius = circleRadius + gapWidth;
-	const cutoutPosition = `${circleRadius - spacing}px`;
+	const maskImage = createRoundedCutoutMask(size, size - spacing + gapWidth, 4);
 	return useRenderElement("div", { className }, { props: {
 		className: cn("relative grid place-items-center", !isFirst && "[mask-repeat:no-repeat] [mask-size:100%_100%]"),
 		style: {
 			width: `${size}px`,
 			height: `${size}px`,
 			...isFirst ? {} : {
-				mask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,
-				WebkitMask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`
+				maskImage,
+				WebkitMaskImage: maskImage
 			}
 		},
 		children
@@ -27,7 +43,7 @@ const AvatarStackItem = ({ children, index, size = 44, spacing = 28, gapWidth =
 * Displays a compact row of agent avatars with optional branding and overflow
 * counts.
 */
-function AvatarStack({ humanAgents, aiAgents, hideBranding = false, hideDefaultAIAgent = true, className, size = 44, spacing = 28, gapWidth = 3 }) {
+function AvatarStack({ humanAgents, aiAgents, hideBranding = false, hideDefaultAIAgent = true, className, size = 44, spacing = 36, gapWidth = 3 }) {
 	const displayedHumanAgents = humanAgents.slice(0, 2);
 	const remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);
 	const items = [
@@ -56,15 +72,19 @@ function AvatarStack({ humanAgents, aiAgents, hideBranding = false, hideDefaultA
 				item.type === "human" && /* @__PURE__ */ jsx(Avatar, {
 					className: cn("size-full"),
 					image: item.agent.image,
+					lastSeenAt: item.agent.lastSeenAt,
 					name: item.agent.name
 				}),
 				item.type === "count" && /* @__PURE__ */ jsxs("div", {
-					className: "flex size-full items-center justify-center rounded-full bg-co-background-200 font-medium text-co-primary text-sm dark:bg-co-background-500",
+					className: "flex size-full items-center justify-center rounded bg-co-background-200 font-medium text-co-primary text-sm ring-1 ring-co-border/30 dark:bg-co-background-500",
 					children: ["+", item.count]
 				}),
-				item.type === "ai" && /* @__PURE__ */ jsx("div", {
-					className: "flex size-full items-center justify-center rounded-full bg-co-background-200 dark:bg-co-background-600",
-					children: /* @__PURE__ */ jsx(CossistantLogo, { className: "h-[50%] min-h-4 w-[50%] min-w-4" })
+				item.type === "ai" && /* @__PURE__ */ jsx(Avatar, {
+					className: "z-0 size-full",
+					image: item.agent?.image,
+					isAI: true,
+					name: item.agent?.name || "AI",
+					showBackground: !!item.agent?.image
 				})
 			]
 		}, `avatar-${index}`))

package/support/components/avatar-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-stack.js","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\ntype AvatarStackProps = {\n\thumanAgents: AvailableHumanAgent[];\n\taiAgents: AvailableAIAgent[];\n\thideBranding?: boolean;\n\thideDefaultAIAgent?: boolean;\n\tclassName?: string;\n\t/** Size of avatars (default: 44px) */\n\tsize?: number;\n\t/** Space between avatars (default: 28px) */\n\tspacing?: number;\n\t/** Gap width between avatars (default: 2px) */\n\tgapWidth?: number;\n};\n\nexport const AvatarStackItem = ({\n\tchildren,\n\tindex,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 2,\n\tclassName,\n}: {\n\tchildren: ReactNode;\n\tindex: number;\n\tsize?: number;\n\tspacing?: number;\n\tgapWidth?: number;\n\tclassName?: string;\n}): ReactElement | null => {\n\tconst isFirst = index === 0;\n\n\t// Calculate the circle radius for the mask cutout\n\tconst circleRadius = size * 0.5;\n\tconst cutoutRadius = circleRadius + gapWidth; // Add gap width to create visible border\n\tconst cutoutPosition = `${circleRadius - spacing}px`;\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"relative grid place-items-center\",\n\t\t\t\t\t!isFirst && \"[mask-repeat:no-repeat] [mask-size:100%_100%]\"\n\t\t\t\t),\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: `${size}px`,\n\t\t\t\t\theight: `${size}px`,\n\t\t\t\t\t// Apply mask only to non-first items\n\t\t\t\t\t...(isFirst\n\t\t\t\t\t\t? {}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t\tWebkitMask: `radial-gradient(${cutoutRadius}px ${cutoutRadius}px at ${cutoutPosition} 50%, transparent ${cutoutRadius}px, white ${cutoutRadius}px)`,\n\t\t\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\tchildren,\n\t\t\t},\n\t\t}\n\t);\n};\n\n/**\n * Displays a compact row of agent avatars with optional branding and overflow\n * counts.\n */\nexport function AvatarStack({\n\thumanAgents,\n\taiAgents,\n\thideBranding = false,\n\thideDefaultAIAgent = true,\n\tclassName,\n\tsize = 44,\n\tspacing = 28,\n\tgapWidth = 3,\n}: AvatarStackProps): ReactElement | null {\n\tconst displayedHumanAgents = humanAgents.slice(0, 2);\n\tconst remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);\n\n\t// Create array of all items to display\n\tconst items = [\n\t\t...displayedHumanAgents.map((agent) => ({\n\t\t\ttype: \"human\" as const,\n\t\t\tagent,\n\t\t})),\n\t\t...(remainingHumanAgentsCount > 0\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"count\" as const,\n\t\t\t\t\t\tcount: remainingHumanAgentsCount,\n\t\t\t\t\t},\n\t\t\t\t]\n\t\t\t: []),\n\t\t...(hideDefaultAIAgent\n\t\t\t? []\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\tagent: aiAgents[0],\n\t\t\t\t\t},\n\t\t\t\t]),\n\t];\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: \"inline-grid items-center\",\n\t\t\t\tstyle: {\n\t\t\t\t\tgridTemplateColumns: `repeat(${items.length}, ${spacing}px)`,\n\t\t\t\t},\n\t\t\t\tchildren: items.map((item, index) => (\n\t\t\t\t\t<AvatarStackItem\n\t\t\t\t\t\tgapWidth={gapWidth}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tkey={`avatar-${index}`}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tspacing={spacing}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.type === \"human\" && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName={cn(\"size-full\")}\n\t\t\t\t\t\t\t\timage={item.agent.image}\n\t\t\t\t\t\t\t\tname={item.agent.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"count\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 font-medium text-co-primary text-sm dark:bg-co-background-500\">\n\t\t\t\t\t\t\t\t+{item.count}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"ai\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded-full bg-co-background-200 dark:bg-co-background-600\">\n\t\t\t\t\t\t\t\t<CossistantLogo className=\"h-[50%] min-h-4 w-[50%] min-w-4\" />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AvatarStackItem>\n\t\t\t\t)),\n\t\t\t},\n\t\t}\n\t);\n}\n"],"mappings":";;;;;;;AAqBA,MAAa,mBAAmB,EAC/B,UACA,OACA,OAAO,IACP,UAAU,IACV,WAAW,GACX,gBAQ0B;CAC1B,MAAM,UAAU,UAAU;CAG1B,MAAM,eAAe,OAAO;CAC5B,MAAM,eAAe,eAAe;CACpC,MAAM,iBAAiB,GAAG,eAAe,QAAQ;AAEjD,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW,GACV,oCACA,CAAC,WAAW,gDACZ;EACD,OAAO;GACN,OAAO,GAAG,KAAK;GACf,QAAQ,GAAG,KAAK;GAEhB,GAAI,UACD,EAAE,GACF;IACA,MAAM,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IACzI,YAAY,mBAAmB,aAAa,KAAK,aAAa,QAAQ,eAAe,oBAAoB,aAAa,YAAY,aAAa;IAC/I;GACH;EACD;EACA,EACD,CACD;;;;;;AAOF,SAAgB,YAAY,EAC3B,aACA,UACA,eAAe,OACf,qBAAqB,MACrB,WACA,OAAO,IACP,UAAU,IACV,WAAW,KAC8B;CACzC,MAAM,uBAAuB,YAAY,MAAM,GAAG,EAAE;CACpD,MAAM,4BAA4B,KAAK,IAAI,GAAG,YAAY,SAAS,EAAE;CAGrE,MAAM,QAAQ;EACb,GAAG,qBAAqB,KAAK,WAAW;GACvC,MAAM;GACN;GACA,EAAE;EACH,GAAI,4BAA4B,IAC7B,CACA;GACC,MAAM;GACN,OAAO;GACP,CACD,GACA,EAAE;EACL,GAAI,qBACD,EAAE,GACF,CACA;GACC,MAAM;GACN,OAAO,SAAS;GAChB,CACD;EACH;AAED,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW;EACX,OAAO,EACN,qBAAqB,UAAU,MAAM,OAAO,IAAI,QAAQ,MACxD;EACD,UAAU,MAAM,KAAK,MAAM,UAC1B,qBAAC;GACU;GACH;GAED;GACG;;IAER,KAAK,SAAS,WACd,oBAAC;KACA,WAAW,GAAG,YAAY;KAC1B,OAAO,KAAK,MAAM;KAClB,MAAM,KAAK,MAAM;MAChB;IAEF,KAAK,SAAS,WACd,qBAAC;KAAI,WAAU;gBAA6I,KACzJ,KAAK;MACF;IAEN,KAAK,SAAS,QACd,oBAAC;KAAI,WAAU;eACd,oBAAC,kBAAe,WAAU,oCAAoC;MACzD;;KAnBF,UAAU,QAqBE,CACjB;EACF,EACD,CACD"}
+{"version":3,"file":"avatar-stack.js","names":[],"sources":["../../../src/support/components/avatar-stack.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\n\ntype AvatarStackProps = {\n\thumanAgents: AvailableHumanAgent[];\n\taiAgents: AvailableAIAgent[];\n\thideBranding?: boolean;\n\thideDefaultAIAgent?: boolean;\n\tclassName?: string;\n\t/** Size of avatars (default: 44px) */\n\tsize?: number;\n\t/** Space between avatars (default: 28px) */\n\tspacing?: number;\n\t/** Gap width between avatars (default: 2px) */\n\tgapWidth?: number;\n};\n\n/**\n * Creates an SVG mask with a rounded rectangle cutout on the left side.\n * This respects the border radius of the avatars.\n */\nfunction createRoundedCutoutMask(\n\tsize: number,\n\tcutoutWidth: number,\n\tborderRadius: number\n): string {\n\t// SVG mask: white = visible, black = hidden\n\t// We create a white rectangle (full size) and subtract a rounded rect on the left\n\t// The cutout rect is extended beyond top/bottom bounds so only the right-side curve is visible\n\tconst extension = borderRadius * 0.15;\n\tconst svg = `\n\t\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${size}\" height=\"${size}\">\n\t\t\t<defs>\n\t\t\t\t<mask id=\"m\">\n\t\t\t\t\t<rect width=\"${size}\" height=\"${size}\" fill=\"white\"/>\n\t\t\t\t\t<rect x=\"${-size + cutoutWidth}\" y=\"${-extension}\" width=\"${size}\" height=\"${size + extension * 2}\" rx=\"${borderRadius}\" ry=\"${borderRadius}\" fill=\"black\"/>\n\t\t\t\t</mask>\n\t\t\t</defs>\n\t\t\t<rect width=\"${size}\" height=\"${size}\" fill=\"white\" mask=\"url(#m)\"/>\n\t\t</svg>\n\t`.replace(/\\s+/g, \" \");\n\n\treturn `url(\"data:image/svg+xml,${encodeURIComponent(svg)}\")`;\n}\n\nexport const AvatarStackItem = ({\n\tchildren,\n\tindex,\n\tsize = 44,\n\tspacing = 32,\n\tgapWidth = 1,\n\tclassName,\n}: {\n\tchildren: ReactNode;\n\tindex: number;\n\tsize?: number;\n\tspacing?: number;\n\tgapWidth?: number;\n\tclassName?: string;\n}): ReactElement | null => {\n\tconst isFirst = index === 0;\n\n\t// Calculate mask for squared avatars with rounded corners\n\t// The mask creates a cutout on the left side where the previous avatar overlaps\n\tconst cutoutWidth = size - spacing + gapWidth;\n\tconst borderRadius = 4; // Match the 4px border radius used on avatars\n\n\tconst maskImage = createRoundedCutoutMask(size, cutoutWidth, borderRadius);\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: cn(\n\t\t\t\t\t\"relative grid place-items-center\",\n\t\t\t\t\t!isFirst && \"[mask-repeat:no-repeat] [mask-size:100%_100%]\"\n\t\t\t\t),\n\t\t\t\tstyle: {\n\t\t\t\t\twidth: `${size}px`,\n\t\t\t\t\theight: `${size}px`,\n\t\t\t\t\t// Apply mask only to non-first items - uses SVG for rounded cutout\n\t\t\t\t\t...(isFirst\n\t\t\t\t\t\t? {}\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tmaskImage,\n\t\t\t\t\t\t\t\tWebkitMaskImage: maskImage,\n\t\t\t\t\t\t\t}),\n\t\t\t\t},\n\t\t\t\tchildren,\n\t\t\t},\n\t\t}\n\t);\n};\n\n/**\n * Displays a compact row of agent avatars with optional branding and overflow\n * counts.\n */\nexport function AvatarStack({\n\thumanAgents,\n\taiAgents,\n\thideBranding = false,\n\thideDefaultAIAgent = true,\n\tclassName,\n\tsize = 44,\n\tspacing = 36,\n\tgapWidth = 3,\n}: AvatarStackProps): ReactElement | null {\n\tconst displayedHumanAgents = humanAgents.slice(0, 2);\n\tconst remainingHumanAgentsCount = Math.max(0, humanAgents.length - 2);\n\n\t// Create array of all items to display\n\tconst items = [\n\t\t...displayedHumanAgents.map((agent) => ({\n\t\t\ttype: \"human\" as const,\n\t\t\tagent,\n\t\t})),\n\t\t...(remainingHumanAgentsCount > 0\n\t\t\t? [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"count\" as const,\n\t\t\t\t\t\tcount: remainingHumanAgentsCount,\n\t\t\t\t\t},\n\t\t\t\t]\n\t\t\t: []),\n\t\t...(hideDefaultAIAgent\n\t\t\t? []\n\t\t\t: [\n\t\t\t\t\t{\n\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\tagent: aiAgents[0],\n\t\t\t\t\t},\n\t\t\t\t]),\n\t];\n\n\treturn useRenderElement(\n\t\t\"div\",\n\t\t{ className },\n\t\t{\n\t\t\tprops: {\n\t\t\t\tclassName: \"inline-grid items-center\",\n\t\t\t\tstyle: {\n\t\t\t\t\tgridTemplateColumns: `repeat(${items.length}, ${spacing}px)`,\n\t\t\t\t},\n\t\t\t\tchildren: items.map((item, index) => (\n\t\t\t\t\t<AvatarStackItem\n\t\t\t\t\t\tgapWidth={gapWidth}\n\t\t\t\t\t\tindex={index}\n\t\t\t\t\t\tkey={`avatar-${index}`}\n\t\t\t\t\t\tsize={size}\n\t\t\t\t\t\tspacing={spacing}\n\t\t\t\t\t>\n\t\t\t\t\t\t{item.type === \"human\" && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName={cn(\"size-full\")}\n\t\t\t\t\t\t\t\timage={item.agent.image}\n\t\t\t\t\t\t\t\tlastSeenAt={item.agent.lastSeenAt}\n\t\t\t\t\t\t\t\tname={item.agent.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"count\" && (\n\t\t\t\t\t\t\t<div className=\"flex size-full items-center justify-center rounded bg-co-background-200 font-medium text-co-primary text-sm ring-1 ring-co-border/30 dark:bg-co-background-500\">\n\t\t\t\t\t\t\t\t+{item.count}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{item.type === \"ai\" && (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName=\"z-0 size-full\"\n\t\t\t\t\t\t\t\timage={item.agent?.image}\n\t\t\t\t\t\t\t\tisAI\n\t\t\t\t\t\t\t\tname={item.agent?.name || \"AI\"}\n\t\t\t\t\t\t\t\tshowBackground={!!item.agent?.image}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</AvatarStackItem>\n\t\t\t\t)),\n\t\t\t},\n\t\t}\n\t);\n}\n"],"mappings":";;;;;;;;;;AAwBA,SAAS,wBACR,MACA,aACA,cACS;CAIT,MAAM,YAAY,eAAe;CACjC,MAAM,MAAM;mDACsC,KAAK,YAAY,KAAK;;;oBAGrD,KAAK,YAAY,KAAK;gBAC1B,CAAC,OAAO,YAAY,OAAO,CAAC,UAAU,WAAW,KAAK,YAAY,OAAO,YAAY,EAAE,QAAQ,aAAa,QAAQ,aAAa;;;kBAG/H,KAAK,YAAY,KAAK;;GAErC,QAAQ,QAAQ,IAAI;AAEtB,QAAO,2BAA2B,mBAAmB,IAAI,CAAC;;AAG3D,MAAa,mBAAmB,EAC/B,UACA,OACA,OAAO,IACP,UAAU,IACV,WAAW,GACX,gBAQ0B;CAC1B,MAAM,UAAU,UAAU;CAO1B,MAAM,YAAY,wBAAwB,MAHtB,OAAO,UAAU,UAChB,EAEqD;AAE1E,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW,GACV,oCACA,CAAC,WAAW,gDACZ;EACD,OAAO;GACN,OAAO,GAAG,KAAK;GACf,QAAQ,GAAG,KAAK;GAEhB,GAAI,UACD,EAAE,GACF;IACA;IACA,iBAAiB;IACjB;GACH;EACD;EACA,EACD,CACD;;;;;;AAOF,SAAgB,YAAY,EAC3B,aACA,UACA,eAAe,OACf,qBAAqB,MACrB,WACA,OAAO,IACP,UAAU,IACV,WAAW,KAC8B;CACzC,MAAM,uBAAuB,YAAY,MAAM,GAAG,EAAE;CACpD,MAAM,4BAA4B,KAAK,IAAI,GAAG,YAAY,SAAS,EAAE;CAGrE,MAAM,QAAQ;EACb,GAAG,qBAAqB,KAAK,WAAW;GACvC,MAAM;GACN;GACA,EAAE;EACH,GAAI,4BAA4B,IAC7B,CACA;GACC,MAAM;GACN,OAAO;GACP,CACD,GACA,EAAE;EACL,GAAI,qBACD,EAAE,GACF,CACA;GACC,MAAM;GACN,OAAO,SAAS;GAChB,CACD;EACH;AAED,QAAO,iBACN,OACA,EAAE,WAAW,EACb,EACC,OAAO;EACN,WAAW;EACX,OAAO,EACN,qBAAqB,UAAU,MAAM,OAAO,IAAI,QAAQ,MACxD;EACD,UAAU,MAAM,KAAK,MAAM,UAC1B,qBAAC;GACU;GACH;GAED;GACG;;IAER,KAAK,SAAS,WACd,oBAAC;KACA,WAAW,GAAG,YAAY;KAC1B,OAAO,KAAK,MAAM;KAClB,YAAY,KAAK,MAAM;KACvB,MAAM,KAAK,MAAM;MAChB;IAEF,KAAK,SAAS,WACd,qBAAC;KAAI,WAAU;gBAAiK,KAC7K,KAAK;MACF;IAEN,KAAK,SAAS,QACd,oBAAC;KACA,WAAU;KACV,OAAO,KAAK,OAAO;KACnB;KACA,MAAM,KAAK,OAAO,QAAQ;KAC1B,gBAAgB,CAAC,CAAC,KAAK,OAAO;MAC7B;;KAxBE,UAAU,QA0BE,CACjB;EACF,EACD,CACD"}

package/support/components/avatar.d.ts

@@ -5,15 +5,46 @@ type AvatarProps = {
   className?: string;
   image?: string | null;
   name: string;
+  /** Whether this avatar is for an AI agent */
+  isAI?: boolean;
+  /** Whether to show the background circle (default: true) */
+  showBackground?: boolean;
+  /**
+   * Tailwind class array for Facehash background colors.
+   * Defaults to Cossistant theme colors (pink, blue, yellow, orange).
+   * @example ["bg-pink-500", "bg-blue-500", "bg-green-500"]
+   */
+  colorClasses?: string[];
+  /**
+   * Last seen timestamp for the agent. When provided, shows a status indicator:
+   * - Green (online): seen within last 15 minutes
+   * - Orange (away): seen within last hour
+   * Only shown for non-AI agents.
+   */
+  lastSeenAt?: string | null;
+  /**
+   * Size of the online indicator in pixels.
+   * Defaults to 6px.
+   */
+  indicatorSize?: number;
 };
 /**
- * Renders a circular avatar with graceful fallbacks when no image is
- * available.
+ * Renders a squared avatar with graceful fallbacks using Facehash when no
+ * image is available. Features squircle corners when supported by the browser
+ * and a subtle ring border.
+ *
+ * For AI agents without an image, displays the Cossistant logo without
+ * a background.
  */
 declare function Avatar({
   className,
   image,
-  name
+  name,
+  isAI,
+  showBackground,
+  colorClasses,
+  lastSeenAt,
+  indicatorSize
 }: AvatarProps): ReactElement;
 //#endregion
 export { Avatar };

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"avatar.d.ts","names":[],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":[],"mappings":";;;KAuBK,WAAA;;EAAA,KAAA,CAAA,EAAA,MAAW,GAAA,IAAA;EAoCA,IAAA,EAAA,MAAM;EACrB;EACA,IAAA,CAAA,EAAA,OAAA;EACA;EACA,cAAA,CAAA,EAAA,OAAA;EACA;;;;;EAIgB,YAAA,CAAA,EAAA,MAAA,EAAA;EAAY;;;;;;;;;;;;;;;;;;;;;iBATb,MAAA;;;;;;;;;GASb,cAAc"}

package/support/components/avatar.js

@@ -2,22 +2,75 @@ import { cn } from "../utils/index.js";
 import { Avatar as Avatar$1 } from "../../primitives/avatar/avatar.js";
 import { AvatarFallback } from "../../primitives/avatar/fallback.js";
 import { AvatarImage } from "../../primitives/avatar/image.js";
+import { CossistantLogo } from "./cossistant-branding.js";
+import { OnlineIndicator, getAgentStatus } from "./online-indicator.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Facehash } from "facehash";
 
 //#region src/support/components/avatar.tsx
 /**
-* Renders a circular avatar with graceful fallbacks when no image is
-* available.
+* Default Cossistant theme colors for avatar fallbacks.
+* These use the Tailwind classes defined in support.css.
 */
-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),
-		children: [image && /* @__PURE__ */ jsx(AvatarImage, {
+const DEFAULT_AVATAR_COLORS = [
+	"bg-co-pink",
+	"bg-co-blue",
+	"bg-co-yellow",
+	"bg-co-orange"
+];
+/**
+* Renders a squared avatar with graceful fallbacks using Facehash when no
+* image is available. Features squircle corners when supported by the browser
+* and a subtle ring border.
+*
+* For AI agents without an image, displays the Cossistant logo without
+* a background.
+*/
+function Avatar({ className, image, name, isAI = false, showBackground = true, colorClasses = DEFAULT_AVATAR_COLORS, lastSeenAt, indicatorSize = 6 }) {
+	const agentStatus = isAI ? "offline" : getAgentStatus(lastSeenAt);
+	if (isAI && !image) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex items-center justify-center rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500", className),
+		children: /* @__PURE__ */ jsx(CossistantLogo, { className: "h-1/2 w-1/2" })
+	});
+	if (isAI && image) return /* @__PURE__ */ jsxs(Avatar$1, {
+		className: cn("flex size-9 items-center justify-center overflow-clip rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
 			alt: name,
 			src: image
 		}), /* @__PURE__ */ jsx(AvatarFallback, {
-			className: "font-medium text-xs",
-			name
+			className: "size-full",
+			children: /* @__PURE__ */ jsx(Facehash, {
+				className: "size-full",
+				colorClasses,
+				interactive: false,
+				name,
+				showInitial: false,
+				size: "100%"
+			})
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative", className),
+		children: [/* @__PURE__ */ jsxs(Avatar$1, {
+			className: cn("flex size-full items-center justify-center overflow-clip rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500"),
+			children: [image && /* @__PURE__ */ jsx(AvatarImage, {
+				alt: name,
+				src: image
+			}), /* @__PURE__ */ jsx(AvatarFallback, {
+				className: "size-full",
+				children: /* @__PURE__ */ jsx(Facehash, {
+					className: "size-full",
+					colorClasses,
+					interactive: false,
+					name,
+					showInitial: false,
+					size: "100%"
+				})
+			})]
+		}), /* @__PURE__ */ jsx(OnlineIndicator, {
+			className: "-bottom-0.5 -right-0.5 z-10",
+			size: indicatorSize,
+			status: agentStatus
 		})]
 	});
 }

package/support/components/avatar.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"avatar.js","names":["AvatarPrimitive"],"sources":["../../../src/support/components/avatar.tsx"],"sourcesContent":["import { Facehash } from \"facehash\";\nimport type { ReactElement } from \"react\";\n\nimport {\n\tAvatarFallback,\n\tAvatarImage,\n\tAvatar as AvatarPrimitive,\n} from \"../../primitives/avatar\";\nimport { cn } from \"../utils\";\nimport { CossistantLogo } from \"./cossistant-branding\";\nimport { getAgentStatus, OnlineIndicator } from \"./online-indicator\";\n\n/**\n * Default Cossistant theme colors for avatar fallbacks.\n * These use the Tailwind classes defined in support.css.\n */\nconst DEFAULT_AVATAR_COLORS = [\n\t\"bg-co-pink\",\n\t\"bg-co-blue\",\n\t\"bg-co-yellow\",\n\t\"bg-co-orange\",\n];\n\ntype AvatarProps = {\n\tclassName?: string;\n\timage?: string | null;\n\tname: string;\n\t/** Whether this avatar is for an AI agent */\n\tisAI?: boolean;\n\t/** Whether to show the background circle (default: true) */\n\tshowBackground?: boolean;\n\t/**\n\t * Tailwind class array for Facehash background colors.\n\t * Defaults to Cossistant theme colors (pink, blue, yellow, orange).\n\t * @example [\"bg-pink-500\", \"bg-blue-500\", \"bg-green-500\"]\n\t */\n\tcolorClasses?: string[];\n\t/**\n\t * Last seen timestamp for the agent. When provided, shows a status indicator:\n\t * - Green (online): seen within last 15 minutes\n\t * - Orange (away): seen within last hour\n\t * Only shown for non-AI agents.\n\t */\n\tlastSeenAt?: string | null;\n\t/**\n\t * Size of the online indicator in pixels.\n\t * Defaults to 6px.\n\t */\n\tindicatorSize?: number;\n};\n\n/**\n * Renders a squared avatar with graceful fallbacks using Facehash when no\n * image is available. Features squircle corners when supported by the browser\n * and a subtle ring border.\n *\n * For AI agents without an image, displays the Cossistant logo without\n * a background.\n */\nexport function Avatar({\n\tclassName,\n\timage,\n\tname,\n\tisAI = false,\n\tshowBackground = true,\n\tcolorClasses = DEFAULT_AVATAR_COLORS,\n\tlastSeenAt,\n\tindicatorSize = 6,\n}: AvatarProps): ReactElement {\n\tconst agentStatus = isAI ? \"offline\" : getAgentStatus(lastSeenAt);\n\n\t// AI agent without image: show logo in avatar box (only in avatar-stack context)\n\t// or at full size when used standalone\n\tif (isAI && !image) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex items-center justify-center rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<CossistantLogo className=\"h-1/2 w-1/2\" />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// AI agent with image: show image in a square\n\tif (isAI && image) {\n\t\treturn (\n\t\t\t<AvatarPrimitive\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex size-9 items-center justify-center overflow-clip rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500\",\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<AvatarImage alt={name} src={image} />\n\t\t\t\t<AvatarFallback className=\"size-full\">\n\t\t\t\t\t<Facehash\n\t\t\t\t\t\tclassName=\"size-full\"\n\t\t\t\t\t\tcolorClasses={colorClasses}\n\t\t\t\t\t\tinteractive={false}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tshowInitial={false}\n\t\t\t\t\t\tsize=\"100%\"\n\t\t\t\t\t/>\n\t\t\t\t</AvatarFallback>\n\t\t\t</AvatarPrimitive>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={cn(\"relative\", className)}>\n\t\t\t<AvatarPrimitive\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"flex size-full items-center justify-center overflow-clip rounded bg-co-background-200 ring-1 ring-co-border/30 dark:bg-co-background-500\"\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{image && <AvatarImage alt={name} src={image} />}\n\t\t\t\t<AvatarFallback className=\"size-full\">\n\t\t\t\t\t<Facehash\n\t\t\t\t\t\tclassName=\"size-full\"\n\t\t\t\t\t\tcolorClasses={colorClasses}\n\t\t\t\t\t\tinteractive={false}\n\t\t\t\t\t\tname={name}\n\t\t\t\t\t\tshowInitial={false}\n\t\t\t\t\t\tsize=\"100%\"\n\t\t\t\t\t/>\n\t\t\t\t</AvatarFallback>\n\t\t\t</AvatarPrimitive>\n\t\t\t<OnlineIndicator\n\t\t\t\tclassName=\"-bottom-0.5 -right-0.5 z-10\"\n\t\t\t\tsize={indicatorSize}\n\t\t\t\tstatus={agentStatus}\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,wBAAwB;CAC7B;CACA;CACA;CACA;CACA;;;;;;;;;AAsCD,SAAgB,OAAO,EACtB,WACA,OACA,MACA,OAAO,OACP,iBAAiB,MACjB,eAAe,uBACf,YACA,gBAAgB,KACa;CAC7B,MAAM,cAAc,OAAO,YAAY,eAAe,WAAW;AAIjE,KAAI,QAAQ,CAAC,MACZ,QACC,oBAAC;EACA,WAAW,GACV,oHACA,UACA;YAED,oBAAC,kBAAe,WAAU,gBAAgB;GACrC;AAKR,KAAI,QAAQ,MACX,QACC,qBAACA;EACA,WAAW,GACV,yIACA,UACA;aAED,oBAAC;GAAY,KAAK;GAAM,KAAK;IAAS,EACtC,oBAAC;GAAe,WAAU;aACzB,oBAAC;IACA,WAAU;IACI;IACd,aAAa;IACP;IACN,aAAa;IACb,MAAK;KACJ;IACc;GACA;AAIpB,QACC,qBAAC;EAAI,WAAW,GAAG,YAAY,UAAU;aACxC,qBAACA;GACA,WAAW,GACV,2IACA;cAEA,SAAS,oBAAC;IAAY,KAAK;IAAM,KAAK;KAAS,EAChD,oBAAC;IAAe,WAAU;cACzB,oBAAC;KACA,WAAU;KACI;KACd,aAAa;KACP;KACN,aAAa;KACb,MAAK;MACJ;KACc;IACA,EAClB,oBAAC;GACA,WAAU;GACV,MAAM;GACN,QAAQ;IACP;GACG"}

package/support/components/button.d.ts

@@ -4,10 +4,12 @@ import * as class_variance_authority_dist_types0 from "class-variance-authority/
 
 //#region src/support/components/button.d.ts
 declare const coButtonVariants: (props?: ({
-  variant?: "tab" | "default" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
+  variant?: "default" | "tab" | "secondary" | "ghost" | "outline" | "tab-selected" | null | undefined;
   size?: "default" | "large" | "icon" | null | undefined;
 } & class_variance_authority_dist_types0.ClassProp) | undefined) => string;
-type CossistantButtonProps = React$1.ComponentProps<"button"> & VariantProps<typeof coButtonVariants>;
+type CossistantButtonProps = React$1.ComponentProps<"button"> & {
+  asChild?: boolean;
+} & VariantProps<typeof coButtonVariants>;
 /**
  * Styled button primitive that forwards variant and size props to the shared
  * design tokens.

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,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,QAAA,CAAQ;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAKrB,qBALqB,CAAA,EAKG,OAAA,CAAM,YALT"}
+{"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,GAAA;EAAG,OAAM,CAAA,EAAA,OAAA;CAElB,GAApB,YAAoB,CAAA,OAAA,gBAAA,CAAA;;;AAMxB;;AAEC,iBAFe,QAAA,CAEf;EAAA,SAAA;EAAA,OAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAGE,qBAHF,CAAA,EAG0B,OAAA,CAAM,YAHhC"}

package/support/components/button.js

@@ -4,11 +4,11 @@ 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", {
+const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded 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", {
 	variants: {
 		variant: {
 			default: "bg-co-primary text-co-primary-foreground hover:bg-co-primary/90",
-			secondary: "border-co-border bg-co-background-50 text-co-primary hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400",
+			secondary: "border-co-border bg-co-background-50/50 text-co-primary hover:bg-co-background-100 hover:text-co-foreground dark:bg-co-background-300 dark:hover:bg-co-background-400",
 			ghost: "border-transparent text-co-primary hover:bg-co-background-200 hover:text-co-foreground dark:hover:bg-co-background-300",
 			outline: "border border-co-border bg-co-background text-co-primary hover:bg-co-background-100 dark:bg-co-background-200 dark:hover:bg-co-background-300",
 			tab: "opacity-40 hover:bg-co-background-100 hover:text-co-foreground hover:opacity-90 dark:hover:bg-co-background-200",
@@ -29,7 +29,7 @@ const coButtonVariants = cva("group/btn inline-flex shrink-0 items-center justif
 * Styled button primitive that forwards variant and size props to the shared
 * design tokens.
 */
-function CoButton({ className, variant, size,...props }) {
+function CoButton({ className, variant, size, ...props }) {
 	return /* @__PURE__ */ jsx(Button, {
 		className: cn(coButtonVariants({
 			variant,

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 bg-co-background-50 text-co-primary 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 text-co-primary 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 text-co-primary 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 CoButton({\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,SAAS,EACxB,WACA,SACA,KACA,GAAG,SAC0C;AAC7C,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 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 bg-co-background-50/50 text-co-primary 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 text-co-primary 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 text-co-primary 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\tasChild?: boolean;\n} & VariantProps<typeof coButtonVariants>;\n\n/**\n * Styled button primitive that forwards variant and size props to the shared\n * design tokens.\n */\nexport function CoButton({\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,keACA;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;;;;;AAUD,SAAgB,SAAS,EACxB,WACA,SACA,MACA,GAAG,SAC0C;AAC7C,QACC,oBAACA;EACA,WAAW,GAAG,iBAAiB;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC;EAC7D,GAAI;GACH"}

package/support/components/configuration-error.d.ts

@@ -0,0 +1,16 @@
+import { ConfigurationError } from "../../hooks/private/use-rest-client.js";
+import React from "react";
+
+//#region src/support/components/configuration-error.d.ts
+type ConfigurationErrorDisplayProps = {
+  error: ConfigurationError;
+  className?: string;
+};
+/**
+ * Full-page fallback component displayed inside the widget when misconfigured.
+ * Shows a helpful message with instructions on how to configure the API key.
+ */
+declare const ConfigurationErrorDisplay: React.FC<ConfigurationErrorDisplayProps>;
+//#endregion
+export { ConfigurationErrorDisplay };
+//# sourceMappingURL=configuration-error.d.ts.map

package/support/components/configuration-error.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration-error.d.ts","names":[],"sources":["../../../src/support/components/configuration-error.tsx"],"sourcesContent":[],"mappings":";;;;KAUK,8BAAA;SACG;EADH,SAAA,CAAA,EAAA,MAAA;AASL,CAAA;;;;;cAAa,2BAA2B,KAAA,CAAM,GAC7C"}

package/support/components/configuration-error.js

@@ -0,0 +1,162 @@
+"use client";
+
+import { cn } from "../utils/index.js";
+import { CossistantLogo } from "./cossistant-branding.js";
+import { CoButton } from "./button.js";
+import { Icon } from "./icons.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/configuration-error.tsx
+/**
+* Full-page fallback component displayed inside the widget when misconfigured.
+* Shows a helpful message with instructions on how to configure the API key.
+*/
+const ConfigurationErrorDisplay = ({ error, className }) => {
+	const docsUrl = "https://cossistant.com/docs/quickstart/api-keys";
+	const isInvalidKey = error.type === "invalid_api_key";
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-full flex-col bg-co-background text-co-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn("flex flex-col items-center justify-center px-6 pb-10"),
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn("mb-4 flex h-20 w-20 items-center justify-center rounded-2xl", isInvalidKey ? "bg-co-orange/10 text-co-orange" : "bg-co-blue/10 text-co-blue"),
+						children: /* @__PURE__ */ jsx(CossistantLogo, { className: "h-10 w-10" })
+					}),
+					/* @__PURE__ */ jsx("h2", {
+						className: "font-semibold text-lg",
+						children: isInvalidKey ? "Invalid API Key" : "Setup Required"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 text-center text-co-muted-foreground text-sm",
+						children: isInvalidKey ? "Your API key couldn't be verified" : "Almost there! Just add your API key"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex flex-1 flex-col gap-8 overflow-y-auto px-5 pb-4",
+				children: isInvalidKey ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", {
+					className: "rounded-lg border border-co-orange/20 bg-co-orange/5 p-4",
+					children: [/* @__PURE__ */ jsx("h4", {
+						className: "mb-2 font-medium text-co-foreground text-sm",
+						children: "Common causes:"
+					}), /* @__PURE__ */ jsxs("ul", {
+						className: "space-y-1.5 text-co-muted-foreground text-sm",
+						children: [
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60" }), "API key has been revoked or deleted"]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60" }), "Key has expired"]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60" }), "Domain not in the allowed list"]
+							}),
+							/* @__PURE__ */ jsxs("li", {
+								className: "flex items-start gap-2",
+								children: [/* @__PURE__ */ jsx("span", { className: "mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60" }), "Using a test key on production"]
+							})
+						]
+					})]
+				}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-yellow/10 font-semibold text-co-yellow text-xs",
+							children: "1"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 flex-col gap-3",
+							children: [/* @__PURE__ */ jsx("h4", {
+								className: "mt-1 font-medium text-sm",
+								children: "Create an account"
+							}), /* @__PURE__ */ jsx(CoButton, {
+								asChild: true,
+								variant: "secondary",
+								children: /* @__PURE__ */ jsx("a", {
+									href: "https://cossistant.com/sign-up",
+									rel: "noopener noreferrer",
+									target: "_blank",
+									children: "Create an account"
+								})
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-blue/10 font-semibold text-co-blue text-xs",
+							children: "2"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "mt-1 flex flex-1 flex-col gap-2",
+							children: [/* @__PURE__ */ jsx("h4", {
+								className: "font-medium text-sm",
+								children: "Get your public API key"
+							}), /* @__PURE__ */ jsxs("p", {
+								className: "mt-0.5 text-co-primary/60 text-xs",
+								children: [
+									"(Go to",
+									" ",
+									/* @__PURE__ */ jsx("span", {
+										className: "font-medium text-co-primary/60",
+										children: "Settings / Developers"
+									}),
+									" ",
+									"in your dashboard)"
+								]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex gap-3",
+						children: [/* @__PURE__ */ jsx("div", {
+							className: "flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-pink/10 font-semibold text-co-pink text-xs",
+							children: "3"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "flex flex-1 flex-col gap-3",
+							children: [/* @__PURE__ */ jsx("h4", {
+								className: "mt-1 font-medium text-sm",
+								children: "Add to your environment"
+							}), /* @__PURE__ */ jsxs("div", {
+								className: "mt-2 overflow-hidden rounded-lg border border-co-border bg-co-background-100",
+								children: [/* @__PURE__ */ jsx("div", {
+									className: "border-co-border border-b bg-co-background-50 px-3 py-1",
+									children: /* @__PURE__ */ jsx("span", {
+										className: "font-mono text-co-muted-foreground text-xs",
+										children: ".env"
+									})
+								}), /* @__PURE__ */ jsxs("div", {
+									className: "p-3 font-mono text-xs",
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "text-co-foreground",
+										children: error.envVarName
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-co-muted-foreground",
+										children: "=pk_live_..."
+									})]
+								})]
+							})]
+						})]
+					})
+				] })
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "border-co-border border-t p-4",
+				children: /* @__PURE__ */ jsxs("a", {
+					className: cn("flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5", "bg-co-primary text-co-primary-foreground", "font-medium text-sm", "transition-all hover:opacity-90 active:scale-[0.98]"),
+					href: docsUrl,
+					rel: "noopener noreferrer",
+					target: "_blank",
+					children: ["View our docs", /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })]
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+export { ConfigurationErrorDisplay };
+//# sourceMappingURL=configuration-error.js.map

package/support/components/configuration-error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"configuration-error.js","names":["ConfigurationErrorDisplay: React.FC<\n\tConfigurationErrorDisplayProps\n>"],"sources":["../../../src/support/components/configuration-error.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@cossistant/react\";\nimport type React from \"react\";\nimport type { ConfigurationError } from \"../../hooks/private/use-rest-client\";\nimport { cn } from \"../utils\";\nimport { CoButton } from \"./button\";\nimport { CossistantLogo } from \"./cossistant-branding\";\nimport { Icon } from \"./icons\";\n\ntype ConfigurationErrorDisplayProps = {\n\terror: ConfigurationError;\n\tclassName?: string;\n};\n\n/**\n * Full-page fallback component displayed inside the widget when misconfigured.\n * Shows a helpful message with instructions on how to configure the API key.\n */\nexport const ConfigurationErrorDisplay: React.FC<\n\tConfigurationErrorDisplayProps\n> = ({ error, className }) => {\n\tconst docsUrl = \"https://cossistant.com/docs/quickstart/api-keys\";\n\tconst isInvalidKey = error.type === \"invalid_api_key\";\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-full flex-col bg-co-background text-co-foreground\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t{/* Hero section with logo */}\n\t\t\t<div\n\t\t\t\tclassName={cn(\"flex flex-col items-center justify-center px-6 pb-10\")}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"mb-4 flex h-20 w-20 items-center justify-center rounded-2xl\",\n\t\t\t\t\t\tisInvalidKey\n\t\t\t\t\t\t\t? \"bg-co-orange/10 text-co-orange\"\n\t\t\t\t\t\t\t: \"bg-co-blue/10 text-co-blue\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<CossistantLogo className=\"h-10 w-10\" />\n\t\t\t\t</div>\n\t\t\t\t<h2 className=\"font-semibold text-lg\">\n\t\t\t\t\t{isInvalidKey ? \"Invalid API Key\" : \"Setup Required\"}\n\t\t\t\t</h2>\n\t\t\t\t<p className=\"mt-1 text-center text-co-muted-foreground text-sm\">\n\t\t\t\t\t{isInvalidKey\n\t\t\t\t\t\t? \"Your API key couldn't be verified\"\n\t\t\t\t\t\t: \"Almost there! Just add your API key\"}\n\t\t\t\t</p>\n\t\t\t</div>\n\n\t\t\t{/* Content */}\n\t\t\t<div className=\"flex flex-1 flex-col gap-8 overflow-y-auto px-5 pb-4\">\n\t\t\t\t{isInvalidKey ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\t{/* Error details card */}\n\t\t\t\t\t\t<div className=\"rounded-lg border border-co-orange/20 bg-co-orange/5 p-4\">\n\t\t\t\t\t\t\t<h4 className=\"mb-2 font-medium text-co-foreground text-sm\">\n\t\t\t\t\t\t\t\tCommon causes:\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<ul className=\"space-y-1.5 text-co-muted-foreground text-sm\">\n\t\t\t\t\t\t\t\t<li className=\"flex items-start gap-2\">\n\t\t\t\t\t\t\t\t\t<span className=\"mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60\" />\n\t\t\t\t\t\t\t\t\tAPI key has been revoked or deleted\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li className=\"flex items-start gap-2\">\n\t\t\t\t\t\t\t\t\t<span className=\"mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60\" />\n\t\t\t\t\t\t\t\t\tKey has expired\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li className=\"flex items-start gap-2\">\n\t\t\t\t\t\t\t\t\t<span className=\"mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60\" />\n\t\t\t\t\t\t\t\t\tDomain not in the allowed list\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li className=\"flex items-start gap-2\">\n\t\t\t\t\t\t\t\t\t<span className=\"mt-1.5 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-co-orange/60\" />\n\t\t\t\t\t\t\t\t\tUsing a test key on production\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<div className=\"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-yellow/10 font-semibold text-co-yellow text-xs\">\n\t\t\t\t\t\t\t\t1\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex flex-1 flex-col gap-3\">\n\t\t\t\t\t\t\t\t<h4 className=\"mt-1 font-medium text-sm\">Create an account</h4>\n\t\t\t\t\t\t\t\t<CoButton asChild variant=\"secondary\">\n\t\t\t\t\t\t\t\t\t<a\n\t\t\t\t\t\t\t\t\t\thref=\"https://cossistant.com/sign-up\"\n\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tCreate an account\n\t\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t\t</CoButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<div className=\"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-blue/10 font-semibold text-co-blue text-xs\">\n\t\t\t\t\t\t\t\t2\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"mt-1 flex flex-1 flex-col gap-2\">\n\t\t\t\t\t\t\t\t<h4 className=\"font-medium text-sm\">Get your public API key</h4>\n\t\t\t\t\t\t\t\t<p className=\"mt-0.5 text-co-primary/60 text-xs\">\n\t\t\t\t\t\t\t\t\t(Go to{\" \"}\n\t\t\t\t\t\t\t\t\t<span className=\"font-medium text-co-primary/60\">\n\t\t\t\t\t\t\t\t\t\tSettings / Developers\n\t\t\t\t\t\t\t\t\t</span>{\" \"}\n\t\t\t\t\t\t\t\t\tin your dashboard)\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<div className=\"flex gap-3\">\n\t\t\t\t\t\t\t<div className=\"flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-full bg-co-pink/10 font-semibold text-co-pink text-xs\">\n\t\t\t\t\t\t\t\t3\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"flex flex-1 flex-col gap-3\">\n\t\t\t\t\t\t\t\t<h4 className=\"mt-1 font-medium text-sm\">\n\t\t\t\t\t\t\t\t\tAdd to your environment\n\t\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t\t<div className=\"mt-2 overflow-hidden rounded-lg border border-co-border bg-co-background-100\">\n\t\t\t\t\t\t\t\t\t<div className=\"border-co-border border-b bg-co-background-50 px-3 py-1\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"font-mono text-co-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t\t\t.env\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t<div className=\"p-3 font-mono text-xs\">\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t{error.envVarName}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t=pk_live_...\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t</div>\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</div>\n\n\t\t\t{/* Footer with CTA */}\n\t\t\t<div className=\"border-co-border border-t p-4\">\n\t\t\t\t<a\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5\",\n\t\t\t\t\t\t\"bg-co-primary text-co-primary-foreground\",\n\t\t\t\t\t\t\"font-medium text-sm\",\n\t\t\t\t\t\t\"transition-all hover:opacity-90 active:scale-[0.98]\"\n\t\t\t\t\t)}\n\t\t\t\t\thref={docsUrl}\n\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t>\n\t\t\t\t\tView our docs\n\t\t\t\t\t<Icon name=\"arrow-right\" />\n\t\t\t\t</a>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAaA,6BAER,EAAE,OAAO,gBAAgB;CAC7B,MAAM,UAAU;CAChB,MAAM,eAAe,MAAM,SAAS;AAEpC,QACC,qBAAC;EACA,WAAW,GACV,4DACA,UACA;;GAGD,qBAAC;IACA,WAAW,GAAG,uDAAuD;;KAErE,oBAAC;MACA,WAAW,GACV,+DACA,eACG,mCACA,6BACH;gBAED,oBAAC,kBAAe,WAAU,cAAc;OACnC;KACN,oBAAC;MAAG,WAAU;gBACZ,eAAe,oBAAoB;OAChC;KACL,oBAAC;MAAE,WAAU;gBACX,eACE,sCACA;OACA;;KACC;GAGN,oBAAC;IAAI,WAAU;cACb,eACA,0CAEC,qBAAC;KAAI,WAAU;gBACd,oBAAC;MAAG,WAAU;gBAA8C;OAEvD,EACL,qBAAC;MAAG,WAAU;;OACb,qBAAC;QAAG,WAAU;mBACb,oBAAC,UAAK,WAAU,kEAAkE;SAE9E;OACL,qBAAC;QAAG,WAAU;mBACb,oBAAC,UAAK,WAAU,kEAAkE;SAE9E;OACL,qBAAC;QAAG,WAAU;mBACb,oBAAC,UAAK,WAAU,kEAAkE;SAE9E;OACL,qBAAC;QAAG,WAAU;mBACb,oBAAC,UAAK,WAAU,kEAAkE;SAE9E;;OACD;MACA,GACJ,GAEH;KACC,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAI,WAAU;iBAA2H;QAEpI,EACN,qBAAC;OAAI,WAAU;kBACd,oBAAC;QAAG,WAAU;kBAA2B;SAAsB,EAC/D,oBAAC;QAAS;QAAQ,SAAQ;kBACzB,oBAAC;SACA,MAAK;SACL,KAAI;SACJ,QAAO;mBACP;UAEG;SACM;QACN;OACD;KACN,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAI,WAAU;iBAAuH;QAEhI,EACN,qBAAC;OAAI,WAAU;kBACd,oBAAC;QAAG,WAAU;kBAAsB;SAA4B,EAChE,qBAAC;QAAE,WAAU;;SAAoC;SACzC;SACP,oBAAC;UAAK,WAAU;oBAAiC;WAE1C;SAAC;SAAI;;SAET;QACC;OACD;KAEN,qBAAC;MAAI,WAAU;iBACd,oBAAC;OAAI,WAAU;iBAAuH;QAEhI,EACN,qBAAC;OAAI,WAAU;kBACd,oBAAC;QAAG,WAAU;kBAA2B;SAEpC,EACL,qBAAC;QAAI,WAAU;mBACd,oBAAC;SAAI,WAAU;mBACd,oBAAC;UAAK,WAAU;oBAA6C;WAEtD;UACF,EACN,qBAAC;SAAI,WAAU;oBACd,oBAAC;UAAK,WAAU;oBACd,MAAM;WACD,EACP,oBAAC;UAAK,WAAU;oBAA2B;WAEpC;UACF;SACD;QACD;OACD;QACJ;KAEC;GAGN,oBAAC;IAAI,WAAU;cACd,qBAAC;KACA,WAAW,GACV,wEACA,4CACA,uBACA,sDACA;KACD,MAAM;KACN,KAAI;KACJ,QAAO;gBACP,iBAEA,oBAAC,QAAK,MAAK,gBAAgB;MACxB;KACC;;GACD"}

package/support/components/content.js

@@ -1,6 +1,5 @@
 "use client";
 
-
 import { cn } from "../utils/index.js";
 import { useTriggerRef } from "../context/positioning.js";
 import { useSupportConfig } from "../store/support-store.js";
@@ -245,7 +244,7 @@ const ContentInner = ({ children, containerRef, showScrollIndicator }) => {
 				children: header
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("flex flex-1 flex-col overflow-y-auto", !hasCustomHeader && "pt-18"),
+				className: cn("flex flex-1 flex-col overflow-y-auto", !hasCustomHeader && "pt-16"),
 				ref: containerRef,
 				children
 			}),