@cossistant/react 0.0.4 → 0.0.6

package/support/components/navigation-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-tab.js","names":["Icon"],"sources":["../../../src/support/components/navigation-tab.tsx"],"sourcesContent":["import { useSupportNavigation } from \"../store\";\nimport { Text } from \"../text\";\nimport { Button } from \"./button\";\nimport Icon from \"./icons\";\n\nexport function NavigationTab() {\n\tconst { current, navigate } = useSupportNavigation();\n\n\treturn (\n\t\t<div className=\"flex w-full items-center justify-center gap-2\">\n\t\t\t<Button\n\t\t\t\tonClick={() => navigate({ page: \"HOME\" })}\n\t\t\t\tvariant={current.page === \"HOME\" ? \"tab-selected\" : \"tab\"}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tfilledOnHover\n\t\t\t\t\tname=\"home\"\n\t\t\t\t\tvariant={current.page === \"HOME\" ? \"filled\" : \"default\"}\n\t\t\t\t/>\n\t\t\t\t<Text as=\"span\" textKey=\"component.navigation.home\" />\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tonClick={() => navigate({ page: \"ARTICLES\" })}\n\t\t\t\tvariant={current.page === \"ARTICLES\" ? \"tab-selected\" : \"tab\"}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tfilledOnHover\n\t\t\t\t\tname=\"articles\"\n\t\t\t\t\tvariant={current.page === \"ARTICLES\" ? \"filled\" : \"default\"}\n\t\t\t\t/>\n\t\t\t\t<Text as=\"span\" textKey=\"component.navigation.articles\" />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,gBAAgB;CAC/B,MAAM,EAAE,SAAS,aAAa,sBAAsB;AAEpD,QACC,qBAAC;EAAI,WAAU;aACd,qBAAC;GACA,eAAe,SAAS,EAAE,MAAM,QAAQ,CAAC;GACzC,SAAS,QAAQ,SAAS,SAAS,iBAAiB;cAEpD,oBAACA;IACA;IACA,MAAK;IACL,SAAS,QAAQ,SAAS,SAAS,WAAW;KAC7C,EACF,oBAAC;IAAK,IAAG;IAAO,SAAQ;KAA8B;IAC9C,EACT,qBAAC;GACA,eAAe,SAAS,EAAE,MAAM,YAAY,CAAC;GAC7C,SAAS,QAAQ,SAAS,aAAa,iBAAiB;cAExD,oBAACA;IACA;IACA,MAAK;IACL,SAAS,QAAQ,SAAS,aAAa,WAAW;KACjD,EACF,oBAAC;IAAK,IAAG;IAAO,SAAQ;KAAkC;IAClD;GACJ"}
+{"version":3,"file":"navigation-tab.js","names":["Icon"],"sources":["../../../src/support/components/navigation-tab.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { useSupportNavigation } from \"../store\";\nimport { Text } from \"../text\";\nimport { Button } from \"./button\";\nimport Icon from \"./icons\";\n\n/**\n * Tab bar used inside the widget header to switch between home and knowledge\n * base views.\n */\nexport function NavigationTab(): ReactElement {\n\tconst { current, navigate } = useSupportNavigation();\n\n\treturn (\n\t\t<div className=\"flex w-full items-center justify-center gap-2\">\n\t\t\t<Button\n\t\t\t\tonClick={() => navigate({ page: \"HOME\" })}\n\t\t\t\tvariant={current.page === \"HOME\" ? \"tab-selected\" : \"tab\"}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tfilledOnHover\n\t\t\t\t\tname=\"home\"\n\t\t\t\t\tvariant={current.page === \"HOME\" ? \"filled\" : \"default\"}\n\t\t\t\t/>\n\t\t\t\t<Text as=\"span\" textKey=\"component.navigation.home\" />\n\t\t\t</Button>\n\t\t\t<Button\n\t\t\t\tonClick={() => navigate({ page: \"ARTICLES\" })}\n\t\t\t\tvariant={current.page === \"ARTICLES\" ? \"tab-selected\" : \"tab\"}\n\t\t\t>\n\t\t\t\t<Icon\n\t\t\t\t\tfilledOnHover\n\t\t\t\t\tname=\"articles\"\n\t\t\t\t\tvariant={current.page === \"ARTICLES\" ? \"filled\" : \"default\"}\n\t\t\t\t/>\n\t\t\t\t<Text as=\"span\" textKey=\"component.navigation.articles\" />\n\t\t\t</Button>\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAgB,gBAA8B;CAC7C,MAAM,EAAE,SAAS,aAAa,sBAAsB;AAEpD,QACC,qBAAC;EAAI,WAAU;aACd,qBAAC;GACA,eAAe,SAAS,EAAE,MAAM,QAAQ,CAAC;GACzC,SAAS,QAAQ,SAAS,SAAS,iBAAiB;cAEpD,oBAACA;IACA;IACA,MAAK;IACL,SAAS,QAAQ,SAAS,SAAS,WAAW;KAC7C,EACF,oBAAC;IAAK,IAAG;IAAO,SAAQ;KAA8B;IAC9C,EACT,qBAAC;GACA,eAAe,SAAS,EAAE,MAAM,YAAY,CAAC;GAC7C,SAAS,QAAQ,SAAS,aAAa,iBAAiB;cAExD,oBAACA;IACA;IACA,MAAK;IACL,SAAS,QAAQ,SAAS,aAAa,WAAW;KACjD,EACF,oBAAC;IAAK,IAAG;IAAO,SAAQ;KAAkC;IAClD;GACJ"}

package/support/components/support-content.d.ts

@@ -5,7 +5,7 @@ type SupportContentProps = {
   className?: string;
   position?: "top" | "bottom";
   align?: "right" | "left";
-  mode?: "floating" | "responsive";
+  positioning?: "fixed" | "absolute";
 };
 /**
  * Main support widget content container.

package/support/components/support-content.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"support-content.d.ts","names":[],"sources":["../../../src/support/components/support-content.tsx"],"sourcesContent":[],"mappings":";;;KAUK,mBAAA;;EAAA,QAAA,CAAA,EAAA,KAAA,GAAA,QAAmB;EAgBX,KAAA,CAAA,EAAA,OAAA,GAsCZ,MAAA;EAAA,IAAA,CAAA,EAAA,UAAA,GAAA,YAAA;;;;;;;;;;;cAtCY,gBAAgB,KAAA,CAAM,GAAG"}
+{"version":3,"file":"support-content.d.ts","names":[],"sources":["../../../src/support/components/support-content.tsx"],"sourcesContent":[],"mappings":";;;KAUK,mBAAA;;EAAA,QAAA,CAAA,EAAA,KAAA,GAAA,QAAmB;EAgBX,KAAA,CAAA,EAAA,OAAA,GAmCZ,MAAA;;;;;;;;;;;;cAnCY,gBAAgB,KAAA,CAAM,GAAG"}

package/support/components/support-content.js

@@ -18,14 +18,12 @@ import { motion } from "motion/react";
 * Each page (e.g., conversation, home) manages its own state internally,
 * so this component is purely presentational.
 */
-const SupportContent = ({ className, position = "bottom", align = "right", mode = "floating" }) => {
-	const containerClasses = cn("cossistant", {
-		"fixed z-[9999]": mode === "floating",
-		"bottom-4": mode === "floating" && position === "bottom",
-		"top-4": mode === "floating" && position === "top",
-		"right-4": mode === "floating" && align === "right",
-		"left-4": mode === "floating" && align === "left",
-		"relative h-full w-full": mode === "responsive"
+const SupportContent = ({ className, position = "bottom", align = "right", positioning = "fixed" }) => {
+	const containerClasses = cn("cossistant z-[9999]", positioning === "fixed" ? "fixed" : "absolute", {
+		"bottom-4": position === "bottom",
+		"top-4": position === "top",
+		"right-4": align === "right",
+		"left-4": align === "left"
 	}, className);
 	return /* @__PURE__ */ jsxs(motion.div, {
 		animate: { opacity: 1 },
@@ -36,9 +34,8 @@ const SupportContent = ({ className, position = "bottom", align = "right", mode
 			default: { ease: "anticipate" },
 			layout: { duration: .3 }
 		},
-		children: [mode === "floating" && /* @__PURE__ */ jsx(Bubble, { className: "z-[1000] md:z-[9999]" }), /* @__PURE__ */ jsx(Container, {
+		children: [/* @__PURE__ */ jsx(Bubble, { className: "z-[1000] md:z-[9999]" }), /* @__PURE__ */ jsx(Container, {
 			align,
-			mode,
 			position,
 			children: /* @__PURE__ */ jsx(SupportRouter, {})
 		})]

package/support/components/support-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"support-content.js","names":["SupportContent: React.FC<SupportContentProps>"],"sources":["../../../src/support/components/support-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\n\nimport { SupportRouter } from \"../router\";\nimport { cn } from \"../utils\";\nimport { Bubble } from \"./bubble\";\nimport { Container } from \"./container\";\n\ntype SupportContentProps = {\n\tclassName?: string;\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n\tmode?: \"floating\" | \"responsive\";\n};\n\n/**\n * Main support widget content container.\n *\n * Handles the layout and positioning of the support widget,\n * and renders the appropriate page via SupportRouter.\n *\n * Each page (e.g., conversation, home) manages its own state internally,\n * so this component is purely presentational.\n */\nexport const SupportContent: React.FC<SupportContentProps> = ({\n\tclassName,\n\tposition = \"bottom\",\n\talign = \"right\",\n\tmode = \"floating\",\n}) => {\n\tconst containerClasses = cn(\n\t\t\"cossistant\",\n\t\t{\n\t\t\t// Floating mode positioning\n\t\t\t\"fixed z-[9999]\": mode === \"floating\",\n\t\t\t\"bottom-4\": mode === \"floating\" && position === \"bottom\",\n\t\t\t\"top-4\": mode === \"floating\" && position === \"top\",\n\t\t\t\"right-4\": mode === \"floating\" && align === \"right\",\n\t\t\t\"left-4\": mode === \"floating\" && align === \"left\",\n\t\t\t// Responsive mode\n\t\t\t\"relative h-full w-full\": mode === \"responsive\",\n\t\t},\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1 }}\n\t\t\tclassName={containerClasses}\n\t\t\tinitial={{ opacity: 0 }}\n\t\t\tlayout=\"position\"\n\t\t\ttransition={{\n\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t}}\n\t\t>\n\t\t\t{mode === \"floating\" && <Bubble className=\"z-[1000] md:z-[9999]\" />}\n\t\t\t<Container align={align} mode={mode} position={position}>\n\t\t\t\t<SupportRouter />\n\t\t\t</Container>\n\t\t</motion.div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAaA,kBAAiD,EAC7D,WACA,WAAW,UACX,QAAQ,SACR,OAAO,iBACF;CACL,MAAM,mBAAmB,GACxB,cACA;EAEC,kBAAkB,SAAS;EAC3B,YAAY,SAAS,cAAc,aAAa;EAChD,SAAS,SAAS,cAAc,aAAa;EAC7C,WAAW,SAAS,cAAc,UAAU;EAC5C,UAAU,SAAS,cAAc,UAAU;EAE3C,0BAA0B,SAAS;EACnC,EACD,UACA;AAED,QACC,qBAAC,OAAO;EACP,SAAS,EAAE,SAAS,GAAG;EACvB,WAAW;EACX,SAAS,EAAE,SAAS,GAAG;EACvB,QAAO;EACP,YAAY;GACX,SAAS,EAAE,MAAM,cAAc;GAC/B,QAAQ,EAAE,UAAU,IAAK;GACzB;aAEA,SAAS,cAAc,oBAAC,UAAO,WAAU,yBAAyB,EACnE,oBAAC;GAAiB;GAAa;GAAgB;aAC9C,oBAAC,kBAAgB;IACN;GACA"}
+{"version":3,"file":"support-content.js","names":["SupportContent: React.FC<SupportContentProps>"],"sources":["../../../src/support/components/support-content.tsx"],"sourcesContent":["\"use client\";\n\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\n\nimport { SupportRouter } from \"../router\";\nimport { cn } from \"../utils\";\nimport { Bubble } from \"./bubble\";\nimport { Container } from \"./container\";\n\ntype SupportContentProps = {\n\tclassName?: string;\n\tposition?: \"top\" | \"bottom\";\n\talign?: \"right\" | \"left\";\n\tpositioning?: \"fixed\" | \"absolute\";\n};\n\n/**\n * Main support widget content container.\n *\n * Handles the layout and positioning of the support widget,\n * and renders the appropriate page via SupportRouter.\n *\n * Each page (e.g., conversation, home) manages its own state internally,\n * so this component is purely presentational.\n */\nexport const SupportContent: React.FC<SupportContentProps> = ({\n\tclassName,\n\tposition = \"bottom\",\n\talign = \"right\",\n\tpositioning = \"fixed\",\n}) => {\n\tconst containerClasses = cn(\n\t\t\"cossistant z-[9999]\",\n\t\tpositioning === \"fixed\" ? \"fixed\" : \"absolute\",\n\t\t{\n\t\t\t\"bottom-4\": position === \"bottom\",\n\t\t\t\"top-4\": position === \"top\",\n\t\t\t\"right-4\": align === \"right\",\n\t\t\t\"left-4\": align === \"left\",\n\t\t},\n\t\tclassName\n\t);\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1 }}\n\t\t\tclassName={containerClasses}\n\t\t\tinitial={{ opacity: 0 }}\n\t\t\tlayout=\"position\"\n\t\t\ttransition={{\n\t\t\t\tdefault: { ease: \"anticipate\" },\n\t\t\t\tlayout: { duration: 0.3 },\n\t\t\t}}\n\t\t>\n\t\t\t<Bubble className=\"z-[1000] md:z-[9999]\" />\n\t\t\t<Container align={align} position={position}>\n\t\t\t\t<SupportRouter />\n\t\t\t</Container>\n\t\t</motion.div>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA0BA,MAAaA,kBAAiD,EAC7D,WACA,WAAW,UACX,QAAQ,SACR,cAAc,cACT;CACL,MAAM,mBAAmB,GACxB,uBACA,gBAAgB,UAAU,UAAU,YACpC;EACC,YAAY,aAAa;EACzB,SAAS,aAAa;EACtB,WAAW,UAAU;EACrB,UAAU,UAAU;EACpB,EACD,UACA;AAED,QACC,qBAAC,OAAO;EACP,SAAS,EAAE,SAAS,GAAG;EACvB,WAAW;EACX,SAAS,EAAE,SAAS,GAAG;EACvB,QAAO;EACP,YAAY;GACX,SAAS,EAAE,MAAM,cAAc;GAC/B,QAAQ,EAAE,UAAU,IAAK;GACzB;aAED,oBAAC,UAAO,WAAU,yBAAyB,EAC3C,oBAAC;GAAiB;GAAiB;aAClC,oBAAC,kBAAgB;IACN;GACA"}

package/support/components/text-effect.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
 import { Transition, Variants } from "motion/react";
 
 //#region src/support/components/text-effect.d.ts
@@ -26,6 +25,10 @@ type TextEffectProps = {
   segmentTransition?: Transition;
   style?: React.CSSProperties;
 };
+/**
+ * Animated typography helper that reveals text word-by-word or letter-by-letter
+ * with configurable motion presets.
+ */
 declare function TextEffect({
   children,
   per,
@@ -43,7 +46,7 @@ declare function TextEffect({
   containerTransition,
   segmentTransition,
   style
-}: TextEffectProps): react_jsx_runtime7.JSX.Element;
+}: TextEffectProps): React.ReactElement;
 //#endregion
 export { PerType, PresetType, TextEffect, TextEffectProps };
 //# sourceMappingURL=text-effect.d.ts.map

package/support/components/text-effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-effect.d.ts","names":[],"sources":["../../../src/support/components/text-effect.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,UAAA;KAEA,OAAA;KAIA,eAAA;EANA,QAAA,EAAA,MAAU,GAAA,MAAA,EAAA;EAEV,GAAA,CAAA,EAML,OANY;EAIP,EAAA,CAAA,EAAA,MAGA,KAAA,CAAM,GAAA,CAAI,iBAHK;EAAA,QAAA,CAAA,EAAA;IAEpB,SAAA,CAAA,EAGO,QAHP;IACK,IAAA,CAAM,EAGT,QAHa;;WAGb,CAAA,EAAA,MAAA;QAGC,CAAA,EAAA,UAAA;OAQa,CAAA,EAAA,MAAA;aACF,CAAA,EAAA,MAAA;cACN,CAAA,EAAA,MAAA;EAAa,OAAA,CAAA,EAAA,OAAA;EA+KZ,mBAAU,CAAA,EAAA,GAAA,GAAA,IAAA;EAAA,gBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;yBACzB,CAAA,EAAA,MAAA;qBACA,CAAA,EAnLsB,UAmLtB;mBACA,CAAA,EAnLoB,UAmLpB;OACA,CAAA,EAnLQ,KAAA,CAAM,aAmLd;;AAEA,iBANe,UAAA,CAMf;EAAA,QAAA;EAAA,GAAA;EAAA,EAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,KAAA;EAAA,WAAA;EAAA,YAAA;EAAA,OAAA;EAAA,mBAAA;EAAA,gBAAA;EAAA,uBAAA;EAAA,mBAAA;EAAA,iBAAA;EAAA;AAAA,CAAA,EAWE,eAXF,CAAA,EAWiB,kBAAA,CAAA,GAAA,CAAA,OAXjB"}
+{"version":3,"file":"text-effect.d.ts","names":[],"sources":["../../../src/support/components/text-effect.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,UAAA;KAEA,OAAA;AAFA,KAMA,eAAA,GANU;EAEV,QAAA,EAAO,MAAA,GAAA,MAAA,EAAA;EAIP,GAAA,CAAA,EAEL,OAFK;EAEL,EAAA,CAAA,EAAA,MACK,KAAA,CAAM,GAAA,CAAI,iBADf;EACK,QAAU,CAAA,EAAA;IAER,SAAA,CAAA,EAAA,QAAA;IACL,IAAA,CAAA,EAAA,QAAA;EAGC,CAAA;EAQa,SAAA,CAAA,EAAA,MAAA;EACF,MAAA,CAAA,EATX,UASW;EACZ,KAAM,CAAA,EAAA,MAAA;EAAa,WAAA,CAAA,EAAA,MAAA;EAmLZ,YAAA,CAAU,EAAA,MAAA;EACzB,OAAA,CAAA,EAAA,OAAA;EACA,mBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACA,gBAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACA,uBAAA,CAAA,EAAA,MAAA;EACA,mBAAA,CAAA,EA1LsB,UA0LtB;EACA,iBAAA,CAAA,EA1LoB,UA0LpB;EACA,KAAA,CAAA,EA1LQ,KAAA,CAAM,aA0Ld;CACA;;;;;AAKA,iBAbe,UAAA,CAaf;EAAA,QAAA;EAAA,GAAA;EAAA,EAAA;EAAA,QAAA;EAAA,SAAA;EAAA,MAAA;EAAA,KAAA;EAAA,WAAA;EAAA,YAAA;EAAA,OAAA;EAAA,mBAAA;EAAA,gBAAA;EAAA,uBAAA;EAAA,mBAAA;EAAA,iBAAA;EAAA;AAAA,CAAA,EAIE,eAJF,CAAA,EAIoB,KAAA,CAAM,YAJ1B"}

package/support/components/text-effect.js

@@ -166,6 +166,10 @@ const createVariantsWithTransition = (baseVariants, transition) => {
 		}
 	};
 };
+/**
+* Animated typography helper that reveals text word-by-word or letter-by-letter
+* with configurable motion presets.
+*/
 function TextEffect({ children, per = "word", as = "p", variants, className, preset = "fade", delay = 0, speedReveal = 1, speedSegment = 1, trigger = true, onAnimationComplete, onAnimationStart, segmentWrapperClassName, containerTransition, segmentTransition, style }) {
 	const segments = splitText(Array.isArray(children) ? children.join("") : children, per);
 	const MotionTag = motion[as];

package/support/components/text-effect.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-effect.js","names":["defaultStaggerTimes: Record<PerType, number>","defaultContainerVariants: Variants","defaultItemVariants: Variants","presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n>","AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}>"],"sources":["../../../src/support/components/text-effect.tsx"],"sourcesContent":["\"use client\";\nimport type {\n\tTargetAndTransition,\n\tTransition,\n\tVariant,\n\tVariants,\n} from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React from \"react\";\nimport { cn } from \"../utils\";\n\nexport type PresetType = \"blur\" | \"fade-in-blur\" | \"scale\" | \"fade\" | \"slide\";\n\nexport type PerType = \"word\" | \"char\" | \"line\";\n\nconst SPACE_REGEX = /(\\s+)/;\n\nexport type TextEffectProps = {\n\tchildren: string | string[];\n\tper?: PerType;\n\tas?: keyof React.JSX.IntrinsicElements;\n\tvariants?: {\n\t\tcontainer?: Variants;\n\t\titem?: Variants;\n\t};\n\tclassName?: string;\n\tpreset?: PresetType;\n\tdelay?: number;\n\tspeedReveal?: number;\n\tspeedSegment?: number;\n\ttrigger?: boolean;\n\tonAnimationComplete?: () => void;\n\tonAnimationStart?: () => void;\n\tsegmentWrapperClassName?: string;\n\tcontainerTransition?: Transition;\n\tsegmentTransition?: Transition;\n\tstyle?: React.CSSProperties;\n};\n\nconst defaultStaggerTimes: Record<PerType, number> = {\n\tchar: 0.03,\n\tword: 0.05,\n\tline: 0.1,\n};\n\nconst defaultContainerVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tstaggerChildren: 0.05,\n\t\t},\n\t},\n\texit: {\n\t\ttransition: { staggerChildren: 0.05, staggerDirection: -1 },\n\t},\n};\n\nconst defaultItemVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t},\n\texit: { opacity: 0 },\n};\n\nconst presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n> = {\n\tblur: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\t\"fade-in-blur\": {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\tscale: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, scale: 0 },\n\t\t\tvisible: { opacity: 1, scale: 1 },\n\t\t\texit: { opacity: 0, scale: 0 },\n\t\t},\n\t},\n\tfade: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0 },\n\t\t\tvisible: { opacity: 1 },\n\t\t\texit: { opacity: 0 },\n\t\t},\n\t},\n\tslide: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20 },\n\t\t\tvisible: { opacity: 1, y: 0 },\n\t\t\texit: { opacity: 0, y: 20 },\n\t\t},\n\t},\n};\n\nconst AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {\n\tconst content =\n\t\tper === \"line\" ? (\n\t\t\t<motion.span className=\"block\" variants={variants}>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : per === \"word\" ? (\n\t\t\t<motion.span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\tvariants={variants}\n\t\t\t>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : (\n\t\t\t<motion.span className=\"inline-block whitespace-pre\">\n\t\t\t\t{segment.split(\"\").map((char, charIndex) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\t\t\tkey={`char-${charIndex}`}\n\t\t\t\t\t\tvariants={variants}\n\t\t\t\t\t>\n\t\t\t\t\t\t{char}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.span>\n\t\t);\n\n\tif (!segmentWrapperClassName) {\n\t\treturn content;\n\t}\n\n\tconst defaultWrapperClassName = per === \"line\" ? \"block\" : \"inline-block\";\n\n\treturn (\n\t\t<span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>\n\t\t\t{content}\n\t\t</span>\n\t);\n});\n\nAnimationComponent.displayName = \"AnimationComponent\";\n\nconst splitText = (text: string, per: PerType) => {\n\tif (per === \"line\") {\n\t\treturn text.split(\"\\n\");\n\t}\n\treturn text.split(SPACE_REGEX);\n};\n\nconst hasTransition = (\n\tvariant?: Variant\n): variant is TargetAndTransition & { transition?: Transition } => {\n\tif (!variant) {\n\t\treturn false;\n\t}\n\treturn typeof variant === \"object\" && \"transition\" in variant;\n};\n\nconst createVariantsWithTransition = (\n\tbaseVariants: Variants,\n\ttransition?: Transition & { exit?: Transition }\n): Variants => {\n\tif (!transition) {\n\t\treturn baseVariants;\n\t}\n\n\tconst { exit: _, ...mainTransition } = transition;\n\n\treturn {\n\t\t...baseVariants,\n\t\tvisible: {\n\t\t\t...baseVariants.visible,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.visible)\n\t\t\t\t\t? baseVariants.visible.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\t...baseVariants.exit,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.exit)\n\t\t\t\t\t? baseVariants.exit.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t\tstaggerDirection: -1,\n\t\t\t},\n\t\t},\n\t};\n};\n\nexport function TextEffect({\n\tchildren,\n\tper = \"word\",\n\tas = \"p\",\n\tvariants,\n\tclassName,\n\tpreset = \"fade\",\n\tdelay = 0,\n\tspeedReveal = 1,\n\tspeedSegment = 1,\n\ttrigger = true,\n\tonAnimationComplete,\n\tonAnimationStart,\n\tsegmentWrapperClassName,\n\tcontainerTransition,\n\tsegmentTransition,\n\tstyle,\n}: TextEffectProps) {\n\tconst segments = splitText(\n\t\tArray.isArray(children) ? children.join(\"\") : children,\n\t\tper\n\t);\n\tconst MotionTag = motion[as as keyof typeof motion] as typeof motion.div;\n\n\tconst baseVariants = preset\n\t\t? presetVariants[preset]\n\t\t: { container: defaultContainerVariants, item: defaultItemVariants };\n\n\tconst stagger = defaultStaggerTimes[per] / speedReveal;\n\n\tconst baseDuration = 0.3 / speedSegment;\n\n\tconst customStagger = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.staggerChildren\n\t\t: undefined;\n\n\tconst customDelay = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.delayChildren\n\t\t: undefined;\n\n\tconst computedVariants = {\n\t\tcontainer: createVariantsWithTransition(\n\t\t\tvariants?.container || baseVariants.container,\n\t\t\t{\n\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\tdelayChildren: customDelay ?? delay,\n\t\t\t\t...containerTransition,\n\t\t\t\texit: {\n\t\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\t\tstaggerDirection: -1,\n\t\t\t\t},\n\t\t\t}\n\t\t),\n\t\titem: createVariantsWithTransition(variants?.item || baseVariants.item, {\n\t\t\tduration: baseDuration,\n\t\t\t...segmentTransition,\n\t\t}),\n\t};\n\n\treturn (\n\t\t<AnimatePresence mode=\"popLayout\">\n\t\t\t{trigger && (\n\t\t\t\t<MotionTag\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tclassName={className}\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tonAnimationComplete={onAnimationComplete}\n\t\t\t\t\tonAnimationStart={onAnimationStart}\n\t\t\t\t\tstyle={style}\n\t\t\t\t\tvariants={computedVariants.container}\n\t\t\t\t>\n\t\t\t\t\t{per !== \"line\" ? <span className=\"sr-only\">{children}</span> : null}\n\t\t\t\t\t{segments.map((segment, index) => (\n\t\t\t\t\t\t<AnimationComponent\n\t\t\t\t\t\t\tkey={`${per}-${index}-${segment}`}\n\t\t\t\t\t\t\tper={per}\n\t\t\t\t\t\t\tsegment={segment}\n\t\t\t\t\t\t\tsegmentWrapperClassName={segmentWrapperClassName}\n\t\t\t\t\t\t\tvariants={computedVariants.item}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</MotionTag>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"text-effect.js","names":["defaultStaggerTimes: Record<PerType, number>","defaultContainerVariants: Variants","defaultItemVariants: Variants","presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n>","AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}>"],"sources":["../../../src/support/components/text-effect.tsx"],"sourcesContent":["\"use client\";\nimport type {\n\tTargetAndTransition,\n\tTransition,\n\tVariant,\n\tVariants,\n} from \"motion/react\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React from \"react\";\nimport { cn } from \"../utils\";\n\nexport type PresetType = \"blur\" | \"fade-in-blur\" | \"scale\" | \"fade\" | \"slide\";\n\nexport type PerType = \"word\" | \"char\" | \"line\";\n\nconst SPACE_REGEX = /(\\s+)/;\n\nexport type TextEffectProps = {\n\tchildren: string | string[];\n\tper?: PerType;\n\tas?: keyof React.JSX.IntrinsicElements;\n\tvariants?: {\n\t\tcontainer?: Variants;\n\t\titem?: Variants;\n\t};\n\tclassName?: string;\n\tpreset?: PresetType;\n\tdelay?: number;\n\tspeedReveal?: number;\n\tspeedSegment?: number;\n\ttrigger?: boolean;\n\tonAnimationComplete?: () => void;\n\tonAnimationStart?: () => void;\n\tsegmentWrapperClassName?: string;\n\tcontainerTransition?: Transition;\n\tsegmentTransition?: Transition;\n\tstyle?: React.CSSProperties;\n};\n\nconst defaultStaggerTimes: Record<PerType, number> = {\n\tchar: 0.03,\n\tword: 0.05,\n\tline: 0.1,\n};\n\nconst defaultContainerVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tstaggerChildren: 0.05,\n\t\t},\n\t},\n\texit: {\n\t\ttransition: { staggerChildren: 0.05, staggerDirection: -1 },\n\t},\n};\n\nconst defaultItemVariants: Variants = {\n\thidden: { opacity: 0 },\n\tvisible: {\n\t\topacity: 1,\n\t},\n\texit: { opacity: 0 },\n};\n\nconst presetVariants: Record<\n\tPresetType,\n\t{ container: Variants; item: Variants }\n> = {\n\tblur: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\t\"fade-in-blur\": {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t\tvisible: { opacity: 1, y: 0, filter: \"blur(0px)\" },\n\t\t\texit: { opacity: 0, y: 20, filter: \"blur(12px)\" },\n\t\t},\n\t},\n\tscale: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, scale: 0 },\n\t\t\tvisible: { opacity: 1, scale: 1 },\n\t\t\texit: { opacity: 0, scale: 0 },\n\t\t},\n\t},\n\tfade: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0 },\n\t\t\tvisible: { opacity: 1 },\n\t\t\texit: { opacity: 0 },\n\t\t},\n\t},\n\tslide: {\n\t\tcontainer: defaultContainerVariants,\n\t\titem: {\n\t\t\thidden: { opacity: 0, y: 20 },\n\t\t\tvisible: { opacity: 1, y: 0 },\n\t\t\texit: { opacity: 0, y: 20 },\n\t\t},\n\t},\n};\n\nconst AnimationComponent: React.FC<{\n\tsegment: string;\n\tvariants: Variants;\n\tper: \"line\" | \"word\" | \"char\";\n\tsegmentWrapperClassName?: string;\n}> = React.memo(({ segment, variants, per, segmentWrapperClassName }) => {\n\tconst content =\n\t\tper === \"line\" ? (\n\t\t\t<motion.span className=\"block\" variants={variants}>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : per === \"word\" ? (\n\t\t\t<motion.span\n\t\t\t\taria-hidden=\"true\"\n\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\tvariants={variants}\n\t\t\t>\n\t\t\t\t{segment}\n\t\t\t</motion.span>\n\t\t) : (\n\t\t\t<motion.span className=\"inline-block whitespace-pre\">\n\t\t\t\t{segment.split(\"\").map((char, charIndex) => (\n\t\t\t\t\t<motion.span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclassName=\"inline-block whitespace-pre\"\n\t\t\t\t\t\tkey={`char-${charIndex}`}\n\t\t\t\t\t\tvariants={variants}\n\t\t\t\t\t>\n\t\t\t\t\t\t{char}\n\t\t\t\t\t</motion.span>\n\t\t\t\t))}\n\t\t\t</motion.span>\n\t\t);\n\n\tif (!segmentWrapperClassName) {\n\t\treturn content;\n\t}\n\n\tconst defaultWrapperClassName = per === \"line\" ? \"block\" : \"inline-block\";\n\n\treturn (\n\t\t<span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>\n\t\t\t{content}\n\t\t</span>\n\t);\n});\n\nAnimationComponent.displayName = \"AnimationComponent\";\n\nconst splitText = (text: string, per: PerType) => {\n\tif (per === \"line\") {\n\t\treturn text.split(\"\\n\");\n\t}\n\treturn text.split(SPACE_REGEX);\n};\n\nconst hasTransition = (\n\tvariant?: Variant\n): variant is TargetAndTransition & { transition?: Transition } => {\n\tif (!variant) {\n\t\treturn false;\n\t}\n\treturn typeof variant === \"object\" && \"transition\" in variant;\n};\n\nconst createVariantsWithTransition = (\n\tbaseVariants: Variants,\n\ttransition?: Transition & { exit?: Transition }\n): Variants => {\n\tif (!transition) {\n\t\treturn baseVariants;\n\t}\n\n\tconst { exit: _, ...mainTransition } = transition;\n\n\treturn {\n\t\t...baseVariants,\n\t\tvisible: {\n\t\t\t...baseVariants.visible,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.visible)\n\t\t\t\t\t? baseVariants.visible.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t},\n\t\t},\n\t\texit: {\n\t\t\t...baseVariants.exit,\n\t\t\ttransition: {\n\t\t\t\t...(hasTransition(baseVariants.exit)\n\t\t\t\t\t? baseVariants.exit.transition\n\t\t\t\t\t: {}),\n\t\t\t\t...mainTransition,\n\t\t\t\tstaggerDirection: -1,\n\t\t\t},\n\t\t},\n\t};\n};\n\n/**\n * Animated typography helper that reveals text word-by-word or letter-by-letter\n * with configurable motion presets.\n */\nexport function TextEffect({\n\tchildren,\n\tper = \"word\",\n\tas = \"p\",\n\tvariants,\n\tclassName,\n\tpreset = \"fade\",\n\tdelay = 0,\n\tspeedReveal = 1,\n\tspeedSegment = 1,\n\ttrigger = true,\n\tonAnimationComplete,\n\tonAnimationStart,\n\tsegmentWrapperClassName,\n\tcontainerTransition,\n\tsegmentTransition,\n\tstyle,\n}: TextEffectProps): React.ReactElement {\n\tconst segments = splitText(\n\t\tArray.isArray(children) ? children.join(\"\") : children,\n\t\tper\n\t);\n\tconst MotionTag = motion[as as keyof typeof motion] as typeof motion.div;\n\n\tconst baseVariants = preset\n\t\t? presetVariants[preset]\n\t\t: { container: defaultContainerVariants, item: defaultItemVariants };\n\n\tconst stagger = defaultStaggerTimes[per] / speedReveal;\n\n\tconst baseDuration = 0.3 / speedSegment;\n\n\tconst customStagger = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.staggerChildren\n\t\t: undefined;\n\n\tconst customDelay = hasTransition(variants?.container?.visible ?? {})\n\t\t? (variants?.container?.visible as TargetAndTransition).transition\n\t\t\t\t?.delayChildren\n\t\t: undefined;\n\n\tconst computedVariants = {\n\t\tcontainer: createVariantsWithTransition(\n\t\t\tvariants?.container || baseVariants.container,\n\t\t\t{\n\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\tdelayChildren: customDelay ?? delay,\n\t\t\t\t...containerTransition,\n\t\t\t\texit: {\n\t\t\t\t\tstaggerChildren: customStagger ?? stagger,\n\t\t\t\t\tstaggerDirection: -1,\n\t\t\t\t},\n\t\t\t}\n\t\t),\n\t\titem: createVariantsWithTransition(variants?.item || baseVariants.item, {\n\t\t\tduration: baseDuration,\n\t\t\t...segmentTransition,\n\t\t}),\n\t};\n\n\treturn (\n\t\t<AnimatePresence mode=\"popLayout\">\n\t\t\t{trigger && (\n\t\t\t\t<MotionTag\n\t\t\t\t\tanimate=\"visible\"\n\t\t\t\t\tclassName={className}\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\tinitial=\"hidden\"\n\t\t\t\t\tonAnimationComplete={onAnimationComplete}\n\t\t\t\t\tonAnimationStart={onAnimationStart}\n\t\t\t\t\tstyle={style}\n\t\t\t\t\tvariants={computedVariants.container}\n\t\t\t\t>\n\t\t\t\t\t{per !== \"line\" ? <span className=\"sr-only\">{children}</span> : null}\n\t\t\t\t\t{segments.map((segment, index) => (\n\t\t\t\t\t\t<AnimationComponent\n\t\t\t\t\t\t\tkey={`${per}-${index}-${segment}`}\n\t\t\t\t\t\t\tper={per}\n\t\t\t\t\t\t\tsegment={segment}\n\t\t\t\t\t\t\tsegmentWrapperClassName={segmentWrapperClassName}\n\t\t\t\t\t\t\tvariants={computedVariants.item}\n\t\t\t\t\t\t/>\n\t\t\t\t\t))}\n\t\t\t\t</MotionTag>\n\t\t\t)}\n\t\t</AnimatePresence>\n\t);\n}\n"],"mappings":"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"}

package/support/components/timeline-identification-tool.d.ts

@@ -0,0 +1,7 @@
+import { ConversationTimelineToolProps } from "./conversation-timeline.js";
+
+//#region src/support/components/timeline-identification-tool.d.ts
+declare const IdentificationTimelineTool: React.FC<ConversationTimelineToolProps>;
+//#endregion
+export { IdentificationTimelineTool };
+//# sourceMappingURL=timeline-identification-tool.d.ts.map

package/support/components/timeline-identification-tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-identification-tool.d.ts","names":[],"sources":["../../../src/support/components/timeline-identification-tool.tsx"],"sourcesContent":[],"mappings":";;;cAca,4BAA4B,KAAA,CAAM,GAC9C"}

package/support/components/timeline-identification-tool.js

@@ -0,0 +1,139 @@
+import { Button } from "./button.js";
+import { useSupportText } from "../text/index.js";
+import { useVisitor } from "../../hooks/use-visitor.js";
+import { useSupport } from "../../provider.js";
+import { useCallback, useMemo, useState } from "react";
+import { ConversationEventType, ConversationTimelineType, TimelineItemVisibility } from "@cossistant/types/enums";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/timeline-identification-tool.tsx
+const IdentificationTimelineTool = ({ conversationId }) => {
+	const text = useSupportText();
+	const { identify, visitor } = useVisitor();
+	const { client } = useSupport();
+	const [email, setEmail] = useState("");
+	const [status, setStatus] = useState("idle");
+	const [errorMessage, setErrorMessage] = useState(null);
+	const isAlreadyIdentified = Boolean(visitor?.contact);
+	const hasSucceeded = status === "success" || isAlreadyIdentified;
+	const ctaLabel = text("component.identificationTool.cta");
+	const successLabel = text("component.identificationTool.success");
+	const description = text("component.identificationTool.description");
+	const title = text("component.identificationTool.title");
+	const submitDisabled = hasSucceeded || status === "submitting";
+	const handleSubmit = useCallback(async (event) => {
+		event.preventDefault();
+		if (submitDisabled) return;
+		const trimmedEmail = email.trim();
+		if (!trimmedEmail) {
+			setErrorMessage(text("component.identificationTool.validation"));
+			return;
+		}
+		setStatus("submitting");
+		setErrorMessage(null);
+		try {
+			const identifyResult = await identify({ email: trimmedEmail });
+			if (!identifyResult) {
+				setStatus("error");
+				setErrorMessage(text("component.identificationTool.error"));
+				return;
+			}
+			const payload = {
+				conversationId,
+				item: {
+					type: ConversationTimelineType.EVENT,
+					text: text("component.identificationTool.eventLog"),
+					tool: null,
+					parts: [{
+						type: "event",
+						eventType: ConversationEventType.VISITOR_IDENTIFIED,
+						actorUserId: null,
+						actorAiAgentId: null,
+						targetUserId: null,
+						targetAiAgentId: null,
+						message: text("component.identificationTool.eventLog")
+					}],
+					visitorId: identifyResult.visitorId,
+					visibility: TimelineItemVisibility.PUBLIC
+				}
+			};
+			await client.sendMessage(payload);
+			setStatus("success");
+			setEmail("");
+			client.fetchWebsite({ force: true }).catch(() => {});
+		} catch {
+			setStatus("error");
+			setErrorMessage(text("component.identificationTool.error"));
+		}
+	}, [
+		conversationId,
+		email,
+		identify,
+		client,
+		submitDisabled,
+		text
+	]);
+	const helperMessage = useMemo(() => {
+		if (errorMessage) return /* @__PURE__ */ jsx("p", {
+			className: "text-destructive text-xs",
+			role: "alert",
+			children: errorMessage
+		});
+		if (hasSucceeded) return /* @__PURE__ */ jsx("p", {
+			className: "text-primary text-xs",
+			children: successLabel
+		});
+		return null;
+	}, [
+		errorMessage,
+		hasSucceeded,
+		successLabel
+	]);
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded border border-co-border/60 bg-co-background-100 p-4 shadow-sm",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("h3", {
+					className: "font-semibold text-sm",
+					children: title
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-xs",
+					children: description
+				})]
+			}), hasSucceeded ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-md bg-co-primary/10 px-3 py-2 text-primary text-sm",
+				children: successLabel
+			}) : /* @__PURE__ */ jsxs("form", {
+				className: "flex gap-2",
+				onSubmit: handleSubmit,
+				children: [
+					/* @__PURE__ */ jsx("input", {
+						"aria-label": text("component.identificationTool.inputLabel"),
+						autoComplete: "email",
+						className: "h-10 w-full rounded border border-co-border/60 bg-transparent px-3 py-2 text-sm outline-none focus:border-co-primary focus:ring-2 focus:ring-co-primary/20",
+						disabled: submitDisabled,
+						inputMode: "email",
+						onChange: (event) => setEmail(event.target.value),
+						placeholder: text("component.identificationTool.inputPlaceholder"),
+						type: "email",
+						value: email
+					}),
+					helperMessage,
+					/* @__PURE__ */ jsx(Button, {
+						className: "h-10",
+						disabled: submitDisabled,
+						type: "submit",
+						children: status === "submitting" ? text("component.identificationTool.loading") : ctaLabel
+					})
+				]
+			})]
+		})
+	});
+};
+IdentificationTimelineTool.displayName = "IdentificationTimelineTool";
+
+//#endregion
+export { IdentificationTimelineTool };
+//# sourceMappingURL=timeline-identification-tool.js.map

