@tarxemo/customer_support 1.0.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/LICENSE +21 -0
- package/README.md +313 -0
- package/dist/api/client.d.ts +22 -0
- package/dist/api/client.d.ts.map +1 -0
- package/dist/components/ChatInput.d.ts +9 -0
- package/dist/components/ChatInput.d.ts.map +1 -0
- package/dist/components/ChatMessage.d.ts +8 -0
- package/dist/components/ChatMessage.d.ts.map +1 -0
- package/dist/components/ChatWindow.d.ts +14 -0
- package/dist/components/ChatWindow.d.ts.map +1 -0
- package/dist/components/CustomerSupportWidget.d.ts +4 -0
- package/dist/components/CustomerSupportWidget.d.ts.map +1 -0
- package/dist/customer_support.css +1 -0
- package/dist/hooks/useCustomerSupport.d.ts +7 -0
- package/dist/hooks/useCustomerSupport.d.ts.map +1 -0
- package/dist/hooks/useLocalStorage.d.ts +10 -0
- package/dist/hooks/useLocalStorage.d.ts.map +1 -0
- package/dist/index.d.ts +13 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.es.js +2557 -0
- package/dist/index.es.js.map +1 -0
- package/dist/index.umd.js +73 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/types/index.d.ts +92 -0
- package/dist/types/index.d.ts.map +1 -0
- package/package.json +76 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Tarxemo
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,313 @@
|
|
|
1
|
+
# @tarxemo/customer_support
|
|
2
|
+
|
|
3
|
+
> A professional React component library for AI-powered customer support integration with SiteWise
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@tarxemo/customer_support)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
## ✨ Features
|
|
9
|
+
|
|
10
|
+
- 🚀 **Drop-in Integration** - Add AI-powered customer support in minutes
|
|
11
|
+
- 🎨 **Fully Customizable** - Theme colors, positioning, and behavior
|
|
12
|
+
- 📱 **Responsive Design** - Works seamlessly on mobile and desktop
|
|
13
|
+
- 💬 **Real-time Chat** - Powered by SiteWise RAG (Retrieval-Augmented Generation)
|
|
14
|
+
- 🔒 **Secure** - API key authentication with SiteWise backend
|
|
15
|
+
- 📚 **Source Attribution** - Shows relevant sources for AI responses
|
|
16
|
+
- ♿ **Accessible** - WCAG compliant with keyboard navigation
|
|
17
|
+
- 🎯 **TypeScript** - Full type safety and IntelliSense support
|
|
18
|
+
- 🪝 **Headless Hooks** - Build your own custom UI
|
|
19
|
+
|
|
20
|
+
## 📦 Installation
|
|
21
|
+
|
|
22
|
+
```bash
|
|
23
|
+
npm install @tarxemo/customer_support
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
or with yarn:
|
|
27
|
+
|
|
28
|
+
```bash
|
|
29
|
+
yarn add @tarxemo/customer_support
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
## 🚀 Quick Start
|
|
33
|
+
|
|
34
|
+
### Basic Usage
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { CustomerSupportWidget } from '@tarxemo/customer_support';
|
|
38
|
+
import '@tarxemo/customer_support/styles';
|
|
39
|
+
|
|
40
|
+
function App() {
|
|
41
|
+
return (
|
|
42
|
+
<div>
|
|
43
|
+
<h1>My Website</h1>
|
|
44
|
+
{/* Your content */}
|
|
45
|
+
|
|
46
|
+
<CustomerSupportWidget
|
|
47
|
+
apiKey="your-sitewise-api-key"
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
That's it! The chat widget will appear in the bottom-right corner of your page.
|
|
55
|
+
|
|
56
|
+
## 📖 API Reference
|
|
57
|
+
|
|
58
|
+
### CustomerSupportWidget Props
|
|
59
|
+
|
|
60
|
+
| Prop | Type | Default | Description |
|
|
61
|
+
|------|------|---------|-------------|
|
|
62
|
+
| `apiKey` | `string` | **required** | Your SiteWise API key |
|
|
63
|
+
| `baseUrl` | `string` | `http://localhost:8000/api` | SiteWise API base URL |
|
|
64
|
+
| `theme` | `ThemeConfig` | - | Custom theme configuration |
|
|
65
|
+
| `position` | `Position` | `'bottom-right'` | Widget position |
|
|
66
|
+
| `welcomeMessage` | `string` | `'Hi! How can I help you today?'` | Initial welcome message |
|
|
67
|
+
| `placeholder` | `string` | `'Type your message...'` | Input placeholder text |
|
|
68
|
+
| `className` | `string` | `''` | Additional CSS class |
|
|
69
|
+
| `onError` | `(error: Error) => void` | - | Error callback |
|
|
70
|
+
| `onMessageSent` | `(message: string) => void` | - | Called when user sends message |
|
|
71
|
+
| `onMessageReceived` | `(response: string) => void` | - | Called when AI responds |
|
|
72
|
+
|
|
73
|
+
### Theme Configuration
|
|
74
|
+
|
|
75
|
+
```typescript
|
|
76
|
+
interface ThemeConfig {
|
|
77
|
+
primaryColor?: string; // Default: #6366f1
|
|
78
|
+
secondaryColor?: string; // Default: #8b5cf6
|
|
79
|
+
backgroundColor?: string; // Default: #ffffff
|
|
80
|
+
textColor?: string; // Default: #1f2937
|
|
81
|
+
fontFamily?: string; // Default: system fonts
|
|
82
|
+
borderRadius?: string; // Default: 12px
|
|
83
|
+
buttonColor?: string; // Default: #6366f1
|
|
84
|
+
userMessageColor?: string; // Default: #6366f1
|
|
85
|
+
assistantMessageColor?: string; // Default: #f3f4f6
|
|
86
|
+
}
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
### Position Options
|
|
90
|
+
|
|
91
|
+
- `'bottom-right'` (default)
|
|
92
|
+
- `'bottom-left'`
|
|
93
|
+
- `'top-right'`
|
|
94
|
+
- `'top-left'`
|
|
95
|
+
|
|
96
|
+
## 🎨 Customization Examples
|
|
97
|
+
|
|
98
|
+
### Custom Theme
|
|
99
|
+
|
|
100
|
+
```tsx
|
|
101
|
+
<CustomerSupportWidget
|
|
102
|
+
apiKey="your-api-key"
|
|
103
|
+
theme={{
|
|
104
|
+
primaryColor: '#10b981',
|
|
105
|
+
secondaryColor: '#059669',
|
|
106
|
+
userMessageColor: '#10b981',
|
|
107
|
+
borderRadius: '8px',
|
|
108
|
+
}}
|
|
109
|
+
/>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
### Custom Position and Welcome Message
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
<CustomerSupportWidget
|
|
116
|
+
apiKey="your-api-key"
|
|
117
|
+
position="bottom-left"
|
|
118
|
+
welcomeMessage="Hello! Ask me anything about our products!"
|
|
119
|
+
placeholder="Ask a question..."
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### With Event Handlers
|
|
124
|
+
|
|
125
|
+
```tsx
|
|
126
|
+
<CustomerSupportWidget
|
|
127
|
+
apiKey="your-api-key"
|
|
128
|
+
onMessageSent={(msg) => console.log('User sent:', msg)}
|
|
129
|
+
onMessageReceived={(response) => console.log('AI replied:', response)}
|
|
130
|
+
onError={(error) => console.error('Error:', error)}
|
|
131
|
+
/>
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## 🪝 Headless Hook Usage
|
|
135
|
+
|
|
136
|
+
For full control over the UI, use the `useCustomerSupport` hook:
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
import { useCustomerSupport } from '@tarxemo/customer_support';
|
|
140
|
+
|
|
141
|
+
function CustomChat() {
|
|
142
|
+
const {
|
|
143
|
+
messages,
|
|
144
|
+
sendMessage,
|
|
145
|
+
isLoading,
|
|
146
|
+
error,
|
|
147
|
+
clearError,
|
|
148
|
+
sessionId,
|
|
149
|
+
loadHistory,
|
|
150
|
+
clearHistory
|
|
151
|
+
} = useCustomerSupport({
|
|
152
|
+
apiKey: 'your-api-key',
|
|
153
|
+
baseUrl: 'https://your-api.com/api'
|
|
154
|
+
});
|
|
155
|
+
|
|
156
|
+
return (
|
|
157
|
+
<div>
|
|
158
|
+
{messages.map(msg => (
|
|
159
|
+
<div key={msg.id}>
|
|
160
|
+
<strong>{msg.role}:</strong> {msg.content}
|
|
161
|
+
</div>
|
|
162
|
+
))}
|
|
163
|
+
<button onClick={() => sendMessage('Hello!')}>
|
|
164
|
+
Send
|
|
165
|
+
</button>
|
|
166
|
+
</div>
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
## 🔧 Advanced Usage
|
|
172
|
+
|
|
173
|
+
### Custom Components
|
|
174
|
+
|
|
175
|
+
You can use individual components for more control:
|
|
176
|
+
|
|
177
|
+
```tsx
|
|
178
|
+
import { ChatWindow, useCustomerSupport } from '@tarxemo/customer_support';
|
|
179
|
+
|
|
180
|
+
function MyCustomWidget() {
|
|
181
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
182
|
+
const { messages, sendMessage, isLoading, error } = useCustomerSupport({
|
|
183
|
+
apiKey: 'your-api-key'
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
return (
|
|
187
|
+
<div>
|
|
188
|
+
<button onClick={() => setIsOpen(!isOpen)}>Toggle Chat</button>
|
|
189
|
+
{isOpen && (
|
|
190
|
+
<ChatWindow
|
|
191
|
+
messages={messages}
|
|
192
|
+
onSendMessage={sendMessage}
|
|
193
|
+
onClose={() => setIsOpen(false)}
|
|
194
|
+
isLoading={isLoading}
|
|
195
|
+
error={error}
|
|
196
|
+
/>
|
|
197
|
+
)}
|
|
198
|
+
</div>
|
|
199
|
+
);
|
|
200
|
+
}
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
### Using with Next.js
|
|
204
|
+
|
|
205
|
+
```tsx
|
|
206
|
+
// app/layout.tsx or pages/_app.tsx
|
|
207
|
+
'use client'; // For Next.js 13+ App Router
|
|
208
|
+
|
|
209
|
+
import { CustomerSupportWidget } from '@tarxemo/customer_support';
|
|
210
|
+
import '@tarxemo/customer_support/styles';
|
|
211
|
+
|
|
212
|
+
export default function RootLayout({ children }) {
|
|
213
|
+
return (
|
|
214
|
+
<html>
|
|
215
|
+
<body>
|
|
216
|
+
{children}
|
|
217
|
+
<CustomerSupportWidget apiKey={process.env.NEXT_PUBLIC_SITEWISE_API_KEY} />
|
|
218
|
+
</body>
|
|
219
|
+
</html>
|
|
220
|
+
);
|
|
221
|
+
}
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
## 🔐 Getting an API Key
|
|
225
|
+
|
|
226
|
+
1. Sign up for SiteWise at your SiteWise instance
|
|
227
|
+
2. Register your website
|
|
228
|
+
3. Trigger a crawl of your website content
|
|
229
|
+
4. Generate an API key for your website
|
|
230
|
+
5. Use the API key in the widget configuration
|
|
231
|
+
|
|
232
|
+
## 🌐 Production Deployment
|
|
233
|
+
|
|
234
|
+
For production, set the `baseUrl` to your SiteWise API:
|
|
235
|
+
|
|
236
|
+
```tsx
|
|
237
|
+
<CustomerSupportWidget
|
|
238
|
+
apiKey={process.env.REACT_APP_SITEWISE_API_KEY}
|
|
239
|
+
baseUrl="https://api.yourdomain.com/api"
|
|
240
|
+
/>
|
|
241
|
+
```
|
|
242
|
+
|
|
243
|
+
## 📱 Mobile Support
|
|
244
|
+
|
|
245
|
+
The widget is fully responsive and automatically adjusts to mobile screens:
|
|
246
|
+
- On mobile: Chat takes up the full screen
|
|
247
|
+
- On desktop: Chat window appears as a floating widget
|
|
248
|
+
|
|
249
|
+
## ♿ Accessibility
|
|
250
|
+
|
|
251
|
+
- Full keyboard navigation support
|
|
252
|
+
- ARIA labels and roles
|
|
253
|
+
- Screen reader compatible
|
|
254
|
+
- Focus management
|
|
255
|
+
- High contrast support
|
|
256
|
+
|
|
257
|
+
## 🧪 TypeScript Support
|
|
258
|
+
|
|
259
|
+
The library is written in TypeScript and includes full type definitions:
|
|
260
|
+
|
|
261
|
+
```typescript
|
|
262
|
+
import type {
|
|
263
|
+
Message,
|
|
264
|
+
Source,
|
|
265
|
+
ThemeConfig,
|
|
266
|
+
CustomerSupportConfig
|
|
267
|
+
} from '@tarxemo/customer_support';
|
|
268
|
+
```
|
|
269
|
+
|
|
270
|
+
## 🛠️ Development
|
|
271
|
+
|
|
272
|
+
```bash
|
|
273
|
+
# Install dependencies
|
|
274
|
+
npm install
|
|
275
|
+
|
|
276
|
+
# Run development server
|
|
277
|
+
npm run dev
|
|
278
|
+
|
|
279
|
+
# Build for production
|
|
280
|
+
npm run build
|
|
281
|
+
|
|
282
|
+
# Run tests
|
|
283
|
+
npm run test
|
|
284
|
+
|
|
285
|
+
# Type check
|
|
286
|
+
npm run type-check
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
## 📄 License
|
|
290
|
+
|
|
291
|
+
MIT © Tarxemo
|
|
292
|
+
|
|
293
|
+
## 🤝 Contributing
|
|
294
|
+
|
|
295
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
296
|
+
|
|
297
|
+
## 📞 Support
|
|
298
|
+
|
|
299
|
+
For issues and questions:
|
|
300
|
+
- GitHub Issues: [github.com/tarxemo/customer_support/issues](https://github.com/tarxemo/customer_support/issues)
|
|
301
|
+
- Documentation: [Full Documentation](https://github.com/tarxemo/customer_support#readme)
|
|
302
|
+
|
|
303
|
+
## 🔗 Links
|
|
304
|
+
|
|
305
|
+
- [NPM Package](https://www.npmjs.com/package/@tarxemo/customer_support)
|
|
306
|
+
- [GitHub Repository](https://github.com/tarxemo/customer_support)
|
|
307
|
+
- [SiteWise Platform](https://github.com/yourusername/sitewise)
|
|
308
|
+
|
|
309
|
+
---
|
|
310
|
+
|
|
311
|
+
Made with ❤️ by Tarxemo
|
|
312
|
+
# custom_support
|
|
313
|
+
# custom_support
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ChatResponse, ConversationHistoryResponse } from '../types';
|
|
2
|
+
export declare class CustomerSupportAPIClient {
|
|
3
|
+
private client;
|
|
4
|
+
constructor(apiKey: string, baseUrl?: string);
|
|
5
|
+
/**
|
|
6
|
+
* Send a message to the customer support API
|
|
7
|
+
*/
|
|
8
|
+
sendMessage(question: string, sessionId?: string): Promise<ChatResponse['data']>;
|
|
9
|
+
/**
|
|
10
|
+
* Get conversation history for a session
|
|
11
|
+
*/
|
|
12
|
+
getConversationHistory(sessionId: string): Promise<ConversationHistoryResponse['data']>;
|
|
13
|
+
/**
|
|
14
|
+
* Update API key
|
|
15
|
+
*/
|
|
16
|
+
updateApiKey(apiKey: string): void;
|
|
17
|
+
/**
|
|
18
|
+
* Update base URL
|
|
19
|
+
*/
|
|
20
|
+
updateBaseUrl(baseUrl: string): void;
|
|
21
|
+
}
|
|
22
|
+
//# sourceMappingURL=client.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/api/client.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,2BAA2B,EAAiB,MAAM,UAAU,CAAC;AAIzF,qBAAa,wBAAwB;IACjC,OAAO,CAAC,MAAM,CAAgB;gBAElB,MAAM,EAAE,MAAM,EAAE,OAAO,GAAE,MAAyB;IA2B9D;;OAEG;IACG,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;IAoBtF;;OAEG;IACG,sBAAsB,CAAC,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC,2BAA2B,CAAC,MAAM,CAAC,CAAC;IAmB7F;;OAEG;IACH,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAIlC;;OAEG;IACH,aAAa,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;CAGvC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
interface ChatInputProps {
|
|
3
|
+
onSendMessage: (message: string) => void;
|
|
4
|
+
isLoading: boolean;
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const ChatInput: React.FC<ChatInputProps>;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=ChatInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAGlE,UAAU,cAAc;IACpB,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CA4C9C,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Message as MessageType } from '../types';
|
|
3
|
+
interface ChatMessageProps {
|
|
4
|
+
message: MessageType;
|
|
5
|
+
}
|
|
6
|
+
export declare const ChatMessage: React.FC<ChatMessageProps>;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=ChatMessage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAGvD,UAAU,gBAAgB;IACtB,OAAO,EAAE,WAAW,CAAC;CACxB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAsClD,CAAC"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { Message } from '../types';
|
|
3
|
+
interface ChatWindowProps {
|
|
4
|
+
messages: Message[];
|
|
5
|
+
onSendMessage: (message: string) => void;
|
|
6
|
+
onClose: () => void;
|
|
7
|
+
isLoading: boolean;
|
|
8
|
+
error: Error | null;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
welcomeMessage?: string;
|
|
11
|
+
}
|
|
12
|
+
export declare const ChatWindow: React.FC<ChatWindowProps>;
|
|
13
|
+
export {};
|
|
14
|
+
//# sourceMappingURL=ChatWindow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ChatWindow.d.ts","sourceRoot":"","sources":["../../src/components/ChatWindow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,UAAU,eAAe;IACrB,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoEhD,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomerSupportWidget.d.ts","sourceRoot":"","sources":["../../src/components/CustomerSupportWidget.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAEtD,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAyFjE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--cs-primary-color: #6366f1;--cs-secondary-color: #8b5cf6;--cs-bg-color: #ffffff;--cs-text-color: #1f2937;--cs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", sans-serif;--cs-border-radius: 12px;--cs-button-color: #6366f1;--cs-user-message-color: #6366f1;--cs-assistant-message-color: #f3f4f6;--cs-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--cs-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--cs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--cs-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}.cs-widget{position:fixed;z-index:9999;font-family:var(--cs-font-family)}.cs-widget--bottom-right{bottom:20px;right:20px}.cs-widget--bottom-left{bottom:20px;left:20px}.cs-widget--top-right{top:20px;right:20px}.cs-widget--top-left{top:20px;left:20px}.cs-widget__toggle{position:relative;width:60px;height:60px;border-radius:50%;background:linear-gradient(135deg,var(--cs-primary-color),var(--cs-secondary-color));border:none;color:#fff;cursor:pointer;box-shadow:var(--cs-shadow-xl);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.cs-widget__toggle:hover{transform:scale(1.1);box-shadow:0 25px 30px -10px #6366f166}.cs-widget__toggle:active{transform:scale(.95)}.cs-widget__toggle--open{background:#ef4444}.cs-widget__badge{position:absolute;top:-5px;right:-5px;background:#ef4444;color:#fff;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;box-shadow:var(--cs-shadow)}.cs-window{position:absolute;bottom:80px;right:0;width:380px;max-width:calc(100vw - 40px);height:600px;max-height:calc(100vh - 120px);background:var(--cs-bg-color);border-radius:var(--cs-border-radius);box-shadow:var(--cs-shadow-xl);display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.cs-window__header{background:linear-gradient(135deg,var(--cs-primary-color),var(--cs-secondary-color));color:#fff;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.cs-window__title{margin:0;font-size:18px;font-weight:600}.cs-window__close{background:#fff3;border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.cs-window__close:hover{background:#ffffff4d}.cs-window__messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;background:#f9fafb}.cs-window__messages::-webkit-scrollbar{width:6px}.cs-window__messages::-webkit-scrollbar-track{background:transparent}.cs-window__messages::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.cs-window__messages::-webkit-scrollbar-thumb:hover{background:#9ca3af}.cs-window__welcome{text-align:center;padding:40px 20px;color:#6b7280}.cs-window__welcome p{margin:0;font-size:16px}.cs-window__typing{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--cs-assistant-message-color);border-radius:var(--cs-border-radius);width:fit-content;color:var(--cs-text-color)}.cs-window__typing-icon{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.cs-window__error{background:#fee2e2;border:1px solid #ef4444;color:#991b1b;padding:12px 16px;border-radius:var(--cs-border-radius)}.cs-window__error p{margin:0}.cs-message{display:flex;flex-direction:column;gap:6px;max-width:85%;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.cs-message--user{align-self:flex-end;align-items:flex-end}.cs-message--assistant{align-self:flex-start;align-items:flex-start}.cs-message__content{background:var(--cs-assistant-message-color);padding:12px 16px;border-radius:var(--cs-border-radius);color:var(--cs-text-color);word-wrap:break-word}.cs-message--user .cs-message__content{background:var(--cs-user-message-color);color:#fff}.cs-message__text{margin:0;line-height:1.5;white-space:pre-wrap}.cs-message__time{font-size:11px;color:#9ca3af;padding:0 4px}.cs-message__sources{margin-top:12px;padding-top:12px;border-top:1px solid #e5e7eb}.cs-message__sources-title{margin:0 0 8px;font-size:12px;font-weight:600;color:#6b7280}.cs-message__sources-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}.cs-message__source-item{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}.cs-message__source-link{display:flex;align-items:center;gap:4px;color:var(--cs-primary-color);text-decoration:none;flex:1;min-width:0}.cs-message__source-link:hover{text-decoration:underline}.cs-message__source-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cs-message__source-similarity{color:#6b7280;font-size:11px;white-space:nowrap}.cs-window__input-wrapper{padding:16px;background:var(--cs-bg-color);border-top:1px solid #e5e7eb;flex-shrink:0}.cs-input{display:flex;gap:8px;align-items:flex-end}.cs-input__textarea{flex:1;padding:12px 16px;border:1px solid #d1d5db;border-radius:var(--cs-border-radius);font-family:var(--cs-font-family);font-size:14px;resize:none;max-height:120px;min-height:44px;transition:border-color .2s}.cs-input__textarea:focus{outline:none;border-color:var(--cs-primary-color);box-shadow:0 0 0 3px #6366f11a}.cs-input__textarea:disabled{background:#f3f4f6;cursor:not-allowed}.cs-input__button{background:var(--cs-button-color);color:#fff;border:none;width:44px;height:44px;border-radius:var(--cs-border-radius);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}.cs-input__button:hover:not(:disabled){background:var(--cs-secondary-color);transform:scale(1.05)}.cs-input__button:active:not(:disabled){transform:scale(.95)}.cs-input__button:disabled{background:#d1d5db;cursor:not-allowed}@media(max-width:480px){.cs-widget{top:0!important;right:0!important;bottom:0!important;left:0!important}.cs-window{width:100vw;height:100vh;max-width:100vw;max-height:100vh;bottom:0;right:0;border-radius:0}.cs-widget__toggle{bottom:20px;right:20px}}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { UseCustomerSupportOptions, UseCustomerSupportReturn } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Core headless hook for customer support functionality
|
|
4
|
+
* Can be used to build custom chat interfaces
|
|
5
|
+
*/
|
|
6
|
+
export declare function useCustomerSupport(options: UseCustomerSupportOptions): UseCustomerSupportReturn;
|
|
7
|
+
//# sourceMappingURL=useCustomerSupport.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useCustomerSupport.d.ts","sourceRoot":"","sources":["../../src/hooks/useCustomerSupport.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAW,yBAAyB,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAC;AAK7F;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,yBAAyB,GAAG,wBAAwB,CA4I/F"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Custom hook for localStorage with TypeScript support
|
|
4
|
+
*/
|
|
5
|
+
export declare function useLocalStorage<T>(key: string, initialValue: T): [T, Dispatch<SetStateAction<T>>];
|
|
6
|
+
/**
|
|
7
|
+
* Generate a unique session ID
|
|
8
|
+
*/
|
|
9
|
+
export declare function generateSessionId(): string;
|
|
10
|
+
//# sourceMappingURL=useLocalStorage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useLocalStorage.d.ts","sourceRoot":"","sources":["../../src/hooks/useLocalStorage.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3D;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC7B,GAAG,EAAE,MAAM,EACX,YAAY,EAAE,CAAC,GAChB,CAAC,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAyBlC;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAE1C"}
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @tarxemo/customer_support
|
|
3
|
+
* Professional React component library for AI-powered customer support
|
|
4
|
+
*/
|
|
5
|
+
export { CustomerSupportWidget } from './components/CustomerSupportWidget';
|
|
6
|
+
export { ChatWindow } from './components/ChatWindow';
|
|
7
|
+
export { ChatMessage } from './components/ChatMessage';
|
|
8
|
+
export { ChatInput } from './components/ChatInput';
|
|
9
|
+
export { useCustomerSupport } from './hooks/useCustomerSupport';
|
|
10
|
+
export { useLocalStorage } from './hooks/useLocalStorage';
|
|
11
|
+
export type { Message, Source, ChatResponse, ConversationHistoryResponse, ErrorResponse, ThemeConfig, Position, CustomerSupportConfig, UseCustomerSupportOptions, UseCustomerSupportReturn } from './types';
|
|
12
|
+
export { CustomerSupportAPIClient } from './api/client';
|
|
13
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAGnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG1D,YAAY,EACR,OAAO,EACP,MAAM,EACN,YAAY,EACZ,2BAA2B,EAC3B,aAAa,EACb,WAAW,EACX,QAAQ,EACR,qBAAqB,EACrB,yBAAyB,EACzB,wBAAwB,EAC3B,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAGxD,OAAO,oBAAoB,CAAC"}
|