@gauravrathod674/super-customizable-chatbot 0.4.0 → 0.5.0
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.
- package/README.md +32 -1
- package/dist/style.css +1 -1
- package/dist/super-customizable-chatbot.es.js +623 -421
- package/dist/super-customizable-chatbot.umd.js +18 -12
- package/package.json +1 -1
|
@@ -1,21 +1,27 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
${
|
|
3
|
-
/*
|
|
4
|
-
#${
|
|
1
|
+
(function(u,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):(u=typeof globalThis<"u"?globalThis:u||self,e(u.SuperCustomizableChatbot={},u.jsxRuntime,u.React,u.framerMotion,u.ReactFontAwesome,u.FreeSolidIcons,u.GoogleGenerativeAI,u.OpenAI,u.Anthropic,u.Groq,u.ReactMarkdown))})(this,function(u,e,s,p,I,S,Ne,Te,$e,Ie,A){"use strict";const M=a=>new Promise((d,b)=>{const n=new FileReader;n.readAsDataURL(a),n.onload=()=>d(n.result.split(",")[1]),n.onerror=y=>b(y)}),Se=()=>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"})]}),Ae=()=>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"})]}),Fe=()=>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"})]}),Be=()=>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"})]}),je=({file:a,onRemove:d})=>{const[b,n]=s.useState(null);return s.useEffect(()=>{if(a&&a.type.startsWith("image/")){const y=URL.createObjectURL(a);return n(y),()=>URL.revokeObjectURL(y)}n(null)},[a]),a?e.jsxs("div",{className:"relative inline-flex items-center gap-2 p-2 mb-2 bg-[--chatbot-bot-msg-bg] rounded-lg border border-[--chatbot-input-border-color] max-w-xs",children:[e.jsx("div",{className:"flex-shrink-0 w-10 h-10 flex items-center justify-center bg-black/20 rounded-md",children:b?e.jsx("img",{src:b,alt:a.name,className:"w-full h-full object-cover rounded-md"}):e.jsx(I.FontAwesomeIcon,{icon:S.faFileAlt,className:"w-5 h-5 text-white/70"})}),e.jsx("div",{className:"flex-1 min-w-0 pr-6",children:e.jsx("p",{className:"text-sm font-medium text-[--chatbot-input-text-color] truncate",title:a.name,children:a.name})}),e.jsx("button",{onClick:d,"aria-label":"Remove file",className:"absolute top-1 right-1 w-2 h-2 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors",children:e.jsx(I.FontAwesomeIcon,{icon:S.faTimes,className:"w-3 h-3"})})]}):null},Le=({fullText:a,onComplete:d,components:b})=>{const n=typeof a=="string"?a:"",[y,c]=s.useState("");return s.useEffect(()=>{if(n.length===0){d==null||d();return}let k=0;c("");const g=setInterval(()=>{if(k<n.length){const C=n.charAt(k);c(P=>P+C),k++}else clearInterval(g),d==null||d()},25);return()=>clearInterval(g)},[n,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(A,{components:b,children:y||""})})},Ee=({text:a,animationType:d,components:b})=>{const n="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(Le,{fullText:a,components:b});case"fade-in":return e.jsx(p.motion.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},transition:{duration:1.5,ease:"easeOut"},children:e.jsx("div",{className:n,children:e.jsx(A,{components:b,children:a})})});case"slide-up":return e.jsx(p.motion.div,{initial:{y:50,opacity:0},animate:{y:0,opacity:1},transition:{duration:.7,ease:"anticipate"},children:e.jsx("div",{className:n,children:e.jsx(A,{components:b,children:a})})});case"zoom-in":return e.jsx(p.motion.div,{initial:{scale:.5,opacity:0},animate:{scale:1,opacity:1},transition:{duration:1,ease:"backOut"},children:e.jsx("div",{className:n,children:e.jsx(A,{components:b,children:a})})});case"flip":return e.jsx(p.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:n,children:e.jsx(A,{components:b,children:a})})});default:return e.jsx("div",{className:n,children:e.jsx(A,{components:b,children:a})})}},Pe=a=>{const d=[];if(!a||a.length===0)return d;let n=a.reduce((c,k)=>{const g=c.length>0?c[c.length-1]:null;if(g&&g.sender===k.sender){const C={...g,text:`${g.text}
|
|
2
|
+
${k.text}`};c[c.length-1]=C}else c.push({...k});return c},[]).map(c=>({role:c.sender==="bot"?"model":"user",parts:[{text:c.text}]}));const y=n.findIndex(c=>c.role==="user");if(y>-1)n=n.slice(y);else return[];return n},ze=({botName:a="ChatBot",botAvatar:d=e.jsx(Se,{}),userAvatar:b=e.jsx(Ae,{}),welcomeMessage:n="Hello! How can I help?",placeholderText:y="Type a message...",customInstruction:c="",isOpen:k=!1,disabled:g=!1,isTyping:C=!1,onSend:P=()=>{},theme:N={},geminiApiKey:V,geminiModelName:se="gemini-1.5-flash",openaiApiKey:_,openaiModelName:ae="gpt-4o-mini",anthropicApiKey:Y,anthropicModelName:ne="claude-3-haiku-20240307",grokApiKey:Z,grokModelName:le="llama3-8b-8192",messages:ie,googleSTTCredentialsPath:qe,enableFileUpload:Oe=!1,fileUploadAccept:Ue="*",onFileUpload:De=()=>{}})=>{const[x]=s.useState(()=>`chatbot-instance-${Math.random().toString(36).substring(2,9)}`),[F,z]=s.useState(k),[We,He]=s.useState(()=>n?[{id:1,text:n,sender:"bot"}]:[]),[B,q]=s.useState(""),[O,U]=s.useState(!1),[X,ce]=s.useState(!1),[m,D]=s.useState(null),W=typeof ie<"u",$=W?ie:We,J=W?()=>{}:He,K=s.useRef(null),de=s.useRef(null),he=s.useRef(null),Ge=s.useRef(null),ue=s.useRef(null),L=s.useRef(null),Q=s.useMemo(()=>{if(!V)return null;try{return new Ne.GoogleGenerativeAI(V).getGenerativeModel({model:se,systemInstruction:c})}catch(t){return console.error("Failed to initialize Gemini:",t),null}},[V,se,c]),R=s.useMemo(()=>_?new Te({apiKey:_,dangerouslyAllowBrowser:!0}):null,[_]),ee=s.useMemo(()=>Y?new $e({apiKey:Y,dangerouslyAllowBrowser:!0}):null,[Y]),te=s.useMemo(()=>Z?new Ie({apiKey:Z,dangerouslyAllowBrowser:!0}):null,[Z]),o=s.useMemo(()=>{var l;const t=((l=N==null?void 0:N.window)==null?void 0:l.placement)==="center",r={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:t?"80vw":"22rem",height:t?"80vh":"30rem",placement:"bottom-right",backdrop:!1,backdropColor:"rgba(0, 0, 0, 0.4)",backdropBlur:"4px",scrollbarThumbColor:"#a1a1aa",scrollbarTrackColor:"#f1f5f9"}};return{launcher:{...r.launcher,...N.launcher},header:{...r.header,...N.header},messages:{...r.messages,...N.messages},input:{...r.input,...N.input},window:{...r.window,...N.window}}},[N]),Me=s.useMemo(()=>({"--chatbot-launcher-bg":o.launcher.backgroundColor,"--chatbot-launcher-icon-color":o.launcher.iconColor,"--chatbot-launcher-size":o.launcher.size,"--chatbot-header-bg":o.header.backgroundColor,"--chatbot-header-text-color":o.header.textColor,"--chatbot-header-font-family":o.header.fontFamily,"--chatbot-header-font-weight":o.header.fontWeight,"--chatbot-user-msg-bg":o.messages.userBackgroundColor,"--chatbot-user-msg-text-color":o.messages.userTextColor,"--chatbot-bot-msg-bg":o.messages.botBackgroundColor,"--chatbot-bot-msg-text-color":o.messages.botTextColor,"--chatbot-msg-font-family":o.messages.fontFamily,"--chatbot-msg-font-size":o.messages.fontSize,"--chatbot-input-bg":o.input.backgroundColor,"--chatbot-input-text-color":o.input.textColor,"--chatbot-input-placeholder-color":o.input.placeholderTextColor,"--chatbot-input-border-color":o.input.borderColor,"--chatbot-input-focus-ring":o.input.focusRingColor,"--chatbot-window-bg":o.window.backgroundColor,"--chatbot-window-border-color":o.window.borderColor,"--chatbot-window-border-radius":o.window.borderRadius,"--chatbot-window-width":o.window.width,"--chatbot-window-height":o.window.height}),[o]),be=s.useMemo(()=>{const t=o.messages.markdownStyles||{};return{strong:({node:r,...l})=>e.jsx("strong",{style:{color:t.boldColor||"inherit"},...l}),em:({node:r,...l})=>e.jsx("em",{style:{color:t.italicColor||"inherit"},...l}),a:({node:r,...l})=>e.jsx("a",{style:{color:t.linkColor||"#3b82f6"},...l}),code:({node:r,...l})=>e.jsx("code",{style:{color:t.codeColor||"inherit",backgroundColor:t.codeBackgroundColor||"rgba(0, 0, 0, 0.1)",padding:"0.1rem 0.3rem",borderRadius:"0.25rem"},...l})}},[o.messages.markdownStyles]);s.useEffect(()=>{const t=window.SpeechRecognition||window.webkitSpeechRecognition;if(t){const r=new t;r.continuous=!0,r.interimResults=!1,r.lang="en-US",r.onstart=()=>ce(!0),r.onresult=l=>{const i=l.results[l.results.length-1][0].transcript;q(h=>h+(h?" ":"")+i)},r.onerror=l=>{console.error("Speech error:",l)},r.onend=()=>{},L.current=r}},[]),s.useEffect(()=>{var h;const t=o.window.scrollbarThumbColor,r=o.window.scrollbarTrackColor,l=`scrollbar-style-${x}`;(h=document.getElementById(l))==null||h.remove();const i=document.createElement("style");return i.id=l,i.innerHTML=`
|
|
3
|
+
/* Target both the message list and the textarea input */
|
|
4
|
+
#${x} .chatbot-message-list,
|
|
5
|
+
#${x} .chatbot-textarea-input {
|
|
5
6
|
scrollbar-width: thin;
|
|
6
|
-
scrollbar-color: ${
|
|
7
|
+
scrollbar-color: ${t} ${r};
|
|
7
8
|
}
|
|
8
9
|
/* WebKit-based browsers (Chrome, Safari, Edge) */
|
|
9
|
-
#${
|
|
10
|
+
#${x} .chatbot-message-list::-webkit-scrollbar,
|
|
11
|
+
#${x} .chatbot-textarea-input::-webkit-scrollbar {
|
|
10
12
|
width: 8px;
|
|
11
13
|
}
|
|
12
|
-
#${
|
|
13
|
-
|
|
14
|
+
#${x} .chatbot-message-list::-webkit-scrollbar-track,
|
|
15
|
+
#${x} .chatbot-textarea-input::-webkit-scrollbar-track {
|
|
16
|
+
background: ${r};
|
|
14
17
|
border-radius: 4px;
|
|
15
18
|
}
|
|
16
|
-
#${
|
|
17
|
-
|
|
19
|
+
#${x} .chatbot-message-list::-webkit-scrollbar-thumb,
|
|
20
|
+
#${x} .chatbot-textarea-input::-webkit-scrollbar-thumb {
|
|
21
|
+
background-color: ${t};
|
|
18
22
|
border-radius: 4px;
|
|
19
|
-
border: 2px solid ${
|
|
23
|
+
border: 2px solid ${r};
|
|
20
24
|
}
|
|
21
|
-
`,document.head.appendChild(
|
|
25
|
+
`,document.head.appendChild(i),()=>{var E;(E=document.getElementById(l))==null||E.remove()}},[x,o.window.scrollbarThumbColor,o.window.scrollbarTrackColor]),s.useEffect(()=>{U(C)},[C]),s.useEffect(()=>{var t;(t=de.current)==null||t.scrollIntoView({behavior:"smooth"})},[$,O,C]),s.useEffect(()=>{var t,r;F?(t=K.current)==null||t.focus():(r=he.current)==null||r.focus()},[F]),s.useEffect(()=>{const t=r=>{r.key==="Escape"&&F&&z(!1)};return window.addEventListener("keydown",t),()=>window.removeEventListener("keydown",t)},[F]),s.useEffect(()=>{const t=K.current;if(!t)return;t.style.height="auto",t.style.height=`${t.scrollHeight}px`;const l=t.scrollHeight-t.clientHeight>4;t.style.overflowY=l?"auto":"hidden"},[B]);const oe=s.useCallback(async()=>{var E,pe,ge,me,we,ye,xe,ve,Ce,ke;const t=B.trim();if(!t&&!m||g||O||C)return;const r=m?{name:m.name,type:m.type,size:m.size,previewUrl:m.type.startsWith("image/")?URL.createObjectURL(m):null}:null,l={id:`user-${Date.now()}`,text:t,sender:"user",attachment:r};W||J(f=>[...f,l]),P(t,m),q(""),U(!0);const i=m;D(null);let h="Sorry, an error occurred. Please check the console for details.";try{if(Q){const f=Q.startChat({history:Pe($)}),w=[t];if(i){const v=await M(i);w.push({inlineData:{data:v,mimeType:i.type}})}h=await(await(await f.sendMessage(w)).response).text()||"(no response from Gemini)"}else if(R){const f=$.map(v=>({role:v.sender==="bot"?"assistant":"user",content:v.text})),w=[{type:"text",text:t}];if(i&&i.type.startsWith("image/")){const v=await M(i);w.push({type:"image_url",image_url:{url:`data:${i.type};base64,${v}`}})}else i&&(console.warn("OpenAI integration currently only supports image files. File was ignored."),h="Note: The attached file was not an image and was ignored. ");const T=((me=(ge=(pe=(E=(await R.chat.completions.create({model:ae,messages:[...f,{role:"user",content:w}]})).choices)==null?void 0:E[0])==null?void 0:pe.message)==null?void 0:ge.content)==null?void 0:me.trim())||"(no response from OpenAI)";h=i&&!i.type.startsWith("image/")?h+T:T}else if(ee){const f=$.map(v=>({role:v.sender==="bot"?"assistant":"user",content:v.text})),w=[{type:"text",text:t}];if(i&&i.type.startsWith("image/")){const v=await M(i);w.unshift({type:"image",source:{type:"base64",media_type:i.type,data:v}})}else i&&(console.warn("Anthropic integration currently only supports image files. File was ignored."),h="Note: The attached file was not an image and was ignored. ");const T=((xe=(ye=(we=(await ee.messages.create({model:ne,system:c,messages:[...f,{role:"user",content:w}],max_tokens:1024})).content)==null?void 0:we[0])==null?void 0:ye.text)==null?void 0:xe.trim())||"(no response from Claude)";h=i&&!i.type.startsWith("image/")?h+T:T}else if(te){let f="";i&&(console.warn("Groq API does not support file uploads. Sending text only."),f=`Note: The attached file was ignored as this AI model does not support file uploads. Here is my response to your text:
|
|
26
|
+
|
|
27
|
+
`);const w=$.map(T=>({role:T.sender==="bot"?"assistant":"user",content:T.text})),G=await te.chat.completions.create({messages:[...w,{role:"user",content:t}],model:le});h=f+(((ke=(Ce=(ve=G.choices[0])==null?void 0:ve.message)==null?void 0:Ce.content)==null?void 0:ke.trim())||"(no response from Groq)")}else h=`You said: "${t}"`,i&&(h+=` and attached a file named "${i.name}".`),await new Promise(f=>setTimeout(f,800))}catch(f){console.error("ChatBot handleSend Error:",f),h="An error occurred while processing your request."}finally{const f={id:`bot-${Date.now()}`,text:h,sender:"bot",attachment:null};J(w=>[...w,f]),U(!1)}},[B,m,g,O,C,W,$,P,J,D,q,U,c,Q,R,ee,te,ae,ne,le]),Ve=s.useCallback(t=>{t.key==="Enter"&&!t.shiftKey&&(t.preventDefault(),oe())},[oe]),_e=()=>{L.current&&!X&&L.current.start()},Ye=()=>{L.current&&X&&(L.current.stop(),ce(!1))},Ze=()=>{var t;(t=ue.current)==null||t.click()},Xe=t=>{var l;const r=(l=t.target.files)==null?void 0:l[0];r&&(D(r),De(r)),t.target&&(t.target.value=null)},re=t=>typeof t=="string"?e.jsx("img",{src:t,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:t}),H=O||C,fe={"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"},Je=o.window.placement==="center",j={rounded:"rounded-xl",square:"rounded-md"};return e.jsxs("div",{id:x,style:Me,className:"font-sans",children:[e.jsx(p.AnimatePresence,{children:!F&&e.jsx(p.motion.button,{ref:he,onClick:()=>z(!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(I.FontAwesomeIcon,{icon:S.faCommentDots})})}),e.jsxs(p.AnimatePresence,{children:[F&&Je&&o.window.backdrop&&e.jsx(p.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},style:{backgroundColor:o.window.backdropColor,backdropFilter:`blur(${o.window.backdropBlur})`,WebkitBackdropFilter:`blur(${o.window.backdropBlur})`},className:"fixed inset-0 z-40",onClick:()=>z(!1)},"chatbot-backdrop"),F&&e.jsxs("div",{ref:Ge,"aria-modal":"true",role:"dialog",className:`fixed ${fe[o.window.placement]||fe["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:re(d)}),e.jsx("span",{style:{fontFamily:"var(--chatbot-header-font-family)",fontWeight:"var(--chatbot-header-font-weight)"},className:"text-lg",children:a})]}),e.jsx("button",{onClick:()=>z(!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(p.AnimatePresence,{initial:!1,children:$.map((t,r)=>e.jsxs(p.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 ${t.sender==="user"?"ml-auto flex-row-reverse":"mr-auto"}`,children:[o.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:re(t.sender==="user"?b:d)}),e.jsxs("div",{className:`flex flex-col ${t.sender==="user"?"items-end":"items-start"}`,children:[t.sender==="user"&&t.attachment&&e.jsx("div",{className:`p-2 mb-1 max-w-full self-end ${j[o.messages.bubbleShape]||j.rounded} ${!t.text&&o.messages.bubblePointer?"rounded-br-none":""}`,style:{backgroundColor:"var(--chatbot-user-msg-bg)",color:"var(--chatbot-user-msg-text-color)"},children:t.attachment.previewUrl?e.jsx("img",{src:t.attachment.previewUrl,alt:t.attachment.name,className:"w-full h-auto object-cover rounded-md max-w-[200px]"}):e.jsxs("div",{className:"flex items-center gap-2 text-sm",children:[e.jsx(I.FontAwesomeIcon,{icon:S.faFileAlt,className:"w-4 h-4 flex-shrink-0"}),e.jsx("span",{className:"truncate",children:t.attachment.name})]})}),t.text&&e.jsx(p.motion.div,{layout:"position",transition:{duration:.2,ease:"easeOut"},className:`px-3 py-2 ${j[o.messages.bubbleShape]||j.rounded} ${o.messages.bubblePointer?t.sender==="user"?"rounded-br-none":"rounded-bl-none":""}`,style:{backgroundColor:t.sender==="user"?"var(--chatbot-user-msg-bg)":"var(--chatbot-bot-msg-bg)",color:t.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:t.sender==="bot"&&r===$.length-1?e.jsx(Ee,{text:t.text,animationType:o.messages.animation,components:be}):e.jsx("div",{className:"prose prose-sm max-w-none text-inherit prose-p:my-0",style:{color:"inherit"},children:e.jsx(A,{components:be,children:t.text})})})]})]},t.id))}),H&&e.jsxs("div",{className:"flex items-end max-w-[85%] gap-2 mr-auto",children:[o.messages.showAvatars&&e.jsx("div",{className:"w-7 h-7 rounded-full flex-shrink-0 overflow-hidden",children:re(d)}),e.jsx("div",{className:`px-3 py-2 ${j[o.messages.bubbleShape]||j.rounded} rounded-bl-none`,style:{backgroundColor:"var(--chatbot-bot-msg-bg)"},children:e.jsx(Be,{})})]},"typing-indicator"),e.jsx("div",{ref:de})]}),e.jsxs("footer",{className:"p-3 border-t flex-shrink-0",style:{borderColor:"var(--chatbot-window-border-color)",backgroundColor:"var(--chatbot-input-bg)"},children:[e.jsx(p.AnimatePresence,{children:m&&e.jsx(p.motion.div,{initial:{opacity:0,height:0},animate:{opacity:1,height:"auto"},exit:{opacity:0,height:0},transition:{duration:.2},children:e.jsx(je,{file:m,onRemove:()=>D(null)})})}),e.jsxs("div",{className:"flex items-end space-x-2",children:[Oe&&e.jsxs(e.Fragment,{children:[e.jsx("button",{onClick:Ze,disabled:g||H,"aria-label":"Upload File",className:"w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 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(I.FontAwesomeIcon,{icon:S.faPaperclip,className:"w-5 h-5"})}),e.jsx("input",{type:"file",ref:ue,onChange:Xe,accept:Ue,style:{display:"none"},"aria-hidden":"true"})]}),e.jsx("textarea",{ref:K,rows:"1",value:B,onChange:t=>q(t.target.value),onKeyDown:Ve,placeholder:y,disabled:g||H,"aria-label":"Chat input",className:"chatbot-textarea-input flex-1 w-full px-4 py-2 bg-transparent rounded-xl border focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-60 resize-none overflow-hidden",style:{color:"var(--chatbot-input-text-color)",borderColor:"var(--chatbot-input-border-color)","--tw-ring-color":"var(--chatbot-input-focus-ring)",maxHeight:"100px",overflowY:"hidden",lineHeight:"1.5"}}),X?e.jsx(p.motion.button,{onClick:Ye,"aria-label":"Stop Recording",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)"},animate:{opacity:[1,.8,1],scale:[1,1.1,1]},transition:{duration:1,repeat:1/0,ease:"easeInOut"},children:e.jsx(I.FontAwesomeIcon,{icon:S.faMicrophoneSlash,className:"w-5 h-5"})}):qe&&!B.trim()?e.jsx(p.motion.button,{onClick:_e,"aria-label":"Start Recording",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(I.FontAwesomeIcon,{icon:S.faMicrophone,className:"w-5 h-5"})}):e.jsx("button",{onClick:oe,disabled:!B.trim()||g||H,"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(Fe,{})})]})]})]},"chatbot-window")]})]})};u.ChatBot=ze,Object.defineProperty(u,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.
|
|
4
|
+
"version": "0.5.0",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
|