@cossistant/react 0.0.31 → 0.0.33

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

@@ -0,0 +1,25 @@
+import { TimelineItem } from "../../packages/types/src/api/timeline-item.js";
+import { GroupedActivity } from "../../hooks/private/use-grouped-messages.js";
+import React from "react";
+import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
+
+//#region src/support/components/timeline-activity-group.d.ts
+type TimelineActivityToolProps = {
+  item: TimelineItem;
+  conversationId: string;
+};
+type TimelineActivityTools = Record<string, {
+  component: React.ComponentType<TimelineActivityToolProps>;
+}>;
+type TimelineActivityGroupProps = {
+  group: GroupedActivity;
+  conversationId: string;
+  availableAIAgents: AvailableAIAgent[];
+  availableHumanAgents: AvailableHumanAgent[];
+  currentVisitorId?: string;
+  tools?: TimelineActivityTools;
+};
+declare const TimelineActivityGroup: React.FC<TimelineActivityGroupProps>;
+//#endregion
+export { TimelineActivityGroup };
+//# sourceMappingURL=timeline-activity-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-activity-group.d.ts","names":[],"sources":["../../../src/support/components/timeline-activity-group.tsx"],"sourcesContent":[],"mappings":";;;;;;KAkBK,yBAAA;QACE;EADF,cAAA,EAAA,MAAA;AACc,CAAA;KAId,qBAAA,GAAwB,MAGI,CAAA,MAAA,EAAA;EAApB,SAAM,EAAN,KAAA,CAAM,aAAA,CAAc,yBAAd,CAAA;CAHU,CAAA;KAOxB,0BAAA,GAP8B;EAO9B,KAAA,EACG,eADH;EACG,cAAA,EAAA,MAAA;EAEY,iBAAA,EAAA,gBAAA,EAAA;EACG,oBAAA,EAAA,mBAAA,EAAA;EAEd,gBAAA,CAAA,EAAA,MAAA;EAAqB,KAAA,CAAA,EAArB,qBAAqB;AAmD9B,CAAA;cAAa,uBAAuB,KAAA,CAAM,GAAG"}

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