package/support/components/timeline-identification-tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-identification-tool.js","names":["IdentificationTimelineTool: React.FC<\n\tConversationTimelineToolProps\n>","payload: SendTimelineItemRequest"],"sources":["../../../src/support/components/timeline-identification-tool.tsx"],"sourcesContent":["import type { SendTimelineItemRequest } from \"@cossistant/types/api/timeline-item\";\nimport {\n\tConversationEventType,\n\tConversationTimelineType,\n\tTimelineItemVisibility,\n} from \"@cossistant/types/enums\";\nimport { type FormEventHandler, useCallback, useMemo, useState } from \"react\";\n\nimport { useVisitor } from \"../../hooks/use-visitor\";\nimport { useSupport } from \"../../provider\";\nimport { useSupportText } from \"../text\";\nimport { Button } from \"./button\";\nimport type { ConversationTimelineToolProps } from \"./conversation-timeline\";\n\nexport const IdentificationTimelineTool: React.FC<\n\tConversationTimelineToolProps\n> = ({ conversationId }) => {\n\tconst text = useSupportText();\n\tconst { identify, visitor } = useVisitor();\n\tconst { client } = useSupport();\n\tconst [email, setEmail] = useState(\"\");\n\tconst [status, setStatus] = useState<\n\t\t\"idle\" | \"submitting\" | \"success\" | \"error\"\n\t>(\"idle\");\n\tconst [errorMessage, setErrorMessage] = useState<string | null>(null);\n\n\tconst isAlreadyIdentified = Boolean(visitor?.contact);\n\tconst hasSucceeded = status === \"success\" || isAlreadyIdentified;\n\n\tconst ctaLabel = text(\"component.identificationTool.cta\");\n\tconst successLabel = text(\"component.identificationTool.success\");\n\tconst description = text(\"component.identificationTool.description\");\n\tconst title = text(\"component.identificationTool.title\");\n\n\tconst submitDisabled = hasSucceeded || status === \"submitting\";\n\n\tconst handleSubmit = useCallback<FormEventHandler<HTMLFormElement>>(\n\t\tasync (event) => {\n\t\t\tevent.preventDefault();\n\n\t\t\tif (submitDisabled) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst trimmedEmail = email.trim();\n\t\t\tif (!trimmedEmail) {\n\t\t\t\tsetErrorMessage(text(\"component.identificationTool.validation\"));\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetStatus(\"submitting\");\n\t\t\tsetErrorMessage(null);\n\n\t\t\ttry {\n\t\t\t\tconst identifyResult = await identify({ email: trimmedEmail });\n\n\t\t\t\tif (!identifyResult) {\n\t\t\t\t\tsetStatus(\"error\");\n\t\t\t\t\tsetErrorMessage(text(\"component.identificationTool.error\"));\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst payload: SendTimelineItemRequest = {\n\t\t\t\t\tconversationId,\n\t\t\t\t\titem: {\n\t\t\t\t\t\ttype: ConversationTimelineType.EVENT,\n\t\t\t\t\t\ttext: text(\"component.identificationTool.eventLog\"),\n\t\t\t\t\t\ttool: null,\n\t\t\t\t\t\tparts: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttype: \"event\" as const,\n\t\t\t\t\t\t\t\teventType: ConversationEventType.VISITOR_IDENTIFIED,\n\t\t\t\t\t\t\t\tactorUserId: null,\n\t\t\t\t\t\t\t\tactorAiAgentId: null,\n\t\t\t\t\t\t\t\ttargetUserId: null,\n\t\t\t\t\t\t\t\ttargetAiAgentId: null,\n\t\t\t\t\t\t\t\tmessage: text(\"component.identificationTool.eventLog\"),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t\tvisitorId: identifyResult.visitorId,\n\t\t\t\t\t\tvisibility: TimelineItemVisibility.PUBLIC,\n\t\t\t\t\t},\n\t\t\t\t};\n\n\t\t\t\tawait client.sendMessage(payload);\n\n\t\t\t\tsetStatus(\"success\");\n\t\t\t\tsetEmail(\"\");\n\n\t\t\t\tvoid client.fetchWebsite({ force: true }).catch(() => {});\n\t\t\t} catch {\n\t\t\t\tsetStatus(\"error\");\n\t\t\t\tsetErrorMessage(text(\"component.identificationTool.error\"));\n\t\t\t}\n\t\t},\n\t\t[conversationId, email, identify, client, submitDisabled, text]\n\t);\n\n\tconst helperMessage = useMemo(() => {\n\t\tif (errorMessage) {\n\t\t\treturn (\n\t\t\t\t<p className=\"text-destructive text-xs\" role=\"alert\">\n\t\t\t\t\t{errorMessage}\n\t\t\t\t</p>\n\t\t\t);\n\t\t}\n\n\t\tif (hasSucceeded) {\n\t\t\treturn <p className=\"text-primary text-xs\">{successLabel}</p>;\n\t\t}\n\n\t\treturn null;\n\t}, [errorMessage, hasSucceeded, successLabel]);\n\n\treturn (\n\t\t<div className=\"rounded border border-co-border/60 bg-co-background-100 p-4 shadow-sm\">\n\t\t\t<div className=\"flex flex-col gap-3\">\n\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t<h3 className=\"font-semibold text-sm\">{title}</h3>\n\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">{description}</p>\n\t\t\t\t</div>\n\t\t\t\t{hasSucceeded ? (\n\t\t\t\t\t<div className=\"rounded-md bg-co-primary/10 px-3 py-2 text-primary text-sm\">\n\t\t\t\t\t\t{successLabel}\n\t\t\t\t\t</div>\n\t\t\t\t) : (\n\t\t\t\t\t<form className=\"flex gap-2\" onSubmit={handleSubmit}>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\taria-label={text(\"component.identificationTool.inputLabel\")}\n\t\t\t\t\t\t\tautoComplete=\"email\"\n\t\t\t\t\t\t\tclassName=\"h-10 w-full rounded border border-co-border/60 bg-transparent px-3 py-2 text-sm outline-none focus:border-co-primary focus:ring-2 focus:ring-co-primary/20\"\n\t\t\t\t\t\t\tdisabled={submitDisabled}\n\t\t\t\t\t\t\tinputMode=\"email\"\n\t\t\t\t\t\t\tonChange={(event) => setEmail(event.target.value)}\n\t\t\t\t\t\t\tplaceholder={text(\n\t\t\t\t\t\t\t\t\"component.identificationTool.inputPlaceholder\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\ttype=\"email\"\n\t\t\t\t\t\t\tvalue={email}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{helperMessage}\n\t\t\t\t\t\t<Button className=\"h-10\" disabled={submitDisabled} type=\"submit\">\n\t\t\t\t\t\t\t{status === \"submitting\"\n\t\t\t\t\t\t\t\t? text(\"component.identificationTool.loading\")\n\t\t\t\t\t\t\t\t: ctaLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</form>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nIdentificationTimelineTool.displayName = \"IdentificationTimelineTool\";\n"],"mappings":";;;;;;;;;AAcA,MAAaA,8BAER,EAAE,qBAAqB;CAC3B,MAAM,OAAO,gBAAgB;CAC7B,MAAM,EAAE,UAAU,YAAY,YAAY;CAC1C,MAAM,EAAE,WAAW,YAAY;CAC/B,MAAM,CAAC,OAAO,YAAY,SAAS,GAAG;CACtC,MAAM,CAAC,QAAQ,aAAa,SAE1B,OAAO;CACT,MAAM,CAAC,cAAc,mBAAmB,SAAwB,KAAK;CAErE,MAAM,sBAAsB,QAAQ,SAAS,QAAQ;CACrD,MAAM,eAAe,WAAW,aAAa;CAE7C,MAAM,WAAW,KAAK,mCAAmC;CACzD,MAAM,eAAe,KAAK,uCAAuC;CACjE,MAAM,cAAc,KAAK,2CAA2C;CACpE,MAAM,QAAQ,KAAK,qCAAqC;CAExD,MAAM,iBAAiB,gBAAgB,WAAW;CAElD,MAAM,eAAe,YACpB,OAAO,UAAU;AAChB,QAAM,gBAAgB;AAEtB,MAAI,eACH;EAGD,MAAM,eAAe,MAAM,MAAM;AACjC,MAAI,CAAC,cAAc;AAClB,mBAAgB,KAAK,0CAA0C,CAAC;AAChE;;AAGD,YAAU,aAAa;AACvB,kBAAgB,KAAK;AAErB,MAAI;GACH,MAAM,iBAAiB,MAAM,SAAS,EAAE,OAAO,cAAc,CAAC;AAE9D,OAAI,CAAC,gBAAgB;AACpB,cAAU,QAAQ;AAClB,oBAAgB,KAAK,qCAAqC,CAAC;AAC3D;;GAGD,MAAMC,UAAmC;IACxC;IACA,MAAM;KACL,MAAM,yBAAyB;KAC/B,MAAM,KAAK,wCAAwC;KACnD,MAAM;KACN,OAAO,CACN;MACC,MAAM;MACN,WAAW,sBAAsB;MACjC,aAAa;MACb,gBAAgB;MAChB,cAAc;MACd,iBAAiB;MACjB,SAAS,KAAK,wCAAwC;MACtD,CACD;KACD,WAAW,eAAe;KAC1B,YAAY,uBAAuB;KACnC;IACD;AAED,SAAM,OAAO,YAAY,QAAQ;AAEjC,aAAU,UAAU;AACpB,YAAS,GAAG;AAEZ,GAAK,OAAO,aAAa,EAAE,OAAO,MAAM,CAAC,CAAC,YAAY,GAAG;UAClD;AACP,aAAU,QAAQ;AAClB,mBAAgB,KAAK,qCAAqC,CAAC;;IAG7D;EAAC;EAAgB;EAAO;EAAU;EAAQ;EAAgB;EAAK,CAC/D;CAED,MAAM,gBAAgB,cAAc;AACnC,MAAI,aACH,QACC,oBAAC;GAAE,WAAU;GAA2B,MAAK;aAC3C;IACE;AAIN,MAAI,aACH,QAAO,oBAAC;GAAE,WAAU;aAAwB;IAAiB;AAG9D,SAAO;IACL;EAAC;EAAc;EAAc;EAAa,CAAC;AAE9C,QACC,oBAAC;EAAI,WAAU;YACd,qBAAC;GAAI,WAAU;cACd,qBAAC;IAAI,WAAU;eACd,oBAAC;KAAG,WAAU;eAAyB;MAAW,EAClD,oBAAC;KAAE,WAAU;eAAiC;MAAgB;KACzD,EACL,eACA,oBAAC;IAAI,WAAU;cACb;KACI,GAEN,qBAAC;IAAK,WAAU;IAAa,UAAU;;KACtC,oBAAC;MACA,cAAY,KAAK,0CAA0C;MAC3D,cAAa;MACb,WAAU;MACV,UAAU;MACV,WAAU;MACV,WAAW,UAAU,SAAS,MAAM,OAAO,MAAM;MACjD,aAAa,KACZ,gDACA;MACD,MAAK;MACL,OAAO;OACN;KACD;KACD,oBAAC;MAAO,WAAU;MAAO,UAAU;MAAgB,MAAK;gBACtD,WAAW,eACT,KAAK,uCAAuC,GAC5C;OACK;;KACH;IAEH;GACD;;AAIR,2BAA2B,cAAc"}

