@sendbird/uikit-react/chunks/bundle-ChE9cvzN.js

Sendbird UIKit for React: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React__default, { createContext, useState, useCallback, useContext, useEffect, useRef, useMemo, useLayoutEffect } from 'react';

var q=Object.defineProperty,K=Object.defineProperties;var $=Object.getOwnPropertyDescriptors;var w=Object.getOwnPropertySymbols;var R=Object.prototype.hasOwnProperty,k$1=Object.prototype.propertyIsEnumerable;var P=(e,t,i)=>t in e?q(e,t,{enumerable:true,configurable:true,writable:true,value:i}):e[t]=i,l=(e,t)=>{for(var i in t||(t={}))R.call(t,i)&&P(e,i,t[i]);if(w)for(var i of w(t))k$1.call(t,i)&&P(e,i,t[i]);return e},y=(e,t)=>K(e,$(t));var I$1=(e,t)=>{var i={};for(var a in e)R.call(e,a)&&t.indexOf(a)<0&&(i[a]=e[a]);if(e!=null&&w)for(var a of w(e))t.indexOf(a)<0&&k$1.call(e,a)&&(i[a]=e[a]);return i};var G=(o=>(o.Box="box",o.Text="text",o.Image="image",o.TextButton="textButton",o.ImageButton="imageButton",o.Carousel="carouselView",o.Cascade="cascadeView",o))(G||{});var S=(e,t)=>typeof t[e]!="string"?{}:{[e]:J$1(t[e])};function J$1(e){return e.startsWith("#")?e.length===9?`#${e.slice(3)}${e[1]}${e[2]}`:e.length===5?`#${e.slice(2)}${e[1]}`:e:e}var z=e=>e?{viewStyle:l(l(l({},e),S("backgroundColor",e)),S("borderColor",e))}:{},Q$1=e=>e?{textStyle:l(l({},e),S("color",e))}:{},X$1=e=>e?{imageStyle:l(l({},e),S("tintColor",e))}:{},L$1={run(e){return e.type==="text"||e.type==="textButton"?l(l(l({},e),z(e.viewStyle)),Q$1(e.textStyle)):e.type==="imageButton"||e.type==="image"?l(l(l({},e),z(e.viewStyle)),X$1(e.imageStyle)):l(l({},e),z(e.viewStyle))}};var f=e=>typeof e=="string"?!Number.isNaN(Number(e)):typeof e=="number"&&!Number.isNaN(e),u$1=(e,t)=>t[e]===void 0||t[e]===null?{}:f(t[e])?{[e]:Number(t[e])}:{},M=(e,t)=>t?{[e]:{left:f(t.left)?Number(t.left):t.left,right:f(t.right)?Number(t.right):t.right,top:f(t.top)?Number(t.top):t.top,bottom:f(t.bottom)?Number(t.bottom):t.bottom}}:{},U=(e,t)=>t?{[e]:{type:t.type,value:f(t.value)?Number(t.value):t.value}}:{},Y=e=>e?{metaData:{pixelWidth:f(e.pixelWidth)?Number(e.pixelWidth):e.pixelWidth,pixelHeight:f(e.pixelHeight)?Number(e.pixelHeight):e.pixelHeight}}:{},Z$1=e=>e?{viewStyle:l(l(l(l(l({},e),u$1("borderWidth",e)),u$1("radius",e)),M("margin",e.margin)),M("padding",e.padding))}:{},ee$1=e=>e?{textStyle:l(l(l({},e),u$1("size",e)),u$1("weight",e))}:{},te=e=>e?{carouselStyle:l(l(l({},e),u$1("spacing",e)),u$1("maxChildWidth",e))}:{},le=e=>e?{cascadeStyle:l(l({},e),u$1("spacing",e))}:{},v=e=>l(l(l({},U("width",e.width)),U("height",e.height)),Z$1(e.viewStyle)),ie=e=>l(l(l({},v(e)),ee$1(e.textStyle)),u$1("maxTextLines",e)),oe=e=>l(l({},v(e)),Y(e.metaData)),ae=e=>y(l(l({},v(e)),te(e.carouselStyle)),{items:e.items.map(t=>y(l({},t),{body:y(l({},t.body),{items:t.body.items.map(i=>b.run(i))})}))}),re=e=>y(l(l({},v(e)),le(e.cascadeStyle)),{items:e.items.map(t=>y(l({},t),{body:y(l({},t.body),{items:t.body.items.map(i=>b.run(i))})}))}),b={run(e){return e.type==="text"||e.type==="textButton"?l(l({},e),ie(e)):e.type==="imageButton"||e.type==="image"?l(l({},e),oe(e)):e.type==="carouselView"?l(l({},e),ae(e)):e.type==="cascadeView"?l(l({},e),re(e)):l(l({},e),v(e))}};var pe$1=()=>{},D=e=>{var r;let t=(e==null?void 0:e.defaultMapper)||pe$1,i={defaultMapper:t,mapBoxProps:(e==null?void 0:e.mapBoxProps)||t,mapTextProps:(e==null?void 0:e.mapTextProps)||t,mapImageProps:(e==null?void 0:e.mapImageProps)||t,mapTextButtonProps:(e==null?void 0:e.mapTextButtonProps)||t,mapImageButtonProps:(e==null?void 0:e.mapImageButtonProps)||t,mapCarouselProps:(e==null?void 0:e.mapCarouselProps)||t,mapCascadeProps:(e==null?void 0:e.mapCascadeProps)||t},a=[L$1,b,...(r=e==null?void 0:e.transforms)!=null?r:[]];return {setTransforms(p){a.length=0,a.push(...p);},addTransforms(p){a.push(...p);},parse(p,n){let o=a.reduce((h,g)=>g.run(h),p);switch(o.type){case "box":return {transformed:o,properties:i.mapBoxProps(o,n)};case "text":return {transformed:o,properties:i.mapTextProps(o,n)};case "image":return {transformed:o,properties:i.mapImageProps(o,n)};case "textButton":return {transformed:o,properties:i.mapTextButtonProps(o,n)};case "imageButton":return {transformed:o,properties:i.mapImageButtonProps(o,n)};case "carouselView":return {transformed:o,properties:i.mapCarouselProps(o,n)};case "cascadeView":return {transformed:o,properties:i.mapCascadeProps(o,n)};default:return {transformed:o,properties:void 0}}}}};var s=({children:e})=>React__default.createElement(React__default.Fragment,null,e);function A$1(e){var t,i,a,r,p,n,o;return {box:((t=e==null?void 0:e.views)==null?void 0:t.box)||s,text:((i=e==null?void 0:e.views)==null?void 0:i.text)||s,image:((a=e==null?void 0:e.views)==null?void 0:a.image)||s,imageButton:((r=e==null?void 0:e.views)==null?void 0:r.imageButton)||s,textButton:((p=e==null?void 0:e.views)==null?void 0:p.textButton)||s,carouselView:((n=e==null?void 0:e.views)==null?void 0:n.carouselView)||s,cascadeView:((o=e==null?void 0:e.views)==null?void 0:o.cascadeView)||s}}var j=createContext({sizes:{},updateSize:()=>{}}),E$1=({children:e})=>{let[t,i]=useState({}),a=useCallback(n=>{var o=n,{id:r}=o,p=I$1(o,["id"]);r&&i(h=>y(l({},h),{[r]:p}));},[]);return React__default.createElement(j.Provider,{value:{sizes:t,updateSize:a}},e)},xt$1=()=>useContext(j);var ge$1=(i=>(i.Row="row",i.Column="column",i))(ge$1||{}),fe$1=(p=>(p.Center="center",p.Left="left",p.Right="right",p.Top="top",p.Bottom="bottom",p))(fe$1||{}),ue$1=(i=>(i[i.FillParent=0]="FillParent",i[i.WrapContent=1]="WrapContent",i))(ue$1||{}),me=(i=>(i.Normal="normal",i.Bold="bold",i))(me||{}),se=(a=>(a.AspectFit="aspectFit",a.AspectFill="aspectFill",a.ScalesToFill="scalesToFill",a))(se||{});var T=[1,2],gt$1=e=>{switch(e){case "right":case "bottom":return "flex-end";case "center":return "center";case "left":case "top":default:return "flex-start"}},H=e=>e?T.includes(Number(e)):true;var ce$1=e=>{let t=new Map,i=function(a){return (t.has(a)||t.set(a,e.call(this,a)))&&t.get(a)};return i.cache=t,i},N$1=ce$1(e=>{let t=(i,a)=>{"items"in i&&(i==null?void 0:i.items)!=null&&i.items.forEach((r,p)=>{let n=`${a}-${p}`;r.id=n,t(r,n);});};return e.forEach((i,a)=>{let r=`${a}`;i.id=r,t(i,r);}),e});var F$1={rootLayout:"column",view:{size:{width:{type:"flex",value:0},height:{type:"flex",value:1}}},box:{layout:"row",align:{vertical:"top",horizontal:"left"}},textButton:{maxTextLines:1},carousel:{style:{spacing:10,maxChildWidth:240}},cascade:{layout:"column",style:{spacing:10}}};var Tt=e=>{let t=e.Container||React__default.Fragment,i=e.UnknownMessage||(()=>null),a=e.parser||D(),r=e.renderer||A$1(),p=({templateItems:n,templateVersion:o,parentLayout:h=F$1.box.layout,depth:g=0})=>{if(!H(o))throw new Error(`Cannot parse template item due to unsupported template version: ${o}, ${T}`);return React__default.createElement(React__default.Fragment,null,n.map((O,B,_)=>{let W=a.parse(O,{parentLayout:h,depth:g,elemIdx:B,siblings:_}),d=W.transformed,m={key:B,siblings:_,parentLayout:h,parsedProperties:W.properties,rawProperties:O};switch(d.type){case "carouselView":{if(!Array.isArray(d.items))throw new Error("Cannot parse template item as Carousel if carousel has no items.");return React__default.createElement(r.carouselView,l(l({},d),m),d.items.map((c,C)=>React__default.createElement(p,{key:C,templateItems:c.body.items||[],depth:g+1,templateVersion:c.version})))}case "cascadeView":{if(!Array.isArray(d.items))throw new Error("Cannot parse template item as Cascade if cascade has no items.");return React__default.createElement(r.cascadeView,l(l({},d),m),d.items.map((c,C)=>React__default.createElement(p,{key:C,templateItems:c.body.items||[],depth:g+1,templateVersion:c.version})))}case "box":return React__default.createElement(r.box,l(l({},d),m),React__default.createElement(p,{templateItems:d.items||[],parentLayout:d.layout,depth:g+1,templateVersion:o}));case "text":return React__default.createElement(r.text,l(l({},d),m));case "image":return React__default.createElement(r.image,l(l({},d),m));case "textButton":return React__default.createElement(r.textButton,l(l({},d),m));case "imageButton":return React__default.createElement(r.imageButton,l(l({},d),m));default:return React__default.createElement(i,{item:d})}}))};return {MessageTemplate:({templateVersion:n,templateItems:o,parentLayout:h=F$1.rootLayout})=>{let g=N$1(o);return React__default.createElement(E$1,null,React__default.createElement(t,{className:"sb-message-template__parent"},React__default.createElement(p,{isRoot:true,parentLayout:h,templateItems:g,templateVersion:n})))},MessageTemplateBase:p}};var ve$1=(r=>(r.Web="web",r.Custom="custom",r.UIKit="uikit",r.Internal="internal",r))(ve$1||{});