@@ -0,0 +1,104 @@
+import { Avatar } from "./avatar.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent } from "../../primitives/timeline-item-group.js";
+import { ConversationEvent } from "./conversation-event.js";
+import { useMemo } from "react";
+import { SenderType } from "@cossistant/types";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/timeline-activity-group.tsx
+function extractEventPart(item) {
+	if (item.type !== "event") return null;
+	return item.parts.find((part) => part.type === "event") || null;
+}
+function getToolNameFromTimelineItem(item) {
+	if (item.tool) return item.tool;
+	for (const part of item.parts) if (typeof part === "object" && part !== null && "type" in part && "toolName" in part && typeof part.type === "string" && part.type.startsWith("tool-") && typeof part.toolName === "string") return part.toolName;
+	return null;
+}
+const TimelineActivityGroup = ({ group, conversationId, availableAIAgents, availableHumanAgents, currentVisitorId, tools }) => {
+	const activityRows = useMemo(() => {
+		const rows = [];
+		for (let index = 0; index < group.items.length; index++) {
+			const item = group.items[index];
+			if (!item) continue;
+			if (item.type === "event") {
+				const eventPart = extractEventPart(item);
+				if (!eventPart) continue;
+				rows.push({
+					type: "event",
+					key: item.id ?? `activity-event-${item.createdAt}-${index}`,
+					item,
+					event: eventPart
+				});
+				continue;
+			}
+			if (item.type === "tool") {
+				const toolName = getToolNameFromTimelineItem(item);
+				if (!toolName) continue;
+				const toolDefinition = tools?.[toolName];
+				if (!toolDefinition) continue;
+				rows.push({
+					type: "tool",
+					key: item.id ?? `activity-tool-${item.createdAt}-${index}`,
+					item,
+					ToolComponent: toolDefinition.component
+				});
+			}
+		}
+		return rows;
+	}, [group.items, tools]);
+	if (activityRows.length === 0) return null;
+	const humanAgent = availableHumanAgents.find((agent) => agent.id === group.senderId);
+	const aiAgent = availableAIAgents.find((agent) => agent.id === group.senderId);
+	return /* @__PURE__ */ jsx(TimelineItemGroup, {
+		items: group.items,
+		viewerId: currentVisitorId,
+		viewerType: SenderType.VISITOR,
+		children: ({ isAI, isTeamMember }) => /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full flex-row gap-2",
+			children: [/* @__PURE__ */ jsx(TimelineItemGroupAvatar, {
+				className: "flex shrink-0 flex-col justify-start",
+				children: isAI ? /* @__PURE__ */ jsx(Avatar, {
+					className: "size-6",
+					image: aiAgent?.image,
+					isAI: true,
+					name: aiAgent?.name || "AI Assistant",
+					showBackground: !!aiAgent?.image
+				}) : /* @__PURE__ */ jsx(Avatar, {
+					className: "size-6",
+					image: humanAgent?.image,
+					name: isTeamMember ? humanAgent?.name || "Support" : "Visitor"
+				})
+			}), /* @__PURE__ */ jsx(TimelineItemGroupContent, {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex w-full min-w-0 flex-col gap-2",
+					children: activityRows.map((row) => {
+						if (row.type === "event") return /* @__PURE__ */ jsx(ConversationEvent, {
+							availableAIAgents,
+							availableHumanAgents,
+							className: "w-full",
+							compact: true,
+							createdAt: row.item.createdAt,
+							event: row.event,
+							showAvatar: false
+						}, row.key);
+						const ToolComponent = row.ToolComponent;
+						return /* @__PURE__ */ jsx("div", {
+							className: "w-full",
+							children: /* @__PURE__ */ jsx(ToolComponent, {
+								conversationId,
+								item: row.item
+							})
+						}, row.key);
+					})
+				})
+			})]
+		})
+	});
+};
+TimelineActivityGroup.displayName = "TimelineActivityGroup";
+
+//#endregion
+export { TimelineActivityGroup };
+//# sourceMappingURL=timeline-activity-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-activity-group.js","names":["TimelineActivityGroup: React.FC<TimelineActivityGroupProps>","rows: ActivityRow[]","PrimitiveTimelineItemGroup"],"sources":["../../../src/support/components/timeline-activity-group.tsx"],"sourcesContent":["import type {\n\tAvailableAIAgent,\n\tAvailableHumanAgent,\n\tTimelinePartEvent,\n} from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport type { GroupedActivity } from \"../../hooks/private/use-grouped-messages\";\nimport {\n\tTimelineItemGroup as PrimitiveTimelineItemGroup,\n\tTimelineItemGroupAvatar,\n\tTimelineItemGroupContent,\n} from \"../../primitives/timeline-item-group\";\nimport { Avatar } from \"./avatar\";\nimport { ConversationEvent } from \"./conversation-event\";\n\ntype TimelineActivityToolProps = {\n\titem: TimelineItem;\n\tconversationId: string;\n};\n\ntype TimelineActivityTools = Record<\n\tstring,\n\t{\n\t\tcomponent: React.ComponentType<TimelineActivityToolProps>;\n\t}\n>;\n\ntype TimelineActivityGroupProps = {\n\tgroup: GroupedActivity;\n\tconversationId: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n\ttools?: TimelineActivityTools;\n};\n\ntype ActivityRow =\n\t| {\n\t\t\ttype: \"event\";\n\t\t\tkey: string;\n\t\t\titem: TimelineItem;\n\t\t\tevent: TimelinePartEvent;\n\t  }\n\t| {\n\t\t\ttype: \"tool\";\n\t\t\tkey: string;\n\t\t\titem: TimelineItem;\n\t\t\tToolComponent: React.ComponentType<TimelineActivityToolProps>;\n\t  };\n\nfunction extractEventPart(item: TimelineItem): TimelinePartEvent | null {\n\tif (item.type !== \"event\") {\n\t\treturn null;\n\t}\n\n\tconst eventPart = item.parts.find(\n\t\t(part): part is TimelinePartEvent => part.type === \"event\"\n\t);\n\n\treturn eventPart || null;\n}\n\nfunction getToolNameFromTimelineItem(item: TimelineItem): string | null {\n\tif (item.tool) {\n\t\treturn item.tool;\n\t}\n\n\tfor (const part of item.parts) {\n\t\tif (\n\t\t\ttypeof part === \"object\" &&\n\t\t\tpart !== null &&\n\t\t\t\"type\" in part &&\n\t\t\t\"toolName\" in part &&\n\t\t\ttypeof part.type === \"string\" &&\n\t\t\tpart.type.startsWith(\"tool-\") &&\n\t\t\ttypeof part.toolName === \"string\"\n\t\t) {\n\t\t\treturn part.toolName;\n\t\t}\n\t}\n\n\treturn null;\n}\n\nexport const TimelineActivityGroup: React.FC<TimelineActivityGroupProps> = ({\n\tgroup,\n\tconversationId,\n\tavailableAIAgents,\n\tavailableHumanAgents,\n\tcurrentVisitorId,\n\ttools,\n}) => {\n\tconst activityRows = useMemo<ActivityRow[]>(() => {\n\t\tconst rows: ActivityRow[] = [];\n\n\t\tfor (let index = 0; index < group.items.length; index++) {\n\t\t\tconst item = group.items[index];\n\t\t\tif (!item) {\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (item.type === \"event\") {\n\t\t\t\tconst eventPart = extractEventPart(item);\n\t\t\t\tif (!eventPart) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\trows.push({\n\t\t\t\t\ttype: \"event\",\n\t\t\t\t\tkey: item.id ?? `activity-event-${item.createdAt}-${index}`,\n\t\t\t\t\titem,\n\t\t\t\t\tevent: eventPart,\n\t\t\t\t});\n\t\t\t\tcontinue;\n\t\t\t}\n\n\t\t\tif (item.type === \"tool\") {\n\t\t\t\tconst toolName = getToolNameFromTimelineItem(item);\n\t\t\t\tif (!toolName) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tconst toolDefinition = tools?.[toolName];\n\t\t\t\tif (!toolDefinition) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\trows.push({\n\t\t\t\t\ttype: \"tool\",\n\t\t\t\t\tkey: item.id ?? `activity-tool-${item.createdAt}-${index}`,\n\t\t\t\t\titem,\n\t\t\t\t\tToolComponent: toolDefinition.component,\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\n\t\treturn rows;\n\t}, [group.items, tools]);\n\n\tif (activityRows.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === group.senderId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === group.senderId\n\t);\n\n\treturn (\n\t\t<PrimitiveTimelineItemGroup\n\t\t\titems={group.items}\n\t\t\tviewerId={currentVisitorId}\n\t\t\tviewerType={SenderType.VISITOR}\n\t\t>\n\t\t\t{({ isAI, isTeamMember }) => (\n\t\t\t\t<div className=\"flex w-full flex-row gap-2\">\n\t\t\t\t\t<TimelineItemGroupAvatar className=\"flex shrink-0 flex-col justify-start\">\n\t\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName=\"size-6\"\n\t\t\t\t\t\t\t\timage={aiAgent?.image}\n\t\t\t\t\t\t\t\tisAI\n\t\t\t\t\t\t\t\tname={aiAgent?.name || \"AI Assistant\"}\n\t\t\t\t\t\t\t\tshowBackground={!!aiAgent?.image}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName=\"size-6\"\n\t\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\t\tname={isTeamMember ? humanAgent?.name || \"Support\" : \"Visitor\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</TimelineItemGroupAvatar>\n\n\t\t\t\t\t<TimelineItemGroupContent className=\"flex min-w-0 flex-1 flex-col gap-1\">\n\t\t\t\t\t\t<div className=\"flex w-full min-w-0 flex-col gap-2\">\n\t\t\t\t\t\t\t{activityRows.map((row) => {\n\t\t\t\t\t\t\t\tif (row.type === \"event\") {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<ConversationEvent\n\t\t\t\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"w-full\"\n\t\t\t\t\t\t\t\t\t\t\tcompact\n\t\t\t\t\t\t\t\t\t\t\tcreatedAt={row.item.createdAt}\n\t\t\t\t\t\t\t\t\t\t\tevent={row.event}\n\t\t\t\t\t\t\t\t\t\t\tkey={row.key}\n\t\t\t\t\t\t\t\t\t\t\tshowAvatar={false}\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}\n\n\t\t\t\t\t\t\t\tconst ToolComponent = row.ToolComponent;\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<div className=\"w-full\" key={row.key}>\n\t\t\t\t\t\t\t\t\t\t<ToolComponent\n\t\t\t\t\t\t\t\t\t\t\tconversationId={conversationId}\n\t\t\t\t\t\t\t\t\t\t\titem={row.item}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t</div>\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\nTimelineActivityGroup.displayName = \"TimelineActivityGroup\";\n"],"mappings":";;;;;;;;AAqDA,SAAS,iBAAiB,MAA8C;AACvE,KAAI,KAAK,SAAS,QACjB,QAAO;AAOR,QAJkB,KAAK,MAAM,MAC3B,SAAoC,KAAK,SAAS,QACnD,IAEmB;;AAGrB,SAAS,4BAA4B,MAAmC;AACvE,KAAI,KAAK,KACR,QAAO,KAAK;AAGb,MAAK,MAAM,QAAQ,KAAK,MACvB,KACC,OAAO,SAAS,YAChB,SAAS,QACT,UAAU,QACV,cAAc,QACd,OAAO,KAAK,SAAS,YACrB,KAAK,KAAK,WAAW,QAAQ,IAC7B,OAAO,KAAK,aAAa,SAEzB,QAAO,KAAK;AAId,QAAO;;AAGR,MAAaA,yBAA+D,EAC3E,OACA,gBACA,mBACA,sBACA,kBACA,YACK;CACL,MAAM,eAAe,cAA6B;EACjD,MAAMC,OAAsB,EAAE;AAE9B,OAAK,IAAI,QAAQ,GAAG,QAAQ,MAAM,MAAM,QAAQ,SAAS;GACxD,MAAM,OAAO,MAAM,MAAM;AACzB,OAAI,CAAC,KACJ;AAGD,OAAI,KAAK,SAAS,SAAS;IAC1B,MAAM,YAAY,iBAAiB,KAAK;AACxC,QAAI,CAAC,UACJ;AAGD,SAAK,KAAK;KACT,MAAM;KACN,KAAK,KAAK,MAAM,kBAAkB,KAAK,UAAU,GAAG;KACpD;KACA,OAAO;KACP,CAAC;AACF;;AAGD,OAAI,KAAK,SAAS,QAAQ;IACzB,MAAM,WAAW,4BAA4B,KAAK;AAClD,QAAI,CAAC,SACJ;IAGD,MAAM,iBAAiB,QAAQ;AAC/B,QAAI,CAAC,eACJ;AAGD,SAAK,KAAK;KACT,MAAM;KACN,KAAK,KAAK,MAAM,iBAAiB,KAAK,UAAU,GAAG;KACnD;KACA,eAAe,eAAe;KAC9B,CAAC;;;AAIJ,SAAO;IACL,CAAC,MAAM,OAAO,MAAM,CAAC;AAExB,KAAI,aAAa,WAAW,EAC3B,QAAO;CAGR,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,MAAM,SAC9B;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,MAAM,SAC9B;AAED,QACC,oBAACC;EACA,OAAO,MAAM;EACb,UAAU;EACV,YAAY,WAAW;aAErB,EAAE,MAAM,mBACT,qBAAC;GAAI,WAAU;cACd,oBAAC;IAAwB,WAAU;cACjC,OACA,oBAAC;KACA,WAAU;KACV,OAAO,SAAS;KAChB;KACA,MAAM,SAAS,QAAQ;KACvB,gBAAgB,CAAC,CAAC,SAAS;MAC1B,GAEF,oBAAC;KACA,WAAU;KACV,OAAO,YAAY;KACnB,MAAM,eAAe,YAAY,QAAQ,YAAY;MACpD;KAEsB,EAE1B,oBAAC;IAAyB,WAAU;cACnC,oBAAC;KAAI,WAAU;eACb,aAAa,KAAK,QAAQ;AAC1B,UAAI,IAAI,SAAS,QAChB,QACC,oBAAC;OACmB;OACG;OACtB,WAAU;OACV;OACA,WAAW,IAAI,KAAK;OACpB,OAAO,IAAI;OAEX,YAAY;SADP,IAAI,IAER;MAIJ,MAAM,gBAAgB,IAAI;AAC1B,aACC,oBAAC;OAAI,WAAU;iBACd,oBAAC;QACgB;QAChB,MAAM,IAAI;SACT;SAJ0B,IAAI,IAK3B;OAEN;MACG;KACoB;IACtB;GAEqB;;AAI/B,sBAAsB,cAAc"}

