@bikdotai/bik-component-library 0.0.826 → 0.0.828

package/dist/esm/components/BikGiftedChat/Bubble/Bubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"Bubble.js","sources":["../../../../../src/components/BikGiftedChat/Bubble/Bubble.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { MESSAGE_CHANNELS } from '../GiftedChat/types';\nimport { Constants, isStringifiedArray } from '../GiftedChat/utils';\nimport { IMessage } from '../types';\nimport { BubbleProps, GiftedChatAppType } from './types';\n\nconst BubbleComponent = <TMessage extends IMessage = IMessage>(\n\tprops: BubbleProps<TMessage>,\n): React.ReactElement => {\n\tconst {\n\t\tcurrentMessage,\n\t\tposition,\n\t\trenderMessageText,\n\t\trenderTicks,\n\t\trenderTime,\n\t\trenderCustomView,\n\t\tisCustomViewBottom,\n\t\tisUnsatisfactoryMessageFn,\n\t\tmessagesGroupedByAiTraceId,\n\t\tonPress,\n\t\tcontainerStyle,\n\t\tbubbleStyles,\n\t\tappType = GiftedChatAppType.Bik,\n\t} = props;\n\n\tconst isMobile = useWindowSize();\n\tconst message = currentMessage as any;\n\tconst isManifestApp = appType === GiftedChatAppType.Manifest;\n\n\t// Check if message is a private note\n\tconst isPrivateNote = useMemo(\n\t\t() =>\n\t\t\tmessage.category === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\tmessage.activityType === Constants.ChatActivity.Type.PRIVATE_NOTE,\n\t\t[message.category, message.activityType],\n\t);\n\n\t// Check if message is a carousel (array of items)\n\tconst isCarouselMessage = useMemo(() => {\n\t\tconst [parsedSuccessfully, parsedMessage] = isStringifiedArray(\n\t\t\tmessage?.message,\n\t\t);\n\t\treturn parsedSuccessfully && parsedMessage && Array.isArray(parsedMessage);\n\t}, [message?.message]);\n\t// Generates wrapper styles for the message bubble\n\t// Handles position-based styling, channel-specific layouts, and message states\n\tconst wrapperStyles = useMemo((): React.CSSProperties => {\n\t\tconst baseStyles: React.CSSProperties = {\n\t\t\tborderRadius: 8,\n\t\t\tminHeight: 20,\n\t\t\tmargin: 0,\n\t\t\tflexGrow: isMobile ? 1 : 0,\n\t\t};\n\n\t\t// Check if message is from email channels\n\t\tconst isGmail =\n\t\t\tmessage?.channelId === MESSAGE_CHANNELS.GMAIL ||\n\t\t\tmessage?.channelName === MESSAGE_CHANNELS.GMAIL;\n\t\tconst isSmtp =\n\t\t\tmessage?.channelId === MESSAGE_CHANNELS.SMTP ||\n\t\t\tmessage?.channelName === MESSAGE_CHANNELS.SMTP;\n\n\t\tlet dynamicStyles: React.CSSProperties = {};\n\n\t\tif (isManifestApp) {\n\t\t\tif (position === 'left') {\n\t\t\t\tdynamicStyles =\n\t\t\t\t\tbubbleStyles && typeof bubbleStyles.left === 'object'\n\t\t\t\t\t\t? bubbleStyles.left\n\t\t\t\t\t\t: {};\n\t\t\t} else {\n\t\t\t\tdynamicStyles =\n\t\t\t\t\tbubbleStyles && typeof bubbleStyles.right === 'object'\n\t\t\t\t\t\t? bubbleStyles.right\n\t\t\t\t\t\t: {};\n\t\t\t}\n\t\t\treturn { ...dynamicStyles };\n\t\t} else {\n\t\t\tif (position === 'left') {\n\t\t\t\tdynamicStyles = {\n\t\t\t\t\t...(isMobile || isGmail || isSmtp ? { maxWidth: '100%' } : {}),\n\t\t\t\t\t...(isPrivateNote\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbackground: message?.meta?.aiUsed\n\t\t\t\t\t\t\t\t\t? 'linear-gradient(90deg, #ffe6ee 0%, #fff0e7 100%)'\n\t\t\t\t\t\t\t\t\t: COLORS.background.warning.light,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tbackgroundColor: message?.isPrivateMail\n\t\t\t\t\t\t\t\t\t? COLORS.background.blue.light\n\t\t\t\t\t\t\t\t\t: COLORS.surface.hovered,\n\t\t\t\t\t\t  }),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst isUnsatisfactory =\n\t\t\t\t\tisUnsatisfactoryMessageFn &&\n\t\t\t\t\tisUnsatisfactoryMessageFn({\n\t\t\t\t\t\taiTraceId: message.eventProperties?.aiTraceId,\n\t\t\t\t\t\tmessagesGroupedByAiTraceId,\n\t\t\t\t\t});\n\n\t\t\t\tdynamicStyles = {\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tmessage.status === 'failed' || isUnsatisfactory\n\t\t\t\t\t\t\t? COLORS.background.negative.light\n\t\t\t\t\t\t\t: COLORS.background.brandVeryLight,\n\t\t\t\t\t...(isPrivateNote\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbackground: message?.meta?.aiUsed\n\t\t\t\t\t\t\t\t\t? 'linear-gradient(90deg, #ffe6ee 0%, #fff0e7 100%)'\n\t\t\t\t\t\t\t\t\t: COLORS.background.warning.light,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {}),\n\t\t\t\t\t...(!isMobile && isCarouselMessage ? { maxWidth: 500 } : {}),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t\treturn { ...baseStyles, ...dynamicStyles };\n\t}, [\n\t\tmessage?.channelId,\n\t\tmessage?.channelName,\n\t\tmessage?.meta?.aiUsed,\n\t\tmessage?.status,\n\t\tmessage?.eventProperties?.aiTraceId,\n\t\tposition,\n\t\tisMobile,\n\t\tisPrivateNote,\n\t\tisCarouselMessage,\n\t\tisUnsatisfactoryMessageFn,\n\t\tmessagesGroupedByAiTraceId,\n\t\tmessage?.isPrivateMail,\n\t\tbubbleStyles,\n\t\tisManifestApp,\n\t]);\n\n\t// Renders the content of the message bubble\n\t// Handles custom views and message text in the correct order\n\tconst renderContent = useCallback(() => {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t{!isCustomViewBottom && renderCustomView?.(props)}\n\n\t\t\t\t{renderMessageText?.(props)}\n\n\t\t\t\t{isCustomViewBottom && renderCustomView?.(props)}\n\t\t\t</div>\n\t\t);\n\t}, [isCustomViewBottom, renderCustomView, renderMessageText, props]);\n\n\tconst manifestContainerStyle = useMemo(() => {\n\t\tif (!isManifestApp || typeof containerStyle !== 'object') return {};\n\t\tif (\n\t\t\tposition === 'left' &&\n\t\t\t'left' in containerStyle &&\n\t\t\tcontainerStyle.left &&\n\t\t\ttypeof containerStyle.left === 'object'\n\t\t) {\n\t\t\treturn containerStyle.left;\n\t\t}\n\t\tif (\n\t\t\tposition === 'right' &&\n\t\t\t'right' in containerStyle &&\n\t\t\tcontainerStyle.right &&\n\t\t\ttypeof containerStyle.right === 'object'\n\t\t) {\n\t\t\treturn containerStyle.right;\n\t\t}\n\t\treturn {};\n\t}, [isManifestApp, containerStyle, position]);\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tmarginTop: isManifestApp ? 0 : 6,\n\t\t\t\tmarginBottom: isManifestApp\n\t\t\t\t\t? 0\n\t\t\t\t\t: currentMessage?.['messageInformation']?.reactions?.length > 0\n\t\t\t\t\t? 24\n\t\t\t\t\t: 6,\n\t\t\t\tflexGrow: isMobile ? 1 : 0,\n\t\t\t\t...(isManifestApp\n\t\t\t\t\t? {\n\t\t\t\t\t\t\talignItems: 'flex-end',\n\t\t\t\t\t\t\t...(position === 'right' ? { cursor: 'pointer' } : {}),\n\t\t\t\t\t  }\n\t\t\t\t\t: {}),\n\t\t\t\t...manifestContainerStyle,\n\t\t\t}}\n\t\t\t{...(isManifestApp ? { onClick: onPress } : {})}\n\t\t>\n\t\t\t<div style={wrapperStyles}>\n\t\t\t\t<div>\n\t\t\t\t\t{/* Message content */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tid={\n\t\t\t\t\t\t\tcurrentMessage['chatActivityId'] ||\n\t\t\t\t\t\t\t`message-${currentMessage['psqlId']}`\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderContent()}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Message metadata (time and status) */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tmarginLeft: '32px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderTime?.(props)}\n\t\t\t\t\t\t{renderTicks?.(currentMessage)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n// Export memoized version for performance\nexport const Bubble = React.memo(BubbleComponent) as typeof BubbleComponent;\n\nexport default Bubble;\n"],"names":["BubbleComponent","props","currentMessage","position","renderMessageText","renderTicks","renderTime","renderCustomView","isCustomViewBottom","isUnsatisfactoryMessageFn","messagesGroupedByAiTraceId","onPress","containerStyle","bubbleStyles","appType","GiftedChatAppType","isMobile","useWindowSize","message","isManifestApp","isPrivateNote","useMemo","Constants","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","wrapperStyles","baseStyles","isGmail","MESSAGE_CHANNELS","isSmtp","dynamicStyles","COLORS","isUnsatisfactory","renderContent","useCallback","manifestContainerStyle","jsx","jsxs","Bubble","React"],"mappings":"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"}
+{"version":3,"file":"Bubble.js","sources":["../../../../../src/components/BikGiftedChat/Bubble/Bubble.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { useWindowSize } from '../../../hooks/useWindowSize';\nimport { MESSAGE_CHANNELS } from '../GiftedChat/types';\nimport { Constants, isStringifiedArray } from '../GiftedChat/utils';\nimport { IMessage } from '../types';\nimport { BubbleProps, GiftedChatAppType } from './types';\n\nconst BubbleComponent = <TMessage extends IMessage = IMessage>(\n\tprops: BubbleProps<TMessage>,\n): React.ReactElement => {\n\tconst {\n\t\tcurrentMessage,\n\t\tposition,\n\t\trenderMessageText,\n\t\trenderTicks,\n\t\trenderTime,\n\t\trenderCustomView,\n\t\tisCustomViewBottom,\n\t\tisUnsatisfactoryMessageFn,\n\t\tmessagesGroupedByAiTraceId,\n\t\tonPress,\n\t\tcontainerStyle,\n\t\tbubbleStyles,\n\t\tappType = GiftedChatAppType.Bik,\n\t} = props;\n\n\tconst isMobile = useWindowSize();\n\tconst message = currentMessage as any;\n\tconst isManifestApp = appType === GiftedChatAppType.Manifest;\n\n\t// Check if message is a private note\n\tconst isPrivateNote = useMemo(\n\t\t() =>\n\t\t\tmessage.category === Constants.ChatActivity.Category.ACTIVITY &&\n\t\t\tmessage.activityType === Constants.ChatActivity.Type.PRIVATE_NOTE,\n\t\t[message.category, message.activityType],\n\t);\n\n\t// Check if message is a carousel (array of items)\n\tconst isCarouselMessage = useMemo(() => {\n\t\tconst [parsedSuccessfully, parsedMessage] = isStringifiedArray(\n\t\t\tmessage?.message,\n\t\t);\n\t\treturn parsedSuccessfully && parsedMessage && Array.isArray(parsedMessage);\n\t}, [message?.message]);\n\tconst isSmtp =\n\t\tmessage?.channelId === MESSAGE_CHANNELS.SMTP ||\n\t\tmessage?.channelName === MESSAGE_CHANNELS.SMTP;\n\n\t// Generates wrapper styles for the message bubble\n\t// Handles position-based styling, channel-specific layouts, and message states\n\tconst wrapperStyles = useMemo((): React.CSSProperties => {\n\t\tconst baseStyles: React.CSSProperties = {\n\t\t\tborderRadius: 8,\n\t\t\tminHeight: 20,\n\t\t\tmargin: 0,\n\t\t\tflexGrow: isMobile ? 1 : 0,\n\t\t\twidth: '100%',\n\t\t};\n\n\t\t// Check if message is from email channels\n\t\tconst isGmail =\n\t\t\tmessage?.channelId === MESSAGE_CHANNELS.GMAIL ||\n\t\t\tmessage?.channelName === MESSAGE_CHANNELS.GMAIL;\n\n\t\tlet dynamicStyles: React.CSSProperties = {};\n\n\t\tif (isManifestApp) {\n\t\t\tif (position === 'left') {\n\t\t\t\tdynamicStyles =\n\t\t\t\t\tbubbleStyles && typeof bubbleStyles.left === 'object'\n\t\t\t\t\t\t? bubbleStyles.left\n\t\t\t\t\t\t: {};\n\t\t\t} else {\n\t\t\t\tdynamicStyles =\n\t\t\t\t\tbubbleStyles && typeof bubbleStyles.right === 'object'\n\t\t\t\t\t\t? bubbleStyles.right\n\t\t\t\t\t\t: {};\n\t\t\t}\n\t\t\treturn { ...dynamicStyles };\n\t\t} else {\n\t\t\tif (position === 'left') {\n\t\t\t\tdynamicStyles = {\n\t\t\t\t\t...(isMobile || isGmail || isSmtp ? { maxWidth: '100%' } : {}),\n\t\t\t\t\t...(isPrivateNote\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbackground: COLORS.background.warning.light,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {\n\t\t\t\t\t\t\t\tbackgroundColor: message?.isPrivateMail\n\t\t\t\t\t\t\t\t\t? COLORS.background.blue.light\n\t\t\t\t\t\t\t\t\t: COLORS.background.base,\n\t\t\t\t\t\t  }),\n\t\t\t\t};\n\t\t\t} else {\n\t\t\t\tconst isUnsatisfactory =\n\t\t\t\t\tisUnsatisfactoryMessageFn &&\n\t\t\t\t\tisUnsatisfactoryMessageFn({\n\t\t\t\t\t\taiTraceId: message.eventProperties?.aiTraceId,\n\t\t\t\t\t\tmessagesGroupedByAiTraceId,\n\t\t\t\t\t});\n\n\t\t\t\tdynamicStyles = {\n\t\t\t\t\tbackgroundColor:\n\t\t\t\t\t\tmessage.status === 'failed' || isUnsatisfactory\n\t\t\t\t\t\t\t? COLORS.background.negative.light\n\t\t\t\t\t\t\t: COLORS.background.brandUltraLight,\n\t\t\t\t\t...(isPrivateNote\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbackground: COLORS.background.warning.light,\n\t\t\t\t\t\t  }\n\t\t\t\t\t\t: {}),\n\t\t\t\t\t...(!isMobile && isCarouselMessage ? { maxWidth: 500 } : {}),\n\t\t\t\t};\n\t\t\t}\n\t\t}\n\t\tconst extraBubbleStyles: React.CSSProperties =\n\t\t\tbubbleStyles && typeof bubbleStyles === 'object'\n\t\t\t\t? 'left' in bubbleStyles || 'right' in bubbleStyles\n\t\t\t\t\t? position === 'left'\n\t\t\t\t\t\t? (bubbleStyles as { left?: React.CSSProperties }).left ?? {}\n\t\t\t\t\t\t: (bubbleStyles as { right?: React.CSSProperties }).right ?? {}\n\t\t\t\t\t: (bubbleStyles as React.CSSProperties)\n\t\t\t\t: {};\n\n\t\treturn { ...baseStyles, ...dynamicStyles, ...extraBubbleStyles };\n\t}, [\n\t\tmessage?.channelId,\n\t\tmessage?.channelName,\n\t\tmessage?.meta?.aiUsed,\n\t\tmessage?.status,\n\t\tmessage?.eventProperties?.aiTraceId,\n\t\tposition,\n\t\tisMobile,\n\t\tisPrivateNote,\n\t\tisCarouselMessage,\n\t\tisUnsatisfactoryMessageFn,\n\t\tmessagesGroupedByAiTraceId,\n\t\tmessage?.isPrivateMail,\n\t\tbubbleStyles,\n\t\tisManifestApp,\n\t]);\n\n\t// Renders the content of the message bubble\n\t// Handles custom views and message text in the correct order\n\tconst renderContent = useCallback(() => {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t{!isCustomViewBottom && renderCustomView?.(props)}\n\n\t\t\t\t{renderMessageText?.(props)}\n\n\t\t\t\t{isCustomViewBottom && renderCustomView?.(props)}\n\t\t\t</div>\n\t\t);\n\t}, [isCustomViewBottom, renderCustomView, renderMessageText, props]);\n\n\tconst manifestContainerStyle = useMemo(() => {\n\t\tif (!isManifestApp || typeof containerStyle !== 'object') return {};\n\t\tif (\n\t\t\tposition === 'left' &&\n\t\t\t'left' in containerStyle &&\n\t\t\tcontainerStyle.left &&\n\t\t\ttypeof containerStyle.left === 'object'\n\t\t) {\n\t\t\treturn containerStyle.left;\n\t\t}\n\t\tif (\n\t\t\tposition === 'right' &&\n\t\t\t'right' in containerStyle &&\n\t\t\tcontainerStyle.right &&\n\t\t\ttypeof containerStyle.right === 'object'\n\t\t) {\n\t\t\treturn containerStyle.right;\n\t\t}\n\t\treturn {};\n\t}, [isManifestApp, containerStyle, position]);\n\n\tconst extraContainerStyle: React.CSSProperties =\n\t\t!isManifestApp && containerStyle && typeof containerStyle === 'object'\n\t\t\t? 'left' in containerStyle || 'right' in containerStyle\n\t\t\t\t? position === 'left'\n\t\t\t\t\t? (containerStyle as { left?: React.CSSProperties }).left ?? {}\n\t\t\t\t\t: (containerStyle as { right?: React.CSSProperties }).right ?? {}\n\t\t\t\t: (containerStyle as React.CSSProperties)\n\t\t\t: {};\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tmarginTop: isManifestApp ? 0 : 6,\n\t\t\t\tmarginBottom: isManifestApp\n\t\t\t\t\t? 0\n\t\t\t\t\t: currentMessage?.['messageInformation']?.reactions?.length > 0\n\t\t\t\t\t? 24\n\t\t\t\t\t: 6,\n\t\t\t\tflexGrow: isMobile ? 1 : 0,\n\t\t\t\t...(isManifestApp\n\t\t\t\t\t? {\n\t\t\t\t\t\t\talignItems: 'flex-end',\n\t\t\t\t\t\t\t...(position === 'right' ? { cursor: 'pointer' } : {}),\n\t\t\t\t\t  }\n\t\t\t\t\t: {}),\n\t\t\t\t...manifestContainerStyle,\n\t\t\t\t...extraContainerStyle,\n\t\t\t}}\n\t\t\t{...(isManifestApp ? { onClick: onPress } : {})}\n\t\t>\n\t\t\t<div style={wrapperStyles}>\n\t\t\t\t<div>\n\t\t\t\t\t{/* Message content */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tid={\n\t\t\t\t\t\t\tcurrentMessage['chatActivityId'] ||\n\t\t\t\t\t\t\t`message-${currentMessage['psqlId']}`\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderContent()}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Message metadata (time and status) — bottom bar, time/ticks\n\t\t\t\t\t    right-aligned. The 8px gap above comes from the time/ticks\n\t\t\t\t\t    rows' own top padding. */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tflexDirection: 'row',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{renderTime?.(props)}\n\t\t\t\t\t\t{renderTicks?.(currentMessage)}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\n// Export memoized version for performance\nexport const Bubble = React.memo(BubbleComponent) as typeof BubbleComponent;\n\nexport default Bubble;\n"],"names":["BubbleComponent","props","currentMessage","position","renderMessageText","renderTicks","renderTime","renderCustomView","isCustomViewBottom","isUnsatisfactoryMessageFn","messagesGroupedByAiTraceId","onPress","containerStyle","bubbleStyles","appType","GiftedChatAppType","isMobile","useWindowSize","message","isManifestApp","isPrivateNote","useMemo","Constants","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","isSmtp","MESSAGE_CHANNELS","wrapperStyles","baseStyles","isGmail","dynamicStyles","COLORS","isUnsatisfactory","extraBubbleStyles","renderContent","useCallback","manifestContainerStyle","extraContainerStyle","jsx","jsxs","Bubble","React"],"mappings":"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"}

