ai-crw/dist/index.cjs

ai Chat Widget is a lightweight, customizable React component that adds an AI-powered chat bubble to your website. It seamlessly integrates with OpenRouter to enable real-time conversations powered by leading LLMs like GPT-4 and Claude.

"use strict";var x=Object.defineProperty;var I=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var j=Object.prototype.hasOwnProperty;var T=(e,o)=>{for(var r in o)x(e,r,{get:o[r],enumerable:!0})},R=(e,o,r,n)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of N(o))!j.call(e,i)&&i!==r&&x(e,i,{get:()=>o[i],enumerable:!(n=I(o,i))||n.enumerable});return e};var A=e=>R(x({},"__esModule",{value:!0}),e);var S={};T(S,{PopChat:()=>v,default:()=>P});module.exports=A(S);var c=require("react");function C(e,{insertAt:o}={}){if(!e||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css",o==="top"&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}C(`@media (min-width: 768px){#chatCon{position:fixed;bottom:3%;right:3%;z-index:9999}#chatCon.open{inset:0;width:100vw;height:100vh;background:#0003;display:flex;flex-direction:column;align-items:center;justify-content:center}#chatCon .pop{position:fixed;bottom:3%;right:3%;z-index:10000;cursor:pointer}#chatCon .pop img{border-radius:50%;width:60px;height:60px}#chatCon .chat-box{display:flex;flex-direction:column;width:100%;max-width:380px;height:500px;border-radius:25px;background-color:#eee;position:relative;z-index:10001;overflow:hidden}#chatCon .chat-box .header{background-color:#257cb5;padding:1rem;border-radius:25px 25px 0 0;color:#fff;font-size:1.2rem;display:flex;justify-content:space-between;align-items:center}#chatCon .close-button{font-size:1.25rem;background:transparent;border:none;color:#fff;cursor:pointer}#chatCon .chat-box .msg-area{flex:1;overflow-y:auto;padding:1rem}#chatCon .chat-box .footer{padding:1rem;display:flex;align-items:center;background:#fff;justify-content:space-around}#chatCon .chat-box .footer input{border:1px solid #ccc;padding:.625rem;width:80%;border-radius:.9375rem}#chatCon .chat-box .footer input:focus{outline:none}#chatCon .chat-box .footer button{border:none;font-size:1.5rem;color:#257cb5;cursor:pointer;background:none}body.chat-open{overflow:hidden}#chatCon .chat-box .msg-area .left span,#chatCon .chat-box .msg-area .right span{display:inline-block;font-size:.85rem;border-radius:.9375rem;padding:.9375rem;margin-bottom:.5rem}#chatCon[dir=ltr] .chat-box .msg-area,#chatCon[dir=ltr] .chat-box .msg-area .left{text-align:left}#chatCon[dir=ltr] .chat-box .msg-area .right{text-align:right}#chatCon[dir=ltr] .chat-box .msg-area .left span{background-color:#ddd}#chatCon[dir=ltr] .chat-box .msg-area .right span{background-color:#257cb5;color:#fff;text-align:left}#chatCon[dir=ltr] .chat-box .footer{flex-direction:row}#chatCon[dir=ltr] .chat-box .footer input{text-align:left}#chatCon[dir=ltr] .close-button{margin-left:auto;margin-right:0}#chatCon[dir=rtl] .chat-box .msg-area,#chatCon[dir=rtl] .chat-box .msg-area .left{text-align:right}#chatCon[dir=rtl] .chat-box .msg-area .right{text-align:left}#chatCon[dir=rtl] .chat-box .msg-area .left span{background-color:#ddd}#chatCon[dir=rtl] .chat-box .msg-area .right span{background-color:#257cb5;color:#fff;text-align:right}#chatCon[dir=rtl] .chat-box .footer{flex-direction:row}#chatCon[dir=rtl] .chat-box .footer input{text-align:right}#chatCon[dir=rtl] .close-button{margin-right:auto;margin-left:0}}@media (max-width: 768px){#chatCon{position:fixed;bottom:3%;right:3%;z-index:9999}#chatCon.open{position:fixed;inset:0;width:100vw;height:100vh;background:#0003;display:flex;flex-direction:column;align-items:center;justify-content:center}#chatCon .chat-box{width:100%;height:100%;border-radius:0;background-color:#fff;display:flex;flex-direction:column}#chatCon .chat-box .header{background-color:#257cb5;padding:1rem;color:#fff;font-size:1.25rem;display:flex;justify-content:space-between;align-items:center}.close-button{font-size:1.5rem;background:transparent;border:none;color:#fff;cursor:pointer}#chatCon .chat-box .msg-area{flex:1;overflow-y:auto;padding:1rem}#chatCon .msg-area .left span,#chatCon .msg-area .right span{display:inline-block;font-size:1.09375rem;border-radius:.9375rem;padding:.9375rem;margin-bottom:.5rem}#chatCon[dir=ltr] .msg-area,#chatCon[dir=ltr] .msg-area .left{text-align:left}#chatCon[dir=ltr] .msg-area .right{text-align:right}#chatCon[dir=ltr] .msg-area .left span{background-color:#ddd}#chatCon[dir=ltr] .msg-area .right span{background-color:#257cb5;color:#fff;text-align:left}#chatCon[dir=ltr] .chat-box .footer{flex-direction:row}#chatCon[dir=ltr] .footer input{text-align:left}#chatCon[dir=rtl] .msg-area,#chatCon[dir=rtl] .msg-area .left{text-align:right}#chatCon[dir=rtl] .msg-area .right{text-align:left}#chatCon[dir=rtl] .msg-area .left span{background-color:#ddd}#chatCon[dir=rtl] .msg-area .right span{background-color:#257cb5;color:#fff;text-align:right}#chatCon[dir=rtl] .chat-box .footer{flex-direction:row}#chatCon[dir=rtl] .footer input{text-align:right}#chatCon .chat-box .footer{padding:1rem;display:flex;justify-content:space-between;align-items:center;background:#fff;justify-content:space-around}#chatCon .footer input{border:1px solid #ccc;padding:.625rem;width:80%;border-radius:.9375rem}#chatCon .footer input:focus{outline:none}#chatCon .footer button{border:none;font-size:1.5rem;color:#257cb5;cursor:pointer;background:none}#chatCon .pop{display:flex;justify-content:center;align-items:center}#chatCon.open .pop{display:none}#chatCon .pop img{border-radius:50%;width:60px;height:60px;cursor:pointer}body.chat-open{overflow:hidden}}
`);var F=require("@fortawesome/fontawesome-free/css/all.min.css"),l=require("framer-motion");async function k(e,o,r,n){let i=await fetch("https://ai-crw-server-861817b40609.herokuapp.com/api/chat",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({messages:e,contextData:o,businessInfo:r,aiCharacter:n})});if(!i.ok)throw new Error("Failed to fetch AI response");return(await i.json()).reply}var t=require("react/jsx-runtime"),v=({contextData:e,businessInfo:o,aiCharacter:r,chatHeadline:n="Chat with me",direction:i="ltr"})=>{let[h,m]=(0,c.useState)([]),[u,y]=(0,c.useState)(!1),p=(0,c.useRef)(null),f=(0,c.useRef)(null),[s,z]=(0,c.useState)(!1),w=async()=>{if(p.current){let a=p.current.value.trim();if(a){let d={role:"user",content:a};m(g=>[...g,d]),p.current.value="";try{let b={role:"assistant",content:await k([...h,d],e,o,r)};m(E=>[...E,b])}catch(g){console.error("Error fetching AI reply:",g),m(b=>[...b,{role:"assistant",content:"\u26A0\uFE0F Error fetching AI response"}])}}}},M=a=>{a.key==="Enter"&&w()};return(0,c.useEffect)(()=>{f.current&&(f.current.scrollTop=f.current.scrollHeight)},[h]),(0,c.useEffect)(()=>{let a=()=>{z(window.innerWidth<=768)};return a(),window.addEventListener("resize",a),()=>window.removeEventListener("resize",a)},[]),(0,t.jsxs)("div",{id:"chatCon",dir:i,className:u?"open":"",children:[(0,t.jsx)(l.AnimatePresence,{children:u&&(0,t.jsxs)(l.motion.div,{className:"chat-box",initial:{y:"100%",opacity:0},animate:{y:0,opacity:1},exit:{y:"100%",opacity:0},transition:{duration:.4,ease:"easeInOut"},style:{position:s?"fixed":"absolute",top:s?0:"auto",bottom:s?0:"3%",right:s?0:"3%",left:s?0:"auto",width:s?"100%":"20%",height:s?"100%":"30rem",minWidth:s?"auto":"18rem",borderRadius:s?"0":"1.5625rem",background:"#eee",zIndex:9999},children:[(0,t.jsxs)("div",{className:"header",children:[n,(0,t.jsx)("button",{className:"close-button",onClick:()=>y(!1),children:"X"})]}),(0,t.jsx)("div",{className:"msg-area",ref:f,children:h.map((a,d)=>a.role==="user"?(0,t.jsx)("p",{className:"left",children:(0,t.jsx)("span",{children:a.content})},d):(0,t.jsx)("p",{className:"right",children:(0,t.jsx)("span",{children:a.content})},d))}),(0,t.jsxs)("div",{className:"footer",children:[(0,t.jsx)("input",{type:"text",ref:p,onKeyDown:M}),(0,t.jsx)("button",{onClick:w,children:(0,t.jsx)("i",{className:"fa fa-paper-plane"})})]})]})}),(0,t.jsx)(l.AnimatePresence,{children:!u&&(0,t.jsx)(l.motion.div,{className:"pop",initial:{opacity:0,scale:0},animate:{opacity:1,scale:1},exit:{opacity:0,scale:0},transition:{duration:.4},children:(0,t.jsx)("p",{children:(0,t.jsx)(l.motion.img,{onClick:()=>y(!0),src:"https://ai-crw-server-861817b40609.herokuapp.com/blue_chat.png",alt:"Chat",style:{width:60,height:60,cursor:"pointer"}})})})})]})},P=v;0&&(module.exports={PopChat});
//# sourceMappingURL=index.cjs.map