package/support/components/timeline-code-block.d.ts

@@ -0,0 +1,14 @@
+import { TimelineCodeBlockProps as TimelineCodeBlockProps$1 } from "../../primitives/timeline-code-block.js";
+import React from "react";
+
+//#region src/support/components/timeline-code-block.d.ts
+type TimelineCodeBlockProps = TimelineCodeBlockProps$1;
+declare function TimelineCodeBlock({
+  code,
+  language,
+  fileName,
+  className
+}: TimelineCodeBlockProps): React.ReactElement;
+//#endregion
+export { TimelineCodeBlock, TimelineCodeBlockProps };
+//# sourceMappingURL=timeline-code-block.d.ts.map

package/support/components/timeline-code-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-code-block.d.ts","names":[],"sources":["../../../src/support/components/timeline-code-block.tsx"],"sourcesContent":[],"mappings":";;;;KAOY,sBAAA,GAAyB;iBAErB,iBAAA;;;;;GAKb,yBAAyB,KAAA,CAAM"}

package/support/components/timeline-code-block.js

@@ -0,0 +1,44 @@
+import { TimelineCodeBlock as TimelineCodeBlock$1 } from "../../primitives/timeline-code-block.js";
+import { CoButton } from "./button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/timeline-code-block.tsx
+function TimelineCodeBlock({ code, language, fileName, className }) {
+	return /* @__PURE__ */ jsx(TimelineCodeBlock$1, {
+		className: `mt-1 w-full overflow-hidden rounded border border-co-border bg-co-background-200 ${className ?? ""}`.trim(),
+		code,
+		fileName,
+		language,
+		children: ({ code: content, codeClassName, fileName: resolvedFileName, languageLabel, hasCopied, onCopy }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 px-2 py-1.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-center gap-2",
+				children: [resolvedFileName ? /* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium text-xs",
+					children: resolvedFileName
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: "rounded border border-co-border/70 bg-co-background-500 px-1.5 py-0.5 font-medium text-[10px] uppercase tracking-wide",
+					children: languageLabel
+				})]
+			}), /* @__PURE__ */ jsx(CoButton, {
+				onClick: () => {
+					onCopy();
+				},
+				size: "small",
+				type: "button",
+				variant: "ghost",
+				children: hasCopied ? "Copied" : "Copy"
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "no-scrollbar overflow-x-auto p-3 text-xs leading-relaxed",
+			children: /* @__PURE__ */ jsx("code", {
+				className: codeClassName,
+				children: content
+			})
+		})] })
+	});
+}
+
+//#endregion
+export { TimelineCodeBlock };
+//# sourceMappingURL=timeline-code-block.js.map

