@cossistant/react 0.0.4 → 0.0.6

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

@@ -1 +1 @@
-{"version":3,"file":"conversation-button-link.js","names":["senderImage: string | null","state: ConversationButtonLinkState","Icon"],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":["import { type Conversation, ConversationStatus } from \"@cossistant/types\";\nimport type { TimelineItem } from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\tuseConversationTimelineItems,\n\tuseConversationTyping,\n\tuseSupport,\n} from \"../..\";\nimport { useRenderElement } from \"../../utils/use-render-element\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport { formatTimeAgo } from \"../utils/time\";\nimport { Avatar } from \"./avatar\";\nimport { coButtonVariants } from \"./button\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type ConversationButtonLinkProps = {\n\tconversation: Conversation;\n\tonClick?: () => void;\n\tclassName?: string | ((state: ConversationButtonLinkState) => string);\n\trender?: (\n\t\tprops: React.HTMLProps<HTMLButtonElement>,\n\t\tstate: ConversationButtonLinkState\n\t) => React.ReactElement;\n};\n\nexport type ConversationButtonLinkAgent = {\n\tname: string;\n\timage: string | null;\n\ttype: \"human\" | \"ai\" | \"fallback\";\n};\n\nexport type ConversationButtonLinkState = {\n\tconversation: Conversation;\n\tlastMessage: {\n\t\tcontent: string;\n\t\ttime: string;\n\t\tisFromVisitor: boolean;\n\t\tsenderName?: string;\n\t\tsenderImage?: string | null;\n\t} | null;\n\tassignedAgent: ConversationButtonLinkAgent;\n};\n\nfunction getLastTimelineItemInfo(\n\titem: NonNullable<Conversation[\"lastTimelineItem\"]>,\n\tavailableHumanAgents: ReturnType<typeof useSupport>[\"availableHumanAgents\"],\n\twebsite: ReturnType<typeof useSupport>[\"website\"],\n\ttext: ReturnType<typeof useSupportText>\n) {\n\tconst isFromVisitor = item.visitorId !== null;\n\n\tlet senderName = text(\"common.fallbacks.unknown\");\n\tlet senderImage: string | null = null;\n\n\tif (isFromVisitor) {\n\t\tsenderName = text(\"common.fallbacks.you\");\n\t} else if (item.userId) {\n\t\tconst agent = availableHumanAgents.find((a) => a.id === item.userId);\n\t\tif (agent) {\n\t\t\tsenderName = agent.name;\n\t\t\tsenderImage = agent.image;\n\t\t} else {\n\t\t\tsenderName = text(\"common.fallbacks.supportTeam\");\n\t\t}\n\t} else if (item.aiAgentId && website?.availableAIAgents) {\n\t\tconst aiAgent = website.availableAIAgents.find(\n\t\t\t(a) => a.id === item.aiAgentId\n\t\t);\n\t\tif (aiAgent) {\n\t\t\tsenderName = aiAgent.name;\n\t\t\tsenderImage = aiAgent.image;\n\t\t} else {\n\t\t\tsenderName = text(\"common.fallbacks.aiAssistant\");\n\t\t}\n\t} else {\n\t\tsenderName = text(\"common.fallbacks.supportTeam\");\n\t}\n\n\treturn {\n\t\tcontent: item.text || \"\",\n\t\ttime: formatTimeAgo(item.createdAt),\n\t\tisFromVisitor,\n\t\tsenderName,\n\t\tsenderImage,\n\t};\n}\n\nexport function ConversationButtonLink({\n\tconversation,\n\tonClick,\n\t...props\n}: ConversationButtonLinkProps) {\n\tconst { availableHumanAgents, availableAIAgents, website, visitor } =\n\t\tuseSupport();\n\tconst { items } = useConversationTimelineItems(conversation.id);\n\tconst text = useSupportText();\n\tconst typingEntries = useConversationTyping(conversation.id, {\n\t\texcludeVisitorId: visitor?.id ?? null,\n\t});\n\n\t// Check if anyone is typing in this conversation\n\tconst typingInfo = useMemo(() => {\n\t\tif (typingEntries.length === 0) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst entry = typingEntries[0];\n\t\tlet name = text(\"common.fallbacks.someone\");\n\t\tlet image: string | null = null;\n\n\t\tif (entry?.actorType === \"user\") {\n\t\t\tconst human = availableHumanAgents.find(\n\t\t\t\t(agent) => agent.id === entry.actorId\n\t\t\t);\n\t\t\tname = human?.name || text(\"common.fallbacks.supportTeam\");\n\t\t\timage = human?.image || null;\n\t\t} else if (entry?.actorType === \"ai_agent\") {\n\t\t\tconst ai = availableAIAgents.find((agent) => agent.id === entry.actorId);\n\t\t\tname = ai?.name || text(\"common.fallbacks.aiAssistant\");\n\t\t\timage = ai?.image || null;\n\t\t}\n\n\t\treturn { name };\n\t}, [typingEntries, availableHumanAgents, availableAIAgents, text]);\n\n\t// Process the last timeline item (memoized to avoid expensive recomputation)\n\tconst lastMessage = useMemo(() => {\n\t\tconst cachedLastTimelineItem =\n\t\t\t// biome-ignore lint/style/useAtIndex: ok here\n\t\t\titems.length > 0 ? items[items.length - 1] : null;\n\n\t\tconst timelineItemToDisplay =\n\t\t\tcachedLastTimelineItem || conversation.lastTimelineItem;\n\n\t\treturn timelineItemToDisplay\n\t\t\t? getLastTimelineItemInfo(\n\t\t\t\t\ttimelineItemToDisplay,\n\t\t\t\t\tavailableHumanAgents,\n\t\t\t\t\twebsite,\n\t\t\t\t\ttext\n\t\t\t\t)\n\t\t\t: null;\n\t}, [\n\t\titems,\n\t\tconversation.lastTimelineItem,\n\t\tavailableHumanAgents,\n\t\twebsite,\n\t\ttext,\n\t]);\n\n\tconst assignedAgent = useMemo<ConversationButtonLinkAgent>(() => {\n\t\tconst supportFallbackName = text(\"common.fallbacks.supportTeam\");\n\t\tconst aiFallbackName = text(\"common.fallbacks.aiAssistant\");\n\n\t\tconst knownItems = items.slice();\n\t\tif (\n\t\t\tconversation.lastTimelineItem &&\n\t\t\t!knownItems.some((item) => item.id === conversation.lastTimelineItem?.id)\n\t\t) {\n\t\t\tknownItems.push(conversation.lastTimelineItem);\n\t\t}\n\n\t\tconst lastAgentItem = [...knownItems]\n\t\t\t.reverse()\n\t\t\t.find((item) => item.userId !== null || item.aiAgentId !== null);\n\n\t\tif (lastAgentItem?.userId) {\n\t\t\tconst human = availableHumanAgents.find(\n\t\t\t\t(agent) => agent.id === lastAgentItem.userId\n\t\t\t);\n\n\t\t\tif (human) {\n\t\t\t\treturn {\n\t\t\t\t\ttype: \"human\",\n\t\t\t\t\tname: human.name,\n\t\t\t\t\timage: human.image ?? null,\n\t\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttype: \"human\",\n\t\t\t\tname: supportFallbackName,\n\t\t\t\timage: null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tif (lastAgentItem?.aiAgentId) {\n\t\t\tconst ai = availableAIAgents.find(\n\t\t\t\t(agent) => agent.id === lastAgentItem.aiAgentId\n\t\t\t);\n\n\t\t\tif (ai) {\n\t\t\t\treturn {\n\t\t\t\t\ttype: \"ai\",\n\t\t\t\t\tname: ai.name,\n\t\t\t\t\timage: ai.image ?? null,\n\t\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t\t}\n\n\t\t\treturn {\n\t\t\t\ttype: \"ai\",\n\t\t\t\tname: aiFallbackName,\n\t\t\t\timage: null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tconst fallbackHuman = availableHumanAgents[0];\n\t\tif (fallbackHuman) {\n\t\t\treturn {\n\t\t\t\ttype: \"human\",\n\t\t\t\tname: fallbackHuman.name,\n\t\t\t\timage: fallbackHuman.image ?? null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\tconst fallbackAi = availableAIAgents[0];\n\t\tif (fallbackAi) {\n\t\t\treturn {\n\t\t\t\ttype: \"ai\",\n\t\t\t\tname: fallbackAi.name,\n\t\t\t\timage: fallbackAi.image ?? null,\n\t\t\t} satisfies ConversationButtonLinkAgent;\n\t\t}\n\n\t\treturn {\n\t\t\ttype: \"fallback\",\n\t\t\tname: supportFallbackName,\n\t\t\timage: null,\n\t\t} satisfies ConversationButtonLinkAgent;\n\t}, [\n\t\titems,\n\t\tconversation.lastTimelineItem,\n\t\tavailableHumanAgents,\n\t\tavailableAIAgents,\n\t\ttext,\n\t]);\n\n\tconst conversationTitle = useMemo(() => {\n\t\tif (conversation.title) {\n\t\t\treturn conversation.title;\n\t\t}\n\n\t\tif (lastMessage?.content) {\n\t\t\treturn lastMessage.content;\n\t\t}\n\n\t\treturn text(\"component.conversationButtonLink.fallbackTitle\");\n\t}, [conversation.title, lastMessage?.content, text]);\n\n\tconst state: ConversationButtonLinkState = {\n\t\tconversation,\n\t\tlastMessage,\n\t\tassignedAgent,\n\t};\n\n\treturn useRenderElement(\"button\", props, {\n\t\tstate,\n\t\tprops: {\n\t\t\tonClick,\n\t\t\ttype: \"button\",\n\t\t\tclassName: cn(\n\t\t\t\tcoButtonVariants({ variant: \"secondary\", size: \"large\" }),\n\t\t\t\t\"relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0\",\n\t\t\t\ttypeof props.className === \"function\"\n\t\t\t\t\t? props.className(state)\n\t\t\t\t\t: props.className\n\t\t\t),\n\t\t\tchildren: (\n\t\t\t\t<>\n\t\t\t\t\t<Avatar\n\t\t\t\t\t\tclassName=\"size-8 flex-shrink-0\"\n\t\t\t\t\t\timage={assignedAgent.image}\n\t\t\t\t\t\tname={assignedAgent.name}\n\t\t\t\t\t/>\n\n\t\t\t\t\t<div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n\t\t\t\t\t\t{typingInfo ? (\n\t\t\t\t\t\t\t<BouncingDots />\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<div className=\"flex max-w-[90%] items-center justify-between gap-2\">\n\t\t\t\t\t\t\t\t\t<h3 className=\"truncate font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t\t\t\t{conversationTitle}\n\t\t\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t\t\t{lastMessage ? (\n\t\t\t\t\t\t\t\t\t<p className=\"text-co-primary/60 text-xs\">\n\t\t\t\t\t\t\t\t\t\t{lastMessage.isFromVisitor ? (\n\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{text(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"component.conversationButtonLink.lastMessage.visitor\",\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\ttime: lastMessage.time,\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</span>\n\t\t\t\t\t\t\t\t\t\t) : (\n\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{text(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"component.conversationButtonLink.lastMessage.agent\",\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\tname:\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlastMessage.senderName ||\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttext(\"common.fallbacks.supportTeam\"),\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ttime: lastMessage.time,\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</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t\t) : null}\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\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase\",\n\t\t\t\t\t\t\tconversation.status === ConversationStatus.OPEN\n\t\t\t\t\t\t\t\t? \"bg-co-success/20 text-co-success-foreground\"\n\t\t\t\t\t\t\t\t: conversation.status === ConversationStatus.RESOLVED\n\t\t\t\t\t\t\t\t\t? \"bg-co-neutral/20 text-co-neutral-foreground\"\n\t\t\t\t\t\t\t\t\t: \"bg-co-warning/20 text-co-warning-foreground\"\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{conversation.status}\n\t\t\t\t\t</div>\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\t\t\tname=\"arrow-right\"\n\t\t\t\t\t\tvariant=\"default\"\n\t\t\t\t\t/>\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t});\n}\n"],"mappings":"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"}
+{"version":3,"file":"conversation-button-link.js","names":["STATUS_BADGE_CLASSNAMES: Record<ConversationStatus, string>","STATUS_TEXT_KEYS: Record<ConversationStatus, SupportTextKey>","Icon"],"sources":["../../../src/support/components/conversation-button-link.tsx"],"sourcesContent":["import { type Conversation, ConversationStatus } from \"@cossistant/types\";\nimport type React from \"react\";\nimport { useConversationPreview } from \"../../hooks/use-conversation-preview\";\nimport { type SupportTextKey, useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport { Avatar } from \"./avatar\";\nimport { coButtonVariants } from \"./button\";\nimport Icon from \"./icons\";\nimport { BouncingDots } from \"./typing-indicator\";\n\nexport type ConversationButtonLinkProps = {\n\tconversation: Conversation;\n\tonClick?: () => void;\n\tclassName?: string;\n};\n\nconst STATUS_BADGE_CLASSNAMES: Record<ConversationStatus, string> = {\n\t[ConversationStatus.OPEN]: \"bg-co-success/20 text-co-success-foreground\",\n\t[ConversationStatus.RESOLVED]: \"bg-co-neutral/20 text-co-neutral-foreground\",\n\t[ConversationStatus.SPAM]: \"bg-co-warning/20 text-co-warning-foreground\",\n};\n\nconst DEFAULT_STATUS_BADGE_CLASSNAME =\n\t\"bg-co-neutral/20 text-co-neutral-foreground\";\n\nconst STATUS_TEXT_KEYS: Record<ConversationStatus, SupportTextKey> = {\n\t[ConversationStatus.OPEN]: \"component.conversationButtonLink.status.open\",\n\t[ConversationStatus.RESOLVED]:\n\t\t\"component.conversationButtonLink.status.resolved\",\n\t[ConversationStatus.SPAM]: \"component.conversationButtonLink.status.spam\",\n};\n\n/**\n * Renders a navigable preview card for a conversation including assigned agent\n * details, last message snippets and typing indicators.\n */\nexport function ConversationButtonLink({\n\tconversation,\n\tonClick,\n\tclassName,\n}: ConversationButtonLinkProps): React.ReactElement | null {\n\tconst preview = useConversationPreview({ conversation });\n\tconst text = useSupportText();\n\tconst { lastMessage, assignedAgent, typing } = preview;\n\n\tconst statusBadgeClassName = conversation.deletedAt\n\t\t? STATUS_BADGE_CLASSNAMES[ConversationStatus.RESOLVED]\n\t\t: (STATUS_BADGE_CLASSNAMES[conversation.status] ??\n\t\t\tDEFAULT_STATUS_BADGE_CLASSNAME);\n\n\tconst statusTextKey = conversation.deletedAt\n\t\t? STATUS_TEXT_KEYS[ConversationStatus.RESOLVED]\n\t\t: STATUS_TEXT_KEYS[conversation.status];\n\n\tconst statusText = conversation.deletedAt\n\t\t? text(\"component.conversationButtonLink.status.closed\")\n\t\t: statusTextKey\n\t\t\t? text(statusTextKey)\n\t\t\t: text(\"common.fallbacks.unknown\");\n\n\tconst lastMessageContent = lastMessage ? (\n\t\tlastMessage.isFromVisitor ? (\n\t\t\t<span>\n\t\t\t\t{text(\"component.conversationButtonLink.lastMessage.visitor\", {\n\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t})}\n\t\t\t</span>\n\t\t) : (\n\t\t\t<span>\n\t\t\t\t{text(\"component.conversationButtonLink.lastMessage.agent\", {\n\t\t\t\t\tname: lastMessage.senderName || text(\"common.fallbacks.supportTeam\"),\n\t\t\t\t\ttime: lastMessage.time,\n\t\t\t\t})}\n\t\t\t</span>\n\t\t)\n\t) : undefined;\n\n\treturn (\n\t\t<button\n\t\t\tclassName={cn(\n\t\t\t\tcoButtonVariants({\n\t\t\t\t\tvariant: \"secondary\",\n\t\t\t\t\tsize: \"large\",\n\t\t\t\t}),\n\t\t\t\t\"group/btn relative gap-3 border-0 border-co-border/50 border-b text-left transition-colors first-of-type:rounded-t last-of-type:rounded-b last-of-type:border-b-0\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tonClick={onClick}\n\t\t\ttype=\"button\"\n\t\t>\n\t\t\t<Avatar\n\t\t\t\tclassName=\"flex size-8 flex-shrink-0 items-center justify-center overflow-clip rounded-full bg-co-background-200 dark:bg-co-background-500\"\n\t\t\t\timage={assignedAgent?.image}\n\t\t\t\tname={assignedAgent?.name ?? text(\"common.fallbacks.supportTeam\")}\n\t\t\t/>\n\n\t\t\t<div className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n\t\t\t\t{typing.isTyping ? (\n\t\t\t\t\t<BouncingDots />\n\t\t\t\t) : (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"flex max-w-[90%] items-center justify-between gap-2\">\n\t\t\t\t\t\t\t<h3 className=\"truncate font-medium text-co-primary text-sm\">\n\t\t\t\t\t\t\t\t{preview.title}\n\t\t\t\t\t\t\t</h3>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t{lastMessageContent ? (\n\t\t\t\t\t\t\t<p className=\"text-co-primary/60 text-xs\">{lastMessageContent}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"mr-6 inline-flex items-center rounded px-2 py-0.5 font-medium text-[9px] uppercase\",\n\t\t\t\t\tstatusBadgeClassName\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{statusText}\n\t\t\t</div>\n\n\t\t\t<Icon\n\t\t\t\tclassName=\"-translate-y-1/2 absolute top-1/2 right-4 size-3 text-co-primary/60 transition-transform duration-200 group-hover/btn:translate-x-0.5 group-hover/btn:text-co-primary\"\n\t\t\t\tname=\"arrow-right\"\n\t\t\t\tvariant=\"default\"\n\t\t\t/>\n\t\t</button>\n\t);\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAMA,0BAA8D;EAClE,mBAAmB,OAAO;EAC1B,mBAAmB,WAAW;EAC9B,mBAAmB,OAAO;CAC3B;AAED,MAAM,iCACL;AAED,MAAMC,mBAA+D;EACnE,mBAAmB,OAAO;EAC1B,mBAAmB,WACnB;EACA,mBAAmB,OAAO;CAC3B;;;;;AAMD,SAAgB,uBAAuB,EACtC,cACA,SACA,aAC0D;CAC1D,MAAM,UAAU,uBAAuB,EAAE,cAAc,CAAC;CACxD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,EAAE,aAAa,eAAe,WAAW;CAE/C,MAAM,uBAAuB,aAAa,YACvC,wBAAwB,mBAAmB,YAC1C,wBAAwB,aAAa,WACvC;CAEF,MAAM,gBAAgB,aAAa,YAChC,iBAAiB,mBAAmB,YACpC,iBAAiB,aAAa;CAEjC,MAAM,aAAa,aAAa,YAC7B,KAAK,iDAAiD,GACtD,gBACC,KAAK,cAAc,GACnB,KAAK,2BAA2B;CAEpC,MAAM,qBAAqB,cAC1B,YAAY,gBACX,oBAAC,oBACC,KAAK,wDAAwD,EAC7D,MAAM,YAAY,MAClB,CAAC,GACI,GAEP,oBAAC,oBACC,KAAK,sDAAsD;EAC3D,MAAM,YAAY,cAAc,KAAK,+BAA+B;EACpE,MAAM,YAAY;EAClB,CAAC,GACI,GAEL;AAEJ,QACC,qBAAC;EACA,WAAW,GACV,iBAAiB;GAChB,SAAS;GACT,MAAM;GACN,CAAC,EACF,qKACA,UACA;EACQ;EACT,MAAK;;GAEL,oBAAC;IACA,WAAU;IACV,OAAO,eAAe;IACtB,MAAM,eAAe,QAAQ,KAAK,+BAA+B;KAChE;GAEF,oBAAC;IAAI,WAAU;cACb,OAAO,WACP,oBAAC,iBAAe,GAEhB,4CACC,oBAAC;KAAI,WAAU;eACd,oBAAC;MAAG,WAAU;gBACZ,QAAQ;OACL;MACA,EACL,qBACA,oBAAC;KAAE,WAAU;eAA8B;MAAuB,GAC/D,QACF;KAEC;GAEN,oBAAC;IACA,WAAW,GACV,sFACA,qBACA;cAEA;KACI;GAEN,oBAACC;IACA,WAAU;IACV,MAAK;IACL,SAAQ;KACP;;GACM"}

package/support/components/conversation-event.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-event.d.ts","names":[],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,sBAAA;SACJ;EADI,iBAAA,EAEQ,gBAFc,EAAA;EAAA,oBAAA,EAGX,mBAHW,EAAA;WAC1B,CAAA,EAAA,MAAA;;AAEe,cAIV,iBAJU,EAIS,KAAA,CAAM,EAJf,CAIkB,sBAJlB,CAAA"}
+{"version":3,"file":"conversation-event.d.ts","names":[],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,sBAAA;SACJ;EADI,iBAAA,EAEQ,gBAFc,EAAA;EAC1B,oBAAA,EAEe,mBAFf,EAAA;EACY,SAAA,CAAA,EAAA,MAAA;CACG;AAAmB,cAI7B,iBAJ6B,EAIV,KAAA,CAAM,EAJI,CAID,sBAJC,CAAA"}

package/support/components/conversation-event.js

@@ -24,6 +24,9 @@ const ConversationEvent = ({ event, availableAIAgents, createdAt, availableHuman
 			case "tag_removed": return text("component.conversationEvent.tagRemoved", { actorName });
 			case "resolved": return text("component.conversationEvent.resolved", { actorName });
 			case "reopened": return text("component.conversationEvent.reopened", { actorName });
+			case "visitor_blocked": return text("component.conversationEvent.visitorBlocked", { actorName });
+			case "visitor_unblocked": return text("component.conversationEvent.visitorUnblocked", { actorName });
+			case "visitor_identified": return text("component.conversationEvent.visitorIdentified", { actorName });
 			default: return text("component.conversationEvent.default", { actorName });
 		}
 	};
@@ -70,6 +73,7 @@ const ConversationEvent = ({ event, availableAIAgents, createdAt, availableHuman
 		})
 	});
 };