package/dist/esm/components/BikGiftedChat/GiftedChat/Day.d.ts

@@ -12,6 +12,12 @@ export interface DayProps {
         sameElse?: string;
     };
     appType?: GiftedChatAppType;
+    /**
+     * Scroll container the separator sticks within. When provided, the
+     * separator pins to the top while its day's messages scroll past, and the
+     * divider lines are hidden while pinned (floating-pill look).
+     */
+    scrollRootRef?: React.RefObject<HTMLElement | null>;
 }
 export declare const Day: React.NamedExoticComponent<DayProps>;
 export default Day;

package/dist/esm/components/BikGiftedChat/GiftedChat/Day.js

@@ -1,104 +1,142 @@
-import { jsx as n, jsxs as d } from "react/jsx-runtime";
-import { startOfDay as t, format as l, isSameYear as u, differenceInDays as x } from "date-fns";
-import c, { useMemo as M } from "react";
+import { jsxs as c, Fragment as M, jsx as n } from "react/jsx-runtime";
+import { startOfDay as l, format as u, isSameYear as D, differenceInDays as v } from "date-fns";
+import E, { useRef as I, useState as C, useMemo as S, useEffect as B } from "react";
 import { COLORS as i } from "../../../constants/Theme.js";
-import { BodyCaption as g } from "../../TypographyStyle.js";
-import { GiftedChatAppType as y } from "../Bubble/types.js";
-const D = ({
-  createdAt: e,
-  dateFormat: m = "D MMMM YY",
-  dateFormatCalendar: o,
-  appType: s = y.Bik
+import { BodyCaption as R } from "../../TypographyStyle.js";
+import { GiftedChatAppType as p } from "../Bubble/types.js";
+const w = ({
+  createdAt: t,
+  dateFormat: x = "D MMMM YY",
+  dateFormatCalendar: f,
+  appType: d = p.Bik,
+  scrollRootRef: y
 }) => {
-  const f = M(() => {
-    if (e == null) return null;
-    let r;
-    if (typeof e == "number")
-      r = t(new Date(e));
-    else if (e instanceof Date)
-      r = t(e);
-    else if (typeof e == "string")
-      r = t(new Date(e));
+  const m = I(null), [s, b] = C(!1), a = S(() => {
+    if (t == null) return null;
+    let e;
+    if (typeof t == "number")
+      e = l(new Date(t));
+    else if (t instanceof Date)
+      e = l(t);
+    else if (typeof t == "string")
+      e = l(new Date(t));
     else
       return null;
-    if (s === y.Manifest)
-      return l(r, "MMM d, yyyy");
-    const a = t(/* @__PURE__ */ new Date());
-    if (!u(a, r))
-      return l(r, "EEEE, d MMMM yy");
-    const p = x(a, r);
-    return p < 1 ? o?.sameDay ? o.sameDay.replace(/\[|\]/g, "") : "Today" : p === 1 ? "Yesterday" : l(r, "EEEE, d MMMM yy");
-  }, [e, m, o, s]);
-  return f ? s === y.Manifest ? /* @__PURE__ */ n(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        marginTop: 5,
-        marginBottom: 10
+    if (d === p.Manifest)
+      return u(e, "MMM d, yyyy");
+    const r = l(/* @__PURE__ */ new Date());
+    if (!D(r, e))
+      return u(e, "EEEE, d MMMM yy");
+    const o = v(r, e);
+    return o < 1 ? f?.sameDay ? f.sameDay.replace(/\[|\]/g, "") : "Today" : o === 1 ? "Yesterday" : u(e, "EEEE, d MMMM yy");
+  }, [t, x, f, d]);
+  if (B(() => {
+    const e = m.current;
+    if (!e || typeof IntersectionObserver > "u") return;
+    const r = y?.current ?? null, o = new IntersectionObserver(
+      ([h]) => {
+        const k = r ? r.getBoundingClientRect().top : 0;
+        b(
+          !h.isIntersecting && h.boundingClientRect.top <= k
+        );
       },
-      children: /* @__PURE__ */ n(
-        "span",
-        {
-          style: {
-            background: "transparent",
-            color: "#b2b2b2",
-            fontSize: 12,
-            fontWeight: 600,
-            padding: "2px 8px"
-          },
-          children: f
-        }
-      )
-    }
-  ) : /* @__PURE__ */ d(
+      { root: r, threshold: [0, 1] }
+    );
+    return o.observe(e), () => o.disconnect();
+  }, [y, a]), !a) return null;
+  const g = /* @__PURE__ */ n(
     "div",
     {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        margin: "12px 0px 12px 8px"
-      },
-      children: [
-        /* @__PURE__ */ n(
-          "div",
-          {
-            style: {
-              flex: 1,
-              height: "1px",
-              backgroundColor: i.stroke.primary
-            }
-          }
-        ),
-        /* @__PURE__ */ n(
-          "div",
+      ref: m,
+      "aria-hidden": !0,
+      style: { height: 1, marginBottom: -1 }
+    }
+  );
+  return d === p.Manifest ? /* @__PURE__ */ c(M, { children: [
+    g,
+    /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: 5,
+          marginBottom: 10
+        },
+        children: /* @__PURE__ */ n(
+          "span",
           {
             style: {
-              border: `1px solid ${i.stroke.primary}`,
-              borderRadius: "16px",
-              padding: "4px 12px"
+              background: s ? i.surface.standard : "transparent",
+              color: "#b2b2b2",
+              fontSize: 12,
+              fontWeight: 600,
+              padding: "2px 8px",
+              borderRadius: 12
             },
-            children: /* @__PURE__ */ n(g, { style: { color: i.content.secondary }, children: f })
-          }
-        ),
-        /* @__PURE__ */ n(
-          "div",
-          {
-            style: {
-              flex: 1,
-              height: "1px",
-              backgroundColor: i.stroke.primary
-            }
+            children: a
           }
         )
-      ]
-    }
-  ) : null;
-}, j = c.memo(D);
+      }
+    )
+  ] }) : /* @__PURE__ */ c(M, { children: [
+    g,
+    /* @__PURE__ */ c(
+      "div",
+      {
+        style: {
+          position: "sticky",
+          top: 0,
+          zIndex: 2,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          marginTop: 8,
+          marginBottom: 8
+        },
+        children: [
+          !s && /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                flex: 1,
+                height: "1px",
+                backgroundColor: i.stroke.primary
+              }
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                border: `1px solid ${i.stroke.primary}`,
+                borderRadius: "16px",
+                padding: "4px 12px",
+                background: s ? i.surface.standard : "transparent"
+              },
+              children: /* @__PURE__ */ n(R, { style: { color: i.content.secondary }, children: a })
+            }
+          ),
+          !s && /* @__PURE__ */ n(
+            "div",
+            {
+              style: {
+                flex: 1,
+                height: "1px",
+                backgroundColor: i.stroke.primary
+              }
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}, G = E.memo(w);
 export {
-  j as Day
+  G as Day
 };
 //# sourceMappingURL=Day.js.map

package/dist/esm/components/BikGiftedChat/GiftedChat/Day.js.map

@@ -1 +1 @@
-{"version":3,"file":"Day.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/Day.tsx"],"sourcesContent":["import { differenceInDays, format, isSameYear, startOfDay } from 'date-fns';\nimport React, { useMemo } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { BodyCaption } from '../../TypographyStyle';\nimport { GiftedChatAppType } from '../Bubble/types';\n\n// Props for Day component\nexport interface DayProps {\n\tcreatedAt?: Date | number | string;\n\tdateFormat?: string;\n\tdateFormatCalendar?: {\n\t\tsameDay?: string;\n\t\tnextDay?: string;\n\t\tnextWeek?: string;\n\t\tlastDay?: string;\n\t\tlastWeek?: string;\n\t\tsameElse?: string;\n\t};\n\tappType?: GiftedChatAppType;\n}\n\n// Day component - renders date separator in chat\n// Shows formatted date with smart labeling (Today, Yesterday, etc.)\nconst DayComponent: React.FC<DayProps> = ({\n\tcreatedAt,\n\tdateFormat = 'D MMMM YY',\n\tdateFormatCalendar,\n\tappType = GiftedChatAppType.Bik,\n}) => {\n\t// Format date for display with smart labeling\n\tconst dateStr = useMemo(() => {\n\t\tif (createdAt == null) return null;\n\n\t\tlet date: Date;\n\t\tif (typeof createdAt === 'number') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else if (createdAt instanceof Date) {\n\t\t\tdate = startOfDay(createdAt);\n\t\t} else if (typeof createdAt === 'string') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\n\t\t// For manifest, always show 'Jan 9, 2026' format\n\t\tif (appType === GiftedChatAppType.Manifest) {\n\t\t\treturn format(date, 'MMM d, yyyy');\n\t\t}\n\n\t\tconst now = startOfDay(new Date());\n\t\t// If not same year, show full date with day of week\n\t\tif (!isSameYear(now, date)) {\n\t\t\treturn format(date, 'EEEE, d MMMM yy');\n\t\t}\n\n\t\tconst daysDiff = differenceInDays(now, date);\n\n\t\t// If today\n\t\tif (daysDiff < 1) {\n\t\t\tif (dateFormatCalendar?.sameDay) {\n\t\t\t\treturn dateFormatCalendar.sameDay.replace(/\\[|\\]/g, '');\n\t\t\t}\n\t\t\treturn 'Today';\n\t\t}\n\n\t\t// If yesterday\n\t\tif (daysDiff === 1) {\n\t\t\treturn 'Yesterday';\n\t\t}\n\n\t\t// Format: \"Friday, 7 November 25\"\n\t\treturn format(date, 'EEEE, d MMMM yy');\n\t}, [createdAt, dateFormat, dateFormatCalendar, appType]);\n\n\tif (!dateStr) return null;\n\n\tif (appType === GiftedChatAppType.Manifest) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tmarginTop: 5,\n\t\t\t\t\tmarginBottom: 10,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tbackground: 'transparent',\n\t\t\t\t\t\tcolor: '#b2b2b2',\n\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</span>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tstyle={{\n\t\t\t\tdisplay: 'flex',\n\t\t\t\talignItems: 'center',\n\t\t\t\tjustifyContent: 'center',\n\t\t\t\tmargin: '12px 0px 12px 8px',\n\t\t\t}}\n\t\t>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\tpadding: '4px 12px',\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t{dateStr}\n\t\t\t\t</BodyCaption>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tflex: 1,\n\t\t\t\t\theight: '1px',\n\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t}}\n\t\t\t/>\n\t\t</div>\n\t);\n};\n\n// Export memoized version for performance\nexport const Day = React.memo(DayComponent);\n\nexport default Day;\n"],"names":["DayComponent","createdAt","dateFormat","dateFormatCalendar","appType","GiftedChatAppType","dateStr","useMemo","date","startOfDay","format","now","isSameYear","daysDiff","differenceInDays","jsx","jsxs","COLORS","BodyCaption","Day","React"],"mappings":";;;;;;AAuBA,MAAMA,IAAmC,CAAC;AAAA,EACzC,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,oBAAAC;AAAA,EACA,SAAAC,IAAUC,EAAkB;AAC7B,MAAM;AAEL,QAAMC,IAAUC,EAAQ,MAAM;AAC7B,QAAIN,KAAa,KAAM,QAAO;AAE9B,QAAIO;AACJ,QAAI,OAAOP,KAAc;AACxB,MAAAO,IAAOC,EAAW,IAAI,KAAKR,CAAS,CAAC;AAAA,aAC3BA,aAAqB;AAC/B,MAAAO,IAAOC,EAAWR,CAAS;AAAA,aACjB,OAAOA,KAAc;AAC/B,MAAAO,IAAOC,EAAW,IAAI,KAAKR,CAAS,CAAC;AAAA;AAErC,aAAO;AAIR,QAAIG,MAAYC,EAAkB;AACjC,aAAOK,EAAOF,GAAM,aAAa;AAGlC,UAAMG,IAAMF,EAAW,oBAAI,MAAM;AAEjC,QAAI,CAACG,EAAWD,GAAKH,CAAI;AACxB,aAAOE,EAAOF,GAAM,iBAAiB;AAGtC,UAAMK,IAAWC,EAAiBH,GAAKH,CAAI;AAG3C,WAAIK,IAAW,IACVV,GAAoB,UAChBA,EAAmB,QAAQ,QAAQ,UAAU,EAAE,IAEhD,UAIJU,MAAa,IACT,cAIDH,EAAOF,GAAM,iBAAiB;AAAA,EACtC,GAAG,CAACP,GAAWC,GAAYC,GAAoBC,CAAO,CAAC;AAEvD,SAAKE,IAEDF,MAAYC,EAAkB,WAEhC,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,cAAc;AAAA,MAAA;AAAA,MAGf,UAAA,gBAAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,OAAO;AAAA,YACN,YAAY;AAAA,YACZ,OAAO;AAAA,YACP,UAAU;AAAA,YACV,YAAY;AAAA,YACZ,SAAS;AAAA,UAAA;AAAA,UAGT,UAAAT;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA,IAMF,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,OAAO;AAAA,QACN,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,QAAQ;AAAA,MAAA;AAAA,MAGT,UAAA;AAAA,QAAA,gBAAAD;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,iBAAiBE,EAAO,OAAO;AAAA,YAAA;AAAA,UAChC;AAAA,QAAA;AAAA,QAED,gBAAAF;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,QAAQ,aAAaE,EAAO,OAAO,OAAO;AAAA,cAC1C,cAAc;AAAA,cACd,SAAS;AAAA,YAAA;AAAA,YAGV,UAAA,gBAAAF,EAACG,KAAY,OAAO,EAAE,OAAOD,EAAO,QAAQ,aAC1C,UAAAX,EAAA,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,QAED,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,MAAM;AAAA,cACN,QAAQ;AAAA,cACR,iBAAiBE,EAAO,OAAO;AAAA,YAAA;AAAA,UAChC;AAAA,QAAA;AAAA,MACD;AAAA,IAAA;AAAA,EAAA,IA7DmB;AAgEtB,GAGaE,IAAMC,EAAM,KAAKpB,CAAY;"}
+{"version":3,"file":"Day.js","sources":["../../../../../src/components/BikGiftedChat/GiftedChat/Day.tsx"],"sourcesContent":["import { differenceInDays, format, isSameYear, startOfDay } from 'date-fns';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\nimport { COLORS } from '../../../constants/Theme';\nimport { BodyCaption } from '../../TypographyStyle';\nimport { GiftedChatAppType } from '../Bubble/types';\n\n// Props for Day component\nexport interface DayProps {\n\tcreatedAt?: Date | number | string;\n\tdateFormat?: string;\n\tdateFormatCalendar?: {\n\t\tsameDay?: string;\n\t\tnextDay?: string;\n\t\tnextWeek?: string;\n\t\tlastDay?: string;\n\t\tlastWeek?: string;\n\t\tsameElse?: string;\n\t};\n\tappType?: GiftedChatAppType;\n\t/**\n\t * Scroll container the separator sticks within. When provided, the\n\t * separator pins to the top while its day's messages scroll past, and the\n\t * divider lines are hidden while pinned (floating-pill look).\n\t */\n\tscrollRootRef?: React.RefObject<HTMLElement | null>;\n}\n\n// Day component - renders date separator in chat\n// Shows formatted date with smart labeling (Today, Yesterday, etc.)\nconst DayComponent: React.FC<DayProps> = ({\n\tcreatedAt,\n\tdateFormat = 'D MMMM YY',\n\tdateFormatCalendar,\n\tappType = GiftedChatAppType.Bik,\n\tscrollRootRef,\n}) => {\n\t// Tracks whether the separator is currently pinned to the top of the\n\t// scroll container. A zero-layout sentinel rendered just above the sticky\n\t// header scrolls normally; once it leaves the top edge the header is pinned.\n\tconst sentinelRef = useRef<HTMLDivElement>(null);\n\tconst [isStuck, setIsStuck] = useState(false);\n\t// Format date for display with smart labeling\n\tconst dateStr = useMemo(() => {\n\t\tif (createdAt == null) return null;\n\n\t\tlet date: Date;\n\t\tif (typeof createdAt === 'number') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else if (createdAt instanceof Date) {\n\t\t\tdate = startOfDay(createdAt);\n\t\t} else if (typeof createdAt === 'string') {\n\t\t\tdate = startOfDay(new Date(createdAt));\n\t\t} else {\n\t\t\treturn null;\n\t\t}\n\n\t\t// For manifest, always show 'Jan 9, 2026' format\n\t\tif (appType === GiftedChatAppType.Manifest) {\n\t\t\treturn format(date, 'MMM d, yyyy');\n\t\t}\n\n\t\tconst now = startOfDay(new Date());\n\t\t// If not same year, show full date with day of week\n\t\tif (!isSameYear(now, date)) {\n\t\t\treturn format(date, 'EEEE, d MMMM yy');\n\t\t}\n\n\t\tconst daysDiff = differenceInDays(now, date);\n\n\t\t// If today\n\t\tif (daysDiff < 1) {\n\t\t\tif (dateFormatCalendar?.sameDay) {\n\t\t\t\treturn dateFormatCalendar.sameDay.replace(/\\[|\\]/g, '');\n\t\t\t}\n\t\t\treturn 'Today';\n\t\t}\n\n\t\t// If yesterday\n\t\tif (daysDiff === 1) {\n\t\t\treturn 'Yesterday';\n\t\t}\n\n\t\t// Format: \"Friday, 7 November 25\"\n\t\treturn format(date, 'EEEE, d MMMM yy');\n\t}, [createdAt, dateFormat, dateFormatCalendar, appType]);\n\n\t// Detect the pinned state. The sentinel scrolls with the content; once it\n\t// crosses above the scroll container's top edge the header is pinned.\n\tuseEffect(() => {\n\t\tconst sentinel = sentinelRef.current;\n\t\tif (!sentinel || typeof IntersectionObserver === 'undefined') return;\n\t\tconst root = scrollRootRef?.current ?? null;\n\t\tconst observer = new IntersectionObserver(\n\t\t\t([entry]) => {\n\t\t\t\tconst rootTop = root ? root.getBoundingClientRect().top : 0;\n\t\t\t\t// Pinned only when the sentinel has left via the TOP edge — not\n\t\t\t\t// when it's simply offscreen below (yet to be scrolled into view).\n\t\t\t\tsetIsStuck(\n\t\t\t\t\t!entry.isIntersecting && entry.boundingClientRect.top <= rootTop,\n\t\t\t\t);\n\t\t\t},\n\t\t\t{ root, threshold: [0, 1] },\n\t\t);\n\t\tobserver.observe(sentinel);\n\t\treturn () => observer.disconnect();\n\t}, [scrollRootRef, dateStr]);\n\n\tif (!dateStr) return null;\n\n\t// Zero-layout sentinel sitting just above the sticky header.\n\tconst sentinel = (\n\t\t<div\n\t\t\tref={sentinelRef}\n\t\t\taria-hidden\n\t\t\tstyle={{ height: 1, marginBottom: -1 }}\n\t\t/>\n\t);\n\n\tif (appType === GiftedChatAppType.Manifest) {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{sentinel}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\tzIndex: 2,\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\t\tmarginTop: 5,\n\t\t\t\t\t\tmarginBottom: 10,\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<span\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackground: isStuck ? COLORS.surface.standard : 'transparent',\n\t\t\t\t\t\t\tcolor: '#b2b2b2',\n\t\t\t\t\t\t\tfontSize: 12,\n\t\t\t\t\t\t\tfontWeight: 600,\n\t\t\t\t\t\t\tpadding: '2px 8px',\n\t\t\t\t\t\t\tborderRadius: 12,\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{dateStr}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{sentinel}\n\t\t\t<div\n\t\t\t\tstyle={{\n\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\ttop: 0,\n\t\t\t\t\tzIndex: 2,\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\tmarginTop: 8,\n\t\t\t\t\tmarginBottom: 8,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{!isStuck && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\theight: '1px',\n\t\t\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t<div\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tborder: `1px solid ${COLORS.stroke.primary}`,\n\t\t\t\t\t\tborderRadius: '16px',\n\t\t\t\t\t\tpadding: '4px 12px',\n\t\t\t\t\t\tbackground: isStuck ? COLORS.surface.standard : 'transparent',\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<BodyCaption style={{ color: COLORS.content.secondary }}>\n\t\t\t\t\t\t{dateStr}\n\t\t\t\t\t</BodyCaption>\n\t\t\t\t</div>\n\t\t\t\t{!isStuck && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tflex: 1,\n\t\t\t\t\t\t\theight: '1px',\n\t\t\t\t\t\t\tbackgroundColor: COLORS.stroke.primary,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\n// Export memoized version for performance\nexport const Day = React.memo(DayComponent);\n\nexport default Day;\n"],"names":["DayComponent","createdAt","dateFormat","dateFormatCalendar","appType","GiftedChatAppType","scrollRootRef","sentinelRef","useRef","isStuck","setIsStuck","useState","dateStr","useMemo","date","startOfDay","format","now","isSameYear","daysDiff","differenceInDays","useEffect","sentinel","root","observer","entry","rootTop","jsx","jsxs","Fragment","COLORS","BodyCaption","Day","React"],"mappings":";;;;;;AA6BA,MAAMA,IAAmC,CAAC;AAAA,EACzC,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,oBAAAC;AAAA,EACA,SAAAC,IAAUC,EAAkB;AAAA,EAC5B,eAAAC;AACD,MAAM;AAIL,QAAMC,IAAcC,EAAuB,IAAI,GACzC,CAACC,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAUC,EAAQ,MAAM;AAC7B,QAAIZ,KAAa,KAAM,QAAO;AAE9B,QAAIa;AACJ,QAAI,OAAOb,KAAc;AACxB,MAAAa,IAAOC,EAAW,IAAI,KAAKd,CAAS,CAAC;AAAA,aAC3BA,aAAqB;AAC/B,MAAAa,IAAOC,EAAWd,CAAS;AAAA,aACjB,OAAOA,KAAc;AAC/B,MAAAa,IAAOC,EAAW,IAAI,KAAKd,CAAS,CAAC;AAAA;AAErC,aAAO;AAIR,QAAIG,MAAYC,EAAkB;AACjC,aAAOW,EAAOF,GAAM,aAAa;AAGlC,UAAMG,IAAMF,EAAW,oBAAI,MAAM;AAEjC,QAAI,CAACG,EAAWD,GAAKH,CAAI;AACxB,aAAOE,EAAOF,GAAM,iBAAiB;AAGtC,UAAMK,IAAWC,EAAiBH,GAAKH,CAAI;AAG3C,WAAIK,IAAW,IACVhB,GAAoB,UAChBA,EAAmB,QAAQ,QAAQ,UAAU,EAAE,IAEhD,UAIJgB,MAAa,IACT,cAIDH,EAAOF,GAAM,iBAAiB;AAAA,EACtC,GAAG,CAACb,GAAWC,GAAYC,GAAoBC,CAAO,CAAC;AAuBvD,MAnBAiB,EAAU,MAAM;AACf,UAAMC,IAAWf,EAAY;AAC7B,QAAI,CAACe,KAAY,OAAO,uBAAyB,IAAa;AAC9D,UAAMC,IAAOjB,GAAe,WAAW,MACjCkB,IAAW,IAAI;AAAA,MACpB,CAAC,CAACC,CAAK,MAAM;AACZ,cAAMC,IAAUH,IAAOA,EAAK,sBAAA,EAAwB,MAAM;AAG1D,QAAAb;AAAA,UACC,CAACe,EAAM,kBAAkBA,EAAM,mBAAmB,OAAOC;AAAA,QAAA;AAAA,MAE3D;AAAA,MACA,EAAE,MAAAH,GAAM,WAAW,CAAC,GAAG,CAAC,EAAA;AAAA,IAAE;AAE3B,WAAAC,EAAS,QAAQF,CAAQ,GAClB,MAAME,EAAS,WAAA;AAAA,EACvB,GAAG,CAAClB,GAAeM,CAAO,CAAC,GAEvB,CAACA,EAAS,QAAO;AAGrB,QAAMU,IACL,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAKpB;AAAA,MACL,eAAW;AAAA,MACX,OAAO,EAAE,QAAQ,GAAG,cAAc,GAAA;AAAA,IAAG;AAAA,EAAA;AAIvC,SAAIH,MAAYC,EAAkB,WAEhC,gBAAAuB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAAP;AAAA,IACD,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,UAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX,cAAc;AAAA,QAAA;AAAA,QAGf,UAAA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACA,OAAO;AAAA,cACN,YAAYlB,IAAUqB,EAAO,QAAQ,WAAW;AAAA,cAChD,OAAO;AAAA,cACP,UAAU;AAAA,cACV,YAAY;AAAA,cACZ,SAAS;AAAA,cACT,cAAc;AAAA,YAAA;AAAA,YAGd,UAAAlB;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACD,GACD,IAKD,gBAAAgB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAAP;AAAA,IACD,gBAAAM;AAAA,MAAC;AAAA,MAAA;AAAA,QACA,OAAO;AAAA,UACN,UAAU;AAAA,UACV,KAAK;AAAA,UACL,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,WAAW;AAAA,UACX,cAAc;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAA,CAACnB,KACD,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,MAAM;AAAA,gBACN,QAAQ;AAAA,gBACR,iBAAiBG,EAAO,OAAO;AAAA,cAAA;AAAA,YAChC;AAAA,UAAA;AAAA,UAGF,gBAAAH;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,QAAQ,aAAaG,EAAO,OAAO,OAAO;AAAA,gBAC1C,cAAc;AAAA,gBACd,SAAS;AAAA,gBACT,YAAYrB,IAAUqB,EAAO,QAAQ,WAAW;AAAA,cAAA;AAAA,cAGjD,UAAA,gBAAAH,EAACI,KAAY,OAAO,EAAE,OAAOD,EAAO,QAAQ,aAC1C,UAAAlB,EAAA,CACF;AAAA,YAAA;AAAA,UAAA;AAAA,UAEA,CAACH,KACD,gBAAAkB;AAAA,YAAC;AAAA,YAAA;AAAA,cACA,OAAO;AAAA,gBACN,MAAM;AAAA,gBACN,QAAQ;AAAA,gBACR,iBAAiBG,EAAO,OAAO;AAAA,cAAA;AAAA,YAChC;AAAA,UAAA;AAAA,QACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAEF,GACD;AAEF,GAGaE,IAAMC,EAAM,KAAKjC,CAAY;"}