package/support/components/timeline-code-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-code-block.js","names":["PrimitiveTimelineCodeBlock"],"sources":["../../../src/support/components/timeline-code-block.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n\tTimelineCodeBlock as PrimitiveTimelineCodeBlock,\n\ttype TimelineCodeBlockProps as PrimitiveTimelineCodeBlockProps,\n} from \"../../primitives/timeline-code-block\";\nimport { CoButton } from \"./button\";\n\nexport type TimelineCodeBlockProps = PrimitiveTimelineCodeBlockProps;\n\nexport function TimelineCodeBlock({\n\tcode,\n\tlanguage,\n\tfileName,\n\tclassName,\n}: TimelineCodeBlockProps): React.ReactElement {\n\treturn (\n\t\t<PrimitiveTimelineCodeBlock\n\t\t\tclassName={`mt-1 w-full overflow-hidden rounded border border-co-border bg-co-background-200 ${className ?? \"\"}`.trim()}\n\t\t\tcode={code}\n\t\t\tfileName={fileName}\n\t\t\tlanguage={language}\n\t\t>\n\t\t\t{({\n\t\t\t\tcode: content,\n\t\t\t\tcodeClassName,\n\t\t\t\tfileName: resolvedFileName,\n\t\t\t\tlanguageLabel,\n\t\t\t\thasCopied,\n\t\t\t\tonCopy,\n\t\t\t}) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"flex items-center justify-between gap-2 px-2 py-1.5\">\n\t\t\t\t\t\t<div className=\"flex min-w-0 items-center gap-2\">\n\t\t\t\t\t\t\t{resolvedFileName ? (\n\t\t\t\t\t\t\t\t<span className=\"truncate font-medium text-xs\">\n\t\t\t\t\t\t\t\t\t{resolvedFileName}\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t<span className=\"rounded border border-co-border/70 bg-co-background-500 px-1.5 py-0.5 font-medium text-[10px] uppercase tracking-wide\">\n\t\t\t\t\t\t\t\t{languageLabel}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<CoButton\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tvoid onCopy();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{hasCopied ? \"Copied\" : \"Copy\"}\n\t\t\t\t\t\t</CoButton>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<pre className=\"no-scrollbar overflow-x-auto p-3 text-xs leading-relaxed\">\n\t\t\t\t\t\t<code className={codeClassName}>{content}</code>\n\t\t\t\t\t</pre>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PrimitiveTimelineCodeBlock>\n\t);\n}\n"],"mappings":";;;;;AASA,SAAgB,kBAAkB,EACjC,MACA,UACA,UACA,aAC8C;AAC9C,QACC,oBAACA;EACA,WAAW,oFAAoF,aAAa,KAAK,MAAM;EACjH;EACI;EACA;aAER,EACD,MAAM,SACN,eACA,UAAU,kBACV,eACA,WACA,aAEA,4CACC,qBAAC;GAAI,WAAU;cACd,qBAAC;IAAI,WAAU;eACb,mBACA,oBAAC;KAAK,WAAU;eACd;MACK,GACJ,MACJ,oBAAC;KAAK,WAAU;eACd;MACK;KACF,EAEN,oBAAC;IACA,eAAe;AACd,KAAK,QAAQ;;IAEd,MAAK;IACL,MAAK;IACL,SAAQ;cAEP,YAAY,WAAW;KACd;IACN,EAEN,oBAAC;GAAI,WAAU;aACd,oBAAC;IAAK,WAAW;cAAgB;KAAe;IAC3C,IACJ;GAEwB"}