+ConversationEvent.displayName = "ConversationEvent";
 
 //#endregion
 export { ConversationEvent };

package/support/components/conversation-event.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-event.js","names":["ConversationEvent: React.FC<ConversationEventProps>"],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":["import type {\n\tAvailableAIAgent,\n\tAvailableHumanAgent,\n\tTimelinePartEvent,\n} from \"@cossistant/types\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useSupportText } from \"../text\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\nexport type ConversationEventProps = {\n\tevent: TimelinePartEvent;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcreatedAt?: string;\n};\n\nexport const ConversationEvent: React.FC<ConversationEventProps> = ({\n\tevent,\n\tavailableAIAgents,\n\tcreatedAt,\n\tavailableHumanAgents,\n}) => {\n\tconst text = useSupportText();\n\tconst isAI = event.actorAiAgentId !== null;\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === event.actorUserId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === event.actorAiAgentId\n\t);\n\n\t// Get the actor name\n\tconst actorName = isAI\n\t\t? aiAgent?.name || text(\"common.fallbacks.cossistant\")\n\t\t: humanAgent?.name || text(\"common.fallbacks.someone\");\n\n\t// Convert event type to plain English\n\tconst getEventText = () => {\n\t\tswitch (event.eventType) {\n\t\t\tcase \"assigned\":\n\t\t\t\treturn text(\"component.conversationEvent.assigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"unassigned\":\n\t\t\t\treturn text(\"component.conversationEvent.unassigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_requested\":\n\t\t\t\treturn text(\"component.conversationEvent.participantRequested\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_joined\":\n\t\t\t\treturn text(\"component.conversationEvent.participantJoined\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_left\":\n\t\t\t\treturn text(\"component.conversationEvent.participantLeft\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"status_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.statusChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"priority_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.priorityChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_added\":\n\t\t\t\treturn text(\"component.conversationEvent.tagAdded\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_removed\":\n\t\t\t\treturn text(\"component.conversationEvent.tagRemoved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"resolved\":\n\t\t\t\treturn text(\"component.conversationEvent.resolved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"reopened\":\n\t\t\t\treturn text(\"component.conversationEvent.reopened\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tdefault:\n\t\t\t\treturn text(\"component.conversationEvent.default\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\tclassName=\"flex items-center justify-center py-4\"\n\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\n\t\t\ttransition={{ duration: 0.3, ease: \"easeOut\" }}\n\t\t>\n\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground text-xs\">\n\t\t\t\t<div className=\"flex flex-col justify-end\">\n\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t<div className=\"flex size-5 items-center justify-center rounded-full bg-primary/10\">\n\t\t\t\t\t\t\t<CossistantLogo className=\"h-3 w-3 text-primary\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\tclassName=\"size-5 flex-shrink-0 overflow-clip rounded-full\"\n\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\tname={humanAgent?.name || text(\"common.fallbacks.someone\")}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<span className=\"px-2\">{getEventText()}</span>\n\t\t\t\t{createdAt && (\n\t\t\t\t\t<time className=\"text-[10px]\">\n\t\t\t\t\t\t{new Date(createdAt).toLocaleTimeString([], {\n\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t</time>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n};\n"],"mappings":";;;;;;;AAkBA,MAAaA,qBAAuD,EACnE,OACA,mBACA,WACA,2BACK;CACL,MAAM,OAAO,gBAAgB;CAC7B,MAAM,OAAO,MAAM,mBAAmB;CACtC,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,MAAM,YAC9B;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,MAAM,eAC9B;CAGD,MAAM,YAAY,OACf,SAAS,QAAQ,KAAK,8BAA8B,GACpD,YAAY,QAAQ,KAAK,2BAA2B;CAGvD,MAAM,qBAAqB;AAC1B,UAAQ,MAAM,WAAd;GACC,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,aACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,wBACJ,QAAO,KAAK,oDAAoD,EAC/D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,iBACJ,QAAO,KAAK,6CAA6C,EACxD,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,YACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,cACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,QACC,QAAO,KAAK,uCAAuC,EAClD,WACA,CAAC;;;AAIL,QACC,oBAAC,OAAO;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;YAE9C,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAI,WAAU;eACb,OACA,oBAAC;MAAI,WAAU;gBACd,oBAAC,kBAAe,WAAU,yBAAyB;OAC9C,GAEN,oBAAC;MACA,WAAU;MACV,OAAO,YAAY;MACnB,MAAM,YAAY,QAAQ,KAAK,2BAA2B;OACzD;MAEE;IACN,oBAAC;KAAK,WAAU;eAAQ,cAAc;MAAQ;IAC7C,aACA,oBAAC;KAAK,WAAU;eACd,IAAI,KAAK,UAAU,CAAC,mBAAmB,EAAE,EAAE;MAC3C,MAAM;MACN,QAAQ;MACR,CAAC;MACI;;IAEH;GACM"}
+{"version":3,"file":"conversation-event.js","names":["ConversationEvent: React.FC<ConversationEventProps>"],"sources":["../../../src/support/components/conversation-event.tsx"],"sourcesContent":["import type {\n\tAvailableAIAgent,\n\tAvailableHumanAgent,\n\tTimelinePartEvent,\n} from \"@cossistant/types\";\nimport { motion } from \"motion/react\";\nimport type React from \"react\";\nimport { useSupportText } from \"../text\";\nimport { Avatar } from \"./avatar\";\nimport { CossistantLogo } from \"./cossistant-branding\";\n\nexport type ConversationEventProps = {\n\tevent: TimelinePartEvent;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcreatedAt?: string;\n};\n\nexport const ConversationEvent: React.FC<ConversationEventProps> = ({\n\tevent,\n\tavailableAIAgents,\n\tcreatedAt,\n\tavailableHumanAgents,\n}) => {\n\tconst text = useSupportText();\n\tconst isAI = event.actorAiAgentId !== null;\n\tconst humanAgent = availableHumanAgents.find(\n\t\t(agent) => agent.id === event.actorUserId\n\t);\n\tconst aiAgent = availableAIAgents.find(\n\t\t(agent) => agent.id === event.actorAiAgentId\n\t);\n\n\t// Get the actor name\n\tconst actorName = isAI\n\t\t? aiAgent?.name || text(\"common.fallbacks.cossistant\")\n\t\t: humanAgent?.name || text(\"common.fallbacks.someone\");\n\n\t// Convert event type to plain English\n\tconst getEventText = () => {\n\t\tswitch (event.eventType) {\n\t\t\tcase \"assigned\":\n\t\t\t\treturn text(\"component.conversationEvent.assigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"unassigned\":\n\t\t\t\treturn text(\"component.conversationEvent.unassigned\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_requested\":\n\t\t\t\treturn text(\"component.conversationEvent.participantRequested\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_joined\":\n\t\t\t\treturn text(\"component.conversationEvent.participantJoined\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"participant_left\":\n\t\t\t\treturn text(\"component.conversationEvent.participantLeft\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"status_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.statusChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"priority_changed\":\n\t\t\t\treturn text(\"component.conversationEvent.priorityChanged\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_added\":\n\t\t\t\treturn text(\"component.conversationEvent.tagAdded\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"tag_removed\":\n\t\t\t\treturn text(\"component.conversationEvent.tagRemoved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"resolved\":\n\t\t\t\treturn text(\"component.conversationEvent.resolved\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"reopened\":\n\t\t\t\treturn text(\"component.conversationEvent.reopened\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_blocked\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorBlocked\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_unblocked\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorUnblocked\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tcase \"visitor_identified\":\n\t\t\t\treturn text(\"component.conversationEvent.visitorIdentified\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t\tdefault:\n\t\t\t\treturn text(\"component.conversationEvent.default\", {\n\t\t\t\t\tactorName,\n\t\t\t\t});\n\t\t}\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\tclassName=\"flex items-center justify-center py-4\"\n\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\n\t\t\ttransition={{ duration: 0.3, ease: \"easeOut\" }}\n\t\t>\n\t\t\t<div className=\"flex items-center gap-2 text-muted-foreground text-xs\">\n\t\t\t\t<div className=\"flex flex-col justify-end\">\n\t\t\t\t\t{isAI ? (\n\t\t\t\t\t\t<div className=\"flex size-5 items-center justify-center rounded-full bg-primary/10\">\n\t\t\t\t\t\t\t<CossistantLogo className=\"h-3 w-3 text-primary\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Avatar\n\t\t\t\t\t\t\tclassName=\"size-5 flex-shrink-0 overflow-clip rounded-full\"\n\t\t\t\t\t\t\timage={humanAgent?.image}\n\t\t\t\t\t\t\tname={humanAgent?.name || text(\"common.fallbacks.someone\")}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t\t<span className=\"px-2\">{getEventText()}</span>\n\t\t\t\t{createdAt && (\n\t\t\t\t\t<time className=\"text-[10px]\">\n\t\t\t\t\t\t{new Date(createdAt).toLocaleTimeString([], {\n\t\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t\t})}\n\t\t\t\t\t</time>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n};\n\nConversationEvent.displayName = \"ConversationEvent\";\n"],"mappings":";;;;;;;AAkBA,MAAaA,qBAAuD,EACnE,OACA,mBACA,WACA,2BACK;CACL,MAAM,OAAO,gBAAgB;CAC7B,MAAM,OAAO,MAAM,mBAAmB;CACtC,MAAM,aAAa,qBAAqB,MACtC,UAAU,MAAM,OAAO,MAAM,YAC9B;CACD,MAAM,UAAU,kBAAkB,MAChC,UAAU,MAAM,OAAO,MAAM,eAC9B;CAGD,MAAM,YAAY,OACf,SAAS,QAAQ,KAAK,8BAA8B,GACpD,YAAY,QAAQ,KAAK,2BAA2B;CAGvD,MAAM,qBAAqB;AAC1B,UAAQ,MAAM,WAAd;GACC,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,aACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,wBACJ,QAAO,KAAK,oDAAoD,EAC/D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,iBACJ,QAAO,KAAK,6CAA6C,EACxD,WACA,CAAC;GACH,KAAK,mBACJ,QAAO,KAAK,+CAA+C,EAC1D,WACA,CAAC;GACH,KAAK,YACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,cACJ,QAAO,KAAK,0CAA0C,EACrD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,WACJ,QAAO,KAAK,wCAAwC,EACnD,WACA,CAAC;GACH,KAAK,kBACJ,QAAO,KAAK,8CAA8C,EACzD,WACA,CAAC;GACH,KAAK,oBACJ,QAAO,KAAK,gDAAgD,EAC3D,WACA,CAAC;GACH,KAAK,qBACJ,QAAO,KAAK,iDAAiD,EAC5D,WACA,CAAC;GACH,QACC,QAAO,KAAK,uCAAuC,EAClD,WACA,CAAC;;;AAIL,QACC,oBAAC,OAAO;EACP,SAAS;GAAE,SAAS;GAAG,OAAO;GAAG;EACjC,WAAU;EACV,SAAS;GAAE,SAAS;GAAG,OAAO;GAAM;EACpC,YAAY;GAAE,UAAU;GAAK,MAAM;GAAW;YAE9C,qBAAC;GAAI,WAAU;;IACd,oBAAC;KAAI,WAAU;eACb,OACA,oBAAC;MAAI,WAAU;gBACd,oBAAC,kBAAe,WAAU,yBAAyB;OAC9C,GAEN,oBAAC;MACA,WAAU;MACV,OAAO,YAAY;MACnB,MAAM,YAAY,QAAQ,KAAK,2BAA2B;OACzD;MAEE;IACN,oBAAC;KAAK,WAAU;eAAQ,cAAc;MAAQ;IAC7C,aACA,oBAAC;KAAK,WAAU;eACd,IAAI,KAAK,UAAU,CAAC,mBAAmB,EAAE,EAAE;MAC3C,MAAM;MACN,QAAQ;MACR,CAAC;MACI;;IAEH;GACM;;AAIf,kBAAkB,cAAc"}

