nui-chatbot-pkg 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 +159 -21
- package/dist/index.css +1 -0
- package/dist/index.d.mts +4 -1
- package/dist/index.d.ts +4 -1
- package/dist/index.js +4 -23
- package/dist/index.mjs +4 -23
- package/package.json +15 -4
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# NUI Chatbot Package
|
|
2
2
|
|
|
3
|
-
A customizable, meaningful, and easy-to-integrate Chatbot component for React applications.
|
|
3
|
+
A customizable, meaningful, and easy-to-integrate Chatbot component for React applications with support for custom components, theming, and streaming responses.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
@@ -8,35 +8,173 @@ A customizable, meaningful, and easy-to-integrate Chatbot component for React ap
|
|
|
8
8
|
npm install nui-chatbot-pkg
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
### Requirements
|
|
12
|
+
|
|
13
|
+
- React 18+
|
|
14
|
+
- React DOM 18+
|
|
15
|
+
- Tailwind CSS 3+
|
|
16
|
+
|
|
17
|
+
## Quick Start
|
|
18
|
+
|
|
19
|
+
### Basic Setup
|
|
12
20
|
|
|
13
21
|
```tsx
|
|
14
|
-
|
|
22
|
+
"use client";
|
|
15
23
|
|
|
16
|
-
|
|
24
|
+
import { ChatBot } from "nui-chatbot-pkg";
|
|
25
|
+
import "nui-chatbot-pkg/style.css"; // Required for styles
|
|
26
|
+
|
|
27
|
+
export default function ChatPage() {
|
|
17
28
|
return (
|
|
18
|
-
<
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
29
|
+
<div className="min-h-screen flex items-center justify-center">
|
|
30
|
+
<ChatBot
|
|
31
|
+
strapiUrl="http://localhost:1337"
|
|
32
|
+
cardRegistry={[]}
|
|
33
|
+
theme={{
|
|
34
|
+
primaryColor: "#30b3ebff",
|
|
35
|
+
secondaryColor: "#2281f4ff",
|
|
36
|
+
accentColor: "#38c7daff",
|
|
37
|
+
}}
|
|
38
|
+
title="My Chatbot"
|
|
39
|
+
/>
|
|
40
|
+
</div>
|
|
28
41
|
);
|
|
29
42
|
}
|
|
30
43
|
```
|
|
31
44
|
|
|
32
|
-
##
|
|
45
|
+
## Component Registry
|
|
46
|
+
|
|
47
|
+
The component registry allows you to define custom card components for different data types. Each component in the registry will be rendered based on the `id` matching the response type.
|
|
48
|
+
|
|
49
|
+
### Setup Example
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import DealCard from "./components/DealCard";
|
|
53
|
+
import EmployeeCard from "./components/EmployeeCard";
|
|
54
|
+
import TourCard from "./components/TourCard";
|
|
55
|
+
import GenericCard from "./components/GenericCard";
|
|
56
|
+
|
|
57
|
+
const registryData = [
|
|
58
|
+
{ id: "card1", component: DealCard },
|
|
59
|
+
{ id: "card2", component: EmployeeCard },
|
|
60
|
+
{ id: "card3", component: TourCard },
|
|
61
|
+
{ id: "default", component: GenericCard },
|
|
62
|
+
];
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Custom Card Component Example
|
|
66
|
+
|
|
67
|
+
```tsx
|
|
68
|
+
interface CardProps {
|
|
69
|
+
data: any;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default function DealCard({ data }: CardProps) {
|
|
73
|
+
return (
|
|
74
|
+
<div className="bg-white rounded-lg p-4 shadow-md">
|
|
75
|
+
<h3 className="font-bold text-lg">{data.title}</h3>
|
|
76
|
+
<p className="text-gray-600">{data.description}</p>
|
|
77
|
+
<p className="text-blue-600 font-semibold mt-2">{data.price}</p>
|
|
78
|
+
</div>
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## Theme Configuration
|
|
84
|
+
|
|
85
|
+
Customize the chatbot's appearance with the theme object:
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
const customTheme = {
|
|
89
|
+
primaryColor: "#30b3ebff", // Main color for buttons and accents
|
|
90
|
+
secondaryColor: "#2281f4ff", // Secondary accent color
|
|
91
|
+
accentColor: "#38c7daff", // Additional accent color
|
|
92
|
+
container: "rounded-2xl border-blue-500", // Tailwind classes for container
|
|
93
|
+
header: "text-white", // Tailwind classes for header
|
|
94
|
+
input: "border-blue-400 rounded-xl", // Tailwind classes for input
|
|
95
|
+
showGradient: false, // Enable/disable gradient backgrounds
|
|
96
|
+
welcomeMessage: "Welcome!", // Greeting message
|
|
97
|
+
welcomeDescription: "How can I help?", // Subtitle message
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
<ChatBot
|
|
101
|
+
theme={customTheme}
|
|
102
|
+
// ... other props
|
|
103
|
+
/>;
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
## Props Reference
|
|
107
|
+
|
|
108
|
+
| Prop | Type | Required | Description |
|
|
109
|
+
| -------------- | ------------------------------------------------------- | -------- | -------------------------------------------------------- |
|
|
110
|
+
| `strapiUrl` | `string` | ✓ | URL of your Strapi backend API |
|
|
111
|
+
| `cardRegistry` | `Array<{ id: string; component: React.ComponentType }>` | ✓ | Registry of custom card components |
|
|
112
|
+
| `theme` | `object` | ✓ | Theme configuration object |
|
|
113
|
+
| `title` | `string` | ✓ | Title displayed in the chat window header |
|
|
114
|
+
| `streamSpeed` | `number` | - | Speed of message streaming in milliseconds (default: 10) |
|
|
115
|
+
|
|
116
|
+
## Complete Example
|
|
117
|
+
|
|
118
|
+
```tsx
|
|
119
|
+
"use client";
|
|
120
|
+
|
|
121
|
+
import { useEffect, useState } from "react";
|
|
122
|
+
import { ChatBot } from "nui-chatbot-pkg";
|
|
123
|
+
import "nui-chatbot-pkg/style.css";
|
|
124
|
+
import DealCard from "../../components/Cards/DealCard/DealCard";
|
|
125
|
+
import EmployeeCard from "../../components/Cards/EmployeeCard/EmployeeCard";
|
|
126
|
+
import TourCard from "../../components/Cards/TourCard/TourCard";
|
|
127
|
+
import GenericCard from "../../components/Cards/GenericCard/GenericCard";
|
|
128
|
+
|
|
129
|
+
const registryData = [
|
|
130
|
+
{ id: "card1", component: DealCard },
|
|
131
|
+
{ id: "card2", component: EmployeeCard },
|
|
132
|
+
{ id: "card3", component: TourCard },
|
|
133
|
+
{ id: "default", component: GenericCard },
|
|
134
|
+
];
|
|
135
|
+
|
|
136
|
+
const customTheme = {
|
|
137
|
+
primaryColor: "#30b3ebff",
|
|
138
|
+
secondaryColor: "#2281f4ff",
|
|
139
|
+
accentColor: "#38c7daff",
|
|
140
|
+
container: "rounded-2xl border-blue-500",
|
|
141
|
+
header: "text-white",
|
|
142
|
+
input: "border-blue-400 rounded-xl",
|
|
143
|
+
showGradient: false,
|
|
144
|
+
welcomeMessage: "Welcome to Numentica-UI",
|
|
145
|
+
welcomeDescription: "How can I help you today?",
|
|
146
|
+
};
|
|
147
|
+
|
|
148
|
+
export default function ChatPage() {
|
|
149
|
+
return (
|
|
150
|
+
<div className="bg-[#000000] min-h-screen flex items-center justify-center p-4">
|
|
151
|
+
<ChatBot
|
|
152
|
+
strapiUrl="http://localhost:1337"
|
|
153
|
+
cardRegistry={registryData}
|
|
154
|
+
theme={customTheme}
|
|
155
|
+
title="Numentica-UI"
|
|
156
|
+
streamSpeed={10}
|
|
157
|
+
/>
|
|
158
|
+
</div>
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Features
|
|
164
|
+
|
|
165
|
+
- 🎨 Easy theming with customizable colors
|
|
166
|
+
- 🧩 Component registry for custom card rendering
|
|
167
|
+
- 💬 Real-time message streaming
|
|
168
|
+
- 📱 Responsive design with Tailwind CSS
|
|
169
|
+
- ⚙️ Flexible configuration
|
|
170
|
+
- 🚀 Optimized for Next.js with "use client" directive
|
|
171
|
+
|
|
172
|
+
## Browser Support
|
|
33
173
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
| `theme` | `object` | Custom colors for the chatbot. |
|
|
39
|
-
| `title` | `string` | Title of the chatbot window. |
|
|
174
|
+
- Chrome (latest)
|
|
175
|
+
- Firefox (latest)
|
|
176
|
+
- Safari (latest)
|
|
177
|
+
- Edge (latest)
|
|
40
178
|
|
|
41
179
|
## License
|
|
42
180
|
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.chat-floating-btn{position:relative;width:3.5rem;height:3.5rem;cursor:pointer;transition:all .5s ease-in-out}@media(max-width:359px){.chat-floating-btn{width:3rem;height:3rem}}@media(min-width:360px)and (max-width:639px){.chat-floating-btn{width:4rem;height:4rem}}@media(min-width:640px){.chat-floating-btn{width:5rem;height:5rem}}.chat-btn-visible{transform:scale(1);opacity:1;pointer-events:auto}.chat-btn-visible:hover{transform:scale(1.1)}.chat-btn-hidden{transform:scale(0);opacity:0;pointer-events:none}.chat-btn-border{position:relative;width:100%;height:100%;border-radius:9999px;overflow:hidden;background-color:transparent}.chat-btn-inner{position:absolute;inset:0;margin:auto;width:85%;height:85%;z-index:10;border-radius:9999px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:transparent}.chat-btn-gradient{position:absolute;inset:0}.chat-btn-icon{position:relative;z-index:20;transition:transform .3s ease}.chat-floating-btn:hover .chat-btn-icon{transform:rotate(12deg)}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scaleIn{animation:scaleIn .2s ease-out}.glow-container{position:absolute;width:120%;height:300%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}@keyframes rotate-border{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes float{0%,to{transform:translateY(0) rotate(3deg)}50%{transform:translateY(-10px) rotate(0)}}.seamless-border{position:relative;overflow:hidden}.seamless-border:before{content:"";position:absolute;inset:-50%;background:conic-gradient(from 0deg,transparent 0%,transparent 40%,var(--cb-primary) 70%,var(--cb-secondary) 90%,var(--cb-accent) 100%);animation:rotate-border 3s linear infinite}.chat-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;position:sticky;top:0;z-index:10;background:transparent}.chat-header-left{display:flex;align-items:center;gap:.75rem}.chat-header-logo{width:3rem;height:3rem;border-radius:9999px;object-fit:cover}.chat-header-logo-placeholder{width:3rem;height:3rem;border-radius:9999px;background:#f3f4f6;display:flex;align-items:center;justify-content:center}.chat-header-bot-icon{color:#4b5563}.chat-header-title-wrap{display:flex;flex-direction:column}.chat-header-title{font-weight:600;color:#111827;font-size:.875rem;line-height:1}.chat-header-actions{display:flex;align-items:center;gap:.5rem}.chat-header-close-btn{padding:.375rem;border-radius:9999px;color:#9ca3af;background:transparent;border:none;cursor:pointer;transition:color .2s ease,background-color .2s ease}.chat-header-close-btn:hover{background:#f3f4f6;color:#4b5563}.chat-input-outer{padding:1rem;display:flex;justify-content:center;width:100%}@media(max-width:639px){.chat-input-outer{padding:.75rem}}.chat-input-wrap{position:relative;width:100%;max-width:42rem}.chat-input-glow-lg{position:absolute;inset:-3px;border-radius:1rem;filter:blur(24px);opacity:.7;transition:opacity .7s ease;animation:chat-pulse 2s ease-in-out infinite}.chat-input-wrap:hover .chat-input-glow-lg{opacity:1}.chat-input-glow-sm{position:absolute;inset:-1px;border-radius:1rem;filter:blur(4px);transition:filter .5s ease}.chat-input-wrap:hover .chat-input-glow-sm{filter:blur(2)}@keyframes chat-pulse{0%,to{opacity:.6}50%{opacity:.9}}.chat-input-container{position:relative;display:flex;align-items:center;background:#fff;border-radius:1rem;border:1px solid #e4e4e7;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;width:100%}.chat-input-inner{position:relative;display:flex;align-items:center;width:100%;padding:.25rem 1.5rem}.chat-input-field{flex:1;font-size:1rem;outline:none;padding:.75rem 0;color:#27272a;background:transparent;border:none}.chat-input-send-wrap{position:absolute;right:-.75rem;display:flex;align-items:center;justify-content:center}.chat-input-send-btn{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;height:3.7rem;width:3.7rem;border-radius:9999px;border:4px solid white;color:#fff;box-shadow:0 10px 15px -3px #0000001a;cursor:pointer;transition:transform .2s ease}@media(max-width:639px){.chat-input-send-btn{height:3rem;width:3rem;border:3px solid white}}.chat-input-send-btn:active{transform:scale(.9)}.chat-input-send-btn:enabled:hover{transform:scale(1.1) rotate(12deg)}.chat-input-send-btn:disabled{opacity:.8;cursor:not-allowed}.chat-input-spinner{height:1.25rem;width:1.25rem;border-radius:9999px;border:2px solid white;border-top-color:transparent;animation:chat-spin 1s linear infinite}@keyframes chat-spin{to{transform:rotate(360deg)}}.chat-input-send-icon{font-size:1.25rem}.mb-row{display:flex;width:100%}.mb-row-user{justify-content:flex-end}.mb-row-assistant{justify-content:flex-start}.mb-card-container{display:flex;flex-direction:column;gap:1rem;width:100%}.mb-card-content{background:#f3f4f6;padding:1rem;border-radius:1rem;font-size:.875rem}.mb-card-wrapper{max-width:90%;animation:mb-in .3s ease forwards}.mb-bubble{max-width:85%;padding:1rem;font-size:.875rem;border-radius:1rem;box-shadow:0 1px 2px #0000000d;animation:mb-in .3s ease forwards;white-space:pre-wrap;word-break:break-word;transition:all .3s ease}.mb-bubble-user{color:#fff;border-top-right-radius:0}.mb-bubble-assistant{background:#f3f4f6;color:#27272a;border-top-left-radius:0}@keyframes mb-in{0%{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:translateY(0)}}.mb-typing{display:flex;gap:.25rem;padding:.25rem .5rem}.mb-dot{width:.375rem;height:.375rem;background:currentColor;border-radius:9999px;animation:mb-bounce 1.4s infinite both}.mb-dot-1{animation-delay:-.3s}.mb-dot-2{animation-delay:-.15s}.mb-dot-3{animation-delay:0s}@keyframes mb-bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}.sug-skeleton-float{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.25rem 1rem 0;width:100%;animation:sug-pulse 1.5s ease-in-out infinite}.sug-skeleton-item{height:2.5rem;width:70%;border-radius:.5rem;opacity:.7}.sug-skeleton-more{height:1.5rem;width:3rem;border-radius:9999px;margin-top:.5rem;background:#0000000d}.sug-skeleton-list{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start;animation:sug-pulse 1.5s ease-in-out infinite}@media(min-width:640px){.sug-skeleton-list{justify-content:center}}.sug-skeleton-chip{height:2rem;width:6rem;background:#f3f4f6;border-radius:.5rem}@keyframes sug-pulse{0%,to{opacity:.6}50%{opacity:1}}.sug-float-wrap{display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:.5rem 1rem 1rem;width:100%}.sug-float-btn{background:#fff;border:none;padding:.625rem 1.5rem;border-radius:.75rem;box-shadow:0 6px 16px color-mix(in srgb,var(--cb-primary) 25%,transparent);font-size:.875rem;font-weight:500;max-width:85%;width:fit-content;cursor:pointer;animation:sug-fade-up .4s ease-out forwards;opacity:0;transition:transform .2s ease,box-shadow .2s ease}.sug-float-btn:hover{box-shadow:0 8px 18px color-mix(in srgb,var(--cb-primary) 40%,transparent);transform:scale(1.03)}.sug-float-btn:active{transform:scale(.95)}.sug-float-text{color:#374151}.sug-more-btn{margin-top:.25rem;background:#f3f4f6;padding:.375rem 1.25rem;border-radius:9999px;cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:background-color .2s ease,transform .1s ease;animation:sug-fade-up .4s ease-out forwards;opacity:0;border:none}.sug-more-btn:hover{background:#e5e7eb}.sug-more-btn:active{transform:scale(.95)}.sug-more-dots{display:flex;align-items:center;gap:.25rem}.sug-more-dots span{width:.375rem;height:.375rem;background:currentColor;border-radius:9999px}.sug-list-wrap{display:flex;gap:.5rem;overflow-x:auto;padding:.5rem 0;justify-content:flex-start}@media(min-width:640px){.sug-list-wrap{justify-content:center}}.sug-list-btn{white-space:nowrap;border:none;padding:.375rem 1rem;border-radius:.5rem;font-size:.75rem;color:#4b5563;background:#fff;box-shadow:0 4px 12px color-mix(in srgb,var(--cb-primary) 22%,transparent);cursor:pointer;transition:background-color .2s ease,transform .15s ease,box-shadow .15s ease;animation:sug-fade .3s ease-out forwards;opacity:0}.sug-list-btn:hover{background:#f9fafb;box-shadow:0 6px 18px color-mix(in srgb,var(--cb-primary) 35%,transparent);transform:translateY(-1px)}@keyframes sug-fade-up{0%{opacity:0;transform:translateY(10px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sug-fade{0%{opacity:0}to{opacity:1}}.sug-list-wrap::-webkit-scrollbar{display:none}.chat-messages-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:.75rem 1.5rem;display:flex;flex-direction:column;gap:1.5rem;background:transparent;-ms-overflow-style:none;scrollbar-width:none}.chat-messages-container::-webkit-scrollbar{display:none;width:0}.chat-welcome{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100%;text-align:center;gap:1.5rem;overflow:visible}@media(max-width:639px){.chat-messages-container{padding:.75rem 1rem;gap:1rem}.chat-welcome{gap:1rem;padding:.75rem}}.chat-welcome-icon{width:5rem;height:5rem;flex-shrink:0;z-index:10;border-radius:9999px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:chat-float 4s ease-in-out infinite}@keyframes chat-float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}to{transform:translateY(0)}}.chat-welcome-title{font-size:1.5rem;font-weight:700;color:#000;letter-spacing:-.015em}.chat-welcome-subtitle{font-size:.875rem;color:#6b7280;padding:0 2.5rem}@media(max-width:639px){.chat-welcome-subtitle{padding:0 1rem;font-size:.8125rem}}.chat-welcome-suggestions{width:100%;max-height:fit-content}.chat-window{position:fixed;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(255,255,255,.4);border-radius:2rem;box-shadow:0 25px 50px -12px #00000040;overflow:hidden;transform-origin:bottom right;transition:all .5s cubic-bezier(.4,0,.2,1);bottom:1rem;right:1rem;top:auto;z-index:40;width:85vw;max-height:75vh}@media(max-width:359px){.chat-window{width:80vw;bottom:.5rem;right:.5rem;border-radius:1.5rem;max-height:70vh}}@media(min-width:360px)and (max-width:639px){.chat-window{width:90vw;max-height:75vh}}@media(min-width:640px){.chat-window{width:400px;max-height:600px}}@media(min-width:768px){.chat-window{width:420px;max-height:620px}}@media(min-width:1024px){.chat-window{width:450px;max-height:650px}}.chat-window-open{height:65vh;opacity:1;transform:scale(1) translateY(0);pointer-events:auto}@media(min-width:640px){.chat-window-open{height:560px}}@media(min-width:768px){.chat-window-open{height:580px}}@media(min-width:1024px){.chat-window-open{height:600px}}.chat-window-closed{height:0;opacity:0;transform:scale(.95) translateY(2.5rem);pointer-events:none}.chat-window-header{flex:none;z-index:20;background:#fff9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.2)}.chat-window-footer{flex:none;background:#fff;padding:.75rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.chat-window-footer{padding:1rem}}.chat-window-powered{text-align:center;margin-top:.5rem}.chat-powered-text{font-size:10px;color:#9ca3af;text-transform:uppercase;letter-spacing:.2em}.chat-powered-link{color:#9ca3af;font-weight:600;text-decoration:none;transition:color .2s ease}.chat-powered-link:hover{color:#2563eb}.chatbot-container{position:fixed;bottom:1rem;right:1rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif}@media(max-width:359px){.chatbot-container{bottom:.5rem;right:.5rem}}@media(min-width:640px){.chatbot-container{bottom:1.5rem;right:1.5rem}}@media(min-width:768px){.chatbot-container{bottom:2rem;right:2rem}}
|
package/dist/index.d.mts
CHANGED
|
@@ -61,6 +61,9 @@ type ChatTheming = {
|
|
|
61
61
|
container?: string;
|
|
62
62
|
header?: string;
|
|
63
63
|
input?: string;
|
|
64
|
+
containerStyle?: React.CSSProperties;
|
|
65
|
+
headerStyle?: React.CSSProperties;
|
|
66
|
+
inputStyle?: React.CSSProperties;
|
|
64
67
|
showGradient?: boolean;
|
|
65
68
|
welcomeMessage?: string;
|
|
66
69
|
welcomeDescription?: string;
|
|
@@ -130,4 +133,4 @@ declare const ICONS: {
|
|
|
130
133
|
}) => react_jsx_runtime.JSX.Element;
|
|
131
134
|
};
|
|
132
135
|
|
|
133
|
-
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
|
136
|
+
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, ChatBot as Chatbot, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
package/dist/index.d.ts
CHANGED
|
@@ -61,6 +61,9 @@ type ChatTheming = {
|
|
|
61
61
|
container?: string;
|
|
62
62
|
header?: string;
|
|
63
63
|
input?: string;
|
|
64
|
+
containerStyle?: React.CSSProperties;
|
|
65
|
+
headerStyle?: React.CSSProperties;
|
|
66
|
+
inputStyle?: React.CSSProperties;
|
|
64
67
|
showGradient?: boolean;
|
|
65
68
|
welcomeMessage?: string;
|
|
66
69
|
welcomeDescription?: string;
|
|
@@ -130,4 +133,4 @@ declare const ICONS: {
|
|
|
130
133
|
}) => react_jsx_runtime.JSX.Element;
|
|
131
134
|
};
|
|
132
135
|
|
|
133
|
-
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
|
136
|
+
export { type ApiResponse, type CardRegistryItem, ChatBot, type ChatBotProps, ChatHeader, ChatInput, type ChatInputProps, type ChatTheme, type ChatTheming, ChatBot as Chatbot, type CollectionRecord, type CustomRecord, type Deal, type EmployeeRecord, ICONS, type Message, MessageBubble, type MessageBubbleProps, Suggestions, type SuggestionsProps, type TourRecord };
|
package/dist/index.js
CHANGED
|
@@ -1,24 +1,5 @@
|
|
|
1
|
-
"use strict";"use client";var q=Object.defineProperty;var de=Object.getOwnPropertyDescriptor;var ue=Object.getOwnPropertyNames;var me=Object.prototype.hasOwnProperty;var fe=(e,t)=>{for(var r in t)q(e,r,{get:t[r],enumerable:!0})},pe=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of ue(t))!me.call(e,a)&&a!==r&&q(e,a,{get:()=>t[a],enumerable:!(o=de(t,a))||o.enumerable});return e};var ge=e=>pe(q({},"__esModule",{value:!0}),e);var ke={};fe(ke,{ChatBot:()=>oe,ChatHeader:()=>W,ChatInput:()=>_,ICONS:()=>E,MessageBubble:()=>F,Suggestions:()=>Q});module.exports=ge(ke);function j(e,{insertAt:t}={}){if(!e||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}j(`@tailwind components;@tailwind utilities;
|
|
2
|
-
`);j(`:root{--background: #ffffff;--foreground: #171717}@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); }@media(prefers-color-scheme:dark){:root{--background: #0a0a0a;--foreground: #ededed}}body{background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scaleIn{animation:scaleIn .2s ease-out}.glow-container{position:absolute;width:120%;height:300%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}
|
|
3
|
-
`);var C=require("react");var h=require("react/jsx-runtime"),E={MessageCircle:({size:e=24,className:t=""})=>(0,h.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,h.jsx)("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>(0,h.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,h.jsx)("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>(0,h.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,h.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>(0,h.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,h.jsx)("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>(0,h.jsxs)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[(0,h.jsx)("path",{d:"m22 2-7 20-4-9-9-4Z"}),(0,h.jsx)("path",{d:"M22 2 11 13"})]})};var M=require("react/jsx-runtime"),he=({isExpanded:e,onOpen:t,theming:r})=>(0,M.jsx)("div",{onClick:t,className:`relative w-16 h-16 sm:w-20 h-20 group cursor-pointer transition-all duration-500 ease-in-out
|
|
4
|
-
${e?"scale-0 opacity-0 pointer-events-none":"scale-100 opacity-100 hover:scale-110"}`,children:(0,M.jsxs)("div",{className:"seamless-border relative h-full w-full rounded-full overflow-hidden shadow-2xl bg-zinc-900",children:[r?.showGradient===!1&&(0,M.jsx)("div",{className:"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200%] h-[200%] animate-[spin_3s_linear_infinite]",style:{background:r?.showGradient===!1?"var(--cb-primary), var(--cb-secondary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),(0,M.jsxs)("div",{className:"absolute inset-0 m-auto w-[85%] h-[85%] z-10 rounded-full flex items-center justify-center text-white overflow-hidden bg-zinc-900",children:[(0,M.jsx)("div",{className:"absolute inset-0",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),(0,M.jsx)(E.MessageCircle,{size:30,className:"relative z-20 group-hover:rotate-12 transition-transform duration-300"})]})]})}),X=he;var z=require("react");var T=(e,t)=>t?`${e} ${t}`:e;var w=require("react/jsx-runtime"),ve=({onClose:e,title:t,theming:r,strapiUrl:o})=>{let[a,s]=(0,z.useState)(null);(0,z.useEffect)(()=>{if(!o)return;(async()=>{try{let u=await(await fetch(`${o}/api/faqchatbot/suggestion-and-logo`)).json();u?.logoUrl&&s(`${o}${u.logoUrl}`)}catch(f){console.error("Failed to fetch logo",f)}})()},[o]);let d=T("flex items-center justify-between px-6 py-4 sticky top-0 z-10",r?.header);return(0,w.jsxs)("header",{className:d,children:[(0,w.jsxs)("div",{className:"flex items-center gap-3",children:[a?(0,w.jsx)("img",{src:a,alt:"Bot Logo",className:"w-12 h-12 rounded-full "}):(0,w.jsx)("div",{className:"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center",children:(0,w.jsx)(E.Bot,{size:20,className:"text-gray-600"})}),(0,w.jsx)("div",{className:"flex flex-col",children:(0,w.jsx)("span",{className:"font-semibold text-gray-900 text-sm leading-none",children:t})})]}),(0,w.jsx)("div",{className:"flex items-center gap-2",children:(0,w.jsx)("button",{onClick:e,className:"p-1.5 rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-200","aria-label":"Close chat",children:(0,w.jsx)(E.X,{size:20})})})]})},W=ve;var G=require("react");var v=require("react/jsx-runtime"),ye=({input:e,onInputChange:t,onSendMessage:r,isLoading:o,theming:a})=>{let s=a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",n=(0,G.useRef)(null),c=T("relative flex items-center bg-white rounded-2xl border border-zinc-200 shadow-lg w-full",a?.input);return(0,G.useEffect)(()=>{o||n.current?.focus()},[o]),(0,v.jsx)("div",{className:"p-4 flex justify-center w-full",children:(0,v.jsxs)("div",{className:"relative group w-full max-w-2xl",children:[(0,v.jsx)("div",{style:{background:s},className:"absolute -inset-[3px] rounded-2xl blur-xl opacity-70 group-hover:opacity-100 transition-opacity duration-700 animate-pulse"}),(0,v.jsx)("div",{style:{background:s},className:"absolute -inset-[1px] rounded-2xl blur-sm group-hover:blur-none transition-all duration-500"}),(0,v.jsx)("div",{className:c,children:(0,v.jsxs)("div",{className:"relative flex w-full items-center px-6 py-1",children:[(0,v.jsx)("input",{ref:n,type:"text",className:"flex-1 text-base outline-none py-3 text-zinc-800 bg-transparent",placeholder:o?"AI is thinking...":"Ask anything...",value:e,onChange:u=>t(u.target.value),onKeyDown:u=>{u.key==="Enter"&&!u.nativeEvent.isComposing&&e.trim()&&!o&&r()},disabled:o,"aria-label":"User message"}),(0,v.jsx)("div",{className:"absolute -right-3 flex items-center justify-center",children:(0,v.jsx)("button",{onClick:r,disabled:o||!e.trim(),style:{background:s},className:"relative z-20 flex items-center justify-center h-14 w-14 rounded-full border-4 border-white text-white shadow-lg transition-all transform active:scale-90 enabled:hover:scale-110 enabled:hover:rotate-12 disabled:opacity-80 disabled:cursor-not-allowed","aria-label":"Send message",children:o?(0,v.jsx)("div",{className:"h-5 w-5 border-2 border-white border-t-transparent animate-spin rounded-full"}):(0,v.jsx)(E.Send,{className:"text-xl"})})})]})})]})})},_=ye;var y=require("react/jsx-runtime"),be=({message:e,cardRegistry:t,themeStyles:r,theming:o})=>{let a=n=>{let d=n?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(c=>c.id===d)||t.find(c=>c.id==="default")};console.log("\u{1F535} MESSAGE BUBBLE:",e),console.log("\u{1F7E2} CARD REGISTRY IN BUBBLE:",t);let s=e.record?a(e.record)?.component:null;if(e.items?.items?.length){console.log("\u{1F7E5} RENDERING REALTIME CARDS:",e.items);let n=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase();console.log("\u{1F7E3} COLLECTION/STYLE ID:",n);let d=t.find(f=>f.id===n);d||console.log("\u274C CARD NOT FOUND:",n);let c=d?.component;return(0,y.jsxs)("div",{className:"flex flex-col gap-4 w-full",children:[e.content&&(0,y.jsx)("div",{className:"bg-gray-100 p-4 rounded-2xl text-sm",children:e.content}),c&&e.items.items.map((f,u)=>(0,y.jsx)(c,{items:f,style:r},u))]})}return(0,y.jsx)("div",{className:`flex w-full ${e.role==="user"?"justify-end":"justify-start"}`,children:s&&e.record?(0,y.jsx)("div",{className:"max-w-[90%] animate-in fade-in slide-in-from-bottom-2 duration-300",children:(0,y.jsx)(s,{record:e.record,style:r})}):(0,y.jsx)("div",{style:e.role==="user"?{background:o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`max-w-[85%] p-4 text-sm rounded-2xl shadow-sm transition-all animate-in fade-in slide-in-from-bottom-2 duration-300 ${e.role==="user"?"text-white rounded-tr-none":"bg-gray-100 text-zinc-800 rounded-tl-none"} whitespace-pre-wrap break-words`,children:e.loading&&!e.content?(0,y.jsxs)("div",{className:"flex gap-1 py-1 px-2",children:[(0,y.jsx)("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.3s]"}),(0,y.jsx)("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.15s]"}),(0,y.jsx)("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce"})]}):e.content})})},F=be;var D=require("react"),l=require("react/jsx-runtime"),we=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:o})=>{let[a,s]=(0,D.useState)([]),[n,d]=(0,D.useState)(!0),[c,f]=(0,D.useState)(!1);(0,D.useEffect)(()=>{let i=new AbortController;return d(!0),fetch(`${e}/api/faqchatbot/suggestion-and-logo`,{signal:i.signal}).then(p=>p.json()).then(p=>{s(p.suggestedQuestions||[]),d(!1)}).catch(p=>{p.name!=="AbortError"&&(console.error("Suggestions fetch failed",p),d(!1))}),()=>i.abort()},[e]);let u=()=>r==="floating"?(0,l.jsxs)("div",{className:"flex flex-col items-center gap-3 px-4 pt-1 w-full animate-pulse",children:[[1,2].map(i=>(0,l.jsx)("div",{className:"h-10 w-[70%] rounded-lg",style:{backgroundColor:o?.primaryColor?`${o.primaryColor}20`:"rgba(0,0,0,0.05)",transform:i%2===0?"rotate(1deg)":"rotate(-1deg)"}},i)),(0,l.jsx)("div",{className:"h-6 w-12 rounded-full mt-2"})]}):(0,l.jsx)("div",{className:"flex gap-2 overflow-x-auto no-scrollbar justify-start sm:justify-center py-2 animate-pulse",children:[1,2,3].map(i=>(0,l.jsx)("div",{className:"h-8 w-24 bg-gray-100 rounded-lg whitespace-nowrap"},i))});if(n&&a.length===0)return(0,l.jsx)(u,{});if(r==="floating"){let i=c?a:a.slice(0,2),p=!c&&a.length>2;return(0,l.jsxs)("div",{className:"flex flex-col items-center gap-3 px-4 pt-2 pb-4 w-full",children:[(0,l.jsx)("style",{children:`
|
|
5
|
-
@keyframes fadeInUp {
|
|
6
|
-
from { opacity: 0; transform: translateY(10px) scale(0.95); }
|
|
7
|
-
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
8
|
-
}
|
|
9
|
-
`}),i.map((I,O)=>{let K=O%2===0?"rotate(-1deg)":"rotate(1deg)";return(0,l.jsx)("button",{onClick:()=>t(I),className:"bg-white border-2 px-6 py-2.5 rounded-xl shadow-sm text-sm font-medium hover:shadow-md hover:scale-[1.02] transition-all active:scale-95 cursor-pointer max-w-[85%] w-fit",style:{borderColor:o?.primaryColor||"var(--cb-primary)",color:"inherit",transform:K,animation:"fadeInUp 0.4s ease-out forwards",animationDelay:`${O*.1}s`,opacity:0},children:(0,l.jsx)("span",{className:"text-gray-700",children:I})},`float-${O}-${I}`)}),p&&(0,l.jsx)("button",{onClick:()=>f(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"mt-1 bg-gray-100 px-5 py-1.5 rounded-full hover:bg-gray-200 transition-colors active:scale-95 cursor-pointer shadow-sm",style:{animation:"fadeInUp 0.4s ease-out forwards",animationDelay:`${i.length*.1}s`,opacity:0},children:(0,l.jsxs)("div",{className:"flex items-center gap-1",style:{color:o?.secondaryColor||"var(--cb-secondary)"},children:[(0,l.jsx)("div",{className:"w-1.5 h-1.5 rounded-full bg-current"}),(0,l.jsx)("div",{className:"w-1.5 h-1.5 rounded-full bg-current"}),(0,l.jsx)("div",{className:"w-1.5 h-1.5 rounded-full bg-current"})]})})]})}return(0,l.jsxs)("div",{className:"flex gap-2 overflow-x-auto no-scrollbar justify-start sm:justify-center py-2",children:[(0,l.jsx)("style",{children:`
|
|
10
|
-
@keyframes fadeIn {
|
|
11
|
-
from { opacity: 0; }
|
|
12
|
-
to { opacity: 1; }
|
|
13
|
-
}
|
|
14
|
-
`}),a.map((i,p)=>(0,l.jsx)("button",{onClick:()=>t(i),className:"whitespace-nowrap border border-gray-200 px-4 py-1.5 rounded-lg text-xs text-gray-600 hover:bg-gray-50 transition-colors bg-white shadow-sm",style:{animation:"fadeIn 0.3s ease-out forwards",animationDelay:`${p*.05}s`,opacity:0},children:i},`list-${p}-${i}`))]})},Q=we;var x=require("react/jsx-runtime"),xe=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:o,resolvedRegistry:a,theming:s})=>{let n=s?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",d=s?.welcomeMessage||"How can I help you?",c=s?.welcomeDescription||"Select a common question below or type your own.";return(0,x.jsxs)("div",{ref:t,className:"flex-1 overflow-y-auto px-6 py-3 space-y-6 bg-transparent no-scrollbar",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&(0,x.jsxs)("div",{className:"flex flex-col items-center justify-center min-h-full text-center space-y-6",children:[(0,x.jsx)("div",{className:"w-20 h-20 rounded-full flex items-center justify-center text-white shadow-xl animate-[float_4s_ease-in-out_infinite]",style:{background:n},children:(0,x.jsx)(E.MessageCircle,{size:40})}),(0,x.jsxs)("div",{children:[(0,x.jsx)("h3",{className:"text-2xl font-bold text-black tracking-tight",children:d}),(0,x.jsx)("p",{className:"text-sm text-gray-500 px-10",children:c})]}),(0,x.jsx)("div",{className:" w-full",children:(0,x.jsx)(Q,{onSelectQuestion:r,strapiUrl:o,variant:"floating",theming:s})})]}),e.map(f=>(0,x.jsx)(F,{message:f,cardRegistry:a,theming:s},f.id))]})},ee=xe;var k=require("react/jsx-runtime"),Ce=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:o,sendMessage:a,strapiUrl:s,resolvedRegistry:n,input:d,setInput:c,isLoading:f,title:u,theming:i})=>{let I=T(`
|
|
15
|
-
relative flex flex-col bg-white border border-white/40 rounded-[2rem] shadow-2xl overflow-hidden
|
|
16
|
-
transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1) origin-bottom-right
|
|
17
|
-
w-[90vw] sm:w-[450px]
|
|
18
|
-
${e?"h-[70vh] md:h-[600px] sm:h-[750px] opacity-100 scale-100 translate-y-0":"h-0 opacity-0 scale-95 translate-y-10 pointer-events-none"}
|
|
19
|
-
max-h-[800px]
|
|
20
|
-
`,i?.container);return(0,k.jsxs)("div",{className:I,children:[(0,k.jsx)("div",{className:"flex-none z-20 bg-white/60 backdrop-blur-md border-b border-white/20",children:(0,k.jsx)(W,{title:u,onClose:()=>t(!1),theming:i,strapiUrl:s})}),(0,k.jsx)(ee,{messages:r,scrollRef:o,sendMessage:a,strapiUrl:s,resolvedRegistry:n,theming:i}),(0,k.jsxs)("div",{className:"flex-none bg-white p-3 sm:p-4 border-t border-white/20",children:[(0,k.jsx)(_,{input:d,onInputChange:c,onSendMessage:a,isLoading:f,theming:i}),(0,k.jsx)("div",{className:"text-center mt-2",children:(0,k.jsxs)("span",{className:"text-[10px] text-gray-400 uppercase tracking-widest",children:["Powered by"," ",(0,k.jsx)("a",{href:"https://numentica-ui.com",className:"text-gray-400 font-semibold transition-colors hover:text-blue-600",children:"Numentica-UI"})]})})]})]})},te=Ce;var A=require("react/jsx-runtime"),Ne=({strapiUrl:e,cardRegistry:t,theme:r,title:o,streamSpeed:a})=>{let[s,n]=(0,C.useState)([]),[d,c]=(0,C.useState)(""),[f,u]=(0,C.useState)(!1),[i,p]=(0,C.useState)(!1),I=(0,C.useRef)(null),[O,K]=(0,C.useState)([]),re=(0,C.useRef)(null),ae={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return(0,C.useEffect)(()=>{t.length>0&&K(t)},[t]),(0,C.useEffect)(()=>()=>I.current?.abort(),[]),(0,A.jsxs)("div",{className:"fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 flex flex-col items-end font-sans",style:ae,children:[(0,A.jsx)(X,{isExpanded:i,onOpen:()=>p(!0),theming:r}),(0,A.jsx)(te,{isExpanded:i,setIsExpanded:p,messages:s,scrollRef:re,sendMessage:async se=>{let V=se||d;if(!V.trim())return;I.current?.abort(),I.current=new AbortController,p(!0),c(""),u(!0);let ne={role:"user",content:V,id:Date.now()},L=Date.now()+1;n(S=>[...S,ne,{role:"assistant",content:"",items:null,loading:!0,id:L}]);try{let S=await fetch(`${e}/api/faqchatbot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:V,history:s.slice(-4).map(g=>({role:g.role,content:g.content}))}),signal:I.current.signal});if(!S.ok)throw new Error("Network response was not ok");let U=S.body?.getReader(),P=new TextDecoder;if(!U)throw new Error("No reader available");let $=[],Z=!1,ie=(async()=>{for(;!Z||$.length>0;)if($.length>0){let g=$.shift();if(g?.type==="text")if(a&&a>0)for(let m of g.content)n(b=>b.map(N=>N.id===L?{...N,content:N.content+m}:N)),await new Promise(b=>setTimeout(b,a));else n(m=>m.map(b=>b.id===L?{...b,content:b.content+g.content}:b));else if(g?.type==="card")try{let m=g.data;n(b=>b.map(N=>N.id===L?{...N,items:{items:m.items,schema:m.schema,collection:m.title,title:m.title,cardStyle:m.cardStyle}}:N))}catch(m){console.error("Error processing card data:",m)}}else await new Promise(g=>setTimeout(g,20));u(!1),n(g=>g.map(m=>m.id===L?{...m,loading:!1}:m))})(),Y="";for(;;){let{value:g,done:m}=await U.read();if(m)break;let b=P.decode(g,{stream:!0});Y+=b;let N=Y.split(`
|
|
1
|
+
"use strict";"use client";var K=Object.defineProperty;var ce=Object.getOwnPropertyDescriptor;var le=Object.getOwnPropertyNames;var me=Object.prototype.hasOwnProperty;var pe=(e,t)=>{for(var r in t)K(e,r,{get:t[r],enumerable:!0})},he=(e,t,r,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of le(t))!me.call(e,a)&&a!==r&&K(e,a,{get:()=>t[a],enumerable:!(o=ce(t,a))||o.enumerable});return e};var ue=e=>he(K({},"__esModule",{value:!0}),e);var Ce={};pe(Ce,{ChatBot:()=>Z,ChatHeader:()=>W,ChatInput:()=>U,Chatbot:()=>Z,ICONS:()=>I,MessageBubble:()=>F,Suggestions:()=>Q});module.exports=ue(Ce);var k=require("react");var f=require("react/jsx-runtime"),I={MessageCircle:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>(0,f.jsx)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:(0,f.jsx)("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>(0,f.jsxs)("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[(0,f.jsx)("path",{d:"m22 2-7 20-4-9-9-4Z"}),(0,f.jsx)("path",{d:"M22 2 11 13"})]})};var R=require("react/jsx-runtime"),ge=({isExpanded:e,onOpen:t,theming:r})=>(0,R.jsx)("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:(0,R.jsx)("div",{className:"chat-btn-border seamless-border",children:(0,R.jsxs)("div",{className:"chat-btn-inner",children:[(0,R.jsx)("div",{className:"chat-btn-gradient",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),(0,R.jsx)(I.MessageCircle,{size:30,className:"chat-btn-icon"})]})})}),_=ge;var Y=require("react");var B=(e,t)=>t?`${e} ${t}`:e;var y=require("react/jsx-runtime"),fe=({onClose:e,title:t,theming:r,strapiUrl:o})=>{let[a,i]=(0,Y.useState)(null);(0,Y.useEffect)(()=>{if(!o)return;(async()=>{try{let m=await(await fetch(`${o}/api/faqchatbot/suggestion-and-logo`)).json();m?.logoUrl&&i(`${o}${m.logoUrl}`)}catch(l){console.error("Failed to fetch logo",l)}})()},[o]);let u=B("chat-header",r?.header);return(0,y.jsxs)("header",{className:u,style:r?.headerStyle,children:[(0,y.jsxs)("div",{className:"chat-header-left",children:[a?(0,y.jsx)("img",{src:a,alt:"Bot Logo",className:"chat-header-logo"}):(0,y.jsx)("div",{className:"chat-header-logo-placeholder",children:(0,y.jsx)(I.Bot,{size:20,className:"chat-header-bot-icon"})}),(0,y.jsx)("div",{className:"chat-header-title-wrap",children:(0,y.jsx)("span",{className:"chat-header-title",children:t})})]}),(0,y.jsx)("div",{className:"chat-header-actions",children:(0,y.jsx)("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:(0,y.jsx)(I.X,{size:20})})})]})},W=fe;var A=require("react");var b=require("react/jsx-runtime"),be=({input:e,onInputChange:t,onSendMessage:r,isLoading:o,theming:a})=>{let i=a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",s=(0,A.useRef)(null),d=B("chat-input-container",a?.input);(0,A.useEffect)(()=>{o||s.current?.focus()},[o]);let l=m=>{m.key==="Enter"&&!m.nativeEvent.isComposing&&e.trim()&&!o&&r()};return(0,b.jsx)("div",{className:"chat-input-outer",children:(0,b.jsxs)("div",{className:"chat-input-wrap",children:[(0,b.jsx)("div",{style:{background:i},className:"chat-input-glow-lg"}),(0,b.jsx)("div",{style:{background:i},className:"chat-input-glow-sm"}),(0,b.jsx)("div",{className:d,style:a?.inputStyle,children:(0,b.jsxs)("div",{className:"chat-input-inner",children:[(0,b.jsx)("input",{ref:s,type:"text",className:"chat-input-field",placeholder:o?"AI is thinking...":"Ask anything...",value:e,onChange:m=>t(m.target.value),onKeyDown:l,disabled:o,"aria-label":"User message"}),(0,b.jsx)("div",{className:"chat-input-send-wrap",children:(0,b.jsx)("button",{onClick:r,disabled:o||!e.trim(),style:{background:i},className:"chat-input-send-btn","aria-label":"Send message",children:o?(0,b.jsx)("div",{className:"chat-input-spinner"}):(0,b.jsx)(I.Send,{className:"chat-input-send-icon"})})})]})})]})})},U=be;var w=require("react/jsx-runtime"),we=({message:e,cardRegistry:t,themeStyles:r,theming:o})=>{let a=s=>{let u=s?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(d=>d.id===u)||t.find(d=>d.id==="default")},i=e.record?a(e.record)?.component:null;if(e.items?.items?.length){let s=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),d=t.find(l=>l.id===s)?.component;return(0,w.jsxs)("div",{className:"mb-card-container",children:[e.content&&(0,w.jsx)("div",{className:"mb-card-content",children:e.content}),d&&e.items.items.map((l,m)=>(0,w.jsx)(d,{items:l,style:r},m))]})}return(0,w.jsx)("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:i&&e.record?(0,w.jsx)("div",{className:"mb-card-wrapper",children:(0,w.jsx)(i,{record:e.record,style:r})}):(0,w.jsx)("div",{style:e.role==="user"?{background:o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?(0,w.jsxs)("div",{className:"mb-typing",children:[(0,w.jsx)("span",{className:"mb-dot mb-dot-1"}),(0,w.jsx)("span",{className:"mb-dot mb-dot-2"}),(0,w.jsx)("span",{className:"mb-dot mb-dot-3"})]}):e.content})})},F=we;var T=require("react");var c=require("react/jsx-runtime"),xe=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:o})=>{let[a,i]=(0,T.useState)([]),[s,u]=(0,T.useState)(!0),[d,l]=(0,T.useState)(!1);(0,T.useEffect)(()=>{let n=new AbortController;return u(!0),fetch(`${e}/api/faqchatbot/suggestion-and-logo`,{signal:n.signal}).then(p=>p.json()).then(p=>{i(p.suggestedQuestions||[]),u(!1)}).catch(p=>{p.name!=="AbortError"&&(console.error("Suggestions fetch failed",p),u(!1))}),()=>n.abort()},[e]);let m=()=>r==="floating"?(0,c.jsxs)("div",{className:"sug-skeleton-float",children:[[1,2].map(n=>(0,c.jsx)("div",{className:"sug-skeleton-item",style:{backgroundColor:o?.primaryColor?`${o.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:n%2===0?"rotate(1deg)":"rotate(-1deg)"}},n)),(0,c.jsx)("div",{className:"sug-skeleton-more"})]}):(0,c.jsx)("div",{className:"sug-skeleton-list",children:[1,2,3].map(n=>(0,c.jsx)("div",{className:"sug-skeleton-chip"},n))});if(s&&a.length===0)return(0,c.jsx)(m,{});if(r==="floating"){let n=d?a:a.slice(0,2),p=!d&&a.length>2;return(0,c.jsxs)("div",{className:"sug-float-wrap",children:[n.map((M,z)=>{let G=z%2===0?"rotate(-1deg)":"rotate(1deg)";return(0,c.jsx)("button",{onClick:()=>t(M),className:"sug-float-btn",style:{borderColor:o?.primaryColor||"var(--cb-primary)",transform:G,animationDelay:`${z*.1}s`},children:(0,c.jsx)("span",{className:"sug-float-text",children:M})},`float-${z}-${M}`)}),p&&(0,c.jsx)("button",{onClick:()=>l(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"sug-more-btn",style:{animationDelay:`${n.length*.1}s`},children:(0,c.jsxs)("div",{className:"sug-more-dots",style:{color:o?.secondaryColor||"var(--cb-secondary)"},children:[(0,c.jsx)("span",{}),(0,c.jsx)("span",{}),(0,c.jsx)("span",{})]})})]})}return(0,c.jsx)("div",{className:"sug-list-wrap",children:a.map((n,p)=>(0,c.jsx)("button",{onClick:()=>t(n),className:"sug-list-btn",style:{animationDelay:`${p*.05}s`},children:n},`list-${p}-${n}`))})},Q=xe;var v=require("react/jsx-runtime"),ye=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:o,resolvedRegistry:a,theming:i})=>{let s=i?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",u=i?.welcomeMessage||"How can I help you?",d=i?.welcomeDescription||"Select a common question below or type your own.";return(0,v.jsxs)("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&(0,v.jsxs)("div",{className:"chat-welcome",children:[(0,v.jsx)("div",{className:"chat-welcome-icon",style:{background:s},children:(0,v.jsx)(I.MessageCircle,{size:40})}),(0,v.jsxs)("div",{children:[(0,v.jsx)("h3",{className:"chat-welcome-title",children:u}),(0,v.jsx)("p",{className:"chat-welcome-subtitle",children:d})]}),(0,v.jsx)("div",{className:"chat-welcome-suggestions",children:(0,v.jsx)(Q,{onSelectQuestion:r,strapiUrl:o,variant:"floating",theming:i})})]}),e.map(l=>(0,v.jsx)(F,{message:l,cardRegistry:a,theming:i},l.id))]})},ee=ye;var N=require("react/jsx-runtime"),ve=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:o,sendMessage:a,strapiUrl:i,resolvedRegistry:s,input:u,setInput:d,isLoading:l,title:m,theming:n})=>{let p=B(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,n?.container);return(0,N.jsxs)("div",{className:p,style:n?.containerStyle,children:[(0,N.jsx)("div",{className:"chat-window-header",children:(0,N.jsx)(W,{title:m,onClose:()=>t(!1),theming:n,strapiUrl:i})}),(0,N.jsx)(ee,{messages:r,scrollRef:o,sendMessage:a,strapiUrl:i,resolvedRegistry:s,theming:n}),(0,N.jsxs)("div",{className:"chat-window-footer",children:[(0,N.jsx)(U,{input:u,onInputChange:d,onSendMessage:a,isLoading:l,theming:n}),(0,N.jsx)("div",{className:"chat-window-powered",children:(0,N.jsxs)("span",{className:"chat-powered-text",children:["Powered by"," ",(0,N.jsx)("a",{href:"https://numentica-ui.com",className:"chat-powered-link",children:"Numentica-UI"})]})})]})]})},te=ve;var O=require("react/jsx-runtime"),ke=({strapiUrl:e,cardRegistry:t,theme:r,title:o,streamSpeed:a})=>{let[i,s]=(0,k.useState)([]),[u,d]=(0,k.useState)(""),[l,m]=(0,k.useState)(!1),[n,p]=(0,k.useState)(!1),M=(0,k.useRef)(null),[z,G]=(0,k.useState)([]),ae=(0,k.useRef)(null),re={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return(0,k.useEffect)(()=>{t.length>0&&G(t)},[t]),(0,k.useEffect)(()=>()=>M.current?.abort(),[]),(0,O.jsxs)("div",{className:"chatbot-container",style:re,children:[(0,O.jsx)(_,{isExpanded:n,onOpen:()=>p(!0),theming:r}),(0,O.jsx)(te,{isExpanded:n,setIsExpanded:p,messages:i,scrollRef:ae,sendMessage:async oe=>{let V=oe||u;if(!V.trim())return;M.current?.abort(),M.current=new AbortController,p(!0),d(""),m(!0);let ne={role:"user",content:V,id:Date.now()},S=Date.now()+1;s(L=>[...L,ne,{role:"assistant",content:"",items:null,loading:!0,id:S}]);try{let L=await fetch(`${e}/api/faqchatbot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:V,history:i.slice(-4).map(g=>({role:g.role,content:g.content}))}),signal:M.current.signal});if(!L.ok)throw new Error("Network response was not ok");let D=L.body?.getReader(),P=new TextDecoder;if(!D)throw new Error("No reader available");let $=[],J=!1,ie=(async()=>{for(;!J||$.length>0;)if($.length>0){let g=$.shift();if(g?.type==="text")if(a&&a>0)for(let h of g.content)s(x=>x.map(C=>C.id===S?{...C,content:C.content+h}:C)),await new Promise(x=>setTimeout(x,a));else s(h=>h.map(x=>x.id===S?{...x,content:x.content+g.content}:x));else if(g?.type==="card")try{let h=g.data;s(x=>x.map(C=>C.id===S?{...C,items:{items:h.items,schema:h.schema,collection:h.title,title:h.title,cardStyle:h.cardStyle}}:C))}catch(h){console.error("Error processing card data:",h)}}else await new Promise(g=>setTimeout(g,20));m(!1),s(g=>g.map(h=>h.id===S?{...h,loading:!1}:h))})(),q="";for(;;){let{value:g,done:h}=await D.read();if(h)break;let x=P.decode(g,{stream:!0});q+=x;let C=q.split(`
|
|
21
2
|
|
|
22
|
-
`);
|
|
23
|
-
`),
|
|
24
|
-
`:"")+H}if(
|
|
3
|
+
`);q=C.pop()||"";for(let se of C){let de=se.split(`
|
|
4
|
+
`),X="message",j="";for(let E of de)if(E.startsWith("event:"))X=E.slice(6).trim();else if(E.startsWith("data:")){let H=E.slice(5);H.startsWith(" ")&&(H=H.slice(1)),j+=(j?`
|
|
5
|
+
`:"")+H}if(X==="cards"){let E=JSON.parse(j);$.push({type:"card",data:E})}else j&&$.push({type:"text",content:j})}}J=!0,await ie}catch(L){L.name!=="AbortError"&&s(D=>D.map(P=>P.id===S?{...P,content:"I'm sorry, I'm having trouble connecting right now.",loading:!1}:P)),m(!1)}},strapiUrl:e,resolvedRegistry:z,input:u,setInput:d,isLoading:l,title:o,theming:r})]})},Z=ke;0&&(module.exports={ChatBot,ChatHeader,ChatInput,Chatbot,ICONS,MessageBubble,Suggestions});
|
package/dist/index.mjs
CHANGED
|
@@ -1,24 +1,5 @@
|
|
|
1
|
-
"use client";function O(e,{insertAt:t}={}){if(!e||typeof document>"u")return;let r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",t==="top"&&r.firstChild?r.insertBefore(o,r.firstChild):r.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}O(`@tailwind components;@tailwind utilities;
|
|
2
|
-
`);O(`:root{--background: #ffffff;--foreground: #171717}@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); }@media(prefers-color-scheme:dark){:root{--background: #0a0a0a;--foreground: #ededed}}body{background:var(--background);color:var(--foreground);font-family:Arial,Helvetica,sans-serif}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.animate-scaleIn{animation:scaleIn .2s ease-out}.glow-container{position:absolute;width:120%;height:300%}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-spin-slow{animation:spin-slow 10s linear infinite}
|
|
3
|
-
`);import{useState as P,useEffect as se,useRef as ne}from"react";import{jsx as b,jsxs as ge}from"react/jsx-runtime";var w={MessageCircle:({size:e=24,className:t=""})=>b("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:b("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>b("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:b("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>b("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:b("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>b("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:b("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>ge("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[b("path",{d:"m22 2-7 20-4-9-9-4Z"}),b("path",{d:"M22 2 11 13"})]})};import{jsx as A,jsxs as J}from"react/jsx-runtime";var he=({isExpanded:e,onOpen:t,theming:r})=>A("div",{onClick:t,className:`relative w-16 h-16 sm:w-20 h-20 group cursor-pointer transition-all duration-500 ease-in-out
|
|
4
|
-
${e?"scale-0 opacity-0 pointer-events-none":"scale-100 opacity-100 hover:scale-110"}`,children:J("div",{className:"seamless-border relative h-full w-full rounded-full overflow-hidden shadow-2xl bg-zinc-900",children:[r?.showGradient===!1&&A("div",{className:"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[200%] h-[200%] animate-[spin_3s_linear_infinite]",style:{background:r?.showGradient===!1?"var(--cb-primary), var(--cb-secondary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),J("div",{className:"absolute inset-0 m-auto w-[85%] h-[85%] z-10 rounded-full flex items-center justify-center text-white overflow-hidden bg-zinc-900",children:[A("div",{className:"absolute inset-0",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),A(w.MessageCircle,{size:30,className:"relative z-20 group-hover:rotate-12 transition-transform duration-300"})]})]})}),X=he;import{useEffect as ve,useState as ye}from"react";var S=(e,t)=>t?`${e} ${t}`:e;import{jsx as k,jsxs as ee}from"react/jsx-runtime";var be=({onClose:e,title:t,theming:r,strapiUrl:o})=>{let[a,s]=ye(null);ve(()=>{if(!o)return;(async()=>{try{let d=await(await fetch(`${o}/api/faqchatbot/suggestion-and-logo`)).json();d?.logoUrl&&s(`${o}${d.logoUrl}`)}catch(m){console.error("Failed to fetch logo",m)}})()},[o]);let c=S("flex items-center justify-between px-6 py-4 sticky top-0 z-10",r?.header);return ee("header",{className:c,children:[ee("div",{className:"flex items-center gap-3",children:[a?k("img",{src:a,alt:"Bot Logo",className:"w-12 h-12 rounded-full "}):k("div",{className:"w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center",children:k(w.Bot,{size:20,className:"text-gray-600"})}),k("div",{className:"flex flex-col",children:k("span",{className:"font-semibold text-gray-900 text-sm leading-none",children:t})})]}),k("div",{className:"flex items-center gap-2",children:k("button",{onClick:e,className:"p-1.5 rounded-full text-gray-400 hover:bg-gray-100 hover:text-gray-600 transition-colors duration-200","aria-label":"Close chat",children:k(w.X,{size:20})})})]})},G=be;import{useRef as we,useEffect as xe}from"react";import{jsx as x,jsxs as te}from"react/jsx-runtime";var Ce=({input:e,onInputChange:t,onSendMessage:r,isLoading:o,theming:a})=>{let s=a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",n=we(null),l=S("relative flex items-center bg-white rounded-2xl border border-zinc-200 shadow-lg w-full",a?.input);return xe(()=>{o||n.current?.focus()},[o]),x("div",{className:"p-4 flex justify-center w-full",children:te("div",{className:"relative group w-full max-w-2xl",children:[x("div",{style:{background:s},className:"absolute -inset-[3px] rounded-2xl blur-xl opacity-70 group-hover:opacity-100 transition-opacity duration-700 animate-pulse"}),x("div",{style:{background:s},className:"absolute -inset-[1px] rounded-2xl blur-sm group-hover:blur-none transition-all duration-500"}),x("div",{className:l,children:te("div",{className:"relative flex w-full items-center px-6 py-1",children:[x("input",{ref:n,type:"text",className:"flex-1 text-base outline-none py-3 text-zinc-800 bg-transparent",placeholder:o?"AI is thinking...":"Ask anything...",value:e,onChange:d=>t(d.target.value),onKeyDown:d=>{d.key==="Enter"&&!d.nativeEvent.isComposing&&e.trim()&&!o&&r()},disabled:o,"aria-label":"User message"}),x("div",{className:"absolute -right-3 flex items-center justify-center",children:x("button",{onClick:r,disabled:o||!e.trim(),style:{background:s},className:"relative z-20 flex items-center justify-center h-14 w-14 rounded-full border-4 border-white text-white shadow-lg transition-all transform active:scale-90 enabled:hover:scale-110 enabled:hover:rotate-12 disabled:opacity-80 disabled:cursor-not-allowed","aria-label":"Send message",children:o?x("div",{className:"h-5 w-5 border-2 border-white border-t-transparent animate-spin rounded-full"}):x(w.Send,{className:"text-xl"})})})]})})]})})},_=Ce;import{jsx as C,jsxs as oe}from"react/jsx-runtime";var Ne=({message:e,cardRegistry:t,themeStyles:r,theming:o})=>{let a=n=>{let c=n?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(l=>l.id===c)||t.find(l=>l.id==="default")};console.log("\u{1F535} MESSAGE BUBBLE:",e),console.log("\u{1F7E2} CARD REGISTRY IN BUBBLE:",t);let s=e.record?a(e.record)?.component:null;if(e.items?.items?.length){console.log("\u{1F7E5} RENDERING REALTIME CARDS:",e.items);let n=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase();console.log("\u{1F7E3} COLLECTION/STYLE ID:",n);let c=t.find(m=>m.id===n);c||console.log("\u274C CARD NOT FOUND:",n);let l=c?.component;return oe("div",{className:"flex flex-col gap-4 w-full",children:[e.content&&C("div",{className:"bg-gray-100 p-4 rounded-2xl text-sm",children:e.content}),l&&e.items.items.map((m,d)=>C(l,{items:m,style:r},d))]})}return C("div",{className:`flex w-full ${e.role==="user"?"justify-end":"justify-start"}`,children:s&&e.record?C("div",{className:"max-w-[90%] animate-in fade-in slide-in-from-bottom-2 duration-300",children:C(s,{record:e.record,style:r})}):C("div",{style:e.role==="user"?{background:o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`max-w-[85%] p-4 text-sm rounded-2xl shadow-sm transition-all animate-in fade-in slide-in-from-bottom-2 duration-300 ${e.role==="user"?"text-white rounded-tr-none":"bg-gray-100 text-zinc-800 rounded-tl-none"} whitespace-pre-wrap break-words`,children:e.loading&&!e.content?oe("div",{className:"flex gap-1 py-1 px-2",children:[C("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.3s]"}),C("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce [animation-delay:-0.15s]"}),C("span",{className:"w-1.5 h-1.5 bg-current rounded-full animate-bounce"})]}):e.content})})},F=Ne;import{useState as Q,useEffect as ke}from"react";import{jsx as g,jsxs as U}from"react/jsx-runtime";var Ie=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:o})=>{let[a,s]=Q([]),[n,c]=Q(!0),[l,m]=Q(!1);ke(()=>{let i=new AbortController;return c(!0),fetch(`${e}/api/faqchatbot/suggestion-and-logo`,{signal:i.signal}).then(f=>f.json()).then(f=>{s(f.suggestedQuestions||[]),c(!1)}).catch(f=>{f.name!=="AbortError"&&(console.error("Suggestions fetch failed",f),c(!1))}),()=>i.abort()},[e]);let d=()=>r==="floating"?U("div",{className:"flex flex-col items-center gap-3 px-4 pt-1 w-full animate-pulse",children:[[1,2].map(i=>g("div",{className:"h-10 w-[70%] rounded-lg",style:{backgroundColor:o?.primaryColor?`${o.primaryColor}20`:"rgba(0,0,0,0.05)",transform:i%2===0?"rotate(1deg)":"rotate(-1deg)"}},i)),g("div",{className:"h-6 w-12 rounded-full mt-2"})]}):g("div",{className:"flex gap-2 overflow-x-auto no-scrollbar justify-start sm:justify-center py-2 animate-pulse",children:[1,2,3].map(i=>g("div",{className:"h-8 w-24 bg-gray-100 rounded-lg whitespace-nowrap"},i))});if(n&&a.length===0)return g(d,{});if(r==="floating"){let i=l?a:a.slice(0,2),f=!l&&a.length>2;return U("div",{className:"flex flex-col items-center gap-3 px-4 pt-2 pb-4 w-full",children:[g("style",{children:`
|
|
5
|
-
@keyframes fadeInUp {
|
|
6
|
-
from { opacity: 0; transform: translateY(10px) scale(0.95); }
|
|
7
|
-
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
8
|
-
}
|
|
9
|
-
`}),i.map((y,B)=>{let H=B%2===0?"rotate(-1deg)":"rotate(1deg)";return g("button",{onClick:()=>t(y),className:"bg-white border-2 px-6 py-2.5 rounded-xl shadow-sm text-sm font-medium hover:shadow-md hover:scale-[1.02] transition-all active:scale-95 cursor-pointer max-w-[85%] w-fit",style:{borderColor:o?.primaryColor||"var(--cb-primary)",color:"inherit",transform:H,animation:"fadeInUp 0.4s ease-out forwards",animationDelay:`${B*.1}s`,opacity:0},children:g("span",{className:"text-gray-700",children:y})},`float-${B}-${y}`)}),f&&g("button",{onClick:()=>m(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"mt-1 bg-gray-100 px-5 py-1.5 rounded-full hover:bg-gray-200 transition-colors active:scale-95 cursor-pointer shadow-sm",style:{animation:"fadeInUp 0.4s ease-out forwards",animationDelay:`${i.length*.1}s`,opacity:0},children:U("div",{className:"flex items-center gap-1",style:{color:o?.secondaryColor||"var(--cb-secondary)"},children:[g("div",{className:"w-1.5 h-1.5 rounded-full bg-current"}),g("div",{className:"w-1.5 h-1.5 rounded-full bg-current"}),g("div",{className:"w-1.5 h-1.5 rounded-full bg-current"})]})})]})}return U("div",{className:"flex gap-2 overflow-x-auto no-scrollbar justify-start sm:justify-center py-2",children:[g("style",{children:`
|
|
10
|
-
@keyframes fadeIn {
|
|
11
|
-
from { opacity: 0; }
|
|
12
|
-
to { opacity: 1; }
|
|
13
|
-
}
|
|
14
|
-
`}),a.map((i,f)=>g("button",{onClick:()=>t(i),className:"whitespace-nowrap border border-gray-200 px-4 py-1.5 rounded-lg text-xs text-gray-600 hover:bg-gray-50 transition-colors bg-white shadow-sm",style:{animation:"fadeIn 0.3s ease-out forwards",animationDelay:`${f*.05}s`,opacity:0},children:i},`list-${f}-${i}`))]})},K=Ie;import{jsx as E,jsxs as V}from"react/jsx-runtime";var Ee=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:o,resolvedRegistry:a,theming:s})=>{let n=s?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",c=s?.welcomeMessage||"How can I help you?",l=s?.welcomeDescription||"Select a common question below or type your own.";return V("div",{ref:t,className:"flex-1 overflow-y-auto px-6 py-3 space-y-6 bg-transparent no-scrollbar",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&V("div",{className:"flex flex-col items-center justify-center min-h-full text-center space-y-6",children:[E("div",{className:"w-20 h-20 rounded-full flex items-center justify-center text-white shadow-xl animate-[float_4s_ease-in-out_infinite]",style:{background:n},children:E(w.MessageCircle,{size:40})}),V("div",{children:[E("h3",{className:"text-2xl font-bold text-black tracking-tight",children:c}),E("p",{className:"text-sm text-gray-500 px-10",children:l})]}),E("div",{className:" w-full",children:E(K,{onSelectQuestion:r,strapiUrl:o,variant:"floating",theming:s})})]}),e.map(m=>E(F,{message:m,cardRegistry:a,theming:s},m.id))]})},re=Ee;import{jsx as L,jsxs as Y}from"react/jsx-runtime";var Re=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:o,sendMessage:a,strapiUrl:s,resolvedRegistry:n,input:c,setInput:l,isLoading:m,title:d,theming:i})=>{let y=S(`
|
|
15
|
-
relative flex flex-col bg-white border border-white/40 rounded-[2rem] shadow-2xl overflow-hidden
|
|
16
|
-
transition-all duration-500 cubic-bezier(0.4, 0, 0.2, 1) origin-bottom-right
|
|
17
|
-
w-[90vw] sm:w-[450px]
|
|
18
|
-
${e?"h-[70vh] md:h-[600px] sm:h-[750px] opacity-100 scale-100 translate-y-0":"h-0 opacity-0 scale-95 translate-y-10 pointer-events-none"}
|
|
19
|
-
max-h-[800px]
|
|
20
|
-
`,i?.container);return Y("div",{className:y,children:[L("div",{className:"flex-none z-20 bg-white/60 backdrop-blur-md border-b border-white/20",children:L(G,{title:d,onClose:()=>t(!1),theming:i,strapiUrl:s})}),L(re,{messages:r,scrollRef:o,sendMessage:a,strapiUrl:s,resolvedRegistry:n,theming:i}),Y("div",{className:"flex-none bg-white p-3 sm:p-4 border-t border-white/20",children:[L(_,{input:c,onInputChange:l,onSendMessage:a,isLoading:m,theming:i}),L("div",{className:"text-center mt-2",children:Y("span",{className:"text-[10px] text-gray-400 uppercase tracking-widest",children:["Powered by"," ",L("a",{href:"https://numentica-ui.com",className:"text-gray-400 font-semibold transition-colors hover:text-blue-600",children:"Numentica-UI"})]})})]})]})},ae=Re;import{jsx as ie,jsxs as Le}from"react/jsx-runtime";var Me=({strapiUrl:e,cardRegistry:t,theme:r,title:o,streamSpeed:a})=>{let[s,n]=P([]),[c,l]=P(""),[m,d]=P(!1),[i,f]=P(!1),y=ne(null),[B,H]=P([]),le=ne(null),ce={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return se(()=>{t.length>0&&H(t)},[t]),se(()=>()=>y.current?.abort(),[]),Le("div",{className:"fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 flex flex-col items-end font-sans",style:ce,children:[ie(X,{isExpanded:i,onOpen:()=>f(!0),theming:r}),ie(ae,{isExpanded:i,setIsExpanded:f,messages:s,scrollRef:le,sendMessage:async de=>{let z=de||c;if(!z.trim())return;y.current?.abort(),y.current=new AbortController,f(!0),l(""),d(!0);let ue={role:"user",content:z,id:Date.now()},R=Date.now()+1;n(I=>[...I,ue,{role:"assistant",content:"",items:null,loading:!0,id:R}]);try{let I=await fetch(`${e}/api/faqchatbot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:z,history:s.slice(-4).map(p=>({role:p.role,content:p.content}))}),signal:y.current.signal});if(!I.ok)throw new Error("Network response was not ok");let $=I.body?.getReader(),T=new TextDecoder;if(!$)throw new Error("No reader available");let D=[],q=!1,me=(async()=>{for(;!q||D.length>0;)if(D.length>0){let p=D.shift();if(p?.type==="text")if(a&&a>0)for(let u of p.content)n(h=>h.map(v=>v.id===R?{...v,content:v.content+u}:v)),await new Promise(h=>setTimeout(h,a));else n(u=>u.map(h=>h.id===R?{...h,content:h.content+p.content}:h));else if(p?.type==="card")try{let u=p.data;n(h=>h.map(v=>v.id===R?{...v,items:{items:u.items,schema:u.schema,collection:u.title,title:u.title,cardStyle:u.cardStyle}}:v))}catch(u){console.error("Error processing card data:",u)}}else await new Promise(p=>setTimeout(p,20));d(!1),n(p=>p.map(u=>u.id===R?{...u,loading:!1}:u))})(),W="";for(;;){let{value:p,done:u}=await $.read();if(u)break;let h=T.decode(p,{stream:!0});W+=h;let v=W.split(`
|
|
1
|
+
"use client";import{useState as P,useEffect as re,useRef as oe}from"react";import{jsx as w,jsxs as ue}from"react/jsx-runtime";var x={MessageCircle:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M7.9 20A9 9 0 1 0 4 16.1L2 22Z"})}),Bot:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M12 8V4m8 4V4M4 8V4M2 11h20m-1 0v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V11m5 5v2m8-2v2"})}),X:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"M18 6 6 18M6 6l12 12"})}),Sparkles:({size:e=24,className:t=""})=>w("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:w("path",{d:"m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"})}),Send:({size:e=24,className:t=""})=>ue("svg",{width:e,height:e,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:t,children:[w("path",{d:"m22 2-7 20-4-9-9-4Z"}),w("path",{d:"M22 2 11 13"})]})};import{jsx as O,jsxs as fe}from"react/jsx-runtime";var ge=({isExpanded:e,onOpen:t,theming:r})=>O("div",{onClick:t,className:`chat-floating-btn ${e?"chat-btn-hidden":"chat-btn-visible"}`,children:O("div",{className:"chat-btn-border seamless-border",children:fe("div",{className:"chat-btn-inner",children:[O("div",{className:"chat-btn-gradient",style:{background:r?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary))"}}),O(x.MessageCircle,{size:30,className:"chat-btn-icon"})]})})}),J=ge;import{useEffect as be,useState as we}from"react";var S=(e,t)=>t?`${e} ${t}`:e;import{jsx as C,jsxs as X}from"react/jsx-runtime";var xe=({onClose:e,title:t,theming:r,strapiUrl:a})=>{let[o,i]=we(null);be(()=>{if(!a)return;(async()=>{try{let l=await(await fetch(`${a}/api/faqchatbot/suggestion-and-logo`)).json();l?.logoUrl&&i(`${a}${l.logoUrl}`)}catch(c){console.error("Failed to fetch logo",c)}})()},[a]);let h=S("chat-header",r?.header);return X("header",{className:h,style:r?.headerStyle,children:[X("div",{className:"chat-header-left",children:[o?C("img",{src:o,alt:"Bot Logo",className:"chat-header-logo"}):C("div",{className:"chat-header-logo-placeholder",children:C(x.Bot,{size:20,className:"chat-header-bot-icon"})}),C("div",{className:"chat-header-title-wrap",children:C("span",{className:"chat-header-title",children:t})})]}),C("div",{className:"chat-header-actions",children:C("button",{onClick:e,className:"chat-header-close-btn","aria-label":"Close chat",children:C(x.X,{size:20})})})]})},W=xe;import{useRef as ye,useEffect as ve}from"react";import{jsx as y,jsxs as _}from"react/jsx-runtime";var ke=({input:e,onInputChange:t,onSendMessage:r,isLoading:a,theming:o})=>{let i=o?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",s=ye(null),d=S("chat-input-container",o?.input);ve(()=>{a||s.current?.focus()},[a]);let c=l=>{l.key==="Enter"&&!l.nativeEvent.isComposing&&e.trim()&&!a&&r()};return y("div",{className:"chat-input-outer",children:_("div",{className:"chat-input-wrap",children:[y("div",{style:{background:i},className:"chat-input-glow-lg"}),y("div",{style:{background:i},className:"chat-input-glow-sm"}),y("div",{className:d,style:o?.inputStyle,children:_("div",{className:"chat-input-inner",children:[y("input",{ref:s,type:"text",className:"chat-input-field",placeholder:a?"AI is thinking...":"Ask anything...",value:e,onChange:l=>t(l.target.value),onKeyDown:c,disabled:a,"aria-label":"User message"}),y("div",{className:"chat-input-send-wrap",children:y("button",{onClick:r,disabled:a||!e.trim(),style:{background:i},className:"chat-input-send-btn","aria-label":"Send message",children:a?y("div",{className:"chat-input-spinner"}):y(x.Send,{className:"chat-input-send-icon"})})})]})})]})})},A=ke;import{jsx as v,jsxs as ee}from"react/jsx-runtime";var Ce=({message:e,cardRegistry:t,themeStyles:r,theming:a})=>{let o=s=>{let h=s?.__collectionUid?.split(".").pop()?.toLowerCase();return t.find(d=>d.id===h)||t.find(d=>d.id==="default")},i=e.record?o(e.record)?.component:null;if(e.items?.items?.length){let s=e.items.cardStyle?.toLowerCase()||e.items.collection?.toLowerCase()||e.items.title?.toLowerCase(),d=t.find(c=>c.id===s)?.component;return ee("div",{className:"mb-card-container",children:[e.content&&v("div",{className:"mb-card-content",children:e.content}),d&&e.items.items.map((c,l)=>v(d,{items:c,style:r},l))]})}return v("div",{className:`mb-row ${e.role==="user"?"mb-row-user":"mb-row-assistant"}`,children:i&&e.record?v("div",{className:"mb-card-wrapper",children:v(i,{record:e.record,style:r})}):v("div",{style:e.role==="user"?{background:a?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))"}:{},className:`mb-bubble ${e.role==="user"?"mb-bubble-user":"mb-bubble-assistant"}`,children:e.loading&&!e.content?ee("div",{className:"mb-typing",children:[v("span",{className:"mb-dot mb-dot-1"}),v("span",{className:"mb-dot mb-dot-2"}),v("span",{className:"mb-dot mb-dot-3"})]}):e.content})})},U=Ce;import{useState as F,useEffect as Ne}from"react";import{jsx as g,jsxs as Q}from"react/jsx-runtime";var Ie=({strapiUrl:e,onSelectQuestion:t,variant:r,theming:a})=>{let[o,i]=F([]),[s,h]=F(!0),[d,c]=F(!1);Ne(()=>{let n=new AbortController;return h(!0),fetch(`${e}/api/faqchatbot/suggestion-and-logo`,{signal:n.signal}).then(m=>m.json()).then(m=>{i(m.suggestedQuestions||[]),h(!1)}).catch(m=>{m.name!=="AbortError"&&(console.error("Suggestions fetch failed",m),h(!1))}),()=>n.abort()},[e]);let l=()=>r==="floating"?Q("div",{className:"sug-skeleton-float",children:[[1,2].map(n=>g("div",{className:"sug-skeleton-item",style:{backgroundColor:a?.primaryColor?`${a.primaryColor}`:"hsla(178, 100%, 51%, 0.05)",transform:n%2===0?"rotate(1deg)":"rotate(-1deg)"}},n)),g("div",{className:"sug-skeleton-more"})]}):g("div",{className:"sug-skeleton-list",children:[1,2,3].map(n=>g("div",{className:"sug-skeleton-chip"},n))});if(s&&o.length===0)return g(l,{});if(r==="floating"){let n=d?o:o.slice(0,2),m=!d&&o.length>2;return Q("div",{className:"sug-float-wrap",children:[n.map((k,E)=>{let D=E%2===0?"rotate(-1deg)":"rotate(1deg)";return g("button",{onClick:()=>t(k),className:"sug-float-btn",style:{borderColor:a?.primaryColor||"var(--cb-primary)",transform:D,animationDelay:`${E*.1}s`},children:g("span",{className:"sug-float-text",children:k})},`float-${E}-${k}`)}),m&&g("button",{onClick:()=>c(!0),"aria-label":"Show more suggestions",title:"Show more suggestions",className:"sug-more-btn",style:{animationDelay:`${n.length*.1}s`},children:Q("div",{className:"sug-more-dots",style:{color:a?.secondaryColor||"var(--cb-secondary)"},children:[g("span",{}),g("span",{}),g("span",{})]})})]})}return g("div",{className:"sug-list-wrap",children:o.map((n,m)=>g("button",{onClick:()=>t(n),className:"sug-list-btn",style:{animationDelay:`${m*.05}s`},children:n},`list-${m}-${n}`))})},G=Ie;import{jsx as N,jsxs as V}from"react/jsx-runtime";var Me=({messages:e,scrollRef:t,sendMessage:r,strapiUrl:a,resolvedRegistry:o,theming:i})=>{let s=i?.showGradient===!1?"var(--cb-primary)":"linear-gradient(to top right, var(--cb-primary), var(--cb-secondary), var(--cb-accent))",h=i?.welcomeMessage||"How can I help you?",d=i?.welcomeDescription||"Select a common question below or type your own.";return V("div",{ref:t,className:"chat-messages-container",style:{scrollbarWidth:"none",msOverflowStyle:"none"},children:[e.length===0&&V("div",{className:"chat-welcome",children:[N("div",{className:"chat-welcome-icon",style:{background:s},children:N(x.MessageCircle,{size:40})}),V("div",{children:[N("h3",{className:"chat-welcome-title",children:h}),N("p",{className:"chat-welcome-subtitle",children:d})]}),N("div",{className:"chat-welcome-suggestions",children:N(G,{onSelectQuestion:r,strapiUrl:a,variant:"floating",theming:i})})]}),e.map(c=>N(U,{message:c,cardRegistry:o,theming:i},c.id))]})},te=Me;import{jsx as L,jsxs as q}from"react/jsx-runtime";var Re=({isExpanded:e,setIsExpanded:t,messages:r,scrollRef:a,sendMessage:o,strapiUrl:i,resolvedRegistry:s,input:h,setInput:d,isLoading:c,title:l,theming:n})=>{let m=S(`chat-window ${e?"chat-window-open":"chat-window-closed"}`,n?.container);return q("div",{className:m,style:n?.containerStyle,children:[L("div",{className:"chat-window-header",children:L(W,{title:l,onClose:()=>t(!1),theming:n,strapiUrl:i})}),L(te,{messages:r,scrollRef:a,sendMessage:o,strapiUrl:i,resolvedRegistry:s,theming:n}),q("div",{className:"chat-window-footer",children:[L(A,{input:h,onInputChange:d,onSendMessage:o,isLoading:c,theming:n}),L("div",{className:"chat-window-powered",children:q("span",{className:"chat-powered-text",children:["Powered by"," ",L("a",{href:"https://numentica-ui.com",className:"chat-powered-link",children:"Numentica-UI"})]})})]})]})},ae=Re;import{jsx as ne,jsxs as Le}from"react/jsx-runtime";var Se=({strapiUrl:e,cardRegistry:t,theme:r,title:a,streamSpeed:o})=>{let[i,s]=P([]),[h,d]=P(""),[c,l]=P(!1),[n,m]=P(!1),k=oe(null),[E,D]=P([]),se=oe(null),de={"--cb-primary":r?.primaryColor||"#2999d6","--cb-secondary":r?.secondaryColor||"#179fa3","--cb-accent":r?.accentColor||"#07a372"};return re(()=>{t.length>0&&D(t)},[t]),re(()=>()=>k.current?.abort(),[]),Le("div",{className:"chatbot-container",style:de,children:[ne(J,{isExpanded:n,onOpen:()=>m(!0),theming:r}),ne(ae,{isExpanded:n,setIsExpanded:m,messages:i,scrollRef:se,sendMessage:async ce=>{let H=ce||h;if(!H.trim())return;k.current?.abort(),k.current=new AbortController,m(!0),d(""),l(!0);let le={role:"user",content:H,id:Date.now()},I=Date.now()+1;s(M=>[...M,le,{role:"assistant",content:"",items:null,loading:!0,id:I}]);try{let M=await fetch(`${e}/api/faqchatbot/ask`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({question:H,history:i.slice(-4).map(u=>({role:u.role,content:u.content}))}),signal:k.current.signal});if(!M.ok)throw new Error("Network response was not ok");let $=M.body?.getReader(),B=new TextDecoder;if(!$)throw new Error("No reader available");let T=[],K=!1,me=(async()=>{for(;!K||T.length>0;)if(T.length>0){let u=T.shift();if(u?.type==="text")if(o&&o>0)for(let p of u.content)s(f=>f.map(b=>b.id===I?{...b,content:b.content+p}:b)),await new Promise(f=>setTimeout(f,o));else s(p=>p.map(f=>f.id===I?{...f,content:f.content+u.content}:f));else if(u?.type==="card")try{let p=u.data;s(f=>f.map(b=>b.id===I?{...b,items:{items:p.items,schema:p.schema,collection:p.title,title:p.title,cardStyle:p.cardStyle}}:b))}catch(p){console.error("Error processing card data:",p)}}else await new Promise(u=>setTimeout(u,20));l(!1),s(u=>u.map(p=>p.id===I?{...p,loading:!1}:p))})(),Y="";for(;;){let{value:u,done:p}=await $.read();if(p)break;let f=B.decode(u,{stream:!0});Y+=f;let b=Y.split(`
|
|
21
2
|
|
|
22
|
-
`);
|
|
23
|
-
`),Z="message",
|
|
24
|
-
`:"")+j}if(
|
|
3
|
+
`);Y=b.pop()||"";for(let pe of b){let he=pe.split(`
|
|
4
|
+
`),Z="message",z="";for(let R of he)if(R.startsWith("event:"))Z=R.slice(6).trim();else if(R.startsWith("data:")){let j=R.slice(5);j.startsWith(" ")&&(j=j.slice(1)),z+=(z?`
|
|
5
|
+
`:"")+j}if(Z==="cards"){let R=JSON.parse(z);T.push({type:"card",data:R})}else z&&T.push({type:"text",content:z})}}K=!0,await me}catch(M){M.name!=="AbortError"&&s($=>$.map(B=>B.id===I?{...B,content:"I'm sorry, I'm having trouble connecting right now.",loading:!1}:B)),l(!1)}},strapiUrl:e,resolvedRegistry:E,input:h,setInput:d,isLoading:c,title:a,theming:r})]})},ie=Se;export{ie as ChatBot,W as ChatHeader,A as ChatInput,ie as Chatbot,x as ICONS,U as MessageBubble,G as Suggestions};
|
package/package.json
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "nui-chatbot-pkg",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
7
|
+
"style": "./dist/index.css",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"require": "./dist/index.js",
|
|
11
|
+
"import": "./dist/index.mjs",
|
|
12
|
+
"types": "./dist/index.d.ts"
|
|
13
|
+
},
|
|
14
|
+
"./dist/index.css": "./dist/index.css",
|
|
15
|
+
"./style.css": "./dist/index.css"
|
|
16
|
+
},
|
|
7
17
|
"files": [
|
|
8
18
|
"dist"
|
|
9
19
|
],
|
|
10
20
|
"scripts": {
|
|
11
|
-
"build": "tsup src/index.ts --format cjs,esm --dts --minify --clean
|
|
21
|
+
"build": "tsup src/index.ts --format cjs,esm --dts --minify --clean",
|
|
12
22
|
"dev": "tsup src/index.ts --format cjs,esm --watch --dts",
|
|
13
|
-
"lint": "tsc"
|
|
23
|
+
"lint": "tsc",
|
|
24
|
+
"link:pkg": "npm run build && npm link"
|
|
14
25
|
},
|
|
15
26
|
"peerDependencies": {
|
|
16
27
|
"react": ">=18",
|
|
@@ -26,4 +37,4 @@
|
|
|
26
37
|
"postcss": "^8.4.0",
|
|
27
38
|
"autoprefixer": "^10.4.0"
|
|
28
39
|
}
|
|
29
|
-
}
|
|
40
|
+
}
|