package/support/components/timeline-message-group.d.ts

@@ -8,7 +8,8 @@ type TimelineMessageGroupProps = {
   availableAIAgents: AvailableAIAgent[];
   availableHumanAgents: AvailableHumanAgent[];
   currentVisitorId?: string;
-  seenByIds?: string[];
+  seenByIds?: readonly string[];
+  seenByNames?: readonly string[];
 };
 declare const TimelineMessageGroup: React.FC<TimelineMessageGroupProps>;
 //#endregion

package/support/components/timeline-message-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-message-group.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":[],"mappings":";;;;;KAqCY,yBAAA;SACH;EADG,iBAAA,EAES,gBAFgB,EAAA;EAAA,oBAAA,EAGb,mBAHa,EAAA;kBAC5B,CAAA,EAAA,MAAA;WACY,CAAA,EAAA,MAAA,EAAA;;AACsB,cAK9B,oBAL8B,EAKR,KAAA,CAAM,EALE,CAKC,yBALD,CAAA"}
+{"version":3,"file":"timeline-message-group.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":[],"mappings":";;;;;KAoCY,yBAAA;SACJ;EADI,iBAAA,EAEQ,gBAFiB,EAAA;EAC7B,oBAAA,EAEe,mBAFf,EAAA;EACY,gBAAA,CAAA,EAAA,MAAA;EACG,SAAA,CAAA,EAAA,SAAA,MAAA,EAAA;EAAmB,WAAA,CAAA,EAAA,SAAA,MAAA,EAAA;AAS1C,CAAA;cAAa,sBAAsB,KAAA,CAAM,GAAG"}

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

