react-groq-chat 1.0.0

package/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2026, Ahmed Mamdoh
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+# 🤖 React Groq Chat
+
+A modern, customizable React component for integrating a chatbot with the Groq API. Built with TypeScript, Tailwind CSS, and Radix UI for a professional chat interface.
+
+[![npm version](https://badge.fury.io/js/react-groq-chat.svg)](https://badge.fury.io/js/react-groq-chat)
+[![License: ISC](https://img.shields.io/badge/License-ISC-blue.svg)](https://opensource.org/licenses/ISC)
+
+## ✨ Features
+
+- 🎯 **Easy Integration** - Simple drop-in component for React applications
+- 🎨 **Customizable UI** - Tailwind CSS styling with custom color themes
+- 🚀 **Modern Stack** - Built with TypeScript, Radix UI, and React 19
+- 📱 **Responsive Design** - Works perfectly on desktop and mobile
+- ⚡ **Fast Performance** - Optimized with React best practices
+- 🔒 **Type Safe** - Full TypeScript support with comprehensive types
+- 🎭 **Markdown Support** - Rich message formatting with react-markdown
+- 🔄 **Real-time Chat** - Smooth conversation flow with loading states
+
+## 📦 Installation
+
+```bash
+npm install react-groq-chat
+```
+
+## 🚀 Quick Start
+
+```tsx
+import { ChatBot } from 'react-groq-chat';
+
+function App() {
+  return (
+    <ChatBot 
+      apiKey="your-groq-api-key"
+      triggerColor="#007bff"
+    />
+  );
+}
+```
+
+## 🔧 Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | **Required** | Your Groq API key |
+| `triggerColor` | `string` | `"#007bff"` | Color theme for the chat trigger button |
+| `triggerImg` | `string` | Built-in icon | Custom image for the trigger button |
+
+## 🎨 Customization
+
+### Custom Trigger Button
+
+```tsx
+<ChatBot 
+  apiKey="your-api-key"
+  triggerColor="#ff6b6b"
+  triggerImg="/path/to/your/icon.png"
+/>
+```
+
+### Styling with Tailwind CSS
+
+The component uses Tailwind CSS classes. Make sure you have Tailwind CSS installed in your project:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init
+```
+
+## 📋 Requirements
+
+- React 19.0.0 or higher
+- Tailwind CSS (for styling)
+- Groq API key
+
+## 🛠️ Development
+
+```bash
+# Clone the repository
+git clone https://github.com/your-username/react-groq-chat.git
+
+# Install dependencies
+npm install
+
+# Build the package
+npm run build
+
+# Watch for changes
+npm run dev
+```
+
+## 🔗 API Integration
+
+This component integrates with the Groq API and supports multiple models:
+
+- `llama-3.3-70b-versatile`
+- `meta-llama/llama-4-maverick-17b-128e-instruct`
+- `meta-llama/llama-4-scout-17b-16e-instruct`
+- `moonshotai/kimi-k2-instruct-0905`
+- And more...
+
+## 🎯 Example Usage
+
+```tsx
+import React, { useState } from 'react';
+import { ChatBot } from 'react-groq-chat';
+
+function ChatApp() {
+  const [apiKey, setApiKey] = useState('');
+  const [showChat, setShowChat] = useState(false);
+
+  return (
+    <div>
+      {!showChat ? (
+        <div>
+          <input 
+            type="password" 
+            placeholder="Enter Groq API Key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+          />
+          <button onClick={() => setShowChat(true)}>
+            Start Chat
+          </button>
+        </div>
+      ) : (
+        <ChatBot 
+          apiKey={apiKey}
+          triggerColor="#456"
+        />
+      )}
+    </div>
+  );
+}
+```
+
+## 🐛 Error Handling
+
+The component includes built-in error handling for:
+- Invalid API keys
+- Network errors
+- Rate limiting
+- Model availability issues
+
+## 📄 License
+
+ISC License - see [LICENSE](LICENSE) file for details.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## 📞 Support
+
+For issues and questions:
+- Open an issue on GitHub
+- Check the [documentation](https://github.com/your-username/react-groq-chat)
+
+---
+
+Made with ❤️ by Ahmed Mamdoh

package/SETUP.md

@@ -0,0 +1,199 @@
+# 🚀 Setup Guide for React Groq Chat
+
+## Prerequisites
+
+Before using this component, make sure you have:
+
+1. **Node.js** (v14 or higher)
+2. **React** (v16.8 or higher)
+3. **Tailwind CSS** installed in your project
+4. **Groq API Key** (get one at [groq.com](https://groq.com))
+
+## 📦 Installation
+
+```bash
+npm install react-groq-chat
+```
+
+## 🎨 Tailwind CSS Setup
+
+If you don't have Tailwind CSS installed:
+
+```bash
+npm install -D tailwindcss postcss autoprefixer
+npx tailwindcss init
+```
+
+Configure your `tailwind.config.js`:
+
+```javascript
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./node_modules/react-groq-chat/dist/**/*.{js,jsx,ts,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+```
+
+Add to your CSS file:
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+## 🔑 Getting a Groq API Key
+
+1. Visit [console.groq.com](https://console.groq.com)
+2. Sign up for an account
+3. Navigate to API Keys
+4. Create a new API key
+5. Copy the key (it starts with `gsk_`)
+
+## 💻 Basic Usage
+
+```tsx
+import { ChatBot } from 'react-groq-chat';
+
+function App() {
+  return (
+    <ChatBot 
+      apiKey="your-groq-api-key-here"
+      triggerColor="#007bff"
+    />
+  );
+}
+```
+
+## 🎨 Customization Options
+
+### Custom Trigger Button
+
+```tsx
+<ChatBot 
+  apiKey="your-api-key"
+  triggerColor="#ff6b6b"
+  triggerImg="/path/to/your/icon.png"
+/>
+```
+
+### Available Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `apiKey` | `string` | **Required** | Your Groq API key |
+| `triggerColor` | `string` | `"#007bff"` | Color theme for the chat trigger button |
+| `triggerImg` | `string` | Built-in icon | Custom image for the trigger button |
+
+## 🛠️ Advanced Setup with State Management
+
+```tsx
+import React, { useState } from 'react';
+import { ChatBot } from 'react-groq-chat';
+
+function App() {
+  const [apiKey, setApiKey] = useState('');
+  const [showChat, setShowChat] = useState(false);
+
+  return (
+    <div>
+      {!showChat ? (
+        <div>
+          <input 
+            type="password" 
+            placeholder="Enter Groq API Key"
+            value={apiKey}
+            onChange={(e) => setApiKey(e.target.value)}
+          />
+          <button onClick={() => setShowChat(true)}>
+            Start Chat
+          </button>
+        </div>
+      ) : (
+        <ChatBot 
+          apiKey={apiKey}
+          triggerColor="#456"
+        />
+      )}
+    </div>
+  );
+}
+```
+
+## 🔧 Environment Variables (Recommended)
+
+For production applications, store your API key in environment variables:
+
+```tsx
+<ChatBot 
+  apiKey={process.env.REACT_APP_GROQ_API_KEY}
+  triggerColor="#007bff"
+/>
+```
+
+Create a `.env` file:
+
+```
+REACT_APP_GROQ_API_KEY=your-groq-api-key-here
+```
+
+## 🎯 Available Models
+
+The component supports multiple Groq models:
+
+- `llama-3.3-70b-versatile`
+- `meta-llama/llama-4-maverick-17b-128e-instruct`
+- `meta-llama/llama-4-scout-17b-16e-instruct`
+- `moonshotai/kimi-k2-instruct-0905`
+- `groq/compound`
+
+## 🐛 Troubleshooting
+
+### Image Not Loading
+
+If the default chat icon doesn't load:
+- Check your build configuration
+- Provide a custom `triggerImg` prop
+- Ensure proper asset handling in your build tool
+
+### Chat Not Responding
+
+- Verify your API key is valid
+- Check your internet connection
+- Ensure you're not hitting rate limits
+- Check browser console for errors
+
+### Styling Issues
+
+- Make sure Tailwind CSS is properly configured
+- Check that the component classes aren't being purged
+- Verify your Tailwind config includes the component files
+
+## 📱 Mobile Optimization
+
+The component is fully responsive and works great on mobile devices. The chat interface adapts to smaller screens automatically.
+
+## 🔒 Security Best Practices
+
+1. **Never commit API keys** to your repository
+2. **Use environment variables** for production
+3. **Implement proper authentication** in your application
+4. **Validate user input** before processing
+5. **Use HTTPS** in production
+
+## 📞 Support
+
+If you encounter any issues:
+
+1. Check the [GitHub Issues](https://github.com/your-username/react-groq-chat/issues)
+2. Review the [documentation](README.md)
+3. Create a new issue with detailed information
+
+---
+
+Happy coding! 🚀

package/dist/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var x=require('@radix-ui/react-popover'),react=require('react'),jsxRuntime=require('react/jsx-runtime'),D=require('react-markdown'),fa=require('react-icons/fa');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}function _interopNamespace(e){if(e&&e.__esModule)return e;var n=Object.create(null);if(e){Object.keys(e).forEach(function(k){if(k!=='default'){var d=Object.getOwnPropertyDescriptor(e,k);Object.defineProperty(n,k,d.get?d:{enumerable:true,get:function(){return e[k]}});}})}n.default=e;return Object.freeze(n)}var x__namespace=/*#__PURE__*/_interopNamespace(x);var D__default=/*#__PURE__*/_interopDefault(D);async function B({messages:o,model:t,apiKey:r}){let e="https://api.groq.com/openai/v1/chat/completions",n={method:"POST",headers:{Authorization:`Bearer ${r}`,"Content-Type":"application/json"},body:JSON.stringify({model:t,messages:o,temperature:.3})};try{return (await(await fetch(e,n)).json()).choices[0].message}catch(s){return console.error(s),"error"}}function K({apiKey:o,systemPrompt:t,assistantFirstMessage:r}){let e=["openai/gpt-oss-120b","llama-3.3-70b-versatile","moonshotai/kimi-k2-instruct-0905","meta-llama/llama-4-maverick-17b-128e-instruct","meta-llama/llama-4-scout-17b-16e-instruct","groq/compound","openai/gpt-oss-20b","openai/gpt-oss-safeguard-20b","llama-3.1-8b-instant","groq/compound-mini","meta-llama/llama-guard-4-12b","meta-llama/llama-prompt-guard-2-86m","meta-llama/llama-prompt-guard-2-22m"],[n,s]=react.useState([{role:"system",content:t},{role:"assistant",content:r}]),[a,d]=react.useState(""),[v,c]=react.useState(false),p=react.useRef(null),l=react.useRef(0);react.useEffect(()=>{p?.current?.scrollTo({top:p.current.scrollHeight,behavior:"smooth"});},[n]);function y(h=""){let f=typeof h=="string"?h:"";if(!a.trim()&&!f.trim())return;let C={role:"user",content:a||f},b=[...n,C];s(b),d(""),c(true),B({model:e[l.current],messages:b,apiKey:o}).then(g=>{g==="error"?(s(u=>[...u,{role:"assistant",content:"Sorry, I encountered an error. Please try again."}]),l.current++,l.current>=e.length&&(l.current=0)):s(u=>[...u,g]);}).catch(g=>{console.error(g);}).finally(()=>{c(false);});}return {messages:n,input:a,setInput:d,handleSendMessage:y,messagesRef:p,isLoading:v}}var N=K;function j({triggerColor:o="#111",triggerImg:t,triggerRightPosition:r=24,triggerBottomPosition:e=24}){return jsxRuntime.jsx(x.PopoverTrigger,{asChild:true,children:jsxRuntime.jsxs("button",{className:`fixed right-[${r}px] ${t?"":"h-14 w-14"} bottom-[${e}px] z-10 cursor-pointer rounded-full bg-[${o}] p-1 shadow-lg transition-all hover:scale-110 hover:bg-[${o}]/90 active:scale-95`,children:[t&&jsxRuntime.jsx("img",{src:t,alt:"Chat with chatbot",className:"h-14 w-14"}),!t&&jsxRuntime.jsx("p",{className:"text-white text-center text-xl",children:"C"})]})})}var _=j;function E({messages:o,messagesRef:t,isLoading:r,userMessageBgColor:e="#fff",assistantMessageBgColor:n="#007bff"}){return jsxRuntime.jsxs("div",{ref:t,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:" flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto",children:[o.map((s,a)=>{if(s.role==="user")return jsxRuntime.jsx("div",{className:"flex justify-start",children:jsxRuntime.jsx("div",{dir:"auto",style:{unicodeBidi:"isolate"},className:`max-w-[95%] rounded-2xl rounded-bl-none bg-[${e}] px-4 py-2 text-start text-sm shadow-sm`,children:s.content.replace(/\[\[.*?\]\]/g,"")})},a);if(s.role==="assistant")return jsxRuntime.jsx("div",{className:"flex justify-end",children:jsxRuntime.jsx("div",{dir:"rtl",style:{unicodeBidi:"isolate",display:"inline-block"},className:`bg-[${n}] max-w-[95%] rounded-2xl rounded-br-none px-4 py-2 text-start text-sm wrap-break-word whitespace-normal text-white shadow-md`,children:jsxRuntime.jsx(D__default.default,{children:s.content})})},a)}),r&&jsxRuntime.jsx("div",{className:"flex justify-end",children:jsxRuntime.jsx("div",{className:"bg-red/90 rounded-2xl rounded-br-none px-4 py-2 text-white shadow-md",children:jsxRuntime.jsx("span",{className:"loading loading-dots loading-xs"})})})]})}var $=E;function H({handleSendMessage:o,input:t,setInput:r}){return jsxRuntime.jsxs("div",{className:"flex h-full items-end gap-2",children:[jsxRuntime.jsx("textarea",{onKeyDown:e=>{e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),o());},value:t,onChange:e=>r(e.target.value),placeholder:"Ask me anything...",style:{fieldSizing:"content",scrollbarWidth:"none",msOverflowStyle:"none"},dir:"auto",className:"auto-expand text-yellowish-white placeholder:text-dark-yellowish-white max-h-[20vh] min-h-6 w-full resize-none overflow-auto bg-transparent py-1 ring-transparent outline-none"}),jsxRuntime.jsx("button",{onClick:()=>o(),className:"bg-red hover:bg-light-red cursor-pointer rounded-full p-2 text-white transition-colors",children:jsxRuntime.jsx(fa.FaPaperPlane,{className:"h-4 w-4"})})]})}var I=H;var U=x__namespace.Root,J=x__namespace.Content;function Q({apiKey:o,triggerColor:t,triggerImg:r,contentBgColor:e="#1a1a1a",contentHeight:n=500,contentWidth:s=350,contentBorder:a=1,contentBorderColor:d="#333333",textColor:v="#ffffff",userMessageBgColor:c="#007bff",assistantMessageBgColor:p="#2d2d2d",triggerRightPosition:l=24,triggerBottomPosition:y=24,contentRightPosition:h=24,systemPrompt:f="You are a helpful AI assistant. Provide clear, concise, and accurate responses.",assistantFirstMessage:C="Hello! I'm here to help you. What can I assist you with today?",contentBorderRoundness:b=16}){let{messages:g,input:u,setInput:L,handleSendMessage:T,messagesRef:S,isLoading:q}=N({apiKey:o,systemPrompt:f,assistantFirstMessage:C});return jsxRuntime.jsxs(U,{children:[jsxRuntime.jsx(_,{triggerColor:t,triggerImg:r,triggerRightPosition:l,triggerBottomPosition:y}),jsxRuntime.jsx(J,{className:`bg-[${e}] mr-[${h}px] h-[${n}px] max-h-[${n}px] w-[${s}px] border-[${a}px] border-[${d}] text-[${v}] shadow-2xl ring-1 ring-white/10 rounded-[${b}px]`,children:jsxRuntime.jsxs("div",{className:"flex h-full flex-col gap-4 p-2",children:[jsxRuntime.jsx("div",{className:"min-h-0 flex-1",children:jsxRuntime.jsx($,{messages:g,messagesRef:S,isLoading:q,userMessageBgColor:c,assistantMessageBgColor:p})}),jsxRuntime.jsx("div",{className:"shrink-0 rounded-xl bg-black/40 p-2",children:jsxRuntime.jsx(I,{handleSendMessage:T,input:u,setInput:L})})]})})]})}
+exports.ChatBot=Q;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/api/groqApi.ts","../src/ChatBot/hooks/useChat.tsx","../src/ChatBot/components/ChatTrigger.tsx","../src/ChatBot/components/MessageList.tsx","../src/ChatBot/components/ChatInput.tsx","../src/ChatBot/ChatBot.tsx"],"names":["chatWithGroq","messages","model","apiKey","url","options","error","useChat","systemPrompt","assistantFirstMessage","models","setMessages","useState","input","setInput","isLoading","setIsLoading","messagesRef","useRef","modelNumber","useEffect","handleSendMessage","text","messageContent","userMessage","newMessages","res","prev","err","useChat_default","ChatTrigger","triggerColor","triggerImg","triggerRightPosition","triggerBottomPosition","jsx","PopoverTrigger","jsxs","ChatTrigger_default","MessageList","userMessageBgColor","assistantMessageBgColor","item","index","Markdown","MessageList_default","ChatInput","FaPaperPlane","ChatInput_default","Popover","x","PopoverContent","ChatBot","contentBgColor","contentHeight","contentWidth","contentBorder","contentBorderColor","textColor","contentRightPosition","contentBorderRoundness"],"mappings":"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","file":"index.cjs","sourcesContent":["type chatWithGroqProps = {\r\n  messages: {\r\n    role: string;\r\n    content: string;\r\n  }[];\r\n  model: string;\r\n  apiKey: string;\r\n};\r\n\r\ntype response = {\r\n  id: string;\r\n  object: string;\r\n  created: number;\r\n  model: string;\r\n  choices: {\r\n    index: number;\r\n    message: {\r\n      role: string;\r\n      content: string;\r\n      reasoning?: string;\r\n    };\r\n    logprobs: null;\r\n    finish_reason: string;\r\n  }[];\r\n  usage: {\r\n    queue_time: number;\r\n    prompt_tokens: number;\r\n    prompt_time: number;\r\n    completion_tokens: number;\r\n    completion_time: number;\r\n    total_tokens: number;\r\n    total_time: number;\r\n    prompt_tokens_details: {\r\n      cached_tokens: number;\r\n    };\r\n    completion_tokens_details: {\r\n      reasoning_tokens: number;\r\n    };\r\n  };\r\n  usage_breakdown: null;\r\n  system_fingerprint: string;\r\n  x_groq: {\r\n    id: string;\r\n    seed: number;\r\n  };\r\n  service_tier: string;\r\n};\r\n\r\nexport async function chatWithGroq({\r\n  messages,\r\n  model,\r\n  apiKey,\r\n}: chatWithGroqProps) {\r\n  const url = \"https://api.groq.com/openai/v1/chat/completions\";\r\n  const options = {\r\n    method: \"POST\",\r\n    headers: {\r\n      Authorization: `Bearer ${apiKey}`,\r\n      \"Content-Type\": \"application/json\",\r\n    },\r\n    body: JSON.stringify({\r\n      model: model,\r\n      messages,\r\n      temperature: 0.3,\r\n    }),\r\n  };\r\n\r\n  try {\r\n    const response = await fetch(url, options);\r\n    const result: response = await response.json();\r\n    return result.choices[0].message;\r\n  } catch (error) {\r\n    console.error(error);\r\n    return \"error\";\r\n  }\r\n}\r\n","import { chatWithGroq } from \"@/api/groqApi\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\n\r\nexport type UseChatProps = {\r\n  apiKey: string;\r\n  systemPrompt: string;\r\n  assistantFirstMessage: string;\r\n};\r\n\r\nfunction useChat({\r\n  apiKey,\r\n  systemPrompt,\r\n  assistantFirstMessage,\r\n}: UseChatProps) {\r\n  const models = [\r\n    \"openai/gpt-oss-120b\",\r\n    \"llama-3.3-70b-versatile\",\r\n    \"moonshotai/kimi-k2-instruct-0905\",\r\n    \"meta-llama/llama-4-maverick-17b-128e-instruct\",\r\n    \"meta-llama/llama-4-scout-17b-16e-instruct\",\r\n    \"groq/compound\",\r\n    \"openai/gpt-oss-20b\",\r\n    \"openai/gpt-oss-safeguard-20b\",\r\n    \"llama-3.1-8b-instant\",\r\n    \"groq/compound-mini\",\r\n    \"meta-llama/llama-guard-4-12b\",\r\n    \"meta-llama/llama-prompt-guard-2-86m\",\r\n    \"meta-llama/llama-prompt-guard-2-22m\",\r\n  ];\r\n  const [messages, setMessages] = useState([\r\n    {\r\n      role: \"system\",\r\n      content: systemPrompt,\r\n    },\r\n    {\r\n      role: \"assistant\",\r\n      content: assistantFirstMessage,\r\n    },\r\n  ]);\r\n  const [input, setInput] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const messagesRef = useRef<HTMLDivElement>(null);\r\n  const modelNumber = useRef(0);\r\n\r\n  useEffect(() => {\r\n    // Scroll to the bottom of the messages container\r\n    messagesRef?.current?.scrollTo({\r\n      top: messagesRef.current.scrollHeight,\r\n      behavior: \"smooth\",\r\n    });\r\n  }, [messages]);\r\n\r\n  function handleSendMessage(text = \"\") {\r\n    const messageContent = typeof text === \"string\" ? text : \"\";\r\n    if (!input.trim() && !messageContent.trim()) return;\r\n\r\n    const userMessage = { role: \"user\", content: input || messageContent };\r\n    const newMessages = [...messages, userMessage];\r\n\r\n    setMessages(newMessages);\r\n    setInput(\"\");\r\n    setIsLoading(true);\r\n\r\n    chatWithGroq({\r\n      model: models[modelNumber.current],\r\n      messages: newMessages,\r\n      apiKey: apiKey,\r\n    })\r\n      .then((res) => {\r\n        if (res === \"error\") {\r\n          setMessages((prev) => [\r\n            ...prev,\r\n            {\r\n              role: \"assistant\",\r\n              content: \"Sorry, I encountered an error. Please try again.\",\r\n            },\r\n          ]);\r\n          modelNumber.current++;\r\n          if (modelNumber.current >= models.length) {\r\n            modelNumber.current = 0;\r\n          }\r\n        } else {\r\n          setMessages((prev) => [...prev, res]);\r\n        }\r\n      })\r\n      .catch((err) => {\r\n        console.error(err);\r\n      })\r\n      .finally(() => {\r\n        setIsLoading(false);\r\n      });\r\n  }\r\n  return {\r\n    messages,\r\n    input,\r\n    setInput,\r\n    handleSendMessage,\r\n    messagesRef,\r\n    isLoading,\r\n  };\r\n}\r\n\r\nexport default useChat;\r\n","import { PopoverTrigger } from \"@radix-ui/react-popover\";\r\n\r\ntype ChatTriggerProps = {\r\n  triggerColor?: string;\r\n  triggerImg?: string;\r\n  triggerRightPosition?: number;\r\n  triggerBottomPosition?: number;\r\n};\r\n\r\nfunction ChatTrigger({\r\n  triggerColor = \"#111\",\r\n  triggerImg,\r\n  triggerRightPosition = 24,\r\n  triggerBottomPosition = 24,\r\n}: ChatTriggerProps) {\r\n  return (\r\n    <PopoverTrigger asChild>\r\n      <button\r\n        className={`fixed right-[${triggerRightPosition}px] ${triggerImg ? \"\" : \"h-14 w-14\"} bottom-[${triggerBottomPosition}px] z-10 cursor-pointer rounded-full bg-[${triggerColor}] p-1 shadow-lg transition-all hover:scale-110 hover:bg-[${triggerColor}]/90 active:scale-95`}\r\n      >\r\n        {triggerImg && (\r\n          <img src={triggerImg} alt=\"Chat with chatbot\" className=\"h-14 w-14\" />\r\n        )}\r\n        {!triggerImg && <p className=\"text-white text-center text-xl\">C</p>}\r\n      </button>\r\n    </PopoverTrigger>\r\n  );\r\n}\r\n\r\nexport default ChatTrigger;\r\n","import type { RefObject } from \"react\";\r\nimport Markdown from \"react-markdown\";\r\n\r\ntype MessageListProps = {\r\n  messages: { role: string; content: string }[];\r\n  messagesRef: RefObject<HTMLDivElement | null>;\r\n  isLoading: boolean;\r\n  userMessageBgColor?: string;\r\n  assistantMessageBgColor?: string;\r\n};\r\n\r\nfunction MessageList({\r\n  messages,\r\n  messagesRef,\r\n  isLoading,\r\n  userMessageBgColor = \"#fff\",\r\n  assistantMessageBgColor = \"#007bff\",\r\n}: MessageListProps) {\r\n  return (\r\n    <div\r\n      ref={messagesRef}\r\n      style={{ scrollbarWidth: \"none\", msOverflowStyle: \"none\" }}\r\n      className=\" flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto\"\r\n    >\r\n      {messages.map((item, index) => {\r\n        if (item.role === \"user\")\r\n          return (\r\n            <div key={index} className=\"flex justify-start\">\r\n              <div\r\n                dir=\"auto\"\r\n                style={{ unicodeBidi: \"isolate\" }}\r\n                className={`max-w-[95%] rounded-2xl rounded-bl-none bg-[${userMessageBgColor}] px-4 py-2 text-start text-sm shadow-sm`}\r\n              >\r\n                {item.content.replace(/\\[\\[.*?\\]\\]/g, \"\")}\r\n              </div>\r\n            </div>\r\n          );\r\n        if (item.role === \"assistant\") {\r\n          return (\r\n            <div key={index} className=\"flex justify-end\">\r\n              <div\r\n                dir=\"rtl\"\r\n                style={{ unicodeBidi: \"isolate\", display: \"inline-block\" }}\r\n                className={`bg-[${assistantMessageBgColor}] max-w-[95%] rounded-2xl rounded-br-none px-4 py-2 text-start text-sm wrap-break-word whitespace-normal text-white shadow-md`}\r\n              >\r\n                <Markdown>{item.content}</Markdown>\r\n              </div>\r\n            </div>\r\n          );\r\n        }\r\n      })}\r\n      {isLoading && (\r\n        <div className=\"flex justify-end\">\r\n          <div className=\"bg-red/90 rounded-2xl rounded-br-none px-4 py-2 text-white shadow-md\">\r\n            <span className=\"loading loading-dots loading-xs\"></span>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default MessageList;\r\n","import { FaPaperPlane } from \"react-icons/fa\";\r\nimport { FaQuestionCircle } from \"react-icons/fa\";\r\n\r\ntype ChatInputProps = {\r\n  handleSendMessage: (text?: string) => void;\r\n  input: string;\r\n  setInput: (text: string) => void;\r\n};\r\n\r\nfunction ChatInput({ handleSendMessage, input, setInput }: ChatInputProps) {\r\n  return (\r\n    <div className=\"flex h-full items-end gap-2\">\r\n      <textarea\r\n        onKeyDown={(e) => {\r\n          if (e.key === \"Enter\" && !e.shiftKey) {\r\n            e.preventDefault();\r\n            handleSendMessage();\r\n          }\r\n        }}\r\n        value={input}\r\n        onChange={(e) => setInput(e.target.value)}\r\n        placeholder=\"Ask me anything...\"\r\n        style={{\r\n          fieldSizing: \"content\",\r\n          scrollbarWidth: \"none\",\r\n          msOverflowStyle: \"none\",\r\n        }}\r\n        dir=\"auto\"\r\n        className=\"auto-expand text-yellowish-white placeholder:text-dark-yellowish-white max-h-[20vh] min-h-6 w-full resize-none overflow-auto bg-transparent py-1 ring-transparent outline-none\"\r\n      />\r\n      <button\r\n        onClick={() => handleSendMessage()}\r\n        className=\"bg-red hover:bg-light-red cursor-pointer rounded-full p-2 text-white transition-colors\"\r\n      >\r\n        <FaPaperPlane className=\"h-4 w-4\" />\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default ChatInput;\r\n","import * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport useChat from \"./hooks/useChat\";\r\nimport ChatTrigger from \"./components/ChatTrigger\";\r\nimport MessageList from \"./components/MessageList\";\r\nimport ChatInput from \"./components/ChatInput\";\r\n\r\n// Custom popover components to avoid shadcn dependency\r\nconst Popover = PopoverPrimitive.Root;\r\nconst PopoverContent = PopoverPrimitive.Content;\r\n\r\nexport type ChatBotProps = {\r\n  apiKey: string;\r\n  triggerColor?: string;\r\n  triggerImg?: string;\r\n  contentBgColor?: string;\r\n  contentHeight?: number;\r\n  contentWidth?: number;\r\n  contentBorder?: number;\r\n  contentBorderColor?: string;\r\n  contentBorderRoundness?: number;\r\n  textColor?: string;\r\n  userMessageBgColor?: string;\r\n  assistantMessageBgColor?: string;\r\n  triggerRightPosition?: number;\r\n  triggerBottomPosition?: number;\r\n  contentRightPosition?: number;\r\n  systemPrompt?: string;\r\n  assistantFirstMessage?: string;\r\n};\r\n\r\nexport function ChatBot({\r\n  apiKey,\r\n  triggerColor,\r\n  triggerImg,\r\n  contentBgColor = \"#1a1a1a\",\r\n  contentHeight = 500,\r\n  contentWidth = 350,\r\n  contentBorder = 1,\r\n  contentBorderColor = \"#333333\",\r\n  textColor = \"#ffffff\",\r\n  userMessageBgColor = \"#007bff\",\r\n  assistantMessageBgColor = \"#2d2d2d\",\r\n  triggerRightPosition = 24,\r\n  triggerBottomPosition = 24,\r\n  contentRightPosition = 24,\r\n  systemPrompt = `You are a helpful AI assistant. Provide clear, concise, and accurate responses.`,\r\n  assistantFirstMessage = \"Hello! I'm here to help you. What can I assist you with today?\",\r\n  contentBorderRoundness = 16,\r\n}: ChatBotProps) {\r\n  const {\r\n    messages,\r\n    input,\r\n    setInput,\r\n    handleSendMessage,\r\n    messagesRef,\r\n    isLoading,\r\n  } = useChat({ apiKey, systemPrompt, assistantFirstMessage });\r\n  return (\r\n    <Popover>\r\n      <ChatTrigger\r\n        triggerColor={triggerColor}\r\n        triggerImg={triggerImg}\r\n        triggerRightPosition={triggerRightPosition}\r\n        triggerBottomPosition={triggerBottomPosition}\r\n      />\r\n      <PopoverContent\r\n        className={`bg-[${contentBgColor}] mr-[${contentRightPosition}px] h-[${contentHeight}px] max-h-[${contentHeight}px] w-[${contentWidth}px] border-[${contentBorder}px] border-[${contentBorderColor}] text-[${textColor}] shadow-2xl ring-1 ring-white/10 rounded-[${contentBorderRoundness}px]`}\r\n      >\r\n        <div className=\"flex h-full flex-col gap-4 p-2\">\r\n          <div className=\"min-h-0 flex-1\">\r\n            <MessageList\r\n              messages={messages}\r\n              messagesRef={messagesRef}\r\n              isLoading={isLoading}\r\n              userMessageBgColor={userMessageBgColor}\r\n              assistantMessageBgColor={assistantMessageBgColor}\r\n            />\r\n          </div>\r\n\r\n          <div className=\"shrink-0 rounded-xl bg-black/40 p-2\">\r\n            <ChatInput\r\n              handleSendMessage={handleSendMessage}\r\n              input={input}\r\n              setInput={setInput}\r\n            />\r\n          </div>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"]}

package/dist/index.d.cts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ChatBotProps = {
+    apiKey: string;
+    triggerColor?: string;
+    triggerImg?: string;
+    contentBgColor?: string;
+    contentHeight?: number;
+    contentWidth?: number;
+    contentBorder?: number;
+    contentBorderColor?: string;
+    contentBorderRoundness?: number;
+    textColor?: string;
+    userMessageBgColor?: string;
+    assistantMessageBgColor?: string;
+    triggerRightPosition?: number;
+    triggerBottomPosition?: number;
+    contentRightPosition?: number;
+    systemPrompt?: string;
+    assistantFirstMessage?: string;
+};
+declare function ChatBot({ apiKey, triggerColor, triggerImg, contentBgColor, contentHeight, contentWidth, contentBorder, contentBorderColor, textColor, userMessageBgColor, assistantMessageBgColor, triggerRightPosition, triggerBottomPosition, contentRightPosition, systemPrompt, assistantFirstMessage, contentBorderRoundness, }: ChatBotProps): react_jsx_runtime.JSX.Element;
+
+type UseChatProps = {
+    apiKey: string;
+    systemPrompt: string;
+    assistantFirstMessage: string;
+};
+
+export { ChatBot, type ChatBotProps, type UseChatProps };

package/dist/index.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ChatBotProps = {
+    apiKey: string;
+    triggerColor?: string;
+    triggerImg?: string;
+    contentBgColor?: string;
+    contentHeight?: number;
+    contentWidth?: number;
+    contentBorder?: number;
+    contentBorderColor?: string;
+    contentBorderRoundness?: number;
+    textColor?: string;
+    userMessageBgColor?: string;
+    assistantMessageBgColor?: string;
+    triggerRightPosition?: number;
+    triggerBottomPosition?: number;
+    contentRightPosition?: number;
+    systemPrompt?: string;
+    assistantFirstMessage?: string;
+};
+declare function ChatBot({ apiKey, triggerColor, triggerImg, contentBgColor, contentHeight, contentWidth, contentBorder, contentBorderColor, textColor, userMessageBgColor, assistantMessageBgColor, triggerRightPosition, triggerBottomPosition, contentRightPosition, systemPrompt, assistantFirstMessage, contentBorderRoundness, }: ChatBotProps): react_jsx_runtime.JSX.Element;
+
+type UseChatProps = {
+    apiKey: string;
+    systemPrompt: string;
+    assistantFirstMessage: string;
+};
+
+export { ChatBot, type ChatBotProps, type UseChatProps };

package/dist/index.js

@@ -0,0 +1,3 @@
+import*as x from'@radix-ui/react-popover';import {PopoverTrigger}from'@radix-ui/react-popover';import {useState,useRef,useEffect}from'react';import {jsxs,jsx}from'react/jsx-runtime';import D from'react-markdown';import {FaPaperPlane}from'react-icons/fa';async function B({messages:o,model:t,apiKey:r}){let e="https://api.groq.com/openai/v1/chat/completions",n={method:"POST",headers:{Authorization:`Bearer ${r}`,"Content-Type":"application/json"},body:JSON.stringify({model:t,messages:o,temperature:.3})};try{return (await(await fetch(e,n)).json()).choices[0].message}catch(s){return console.error(s),"error"}}function K({apiKey:o,systemPrompt:t,assistantFirstMessage:r}){let e=["openai/gpt-oss-120b","llama-3.3-70b-versatile","moonshotai/kimi-k2-instruct-0905","meta-llama/llama-4-maverick-17b-128e-instruct","meta-llama/llama-4-scout-17b-16e-instruct","groq/compound","openai/gpt-oss-20b","openai/gpt-oss-safeguard-20b","llama-3.1-8b-instant","groq/compound-mini","meta-llama/llama-guard-4-12b","meta-llama/llama-prompt-guard-2-86m","meta-llama/llama-prompt-guard-2-22m"],[n,s]=useState([{role:"system",content:t},{role:"assistant",content:r}]),[a,d]=useState(""),[v,c]=useState(false),p=useRef(null),l=useRef(0);useEffect(()=>{p?.current?.scrollTo({top:p.current.scrollHeight,behavior:"smooth"});},[n]);function y(h=""){let f=typeof h=="string"?h:"";if(!a.trim()&&!f.trim())return;let C={role:"user",content:a||f},b=[...n,C];s(b),d(""),c(true),B({model:e[l.current],messages:b,apiKey:o}).then(g=>{g==="error"?(s(u=>[...u,{role:"assistant",content:"Sorry, I encountered an error. Please try again."}]),l.current++,l.current>=e.length&&(l.current=0)):s(u=>[...u,g]);}).catch(g=>{console.error(g);}).finally(()=>{c(false);});}return {messages:n,input:a,setInput:d,handleSendMessage:y,messagesRef:p,isLoading:v}}var N=K;function j({triggerColor:o="#111",triggerImg:t,triggerRightPosition:r=24,triggerBottomPosition:e=24}){return jsx(PopoverTrigger,{asChild:true,children:jsxs("button",{className:`fixed right-[${r}px] ${t?"":"h-14 w-14"} bottom-[${e}px] z-10 cursor-pointer rounded-full bg-[${o}] p-1 shadow-lg transition-all hover:scale-110 hover:bg-[${o}]/90 active:scale-95`,children:[t&&jsx("img",{src:t,alt:"Chat with chatbot",className:"h-14 w-14"}),!t&&jsx("p",{className:"text-white text-center text-xl",children:"C"})]})})}var _=j;function E({messages:o,messagesRef:t,isLoading:r,userMessageBgColor:e="#fff",assistantMessageBgColor:n="#007bff"}){return jsxs("div",{ref:t,style:{scrollbarWidth:"none",msOverflowStyle:"none"},className:" flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto",children:[o.map((s,a)=>{if(s.role==="user")return jsx("div",{className:"flex justify-start",children:jsx("div",{dir:"auto",style:{unicodeBidi:"isolate"},className:`max-w-[95%] rounded-2xl rounded-bl-none bg-[${e}] px-4 py-2 text-start text-sm shadow-sm`,children:s.content.replace(/\[\[.*?\]\]/g,"")})},a);if(s.role==="assistant")return jsx("div",{className:"flex justify-end",children:jsx("div",{dir:"rtl",style:{unicodeBidi:"isolate",display:"inline-block"},className:`bg-[${n}] max-w-[95%] rounded-2xl rounded-br-none px-4 py-2 text-start text-sm wrap-break-word whitespace-normal text-white shadow-md`,children:jsx(D,{children:s.content})})},a)}),r&&jsx("div",{className:"flex justify-end",children:jsx("div",{className:"bg-red/90 rounded-2xl rounded-br-none px-4 py-2 text-white shadow-md",children:jsx("span",{className:"loading loading-dots loading-xs"})})})]})}var $=E;function H({handleSendMessage:o,input:t,setInput:r}){return jsxs("div",{className:"flex h-full items-end gap-2",children:[jsx("textarea",{onKeyDown:e=>{e.key==="Enter"&&!e.shiftKey&&(e.preventDefault(),o());},value:t,onChange:e=>r(e.target.value),placeholder:"Ask me anything...",style:{fieldSizing:"content",scrollbarWidth:"none",msOverflowStyle:"none"},dir:"auto",className:"auto-expand text-yellowish-white placeholder:text-dark-yellowish-white max-h-[20vh] min-h-6 w-full resize-none overflow-auto bg-transparent py-1 ring-transparent outline-none"}),jsx("button",{onClick:()=>o(),className:"bg-red hover:bg-light-red cursor-pointer rounded-full p-2 text-white transition-colors",children:jsx(FaPaperPlane,{className:"h-4 w-4"})})]})}var I=H;var U=x.Root,J=x.Content;function Q({apiKey:o,triggerColor:t,triggerImg:r,contentBgColor:e="#1a1a1a",contentHeight:n=500,contentWidth:s=350,contentBorder:a=1,contentBorderColor:d="#333333",textColor:v="#ffffff",userMessageBgColor:c="#007bff",assistantMessageBgColor:p="#2d2d2d",triggerRightPosition:l=24,triggerBottomPosition:y=24,contentRightPosition:h=24,systemPrompt:f="You are a helpful AI assistant. Provide clear, concise, and accurate responses.",assistantFirstMessage:C="Hello! I'm here to help you. What can I assist you with today?",contentBorderRoundness:b=16}){let{messages:g,input:u,setInput:L,handleSendMessage:T,messagesRef:S,isLoading:q}=N({apiKey:o,systemPrompt:f,assistantFirstMessage:C});return jsxs(U,{children:[jsx(_,{triggerColor:t,triggerImg:r,triggerRightPosition:l,triggerBottomPosition:y}),jsx(J,{className:`bg-[${e}] mr-[${h}px] h-[${n}px] max-h-[${n}px] w-[${s}px] border-[${a}px] border-[${d}] text-[${v}] shadow-2xl ring-1 ring-white/10 rounded-[${b}px]`,children:jsxs("div",{className:"flex h-full flex-col gap-4 p-2",children:[jsx("div",{className:"min-h-0 flex-1",children:jsx($,{messages:g,messagesRef:S,isLoading:q,userMessageBgColor:c,assistantMessageBgColor:p})}),jsx("div",{className:"shrink-0 rounded-xl bg-black/40 p-2",children:jsx(I,{handleSendMessage:T,input:u,setInput:L})})]})})]})}
+export{Q as ChatBot};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/api/groqApi.ts","../src/ChatBot/hooks/useChat.tsx","../src/ChatBot/components/ChatTrigger.tsx","../src/ChatBot/components/MessageList.tsx","../src/ChatBot/components/ChatInput.tsx","../src/ChatBot/ChatBot.tsx"],"names":["chatWithGroq","messages","model","apiKey","url","options","error","useChat","systemPrompt","assistantFirstMessage","models","setMessages","useState","input","setInput","isLoading","setIsLoading","messagesRef","useRef","modelNumber","useEffect","handleSendMessage","text","messageContent","userMessage","newMessages","res","prev","err","useChat_default","ChatTrigger","triggerColor","triggerImg","triggerRightPosition","triggerBottomPosition","jsx","PopoverTrigger","jsxs","ChatTrigger_default","MessageList","userMessageBgColor","assistantMessageBgColor","item","index","Markdown","MessageList_default","ChatInput","FaPaperPlane","ChatInput_default","Popover","PopoverContent","ChatBot","contentBgColor","contentHeight","contentWidth","contentBorder","contentBorderColor","textColor","contentRightPosition","contentBorderRoundness"],"mappings":"8PAgDA,eAAsBA,CAAAA,CAAa,CACjC,QAAA,CAAAC,CAAAA,CACA,MAAAC,CAAAA,CACA,MAAA,CAAAC,CACF,CAAA,CAAsB,CACpB,IAAMC,CAAAA,CAAM,iDAAA,CACNC,EAAU,CACd,MAAA,CAAQ,OACR,OAAA,CAAS,CACP,cAAe,CAAA,OAAA,EAAUF,CAAM,GAC/B,cAAA,CAAgB,kBAClB,EACA,IAAA,CAAM,IAAA,CAAK,UAAU,CACnB,KAAA,CAAOD,EACP,QAAA,CAAAD,CAAAA,CACA,YAAa,EACf,CAAC,CACH,CAAA,CAEA,GAAI,CAGF,OAAA,CADyB,KAAA,CADR,MAAM,KAAA,CAAMG,CAAAA,CAAKC,CAAO,CAAA,EACD,IAAA,IAC1B,OAAA,CAAQ,CAAC,EAAE,OAC3B,CAAA,MAASC,EAAO,CACd,OAAA,OAAA,CAAQ,MAAMA,CAAK,CAAA,CACZ,OACT,CACF,CClEA,SAASC,EAAQ,CACf,MAAA,CAAAJ,EACA,YAAA,CAAAK,CAAAA,CACA,sBAAAC,CACF,CAAA,CAAiB,CACf,IAAMC,CAAAA,CAAS,CACb,qBAAA,CACA,yBAAA,CACA,kCAAA,CACA,+CAAA,CACA,2CAAA,CACA,eAAA,CACA,qBACA,8BAAA,CACA,sBAAA,CACA,qBACA,8BAAA,CACA,qCAAA,CACA,qCACF,CAAA,CACM,CAACT,EAAUU,CAAW,CAAA,CAAIC,SAAS,CACvC,CACE,KAAM,QAAA,CACN,OAAA,CAASJ,CACX,CAAA,CACA,CACE,KAAM,WAAA,CACN,OAAA,CAASC,CACX,CACF,CAAC,EACK,CAACI,CAAAA,CAAOC,CAAQ,CAAA,CAAIF,QAAAA,CAAS,EAAE,CAAA,CAC/B,CAACG,EAAWC,CAAY,CAAA,CAAIJ,SAAS,KAAK,CAAA,CAC1CK,EAAcC,MAAAA,CAAuB,IAAI,EACzCC,CAAAA,CAAcD,MAAAA,CAAO,CAAC,CAAA,CAE5BE,SAAAA,CAAU,IAAM,CAEdH,CAAAA,EAAa,SAAS,QAAA,CAAS,CAC7B,IAAKA,CAAAA,CAAY,OAAA,CAAQ,aACzB,QAAA,CAAU,QACZ,CAAC,EACH,CAAA,CAAG,CAAChB,CAAQ,CAAC,EAEb,SAASoB,CAAAA,CAAkBC,EAAO,EAAA,CAAI,CACpC,IAAMC,CAAAA,CAAiB,OAAOD,GAAS,QAAA,CAAWA,CAAAA,CAAO,GACzD,GAAI,CAACT,EAAM,IAAA,EAAK,EAAK,CAACU,CAAAA,CAAe,IAAA,GAAQ,OAE7C,IAAMC,CAAAA,CAAc,CAAE,IAAA,CAAM,MAAA,CAAQ,QAASX,CAAAA,EAASU,CAAe,EAC/DE,CAAAA,CAAc,CAAC,GAAGxB,CAAAA,CAAUuB,CAAW,EAE7Cb,CAAAA,CAAYc,CAAW,EACvBX,CAAAA,CAAS,EAAE,EACXE,CAAAA,CAAa,IAAI,EAEjBhB,CAAAA,CAAa,CACX,MAAOU,CAAAA,CAAOS,CAAAA,CAAY,OAAO,CAAA,CACjC,QAAA,CAAUM,EACV,MAAA,CAAQtB,CACV,CAAC,CAAA,CACE,IAAA,CAAMuB,GAAQ,CACTA,CAAAA,GAAQ,SACVf,CAAAA,CAAagB,CAAAA,EAAS,CACpB,GAAGA,CAAAA,CACH,CACE,IAAA,CAAM,WAAA,CACN,QAAS,kDACX,CACF,CAAC,CAAA,CACDR,CAAAA,CAAY,UACRA,CAAAA,CAAY,OAAA,EAAWT,EAAO,MAAA,GAChCS,CAAAA,CAAY,QAAU,CAAA,CAAA,EAGxBR,CAAAA,CAAagB,GAAS,CAAC,GAAGA,EAAMD,CAAG,CAAC,EAExC,CAAC,CAAA,CACA,MAAOE,CAAAA,EAAQ,CACd,QAAQ,KAAA,CAAMA,CAAG,EACnB,CAAC,CAAA,CACA,QAAQ,IAAM,CACbZ,EAAa,KAAK,EACpB,CAAC,EACL,CACA,OAAO,CACL,QAAA,CAAAf,EACA,KAAA,CAAAY,CAAAA,CACA,QAAA,CAAAC,CAAAA,CACA,iBAAA,CAAAO,CAAAA,CACA,YAAAJ,CAAAA,CACA,SAAA,CAAAF,CACF,CACF,CAEA,IAAOc,CAAAA,CAAQtB,CAAAA,CC7Ff,SAASuB,CAAAA,CAAY,CACnB,YAAA,CAAAC,CAAAA,CAAe,OACf,UAAA,CAAAC,CAAAA,CACA,qBAAAC,CAAAA,CAAuB,EAAA,CACvB,sBAAAC,CAAAA,CAAwB,EAC1B,EAAqB,CACnB,OACEC,IAACC,cAAAA,CAAA,CAAe,QAAO,IAAA,CACrB,QAAA,CAAAC,KAAC,QAAA,CAAA,CACC,SAAA,CAAW,CAAA,aAAA,EAAgBJ,CAAoB,CAAA,IAAA,EAAOD,CAAAA,CAAa,GAAK,WAAW,CAAA,SAAA,EAAYE,CAAqB,CAAA,yCAAA,EAA4CH,CAAY,4DAA4DA,CAAY,CAAA,oBAAA,CAAA,CAEnP,UAAAC,CAAAA,EACCG,GAAAA,CAAC,OAAI,GAAA,CAAKH,CAAAA,CAAY,IAAI,mBAAA,CAAoB,SAAA,CAAU,YAAY,CAAA,CAErE,CAACA,GAAcG,GAAAA,CAAC,GAAA,CAAA,CAAE,UAAU,gCAAA,CAAiC,QAAA,CAAA,GAAA,CAAC,GACjE,CAAA,CACF,CAEJ,CAEA,IAAOG,CAAAA,CAAQR,EClBf,SAASS,CAAAA,CAAY,CACnB,QAAA,CAAAtC,CAAAA,CACA,WAAA,CAAAgB,EACA,SAAA,CAAAF,CAAAA,CACA,mBAAAyB,CAAAA,CAAqB,MAAA,CACrB,wBAAAC,CAAAA,CAA0B,SAC5B,EAAqB,CACnB,OACEJ,KAAC,KAAA,CAAA,CACC,GAAA,CAAKpB,EACL,KAAA,CAAO,CAAE,eAAgB,MAAA,CAAQ,eAAA,CAAiB,MAAO,CAAA,CACzD,SAAA,CAAU,gEAET,QAAA,CAAA,CAAAhB,CAAAA,CAAS,IAAI,CAACyC,CAAAA,CAAMC,IAAU,CAC7B,GAAID,EAAK,IAAA,GAAS,MAAA,CAChB,OACEP,GAAAA,CAAC,KAAA,CAAA,CAAgB,UAAU,oBAAA,CACzB,QAAA,CAAAA,IAAC,KAAA,CAAA,CACC,GAAA,CAAI,OACJ,KAAA,CAAO,CAAE,YAAa,SAAU,CAAA,CAChC,UAAW,CAAA,4CAAA,EAA+CK,CAAkB,2CAE3E,QAAA,CAAAE,CAAAA,CAAK,QAAQ,OAAA,CAAQ,cAAA,CAAgB,EAAE,CAAA,CAC1C,CAAA,CAAA,CAPQC,CAQV,CAAA,CAEJ,GAAID,EAAK,IAAA,GAAS,WAAA,CAChB,OACEP,GAAAA,CAAC,KAAA,CAAA,CAAgB,UAAU,kBAAA,CACzB,QAAA,CAAAA,IAAC,KAAA,CAAA,CACC,GAAA,CAAI,MACJ,KAAA,CAAO,CAAE,YAAa,SAAA,CAAW,OAAA,CAAS,cAAe,CAAA,CACzD,SAAA,CAAW,OAAOM,CAAuB,CAAA,6HAAA,CAAA,CAEzC,SAAAN,GAAAA,CAACS,CAAAA,CAAA,CAAU,QAAA,CAAAF,CAAAA,CAAK,OAAA,CAAQ,EAC1B,CAAA,CAAA,CAPQC,CAQV,CAGN,CAAC,CAAA,CACA5B,GACCoB,GAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,kBAAA,CACb,QAAA,CAAAA,IAAC,KAAA,CAAA,CAAI,SAAA,CAAU,uEACb,QAAA,CAAAA,GAAAA,CAAC,QAAK,SAAA,CAAU,iCAAA,CAAkC,EACpD,CAAA,CACF,CAAA,CAAA,CAEJ,CAEJ,CAEA,IAAOU,EAAQN,CAAAA,CCrDf,SAASO,CAAAA,CAAU,CAAE,kBAAAzB,CAAAA,CAAmB,KAAA,CAAAR,CAAAA,CAAO,QAAA,CAAAC,CAAS,CAAA,CAAmB,CACzE,OACEuB,IAAAA,CAAC,OAAI,SAAA,CAAU,6BAAA,CACb,UAAAF,GAAAA,CAAC,UAAA,CAAA,CACC,UAAY,CAAA,EAAM,CACZ,EAAE,GAAA,GAAQ,OAAA,EAAW,CAAC,CAAA,CAAE,QAAA,GAC1B,EAAE,cAAA,EAAe,CACjBd,GAAkB,EAEtB,CAAA,CACA,MAAOR,CAAAA,CACP,QAAA,CAAW,GAAMC,CAAAA,CAAS,CAAA,CAAE,OAAO,KAAK,CAAA,CACxC,YAAY,oBAAA,CACZ,KAAA,CAAO,CACL,WAAA,CAAa,SAAA,CACb,eAAgB,MAAA,CAChB,eAAA,CAAiB,MACnB,CAAA,CACA,GAAA,CAAI,MAAA,CACJ,SAAA,CAAU,gLAAA,CACZ,CAAA,CACAqB,IAAC,QAAA,CAAA,CACC,OAAA,CAAS,IAAMd,CAAAA,EAAkB,CACjC,UAAU,wFAAA,CAEV,QAAA,CAAAc,IAACY,YAAAA,CAAA,CAAa,UAAU,SAAA,CAAU,CAAA,CACpC,GACF,CAEJ,CAEA,IAAOC,CAAAA,CAAQF,CAAAA,CCjCf,IAAMG,EAA2B,CAAA,CAAA,IAAA,CAC3BC,CAAAA,CAAkC,UAsBjC,SAASC,CAAAA,CAAQ,CACtB,MAAA,CAAAhD,CAAAA,CACA,aAAA4B,CAAAA,CACA,UAAA,CAAAC,EACA,cAAA,CAAAoB,CAAAA,CAAiB,UACjB,aAAA,CAAAC,CAAAA,CAAgB,IAChB,YAAA,CAAAC,CAAAA,CAAe,IACf,aAAA,CAAAC,CAAAA,CAAgB,EAChB,kBAAA,CAAAC,CAAAA,CAAqB,UACrB,SAAA,CAAAC,CAAAA,CAAY,UACZ,kBAAA,CAAAjB,CAAAA,CAAqB,UACrB,uBAAA,CAAAC,CAAAA,CAA0B,UAC1B,oBAAA,CAAAR,CAAAA,CAAuB,GACvB,qBAAA,CAAAC,CAAAA,CAAwB,GACxB,oBAAA,CAAAwB,CAAAA,CAAuB,GACvB,YAAA,CAAAlD,CAAAA,CAAe,kFACf,qBAAA,CAAAC,CAAAA,CAAwB,iEACxB,sBAAA,CAAAkD,CAAAA,CAAyB,EAC3B,CAAA,CAAiB,CACf,GAAM,CACJ,QAAA,CAAA1D,EACA,KAAA,CAAAY,CAAAA,CACA,SAAAC,CAAAA,CACA,iBAAA,CAAAO,CAAAA,CACA,WAAA,CAAAJ,CAAAA,CACA,SAAA,CAAAF,CACF,CAAA,CAAIc,CAAAA,CAAQ,CAAE,MAAA,CAAA1B,CAAAA,CAAQ,aAAAK,CAAAA,CAAc,qBAAA,CAAAC,CAAsB,CAAC,CAAA,CAC3D,OACE4B,IAAAA,CAACY,CAAAA,CAAA,CACC,QAAA,CAAA,CAAAd,GAAAA,CAACG,EAAA,CACC,YAAA,CAAcP,EACd,UAAA,CAAYC,CAAAA,CACZ,qBAAsBC,CAAAA,CACtB,qBAAA,CAAuBC,EACzB,CAAA,CACAC,GAAAA,CAACe,EAAA,CACC,SAAA,CAAW,OAAOE,CAAc,CAAA,MAAA,EAASM,CAAoB,CAAA,OAAA,EAAUL,CAAa,cAAcA,CAAa,CAAA,OAAA,EAAUC,CAAY,CAAA,YAAA,EAAeC,CAAa,CAAA,YAAA,EAAeC,CAAkB,CAAA,QAAA,EAAWC,CAAS,8CAA8CE,CAAsB,CAAA,GAAA,CAAA,CAE1R,SAAAtB,IAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,gCAAA,CACb,QAAA,CAAA,CAAAF,IAAC,KAAA,CAAA,CAAI,SAAA,CAAU,iBACb,QAAA,CAAAA,GAAAA,CAACU,EAAA,CACC,QAAA,CAAU5C,EACV,WAAA,CAAagB,CAAAA,CACb,UAAWF,CAAAA,CACX,kBAAA,CAAoByB,EACpB,uBAAA,CAAyBC,CAAAA,CAC3B,EACF,CAAA,CAEAN,GAAAA,CAAC,OAAI,SAAA,CAAU,qCAAA,CACb,SAAAA,GAAAA,CAACa,CAAAA,CAAA,CACC,iBAAA,CAAmB3B,CAAAA,CACnB,MAAOR,CAAAA,CACP,QAAA,CAAUC,EACZ,CAAA,CACF,CAAA,CAAA,CACF,CAAA,CACF,CAAA,CAAA,CACF,CAEJ","file":"index.js","sourcesContent":["type chatWithGroqProps = {\r\n  messages: {\r\n    role: string;\r\n    content: string;\r\n  }[];\r\n  model: string;\r\n  apiKey: string;\r\n};\r\n\r\ntype response = {\r\n  id: string;\r\n  object: string;\r\n  created: number;\r\n  model: string;\r\n  choices: {\r\n    index: number;\r\n    message: {\r\n      role: string;\r\n      content: string;\r\n      reasoning?: string;\r\n    };\r\n    logprobs: null;\r\n    finish_reason: string;\r\n  }[];\r\n  usage: {\r\n    queue_time: number;\r\n    prompt_tokens: number;\r\n    prompt_time: number;\r\n    completion_tokens: number;\r\n    completion_time: number;\r\n    total_tokens: number;\r\n    total_time: number;\r\n    prompt_tokens_details: {\r\n      cached_tokens: number;\r\n    };\r\n    completion_tokens_details: {\r\n      reasoning_tokens: number;\r\n    };\r\n  };\r\n  usage_breakdown: null;\r\n  system_fingerprint: string;\r\n  x_groq: {\r\n    id: string;\r\n    seed: number;\r\n  };\r\n  service_tier: string;\r\n};\r\n\r\nexport async function chatWithGroq({\r\n  messages,\r\n  model,\r\n  apiKey,\r\n}: chatWithGroqProps) {\r\n  const url = \"https://api.groq.com/openai/v1/chat/completions\";\r\n  const options = {\r\n    method: \"POST\",\r\n    headers: {\r\n      Authorization: `Bearer ${apiKey}`,\r\n      \"Content-Type\": \"application/json\",\r\n    },\r\n    body: JSON.stringify({\r\n      model: model,\r\n      messages,\r\n      temperature: 0.3,\r\n    }),\r\n  };\r\n\r\n  try {\r\n    const response = await fetch(url, options);\r\n    const result: response = await response.json();\r\n    return result.choices[0].message;\r\n  } catch (error) {\r\n    console.error(error);\r\n    return \"error\";\r\n  }\r\n}\r\n","import { chatWithGroq } from \"@/api/groqApi\";\r\nimport { useEffect, useRef, useState } from \"react\";\r\n\r\nexport type UseChatProps = {\r\n  apiKey: string;\r\n  systemPrompt: string;\r\n  assistantFirstMessage: string;\r\n};\r\n\r\nfunction useChat({\r\n  apiKey,\r\n  systemPrompt,\r\n  assistantFirstMessage,\r\n}: UseChatProps) {\r\n  const models = [\r\n    \"openai/gpt-oss-120b\",\r\n    \"llama-3.3-70b-versatile\",\r\n    \"moonshotai/kimi-k2-instruct-0905\",\r\n    \"meta-llama/llama-4-maverick-17b-128e-instruct\",\r\n    \"meta-llama/llama-4-scout-17b-16e-instruct\",\r\n    \"groq/compound\",\r\n    \"openai/gpt-oss-20b\",\r\n    \"openai/gpt-oss-safeguard-20b\",\r\n    \"llama-3.1-8b-instant\",\r\n    \"groq/compound-mini\",\r\n    \"meta-llama/llama-guard-4-12b\",\r\n    \"meta-llama/llama-prompt-guard-2-86m\",\r\n    \"meta-llama/llama-prompt-guard-2-22m\",\r\n  ];\r\n  const [messages, setMessages] = useState([\r\n    {\r\n      role: \"system\",\r\n      content: systemPrompt,\r\n    },\r\n    {\r\n      role: \"assistant\",\r\n      content: assistantFirstMessage,\r\n    },\r\n  ]);\r\n  const [input, setInput] = useState(\"\");\r\n  const [isLoading, setIsLoading] = useState(false);\r\n  const messagesRef = useRef<HTMLDivElement>(null);\r\n  const modelNumber = useRef(0);\r\n\r\n  useEffect(() => {\r\n    // Scroll to the bottom of the messages container\r\n    messagesRef?.current?.scrollTo({\r\n      top: messagesRef.current.scrollHeight,\r\n      behavior: \"smooth\",\r\n    });\r\n  }, [messages]);\r\n\r\n  function handleSendMessage(text = \"\") {\r\n    const messageContent = typeof text === \"string\" ? text : \"\";\r\n    if (!input.trim() && !messageContent.trim()) return;\r\n\r\n    const userMessage = { role: \"user\", content: input || messageContent };\r\n    const newMessages = [...messages, userMessage];\r\n\r\n    setMessages(newMessages);\r\n    setInput(\"\");\r\n    setIsLoading(true);\r\n\r\n    chatWithGroq({\r\n      model: models[modelNumber.current],\r\n      messages: newMessages,\r\n      apiKey: apiKey,\r\n    })\r\n      .then((res) => {\r\n        if (res === \"error\") {\r\n          setMessages((prev) => [\r\n            ...prev,\r\n            {\r\n              role: \"assistant\",\r\n              content: \"Sorry, I encountered an error. Please try again.\",\r\n            },\r\n          ]);\r\n          modelNumber.current++;\r\n          if (modelNumber.current >= models.length) {\r\n            modelNumber.current = 0;\r\n          }\r\n        } else {\r\n          setMessages((prev) => [...prev, res]);\r\n        }\r\n      })\r\n      .catch((err) => {\r\n        console.error(err);\r\n      })\r\n      .finally(() => {\r\n        setIsLoading(false);\r\n      });\r\n  }\r\n  return {\r\n    messages,\r\n    input,\r\n    setInput,\r\n    handleSendMessage,\r\n    messagesRef,\r\n    isLoading,\r\n  };\r\n}\r\n\r\nexport default useChat;\r\n","import { PopoverTrigger } from \"@radix-ui/react-popover\";\r\n\r\ntype ChatTriggerProps = {\r\n  triggerColor?: string;\r\n  triggerImg?: string;\r\n  triggerRightPosition?: number;\r\n  triggerBottomPosition?: number;\r\n};\r\n\r\nfunction ChatTrigger({\r\n  triggerColor = \"#111\",\r\n  triggerImg,\r\n  triggerRightPosition = 24,\r\n  triggerBottomPosition = 24,\r\n}: ChatTriggerProps) {\r\n  return (\r\n    <PopoverTrigger asChild>\r\n      <button\r\n        className={`fixed right-[${triggerRightPosition}px] ${triggerImg ? \"\" : \"h-14 w-14\"} bottom-[${triggerBottomPosition}px] z-10 cursor-pointer rounded-full bg-[${triggerColor}] p-1 shadow-lg transition-all hover:scale-110 hover:bg-[${triggerColor}]/90 active:scale-95`}\r\n      >\r\n        {triggerImg && (\r\n          <img src={triggerImg} alt=\"Chat with chatbot\" className=\"h-14 w-14\" />\r\n        )}\r\n        {!triggerImg && <p className=\"text-white text-center text-xl\">C</p>}\r\n      </button>\r\n    </PopoverTrigger>\r\n  );\r\n}\r\n\r\nexport default ChatTrigger;\r\n","import type { RefObject } from \"react\";\r\nimport Markdown from \"react-markdown\";\r\n\r\ntype MessageListProps = {\r\n  messages: { role: string; content: string }[];\r\n  messagesRef: RefObject<HTMLDivElement | null>;\r\n  isLoading: boolean;\r\n  userMessageBgColor?: string;\r\n  assistantMessageBgColor?: string;\r\n};\r\n\r\nfunction MessageList({\r\n  messages,\r\n  messagesRef,\r\n  isLoading,\r\n  userMessageBgColor = \"#fff\",\r\n  assistantMessageBgColor = \"#007bff\",\r\n}: MessageListProps) {\r\n  return (\r\n    <div\r\n      ref={messagesRef}\r\n      style={{ scrollbarWidth: \"none\", msOverflowStyle: \"none\" }}\r\n      className=\" flex h-full flex-col gap-4 overflow-x-hidden overflow-y-auto\"\r\n    >\r\n      {messages.map((item, index) => {\r\n        if (item.role === \"user\")\r\n          return (\r\n            <div key={index} className=\"flex justify-start\">\r\n              <div\r\n                dir=\"auto\"\r\n                style={{ unicodeBidi: \"isolate\" }}\r\n                className={`max-w-[95%] rounded-2xl rounded-bl-none bg-[${userMessageBgColor}] px-4 py-2 text-start text-sm shadow-sm`}\r\n              >\r\n                {item.content.replace(/\\[\\[.*?\\]\\]/g, \"\")}\r\n              </div>\r\n            </div>\r\n          );\r\n        if (item.role === \"assistant\") {\r\n          return (\r\n            <div key={index} className=\"flex justify-end\">\r\n              <div\r\n                dir=\"rtl\"\r\n                style={{ unicodeBidi: \"isolate\", display: \"inline-block\" }}\r\n                className={`bg-[${assistantMessageBgColor}] max-w-[95%] rounded-2xl rounded-br-none px-4 py-2 text-start text-sm wrap-break-word whitespace-normal text-white shadow-md`}\r\n              >\r\n                <Markdown>{item.content}</Markdown>\r\n              </div>\r\n            </div>\r\n          );\r\n        }\r\n      })}\r\n      {isLoading && (\r\n        <div className=\"flex justify-end\">\r\n          <div className=\"bg-red/90 rounded-2xl rounded-br-none px-4 py-2 text-white shadow-md\">\r\n            <span className=\"loading loading-dots loading-xs\"></span>\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default MessageList;\r\n","import { FaPaperPlane } from \"react-icons/fa\";\r\nimport { FaQuestionCircle } from \"react-icons/fa\";\r\n\r\ntype ChatInputProps = {\r\n  handleSendMessage: (text?: string) => void;\r\n  input: string;\r\n  setInput: (text: string) => void;\r\n};\r\n\r\nfunction ChatInput({ handleSendMessage, input, setInput }: ChatInputProps) {\r\n  return (\r\n    <div className=\"flex h-full items-end gap-2\">\r\n      <textarea\r\n        onKeyDown={(e) => {\r\n          if (e.key === \"Enter\" && !e.shiftKey) {\r\n            e.preventDefault();\r\n            handleSendMessage();\r\n          }\r\n        }}\r\n        value={input}\r\n        onChange={(e) => setInput(e.target.value)}\r\n        placeholder=\"Ask me anything...\"\r\n        style={{\r\n          fieldSizing: \"content\",\r\n          scrollbarWidth: \"none\",\r\n          msOverflowStyle: \"none\",\r\n        }}\r\n        dir=\"auto\"\r\n        className=\"auto-expand text-yellowish-white placeholder:text-dark-yellowish-white max-h-[20vh] min-h-6 w-full resize-none overflow-auto bg-transparent py-1 ring-transparent outline-none\"\r\n      />\r\n      <button\r\n        onClick={() => handleSendMessage()}\r\n        className=\"bg-red hover:bg-light-red cursor-pointer rounded-full p-2 text-white transition-colors\"\r\n      >\r\n        <FaPaperPlane className=\"h-4 w-4\" />\r\n      </button>\r\n    </div>\r\n  );\r\n}\r\n\r\nexport default ChatInput;\r\n","import * as PopoverPrimitive from \"@radix-ui/react-popover\";\r\nimport useChat from \"./hooks/useChat\";\r\nimport ChatTrigger from \"./components/ChatTrigger\";\r\nimport MessageList from \"./components/MessageList\";\r\nimport ChatInput from \"./components/ChatInput\";\r\n\r\n// Custom popover components to avoid shadcn dependency\r\nconst Popover = PopoverPrimitive.Root;\r\nconst PopoverContent = PopoverPrimitive.Content;\r\n\r\nexport type ChatBotProps = {\r\n  apiKey: string;\r\n  triggerColor?: string;\r\n  triggerImg?: string;\r\n  contentBgColor?: string;\r\n  contentHeight?: number;\r\n  contentWidth?: number;\r\n  contentBorder?: number;\r\n  contentBorderColor?: string;\r\n  contentBorderRoundness?: number;\r\n  textColor?: string;\r\n  userMessageBgColor?: string;\r\n  assistantMessageBgColor?: string;\r\n  triggerRightPosition?: number;\r\n  triggerBottomPosition?: number;\r\n  contentRightPosition?: number;\r\n  systemPrompt?: string;\r\n  assistantFirstMessage?: string;\r\n};\r\n\r\nexport function ChatBot({\r\n  apiKey,\r\n  triggerColor,\r\n  triggerImg,\r\n  contentBgColor = \"#1a1a1a\",\r\n  contentHeight = 500,\r\n  contentWidth = 350,\r\n  contentBorder = 1,\r\n  contentBorderColor = \"#333333\",\r\n  textColor = \"#ffffff\",\r\n  userMessageBgColor = \"#007bff\",\r\n  assistantMessageBgColor = \"#2d2d2d\",\r\n  triggerRightPosition = 24,\r\n  triggerBottomPosition = 24,\r\n  contentRightPosition = 24,\r\n  systemPrompt = `You are a helpful AI assistant. Provide clear, concise, and accurate responses.`,\r\n  assistantFirstMessage = \"Hello! I'm here to help you. What can I assist you with today?\",\r\n  contentBorderRoundness = 16,\r\n}: ChatBotProps) {\r\n  const {\r\n    messages,\r\n    input,\r\n    setInput,\r\n    handleSendMessage,\r\n    messagesRef,\r\n    isLoading,\r\n  } = useChat({ apiKey, systemPrompt, assistantFirstMessage });\r\n  return (\r\n    <Popover>\r\n      <ChatTrigger\r\n        triggerColor={triggerColor}\r\n        triggerImg={triggerImg}\r\n        triggerRightPosition={triggerRightPosition}\r\n        triggerBottomPosition={triggerBottomPosition}\r\n      />\r\n      <PopoverContent\r\n        className={`bg-[${contentBgColor}] mr-[${contentRightPosition}px] h-[${contentHeight}px] max-h-[${contentHeight}px] w-[${contentWidth}px] border-[${contentBorder}px] border-[${contentBorderColor}] text-[${textColor}] shadow-2xl ring-1 ring-white/10 rounded-[${contentBorderRoundness}px]`}\r\n      >\r\n        <div className=\"flex h-full flex-col gap-4 p-2\">\r\n          <div className=\"min-h-0 flex-1\">\r\n            <MessageList\r\n              messages={messages}\r\n              messagesRef={messagesRef}\r\n              isLoading={isLoading}\r\n              userMessageBgColor={userMessageBgColor}\r\n              assistantMessageBgColor={assistantMessageBgColor}\r\n            />\r\n          </div>\r\n\r\n          <div className=\"shrink-0 rounded-xl bg-black/40 p-2\">\r\n            <ChatInput\r\n              handleSendMessage={handleSendMessage}\r\n              input={input}\r\n              setInput={setInput}\r\n            />\r\n          </div>\r\n        </div>\r\n      </PopoverContent>\r\n    </Popover>\r\n  );\r\n}\r\n"]}

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "react-groq-chat",
+  "version": "1.0.0",
+  "description": "A modern, customizable React component for integrating a chatbot with the Groq API",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "SETUP.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "react",
+    "chatbot",
+    "groq",
+    "api",
+    "typescript",
+    "tailwindcss",
+    "radix-ui",
+    "ai-chat",
+    "groq-api",
+    "react-component",
+    "chat-interface",
+    "markdown-support"
+  ],
+  "author": {
+    "name": "Ahmed Mamdoh",
+    "email": "your-email@example.com",
+    "url": "https://github.com/your-username"
+  },
+  "license": "ISC",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/react-groq-chat.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/react-groq-chat/issues"
+  },
+  "homepage": "https://github.com/your-username/react-groq-chat#readme",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0",
+    "react-icons": "^5.0.1",
+    "react-markdown": "^9.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}