@bikdotai/bik-component-library 0.0.805-beta.33 → 0.0.805-beta.34
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,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),t=require("../../../constants/Theme.js"),n=require("../../../hooks/useWindowSize.js"),s=require("../GiftedChat/types.js"),l=require("../GiftedChat/utils.js"),r=require("./types.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=o=>{var a,d,c,u,g,v;const{currentMessage:f,position:b,renderMessageText:h,renderTicks:y,renderTime:j,renderCustomView:p,isCustomViewBottom:m,isUnsatisfactoryMessageFn:O,messagesGroupedByAiTraceId:C,onPress:S,containerStyle:A,bubbleStyles:T,appType:x=r.GiftedChatAppType.Bik}=o,M=n.useWindowSize(),I=f,k=x===r.GiftedChatAppType.Manifest,E=i.useMemo((()=>I.category===l.Constants.ChatActivity.Category.ACTIVITY&&I.activityType===l.Constants.ChatActivity.Type.PRIVATE_NOTE),[I.category,I.activityType]),G=i.useMemo((()=>{const[e,i]=l.isStringifiedArray(null==I?void 0:I.message);return e&&i&&Array.isArray(i)}),[null==I?void 0:I.message]),L=(null==I?void 0:I.channelId)===s.MESSAGE_CHANNELS.SMTP||(null==I?void 0:I.channelName)===s.MESSAGE_CHANNELS.SMTP,N=i.useMemo((()=>{var e,i,n;const l={borderRadius:8,minHeight:20,margin:0,flexGrow:M?1:0,width:"100%"},r=(null==I?void 0:I.channelId)===s.MESSAGE_CHANNELS.GMAIL||(null==I?void 0:I.channelName)===s.MESSAGE_CHANNELS.GMAIL;let o={};if(k)return o="left"===b?T&&"object"==typeof T.left?T.left:{}:T&&"object"==typeof T.right?T.right:{},Object.assign({},o);if("left"===b)o=Object.assign(Object.assign({},M||r||L?{maxWidth:"100%"}:{}),E?{background:t.COLORS.background.warning.light}:{backgroundColor:(null==I?void 0:I.isPrivateMail)?t.COLORS.background.blue.light:t.COLORS.surface.standard});else{const i=O&&O({aiTraceId:null===(e=I.eventProperties)||void 0===e?void 0:e.aiTraceId,messagesGroupedByAiTraceId:C});o=Object.assign(Object.assign({backgroundColor:"failed"===I.status||i?t.COLORS.background.negative.light:t.COLORS.background.brandUltraLight},E?{background:t.COLORS.background.warning.light}:{}),!M&&G?{maxWidth:500}:{})}const a=T&&"object"==typeof T?"left"in T||"right"in T?"left"===b?null!==(i=T.left)&&void 0!==i?i:{}:null!==(n=T.right)&&void 0!==n?n:{}:T:{};return Object.assign(Object.assign(Object.assign({},l),o),a)}),[null==I?void 0:I.channelId,null==I?void 0:I.channelName,null===(a=null==I?void 0:I.meta)||void 0===a?void 0:a.aiUsed,null==I?void 0:I.status,null===(d=null==I?void 0:I.eventProperties)||void 0===d?void 0:d.aiTraceId,b,M,E,G,O,C,null==I?void 0:I.isPrivateMail,T,k]),w=i.useCallback((()=>e.jsxs("div",{children:[!m&&(null==p?void 0:p(o)),null==h?void 0:h(o),m&&(null==p?void 0:p(o))]})),[m,p,h,o]),P=i.useMemo((()=>k&&"object"==typeof A?"left"===b&&"left"in A&&A.left&&"object"==typeof A.left?A.left:"right"===b&&"right"in A&&A.right&&"object"==typeof A.right?A.right:{}:{}),[k,A,b]),q=!k&&A&&"object"==typeof A?"left"in A||"right"in A?"left"===b?null!==(c=A.left)&&void 0!==c?c:{}:null!==(u=A.right)&&void 0!==u?u:{}:A:{};return e.jsx("div",Object.assign({style:Object.assign(Object.assign(Object.assign({display:"flex",
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("react"),t=require("../../../constants/Theme.js"),n=require("../../../hooks/useWindowSize.js"),s=require("../GiftedChat/types.js"),l=require("../GiftedChat/utils.js"),r=require("./types.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const a=o=>{var a,d,c,u,g,v;const{currentMessage:f,position:b,renderMessageText:h,renderTicks:y,renderTime:j,renderCustomView:p,isCustomViewBottom:m,isUnsatisfactoryMessageFn:O,messagesGroupedByAiTraceId:C,onPress:S,containerStyle:A,bubbleStyles:T,appType:x=r.GiftedChatAppType.Bik}=o,M=n.useWindowSize(),I=f,k=x===r.GiftedChatAppType.Manifest,E=i.useMemo((()=>I.category===l.Constants.ChatActivity.Category.ACTIVITY&&I.activityType===l.Constants.ChatActivity.Type.PRIVATE_NOTE),[I.category,I.activityType]),G=i.useMemo((()=>{const[e,i]=l.isStringifiedArray(null==I?void 0:I.message);return e&&i&&Array.isArray(i)}),[null==I?void 0:I.message]),L=(null==I?void 0:I.channelId)===s.MESSAGE_CHANNELS.SMTP||(null==I?void 0:I.channelName)===s.MESSAGE_CHANNELS.SMTP,N=i.useMemo((()=>{var e,i,n;const l={borderRadius:8,minHeight:20,margin:0,flexGrow:M?1:0,width:"100%"},r=(null==I?void 0:I.channelId)===s.MESSAGE_CHANNELS.GMAIL||(null==I?void 0:I.channelName)===s.MESSAGE_CHANNELS.GMAIL;let o={};if(k)return o="left"===b?T&&"object"==typeof T.left?T.left:{}:T&&"object"==typeof T.right?T.right:{},Object.assign({},o);if("left"===b)o=Object.assign(Object.assign({},M||r||L?{maxWidth:"100%"}:{}),E?{background:t.COLORS.background.warning.light}:{backgroundColor:(null==I?void 0:I.isPrivateMail)?t.COLORS.background.blue.light:t.COLORS.surface.standard});else{const i=O&&O({aiTraceId:null===(e=I.eventProperties)||void 0===e?void 0:e.aiTraceId,messagesGroupedByAiTraceId:C});o=Object.assign(Object.assign({backgroundColor:"failed"===I.status||i?t.COLORS.background.negative.light:t.COLORS.background.brandUltraLight},E?{background:t.COLORS.background.warning.light}:{}),!M&&G?{maxWidth:500}:{})}const a=T&&"object"==typeof T?"left"in T||"right"in T?"left"===b?null!==(i=T.left)&&void 0!==i?i:{}:null!==(n=T.right)&&void 0!==n?n:{}:T:{};return Object.assign(Object.assign(Object.assign({},l),o),a)}),[null==I?void 0:I.channelId,null==I?void 0:I.channelName,null===(a=null==I?void 0:I.meta)||void 0===a?void 0:a.aiUsed,null==I?void 0:I.status,null===(d=null==I?void 0:I.eventProperties)||void 0===d?void 0:d.aiTraceId,b,M,E,G,O,C,null==I?void 0:I.isPrivateMail,T,k]),w=i.useCallback((()=>e.jsxs("div",{children:[!m&&(null==p?void 0:p(o)),null==h?void 0:h(o),m&&(null==p?void 0:p(o))]})),[m,p,h,o]),P=i.useMemo((()=>k&&"object"==typeof A?"left"===b&&"left"in A&&A.left&&"object"==typeof A.left?A.left:"right"===b&&"right"in A&&A.right&&"object"==typeof A.right?A.right:{}:{}),[k,A,b]),q=!k&&A&&"object"==typeof A?"left"in A||"right"in A?"left"===b?null!==(c=A.left)&&void 0!==c?c:{}:null!==(u=A.right)&&void 0!==u?u:{}:A:{};return e.jsx("div",Object.assign({style:Object.assign(Object.assign(Object.assign({display:"flex",marginTop:k?0:6,marginBottom:k?0:(null===(v=null===(g=null==f?void 0:f.messageInformation)||void 0===g?void 0:g.reactions)||void 0===v?void 0:v.length)>0?24:6,flexGrow:M?1:0},k?Object.assign({alignItems:"flex-end"},"right"===b?{cursor:"pointer"}:{}):{}),P),q)},k?{onClick:S}:{},{children:e.jsx("div",Object.assign({style:N},{children:e.jsxs("div",{children:[e.jsx("div",Object.assign({id:f.chatActivityId||`message-${f.psqlId}`},{children:w()})),e.jsxs("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end"}},{children:[null==j?void 0:j(o),null==y?void 0:y(f)]}))]})}))}))},d=o(i).default.memo(a);exports.Bubble=d,exports.default=d;
|
|
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.surface.standard,\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\tbackground: 'red',\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) */}\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","Bik","isMobile","useWindowSize","message","isManifestApp","Manifest","isPrivateNote","useMemo","category","Constants","ChatActivity","Category","ACTIVITY","activityType","Type","PRIVATE_NOTE","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","Array","isArray","isSmtp","channelId","MESSAGE_CHANNELS","SMTP","channelName","wrapperStyles","baseStyles","borderRadius","minHeight","margin","flexGrow","width","isGmail","GMAIL","dynamicStyles","left","right","Object","assign","maxWidth","background","COLORS","warning","light","backgroundColor","isPrivateMail","blue","surface","standard","isUnsatisfactory","aiTraceId","_a","eventProperties","status","negative","brandUltraLight","extraBubbleStyles","_b","_c","meta","aiUsed","renderContent","useCallback","_jsxs","children","manifestContainerStyle","extraContainerStyle","_d","_jsx","style","display","marginTop","marginBottom","_f","_e","reactions","length","alignItems","cursor","onClick","jsx","jsxs","id","flexDirection","justifyContent","Bubble","React","memo"],"mappings":"wXAQA,MAAMA,EACLC,oBAEA,MAAMC,eACLA,EAAcC,SACdA,EAAQC,kBACRA,EAAiBC,YACjBA,EAAWC,WACXA,EAAUC,iBACVA,EAAgBC,mBAChBA,EAAkBC,0BAClBA,EAAyBC,2BACzBA,EAA0BC,QAC1BA,EAAOC,eACPA,EAAcC,aACdA,EAAYC,QACZA,EAAUC,EAAiBA,kBAACC,KACzBf,EAEEgB,EAAWC,EAAAA,gBACXC,EAAUjB,EACVkB,EAAgBN,IAAYC,EAAiBA,kBAACM,SAG9CC,EAAgBC,WACrB,IACCJ,EAAQK,WAAaC,EAAAA,UAAUC,aAAaC,SAASC,UACrDT,EAAQU,eAAiBJ,YAAUC,aAAaI,KAAKC,cACtD,CAACZ,EAAQK,SAAUL,EAAQU,eAItBG,EAAoBT,EAAAA,SAAQ,KACjC,MAAOU,EAAoBC,GAAiBC,EAAAA,mBAC3ChB,aAAA,EAAAA,EAASA,SAEV,OAAOc,GAAsBC,GAAiBE,MAAMC,QAAQH,EAAc,GACxE,CAACf,aAAA,EAAAA,EAASA,UACPmB,GACLnB,aAAA,EAAAA,EAASoB,aAAcC,EAAgBA,iBAACC,OACxCtB,aAAA,EAAAA,EAASuB,eAAgBF,EAAgBA,iBAACC,KAIrCE,EAAgBpB,EAAAA,SAAQ,eAC7B,MAAMqB,EAAkC,CACvCC,aAAc,EACdC,UAAW,GACXC,OAAQ,EACRC,SAAU/B,EAAW,EAAI,EACzBgC,MAAO,QAIFC,GACL/B,aAAA,EAAAA,EAASoB,aAAcC,EAAgBA,iBAACW,QACxChC,aAAA,EAAAA,EAASuB,eAAgBF,EAAgBA,iBAACW,MAE3C,IAAIC,EAAqC,CAAA,EAEzC,GAAIhC,EAYH,OAVCgC,EADgB,SAAbjD,EAEFU,GAA6C,iBAAtBA,EAAawC,KACjCxC,EAAawC,KACb,GAGHxC,GAA8C,iBAAvBA,EAAayC,MACjCzC,EAAayC,MACb,GAELC,OAAAC,OAAA,CAAA,EAAYJ,GAEZ,GAAiB,SAAbjD,EACHiD,EAAaG,OAAAC,OAAAD,OAAAC,OAAA,GACRvC,GAAYiC,GAAWZ,EAAS,CAAEmB,SAAU,QAAW,CAAA,GACvDnC,EACD,CACAoC,WAAYC,EAAMA,OAACD,WAAWE,QAAQC,OAEtC,CACAC,iBAAiB3C,aAAA,EAAAA,EAAS4C,eACvBJ,EAAMA,OAACD,WAAWM,KAAKH,MACvBF,EAAAA,OAAOM,QAAQC,eAGhB,CACN,MAAMC,EACL1D,GACAA,EAA0B,CACzB2D,kBAAWC,EAAAlD,EAAQmD,sCAAiBF,UACpC1D,+BAGF0C,EAAaG,OAAAC,OAAAD,OAAAC,OAAA,CACZM,gBACoB,WAAnB3C,EAAQoD,QAAuBJ,EAC5BR,EAAAA,OAAOD,WAAWc,SAASX,MAC3BF,EAAMA,OAACD,WAAWe,iBAClBnD,EACD,CACAoC,WAAYC,EAAMA,OAACD,WAAWE,QAAQC,OAEtC,KACE5C,GAAYe,EAAoB,CAAEyB,SAAU,KAAQ,CAAG,EAE7D,CAEF,MAAMiB,EACL7D,GAAwC,iBAAjBA,EACpB,SAAUA,GAAgB,UAAWA,EACvB,SAAbV,UACEwE,EAAA9D,EAAgDwC,oBAAQ,CAAE,UAC1DuB,EAAA/D,EAAiDyC,qBAAS,CAAE,EAC7DzC,EACF,GAEJ,OAAA0C,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYZ,GAAeQ,GAAkBsB,EAAoB,GAC/D,CACFvD,aAAA,EAAAA,EAASoB,UACTpB,aAAA,EAAAA,EAASuB,oBACT2B,EAAAlD,aAAO,EAAPA,EAAS0D,2BAAMC,OACf3D,aAAA,EAAAA,EAASoD,eACTI,EAAAxD,aAAO,EAAPA,EAASmD,sCAAiBF,UAC1BjE,EACAc,EACAK,EACAU,EACAvB,EACAC,EACAS,aAAA,EAAAA,EAAS4C,cACTlD,EACAO,IAKK2D,EAAgBC,EAAAA,aAAY,IAEhCC,EAAAA,KACE,MAAA,CAAAC,SAAA,EAAC1E,IAAsBD,aAAA,EAAAA,EAAmBN,IAE1CG,aAAA,EAAAA,EAAoBH,GAEpBO,IAAsBD,aAAgB,EAAhBA,EAAmBN,QAG1C,CAACO,EAAoBD,EAAkBH,EAAmBH,IAEvDkF,EAAyB5D,EAAAA,SAAQ,IACjCH,GAA2C,iBAAnBR,EAEf,SAAbT,GACA,SAAUS,GACVA,EAAeyC,MACgB,iBAAxBzC,EAAeyC,KAEfzC,EAAeyC,KAGT,UAAblD,GACA,UAAWS,GACXA,EAAe0C,OACiB,iBAAzB1C,EAAe0C,MAEf1C,EAAe0C,MAEhB,GAjB0D,CAAA,GAkB/D,CAAClC,EAAeR,EAAgBT,IAE7BiF,GACJhE,GAAiBR,GAA4C,iBAAnBA,EACxC,SAAUA,GAAkB,UAAWA,EACzB,SAAbT,UACEyE,EAAAhE,EAAkDyC,oBAAQ,CAAA,UAC1DgC,EAAAzE,EAAmD0C,qBAAS,CAAE,EAC/D1C,EACF,GAEJ,OACC0E,MACC,MAAA/B,OAAAC,OAAA,CAAA+B,MACChC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAAgC,QAAS,OACT9B,WAAY,MACZ+B,UAAWrE,EAAgB,EAAI,EAC/BsE,aAActE,EACX,GACmD,QAAnDuE,EAAsC,QAAtCC,EAAA1F,aAAc,EAAdA,EAAqC,0BAAC,IAAA0F,OAAA,EAAAA,EAAEC,iBAAW,IAAAF,OAAA,EAAAA,EAAAG,QAAS,EAC5D,GACA,EACH9C,SAAU/B,EAAW,EAAI,GACrBG,EAEDmC,OAAAC,OAAA,CAAAuC,WAAY,YACK,UAAb5F,EAAuB,CAAE6F,OAAQ,WAAc,CAAG,GAEtD,CAAA,GACAb,GACAC,IAEChE,EAAgB,CAAE6E,QAAStF,GAAY,GAAG,CAAAuE,SAE/CI,EAAKY,IAAA,MAAA3C,OAAAC,OAAA,CAAA+B,MAAO5C,GACX,CAAAuC,SAAAD,EAAAkB,KAAA,MAAA,CAAAjB,SAAA,CAECI,EACCY,IAAA,MAAA3C,OAAAC,OAAA,CAAA4C,GACClG,EAA+B,gBAC/B,WAAWA,EAAuB,UAAG,CAAAgF,SAGrCH,OAIFE,EACCkB,KAAA,MAAA5C,OAAAC,OAAA,CAAA+B,MAAO,CACNC,QAAS,OACTa,cAAe,MACfC,eAAgB,aAGhB,CAAApB,SAAA,CAAA5E,aAAU,EAAVA,EAAaL,GACbI,aAAA,EAAAA,EAAcH,eAIb,EAKKqG,OAASC,QAAMC,KAAKzG"}
|
|
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.surface.standard,\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) */}\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","Bik","isMobile","useWindowSize","message","isManifestApp","Manifest","isPrivateNote","useMemo","category","Constants","ChatActivity","Category","ACTIVITY","activityType","Type","PRIVATE_NOTE","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","Array","isArray","isSmtp","channelId","MESSAGE_CHANNELS","SMTP","channelName","wrapperStyles","baseStyles","borderRadius","minHeight","margin","flexGrow","width","isGmail","GMAIL","dynamicStyles","left","right","Object","assign","maxWidth","background","COLORS","warning","light","backgroundColor","isPrivateMail","blue","surface","standard","isUnsatisfactory","aiTraceId","_a","eventProperties","status","negative","brandUltraLight","extraBubbleStyles","_b","_c","meta","aiUsed","renderContent","useCallback","_jsxs","children","manifestContainerStyle","extraContainerStyle","_d","_jsx","style","display","marginTop","marginBottom","_f","_e","reactions","length","alignItems","cursor","onClick","jsx","jsxs","id","flexDirection","justifyContent","Bubble","React","memo"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t,{useMemo as n,useCallback as
|
|
1
|
+
import{jsxs as e,jsx as i}from"react/jsx-runtime";import t,{useMemo as n,useCallback as l}from"react";import{COLORS as o}from"../../../constants/Theme.js";import{useWindowSize as r}from"../../../hooks/useWindowSize.js";import{MESSAGE_CHANNELS as s}from"../GiftedChat/types.js";import{Constants as a,isStringifiedArray as d}from"../GiftedChat/utils.js";import{GiftedChatAppType as c}from"./types.js";const g=t=>{var g,u,v,f,h,m;const{currentMessage:b,position:y,renderMessageText:p,renderTicks:j,renderTime:T,renderCustomView:I,isCustomViewBottom:O,isUnsatisfactoryMessageFn:k,messagesGroupedByAiTraceId:x,onPress:C,containerStyle:A,bubbleStyles:M,appType:w=c.Bik}=t,G=r(),P=b,B=w===c.Manifest,S=n((()=>P.category===a.ChatActivity.Category.ACTIVITY&&P.activityType===a.ChatActivity.Type.PRIVATE_NOTE),[P.category,P.activityType]),N=n((()=>{const[e,i]=d(null==P?void 0:P.message);return e&&i&&Array.isArray(i)}),[null==P?void 0:P.message]),V=(null==P?void 0:P.channelId)===s.SMTP||(null==P?void 0:P.channelName)===s.SMTP,L=n((()=>{var e,i,t;const n={borderRadius:8,minHeight:20,margin:0,flexGrow:G?1:0,width:"100%"},l=(null==P?void 0:P.channelId)===s.GMAIL||(null==P?void 0:P.channelName)===s.GMAIL;let r={};if(B)return r="left"===y?M&&"object"==typeof M.left?M.left:{}:M&&"object"==typeof M.right?M.right:{},Object.assign({},r);if("left"===y)r=Object.assign(Object.assign({},G||l||V?{maxWidth:"100%"}:{}),S?{background:o.background.warning.light}:{backgroundColor:(null==P?void 0:P.isPrivateMail)?o.background.blue.light:o.surface.standard});else{const i=k&&k({aiTraceId:null===(e=P.eventProperties)||void 0===e?void 0:e.aiTraceId,messagesGroupedByAiTraceId:x});r=Object.assign(Object.assign({backgroundColor:"failed"===P.status||i?o.background.negative.light:o.background.brandUltraLight},S?{background:o.background.warning.light}:{}),!G&&N?{maxWidth:500}:{})}const a=M&&"object"==typeof M?"left"in M||"right"in M?"left"===y?null!==(i=M.left)&&void 0!==i?i:{}:null!==(t=M.right)&&void 0!==t?t:{}:M:{};return Object.assign(Object.assign(Object.assign({},n),r),a)}),[null==P?void 0:P.channelId,null==P?void 0:P.channelName,null===(g=null==P?void 0:P.meta)||void 0===g?void 0:g.aiUsed,null==P?void 0:P.status,null===(u=null==P?void 0:P.eventProperties)||void 0===u?void 0:u.aiTraceId,y,G,S,N,k,x,null==P?void 0:P.isPrivateMail,M,B]),U=l((()=>e("div",{children:[!O&&(null==I?void 0:I(t)),null==p?void 0:p(t),O&&(null==I?void 0:I(t))]})),[O,I,p,t]),W=n((()=>B&&"object"==typeof A?"left"===y&&"left"in A&&A.left&&"object"==typeof A.left?A.left:"right"===y&&"right"in A&&A.right&&"object"==typeof A.right?A.right:{}:{}),[B,A,y]),E=!B&&A&&"object"==typeof A?"left"in A||"right"in A?"left"===y?null!==(v=A.left)&&void 0!==v?v:{}:null!==(f=A.right)&&void 0!==f?f:{}:A:{};return i("div",Object.assign({style:Object.assign(Object.assign(Object.assign({display:"flex",marginTop:B?0:6,marginBottom:B?0:(null===(m=null===(h=null==b?void 0:b.messageInformation)||void 0===h?void 0:h.reactions)||void 0===m?void 0:m.length)>0?24:6,flexGrow:G?1:0},B?Object.assign({alignItems:"flex-end"},"right"===y?{cursor:"pointer"}:{}):{}),W),E)},B?{onClick:C}:{},{children:i("div",Object.assign({style:L},{children:e("div",{children:[i("div",Object.assign({id:b.chatActivityId||`message-${b.psqlId}`},{children:U()})),e("div",Object.assign({style:{display:"flex",flexDirection:"row",justifyContent:"flex-end"}},{children:[null==T?void 0:T(t),null==j?void 0:j(b)]}))]})}))}))},u=t.memo(g);export{u as Bubble,u as default};
|
|
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.surface.standard,\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\tbackground: 'red',\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) */}\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","Bik","isMobile","useWindowSize","message","isManifestApp","Manifest","isPrivateNote","useMemo","category","Constants","ChatActivity","Category","ACTIVITY","activityType","Type","PRIVATE_NOTE","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","Array","isArray","isSmtp","channelId","MESSAGE_CHANNELS","SMTP","channelName","wrapperStyles","baseStyles","borderRadius","minHeight","margin","flexGrow","width","isGmail","GMAIL","dynamicStyles","left","right","Object","assign","maxWidth","background","COLORS","warning","light","backgroundColor","isPrivateMail","blue","surface","standard","isUnsatisfactory","aiTraceId","_a","eventProperties","status","negative","brandUltraLight","extraBubbleStyles","_b","_c","meta","aiUsed","renderContent","useCallback","_jsxs","children","manifestContainerStyle","extraContainerStyle","_d","_jsx","style","display","marginTop","marginBottom","_f","_e","reactions","length","alignItems","cursor","onClick","id","flexDirection","justifyContent","Bubble","React","memo"],"mappings":"+YAQA,MAAMA,EACLC,oBAEA,MAAMC,eACLA,EAAcC,SACdA,EAAQC,kBACRA,EAAiBC,YACjBA,EAAWC,WACXA,EAAUC,iBACVA,EAAgBC,mBAChBA,EAAkBC,0BAClBA,EAAyBC,2BACzBA,EAA0BC,QAC1BA,EAAOC,eACPA,EAAcC,aACdA,EAAYC,QACZA,EAAUC,EAAkBC,KACzBf,EAEEgB,EAAWC,IACXC,EAAUjB,EACVkB,EAAgBN,IAAYC,EAAkBM,SAG9CC,EAAgBC,GACrB,IACCJ,EAAQK,WAAaC,EAAUC,aAAaC,SAASC,UACrDT,EAAQU,eAAiBJ,EAAUC,aAAaI,KAAKC,cACtD,CAACZ,EAAQK,SAAUL,EAAQU,eAItBG,EAAoBT,GAAQ,KACjC,MAAOU,EAAoBC,GAAiBC,EAC3ChB,aAAA,EAAAA,EAASA,SAEV,OAAOc,GAAsBC,GAAiBE,MAAMC,QAAQH,EAAc,GACxE,CAACf,aAAA,EAAAA,EAASA,UACPmB,GACLnB,aAAA,EAAAA,EAASoB,aAAcC,EAAiBC,OACxCtB,aAAA,EAAAA,EAASuB,eAAgBF,EAAiBC,KAIrCE,EAAgBpB,GAAQ,eAC7B,MAAMqB,EAAkC,CACvCC,aAAc,EACdC,UAAW,GACXC,OAAQ,EACRC,SAAU/B,EAAW,EAAI,EACzBgC,MAAO,QAIFC,GACL/B,aAAA,EAAAA,EAASoB,aAAcC,EAAiBW,QACxChC,aAAA,EAAAA,EAASuB,eAAgBF,EAAiBW,MAE3C,IAAIC,EAAqC,CAAA,EAEzC,GAAIhC,EAYH,OAVCgC,EADgB,SAAbjD,EAEFU,GAA6C,iBAAtBA,EAAawC,KACjCxC,EAAawC,KACb,GAGHxC,GAA8C,iBAAvBA,EAAayC,MACjCzC,EAAayC,MACb,GAELC,OAAAC,OAAA,CAAA,EAAYJ,GAEZ,GAAiB,SAAbjD,EACHiD,EAAaG,OAAAC,OAAAD,OAAAC,OAAA,GACRvC,GAAYiC,GAAWZ,EAAS,CAAEmB,SAAU,QAAW,CAAA,GACvDnC,EACD,CACAoC,WAAYC,EAAOD,WAAWE,QAAQC,OAEtC,CACAC,iBAAiB3C,aAAA,EAAAA,EAAS4C,eACvBJ,EAAOD,WAAWM,KAAKH,MACvBF,EAAOM,QAAQC,eAGhB,CACN,MAAMC,EACL1D,GACAA,EAA0B,CACzB2D,kBAAWC,EAAAlD,EAAQmD,sCAAiBF,UACpC1D,+BAGF0C,EAAaG,OAAAC,OAAAD,OAAAC,OAAA,CACZM,gBACoB,WAAnB3C,EAAQoD,QAAuBJ,EAC5BR,EAAOD,WAAWc,SAASX,MAC3BF,EAAOD,WAAWe,iBAClBnD,EACD,CACAoC,WAAYC,EAAOD,WAAWE,QAAQC,OAEtC,KACE5C,GAAYe,EAAoB,CAAEyB,SAAU,KAAQ,CAAG,EAE7D,CAEF,MAAMiB,EACL7D,GAAwC,iBAAjBA,EACpB,SAAUA,GAAgB,UAAWA,EACvB,SAAbV,UACEwE,EAAA9D,EAAgDwC,oBAAQ,CAAE,UAC1DuB,EAAA/D,EAAiDyC,qBAAS,CAAE,EAC7DzC,EACF,GAEJ,OAAA0C,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAYZ,GAAeQ,GAAkBsB,EAAoB,GAC/D,CACFvD,aAAA,EAAAA,EAASoB,UACTpB,aAAA,EAAAA,EAASuB,oBACT2B,EAAAlD,aAAO,EAAPA,EAAS0D,2BAAMC,OACf3D,aAAA,EAAAA,EAASoD,eACTI,EAAAxD,aAAO,EAAPA,EAASmD,sCAAiBF,UAC1BjE,EACAc,EACAK,EACAU,EACAvB,EACAC,EACAS,aAAA,EAAAA,EAAS4C,cACTlD,EACAO,IAKK2D,EAAgBC,GAAY,IAEhCC,EACE,MAAA,CAAAC,SAAA,EAAC1E,IAAsBD,aAAA,EAAAA,EAAmBN,IAE1CG,aAAA,EAAAA,EAAoBH,GAEpBO,IAAsBD,aAAgB,EAAhBA,EAAmBN,QAG1C,CAACO,EAAoBD,EAAkBH,EAAmBH,IAEvDkF,EAAyB5D,GAAQ,IACjCH,GAA2C,iBAAnBR,EAEf,SAAbT,GACA,SAAUS,GACVA,EAAeyC,MACgB,iBAAxBzC,EAAeyC,KAEfzC,EAAeyC,KAGT,UAAblD,GACA,UAAWS,GACXA,EAAe0C,OACiB,iBAAzB1C,EAAe0C,MAEf1C,EAAe0C,MAEhB,GAjB0D,CAAA,GAkB/D,CAAClC,EAAeR,EAAgBT,IAE7BiF,GACJhE,GAAiBR,GAA4C,iBAAnBA,EACxC,SAAUA,GAAkB,UAAWA,EACzB,SAAbT,UACEyE,EAAAhE,EAAkDyC,oBAAQ,CAAA,UAC1DgC,EAAAzE,EAAmD0C,qBAAS,CAAE,EAC/D1C,EACF,GAEJ,OACC0E,EACC,MAAA/B,OAAAC,OAAA,CAAA+B,MACChC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAAgC,QAAS,OACT9B,WAAY,MACZ+B,UAAWrE,EAAgB,EAAI,EAC/BsE,aAActE,EACX,GACmD,QAAnDuE,EAAsC,QAAtCC,EAAA1F,aAAc,EAAdA,EAAqC,0BAAC,IAAA0F,OAAA,EAAAA,EAAEC,iBAAW,IAAAF,OAAA,EAAAA,EAAAG,QAAS,EAC5D,GACA,EACH9C,SAAU/B,EAAW,EAAI,GACrBG,EAEDmC,OAAAC,OAAA,CAAAuC,WAAY,YACK,UAAb5F,EAAuB,CAAE6F,OAAQ,WAAc,CAAG,GAEtD,CAAA,GACAb,GACAC,IAEChE,EAAgB,CAAE6E,QAAStF,GAAY,GAAG,CAAAuE,SAE/CI,EAAK,MAAA/B,OAAAC,OAAA,CAAA+B,MAAO5C,GACX,CAAAuC,SAAAD,EAAA,MAAA,CAAAC,SAAA,CAECI,EACC,MAAA/B,OAAAC,OAAA,CAAA0C,GACChG,EAA+B,gBAC/B,WAAWA,EAAuB,UAAG,CAAAgF,SAGrCH,OAIFE,EACC,MAAA1B,OAAAC,OAAA,CAAA+B,MAAO,CACNC,QAAS,OACTW,cAAe,MACfC,eAAgB,aAGhB,CAAAlB,SAAA,CAAA5E,aAAU,EAAVA,EAAaL,GACbI,aAAA,EAAAA,EAAcH,eAIb,EAKKmG,EAASC,EAAMC,KAAKvG"}
|
|
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.surface.standard,\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) */}\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","Bik","isMobile","useWindowSize","message","isManifestApp","Manifest","isPrivateNote","useMemo","category","Constants","ChatActivity","Category","ACTIVITY","activityType","Type","PRIVATE_NOTE","isCarouselMessage","parsedSuccessfully","parsedMessage","isStringifiedArray","Array","isArray","isSmtp","channelId","MESSAGE_CHANNELS","SMTP","channelName","wrapperStyles","baseStyles","borderRadius","minHeight","margin","flexGrow","width","isGmail","GMAIL","dynamicStyles","left","right","Object","assign","maxWidth","background","COLORS","warning","light","backgroundColor","isPrivateMail","blue","surface","standard","isUnsatisfactory","aiTraceId","_a","eventProperties","status","negative","brandUltraLight","extraBubbleStyles","_b","_c","meta","aiUsed","renderContent","useCallback","_jsxs","children","manifestContainerStyle","extraContainerStyle","_d","_jsx","style","display","marginTop","marginBottom","_f","_e","reactions","length","alignItems","cursor","onClick","id","flexDirection","justifyContent","Bubble","React","memo"],"mappings":"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"}
|