@bikdotai/bik-component-library 0.0.821-beta.3 → 0.0.821-beta.4
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.
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react"),l=require("../../../constants/Theme.js"),R=require("../../../hooks/useWindowSize.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react"),l=require("../../../constants/Theme.js"),R=require("../../../hooks/useWindowSize.js"),f=require("../GiftedChat/types.js"),p=require("../GiftedChat/utils.js"),T=require("./types.js"),P=n=>n&&typeof n=="object"&&"default"in n?n:{default:n},q=P(c),B=n=>{const{currentMessage:d,position:s,renderMessageText:C,renderTicks:x,renderTime:v,renderCustomView:y,isCustomViewBottom:h,isUnsatisfactoryMessageFn:m,messagesGroupedByAiTraceId:M,onPress:j,containerStyle:t,bubbleStyles:i,appType:I=T.GiftedChatAppType.Bik}=n,u=R.useWindowSize(),e=d,r=I===T.GiftedChatAppType.Manifest,b=c.useMemo(()=>e.category===p.Constants.ChatActivity.Category.ACTIVITY&&e.activityType===p.Constants.ChatActivity.Type.PRIVATE_NOTE,[e.category,e.activityType]),A=c.useMemo(()=>{const[S,g]=p.isStringifiedArray(e?.message);return S&&g&&Array.isArray(g)},[e?.message]),k=e?.channelId===f.MESSAGE_CHANNELS.SMTP||e?.channelName===f.MESSAGE_CHANNELS.SMTP,E=c.useMemo(()=>{const S={borderRadius:8,minHeight:20,margin:0,flexGrow:u?1:0,width:"100%"},g=e?.channelId===f.MESSAGE_CHANNELS.GMAIL||e?.channelName===f.MESSAGE_CHANNELS.GMAIL;let a={};if(r)return s==="left"?a=i&&typeof i.left=="object"?i.left:{}:a=i&&typeof i.right=="object"?i.right:{},{...a};if(s==="left")a={...u||g||k?{maxWidth:"100%"}:{},...b?{background:l.COLORS.background.warning.light}:{backgroundColor:e?.isPrivateMail?l.COLORS.background.blue.light:l.COLORS.background.warning.light}};else{const G=m&&m({aiTraceId:e.eventProperties?.aiTraceId,messagesGroupedByAiTraceId:M});a={backgroundColor:e.status==="failed"||G?l.COLORS.background.negative.light:l.COLORS.background.brandUltraLight,...b?{background:l.COLORS.background.warning.light}:{},...!u&&A?{maxWidth:500}:{}}}const w=i&&typeof i=="object"?"left"in i||"right"in i?s==="left"?i.left??{}:i.right??{}:i:{};return{...S,...a,...w}},[e?.channelId,e?.channelName,e?.meta?.aiUsed,e?.status,e?.eventProperties?.aiTraceId,s,u,b,A,m,M,e?.isPrivateMail,i,r]),O=c.useCallback(()=>o.jsxs("div",{children:[!h&&y?.(n),C?.(n),h&&y?.(n)]}),[h,y,C,n]),L=c.useMemo(()=>!r||typeof t!="object"?{}:s==="left"&&"left"in t&&t.left&&typeof t.left=="object"?t.left:s==="right"&&"right"in t&&t.right&&typeof t.right=="object"?t.right:{},[r,t,s]),N=!r&&t&&typeof t=="object"?"left"in t||"right"in t?s==="left"?t.left??{}:t.right??{}:t:{};return o.jsx("div",{style:{display:"flex",marginTop:r?0:6,marginBottom:r?0:d?.messageInformation?.reactions?.length>0?24:6,flexGrow:u?1:0,...r?{alignItems:"flex-end",...s==="right"?{cursor:"pointer"}:{}}:{},...L,...N},...r?{onClick:j}:{},children:o.jsx("div",{style:E,children:o.jsxs("div",{children:[o.jsx("div",{id:d.chatActivityId||`message-${d.psqlId}`,children:O()}),o.jsxs("div",{style:{display:"flex",flexDirection:"row",justifyContent:"flex-end"},children:[v?.(n),x?.(d)]})]})})})},_=q.default.memo(B);exports.Bubble=_;
|
|
2
2
|
//# sourceMappingURL=Bubble.js.map
|
|
@@ -1 +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\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.warning.light,\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// Lay the content and the time/ticks in a wrapping row so a short\n\t\t\t\t\t// message keeps the time beside it (with a gap) like WhatsApp, while\n\t\t\t\t\t// wide/long content pushes the time onto its own line below. The\n\t\t\t\t\t// time's `margin-left: auto` keeps it right-aligned on either side.\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexWrap: 'wrap',\n\t\t\t\t\t\talignItems: 'flex-end',\n\t\t\t\t\t\tcolumnGap: 6,\n\t\t\t\t\t}}\n\t\t\t\t>\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\tflexShrink: 0,\n\t\t\t\t\t\t\tmarginLeft: 'auto',\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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"}
|
|
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\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.warning.light,\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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"}
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as p, jsx as C } from "react/jsx-runtime";
|
|
2
2
|
import R, { useMemo as f, useCallback as U } from "react";
|
|
3
3
|
import { COLORS as o } from "../../../constants/Theme.js";
|
|
4
4
|
import { useWindowSize as V } from "../../../hooks/useWindowSize.js";
|
|
5
5
|
import { MESSAGE_CHANNELS as g } from "../GiftedChat/types.js";
|
|
6
|
-
import { Constants as
|
|
7
|
-
import { GiftedChatAppType as
|
|
8
|
-
const
|
|
6
|
+
import { Constants as I, isStringifiedArray as _ } from "../GiftedChat/utils.js";
|
|
7
|
+
import { GiftedChatAppType as M } from "./types.js";
|
|
8
|
+
const O = (s) => {
|
|
9
9
|
const {
|
|
10
10
|
currentMessage: l,
|
|
11
11
|
position: r,
|
|
12
|
-
renderMessageText:
|
|
13
|
-
renderTicks:
|
|
14
|
-
renderTime:
|
|
12
|
+
renderMessageText: T,
|
|
13
|
+
renderTicks: x,
|
|
14
|
+
renderTime: A,
|
|
15
15
|
renderCustomView: m,
|
|
16
16
|
isCustomViewBottom: y,
|
|
17
17
|
isUnsatisfactoryMessageFn: u,
|
|
18
18
|
messagesGroupedByAiTraceId: S,
|
|
19
|
-
onPress:
|
|
19
|
+
onPress: k,
|
|
20
20
|
containerStyle: t,
|
|
21
21
|
bubbleStyles: i,
|
|
22
|
-
appType: w =
|
|
23
|
-
} =
|
|
24
|
-
() => e.category ===
|
|
22
|
+
appType: w = M.Bik
|
|
23
|
+
} = s, c = V(), e = l, n = w === M.Manifest, h = f(
|
|
24
|
+
() => e.category === I.ChatActivity.Category.ACTIVITY && e.activityType === I.ChatActivity.Type.PRIVATE_NOTE,
|
|
25
25
|
[e.category, e.activityType]
|
|
26
|
-
),
|
|
27
|
-
const [
|
|
26
|
+
), v = f(() => {
|
|
27
|
+
const [b, d] = _(
|
|
28
28
|
e?.message
|
|
29
29
|
);
|
|
30
|
-
return
|
|
31
|
-
}, [e?.message]), j = e?.channelId === g.SMTP || e?.channelName === g.SMTP,
|
|
32
|
-
const
|
|
30
|
+
return b && d && Array.isArray(d);
|
|
31
|
+
}, [e?.message]), j = e?.channelId === g.SMTP || e?.channelName === g.SMTP, P = f(() => {
|
|
32
|
+
const b = {
|
|
33
33
|
borderRadius: 8,
|
|
34
34
|
minHeight: 20,
|
|
35
35
|
margin: 0,
|
|
36
36
|
flexGrow: c ? 1 : 0,
|
|
37
37
|
width: "100%"
|
|
38
38
|
}, d = e?.channelId === g.GMAIL || e?.channelName === g.GMAIL;
|
|
39
|
-
let
|
|
39
|
+
let a = {};
|
|
40
40
|
if (n)
|
|
41
|
-
return r === "left" ?
|
|
41
|
+
return r === "left" ? a = i && typeof i.left == "object" ? i.left : {} : a = i && typeof i.right == "object" ? i.right : {}, { ...a };
|
|
42
42
|
if (r === "left")
|
|
43
|
-
|
|
43
|
+
a = {
|
|
44
44
|
...c || d || j ? { maxWidth: "100%" } : {},
|
|
45
45
|
...h ? {
|
|
46
46
|
background: o.background.warning.light
|
|
@@ -49,20 +49,20 @@ const _ = (a) => {
|
|
|
49
49
|
}
|
|
50
50
|
};
|
|
51
51
|
else {
|
|
52
|
-
const
|
|
52
|
+
const L = u && u({
|
|
53
53
|
aiTraceId: e.eventProperties?.aiTraceId,
|
|
54
54
|
messagesGroupedByAiTraceId: S
|
|
55
55
|
});
|
|
56
|
-
|
|
57
|
-
backgroundColor: e.status === "failed" ||
|
|
56
|
+
a = {
|
|
57
|
+
backgroundColor: e.status === "failed" || L ? o.background.negative.light : o.background.brandUltraLight,
|
|
58
58
|
...h ? {
|
|
59
59
|
background: o.background.warning.light
|
|
60
60
|
} : {},
|
|
61
|
-
...!c &&
|
|
61
|
+
...!c && v ? { maxWidth: 500 } : {}
|
|
62
62
|
};
|
|
63
63
|
}
|
|
64
|
-
const
|
|
65
|
-
return { ...
|
|
64
|
+
const E = i && typeof i == "object" ? "left" in i || "right" in i ? r === "left" ? i.left ?? {} : i.right ?? {} : i : {};
|
|
65
|
+
return { ...b, ...a, ...E };
|
|
66
66
|
}, [
|
|
67
67
|
e?.channelId,
|
|
68
68
|
e?.channelName,
|
|
@@ -72,17 +72,17 @@ const _ = (a) => {
|
|
|
72
72
|
r,
|
|
73
73
|
c,
|
|
74
74
|
h,
|
|
75
|
-
|
|
75
|
+
v,
|
|
76
76
|
u,
|
|
77
77
|
S,
|
|
78
78
|
e?.isPrivateMail,
|
|
79
79
|
i,
|
|
80
80
|
n
|
|
81
|
-
]),
|
|
82
|
-
!y && m?.(
|
|
83
|
-
|
|
84
|
-
y && m?.(
|
|
85
|
-
] }), [y, m,
|
|
81
|
+
]), G = U(() => /* @__PURE__ */ p("div", { children: [
|
|
82
|
+
!y && m?.(s),
|
|
83
|
+
T?.(s),
|
|
84
|
+
y && m?.(s)
|
|
85
|
+
] }), [y, m, T, s]), B = f(() => !n || typeof t != "object" ? {} : r === "left" && "left" in t && t.left && typeof t.left == "object" ? t.left : r === "right" && "right" in t && t.right && typeof t.right == "object" ? t.right : {}, [n, t, r]), N = !n && t && typeof t == "object" ? "left" in t || "right" in t ? r === "left" ? t.left ?? {} : t.right ?? {} : t : {};
|
|
86
86
|
return /* @__PURE__ */ C(
|
|
87
87
|
"div",
|
|
88
88
|
{
|
|
@@ -98,46 +98,33 @@ const _ = (a) => {
|
|
|
98
98
|
...B,
|
|
99
99
|
...N
|
|
100
100
|
},
|
|
101
|
-
...n ? { onClick:
|
|
102
|
-
children: /* @__PURE__ */ C("div", { style:
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
justifyContent: "flex-end",
|
|
126
|
-
flexShrink: 0,
|
|
127
|
-
marginLeft: "auto"
|
|
128
|
-
},
|
|
129
|
-
children: [
|
|
130
|
-
k?.(a),
|
|
131
|
-
M?.(l)
|
|
132
|
-
]
|
|
133
|
-
}
|
|
134
|
-
)
|
|
135
|
-
]
|
|
136
|
-
}
|
|
137
|
-
) })
|
|
101
|
+
...n ? { onClick: k } : {},
|
|
102
|
+
children: /* @__PURE__ */ C("div", { style: P, children: /* @__PURE__ */ p("div", { children: [
|
|
103
|
+
/* @__PURE__ */ C(
|
|
104
|
+
"div",
|
|
105
|
+
{
|
|
106
|
+
id: l.chatActivityId || `message-${l.psqlId}`,
|
|
107
|
+
children: G()
|
|
108
|
+
}
|
|
109
|
+
),
|
|
110
|
+
/* @__PURE__ */ p(
|
|
111
|
+
"div",
|
|
112
|
+
{
|
|
113
|
+
style: {
|
|
114
|
+
display: "flex",
|
|
115
|
+
flexDirection: "row",
|
|
116
|
+
justifyContent: "flex-end"
|
|
117
|
+
},
|
|
118
|
+
children: [
|
|
119
|
+
A?.(s),
|
|
120
|
+
x?.(l)
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
)
|
|
124
|
+
] }) })
|
|
138
125
|
}
|
|
139
126
|
);
|
|
140
|
-
}, $ = R.memo(
|
|
127
|
+
}, $ = R.memo(O);
|
|
141
128
|
export {
|
|
142
129
|
$ as Bubble
|
|
143
130
|
};
|
|
@@ -1 +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\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.warning.light,\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// Lay the content and the time/ticks in a wrapping row so a short\n\t\t\t\t\t// message keeps the time beside it (with a gap) like WhatsApp, while\n\t\t\t\t\t// wide/long content pushes the time onto its own line below. The\n\t\t\t\t\t// time's `margin-left: auto` keeps it right-aligned on either side.\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tflexWrap: 'wrap',\n\t\t\t\t\t\talignItems: 'flex-end',\n\t\t\t\t\t\tcolumnGap: 6,\n\t\t\t\t\t}}\n\t\t\t\t>\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\tflexShrink: 0,\n\t\t\t\t\t\t\tmarginLeft: 'auto',\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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"}
|
|
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\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.warning.light,\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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"}
|