package/support/components/timeline-command-block.d.ts

@@ -0,0 +1,12 @@
+import { TimelineCommandBlockProps as TimelineCommandBlockProps$1 } from "../../primitives/timeline-command-block.js";
+import React from "react";
+
+//#region src/support/components/timeline-command-block.d.ts
+type TimelineCommandBlockProps = TimelineCommandBlockProps$1;
+declare function TimelineCommandBlock({
+  commands,
+  className
+}: TimelineCommandBlockProps): React.ReactElement;
+//#endregion
+export { TimelineCommandBlock, TimelineCommandBlockProps };
+//# sourceMappingURL=timeline-command-block.d.ts.map

package/support/components/timeline-command-block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-command-block.d.ts","names":[],"sources":["../../../src/support/components/timeline-command-block.tsx"],"sourcesContent":[],"mappings":";;;;KAOY,yBAAA,GAA4B;iBAExB,oBAAA;;;GAGb,4BAA4B,KAAA,CAAM"}

package/support/components/timeline-command-block.js

@@ -0,0 +1,42 @@
+import { TimelineCommandBlock as TimelineCommandBlock$1 } from "../../primitives/timeline-command-block.js";
+import { CoButton } from "./button.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/support/components/timeline-command-block.tsx
+function TimelineCommandBlock({ commands, className }) {
+	return /* @__PURE__ */ jsx(TimelineCommandBlock$1, {
+		className: `mt-1 w-full overflow-hidden rounded border border-co-border bg-co-background-200 ${className ?? ""}`.trim(),
+		commands,
+		children: ({ activeCommand, activePackageManager, hasCopied, onCopy, packageManagers, setPackageManager }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between gap-2 px-2 py-1.5",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-1",
+				children: packageManagers.map((packageManager) => /* @__PURE__ */ jsx(CoButton, {
+					onClick: () => setPackageManager(packageManager),
+					size: "small",
+					type: "button",
+					variant: activePackageManager === packageManager ? "outline" : "ghost",
+					children: packageManager
+				}, packageManager))
+			}), /* @__PURE__ */ jsx(CoButton, {
+				onClick: () => {
+					onCopy();
+				},
+				size: "small",
+				type: "button",
+				variant: "ghost",
+				children: hasCopied ? "Copied" : "Copy"
+			})]
+		}), /* @__PURE__ */ jsx("pre", {
+			className: "no-scrollbar overflow-x-auto p-3 text-xs leading-relaxed",
+			children: /* @__PURE__ */ jsx("code", {
+				className: "language-bash",
+				children: activeCommand
+			})
+		})] })
+	});
+}
+
+//#endregion
+export { TimelineCommandBlock };
+//# sourceMappingURL=timeline-command-block.js.map

package/support/components/timeline-command-block.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-command-block.js","names":["PrimitiveTimelineCommandBlock"],"sources":["../../../src/support/components/timeline-command-block.tsx"],"sourcesContent":["import type React from \"react\";\nimport {\n\tTimelineCommandBlock as PrimitiveTimelineCommandBlock,\n\ttype TimelineCommandBlockProps as PrimitiveTimelineCommandBlockProps,\n} from \"../../primitives/timeline-command-block\";\nimport { CoButton } from \"./button\";\n\nexport type TimelineCommandBlockProps = PrimitiveTimelineCommandBlockProps;\n\nexport function TimelineCommandBlock({\n\tcommands,\n\tclassName,\n}: TimelineCommandBlockProps): React.ReactElement {\n\treturn (\n\t\t<PrimitiveTimelineCommandBlock\n\t\t\tclassName={`mt-1 w-full overflow-hidden rounded border border-co-border bg-co-background-200 ${className ?? \"\"}`.trim()}\n\t\t\tcommands={commands}\n\t\t>\n\t\t\t{({\n\t\t\t\tactiveCommand,\n\t\t\t\tactivePackageManager,\n\t\t\t\thasCopied,\n\t\t\t\tonCopy,\n\t\t\t\tpackageManagers,\n\t\t\t\tsetPackageManager,\n\t\t\t}) => (\n\t\t\t\t<>\n\t\t\t\t\t<div className=\"flex items-center justify-between gap-2 px-2 py-1.5\">\n\t\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t{packageManagers.map((packageManager) => (\n\t\t\t\t\t\t\t\t<CoButton\n\t\t\t\t\t\t\t\t\tkey={packageManager}\n\t\t\t\t\t\t\t\t\tonClick={() => setPackageManager(packageManager)}\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\tvariant={\n\t\t\t\t\t\t\t\t\t\tactivePackageManager === packageManager\n\t\t\t\t\t\t\t\t\t\t\t? \"outline\"\n\t\t\t\t\t\t\t\t\t\t\t: \"ghost\"\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\t\t{packageManager}\n\t\t\t\t\t\t\t\t</CoButton>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<CoButton\n\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\tvoid onCopy();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{hasCopied ? \"Copied\" : \"Copy\"}\n\t\t\t\t\t\t</CoButton>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t<pre className=\"no-scrollbar overflow-x-auto p-3 text-xs leading-relaxed\">\n\t\t\t\t\t\t<code className=\"language-bash\">{activeCommand}</code>\n\t\t\t\t\t</pre>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PrimitiveTimelineCommandBlock>\n\t);\n}\n"],"mappings":";;;;;AASA,SAAgB,qBAAqB,EACpC,UACA,aACiD;AACjD,QACC,oBAACA;EACA,WAAW,oFAAoF,aAAa,KAAK,MAAM;EAC7G;aAER,EACD,eACA,sBACA,WACA,QACA,iBACA,wBAEA,4CACC,qBAAC;GAAI,WAAU;cACd,oBAAC;IAAI,WAAU;cACb,gBAAgB,KAAK,mBACrB,oBAAC;KAEA,eAAe,kBAAkB,eAAe;KAChD,MAAK;KACL,MAAK;KACL,SACC,yBAAyB,iBACtB,YACA;eAGH;OAVI,eAWK,CACV;KACG,EAEN,oBAAC;IACA,eAAe;AACd,KAAK,QAAQ;;IAEd,MAAK;IACL,MAAK;IACL,SAAQ;cAEP,YAAY,WAAW;KACd;IACN,EAEN,oBAAC;GAAI,WAAU;aACd,oBAAC;IAAK,WAAU;cAAiB;KAAqB;IACjD,IACJ;GAE2B"}

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