var rt=Object.defineProperty,nt=Object.defineProperties;var ot=Object.getOwnPropertyDescriptors;var X=Object.getOwnPropertySymbols;var ve=Object.prototype.hasOwnProperty,we=Object.prototype.propertyIsEnumerable;var Ie=(e,t,r)=>t in e?rt(e,t,{enumerable:true,configurable:true,writable:true,value:r}):e[t]=r,u=(e,t)=>{for(var r in t||(t={}))ve.call(t,r)&&Ie(e,r,t[r]);if(X)for(var r of X(t))we.call(t,r)&&Ie(e,r,t[r]);return e},E=(e,t)=>nt(e,ot(t));var I=(e,t)=>{var r={};for(var n in e)ve.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(e!=null&&X)for(var n of X(e))t.indexOf(n)<0&&we.call(e,n)&&(r[n]=e[n]);return r};function ke(e){var t;return e.type===G.Text&&((t=e.width)==null?void 0:t.value)==ue$1.WrapContent}var ce=({size:e,option:t})=>t==="wrap"?e.type==="flex"&&e.value==ue$1.WrapContent:t==="fill"?e.type==="flex"&&e.value==ue$1.FillParent:e.type==="fixed",He=e=>{var r;return typeof e!="string"?false:((r=e.split(".").pop())==null?void 0:r.toLowerCase())==="gif"};var k=(...e)=>e.filter(t=>!!t).join(" "),at=(e="")=>["http://","https://","ftp://"].some(t=>e.startsWith(t)),ue=(e="")=>at(e)?e:`https://${e}`;function L(e){return u({display:"flex",overflow:"hidden",boxSizing:"border-box"},e)}function A(e,t,r){mt(e,t,r),ct(e,t);}function lt(e,t,r,n){t&&(e["--border-width"]=`${t}px`,e["--border-color"]=r||"transparent"),n&&(e.borderRadius=n,e["--border-radius"]=`${n}px`);}function ct(e,t){var o,a,s,m,l,i,p,b,d,g,f,x;let{viewStyle:r}=t;e.paddingBlockStart=(o=r==null?void 0:r.padding)==null?void 0:o.top,e.paddingBlockEnd=(a=r==null?void 0:r.padding)==null?void 0:a.bottom,e.paddingInlineStart=(s=r==null?void 0:r.padding)==null?void 0:s.left,e.paddingInlineEnd=(m=r==null?void 0:r.padding)==null?void 0:m.right,e.marginBlockStart=(l=r==null?void 0:r.margin)==null?void 0:l.top,e.marginBlockEnd=(i=r==null?void 0:r.margin)==null?void 0:i.bottom,e.marginInlineStart=(p=r==null?void 0:r.margin)==null?void 0:p.left,e.marginInlineEnd=(b=r==null?void 0:r.margin)==null?void 0:b.right;let n=((g=(d=r==null?void 0:r.margin)==null?void 0:d.left)!=null?g:0)+((x=(f=r==null?void 0:r.margin)==null?void 0:f.right)!=null?x:0);n>0&&e.width==="100%"&&(e.width=`calc(100% - ${n}px)`),r!=null&&r.backgroundColor&&(e.backgroundColor=r.backgroundColor),r!=null&&r.backgroundImageUrl&&(e.backgroundImage=`url(${JSON.stringify(r.backgroundImageUrl)})`,e.backgroundSize="100% 100%",e.backgroundPosition="center"),lt(e,r==null?void 0:r.borderWidth,r==null?void 0:r.borderColor,r==null?void 0:r.radius);}function ut(e,t,r){let n={};return e.type==="flex"&&e.value==ue$1.FillParent?(n.width="100%",r===ge$1.Row&&(n.flex=1)):e.type==="flex"&&e.value==ue$1.WrapContent?(n.width="fit-content",r===ge$1.Row&&(n.flexShrink=0)):e.type==="fixed"&&e.value>=0&&(n.width=e.value,r===ge$1.Row&&(n.flexShrink=0)),t.type==="flex"&&t.value==ue$1.FillParent?(n.height="100%",r===ge$1.Column&&(n.flex=1)):t.type==="flex"&&t.value==ue$1.WrapContent?(n.height="fit-content",r===ge$1.Column&&(n.flexShrink=0)):t.type==="fixed"&&t.value>=0&&(n.height=t.value,r===ge$1.Column&&(n.flexShrink=0)),n}function mt(e,t,r){var m,l;let{width:n,height:o}=F$1.view.size,{parentLayout:a}=r,s=ut((m=t.width)!=null?m:n,(l=t.height)!=null?l:o,a);Object.assign(e,s);}function J(e,t=F$1.box.layout,r=F$1.box.align){t===ge$1.Row&&(e.flexDirection="row",e.alignItems=gt$1(r.vertical),e.justifyContent=gt$1(r.horizontal)),t===ge$1.Column&&(e.flexDirection="column",e.alignItems=gt$1(r.horizontal),e.justifyContent=gt$1(r.vertical));}function We(e,t=F$1.box.align.horizontal){switch(t){case fe$1.Left:e.textAlign="start";break;case fe$1.Right:e.textAlign="end";break;case fe$1.Center:e.textAlign="center";break;default:e.textAlign="start";break}}function de(e,t){let{contentMode:r=se.AspectFit}=t||{};if(r)switch(r){case se.AspectFill:e.objectFit="cover";break;case se.AspectFit:e.objectFit="contain";break;case se.ScalesToFill:e.objectFit="fill";break}}function fe(e,t){var n,o,a,s;let r=t==null?void 0:t.metaData;!(r!=null&&r.pixelHeight)||!(r!=null&&r.pixelWidth)||((n=t==null?void 0:t.width)==null?void 0:n.type)==="fixed"||((o=t==null?void 0:t.height)==null?void 0:o.type)==="fixed"||(e.aspectRatio=`${(a=t==null?void 0:t.metaData)==null?void 0:a.pixelWidth} / ${(s=t==null?void 0:t.metaData)==null?void 0:s.pixelHeight}`);}function pe(e){return {WebkitLineClamp:e,WebkitBoxOrient:"vertical",display:"-webkit-box",overflow:"hidden",overflowWrap:"anywhere",flex:1}}function ge(e,t,r){let{textStyle:n,width:o}=t,{size:a,color:s,weight:m}=n||{};if(a&&(e.fontSize=a),s&&(e.color=s),m&&(e.fontWeight=m),(o==null?void 0:o.type)==="flex"&&(o==null?void 0:o.value)==ue$1.WrapContent&&(e.width="fit-content",e.maxWidth="100%"),t.type===G.Text){let{siblings:l,elemIdx:i}=r;l!=null&&l.length>=2&&l.every(ke)&&(e.flexShrink=l.length-1===i?1:0);}}var he=D({mapBoxProps(e,t){let r=L();return A(r,e,t),J(r,e.layout,e.align),r},mapTextProps(e,t){var n;let r=L({whiteSpace:"pre-line",wordBreak:"break-word"});return A(r,e,t),ge(r,e,t),J(r,ge$1.Row,e.align),We(r,(n=e.align)==null?void 0:n.horizontal),r},mapImageProps(e,t){let r=L();return A(r,e,t),de(r,e.imageStyle),fe(r,e),r},mapTextButtonProps(e,t){let r=L({whiteSpace:"pre-line",alignItems:"center",justifyContent:"center"});return A(r,e,t),ge(r,e,t),r},mapImageButtonProps(e,t){let r=L();return A(r,e,t),de(r,e.imageStyle),fe(r,e),r},mapCarouselProps(e,t){let r=L();return A(r,e,t),r},mapCascadeProps(e,t){var n,o;let r=L();return A(r,e,t),J(r,F$1.cascade.layout),r.gap=(o=(n=e.cascadeStyle)==null?void 0:n.spacing)!=null?o:F$1.cascade.style.spacing,r}});var gt=24,Ae=5;function Ne({spacing:e,childrenLength:t,paddingInlineStart:r,paddingInlineEnd:n}){let o=useRef(null),a=useRef(Array.from({length:t},()=>React__default.createRef())),s=useRef(false),m=useRef(false),l=useRef(null),i=useRef({sx:null,sy:null,offset:0,translateX:0,currentIndex:0,didMove:false}),[p,b]=useState(()=>a.current.map(()=>0)),[d,g]=useState(false),f=d?-1:1,x=useMemo(()=>{let c=r;return p.map((h,R)=>{let T=R>0?e:0,O=c-T,_=O-h;return c=_,{start:O,end:_}})},[p,e,r]),H=useMemo(()=>{let c=p.reduce((R,T)=>R+T,0),h=e*(t-1);return c+h},[p,e,t]);useLayoutEffect(()=>{if(o.current){let c=getComputedStyle(o.current).direction;g(c==="rtl");}},[]),useLayoutEffect(()=>{b(a.current.map(c=>{var h,R;return (R=(h=c.current)==null?void 0:h.clientWidth)!=null?R:0}));},[t]),useLayoutEffect(()=>{x.length>0&&(i.current.translateX=x[0].start,P());},[x]);let v=()=>{o.current&&(s.current=true,o.current.style.cursor="grabbing",o.current.style.transition="none",l.current=requestAnimationFrame(P));},S=()=>{o.current&&(s.current=false,o.current.style.cursor="grab",o.current.style.transition="transform 0.5s ease",l.current&&(cancelAnimationFrame(l.current),l.current=null));},B=()=>{let{offset:c,currentIndex:h}=i.current,R=Math.abs(c)>=gt,T=c<0&&h<t-1,O=c>0&&h>0,_=h;R&&T?_=h+1:R&&O&&(_=h-1);function Ke(Qe){var Te,Ee;let Ze=(Ee=(Te=o.current)==null?void 0:Te.clientWidth)!=null?Ee:0,et=r,tt=Math.min(0,Ze-H)-n;return Math.min(et,Math.max(Qe,tt))}i.current.currentIndex=_,i.current.translateX=Ke(x[_].start),i.current.offset=0;},w=()=>{m.current=true;},C=()=>{m.current=false;},P=()=>{if(o.current){let c=(i.current.translateX+i.current.offset)*f;o.current.style.transform=`translateX(${c}px)`;}l.current&&(l.current=requestAnimationFrame(P));},M=()=>{o.current&&(o.current.style.touchAction="pan-x");},W=()=>{o.current&&(o.current.style.touchAction="pan-y");};return {carouselRef:o,childrenRefs:a,handlers:{onMouseDown:c=>{v(),C(),i.current.sx=c.clientX,i.current.sy=c.clientY,i.current.offset=0,i.current.didMove=false,l.current=requestAnimationFrame(P);},onMouseMove:c=>{!s.current||i.current.sx===null||(i.current.offset=(c.clientX-i.current.sx)*f,Math.abs(i.current.offset)>Ae&&(i.current.didMove=true));},onMouseUp:c=>{s.current&&(C(),B(),S(),i.current.didMove&&(c.preventDefault(),c.stopPropagation()));},onMouseLeave:c=>{s.current&&(C(),B(),S(),i.current.didMove&&(c.preventDefault(),c.stopPropagation()));},onTouchStart:c=>{C(),S();let h=c.touches[0];i.current.sx=h.clientX,i.current.sy=h.clientY,i.current.offset=0,i.current.didMove=false,l.current=requestAnimationFrame(P);},onTouchMove:c=>{if(i.current.sx===null||i.current.sy===null||m.current)return;let{clientX:h,clientY:R}=c.touches[0],{sx:T,sy:O}=i.current;if(s.current){i.current.offset=(h-T)*f,Math.abs(i.current.offset)>Ae&&(i.current.didMove=true);return}Math.abs(R-O)>Math.abs(h-T)?w():(i.current.offset=(h-T)*f,M(),v());},onTouchEnd:c=>{W(),C(),B(),S(),i.current.didMove&&(c.preventDefault(),c.stopPropagation());},onClickCapture:c=>{i.current.didMove&&(c.preventDefault(),c.stopPropagation());}}}}var Fe=s=>{var m=s,{children:e,style:t,spacing:r=F$1.carousel.style.spacing,maxChildWidth:n=F$1.carousel.style.maxChildWidth,inlineStyle:o}=m,a=I(m,["children","style","spacing","maxChildWidth","inlineStyle"]);let f=t!=null?t:{},{paddingInlineStart:l=0,paddingInlineEnd:i=0}=f,p=I(f,["paddingInlineStart","paddingInlineEnd"]),{carouselRef:b,childrenRefs:d,handlers:g}=Ne({spacing:r,childrenLength:e.length,paddingInlineStart:Number(l),paddingInlineEnd:Number(i)});return React__default.createElement("div",u(E(u({},g),{ref:b,style:u(E(u({},p),{gap:r,width:"100%",overflow:"visible"}),o)}),a),e.map((x,H)=>React__default.createElement(xt,{ref:d.current[H],key:H,maxChildWidth:n},x)))},xt=React__default.forwardRef(function({maxChildWidth:t,children:r},n){let o=bt(r.props,t)?t:"fit-content";return React__default.createElement("div",{ref:n,style:{maxWidth:o,width:"100%",flexShrink:0,overflow:"hidden",userSelect:"none"}},r)});function bt(e,t){return !!e.templateItems.find(r=>{var s;let n=(s=r.width)!=null?s:F$1.view.size.width,o=n.type==="flex"&&n.value===ue$1.FillParent,a=n.type==="fixed"&&n.value>=t;return o||a})}var Ve=e=>{let{imageSize:t,canvasRef:r,canvasProps:n}=St(e);return React__default.createElement("canvas",E(u({},n),{ref:r,width:t==null?void 0:t.width,height:t==null?void 0:t.height,onError:e.onError}))},St=n=>{var o=n,{metaData:e,tintColor:t}=o,r=I(o,["metaData","tintColor"]);let a=useRef(null),[s,m]=useState(),l=useMemo(()=>e!=null&&e.pixelHeight&&(e!=null&&e.pixelWidth)?{width:e.pixelWidth,height:e.pixelHeight}:s,[s,e==null?void 0:e.pixelHeight,e==null?void 0:e.pixelWidth]);return useEffect(()=>{if(l==null&&a.current){a.current.style.width="100%",a.current.style.height="100%";let i=a.current.getBoundingClientRect();m(i);}},[l]),useEffect(()=>{if(r.src){let i=new Image,p=()=>{if(a.current&&t&&l){let d=a.current.getContext("2d");if(d){let{width:g,height:f}=l;d.clearRect(0,0,g,f),d.beginPath(),d.globalCompositeOperation="source-over",d.fillStyle="#000",d.drawImage(i,0,0,g,f),d.globalCompositeOperation="source-atop",d.fillStyle=t,d.fillRect(0,0,g,f);}}},b=d=>{var g;(g=r.onError)==null||g.call(r,d);};return i.addEventListener("load",p),i.addEventListener("error",b),i.src=r.src,()=>{i.removeEventListener("load",p),i.removeEventListener("error",b);}}},[r.src,l,t]),{canvasRef:a,canvasProps:r,imageSize:l}};var Oe=e=>React__default.createElement("img",E(u({},e),{onError:e.onError,draggable:false,referrerPolicy:"no-referrer"}));var De=e=>React__default.createElement("div",{style:E(u({},e.style),{backgroundColor:"transparent"})});var Pe=n=>{var o=n,{tintColor:e,metaData:t}=o,r=I(o,["tintColor","metaData"]);let{hasError:a,onError:s}=wt(r.src);return r.onError&&console.warn("`onError` is intercepted and not executed in the ReactMessageTemplateImage."),a?React__default.createElement(De,u({},r)):e&&!He(r.src)?React__default.createElement(Ve,E(u({},r),{onError:s,tintColor:e,metaData:t})):React__default.createElement(Oe,E(u({},r),{onError:s}))},wt=e=>{let[t,r]=useState(false);return useEffect(()=>r(false),[e]),{hasError:t,onError:useCallback(()=>r(true),[])}};var Ue=React__default.createContext(null),Or=({handleWebAction:e,handleCustomAction:t,handleUIKitAction:r,handleInternalAction:n,highlight:o,children:a})=>React__default.createElement(Ue.Provider,{value:{handleWebAction:e,handleCustomAction:t,handleUIKitAction:r,handleInternalAction:n,highlight:o}},a),Q=()=>{let e=React__default.useContext(Ue);if(!e)throw new Error("useMessageContext must be used within a MessageProvider");return e};function N(e){let{highlight:t}=Q();return {className:t!=null&&t.getContainerClassName?t.getContainerClassName(e):void 0,style:t!=null&&t.getContainerInlineStyle?t.getContainerInlineStyle(e):void 0,renderText:t!=null&&t.renderText?t.renderText:r=>r}}function Z(e){let t=useRef(e);return useEffect(()=>{t.current=e;},[e]),useCallback((...r)=>t.current(...r),[t])}function je(e,t){let r=Z(e),n=useRef($e);return useCallback(a=>{if(n.current(),n.current=$e,a!=null){let s=e(a);typeof s=="function"&&(n.current=s);}},[r,...t])}function $e(){}function Xe(e){let t=Z(e);return je(n=>{let o=new ResizeObserver(a=>{a[0]!=null&&t(a[0]);});return o.observe(n),()=>{o.unobserve(n);}},[t])}function qe(){let[e,t]=useState(-1),[r,n]=useState(-1),[o,a]=useState(-1),[s,m]=useState(-1),[l,i]=useState(-1),[p,b]=useState(-1);return {ref:Xe(g=>{let{width:f,height:x}=g.contentRect,H=g.target,{width:v,height:S}=H.getBoundingClientRect();t(v),n(S),a(f),m(x),i(v-f),b(S-x);}),width:e,height:r,contentWidth:o,contentHeight:s,paddingWidth:l,paddingHeight:p}}function ee({width:e=F$1.view.size.width,height:t=F$1.view.size.height,parentLayout:r=F$1.box.layout,option:n}){return r===ge$1.Row?ce({size:e,option:n}):ce({size:t,option:n})}function Ye(e){let{style:t,props:r}=e,v=qe(),{ref:n}=v,o=I(v,["ref"]),{updateSize:a,sizes:s}=xt$1(),{id:m,siblings:l,parentLayout:i}=r,{width:p,height:b,paddingWidth:d,paddingHeight:g,contentWidth:f,contentHeight:x}=o;return useEffect(()=>{a({id:r.id,width:p,height:b,paddingWidth:d,paddingHeight:g,contentWidth:f,contentHeight:x});},[r.id,p,b,d,g,f,x,a]),{recalculatedStyle:useMemo(()=>{let S=(w=0,C)=>{var P,M,W,V;return i===ge$1.Row?w+((M=(P=s[C.id])==null?void 0:P.contentWidth)!=null?M:0):w+((V=(W=s[C.id])==null?void 0:W.contentHeight)!=null?V:0)};if(ee({width:r.width,height:r.height,parentLayout:i,option:"fill"})){let w=l.filter(({width:M,height:W})=>!ee({width:M,height:W,parentLayout:i,option:"fill"})).reduce(S,0),C=l.filter(({width:M,height:W})=>ee({width:M,height:W,parentLayout:i,option:"fill"})).length,P=i===ge$1.Row?{maxWidth:`calc((100% - ${w}px) / ${C})`}:{maxHeight:`calc((100% - ${w}px) / ${C})`};return u(u(u({},t),P),p==0&&{height:0})}else {let w=l.findIndex(P=>P.id===m),C=l.slice(0,w).filter(({width:P,height:M})=>ee({width:P,height:M,parentLayout:i,option:"wrap"})).reduce(S,0);return u(u(u({},t),p===0&&{height:0}),i===ge$1.Row?{maxWidth:`calc(100% - ${C}px)`}:{maxHeight:`calc(100% - ${C}px)`})}},[r.width,r.height,i,s,l,t,p,m]),elemRef:n}}var F=({children:e,props:t,className:r,style:n,inlineStyle:o})=>{var re;let V=n!=null?n:{},{paddingBlockStart:a,paddingBlockEnd:s,paddingInlineStart:m,paddingInlineEnd:l}=V,i=I(V,["paddingBlockStart","paddingBlockEnd","paddingInlineStart","paddingInlineEnd"]),{recalculatedStyle:p,elemRef:b}=Ye({style:i,props:t}),{handleWebAction:d,handleCustomAction:g,handleUIKitAction:f,handleInternalAction:x}=Q(),H=(re=t.viewStyle)!=null&&re.borderWidth?"sb-message-template__border":"",v=t.action?"sb-message-template__action":"",S=$=>{var oe,ie,ae,se,c,h,R,T;((oe=t.action)==null?void 0:oe.type)==="web"?d?d($,t.action):(ae=window==null?void 0:window.open(ue((ie=t==null?void 0:t.action)==null?void 0:ie.data),"_blank","noopener noreferrer"))==null||ae.focus():((se=t.action)==null?void 0:se.type)==="custom"?g?g($,t.action):(h=window==null?void 0:window.open(ue((c=t==null?void 0:t.action)==null?void 0:c.data),"_blank","noopener noreferrer"))==null||h.focus():((R=t.action)==null?void 0:R.type)==="uikit"?f==null||f($,t.action):((T=t.action)==null?void 0:T.type)==="internal"&&(x==null||x($,t.action));};if(t.type===G.TextButton)return React__default.createElement("button",{className:k(r,H,v),"data-sb-template-id":t.elementId,style:u(u({},n),o),onClick:S},e);let ne=p,{display:B,flexDirection:w,justifyContent:C,alignItems:P,objectFit:M}=ne,W=I(ne,["display","flexDirection","justifyContent","alignItems","objectFit"]);return React__default.createElement("div",{ref:b,className:k(r,H,v),"data-sb-template-id":t.elementId,style:u(u({},W),o),onClick:S},React__default.createElement("div",{style:{display:B,flexDirection:w,justifyContent:C,alignItems:P,objectFit:M,width:"100%",height:"100%",paddingBlockStart:a,paddingBlockEnd:s,paddingInlineStart:m,paddingInlineEnd:l,gap:n==null?void 0:n.gap}},e))};var Me=A$1({views:{box(e){let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__box",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},e.children)},text(e){let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__text",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},Je(e,t.renderText))},image(e){var r;let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__image-container",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},React__default.createElement(Pe,{className:"sb-message-template__image",alt:"image",src:e.imageUrl,style:{width:"100%",height:"100%",aspectRatio:"inherit",objectFit:"inherit"},tintColor:(r=e.imageStyle)==null?void 0:r.tintColor,metaData:e.metaData}))},textButton(e){let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__text-button",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},Je(u({maxTextLines:F$1.textButton.maxTextLines},e),t.renderText))},imageButton(e){var r;let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__image-container","sb-message-template__image-button",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},React__default.createElement(Pe,{className:"sb-message-template__image",alt:"image-button",src:e.imageUrl,style:{width:"100%",height:"100%",aspectRatio:"inherit",objectFit:"inherit"},tintColor:(r=e.imageStyle)==null?void 0:r.tintColor,metaData:e.metaData}))},carouselView(e){var r,n;let t=N(e.rawProperties);return React__default.createElement(Fe,{className:k("sb-message-template__carousel",t.className),inlineStyle:t.style,maxChildWidth:(r=e.carouselStyle)==null?void 0:r.maxChildWidth,spacing:(n=e.carouselStyle)==null?void 0:n.spacing,style:e.parsedProperties},e.children)},cascadeView(e){let t=N(e.rawProperties);return React__default.createElement(F,{className:k("sb-message-template__cascade",t.className),inlineStyle:t.style,elementId:e.elementId,style:e.parsedProperties,props:e},e.children)}}});function Ot(e,t){return e.split(`
`).map((r,n)=>React__default.createElement(React__default.Fragment,{key:n},t(r),React__default.createElement("br",null)))}function Je(e,t){let{text:r,maxTextLines:n}=e,o=Dt(e),a=typeof n=="number"&&n>0,s=Ot(r,t);if(a||o){let m=u(u({},(a||o)&&{maxWidth:"100%"}),o&&{maxHeight:"100%",overflow:"hidden"});return React__default.createElement("div",{style:m},a?React__default.createElement("div",{style:pe(n)},s):s)}return a?React__default.createElement("div",{style:pe(n)},s):s}function Dt(e){var a,s,m,l;let t=(a=e==null?void 0:e.height)==null?void 0:a.type,r=(s=e==null?void 0:e.width)==null?void 0:s.type,n=t==="fixed"||r==="fixed",o=t==="flex"&&((m=e==null?void 0:e.height)==null?void 0:m.value)===ue$1.FillParent||r==="flex"&&((l=e==null?void 0:e.width)==null?void 0:l.value)===ue$1.FillParent;return n||o}Tt({renderer:Me,parser:he,Container:({children:e,className:t})=>React__default.createElement("div",{className:`sb-message-template__parent ${t}`,style:{display:"flex",flexDirection:"column",maxWidth:400,marginBlockEnd:24}},e)});

var CustomTemplate = Tt({
    parser: he,
    renderer: Me,
    Container: function (_a) {
        var children = _a.children, className = _a.className;
        return (React__default.createElement("div", { className: [
                "sb-message-template__parent ".concat(className),
                'sendbird-message-template__root',
            ].join(' ') }, children));
    },
}).MessageTemplate;
function MessageTemplate(_a) {
    var templateItems = _a.templateItems, templateVersion = _a.templateVersion;
    return React__default.createElement(CustomTemplate, { templateItems: templateItems, templateVersion: templateVersion });
}

export { MessageTemplate as M, Or as O };
//# sourceMappingURL=bundle-ChE9cvzN.js.map