@rohitkvs/ai-assistant-widget/dist/ai-assistant-widget.umd.js

A React/Next.js library for AI assistant widget with floating button, voice call, and chat functionality

(function(p,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react"),require("framer-motion"),require("clsx")):typeof define=="function"&&define.amd?define(["exports","react","framer-motion","clsx"],f):(p=typeof globalThis<"u"?globalThis:p||self,f(p.AIAssistantWidget={},p.React,p.FramerMotion,p.clsx))})(this,function(p,f,d,y){"use strict";var _={exports:{}},T={};/**
 * @license React
 * react-jsx-runtime.production.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var z;function Z(){if(z)return T;z=1;var i=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function u(o,l,n){var g=null;if(n!==void 0&&(g=""+n),l.key!==void 0&&(g=""+l.key),"key"in l){n={};for(var x in l)x!=="key"&&(n[x]=l[x])}else n=l;return l=n.ref,{$$typeof:i,type:o,key:g,ref:l!==void 0?l:null,props:n}}return T.Fragment=c,T.jsx=u,T.jsxs=u,T}var k={};/**
 * @license React
 * react-jsx-runtime.development.js
 *
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var F;function Q(){return F||(F=1,process.env.NODE_ENV!=="production"&&function(){function i(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case A:return"Fragment";case ee:return"Profiler";case q:return"StrictMode";case ne:return"Suspense";case se:return"SuspenseList";case le:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case S:return"Portal";case ae:return(e.displayName||"Context")+".Provider";case te:return(e._context.displayName||"Context")+".Consumer";case ie:var a=e.render;return e=e.displayName,e||(e=a.displayName||a.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case re:return a=e.displayName||null,a!==null?a:i(e.type)||"Memo";case B:a=e._payload,e=e._init;try{return i(e(a))}catch{}}return null}function c(e){return""+e}function u(e){try{c(e);var a=!1}catch{a=!0}if(a){a=console;var r=a.error,m=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return r.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",m),c(e)}}function o(e){if(e===A)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===B)return"<...>";try{var a=i(e);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function l(){var e=O.A;return e===null?null:e.getOwner()}function n(){return Error("react-stack-top-frame")}function g(e){if(U.call(e,"key")){var a=Object.getOwnPropertyDescriptor(e,"key").get;if(a&&a.isReactWarning)return!1}return e.key!==void 0}function x(e,a){function r(){W||(W=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}r.isReactWarning=!0,Object.defineProperty(e,"key",{get:r,configurable:!0})}function w(){var e=i(this.type);return G[e]||(G[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,a,r,m,j,v,L,I){return r=v.ref,e={$$typeof:R,type:e,key:a,props:v,_owner:j},(r!==void 0?r:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:w}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:I}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function E(e,a,r,m,j,v,L,I){var h=a.children;if(h!==void 0)if(m)if(ce(h)){for(m=0;m<h.length;m++)N(h[m]);Object.freeze&&Object.freeze(h)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else N(h);if(U.call(a,"key")){h=i(e);var C=Object.keys(a).filter(function(de){return de!=="key"});m=0<C.length?"{key: someKey, "+C.join(": ..., ")+": ...}":"{key: someKey}",$[h+m]||(C=0<C.length?"{"+C.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
  let props = %s;
  <%s {...props} />
React keys must be passed directly to JSX without using spread:
  let props = %s;
  <%s key={someKey} {...props} />`,m,h,C,h),$[h+m]=!0)}if(h=null,r!==void 0&&(u(r),h=""+r),g(a)&&(u(a.key),h=""+a.key),"key"in a){r={};for(var M in a)M!=="key"&&(r[M]=a[M])}else r=a;return h&&x(r,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,h,v,j,l(),r,L,I)}function N(e){typeof e=="object"&&e!==null&&e.$$typeof===R&&e._store&&(e._store.validated=1)}var s=f,R=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),A=Symbol.for("react.fragment"),q=Symbol.for("react.strict_mode"),ee=Symbol.for("react.profiler"),te=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ie=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),se=Symbol.for("react.suspense_list"),re=Symbol.for("react.memo"),B=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),O=s.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,U=Object.prototype.hasOwnProperty,ce=Array.isArray,P=console.createTask?console.createTask:function(){return null};s={"react-stack-bottom-frame":function(e){return e()}};var W,G={},J=s["react-stack-bottom-frame"].bind(s,n)(),X=P(o(n)),$={};k.Fragment=A,k.jsx=function(e,a,r,m,j){var v=1e4>O.recentlyCreatedOwnerStacks++;return E(e,a,r,!1,m,j,v?Error("react-stack-top-frame"):J,v?P(o(e)):X)},k.jsxs=function(e,a,r,m,j){var v=1e4>O.recentlyCreatedOwnerStacks++;return E(e,a,r,!0,m,j,v?Error("react-stack-top-frame"):J,v?P(o(e)):X)}}()),k}process.env.NODE_ENV==="production"?_.exports=Z():_.exports=Q();var t=_.exports;const H=({onClick:i,className:c,position:u={bottom:"24px",right:"24px"}})=>t.jsx(d.motion.button,{onClick:i,className:y("ai-widget-floating-btn",c),style:u,whileHover:{scale:1.05},whileTap:{scale:.95},initial:{scale:0},animate:{scale:1},transition:{type:"spring",stiffness:260,damping:20},children:t.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:t.jsx("path",{d:"M20 2H4C2.9 2 2 2.9 2 4V16C2 17.1 2.9 18 4 18H6L10 22L14 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",fill:"none"})})}),Y=({isOpen:i,onClose:c,onStartCall:u,onStartChat:o,position:l={bottom:"100px",right:"24px"}})=>t.jsx(d.AnimatePresence,{children:i&&t.jsxs(t.Fragment,{children:[t.jsx(d.motion.div,{className:"ai-widget-backdrop",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:c}),t.jsxs(d.motion.div,{className:"ai-widget-modal",style:l,initial:{opacity:0,scale:.8,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:20},transition:{type:"spring",stiffness:300,damping:30},children:[t.jsxs("div",{className:"ai-widget-modal-header",children:[t.jsx("h2",{className:"ai-widget-modal-title",children:"AI Assistant"}),t.jsx("button",{onClick:c,className:"ai-widget-close-btn",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]}),t.jsxs("div",{className:"ai-widget-options",children:[t.jsxs(d.motion.button,{onClick:u,className:"ai-widget-option-btn",whileHover:{scale:1.02},whileTap:{scale:.98},children:[t.jsx("div",{className:"ai-widget-option-icon",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t.jsx("path",{d:"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"})})}),t.jsx("span",{className:"ai-widget-option-text",children:"Start Call"})]}),t.jsxs(d.motion.button,{onClick:o,className:"ai-widget-option-btn",whileHover:{scale:1.02},whileTap:{scale:.98},children:[t.jsx("div",{className:"ai-widget-option-icon",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:t.jsx("path",{d:"M20 2H4C2.9 2 2 2.9 2 4V16C2 17.1 2.9 18 4 18H6L10 22L14 18H20C21.1 18 22 17.1 22 16V4C22 2.9 21.1 2 20 2Z"})})}),t.jsx("span",{className:"ai-widget-option-text",children:"Start Chat"})]})]})]})]})}),D=({isOpen:i,onClose:c,position:u={bottom:"100px",right:"24px"}})=>{const[o,l]=f.useState(!1),[n,g]=f.useState(!0),x=()=>{l(!o)},w=()=>{g(!1),c()};return t.jsx(d.AnimatePresence,{children:i&&t.jsxs(t.Fragment,{children:[t.jsx(d.motion.div,{className:"ai-widget-backdrop",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:c}),t.jsxs(d.motion.div,{className:"ai-widget-modal ai-widget-voice-modal",style:u,initial:{opacity:0,scale:.8,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:20},transition:{type:"spring",stiffness:300,damping:30},children:[t.jsxs("div",{className:"ai-widget-modal-header",children:[t.jsx("h2",{className:"ai-widget-modal-title",children:"Voice Call"}),t.jsx("button",{onClick:c,className:"ai-widget-close-btn",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]}),t.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",marginBottom:"2rem"},children:[t.jsx(d.motion.div,{className:y("ai-widget-avatar",{"ai-widget-pulse":n}),animate:n?{scale:[1,1.05,1]}:{},transition:{duration:2,repeat:1/0},children:t.jsx("div",{className:"ai-widget-avatar-dot"})}),t.jsx("span",{className:"ai-widget-status",children:n?"Connected":"Connecting..."})]}),t.jsxs("div",{className:"ai-widget-controls",children:[t.jsx(d.motion.button,{onClick:x,className:y("ai-widget-control-btn ai-widget-mute-btn",{muted:o}),whileHover:{scale:1.05},whileTap:{scale:.95},children:o?t.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:t.jsx("path",{d:"M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"})}):t.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:t.jsx("path",{d:"M12 2c1.1 0 2 .9 2 2v6c0 1.1-.9 2-2 2s-2-.9-2-2V4c0-1.1.9-2 2-2zm6 6c0 4.28-2.99 7.86-7 8.77v2.06c5.93-.94 10.5-6.13 10.5-12.17h-1.5c0 0 0 0 0 0zm-12 0H4.5c0 6.04 4.57 11.23 10.5 12.17v-2.06C10.99 15.86 8 12.28 8 8H6z"})})}),t.jsx(d.motion.button,{onClick:w,className:"ai-widget-control-btn ai-widget-end-btn",whileHover:{scale:1.05},whileTap:{scale:.95},children:t.jsxs("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"currentColor",children:[t.jsx("path",{d:"M19.23 15.26l-2.54-.29c-.61-.07-1.21.14-1.64.57l-1.84 1.84c-2.83-1.44-5.15-3.75-6.59-6.59l1.85-1.85c.43-.43.64-1.03.57-1.64l-.29-2.52c-.12-1.01-.97-1.77-1.99-1.77H5.03c-1.13 0-2.07.94-2 2.07.53 8.54 7.36 15.36 15.89 15.89 1.13.07 2.07-.87 2.07-2v-1.73c.01-1.01-.75-1.86-1.76-1.98z"}),t.jsx("path",{d:"M16 4h4v4l-6-6v4c0 1.1.9 2 2 2z"})]})})]})]})]})})},V=({isOpen:i,onClose:c,position:u={bottom:"100px",right:"24px"}})=>{const[o,l]=f.useState([{id:"1",text:"Hello! How can I help you today?",isUser:!1,timestamp:new Date}]),[n,g]=f.useState(""),x=f.useRef(null),w=f.useRef(null),b=()=>{var s;(s=x.current)==null||s.scrollIntoView({behavior:"smooth"})};f.useEffect(()=>{b()},[o]),f.useEffect(()=>{i&&w.current&&setTimeout(()=>{var s;return(s=w.current)==null?void 0:s.focus()},100)},[i]);const E=()=>{if(n.trim()){const s={id:Date.now().toString(),text:n,isUser:!0,timestamp:new Date};l(R=>[...R,s]),g(""),setTimeout(()=>{const R={id:(Date.now()+1).toString(),text:"I understand. Let me help you with that.",isUser:!1,timestamp:new Date};l(S=>[...S,R])},1e3)}},N=s=>{s.key==="Enter"&&E()};return t.jsx(d.AnimatePresence,{children:i&&t.jsxs(t.Fragment,{children:[t.jsx(d.motion.div,{className:"ai-widget-backdrop",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:c}),t.jsxs(d.motion.div,{className:"ai-widget-modal ai-widget-chat-modal",style:u,initial:{opacity:0,scale:.8,y:20},animate:{opacity:1,scale:1,y:0},exit:{opacity:0,scale:.8,y:20},transition:{type:"spring",stiffness:300,damping:30},children:[t.jsxs("div",{className:"ai-widget-chat-header",children:[t.jsx("h2",{className:"ai-widget-modal-title",children:"Chat"}),t.jsx("button",{onClick:c,className:"ai-widget-close-btn",children:t.jsx("svg",{width:"20",height:"20",viewBox:"0 0 20 20",fill:"currentColor",children:t.jsx("path",{fillRule:"evenodd",d:"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",clipRule:"evenodd"})})})]}),t.jsxs("div",{className:"ai-widget-messages",children:[o.map(s=>t.jsx(d.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},className:y("ai-widget-message",{user:s.isUser,assistant:!s.isUser}),children:t.jsx("div",{className:y("ai-widget-message-bubble",{user:s.isUser,assistant:!s.isUser}),children:s.text})},s.id)),t.jsx("div",{ref:x})]}),t.jsx("div",{className:"ai-widget-chat-input",children:t.jsxs("div",{className:"ai-widget-input-container",children:[t.jsx("input",{ref:w,type:"text",value:n,onChange:s=>g(s.target.value),onKeyPress:N,placeholder:"Type your message...",className:"ai-widget-input"}),t.jsx(d.motion.button,{onClick:E,disabled:!n.trim(),className:y("ai-widget-send-btn",{active:n.trim(),disabled:!n.trim()}),whileHover:n.trim()?{scale:1.05}:{},whileTap:n.trim()?{scale:.95}:{},children:t.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:t.jsx("path",{d:"M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"})})})]})})]})]})})},K=({position:i={bottom:"24px",right:"24px"},className:c})=>{const[u,o]=f.useState("closed"),l=()=>{o("assistant")},n=()=>{o("closed")},g=()=>{o("voice")},x=()=>{o("chat")},b=i.bottom&&i.right?{bottom:`calc(${i.bottom} + 100px)`,right:i.right}:i.bottom&&i.left?{bottom:`calc(${i.bottom} + 100px)`,left:i.left}:i.top&&i.right?{top:`calc(${i.top} + 100px)`,right:i.right}:i.top&&i.left?{top:`calc(${i.top} + 100px)`,left:i.left}:{bottom:`calc(${i.bottom||"24px"} + 100px)`,right:i.right||"24px"};return t.jsxs("div",{className:"ai-widget-container",children:[t.jsx(H,{onClick:l,position:i,className:c}),t.jsx(Y,{isOpen:u==="assistant",onClose:n,onStartCall:g,onStartChat:x,position:b}),t.jsx(D,{isOpen:u==="voice",onClose:n,position:b}),t.jsx(V,{isOpen:u==="chat",onClose:n,position:b})]})};p.AIAssistantModal=Y,p.AIWidget=K,p.ChatModal=V,p.FloatingButton=H,p.VoiceCallModal=D,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});