react-groq-chat 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +16 -65
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,8 +10,6 @@ A modern, customizable React component for integrating a chatbot with the Groq A
|
|
|
10
10
|
- 🎯 **Easy Integration** - Simple drop-in component for React applications
|
|
11
11
|
- 🎨 **Customizable UI** - Tailwind CSS styling with custom color themes
|
|
12
12
|
- 🚀 **Modern Stack** - Built with TypeScript, Radix UI, and React 19
|
|
13
|
-
- 📱 **Responsive Design** - Works perfectly on desktop and mobile
|
|
14
|
-
- ⚡ **Fast Performance** - Optimized with React best practices
|
|
15
13
|
- 🔒 **Type Safe** - Full TypeScript support with comprehensive types
|
|
16
14
|
- 🎭 **Markdown Support** - Rich message formatting with react-markdown
|
|
17
15
|
- 🔄 **Real-time Chat** - Smooth conversation flow with loading states
|
|
@@ -31,7 +29,6 @@ function App() {
|
|
|
31
29
|
return (
|
|
32
30
|
<ChatBot
|
|
33
31
|
apiKey="your-groq-api-key"
|
|
34
|
-
triggerColor="#007bff"
|
|
35
32
|
/>
|
|
36
33
|
);
|
|
37
34
|
}
|
|
@@ -43,7 +40,21 @@ function App() {
|
|
|
43
40
|
|------|------|---------|-------------|
|
|
44
41
|
| `apiKey` | `string` | **Required** | Your Groq API key |
|
|
45
42
|
| `triggerColor` | `string` | `"#007bff"` | Color theme for the chat trigger button |
|
|
46
|
-
| `triggerImg` | `string` |
|
|
43
|
+
| `triggerImg` | `string` | null | Custom image for the trigger button |
|
|
44
|
+
| `contentBgColor` | `string` | `"#1a1a1a"` | Background color of chat window |
|
|
45
|
+
| `contentHeight` | `number` | `500` | Height of chat window in pixels |
|
|
46
|
+
| `contentWidth` | `number` | `350` | Width of chat window in pixels |
|
|
47
|
+
| `contentBorder` | `number` | `1` | Border width of chat window |
|
|
48
|
+
| `contentBorderColor` | `string` | `"#333333"` | Border color of chat window |
|
|
49
|
+
| `contentBorderRoundness` | `number` | `16` | Border radius of chat window |
|
|
50
|
+
| `textColor` | `string` | `"#ffffff"` | Text color in chat window |
|
|
51
|
+
| `userMessageBgColor` | `string` | `"#007bff"` | Background color for user messages |
|
|
52
|
+
| `assistantMessageBgColor` | `string` | `"#2d2d2d"` | Background color for assistant messages |
|
|
53
|
+
| `triggerRightPosition` | `number` | `24` | Right position of trigger button (px) |
|
|
54
|
+
| `triggerBottomPosition` | `number` | `24` | Bottom position of trigger button (px) |
|
|
55
|
+
| `contentRightPosition` | `number` | `24` | Right position of chat window (px) |
|
|
56
|
+
| `systemPrompt` | `string` | Default assistant prompt | Custom system prompt for AI behavior |
|
|
57
|
+
| `assistantFirstMessage` | `string` | Default greeting | First message from assistant |
|
|
47
58
|
|
|
48
59
|
## 🎨 Customization
|
|
49
60
|
|
|
@@ -72,21 +83,6 @@ npx tailwindcss init
|
|
|
72
83
|
- Tailwind CSS (for styling)
|
|
73
84
|
- Groq API key
|
|
74
85
|
|
|
75
|
-
## 🛠️ Development
|
|
76
|
-
|
|
77
|
-
```bash
|
|
78
|
-
# Clone the repository
|
|
79
|
-
git clone https://github.com/your-username/react-groq-chat.git
|
|
80
|
-
|
|
81
|
-
# Install dependencies
|
|
82
|
-
npm install
|
|
83
|
-
|
|
84
|
-
# Build the package
|
|
85
|
-
npm run build
|
|
86
|
-
|
|
87
|
-
# Watch for changes
|
|
88
|
-
npm run dev
|
|
89
|
-
```
|
|
90
86
|
|
|
91
87
|
## 🔗 API Integration
|
|
92
88
|
|
|
@@ -98,62 +94,17 @@ This component integrates with the Groq API and supports multiple models:
|
|
|
98
94
|
- `moonshotai/kimi-k2-instruct-0905`
|
|
99
95
|
- And more...
|
|
100
96
|
|
|
101
|
-
## 🎯 Example Usage
|
|
102
|
-
|
|
103
|
-
```tsx
|
|
104
|
-
import React, { useState } from 'react';
|
|
105
|
-
import { ChatBot } from 'react-groq-chat';
|
|
106
|
-
|
|
107
|
-
function ChatApp() {
|
|
108
|
-
const [apiKey, setApiKey] = useState('');
|
|
109
|
-
const [showChat, setShowChat] = useState(false);
|
|
110
|
-
|
|
111
|
-
return (
|
|
112
|
-
<div>
|
|
113
|
-
{!showChat ? (
|
|
114
|
-
<div>
|
|
115
|
-
<input
|
|
116
|
-
type="password"
|
|
117
|
-
placeholder="Enter Groq API Key"
|
|
118
|
-
value={apiKey}
|
|
119
|
-
onChange={(e) => setApiKey(e.target.value)}
|
|
120
|
-
/>
|
|
121
|
-
<button onClick={() => setShowChat(true)}>
|
|
122
|
-
Start Chat
|
|
123
|
-
</button>
|
|
124
|
-
</div>
|
|
125
|
-
) : (
|
|
126
|
-
<ChatBot
|
|
127
|
-
apiKey={apiKey}
|
|
128
|
-
triggerColor="#456"
|
|
129
|
-
/>
|
|
130
|
-
)}
|
|
131
|
-
</div>
|
|
132
|
-
);
|
|
133
|
-
}
|
|
134
|
-
```
|
|
135
|
-
|
|
136
|
-
## 🐛 Error Handling
|
|
137
|
-
|
|
138
|
-
The component includes built-in error handling for:
|
|
139
|
-
- Invalid API keys
|
|
140
|
-
- Network errors
|
|
141
|
-
- Rate limiting
|
|
142
|
-
- Model availability issues
|
|
143
97
|
|
|
144
98
|
## 📄 License
|
|
145
99
|
|
|
146
100
|
ISC License - see [LICENSE](LICENSE) file for details.
|
|
147
101
|
|
|
148
|
-
## 🤝 Contributing
|
|
149
|
-
|
|
150
|
-
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
151
102
|
|
|
152
103
|
## 📞 Support
|
|
153
104
|
|
|
154
105
|
For issues and questions:
|
|
155
106
|
- Open an issue on GitHub
|
|
156
|
-
- Check the [documentation](https://github.com/
|
|
107
|
+
- Check the [documentation](https://github.com/Ahmed-Mamdoh/react-groq-chat)
|
|
157
108
|
|
|
158
109
|
---
|
|
159
110
|
|