@@ -3,7 +3,6 @@ import { Avatar } from "./avatar.js";
 import { CossistantLogo } from "./cossistant-branding.js";
 import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupSeenIndicator } from "../../primitives/timeline-item-group.js";
 import { TimelineMessageItem } from "./timeline-message-item.js";
-import { useMemo } from "react";
 import { SenderType } from "@cossistant/types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { motion } from "motion/react";
@@ -37,27 +36,12 @@ const SEEN_ANIMATION = {
 		ease: "easeOut"
 	}
 };
-const TimelineMessageGroup = ({ items, availableAIAgents, availableHumanAgents, currentVisitorId, seenByIds = [] }) => {
+const EMPTY_SEEN_BY_IDS = Object.freeze([]);
+const EMPTY_SEEN_BY_NAMES = Object.freeze([]);
+const TimelineMessageGroup = ({ items, availableAIAgents, availableHumanAgents, currentVisitorId, seenByIds = EMPTY_SEEN_BY_IDS, seenByNames = EMPTY_SEEN_BY_NAMES }) => {
 	const firstItem = items[0];
 	const humanAgent = availableHumanAgents.find((agent) => agent.id === firstItem?.userId);
 	const aiAgent = availableAIAgents.find((agent) => agent.id === firstItem?.aiAgentId);
-	const seenByNames = useMemo(() => {
-		const deduped = /* @__PURE__ */ new Set();
-		for (const id of seenByIds) {
-			const human = availableHumanAgents.find((agent) => agent.id === id);
-			if (human?.name) {
-				deduped.add(human.name);
-				continue;
-			}
-			const ai = availableAIAgents.find((agent) => agent.id === id);
-			if (ai?.name) deduped.add(ai.name);
-		}
-		return Array.from(deduped);
-	}, [
-		seenByIds,
-		availableHumanAgents,
-		availableAIAgents
-	]);
 	if (items.length === 0) return null;
 	const hasSeenIndicator = seenByIds.length > 0 && seenByNames.length > 0;
 	return /* @__PURE__ */ jsx(TimelineItemGroup, {
@@ -111,6 +95,7 @@ const TimelineMessageGroup = ({ items, availableAIAgents, availableHumanAgents,
 		})
 	});
 };
+TimelineMessageGroup.displayName = "TimelineMessageGroup";
 
 //#endregion
 export { TimelineMessageGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-message-group.js","names":["TimelineMessageGroup: React.FC<TimelineMessageGroupProps>","PrimitiveTimelineItemGroup"],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n  TimelineItemGroup as PrimitiveTimelineItemGroup,\n  TimelineItemGroupAvatar,\n  TimelineItemGroupContent,\n  TimelineItemGroupHeader,\n  TimelineItemGroupSeenIndicator,\n} from \"../../primitives/timeline-item-group\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\nimport { TimelineMessageItem } from \"./timeline-message-item\";\n\nconst MESSAGE_ANIMATION = {\n  initial: { opacity: 0, y: 6 },\n  animate: { opacity: 1, y: 0 },\n  exit: { opacity: 0 },\n  transition: {\n    duration: 0.1,\n    ease: [0.25, 0.46, 0.45, 0.94] as const, // easeOutCubic\n  },\n} as const;\n\nconst SEEN_ANIMATION = {\n  initial: { opacity: 0 },\n  animate: { opacity: 1 },\n  transition: {\n    duration: 0.1,\n    ease: \"easeOut\" as const,\n  },\n} as const;\n\nexport type TimelineMessageGroupProps = {\n  items: TimelineItem[];\n  availableAIAgents: AvailableAIAgent[];\n  availableHumanAgents: AvailableHumanAgent[];\n  currentVisitorId?: string;\n  seenByIds?: string[];\n};\n\nexport const TimelineMessageGroup: React.FC<TimelineMessageGroupProps> = ({\n  items,\n  availableAIAgents,\n  availableHumanAgents,\n  currentVisitorId,\n  seenByIds = [],\n}) => {\n  // Get agent info for the sender\n  const firstItem = items[0];\n  const humanAgent = availableHumanAgents.find(\n    (agent) => agent.id === firstItem?.userId\n  );\n  const aiAgent = availableAIAgents.find(\n    (agent) => agent.id === firstItem?.aiAgentId\n  );\n\n  const seenByNames = useMemo(() => {\n    const deduped = new Set<string>();\n    for (const id of seenByIds) {\n      const human = availableHumanAgents.find((agent) => agent.id === id);\n      if (human?.name) {\n        deduped.add(human.name);\n        continue;\n      }\n      const ai = availableAIAgents.find((agent) => agent.id === id);\n      if (ai?.name) {\n        deduped.add(ai.name);\n      }\n    }\n    return Array.from(deduped);\n  }, [seenByIds, availableHumanAgents, availableAIAgents]);\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  const hasSeenIndicator = seenByIds.length > 0 && seenByNames.length > 0;\n\n  return (\n    <PrimitiveTimelineItemGroup\n      items={items}\n      seenByIds={seenByIds}\n      viewerId={currentVisitorId}\n      viewerType={SenderType.VISITOR}\n    >\n      {({\n        isSentByViewer,\n        isReceivedByViewer,\n        isVisitor,\n        isAI,\n        isTeamMember,\n      }) => (\n        <div\n          className={cn(\n            \"flex w-full gap-2\",\n            // Support widget POV: visitor messages are sent (right side)\n            // Agent messages are received (left side)\n            isSentByViewer && \"flex-row-reverse\",\n            isReceivedByViewer && \"flex-row\"\n          )}\n        >\n          {/* Avatar - only show for received messages (agents) */}\n          {isReceivedByViewer && (\n            <TimelineItemGroupAvatar className=\"flex flex-shrink-0 flex-col justify-end\">\n              {isAI ? (\n                <div className=\"flex size-6 items-center justify-center rounded-full bg-primary/10\">\n                  <CossistantLogo className=\"h-4 w-4 text-primary\" />\n                </div>\n              ) : (\n                <Avatar\n                  className=\"size-6\"\n                  image={humanAgent?.image}\n                  name={humanAgent?.name || \"Support\"}\n                />\n              )}\n            </TimelineItemGroupAvatar>\n          )}\n\n          <TimelineItemGroupContent\n            className={cn(\"flex flex-col gap-1\", isSentByViewer && \"items-end\")}\n          >\n            {/* Header - show sender name for received messages (agents) */}\n            {isReceivedByViewer && (\n              <TimelineItemGroupHeader className=\"px-1 text-muted-foreground text-xs\">\n                {isAI\n                  ? aiAgent?.name || \"AI Assistant\"\n                  : humanAgent?.name || \"Support\"}\n              </TimelineItemGroupHeader>\n            )}\n\n            {items.map((item, index) => (\n              <motion.div key={item.id} {...MESSAGE_ANIMATION}>\n                <TimelineMessageItem\n                  isLast={index === items.length - 1}\n                  isSentByViewer={isSentByViewer}\n                  item={item}\n                />\n              </motion.div>\n            ))}\n\n            {isSentByViewer && (\n              <div className={cn(\"\", hasSeenIndicator && \"mt-2\")}>\n                <div className=\"min-h-[1.25rem]\">\n                  {hasSeenIndicator && (\n                    <motion.div key=\"seen-indicator\" {...SEEN_ANIMATION}>\n                      <TimelineItemGroupSeenIndicator\n                        className=\"px-1 text-muted-foreground text-xs\"\n                        seenByIds={seenByIds}\n                      >\n                        {() => `Seen by ${seenByNames.join(\", \")}`}\n                      </TimelineItemGroupSeenIndicator>\n                    </motion.div>\n                  )}\n                </div>\n              </div>\n            )}\n          </TimelineItemGroupContent>\n        </div>\n      )}\n    </PrimitiveTimelineItemGroup>\n  );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,oBAAoB;CACxB,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,MAAM,EAAE,SAAS,GAAG;CACpB,YAAY;EACV,UAAU;EACV,MAAM;GAAC;GAAM;GAAM;GAAM;GAAK;EAC/B;CACF;AAED,MAAM,iBAAiB;CACrB,SAAS,EAAE,SAAS,GAAG;CACvB,SAAS,EAAE,SAAS,GAAG;CACvB,YAAY;EACV,UAAU;EACV,MAAM;EACP;CACF;AAUD,MAAaA,wBAA6D,EACxE,OACA,mBACA,sBACA,kBACA,YAAY,EAAE,OACV;CAEJ,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,qBAAqB,MACrC,UAAU,MAAM,OAAO,WAAW,OACpC;CACD,MAAM,UAAU,kBAAkB,MAC/B,UAAU,MAAM,OAAO,WAAW,UACpC;CAED,MAAM,cAAc,cAAc;EAChC,MAAM,0BAAU,IAAI,KAAa;AACjC,OAAK,MAAM,MAAM,WAAW;GAC1B,MAAM,QAAQ,qBAAqB,MAAM,UAAU,MAAM,OAAO,GAAG;AACnE,OAAI,OAAO,MAAM;AACf,YAAQ,IAAI,MAAM,KAAK;AACvB;;GAEF,MAAM,KAAK,kBAAkB,MAAM,UAAU,MAAM,OAAO,GAAG;AAC7D,OAAI,IAAI,KACN,SAAQ,IAAI,GAAG,KAAK;;AAGxB,SAAO,MAAM,KAAK,QAAQ;IACzB;EAAC;EAAW;EAAsB;EAAkB,CAAC;AAExD,KAAI,MAAM,WAAW,EACnB,QAAO;CAGT,MAAM,mBAAmB,UAAU,SAAS,KAAK,YAAY,SAAS;AAEtE,QACE,oBAACC;EACQ;EACI;EACX,UAAU;EACV,YAAY,WAAW;aAErB,EACA,gBACA,oBACA,WACA,MACA,mBAEA,qBAAC;GACC,WAAW,GACT,qBAGA,kBAAkB,oBAClB,sBAAsB,WACvB;cAGA,sBACC,oBAAC;IAAwB,WAAU;cAChC,OACC,oBAAC;KAAI,WAAU;eACb,oBAAC,kBAAe,WAAU,yBAAyB;MAC/C,GAEN,oBAAC;KACC,WAAU;KACV,OAAO,YAAY;KACnB,MAAM,YAAY,QAAQ;MAC1B;KAEoB,EAG5B,qBAAC;IACC,WAAW,GAAG,uBAAuB,kBAAkB,YAAY;;KAGlE,sBACC,oBAAC;MAAwB,WAAU;gBAChC,OACG,SAAS,QAAQ,iBACjB,YAAY,QAAQ;OACA;KAG3B,MAAM,KAAK,MAAM,UAChB,oBAAC,OAAO;MAAkB,GAAI;gBAC5B,oBAAC;OACC,QAAQ,UAAU,MAAM,SAAS;OACjB;OACV;QACN;QALa,KAAK,GAMT,CACb;KAED,kBACC,oBAAC;MAAI,WAAW,GAAG,IAAI,oBAAoB,OAAO;gBAChD,oBAAC;OAAI,WAAU;iBACZ,oBACC,oBAAC,OAAO;QAAyB,GAAI;kBACnC,oBAAC;SACC,WAAU;SACC;yBAEJ,WAAW,YAAY,KAAK,KAAK;UACT;UANnB,iBAOH;QAEX;OACF;;KAEiB;IACvB;GAEmB"}
+{"version":3,"file":"timeline-message-group.js","names":["EMPTY_SEEN_BY_IDS: readonly string[]","EMPTY_SEEN_BY_NAMES: readonly string[]","TimelineMessageGroup: React.FC<TimelineMessageGroupProps>","PrimitiveTimelineItemGroup"],"sources":["../../../src/support/components/timeline-message-group.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport {\n\tTimelineItemGroup as PrimitiveTimelineItemGroup,\n\tTimelineItemGroupAvatar,\n\tTimelineItemGroupContent,\n\tTimelineItemGroupHeader,\n\tTimelineItemGroupSeenIndicator,\n} from \"../../primitives/timeline-item-group\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\nimport { TimelineMessageItem } from \"./timeline-message-item\";\n\nconst MESSAGE_ANIMATION = {\n\tinitial: { opacity: 0, y: 6 },\n\tanimate: { opacity: 1, y: 0 },\n\texit: { opacity: 0 },\n\ttransition: {\n\t\tduration: 0.1,\n\t\tease: [0.25, 0.46, 0.45, 0.94] as const, // easeOutCubic\n\t},\n} as const;\n\nconst SEEN_ANIMATION = {\n\tinitial: { opacity: 0 },\n\tanimate: { opacity: 1 },\n\ttransition: {\n\t\tduration: 0.1,\n\t\tease: \"easeOut\" as const,\n\t},\n} as const;\n\nexport type TimelineMessageGroupProps = {\n\titems: TimelineItem[];\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n\tseenByIds?: readonly string[];\n\tseenByNames?: readonly string[];\n};\n\nconst EMPTY_SEEN_BY_IDS: readonly string[] = Object.freeze([]);\nconst EMPTY_SEEN_BY_NAMES: readonly string[] = Object.freeze([]);\n\nexport const TimelineMessageGroup: React.FC<TimelineMessageGroupProps> = ({\n\titems,\n\tavailableAIAgents,\n\tavailableHumanAgents,\n\tcurrentVisitorId,\n\tseenByIds = EMPTY_SEEN_BY_IDS,\n\tseenByNames = EMPTY_SEEN_BY_NAMES,\n}) => {\n\t// Get agent info for the sender\n\tconst firstItem = items[0];\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === firstItem?.userId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === firstItem?.aiAgentId\n\t);\n\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst hasSeenIndicator = seenByIds.length > 0 && seenByNames.length > 0;\n\n\treturn (\n\t\t<PrimitiveTimelineItemGroup\n\t\t\titems={items}\n\t\t\tseenByIds={seenByIds}\n\t\t\tviewerId={currentVisitorId}\n\t\t\tviewerType={SenderType.VISITOR}\n\t\t>\n\t\t\t{({\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t}) => (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t// Support widget POV: visitor messages are sent (right side)\n\t\t\t\t\t\t// Agent messages are received (left side)\n\t\t\t\t\t\tisSentByViewer && \"flex-row-reverse\",\n\t\t\t\t\t\tisReceivedByViewer && \"flex-row\"\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Avatar - only show for received messages (agents) */}\n\t\t\t\t\t{isReceivedByViewer && (\n\t\t\t\t\t\t<TimelineItemGroupAvatar className=\"flex flex-shrink-0 flex-col justify-end\">\n\t\t\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t\t\t<div className=\"flex size-6 items-center justify-center rounded-full bg-primary/10\">\n\t\t\t\t\t\t\t\t\t<CossistantLogo className=\"h-4 w-4 text-primary\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\t\tclassName=\"size-6\"\n\t\t\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\t\t\tname={humanAgent?.name || \"Support\"}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</TimelineItemGroupAvatar>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<TimelineItemGroupContent\n\t\t\t\t\t\tclassName={cn(\"flex flex-col gap-1\", isSentByViewer && \"items-end\")}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Header - show sender name for received messages (agents) */}\n\t\t\t\t\t\t{isReceivedByViewer && (\n\t\t\t\t\t\t\t<TimelineItemGroupHeader className=\"px-1 text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t{isAI\n\t\t\t\t\t\t\t\t\t? aiAgent?.name || \"AI Assistant\"\n\t\t\t\t\t\t\t\t\t: humanAgent?.name || \"Support\"}\n\t\t\t\t\t\t\t</TimelineItemGroupHeader>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{items.map((item, index) => (\n\t\t\t\t\t\t\t<motion.div key={item.id} {...MESSAGE_ANIMATION}>\n\t\t\t\t\t\t\t\t<TimelineMessageItem\n\t\t\t\t\t\t\t\t\tisLast={index === items.length - 1}\n\t\t\t\t\t\t\t\t\tisSentByViewer={isSentByViewer}\n\t\t\t\t\t\t\t\t\titem={item}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t))}\n\n\t\t\t\t\t\t{isSentByViewer && (\n\t\t\t\t\t\t\t<div className={cn(\"\", hasSeenIndicator && \"mt-2\")}>\n\t\t\t\t\t\t\t\t<div className=\"min-h-[1.25rem]\">\n\t\t\t\t\t\t\t\t\t{hasSeenIndicator && (\n\t\t\t\t\t\t\t\t\t\t<motion.div key=\"seen-indicator\" {...SEEN_ANIMATION}>\n\t\t\t\t\t\t\t\t\t\t\t<TimelineItemGroupSeenIndicator\n\t\t\t\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t{() => `Seen by ${seenByNames.join(\", \")}`}\n\t\t\t\t\t\t\t\t\t\t\t</TimelineItemGroupSeenIndicator>\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t)}\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)}\n\t\t\t\t\t</TimelineItemGroupContent>\n\t\t\t\t</div>\n\t\t\t)}\n\t\t</PrimitiveTimelineItemGroup>\n\t);\n};\n\nTimelineMessageGroup.displayName = \"TimelineMessageGroup\";\n"],"mappings":";;;;;;;;;;AAiBA,MAAM,oBAAoB;CACzB,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,SAAS;EAAE,SAAS;EAAG,GAAG;EAAG;CAC7B,MAAM,EAAE,SAAS,GAAG;CACpB,YAAY;EACX,UAAU;EACV,MAAM;GAAC;GAAM;GAAM;GAAM;GAAK;EAC9B;CACD;AAED,MAAM,iBAAiB;CACtB,SAAS,EAAE,SAAS,GAAG;CACvB,SAAS,EAAE,SAAS,GAAG;CACvB,YAAY;EACX,UAAU;EACV,MAAM;EACN;CACD;AAWD,MAAMA,oBAAuC,OAAO,OAAO,EAAE,CAAC;AAC9D,MAAMC,sBAAyC,OAAO,OAAO,EAAE,CAAC;AAEhE,MAAaC,wBAA6D,EACzE,OACA,mBACA,sBACA,kBACA,YAAY,mBACZ,cAAc,0BACT;CAEL,MAAM,YAAY,MAAM;CACxB,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,WAAW,OACnC;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,WAAW,UACnC;AAED,KAAI,MAAM,WAAW,EACpB,QAAO;CAGR,MAAM,mBAAmB,UAAU,SAAS,KAAK,YAAY,SAAS;AAEtE,QACC,oBAACC;EACO;EACI;EACX,UAAU;EACV,YAAY,WAAW;aAErB,EACD,gBACA,oBACA,WACA,MACA,mBAEA,qBAAC;GACA,WAAW,GACV,qBAGA,kBAAkB,oBAClB,sBAAsB,WACtB;cAGA,sBACA,oBAAC;IAAwB,WAAU;cACjC,OACA,oBAAC;KAAI,WAAU;eACd,oBAAC,kBAAe,WAAU,yBAAyB;MAC9C,GAEN,oBAAC;KACA,WAAU;KACV,OAAO,YAAY;KACnB,MAAM,YAAY,QAAQ;MACzB;KAEsB,EAG3B,qBAAC;IACA,WAAW,GAAG,uBAAuB,kBAAkB,YAAY;;KAGlE,sBACA,oBAAC;MAAwB,WAAU;gBACjC,OACE,SAAS,QAAQ,iBACjB,YAAY,QAAQ;OACE;KAG1B,MAAM,KAAK,MAAM,UACjB,oBAAC,OAAO;MAAkB,GAAI;gBAC7B,oBAAC;OACA,QAAQ,UAAU,MAAM,SAAS;OACjB;OACV;QACL;QALc,KAAK,GAMT,CACZ;KAED,kBACA,oBAAC;MAAI,WAAW,GAAG,IAAI,oBAAoB,OAAO;gBACjD,oBAAC;OAAI,WAAU;iBACb,oBACA,oBAAC,OAAO;QAAyB,GAAI;kBACpC,oBAAC;SACA,WAAU;SACC;yBAEJ,WAAW,YAAY,KAAK,KAAK;UACR;UANlB,iBAOH;QAET;OACD;;KAEmB;IACtB;GAEqB;;AAI/B,qBAAqB,cAAc"}

package/support/components/timeline-message-item.d.ts

@@ -1,5 +1,5 @@
 import { TimelineItem } from "../../timeline-item.js";
-import * as react_jsx_runtime11 from "react/jsx-runtime";
+import React from "react";
 
 //#region src/support/components/timeline-message-item.d.ts
 type TimelineMessageItemProps = {
@@ -7,11 +7,15 @@ type TimelineMessageItemProps = {
   isLast?: boolean;
   isSentByViewer?: boolean;
 };
+/**
+ * Message bubble renderer that adapts layout depending on whether the visitor
+ * or an agent sent the message.
+ */
 declare function TimelineMessageItem({
   item,
   isLast,
   isSentByViewer
-}: TimelineMessageItemProps): react_jsx_runtime11.JSX.Element;
+}: TimelineMessageItemProps): React.ReactElement;
 //#endregion
 export { TimelineMessageItem, TimelineMessageItemProps };
 //# sourceMappingURL=timeline-message-item.d.ts.map

