@gauravrathod674/super-customizable-chatbot 0.5.0 → 0.5.2

package/README.md

@@ -27,7 +27,7 @@ This demo showcases:
 -   🚀 **Model Selection**: Choose the exact AI model you want to use from any supported provider (e.g., `gemini-1.5-flash`, `gpt-4o-mini`, `claude-3-haiku`, `llama3-8b-8192`).
 -   🎨 **Deeply Customizable**: Use a comprehensive `theme` object to control every color, font, border, and size.
 -   🎬 **Typing Animation**: Engage users with a smooth, character-by-character typing animation for bot responses.
--   🗣️ **Speech-to-Text (optional)** — supports browser Web Speech API and configuration for Google Speech-to-Text integration.
+-   🗣️ **Speech-to-Text (optional)** — Built-in voice input using the browser's Web Speech API for hands-free interaction.
 -   📎 **File Uploads (optional)**: Allow users to upload images and files for multi-modal conversations with compatible models (Gemini, GPT-4o, Claude 3).
 -   🧩 **Flexible Placement**: Display as a classic corner widget or a large, focused modal.
 -   💅 **Markdown Rendering**: Automatically renders lists, bold/italic text, headers, and more.
@@ -163,7 +163,7 @@ function App() {
       botName="Gemini Bot"
       geminiApiKey={GEMINI_API_KEY}
       geminiModelName="gemini-1.5-flash"
-      googleSTTCredentialsPath="PATH" // .json file path of google speech to text api
+      enableMicrophone="enabled"
       enableFileUpload={true}
       fileUploadAccept="image/*,.pdf,.doc,.docx" 
       welcomeMessage="I am powered by Gemini. How can I help?"
@@ -246,7 +246,7 @@ These props control the chatbot's functionality, identity, and AI integration.
 | `anthropicModelName`| `string` | `'claude-3-haiku-20240307'` | The Anthropic model to use. |
 | `grokModelName` | `string` | `'llama3-8b-8192'` | The Groq model to use. |
 | `customInstruction`| `string` | `''` | A system prompt to define the bot's persona or behavior. |
-| `googleSTTCredentialsPath` | `string` | `undefined` | Any truthy string to enable the Speech-to-Text microphone. Does not require actual credentials. |
+| `enableMicrophone` | `string` | `undefined` | Any truthy string to enable the Speech-to-Text microphone. Does not require actual credentials. |
 | `enableFileUpload` | `boolean` | `false` | Enables the file attachment button. |
 | `fileUploadAccept` | `string` | `*` | A string of accepted file types for the upload dialog (e.g., `"image/*, .pdf"`). |
 | `onFileUpload` | `(file: File) => void` | `() => {}` | **Callback that fires when a user selects a file. |
@@ -338,5 +338,4 @@ Pass a `theme` object to customize the chatbot's appearance. Any property you do
 
 ## License
 
-This project is licensed under the MIT License.
-
+This project is licensed under the MIT License.

package/dist/super-customizable-chatbot.es.js

@@ -238,7 +238,7 @@ ${C.text}`
   grokApiKey: X,
   grokModelName: de = "llama3-8b-8192",
   messages: ue,
-  googleSTTCredentialsPath: Se,
+  enableMicrophone: Se,
   enableFileUpload: Be = !1,
   fileUploadAccept: Fe = "*",
   onFileUpload: Le = () => {

package/dist/super-customizable-chatbot.umd.js

@@ -1,5 +1,5 @@
 (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}
-${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=`
+${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,enableMicrophone: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=`
       /* Target both the message list and the textarea input */
       #${x} .chatbot-message-list,
       #${x} .chatbot-textarea-input {

package/package.json

@@ -1,10 +1,44 @@
 {
   "name": "@gauravrathod674/super-customizable-chatbot",
   "private": false,
-  "version": "0.5.0",
+  "version": "0.5.2",
   "license": "MIT",
   "type": "module",
   "description": "A highly customizable React chatbot component with support for Gemini, OpenAI, Anthropic, and Groq APIs.",
+  "keywords": [
+    "super customizable chatbot",
+    "react chatbot",
+    "ai chatbot",
+    "google gemini chatbot",
+    "gemini ai chatbot",
+    "openai chatbot",
+    "claude chatbot",
+    "anthropic chatbot",
+    "groq chatbot",
+    "multi api chatbot",
+    "chatbot component",
+    "react ai component",
+    "react chatbot component",
+    "chatbot npm package",
+    "chatbot github",
+    "chatbot theming",
+    "chatbot ui customization",
+    "customizable chatbot ui",
+    "chatbot with speech-to-text",
+    "voice chatbot",
+    "chatbot with file upload",
+    "file upload chatbot",
+    "chatbot for react projects",
+    "react chat widget",
+    "react chat modal",
+    "typing animation chatbot",
+    "markdown chatbot",
+    "accessible chatbot",
+    "gemini-1.5-flash chatbot",
+    "gpt-4o chatbot",
+    "claude-3-haiku chatbot",
+    "llama3 chatbot"
+  ],
   "scripts": {
     "dev": "vite",
     "build": "vite build",