ai-crw/dist/index.js

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.

import{useState as x,useRef as v,useEffect as z}from"react";function b(a,{insertAt:i}={}){if(!a||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",i==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=a:o.appendChild(document.createTextNode(a))}b(`@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}}
`);import"@fortawesome/fontawesome-free/css/all.min.css";import{motion as C,AnimatePresence as M}from"framer-motion";async function k(a,i,r,o){let s=await fetch("https://ai-crw-server-861817b40609.herokuapp.com/api/chat",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({messages:a,contextData:i,businessInfo:r,aiCharacter:o})});if(!s.ok)throw new Error("Failed to fetch AI response");return(await s.json()).reply}import{jsx as t,jsxs as f}from"react/jsx-runtime";var j=({contextData:a,businessInfo:i,aiCharacter:r,chatHeadline:o="Chat with me",direction:s="ltr"})=>{let[l,g]=x([]),[m,y]=x(!1),d=v(null),h=v(null),[n,E]=x(!1),w=async()=>{if(d.current){let e=d.current.value.trim();if(e){let c={role:"user",content:e};g(p=>[...p,c]),d.current.value="";try{let u={role:"assistant",content:await k([...l,c],a,i,r)};g(N=>[...N,u])}catch(p){console.error("Error fetching AI reply:",p),g(u=>[...u,{role:"assistant",content:"\u26A0\uFE0F Error fetching AI response"}])}}}},I=e=>{e.key==="Enter"&&w()};return z(()=>{h.current&&(h.current.scrollTop=h.current.scrollHeight)},[l]),z(()=>{let e=()=>{E(window.innerWidth<=768)};return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),f("div",{id:"chatCon",dir:s,className:m?"open":"",children:[t(M,{children:m&&f(C.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:n?"fixed":"absolute",top:n?0:"auto",bottom:n?0:"3%",right:n?0:"3%",left:n?0:"auto",width:n?"100%":"20%",height:n?"100%":"30rem",minWidth:n?"auto":"18rem",borderRadius:n?"0":"1.5625rem",background:"#eee",zIndex:9999},children:[f("div",{className:"header",children:[o,t("button",{className:"close-button",onClick:()=>y(!1),children:"X"})]}),t("div",{className:"msg-area",ref:h,children:l.map((e,c)=>e.role==="user"?t("p",{className:"left",children:t("span",{children:e.content})},c):t("p",{className:"right",children:t("span",{children:e.content})},c))}),f("div",{className:"footer",children:[t("input",{type:"text",ref:d,onKeyDown:I}),t("button",{onClick:w,children:t("i",{className:"fa fa-paper-plane"})})]})]})}),t(M,{children:!m&&t(C.div,{className:"pop",initial:{opacity:0,scale:0},animate:{opacity:1,scale:1},exit:{opacity:0,scale:0},transition:{duration:.4},children:t("p",{children:t(C.img,{onClick:()=>y(!0),src:"https://ai-crw-server-861817b40609.herokuapp.com/blue_chat.png",alt:"Chat",style:{width:60,height:60,cursor:"pointer"}})})})})]})},K=j;export{j as PopChat,K as default};
//# sourceMappingURL=index.js.map