@@ -7,6 +7,7 @@ type TimelineMessageItemProps = {
   isLast?: boolean;
   isSentByViewer?: boolean;
 };
+declare function getSupportMessageWidthClasses(text: string | null | undefined): string;
 /**
  * Message bubble renderer that adapts layout depending on whether the visitor
  * or an agent sent the message.
@@ -17,5 +18,5 @@ declare function TimelineMessageItem({
   isSentByViewer
 }: TimelineMessageItemProps): React.ReactElement;
 //#endregion
-export { TimelineMessageItem, TimelineMessageItemProps };
+export { TimelineMessageItem, TimelineMessageItemProps, getSupportMessageWidthClasses };
 //# 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":";;;;KAkBY,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"}
+{"version":3,"file":"timeline-message-item.d.ts","names":[],"sources":["../../../src/support/components/timeline-message-item.tsx"],"sourcesContent":[],"mappings":";;;;KAsBY,wBAAA;QACL;EADK,MAAA,CAAA,EAAA,OAAA;EAMI,cAAA,CAAA,EAAA,OAAA;AAYhB,CAAA;AACC,iBAbe,6BAAA,CAaf,IAAA,EAAA,MAAA,GAAA,IAAA,GAAA,SAAA,CAAA,EAAA,MAAA;;;;;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

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

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

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

package/support/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,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;CAIzB,EAAM;EAuBG,SAAA,CAAA,EAAA,MAwDZ;CAxD2B,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"}
+{"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;CAIzB,EAAM;EAuBG,SAAA,CAAA,EAAA,MAsEZ;CAtE2B,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

@@ -1,5 +1,5 @@
 import { cn } from "../utils/index.js";
-import { AvatarStack } from "./avatar-stack.js";
+import { Avatar } from "./avatar.js";
 import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -22,12 +22,20 @@ const TypingIndicator = React$1.forwardRef(({ participants, availableAIAgents =
 		className: cn("flex items-center gap-6", className),
 		ref,
 		...props,
-		children: [withAvatars && /* @__PURE__ */ jsx(AvatarStack, {
-			aiAgents: typingAIAgents,
-			hideDefaultAIAgent: typingAIAgents.length === 0,
-			humanAgents: typingHumanAgents,
-			size: 24,
-			spacing: 16
+		children: [withAvatars && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center",
+			children: [typingAIAgents.map((agent) => /* @__PURE__ */ jsx(Avatar, {
+				className: "size-6",
+				image: agent.image,
+				isAI: true,
+				name: agent.name,
+				showBackground: !!agent.image
+			}, agent.id)), typingHumanAgents.map((agent) => /* @__PURE__ */ jsx(Avatar, {
+				className: "size-6",
+				image: agent.image,
+				lastSeenAt: agent.lastSeenAt,
+				name: agent.name
+			}, agent.id))]
 		}), /* @__PURE__ */ jsx(BouncingDots, {})]
 	});
 });

