@brainbase-labs/chat-widget 0.1.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024 Brainbase Labs
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,232 @@
+# @brainbase-labs/chat-widget
+
+A React chat widget for embedding [Brainbase Labs](https://brainbaselabs.com) AI agents in your applications.
+
+[![npm version](https://img.shields.io/npm/v/@brainbase-labs/chat-widget.svg)](https://www.npmjs.com/package/@brainbase-labs/chat-widget)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## Features
+
+- 🚀 **Drop-in React component** - Add AI chat to your app in minutes
+- 🎨 **Fully customizable** - Theme with CSS variables or override styles
+- 📱 **Responsive** - Works on desktop and mobile
+- 🔄 **Session persistence** - Conversations survive page refreshes
+- 🛠️ **Tool call support** - Display function calls and results
+- 🧪 **Mock mode** - Develop UI without a backend connection
+
+## Installation
+
+```bash
+npm install @brainbase-labs/chat-widget
+# or
+yarn add @brainbase-labs/chat-widget
+# or
+pnpm add @brainbase-labs/chat-widget
+```
+
+## Quick Start
+
+```tsx
+import { ChatWidget } from '@brainbase-labs/chat-widget';
+import '@brainbase-labs/chat-widget/styles.css';
+
+function App() {
+  return (
+    <ChatWidget
+      embedId="your-embed-id-here"
+      onSessionEnd={(session) => console.log('Session ended:', session)}
+    />
+  );
+}
+```
+
+## Mock Mode for Development
+
+Test the UI without a backend connection:
+
+```tsx
+import { ChatWidget } from '@brainbase-labs/chat-widget';
+import '@brainbase-labs/chat-widget/styles.css';
+
+function App() {
+  return (
+    <ChatWidget
+      embedId="demo"
+      mockMode={true}
+      defaultOpen={true}
+      agentName="Dev Assistant"
+    />
+  );
+}
+```
+
+## Custom Mock Responses
+
+```tsx
+<ChatWidget
+  embedId="demo"
+  mockMode={true}
+  mockResponses={[
+    {
+      trigger: /order|status/i,
+      response: "Let me look up your order...",
+      toolCalls: [
+        {
+          name: 'lookup_order',
+          arguments: { orderId: '12345' },
+          result: { status: 'shipped' }
+        }
+      ]
+    },
+    {
+      trigger: /.*/,
+      response: "I'm here to help! Ask me anything.",
+      delay: 500
+    }
+  ]}
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `embedId` | `string` | Required | The embed ID from your Brainbase Labs deployment |
+| `apiBaseUrl` | `string` | Production URL | API base URL for the Brainbase Labs API |
+| `mockMode` | `boolean` | `false` | Enable mock mode for UI development |
+| `mockResponses` | `MockResponse[]` | Default responses | Custom mock responses |
+| `position` | `'bottom-right' \| 'bottom-left' \| 'inline'` | `'bottom-right'` | Widget position |
+| `defaultOpen` | `boolean` | `false` | Whether widget starts open |
+| `primaryColor` | `string` | `'#1a1a2e'` | Primary theme color (hex) |
+| `agentName` | `string` | From deployment | Agent display name |
+| `className` | `string` | - | Custom CSS class |
+| `onSessionStart` | `(sessionId: string) => void` | - | Session start callback |
+| `onSessionEnd` | `(session: Session) => void` | - | Session end callback |
+| `onMessage` | `(message: Message) => void` | - | Message callback |
+| `onError` | `(error: Error) => void` | - | Error callback |
+
+## Theming
+
+The widget uses CSS custom properties for theming. Override them in your CSS:
+
+```css
+:root {
+  /* Primary brand color */
+  --bb-primary-color: #1a1a2e;
+  
+  /* Accent color for highlights */
+  --bb-accent-color: #6366f1;
+  
+  /* Background colors */
+  --bb-surface-bg: #ffffff;
+  --bb-surface-secondary: #f8f9fb;
+  
+  /* Text colors */
+  --bb-text-primary: #1a1a2e;
+  --bb-text-secondary: #6b7280;
+  
+  /* Message bubbles */
+  --bb-user-message-bg: var(--bb-primary-color);
+  --bb-user-message-text: #ffffff;
+  --bb-assistant-message-bg: var(--bb-surface-secondary);
+  --bb-assistant-message-text: var(--bb-text-primary);
+  
+  /* Widget dimensions */
+  --bb-widget-width: 400px;
+  --bb-widget-height: 600px;
+}
+```
+
+## Advanced Usage
+
+### Using the Chat Hook
+
+For custom UI implementations:
+
+```tsx
+import { useChat, createMockAPIClient } from '@brainbase-labs/chat-widget';
+
+function CustomChat() {
+  const mockClient = createMockAPIClient();
+  
+  const chat = useChat({
+    config: {
+      embedId: 'demo',
+      deploymentId: 'mock',
+      workerId: 'mock',
+      flowId: 'mock',
+    },
+    apiClient: mockClient,
+    mockMode: true,
+  });
+
+  return (
+    <div>
+      {chat.messages.map(msg => (
+        <div key={msg.id}>{msg.content}</div>
+      ))}
+      <input
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            chat.sendMessage(e.currentTarget.value);
+            e.currentTarget.value = '';
+          }
+        }}
+      />
+    </div>
+  );
+}
+```
+
+### Inline Mode
+
+Embed the chat directly in your page layout instead of as a floating widget:
+
+```tsx
+<ChatWidget
+  embedId="your-embed-id"
+  position="inline"
+  defaultOpen={true}
+/>
+```
+
+## TypeScript
+
+Full TypeScript support with exported types:
+
+```tsx
+import type {
+  ChatWidgetProps,
+  Message,
+  Session,
+  ToolCall,
+  DeploymentConfig,
+} from '@brainbase-labs/chat-widget';
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Run Storybook for development
+npm run storybook
+
+# Build the library
+npm run build
+
+# Type check
+npm run typecheck
+
+# Lint
+npm run lint
+```
+
+## Contributing
+
+Contributions are welcome! Please read our contributing guidelines before submitting a PR.
+
+## License
+
+MIT © [Brainbase Labs](https://brainbaselabs.com)

package/dist/index.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),e=require("react/jsx-runtime"),K="bb-chat-";function X(s){try{const t=sessionStorage.getItem(`${K}${s}`);return t?JSON.parse(t):null}catch{return null}}function U(s,t){try{sessionStorage.setItem(`${K}${s}`,JSON.stringify(t))}catch{}}function q(s){try{sessionStorage.removeItem(`${K}${s}`)}catch{}}function Q(s){const{config:t,apiClient:o,mockMode:a,onSessionStart:h,onSessionEnd:d,onMessage:c,onError:p}=s,[u,n]=i.useState([]),[C,k]=i.useState([]),[$,I]=i.useState(!1),[Z,H]=i.useState(null),[m,S]=i.useState(null),v=i.useRef(0),E=i.useRef(!1);i.useEffect(()=>{if(E.current)return;E.current=!0;const _=X(t.embedId);_&&_.status==="active"&&(S(_.sessionId),n(_.messages),k(_.toolCalls),v.current=_.startTime)},[t.embedId]),i.useEffect(()=>{m&&u.length>0&&U(t.embedId,{sessionId:m,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:v.current,messages:u,toolCalls:C,status:"active"})},[m,u,C,t]);const O=i.useCallback(async()=>(v.current=Date.now(),S(null),n([]),k([]),q(t.embedId),""),[t.embedId]),M=i.useCallback((_,b,w)=>{switch(_.type){case"session":{const g=_.data;g.session_id&&(w(g.session_id),g.is_new&&(v.current=Date.now(),h==null||h(g.session_id)));break}case"message":{const g=_.data;g.content&&n(l=>l.map(r=>r.id===b?{...r,content:g.content,status:"streaming"}:r));break}case"tool_call":{const g=_.data;k(l=>{const r=l.findIndex(x=>x.name===g.function&&x.status==="pending");return r!==-1&&g.result!==void 0?l.map((x,T)=>T===r?{...x,result:g.result,status:"completed"}:x):r===-1?[...l,{id:`tc-${Date.now()}-${Math.random().toString(36).slice(2)}`,name:g.function,arguments:g.args??{},status:"pending",timestamp:Date.now()}]:l}),g.content&&n(l=>l.map(r=>r.id===b?{...r,content:g.content,status:"streaming"}:r));break}case"waiting":break;case"done":{n(g=>g.map(l=>l.id===b?{...l,status:"sent"}:l));break}case"completed":{n(g=>g.map(l=>l.id===b?{...l,status:"sent"}:l)),m&&U(t.embedId,{sessionId:m,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:v.current,messages:u,toolCalls:C,status:"completed"});break}case"error":{const g=_.data;n(l=>l.map(r=>r.id===b?{...r,status:"error",content:g.error??"An error occurred"}:r));break}}},[t,m,u,C,h]),B=i.useCallback(async(_,b,w)=>{const g=_.getReader(),l=new TextDecoder;let r="";try{for(;;){const{done:x,value:T}=await g.read();if(x)break;for(r+=l.decode(T,{stream:!0});r.includes(`
+
+`);){const[V,de]=r.split(`
+
+`,2);r=de;for(const G of V.split(`
+`))if(G.startsWith("data: "))try{const ue=JSON.parse(G.slice(6));M(ue,b,w)}catch{}}}}finally{g.releaseLock()}},[M]),z=i.useCallback(async _=>{if(!_.trim())return;const b={id:`user-${Date.now()}`,role:"user",content:_,timestamp:Date.now(),status:"sent"};n(r=>[...r,b]),c==null||c(b);const w=`assistant-${Date.now()}`,g={id:w,role:"assistant",content:"",timestamp:Date.now(),status:"streaming"};n(r=>[...r,g]),I(!0),H(null);const l=r=>{S(r)};try{if(a){const r=o.sendMessage(_);for await(const x of r)M(x,w,l)}else{const r=await o.sendMessage({embedId:t.embedId,message:_,sessionId:m??void 0});await B(r,w,l)}n(r=>r.map(x=>x.id===w&&x.status==="streaming"?{...x,status:"sent"}:x))}catch(r){const x=r instanceof Error?r:new Error("Failed to send message");H(x),p==null||p(x),n(T=>T.map(V=>V.id===w?{...V,status:"error",content:"Failed to get response"}:V))}finally{I(!1)}},[m,o,a,t.embedId,M,B,c,p]),N=i.useCallback(async()=>{if(!m)return;const _={sessionId:m,deploymentId:t.deploymentId,workerId:t.workerId,flowId:t.flowId,startTime:v.current,messages:u,toolCalls:C,status:"completed"};d==null||d(_),q(t.embedId),S(null),n([]),k([])},[m,t,u,C,d]),F=i.useCallback(()=>{n([]),k([])},[]);return{messages:u,toolCalls:C,isLoading:$,error:Z,sessionId:m,sendMessage:z,endSession:N,clearMessages:F,startNewSession:O}}const me="https://whatsapp-based-server.onrender.com";function ee(s=me){return{async getDeploymentConfig(t){const o=await fetch(`${s}/chat/config/${t}`);if(!o.ok)throw new Error(`Failed to fetch deployment config: ${o.status}`);const a=await o.json();return{embedId:a.embedId,deploymentId:"",workerId:"",flowId:"",welcomeMessage:a.welcomeMessage,agentName:a.agentName,agentLogoUrl:a.agentLogoUrl,primaryColor:a.primaryColor,styling:a.styling}},async sendMessage(t){const o=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(!o.ok){const a=await o.text();throw new Error(`Failed to send message: ${o.status} - ${a}`)}if(!o.body)throw new Error("No response stream available");return o.body}}}const ge={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:{}},he=[{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 Brainbase AI 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 Brainbase AI agent!",delay:1e3}];function D(s){return new Promise(t=>setTimeout(t,s))}function te(s,t){const o={...ge,...s},a=t??he,h=`mock-session-${Date.now()}`;return{async getDeploymentConfig(d){return await D(300),o},async*sendMessage(d){yield{type:"session",data:{session_id:h,is_new:!0},timestamp:Date.now()};const c=a.find(n=>typeof n.trigger=="string"?d.toLowerCase().includes(n.trigger.toLowerCase()):n.trigger.test(d))??a[a.length-1];if(await D(c.delay??500),c.toolCalls)for(const n of c.toolCalls)yield{type:"tool_call",data:{function:n.name,args:n.arguments},timestamp:Date.now()},await D(300),yield{type:"tool_call",data:{function:n.name,result:n.result},timestamp:Date.now()},await D(200);const p=c.response.split(" ");let u="";for(const n of p)u+=(u?" ":"")+n,yield{type:"message",data:{content:u,role:"assistant"},timestamp:Date.now()},await D(30+Math.random()*40);yield{type:"done",data:{session_id:h},timestamp:Date.now()}}}}const pe="_header_tzm7g_1",_e="_headerBackground_tzm7g_8",fe="_headerContent_tzm7g_40",xe="_topRow_tzm7g_45",Ce="_agentInfo_tzm7g_52",we="_agentLogo_tzm7g_58",be="_agentLogoPlaceholder_tzm7g_66",ye="_brainbaseLogo_tzm7g_77",je="_agentName_tzm7g_82",Ie="_actions_tzm7g_89",ke="_actionButton_tzm7g_94",ve="_welcomeText_tzm7g_122",Ne="_title_tzm7g_126",Le="_subtitle_tzm7g_134",Se="_confirmationOverlay_tzm7g_142",Me="_confirmationDialog_tzm7g_163",Be="_confirmationText_tzm7g_184",$e="_confirmationButtons_tzm7g_192",He="_cancelButton_tzm7g_197",Te="_confirmButton_tzm7g_198",f={header:pe,headerBackground:_e,headerContent:fe,topRow:xe,agentInfo:Ce,agentLogo:we,agentLogoPlaceholder:be,brainbaseLogo:ye,agentName:je,actions:Ie,actionButton:ke,welcomeText:ve,title:Ne,subtitle:Le,confirmationOverlay:Se,confirmationDialog:Me,confirmationText:Be,confirmationButtons:$e,cancelButton:He,confirmButton:Te},Ve=({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:"white"})]}),se=({agentName:s="AI Assistant",agentLogoUrl:t,welcomeTitle:o,welcomeSubtitle:a,onClose:h,onNewChat:d,showNewChatButton:c=!1})=>{const[p,u]=i.useState(!1),n=o||"Hello there.",C=a||"How can we help?",k=()=>{c&&u(!0)},$=()=>{u(!1),d==null||d()},I=()=>{u(!1)};return e.jsxs("div",{className:f.header,children:[e.jsx("div",{className:f.headerBackground}),e.jsxs("div",{className:f.headerContent,children:[e.jsxs("div",{className:f.topRow,children:[e.jsxs("div",{className:f.agentInfo,children:[t?e.jsx("img",{src:t,alt:s,className:f.agentLogo}):e.jsx("div",{className:f.agentLogoPlaceholder,children:e.jsx(Ve,{className:f.brainbaseLogo})}),e.jsx("span",{className:f.agentName,children:s})]}),e.jsxs("div",{className:f.actions,children:[c&&d&&e.jsx("button",{className:f.actionButton,onClick:k,"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"})})}),h&&e.jsx("button",{className:f.actionButton,onClick:h,"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"})})})]})]}),e.jsxs("div",{className:f.welcomeText,children:[e.jsx("h1",{className:f.title,children:n}),e.jsx("p",{className:f.subtitle,children:C})]})]}),p&&e.jsx("div",{className:f.confirmationOverlay,children:e.jsxs("div",{className:f.confirmationDialog,children:[e.jsx("p",{className:f.confirmationText,children:"End current chat and start a new conversation?"}),e.jsxs("div",{className:f.confirmationButtons,children:[e.jsx("button",{className:f.cancelButton,onClick:I,type:"button",children:"Cancel"}),e.jsx("button",{className:f.confirmButton,onClick:$,type:"button",children:"End Chat"})]})]})})]})},De="_messageWrapper_c86gj_1",Pe="_user_c86gj_19",Ee="_assistant_c86gj_24",ze="_avatar_c86gj_28",Ae="_avatarPlaceholder_c86gj_43",We="_brainbaseLogo_c86gj_53",Re="_messageBubble_c86gj_58",Ze="_error_c86gj_76",Oe="_content_c86gj_81",Fe="_cursor_c86gj_88",Ue="_errorIndicator_c86gj_107",y={messageWrapper:De,user:Pe,assistant:Ee,avatar:ze,avatarPlaceholder:Ae,brainbaseLogo:We,messageBubble:Re,error:Ze,content:Oe,cursor:Fe,errorIndicator:Ue},qe=({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:"white"})]}),ne=({message:s,agentName:t,agentLogoUrl:o})=>{const a=s.role==="user",h=s.status==="streaming",d=s.status==="error";return e.jsxs("div",{className:`${y.messageWrapper} ${a?y.user:y.assistant}`,children:[!a&&e.jsx("div",{className:y.avatar,children:o?e.jsx("img",{src:o,alt:t||"AI"}):e.jsx("div",{className:y.avatarPlaceholder,children:e.jsx(qe,{className:y.brainbaseLogo})})}),e.jsxs("div",{className:`${y.messageBubble} ${d?y.error:""}`,role:"article","aria-label":`${a?"Your message":`${t||"AI"} says`}`,children:[e.jsxs("div",{className:y.content,children:[s.content,h&&e.jsx("span",{className:y.cursor})]}),d&&e.jsxs("div",{className:y.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"})]})]})]})},Ke="_toolCall_1wby1_1",Ge="_iconWrapper_1wby1_24",Je="_spinner_1wby1_33",Ye="_checkIcon_1wby1_48",Xe="_errorIcon_1wby1_54",Qe="_content_1wby1_60",et="_label_1wby1_66",tt="_name_1wby1_73",st="_pending_1wby1_78",nt="_completed_1wby1_82",ot="_error_1wby1_54",j={toolCall:Ke,iconWrapper:Ge,spinner:Je,checkIcon:Ye,errorIcon:Xe,content:Qe,label:et,name:tt,pending:st,completed:nt,error:ot},oe=({toolCall:s})=>{const t=s.status==="pending"||s.status==="executing",o=s.status==="completed",a=s.status==="error",h=d=>d.replace(/_/g," ").replace(/([A-Z])/g," $1").trim().toLowerCase().replace(/^./,c=>c.toUpperCase());return e.jsxs("div",{className:`${j.toolCall} ${t?j.pending:""} ${o?j.completed:""} ${a?j.error:""}`,children:[e.jsx("div",{className:j.iconWrapper,children:t?e.jsx("div",{className:j.spinner}):o?e.jsx("svg",{viewBox:"0 0 24 24",fill:"none",className:j.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:j.errorIcon,children:e.jsx("path",{d:"M6 18L18 6M6 6L18 18",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}),e.jsxs("div",{className:j.content,children:[e.jsx("span",{className:j.label,children:t?"Running":o?"Completed":"Failed"}),e.jsx("span",{className:j.name,children:h(s.name)})]})]})},at="_wrapper_10rss_2",rt="_avatar_10rss_22",it="_avatarPlaceholder_10rss_37",ct="_brainbaseLogo_10rss_47",lt="_bubble_10rss_52",dt="_dot_10rss_63",L={wrapper:at,avatar:rt,avatarPlaceholder:it,brainbaseLogo:ct,bubble:lt,dot:dt},ut=({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:"white"})]}),ae=({agentName:s="AI",agentLogoUrl:t})=>e.jsxs("div",{className:L.wrapper,role:"status","aria-label":`${s} is typing`,children:[e.jsx("div",{className:L.avatar,children:t?e.jsx("img",{src:t,alt:s}):e.jsx("div",{className:L.avatarPlaceholder,children:e.jsx(ut,{className:L.brainbaseLogo})})}),e.jsxs("div",{className:L.bubble,children:[e.jsx("span",{className:L.dot}),e.jsx("span",{className:L.dot}),e.jsx("span",{className:L.dot})]})]}),mt="_messageList_241kk_1",gt="_emptyState_241kk_29",ht="_emptyIcon_241kk_40",pt="_emptyText_241kk_52",A={messageList:mt,emptyState:gt,emptyIcon:ht,emptyText:pt},re=({messages:s,toolCalls:t,isLoading:o,agentName:a,agentLogoUrl:h})=>{var u;const d=i.useRef(null),c=i.useRef(null);i.useEffect(()=>{var n;(n=c.current)==null||n.scrollIntoView({behavior:"smooth"})},[s,t,o]);const p=t.filter(n=>n.status==="pending"||n.status==="executing");return e.jsxs("div",{className:A.messageList,ref:d,role:"log","aria-live":"polite",children:[s.length===0&&!o&&e.jsxs("div",{className:A.emptyState,children:[e.jsx("div",{className:A.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:A.emptyText,children:"Start a conversation"})]}),s.map(n=>e.jsx(ne,{message:n,agentName:a,agentLogoUrl:h},n.id)),p.map(n=>e.jsx(oe,{toolCall:n},n.id)),o&&((u=s[s.length-1])==null?void 0:u.role)==="user"&&e.jsx(ae,{agentName:a,agentLogoUrl:h}),e.jsx("div",{ref:c})]})},_t="_inputWrapper_5lgg7_1",ft="_inputContainer_5lgg7_7",xt="_textarea_5lgg7_23",Ct="_sendButton_5lgg7_50",wt="_hint_5lgg7_89",P={inputWrapper:_t,inputContainer:ft,textarea:xt,sendButton:Ct,hint:wt},ie=({onSend:s,disabled:t=!1,placeholder:o="Send a message..."})=>{const[a,h]=i.useState(""),d=i.useRef(null),c=i.useCallback(()=>{const n=d.current;n&&(n.style.height="auto",n.style.height=`${Math.min(n.scrollHeight,150)}px`)},[]);i.useEffect(()=>{c()},[a,c]);const p=i.useCallback(n=>{n==null||n.preventDefault();const C=a.trim();C&&!t&&(s(C),h(""),d.current&&(d.current.style.height="auto"))},[a,t,s]),u=i.useCallback(n=>{n.key==="Enter"&&!n.shiftKey&&(n.preventDefault(),p())},[p]);return e.jsxs("form",{className:P.inputWrapper,onSubmit:p,children:[e.jsxs("div",{className:P.inputContainer,children:[e.jsx("textarea",{ref:d,className:P.textarea,value:a,onChange:n=>h(n.target.value),onKeyDown:u,placeholder:o,disabled:t,rows:1,"aria-label":"Message input"}),e.jsx("button",{type:"submit",className:P.sendButton,disabled:t||!a.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:P.hint,children:["Press ",e.jsx("kbd",{children:"Enter"})," to send, ",e.jsx("kbd",{children:"Shift + Enter"})," for new line"]})]})},bt="_poweredBy_9jh5q_1",yt="_logo_9jh5q_20",jt="_poweredText_9jh5q_24",It="_text_9jh5q_36",W={poweredBy:bt,logo:yt,poweredText:jt,text:It},kt=({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)"})]}),vt=()=>e.jsxs("a",{href:"https://brainbaselabs.com/",target:"_blank",rel:"noopener noreferrer",className:W.poweredBy,"aria-label":"Powered by Brainbase Labs",children:[e.jsx("span",{className:W.poweredText,children:"Powered by"}),e.jsx(kt,{className:W.logo}),e.jsx("span",{className:W.text,children:"Brainbase Labs"})]}),Nt="_container_14ilx_1",Lt="_body_14ilx_25",J={container:Nt,body:Lt},ce=({config:s,messages:t,toolCalls:o,isLoading:a,onSendMessage:h,onClose:d,onNewChat:c})=>{const p=t.length>0;return e.jsxs("div",{className:J.container,role:"dialog","aria-label":"Chat window",children:[e.jsx(se,{agentName:s.agentName,agentLogoUrl:s.agentLogoUrl,welcomeTitle:"Hello there.",welcomeSubtitle:"How can we help?",onClose:d,onNewChat:c,showNewChatButton:p}),e.jsxs("div",{className:J.body,children:[e.jsx(re,{messages:t,toolCalls:o,isLoading:a,agentName:s.agentName,agentLogoUrl:s.agentLogoUrl}),e.jsx(ie,{onSend:h,disabled:a,placeholder:"Ask a question..."})]}),e.jsx(vt,{})]})},St="_toggleButton_11dqz_1",Mt="_icon_11dqz_31",Bt="_agentLogo_11dqz_36",$t="_unreadBadge_11dqz_43",R={toggleButton:St,icon:Mt,agentLogo:Bt,unreadBadge:$t},le=({onClick:s,agentLogoUrl:t,unreadCount:o=0})=>e.jsxs("button",{className:R.toggleButton,onClick:s,"aria-label":"Open chat",type:"button",children:[t?e.jsx("img",{src:t,alt:"",className:R.agentLogo}):e.jsx("svg",{className:R.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"})}),o>0&&e.jsx("span",{className:R.unreadBadge,children:o>9?"9+":o})]}),Ht="_widget_1ehud_1",Tt="_inline_1ehud_25",Y={widget:Ht,"bottom-right":"_bottom-right_1ehud_10","bottom-left":"_bottom-left_1ehud_17",inline:Tt},Vt="https://whatsapp-based-server.onrender.com",Dt=({embedId:s,apiBaseUrl:t=Vt,mockMode:o=!1,mockResponses:a,position:h="bottom-right",defaultOpen:d=!1,primaryColor:c,agentName:p,welcomeMessage:u,className:n,onSessionStart:C,onSessionEnd:k,onMessage:$,onError:I})=>{const[Z,H]=i.useState(d),[m,S]=i.useState(null),[v,E]=i.useState(!0),[O,M]=i.useState(null),B=i.useMemo(()=>o?te({primaryColor:c,agentName:p,welcomeMessage:u},a):ee(t),[o,c,p,u,a,t]);i.useEffect(()=>{let w=!0;async function g(){try{const l=await B.getDeploymentConfig(s);w&&(S({...l,primaryColor:c??l.primaryColor,agentName:p??l.agentName,welcomeMessage:u??l.welcomeMessage}),M(null))}catch(l){const r=l instanceof Error?l:new Error("Failed to load config");w&&(M(r),o&&S({embedId:s,deploymentId:"mock-deployment",workerId:"mock-worker",flowId:"mock-flow",primaryColor:c??"#1a1a2e",agentName:p??"AI Assistant"})),I==null||I(r)}finally{w&&E(!1)}}return g(),()=>{w=!1}},[s,o,B,c,p,u,I]);const z=i.useMemo(()=>m||{embedId:s,deploymentId:"",workerId:"",flowId:"",primaryColor:c,agentName:p,welcomeMessage:u},[m,s,c,p,u]),N=Q({config:z,apiClient:B,mockMode:o,onSessionStart:C,onSessionEnd:k,onMessage:$,onError:I}),F=i.useMemo(()=>({"--bb-primary-color":(m==null?void 0:m.primaryColor)??c??"#1a1a2e"}),[m==null?void 0:m.primaryColor,c]),_=()=>{N.endSession(),N.startNewSession()};if(v||O&&!o)return null;const b=h==="inline";return e.jsx("div",{className:`${Y.widget} ${Y[h]} ${n??""}`,style:F,children:Z||b?e.jsx(ce,{config:z,messages:N.messages,toolCalls:N.toolCalls,isLoading:N.isLoading,onSendMessage:N.sendMessage,onClose:b?void 0:()=>H(!1),onNewChat:_}):e.jsx(le,{onClick:()=>H(!0),agentName:m==null?void 0:m.agentName,agentLogoUrl:m==null?void 0:m.agentLogoUrl})})};function Pt(){if(typeof crypto<"u"&&crypto.randomUUID)return`bb-${crypto.randomUUID()}`;const s=Date.now().toString(36),t=Math.random().toString(36).substring(2,15),o=Math.random().toString(36).substring(2,15);return`bb-${s}-${t}${o}`}exports.ChatContainer=ce;exports.ChatHeader=se;exports.ChatToggleButton=le;exports.ChatWidget=Dt;exports.Message=ne;exports.MessageInput=ie;exports.MessageList=re;exports.ToolCallDisplay=oe;exports.TypingIndicator=ae;exports.clearSession=q;exports.createAPIClient=ee;exports.createMockAPIClient=te;exports.generateSessionId=Pt;exports.getStoredSession=X;exports.storeSession=U;exports.useChat=Q;

package/dist/index.d.ts

@@ -0,0 +1,228 @@
+import { default as default_2 } from 'react';
+
+export declare interface BrainbaseAPIClient {
+    getDeploymentConfig(embedId: string): Promise<DeploymentConfig>;
+    sendMessage(params: SendMessageParams): Promise<ReadableStream<Uint8Array>>;
+}
+
+export declare const ChatContainer: default_2.FC<ChatContainerProps>;
+
+declare interface ChatContainerProps {
+    config: DeploymentConfig;
+    messages: MessageType[];
+    toolCalls: ToolCall[];
+    isLoading: boolean;
+    onSendMessage: (message: string) => void;
+    onClose?: () => void;
+    onNewChat?: () => void;
+}
+
+export declare const ChatHeader: default_2.FC<ChatHeaderProps>;
+
+declare interface ChatHeaderProps {
+    agentName?: string;
+    agentLogoUrl?: string;
+    welcomeTitle?: string;
+    welcomeSubtitle?: string;
+    onClose?: () => void;
+    onNewChat?: () => void;
+    showNewChatButton?: boolean;
+}
+
+export declare const ChatToggleButton: default_2.FC<ChatToggleButtonProps>;
+
+declare interface ChatToggleButtonProps {
+    onClick: () => void;
+    agentName?: string;
+    agentLogoUrl?: string;
+    unreadCount?: number;
+}
+
+export declare const ChatWidget: default_2.FC<ChatWidgetProps>;
+
+export declare interface ChatWidgetProps {
+    /** The embed ID from your Brainbase deployment */
+    embedId: string;
+    /** API base URL (defaults to production) */
+    apiBaseUrl?: string;
+    /** Enable mock mode for UI development */
+    mockMode?: boolean;
+    /** Custom mock responses for mock mode */
+    mockResponses?: MockResponse[];
+    /** Position of the widget */
+    position?: 'bottom-right' | 'bottom-left' | 'inline';
+    /** Whether widget starts open */
+    defaultOpen?: boolean;
+    /** Override primary color */
+    primaryColor?: string;
+    /** Override agent name */
+    agentName?: string;
+    /** Override welcome message */
+    welcomeMessage?: string;
+    /** Custom CSS class */
+    className?: string;
+    /** Callback when session starts */
+    onSessionStart?: (sessionId: string) => void;
+    /** Callback when session ends */
+    onSessionEnd?: (session: Session) => void;
+    /** Callback on message received */
+    onMessage?: (message: MessageType) => void;
+    /** Callback on error */
+    onError?: (error: Error) => void;
+}
+
+export declare function clearSession(embedId: string): void;
+
+export declare function createAPIClient(engineBaseUrl?: string): BrainbaseAPIClient;
+
+export declare function createMockAPIClient(customConfig?: Partial<DeploymentConfig>, customResponses?: MockResponse[]): MockAPIClient;
+
+export declare interface DeploymentConfig {
+    embedId: string;
+    deploymentId: string;
+    workerId: string;
+    flowId: string;
+    welcomeMessage?: string;
+    agentName?: string;
+    agentLogoUrl?: string;
+    primaryColor?: string;
+    styling?: Record<string, unknown>;
+}
+
+/**
+ * Generates a unique session ID using crypto API when available,
+ * with fallback to timestamp + random string
+ */
+export declare function generateSessionId(): string;
+
+export declare function getStoredSession(embedId: string): Session | null;
+
+export declare const Message: default_2.FC<MessageProps>;
+
+export declare const MessageInput: default_2.FC<MessageInputProps>;
+
+declare interface MessageInputProps {
+    onSend: (message: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+}
+
+export declare const MessageList: default_2.FC<MessageListProps>;
+
+declare interface MessageListProps {
+    messages: MessageType[];
+    toolCalls: ToolCall[];
+    isLoading: boolean;
+    agentName?: string;
+    agentLogoUrl?: string;
+}
+
+declare interface MessageProps {
+    message: MessageType;
+    agentName?: string;
+    agentLogoUrl?: string;
+}
+
+export declare type MessageRole = 'user' | 'assistant' | 'system';
+
+export declare type MessageStatus = 'sending' | 'sent' | 'streaming' | 'error';
+
+export declare interface MessageType {
+    id: string;
+    role: MessageRole;
+    content: string;
+    timestamp: number;
+    status?: MessageStatus;
+}
+
+export declare interface MockAPIClient {
+    getDeploymentConfig(embedId: string): Promise<DeploymentConfig>;
+    sendMessage(message: string): AsyncGenerator<SSEEvent>;
+}
+
+export declare interface MockResponse {
+    trigger: string | RegExp;
+    response: string;
+    delay?: number;
+    toolCalls?: Array<{
+        name: string;
+        arguments: Record<string, unknown>;
+        result: unknown;
+    }>;
+}
+
+export declare interface SendMessageParams {
+    embedId: string;
+    message: string;
+    sessionId?: string;
+    metadata?: Record<string, unknown>;
+}
+
+export declare interface Session {
+    sessionId: string;
+    deploymentId: string;
+    workerId: string;
+    flowId: string;
+    startTime: number;
+    messages: MessageType[];
+    toolCalls: ToolCall[];
+    status: 'active' | 'completed' | 'error';
+}
+
+export declare interface SSEEvent {
+    type: SSEEventType;
+    data: unknown;
+    timestamp?: number;
+}
+
+export declare type SSEEventType = 'session' | 'message' | 'tool_call' | 'waiting' | 'done' | 'completed' | 'error';
+
+export declare function storeSession(embedId: string, session: Session): void;
+
+export declare interface ToolCall {
+    id: string;
+    name: string;
+    arguments: Record<string, unknown>;
+    result?: unknown;
+    status: 'pending' | 'executing' | 'completed' | 'error';
+    timestamp: number;
+}
+
+export declare const ToolCallDisplay: default_2.FC<ToolCallDisplayProps>;
+
+declare interface ToolCallDisplayProps {
+    toolCall: ToolCall;
+}
+
+export declare const TypingIndicator: default_2.FC<TypingIndicatorProps>;
+
+declare interface TypingIndicatorProps {
+    agentName?: string;
+    agentLogoUrl?: string;
+}
+
+export declare function useChat(options: UseChatOptions): UseChatReturn;
+
+declare interface UseChatOptions {
+    config: DeploymentConfig;
+    apiClient: BrainbaseAPIClient | MockAPIClient;
+    mockMode?: boolean;
+    onSessionStart?: (sessionId: string) => void;
+    onSessionEnd?: (session: Session) => void;
+    onMessage?: (message: MessageType) => void;
+    onError?: (error: Error) => void;
+}
+
+export declare interface UseChatReturn {
+    messages: MessageType[];
+    toolCalls: ToolCall[];
+    isLoading: boolean;
+    error: Error | null;
+    sessionId: string | null;
+    sendMessage: (content: string) => Promise<void>;
+    endSession: () => Promise<void>;
+    clearMessages: () => void;
+    startNewSession: () => Promise<string>;
+}
+
+export { }