@cossistant/react 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -0
- package/_virtual/rolldown_runtime.js +19 -0
- package/conversation.d.ts +23 -0
- package/conversation.d.ts.map +1 -1
- package/hooks/index.d.ts +5 -3
- package/hooks/index.js +7 -5
- package/hooks/private/store/use-conversations-store.d.ts +8 -0
- package/hooks/private/store/use-conversations-store.d.ts.map +1 -1
- package/hooks/private/store/use-conversations-store.js +8 -0
- package/hooks/private/store/use-conversations-store.js.map +1 -1
- package/hooks/private/store/use-store-selector.d.ts +4 -0
- package/hooks/private/store/use-store-selector.d.ts.map +1 -1
- package/hooks/private/store/use-store-selector.js +5 -2
- package/hooks/private/store/use-store-selector.js.map +1 -1
- package/hooks/private/store/use-website-store.d.ts +4 -0
- package/hooks/private/store/use-website-store.d.ts.map +1 -1
- package/hooks/private/store/use-website-store.js +6 -3
- package/hooks/private/store/use-website-store.js.map +1 -1
- package/hooks/private/typing.d.ts +35 -0
- package/hooks/private/typing.d.ts.map +1 -0
- package/hooks/private/typing.js +49 -0
- package/hooks/private/typing.js.map +1 -0
- package/hooks/private/use-client-query.d.ts +5 -0
- package/hooks/private/use-client-query.d.ts.map +1 -1
- package/hooks/private/use-client-query.js +5 -0
- package/hooks/private/use-client-query.js.map +1 -1
- package/hooks/private/use-grouped-messages.d.ts +10 -4
- package/hooks/private/use-grouped-messages.d.ts.map +1 -1
- package/hooks/private/use-grouped-messages.js +24 -4
- package/hooks/private/use-grouped-messages.js.map +1 -1
- package/hooks/private/use-multimodal-input.d.ts.map +1 -1
- package/hooks/private/use-rest-client.d.ts.map +1 -1
- package/hooks/private/use-visitor-typing-reporter.d.ts +6 -0
- package/hooks/private/use-visitor-typing-reporter.d.ts.map +1 -1
- package/hooks/private/use-visitor-typing-reporter.js +6 -0
- package/hooks/private/use-visitor-typing-reporter.js.map +1 -1
- package/hooks/use-composer-refocus.d.ts.map +1 -1
- package/hooks/use-conversation-auto-seen.d.ts +9 -0
- package/hooks/use-conversation-auto-seen.d.ts.map +1 -1
- package/hooks/use-conversation-auto-seen.js +44 -3
- package/hooks/use-conversation-auto-seen.js.map +1 -1
- package/hooks/use-conversation-history-page.d.ts.map +1 -1
- package/hooks/use-conversation-history-page.js +16 -18
- package/hooks/use-conversation-history-page.js.map +1 -1
- package/hooks/use-conversation-lifecycle.d.ts.map +1 -1
- package/hooks/use-conversation-lifecycle.js +2 -4
- package/hooks/use-conversation-lifecycle.js.map +1 -1
- package/hooks/use-conversation-page.d.ts +6 -0
- package/hooks/use-conversation-page.d.ts.map +1 -1
- package/hooks/use-conversation-page.js +41 -3
- package/hooks/use-conversation-page.js.map +1 -1
- package/hooks/use-conversation-preview.d.ts +61 -0
- package/hooks/use-conversation-preview.d.ts.map +1 -0
- package/hooks/use-conversation-preview.js +173 -0
- package/hooks/use-conversation-preview.js.map +1 -0
- package/hooks/use-conversation-seen.d.ts +4 -0
- package/hooks/use-conversation-seen.d.ts.map +1 -1
- package/hooks/use-conversation-seen.js +4 -0
- package/hooks/use-conversation-seen.js.map +1 -1
- package/hooks/use-conversation-timeline-items.d.ts +4 -0
- package/hooks/use-conversation-timeline-items.d.ts.map +1 -1
- package/hooks/use-conversation-timeline-items.js +4 -0
- package/hooks/use-conversation-timeline-items.js.map +1 -1
- package/hooks/use-conversation-timeline.d.ts +32 -0
- package/hooks/use-conversation-timeline.d.ts.map +1 -0
- package/hooks/use-conversation-timeline.js +41 -0
- package/hooks/use-conversation-timeline.js.map +1 -0
- package/hooks/use-conversation-typing.d.ts +4 -0
- package/hooks/use-conversation-typing.d.ts.map +1 -1
- package/hooks/use-conversation-typing.js +4 -0
- package/hooks/use-conversation-typing.js.map +1 -1
- package/hooks/use-conversation.d.ts +11 -0
- package/hooks/use-conversation.d.ts.map +1 -1
- package/hooks/use-conversation.js +11 -0
- package/hooks/use-conversation.js.map +1 -1
- package/hooks/use-conversations.d.ts +12 -0
- package/hooks/use-conversations.d.ts.map +1 -1
- package/hooks/use-conversations.js +12 -0
- package/hooks/use-conversations.js.map +1 -1
- package/hooks/use-create-conversation.d.ts +5 -0
- package/hooks/use-create-conversation.d.ts.map +1 -1
- package/hooks/use-create-conversation.js +12 -9
- package/hooks/use-create-conversation.js.map +1 -1
- package/hooks/use-home-page.d.ts.map +1 -1
- package/hooks/use-home-page.js +6 -4
- package/hooks/use-home-page.js.map +1 -1
- package/hooks/use-message-composer.d.ts.map +1 -1
- package/hooks/use-realtime-support.d.ts.map +1 -1
- package/hooks/use-send-message.d.ts +9 -0
- package/hooks/use-send-message.d.ts.map +1 -1
- package/hooks/use-send-message.js +15 -13
- package/hooks/use-send-message.js.map +1 -1
- package/hooks/use-visitor.d.ts.map +1 -1
- package/hooks/use-visitor.js +28 -30
- package/hooks/use-visitor.js.map +1 -1
- package/hooks/use-window-visibility-focus.d.ts +4 -0
- package/hooks/use-window-visibility-focus.d.ts.map +1 -1
- package/hooks/use-window-visibility-focus.js +5 -2
- package/hooks/use-window-visibility-focus.js.map +1 -1
- package/identify-visitor.d.ts +12 -3
- package/identify-visitor.d.ts.map +1 -1
- package/identify-visitor.js +58 -9
- package/identify-visitor.js.map +1 -1
- package/index.d.ts +10 -7
- package/index.js +10 -9
- package/package.json +12 -16
- package/primitives/avatar/avatar.d.ts.map +1 -1
- package/primitives/avatar/fallback.d.ts.map +1 -1
- package/primitives/avatar/fallback.js +1 -3
- package/primitives/avatar/fallback.js.map +1 -1
- package/primitives/avatar/image.d.ts.map +1 -1
- package/primitives/avatar/index.d.ts +1 -0
- package/primitives/bubble.d.ts +2 -0
- package/primitives/bubble.d.ts.map +1 -1
- package/primitives/bubble.js +8 -2
- package/primitives/bubble.js.map +1 -1
- package/primitives/button.d.ts.map +1 -1
- package/primitives/conversation-timeline.d.ts.map +1 -1
- package/primitives/conversation-timeline.js +58 -5
- package/primitives/conversation-timeline.js.map +1 -1
- package/primitives/index.d.ts +1 -0
- package/primitives/index.parts.d.ts +1 -0
- package/primitives/multimodal-input.d.ts.map +1 -1
- package/primitives/timeline-item-group.d.ts +7 -7
- package/primitives/timeline-item-group.d.ts.map +1 -1
- package/primitives/timeline-item-group.js.map +1 -1
- package/primitives/timeline-item.d.ts +1 -1
- package/primitives/timeline-item.d.ts.map +1 -1
- package/primitives/timeline-item.js +7 -1
- package/primitives/timeline-item.js.map +1 -1
- package/primitives/window.d.ts +1 -1
- package/primitives/window.d.ts.map +1 -1
- package/primitives/window.js +4 -4
- package/primitives/window.js.map +1 -1
- package/provider.d.ts +23 -43
- package/provider.d.ts.map +1 -1
- package/provider.js +152 -49
- package/provider.js.map +1 -1
- package/realtime/event-filter.d.ts +4 -0
- package/realtime/event-filter.d.ts.map +1 -1
- package/realtime/event-filter.js +4 -0
- package/realtime/event-filter.js.map +1 -1
- package/realtime/index.js +1 -1
- package/realtime/provider.d.ts +7 -2
- package/realtime/provider.d.ts.map +1 -1
- package/realtime/provider.js +23 -1
- package/realtime/provider.js.map +1 -1
- package/realtime/seen-store.d.ts +13 -0
- package/realtime/seen-store.d.ts.map +1 -1
- package/realtime/seen-store.js +14 -2
- package/realtime/seen-store.js.map +1 -1
- package/realtime/support-provider.d.ts +1 -2
- package/realtime/support-provider.d.ts.map +1 -1
- package/realtime/support-provider.js +19 -20
- package/realtime/support-provider.js.map +1 -1
- package/realtime/typing-store.d.ts +18 -0
- package/realtime/typing-store.d.ts.map +1 -1
- package/realtime/typing-store.js +19 -2
- package/realtime/typing-store.js.map +1 -1
- package/realtime/use-realtime.d.ts +8 -4
- package/realtime/use-realtime.d.ts.map +1 -1
- package/realtime/use-realtime.js +4 -0
- package/realtime/use-realtime.js.map +1 -1
- package/realtime-events.d.ts +15 -1
- package/realtime-events.d.ts.map +1 -1
- package/schemas.d.ts +6 -0
- package/schemas.d.ts.map +1 -1
- package/support/components/avatar-stack.d.ts +8 -4
- package/support/components/avatar-stack.d.ts.map +1 -1
- package/support/components/avatar-stack.js +4 -0
- package/support/components/avatar-stack.js.map +1 -1
- package/support/components/avatar.d.ts +11 -6
- package/support/components/avatar.d.ts.map +1 -1
- package/support/components/avatar.js +4 -0
- package/support/components/avatar.js.map +1 -1
- package/support/components/bubble.d.ts.map +1 -1
- package/support/components/bubble.js +29 -6
- package/support/components/bubble.js.map +1 -1
- package/support/components/button.d.ts +8 -5
- package/support/components/button.d.ts.map +1 -1
- package/support/components/button.js +5 -1
- package/support/components/button.js.map +1 -1
- package/support/components/container.d.ts +0 -1
- package/support/components/container.d.ts.map +1 -1
- package/support/components/container.js +2 -8
- package/support/components/container.js.map +1 -1
- package/support/components/conversation-button-link.d.ts +8 -21
- package/support/components/conversation-button-link.d.ts.map +1 -1
- package/support/components/conversation-button-link.js +62 -178
- package/support/components/conversation-button-link.js.map +1 -1
- package/support/components/conversation-event.d.ts.map +1 -1
- package/support/components/conversation-event.js +4 -0
- package/support/components/conversation-event.js.map +1 -1
- package/support/components/conversation-timeline.d.ts +10 -1
- package/support/components/conversation-timeline.d.ts.map +1 -1
- package/support/components/conversation-timeline.js +63 -57
- package/support/components/conversation-timeline.js.map +1 -1
- package/support/components/cossistant-branding.d.ts +5 -2
- package/support/components/cossistant-branding.d.ts.map +1 -1
- package/support/components/cossistant-branding.js +3 -0
- package/support/components/cossistant-branding.js.map +1 -1
- package/support/components/header.d.ts.map +1 -1
- package/support/components/header.js +2 -2
- package/support/components/header.js.map +1 -1
- package/support/components/icons.d.ts.map +1 -1
- package/support/components/multimodal-input.d.ts.map +1 -1
- package/support/components/multimodal-input.js +5 -24
- package/support/components/multimodal-input.js.map +1 -1
- package/support/components/navigation-tab.d.ts +7 -2
- package/support/components/navigation-tab.d.ts.map +1 -1
- package/support/components/navigation-tab.js +4 -0
- package/support/components/navigation-tab.js.map +1 -1
- package/support/components/support-content.d.ts +1 -1
- package/support/components/support-content.d.ts.map +1 -1
- package/support/components/support-content.js +7 -10
- package/support/components/support-content.js.map +1 -1
- package/support/components/text-effect.d.ts +5 -2
- package/support/components/text-effect.d.ts.map +1 -1
- package/support/components/text-effect.js +4 -0
- package/support/components/text-effect.js.map +1 -1
- package/support/components/timeline-identification-tool.d.ts +7 -0
- package/support/components/timeline-identification-tool.d.ts.map +1 -0
- package/support/components/timeline-identification-tool.js +139 -0
- package/support/components/timeline-identification-tool.js.map +1 -0
- package/support/components/timeline-message-group.d.ts +2 -1
- package/support/components/timeline-message-group.d.ts.map +1 -1
- package/support/components/timeline-message-group.js +4 -19
- package/support/components/timeline-message-group.js.map +1 -1
- package/support/components/timeline-message-item.d.ts +6 -2
- package/support/components/timeline-message-item.d.ts.map +1 -1
- package/support/components/timeline-message-item.js +8 -4
- package/support/components/timeline-message-item.js.map +1 -1
- package/support/components/typing-indicator.d.ts +5 -2
- package/support/components/typing-indicator.d.ts.map +1 -1
- package/support/components/typing-indicator.js +4 -4
- package/support/components/typing-indicator.js.map +1 -1
- package/support/components/watermark.d.ts.map +1 -1
- package/support/context/websocket.d.ts +8 -0
- package/support/context/websocket.d.ts.map +1 -1
- package/support/context/websocket.js +12 -6
- package/support/context/websocket.js.map +1 -1
- package/support/index.d.ts +8 -8
- package/support/index.d.ts.map +1 -1
- package/support/index.js +18 -18
- package/support/index.js.map +1 -1
- package/support/pages/conversation-history.js +46 -54
- package/support/pages/conversation-history.js.map +1 -1
- package/support/pages/conversation.d.ts +3 -6
- package/support/pages/conversation.d.ts.map +1 -1
- package/support/pages/conversation.js +19 -9
- package/support/pages/conversation.js.map +1 -1
- package/support/pages/home.d.ts +2 -2
- package/support/pages/home.d.ts.map +1 -1
- package/support/pages/home.js +64 -77
- package/support/pages/home.js.map +1 -1
- package/support/store/support-store.d.ts +18 -2
- package/support/store/support-store.d.ts.map +1 -1
- package/support/store/support-store.js +20 -5
- package/support/store/support-store.js.map +1 -1
- package/support/{support-CMoDLQoC.css → support-Ck4jy29i.css} +1 -2
- package/support/support-Ck4jy29i.css.map +1 -0
- package/support/text/index.d.ts +15 -2
- package/support/text/index.d.ts.map +1 -1
- package/support/text/index.js +15 -2
- package/support/text/index.js.map +1 -1
- package/support/text/locales/en.js +22 -4
- package/support/text/locales/en.js.map +1 -1
- package/support/text/locales/es.js +18 -0
- package/support/text/locales/es.js.map +1 -1
- package/support/text/locales/fr.js +18 -0
- package/support/text/locales/fr.js.map +1 -1
- package/support/text/locales/keys.d.ts +69 -9
- package/support/text/locales/keys.d.ts.map +1 -1
- package/support/text/locales/keys.js +18 -0
- package/support/text/locales/keys.js.map +1 -1
- package/support/text/runtime.d.ts +21 -0
- package/support/text/runtime.d.ts.map +1 -1
- package/support/text/runtime.js +21 -0
- package/support/text/runtime.js.map +1 -1
- package/support/utils/index.d.ts +4 -0
- package/support/utils/index.d.ts.map +1 -1
- package/support/utils/index.js +4 -1
- package/support/utils/index.js.map +1 -1
- package/support/utils/time.d.ts +3 -0
- package/support/utils/time.d.ts.map +1 -1
- package/support/utils/time.js +3 -0
- package/support/utils/time.js.map +1 -1
- package/support-config.d.ts +2 -1
- package/support-config.d.ts.map +1 -1
- package/support-config.js.map +1 -1
- package/support.css +2 -2
- package/tailwind.css +404 -0
- package/timeline-item.d.ts +10 -0
- package/timeline-item.d.ts.map +1 -1
- package/utils/conversation.d.ts +7 -0
- package/utils/conversation.d.ts.map +1 -0
- package/utils/conversation.js +18 -0
- package/utils/conversation.js.map +1 -0
- package/utils/id.d.ts +3 -0
- package/utils/id.d.ts.map +1 -1
- package/utils/id.js +3 -0
- package/utils/id.js.map +1 -1
- package/utils/index.d.ts +2 -1
- package/utils/index.js +2 -1
- package/utils/metadata-hash.d.ts +12 -0
- package/utils/metadata-hash.d.ts.map +1 -0
- package/utils/metadata-hash.js +26 -0
- package/utils/metadata-hash.js.map +1 -0
- package/utils/text.d.ts +3 -0
- package/utils/text.d.ts.map +1 -1
- package/utils/text.js +3 -0
- package/utils/text.js.map +1 -1
- package/utils/use-render-element.d.ts +3 -0
- package/utils/use-render-element.d.ts.map +1 -1
- package/utils/use-render-element.js +3 -0
- package/utils/use-render-element.js.map +1 -1
- package/support/context/config.d.ts +0 -32
- package/support/context/config.d.ts.map +0 -1
- package/support/context/config.js +0 -27
- package/support/context/config.js.map +0 -1
- package/support/support-CMoDLQoC.css.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref]\n\t\t\t);\n\n\t\t\tconst isInitialRender = React.useRef(true);\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (autoScroll && internalRef.current) {\n\t\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\n\t\t\t\t\t// Only scroll if there are new items or it's the first render\n\t\t\t\t\tif (hasNewItems || isInitialRender.current) {\n\t\t\t\t\t\tinternalRef.current.scrollTop = internalRef.current.scrollHeight;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update refs for next render\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tisInitialRender.current = false;\n\t\t\t\t}\n\t\t\t}, [items.length, autoScroll]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\t// Check if scrolled to top\n\t\t\t\t\tif (scrollTop === 0 && onScrollStart) {\n\t\t\t\t\t\tonScrollStart();\n\t\t\t\t\t}\n\n\t\t\t\t\t// Check if scrolled to bottom\n\t\t\t\t\tif (scrollTop + clientHeight >= scrollHeight - 10 && onScrollEnd) {\n\t\t\t\t\t\tonScrollEnd();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;AAoCA,MAAa,8BAA8B;CAC1C,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,QAAQ,EAAE,EACV,YAAY,OACZ,UAAU,OACV,aAAa,MACb,aACA,cACA,GAAG,SAEJ,QACI;EACJ,MAAM,cAAcA,QAAM,OAAuB,KAAK;EACtD,MAAM,UAAUA,QAAM,aACpB,SAAgC;AAChC,eAAY,UAAU;AACtB,OAAI,OAAO,QAAQ,WAClB,KAAI,KAAK;YACC,IACV,CAAC,IAAsD,UACtD;KAGH,CAAC,IAAI,CACL;EAED,MAAM,kBAAkBA,QAAM,OAAO,KAAK;EAC1C,MAAM,oBAAoBA,QAAM,OAAO,MAAM,OAAO;EAEpD,MAAMC,cAA+C;GACpD,WAAW,MAAM;GACjB;GACA;GACA,SAAS,MAAM,WAAW;GAC1B;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAG1D,UAAM,gBAAgB;AACrB,OAAI,cAAc,YAAY,SAAS;AAItC,QAHoB,MAAM,SAAS,kBAAkB,WAGlC,gBAAgB,QAClC,aAAY,QAAQ,YAAY,YAAY,QAAQ;AAIrD,sBAAkB,UAAU,MAAM;AAClC,oBAAgB,UAAU;;KAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;EAG9B,MAAM,eAAeD,QAAM,aACzB,MAAqC;GAErC,MAAM,EAAE,WAAW,cAAc,iBADjB,EAAE;AAIlB,OAAI,cAAc,KAAK,cACtB,gBAAe;AAIhB,OAAI,YAAY,gBAAgB,eAAe,MAAM,YACpD,cAAa;KAGf,CAAC,eAAe,YAAY,CAC5B;AAED,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc;IACd,aAAa;IACb,iBAAiB;IACjB,UAAU;IACV,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,uCAAuC;CACnD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,qCAAqC;CACjD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,mCAAmC;CAC/C,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
|
|
1
|
+
{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\nconst BOTTOM_THRESHOLD_PX = 12;\nconst TOP_THRESHOLD_PX = 2;\n\nfunction getLastItemKey(items: TimelineItemType[]): string | number | null {\n\tif (items.length === 0) {\n\t\treturn null;\n\t}\n\n\tconst lastItem = items.at(-1);\n\n\tif (lastItem?.id) {\n\t\treturn lastItem.id;\n\t}\n\n\treturn lastItem?.createdAt ?? null;\n}\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref]\n\t\t\t);\n\n\t\t\tconst isInitialRender = React.useRef(true);\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\t\t\tconst previousLastItemKey = React.useRef<string | number | null>(\n\t\t\t\tgetLastItemKey(items)\n\t\t\t);\n\t\t\tconst isPinnedToBottom = React.useRef(true);\n\t\t\tconst isAtTop = React.useRef(true);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst lastItemKey = getLastItemKey(items);\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tconst element = internalRef.current;\n\n\t\t\t\tif (!(element && autoScroll)) {\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\t\tisInitialRender.current = false;\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\t\t\t\tconst itemsRemoved = items.length < previousItemCount.current;\n\t\t\t\tconst appendedNewItem =\n\t\t\t\t\thasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\t\t\t\tconst replacedLastItem =\n\t\t\t\t\t!hasNewItems &&\n\t\t\t\t\tlastItemKey !== null &&\n\t\t\t\t\tlastItemKey !== previousLastItemKey.current;\n\n\t\t\t\tconst shouldSnapToBottom =\n\t\t\t\t\tisInitialRender.current ||\n\t\t\t\t\t(itemsRemoved && isPinnedToBottom.current) ||\n\t\t\t\t\t(appendedNewItem && isPinnedToBottom.current) ||\n\t\t\t\t\t(replacedLastItem && isPinnedToBottom.current);\n\n\t\t\t\tif (shouldSnapToBottom) {\n\t\t\t\t\telement.scrollTop = element.scrollHeight;\n\t\t\t\t\tisPinnedToBottom.current = true;\n\t\t\t\t\tisAtTop.current = false;\n\t\t\t\t}\n\n\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\tpreviousLastItemKey.current = lastItemKey;\n\t\t\t\tisInitialRender.current = false;\n\t\t\t}, [autoScroll, items.length, lastItemKey]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\tconst distanceFromBottom = scrollHeight - scrollTop - clientHeight;\n\t\t\t\t\tconst pinnedNow = distanceFromBottom <= BOTTOM_THRESHOLD_PX;\n\t\t\t\t\tif (pinnedNow && !isPinnedToBottom.current) {\n\t\t\t\t\t\tonScrollEnd?.();\n\t\t\t\t\t}\n\t\t\t\t\tisPinnedToBottom.current = pinnedNow;\n\n\t\t\t\t\tconst atTop = scrollTop <= TOP_THRESHOLD_PX;\n\t\t\t\t\tif (atTop && !isAtTop.current) {\n\t\t\t\t\t\tonScrollStart?.();\n\t\t\t\t\t}\n\t\t\t\t\tisAtTop.current = atTop;\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\t// Static fade effect on top and bottom\n\t\t\tconst fadeStyle = React.useMemo(() => {\n\t\t\t\tconst maskHeight = \"90px\";\n\t\t\t\tconst scrollbarWidth = \"8px\";\n\n\t\t\t\tconst maskImage = `linear-gradient(to bottom, transparent, black ${maskHeight}, black calc(100% - ${maskHeight}), transparent), linear-gradient(black, black)`;\n\t\t\t\tconst maskSize = `calc(100% - ${scrollbarWidth}) 100%, ${scrollbarWidth} 100%`;\n\t\t\t\tconst maskPosition = \"0 0, 100% 0\";\n\t\t\t\tconst maskRepeat = \"no-repeat, no-repeat\";\n\n\t\t\t\treturn {\n\t\t\t\t\tmaskImage,\n\t\t\t\t\tmaskSize,\n\t\t\t\t\tmaskPosition,\n\t\t\t\t\tmaskRepeat,\n\t\t\t\t\tWebkitMaskImage: maskImage,\n\t\t\t\t\tWebkitMaskSize: maskSize,\n\t\t\t\t\tWebkitMaskPosition: maskPosition,\n\t\t\t\t\tWebkitMaskRepeat: maskRepeat,\n\t\t\t\t};\n\t\t\t}, []);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\tstyle: fadeStyle,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":";;;;AAgCA,MAAM,sBAAsB;AAC5B,MAAM,mBAAmB;AAEzB,SAAS,eAAe,OAAmD;AAC1E,KAAI,MAAM,WAAW,EACpB,QAAO;CAGR,MAAM,WAAW,MAAM,GAAG,GAAG;AAE7B,KAAI,UAAU,GACb,QAAO,SAAS;AAGjB,QAAO,UAAU,aAAa;;;;;;AAO/B,MAAa,8BAA8B;CAC1C,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,QAAQ,EAAE,EACV,YAAY,OACZ,UAAU,OACV,aAAa,MACb,aACA,cACA,GAAG,SAEJ,QACI;EACJ,MAAM,cAAcA,QAAM,OAAuB,KAAK;EACtD,MAAM,UAAUA,QAAM,aACpB,SAAgC;AAChC,eAAY,UAAU;AACtB,OAAI,OAAO,QAAQ,WAClB,KAAI,KAAK;YACC,IACV,CAAC,IAAsD,UACtD;KAGH,CAAC,IAAI,CACL;EAED,MAAM,kBAAkBA,QAAM,OAAO,KAAK;EAC1C,MAAM,oBAAoBA,QAAM,OAAO,MAAM,OAAO;EACpD,MAAM,sBAAsBA,QAAM,OACjC,eAAe,MAAM,CACrB;EACD,MAAM,mBAAmBA,QAAM,OAAO,KAAK;EAC3C,MAAM,UAAUA,QAAM,OAAO,KAAK;EAElC,MAAMC,cAA+C;GACpD,WAAW,MAAM;GACjB;GACA;GACA,SAAS,MAAM,WAAW;GAC1B;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;EAE1D,MAAM,cAAc,eAAe,MAAM;AAGzC,UAAM,gBAAgB;GACrB,MAAM,UAAU,YAAY;AAE5B,OAAI,EAAE,WAAW,aAAa;AAC7B,sBAAkB,UAAU,MAAM;AAClC,wBAAoB,UAAU;AAC9B,oBAAgB,UAAU;AAC1B;;GAGD,MAAM,cAAc,MAAM,SAAS,kBAAkB;GACrD,MAAM,eAAe,MAAM,SAAS,kBAAkB;GACtD,MAAM,kBACL,eACA,gBAAgB,QAChB,gBAAgB,oBAAoB;GACrC,MAAM,mBACL,CAAC,eACD,gBAAgB,QAChB,gBAAgB,oBAAoB;AAQrC,OALC,gBAAgB,WACf,gBAAgB,iBAAiB,WACjC,mBAAmB,iBAAiB,WACpC,oBAAoB,iBAAiB,SAEf;AACvB,YAAQ,YAAY,QAAQ;AAC5B,qBAAiB,UAAU;AAC3B,YAAQ,UAAU;;AAGnB,qBAAkB,UAAU,MAAM;AAClC,uBAAoB,UAAU;AAC9B,mBAAgB,UAAU;KACxB;GAAC;GAAY,MAAM;GAAQ;GAAY,CAAC;EAG3C,MAAM,eAAeD,QAAM,aACzB,MAAqC;GAErC,MAAM,EAAE,WAAW,cAAc,iBADjB,EAAE;GAIlB,MAAM,YADqB,eAAe,YAAY,gBACd;AACxC,OAAI,aAAa,CAAC,iBAAiB,QAClC,gBAAe;AAEhB,oBAAiB,UAAU;GAE3B,MAAM,QAAQ,aAAa;AAC3B,OAAI,SAAS,CAAC,QAAQ,QACrB,kBAAiB;AAElB,WAAQ,UAAU;KAEnB,CAAC,eAAe,YAAY,CAC5B;EAGD,MAAM,YAAYA,QAAM,cAAc;GACrC,MAAM,aAAa;GACnB,MAAM,iBAAiB;GAEvB,MAAM,YAAY,iDAAiD,WAAW,sBAAsB,WAAW;GAC/G,MAAM,WAAW,eAAe,eAAe,UAAU,eAAe;GACxE,MAAM,eAAe;GACrB,MAAM,aAAa;AAEnB,UAAO;IACN;IACA;IACA;IACA;IACA,iBAAiB;IACjB,gBAAgB;IAChB,oBAAoB;IACpB,kBAAkB;IAClB;KACC,EAAE,CAAC;AAEN,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc;IACd,aAAa;IACb,iBAAiB;IACjB,UAAU;IACV,OAAO;IACP,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,uCAAuC;CACnD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,qCAAqC;CACjD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,mCAAmC;CAC/C,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
|
package/primitives/index.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js"
|
|
|
10
10
|
import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
|
|
11
11
|
import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
|
|
12
12
|
import { SupportWindow } from "./window.js";
|
|
13
|
+
import "./index.parts.js";
|
|
13
14
|
|
|
14
15
|
//#region src/primitives/index.d.ts
|
|
15
16
|
declare namespace index_d_exports {
|
|
@@ -3,6 +3,7 @@ import { SupportConfig } from "../support-config.js";
|
|
|
3
3
|
import { Avatar } from "./avatar/avatar.js";
|
|
4
4
|
import { AvatarFallback } from "./avatar/fallback.js";
|
|
5
5
|
import { AvatarImage } from "./avatar/image.js";
|
|
6
|
+
import "./avatar/index.js";
|
|
6
7
|
import { SupportBubble } from "./bubble.js";
|
|
7
8
|
import { Button } from "./button.js";
|
|
8
9
|
import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"multimodal-input.d.ts","names":[],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":[],"mappings":";;;KAGY,oBAAA,GAAuB,KAClC,OAAA,CAAM,uBAAuB;;EADlB,QAAA,EAAA,CAAA,KAAA,EAAA,MAAoB,EAAA,GAAA,IAAA;
|
|
1
|
+
{"version":3,"file":"multimodal-input.d.ts","names":[],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":[],"mappings":";;;KAGY,oBAAA,GAAuB,KAClC,OAAA,CAAM,uBAAuB;;EADlB,QAAA,EAAA,CAAA,KAAA,EAAA,MAAoB,EAAA,GAAA,IAAA;EACF,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAA7B,YAAM,CAAA,EAAA,CAAA,KAAA,EAMiB,IANjB,EAAA,EAAA,GAAA,IAAA;EAD4B,OAAA,CAAA,EAAA,OAAA;EAOX,SAAA,CAAA,EAAA,MAAA;EAGf,KAAA,CAAA,EAAA,KAAA,GAAA,IAAA;EAAK,QAAA,CAAA,EAAA,OAAA;AASd,CAAA;;;;;;cAAa,iBAAe,OAAA,CAAA,0BAAA,KAAA,OAAA,CAAA,uBAAA;;EAAA,QAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAA,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EA4GhB,YAAA,CAAA,EAAA,CAAA,KAAc,EAxHF,IAwHE,EAAA,EAAA,GAAA,IAAA;EAA6B,OAAA,CAAA,EAAA,OAAA;EAA1B,SAAM,CAAA,EAAA,MAAA;EACX,KAAA,CAAA,EAtHf,KAsHe,GAAA,IAAA;EAAI,QAAA,CAAA,EAAA,OAAA;AAQ5B,CAAA,wBAkCI,oBAAA,CAAA,CAAA;AAlCkB,KATV,cAAA,GAAiB,OAAA,CAAM,mBASb,CATiC,gBASjC,CAAA,GAAA;EAAA,YAAA,CAAA,EAAA,CAAA,KAAA,EARE,IAQF,EAAA,EAAA,GAAA,IAAA;EARE,OAAA,CAAA,EAAA,OAAA;;;;;AA6CxB;AAAyB,cArCZ,SAqCY,EArCH,OAAA,CAAA,yBAqCG,CArCH,OAAA,CAAA,mBAqCG,CArCH,gBAqCG,CAAA,GAAA;EAAA,YAAA,CAAA,EAAA,CAAA,KAAA,EA7CD,IA6CC,EAAA,EAAA,GAAA,IAAA;EAAA,OAAA,CAAA,EAAA,OAAA;CAtKD,wBAAA,iBAAA,CAAA,CAAA;AAGf,cAmKI,YAnKJ,EAmKgB,OAAA,CAAA,yBAnKhB,CAmKgB,IAnKhB,CAmKgB,OAAA,CAAA,sBAnKhB,CAmKgB,mBAnKhB,CAAA,EAAA,UAAA,GAAA,OAAA,CAAA,GAAA;;;EAmKgB,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAAA,YAAA,CAAA,EAAA,CAAA,KAAA,EAtKD,IAsKC,EAAA,EAAA,GAAA,IAAA;;;UAnKhB"}
|
|
@@ -21,7 +21,7 @@ type TimelineItemGroupRenderProps = {
|
|
|
21
21
|
firstItemId: string | undefined;
|
|
22
22
|
lastItemId: string | undefined;
|
|
23
23
|
hasBeenSeenByViewer?: boolean;
|
|
24
|
-
seenByIds?: string[];
|
|
24
|
+
seenByIds?: readonly string[];
|
|
25
25
|
};
|
|
26
26
|
type TimelineItemGroupProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
27
27
|
children?: React$1.ReactNode | ((props: TimelineItemGroupRenderProps) => React$1.ReactNode);
|
|
@@ -30,7 +30,7 @@ type TimelineItemGroupProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "chil
|
|
|
30
30
|
items: TimelineItem[];
|
|
31
31
|
viewerId?: string;
|
|
32
32
|
viewerType?: SenderType;
|
|
33
|
-
seenByIds?: string[];
|
|
33
|
+
seenByIds?: readonly string[];
|
|
34
34
|
lastReadItemIds?: Map<string, string>;
|
|
35
35
|
};
|
|
36
36
|
/**
|
|
@@ -46,7 +46,7 @@ declare const TimelineItemGroup: React$1.ForwardRefExoticComponent<Omit<React$1.
|
|
|
46
46
|
items: TimelineItem[];
|
|
47
47
|
viewerId?: string;
|
|
48
48
|
viewerType?: SenderType;
|
|
49
|
-
seenByIds?: string[];
|
|
49
|
+
seenByIds?: readonly string[];
|
|
50
50
|
lastReadItemIds?: Map<string, string>;
|
|
51
51
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
52
52
|
type TimelineItemGroupAvatarProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
@@ -109,12 +109,12 @@ declare const TimelineItemGroupContent: React$1.ForwardRefExoticComponent<Omit<R
|
|
|
109
109
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
110
110
|
type TimelineItemGroupSeenIndicatorProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
111
111
|
children?: React$1.ReactNode | ((props: {
|
|
112
|
-
seenByIds: string[];
|
|
112
|
+
seenByIds: readonly string[];
|
|
113
113
|
hasBeenSeen: boolean;
|
|
114
114
|
}) => React$1.ReactNode);
|
|
115
115
|
asChild?: boolean;
|
|
116
116
|
className?: string;
|
|
117
|
-
seenByIds?: string[];
|
|
117
|
+
seenByIds?: readonly string[];
|
|
118
118
|
};
|
|
119
119
|
/**
|
|
120
120
|
* Utility slot for showing who has viewed the most recent timeline item in the
|
|
@@ -123,12 +123,12 @@ type TimelineItemGroupSeenIndicatorProps = Omit<React$1.HTMLAttributes<HTMLDivEl
|
|
|
123
123
|
*/
|
|
124
124
|
declare const TimelineItemGroupSeenIndicator: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
125
125
|
children?: React$1.ReactNode | ((props: {
|
|
126
|
-
seenByIds: string[];
|
|
126
|
+
seenByIds: readonly string[];
|
|
127
127
|
hasBeenSeen: boolean;
|
|
128
128
|
}) => React$1.ReactNode);
|
|
129
129
|
asChild?: boolean;
|
|
130
130
|
className?: string;
|
|
131
|
-
seenByIds?: string[];
|
|
131
|
+
seenByIds?: readonly string[];
|
|
132
132
|
} & React$1.RefAttributes<HTMLDivElement>>;
|
|
133
133
|
type TimelineItemGroupReadIndicatorProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
134
134
|
children?: React$1.ReactNode | ((props: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-item-group.d.ts","names":[],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":[],"mappings":";;;;;;;;AASA
|
|
1
|
+
{"version":3,"file":"timeline-item-group.d.ts","names":[],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-item-group.js","names":["React","senderType: SenderType","renderProps: TimelineItemGroupRenderProps","_lastReaderIds: string[]","_readers: Array<{ userId: string; isLastRead: boolean }>"],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":["import type { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Shape returned to render-prop children describing the grouped timeline items state\n * and viewer specific flags.\n */\nexport type TimelineItemGroupRenderProps = {\n\t// Sender information\n\tsenderType: SenderType;\n\tsenderId: string;\n\tviewerType?: SenderType;\n\n\t// POV flags - who is viewing\n\tisSentByViewer: boolean; // True if the current viewer sent these items\n\tisReceivedByViewer: boolean; // True if the current viewer received these items\n\n\t// Sender type flags for convenience\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisTeamMember: boolean;\n\n\t// Item info\n\titemCount: number;\n\tfirstItemId: string | undefined;\n\tlastItemId: string | undefined;\n\n\t// Seen status\n\thasBeenSeenByViewer?: boolean;\n\tseenByIds?: string[]; // IDs of users who have seen the last item in group\n};\n\nexport type TimelineItemGroupProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemGroupRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems: TimelineItemType[];\n\n\t// POV context - who is viewing these timeline items\n\tviewerId?: string; // ID of the current viewer\n\tviewerType?: SenderType; // Type of the current viewer\n\n\t// Seen data\n\tseenByIds?: string[]; // IDs of users who have seen these timeline items\n\tlastReadItemIds?: Map<string, string>; // Map of userId -> lastItemId they read\n};\n\n/**\n * Groups sequential timeline items from the same sender and exposes render helpers\n * that describe who sent the batch and whether the active viewer has seen it.\n * Consumers can either render their own layout via a render prop or rely on\n * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.\n */\nexport const TimelineItemGroup = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemGroupProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tviewerId,\n\t\t\t\tseenByIds = [],\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { viewerType, ...elementProps } = restProps;\n\n\t\t\t// Determine sender type from first timeline item in group\n\t\t\tconst firstItem = items[0];\n\t\t\t// biome-ignore lint/style/useAtIndex: ok\n\t\t\tconst lastItem = items[items.length - 1];\n\n\t\t\t// Determine sender info\n\t\t\tlet senderId = \"\";\n\t\t\tlet senderType: SenderType;\n\n\t\t\tif (firstItem?.visitorId) {\n\t\t\t\tsenderId = firstItem.visitorId;\n\t\t\t\tsenderType = \"visitor\" as SenderType;\n\t\t\t} else if (firstItem?.aiAgentId) {\n\t\t\t\tsenderId = firstItem.aiAgentId;\n\t\t\t\tsenderType = \"ai\" as SenderType;\n\t\t\t} else if (firstItem?.userId) {\n\t\t\t\tsenderId = firstItem.userId;\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t} else {\n\t\t\t\t// Fallback\n\t\t\t\tsenderId = firstItem?.id || \"unknown\";\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t}\n\n\t\t\t// Determine POV\n\t\t\tconst isSentByViewer = viewerId\n\t\t\t\t? senderId === viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType === viewerType\n\t\t\t\t\t: false;\n\t\t\tconst isReceivedByViewer = viewerId\n\t\t\t\t? senderId !== viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType !== viewerType\n\t\t\t\t\t: true;\n\n\t\t\t// Convenience flags\n\t\t\tconst isVisitor = senderType === \"visitor\";\n\t\t\tconst isAI = senderType === \"ai\";\n\t\t\tconst isTeamMember = senderType === \"team_member\";\n\n\t\t\t// Check if viewer has seen these timeline items\n\t\t\tconst hasBeenSeenByViewer = viewerId\n\t\t\t\t? seenByIds.includes(viewerId)\n\t\t\t\t: undefined;\n\n\t\t\tconst renderProps: TimelineItemGroupRenderProps = {\n\t\t\t\tsenderType,\n\t\t\t\tsenderId,\n\t\t\t\tviewerType,\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t\titemCount: items.length,\n\t\t\t\tfirstItemId: firstItem?.id,\n\t\t\t\tlastItemId: lastItem?.id,\n\t\t\t\thasBeenSeenByViewer,\n\t\t\t\tseenByIds,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"group\",\n\t\t\t\t\t\t\"aria-label\": `Timeline item group from ${senderType}`,\n\t\t\t\t\t\t...elementProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroup\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupAvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Optional slot rendered next to a grouped batch to display an avatar, agent\n * badge or any other sender metadata supplied by the consumer UI.\n */\nexport const TimelineItemGroupAvatar = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupAvatarProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupAvatar\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupHeaderProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tname?: string;\n\t\t\t\tsenderId?: string;\n\t\t\t\tsenderType?: SenderType;\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tname?: string;\n\tsenderId?: string;\n\tsenderType?: SenderType;\n};\n\n/**\n * Decorative or semantic wrapper rendered above a timeline item batch. Useful for\n * injecting agent names, timestamps or custom status labels tied to the sender\n * metadata supplied by `TimelineItemGroup`.\n */\nexport const TimelineItemGroupHeader = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupHeaderProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tname,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ name, senderId, senderType })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupHeader\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Container for the actual timeline items within a batch. Consumers can\n * override the structure while inheriting layout props passed down from the\n * parent group.\n */\nexport const TimelineItemGroupContent = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupContentProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupSeenIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tseenByIds: string[];\n\t\t\t\thasBeenSeen: boolean;\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tseenByIds?: string[];\n};\n\n/**\n * Utility slot for showing who has viewed the most recent timeline item in the\n * group. Works with simple text children or a render prop for advanced\n * displays.\n */\nexport const TimelineItemGroupSeenIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupSeenIndicatorProps\n\t>(\n\t\t(\n\t\t\t{ children, className, asChild = false, seenByIds = [], ...props },\n\t\t\tref\n\t\t) => {\n\t\t\tconst hasBeenSeen = seenByIds.length > 0;\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ seenByIds, hasBeenSeen })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupSeenIndicator\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupReadIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\treaders: Array<{ userId: string; isLastRead: boolean }>;\n\t\t\t\tlastReaderIds: string[];\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titemId: string;\n\tlastReadItemIds?: Map<string, string>;\n};\n\n/**\n * Renders read receipts for the tail timeline item in a group. It surfaces the list\n * of readers and callers can decide whether to render avatars, tooltips or a\n * basic label.\n */\nexport const TimelineItemGroupReadIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupReadIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titemId,\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\t// Find all users who stopped reading at this timeline item\n\t\t\tconst { lastReaderIds, readers } = React.useMemo(() => {\n\t\t\t\tconst _lastReaderIds: string[] = [];\n\t\t\t\tconst _readers: Array<{ userId: string; isLastRead: boolean }> = [];\n\n\t\t\t\tif (lastReadItemIds) {\n\t\t\t\t\tlastReadItemIds.forEach((lastItemId, userId) => {\n\t\t\t\t\t\tif (lastItemId === itemId) {\n\t\t\t\t\t\t\t_lastReaderIds.push(userId);\n\t\t\t\t\t\t\t_readers.push({ userId, isLastRead: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn { lastReaderIds: _lastReaderIds, readers: _readers };\n\t\t\t}, [itemId, lastReadItemIds]);\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ readers, lastReaderIds })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupReadIndicator\";\n\treturn Component;\n})();\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"timeline-item-group.js","names":["React","senderType: SenderType","renderProps: TimelineItemGroupRenderProps","_lastReaderIds: string[]","_readers: Array<{ userId: string; isLastRead: boolean }>"],"sources":["../../src/primitives/timeline-item-group.tsx"],"sourcesContent":["import type { SenderType } from \"@cossistant/types\";\nimport type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Shape returned to render-prop children describing the grouped timeline items state\n * and viewer specific flags.\n */\nexport type TimelineItemGroupRenderProps = {\n\t// Sender information\n\tsenderType: SenderType;\n\tsenderId: string;\n\tviewerType?: SenderType;\n\n\t// POV flags - who is viewing\n\tisSentByViewer: boolean; // True if the current viewer sent these items\n\tisReceivedByViewer: boolean; // True if the current viewer received these items\n\n\t// Sender type flags for convenience\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisTeamMember: boolean;\n\n\t// Item info\n\titemCount: number;\n\tfirstItemId: string | undefined;\n\tlastItemId: string | undefined;\n\n\t// Seen status\n\thasBeenSeenByViewer?: boolean;\n\tseenByIds?: readonly string[]; // IDs of users who have seen the last item in group\n};\n\nexport type TimelineItemGroupProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemGroupRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems: TimelineItemType[];\n\n\t// POV context - who is viewing these timeline items\n\tviewerId?: string; // ID of the current viewer\n\tviewerType?: SenderType; // Type of the current viewer\n\n\t// Seen data\n\tseenByIds?: readonly string[]; // IDs of users who have seen these timeline items\n\tlastReadItemIds?: Map<string, string>; // Map of userId -> lastItemId they read\n};\n\n/**\n * Groups sequential timeline items from the same sender and exposes render helpers\n * that describe who sent the batch and whether the active viewer has seen it.\n * Consumers can either render their own layout via a render prop or rely on\n * slotted children. Typically used for MESSAGE-type items; EVENT items are usually rendered separately.\n */\nexport const TimelineItemGroup = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemGroupProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tviewerId,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...restProps\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { viewerType, ...elementProps } = restProps;\n\n\t\t\t// Determine sender type from first timeline item in group\n\t\t\tconst firstItem = items[0];\n\t\t\t// biome-ignore lint/style/useAtIndex: ok\n\t\t\tconst lastItem = items[items.length - 1];\n\n\t\t\t// Determine sender info\n\t\t\tlet senderId = \"\";\n\t\t\tlet senderType: SenderType;\n\n\t\t\tif (firstItem?.visitorId) {\n\t\t\t\tsenderId = firstItem.visitorId;\n\t\t\t\tsenderType = \"visitor\" as SenderType;\n\t\t\t} else if (firstItem?.aiAgentId) {\n\t\t\t\tsenderId = firstItem.aiAgentId;\n\t\t\t\tsenderType = \"ai\" as SenderType;\n\t\t\t} else if (firstItem?.userId) {\n\t\t\t\tsenderId = firstItem.userId;\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t} else {\n\t\t\t\t// Fallback\n\t\t\t\tsenderId = firstItem?.id || \"unknown\";\n\t\t\t\tsenderType = \"team_member\" as SenderType;\n\t\t\t}\n\n\t\t\t// Determine POV\n\t\t\tconst isSentByViewer = viewerId\n\t\t\t\t? senderId === viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType === viewerType\n\t\t\t\t\t: false;\n\t\t\tconst isReceivedByViewer = viewerId\n\t\t\t\t? senderId !== viewerId\n\t\t\t\t: viewerType\n\t\t\t\t\t? senderType !== viewerType\n\t\t\t\t\t: true;\n\n\t\t\t// Convenience flags\n\t\t\tconst isVisitor = senderType === \"visitor\";\n\t\t\tconst isAI = senderType === \"ai\";\n\t\t\tconst isTeamMember = senderType === \"team_member\";\n\n\t\t\t// Check if viewer has seen these timeline items\n\t\t\tconst hasBeenSeenByViewer = viewerId\n\t\t\t\t? seenByIds.includes(viewerId)\n\t\t\t\t: undefined;\n\n\t\t\tconst renderProps: TimelineItemGroupRenderProps = {\n\t\t\t\tsenderType,\n\t\t\t\tsenderId,\n\t\t\t\tviewerType,\n\t\t\t\tisSentByViewer,\n\t\t\t\tisReceivedByViewer,\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisTeamMember,\n\t\t\t\titemCount: items.length,\n\t\t\t\tfirstItemId: firstItem?.id,\n\t\t\t\tlastItemId: lastItem?.id,\n\t\t\t\thasBeenSeenByViewer,\n\t\t\t\tseenByIds,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"group\",\n\t\t\t\t\t\t\"aria-label\": `Timeline item group from ${senderType}`,\n\t\t\t\t\t\t...elementProps,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroup\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupAvatarProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Optional slot rendered next to a grouped batch to display an avatar, agent\n * badge or any other sender metadata supplied by the consumer UI.\n */\nexport const TimelineItemGroupAvatar = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupAvatarProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupAvatar\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupHeaderProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tname?: string;\n\t\t\t\tsenderId?: string;\n\t\t\t\tsenderType?: SenderType;\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tname?: string;\n\tsenderId?: string;\n\tsenderType?: SenderType;\n};\n\n/**\n * Decorative or semantic wrapper rendered above a timeline item batch. Useful for\n * injecting agent names, timestamps or custom status labels tied to the sender\n * metadata supplied by `TimelineItemGroup`.\n */\nexport const TimelineItemGroupHeader = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupHeaderProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tname,\n\t\t\t\tsenderId,\n\t\t\t\tsenderType,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ name, senderId, senderType })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupHeader\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Container for the actual timeline items within a batch. Consumers can\n * override the structure while inheriting layout props passed down from the\n * parent group.\n */\nexport const TimelineItemGroupContent = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupContentProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupSeenIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\tseenByIds: readonly string[];\n\t\t\t\thasBeenSeen: boolean;\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\tseenByIds?: readonly string[];\n};\n\n/**\n * Utility slot for showing who has viewed the most recent timeline item in the\n * group. Works with simple text children or a render prop for advanced\n * displays.\n */\nexport const TimelineItemGroupSeenIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupSeenIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tseenByIds = [] as readonly string[],\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst hasBeenSeen = seenByIds.length > 0;\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ seenByIds, hasBeenSeen })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupSeenIndicator\";\n\treturn Component;\n})();\n\nexport type TimelineItemGroupReadIndicatorProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: {\n\t\t\t\treaders: Array<{ userId: string; isLastRead: boolean }>;\n\t\t\t\tlastReaderIds: string[];\n\t\t }) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titemId: string;\n\tlastReadItemIds?: Map<string, string>;\n};\n\n/**\n * Renders read receipts for the tail timeline item in a group. It surfaces the list\n * of readers and callers can decide whether to render avatars, tooltips or a\n * basic label.\n */\nexport const TimelineItemGroupReadIndicator = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tTimelineItemGroupReadIndicatorProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titemId,\n\t\t\t\tlastReadItemIds,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\t// Find all users who stopped reading at this timeline item\n\t\t\tconst { lastReaderIds, readers } = React.useMemo(() => {\n\t\t\t\tconst _lastReaderIds: string[] = [];\n\t\t\t\tconst _readers: Array<{ userId: string; isLastRead: boolean }> = [];\n\n\t\t\t\tif (lastReadItemIds) {\n\t\t\t\t\tlastReadItemIds.forEach((lastItemId, userId) => {\n\t\t\t\t\t\tif (lastItemId === itemId) {\n\t\t\t\t\t\t\t_lastReaderIds.push(userId);\n\t\t\t\t\t\t\t_readers.push({ userId, isLastRead: true });\n\t\t\t\t\t\t}\n\t\t\t\t\t});\n\t\t\t\t}\n\n\t\t\t\treturn { lastReaderIds: _lastReaderIds, readers: _readers };\n\t\t\t}, [itemId, lastReadItemIds]);\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children({ readers, lastReaderIds })\n\t\t\t\t\t: children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemGroupReadIndicator\";\n\treturn Component;\n})();\n"],"mappings":"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"}
|
|
@@ -14,7 +14,7 @@ type TimelineItemRenderProps = {
|
|
|
14
14
|
timestamp: Date;
|
|
15
15
|
text: string | null;
|
|
16
16
|
senderType: "visitor" | "ai" | "human";
|
|
17
|
-
itemType: "message" | "event";
|
|
17
|
+
itemType: "message" | "event" | "identification";
|
|
18
18
|
};
|
|
19
19
|
type TimelineItemProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
20
20
|
children?: React$1.ReactNode | ((props: TimelineItemRenderProps) => React$1.ReactNode);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-item.d.ts","names":[],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":[],"mappings":";;;;;;;AASA;AAUA;
|
|
1
|
+
{"version":3,"file":"timeline-item.d.ts","names":[],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":[],"mappings":";;;;;;;AASA;AAUA;AACsB,KAXV,uBAAA,GAWU;EAArB,SAAM,EAAA,OAAA;EADyB,IAAA,EAAA,OAAA;EAK5B,OAAM,EAAA,OAAA;EACG,SAAA,EAZD,IAYC;EAA4B,IAAA,EAAM,MAAA,GAAA,IAAA;EAGxC,UAAA,EAAA,SAAA,GAAA,IAAA,GAAA,OAAA;EAAgB,QAAA,EAAA,SAAA,GAAA,OAAA,GAAA,gBAAA;AAQvB,CAAA;AAAyB,KAjBb,iBAAA,GAAoB,IAiBP,CAhBxB,OAAA,CAAM,cAgBkB,CAhBH,cAgBG,CAAA,EAAA,UAAA,CAAA,GAAA;EAAA,QAAA,CAAA,EAZrB,OAAA,CAAM,SAYe,GAAA,CAAA,CAAA,KAAA,EAXZ,uBAWY,EAAA,GAXgB,OAAA,CAAM,SAWtB,CAAA;EAAA,OAAA,CAAA,EAAA,OAAA;EAZrB,SAAM,CAAA,EAAA,MAAA;EACG,IAAA,EAGN,cAHM;CAA4B;;;;;;AAoI7B,cAzHC,YAyHuB,EAzHX,OAAA,CAAA,yBAyHW,CAzHX,IAyHW,CAzHX,OAAA,CAAA,cAyHW,CAzHX,cAyHW,CAAA,EAAA,UAAA,CAAA,GAAA;EACd,QAAA,CAAA,EAtIlB,OAAA,CAAM,SAsIY,GAAA,CAAA,CAAA,KAAA,EArIT,uBAqIS,EAAA,GArImB,OAAA,CAAM,SAqIzB,CAAA;EAArB,OAAM,CAAA,EAAA,OAAA;EADgC,SAAA,CAAA,EAAA,MAAA;EAI3B,IAAA,EArIL,cAqIW;CAAkC,wBAAM,eAAA,CAAA,CAAA;AAAS,KAJvD,wBAAA,GAA2B,IAI4B,CAHlE,OAAA,CAAM,cAG4D,CAH7C,cAG6C,CAAA,EAAA,UAAA,CAAA,GAAA;EAYtD,QAAA,CAAA,EAZD,OAAA,CAAM,SA6Dd,GAAA,CAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GA7DgD,OAAA,CAAM,SA6DtD,CAAA;EAjD4B,OAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA;EAAA,IAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAZpB,cAAM,CAAA,EAAA,OAAA;CAAkC;;;;;AA+DpD;AACsB,cApDT,mBAoDS,EApDU,OAAA,CAAA,yBAoDV,CApDU,IAoDV,CApDU,OAAA,CAAA,cAoDV,CApDU,cAoDV,CAAA,EAAA,UAAA,CAAA,GAAA;EAArB,QAAM,CAAA,EAhEK,OAAA,CAAM,SAgEX,GAAA,CAAA,CAAA,OAAA,EAAA,MAAA,EAAA,GAhE6C,OAAA,CAAM,SAgEnD,CAAA;EADkC,OAAA,CAAA,EAAA,OAAA;EAI7B,SAAM,CAAA,EAAA,MAAA;EAAyB,IAAA,CAAA,EAAA,MAAA,GAAA,IAAA;EAAS,cAAM,CAAA,EAAA,OAAA;CAG9C,wBAAA,eAAA,CAAA,CAAA;AACK,KARL,0BAAA,GAA6B,IAQxB,CAPhB,OAAA,CAAM,cAOU,CAPK,eAOL,CAAA,EAAA,UAAA,CAAA,GAAA;EAAI,QAAA,CAAA,EAJT,OAAA,CAAM,SAIG,GAAA,CAAA,CAAA,SAAA,EAJsB,IAItB,EAAA,GAJ+B,OAAA,CAAM,SAIrC,CAAA;EAOR,OAAA,CAAA,EAAA,OAAA;EAAqB,SAAA,CAAA,EAAA,MAAA;EAAA,SAAA,EARtB,IAQsB;EAAA,MAAA,CAAA,EAAA,CAAA,IAAA,EAPjB,IAOiB,EAAA,GAAA,MAAA;CAXtB;;;;;cAWC,uBAAqB,OAAA,CAAA,0BAAA,KAAA,OAAA,CAAA,eAAA;aAXtB,OAAA,CAAM,yBAAyB,SAAS,OAAA,CAAM;EAWxB,OAAA,CAAA,EAAA,OAAA;EAAA,SAAA,CAAA,EAAA,MAAA;aARtB;kBACK"}
|
|
@@ -25,7 +25,13 @@ const TimelineItem = (() => {
|
|
|
25
25
|
itemType: item.type
|
|
26
26
|
};
|
|
27
27
|
const content = typeof children === "function" ? children(renderProps) : children;
|
|
28
|
-
const itemTypeLabel =
|
|
28
|
+
const itemTypeLabel = (() => {
|
|
29
|
+
if (item.type === "event") return "Event";
|
|
30
|
+
if (item.type === "identification") return "Identification";
|
|
31
|
+
if (isVisitor) return "visitor";
|
|
32
|
+
if (isAI) return "AI assistant";
|
|
33
|
+
return "human agent";
|
|
34
|
+
})();
|
|
29
35
|
return useRenderElement("div", {
|
|
30
36
|
className,
|
|
31
37
|
asChild
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline-item.js","names":["React","renderProps: TimelineItemRenderProps"],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Metadata describing the origin of a timeline item and pre-parsed content that can\n * be consumed by render-prop children.\n */\nexport type TimelineItemRenderProps = {\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisHuman: boolean;\n\ttimestamp: Date;\n\ttext: string | null;\n\tsenderType: \"visitor\" | \"ai\" | \"human\";\n\titemType: \"message\" | \"event\";\n};\n\nexport type TimelineItemProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titem: TimelineItemType;\n};\n\n/**\n * Generic timeline item wrapper that adds accessibility attributes and resolves the\n * sender type into convenient render props for custom layouts. Works with\n * both MESSAGE and EVENT timeline item types.\n */\nexport const TimelineItem = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemProps>(\n\t\t({ children, className, asChild = false, item, ...props }, ref) => {\n\t\t\t// Determine sender type from timeline item properties\n\t\t\tconst isVisitor = item.visitorId !== null;\n\t\t\tconst isAI = item.aiAgentId !== null;\n\t\t\tconst isHuman = item.userId !== null && !isVisitor;\n\n\t\t\tconst senderType = isVisitor ? \"visitor\" : isAI ? \"ai\" : \"human\";\n\n\t\t\tconst renderProps: TimelineItemRenderProps = {\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisHuman,\n\t\t\t\ttimestamp: new Date(item.createdAt),\n\t\t\t\ttext: item.text,\n\t\t\t\tsenderType,\n\t\t\t\titemType: item.type,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst itemTypeLabel =\n\t\t\t\titem.type === \"event\"\n\t\t\t\t\t? \"Event\"\n\t\t\t\t\t: isVisitor\n\t\t\t\t\t\t? \"visitor\"\n\t\t\t\t\t\t: isAI\n\t\t\t\t\t\t\t? \"AI assistant\"\n\t\t\t\t\t\t\t: \"human agent\";\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"article\",\n\t\t\t\t\t\t\"aria-label\": `${item.type === \"message\" ? \"Message\" : \"Event\"} from ${itemTypeLabel}`,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItem\";\n\treturn Component;\n})();\n\nconst MemoizedMarkdownBlock = React.memo(\n\t({ content }: { content: string }) => {\n\t\treturn (\n\t\t\t<ReactMarkdown\n\t\t\t\tcomponents={{\n\t\t\t\t\t// Customize paragraph rendering to prevent excessive spacing\n\t\t\t\t\tp: ({ children }) => <span className=\"inline\">{children}</span>,\n\t\t\t\t\t// Ensure proper line break handling\n\t\t\t\t\tbr: () => <br />,\n\t\t\t\t\t// Handle code blocks properly\n\t\t\t\t\tcode: ({ children, ...props }) => {\n\t\t\t\t\t\t// Check if it's inline code by looking at the parent element\n\t\t\t\t\t\tconst isInline = !(\n\t\t\t\t\t\t\t\"className\" in props &&\n\t\t\t\t\t\t\ttypeof props.className === \"string\" &&\n\t\t\t\t\t\t\tprops.className.includes(\"language-\")\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn isInline ? (\n\t\t\t\t\t\t\t<code className=\"rounded bg-co-background-300 px-1 py-0.5 text-xs\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</code>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<pre className=\"overflow-x-auto rounded bg-co-background-300 p-2\">\n\t\t\t\t\t\t\t\t<code className=\"text-xs\">{children}</code>\n\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t\t// Handle strong/bold text\n\t\t\t\t\tstrong: ({ children }) => (\n\t\t\t\t\t\t<strong className=\"font-semibold\">{children}</strong>\n\t\t\t\t\t),\n\t\t\t\t\t// Handle links\n\t\t\t\t\ta: ({ href, children }) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"underline hover:opacity-80\"\n\t\t\t\t\t\t\thref={href}\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</ReactMarkdown>\n\t\t);\n\t},\n\t(prevProps, nextProps) => {\n\t\tif (prevProps.content !== nextProps.content) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n);\n\nMemoizedMarkdownBlock.displayName = \"MemoizedMarkdownBlock\";\n\nexport type TimelineItemContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((content: string) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttext?: string | null;\n\trenderMarkdown?: boolean;\n};\n\n/**\n * Renders the content of a timeline item, optionally piping Markdown content through a\n * memoised renderer or handing the raw text to a render prop for custom\n * formatting.\n */\nexport const TimelineItemContent = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemContentProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttext = \"\",\n\t\t\t\trenderMarkdown = true,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content = React.useMemo(() => {\n\t\t\t\tconst textContent = text ?? \"\";\n\t\t\t\tif (typeof children === \"function\") {\n\t\t\t\t\treturn children(textContent);\n\t\t\t\t}\n\t\t\t\tif (children) {\n\t\t\t\t\treturn children;\n\t\t\t\t}\n\t\t\t\tif (renderMarkdown && textContent) {\n\t\t\t\t\treturn <MemoizedMarkdownBlock content={textContent} />;\n\t\t\t\t}\n\t\t\t\treturn textContent;\n\t\t\t}, [children, text, renderMarkdown]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemTimestampProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((timestamp: Date) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttimestamp: Date;\n\tformat?: (date: Date) => string;\n};\n\n/**\n * Timestamp helper that renders a formatted date or allows callers to supply a\n * render prop for custom time displays while preserving semantic markup.\n */\nexport const TimelineItemTimestamp = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLSpanElement,\n\t\tTimelineItemTimestampProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttimestamp,\n\t\t\t\tformat = (date) =>\n\t\t\t\t\tdate.toLocaleTimeString([], {\n\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t}),\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(timestamp)\n\t\t\t\t\t: children || format(timestamp);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemTimestamp\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;;;AAoCA,MAAa,sBAAsB;CAClC,MAAM,YAAYA,QAAM,YACtB,EAAE,UAAU,WAAW,UAAU,OAAO,KAAM,GAAG,SAAS,QAAQ;EAElE,MAAM,YAAY,KAAK,cAAc;EACrC,MAAM,OAAO,KAAK,cAAc;EAChC,MAAM,UAAU,KAAK,WAAW,QAAQ,CAAC;EAEzC,MAAM,aAAa,YAAY,YAAY,OAAO,OAAO;EAEzD,MAAMC,cAAuC;GAC5C;GACA;GACA;GACA,WAAW,IAAI,KAAK,KAAK,UAAU;GACnC,MAAM,KAAK;GACX;GACA,UAAU,KAAK;GACf;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;EAE1D,MAAM,gBACL,KAAK,SAAS,UACX,UACA,YACC,YACA,OACC,iBACA;AAEN,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc,GAAG,KAAK,SAAS,YAAY,YAAY,QAAQ,QAAQ;IACvE,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;AAEJ,MAAM,wBAAwBD,QAAM,MAClC,EAAE,cAAmC;AACrC,QACC,oBAAC;EACA,YAAY;GAEX,IAAI,EAAE,eAAe,oBAAC;IAAK,WAAU;IAAU;KAAgB;GAE/D,UAAU,oBAAC,SAAK;GAEhB,OAAO,EAAE,SAAU,GAAG,YAAY;AAOjC,WALiB,EAChB,eAAe,SACf,OAAO,MAAM,cAAc,YAC3B,MAAM,UAAU,SAAS,YAAY,IAGrC,oBAAC;KAAK,WAAU;KACd;MACK,GAEP,oBAAC;KAAI,WAAU;eACd,oBAAC;MAAK,WAAU;MAAW;OAAgB;MACtC;;GAIR,SAAS,EAAE,eACV,oBAAC;IAAO,WAAU;IAAiB;KAAkB;GAGtD,IAAI,EAAE,MAAM,eACX,oBAAC;IACA,WAAU;IACJ;IACN,KAAI;IACJ,QAAO;IAEN;KACE;GAEL;YAEA;GACc;IAGjB,WAAW,cAAc;AACzB,KAAI,UAAU,YAAY,UAAU,QACnC,QAAO;AAER,QAAO;EAER;AAED,sBAAsB,cAAc;;;;;;AAkBpC,MAAa,6BAA6B;CACzC,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,OAAO,IACP,iBAAiB,KACjB,GAAG,SAEJ,QACI;EACJ,MAAM,UAAUA,QAAM,cAAc;GACnC,MAAM,cAAc,QAAQ;AAC5B,OAAI,OAAO,aAAa,WACvB,QAAO,SAAS,YAAY;AAE7B,OAAI,SACH,QAAO;AAER,OAAI,kBAAkB,YACrB,QAAO,oBAAC,yBAAsB,SAAS,cAAe;AAEvD,UAAO;KACL;GAAC;GAAU;GAAM;GAAe,CAAC;AAEpC,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV,OAAO,EACN,GAAG,MAAM,OACT;IACD;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAiBJ,MAAa,+BAA+B;CAC3C,MAAM,YAAYA,QAAM,YAKtB,EACC,UACA,WACA,UAAU,OACV,WACA,UAAU,SACT,KAAK,mBAAmB,EAAE,EAAE;EAC3B,MAAM;EACN,QAAQ;EACR,CAAC,CACH,GAAG,SAEJ,QACI;EACJ,MAAM,UACL,OAAO,aAAa,aACjB,SAAS,UAAU,GACnB,YAAY,OAAO,UAAU;AAEjC,SAAO,iBACN,QACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
|
|
1
|
+
{"version":3,"file":"timeline-item.js","names":["React","renderProps: TimelineItemRenderProps"],"sources":["../../src/primitives/timeline-item.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport ReactMarkdown from \"react-markdown\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * Metadata describing the origin of a timeline item and pre-parsed content that can\n * be consumed by render-prop children.\n */\nexport type TimelineItemRenderProps = {\n\tisVisitor: boolean;\n\tisAI: boolean;\n\tisHuman: boolean;\n\ttimestamp: Date;\n\ttext: string | null;\n\tsenderType: \"visitor\" | \"ai\" | \"human\";\n\titemType: \"message\" | \"event\" | \"identification\";\n};\n\nexport type TimelineItemProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: TimelineItemRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titem: TimelineItemType;\n};\n\n/**\n * Generic timeline item wrapper that adds accessibility attributes and resolves the\n * sender type into convenient render props for custom layouts. Works with\n * both MESSAGE and EVENT timeline item types.\n */\nexport const TimelineItem = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemProps>(\n\t\t({ children, className, asChild = false, item, ...props }, ref) => {\n\t\t\t// Determine sender type from timeline item properties\n\t\t\tconst isVisitor = item.visitorId !== null;\n\t\t\tconst isAI = item.aiAgentId !== null;\n\t\t\tconst isHuman = item.userId !== null && !isVisitor;\n\n\t\t\tconst senderType = isVisitor ? \"visitor\" : isAI ? \"ai\" : \"human\";\n\n\t\t\tconst renderProps: TimelineItemRenderProps = {\n\t\t\t\tisVisitor,\n\t\t\t\tisAI,\n\t\t\t\tisHuman,\n\t\t\t\ttimestamp: new Date(item.createdAt),\n\t\t\t\ttext: item.text,\n\t\t\t\tsenderType,\n\t\t\t\titemType: item.type,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\tconst itemTypeLabel = (() => {\n\t\t\t\tif (item.type === \"event\") {\n\t\t\t\t\treturn \"Event\";\n\t\t\t\t}\n\t\t\t\tif (item.type === \"identification\") {\n\t\t\t\t\treturn \"Identification\";\n\t\t\t\t}\n\t\t\t\tif (isVisitor) {\n\t\t\t\t\treturn \"visitor\";\n\t\t\t\t}\n\t\t\t\tif (isAI) {\n\t\t\t\t\treturn \"AI assistant\";\n\t\t\t\t}\n\t\t\t\treturn \"human agent\";\n\t\t\t})();\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"article\",\n\t\t\t\t\t\t\"aria-label\": `${item.type === \"message\" ? \"Message\" : \"Event\"} from ${itemTypeLabel}`,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItem\";\n\treturn Component;\n})();\n\nconst MemoizedMarkdownBlock = React.memo(\n\t({ content }: { content: string }) => {\n\t\treturn (\n\t\t\t<ReactMarkdown\n\t\t\t\tcomponents={{\n\t\t\t\t\t// Customize paragraph rendering to prevent excessive spacing\n\t\t\t\t\tp: ({ children }) => <span className=\"inline\">{children}</span>,\n\t\t\t\t\t// Ensure proper line break handling\n\t\t\t\t\tbr: () => <br />,\n\t\t\t\t\t// Handle code blocks properly\n\t\t\t\t\tcode: ({ children, ...props }) => {\n\t\t\t\t\t\t// Check if it's inline code by looking at the parent element\n\t\t\t\t\t\tconst isInline = !(\n\t\t\t\t\t\t\t\"className\" in props &&\n\t\t\t\t\t\t\ttypeof props.className === \"string\" &&\n\t\t\t\t\t\t\tprops.className.includes(\"language-\")\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn isInline ? (\n\t\t\t\t\t\t\t<code className=\"rounded bg-co-background-300 px-1 py-0.5 text-xs\">\n\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t</code>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<pre className=\"overflow-x-auto rounded bg-co-background-300 p-2\">\n\t\t\t\t\t\t\t\t<code className=\"text-xs\">{children}</code>\n\t\t\t\t\t\t\t</pre>\n\t\t\t\t\t\t);\n\t\t\t\t\t},\n\t\t\t\t\t// Handle strong/bold text\n\t\t\t\t\tstrong: ({ children }) => (\n\t\t\t\t\t\t<strong className=\"font-semibold\">{children}</strong>\n\t\t\t\t\t),\n\t\t\t\t\t// Handle links\n\t\t\t\t\ta: ({ href, children }) => (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\tclassName=\"underline hover:opacity-80\"\n\t\t\t\t\t\t\thref={href}\n\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{content}\n\t\t\t</ReactMarkdown>\n\t\t);\n\t},\n\t(prevProps, nextProps) => {\n\t\tif (prevProps.content !== nextProps.content) {\n\t\t\treturn false;\n\t\t}\n\t\treturn true;\n\t}\n);\n\nMemoizedMarkdownBlock.displayName = \"MemoizedMarkdownBlock\";\n\nexport type TimelineItemContentProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((content: string) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttext?: string | null;\n\trenderMarkdown?: boolean;\n};\n\n/**\n * Renders the content of a timeline item, optionally piping Markdown content through a\n * memoised renderer or handing the raw text to a render prop for custom\n * formatting.\n */\nexport const TimelineItemContent = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, TimelineItemContentProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttext = \"\",\n\t\t\t\trenderMarkdown = true,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content = React.useMemo(() => {\n\t\t\t\tconst textContent = text ?? \"\";\n\t\t\t\tif (typeof children === \"function\") {\n\t\t\t\t\treturn children(textContent);\n\t\t\t\t}\n\t\t\t\tif (children) {\n\t\t\t\t\treturn children;\n\t\t\t\t}\n\t\t\t\tif (renderMarkdown && textContent) {\n\t\t\t\t\treturn <MemoizedMarkdownBlock content={textContent} />;\n\t\t\t\t}\n\t\t\t\treturn textContent;\n\t\t\t}, [children, text, renderMarkdown]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemContent\";\n\treturn Component;\n})();\n\nexport type TimelineItemTimestampProps = Omit<\n\tReact.HTMLAttributes<HTMLSpanElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode | ((timestamp: Date) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\ttimestamp: Date;\n\tformat?: (date: Date) => string;\n};\n\n/**\n * Timestamp helper that renders a formatted date or allows callers to supply a\n * render prop for custom time displays while preserving semantic markup.\n */\nexport const TimelineItemTimestamp = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLSpanElement,\n\t\tTimelineItemTimestampProps\n\t>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\ttimestamp,\n\t\t\t\tformat = (date) =>\n\t\t\t\t\tdate.toLocaleTimeString([], {\n\t\t\t\t\t\thour: \"2-digit\",\n\t\t\t\t\t\tminute: \"2-digit\",\n\t\t\t\t\t}),\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\"\n\t\t\t\t\t? children(timestamp)\n\t\t\t\t\t: children || format(timestamp);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"span\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"TimelineItemTimestamp\";\n\treturn Component;\n})();\n"],"mappings":"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"}
|
package/primitives/window.d.ts
CHANGED
|
@@ -14,7 +14,7 @@ type WindowProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
|
|
|
14
14
|
id?: string;
|
|
15
15
|
};
|
|
16
16
|
/**
|
|
17
|
-
* Host container for the support experience. Handles
|
|
17
|
+
* Host container for the support experience. Handles escape
|
|
18
18
|
* key dismissal and propagates render props so callers can take over the
|
|
19
19
|
* layout.
|
|
20
20
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"window.d.ts","names":[],"sources":["../../src/primitives/window.tsx"],"sourcesContent":[],"mappings":";;;KAIY,iBAAA;;EAAA,KAAA,EAAA,GAAA,GAAA,IAAA;AAKZ,CAAA;
|
|
1
|
+
{"version":3,"file":"window.d.ts","names":[],"sources":["../../src/primitives/window.tsx"],"sourcesContent":[],"mappings":";;;KAIY,iBAAA;;EAAA,KAAA,EAAA,GAAA,GAAA,IAAA;AAKZ,CAAA;AACsB,KADV,WAAA,GAAc,IACJ,CAArB,OAAA,CAAM,cAAe,CAAA,cAAA,CAAA,EAAA,UAAA,CAAA,GAAA;EAArB,MAAM,CAAA,EAAA,OAAA;EADmB,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,OAAA,EAAA,GAAA,IAAA;EAMd,QAAM,CAAA,EAAN,OAAA,CAAM,SAAA,GAAA,CAAA,CAAA,KAAA,EAAqB,iBAArB,EAAA,GAA2C,OAAA,CAAM,SAAjD,CAAA;EAAqB,OAAA,CAAA,EAAA,OAAA;EAAsB,aAAM,CAAA,EAAA,OAAA;EAAS,EAAA,CAAA,EAAA,MAAA;AAW5E,CAAA;;;;;;AAX6D,cAWhD,aAXsD,EAWzC,OAAA,CAAA,yBAXyC,CAWzC,IAXyC,CAWzC,OAAA,CAAA,cAXyC,CAWzC,cAXyC,CAAA,EAAA,UAAA,CAAA,GAAA;;;EAWzC,QAAA,CAAA,EAXd,OAAA,CAAM,SAWQ,GAAA,CAAA,CAAA,KAAA,EAXa,iBAWb,EAAA,GAXmC,OAAA,CAAM,SAWzC,CAAA;EAAA,OAAA,CAAA,EAAA,OAAA"}
|
package/primitives/window.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import { useRenderElement } from "../utils/use-render-element.js";
|
|
2
|
-
import { useSupportConfig } from "../support/
|
|
2
|
+
import { useSupportConfig } from "../support/store/support-store.js";
|
|
3
3
|
import * as React$1 from "react";
|
|
4
4
|
|
|
5
5
|
//#region src/primitives/window.tsx
|
|
6
6
|
/**
|
|
7
|
-
* Host container for the support experience. Handles
|
|
7
|
+
* Host container for the support experience. Handles escape
|
|
8
8
|
* key dismissal and propagates render props so callers can take over the
|
|
9
9
|
* layout.
|
|
10
10
|
*/
|
|
11
11
|
const SupportWindow = (() => {
|
|
12
12
|
const Component = React$1.forwardRef(({ isOpen: isOpenProp, onOpenChange, children, className, asChild = false, closeOnEscape = true, id = "cossistant-window",...props }, ref) => {
|
|
13
|
-
const { isOpen, close
|
|
14
|
-
const open =
|
|
13
|
+
const { isOpen, close } = useSupportConfig();
|
|
14
|
+
const open = isOpenProp ?? isOpen ?? false;
|
|
15
15
|
const closeFn = React$1.useCallback(() => {
|
|
16
16
|
if (onOpenChange) onOpenChange(false);
|
|
17
17
|
else if (close) close();
|
package/primitives/window.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"window.js","names":["React","renderProps: WindowRenderProps"],"sources":["../../src/primitives/window.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useSupportConfig } from \"../support/
|
|
1
|
+
{"version":3,"file":"window.js","names":["React","renderProps: WindowRenderProps"],"sources":["../../src/primitives/window.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useSupportConfig } from \"../support/store/support-store\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type WindowRenderProps = {\n\tisOpen: boolean;\n\tclose: () => void;\n};\n\nexport type WindowProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tisOpen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\tchildren?: React.ReactNode | ((props: WindowRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tcloseOnEscape?: boolean;\n\tid?: string;\n};\n\n/**\n * Host container for the support experience. Handles escape\n * key dismissal and propagates render props so callers can take over the\n * layout.\n */\nexport const SupportWindow = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, WindowProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tisOpen: isOpenProp,\n\t\t\t\tonOpenChange,\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\tcloseOnEscape = true,\n\t\t\t\tid = \"cossistant-window\",\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst { isOpen, close } = useSupportConfig();\n\n\t\t\tconst open = isOpenProp ?? isOpen ?? false;\n\n\t\t\tconst closeFn = React.useCallback(() => {\n\t\t\t\tif (onOpenChange) {\n\t\t\t\t\tonOpenChange(false);\n\t\t\t\t} else if (close) {\n\t\t\t\t\tclose();\n\t\t\t\t}\n\t\t\t}, [onOpenChange, close]);\n\n\t\t\t// Close on Escape\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (!(open && closeOnEscape)) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tconst onKey = (e: KeyboardEvent) => {\n\t\t\t\t\tif (e.key === \"Escape\") {\n\t\t\t\t\t\tclose();\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t\twindow.addEventListener(\"keydown\", onKey);\n\t\t\t\treturn () => window.removeEventListener(\"keydown\", onKey);\n\t\t\t}, [open, close, closeOnEscape]);\n\n\t\t\tconst renderProps: WindowRenderProps = { isOpen: open, close: closeFn };\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"dialog\",\n\t\t\t\t\t\t\"aria-modal\": \"true\",\n\t\t\t\t\t\tid,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t\tenabled: open,\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"SupportWindow\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;;AA0BA,MAAa,uBAAuB;CACnC,MAAM,YAAYA,QAAM,YAEtB,EACC,QAAQ,YACR,cACA,UACA,WACA,UAAU,OACV,gBAAgB,MAChB,KAAK,oBACL,GAAG,SAEJ,QACI;EACJ,MAAM,EAAE,QAAQ,UAAU,kBAAkB;EAE5C,MAAM,OAAO,cAAc,UAAU;EAErC,MAAM,UAAUA,QAAM,kBAAkB;AACvC,OAAI,aACH,cAAa,MAAM;YACT,MACV,QAAO;KAEN,CAAC,cAAc,MAAM,CAAC;AAGzB,UAAM,gBAAgB;AACrB,OAAI,EAAE,QAAQ,eACb;GAED,MAAM,SAAS,MAAqB;AACnC,QAAI,EAAE,QAAQ,SACb,QAAO;;AAGT,UAAO,iBAAiB,WAAW,MAAM;AACzC,gBAAa,OAAO,oBAAoB,WAAW,MAAM;KACvD;GAAC;GAAM;GAAO;GAAc,CAAC;EAEhC,MAAMC,cAAiC;GAAE,QAAQ;GAAM,OAAO;GAAS;EAEvE,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAE1D,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc;IACd;IACA,GAAG;IACH,UAAU;IACV;GACD,SAAS;GACT,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}
|
package/provider.d.ts
CHANGED
|
@@ -1,12 +1,10 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { CossistantClient } from "@cossistant/core";
|
|
3
3
|
import { DefaultMessage, PublicWebsiteResponse } from "@cossistant/types";
|
|
4
|
-
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
|
-
import { QueryClient } from "@tanstack/react-query";
|
|
6
4
|
|
|
7
5
|
//#region src/provider.d.ts
|
|
8
6
|
type SupportProviderProps = {
|
|
9
|
-
children: React
|
|
7
|
+
children: React.ReactNode;
|
|
10
8
|
defaultOpen?: boolean;
|
|
11
9
|
apiUrl?: string;
|
|
12
10
|
wsUrl?: string;
|
|
@@ -17,7 +15,7 @@ type SupportProviderProps = {
|
|
|
17
15
|
onWsConnect?: () => void;
|
|
18
16
|
onWsDisconnect?: () => void;
|
|
19
17
|
onWsError?: (error: Error) => void;
|
|
20
|
-
|
|
18
|
+
size?: "normal" | "larger";
|
|
21
19
|
};
|
|
22
20
|
type CossistantProviderProps = SupportProviderProps;
|
|
23
21
|
type CossistantContextValue = {
|
|
@@ -31,7 +29,22 @@ type CossistantContextValue = {
|
|
|
31
29
|
isLoading: boolean;
|
|
32
30
|
error: Error | null;
|
|
33
31
|
client: CossistantClient;
|
|
32
|
+
isOpen: boolean;
|
|
33
|
+
open: () => void;
|
|
34
|
+
close: () => void;
|
|
35
|
+
toggle: () => void;
|
|
34
36
|
};
|
|
37
|
+
type WebsiteData = NonNullable<CossistantContextValue["website"]>;
|
|
38
|
+
type VisitorWithLocale = WebsiteData["visitor"] extends null | undefined ? undefined : NonNullable<WebsiteData["visitor"]> & {
|
|
39
|
+
locale: string | null;
|
|
40
|
+
};
|
|
41
|
+
type UseSupportValue = CossistantContextValue & {
|
|
42
|
+
availableHumanAgents: NonNullable<WebsiteData["availableHumanAgents"]> | [];
|
|
43
|
+
availableAIAgents: NonNullable<WebsiteData["availableAIAgents"]> | [];
|
|
44
|
+
visitor?: VisitorWithLocale;
|
|
45
|
+
size: "normal" | "larger";
|
|
46
|
+
};
|
|
47
|
+
declare const SupportContext: React.Context<CossistantContextValue | undefined>;
|
|
35
48
|
/**
|
|
36
49
|
* Hosts the entire customer support widget ecosystem by handing out context
|
|
37
50
|
* about the current website, visitor, unread counts, realtime subscriptions
|
|
@@ -49,47 +62,14 @@ declare function SupportProvider({
|
|
|
49
62
|
onWsConnect,
|
|
50
63
|
onWsDisconnect,
|
|
51
64
|
onWsError,
|
|
52
|
-
|
|
53
|
-
|
|
65
|
+
size,
|
|
66
|
+
defaultOpen
|
|
67
|
+
}: SupportProviderProps): React.ReactElement;
|
|
54
68
|
/**
|
|
55
69
|
* Convenience hook that exposes the aggregated support context. Throws when it
|
|
56
70
|
* is consumed outside of `SupportProvider` to catch integration mistakes.
|
|
57
71
|
*/
|
|
58
|
-
declare function useSupport():
|
|
59
|
-
availableHumanAgents: {
|
|
60
|
-
id: string;
|
|
61
|
-
name: string;
|
|
62
|
-
image: string | null;
|
|
63
|
-
lastSeenAt: string | null;
|
|
64
|
-
}[];
|
|
65
|
-
availableAIAgents: {
|
|
66
|
-
id: string;
|
|
67
|
-
name: string;
|
|
68
|
-
image: string | null;
|
|
69
|
-
}[];
|
|
70
|
-
visitor: {
|
|
71
|
-
locale: string | null;
|
|
72
|
-
id: string;
|
|
73
|
-
isBlocked: boolean;
|
|
74
|
-
language: string | null;
|
|
75
|
-
contact: {
|
|
76
|
-
id: string;
|
|
77
|
-
name: string | null;
|
|
78
|
-
email: string | null;
|
|
79
|
-
image: string | null;
|
|
80
|
-
} | null;
|
|
81
|
-
} | undefined;
|
|
82
|
-
website: PublicWebsiteResponse | null;
|
|
83
|
-
defaultMessages: DefaultMessage[];
|
|
84
|
-
quickOptions: string[];
|
|
85
|
-
setDefaultMessages: (messages: DefaultMessage[]) => void;
|
|
86
|
-
setQuickOptions: (options: string[]) => void;
|
|
87
|
-
unreadCount: number;
|
|
88
|
-
setUnreadCount: (count: number) => void;
|
|
89
|
-
isLoading: boolean;
|
|
90
|
-
error: Error | null;
|
|
91
|
-
client: CossistantClient;
|
|
92
|
-
};
|
|
72
|
+
declare function useSupport(): UseSupportValue;
|
|
93
73
|
//#endregion
|
|
94
|
-
export { CossistantContextValue, CossistantProviderProps, SupportProvider, SupportProviderProps, useSupport };
|
|
74
|
+
export { CossistantContextValue, CossistantProviderProps, SupportContext, SupportProvider, SupportProviderProps, UseSupportValue, useSupport };
|
|
95
75
|
//# sourceMappingURL=provider.d.ts.map
|
package/provider.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"provider.d.ts","names":[],"sources":["../src/provider.tsx"],"sourcesContent":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"provider.d.ts","names":[],"sources":["../src/provider.tsx"],"sourcesContent":[],"mappings":";;;;;KAgBY,oBAAA;YACD,KAAA,CAAM;EADL,WAAA,CAAA,EAAA,OAAA;EACD,MAAM,CAAA,EAAA,MAAA;EAKE,KAAA,CAAA,EAAA,MAAA;EAKE,SAAA,CAAA,EAAA,MAAA;EAAK,eAAA,CAAA,EALP,cAKO,EAAA;EAId,YAAA,CAAA,EAAA,MAAA,EAAA;EAEA,WAAA,CAAA,EAAA,OAAA;EACF,WAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EACQ,cAAA,CAAA,EAAA,GAAA,GAAA,IAAA;EAEc,SAAA,CAAA,EAAA,CAAA,KAAA,EAVX,KAUW,EAAA,GAAA,IAAA;EAKxB,IAAA,CAAA,EAAA,QAAA,GAAA,QAAA;CACC;AAAgB,KAZb,uBAAA,GAA0B,oBAYb;AAOpB,KAjBO,sBAAA,GAiBmB;EAE1B,OAAA,EAlBK,qBAkBY,GAAA,IAAA;EAAG,eAAA,EAjBP,cAiBO,EAAA;EAEV,YAAA,EAAA,MAAA,EAAA;EAAZ,kBAAA,EAAA,CAAA,QAAA,EAjB6B,cAiB7B,EAAA,EAAA,GAAA,IAAA;EAAW,eAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,EAAA,GAAA,IAAA;EAwCF,WAAA,EAAA,MAAe;EAAG,cAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACK,SAAA,EAAA,OAAA;EAAZ,KAAA,EArDf,KAqDe,GAAA,IAAA;EACS,MAAA,EArDvB,gBAqDuB;EAAZ,MAAA,EAAA,OAAA;EACT,IAAA,EAAA,GAAA,GAAA,IAAA;EAAiB,KAAA,EAAA,GAAA,GAAA,IAAA;EAIf,MAAA,EAAA,GAAA,GAAA,IAED;AAiRZ,CAAA;KAtUK,WAAA,GAAc,WAuUlB,CAvU8B,sBAuU9B,CAAA,SAAA,CAAA,CAAA;KArUI,iBAAA,GAAoB,WAsUxB,CAAA,SAAA,CAAA,SAAA,IAAA,GAAA,SAAA,GAAA,SAAA,GApUE,WAoUF,CApUc,WAoUd,CAAA,SAAA,CAAA,CAAA,GAAA;EACA,MAAA,EAAA,MAAA,GAAA,IAAA;CACA;AACA,KA/RW,eAAA,GAAkB,sBA+R7B,GAAA;EACA,oBAAA,EA/RsB,WA+RtB,CA/RkC,WA+RlC,CAAA,sBAAA,CAAA,CAAA,GAAA,EAAA;EACA,iBAAA,EA/RmB,WA+RnB,CA/R+B,WA+R/B,CAAA,mBAAA,CAAA,CAAA,GAAA,EAAA;EACA,OAAA,CAAA,EA/RU,iBA+RV;EACA,IAAA,EAAA,QAAA,GAAA,QAAA;CACA;AACA,cA9RY,cA8RZ,EA9R0B,KAAA,CAAA,OA8R1B,CA9R0B,sBA8R1B,GAAA,SAAA,CAAA;;;;;AA0BD;;iBArCgB,eAAA;;;;;;;;;;;;;GAab,uBAAuB,KAAA,CAAM;;;;;iBAwBhB,UAAA,CAAA,GAAc"}
|