package/support/components/conversation-timeline.d.ts

@@ -3,6 +3,14 @@ import React from "react";
 import { AvailableAIAgent, AvailableHumanAgent } from "@cossistant/types";
 
 //#region src/support/components/conversation-timeline.d.ts
+type ConversationTimelineToolProps = {
+  item: TimelineItem;
+  conversationId: string;
+};
+type ConversationTimelineToolDefinition = {
+  component: React.ComponentType<ConversationTimelineToolProps>;
+};
+type ConversationTimelineTools = Record<string, ConversationTimelineToolDefinition>;
 type ConversationTimelineProps = {
   conversationId: string;
   items: TimelineItem[];
@@ -10,8 +18,9 @@ type ConversationTimelineProps = {
   availableAIAgents: AvailableAIAgent[];
   availableHumanAgents: AvailableHumanAgent[];
   currentVisitorId?: string;
+  tools?: ConversationTimelineTools;
 };
 declare const ConversationTimelineList: React.FC<ConversationTimelineProps>;
 //#endregion
-export { ConversationTimelineList, ConversationTimelineProps };
+export { ConversationTimelineList, ConversationTimelineProps, ConversationTimelineToolDefinition, ConversationTimelineToolProps, ConversationTimelineTools };
 //# sourceMappingURL=conversation-timeline.d.ts.map

package/support/components/conversation-timeline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.d.ts","names":[],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":[],"mappings":";;;;;KAoCY,yBAAA;;EAAA,KAAA,EAEJ,YAFI,EAAA;EAAyB,SAAA,CAAA,EAAA,MAAA;mBAE7B,EAEY,gBAFZ,EAAA;sBAEY,EACG,mBADH,EAAA;kBACG,CAAA,EAAA,MAAA;CAAmB;AAI7B,cAAA,wBAsIZ,EAtIsC,KAAA,CAAM,EAsI5C,CAtI+C,yBAsI/C,CAAA"}
+{"version":3,"file":"conversation-timeline.d.ts","names":[],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":[],"mappings":";;;;;KAiCY,6BAAA;QACL;EADK,cAAA,EAAA,MAAA;AAKZ,CAAA;AAIY,KAJA,kCAAA,GAMX;EAGW,SAAA,EARA,KAAA,CAAM,aAQmB,CARL,6BAQK,CAAA;CAE7B;AAEY,KATR,yBAAA,GAA4B,MASpB,CAAA,MAAA,EAPnB,kCAOmB,CAAA;AACG,KALX,yBAAA,GAKW;EAEd,cAAA,EAAA,MAAA;EAAyB,KAAA,EAL1B,YAK0B,EAAA;EAGrB,SAAA,CAAA,EAAA,MAAA;qBANO;wBACG;;UAEd;;cAGI,0BAA0B,KAAA,CAAM,GAAG"}

package/support/components/conversation-timeline.js

@@ -1,51 +1,48 @@
 import { cn } from "../utils/index.js";
 import { TypingIndicator } from "./typing-indicator.js";
 import { ConversationTimeline, ConversationTimelineContainer } from "../../primitives/conversation-timeline.js";
-import { useGroupedMessages } from "../../hooks/private/use-grouped-messages.js";
+import { useConversationTimeline } from "../../hooks/use-conversation-timeline.js";
 import { ConversationEvent } from "./conversation-event.js";
 import { TimelineMessageGroup } from "./timeline-message-group.js";
-import { useDebouncedConversationSeen } from "../../hooks/use-conversation-seen.js";
-import { useConversationTyping } from "../../hooks/use-conversation-typing.js";
-import { useMemo } from "react";
-import { SenderType } from "@cossistant/types";
+import { useCallback, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence } from "motion/react";
 
 //#region src/support/components/conversation-timeline.tsx
 function extractEventPart(item) {
 	if (item.type !== "event") return null;
 	return item.parts.find((part) => part.type === "event") || null;
 }
-const ConversationTimelineList = ({ conversationId, items: timelineItems, className, availableAIAgents = [], availableHumanAgents = [], currentVisitorId }) => {
-	const seenData = useDebouncedConversationSeen(conversationId);
-	const typingEntries = useConversationTyping(conversationId, { excludeVisitorId: currentVisitorId ?? null });
-	const { items, getMessageSeenBy } = useGroupedMessages({
+const EMPTY_SEEN_BY_IDS = Object.freeze([]);
+const EMPTY_SEEN_BY_NAMES = Object.freeze([]);
+const ConversationTimelineList = ({ conversationId, items: timelineItems, className, availableAIAgents = [], availableHumanAgents = [], currentVisitorId, tools }) => {
+	const timeline = useConversationTimeline({
+		conversationId,
 		items: timelineItems,
-		seenData,
-		currentViewerId: currentVisitorId,
-		viewerType: SenderType.VISITOR
+		currentVisitorId
 	});
-	const lastVisitorMessageGroupIndex = useMemo(() => {
-		for (let i = items.length - 1; i >= 0; i--) {
-			const item = items[i];
-			if (!item) continue;
-			if (item.type === "message_group") {
-				if ((item.items?.[0])?.visitorId === currentVisitorId) return i;
-			}
+	const typingIndicatorParticipants = useMemo(() => timeline.typingParticipants.map((participant) => ({
+		id: participant.id,
+		type: participant.type
+	})), [timeline.typingParticipants]);
+	const seenNameLookup = useMemo(() => {
+		const map = /* @__PURE__ */ new Map();
+		for (const agent of availableHumanAgents) if (agent.name) map.set(agent.id, agent.name);
+		for (const agent of availableAIAgents) if (agent.name) map.set(agent.id, agent.name);
+		return map;
+	}, [availableHumanAgents, availableAIAgents]);
+	const getSeenByNames = useCallback((ids = EMPTY_SEEN_BY_IDS) => {
+		if (ids.length === 0 || seenNameLookup.size === 0) return EMPTY_SEEN_BY_NAMES;
+		const uniqueNames = /* @__PURE__ */ new Set();
+		const names = [];
+		for (const id of ids) {
+			const name = seenNameLookup.get(id);
+			if (!name || uniqueNames.has(name)) continue;
+			uniqueNames.add(name);
+			names.push(name);
 		}
-		return -1;
-	}, [items, currentVisitorId]);
-	const typingParticipants = useMemo(() => typingEntries.map((entry) => {
-		if (entry.actorType === "user") return {
-			id: entry.actorId,
-			type: "team_member"
-		};
-		if (entry.actorType === "ai_agent") return {
-			id: entry.actorId,
-			type: "ai"
-		};
-		return null;
-	}).filter((participant) => participant !== null), [typingEntries]);
+		if (names.length === 0) return EMPTY_SEEN_BY_NAMES;
+		return Object.freeze(names);
+	}, [seenNameLookup]);
 	return /* @__PURE__ */ jsx(ConversationTimeline, {
 		autoScroll: true,
 		className: cn("overflow-y-auto scroll-smooth px-3 py-6", "scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent", "h-full w-full", className),
@@ -53,37 +50,46 @@ const ConversationTimelineList = ({ conversationId, items: timelineItems, classN
 		items: timelineItems,
 		children: /* @__PURE__ */ jsxs(ConversationTimelineContainer, {
 			className: "flex min-h-full w-full flex-col gap-3",
-			children: [/* @__PURE__ */ jsx(AnimatePresence, {
-				initial: false,
-				mode: "popLayout",
-				children: items.map((item, index) => {
-					if (item.type === "timeline_event") {
-						const eventPart = extractEventPart(item.item);
-						if (!eventPart) return null;
-						return /* @__PURE__ */ jsx(ConversationEvent, {
-							availableAIAgents,
-							availableHumanAgents,
-							createdAt: item.item.createdAt,
-							event: eventPart
-						}, item.item.id || `timeline-event-${index}`);
-					}
-					const seenByIds = index === lastVisitorMessageGroupIndex && item.lastMessageId ? getMessageSeenBy(item.lastMessageId) : [];
-					const groupKey = item.items?.[0]?.id || `group-${index}`;
-					return /* @__PURE__ */ jsx(TimelineMessageGroup, {
+			children: [timeline.groupedMessages.items.map((item, index) => {
+				if (item.type === "timeline_event") {
+					const eventPart = extractEventPart(item.item);
+					if (!eventPart) return null;
+					return /* @__PURE__ */ jsx(ConversationEvent, {
 						availableAIAgents,
 						availableHumanAgents,
-						currentVisitorId,
-						items: item.items || [],
-						seenByIds
-					}, groupKey);
-				})
+						createdAt: item.item.createdAt,
+						event: eventPart
+					}, item.item.id ?? `timeline-event-${item.item.createdAt}`);
+				}
+				if (item.type === "timeline_tool") {
+					const toolName = item.tool ?? item.item.tool ?? item.item.type;
+					const toolDefinition = toolName ? tools?.[toolName] : void 0;
+					if (!toolDefinition) return null;
+					const ToolComponent = toolDefinition.component;
+					const toolKey = item.item.id ?? `${toolName}-${item.item.createdAt}-${index}`;
+					return /* @__PURE__ */ jsx(ToolComponent, {
+						conversationId,
+						item: item.item
+					}, toolKey);
+				}
+				const seenByIds = index === timeline.lastVisitorMessageGroupIndex && item.lastMessageId ? timeline.groupedMessages.getMessageSeenBy(item.lastMessageId) : EMPTY_SEEN_BY_IDS;
+				const seenByNames = seenByIds.length > 0 ? getSeenByNames(seenByIds) : EMPTY_SEEN_BY_NAMES;
+				const groupKey = item.lastMessageId ?? item.items?.[0]?.id ?? `group-${item.items?.[0]?.createdAt ?? index}`;
+				return /* @__PURE__ */ jsx(TimelineMessageGroup, {
+					availableAIAgents,
+					availableHumanAgents,
+					currentVisitorId,
+					items: item.items || [],
+					seenByIds,
+					seenByNames
+				}, groupKey);
 			}), /* @__PURE__ */ jsx("div", {
 				className: "h-6 w-full",
-				children: typingParticipants.length > 0 ? /* @__PURE__ */ jsx(TypingIndicator, {
+				children: typingIndicatorParticipants.length > 0 ? /* @__PURE__ */ jsx(TypingIndicator, {
 					availableAIAgents,
 					availableHumanAgents,
 					className: "mt-2",
-					participants: typingParticipants
+					participants: typingIndicatorParticipants
 				}) : null
 			})]
 		})

package/support/components/conversation-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation-timeline.js","names":["ConversationTimelineList: React.FC<ConversationTimelineProps>","PrimitiveConversationTimeline","ConversationEventComponent"],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport { SenderType } from \"@cossistant/types\";\nimport type {\n\tTimelineItem,\n\tTimelinePartEvent,\n} from \"@cossistant/types/api/timeline-item\";\nimport { AnimatePresence } from \"motion/react\";\nimport type React from \"react\";\nimport { useMemo } from \"react\";\nimport {\n\tuseConversationTyping,\n\tuseDebouncedConversationSeen,\n} from \"../../hooks\";\nimport { useGroupedMessages } from \"../../hooks/private/use-grouped-messages\";\nimport {\n\tConversationTimelineContainer,\n\tConversationTimeline as PrimitiveConversationTimeline,\n} from \"../../primitives/conversation-timeline\";\nimport { cn } from \"../utils\";\nimport { ConversationEvent as ConversationEventComponent } from \"./conversation-event\";\nimport { TimelineMessageGroup } from \"./timeline-message-group\";\nimport { TypingIndicator, type TypingParticipant } from \"./typing-indicator\";\n\n// Helper to extract event part from timeline item\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\nexport type ConversationTimelineProps = {\n\tconversationId: string;\n\titems: TimelineItem[];\n\tclassName?: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n};\n\nexport const ConversationTimelineList: React.FC<ConversationTimelineProps> = ({\n\tconversationId,\n\titems: timelineItems,\n\tclassName,\n\tavailableAIAgents = [],\n\tavailableHumanAgents = [],\n\tcurrentVisitorId,\n}) => {\n\tconst seenData = useDebouncedConversationSeen(conversationId);\n\tconst typingEntries = useConversationTyping(conversationId, {\n\t\texcludeVisitorId: currentVisitorId ?? null,\n\t});\n\n\tconst { items, getMessageSeenBy } = useGroupedMessages({\n\t\titems: timelineItems,\n\t\tseenData,\n\t\tcurrentViewerId: currentVisitorId,\n\t\tviewerType: SenderType.VISITOR,\n\t});\n\n\t// Find the last message group sent by the current visitor\n\tconst lastVisitorMessageGroupIndex = useMemo(() => {\n\t\tfor (let i = items.length - 1; i >= 0; i--) {\n\t\t\tconst item = items[i];\n\t\t\tif (!item) {\n\t\t\t\tcontinue;\n\t\t\t}\n\t\t\tif (item.type === \"message_group\") {\n\t\t\t\tconst firstItem = item.items?.[0];\n\t\t\t\tif (firstItem?.visitorId === currentVisitorId) {\n\t\t\t\t\treturn i;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\treturn -1;\n\t}, [items, currentVisitorId]);\n\n\tconst typingParticipants = useMemo(\n\t\t() =>\n\t\t\ttypingEntries\n\t\t\t\t.map((entry): TypingParticipant | null => {\n\t\t\t\t\tif (entry.actorType === \"user\") {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: entry.actorId,\n\t\t\t\t\t\t\ttype: \"team_member\" as const,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\tif (entry.actorType === \"ai_agent\") {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\tid: entry.actorId,\n\t\t\t\t\t\t\ttype: \"ai\" as const,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\treturn null;\n\t\t\t\t})\n\t\t\t\t.filter(\n\t\t\t\t\t(participant): participant is TypingParticipant =>\n\t\t\t\t\t\tparticipant !== null\n\t\t\t\t),\n\t\t[typingEntries]\n\t);\n\n\treturn (\n\t\t<PrimitiveConversationTimeline\n\t\t\tautoScroll={true}\n\t\t\tclassName={cn(\n\t\t\t\t\"overflow-y-auto scroll-smooth px-3 py-6\",\n\t\t\t\t\"scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent\",\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tid=\"conversation-timeline\"\n\t\t\titems={timelineItems}\n\t\t>\n\t\t\t<ConversationTimelineContainer className=\"flex min-h-full w-full flex-col gap-3\">\n\t\t\t\t<AnimatePresence initial={false} mode=\"popLayout\">\n\t\t\t\t\t{items.map((item, index) => {\n\t\t\t\t\t\tif (item.type === \"timeline_event\") {\n\t\t\t\t\t\t\t// Extract event data from parts\n\t\t\t\t\t\t\tconst eventPart = extractEventPart(item.item);\n\n\t\t\t\t\t\t\t// Only render if we have valid event data\n\t\t\t\t\t\t\tif (!eventPart) {\n\t\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<ConversationEventComponent\n\t\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\t\tcreatedAt={item.item.createdAt}\n\t\t\t\t\t\t\t\t\tevent={eventPart}\n\t\t\t\t\t\t\t\t\tkey={item.item.id || `timeline-event-${index}`}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t// Only show seen indicator on the LAST message group sent by the visitor\n\t\t\t\t\t\tconst isLastVisitorGroup = index === lastVisitorMessageGroupIndex;\n\t\t\t\t\t\tconst seenByIds =\n\t\t\t\t\t\t\tisLastVisitorGroup && item.lastMessageId\n\t\t\t\t\t\t\t\t? getMessageSeenBy(item.lastMessageId)\n\t\t\t\t\t\t\t\t: [];\n\n\t\t\t\t\t\t// Use first timeline item ID as stable key\n\t\t\t\t\t\tconst groupKey = item.items?.[0]?.id || `group-${index}`;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<TimelineMessageGroup\n\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\tcurrentVisitorId={currentVisitorId}\n\t\t\t\t\t\t\t\titems={item.items || []}\n\t\t\t\t\t\t\t\tkey={groupKey}\n\t\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</AnimatePresence>\n\t\t\t\t<div className=\"h-6 w-full\">\n\t\t\t\t\t{typingParticipants.length > 0 ? (\n\t\t\t\t\t\t<TypingIndicator\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tclassName=\"mt-2\"\n\t\t\t\t\t\t\tparticipants={typingParticipants}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</ConversationTimelineContainer>\n\t\t</PrimitiveConversationTimeline>\n\t);\n};\n"],"mappings":";;;;;;;;;;;;;;AAwBA,SAAS,iBAAiB,MAA8C;AACvE,KAAI,KAAK,SAAS,QACjB,QAAO;AAOR,QAJkB,KAAK,MAAM,MAC3B,SAAoC,KAAK,SAAS,QACnD,IAEmB;;AAYrB,MAAaA,4BAAiE,EAC7E,gBACA,OAAO,eACP,WACA,oBAAoB,EAAE,EACtB,uBAAuB,EAAE,EACzB,uBACK;CACL,MAAM,WAAW,6BAA6B,eAAe;CAC7D,MAAM,gBAAgB,sBAAsB,gBAAgB,EAC3D,kBAAkB,oBAAoB,MACtC,CAAC;CAEF,MAAM,EAAE,OAAO,qBAAqB,mBAAmB;EACtD,OAAO;EACP;EACA,iBAAiB;EACjB,YAAY,WAAW;EACvB,CAAC;CAGF,MAAM,+BAA+B,cAAc;AAClD,OAAK,IAAI,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;GAC3C,MAAM,OAAO,MAAM;AACnB,OAAI,CAAC,KACJ;AAED,OAAI,KAAK,SAAS,iBAEjB;SADkB,KAAK,QAAQ,KAChB,cAAc,iBAC5B,QAAO;;;AAIV,SAAO;IACL,CAAC,OAAO,iBAAiB,CAAC;CAE7B,MAAM,qBAAqB,cAEzB,cACE,KAAK,UAAoC;AACzC,MAAI,MAAM,cAAc,OACvB,QAAO;GACN,IAAI,MAAM;GACV,MAAM;GACN;AAGF,MAAI,MAAM,cAAc,WACvB,QAAO;GACN,IAAI,MAAM;GACV,MAAM;GACN;AAGF,SAAO;GACN,CACD,QACC,gBACA,gBAAgB,KACjB,EACH,CAAC,cAAc,CACf;AAED,QACC,oBAACC;EACA,YAAY;EACZ,WAAW,GACV,2CACA,gFACA,iBACA,UACA;EACD,IAAG;EACH,OAAO;YAEP,qBAAC;GAA8B,WAAU;cACxC,oBAAC;IAAgB,SAAS;IAAO,MAAK;cACpC,MAAM,KAAK,MAAM,UAAU;AAC3B,SAAI,KAAK,SAAS,kBAAkB;MAEnC,MAAM,YAAY,iBAAiB,KAAK,KAAK;AAG7C,UAAI,CAAC,UACJ,QAAO;AAGR,aACC,oBAACC;OACmB;OACG;OACtB,WAAW,KAAK,KAAK;OACrB,OAAO;SACF,KAAK,KAAK,MAAM,kBAAkB,QACtC;;KAMJ,MAAM,YADqB,UAAU,gCAEd,KAAK,gBACxB,iBAAiB,KAAK,cAAc,GACpC,EAAE;KAGN,MAAM,WAAW,KAAK,QAAQ,IAAI,MAAM,SAAS;AAEjD,YACC,oBAAC;MACmB;MACG;MACJ;MAClB,OAAO,KAAK,SAAS,EAAE;MAEZ;QADN,SAEJ;MAEF;KACe,EAClB,oBAAC;IAAI,WAAU;cACb,mBAAmB,SAAS,IAC5B,oBAAC;KACmB;KACG;KACtB,WAAU;KACV,cAAc;MACb,GACC;KACC;IACyB;GACD"}
+{"version":3,"file":"conversation-timeline.js","names":["EMPTY_SEEN_BY_IDS: readonly string[]","EMPTY_SEEN_BY_NAMES: readonly string[]","ConversationTimelineList: React.FC<ConversationTimelineProps>","names: string[]","PrimitiveConversationTimeline"],"sources":["../../../src/support/components/conversation-timeline.tsx"],"sourcesContent":["import type { AvailableAIAgent, AvailableHumanAgent } from \"@cossistant/types\";\nimport type {\n\tTimelineItem,\n\tTimelinePartEvent,\n} from \"@cossistant/types/api/timeline-item\";\nimport type React from \"react\";\nimport { useCallback, useMemo } from \"react\";\nimport { useConversationTimeline } from \"../../hooks/use-conversation-timeline\";\nimport {\n\tConversationTimelineContainer,\n\tConversationTimeline as PrimitiveConversationTimeline,\n} from \"../../primitives/conversation-timeline\";\nimport { cn } from \"../utils\";\nimport { ConversationEvent } from \"./conversation-event\";\nimport { TimelineMessageGroup } from \"./timeline-message-group\";\nimport { TypingIndicator, type TypingParticipant } from \"./typing-indicator\";\n\n// Helper to extract event part from timeline item\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\nconst EMPTY_SEEN_BY_IDS: readonly string[] = Object.freeze([]);\nconst EMPTY_SEEN_BY_NAMES: readonly string[] = Object.freeze([]);\n\nexport type ConversationTimelineToolProps = {\n\titem: TimelineItem;\n\tconversationId: string;\n};\n\nexport type ConversationTimelineToolDefinition = {\n\tcomponent: React.ComponentType<ConversationTimelineToolProps>;\n};\n\nexport type ConversationTimelineTools = Record<\n\tstring,\n\tConversationTimelineToolDefinition\n>;\n\nexport type ConversationTimelineProps = {\n\tconversationId: string;\n\titems: TimelineItem[];\n\tclassName?: string;\n\tavailableAIAgents: AvailableAIAgent[];\n\tavailableHumanAgents: AvailableHumanAgent[];\n\tcurrentVisitorId?: string;\n\ttools?: ConversationTimelineTools;\n};\n\nexport const ConversationTimelineList: React.FC<ConversationTimelineProps> = ({\n\tconversationId,\n\titems: timelineItems,\n\tclassName,\n\tavailableAIAgents = [],\n\tavailableHumanAgents = [],\n\tcurrentVisitorId,\n\ttools,\n}) => {\n\tconst timeline = useConversationTimeline({\n\t\tconversationId,\n\t\titems: timelineItems,\n\t\tcurrentVisitorId,\n\t});\n\n\tconst typingIndicatorParticipants = useMemo(\n\t\t() =>\n\t\t\ttimeline.typingParticipants.map<TypingParticipant>((participant) => ({\n\t\t\t\tid: participant.id,\n\t\t\t\ttype: participant.type,\n\t\t\t})),\n\t\t[timeline.typingParticipants]\n\t);\n\n\tconst seenNameLookup = useMemo(() => {\n\t\tconst map = new Map<string, string>();\n\n\t\tfor (const agent of availableHumanAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\tfor (const agent of availableAIAgents) {\n\t\t\tif (agent.name) {\n\t\t\t\tmap.set(agent.id, agent.name);\n\t\t\t}\n\t\t}\n\n\t\treturn map;\n\t}, [availableHumanAgents, availableAIAgents]);\n\n\tconst getSeenByNames = useCallback(\n\t\t(ids: readonly string[] = EMPTY_SEEN_BY_IDS): readonly string[] => {\n\t\t\tif (ids.length === 0 || seenNameLookup.size === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\tconst uniqueNames = new Set<string>();\n\t\t\tconst names: string[] = [];\n\n\t\t\tfor (const id of ids) {\n\t\t\t\tconst name = seenNameLookup.get(id);\n\t\t\t\tif (!name || uniqueNames.has(name)) {\n\t\t\t\t\tcontinue;\n\t\t\t\t}\n\n\t\t\t\tuniqueNames.add(name);\n\t\t\t\tnames.push(name);\n\t\t\t}\n\n\t\t\tif (names.length === 0) {\n\t\t\t\treturn EMPTY_SEEN_BY_NAMES;\n\t\t\t}\n\n\t\t\treturn Object.freeze(names);\n\t\t},\n\t\t[seenNameLookup]\n\t);\n\n\treturn (\n\t\t<PrimitiveConversationTimeline\n\t\t\tautoScroll={true}\n\t\t\tclassName={cn(\n\t\t\t\t\"overflow-y-auto scroll-smooth px-3 py-6\",\n\t\t\t\t\"scrollbar-thin scrollbar-thumb-co-background-300 scrollbar-track-transparent\",\n\t\t\t\t\"h-full w-full\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tid=\"conversation-timeline\"\n\t\t\titems={timelineItems}\n\t\t>\n\t\t\t<ConversationTimelineContainer className=\"flex min-h-full w-full flex-col gap-3\">\n\t\t\t\t{timeline.groupedMessages.items.map((item, index) => {\n\t\t\t\t\tif (item.type === \"timeline_event\") {\n\t\t\t\t\t\t// Extract event data from parts\n\t\t\t\t\t\tconst eventPart = extractEventPart(item.item);\n\n\t\t\t\t\t\t// Only render if we have valid event data\n\t\t\t\t\t\tif (!eventPart) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ConversationEvent\n\t\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\t\tcreatedAt={item.item.createdAt}\n\t\t\t\t\t\t\t\tevent={eventPart}\n\t\t\t\t\t\t\t\tkey={item.item.id ?? `timeline-event-${item.item.createdAt}`}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\tif (item.type === \"timeline_tool\") {\n\t\t\t\t\t\tconst toolName = item.tool ?? item.item.tool ?? item.item.type;\n\t\t\t\t\t\tconst toolDefinition = toolName ? tools?.[toolName] : undefined;\n\n\t\t\t\t\t\tif (!toolDefinition) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tconst ToolComponent = toolDefinition.component;\n\n\t\t\t\t\t\tconst toolKey =\n\t\t\t\t\t\t\titem.item.id ?? `${toolName}-${item.item.createdAt}-${index}`;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<ToolComponent\n\t\t\t\t\t\t\t\tconversationId={conversationId}\n\t\t\t\t\t\t\t\titem={item.item}\n\t\t\t\t\t\t\t\tkey={toolKey}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t}\n\n\t\t\t\t\t// Only show seen indicator on the LAST message group sent by the visitor\n\t\t\t\t\tconst isLastVisitorGroup =\n\t\t\t\t\t\tindex === timeline.lastVisitorMessageGroupIndex;\n\t\t\t\t\tconst seenByIds =\n\t\t\t\t\t\tisLastVisitorGroup && item.lastMessageId\n\t\t\t\t\t\t\t? timeline.groupedMessages.getMessageSeenBy(item.lastMessageId)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_IDS;\n\t\t\t\t\tconst seenByNames =\n\t\t\t\t\t\tseenByIds.length > 0\n\t\t\t\t\t\t\t? getSeenByNames(seenByIds)\n\t\t\t\t\t\t\t: EMPTY_SEEN_BY_NAMES;\n\n\t\t\t\t\t// Use first timeline item ID as stable key\n\t\t\t\t\tconst groupKey =\n\t\t\t\t\t\titem.lastMessageId ??\n\t\t\t\t\t\titem.items?.[0]?.id ??\n\t\t\t\t\t\t`group-${item.items?.[0]?.createdAt ?? index}`;\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<TimelineMessageGroup\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tcurrentVisitorId={currentVisitorId}\n\t\t\t\t\t\t\titems={item.items || []}\n\t\t\t\t\t\t\tkey={groupKey}\n\t\t\t\t\t\t\tseenByIds={seenByIds}\n\t\t\t\t\t\t\tseenByNames={seenByNames}\n\t\t\t\t\t\t/>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t<div className=\"h-6 w-full\">\n\t\t\t\t\t{typingIndicatorParticipants.length > 0 ? (\n\t\t\t\t\t\t<TypingIndicator\n\t\t\t\t\t\t\tavailableAIAgents={availableAIAgents}\n\t\t\t\t\t\t\tavailableHumanAgents={availableHumanAgents}\n\t\t\t\t\t\t\tclassName=\"mt-2\"\n\t\t\t\t\t\t\tparticipants={typingIndicatorParticipants}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</ConversationTimelineContainer>\n\t\t</PrimitiveConversationTimeline>\n\t);\n};\n"],"mappings":"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"}

package/support/components/cossistant-branding.d.ts

@@ -1,12 +1,15 @@
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/components/cossistant-branding.d.ts
 type CossistantLogoProps = {
   className?: string;
 };
+/**
+ * Inline SVG of the Cossistant logomark.
+ */
 declare function CossistantLogo({
   className
-}: CossistantLogoProps): react_jsx_runtime4.JSX.Element;
+}: CossistantLogoProps): ReactElement;
 //#endregion
 export { CossistantLogo };
 //# sourceMappingURL=cossistant-branding.d.ts.map

package/support/components/cossistant-branding.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cossistant-branding.d.ts","names":[],"sources":["../../../src/support/components/cossistant-branding.tsx"],"sourcesContent":[],"mappings":";;;KAEK,mBAAA;;;AAAA,iBAIW,cAAA,CAJQ;EAAA;AAAA,CAAA,EAIsB,mBAJtB,CAAA,EAIyC,kBAAA,CAAA,GAAA,CAAA,OAJzC"}
+{"version":3,"file":"cossistant-branding.d.ts","names":[],"sources":["../../../src/support/components/cossistant-branding.tsx"],"sourcesContent":[],"mappings":";;;KAIK,mBAAA;;AAJqC,CAAA;AAW1C;;;AAEyB,iBAFT,cAAA,CAES;EAAA;AAAA,CAAA,EAAtB,mBAAsB,CAAA,EAAA,YAAA"}

package/support/components/cossistant-branding.js

@@ -2,6 +2,9 @@ import { cn } from "../utils/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/cossistant-branding.tsx
+/**
+* Inline SVG of the Cossistant logomark.
+*/
 function CossistantLogo({ className }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		className: cn("h-5 w-5", className),

package/support/components/cossistant-branding.js.map

@@ -1 +1 @@
-{"version":3,"file":"cossistant-branding.js","names":[],"sources":["../../../src/support/components/cossistant-branding.tsx"],"sourcesContent":["import { cn } from \"../utils\";\n\ntype CossistantLogoProps = {\n\tclassName?: string;\n};\n\nexport function CossistantLogo({ className }: CossistantLogoProps) {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-5 w-5\", className)}\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 350 286\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<title>Cossistant Logo</title>\n\t\t\t<path\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\td=\"M349.071 60.9512V286H65.5293L.508789 225.719V60.9512L65.5293 0H284.051l65.02 60.9512Zm-267.9558 37.33c-3.8102.0002-7.4549 1.5574-10.0888 4.3108l-11.2569 11.767c-2.5097 2.624-3.8991 6.122-3.873 9.752l.1826 25.368H81.043l-.2237-13.446c0-9.826 2.3423-11.681 12.751-11.681h22.8487c10.409 0 11.96 1.855 11.96 12.457v12.67h25.218v-25.373c0-3.627-1.412-7.112-3.937-9.717l-11.497-11.863c-2.63-2.7131-6.247-4.2447-10.026-4.2448H81.1152Zm125.6658 0c-3.81 0-7.455 1.5571-10.09 4.3108l-11.256 11.767c-2.51 2.624-3.9 6.122-3.873 9.752l.182 25.368h24.965l-.224-13.446c0-9.826 2.343-11.681 12.751-11.681h22.849c10.408 0 11.959 1.855 11.959 12.457v12.67h25.219v-25.373c0-3.627-1.413-7.112-3.938-9.717l-11.497-11.863c-2.63-2.713-6.247-4.2448-10.026-4.2448h-47.021Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;AAMA,SAAgB,eAAe,EAAE,aAAkC;AAClE,QACC,qBAAC;EACA,WAAW,GAAG,WAAW,UAAU;EACnC,MAAK;EACL,SAAQ;EACR,OAAM;aAEN,oBAAC,qBAAM,oBAAuB,EAC9B,oBAAC;GACA,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;IACR;GACG"}
+{"version":3,"file":"cossistant-branding.js","names":[],"sources":["../../../src/support/components/cossistant-branding.tsx"],"sourcesContent":["import type { ReactElement } from \"react\";\n\nimport { cn } from \"../utils\";\n\ntype CossistantLogoProps = {\n\tclassName?: string;\n};\n\n/**\n * Inline SVG of the Cossistant logomark.\n */\nexport function CossistantLogo({\n\tclassName,\n}: CossistantLogoProps): ReactElement {\n\treturn (\n\t\t<svg\n\t\t\tclassName={cn(\"h-5 w-5\", className)}\n\t\t\tfill=\"none\"\n\t\t\tviewBox=\"0 0 350 286\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t>\n\t\t\t<title>Cossistant Logo</title>\n\t\t\t<path\n\t\t\t\tclipRule=\"evenodd\"\n\t\t\t\td=\"M349.071 60.9512V286H65.5293L.508789 225.719V60.9512L65.5293 0H284.051l65.02 60.9512Zm-267.9558 37.33c-3.8102.0002-7.4549 1.5574-10.0888 4.3108l-11.2569 11.767c-2.5097 2.624-3.8991 6.122-3.873 9.752l.1826 25.368H81.043l-.2237-13.446c0-9.826 2.3423-11.681 12.751-11.681h22.8487c10.409 0 11.96 1.855 11.96 12.457v12.67h25.218v-25.373c0-3.627-1.412-7.112-3.937-9.717l-11.497-11.863c-2.63-2.7131-6.247-4.2447-10.026-4.2448H81.1152Zm125.6658 0c-3.81 0-7.455 1.5571-10.09 4.3108l-11.256 11.767c-2.51 2.624-3.9 6.122-3.873 9.752l.182 25.368h24.965l-.224-13.446c0-9.826 2.343-11.681 12.751-11.681h22.849c10.408 0 11.959 1.855 11.959 12.457v12.67h25.219v-25.373c0-3.627-1.413-7.112-3.938-9.717l-11.497-11.863c-2.63-2.713-6.247-4.2448-10.026-4.2448h-47.021Z\"\n\t\t\t\tfill=\"currentColor\"\n\t\t\t\tfillRule=\"evenodd\"\n\t\t\t/>\n\t\t</svg>\n\t);\n}\n"],"mappings":";;;;;;;AAWA,SAAgB,eAAe,EAC9B,aACqC;AACrC,QACC,qBAAC;EACA,WAAW,GAAG,WAAW,UAAU;EACnC,MAAK;EACL,SAAQ;EACR,OAAM;aAEN,oBAAC,qBAAM,oBAAuB,EAC9B,oBAAC;GACA,UAAS;GACT,GAAE;GACF,MAAK;GACL,UAAS;IACR;GACG"}

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

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","names":[],"sources":["../../../src/support/components/header.tsx"],"sourcesContent":[],"mappings":";KAKY,WAAA;EAAA,SAAA,CAAA,EAAA,MAAW;EAAA,QAAA,CAAA,EAEX,KAAA,CAAM,SAFK;SAEX,CAAA,EACD,KAAA,CAAM,SADC;UACP,CAAM,EAAA,GAAA,GAAA,IAAA;CAAS;AAIb,cAAA,MAiCZ,EAjCoB,KAAA,CAAM,EAiC1B,CAjC6B,WAiC7B,CAAA"}
+{"version":3,"file":"header.d.ts","names":[],"sources":["../../../src/support/components/header.tsx"],"sourcesContent":[],"mappings":";KAKY,WAAA;EAAA,SAAA,CAAA,EAAA,MAAW;EAOV,QAAA,CA+BZ,EApCW,KAAA,CAAM,SAKY;YAJnB,KAAA,CAAM;;;cAIJ,QAAQ,KAAA,CAAM,GAAG"}

package/support/components/header.js

@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/header.tsx
 const Header = ({ className, children, actions, onGoBack }) => {
-	const { close, mode } = useSupportConfig();
+	const { close } = useSupportConfig();
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("absolute inset-x-0 top-0 z-10 h-18", className),
 		children: /* @__PURE__ */ jsxs("div", {
@@ -26,7 +26,7 @@ const Header = ({ className, children, actions, onGoBack }) => {
 					className: "flex items-center gap-2",
 					children: actions
 				}),
-				mode !== "responsive" && /* @__PURE__ */ jsx(Button, {
+				/* @__PURE__ */ jsx(Button, {
 					onClick: close,
 					size: "icon",
 					type: "button",

package/support/components/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","names":["Header: React.FC<HeaderProps>","Icon"],"sources":["../../../src/support/components/header.tsx"],"sourcesContent":["import { useSupportConfig } from \"../store\";\nimport { cn } from \"../utils\";\nimport { Button } from \"./button\";\nimport Icon from \"./icons\";\n\nexport type HeaderProps = {\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n\tactions?: React.ReactNode;\n\tonGoBack?: () => void;\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n\tclassName,\n\tchildren,\n\tactions,\n\tonGoBack,\n}) => {\n\tconst { close, mode } = useSupportConfig();\n\n\treturn (\n\t\t<div className={cn(\"absolute inset-x-0 top-0 z-10 h-18\", className)}>\n\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-between gap-3 px-4\">\n\t\t\t\t<div className=\"flex flex-1 items-center gap-3\">\n\t\t\t\t\t{onGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={onGoBack}\n\t\t\t\t\t\t\tsize=\"icon\"\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<Icon name=\"arrow-left\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n\t\t\t\t{mode !== \"responsive\" && (\n\t\t\t\t\t<Button onClick={close} size=\"icon\" type=\"button\" variant=\"ghost\">\n\t\t\t\t\t\t<Icon name=\"close\" />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;AAYA,MAAaA,UAAiC,EAC7C,WACA,UACA,SACA,eACK;CACL,MAAM,EAAE,OAAO,SAAS,kBAAkB;AAE1C,QACC,oBAAC;EAAI,WAAW,GAAG,sCAAsC,UAAU;YAClE,qBAAC;GAAI,WAAU;;IACd,qBAAC;KAAI,WAAU;gBACb,YACA,oBAAC;MACA,SAAS;MACT,MAAK;MACL,MAAK;MACL,SAAQ;gBAER,oBAACC,iBAAK,MAAK,eAAe;OAClB,EAET;MACI;IACL,WAAW,oBAAC;KAAI,WAAU;eAA2B;MAAc;IACnE,SAAS,gBACT,oBAAC;KAAO,SAAS;KAAO,MAAK;KAAO,MAAK;KAAS,SAAQ;eACzD,oBAACA,iBAAK,MAAK,UAAU;MACb;;IAEL;GACD"}
+{"version":3,"file":"header.js","names":["Header: React.FC<HeaderProps>","Icon"],"sources":["../../../src/support/components/header.tsx"],"sourcesContent":["import { useSupportConfig } from \"../store\";\nimport { cn } from \"../utils\";\nimport { Button } from \"./button\";\nimport Icon from \"./icons\";\n\nexport type HeaderProps = {\n\tclassName?: string;\n\tchildren?: React.ReactNode;\n\tactions?: React.ReactNode;\n\tonGoBack?: () => void;\n};\n\nexport const Header: React.FC<HeaderProps> = ({\n\tclassName,\n\tchildren,\n\tactions,\n\tonGoBack,\n}) => {\n\tconst { close } = useSupportConfig();\n\n\treturn (\n\t\t<div className={cn(\"absolute inset-x-0 top-0 z-10 h-18\", className)}>\n\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-between gap-3 px-4\">\n\t\t\t\t<div className=\"flex flex-1 items-center gap-3\">\n\t\t\t\t\t{onGoBack && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tonClick={onGoBack}\n\t\t\t\t\t\t\tsize=\"icon\"\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<Icon name=\"arrow-left\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t\t{actions && <div className=\"flex items-center gap-2\">{actions}</div>}\n\t\t\t\t<Button onClick={close} size=\"icon\" type=\"button\" variant=\"ghost\">\n\t\t\t\t\t<Icon name=\"close\" />\n\t\t\t\t</Button>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n"],"mappings":";;;;;;;AAYA,MAAaA,UAAiC,EAC7C,WACA,UACA,SACA,eACK;CACL,MAAM,EAAE,UAAU,kBAAkB;AAEpC,QACC,oBAAC;EAAI,WAAW,GAAG,sCAAsC,UAAU;YAClE,qBAAC;GAAI,WAAU;;IACd,qBAAC;KAAI,WAAU;gBACb,YACA,oBAAC;MACA,SAAS;MACT,MAAK;MACL,MAAK;MACL,SAAQ;gBAER,oBAACC,iBAAK,MAAK,eAAe;OAClB,EAET;MACI;IACL,WAAW,oBAAC;KAAI,WAAU;eAA2B;MAAc;IACpE,oBAAC;KAAO,SAAS;KAAO,MAAK;KAAO,MAAK;KAAS,SAAQ;eACzD,oBAACA,iBAAK,MAAK,UAAU;MACb;;IACJ;GACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","names":[],"sources":["../../../src/support/components/icons.tsx"],"sourcesContent":[],"mappings":";;;KAGY,WAAA;KAEA,QAAA;AAFA,KAmBA,SAAA,GAnBW;EAEX,IAAA,EAkBL,QAlBa;EAiBR,OAAA,CAAA,EAED,WAFU;EAAA,SAAA,CAAA,EAAA,MAAA;eACd,CAAA,EAAA,OAAA;;AACe,cA6FT,IA7FS,EA6FH,KAAA,CAAM,EA7FH,CA6FM,SA7FN,CAAA;AA6FT,KAqGD,kBAAA,GAFX;EAAA,CAAA,GAAA,EAAA,MAAA,CAAA,EAAA;IAnG2B,OAAA,EAAA,MAAA;IAAT,MAAM,EAAA,MAAA;EAAE,CAAA;AAqG3B,CAAA"}
+{"version":3,"file":"icons.d.ts","names":[],"sources":["../../../src/support/components/icons.tsx"],"sourcesContent":[],"mappings":";;;KAGY,WAAA;KAEA,QAAA;AAFA,KAmBA,SAAA,GAnBW;EAEX,IAAA,EAkBL,QAlBa;EAiBR,OAAA,CAAA,EAED,WAFU;EA+FR,SAmGZ,CAAA,EAAA,MAAA;EAEW,aAAA,CAAA,EAAA,OAAkB;;cArGjB,MAAM,KAAA,CAAM,GAAG;KAqGhB,kBAAA"}

package/support/components/multimodal-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multimodal-input.d.ts","names":[],"sources":["../../../src/support/components/multimodal-input.tsx"],"sourcesContent":[],"mappings":";;;KAWY,oBAAA;;EAAA,KAAA,EAAA,MAAA;EAAoB,QAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;UAKR,EAAA,GAAA,GAAA,IAAA;cAIf,CAAA,EAAA,CAAA,KAAA,EAJe,IAIf,EAAA,EAAA,GAAA,IAAA;aACA,CAAA,EAAA,MAAA;EAAI,QAAA,CAAA,EAAA,OAAA;EAOA,YAAA,CAAA,EAAA,OA8JZ;EAAA,KAAA,CAAA,EAtKQ,KAsKR,GAAA,IAAA;OA9JsC,CAAA,EAP9B,IAO8B,EAAA;cAAH,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAE,QAAA,CAAA,EAAA,MAAA;EAgK1B,WAAA,CAAA,EAAA,MAAe;EAKd,gBAcZ,CAAA,EAAA,MAAA,EAAA;CAAA;AAdiC,cArKrB,eAqKqB,EArKJ,KAAA,CAAM,EAqKF,CArKK,oBAqKL,CAAA;AAAT,KALb,eAAA,GAKmB;EAAE,SAAA,CAAA,EAAA,MAAA;;;cAApB,YAAY,KAAA,CAAM,GAAG"}
+{"version":3,"file":"multimodal-input.d.ts","names":[],"sources":["../../../src/support/components/multimodal-input.tsx"],"sourcesContent":[],"mappings":";;;KAWY,oBAAA;;EAAA,KAAA,EAAA,MAAA;EAKY,QAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAIf,QAAA,EAAA,GAAA,GAAA,IAAA;EACA,YAAA,CAAA,EAAA,CAAA,KAAA,EALe,IAKf,EAAA,EAAA,GAAA,IAAA;EAAI,WAAA,CAAA,EAAA,MAAA;EAOA,QAAA,CAAA,EAAA,OA8JZ;EAEW,YAAA,CAAA,EAAA,OAAe;EAKd,KAAA,CAAA,EA7KJ,KA2LR,GAAA,IAAA;UA1LQ;;;;;;cAOI,iBAAiB,KAAA,CAAM,GAAG;KAgK3B,eAAA;;;;cAKC,YAAY,KAAA,CAAM,GAAG"}

package/support/components/multimodal-input.js

@@ -3,13 +3,13 @@
 
 import { cn } from "../utils/index.js";
 import { Button } from "../../primitives/button.js";
-import { FileInput, MultimodalInput as MultimodalInput$1 } from "../../primitives/multimodal-input.js";
+import { MultimodalInput as MultimodalInput$1 } from "../../primitives/multimodal-input.js";
 import icons_default from "./icons.js";
 import { useSupportText } from "../text/index.js";
 import { useComposerRefocus } from "../../hooks/use-composer-refocus.js";
 import { Watermark } from "./watermark.js";
 import { useRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/multimodal-input.tsx
 const MultimodalInput = ({ className, value, onChange, onSubmit, onFileSelect, placeholder, disabled = false, isSubmitting = false, error, files = [], onRemoveFile, maxFiles = 5, maxFileSize = 10 * 1024 * 1024, allowedFileTypes = [
@@ -17,7 +17,7 @@ const MultimodalInput = ({ className, value, onChange, onSubmit, onFileSelect, p
 	"application/pdf",
 	"text/*"
 ] }) => {
-	const fileInputRef = useRef(null);
+	useRef(null);
 	const hasContent = value.trim().length > 0 || files.length > 0;
 	const { focusComposer, inputRef } = useComposerRefocus({
 		disabled,
@@ -36,9 +36,6 @@ const MultimodalInput = ({ className, value, onChange, onSubmit, onFileSelect, p
 		e.preventDefault();
 		handleSubmit();
 	};
-	const handleAttachClick = () => {
-		if (files.length < maxFiles) fileInputRef.current?.click();
-	};
 	const formatFileSize = (bytes) => {
 		if (bytes < 1024) return `${bytes} B`;
 		if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
@@ -97,25 +94,9 @@ const MultimodalInput = ({ className, value, onChange, onSubmit, onFileSelect, p
 					value
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between py-1 pr-1 pl-3",
-					children: [/* @__PURE__ */ jsx(Watermark, {}), /* @__PURE__ */ jsxs("div", {
+					children: [/* @__PURE__ */ jsx(Watermark, {}), /* @__PURE__ */ jsx("div", {
 						className: "flex items-center gap-0.5",
-						children: [onFileSelect && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("button", {
-							"aria-label": text("common.actions.attachFiles"),
-							className: cn("group flex h-8 w-8 items-center justify-center rounded-md text-co-muted-foreground hover:bg-co-muted hover:text-co-foreground disabled:cursor-not-allowed disabled:opacity-50", files.length >= maxFiles && "opacity-50"),
-							disabled: disabled || isSubmitting || files.length >= maxFiles,
-							onClick: handleAttachClick,
-							type: "button",
-							children: /* @__PURE__ */ jsx(icons_default, {
-								className: "h-4 w-4",
-								name: "attachment"
-							})
-						}), /* @__PURE__ */ jsx(FileInput, {
-							accept: allowedFileTypes.join(","),
-							className: "hidden",
-							disabled: disabled || isSubmitting || files.length >= maxFiles,
-							onFileSelect,
-							ref: fileInputRef
-						})] }), /* @__PURE__ */ jsx(SendButton, { disabled: !canSubmit })]
+						children: /* @__PURE__ */ jsx(SendButton, { disabled: !canSubmit })
 					})]
 				})]
 			})

package/support/components/multimodal-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"multimodal-input.js","names":["MultimodalInput: React.FC<MultimodalInputProps>","Icon","Primitive.MultimodalInput","Primitive.FileInput","SendButton: React.FC<SendButtonProps>","Primitive.Button"],"sources":["../../../src/support/components/multimodal-input.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { useRef } from \"react\";\nimport { useComposerRefocus } from \"../../hooks/use-composer-refocus\";\nimport * as Primitive from \"../../primitives\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { Watermark } from \"./watermark\";\n\nexport type MultimodalInputProps = {\n\tclassName?: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSubmit: () => void;\n\tonFileSelect?: (files: File[]) => void;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\tisSubmitting?: boolean;\n\terror?: Error | null;\n\tfiles?: File[];\n\tonRemoveFile?: (index: number) => void;\n\tmaxFiles?: number;\n\tmaxFileSize?: number;\n\tallowedFileTypes?: string[];\n};\n\nexport const MultimodalInput: React.FC<MultimodalInputProps> = ({\n\tclassName,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tonFileSelect,\n\tplaceholder,\n\tdisabled = false,\n\tisSubmitting = false,\n\terror,\n\tfiles = [],\n\tonRemoveFile,\n\tmaxFiles = 5,\n\tmaxFileSize = 10 * 1024 * 1024, // 10MB\n\tallowedFileTypes = [\"image/*\", \"application/pdf\", \"text/*\"],\n}) => {\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\n\tconst hasContent = value.trim().length > 0 || files.length > 0;\n\tconst { focusComposer, inputRef } = useComposerRefocus({\n\t\tdisabled,\n\t\thasContent,\n\t\tisSubmitting,\n\t});\n\tconst canSubmit = !(disabled || isSubmitting) && hasContent;\n\tconst text = useSupportText();\n\tconst resolvedPlaceholder =\n\t\tplaceholder ?? text(\"component.multimodalInput.placeholder\");\n\n\tconst handleSubmit = () => {\n\t\tif (!canSubmit) {\n\t\t\treturn;\n\t\t}\n\n\t\tonSubmit();\n\t\tfocusComposer();\n\t};\n\n\tconst handleFormSubmit = (e: React.FormEvent) => {\n\t\te.preventDefault();\n\t\thandleSubmit();\n\t};\n\n\tconst handleAttachClick = () => {\n\t\tif (files.length < maxFiles) {\n\t\t\tfileInputRef.current?.click();\n\t\t}\n\t};\n\n\tconst formatFileSize = (bytes: number) => {\n\t\tif (bytes < 1024) {\n\t\t\treturn `${bytes} B`;\n\t\t}\n\t\tif (bytes < 1024 * 1024) {\n\t\t\treturn `${(bytes / 1024).toFixed(1)} KB`;\n\t\t}\n\t\treturn `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n\t};\n\n\treturn (\n\t\t<form className=\"flex flex-col gap-2\" onSubmit={handleFormSubmit}>\n\t\t\t{/* Error message */}\n\t\t\t{error && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"rounded-md bg-co-destructive-muted p-2 text-co-destructive text-xs\"\n\t\t\t\t\tid=\"multimodal-input-error\"\n\t\t\t\t>\n\t\t\t\t\t{error.message}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* File attachments */}\n\t\t\t{files.length > 0 && (\n\t\t\t\t<div className=\"flex flex-wrap gap-2 p-2\">\n\t\t\t\t\t{files.map((file, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-md bg-co-muted px-2 py-1 text-xs\"\n\t\t\t\t\t\t\tkey={`${file.name}-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-3 w-3\" name=\"attachment\" />\n\t\t\t\t\t\t\t<span className=\"max-w-[150px] truncate\">{file.name}</span>\n\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground\">\n\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{onRemoveFile && (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\taria-label={text(\"common.actions.removeFile\", {\n\t\t\t\t\t\t\t\t\t\tfileName: file.name,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\tclassName=\"ml-1 hover:text-co-destructive\"\n\t\t\t\t\t\t\t\t\tonClick={() => onRemoveFile(index)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon className=\"h-3 w-3\" name=\"close\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Input area */}\n\t\t\t<div className=\"flex flex-col rounded border border-co-border/50 bg-co-background-100 dark:bg-co-background-200\">\n\t\t\t\t<Primitive.MultimodalInput\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex-1 resize-none overflow-hidden p-3 text-co-foreground text-sm placeholder:text-primary/40 focus-visible:outline-none\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdisabled={disabled || isSubmitting}\n\t\t\t\t\terror={error}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonFileSelect={onFileSelect}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tplaceholder={resolvedPlaceholder}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tvalue={value}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"flex items-center justify-between py-1 pr-1 pl-3\">\n\t\t\t\t\t<Watermark />\n\n\t\t\t\t\t<div className=\"flex items-center gap-0.5\">\n\t\t\t\t\t\t{/* File attachment button */}\n\t\t\t\t\t\t{onFileSelect && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\taria-label={text(\"common.actions.attachFiles\")}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"group flex h-8 w-8 items-center justify-center rounded-md text-co-muted-foreground hover:bg-co-muted hover:text-co-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\t\t\t\t\tfiles.length >= maxFiles && \"opacity-50\"\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\tdisabled || isSubmitting || files.length >= maxFiles\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={handleAttachClick}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon className=\"h-4 w-4\" name=\"attachment\" />\n\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t<Primitive.FileInput\n\t\t\t\t\t\t\t\t\taccept={allowedFileTypes.join(\",\")}\n\t\t\t\t\t\t\t\t\tclassName=\"hidden\"\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\tdisabled || isSubmitting || files.length >= maxFiles\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonFileSelect={onFileSelect}\n\t\t\t\t\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Send button */}\n\t\t\t\t\t\t<SendButton disabled={!canSubmit} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</form>\n\t);\n};\n\nexport type SendButtonProps = {\n\tclassName?: string;\n\tdisabled?: boolean;\n};\n\nexport const SendButton: React.FC<SendButtonProps> = ({\n\tclassName,\n\tdisabled = false,\n}) => (\n\t<Primitive.Button\n\t\tclassName={cn(\n\t\t\t\"group flex h-8 w-8 items-center justify-center rounded-md text-co-primary hover:bg-co-muted disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tclassName\n\t\t)}\n\t\tdisabled={disabled}\n\t\ttype=\"submit\"\n\t>\n\t\t<Icon className=\"h-4 w-4\" filledOnHover name=\"send\" />\n\t</Primitive.Button>\n);\n"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAaA,mBAAmD,EAC/D,WACA,OACA,UACA,UACA,cACA,aACA,WAAW,OACX,eAAe,OACf,OACA,QAAQ,EAAE,EACV,cACA,WAAW,GACX,cAAc,KAAK,OAAO,MAC1B,mBAAmB;CAAC;CAAW;CAAmB;CAAS,OACtD;CACL,MAAM,eAAe,OAAyB,KAAK;CACnD,MAAM,aAAa,MAAM,MAAM,CAAC,SAAS,KAAK,MAAM,SAAS;CAC7D,MAAM,EAAE,eAAe,aAAa,mBAAmB;EACtD;EACA;EACA;EACA,CAAC;CACF,MAAM,YAAY,EAAE,YAAY,iBAAiB;CACjD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,sBACL,eAAe,KAAK,wCAAwC;CAE7D,MAAM,qBAAqB;AAC1B,MAAI,CAAC,UACJ;AAGD,YAAU;AACV,iBAAe;;CAGhB,MAAM,oBAAoB,MAAuB;AAChD,IAAE,gBAAgB;AAClB,gBAAc;;CAGf,MAAM,0BAA0B;AAC/B,MAAI,MAAM,SAAS,SAClB,cAAa,SAAS,OAAO;;CAI/B,MAAM,kBAAkB,UAAkB;AACzC,MAAI,QAAQ,KACX,QAAO,GAAG,MAAM;AAEjB,MAAI,QAAQ,OAAO,KAClB,QAAO,IAAI,QAAQ,MAAM,QAAQ,EAAE,CAAC;AAErC,SAAO,IAAI,SAAS,OAAO,OAAO,QAAQ,EAAE,CAAC;;AAG9C,QACC,qBAAC;EAAK,WAAU;EAAsB,UAAU;;GAE9C,SACA,oBAAC;IACA,WAAU;IACV,IAAG;cAEF,MAAM;KACF;GAIN,MAAM,SAAS,KACf,oBAAC;IAAI,WAAU;cACb,MAAM,KAAK,MAAM,UACjB,qBAAC;KACA,WAAU;;MAGV,oBAACC;OAAK,WAAU;OAAU,MAAK;QAAe;MAC9C,oBAAC;OAAK,WAAU;iBAA0B,KAAK;QAAY;MAC3D,oBAAC;OAAK,WAAU;iBACd,eAAe,KAAK,KAAK;QACpB;MACN,gBACA,oBAAC;OACA,cAAY,KAAK,6BAA6B,EAC7C,UAAU,KAAK,MACf,CAAC;OACF,WAAU;OACV,eAAe,aAAa,MAAM;OAClC,MAAK;iBAEL,oBAACA;QAAK,WAAU;QAAU,MAAK;SAAU;QACjC;;OAjBL,GAAG,KAAK,KAAK,GAAG,QAmBhB,CACL;KACG;GAIP,qBAAC;IAAI,WAAU;eACd,oBAACC;KACA,WAAW,GACV,4HACA,UACA;KACD,UAAU,YAAY;KACf;KACG;KACI;KACd,UAAU;KACV,aAAa;KACb,KAAK;KACE;MACN,EAEF,qBAAC;KAAI,WAAU;gBACd,oBAAC,cAAY,EAEb,qBAAC;MAAI,WAAU;iBAEb,gBACA,4CACC,oBAAC;OACA,cAAY,KAAK,6BAA6B;OAC9C,WAAW,GACV,iLACA,MAAM,UAAU,YAAY,aAC5B;OACD,UACC,YAAY,gBAAgB,MAAM,UAAU;OAE7C,SAAS;OACT,MAAK;iBAEL,oBAACD;QAAK,WAAU;QAAU,MAAK;SAAe;QACtC,EAET,oBAACE;OACA,QAAQ,iBAAiB,KAAK,IAAI;OAClC,WAAU;OACV,UACC,YAAY,gBAAgB,MAAM,UAAU;OAE/B;OACd,KAAK;QACJ,IACA,EAIJ,oBAAC,cAAW,UAAU,CAAC,YAAa;OAC/B;MACD;KACD;;GACA;;AAST,MAAaC,cAAyC,EACrD,WACA,WAAW,YAEX,oBAACC;CACA,WAAW,GACV,+IACA,UACA;CACS;CACV,MAAK;WAEL,oBAACJ;EAAK,WAAU;EAAU;EAAc,MAAK;GAAS;EACpC"}
+{"version":3,"file":"multimodal-input.js","names":["MultimodalInput: React.FC<MultimodalInputProps>","Icon","Primitive.MultimodalInput","SendButton: React.FC<SendButtonProps>","Primitive.Button"],"sources":["../../../src/support/components/multimodal-input.tsx"],"sourcesContent":["\"use client\";\n\nimport type React from \"react\";\nimport { useRef } from \"react\";\nimport { useComposerRefocus } from \"../../hooks/use-composer-refocus\";\nimport * as Primitive from \"../../primitives\";\nimport { useSupportText } from \"../text\";\nimport { cn } from \"../utils\";\nimport Icon from \"./icons\";\nimport { Watermark } from \"./watermark\";\n\nexport type MultimodalInputProps = {\n\tclassName?: string;\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSubmit: () => void;\n\tonFileSelect?: (files: File[]) => void;\n\tplaceholder?: string;\n\tdisabled?: boolean;\n\tisSubmitting?: boolean;\n\terror?: Error | null;\n\tfiles?: File[];\n\tonRemoveFile?: (index: number) => void;\n\tmaxFiles?: number;\n\tmaxFileSize?: number;\n\tallowedFileTypes?: string[];\n};\n\nexport const MultimodalInput: React.FC<MultimodalInputProps> = ({\n\tclassName,\n\tvalue,\n\tonChange,\n\tonSubmit,\n\tonFileSelect,\n\tplaceholder,\n\tdisabled = false,\n\tisSubmitting = false,\n\terror,\n\tfiles = [],\n\tonRemoveFile,\n\tmaxFiles = 5,\n\tmaxFileSize = 10 * 1024 * 1024, // 10MB\n\tallowedFileTypes = [\"image/*\", \"application/pdf\", \"text/*\"],\n}) => {\n\tconst fileInputRef = useRef<HTMLInputElement>(null);\n\tconst hasContent = value.trim().length > 0 || files.length > 0;\n\tconst { focusComposer, inputRef } = useComposerRefocus({\n\t\tdisabled,\n\t\thasContent,\n\t\tisSubmitting,\n\t});\n\tconst canSubmit = !(disabled || isSubmitting) && hasContent;\n\tconst text = useSupportText();\n\tconst resolvedPlaceholder =\n\t\tplaceholder ?? text(\"component.multimodalInput.placeholder\");\n\n\tconst handleSubmit = () => {\n\t\tif (!canSubmit) {\n\t\t\treturn;\n\t\t}\n\n\t\tonSubmit();\n\t\tfocusComposer();\n\t};\n\n\tconst handleFormSubmit = (e: React.FormEvent) => {\n\t\te.preventDefault();\n\t\thandleSubmit();\n\t};\n\n\tconst handleAttachClick = () => {\n\t\tif (files.length < maxFiles) {\n\t\t\tfileInputRef.current?.click();\n\t\t}\n\t};\n\n\tconst formatFileSize = (bytes: number) => {\n\t\tif (bytes < 1024) {\n\t\t\treturn `${bytes} B`;\n\t\t}\n\t\tif (bytes < 1024 * 1024) {\n\t\t\treturn `${(bytes / 1024).toFixed(1)} KB`;\n\t\t}\n\t\treturn `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n\t};\n\n\treturn (\n\t\t<form className=\"flex flex-col gap-2\" onSubmit={handleFormSubmit}>\n\t\t\t{/* Error message */}\n\t\t\t{error && (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"rounded-md bg-co-destructive-muted p-2 text-co-destructive text-xs\"\n\t\t\t\t\tid=\"multimodal-input-error\"\n\t\t\t\t>\n\t\t\t\t\t{error.message}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* File attachments */}\n\t\t\t{files.length > 0 && (\n\t\t\t\t<div className=\"flex flex-wrap gap-2 p-2\">\n\t\t\t\t\t{files.map((file, index) => (\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName=\"flex items-center gap-2 rounded-md bg-co-muted px-2 py-1 text-xs\"\n\t\t\t\t\t\t\tkey={`${file.name}-${index}`}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"h-3 w-3\" name=\"attachment\" />\n\t\t\t\t\t\t\t<span className=\"max-w-[150px] truncate\">{file.name}</span>\n\t\t\t\t\t\t\t<span className=\"text-co-muted-foreground\">\n\t\t\t\t\t\t\t\t{formatFileSize(file.size)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t{onRemoveFile && (\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\taria-label={text(\"common.actions.removeFile\", {\n\t\t\t\t\t\t\t\t\t\tfileName: file.name,\n\t\t\t\t\t\t\t\t\t})}\n\t\t\t\t\t\t\t\t\tclassName=\"ml-1 hover:text-co-destructive\"\n\t\t\t\t\t\t\t\t\tonClick={() => onRemoveFile(index)}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon className=\"h-3 w-3\" name=\"close\" />\n\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t)}\n\n\t\t\t{/* Input area */}\n\t\t\t<div className=\"flex flex-col rounded border border-co-border/50 bg-co-background-100 dark:bg-co-background-200\">\n\t\t\t\t<Primitive.MultimodalInput\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex-1 resize-none overflow-hidden p-3 text-co-foreground text-sm placeholder:text-primary/40 focus-visible:outline-none\",\n\t\t\t\t\t\tclassName\n\t\t\t\t\t)}\n\t\t\t\t\tdisabled={disabled || isSubmitting}\n\t\t\t\t\terror={error}\n\t\t\t\t\tonChange={onChange}\n\t\t\t\t\tonFileSelect={onFileSelect}\n\t\t\t\t\tonSubmit={handleSubmit}\n\t\t\t\t\tplaceholder={resolvedPlaceholder}\n\t\t\t\t\tref={inputRef}\n\t\t\t\t\tvalue={value}\n\t\t\t\t/>\n\n\t\t\t\t<div className=\"flex items-center justify-between py-1 pr-1 pl-3\">\n\t\t\t\t\t<Watermark />\n\n\t\t\t\t\t<div className=\"flex items-center gap-0.5\">\n\t\t\t\t\t\t{/* File attachment button */}\n\t\t\t\t\t\t{/* {onFileSelect && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\taria-label={text(\"common.actions.attachFiles\")}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"group flex h-8 w-8 items-center justify-center rounded-md text-co-muted-foreground hover:bg-co-muted hover:text-co-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\t\t\t\t\t\t\t\tfiles.length >= maxFiles && \"opacity-50\"\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\tdisabled || isSubmitting || files.length >= maxFiles\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={handleAttachClick}\n\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon className=\"h-4 w-4\" name=\"attachment\" />\n\t\t\t\t\t\t\t\t</button>\n\n\t\t\t\t\t\t\t\t<Primitive.FileInput\n\t\t\t\t\t\t\t\t\taccept={allowedFileTypes.join(\",\")}\n\t\t\t\t\t\t\t\t\tclassName=\"hidden\"\n\t\t\t\t\t\t\t\t\tdisabled={\n\t\t\t\t\t\t\t\t\t\tdisabled || isSubmitting || files.length >= maxFiles\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonFileSelect={onFileSelect}\n\t\t\t\t\t\t\t\t\tref={fileInputRef}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)} */}\n\n\t\t\t\t\t\t{/* Send button */}\n\t\t\t\t\t\t<SendButton disabled={!canSubmit} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</form>\n\t);\n};\n\nexport type SendButtonProps = {\n\tclassName?: string;\n\tdisabled?: boolean;\n};\n\nexport const SendButton: React.FC<SendButtonProps> = ({\n\tclassName,\n\tdisabled = false,\n}) => (\n\t<Primitive.Button\n\t\tclassName={cn(\n\t\t\t\"group flex h-8 w-8 items-center justify-center rounded-md text-co-primary hover:bg-co-muted disabled:cursor-not-allowed disabled:opacity-50\",\n\t\t\tclassName\n\t\t)}\n\t\tdisabled={disabled}\n\t\ttype=\"submit\"\n\t>\n\t\t<Icon className=\"h-4 w-4\" filledOnHover name=\"send\" />\n\t</Primitive.Button>\n);\n"],"mappings":";;;;;;;;;;;;;;AA4BA,MAAaA,mBAAmD,EAC/D,WACA,OACA,UACA,UACA,cACA,aACA,WAAW,OACX,eAAe,OACf,OACA,QAAQ,EAAE,EACV,cACA,WAAW,GACX,cAAc,KAAK,OAAO,MAC1B,mBAAmB;CAAC;CAAW;CAAmB;CAAS,OACtD;AACgB,QAAyB,KAAK;CACnD,MAAM,aAAa,MAAM,MAAM,CAAC,SAAS,KAAK,MAAM,SAAS;CAC7D,MAAM,EAAE,eAAe,aAAa,mBAAmB;EACtD;EACA;EACA;EACA,CAAC;CACF,MAAM,YAAY,EAAE,YAAY,iBAAiB;CACjD,MAAM,OAAO,gBAAgB;CAC7B,MAAM,sBACL,eAAe,KAAK,wCAAwC;CAE7D,MAAM,qBAAqB;AAC1B,MAAI,CAAC,UACJ;AAGD,YAAU;AACV,iBAAe;;CAGhB,MAAM,oBAAoB,MAAuB;AAChD,IAAE,gBAAgB;AAClB,gBAAc;;CASf,MAAM,kBAAkB,UAAkB;AACzC,MAAI,QAAQ,KACX,QAAO,GAAG,MAAM;AAEjB,MAAI,QAAQ,OAAO,KAClB,QAAO,IAAI,QAAQ,MAAM,QAAQ,EAAE,CAAC;AAErC,SAAO,IAAI,SAAS,OAAO,OAAO,QAAQ,EAAE,CAAC;;AAG9C,QACC,qBAAC;EAAK,WAAU;EAAsB,UAAU;;GAE9C,SACA,oBAAC;IACA,WAAU;IACV,IAAG;cAEF,MAAM;KACF;GAIN,MAAM,SAAS,KACf,oBAAC;IAAI,WAAU;cACb,MAAM,KAAK,MAAM,UACjB,qBAAC;KACA,WAAU;;MAGV,oBAACC;OAAK,WAAU;OAAU,MAAK;QAAe;MAC9C,oBAAC;OAAK,WAAU;iBAA0B,KAAK;QAAY;MAC3D,oBAAC;OAAK,WAAU;iBACd,eAAe,KAAK,KAAK;QACpB;MACN,gBACA,oBAAC;OACA,cAAY,KAAK,6BAA6B,EAC7C,UAAU,KAAK,MACf,CAAC;OACF,WAAU;OACV,eAAe,aAAa,MAAM;OAClC,MAAK;iBAEL,oBAACA;QAAK,WAAU;QAAU,MAAK;SAAU;QACjC;;OAjBL,GAAG,KAAK,KAAK,GAAG,QAmBhB,CACL;KACG;GAIP,qBAAC;IAAI,WAAU;eACd,oBAACC;KACA,WAAW,GACV,4HACA,UACA;KACD,UAAU,YAAY;KACf;KACG;KACI;KACd,UAAU;KACV,aAAa;KACb,KAAK;KACE;MACN,EAEF,qBAAC;KAAI,WAAU;gBACd,oBAAC,cAAY,EAEb,oBAAC;MAAI,WAAU;gBAgCd,oBAAC,cAAW,UAAU,CAAC,YAAa;OAC/B;MACD;KACD;;GACA;;AAST,MAAaC,cAAyC,EACrD,WACA,WAAW,YAEX,oBAACC;CACA,WAAW,GACV,+IACA,UACA;CACS;CACV,MAAK;WAEL,oBAACH;EAAK,WAAU;EAAU;EAAc,MAAK;GAAS;EACpC"}

package/support/components/navigation-tab.d.ts

@@ -1,7 +1,12 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { ReactElement } from "react";
 
 //#region src/support/components/navigation-tab.d.ts
-declare function NavigationTab(): react_jsx_runtime6.JSX.Element;
+
+/**
+ * Tab bar used inside the widget header to switch between home and knowledge
+ * base views.
+ */
+declare function NavigationTab(): ReactElement;
 //#endregion
 export { NavigationTab };
 //# sourceMappingURL=navigation-tab.d.ts.map

package/support/components/navigation-tab.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"navigation-tab.d.ts","names":[],"sources":["../../../src/support/components/navigation-tab.tsx"],"sourcesContent":[],"mappings":";;;iBAKgB,aAAA,CAAA,GAAa,kBAAA,CAAA,GAAA,CAAA"}
+{"version":3,"file":"navigation-tab.d.ts","names":[],"sources":["../../../src/support/components/navigation-tab.tsx"],"sourcesContent":[],"mappings":";;;;;;AAWA;;iBAAgB,aAAA,CAAA,GAAiB"}

package/support/components/navigation-tab.js

@@ -5,6 +5,10 @@ import { Text } from "../text/index.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/support/components/navigation-tab.tsx
+/**
+* Tab bar used inside the widget header to switch between home and knowledge
+* base views.
+*/
 function NavigationTab() {
 	const { current, navigate } = useSupportNavigation();
 	return /* @__PURE__ */ jsxs("div", {