@brainbase-labs/chat-widget 0.1.9 → 0.1.11
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.
- package/dist/embed/index.js +1 -1
- package/dist/index.cjs +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +50 -51
- package/package.json +8 -9
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),e=require("react/jsx-runtime"),ee="bb-chat-";function se(s){try{const t=sessionStorage.getItem(`${ee}${s}`);return t?JSON.parse(t):null}catch{return null}}function Y(s,t){try{sessionStorage.setItem(`${ee}${s}`,JSON.stringify(t))}catch{}}function X(s){try{sessionStorage.removeItem(`${ee}${s}`)}catch{}}function oe(s){const{config:t,apiClient:n,mockMode:r,onSessionStart:u,onSessionEnd:g,onMessage:c,onError:m}=s,[l,o]=i.useState([]),[x,L]=i.useState([]),[E,T]=i.useState(!1),[W,V]=i.useState(null),[b,_]=i.useState(null),$=i.useRef(0),F=i.useRef(!1);i.useEffect(()=>{if(F.current)return;F.current=!0;const p=se(t.embedId);p&&p.status==="active"&&(_(p.sessionId),o(p.messages),L(p.toolCalls),$.current=p.startTime)},[t.embedId]),i.useEffect(()=>{b&&l.length>0&&Y(t.embedId,{sessionId:b,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:$.current,messages:l,toolCalls:x,status:"active"})},[b,l,x,t]);const U=i.useCallback(async()=>($.current=Date.now(),_(null),o([]),L([]),X(t.embedId),""),[t.embedId]),D=i.useCallback((p,k,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),e=require("react/jsx-runtime"),ee="bb-chat-";function se(s){try{const t=sessionStorage.getItem(`${ee}${s}`);return t?JSON.parse(t):null}catch{return null}}function Y(s,t){try{sessionStorage.setItem(`${ee}${s}`,JSON.stringify(t))}catch{}}function X(s){try{sessionStorage.removeItem(`${ee}${s}`)}catch{}}function oe(s){const{config:t,apiClient:n,mockMode:r,onSessionStart:u,onSessionEnd:g,onMessage:c,onError:m}=s,[l,o]=i.useState([]),[x,L]=i.useState([]),[E,T]=i.useState(!1),[W,V]=i.useState(null),[b,_]=i.useState(null),$=i.useRef(0),F=i.useRef(!1);i.useEffect(()=>{if(F.current)return;F.current=!0;const p=se(t.embedId);p&&p.status==="active"&&(_(p.sessionId),o(p.messages),L(p.toolCalls),$.current=p.startTime)},[t.embedId]),i.useEffect(()=>{b&&l.length>0&&Y(t.embedId,{sessionId:b,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:$.current,messages:l,toolCalls:x,status:"active"})},[b,l,x,t]);const U=i.useCallback(async()=>($.current=Date.now(),_(null),o([]),L([]),X(t.embedId),""),[t.embedId]),D=i.useCallback((p,k,j)=>{switch(p.type){case"session":{const d=p.data;d.session_id&&(j(d.session_id),d.is_new&&($.current=Date.now(),u==null||u(d.session_id)));break}case"message":{const d=p.data;d.content&&o(h=>h.map(a=>a.id===k?{...a,content:d.content,status:"streaming"}:a));break}case"tool_call":{const d=p.data;L(h=>{const a=h.findIndex(f=>f.name===d.function&&f.status==="pending");return a!==-1&&d.result!==void 0?h.map((f,N)=>N===a?{...f,result:d.result,status:"completed"}:f):a===-1?[...h,{id:`tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,name:d.function,arguments:d.args??{},status:"pending",timestamp:Date.now()}]:h}),d.content&&o(h=>h.map(a=>a.id===k?{...a,content:d.content,status:"streaming"}:a));break}case"waiting":break;case"done":{o(d=>d.map(h=>h.id===k?{...h,status:"sent"}:h));break}case"completed":{o(d=>d.map(h=>h.id===k?{...h,status:"sent"}:h)),b&&Y(t.embedId,{sessionId:b,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:$.current,messages:l,toolCalls:x,status:"completed"});break}case"error":{const d=p.data;o(h=>h.map(a=>a.id===k?{...a,status:"error",content:d.error??"An error occurred"}:a));break}}},[t,b,l,x,u]),S=i.useCallback(async(p,k,j)=>{const d=p.getReader(),h=new TextDecoder;let a="";try{for(;;){const{done:f,value:N}=await d.read();if(f)break;for(a+=h.decode(N,{stream:!0});a.includes(`
|
|
2
2
|
|
|
3
3
|
`);){const[C,P]=a.split(`
|
|
4
4
|
|
|
5
5
|
`,2);a=P;for(const te of C.split(`
|
|
6
|
-
`))if(te.startsWith("data: "))try{const me=JSON.parse(te.slice(6));D(me,k,y)}catch{}}}}finally{d.releaseLock()}},[D]),J=i.useCallback(async p=>{if(!p.trim())return;const k={id:`user-${Date.now()}`,role:"user",content:p,timestamp:Date.now(),status:"sent"};o(a=>[...a,k]),c==null||c(k);const y=`assistant-${Date.now()}`,d={id:y,role:"assistant",content:"",timestamp:Date.now(),status:"streaming"};o(a=>[...a,d]),T(!0),V(null);const h=a=>{_(a)};try{if(r){const a=n.sendMessage(p);for await(const f of a)D(f,y,h)}else{const a=await n.sendMessage({embedId:t.embedId,message:p,sessionId:b??void 0});await S(a,y,h)}o(a=>a.map(f=>f.id===y&&f.status==="streaming"?{...f,status:"sent"}:f))}catch(a){const f=a instanceof Error?a:new Error("Failed to send message");V(f),m==null||m(f),o(N=>N.map(C=>C.id===y?{...C,status:"error",content:"Failed to get response"}:C))}finally{T(!1)}},[b,n,r,t.embedId,D,S,c,m]),q=i.useCallback(async()=>{if(!b)return;const p={sessionId:b,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:$.current,messages:l,toolCalls:x,status:"completed"};g==null||g(p),X(t.embedId),_(null),o([]),L([])},[b,t,l,x,g]),A=i.useCallback(()=>{o([]),L([])},[]);return{messages:l,toolCalls:x,isLoading:E,error:W,sessionId:b,sendMessage:J,endSession:q,clearMessages:A,startNewSession:U}}const pe="https://whatsapp-based-server.onrender.com";function ne(s=pe){return{async getDeploymentConfig(t){const n=await fetch(`${s}/chat/config/${t}`);if(!n.ok)throw new Error(`Failed to fetch deployment config: ${n.status}`);const r=await n.json();return{embedId:r.embedId,deploymentId:"",workerId:"",flowId:"",welcomeMessage:r.welcomeMessage,agentName:r.agentName,agentLogoUrl:r.agentLogoUrl,primaryColor:r.primaryColor,styling:r.styling}},async sendMessage(t){const n=await fetch(`${s}/chat/message`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({embed_id:t.embedId,message:t.message,session_id:t.sessionId||void 0,metadata:t.metadata})});if(!n.ok){const r=await n.text();throw new Error(`Failed to send message: ${n.status} - ${r}`)}if(!n.body)throw new Error("No response stream available");return n.body}}}const he={embedId:"mock-embed-id",deploymentId:"mock-deployment-id",workerId:"mock-worker-id",flowId:"mock-flow-id",agentName:"AI Assistant",agentLogoUrl:void 0,primaryColor:"#1a1a2e",styling:{}},_e=[{trigger:/hello|hi|hey/i,response:"Hello! I'm a demo AI assistant. How can I help you today?",delay:500},{trigger:/weather/i,response:"I'd check the weather for you, but I'm in mock mode! In production, I could use a weather API.",delay:800,toolCalls:[{name:"get_weather",arguments:{location:"San Francisco"},result:{temperature:72,condition:"sunny"}}]},{trigger:/help|support/i,response:"I'm here to help! You can ask me questions, and I'll do my best to assist you. In production, I'd be connected to your agent with full capabilities.",delay:600},{trigger:/pricing|cost|price/i,response:"For pricing information, I'd typically check our database or connect you with the sales team. This is a mock response demonstrating how I'd handle pricing questions.",delay:700,toolCalls:[{name:"lookup_pricing",arguments:{plan:"all"},result:{plans:[{name:"Starter",price:"$29/mo"},{name:"Pro",price:"$99/mo"}]}}]},{trigger:/.*/,response:"I'm running in mock mode. This is a simulated response to demonstrate the chat UI. In production, I'd be connected to your agent!",delay:1e3}];function R(s){return new Promise(t=>setTimeout(t,s))}function re(s,t){const n={...he,...s},r=t??_e,u=`mock-session-${Date.now()}`;return{async getDeploymentConfig(g){return await R(300),n},async*sendMessage(g){yield{type:"session",data:{session_id:u,is_new:!0},timestamp:Date.now()};const c=r.find(o=>typeof o.trigger=="string"?g.toLowerCase().includes(o.trigger.toLowerCase()):o.trigger.test(g))??r[r.length-1];if(await R(c.delay??500),c.toolCalls)for(const o of c.toolCalls)yield{type:"tool_call",data:{function:o.name,args:o.arguments},timestamp:Date.now()},await R(300),yield{type:"tool_call",data:{function:o.name,result:o.result},timestamp:Date.now()},await R(200);const m=c.response.split(" ");let l="";for(const o of m)l+=(l?" ":"")+o,yield{type:"message",data:{content:l,role:"assistant"},timestamp:Date.now()},await R(30+Math.random()*40);yield{type:"done",data:{session_id:u},timestamp:Date.now()}}}}const O=({className:s,color:t="currentColor",cutoutColor:n="var(--bb-primary-color)"})=>e.jsxs("svg",{className:s,viewBox:"0 0 800 800",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",fill:t}),e.jsx("circle",{cx:"400",cy:"400",r:"400",fill:t}),e.jsx("path",{d:"M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",fill:t}),e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",fill:t}),e.jsx("circle",{cx:"400",cy:"400",r:"350",fill:t}),e.jsx("path",{d:"M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",fill:t}),e.jsx("rect",{x:"399.919",y:"209",width:"270",height:"270",rx:"12",transform:"rotate(45 399.919 209)",fill:n})]}),fe="_header_1p6z5_1",xe="_compact_1p6z5_9",be="_headerBackground_1p6z5_20",ye="_headerContent_1p6z5_59",we="_topRow_1p6z5_64",je="_agentInfo_1p6z5_79",Ce="_agentLogo_1p6z5_85",ke="_agentLogoPlaceholder_1p6z5_102",ve="_brainbaseLogo_1p6z5_123",Ie="_agentName_1p6z5_137",Ne="_actions_1p6z5_144",Le="_actionButton_1p6z5_149",$e="_welcomeText_1p6z5_183",Se="_title_1p6z5_202",Be="_subtitle_1p6z5_210",w={header:fe,compact:xe,headerBackground:be,headerContent:ye,topRow:we,agentInfo:je,agentLogo:Ce,agentLogoPlaceholder:ke,brainbaseLogo:ve,agentName:Ie,actions:Ne,actionButton:Le,welcomeText:$e,title:Se,subtitle:Be},ae=({agentName:s="AI Assistant",agentLogoUrl:t,welcomeTitle:n,welcomeSubtitle:r,onClose:u,onNewChatRequest:g,showNewChatButton:c=!1,compact:m=!1})=>{const l=n||"Hello there.",o=r!==void 0?r:n?void 0:"How can we help?";return e.jsxs("div",{className:`${w.header} ${m?w.compact:""}`,children:[e.jsx("div",{className:w.headerBackground}),e.jsxs("div",{className:w.headerContent,children:[e.jsxs("div",{className:w.topRow,children:[e.jsxs("div",{className:w.agentInfo,children:[t?e.jsx("img",{src:t,alt:s,className:w.agentLogo}):e.jsx("div",{className:w.agentLogoPlaceholder,children:e.jsx(O,{className:w.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})}),e.jsx("span",{className:w.agentName,children:s})]}),e.jsxs("div",{className:w.actions,children:[c&&g&&e.jsx("button",{className:w.actionButton,onClick:g,"aria-label":"Start new chat",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M12 5V19M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),u&&e.jsx("button",{className:w.actionButton,onClick:u,"aria-label":"Close chat",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),!m&&e.jsxs("div",{className:w.welcomeText,children:[e.jsx("h1",{className:w.title,children:l}),o&&e.jsx("p",{className:w.subtitle,children:o})]})]})]})},Me="_messageWrapper_c86gj_1",Te="_user_c86gj_19",We="_assistant_c86gj_24",De="_avatar_c86gj_28",Pe="_avatarPlaceholder_c86gj_43",He="_brainbaseLogo_c86gj_53",Ee="_messageBubble_c86gj_58",Ve="_error_c86gj_76",Ae="_content_c86gj_81",Re="_cursor_c86gj_88",ze="_errorIndicator_c86gj_107",v={messageWrapper:Me,user:Te,assistant:We,avatar:De,avatarPlaceholder:Pe,brainbaseLogo:He,messageBubble:Ee,error:Ve,content:Ae,cursor:Re,errorIndicator:ze},ce=({message:s,agentName:t,agentLogoUrl:n})=>{const r=s.role==="user",u=s.status==="streaming",g=s.status==="error";return e.jsxs("div",{className:`${v.messageWrapper} ${r?v.user:v.assistant}`,children:[!r&&e.jsx("div",{className:v.avatar,children:n?e.jsx("img",{src:n,alt:t||"AI"}):e.jsx("div",{className:v.avatarPlaceholder,children:e.jsx(O,{className:v.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})})}),e.jsxs("div",{className:`${v.messageBubble} ${g?v.error:""}`,role:"article","aria-label":`${r?"Your message":`${t||"AI"} says`}`,children:[e.jsxs("div",{className:v.content,children:[s.content,u&&e.jsx("span",{className:v.cursor})]}),g&&e.jsxs("div",{className:v.errorIndicator,children:[e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2"}),e.jsx("path",{d:"M12 8V12M12 16H12.01",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),e.jsx("span",{children:"Failed to send"})]})]})]})},Oe="_toolCall_1wby1_1",Fe="_iconWrapper_1wby1_24",Ue="_spinner_1wby1_33",qe="_checkIcon_1wby1_48",Ze="_errorIcon_1wby1_54",Ke="_content_1wby1_60",Ge="_label_1wby1_66",Je="_name_1wby1_73",Ye="_pending_1wby1_78",Xe="_completed_1wby1_82",Qe="_error_1wby1_54",I={toolCall:Oe,iconWrapper:Fe,spinner:Ue,checkIcon:qe,errorIcon:Ze,content:Ke,label:Ge,name:Je,pending:Ye,completed:Xe,error:Qe},ie=({toolCall:s})=>{const t=s.status==="pending"||s.status==="executing",n=s.status==="completed",r=s.status==="error",u=g=>g.replace(/_/g," ").replace(/([A-Z])/g," $1").trim().toLowerCase().replace(/^./,c=>c.toUpperCase());return e.jsxs("div",{className:`${I.toolCall} ${t?I.pending:""} ${n?I.completed:""} ${r?I.error:""}`,children:[e.jsx("div",{className:I.iconWrapper,children:t?e.jsx("div",{className:I.spinner}):n?e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:I.checkIcon,children:e.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:I.errorIcon,children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsxs("div",{className:I.content,children:[e.jsx("span",{className:I.label,children:t?"Running":n?"Completed":"Failed"}),e.jsx("span",{className:I.name,children:u(s.name)})]})]})},et="_wrapper_10rss_2",tt="_avatar_10rss_22",st="_avatarPlaceholder_10rss_37",ot="_brainbaseLogo_10rss_47",nt="_bubble_10rss_52",rt="_dot_10rss_63",B={wrapper:et,avatar:tt,avatarPlaceholder:st,brainbaseLogo:ot,bubble:nt,dot:rt},le=({agentName:s="AI",agentLogoUrl:t})=>e.jsxs("div",{className:B.wrapper,role:"status","aria-label":`${s} is typing`,children:[e.jsx("div",{className:B.avatar,children:t?e.jsx("img",{src:t,alt:s}):e.jsx("div",{className:B.avatarPlaceholder,children:e.jsx(O,{className:B.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})})}),e.jsxs("div",{className:B.bubble,children:[e.jsx("span",{className:B.dot}),e.jsx("span",{className:B.dot}),e.jsx("span",{className:B.dot})]})]}),at="_messageList_241kk_1",ct="_emptyState_241kk_29",it="_emptyIcon_241kk_40",lt="_emptyText_241kk_52",Z={messageList:at,emptyState:ct,emptyIcon:it,emptyText:lt},de=({messages:s,toolCalls:t,isLoading:n,agentName:r,agentLogoUrl:u})=>{var l;const g=i.useRef(null),c=i.useRef(null);i.useEffect(()=>{var o;(o=c.current)==null||o.scrollIntoView({behavior:"smooth"})},[s,t,n]);const m=t.filter(o=>o.status==="pending"||o.status==="executing");return e.jsxs("div",{className:Z.messageList,ref:g,role:"log","aria-live":"polite",children:[s.length===0&&!n&&e.jsxs("div",{className:Z.emptyState,children:[e.jsx("div",{className:Z.emptyIcon,children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsx("p",{className:Z.emptyText,children:"Start a conversation"})]}),s.map(o=>e.jsx(ce,{message:o,agentName:r,agentLogoUrl:u},o.id)),m.map(o=>e.jsx(ie,{toolCall:o},o.id)),n&&((l=s[s.length-1])==null?void 0:l.role)==="user"&&e.jsx(le,{agentName:r,agentLogoUrl:u}),e.jsx("div",{ref:c})]})},dt="_inputWrapper_5lgg7_1",ut="_inputContainer_5lgg7_7",gt="_textarea_5lgg7_23",mt="_sendButton_5lgg7_50",pt="_hint_5lgg7_89",z={inputWrapper:dt,inputContainer:ut,textarea:gt,sendButton:mt,hint:pt},ue=({onSend:s,disabled:t=!1,placeholder:n="Send a message..."})=>{const[r,u]=i.useState(""),g=i.useRef(null),c=i.useCallback(()=>{const o=g.current;o&&(o.style.height="auto",o.style.height=`${Math.min(o.scrollHeight,150)}px`)},[]);i.useEffect(()=>{c()},[r,c]);const m=i.useCallback(o=>{o==null||o.preventDefault();const x=r.trim();x&&!t&&(s(x),u(""),g.current&&(g.current.style.height="auto"))},[r,t,s]),l=i.useCallback(o=>{o.key==="Enter"&&!o.shiftKey&&(o.preventDefault(),m())},[m]);return e.jsxs("form",{className:z.inputWrapper,onSubmit:m,children:[e.jsxs("div",{className:z.inputContainer,children:[e.jsx("textarea",{ref:g,className:z.textarea,value:r,onChange:o=>u(o.target.value),onKeyDown:l,placeholder:n,disabled:t,rows:1,"aria-label":"Message input"}),e.jsx("button",{type:"submit",className:z.sendButton,disabled:t||!r.trim(),"aria-label":"Send message",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e.jsxs("div",{className:z.hint,children:["Press ",e.jsx("kbd",{children:"Enter"})," to send, ",e.jsx("kbd",{children:"Shift + Enter"})," for new line"]})]})},ht="_poweredBy_9jh5q_1",_t="_logo_9jh5q_20",ft="_poweredText_9jh5q_24",xt="_text_9jh5q_36",K={poweredBy:ht,logo:_t,poweredText:ft,text:xt},bt=({className:s})=>e.jsxs("svg",{className:s,viewBox:"0 0 800 800",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",fill:"currentColor"}),e.jsx("circle",{cx:"400",cy:"400",r:"400",fill:"currentColor"}),e.jsx("path",{d:"M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",fill:"currentColor"}),e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",fill:"currentColor"}),e.jsx("circle",{cx:"400",cy:"400",r:"350",fill:"currentColor"}),e.jsx("path",{d:"M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",fill:"currentColor"}),e.jsx("rect",{x:"399.919",y:"209",width:"270",height:"270",rx:"12",transform:"rotate(45 399.919 209)",fill:"var(--bb-surface-bg, #ffffff)"})]}),yt=({showBranding:s=!0})=>s?e.jsxs("a",{href:"https://brainbaselabs.com/",target:"_blank",rel:"noopener noreferrer",className:K.poweredBy,"aria-label":"Powered by Brainbase Labs",children:[e.jsx("span",{className:K.poweredText,children:"Powered by"}),e.jsx(bt,{className:K.logo}),e.jsx("span",{className:K.text,children:"Brainbase Labs"})]}):null,wt="_container_m2o9l_1",jt="_body_m2o9l_26",Ct="_confirmationOverlay_m2o9l_35",kt="_confirmationDialog_m2o9l_56",vt="_confirmationText_m2o9l_78",It="_confirmationButtons_m2o9l_86",Nt="_cancelButton_m2o9l_91",Lt="_confirmButton_m2o9l_92",M={container:wt,body:jt,confirmationOverlay:Ct,confirmationDialog:kt,confirmationText:vt,confirmationButtons:It,cancelButton:Nt,confirmButton:Lt},ge=({config:s,messages:t,toolCalls:n,isLoading:r,onSendMessage:u,onClose:g,onNewChat:c})=>{var T;const[m,l]=i.useState(!1),o=t.length>0,x=()=>{l(!0)},L=()=>{l(!1),c==null||c()},E=()=>{l(!1)};return e.jsxs("div",{className:M.container,role:"dialog","aria-label":"Chat window",children:[e.jsx(ae,{agentName:s.agentName,agentLogoUrl:s.agentLogoUrl,welcomeTitle:s.welcomeMessage||"Hello there.",welcomeSubtitle:s.welcomeMessage?void 0:"How can we help?",onClose:g,onNewChatRequest:x,showNewChatButton:o,compact:o}),e.jsxs("div",{className:M.body,children:[e.jsx(de,{messages:t,toolCalls:n,isLoading:r,agentName:s.agentName,agentLogoUrl:s.agentLogoUrl}),e.jsx(ue,{onSend:u,disabled:r,placeholder:"Ask a question..."})]}),e.jsx(yt,{showBranding:((T=s.styling)==null?void 0:T.showBranding)??!0}),m&&e.jsx("div",{className:M.confirmationOverlay,children:e.jsxs("div",{className:M.confirmationDialog,children:[e.jsx("p",{className:M.confirmationText,children:"End current chat and start a new conversation?"}),e.jsxs("div",{className:M.confirmationButtons,children:[e.jsx("button",{className:M.cancelButton,onClick:E,type:"button",children:"Cancel"}),e.jsx("button",{className:M.confirmButton,onClick:L,type:"button",children:"End Chat"})]})]})})]})},$t="_toggleButton_11dqz_1",St="_icon_11dqz_31",Bt="_agentLogo_11dqz_36",Mt="_unreadBadge_11dqz_43",G={toggleButton:$t,icon:St,agentLogo:Bt,unreadBadge:Mt},Q=({onClick:s,agentLogoUrl:t,unreadCount:n=0})=>e.jsxs("button",{className:G.toggleButton,onClick:s,"aria-label":"Open chat",type:"button",children:[t?e.jsx("img",{src:t,alt:"",className:G.agentLogo}):e.jsx("svg",{className:G.icon,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),n>0&&e.jsx("span",{className:G.unreadBadge,children:n>9?"9+":n})]}),Tt="_container_kgfgt_1",Wt="_header_kgfgt_25",Dt="_logoWrapper_kgfgt_38",Pt="_logo_kgfgt_38",Ht="_closeButton_kgfgt_51",Et="_content_kgfgt_74",Vt="_iconWrapper_kgfgt_84",At="_errorIcon_kgfgt_95",Rt="_title_kgfgt_101",zt="_description_kgfgt_109",Ot="_retryButton_kgfgt_117",Ft="_footer_kgfgt_139",Ut="_poweredBy_kgfgt_146",qt="_footerLogo_kgfgt_160",j={container:Tt,header:Wt,logoWrapper:Dt,logo:Pt,closeButton:Ht,content:Et,iconWrapper:Vt,errorIcon:At,title:Rt,description:zt,retryButton:Ot,footer:Ft,poweredBy:Ut,footerLogo:qt},Zt=({errorType:s,message:t,onRetry:n,onClose:r})=>{const u=()=>{switch(s){case"not_found":return{title:"Chat Not Found",description:t||"This chat widget is not configured correctly. Please check the embed ID.",icon:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",className:j.errorIcon,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M12 7V13M12 16V16.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};case"network":return{title:"Connection Error",description:t||"Unable to connect to the chat service. Please check your internet connection.",icon:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",className:j.errorIcon,children:[e.jsx("path",{d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M8 15L16 9M8 9L16 15",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};default:return{title:"Something Went Wrong",description:t||"An unexpected error occurred. Please try again later.",icon:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:j.errorIcon,children:e.jsx("path",{d:"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}}},{title:g,description:c,icon:m}=u();return e.jsxs("div",{className:j.container,children:[e.jsxs("div",{className:j.header,children:[e.jsx("div",{className:j.logoWrapper,children:e.jsx(O,{className:j.logo,color:"white",cutoutColor:"var(--bb-primary-color)"})}),r&&e.jsx("button",{className:j.closeButton,onClick:r,"aria-label":"Close",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})})]}),e.jsxs("div",{className:j.content,children:[e.jsx("div",{className:j.iconWrapper,children:m}),e.jsx("h2",{className:j.title,children:g}),e.jsx("p",{className:j.description,children:c}),n&&e.jsx("button",{className:j.retryButton,onClick:n,type:"button",children:"Try Again"})]}),e.jsx("div",{className:j.footer,children:e.jsxs("a",{href:"https://brainbaselabs.com",target:"_blank",rel:"noopener noreferrer",className:j.poweredBy,children:["Powered by"," ",e.jsx(O,{className:j.footerLogo,color:"var(--bb-text-tertiary)",cutoutColor:"var(--bb-surface-bg)"}),e.jsx("span",{children:"Brainbase Labs"})]})})]})},Kt="_widget_1ehud_1",Gt="_inline_1ehud_25",H={widget:Kt,"bottom-right":"_bottom-right_1ehud_10","bottom-left":"_bottom-left_1ehud_17",inline:Gt},Jt="https://whatsapp-based-server.onrender.com",Yt=({embedId:s,apiBaseUrl:t=Jt,mockMode:n=!1,mockResponses:r,position:u="bottom-right",defaultOpen:g=!1,primaryColor:c,agentName:m,welcomeMessage:l,showBranding:o,className:x,onSessionStart:L,onSessionEnd:E,onMessage:T,onError:W})=>{const[V,b]=i.useState(g),[_,$]=i.useState(null),[F,U]=i.useState(!0),[D,S]=i.useState(null),[J,q]=i.useState(),A=i.useMemo(()=>n?re({primaryColor:c,agentName:m,welcomeMessage:l},r):ne(t),[n,c,m,l,r,t]),p=i.useCallback(async()=>{U(!0),S(null),q(void 0);try{const C=await A.getDeploymentConfig(s);$({...C,primaryColor:c??C.primaryColor,agentName:m??C.agentName,welcomeMessage:l??C.welcomeMessage,styling:{...C.styling??{},...o!==void 0?{showBranding:o}:{}}})}catch(C){const P=C instanceof Error?C:new Error("Failed to load config");P.message.includes("404")?(S("not_found"),q("The chat widget with this embed ID was not found.")):P.message.includes("Failed to fetch")||P.message.includes("network")?S("network"):S("unknown"),n&&($({embedId:s,deploymentId:"mock-deployment",workerId:"mock-worker",flowId:"mock-flow",primaryColor:c??"#1a1a2e",agentName:m??"AI Assistant",styling:o!==void 0?{showBranding:o}:void 0}),S(null)),W==null||W(P)}finally{U(!1)}},[s,n,A,c,m,l,W]);i.useEffect(()=>{p()},[p]);const k=i.useMemo(()=>_||{embedId:s,deploymentId:"",workerId:"",flowId:"",primaryColor:c,agentName:m,welcomeMessage:l,styling:o!==void 0?{showBranding:o}:void 0},[_,s,c,m,l,o]),y=oe({config:k,apiClient:A,mockMode:n,onSessionStart:L,onSessionEnd:E,onMessage:T,onError:W}),d=i.useMemo(()=>({"--bb-primary-color":(_==null?void 0:_.primaryColor)??c??"#1a1a2e"}),[_==null?void 0:_.primaryColor,c]),h=()=>{y.endSession(),y.startNewSession()},a=()=>{b(!1)},f=()=>{p()},N=u==="inline";return F?null:D&&!n?!N&&!V?e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:e.jsx(Q,{onClick:()=>b(!0),agentName:m})}):e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:e.jsx(Zt,{errorType:D,message:J,onRetry:f,onClose:N?void 0:a})}):e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:V||N?e.jsx(ge,{config:k,messages:y.messages,toolCalls:y.toolCalls,isLoading:y.isLoading,onSendMessage:y.sendMessage,onClose:N?void 0:a,onNewChat:h}):e.jsx(Q,{onClick:()=>b(!0),agentName:_==null?void 0:_.agentName,agentLogoUrl:_==null?void 0:_.agentLogoUrl})})};function Xt(){if(typeof crypto<"u"&&crypto.randomUUID)return`bb-${crypto.randomUUID()}`;const s=Date.now().toString(36),t=Math.random().toString(36).substring(2,15),n=Math.random().toString(36).substring(2,15);return`bb-${s}-${t}${n}`}exports.ChatContainer=ge;exports.ChatHeader=ae;exports.ChatToggleButton=Q;exports.ChatWidget=Yt;exports.Message=ce;exports.MessageInput=ue;exports.MessageList=de;exports.ToolCallDisplay=ie;exports.TypingIndicator=le;exports.clearSession=X;exports.createAPIClient=ne;exports.createMockAPIClient=re;exports.generateSessionId=Xt;exports.getStoredSession=se;exports.storeSession=Y;exports.useChat=oe;
|
|
6
|
+
`))if(te.startsWith("data: "))try{const me=JSON.parse(te.slice(6));D(me,k,j)}catch{}}}}finally{d.releaseLock()}},[D]),J=i.useCallback(async p=>{if(!p.trim())return;const k={id:`user-${Date.now()}`,role:"user",content:p,timestamp:Date.now(),status:"sent"};o(a=>[...a,k]),c==null||c(k);const j=`assistant-${Date.now()}`,d={id:j,role:"assistant",content:"",timestamp:Date.now(),status:"streaming"};o(a=>[...a,d]),T(!0),V(null);const h=a=>{_(a)};try{if(r){const a=n.sendMessage(p);for await(const f of a)D(f,j,h)}else{const a=await n.sendMessage({embedId:t.embedId,message:p,sessionId:b??void 0});await S(a,j,h)}o(a=>a.map(f=>f.id===j&&f.status==="streaming"?{...f,status:"sent"}:f))}catch(a){const f=a instanceof Error?a:new Error("Failed to send message");V(f),m==null||m(f),o(N=>N.map(C=>C.id===j?{...C,status:"error",content:"Failed to get response"}:C))}finally{T(!1)}},[b,n,r,t.embedId,D,S,c,m]),q=i.useCallback(async()=>{if(!b)return;const p={sessionId:b,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:$.current,messages:l,toolCalls:x,status:"completed"};g==null||g(p),X(t.embedId),_(null),o([]),L([])},[b,t,l,x,g]),A=i.useCallback(()=>{o([]),L([])},[]);return{messages:l,toolCalls:x,isLoading:E,error:W,sessionId:b,sendMessage:J,endSession:q,clearMessages:A,startNewSession:U}}const pe="https://whatsapp-based-server.onrender.com";function ne(s=pe){return{async getDeploymentConfig(t){const n=await fetch(`${s}/chat/config/${t}`);if(!n.ok)throw new Error(`Failed to fetch deployment config: ${n.status}`);const r=await n.json();return{embedId:r.embedId,deploymentId:"",workerId:"",flowId:"",welcomeMessage:r.welcomeMessage,agentName:r.agentName,agentLogoUrl:r.agentLogoUrl,primaryColor:r.primaryColor,styling:r.styling}},async sendMessage(t){const n=await fetch(`${s}/chat/message`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({embed_id:t.embedId,message:t.message,session_id:t.sessionId||void 0,metadata:t.metadata})});if(!n.ok){const r=await n.text();throw new Error(`Failed to send message: ${n.status} - ${r}`)}if(!n.body)throw new Error("No response stream available");return n.body}}}const he={embedId:"mock-embed-id",deploymentId:"mock-deployment-id",workerId:"mock-worker-id",flowId:"mock-flow-id",agentName:"AI Assistant",agentLogoUrl:void 0,primaryColor:"#1a1a2e",styling:{}},_e=[{trigger:/hello|hi|hey/i,response:"Hello! I'm a demo AI assistant. How can I help you today?",delay:500},{trigger:/weather/i,response:"I'd check the weather for you, but I'm in mock mode! In production, I could use a weather API.",delay:800,toolCalls:[{name:"get_weather",arguments:{location:"San Francisco"},result:{temperature:72,condition:"sunny"}}]},{trigger:/help|support/i,response:"I'm here to help! You can ask me questions, and I'll do my best to assist you. In production, I'd be connected to your agent with full capabilities.",delay:600},{trigger:/pricing|cost|price/i,response:"For pricing information, I'd typically check our database or connect you with the sales team. This is a mock response demonstrating how I'd handle pricing questions.",delay:700,toolCalls:[{name:"lookup_pricing",arguments:{plan:"all"},result:{plans:[{name:"Starter",price:"$29/mo"},{name:"Pro",price:"$99/mo"}]}}]},{trigger:/.*/,response:"I'm running in mock mode. This is a simulated response to demonstrate the chat UI. In production, I'd be connected to your agent!",delay:1e3}];function R(s){return new Promise(t=>setTimeout(t,s))}function re(s,t){const n={...he,...s},r=t??_e,u=`mock-session-${Date.now()}`;return{async getDeploymentConfig(g){return await R(300),n},async*sendMessage(g){yield{type:"session",data:{session_id:u,is_new:!0},timestamp:Date.now()};const c=r.find(o=>typeof o.trigger=="string"?g.toLowerCase().includes(o.trigger.toLowerCase()):o.trigger.test(g))??r[r.length-1];if(await R(c.delay??500),c.toolCalls)for(const o of c.toolCalls)yield{type:"tool_call",data:{function:o.name,args:o.arguments},timestamp:Date.now()},await R(300),yield{type:"tool_call",data:{function:o.name,result:o.result},timestamp:Date.now()},await R(200);const m=c.response.split(" ");let l="";for(const o of m)l+=(l?" ":"")+o,yield{type:"message",data:{content:l,role:"assistant"},timestamp:Date.now()},await R(30+Math.random()*40);yield{type:"done",data:{session_id:u},timestamp:Date.now()}}}}const O=({className:s,color:t="currentColor",cutoutColor:n="var(--bb-primary-color)"})=>e.jsxs("svg",{className:s,viewBox:"0 0 800 800",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",fill:t}),e.jsx("circle",{cx:"400",cy:"400",r:"400",fill:t}),e.jsx("path",{d:"M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",fill:t}),e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",fill:t}),e.jsx("circle",{cx:"400",cy:"400",r:"350",fill:t}),e.jsx("path",{d:"M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",fill:t}),e.jsx("rect",{x:"399.919",y:"209",width:"270",height:"270",rx:"12",transform:"rotate(45 399.919 209)",fill:n})]}),fe="_header_1p6z5_1",xe="_compact_1p6z5_9",be="_headerBackground_1p6z5_20",ye="_headerContent_1p6z5_59",we="_topRow_1p6z5_64",je="_agentInfo_1p6z5_79",Ce="_agentLogo_1p6z5_85",ke="_agentLogoPlaceholder_1p6z5_102",ve="_brainbaseLogo_1p6z5_123",Ie="_agentName_1p6z5_137",Ne="_actions_1p6z5_144",Le="_actionButton_1p6z5_149",$e="_welcomeText_1p6z5_183",Se="_title_1p6z5_202",Be="_subtitle_1p6z5_210",y={header:fe,compact:xe,headerBackground:be,headerContent:ye,topRow:we,agentInfo:je,agentLogo:Ce,agentLogoPlaceholder:ke,brainbaseLogo:ve,agentName:Ie,actions:Ne,actionButton:Le,welcomeText:$e,title:Se,subtitle:Be},ae=({agentName:s="AI Assistant",agentLogoUrl:t,welcomeTitle:n,welcomeSubtitle:r,onClose:u,onNewChatRequest:g,showNewChatButton:c=!1,compact:m=!1})=>{const l=n||"Hello there.",o=r!==void 0?r:n?void 0:"How can we help?";return e.jsxs("div",{className:`${y.header} ${m?y.compact:""}`,children:[e.jsx("div",{className:y.headerBackground}),e.jsxs("div",{className:y.headerContent,children:[e.jsxs("div",{className:y.topRow,children:[e.jsxs("div",{className:y.agentInfo,children:[t?e.jsx("img",{src:t,alt:s,className:y.agentLogo}):e.jsx("div",{className:y.agentLogoPlaceholder,children:e.jsx(O,{className:y.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})}),e.jsx("span",{className:y.agentName,children:s})]}),e.jsxs("div",{className:y.actions,children:[c&&g&&e.jsx("button",{className:y.actionButton,onClick:g,"aria-label":"Start new chat",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M12 5V19M5 12H19",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),u&&e.jsx("button",{className:y.actionButton,onClick:u,"aria-label":"Close chat",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})]}),!m&&e.jsxs("div",{className:y.welcomeText,children:[e.jsx("h1",{className:y.title,children:l}),o&&e.jsx("p",{className:y.subtitle,children:o})]})]})]})},Me="_messageWrapper_c86gj_1",Te="_user_c86gj_19",We="_assistant_c86gj_24",De="_avatar_c86gj_28",Pe="_avatarPlaceholder_c86gj_43",He="_brainbaseLogo_c86gj_53",Ee="_messageBubble_c86gj_58",Ve="_error_c86gj_76",Ae="_content_c86gj_81",Re="_cursor_c86gj_88",ze="_errorIndicator_c86gj_107",v={messageWrapper:Me,user:Te,assistant:We,avatar:De,avatarPlaceholder:Pe,brainbaseLogo:He,messageBubble:Ee,error:Ve,content:Ae,cursor:Re,errorIndicator:ze},ce=({message:s,agentName:t,agentLogoUrl:n})=>{const r=s.role==="user",u=s.status==="streaming",g=s.status==="error";return e.jsxs("div",{className:`${v.messageWrapper} ${r?v.user:v.assistant}`,children:[!r&&e.jsx("div",{className:v.avatar,children:n?e.jsx("img",{src:n,alt:t||"AI"}):e.jsx("div",{className:v.avatarPlaceholder,children:e.jsx(O,{className:v.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})})}),e.jsxs("div",{className:`${v.messageBubble} ${g?v.error:""}`,role:"article","aria-label":`${r?"Your message":`${t||"AI"} says`}`,children:[e.jsxs("div",{className:v.content,children:[s.content,u&&e.jsx("span",{className:v.cursor})]}),g&&e.jsxs("div",{className:v.errorIndicator,children:[e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",children:[e.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"2"}),e.jsx("path",{d:"M12 8V12M12 16H12.01",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})]}),e.jsx("span",{children:"Failed to send"})]})]})]})},Oe="_toolCall_1wby1_1",Fe="_iconWrapper_1wby1_24",Ue="_spinner_1wby1_33",qe="_checkIcon_1wby1_48",Ze="_errorIcon_1wby1_54",Ke="_content_1wby1_60",Ge="_label_1wby1_66",Je="_name_1wby1_73",Ye="_pending_1wby1_78",Xe="_completed_1wby1_82",Qe="_error_1wby1_54",I={toolCall:Oe,iconWrapper:Fe,spinner:Ue,checkIcon:qe,errorIcon:Ze,content:Ke,label:Ge,name:Je,pending:Ye,completed:Xe,error:Qe},ie=({toolCall:s})=>{const t=s.status==="pending"||s.status==="executing",n=s.status==="completed",r=s.status==="error",u=g=>g.replace(/_/g," ").replace(/([A-Z])/g," $1").trim().toLowerCase().replace(/^./,c=>c.toUpperCase());return e.jsxs("div",{className:`${I.toolCall} ${t?I.pending:""} ${n?I.completed:""} ${r?I.error:""}`,children:[e.jsx("div",{className:I.iconWrapper,children:t?e.jsx("div",{className:I.spinner}):n?e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:I.checkIcon,children:e.jsx("path",{d:"M20 6L9 17L4 12",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}):e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:I.errorIcon,children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsxs("div",{className:I.content,children:[e.jsx("span",{className:I.label,children:t?"Running":n?"Completed":"Failed"}),e.jsx("span",{className:I.name,children:u(s.name)})]})]})},et="_wrapper_10rss_2",tt="_avatar_10rss_22",st="_avatarPlaceholder_10rss_37",ot="_brainbaseLogo_10rss_47",nt="_bubble_10rss_52",rt="_dot_10rss_63",B={wrapper:et,avatar:tt,avatarPlaceholder:st,brainbaseLogo:ot,bubble:nt,dot:rt},le=({agentName:s="AI",agentLogoUrl:t})=>e.jsxs("div",{className:B.wrapper,role:"status","aria-label":`${s} is typing`,children:[e.jsx("div",{className:B.avatar,children:t?e.jsx("img",{src:t,alt:s}):e.jsx("div",{className:B.avatarPlaceholder,children:e.jsx(O,{className:B.brainbaseLogo,color:"white",cutoutColor:"var(--bb-primary-color)"})})}),e.jsxs("div",{className:B.bubble,children:[e.jsx("span",{className:B.dot}),e.jsx("span",{className:B.dot}),e.jsx("span",{className:B.dot})]})]}),at="_messageList_241kk_1",ct="_emptyState_241kk_29",it="_emptyIcon_241kk_40",lt="_emptyText_241kk_52",Z={messageList:at,emptyState:ct,emptyIcon:it,emptyText:lt},de=({messages:s,toolCalls:t=[],isLoading:n,agentName:r,agentLogoUrl:u})=>{var l;const g=i.useRef(null),c=i.useRef(null);i.useEffect(()=>{var o;(o=c.current)==null||o.scrollIntoView({behavior:"smooth"})},[s,t,n]);const m=t.filter(o=>o.status==="pending"||o.status==="executing");return e.jsxs("div",{className:Z.messageList,ref:g,role:"log","aria-live":"polite",children:[s.length===0&&!n&&e.jsxs("div",{className:Z.emptyState,children:[e.jsx("div",{className:Z.emptyIcon,children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsx("p",{className:Z.emptyText,children:"Start a conversation"})]}),s.map(o=>e.jsx(ce,{message:o,agentName:r,agentLogoUrl:u},o.id)),m.map(o=>e.jsx(ie,{toolCall:o},o.id)),n&&((l=s[s.length-1])==null?void 0:l.role)==="user"&&e.jsx(le,{agentName:r,agentLogoUrl:u}),e.jsx("div",{ref:c})]})},dt="_inputWrapper_5lgg7_1",ut="_inputContainer_5lgg7_7",gt="_textarea_5lgg7_23",mt="_sendButton_5lgg7_50",pt="_hint_5lgg7_89",z={inputWrapper:dt,inputContainer:ut,textarea:gt,sendButton:mt,hint:pt},ue=({onSend:s,disabled:t=!1,placeholder:n="Send a message..."})=>{const[r,u]=i.useState(""),g=i.useRef(null),c=i.useCallback(()=>{const o=g.current;o&&(o.style.height="auto",o.style.height=`${Math.min(o.scrollHeight,150)}px`)},[]);i.useEffect(()=>{c()},[r,c]);const m=i.useCallback(o=>{o==null||o.preventDefault();const x=r.trim();x&&!t&&(s(x),u(""),g.current&&(g.current.style.height="auto"))},[r,t,s]),l=i.useCallback(o=>{o.key==="Enter"&&!o.shiftKey&&(o.preventDefault(),m())},[m]);return e.jsxs("form",{className:z.inputWrapper,onSubmit:m,children:[e.jsxs("div",{className:z.inputContainer,children:[e.jsx("textarea",{ref:g,className:z.textarea,value:r,onChange:o=>u(o.target.value),onKeyDown:l,placeholder:n,disabled:t,rows:1,"aria-label":"Message input"}),e.jsx("button",{type:"submit",className:z.sendButton,disabled:t||!r.trim(),"aria-label":"Send message",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M22 2L11 13M22 2L15 22L11 13M22 2L2 9L11 13",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]}),e.jsxs("div",{className:z.hint,children:["Press ",e.jsx("kbd",{children:"Enter"})," to send, ",e.jsx("kbd",{children:"Shift + Enter"})," for new line"]})]})},ht="_poweredBy_9jh5q_1",_t="_logo_9jh5q_20",ft="_poweredText_9jh5q_24",xt="_text_9jh5q_36",K={poweredBy:ht,logo:_t,poweredText:ft,text:xt},bt=({className:s})=>e.jsxs("svg",{className:s,viewBox:"0 0 800 800",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H788C794.627 400 800 405.373 800 412V740C800 773.137 773.137 800 740 800H412C405.373 800 400 794.627 400 788V412Z",fill:"currentColor"}),e.jsx("circle",{cx:"400",cy:"400",r:"400",fill:"currentColor"}),e.jsx("path",{d:"M0 60C0 26.8629 26.8629 0 60 0H397.614C398.932 0 400 1.06811 400 2.38569V2.38569C400 221.982 221.982 400 2.38569 400V400C1.06811 400 0 398.932 0 397.614V60Z",fill:"currentColor"}),e.jsx("path",{d:"M400 412C400 405.373 405.373 400 412 400H738C744.627 400 750 405.373 750 412V725C750 738.807 738.807 750 725 750H412C405.373 750 400 744.627 400 738V412Z",fill:"currentColor"}),e.jsx("circle",{cx:"400",cy:"400",r:"350",fill:"currentColor"}),e.jsx("path",{d:"M50 75C50 61.1929 61.1929 50 75 50H388C394.627 50 400 55.3726 400 62V388C400 394.627 394.627 400 388 400H62C55.3726 400 50 394.627 50 388V75Z",fill:"currentColor"}),e.jsx("rect",{x:"399.919",y:"209",width:"270",height:"270",rx:"12",transform:"rotate(45 399.919 209)",fill:"var(--bb-surface-bg, #ffffff)"})]}),yt=({showBranding:s=!0})=>s?e.jsxs("a",{href:"https://brainbaselabs.com/",target:"_blank",rel:"noopener noreferrer",className:K.poweredBy,"aria-label":"Powered by Brainbase Labs",children:[e.jsx("span",{className:K.poweredText,children:"Powered by"}),e.jsx(bt,{className:K.logo}),e.jsx("span",{className:K.text,children:"Brainbase Labs"})]}):null,wt="_container_m2o9l_1",jt="_body_m2o9l_26",Ct="_confirmationOverlay_m2o9l_35",kt="_confirmationDialog_m2o9l_56",vt="_confirmationText_m2o9l_78",It="_confirmationButtons_m2o9l_86",Nt="_cancelButton_m2o9l_91",Lt="_confirmButton_m2o9l_92",M={container:wt,body:jt,confirmationOverlay:Ct,confirmationDialog:kt,confirmationText:vt,confirmationButtons:It,cancelButton:Nt,confirmButton:Lt},ge=({config:s,messages:t,toolCalls:n=[],isLoading:r,onSendMessage:u,onClose:g,onNewChat:c})=>{var T;const[m,l]=i.useState(!1),o=t.length>0,x=()=>{l(!0)},L=()=>{l(!1),c==null||c()},E=()=>{l(!1)};return e.jsxs("div",{className:M.container,role:"dialog","aria-label":"Chat window",children:[e.jsx(ae,{agentName:s.agentName,agentLogoUrl:s.agentLogoUrl,welcomeTitle:s.welcomeMessage||"Hello there.",welcomeSubtitle:s.welcomeMessage?void 0:"How can we help?",onClose:g,onNewChatRequest:x,showNewChatButton:o,compact:o}),e.jsxs("div",{className:M.body,children:[e.jsx(de,{messages:t,toolCalls:n,isLoading:r,agentName:s.agentName,agentLogoUrl:s.agentLogoUrl}),e.jsx(ue,{onSend:u,disabled:r,placeholder:"Ask a question..."})]}),e.jsx(yt,{showBranding:((T=s.styling)==null?void 0:T.showBranding)??!0}),m&&e.jsx("div",{className:M.confirmationOverlay,children:e.jsxs("div",{className:M.confirmationDialog,children:[e.jsx("p",{className:M.confirmationText,children:"End current chat and start a new conversation?"}),e.jsxs("div",{className:M.confirmationButtons,children:[e.jsx("button",{className:M.cancelButton,onClick:E,type:"button",children:"Cancel"}),e.jsx("button",{className:M.confirmButton,onClick:L,type:"button",children:"End Chat"})]})]})})]})},$t="_toggleButton_11dqz_1",St="_icon_11dqz_31",Bt="_agentLogo_11dqz_36",Mt="_unreadBadge_11dqz_43",G={toggleButton:$t,icon:St,agentLogo:Bt,unreadBadge:Mt},Q=({onClick:s,agentLogoUrl:t,unreadCount:n=0})=>e.jsxs("button",{className:G.toggleButton,onClick:s,"aria-label":"Open chat",type:"button",children:[t?e.jsx("img",{src:t,alt:"",className:G.agentLogo}):e.jsx("svg",{className:G.icon,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{d:"M8 12H8.01M12 12H12.01M16 12H16.01M21 12C21 16.4183 16.9706 20 12 20C10.4607 20 9.01172 19.6565 7.74467 19.0511L3 20L4.39499 16.28C3.51156 15.0423 3 13.5743 3 12C3 7.58172 7.02944 4 12 4C16.9706 4 21 7.58172 21 12Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})}),n>0&&e.jsx("span",{className:G.unreadBadge,children:n>9?"9+":n})]}),Tt="_container_kgfgt_1",Wt="_header_kgfgt_25",Dt="_logoWrapper_kgfgt_38",Pt="_logo_kgfgt_38",Ht="_closeButton_kgfgt_51",Et="_content_kgfgt_74",Vt="_iconWrapper_kgfgt_84",At="_errorIcon_kgfgt_95",Rt="_title_kgfgt_101",zt="_description_kgfgt_109",Ot="_retryButton_kgfgt_117",Ft="_footer_kgfgt_139",Ut="_poweredBy_kgfgt_146",qt="_footerLogo_kgfgt_160",w={container:Tt,header:Wt,logoWrapper:Dt,logo:Pt,closeButton:Ht,content:Et,iconWrapper:Vt,errorIcon:At,title:Rt,description:zt,retryButton:Ot,footer:Ft,poweredBy:Ut,footerLogo:qt},Zt=({errorType:s,message:t,onRetry:n,onClose:r})=>{const u=()=>{switch(s){case"not_found":return{title:"Chat Not Found",description:t||"This chat widget is not configured correctly. Please check the embed ID.",icon:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",className:w.errorIcon,children:[e.jsx("circle",{cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M12 7V13M12 16V16.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};case"network":return{title:"Connection Error",description:t||"Unable to connect to the chat service. Please check your internet connection.",icon:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",className:w.errorIcon,children:[e.jsx("path",{d:"M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",stroke:"currentColor",strokeWidth:"1.5"}),e.jsx("path",{d:"M8 15L16 9M8 9L16 15",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})]})};default:return{title:"Something Went Wrong",description:t||"An unexpected error occurred. Please try again later.",icon:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:w.errorIcon,children:e.jsx("path",{d:"M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round"})})}}},{title:g,description:c,icon:m}=u();return e.jsxs("div",{className:w.container,children:[e.jsxs("div",{className:w.header,children:[e.jsx("div",{className:w.logoWrapper,children:e.jsx(O,{className:w.logo,color:"white",cutoutColor:"var(--bb-primary-color)"})}),r&&e.jsx("button",{className:w.closeButton,onClick:r,"aria-label":"Close",type:"button",children:e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})})]}),e.jsxs("div",{className:w.content,children:[e.jsx("div",{className:w.iconWrapper,children:m}),e.jsx("h2",{className:w.title,children:g}),e.jsx("p",{className:w.description,children:c}),n&&e.jsx("button",{className:w.retryButton,onClick:n,type:"button",children:"Try Again"})]}),e.jsx("div",{className:w.footer,children:e.jsxs("a",{href:"https://brainbaselabs.com",target:"_blank",rel:"noopener noreferrer",className:w.poweredBy,children:["Powered by"," ",e.jsx(O,{className:w.footerLogo,color:"var(--bb-text-tertiary)",cutoutColor:"var(--bb-surface-bg)"}),e.jsx("span",{children:"Brainbase Labs"})]})})]})},Kt="_widget_1ehud_1",Gt="_inline_1ehud_25",H={widget:Kt,"bottom-right":"_bottom-right_1ehud_10","bottom-left":"_bottom-left_1ehud_17",inline:Gt},Jt="https://whatsapp-based-server.onrender.com",Yt=({embedId:s,apiBaseUrl:t=Jt,mockMode:n=!1,mockResponses:r,position:u="bottom-right",defaultOpen:g=!1,primaryColor:c,agentName:m,welcomeMessage:l,showBranding:o,className:x,onSessionStart:L,onSessionEnd:E,onMessage:T,onError:W})=>{const[V,b]=i.useState(g),[_,$]=i.useState(null),[F,U]=i.useState(!0),[D,S]=i.useState(null),[J,q]=i.useState(),A=i.useMemo(()=>n?re({primaryColor:c,agentName:m,welcomeMessage:l},r):ne(t),[n,c,m,l,r,t]),p=i.useCallback(async()=>{U(!0),S(null),q(void 0);try{const C=await A.getDeploymentConfig(s);$({...C,primaryColor:c??C.primaryColor,agentName:m??C.agentName,welcomeMessage:l??C.welcomeMessage,styling:{...C.styling??{},...o!==void 0?{showBranding:o}:{}}})}catch(C){const P=C instanceof Error?C:new Error("Failed to load config");P.message.includes("404")?(S("not_found"),q("The chat widget with this embed ID was not found.")):P.message.includes("Failed to fetch")||P.message.includes("network")?S("network"):S("unknown"),n&&($({embedId:s,deploymentId:"mock-deployment",workerId:"mock-worker",flowId:"mock-flow",primaryColor:c??"#1a1a2e",agentName:m??"AI Assistant",styling:o!==void 0?{showBranding:o}:void 0}),S(null)),W==null||W(P)}finally{U(!1)}},[s,n,A,c,m,l,W]);i.useEffect(()=>{p()},[p]);const k=i.useMemo(()=>_||{embedId:s,deploymentId:"",workerId:"",flowId:"",primaryColor:c,agentName:m,welcomeMessage:l,styling:o!==void 0?{showBranding:o}:void 0},[_,s,c,m,l,o]),j=oe({config:k,apiClient:A,mockMode:n,onSessionStart:L,onSessionEnd:E,onMessage:T,onError:W}),d=i.useMemo(()=>({"--bb-primary-color":(_==null?void 0:_.primaryColor)??c??"#1a1a2e"}),[_==null?void 0:_.primaryColor,c]),h=()=>{j.endSession(),j.startNewSession()},a=()=>{b(!1)},f=()=>{p()},N=u==="inline";return F?null:D&&!n?!N&&!V?e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:e.jsx(Q,{onClick:()=>b(!0),agentName:m})}):e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:e.jsx(Zt,{errorType:D,message:J,onRetry:f,onClose:N?void 0:a})}):e.jsx("div",{className:`${H.widget} ${H[u]} ${x??""}`,style:d,children:V||N?e.jsx(ge,{config:k,messages:j.messages,isLoading:j.isLoading,onSendMessage:j.sendMessage,onClose:N?void 0:a,onNewChat:h}):e.jsx(Q,{onClick:()=>b(!0),agentName:_==null?void 0:_.agentName,agentLogoUrl:_==null?void 0:_.agentLogoUrl})})};function Xt(){if(typeof crypto<"u"&&crypto.randomUUID)return`bb-${crypto.randomUUID()}`;const s=Date.now().toString(36),t=Math.random().toString(36).substring(2,15),n=Math.random().toString(36).substring(2,15);return`bb-${s}-${t}${n}`}exports.ChatContainer=ge;exports.ChatHeader=ae;exports.ChatToggleButton=Q;exports.ChatWidget=Yt;exports.Message=ce;exports.MessageInput=ue;exports.MessageList=de;exports.ToolCallDisplay=ie;exports.TypingIndicator=le;exports.clearSession=X;exports.createAPIClient=ne;exports.createMockAPIClient=re;exports.generateSessionId=Xt;exports.getStoredSession=se;exports.storeSession=Y;exports.useChat=oe;
|
package/dist/index.d.ts
CHANGED
|
@@ -10,7 +10,7 @@ export declare const ChatContainer: default_2.FC<ChatContainerProps>;
|
|
|
10
10
|
declare interface ChatContainerProps {
|
|
11
11
|
config: DeploymentConfig;
|
|
12
12
|
messages: MessageType[];
|
|
13
|
-
toolCalls
|
|
13
|
+
toolCalls?: ToolCall[];
|
|
14
14
|
isLoading: boolean;
|
|
15
15
|
onSendMessage: (message: string) => void;
|
|
16
16
|
onClose?: () => void;
|
|
@@ -115,7 +115,7 @@ export declare const MessageList: default_2.FC<MessageListProps>;
|
|
|
115
115
|
|
|
116
116
|
declare interface MessageListProps {
|
|
117
117
|
messages: MessageType[];
|
|
118
|
-
toolCalls
|
|
118
|
+
toolCalls?: ToolCall[];
|
|
119
119
|
isLoading: boolean;
|
|
120
120
|
agentName?: string;
|
|
121
121
|
agentLogoUrl?: string;
|
package/dist/index.js
CHANGED
|
@@ -52,11 +52,11 @@ function le(o) {
|
|
|
52
52
|
});
|
|
53
53
|
}, [y, l, b, t]);
|
|
54
54
|
const G = x(async () => (S.current = Date.now(), _(null), n([]), M([]), re(t.embedId), ""), [t.embedId]), E = x(
|
|
55
|
-
(p, I,
|
|
55
|
+
(p, I, k) => {
|
|
56
56
|
switch (p.type) {
|
|
57
57
|
case "session": {
|
|
58
58
|
const d = p.data;
|
|
59
|
-
d.session_id && (
|
|
59
|
+
d.session_id && (k(d.session_id), d.is_new && (S.current = Date.now(), u == null || u(d.session_id)));
|
|
60
60
|
break;
|
|
61
61
|
}
|
|
62
62
|
case "message": {
|
|
@@ -133,7 +133,7 @@ function le(o) {
|
|
|
133
133
|
},
|
|
134
134
|
[t, y, l, b, u]
|
|
135
135
|
), T = x(
|
|
136
|
-
async (p, I,
|
|
136
|
+
async (p, I, k) => {
|
|
137
137
|
const d = p.getReader(), h = new TextDecoder();
|
|
138
138
|
let a = "";
|
|
139
139
|
try {
|
|
@@ -152,7 +152,7 @@ function le(o) {
|
|
|
152
152
|
if (ne.startsWith("data: "))
|
|
153
153
|
try {
|
|
154
154
|
const ce = JSON.parse(ne.slice(6));
|
|
155
|
-
E(ce, I,
|
|
155
|
+
E(ce, I, k);
|
|
156
156
|
} catch {
|
|
157
157
|
}
|
|
158
158
|
}
|
|
@@ -173,8 +173,8 @@ function le(o) {
|
|
|
173
173
|
status: "sent"
|
|
174
174
|
};
|
|
175
175
|
n((a) => [...a, I]), c == null || c(I);
|
|
176
|
-
const
|
|
177
|
-
id:
|
|
176
|
+
const k = `assistant-${Date.now()}`, d = {
|
|
177
|
+
id: k,
|
|
178
178
|
role: "assistant",
|
|
179
179
|
content: "",
|
|
180
180
|
timestamp: Date.now(),
|
|
@@ -188,25 +188,25 @@ function le(o) {
|
|
|
188
188
|
if (r) {
|
|
189
189
|
const a = s.sendMessage(p);
|
|
190
190
|
for await (const f of a)
|
|
191
|
-
E(f,
|
|
191
|
+
E(f, k, h);
|
|
192
192
|
} else {
|
|
193
193
|
const a = await s.sendMessage({
|
|
194
194
|
embedId: t.embedId,
|
|
195
195
|
message: p,
|
|
196
196
|
sessionId: y ?? void 0
|
|
197
197
|
});
|
|
198
|
-
await T(a,
|
|
198
|
+
await T(a, k, h);
|
|
199
199
|
}
|
|
200
200
|
n(
|
|
201
201
|
(a) => a.map(
|
|
202
|
-
(f) => f.id ===
|
|
202
|
+
(f) => f.id === k && f.status === "streaming" ? { ...f, status: "sent" } : f
|
|
203
203
|
)
|
|
204
204
|
);
|
|
205
205
|
} catch (a) {
|
|
206
206
|
const f = a instanceof Error ? a : new Error("Failed to send message");
|
|
207
207
|
z(f), g == null || g(f), n(
|
|
208
208
|
(B) => B.map(
|
|
209
|
-
(v) => v.id ===
|
|
209
|
+
(v) => v.id === k ? { ...v, status: "error", content: "Failed to get response" } : v
|
|
210
210
|
)
|
|
211
211
|
);
|
|
212
212
|
} finally {
|
|
@@ -463,7 +463,7 @@ const q = ({
|
|
|
463
463
|
)
|
|
464
464
|
]
|
|
465
465
|
}
|
|
466
|
-
), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", be = "_headerContent_1p6z5_59", ye = "_topRow_1p6z5_64", we = "_agentInfo_1p6z5_79", Ce = "_agentLogo_1p6z5_85", ke = "_agentLogoPlaceholder_1p6z5_102", ve = "_brainbaseLogo_1p6z5_123", Ie = "_agentName_1p6z5_137", Ne = "_actions_1p6z5_144", Le = "_actionButton_1p6z5_149", $e = "_welcomeText_1p6z5_183", Be = "_title_1p6z5_202", xe = "_subtitle_1p6z5_210",
|
|
466
|
+
), he = "_header_1p6z5_1", _e = "_compact_1p6z5_9", fe = "_headerBackground_1p6z5_20", be = "_headerContent_1p6z5_59", ye = "_topRow_1p6z5_64", we = "_agentInfo_1p6z5_79", Ce = "_agentLogo_1p6z5_85", ke = "_agentLogoPlaceholder_1p6z5_102", ve = "_brainbaseLogo_1p6z5_123", Ie = "_agentName_1p6z5_137", Ne = "_actions_1p6z5_144", Le = "_actionButton_1p6z5_149", $e = "_welcomeText_1p6z5_183", Be = "_title_1p6z5_202", xe = "_subtitle_1p6z5_210", w = {
|
|
467
467
|
header: he,
|
|
468
468
|
compact: _e,
|
|
469
469
|
headerBackground: fe,
|
|
@@ -490,33 +490,33 @@ const q = ({
|
|
|
490
490
|
compact: g = !1
|
|
491
491
|
}) => {
|
|
492
492
|
const l = s || "Hello there.", n = r !== void 0 ? r : s ? void 0 : "How can we help?";
|
|
493
|
-
return /* @__PURE__ */ i("div", { className: `${
|
|
494
|
-
/* @__PURE__ */ e("div", { className:
|
|
495
|
-
/* @__PURE__ */ i("div", { className:
|
|
496
|
-
/* @__PURE__ */ i("div", { className:
|
|
497
|
-
/* @__PURE__ */ i("div", { className:
|
|
493
|
+
return /* @__PURE__ */ i("div", { className: `${w.header} ${g ? w.compact : ""}`, children: [
|
|
494
|
+
/* @__PURE__ */ e("div", { className: w.headerBackground }),
|
|
495
|
+
/* @__PURE__ */ i("div", { className: w.headerContent, children: [
|
|
496
|
+
/* @__PURE__ */ i("div", { className: w.topRow, children: [
|
|
497
|
+
/* @__PURE__ */ i("div", { className: w.agentInfo, children: [
|
|
498
498
|
t ? /* @__PURE__ */ e(
|
|
499
499
|
"img",
|
|
500
500
|
{
|
|
501
501
|
src: t,
|
|
502
502
|
alt: o,
|
|
503
|
-
className:
|
|
503
|
+
className: w.agentLogo
|
|
504
504
|
}
|
|
505
|
-
) : /* @__PURE__ */ e("div", { className:
|
|
505
|
+
) : /* @__PURE__ */ e("div", { className: w.agentLogoPlaceholder, children: /* @__PURE__ */ e(
|
|
506
506
|
q,
|
|
507
507
|
{
|
|
508
|
-
className:
|
|
508
|
+
className: w.brainbaseLogo,
|
|
509
509
|
color: "white",
|
|
510
510
|
cutoutColor: "var(--bb-primary-color)"
|
|
511
511
|
}
|
|
512
512
|
) }),
|
|
513
|
-
/* @__PURE__ */ e("span", { className:
|
|
513
|
+
/* @__PURE__ */ e("span", { className: w.agentName, children: o })
|
|
514
514
|
] }),
|
|
515
|
-
/* @__PURE__ */ i("div", { className:
|
|
515
|
+
/* @__PURE__ */ i("div", { className: w.actions, children: [
|
|
516
516
|
c && m && /* @__PURE__ */ e(
|
|
517
517
|
"button",
|
|
518
518
|
{
|
|
519
|
-
className:
|
|
519
|
+
className: w.actionButton,
|
|
520
520
|
onClick: m,
|
|
521
521
|
"aria-label": "Start new chat",
|
|
522
522
|
type: "button",
|
|
@@ -535,7 +535,7 @@ const q = ({
|
|
|
535
535
|
u && /* @__PURE__ */ e(
|
|
536
536
|
"button",
|
|
537
537
|
{
|
|
538
|
-
className:
|
|
538
|
+
className: w.actionButton,
|
|
539
539
|
onClick: u,
|
|
540
540
|
"aria-label": "Close chat",
|
|
541
541
|
type: "button",
|
|
@@ -553,9 +553,9 @@ const q = ({
|
|
|
553
553
|
)
|
|
554
554
|
] })
|
|
555
555
|
] }),
|
|
556
|
-
!g && /* @__PURE__ */ i("div", { className:
|
|
557
|
-
/* @__PURE__ */ e("h1", { className:
|
|
558
|
-
n && /* @__PURE__ */ e("p", { className:
|
|
556
|
+
!g && /* @__PURE__ */ i("div", { className: w.welcomeText, children: [
|
|
557
|
+
/* @__PURE__ */ e("h1", { className: w.title, children: l }),
|
|
558
|
+
n && /* @__PURE__ */ e("p", { className: w.subtitle, children: n })
|
|
559
559
|
] })
|
|
560
560
|
] })
|
|
561
561
|
] });
|
|
@@ -690,7 +690,7 @@ const q = ({
|
|
|
690
690
|
emptyText: ut
|
|
691
691
|
}, mt = ({
|
|
692
692
|
messages: o,
|
|
693
|
-
toolCalls: t,
|
|
693
|
+
toolCalls: t = [],
|
|
694
694
|
isLoading: s,
|
|
695
695
|
agentName: r,
|
|
696
696
|
agentLogoUrl: u
|
|
@@ -889,7 +889,7 @@ const q = ({
|
|
|
889
889
|
}, Wt = ({
|
|
890
890
|
config: o,
|
|
891
891
|
messages: t,
|
|
892
|
-
toolCalls: s,
|
|
892
|
+
toolCalls: s = [],
|
|
893
893
|
isLoading: r,
|
|
894
894
|
onSendMessage: u,
|
|
895
895
|
onClose: m,
|
|
@@ -1001,7 +1001,7 @@ const q = ({
|
|
|
1001
1001
|
s > 0 && /* @__PURE__ */ e("span", { className: Q.unreadBadge, children: s > 9 ? "9+" : s })
|
|
1002
1002
|
]
|
|
1003
1003
|
}
|
|
1004
|
-
), jt = "_container_kgfgt_1", Vt = "_header_kgfgt_25", At = "_logoWrapper_kgfgt_38", zt = "_logo_kgfgt_38", Ft = "_closeButton_kgfgt_51", Ot = "_content_kgfgt_74", Rt = "_iconWrapper_kgfgt_84", Ut = "_errorIcon_kgfgt_95", Zt = "_title_kgfgt_101", qt = "_description_kgfgt_109", Kt = "_retryButton_kgfgt_117", Gt = "_footer_kgfgt_139", Jt = "_poweredBy_kgfgt_146", Yt = "_footerLogo_kgfgt_160",
|
|
1004
|
+
), jt = "_container_kgfgt_1", Vt = "_header_kgfgt_25", At = "_logoWrapper_kgfgt_38", zt = "_logo_kgfgt_38", Ft = "_closeButton_kgfgt_51", Ot = "_content_kgfgt_74", Rt = "_iconWrapper_kgfgt_84", Ut = "_errorIcon_kgfgt_95", Zt = "_title_kgfgt_101", qt = "_description_kgfgt_109", Kt = "_retryButton_kgfgt_117", Gt = "_footer_kgfgt_139", Jt = "_poweredBy_kgfgt_146", Yt = "_footerLogo_kgfgt_160", C = {
|
|
1005
1005
|
container: jt,
|
|
1006
1006
|
header: Vt,
|
|
1007
1007
|
logoWrapper: At,
|
|
@@ -1028,7 +1028,7 @@ const q = ({
|
|
|
1028
1028
|
return {
|
|
1029
1029
|
title: "Chat Not Found",
|
|
1030
1030
|
description: t || "This chat widget is not configured correctly. Please check the embed ID.",
|
|
1031
|
-
icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className:
|
|
1031
|
+
icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: C.errorIcon, children: [
|
|
1032
1032
|
/* @__PURE__ */ e(
|
|
1033
1033
|
"circle",
|
|
1034
1034
|
{
|
|
@@ -1054,7 +1054,7 @@ const q = ({
|
|
|
1054
1054
|
return {
|
|
1055
1055
|
title: "Connection Error",
|
|
1056
1056
|
description: t || "Unable to connect to the chat service. Please check your internet connection.",
|
|
1057
|
-
icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className:
|
|
1057
|
+
icon: /* @__PURE__ */ i("svg", { viewBox: "0 0 24 24", fill: "none", className: C.errorIcon, children: [
|
|
1058
1058
|
/* @__PURE__ */ e(
|
|
1059
1059
|
"path",
|
|
1060
1060
|
{
|
|
@@ -1078,7 +1078,7 @@ const q = ({
|
|
|
1078
1078
|
return {
|
|
1079
1079
|
title: "Something Went Wrong",
|
|
1080
1080
|
description: t || "An unexpected error occurred. Please try again later.",
|
|
1081
|
-
icon: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className:
|
|
1081
|
+
icon: /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", fill: "none", className: C.errorIcon, children: /* @__PURE__ */ e(
|
|
1082
1082
|
"path",
|
|
1083
1083
|
{
|
|
1084
1084
|
d: "M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z",
|
|
@@ -1090,12 +1090,12 @@ const q = ({
|
|
|
1090
1090
|
};
|
|
1091
1091
|
}
|
|
1092
1092
|
}, { title: m, description: c, icon: g } = u();
|
|
1093
|
-
return /* @__PURE__ */ i("div", { className:
|
|
1094
|
-
/* @__PURE__ */ i("div", { className:
|
|
1095
|
-
/* @__PURE__ */ e("div", { className:
|
|
1093
|
+
return /* @__PURE__ */ i("div", { className: C.container, children: [
|
|
1094
|
+
/* @__PURE__ */ i("div", { className: C.header, children: [
|
|
1095
|
+
/* @__PURE__ */ e("div", { className: C.logoWrapper, children: /* @__PURE__ */ e(
|
|
1096
1096
|
q,
|
|
1097
1097
|
{
|
|
1098
|
-
className:
|
|
1098
|
+
className: C.logo,
|
|
1099
1099
|
color: "white",
|
|
1100
1100
|
cutoutColor: "var(--bb-primary-color)"
|
|
1101
1101
|
}
|
|
@@ -1103,7 +1103,7 @@ const q = ({
|
|
|
1103
1103
|
r && /* @__PURE__ */ e(
|
|
1104
1104
|
"button",
|
|
1105
1105
|
{
|
|
1106
|
-
className:
|
|
1106
|
+
className: C.closeButton,
|
|
1107
1107
|
onClick: r,
|
|
1108
1108
|
"aria-label": "Close",
|
|
1109
1109
|
type: "button",
|
|
@@ -1119,26 +1119,26 @@ const q = ({
|
|
|
1119
1119
|
}
|
|
1120
1120
|
)
|
|
1121
1121
|
] }),
|
|
1122
|
-
/* @__PURE__ */ i("div", { className:
|
|
1123
|
-
/* @__PURE__ */ e("div", { className:
|
|
1124
|
-
/* @__PURE__ */ e("h2", { className:
|
|
1125
|
-
/* @__PURE__ */ e("p", { className:
|
|
1126
|
-
s && /* @__PURE__ */ e("button", { className:
|
|
1122
|
+
/* @__PURE__ */ i("div", { className: C.content, children: [
|
|
1123
|
+
/* @__PURE__ */ e("div", { className: C.iconWrapper, children: g }),
|
|
1124
|
+
/* @__PURE__ */ e("h2", { className: C.title, children: m }),
|
|
1125
|
+
/* @__PURE__ */ e("p", { className: C.description, children: c }),
|
|
1126
|
+
s && /* @__PURE__ */ e("button", { className: C.retryButton, onClick: s, type: "button", children: "Try Again" })
|
|
1127
1127
|
] }),
|
|
1128
|
-
/* @__PURE__ */ e("div", { className:
|
|
1128
|
+
/* @__PURE__ */ e("div", { className: C.footer, children: /* @__PURE__ */ i(
|
|
1129
1129
|
"a",
|
|
1130
1130
|
{
|
|
1131
1131
|
href: "https://brainbaselabs.com",
|
|
1132
1132
|
target: "_blank",
|
|
1133
1133
|
rel: "noopener noreferrer",
|
|
1134
|
-
className:
|
|
1134
|
+
className: C.poweredBy,
|
|
1135
1135
|
children: [
|
|
1136
1136
|
"Powered by",
|
|
1137
1137
|
" ",
|
|
1138
1138
|
/* @__PURE__ */ e(
|
|
1139
1139
|
q,
|
|
1140
1140
|
{
|
|
1141
|
-
className:
|
|
1141
|
+
className: C.footerLogo,
|
|
1142
1142
|
color: "var(--bb-text-tertiary)",
|
|
1143
1143
|
cutoutColor: "var(--bb-surface-bg)"
|
|
1144
1144
|
}
|
|
@@ -1217,7 +1217,7 @@ const q = ({
|
|
|
1217
1217
|
styling: n !== void 0 ? {
|
|
1218
1218
|
showBranding: n
|
|
1219
1219
|
} : void 0
|
|
1220
|
-
}, [_, o, c, g, l, n]),
|
|
1220
|
+
}, [_, o, c, g, l, n]), k = le({
|
|
1221
1221
|
config: I,
|
|
1222
1222
|
apiClient: F,
|
|
1223
1223
|
mockMode: s,
|
|
@@ -1231,7 +1231,7 @@ const q = ({
|
|
|
1231
1231
|
}),
|
|
1232
1232
|
[_ == null ? void 0 : _.primaryColor, c]
|
|
1233
1233
|
), h = () => {
|
|
1234
|
-
|
|
1234
|
+
k.endSession(), k.startNewSession();
|
|
1235
1235
|
}, a = () => {
|
|
1236
1236
|
y(!1);
|
|
1237
1237
|
}, f = () => {
|
|
@@ -1274,10 +1274,9 @@ const q = ({
|
|
|
1274
1274
|
Wt,
|
|
1275
1275
|
{
|
|
1276
1276
|
config: I,
|
|
1277
|
-
messages:
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
onSendMessage: w.sendMessage,
|
|
1277
|
+
messages: k.messages,
|
|
1278
|
+
isLoading: k.isLoading,
|
|
1279
|
+
onSendMessage: k.sendMessage,
|
|
1281
1280
|
onClose: B ? void 0 : a,
|
|
1282
1281
|
onNewChat: h
|
|
1283
1282
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brainbase-labs/chat-widget",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
4
4
|
"description": "A React chat widget for embedding Brainbase Labs AI agents in your applications",
|
|
5
5
|
"author": "Brainbase Labs <hello@brainbaselabs.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -69,12 +69,9 @@
|
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"@eslint/js": "^9.16.0",
|
|
72
|
-
"@storybook/addon-
|
|
73
|
-
"@storybook/
|
|
74
|
-
"@storybook/
|
|
75
|
-
"@storybook/blocks": "^8.4.7",
|
|
76
|
-
"@storybook/react": "^8.4.7",
|
|
77
|
-
"@storybook/react-vite": "^8.4.7",
|
|
72
|
+
"@storybook/addon-links": "^10.1.7",
|
|
73
|
+
"@storybook/react": "^10.1.7",
|
|
74
|
+
"@storybook/react-vite": "^10.1.7",
|
|
78
75
|
"@types/react": "^18.3.12",
|
|
79
76
|
"@types/react-dom": "^18.3.1",
|
|
80
77
|
"@vitejs/plugin-react": "^4.3.4",
|
|
@@ -84,12 +81,14 @@
|
|
|
84
81
|
"globals": "^15.13.0",
|
|
85
82
|
"react": "^18.3.1",
|
|
86
83
|
"react-dom": "^18.3.1",
|
|
87
|
-
"storybook": "^
|
|
84
|
+
"storybook": "^10.1.7",
|
|
88
85
|
"terser": "^5.37.0",
|
|
89
86
|
"typescript": "^5.7.2",
|
|
90
87
|
"typescript-eslint": "^8.16.0",
|
|
91
88
|
"vite": "^6.0.3",
|
|
92
89
|
"vite-plugin-css-injected-by-js": "^3.5.2",
|
|
93
|
-
"vite-plugin-dts": "^4.3.0"
|
|
90
|
+
"vite-plugin-dts": "^4.3.0",
|
|
91
|
+
"eslint-plugin-storybook": "10.1.7",
|
|
92
|
+
"@storybook/addon-docs": "^10.1.7"
|
|
94
93
|
}
|
|
95
94
|
}
|