tybotflow-widget 0.0.9 → 0.1.0

package/dist/index.es.js

@@ -48172,7 +48172,7 @@ const P0 = "https://api.tybotflow.com/api/v1", dW = "https://api.tybotflow.com/a
                 scrollbarColor: `${h} transparent`
               },
               children: [
-                ut.map((M) => /* @__PURE__ */ F.jsxs("div", { className: `flex flex-col sm:flex-row items-start gap-3 ${M.sender === "user" ? "flex-row-reverse" : ""}`, children: [
+                ut.map((M) => /* @__PURE__ */ F.jsxs("div", { className: `flex ${M.sender === "agent" ? "flex-col sm:flex-row" : ""} items-start gap-3 ${M.sender === "user" ? "flex-row-reverse" : ""}`, children: [
                   /* @__PURE__ */ F.jsx(
                     "div",
                     {

package/dist/index.umd.js

@@ -325,6 +325,6 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
 	***************************************************************************** */function a0(e,t){const[n,a]=ye.useState(null),o=ye.useMemo(()=>Object.entries(t).flat(),[t]);return ye.useEffect(()=>{if(!e?.current)return;const l=wb.create(Object.assign(Object.assign({},t),{container:e.current}));return a(l),()=>{l.destroy()}},[e,...o]),n}const i0=/^on([A-Z])/,h5=e=>i0.test(e);function m5(e,t){const n=ye.useMemo(()=>Object.entries(t).flat(),[t]);ye.useEffect(()=>{if(!e)return;const a=Object.entries(t);if(!a.length)return;const o=a.map(([l,u])=>{const d=l.replace(i0,(p,f)=>f.toLowerCase());return e.on(d,(...p)=>u(e,...p))});return()=>{o.forEach(l=>l())}},[e,...n])}ye.memo(e=>{const t=ye.useRef(null),[n,a]=function(o){return ye.useMemo(()=>{const l=Object.assign({},o),u=Object.assign({},o);for(const d in l)h5(d)?delete l[d]:delete u[d];return[l,u]},[o])}(e);return m5(a0(t,n),a),B.jsx("div",{ref:t})});function b5(e){var{container:t}=e;const n=a0(t,function(o,l){var u={};for(var d in o)Object.prototype.hasOwnProperty.call(o,d)&&l.indexOf(d)<0&&(u[d]=o[d]);if(o!=null&&typeof Object.getOwnPropertySymbols=="function"){var p=0;for(d=Object.getOwnPropertySymbols(o);p<d.length;p++)l.indexOf(d[p])<0&&Object.prototype.propertyIsEnumerable.call(o,d[p])&&(u[d[p]]=o[d[p]])}return u}(e,["container"])),a=function(o){const[l,u]=ye.useState(!1),[d,p]=ye.useState(!1),[f,h]=ye.useState(!1),[m,y]=ye.useState(0);return ye.useEffect(()=>{if(!o)return;const E=[o.on("load",()=>{u(!1),p(!1),y(0)}),o.on("ready",()=>{u(!0),p(!1),h(!1),y(0)}),o.on("finish",()=>{h(!0)}),o.on("play",()=>{p(!0)}),o.on("pause",()=>{p(!1)}),o.on("timeupdate",()=>{y(o.getCurrentTime())}),o.on("destroy",()=>{u(!1),p(!1)})];return()=>{E.forEach(v=>v())}},[o]),ye.useMemo(()=>({isReady:l,isPlaying:d,hasFinished:f,currentTime:m}),[d,f,m,l])}(n);return ye.useMemo(()=>Object.assign(Object.assign({},a),{wavesurfer:n}),[a,n])}const o0="https://api.tybotflow.com/api/v1",y5="https://api.tybotflow.com/api/v1/web/send-message",E5="https://api.tybotflow.com/api/v1/chatbots-config",v5=({attachment:e,formatFileSize:t,mainColor:n,secondaryColor:a,controlsColor:o})=>{const{type:l,url:u,name:d,size:p}=e;switch(l){case"image":return B.jsxs("div",{className:"relative group",children:[B.jsx("img",{src:u,alt:d,className:"max-w-xs max-h-48 rounded-lg object-cover cursor-pointer hover:opacity-90 transition-opacity",onClick:()=>window.open(u,"_blank")}),B.jsx("div",{className:"absolute bottom-2 left-2 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded",children:t(p)})]});case"video":return B.jsxs("div",{className:"max-w-xs",children:[B.jsx("video",{src:u,controls:!0,className:"w-full max-h-48 rounded-lg",preload:"metadata",onError:()=>{console.error("Video failed to load:",u)},children:"Your browser does not support the video tag."}),B.jsxs("div",{className:"flex text-xs text-white mt-1 w-full overflow-hidden whitespace-nowrap text-ellipsis",children:[B.jsx("span",{className:"block w-full overflow-hidden whitespace-nowrap text-ellipsis",title:d,children:d}),B.jsxs("span",{className:"ml-2",children:["• ",t(p)]})]})]});case"audio":return B.jsxs("div",{className:"bg-gray-800 bg-opacity-70 p-3 rounded-lg flex-1 w-full",children:[B.jsxs("div",{className:"flex items-center gap-2 mb-2",children:[B.jsx(Wc,{className:"w-4 h-4",style:{color:n}}),B.jsx("span",{className:"text-sm font-medium truncate text-white",title:d,children:d})]}),B.jsx(S5,{src:u,mainColor:n,secondaryColor:a,controlsColor:o}),B.jsx("p",{className:"text-xs text-gray-400 mt-1",children:t(p)})]});case"document":return B.jsx("div",{className:"bg-gray-800 bg-opacity-50 p-3 rounded-lg max-w-xs cursor-pointer hover:bg-opacity-70 transition-colors",onClick:()=>window.open(u,"_blank"),children:B.jsxs("div",{className:"flex items-center gap-3",children:[B.jsx("div",{className:"w-10 h-10 bg-purple-600 rounded-lg flex items-center justify-center",children:B.jsx(EA,{className:"w-5 h-5 text-white"})}),B.jsxs("div",{className:"flex-1 min-w-0",children:[B.jsx("p",{className:"text-sm font-medium truncate text-white",children:d}),B.jsx("p",{className:"text-xs text-gray-400",children:t(p)})]})]})});default:return null}},S5=({src:e,mainColor:t,secondaryColor:n,controlsColor:a})=>{const o=ye.useRef(null),[l,u]=ye.useState(1),{wavesurfer:d,isPlaying:p}=b5({container:o,waveColor:t,progressColor:n,barWidth:2,height:50,url:e}),f=()=>{d&&d.playPause()},h=()=>{const E=l===0?1:0;u(E),d?.setVolume(E)},m=()=>{d?.skip(-.096)},y=()=>{d?.skip(.096)};return B.jsxs("div",{className:"flex w-full flex-col items-center rounded-xl pt-1",children:[B.jsx("div",{ref:o,className:"w-full px-2"}),B.jsxs("div",{className:"flex w-full items-center justify-between",children:[B.jsx("div",{className:"relative flex items-center",children:B.jsx("button",{className:"transition-colors",style:{color:a},onClick:h,"aria-label":"Toggle volume",children:l===0?B.jsx(tz,{size:20}):B.jsx(ez,{size:20})})}),B.jsxs("div",{className:"-ml-9 flex flex-1 cursor-auto justify-center gap-2 rounded-full py-2 text-white",children:[B.jsx("button",{onClick:m,className:"cursor-pointer hover:scale-110 transition-colors",style:{color:a},"aria-label":"Step back",children:B.jsx(KP,{})}),B.jsx("button",{onClick:f,className:"cursor-pointer hover:scale-110 transition-colors",style:{color:a},"aria-label":p?"Pause":"Play",children:p?B.jsx(VP,{}):B.jsx(YP,{})}),B.jsx("button",{onClick:y,className:"cursor-pointer hover:scale-110 transition-colors",style:{color:a},"aria-label":"Step forward",children:B.jsx(QP,{})})]})]})]})},A5=({config:e})=>{const t=ye.useRef(null),n=ye.useRef(null),a=ye.useRef(null),o=ye.useRef(null),l=ye.useRef(null),[u,d]=ye.useState(null),[p,f]=ye.useState(!0);ye.useEffect(()=>{(async()=>{f(!0),await Et.get(`${E5}/bot/${e.bot?.botId}`,{}).then(he=>{d(he.data)}).catch(he=>{console.error("Error fetching bot config:",he)}).finally(()=>{f(!1)})})()},[e.bot?.botId,e?.token]);const h=u?.mainColor||"#59168b",m=u?.secondaryColor||"#6366f1",y=u?.thirdColor||"#0f172b",E=u?.headerFirstColor||"#6e11b0",v=u?.headerSecondColor||"#372aac",A=u?.inputBackgroundColor||"#1f2937",w=u?.inputTextColor||"#fff",R=u?.roundness||24,N=u?.chatRoundness||16,C=(u?.minPanelWidth||434)>window.innerWidth?window.innerWidth:u?.minPanelWidth||434,D=(u?.maxPanelWidth||window.innerWidth)>window.innerWidth?window.innerWidth:u?.maxPanelWidth||window.innerWidth,O=u?.chatMaxWidth||88,x=u?.toggleBtnBorderTopLeftRadius||12,L=u?.toggleBtnBorderTopRightRadius||0,P=u?.toggleBtnBorderBottomLeftRadius||12,z=u?.toggleBtnBorderBottomRightRadius||0,F=u?.menuBackgroundColor||"#1f2937",H=u?.menuTextColor||"#e5e7eb",X=u?.menuHoverBackgroundColor||"#374151",$=u?.agentChatResponseColor||"#e5e7eb",ne=u?.agentChatResponseBgColor||"#1f2937",re=u?.agentIconBgColor||"#59168b",q=u?.agentIconColor||"#fff",K=u?.userChatMessagesColor||"#fff",Y=u?.userChatMessagesBgColor||"#7a1ebe",oe=u?.userIconBgColor||"#7a1ebe",S=u?.userIconColor||"#fff",G=u?.ButtonColor||"#fff",te=u?.ButtonsBgColor||"#59168b",[I,ce]=ye.useState(C),me=ye.useRef(!1),ue=ye.useRef(0),Ae=ye.useRef(C),Te=M=>{me.current=!0,ue.current=M.clientX,Ae.current=I,document.body.style.cursor="ew-resize"};ye.useEffect(()=>{const M=ge=>{if(!me.current)return;const xe=ue.current-ge.clientX;let ht=Ae.current+xe;ht=Math.max(C,Math.min(D,ht)),ce(ht)},he=()=>{me.current&&(me.current=!1,document.body.style.cursor="")};return window.addEventListener("mousemove",M),window.addEventListener("mouseup",he),()=>{window.removeEventListener("mousemove",M),window.removeEventListener("mouseup",he)}},[I,C,D]);const[Ge,Je]=ye.useState(!1),[ft,It]=ye.useState(!1),[vt,Ht]=ye.useState(""),[fe,Ee]=ye.useState(!1),[Oe,Le]=ye.useState([]),[ke,Me]=ye.useState(!1),Ze=ye.useRef(0),[it,qe]=ye.useState(!1),[Ie,Pe]=ye.useState(!1),J=ye.useRef(!1),[ie,pe]=ye.useState("00:00"),be=ye.useRef(null),Fe=ye.useRef(0),[Mt,Ft]=ye.useState([]),[ut,ct]=ye.useState([]),{startRecording:dt,stopRecording:gt,pauseRecording:Nt,resumeRecording:Bt,status:Xe,error:pt}=wH.useReactMediaRecorder({video:!1,onStop(M,he){if(J.current){J.current=!1,pe("00:00"),Fe.current=0;return}Le(ge=>[...ge,{id:Date.now().toString()+Math.random().toString(36).substring(2,9),file:he,type:"audio",url:M,name:`recording-${new Date().toISOString()}.webm`,size:he.size}]),pe("00:00"),Fe.current=0}}),bn=u?.icon||e?.bot.avatar_url||u5,yn=u?.title||e?.bot.name||"Tybot webchat",[Fr,wa]=ye.useState(()=>{if(!u?.botNeedsAuth){let M=localStorage.getItem("conversationId");if(!M){const he=new Uint8Array(16);window.crypto.getRandomValues(he),M=Array.from(he).map(ge=>ge.toString(16).padStart(2,"0")).join("")}return localStorage.setItem("conversationId",M),M}}),[cn,lr]=ye.useState(()=>u?.botNeedsAuth?!!localStorage.getItem("conversationId"):!0),[Qn,Rl]=ye.useState(""),[oi,Zn]=ye.useState(""),[wt,Qt]=ye.useState(""),tn=ye.useRef(!1),Ta=ut.reduce((M,he)=>he.seen?M:M+(he.sender==="agent"?he.nMessage||1:0),0),xl=()=>{ct(M=>M.map(he=>({...he,seen:!0})))};ye.useEffect(()=>{const M=setTimeout(()=>{Je(!0),tn.current=!0,xl()},3200);return()=>clearTimeout(M)},[]),ye.useEffect(()=>{const M=async()=>{if(e?.bot){Ee(!0);try{const he=await Jn("hi",e?.bot.botId);ct(ge=>[...ge,{id:Date.now().toString()+Math.random().toString(36).substring(2,9),sender:"agent",content:he,timestamp:new Date,seen:tn.current,nMessage:typeof he=="string"?1:he.length}])}catch(he){console.error("Error sending message:",he)}finally{Ee(!1)}}};cn&&e?.bot&&ut.length===0&&(M(),localStorage.getItem("webChatAuth")&&JSON.parse(localStorage.getItem("webChatAuth"))&&u?.botNeedsAuth&&Fr&&(Qn||wt||oi)&&(setTimeout(()=>{xo(Fr)},2e3),localStorage.setItem("webChatAuth","true")))},[cn,e?.bot]),ye.useEffect(()=>(Xe==="recording"?be.current||(be.current=setInterval(()=>{Fe.current+=1;const M=Math.floor(Fe.current/60).toString().padStart(2,"0"),he=(Fe.current%60).toString().padStart(2,"0");pe(`${M}:${he}`)},1e3)):be.current&&(clearInterval(be.current),be.current=null),()=>{be.current&&(clearInterval(be.current),be.current=null)}),[Xe]),ye.useEffect(()=>{pt&&pt.toLowerCase().includes("permission_denied")&&(Pe(!1),pe("00:00"),Fe.current=0,be.current&&(clearInterval(be.current),be.current=null),alert("Microphone permission denied. Please allow access to record audio."))},[pt]),ye.useEffect(()=>{Xe!=="recording"&&Xe!=="paused"&&(pe("00:00"),Fe.current=0)},[Xe]);const si=ye.useRef(null);ye.useEffect(()=>{if(si&&si.current){const M=si.current;M.style.height="auto";const he=120;M.scrollHeight>he?(M.style.height=he+"px",M.style.overflowY="auto"):(M.style.height=M.scrollHeight+"px",M.style.overflowY="hidden")}},[vt]),ye.useEffect(()=>{(Ge||fe)&&t.current&&(t.current.scrollTop=t.current.scrollHeight)},[ut,fe,Ge]);const Nl=M=>{const he=M.type.toLowerCase();return he.startsWith("image/")?"image":he.startsWith("video/")?"video":he.startsWith("audio/")?"audio":"document"},Cn=ye.useCallback((M,he)=>{const ge=[];Array.from(M).forEach(xe=>{if(xe.size>10*1024*1024){alert(`File ${xe.name} is too large. Maximum size is 10MB.`);return}const ht={id:Date.now().toString()+Math.random().toString(36).substring(2,9),file:xe,type:Nl(xe),url:URL.createObjectURL(xe),name:xe.name,size:xe.size};ge.push(ht)}),Le(xe=>[...xe,...ge]),he&&he.current&&(he.current.value="")},[]),Ro=ye.useCallback(M=>{M.preventDefault(),Ze.current=0,Me(!1);const he=M.dataTransfer.files;he.length>0&&Cn(he)},[Cn]),Br=ye.useCallback(M=>{M.preventDefault(),Ze.current+=1,Me(!0)},[]),Ur=ye.useCallback(M=>{M.preventDefault()},[]),Ra=ye.useCallback(M=>{M.preventDefault(),Ze.current-=1,Ze.current<=0&&Me(!1)},[]),Pr=M=>{Le(he=>{const ge=he.find(xe=>xe.id===M);return ge&&URL.revokeObjectURL(ge.url),he.filter(xe=>xe.id!==M)})},Ct=M=>{if(M===0)return"0 Bytes";const he=1024,ge=["Bytes","KB","MB","GB"],xe=Math.floor(Math.log(M)/Math.log(he));return Number.parseFloat((M/Math.pow(he,xe)).toFixed(2))+" "+ge[xe]},ur=async(M=vt)=>{if(M.trim()||Oe.length!==0){const ge={id:Date.now().toString()+Math.random().toString(36).substring(2,9),sender:"user",content:M,attachments:[...Oe],timestamp:new Date};if(ct(xe=>[...xe,ge]),Ht(""),Le([]),Ee(!0),e?.bot)try{try{const xe=await Jn(M,e?.bot.botId);ct(ht=>[...ht,{id:Date.now().toString()+Math.random().toString(36).substring(2,9),sender:"agent",content:xe,timestamp:new Date,seen:tn.current,nMessage:typeof xe=="string"?1:xe.length}])}catch{ct(xe=>[...xe,{id:Date.now().toString()+Math.random().toString(36).substring(2,9),sender:"agent",content:"Erreur du serveur",timestamp:new Date,seen:tn.current,nMessage:1}])}}catch(xe){console.error("Error parsing selectedBotInfo:",xe)}else ct(xe=>[...xe,{id:Date.now().toString()+Math.random().toString(36).substring(2,9),sender:"agent",content:"Aucun bot sélectionné",timestamp:new Date,seen:tn.current,nMessage:1}]);Ee(!1)}else return},xa=M=>{switch(qe(!1),M){case"image":n.current?.click();break;case"video":a.current?.click();break;case"audio":o.current?.click();break;case"document":l.current?.click();break}},Jn=async(M,he)=>{const{data:ge}=await Et.post(e?.API_URL||y5,{messageText:M,botId:he,conversation_id:Fr,isintern:!!e?.token,host:window.location.origin});return ge},zr=({attachment:M,onRemove:he})=>B.jsxs("div",{className:"relative group w-24 h-24 rounded-xl overflow-hidden bg-gray-900 shadow-md border border-gray-700",children:[M.type==="image"&&M.url?B.jsx("img",{src:M.url,alt:M.name,className:"w-full h-full object-cover"}):B.jsxs("div",{className:"w-full h-full flex flex-col items-center justify-center text-gray-300 px-1 text-center text-xs",children:[M.type==="video"&&B.jsx(vA,{className:"w-5 h-5 mb-1 text-red-400"}),M.type==="audio"&&B.jsx(Wc,{className:"w-5 h-5 mb-1 text-green-400"}),M.type==="document"&&B.jsx(jP,{className:"w-5 h-5 mb-1 text-yellow-400"}),B.jsx("span",{className:"w-full truncate",title:M.name,children:M.name})]}),B.jsx("button",{onClick:he,className:"absolute top-1 right-1 w-5 h-5 bg-black bg-opacity-50 rounded-full text-white flex items-center justify-center hover:bg-opacity-80",title:"Remove",children:B.jsx(Ws,{className:"w-3 h-3"})})]}),Tb=/^[\u0600-\u06FF\u0750-\u077F\s\d\p{P}]+$/u,Cl=/[\u0600-\u06FF\u0750-\u077F]/,Zt=M=>Tb.test(M),Rb=M=>Cl.test(M),$n={h1:({children:M})=>B.jsx("h1",{className:"sm:text-2xl text-xl font-bold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),h2:({children:M})=>B.jsx("h2",{className:"sm:text-xl text-lg font-semibold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),h3:({children:M})=>B.jsx("h3",{className:"sm:text-lg text-base font-semibold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),h4:({children:M})=>B.jsx("h4",{className:"sm:text-base text-sm font-semibold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),h5:({children:M})=>B.jsx("h5",{className:"sm:text-base text-sm font-semibold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),h6:({children:M})=>B.jsx("h6",{className:"sm:text-base text-sm font-semibold my-2",dir:Zt(M)?"rtl":"ltr",children:M}),p:({children:M})=>B.jsx("p",{className:"leading-relaxed text-xs sm:text-sm",dir:Zt(M)?"rtl":"ltr",children:M}),ul:({children:M})=>B.jsx("ul",{className:"list-disc list-inside ml-4 my-2 text-gray-200",dir:Rb(M)?"rtl":"ltr",children:M}),ol:({children:M})=>{let he=!1;return M.every(ge=>ge?.props?.node?.children[0].type==="text"&&Zt(ge?.props?.node?.children[0].value))?he=!0:he=!1,B.jsx("ol",{className:"list-decimal list-inside text-xs sm:text-sm ml-4 my-2 text-gray-200",dir:he?"rtl":"ltr",children:M})},li:({children:M})=>B.jsx("li",{className:"my-1",dir:Zt(M)?"rtl":"ltr",children:M}),a:({href:M,children:he})=>B.jsx("a",{href:M,className:"text-blue-400 underline hover:text-blue-300",target:"_blank",rel:"noopener noreferrer",children:he}),blockquote:({children:M})=>B.jsx("blockquote",{className:"border-l-4 border-purple-500 pl-4 italic my-2",children:M}),code({node:M,className:he,children:ge,...xe}){const ht=/language-(\w+)/.exec(he||"");return ht?B.jsx(t0,{...xe,PreTag:"div",children:String(ge).replace(/\n$/,""),language:ht[1],style:l5}):B.jsx("code",{className:"bg-gray-800 px-1 rounded font-mono inline",...xe,children:ge})},table:({children:M})=>B.jsx("table",{className:"min-w-full my-2 border border-gray-700",children:M}),thead:({children:M})=>B.jsx("thead",{className:"bg-gray-800",children:M}),tbody:({children:M})=>B.jsx("tbody",{children:M}),tr:({children:M})=>B.jsx("tr",{className:"border-b border-gray-700",children:M}),th:({children:M})=>B.jsx("th",{className:"px-3 py-2 font-semibold text-left bg-gray-800",children:M}),td:({children:M})=>B.jsx("td",{className:"px-3 py-2",children:M}),strong:({children:M})=>B.jsx("strong",{className:"font-bold",children:M}),em:({children:M})=>B.jsx("em",{className:"italic ",children:M}),hr:()=>B.jsx("hr",{className:"my-4 border-purple-700"})};ye.useEffect(()=>{const M=he=>{it&&he.target instanceof Element&&!he.composedPath().some(ge=>ge?.id==="upload-button-toggle"||ge?.id==="document-button"||ge?.id==="image-button"||ge?.id==="video-button"||ge?.id==="audio-button")&&qe(!1)};return document.addEventListener("mousedown",M),()=>{document.removeEventListener("mousedown",M)}},[it]);const li=M=>{switch(M.type){case"text":return B.jsx(so,{remarkPlugins:[uo],components:$n,children:M.text?.replace(/\n/g,`  
 `)});case"single-choice":return B.jsxs(B.Fragment,{children:[B.jsx(so,{remarkPlugins:[uo],components:$n,children:M.text?.replace(/\n/g,`  
 `)||""}),B.jsx("div",{className:"flex flex-wrap",dir:Zt(M.text||"")?"rtl":"ltr",children:M.choices?.map((ge,xe)=>B.jsx("button",{className:"mb-1 mr-1 text-xs px-4 py-1 hover:scale-105 transition-all duration-100",onClick:()=>{ur(ge.title)},style:{background:te,borderRadius:`${N}px`,color:G},dir:Zt(ge.title)?"rtl":"ltr",children:ge.title},xe))})]});case"image":return B.jsx(B.Fragment,{children:B.jsx("div",{className:"relative group",children:B.jsx("img",{src:M.image,className:"max-w-xs max-h-48 rounded-lg object-cover cursor-pointer hover:opacity-90 transition-opacity",onClick:()=>window.open(M.image,"_blank")})})});case"dropdown":return B.jsxs(B.Fragment,{children:[B.jsx(so,{remarkPlugins:[uo],components:$n,children:M.message?.replace(/\n/g,`  
-`)||""}),B.jsxs("div",{className:"flex flex-wrap",dir:Zt(M.message||"")?"rtl":"ltr",children:[B.jsx("p",{className:"mr-2",children:"ou"}),M.options?.map((ge,xe)=>B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 text-xs hover:scale-105 transition-all duration-100",onClick:()=>{ur(ge.value)},style:{background:te,borderRadius:`${N}px`,color:G},dir:Zt(M.message||"")?"rtl":"ltr",children:ge.label},xe))]})]});case"carousel":const he=(M.items?.length||0)<2?1:2;return B.jsx("div",{className:"mt-2 w-full",children:B.jsx("div",{className:`grid grid-cols-1 sm:grid-cols-${he} gap-3`,children:M.items?.map((ge,xe)=>B.jsxs("div",{className:"flex-shrink-0 border p-3 shadow-md",style:{background:ne,borderRadius:`${N}px`},children:[ge.image&&B.jsx("img",{src:ge.image,alt:ge.title,className:"h-32 w-full object-cover rounded-md mb-2"}),B.jsx("h3",{className:"text-sm font-bold",title:ge.title,children:ge.title}),B.jsx("p",{className:"text-xs text-gray-300 mb-2 line-clamp-2",title:ge.subtitle,children:ge.subtitle}),ge.actions?.map((ht,jn)=>{let cr;try{cr=typeof ht.payload=="string"?JSON.parse(ht.payload):ht.payload}catch{cr={productName:ge.title}}return B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 hover:scale-105 transition-all duration-100",onClick:()=>{ht.action==="Open URL"?window.open(ht.url,"_blank"):ht.title==="scan"?fetch(ge.image).then(nn=>nn.blob()).then(nn=>{const Ol=URL.createObjectURL(nn),Ut=document.createElement("a");Ut.href=Ol,Ut.download="qrcode.png",document.body.appendChild(Ut),Ut.click(),document.body.removeChild(Ut),URL.revokeObjectURL(Ol)}).catch(()=>{alert("Failed to download image.")}):ur(cr.productName||M.title)},style:{background:te,borderRadius:`${N}px`,color:G},children:ht.title},jn)})]},xe))})});case"card":return B.jsx("div",{className:"mt-2 w-full",children:B.jsx("div",{className:"grid grid-cols-1 gap-3",children:B.jsxs("div",{className:"flex-shrink-0 border rounded-lg p-3 shadow-md",style:{background:ne},children:[M.image&&B.jsx("img",{src:M.image,alt:M.title,className:"h-32 w-full object-cover rounded-md mb-2"}),B.jsx("h3",{className:"text-sm font-bold",children:M.title}),M.actions?.map((ge,xe)=>{let ht;try{ht=typeof ge.payload=="string"?JSON.parse(ge.payload):ge.payload}catch{ht={productName:M.title}}return B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 hover:scale-105 transition-all duration-100",onClick:()=>{ge.action==="Open URL"?window.open(ge.url,"_blank"):ge.title==="scan"?M.image&&fetch(M.image).then(jn=>jn.blob()).then(jn=>{const cr=URL.createObjectURL(jn),nn=document.createElement("a");nn.href=cr,nn.download="qrcode.png",document.body.appendChild(nn),nn.click(),document.body.removeChild(nn),URL.revokeObjectURL(cr)}).catch(()=>{alert("Failed to download image.")}):ur(ht.productName||M.title)},style:{background:te,borderRadius:`${N}px`,color:G},children:ge.title},xe)})]})})})}},qn=async M=>{if(!cn)return;const he=await fetch(`${o0}/endusers/get-by-username`,{headers:{Authorization:`Bearer ${e?.token}`,"Content-Type":"application/json"},method:"POST",body:JSON.stringify({username:`web_user_${M}`})});if(!he.ok)throw new Error(`HTTP error! status: ${he.status}`);return(await he.json()).id},xo=async M=>{if(!cn)return;const he=await qn(M);let ge;Qn&&(ge={last_name:Qn.split(" ")[1]||Qn.split(" ")[0]||`web_user_${M}`,first_name:Qn.split(" ")[0]||`web_user_${M}`}),oi&&(ge={...ge,phone:oi}),wt&&(ge={...ge,email:wt});const xe=await fetch(`${o0}/endusers/${he}`,{headers:{Authorization:`Bearer ${e?.token}`,"Content-Type":"application/json"},method:"PUT",body:JSON.stringify(ge)});if(!xe.ok)throw new Error(`HTTP error! status: ${xe.status}`);return await xe.json()},kl=async M=>{M.preventDefault();const he=new Uint8Array(16);window.crypto.getRandomValues(he);const ge=Array.from(he).map(xe=>xe.toString(16).padStart(2,"0")).join("");wa(ge),localStorage.setItem("conversationId",ge),localStorage.setItem("webChatAuth","true"),lr(!0)},qr=`linear-gradient(to bottom right, ${y}, ${h}, ${y})`,No=`linear-gradient(to right, ${h}, ${m})`,Co=`linear-gradient(to right, ${E}, ${v})`;return p||!u?null:B.jsxs(B.Fragment,{children:[B.jsxs("div",{className:"fixed top-0 right-0 h-full shadow-2xl",style:{width:I+"px",transition:"transform 0.3s cubic-bezier(0.4,0,0.2,1)",transform:Ge?"translateX(0)":`translateX(${I}px)`,background:qr,zIndex:1e3},onDrop:Ro,onDragOver:Ur,onDragEnter:Br,onDragLeave:Ra,children:[B.jsx("div",{onMouseDown:Te,className:"absolute left-0 top-0 h-full w-2 cursor-ew-resize z-50 bg-transparent opacity-50 transition-colors",style:{userSelect:"none"},onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent"}),ke&&B.jsx("div",{className:"absolute inset-0 bg-opacity-20 border-2 border-dashed flex items-center justify-center z-15",style:{borderColor:h},children:B.jsxs("div",{className:"text-center ",style:{color:w},children:[B.jsx(JP,{className:"w-12 h-12 mx-auto mb-2"}),B.jsx("p",{className:"text-lg font-semibold",children:"Drop files here"})]})}),cn?B.jsxs("div",{className:"flex items-center justify-between px-4 py-1 sm:py-3 border-b",style:{background:Co,borderColor:v},children:[B.jsxs("div",{className:"flex items-center gap-3",children:[B.jsx("div",{className:"sm:size-10 size-8 flex items-center justify-center overflow-hidden rounded-full",children:B.jsx("img",{src:bn,alt:`${yn} Logo`,className:"w-full h-full"})}),B.jsx("h2",{className:"sm:text-lg text-md font-semibold",style:{color:w},children:yn})]}),B.jsxs("div",{className:"flex justify-between items-center gap-2 ml-2",children:[B.jsx("button",{onClick:()=>It(!0),className:"transition-colors p-1 rounded-full",style:{color:w},title:"Bot info","aria-label":"Bot info",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(GP,{className:"w-5 h-5"})}),B.jsx("button",{onClick:()=>{Je(!1),tn.current=!1},className:"transition-colors p-1 rounded-full",style:{color:w},title:"Close Chat","aria-label":"Close Chat",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(Ws,{className:"w-5 h-5"})})]})]}):B.jsx("div",{className:"flex items-center justify-end px-6 py-3",children:B.jsx("div",{className:"flex items-center",children:B.jsx("button",{onClick:()=>{Je(!1),tn.current=!1},className:"transition-colors p-1 rounded-full",style:{color:e?.inputTextColor||"#FFF"},title:"Close Chat","aria-label":"Close Chat",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(Ws,{className:"w-5 h-5"})})})}),cn&&B.jsxs("div",{ref:t,className:"flex-1 px-2 sm:px-4 py-4 overflow-y-auto space-y-4  scroll-smooth",style:{height:"calc(100% - 140px)",scrollbarWidth:"thin",scrollbarColor:`${h} transparent`},children:[ut.map(M=>B.jsxs("div",{className:`flex flex-col sm:flex-row items-start gap-3 ${M.sender==="user"?"flex-row-reverse":""}`,children:[B.jsx("div",{className:"sm:size-8 size-7 rounded-full flex items-center justify-center flex-shrink-0",style:{background:M.sender==="user"?oe:re},children:M.sender==="user"?B.jsx($P,{className:"sm:size-4 size-3",style:{color:S}}):B.jsx(yA,{className:"sm:size-4 size-3",style:{color:q}})}),B.jsxs("div",{className:`flex flex-col flex-1 ${M.sender==="user"?"items-end":"items-start"}`,children:[M.attachments&&M.attachments.length>0&&B.jsx("div",{className:"flex flex-col items-end w-[88%] mb-2 space-y-2",children:M.attachments.map(he=>B.jsx(v5,{attachment:he,formatFileSize:Ct,mainColor:h,secondaryColor:m,controlsColor:w},he.id))}),M.content&&M.sender==="user"?B.jsx("div",{className:"px-4 py-2 backdrop-blur-sm break-words w-fit",style:{wordBreak:"break-word",overflowWrap:"break-word",borderRadius:`${N}px`,maxWidth:O+"%",background:Y,color:K},children:B.jsx(so,{remarkPlugins:[uo],components:$n,children:typeof M.content=="string"?M.content.replace(/\n/g,`  
+`)||""}),B.jsxs("div",{className:"flex flex-wrap",dir:Zt(M.message||"")?"rtl":"ltr",children:[B.jsx("p",{className:"mr-2",children:"ou"}),M.options?.map((ge,xe)=>B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 text-xs hover:scale-105 transition-all duration-100",onClick:()=>{ur(ge.value)},style:{background:te,borderRadius:`${N}px`,color:G},dir:Zt(M.message||"")?"rtl":"ltr",children:ge.label},xe))]})]});case"carousel":const he=(M.items?.length||0)<2?1:2;return B.jsx("div",{className:"mt-2 w-full",children:B.jsx("div",{className:`grid grid-cols-1 sm:grid-cols-${he} gap-3`,children:M.items?.map((ge,xe)=>B.jsxs("div",{className:"flex-shrink-0 border p-3 shadow-md",style:{background:ne,borderRadius:`${N}px`},children:[ge.image&&B.jsx("img",{src:ge.image,alt:ge.title,className:"h-32 w-full object-cover rounded-md mb-2"}),B.jsx("h3",{className:"text-sm font-bold",title:ge.title,children:ge.title}),B.jsx("p",{className:"text-xs text-gray-300 mb-2 line-clamp-2",title:ge.subtitle,children:ge.subtitle}),ge.actions?.map((ht,jn)=>{let cr;try{cr=typeof ht.payload=="string"?JSON.parse(ht.payload):ht.payload}catch{cr={productName:ge.title}}return B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 hover:scale-105 transition-all duration-100",onClick:()=>{ht.action==="Open URL"?window.open(ht.url,"_blank"):ht.title==="scan"?fetch(ge.image).then(nn=>nn.blob()).then(nn=>{const Ol=URL.createObjectURL(nn),Ut=document.createElement("a");Ut.href=Ol,Ut.download="qrcode.png",document.body.appendChild(Ut),Ut.click(),document.body.removeChild(Ut),URL.revokeObjectURL(Ol)}).catch(()=>{alert("Failed to download image.")}):ur(cr.productName||M.title)},style:{background:te,borderRadius:`${N}px`,color:G},children:ht.title},jn)})]},xe))})});case"card":return B.jsx("div",{className:"mt-2 w-full",children:B.jsx("div",{className:"grid grid-cols-1 gap-3",children:B.jsxs("div",{className:"flex-shrink-0 border rounded-lg p-3 shadow-md",style:{background:ne},children:[M.image&&B.jsx("img",{src:M.image,alt:M.title,className:"h-32 w-full object-cover rounded-md mb-2"}),B.jsx("h3",{className:"text-sm font-bold",children:M.title}),M.actions?.map((ge,xe)=>{let ht;try{ht=typeof ge.payload=="string"?JSON.parse(ge.payload):ge.payload}catch{ht={productName:M.title}}return B.jsx("button",{className:"mb-1 mr-1 px-4 py-1 hover:scale-105 transition-all duration-100",onClick:()=>{ge.action==="Open URL"?window.open(ge.url,"_blank"):ge.title==="scan"?M.image&&fetch(M.image).then(jn=>jn.blob()).then(jn=>{const cr=URL.createObjectURL(jn),nn=document.createElement("a");nn.href=cr,nn.download="qrcode.png",document.body.appendChild(nn),nn.click(),document.body.removeChild(nn),URL.revokeObjectURL(cr)}).catch(()=>{alert("Failed to download image.")}):ur(ht.productName||M.title)},style:{background:te,borderRadius:`${N}px`,color:G},children:ge.title},xe)})]})})})}},qn=async M=>{if(!cn)return;const he=await fetch(`${o0}/endusers/get-by-username`,{headers:{Authorization:`Bearer ${e?.token}`,"Content-Type":"application/json"},method:"POST",body:JSON.stringify({username:`web_user_${M}`})});if(!he.ok)throw new Error(`HTTP error! status: ${he.status}`);return(await he.json()).id},xo=async M=>{if(!cn)return;const he=await qn(M);let ge;Qn&&(ge={last_name:Qn.split(" ")[1]||Qn.split(" ")[0]||`web_user_${M}`,first_name:Qn.split(" ")[0]||`web_user_${M}`}),oi&&(ge={...ge,phone:oi}),wt&&(ge={...ge,email:wt});const xe=await fetch(`${o0}/endusers/${he}`,{headers:{Authorization:`Bearer ${e?.token}`,"Content-Type":"application/json"},method:"PUT",body:JSON.stringify(ge)});if(!xe.ok)throw new Error(`HTTP error! status: ${xe.status}`);return await xe.json()},kl=async M=>{M.preventDefault();const he=new Uint8Array(16);window.crypto.getRandomValues(he);const ge=Array.from(he).map(xe=>xe.toString(16).padStart(2,"0")).join("");wa(ge),localStorage.setItem("conversationId",ge),localStorage.setItem("webChatAuth","true"),lr(!0)},qr=`linear-gradient(to bottom right, ${y}, ${h}, ${y})`,No=`linear-gradient(to right, ${h}, ${m})`,Co=`linear-gradient(to right, ${E}, ${v})`;return p||!u?null:B.jsxs(B.Fragment,{children:[B.jsxs("div",{className:"fixed top-0 right-0 h-full shadow-2xl",style:{width:I+"px",transition:"transform 0.3s cubic-bezier(0.4,0,0.2,1)",transform:Ge?"translateX(0)":`translateX(${I}px)`,background:qr,zIndex:1e3},onDrop:Ro,onDragOver:Ur,onDragEnter:Br,onDragLeave:Ra,children:[B.jsx("div",{onMouseDown:Te,className:"absolute left-0 top-0 h-full w-2 cursor-ew-resize z-50 bg-transparent opacity-50 transition-colors",style:{userSelect:"none"},onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent"}),ke&&B.jsx("div",{className:"absolute inset-0 bg-opacity-20 border-2 border-dashed flex items-center justify-center z-15",style:{borderColor:h},children:B.jsxs("div",{className:"text-center ",style:{color:w},children:[B.jsx(JP,{className:"w-12 h-12 mx-auto mb-2"}),B.jsx("p",{className:"text-lg font-semibold",children:"Drop files here"})]})}),cn?B.jsxs("div",{className:"flex items-center justify-between px-4 py-1 sm:py-3 border-b",style:{background:Co,borderColor:v},children:[B.jsxs("div",{className:"flex items-center gap-3",children:[B.jsx("div",{className:"sm:size-10 size-8 flex items-center justify-center overflow-hidden rounded-full",children:B.jsx("img",{src:bn,alt:`${yn} Logo`,className:"w-full h-full"})}),B.jsx("h2",{className:"sm:text-lg text-md font-semibold",style:{color:w},children:yn})]}),B.jsxs("div",{className:"flex justify-between items-center gap-2 ml-2",children:[B.jsx("button",{onClick:()=>It(!0),className:"transition-colors p-1 rounded-full",style:{color:w},title:"Bot info","aria-label":"Bot info",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(GP,{className:"w-5 h-5"})}),B.jsx("button",{onClick:()=>{Je(!1),tn.current=!1},className:"transition-colors p-1 rounded-full",style:{color:w},title:"Close Chat","aria-label":"Close Chat",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(Ws,{className:"w-5 h-5"})})]})]}):B.jsx("div",{className:"flex items-center justify-end px-6 py-3",children:B.jsx("div",{className:"flex items-center",children:B.jsx("button",{onClick:()=>{Je(!1),tn.current=!1},className:"transition-colors p-1 rounded-full",style:{color:e?.inputTextColor||"#FFF"},title:"Close Chat","aria-label":"Close Chat",onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(Ws,{className:"w-5 h-5"})})})}),cn&&B.jsxs("div",{ref:t,className:"flex-1 px-2 sm:px-4 py-4 overflow-y-auto space-y-4  scroll-smooth",style:{height:"calc(100% - 140px)",scrollbarWidth:"thin",scrollbarColor:`${h} transparent`},children:[ut.map(M=>B.jsxs("div",{className:`flex ${M.sender==="agent"?"flex-col sm:flex-row":""} items-start gap-3 ${M.sender==="user"?"flex-row-reverse":""}`,children:[B.jsx("div",{className:"sm:size-8 size-7 rounded-full flex items-center justify-center flex-shrink-0",style:{background:M.sender==="user"?oe:re},children:M.sender==="user"?B.jsx($P,{className:"sm:size-4 size-3",style:{color:S}}):B.jsx(yA,{className:"sm:size-4 size-3",style:{color:q}})}),B.jsxs("div",{className:`flex flex-col flex-1 ${M.sender==="user"?"items-end":"items-start"}`,children:[M.attachments&&M.attachments.length>0&&B.jsx("div",{className:"flex flex-col items-end w-[88%] mb-2 space-y-2",children:M.attachments.map(he=>B.jsx(v5,{attachment:he,formatFileSize:Ct,mainColor:h,secondaryColor:m,controlsColor:w},he.id))}),M.content&&M.sender==="user"?B.jsx("div",{className:"px-4 py-2 backdrop-blur-sm break-words w-fit",style:{wordBreak:"break-word",overflowWrap:"break-word",borderRadius:`${N}px`,maxWidth:O+"%",background:Y,color:K},children:B.jsx(so,{remarkPlugins:[uo],components:$n,children:typeof M.content=="string"?M.content.replace(/\n/g,`  
 `):""})}):typeof M.content=="object"?M.content.map((he,ge)=>B.jsx("div",{className:"mb-1 px-4 py-2 backdrop-blur-sm break-words w-fit",style:{wordBreak:"break-word",overflowWrap:"break-word",borderRadius:`${N}px`,maxWidth:O+"%",background:ne,color:$},children:li(he)},ge)):B.jsx("div",{className:"mb-1 px-4 py-2 backdrop-blur-sm break-words w-fit",style:{wordBreak:"break-word",overflowWrap:"break-word",borderRadius:`${N}px`,maxWidth:O+"%",background:ne,color:$},children:B.jsx(so,{remarkPlugins:[uo],components:$n,children:typeof M.content=="string"?M.content.replace(/\n/g,`  
 `):""})}),B.jsx("span",{className:"ml-1 text-[10px] sm:text-xs mt-1",style:{color:w},children:M.timestamp.toLocaleTimeString([],{hour:"2-digit",minute:"2-digit"})})]})]},M.id)),fe&&B.jsxs("div",{className:"flex items-start gap-3",children:[B.jsx("div",{className:"sm:size-8 size-7 rounded-full bg-gradient-to-r  flex items-center justify-center",style:{background:re},children:B.jsx(yA,{className:"sm:size-4 size-3",style:{color:q}})}),B.jsx("div",{className:"px-4 py-2",style:{background:ne,color:$,borderRadius:`${N}px`},children:B.jsxs("div",{className:"flex space-x-1",children:[B.jsx("div",{className:"size-1 sm:size-2 rounded-full animate-bounce",style:{background:$}}),B.jsx("div",{className:"size-1 sm:size-2 rounded-full animate-bounce",style:{background:$,animationDelay:"0.1s"}}),B.jsx("div",{className:"size-1 sm:size-2 rounded-full animate-bounce",style:{background:$,animationDelay:"0.2s"}})]})})]})]}),!cn&&B.jsxs("div",{className:"w-full h-full flex flex-col mt-20 items-center p-4 gap-4",children:[B.jsx("h4",{className:"text-sm font-bold mb-2",style:{color:w},children:"Veuillez fournir vos informations pour commencer à discuter"}),B.jsxs("form",{onSubmit:kl,className:"w-full max-w-xs flex flex-col gap-4 p-6 rounded-2xl shadow-lg",style:{background:h},children:[u?.formFields.includes("full_name")&&B.jsx("input",{type:"text",placeholder:"Nom et prénom",value:Qn,onChange:M=>Rl(M.target.value),className:"py-3 px-4 rounded-lg  outline-none transition-all duration-200",style:{borderRadius:"14px",backgroundColor:w,color:A,borderColor:m}},"full_name"),u?.formFields.includes("phone_number")&&B.jsx("input",{type:"text",placeholder:"Téléphone",value:oi,onChange:M=>Zn(M.target.value),className:"py-3 px-4 rounded-lg  outline-none transition-all duration-200",style:{borderRadius:"14px",backgroundColor:w,color:A,borderColor:m}},"phone_number"),u?.formFields.includes("email")&&B.jsx("input",{type:"email",placeholder:"Email",value:wt,onChange:M=>Qt(M.target.value),className:"py-3 px-4 rounded-lg  outline-none transition-all duration-200",style:{borderRadius:"14px",backgroundColor:w,color:A,borderColor:m}},"email"),B.jsx("button",{type:"submit",className:"py-3 rounded-lg font-bold uppercase outline-none shadow-lg transition-all duration-200",style:{background:`linear-gradient(90deg, ${h}, ${m})`,letterSpacing:"2px",borderRadius:"14px",color:w},children:"Submit"})]})]}),cn&&B.jsxs("div",{className:"absolute bottom-0 left-0 right-0 p-4",style:{background:`linear-gradient(to top, ${y}, transparent)`},children:[Oe.length>0&&B.jsx("div",{className:"flex flex-wrap gap-2 mb-3 p-3 bg-opacity-70 rounded-lg",style:{background:A},children:Oe.map(M=>B.jsx(zr,{attachment:M,onRemove:()=>Pr(M.id)},M.id))}),B.jsxs("div",{className:"flex items-center w-full gap-2 relative",children:[B.jsx("div",{className:"flex-1 relative",children:B.jsxs(B.Fragment,{children:[Xe!=="recording"&&Xe!=="paused"?B.jsxs(B.Fragment,{children:[B.jsx("button",{id:"upload-button-toggle",type:"button",onClick:()=>qe(M=>!M),className:"absolute left-1 bottom-[10px] sm:bottom-3 size-8 sm:size-9 rounded-full flex items-center justify-center transition-all duration-200 z-10 hover:bg-opacity-10",style:{color:w},onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="",children:B.jsx(WP,{className:`size-4 sm:size-5 transition-transform duration-200 ${it?"rotate-45":""}`})}),B.jsx("button",{type:"button",onClick:()=>{dt()},className:"absolute right-1 bottom-[10px] sm:bottom-3 size-8 sm:size-9 rounded-full flex items-center justify-center transition-all duration-200 z-10",style:{color:w},onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="",children:B.jsx(_P,{className:"size-4 sm:size-5"})})]}):B.jsxs(B.Fragment,{children:[B.jsx("button",{type:"button",onClick:()=>{J.current=!0,gt()},className:"absolute left-1 bottom-[10px] sm:bottom-3 size-8 sm:size-9 hover:bg-red-100 hover:bg-opacity-50 rounded-full flex items-center justify-center text-red-500 hover:text-red-600 z-10 after:w-2 after:h-2 after:bg-red-500 after:absolute after:rounded-full after:top-1/2 after:-right-3 after:-translate-y-1/2 after:animate-bounce",children:B.jsx(ZP,{className:"size-4 sm:size-5"})}),B.jsx("button",{type:"button",onClick:()=>{Ie?(Pe(!1),Bt()):(Pe(!0),Nt())},className:"absolute right-11 bottom-[10px] sm:bottom-3 size-8 sm:size-9 rounded-full flex items-center justify-center transition-all duration-200 z-10",style:{color:w},children:Ie?B.jsx(qP,{className:"size-6 sm:size-7"}):B.jsx(zP,{className:"size-6 sm:size-7"})}),B.jsxs("div",{className:"absolute left-16 bottom-4 flex items-center gap-4 z-10 ",style:{color:w},children:[B.jsx("p",{children:ie}),B.jsx("p",{className:`${Xe==="recording"?"animate-pulse":""}`,children:Xe==="recording"?"Recording...":Xe==="paused"?"Paused":"Starting..."})]}),B.jsx("button",{type:"button",onClick:()=>{gt()},className:"absolute right-1 bottom-[10px] sm:bottom-3 size-8 sm:size-9 rounded-full flex items-center justify-center transition-all duration-200 z-10",style:{color:w,background:"green"},children:B.jsx(PP,{className:"size-4 sm:size-5"})})]}),it&&B.jsxs("div",{className:"absolute bottom-12 left-0 rounded-lg shadow-xl border border-gray-700 py-2 min-w-48 z-10",style:{background:F},children:[B.jsxs("button",{id:"document-button",onClick:()=>xa("document"),className:"w-full px-4 py-3 text-left flex items-center gap-3 transition-colors",style:{color:H},onMouseEnter:M=>M.currentTarget.style.background=X,onMouseLeave:M=>M.currentTarget.style.background="",children:[B.jsx("div",{className:"w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center",children:B.jsx(EA,{className:"w-4 h-4 text-white"})}),B.jsx("span",{children:"Document"})]}),B.jsxs("button",{id:"image-button",onClick:()=>xa("image"),className:"w-full px-4 py-3 text-left flex items-center gap-3 transition-colors",style:{color:H},onMouseEnter:M=>M.currentTarget.style.background=X,onMouseLeave:M=>M.currentTarget.style.background="",children:[B.jsx("div",{className:"w-8 h-8 bg-green-600 rounded-full flex items-center justify-center",children:B.jsx(HP,{className:"w-4 h-4 text-white"})}),B.jsx("span",{children:"Photos"})]}),B.jsxs("button",{id:"video-button",onClick:()=>xa("video"),className:"w-full px-4 py-3 text-left flex items-center gap-3 transition-colors",style:{color:H},onMouseEnter:M=>M.currentTarget.style.background=X,onMouseLeave:M=>M.currentTarget.style.background="",children:[B.jsx("div",{className:"w-8 h-8 bg-red-600 rounded-full flex items-center justify-center",children:B.jsx(vA,{className:"w-4 h-4 text-white"})}),B.jsx("span",{children:"Videos"})]}),B.jsxs("button",{id:"audio-button",onClick:()=>xa("audio"),className:"w-full px-4 py-3 text-left flex items-center gap-3 transition-colors",style:{color:H},onMouseEnter:M=>M.currentTarget.style.background=X,onMouseLeave:M=>M.currentTarget.style.background="",children:[B.jsx("div",{className:"w-8 h-8 bg-purple-600 rounded-full flex items-center justify-center",children:B.jsx(Wc,{className:"w-4 h-4 text-white"})}),B.jsx("span",{children:"Audio"})]})]}),B.jsx("textarea",{id:"message-input",ref:si,className:`w-full pt-3 text-xs sm:text-sm sm:pt-4 px-12 resize-none min-h-10 sm:min-h-12 max-h-32 overflow-y-auto focus:outline-none backdrop-blur-sm ${Xe==="recording"||Xe==="paused"?"cursor-default":""}`,value:Xe==="recording"||Xe==="paused"?"":vt,onChange:M=>Ht(M.target.value),placeholder:Xe==="recording"||Xe==="paused"?"":"Type your message...",rows:1,onKeyDown:M=>{M.key==="Enter"&&!M.shiftKey&&(M.preventDefault(),ur())},style:{borderRadius:`${R}px`,background:A,color:w,scrollbarWidth:"thin",scrollbarColor:`${h} transparent`},readOnly:Xe==="recording"||Xe==="paused"})]})}),(vt.trim()||Oe.length!==0)&&B.jsx("div",{className:"w-min",children:B.jsx("button",{onClick:()=>ur(),className:"w-10 h-10 rounded-full flex items-center justify-center transition-all duration-200 transform hover:scale-105",style:{background:h,color:w},children:B.jsx(XP,{className:"w-5 h-5"})})})]}),B.jsx("input",{ref:n,type:"file",multiple:!0,className:"hidden",accept:"image/*",onChange:M=>M.target.files&&Cn(M.target.files,n)}),B.jsx("input",{ref:a,type:"file",multiple:!0,className:"hidden",accept:"video/*",onChange:M=>M.target.files&&Cn(M.target.files,a)}),B.jsx("input",{ref:o,type:"file",multiple:!0,className:"hidden",accept:"audio/*",onChange:M=>M.target.files&&Cn(M.target.files,o)}),B.jsx("input",{ref:l,type:"file",multiple:!0,className:"hidden",accept:".pdf,.doc,.docx,.txt,.csv,.xlsx,.ppt,.pptx,.zip,.rar",onChange:M=>M.target.files&&Cn(M.target.files,l)})]}),ft&&B.jsx("div",{className:"fixed inset-0 z-[998] flex items-center justify-center",style:{background:"rgba(0,0,0,0.45)",backdropFilter:"blur(4px)"},onClick:()=>It(!1),children:B.jsxs("div",{className:"relative w-full max-w-md mx-4 p-6 rounded-2xl shadow-2xl border overflow-hidden animate-[fadeIn_0.25s_ease]",style:{background:`linear-gradient(145deg, ${y}, ${h}, ${m})`,borderRadius:`${R}px`,borderColor:h},onClick:M=>M.stopPropagation(),children:[B.jsx("button",{onClick:()=>It(!1),className:"absolute top-3 right-3 p-1 rounded-full transition-colors","aria-label":"Close bot info",style:{color:w},onMouseEnter:M=>M.currentTarget.style.background=h,onMouseLeave:M=>M.currentTarget.style.background="transparent",children:B.jsx(Ws,{className:"w-5 h-5"})}),e?.bot?B.jsxs("div",{className:"flex flex-col gap-4",children:[B.jsxs("div",{className:"flex items-center gap-4",children:[B.jsx("div",{className:"w-16 h-16 rounded-full p-1 flex items-center justify-center shadow-md overflow-hidden",style:{background:`linear-gradient(to bottom right, ${h}, ${m})`,borderRadius:"1.5rem"},children:B.jsx("img",{src:bn,alt:`${yn} logo`||"Bot avatar",className:"w-full h-full rounded-full",style:{borderRadius:"1.5rem"}})}),B.jsxs("div",{className:"min-w-0",children:[B.jsx("h3",{className:"text-lg font-semibold truncate",title:yn,style:{color:w},children:yn}),B.jsx("div",{className:"mt-1 flex flex-wrap gap-2",children:e?.bot.is_active!==void 0&&B.jsx("span",{className:"px-2 py-0.5 text-xs rounded-full font-medium",style:{backgroundColor:h,color:w},children:e?.bot.is_active?"Active":"Inactive"})})]})]}),e?.bot.description&&B.jsx("div",{className:"max-h-40 overflow-y-auto pr-1",style:{scrollbarWidth:"thin",scrollbarColor:`${h} transparent`},children:B.jsx("p",{className:"text-sm leading-relaxed whitespace-pre-line",style:{wordBreak:"break-word",color:w},children:e?.bot.description})}),B.jsxs("div",{className:"grid grid-cols-2 gap-3 text-xs",style:{color:w},children:[e?.bot.phone_number&&B.jsxs("div",{className:"flex flex-col gap-0.5",children:[B.jsx("span",{className:"uppercase tracking-wide font-bold",style:{color:w},children:"Phone number"}),B.jsx("span",{className:"font-medium break-all",children:e?.bot.phone_number})]}),e?.bot.personality&&B.jsxs("div",{className:"flex flex-col gap-0.5",children:[B.jsx("span",{className:"uppercase tracking-wide font-bold",style:{color:w},children:"Personality"}),B.jsx("span",{className:"font-medium break-all",children:e?.bot.personality})]}),e?.bot.botId==="arts-clinique"&&B.jsxs("div",{className:"flex flex-col gap-0.5",children:[B.jsx("span",{className:"uppercase tracking-wide font-bold",style:{color:w},children:"Website"}),B.jsx("a",{className:"break-all underline font-semibold",href:"https://artsclinic.com",target:"_blank",rel:"noopener noreferrer",children:"https://artsclinic.com"})]}),e?.bot.botId==="arts-clinique"&&B.jsxs("div",{className:"flex flex-col gap-0.5",children:[B.jsx("span",{className:"uppercase tracking-wide font-bold",style:{color:w},children:"Email"}),B.jsx("span",{className:"font-medium break-all",style:{color:w},children:"taj.contact@gmail.com"})]})]})]}):B.jsxs("div",{className:"text-center",style:{color:w},children:[B.jsx("p",{className:"text-sm",children:"No bot selected."}),B.jsx("button",{type:"button",onClick:()=>It(!1),className:"mt-4 px-4 py-2 rounded-lg text-sm font-medium bg-white/10 hover:bg-white/20 text-black transition-colors",style:{borderRadius:`${R}px`},children:"Close"})]})]})})]}),B.jsxs("button",{onClick:()=>{Je(M=>!M),tn.current=!Ge,Ge||xl()},className:"fixed top-1/2 -translate-y-1/2 px-4 py-3 shadow-lg transform",style:{right:"0",transform:Ge?`translateX(-${I}px)`:"translateX(0)",transition:"transform 0.3s cubic-bezier(0.4,0,0.2,1)",background:No,borderTopLeftRadius:`${x}px`,borderBottomLeftRadius:`${P}px`,borderTopRightRadius:`${L}px`,borderBottomRightRadius:`${z}px`,zIndex:999},children:[B.jsx("img",{src:bn,alt:"Tybot logo",className:"w-7 h-7"}),Ta>0&&!Ge?B.jsxs(B.Fragment,{children:[B.jsx("audio",{src:"https://public-assets.content-platform.envatousercontent.com/3a5b6a9c-bead-4397-bc15-393c0f6edb9f/87e342b2-9863-4e6c-83af-edeb375b338d/preview.mp3",className:"hidden",autoPlay:!0}),B.jsx("span",{className:"absolute -top-1 -left-1 bg-red-500 text-white text-xs font-medium size-5 rounded-full flex items-center justify-center",children:Ta>9?"9+":Ta})]}):null]})]})};function w5(e){const t="tybot-widget-container";let n=document.getElementById(t);n||(n=document.createElement("div"),n.id=t,document.body.appendChild(n));const a=n.shadowRoot??n.attachShadow({mode:"open"});if(!document.querySelector("#tybot-widget-fonts")){const d=document.createElement("link");d.rel="preconnect",d.href="https://fonts.googleapis.com";const p=document.createElement("link");p.rel="preconnect",p.href="https://fonts.gstatic.com",p.crossOrigin="";const f=document.createElement("link");f.id="tybot-widget-fonts",f.rel="stylesheet",f.href="https://fonts.googleapis.com/css2?family=Nunito:ital@0;1&display=swap",document.head.append(d),document.head.append(p),document.head.append(f)}if(!a.querySelector("#tybot-widget-style")){const d=document.createElement("style");d.id="tybot-widget-style",d.textContent=QI,a.appendChild(d)}const o=a.querySelector("#tybot-widget-root");o&&o.remove();const l=document.createElement("div");l.id="tybot-widget-root",a.appendChild(l),KI.createRoot(l).render(B.jsx(A5,{config:e}))}Ga.createTybotWidget=w5,Object.defineProperty(Ga,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tybotflow-widget",
-  "version": "0.0.9",
+  "version": "0.1.0",
   "description": "A modern, customizable React widget for Tybot chat integration.",
   "license": "ISC",
   "main": "dist/index.umd.js",