package/support/components/typing-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"typing-indicator.js","names":["React"],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { AvatarStack } from \"./avatar-stack\";\n\nexport type TypingParticipantType = \"visitor\" | \"team_member\" | \"ai\";\n\nexport type TypingParticipant = {\n\tid: string;\n\ttype: TypingParticipantType;\n};\n\nexport type TypingIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {\n\tparticipants: TypingParticipant[];\n\tavailableAIAgents?: AvailableAIAgent[];\n\tavailableHumanAgents?: AvailableHumanAgent[];\n\twithAvatars?: boolean;\n};\n\nexport const BouncingDots = ({\n\tclassName,\n}: {\n\tclassName?: string;\n}): React.ReactElement => (\n\t<div className=\"flex gap-1\">\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-1 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-2 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-3 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t</div>\n);\n\nexport const TypingIndicator = React.forwardRef<\n\tHTMLDivElement,\n\tTypingIndicatorProps\n>(\n\t(\n\t\t{\n\t\t\tparticipants,\n\t\t\tavailableAIAgents = [],\n\t\t\tavailableHumanAgents = [],\n\t\t\twithAvatars = true,\n\t\t\tclassName,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tif (!participants || participants.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Separate AI and human participants\n\t\tconst humanParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"team_member\")\n\t\t\t.map((p) => p.id);\n\n\t\tconst aiParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"ai\")\n\t\t\t.map((p) => p.id);\n\n\t\t// Get matching agents\n\t\tconst typingHumanAgents = availableHumanAgents.filter((agent) =>\n\t\t\thumanParticipantIds.includes(agent.id)\n\t\t);\n\n\t\tconst typingAIAgents = availableAIAgents.filter((agent) =>\n\t\t\taiParticipantIds.includes(agent.id)\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\"flex items-center gap-6\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{withAvatars && (\n\t\t\t\t\t<AvatarStack\n\t\t\t\t\t\taiAgents={typingAIAgents}\n\t\t\t\t\t\thideDefaultAIAgent={typingAIAgents.length === 0}\n\t\t\t\t\t\thumanAgents={typingHumanAgents}\n\t\t\t\t\t\tsize={24}\n\t\t\t\t\t\tspacing={16}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<BouncingDots />\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nTypingIndicator.displayName = \"TypingIndicator\";\n"],"mappings":";;;;;;AAmBA,MAAa,gBAAgB,EAC5B,gBAIA,qBAAC;CAAI,WAAU;;EACd,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;EACF,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;EACF,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;;EACG;AAGP,MAAa,kBAAkBA,QAAM,YAKnC,EACC,cACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,cAAc,MACd,WACA,GAAG,SAEJ,QACI;AACJ,KAAI,CAAC,gBAAgB,aAAa,WAAW,EAC5C,QAAO;CAIR,MAAM,sBAAsB,aAC1B,QAAQ,MAAM,EAAE,SAAS,cAAc,CACvC,KAAK,MAAM,EAAE,GAAG;CAElB,MAAM,mBAAmB,aACvB,QAAQ,MAAM,EAAE,SAAS,KAAK,CAC9B,KAAK,MAAM,EAAE,GAAG;CAGlB,MAAM,oBAAoB,qBAAqB,QAAQ,UACtD,oBAAoB,SAAS,MAAM,GAAG,CACtC;CAED,MAAM,iBAAiB,kBAAkB,QAAQ,UAChD,iBAAiB,SAAS,MAAM,GAAG,CACnC;AAED,QACC,qBAAC;EACA,WAAW,GAAG,2BAA2B,UAAU;EAC9C;EACL,GAAI;aAEH,eACA,oBAAC;GACA,UAAU;GACV,oBAAoB,eAAe,WAAW;GAC9C,aAAa;GACb,MAAM;GACN,SAAS;IACR,EAEH,oBAAC,iBAAe;GACX;EAGR;AAED,gBAAgB,cAAc"}
+{"version":3,"file":"typing-indicator.js","names":["React"],"sources":["../../../src/support/components/typing-indicator.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport * as React from \"react\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\n\nexport type TypingParticipantType = \"visitor\" | \"team_member\" | \"ai\";\n\nexport type TypingParticipant = {\n\tid: string;\n\ttype: TypingParticipantType;\n};\n\nexport type TypingIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {\n\tparticipants: TypingParticipant[];\n\tavailableAIAgents?: AvailableAIAgent[];\n\tavailableHumanAgents?: AvailableHumanAgent[];\n\twithAvatars?: boolean;\n};\n\nexport const BouncingDots = ({\n\tclassName,\n}: {\n\tclassName?: string;\n}): React.ReactElement => (\n\t<div className=\"flex gap-1\">\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-1 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-2 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t\t<span\n\t\t\tclassName={cn(\n\t\t\t\t\"dot-bounce-3 size-1 rounded-full bg-co-primary\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t/>\n\t</div>\n);\n\nexport const TypingIndicator = React.forwardRef<\n\tHTMLDivElement,\n\tTypingIndicatorProps\n>(\n\t(\n\t\t{\n\t\t\tparticipants,\n\t\t\tavailableAIAgents = [],\n\t\t\tavailableHumanAgents = [],\n\t\t\twithAvatars = true,\n\t\t\tclassName,\n\t\t\t...props\n\t\t},\n\t\tref\n\t) => {\n\t\tif (!participants || participants.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\t// Separate AI and human participants\n\t\tconst humanParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"team_member\")\n\t\t\t.map((p) => p.id);\n\n\t\tconst aiParticipantIds = participants\n\t\t\t.filter((p) => p.type === \"ai\")\n\t\t\t.map((p) => p.id);\n\n\t\t// Get matching agents\n\t\tconst typingHumanAgents = availableHumanAgents.filter((agent) =>\n\t\t\thumanParticipantIds.includes(agent.id)\n\t\t);\n\n\t\tconst typingAIAgents = availableAIAgents.filter((agent) =>\n\t\t\taiParticipantIds.includes(agent.id)\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\"flex items-center gap-6\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{withAvatars && (\n\t\t\t\t\t<div className=\"flex items-center\">\n\t\t\t\t\t\t{typingAIAgents.map((agent) => (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName=\"size-6\"\n\t\t\t\t\t\t\t\timage={agent.image}\n\t\t\t\t\t\t\t\tisAI\n\t\t\t\t\t\t\t\tkey={agent.id}\n\t\t\t\t\t\t\t\tname={agent.name}\n\t\t\t\t\t\t\t\tshowBackground={!!agent.image}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{typingHumanAgents.map((agent) => (\n\t\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\t\tclassName=\"size-6\"\n\t\t\t\t\t\t\t\timage={agent.image}\n\t\t\t\t\t\t\t\tkey={agent.id}\n\t\t\t\t\t\t\t\tlastSeenAt={agent.lastSeenAt}\n\t\t\t\t\t\t\t\tname={agent.name}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t\t<BouncingDots />\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nTypingIndicator.displayName = \"TypingIndicator\";\n"],"mappings":";;;;;;AAmBA,MAAa,gBAAgB,EAC5B,gBAIA,qBAAC;CAAI,WAAU;;EACd,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;EACF,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;EACF,oBAAC,UACA,WAAW,GACV,kDACA,UACA,GACA;;EACG;AAGP,MAAa,kBAAkBA,QAAM,YAKnC,EACC,cACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,cAAc,MACd,WACA,GAAG,SAEJ,QACI;AACJ,KAAI,CAAC,gBAAgB,aAAa,WAAW,EAC5C,QAAO;CAIR,MAAM,sBAAsB,aAC1B,QAAQ,MAAM,EAAE,SAAS,cAAc,CACvC,KAAK,MAAM,EAAE,GAAG;CAElB,MAAM,mBAAmB,aACvB,QAAQ,MAAM,EAAE,SAAS,KAAK,CAC9B,KAAK,MAAM,EAAE,GAAG;CAGlB,MAAM,oBAAoB,qBAAqB,QAAQ,UACtD,oBAAoB,SAAS,MAAM,GAAG,CACtC;CAED,MAAM,iBAAiB,kBAAkB,QAAQ,UAChD,iBAAiB,SAAS,MAAM,GAAG,CACnC;AAED,QACC,qBAAC;EACA,WAAW,GAAG,2BAA2B,UAAU;EAC9C;EACL,GAAI;aAEH,eACA,qBAAC;GAAI,WAAU;cACb,eAAe,KAAK,UACpB,oBAAC;IACA,WAAU;IACV,OAAO,MAAM;IACb;IAEA,MAAM,MAAM;IACZ,gBAAgB,CAAC,CAAC,MAAM;MAFnB,MAAM,GAGV,CACD,EACD,kBAAkB,KAAK,UACvB,oBAAC;IACA,WAAU;IACV,OAAO,MAAM;IAEb,YAAY,MAAM;IAClB,MAAM,MAAM;MAFP,MAAM,GAGV,CACD;IACG,EAEP,oBAAC,iBAAe;GACX;EAGR;AAED,gBAAgB,cAAc"}

