@gauravrathod674/super-customizable-chatbot 0.3.0 → 0.3.2

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.
@@ -1,21 +1,21 @@
1
- (function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("framer-motion"),require("@fortawesome/react-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("@google/generative-ai"),require("openai"),require("@anthropic-ai/sdk"),require("groq-sdk"),require("react-markdown")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","framer-motion","@fortawesome/react-fontawesome","@fortawesome/free-solid-svg-icons","@google/generative-ai","openai","@anthropic-ai/sdk","groq-sdk","react-markdown"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l.SuperCustomizableChatbot={},l.jsxRuntime,l.React,l.framerMotion,l.ReactFontAwesome,l.FreeSolidIcons,l.GoogleGenerativeAI,l.OpenAI,l.Anthropic,l.Groq,l.ReactMarkdown))})(this,function(l,e,s,u,fe,be,pe,ge,we,me,N){"use strict";const ye=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"}),e.jsx("path",{d:"M16.5 14C16.5 14 15 15.5 12 15.5C9 15.5 7.5 14 7.5 14",strokeLinecap:"round"}),e.jsx("circle",{cx:"9",cy:"10",r:"1",fill:"currentColor"}),e.jsx("circle",{cx:"15",cy:"10",r:"1",fill:"currentColor"})]}),xe=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z",strokeLinecap:"round"}),e.jsx("path",{d:"M19.21 17.14C19.21 17.14 19 19 12 19C5 19 4.79 17.14 4.79 17.14C4.79 17.14 6.33 15 12 15C17.67 15 19.21 17.14 19.21 17.14Z",strokeLinecap:"round"})]}),ve=()=>e.jsxs("svg",{fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"w-5 h-5",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.875L6 12z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12h9"})]}),Ce=()=>e.jsxs("div",{className:"flex items-center space-x-1 p-3",children:[e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse"})]}),ke=({fullText:c,onComplete:d})=>{const h=typeof c=="string"?c:"",[m,S]=s.useState("");return s.useEffect(()=>{if(h.length===0){d==null||d();return}let t=0;S("");const v=setInterval(()=>{if(t<h.length){const f=h.charAt(t);S(g=>g+f),t++}else clearInterval(v),d==null||d()},25);return()=>clearInterval(v)},[h,d]),e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{children:m||""})})},Ne=({text:c,animationType:d})=>{const h="prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5";switch(d){case"typing":return e.jsx(ke,{fullText:c});case"fade-in":return e.jsx(u.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:1.5,ease:"easeOut"},children:e.jsx("div",{className:h,children:e.jsx(N,{children:c})})});case"slide-up":return e.jsx(u.motion.div,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{duration:.7,ease:"anticipate"},children:e.jsx("div",{className:h,children:e.jsx(N,{children:c})})});case"zoom-in":return e.jsx(u.motion.div,{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},transition:{duration:1,ease:"backOut"},children:e.jsx("div",{className:h,children:e.jsx(N,{children:c})})});case"flip":return e.jsx(u.motion.div,{initial:{rotateX:-90,opacity:0},animate:{rotateX:0,opacity:1},transition:{duration:1,ease:"easeOut"},style:{transformPerspective:400},children:e.jsx("div",{className:h,children:e.jsx(N,{children:c})})});default:return e.jsx("div",{className:h,children:e.jsx(N,{children:c})})}},Se=c=>{const d=[];if(!c||c.length===0)return d;let m=c.reduce((t,v)=>{const f=t.length>0?t[t.length-1]:null;if(f&&f.sender===v.sender){const g={...f,text:`${f.text}
2
- ${v.text}`};t[t.length-1]=g}else t.push({...v});return t},[]).map(t=>({role:t.sender==="bot"?"model":"user",parts:[{text:t.text}]}));const S=m.findIndex(t=>t.role==="user");if(S>-1)m=m.slice(S);else return[];return m},Te=({botName:c="ChatBot",botAvatar:d=e.jsx(ye,{}),userAvatar:h=e.jsx(xe,{}),welcomeMessage:m="Hello! How can I help?",placeholderText:S="Type a message...",customInstruction:t="",isOpen:v=!1,disabled:f=!1,isTyping:g=!1,onSend:Y=()=>{},theme:y={},geminiApiKey:M,geminiModelName:_="gemini-1.5-flash",openaiApiKey:P,openaiModelName:J="gpt-4o-mini",anthropicApiKey:j,anthropicModelName:Q="claude-3-haiku-20240307",grokApiKey:O,grokModelName:K="llama3-8b-8192",messages:R})=>{const[T]=s.useState(()=>`chatbot-instance-${Math.random().toString(36).substring(2,9)}`),[B,D]=s.useState(v),[Be,Ie]=s.useState(()=>m?[{id:1,text:m,sender:"bot"}]:[]),[q,ee]=s.useState(""),[L,b]=s.useState(!1),$=typeof R<"u",C=$?R:Be,p=$?()=>{}:Ie,oe=s.useRef(null),re=s.useRef(null),te=s.useRef(null),Ee=s.useRef(null),G=s.useMemo(()=>{if(!M)return null;try{return new pe.GoogleGenerativeAI(M).getGenerativeModel({model:_,systemInstruction:t})}catch(o){return console.error("Failed to initialize Gemini:",o),null}},[M,_,t]),W=s.useMemo(()=>P?new ge({apiKey:P,dangerouslyAllowBrowser:!0}):null,[P]),H=s.useMemo(()=>j?new we({apiKey:j,dangerouslyAllowBrowser:!0}):null,[j]),U=s.useMemo(()=>O?new me({apiKey:O,dangerouslyAllowBrowser:!0}):null,[O]),r=s.useMemo(()=>{var k;const o=((k=y==null?void 0:y.window)==null?void 0:k.placement)==="center",n={launcher:{backgroundColor:"#4f46e5",iconColor:"#ffffff",size:"3.5rem"},header:{backgroundColor:"#4f46e5",textColor:"#ffffff",fontFamily:"inherit",fontWeight:"600"},messages:{userBackgroundColor:"#4f46e5",userTextColor:"#ffffff",botBackgroundColor:"#f3f4f6",botTextColor:"#1f2937",fontFamily:"inherit",fontSize:"0.9rem",showAvatars:!0,bubbleShape:"rounded",bubblePointer:!0,animation:"fade-in"},input:{backgroundColor:"#ffffff",textColor:"#1f2937",placeholderTextColor:"#9ca3af",borderColor:"#e5e7eb",focusRingColor:"#4f46e5"},window:{backgroundColor:"#ffffff",borderColor:"#e5e7eb",borderRadius:"0.75rem",width:o?"80vw":"22rem",height:o?"80vh":"30rem",placement:"bottom-right",backdrop:!1,backdropColor:"rgba(0, 0, 0, 0.4)",backdropBlur:"4px",scrollbarThumbColor:"#a1a1aa",scrollbarTrackColor:"#f1f5f9"}};return{launcher:{...n.launcher,...y.launcher},header:{...n.header,...y.header},messages:{...n.messages,...y.messages},input:{...n.input,...y.input},window:{...n.window,...y.window}}},[y]),$e=s.useMemo(()=>({"--chatbot-launcher-bg":r.launcher.backgroundColor,"--chatbot-launcher-icon-color":r.launcher.iconColor,"--chatbot-launcher-size":r.launcher.size,"--chatbot-header-bg":r.header.backgroundColor,"--chatbot-header-text-color":r.header.textColor,"--chatbot-header-font-family":r.header.fontFamily,"--chatbot-header-font-weight":r.header.fontWeight,"--chatbot-user-msg-bg":r.messages.userBackgroundColor,"--chatbot-user-msg-text-color":r.messages.userTextColor,"--chatbot-bot-msg-bg":r.messages.botBackgroundColor,"--chatbot-bot-msg-text-color":r.messages.botTextColor,"--chatbot-msg-font-family":r.messages.fontFamily,"--chatbot-msg-font-size":r.messages.fontSize,"--chatbot-input-bg":r.input.backgroundColor,"--chatbot-input-text-color":r.input.textColor,"--chatbot-input-placeholder-color":r.input.placeholderTextColor,"--chatbot-input-border-color":r.input.borderColor,"--chatbot-input-focus-ring":r.input.focusRingColor,"--chatbot-window-bg":r.window.backgroundColor,"--chatbot-window-border-color":r.window.borderColor,"--chatbot-window-border-radius":r.window.borderRadius,"--chatbot-window-width":r.window.width,"--chatbot-window-height":r.window.height}),[r]);s.useEffect(()=>{var A;const o=r.window.scrollbarThumbColor,n=r.window.scrollbarTrackColor,k=`scrollbar-style-${T}`;(A=document.getElementById(k))==null||A.remove();const E=document.createElement("style");return E.id=k,E.innerHTML=`
1
+ (function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("react/jsx-runtime"),require("react"),require("framer-motion"),require("@fortawesome/react-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("@google/generative-ai"),require("openai"),require("@anthropic-ai/sdk"),require("groq-sdk"),require("react-markdown")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","framer-motion","@fortawesome/react-fontawesome","@fortawesome/free-solid-svg-icons","@google/generative-ai","openai","@anthropic-ai/sdk","groq-sdk","react-markdown"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.SuperCustomizableChatbot={},i.jsxRuntime,i.React,i.framerMotion,i.ReactFontAwesome,i.FreeSolidIcons,i.GoogleGenerativeAI,i.OpenAI,i.Anthropic,i.Groq,i.ReactMarkdown))})(this,function(i,e,t,b,be,ge,pe,we,me,ye,N){"use strict";const xe=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4Z"}),e.jsx("path",{d:"M16.5 14C16.5 14 15 15.5 12 15.5C9 15.5 7.5 14 7.5 14",strokeLinecap:"round"}),e.jsx("circle",{cx:"9",cy:"10",r:"1",fill:"currentColor"}),e.jsx("circle",{cx:"15",cy:"10",r:"1",fill:"currentColor"})]}),ve=()=>e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",className:"w-full h-full",children:[e.jsx("path",{d:"M12 12C14.2091 12 16 10.2091 16 8C16 5.79086 14.2091 4 12 4C9.79086 4 8 5.79086 8 8C8 10.2091 9.79086 12 12 12Z",strokeLinecap:"round"}),e.jsx("path",{d:"M19.21 17.14C19.21 17.14 19 19 12 19C5 19 4.79 17.14 4.79 17.14C4.79 17.14 6.33 15 12 15C17.67 15 19.21 17.14 19.21 17.14Z",strokeLinecap:"round"})]}),Ce=()=>e.jsxs("svg",{fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"w-5 h-5",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.875L6 12z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 12h9"})]}),ke=()=>e.jsxs("div",{className:"flex items-center space-x-1 p-3",children:[e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.3s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse [animation-delay:-0.15s]"}),e.jsx("div",{className:"w-2 h-2 bg-gray-400 rounded-full animate-pulse"})]}),Ne=({fullText:h,onComplete:u,components:g})=>{const l=typeof h=="string"?h:"",[I,s]=t.useState("");return t.useEffect(()=>{if(l.length===0){u==null||u();return}let x=0;s("");const f=setInterval(()=>{if(x<l.length){const m=l.charAt(x);s(D=>D+m),x++}else clearInterval(f),u==null||u()},25);return()=>clearInterval(f)},[l,u]),e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{components:g,children:I||""})})},Se=({text:h,animationType:u,components:g})=>{const l="prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5";switch(u){case"typing":return e.jsx(Ne,{fullText:h,components:g});case"fade-in":return e.jsx(b.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:1.5,ease:"easeOut"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"slide-up":return e.jsx(b.motion.div,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{duration:.7,ease:"anticipate"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"zoom-in":return e.jsx(b.motion.div,{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},transition:{duration:1,ease:"backOut"},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});case"flip":return e.jsx(b.motion.div,{initial:{rotateX:-90,opacity:0},animate:{rotateX:0,opacity:1},transition:{duration:1,ease:"easeOut"},style:{transformPerspective:400},children:e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})});default:return e.jsx("div",{className:l,children:e.jsx(N,{components:g,children:h})})}},Te=h=>{const u=[];if(!h||h.length===0)return u;let l=h.reduce((s,x)=>{const f=s.length>0?s[s.length-1]:null;if(f&&f.sender===x.sender){const m={...f,text:`${f.text}
2
+ ${x.text}`};s[s.length-1]=m}else s.push({...x});return s},[]).map(s=>({role:s.sender==="bot"?"model":"user",parts:[{text:s.text}]}));const I=l.findIndex(s=>s.role==="user");if(I>-1)l=l.slice(I);else return[];return l},Be=({botName:h="ChatBot",botAvatar:u=e.jsx(xe,{}),userAvatar:g=e.jsx(ve,{}),welcomeMessage:l="Hello! How can I help?",placeholderText:I="Type a message...",customInstruction:s="",isOpen:x=!1,disabled:f=!1,isTyping:m=!1,onSend:D=()=>{},theme:v={},geminiApiKey:P,geminiModelName:_="gemini-1.5-flash",openaiApiKey:j,openaiModelName:J="gpt-4o-mini",anthropicApiKey:O,anthropicModelName:Q="claude-3-haiku-20240307",grokApiKey:G,grokModelName:K="llama3-8b-8192",messages:R})=>{const[S]=t.useState(()=>`chatbot-instance-${Math.random().toString(36).substring(2,9)}`),[T,q]=t.useState(x),[Ie,Ee]=t.useState(()=>l?[{id:1,text:l,sender:"bot"}]:[]),[L,ee]=t.useState(""),[M,p]=t.useState(!1),$=typeof R<"u",k=$?R:Ie,w=$?()=>{}:Ee,oe=t.useRef(null),re=t.useRef(null),te=t.useRef(null),$e=t.useRef(null),W=t.useMemo(()=>{if(!P)return null;try{return new pe.GoogleGenerativeAI(P).getGenerativeModel({model:_,systemInstruction:s})}catch(o){return console.error("Failed to initialize Gemini:",o),null}},[P,_,s]),H=t.useMemo(()=>j?new we({apiKey:j,dangerouslyAllowBrowser:!0}):null,[j]),U=t.useMemo(()=>O?new me({apiKey:O,dangerouslyAllowBrowser:!0}):null,[O]),V=t.useMemo(()=>G?new ye({apiKey:G,dangerouslyAllowBrowser:!0}):null,[G]),r=t.useMemo(()=>{var c;const o=((c=v==null?void 0:v.window)==null?void 0:c.placement)==="center",a={launcher:{backgroundColor:"#4f46e5",iconColor:"#ffffff",size:"3.5rem"},header:{backgroundColor:"#4f46e5",textColor:"#ffffff",fontFamily:"inherit",fontWeight:"600"},messages:{userBackgroundColor:"#4f46e5",userTextColor:"#ffffff",botBackgroundColor:"#f3f4f6",botTextColor:"#1f2937",fontFamily:"inherit",fontSize:"0.9rem",showAvatars:!0,bubbleShape:"rounded",bubblePointer:!0,animation:"fade-in",markdownStyles:{}},input:{backgroundColor:"#ffffff",textColor:"#1f2937",placeholderTextColor:"#9ca3af",borderColor:"#e5e7eb",focusRingColor:"#4f46e5"},window:{backgroundColor:"#ffffff",borderColor:"#e5e7eb",borderRadius:"0.75rem",width:o?"80vw":"22rem",height:o?"80vh":"30rem",placement:"bottom-right",backdrop:!1,backdropColor:"rgba(0, 0, 0, 0.4)",backdropBlur:"4px",scrollbarThumbColor:"#a1a1aa",scrollbarTrackColor:"#f1f5f9"}};return{launcher:{...a.launcher,...v.launcher},header:{...a.header,...v.header},messages:{...a.messages,...v.messages},input:{...a.input,...v.input},window:{...a.window,...v.window}}},[v]),Ae=t.useMemo(()=>({"--chatbot-launcher-bg":r.launcher.backgroundColor,"--chatbot-launcher-icon-color":r.launcher.iconColor,"--chatbot-launcher-size":r.launcher.size,"--chatbot-header-bg":r.header.backgroundColor,"--chatbot-header-text-color":r.header.textColor,"--chatbot-header-font-family":r.header.fontFamily,"--chatbot-header-font-weight":r.header.fontWeight,"--chatbot-user-msg-bg":r.messages.userBackgroundColor,"--chatbot-user-msg-text-color":r.messages.userTextColor,"--chatbot-bot-msg-bg":r.messages.botBackgroundColor,"--chatbot-bot-msg-text-color":r.messages.botTextColor,"--chatbot-msg-font-family":r.messages.fontFamily,"--chatbot-msg-font-size":r.messages.fontSize,"--chatbot-input-bg":r.input.backgroundColor,"--chatbot-input-text-color":r.input.textColor,"--chatbot-input-placeholder-color":r.input.placeholderTextColor,"--chatbot-input-border-color":r.input.borderColor,"--chatbot-input-focus-ring":r.input.focusRingColor,"--chatbot-window-bg":r.window.backgroundColor,"--chatbot-window-border-color":r.window.borderColor,"--chatbot-window-border-radius":r.window.borderRadius,"--chatbot-window-width":r.window.width,"--chatbot-window-height":r.window.height}),[r]),se=t.useMemo(()=>{const o=r.messages.markdownStyles||{};return{strong:({node:a,...c})=>e.jsx("strong",{style:{color:o.boldColor||"inherit"},...c}),em:({node:a,...c})=>e.jsx("em",{style:{color:o.italicColor||"inherit"},...c}),a:({node:a,...c})=>e.jsx("a",{style:{color:o.linkColor||"#3b82f6"},...c}),code:({node:a,...c})=>e.jsx("code",{style:{color:o.codeColor||"inherit",backgroundColor:o.codeBackgroundColor||"rgba(0, 0, 0, 0.1)",padding:"0.1rem 0.3rem",borderRadius:"0.25rem"},...c})}},[r.messages.markdownStyles]);t.useEffect(()=>{var A;const o=r.window.scrollbarThumbColor,a=r.window.scrollbarTrackColor,c=`scrollbar-style-${S}`;(A=document.getElementById(c))==null||A.remove();const E=document.createElement("style");return E.id=c,E.innerHTML=`
3
3
  /* Modern browsers */
4
- #${T} .chatbot-message-list {
4
+ #${S} .chatbot-message-list {
5
5
  scrollbar-width: thin;
6
- scrollbar-color: ${o} ${n};
6
+ scrollbar-color: ${o} ${a};
7
7
  }
8
8
  /* WebKit-based browsers (Chrome, Safari, Edge) */
9
- #${T} .chatbot-message-list::-webkit-scrollbar {
9
+ #${S} .chatbot-message-list::-webkit-scrollbar {
10
10
  width: 8px;
11
11
  }
12
- #${T} .chatbot-message-list::-webkit-scrollbar-track {
13
- background: ${n};
12
+ #${S} .chatbot-message-list::-webkit-scrollbar-track {
13
+ background: ${a};
14
14
  border-radius: 4px;
15
15
  }