package/support/components/timeline-message-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timeline-message-item.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,wBAAA;QACL;;EADK,cAAA,CAAA,EAAA,OAAA;AAMZ,CAAA;AAAmC,iBAAnB,mBAAA,CAAmB;EAAA,IAAA;EAAA,MAAA;EAAA;AAAA,CAAA,EAIhC,wBAJgC,CAAA,EAIR,mBAAA,CAAA,GAAA,CAAA,OAJQ"}
+{"version":3,"file":"timeline-message-item.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,wBAAA;QACL;EADK,MAAA,CAAA,EAAA,OAAA;EAUI,cAAA,CAAA,EAAA,OAAmB;CAClC;;;;;AAG+C,iBAJhC,mBAAA,CAIgC;EAAA,IAAA;EAAA,MAAA;EAAA;AAAA,CAAA,EAA7C,wBAA6C,CAAA,EAAlB,KAAA,CAAM,YAAY"}

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

@@ -4,19 +4,23 @@ import { useSupportText } from "../text/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/timeline-message-item.tsx
-function TimelineMessageItem({ item, isLast = false, isSentByViewer }) {
+/**
+* Message bubble renderer that adapts layout depending on whether the visitor
+* or an agent sent the message.
+*/
+function TimelineMessageItem({ item, isLast = false, isSentByViewer = false }) {
 	const text = useSupportText();
 	return /* @__PURE__ */ jsx(TimelineItem, {
 		item,
-		children: ({ isVisitor, isAI, timestamp }) => {
-			const isSentByViewerFinal = isSentByViewer ?? isVisitor;
+		children: ({ isAI, timestamp }) => {
+			const isSentByViewerFinal = isSentByViewer;
 			return /* @__PURE__ */ jsx("div", {
 				className: cn("flex w-full gap-2", isSentByViewerFinal && "flex-row-reverse", !isSentByViewerFinal && "flex-row"),
 				children: /* @__PURE__ */ jsxs("div", {
 					className: cn("flex w-full flex-1 flex-col gap-1", isSentByViewerFinal && "items-end"),
 					children: [/* @__PURE__ */ jsx(TimelineItemContent, {
 						className: cn("block w-max max-w-[300px] rounded-lg px-3.5 py-2.5 text-sm", {
-							"bg-co-background-300 text-foreground dark:bg-co-background-600": !isSentByViewerFinal,
+							"bg-background-300 text-foreground dark:bg-background-600": !isSentByViewerFinal,
 							"bg-primary text-primary-foreground": isSentByViewerFinal,
 							"rounded-br-sm": isLast && isSentByViewerFinal,
 							"rounded-bl-sm": isLast && !isSentByViewerFinal

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

@@ -1 +1 @@
-{"version":3,"file":"timeline-message-item.js","names":["PrimitiveTimelineItem"],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":["import type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport {\n\tTimelineItem as PrimitiveTimelineItem,\n\tTimelineItemContent,\n\tTimelineItemTimestamp,\n} from \"../../primitives/timeline-item\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\n\nexport type TimelineMessageItemProps = {\n\titem: TimelineItem;\n\tisLast?: boolean;\n\tisSentByViewer?: boolean;\n};\n\nexport function TimelineMessageItem({\n\titem,\n\tisLast = false,\n\tisSentByViewer,\n}: TimelineMessageItemProps) {\n\tconst text = useSupportText();\n\treturn (\n\t\t<PrimitiveTimelineItem item={item}>\n\t\t\t{({ isVisitor, isAI, timestamp }) => {\n\t\t\t\t// Use passed isSentByViewer if provided, otherwise fall back to isVisitor\n\t\t\t\tconst isSentByViewerFinal = isSentByViewer ?? isVisitor;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t\tisSentByViewerFinal && \"flex-row-reverse\",\n\t\t\t\t\t\t\t!isSentByViewerFinal && \"flex-row\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full flex-1 flex-col gap-1\",\n\t\t\t\t\t\t\t\tisSentByViewerFinal && \"items-end\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TimelineItemContent\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"block w-max max-w-[300px] rounded-lg px-3.5 py-2.5 text-sm\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"bg-co-background-300 text-foreground dark:bg-co-background-600\":\n\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"bg-primary text-primary-foreground\": isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-br-sm\": isLast && isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-bl-sm\": isLast && !isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\trenderMarkdown\n\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{isLast && (\n\t\t\t\t\t\t\t\t<TimelineItemTimestamp\n\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\ttimestamp={timestamp}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t{timestamp.toLocaleTimeString([], {\n\t\t\t\t\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t{isAI &&\n\t\t\t\t\t\t\t\t\t\t\t\t` ${text(\"component.message.timestamp.aiIndicator\")}`}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TimelineItemTimestamp>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}}\n\t\t</PrimitiveTimelineItem>\n\t);\n}\n"],"mappings":";;;;;;AAgBA,SAAgB,oBAAoB,EACnC,MACA,SAAS,OACT,kBAC4B;CAC5B,MAAM,OAAO,gBAAgB;AAC7B,QACC,oBAACA;EAA4B;aAC1B,EAAE,WAAW,MAAM,gBAAgB;GAEpC,MAAM,sBAAsB,kBAAkB;AAE9C,UACC,oBAAC;IACA,WAAW,GACV,qBACA,uBAAuB,oBACvB,CAAC,uBAAuB,WACxB;cAED,qBAAC;KACA,WAAW,GACV,qCACA,uBAAuB,YACvB;gBAED,oBAAC;MACA,WAAW,GACV,8DACA;OACC,kEACC,CAAC;OACF,sCAAsC;OACtC,iBAAiB,UAAU;OAC3B,iBAAiB,UAAU,CAAC;OAC5B,CACD;MACD;MACA,MAAM,KAAK;OACV,EACD,UACA,oBAAC;MACA,WAAU;MACC;sBAGV,4CACE,UAAU,mBAAmB,EAAE,EAAE;OACjC,MAAM;OACN,QAAQ;OACR,CAAC,EACD,QACA,IAAI,KAAK,0CAA0C,MAClD;OAEmB;MAEpB;KACD;;GAGe"}
+{"version":3,"file":"timeline-message-item.js","names":["PrimitiveTimelineItem"],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":["import type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport {\n\tTimelineItem as PrimitiveTimelineItem,\n\tTimelineItemContent,\n\tTimelineItemTimestamp,\n} from \"../../primitives/timeline-item\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\n\nexport type TimelineMessageItemProps = {\n\titem: TimelineItem;\n\tisLast?: boolean;\n\tisSentByViewer?: boolean;\n};\n\n/**\n * Message bubble renderer that adapts layout depending on whether the visitor\n * or an agent sent the message.\n */\nexport function TimelineMessageItem({\n\titem,\n\tisLast = false,\n\tisSentByViewer = false,\n}: TimelineMessageItemProps): React.ReactElement {\n\tconst text = useSupportText();\n\treturn (\n\t\t<PrimitiveTimelineItem item={item}>\n\t\t\t{({ isAI, timestamp }) => {\n\t\t\t\t// isSentByViewer defaults to false, meaning messages are treated as received\n\t\t\t\t// (left side with background) unless explicitly marked as sent by viewer\n\t\t\t\tconst isSentByViewerFinal = isSentByViewer;\n\n\t\t\t\treturn (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex w-full gap-2\",\n\t\t\t\t\t\t\tisSentByViewerFinal && \"flex-row-reverse\",\n\t\t\t\t\t\t\t!isSentByViewerFinal && \"flex-row\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"flex w-full flex-1 flex-col gap-1\",\n\t\t\t\t\t\t\t\tisSentByViewerFinal && \"items-end\"\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<TimelineItemContent\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"block w-max max-w-[300px] rounded-lg px-3.5 py-2.5 text-sm\",\n\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\"bg-background-300 text-foreground dark:bg-background-600\":\n\t\t\t\t\t\t\t\t\t\t\t!isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"bg-primary text-primary-foreground\": isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-br-sm\": isLast && isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t\t\"rounded-bl-sm\": isLast && !isSentByViewerFinal,\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\trenderMarkdown\n\t\t\t\t\t\t\t\ttext={item.text}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{isLast && (\n\t\t\t\t\t\t\t\t<TimelineItemTimestamp\n\t\t\t\t\t\t\t\t\tclassName=\"px-1 text-muted-foreground text-xs\"\n\t\t\t\t\t\t\t\t\ttimestamp={timestamp}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{() => (\n\t\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t\t{timestamp.toLocaleTimeString([], {\n\t\t\t\t\t\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\t\t\t{isAI &&\n\t\t\t\t\t\t\t\t\t\t\t\t` ${text(\"component.message.timestamp.aiIndicator\")}`}\n\t\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t</TimelineItemTimestamp>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t);\n\t\t\t}}\n\t\t</PrimitiveTimelineItem>\n\t);\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,oBAAoB,EACnC,MACA,SAAS,OACT,iBAAiB,SAC+B;CAChD,MAAM,OAAO,gBAAgB;AAC7B,QACC,oBAACA;EAA4B;aAC1B,EAAE,MAAM,gBAAgB;GAGzB,MAAM,sBAAsB;AAE5B,UACC,oBAAC;IACA,WAAW,GACV,qBACA,uBAAuB,oBACvB,CAAC,uBAAuB,WACxB;cAED,qBAAC;KACA,WAAW,GACV,qCACA,uBAAuB,YACvB;gBAED,oBAAC;MACA,WAAW,GACV,8DACA;OACC,4DACC,CAAC;OACF,sCAAsC;OACtC,iBAAiB,UAAU;OAC3B,iBAAiB,UAAU,CAAC;OAC5B,CACD;MACD;MACA,MAAM,KAAK;OACV,EACD,UACA,oBAAC;MACA,WAAU;MACC;sBAGV,4CACE,UAAU,mBAAmB,EAAE,EAAE;OACjC,MAAM;OACN,QAAQ;OACR,CAAC,EACD,QACA,IAAI,KAAK,0CAA0C,MAClD;OAEmB;MAEpB;KACD;;GAGe"}

package/support/components/typing-indicator.d.ts

@@ -1,6 +1,5 @@
 import * as React$1 from "react";
 import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
 
 //#region src/support/components/typing-indicator.d.ts
 type TypingParticipantType = "visitor" | "team_member" | "ai";
@@ -14,7 +13,11 @@ type TypingIndicatorProps = React$1.HTMLAttributes<HTMLDivElement> & {
   availableHumanAgents?: AvailableHumanAgent[];
   withAvatars?: boolean;
 };
-declare const BouncingDots: () => react_jsx_runtime9.JSX.Element;
+declare const BouncingDots: ({
+  className
+}: {
+  className?: string;
+}) => React$1.ReactElement;
 declare const TypingIndicator: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & {
   participants: TypingParticipant[];
   availableAIAgents?: AvailableAIAgent[];

package/support/components/typing-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typing-indicator.d.ts","names":[],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":[],"mappings":";;;;;KAKY,qBAAA;KAEA,iBAAA;;EAFA,IAAA,EAIL,qBAJ0B;AAEjC,CAAA;AAKY,KAAA,oBAAA,GAAuB,OAAA,CAAM,cAAT,CAAwB,cAAxB,CAAA,GAAA;EAAA,YAAA,EACjB,iBADiB,EAAA;mBAAwB,CAAA,EAEnC,gBAFmC,EAAA;sBAAf,CAAA,EAGjB,mBAHiB,EAAA;aAC1B,CAAA,EAAA,OAAA;;AAES,cAIX,YAJW,EAAA,GAAA,GAIC,kBAAA,CAAA,GAAA,CAAA,OAJD;AAAmB,cAY9B,eAZ8B,EAYf,OAAA,CAAA,yBAZe,CAYf,OAAA,CAAA,cAZe,CAYf,cAZe,CAAA,GAAA;EAI9B,YAAA,EANE,iBAMU,EAAA;EAQZ,iBAAA,CAuDZ,EApEoB,gBAoEpB,EAAA;EAAA,oBAAA,CAAA,EAnEuB,mBAmEvB,EAAA;aAvD2B,CAAA,EAAA,OAAA;yBAAA,eAAA,CAAA,CAAA"}
+{"version":3,"file":"typing-indicator.d.ts","names":[],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,qBAAA;KAEA,iBAAA;EAFA,EAAA,EAAA,MAAA;EAEA,IAAA,EAEL,qBAFsB;AAK7B,CAAA;AAAwD,KAA5C,oBAAA,GAAuB,OAAA,CAAM,cAAe,CAAA,cAAA,CAAA,GAAA;EAArB,YAAM,EAC1B,iBAD0B,EAAA;EAC1B,iBAAA,CAAA,EACM,gBADN,EAAA;EACM,oBAAA,CAAA,EACG,mBADH,EAAA;EACG,WAAA,CAAA,EAAA,OAAA;CAAmB;AAI9B,cAAA,YAAgB,EAAA,CAAA;EAAA;CAInB,EAAA;EAuBG,SAAA,CAAA,EAAA,MAuDZ;CAvD2B,EAAA,GAvBxB,OAAA,CAAM,YAuBkB;AAAA,cAAf,eAAe,EAAA,OAAA,CAAA,yBAAA,CAAA,OAAA,CAAA,cAAA,CAAA,cAAA,CAAA,GAAA;EAjCb,YAAA,EAAA,iBAAA,EAAA;EACM,iBAAA,CAAA,EAAA,gBAAA,EAAA;EACG,oBAAA,CAAA,EAAA,mBAAA,EAAA"}

package/support/components/typing-indicator.js

@@ -4,12 +4,12 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/typing-indicator.tsx
-const BouncingDots = () => /* @__PURE__ */ jsxs("div", {
+const BouncingDots = ({ className }) => /* @__PURE__ */ jsxs("div", {
 	className: "flex gap-1",
 	children: [
-		/* @__PURE__ */ jsx("span", { className: "dot-bounce-1 size-1 rounded-full bg-co-primary" }),
-		/* @__PURE__ */ jsx("span", { className: "dot-bounce-2 size-1 rounded-full bg-co-primary" }),
-		/* @__PURE__ */ jsx("span", { className: "dot-bounce-3 size-1 rounded-full bg-co-primary" })
+		/* @__PURE__ */ jsx("span", { className: cn("dot-bounce-1 size-1 rounded-full bg-co-primary", className) }),
+		/* @__PURE__ */ jsx("span", { className: cn("dot-bounce-2 size-1 rounded-full bg-co-primary", className) }),
+		/* @__PURE__ */ jsx("span", { className: cn("dot-bounce-3 size-1 rounded-full bg-co-primary", className) })
 	]
 });
 const TypingIndicator = React$1.forwardRef(({ participants, availableAIAgents = [], availableHumanAgents = [], withAvatars = true, className,...props }, ref) => {