package/support/index.d.ts

@@ -11,7 +11,7 @@ import { WebSocketContextValue, WebSocketProvider, useWebSocket } from "./contex
 import { useSupportConfig, useSupportNavigation, useSupportStore } from "./store/support-store.js";
 import "./store/index.js";
 import * as React$1 from "react";
-import * as _cossistant_core0 from "@cossistant/core";
+import * as _cossistant_core7 from "@cossistant/core";
 import { DefaultRoutes, NavigationState, RouteRegistry, SupportPage as SupportPageType } from "@cossistant/core";
 import { DefaultMessage } from "@cossistant/types";
 
@@ -179,10 +179,10 @@ type SupportRouterProps = {
    */
   children?: React$1.ReactNode;
 };
-type SupportPageProps<K extends keyof _cossistant_core0.RouteRegistry = keyof _cossistant_core0.RouteRegistry> = {
+type SupportPageProps<K extends keyof _cossistant_core7.RouteRegistry = keyof _cossistant_core7.RouteRegistry> = {
   name: K;
   component: React$1.ComponentType<{
-    params?: _cossistant_core0.RouteRegistry[K];
+    params?: _cossistant_core7.RouteRegistry[K];
   }>;
 };
 type SupportRootProps = {
@@ -250,7 +250,7 @@ declare const Support: (<Locale extends string = SupportLocale>(props: SupportPr
   } & React$1.RefAttributes<HTMLButtonElement>>;
   Content: React$1.FC<SupportContentProps>;
   Router: React$1.FC<SupportRouterProps>;
-  Page: <K extends keyof _cossistant_core0.RouteRegistry>(_props: PageProps<K>) => null;
+  Page: <K extends keyof _cossistant_core7.RouteRegistry>(_props: PageProps<K>) => null;
   Header: React$1.FC<SlotProps>;
   Footer: React$1.FC<SlotProps>;
 };

package/support/pages/conversation-history.js

@@ -1,10 +1,10 @@
-import { AvatarStack } from "../components/avatar-stack.js";
 import { useSupportNavigation } from "../store/support-store.js";
 import { CoButton } from "../components/button.js";
 import icons_default from "../components/icons.js";
 import { PENDING_CONVERSATION_ID } from "../../utils/id.js";
 import { Header } from "../components/header.js";
 import { Text, useSupportText } from "../text/index.js";
+import { AvatarStack } from "../components/avatar-stack.js";
 import { Watermark } from "../components/watermark.js";
 import { useConversationHistoryPage } from "../../hooks/use-conversation-history-page.js";
 import { ConversationButtonLink } from "../components/conversation-button-link.js";

package/support/pages/conversation.js

@@ -1,10 +1,10 @@
 import { useStoreSelector } from "../../hooks/private/store/use-store-selector.js";
-import { AvatarStack } from "../components/avatar-stack.js";
 import { useSupportConfig, useSupportNavigation } from "../store/support-store.js";
 import { useNewMessageSound } from "../../hooks/use-new-message-sound.js";
 import { Header } from "../components/header.js";
 import { Text, useSupportText } from "../text/index.js";
 import { useConversationPage } from "../../hooks/use-conversation-page.js";
+import { AvatarStack } from "../components/avatar-stack.js";
 import { ConversationResolvedFeedback } from "../components/conversation-resolved-feedback.js";
 import { ConversationTimelineList } from "../components/conversation-timeline.js";
 import { MultimodalInput } from "../components/multimodal-input.js";
@@ -50,7 +50,7 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 		setPendingRating(null);
 		setIsSubmittingRating(false);
 	}, [activeConversation?.id]);
-	const handleRateConversation = async (value) => {
+	const handleRateConversation = async (value, comment) => {
 		if (!(client && activeConversation)) return;
 		if (activeConversation.status !== ConversationStatus.RESOLVED || activeConversation.visitorRating) return;
 		if (isSubmittingRating) return;
@@ -60,6 +60,7 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 			await client.submitConversationRating({
 				conversationId: activeConversation.id,
 				rating: value,
+				comment,
 				visitorId: visitor?.id ?? void 0
 			});
 		} catch (error) {
@@ -105,6 +106,7 @@ const ConversationPage = ({ params, conversationId: legacyConversationId, initia
 					}), /* @__PURE__ */ jsx(AvatarStack, {
 						aiAgents: availableAIAgents,
 						gapWidth: 2,
+						hideDefaultAIAgent: false,
 						humanAgents: availableHumanAgents,
 						size: 32,
 						spacing: 28