16
- #${T} .chatbot-message-list::-webkit-scrollbar-thumb {
16
+ #${S} .chatbot-message-list::-webkit-scrollbar-thumb {
17
17
  background-color: ${o};
18
18
  border-radius: 4px;
19
- border: 2px solid ${n};
19
+ border: 2px solid ${a};
20
20
  }
21
- `,document.head.appendChild(E),()=>{var z;(z=document.getElementById(k))==null||z.remove()}},[T,r.window.scrollbarThumbColor,r.window.scrollbarTrackColor]),s.useEffect(()=>{b(g)},[g]),s.useEffect(()=>{var o;(o=re.current)==null||o.scrollIntoView({behavior:"smooth"})},[C,L,g]),s.useEffect(()=>{var o,n;B?(o=oe.current)==null||o.focus():(n=te.current)==null||n.focus()},[B]),s.useEffect(()=>{const o=n=>{n.key==="Escape"&&B&&D(!1)};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[B]);const V=s.useCallback(async()=>{var E,A,z,ae,ne,le,ie,ce,de,he,ue;const o=q.trim();if(!o||f||L||g)return;const n={id:Date.now(),text:o,sender:"user"},k=[...C,n];if($||p(a=>[...a,n]),Y(o),ee(""),G){b(!0);try{const a=Se(k),i=a.slice(0,-1),I=((A=(E=a[a.length-1])==null?void 0:E.parts[0])==null?void 0:A.text)||"",De=await(await(await G.startChat({history:i}).sendMessage(I)).response).text()||"(no response)",qe={id:Date.now()+1,text:De,sender:"bot"};p(Le=>[...Le,qe])}catch(a){console.error("Gemini API Error:",a);const i={id:Date.now()+1,text:"Sorry, an error occurred. Please try again.",sender:"bot"};p(I=>[...I,i])}finally{b(!1)}}else if(W){b(!0);try{const a=t?[{role:"system",content:t}]:[],i=C.map(w=>({role:w.sender==="bot"?"assistant":"user",content:w.text})),x=((le=(ne=(ae=(z=(await W.chat.completions.create({model:J,messages:[...a,...i,{role:"user",content:o}]})).choices)==null?void 0:z[0])==null?void 0:ae.message)==null?void 0:ne.content)==null?void 0:le.trim())||"(no response)";p(w=>[...w,{id:Date.now()+1,text:x,sender:"bot"}])}catch(a){console.error("OpenAI Error:",a),p(i=>[...i,{id:Date.now()+1,text:"Sorry, something went wrong with OpenAI.",sender:"bot"}])}finally{b(!1)}}else if(H){b(!0);try{const a=C.map(x=>({role:x.sender==="bot"?"assistant":"user",content:x.text})),I=((ce=(ie=(await H.messages.create({model:Q,system:t,messages:[...a,{role:"user",content:o}],max_tokens:1024})).content[0])==null?void 0:ie.text)==null?void 0:ce.trim())||"(no response)";p(x=>[...x,{id:Date.now()+1,text:I,sender:"bot"}])}catch(a){console.error("Anthropic API Error:",a),p(i=>[...i,{id:Date.now()+1,text:"Sorry, an error occurred with Claude.",sender:"bot"}])}finally{b(!1)}}else if(U){b(!0);try{const a=t?[{role:"system",content:t}]:[],i=C.map(w=>({role:w.sender==="bot"?"assistant":"user",content:w.text})),x=((ue=(he=(de=(await U.chat.completions.create({messages:[...a,...i,{role:"user",content:o}],model:K})).choices[0])==null?void 0:de.message)==null?void 0:he.content)==null?void 0:ue.trim())||"(no response)";p(w=>[...w,{id:Date.now()+1,text:x,sender:"bot"}])}catch(a){console.error("Groq API Error:",a),p(i=>[...i,{id:Date.now()+1,text:"Sorry, an error occurred with Groq.",sender:"bot"}])}finally{b(!1)}}else $||(b(!0),setTimeout(()=>{const a={id:Date.now()+1,text:`You said: "${o}"`,sender:"bot"};p(i=>[...i,a]),b(!1)},800))},[q,f,L,g,Y,G,W,H,U,$,C,p,J,Q,K,t]),Ae=s.useCallback(o=>{o.key==="Enter"&&V()},[V]),Z=o=>typeof o=="string"?e.jsx("img",{src:o,alt:"avatar",className:"w-8 h-8 rounded-full object-cover"}):e.jsx("div",{className:"w-8 h-8 rounded-full text-gray-500",children:o}),X=L||g,se={"bottom-right":"bottom-5 right-5","bottom-left":"bottom-5 left-5",center:"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"},ze=r.window.placement==="center",F={rounded:"rounded-xl",square:"rounded-md"};return e.jsxs("div",{id:T,style:$e,className:"font-sans",children:[e.jsx(u.AnimatePresence,{children:!B&&e.jsx(u.motion.button,{ref:te,onClick:()=>D(!0),"aria-label":"Open Chat",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{scale:0,opacity:0},transition:{duration:.2,ease:"easeOut"},className:"fixed bottom-10 right-10 z-50 rounded-full shadow-lg flex items-center justify-center cursor-pointer border-2 border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[--chatbot-launcher-bg]",style:{backgroundColor:"var(--chatbot-launcher-bg)",color:"var(--chatbot-launcher-icon-color)",width:"var(--chatbot-launcher-size)",height:"var(--chatbot-launcher-size)"},children:e.jsx(fe.FontAwesomeIcon,{icon:be.faCommentDots})})}),e.jsxs(u.AnimatePresence,{children:[B&&ze&&r.window.backdrop&&e.jsx(u.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{backgroundColor:r.window.backdropColor,backdropFilter:`blur(${r.window.backdropBlur})`,WebkitBackdropFilter:`blur(${r.window.backdropBlur})`},className:"fixed inset-0 z-40",onClick:()=>D(!1)},"chatbot-backdrop"),B&&e.jsxs("div",{ref:Ee,"aria-modal":"true",role:"dialog",className:`fixed ${se[r.window.placement]||se["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,style:{width:"var(--chatbot-window-width)",height:"var(--chatbot-window-height)",borderRadius:"var(--chatbot-window-border-radius)",backgroundColor:"var(--chatbot-window-bg)",borderColor:"var(--chatbot-window-border-color)"},children:[e.jsxs("header",{className:"flex items-center justify-between p-3 flex-shrink-0",style:{background:"var(--chatbot-header-bg)",color:"var(--chatbot-header-text-color)"},children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1",children:Z(d)}),e.jsx("span",{style:{fontFamily:"var(--chatbot-header-font-family)",fontWeight:"var(--chatbot-header-font-weight)"},className:"text-lg",children:c})]}),e.jsx("button",{onClick:()=>D(!1),"aria-label":"Close Chat",className:"p-1 rounded-full hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor",className:"w-6 h-6",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),e.jsxs("div",{role:"log","aria-live":"polite",className:"chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",children:[e.jsx(u.AnimatePresence,{initial:!1,children:C.map((o,n)=>e.jsxs(u.motion.div,{layout:!0,initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.3,ease:"easeOut"},className:`flex items-end max-w-[85%] gap-2 ${o.sender==="user"?"ml-auto flex-row-reverse":"mr-auto"}`,children:[r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:Z(o.sender==="user"?h:d)}),e.jsx(u.motion.div,{layout:"position",transition:{duration:.2,ease:"easeOut"},className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} ${r.messages.bubblePointer?o.sender==="user"?"rounded-br-none":"rounded-bl-none":""}`,style:{backgroundColor:o.sender==="user"?"var(--chatbot-user-msg-bg)":"var(--chatbot-bot-msg-bg)",color:o.sender==="user"?"var(--chatbot-user-msg-text-color)":"var(--chatbot-bot-msg-text-color)",fontFamily:"var(--chatbot-msg-font-family)",fontSize:"var(--chatbot-msg-font-size)"},children:o.sender==="bot"&&n===C.length-1?e.jsx(Ne,{text:o.text,animationType:r.messages.animation}):e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{children:o.text})})})]},o.id))}),X&&e.jsxs("div",{className:"flex items-end max-w-[85%] gap-2 mr-auto",children:[" ",r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:Z(d)}),e.jsx("div",{className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} rounded-bl-none`,style:{backgroundColor:"var(--chatbot-bot-msg-bg)"},children:e.jsx(Ce,{})})]},"typing-indicator"),e.jsx("div",{ref:re})]}),e.jsx("footer",{className:"p-3 border-t flex-shrink-0",style:{borderColor:"var(--chatbot-window-border-color)",backgroundColor:"var(--chatbot-input-bg)"},children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("input",{ref:oe,type:"text",value:q,onChange:o=>ee(o.target.value),onKeyPress:Ae,placeholder:S,disabled:f||X,"aria-label":"Chat input",className:"flex-1 w-full px-4 py-2 bg-transparent rounded-full border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",style:{color:"var(--chatbot-input-text-color)",borderColor:"var(--chatbot-input-border-color)","--tw-ring-color":"var(--chatbot-input-focus-ring)"}}),e.jsx("button",{onClick:V,disabled:!q.trim()||f||X,"aria-label":"Send Message",className:"px-4 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",style:{backgroundColor:"var(--chatbot-user-msg-bg)",color:"var(--chatbot-user-msg-text-color)","--tw-ring-color":"var(--chatbot-user-msg-bg)"},children:e.jsx(ve,{})})]})})]},"chatbot-window")]})]})};l.ChatBot=Te,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
21
+ `,document.head.appendChild(E),()=>{var z;(z=document.getElementById(c))==null||z.remove()}},[S,r.window.scrollbarThumbColor,r.window.scrollbarTrackColor]),t.useEffect(()=>{p(m)},[m]),t.useEffect(()=>{var o;(o=re.current)==null||o.scrollIntoView({behavior:"smooth"})},[k,M,m]),t.useEffect(()=>{var o,a;T?(o=oe.current)==null||o.focus():(a=te.current)==null||a.focus()},[T]),t.useEffect(()=>{const o=a=>{a.key==="Escape"&&T&&q(!1)};return window.addEventListener("keydown",o),()=>window.removeEventListener("keydown",o)},[T]);const Z=t.useCallback(async()=>{var E,A,z,ne,le,ie,ce,de,he,ue,fe;const o=L.trim();if(!o||f||M||m)return;const a={id:Date.now(),text:o,sender:"user"},c=[...k,a];if($||w(n=>[...n,a]),D(o),ee(""),W){p(!0);try{const n=Te(c),d=n.slice(0,-1),B=((A=(E=n[n.length-1])==null?void 0:E.parts[0])==null?void 0:A.text)||"",qe=await(await(await W.startChat({history:d}).sendMessage(B)).response).text()||"(no response)",Le={id:Date.now()+1,text:qe,sender:"bot"};w(Me=>[...Me,Le])}catch(n){console.error("Gemini API Error:",n);const d={id:Date.now()+1,text:"Sorry, an error occurred. Please try again.",sender:"bot"};w(B=>[...B,d])}finally{p(!1)}}else if(H){p(!0);try{const n=s?[{role:"system",content:s}]:[],d=k.map(y=>({role:y.sender==="bot"?"assistant":"user",content:y.text})),C=((ie=(le=(ne=(z=(await H.chat.completions.create({model:J,messages:[...n,...d,{role:"user",content:o}]})).choices)==null?void 0:z[0])==null?void 0:ne.message)==null?void 0:le.content)==null?void 0:ie.trim())||"(no response)";w(y=>[...y,{id:Date.now()+1,text:C,sender:"bot"}])}catch(n){console.error("OpenAI Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, something went wrong with OpenAI.",sender:"bot"}])}finally{p(!1)}}else if(U){p(!0);try{const n=k.map(C=>({role:C.sender==="bot"?"assistant":"user",content:C.text})),B=((de=(ce=(await U.messages.create({model:Q,system:s,messages:[...n,{role:"user",content:o}],max_tokens:1024})).content[0])==null?void 0:ce.text)==null?void 0:de.trim())||"(no response)";w(C=>[...C,{id:Date.now()+1,text:B,sender:"bot"}])}catch(n){console.error("Anthropic API Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, an error occurred with Claude.",sender:"bot"}])}finally{p(!1)}}else if(V){p(!0);try{const n=s?[{role:"system",content:s}]:[],d=k.map(y=>({role:y.sender==="bot"?"assistant":"user",content:y.text})),C=((fe=(ue=(he=(await V.chat.completions.create({messages:[...n,...d,{role:"user",content:o}],model:K})).choices[0])==null?void 0:he.message)==null?void 0:ue.content)==null?void 0:fe.trim())||"(no response)";w(y=>[...y,{id:Date.now()+1,text:C,sender:"bot"}])}catch(n){console.error("Groq API Error:",n),w(d=>[...d,{id:Date.now()+1,text:"Sorry, an error occurred with Groq.",sender:"bot"}])}finally{p(!1)}}else $||(p(!0),setTimeout(()=>{const n={id:Date.now()+1,text:`You said: "${o}"`,sender:"bot"};w(d=>[...d,n]),p(!1)},800))},[L,f,M,m,D,W,H,U,V,$,k,w,J,Q,K,s]),ze=t.useCallback(o=>{o.key==="Enter"&&Z()},[Z]),X=o=>typeof o=="string"?e.jsx("img",{src:o,alt:"avatar",className:"w-8 h-8 rounded-full object-cover"}):e.jsx("div",{className:"w-8 h-8 rounded-full text-gray-500",children:o}),Y=M||m,ae={"bottom-right":"bottom-5 right-5","bottom-left":"bottom-5 left-5",center:"top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"},De=r.window.placement==="center",F={rounded:"rounded-xl",square:"rounded-md"};return e.jsxs("div",{id:S,style:Ae,className:"font-sans",children:[e.jsx(b.AnimatePresence,{children:!T&&e.jsx(b.motion.button,{ref:te,onClick:()=>q(!0),"aria-label":"Open Chat",initial:{scale:0,opacity:0},animate:{scale:1,opacity:1},exit:{scale:0,opacity:0},transition:{duration:.2,ease:"easeOut"},className:"fixed bottom-10 right-10 z-50 rounded-full shadow-lg flex items-center justify-center cursor-pointer border-2 border-white/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[--chatbot-launcher-bg]",style:{backgroundColor:"var(--chatbot-launcher-bg)",color:"var(--chatbot-launcher-icon-color)",width:"var(--chatbot-launcher-size)",height:"var(--chatbot-launcher-size)"},children:e.jsx(be.FontAwesomeIcon,{icon:ge.faCommentDots})})}),e.jsxs(b.AnimatePresence,{children:[T&&De&&r.window.backdrop&&e.jsx(b.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{backgroundColor:r.window.backdropColor,backdropFilter:`blur(${r.window.backdropBlur})`,WebkitBackdropFilter:`blur(${r.window.backdropBlur})`},className:"fixed inset-0 z-40",onClick:()=>q(!1)},"chatbot-backdrop"),T&&e.jsxs("div",{ref:$e,"aria-modal":"true",role:"dialog",className:`fixed ${ae[r.window.placement]||ae["bottom-right"]} z-50 flex flex-col overflow-hidden shadow-2xl border`,style:{width:"var(--chatbot-window-width)",height:"var(--chatbot-window-height)",borderRadius:"var(--chatbot-window-border-radius)",backgroundColor:"var(--chatbot-window-bg)",borderColor:"var(--chatbot-window-border-color)"},children:[e.jsxs("header",{className:"flex items-center justify-between p-3 flex-shrink-0",style:{background:"var(--chatbot-header-bg)",color:"var(--chatbot-header-text-color)"},children:[e.jsxs("div",{className:"flex items-center space-x-3",children:[e.jsx("div",{className:"w-10 h-10 rounded-full bg-white/30 flex items-center justify-center p-1",children:X(u)}),e.jsx("span",{style:{fontFamily:"var(--chatbot-header-font-family)",fontWeight:"var(--chatbot-header-font-weight)"},className:"text-lg",children:h})]}),e.jsx("button",{onClick:()=>q(!1),"aria-label":"Close Chat",className:"p-1 rounded-full hover:bg-white/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-white",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor",className:"w-6 h-6",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),e.jsxs("div",{role:"log","aria-live":"polite",className:"chatbot-message-list flex-1 p-4 overflow-y-auto space-y-4",children:[e.jsx(b.AnimatePresence,{initial:!1,children:k.map((o,a)=>e.jsxs(b.motion.div,{layout:!0,initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:-10},transition:{duration:.3,ease:"easeOut"},className:`flex items-end max-w-[85%] gap-2 ${o.sender==="user"?"ml-auto flex-row-reverse":"mr-auto"}`,children:[r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:X(o.sender==="user"?g:u)}),e.jsx(b.motion.div,{layout:"position",transition:{duration:.2,ease:"easeOut"},className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} ${r.messages.bubblePointer?o.sender==="user"?"rounded-br-none":"rounded-bl-none":""}`,style:{backgroundColor:o.sender==="user"?"var(--chatbot-user-msg-bg)":"var(--chatbot-bot-msg-bg)",color:o.sender==="user"?"var(--chatbot-user-msg-text-color)":"var(--chatbot-bot-msg-text-color)",fontFamily:"var(--chatbot-msg-font-family)",fontSize:"var(--chatbot-msg-font-size)"},children:o.sender==="bot"&&a===k.length-1?e.jsx(Se,{text:o.text,animationType:r.messages.animation,components:se}):e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0 prose-headings:my-2 prose-ul:my-1 prose-li:my-0.5",style:{color:"inherit"},children:e.jsx(N,{components:se,children:o.text})})})]},o.id))}),Y&&e.jsxs("div",{className:"flex items-end max-w-[85%] gap-2 mr-auto",children:[" ",r.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:X(u)}),e.jsx("div",{className:`px-3 py-2 ${F[r.messages.bubbleShape]||F.rounded} rounded-bl-none`,style:{backgroundColor:"var(--chatbot-bot-msg-bg)"},children:e.jsx(ke,{})})]},"typing-indicator"),e.jsx("div",{ref:re})]}),e.jsx("footer",{className:"p-3 border-t flex-shrink-0",style:{borderColor:"var(--chatbot-window-border-color)",backgroundColor:"var(--chatbot-input-bg)"},children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsx("input",{ref:oe,type:"text",value:L,onChange:o=>ee(o.target.value),onKeyPress:ze,placeholder:I,disabled:f||Y,"aria-label":"Chat input",className:"flex-1 w-full px-4 py-2 bg-transparent rounded-full border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60",style:{color:"var(--chatbot-input-text-color)",borderColor:"var(--chatbot-input-border-color)","--tw-ring-color":"var(--chatbot-input-focus-ring)"}}),e.jsx("button",{onClick:Z,disabled:!L.trim()||f||Y,"aria-label":"Send Message",className:"px-4 h-10 rounded-full flex items-center justify-center flex-shrink-0 font-semibold text-sm transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",style:{backgroundColor:"var(--chatbot-user-msg-bg)",color:"var(--chatbot-user-msg-text-color)","--tw-ring-color":"var(--chatbot-user-msg-bg)"},children:e.jsx(Ce,{})})]})})]},"chatbot-window")]})]})};i.ChatBot=Be,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@gauravrathod674/super-customizable-chatbot",
3
3
  "private": false,
4
- "version": "0.3.0",
4
+ "version": "0.3.2",
5
5
  "type": "module",
6
6
  "description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
7
7
  "scripts": {