@ai-chat-bot/react-ai-chat-bot 1.0.1 → 1.0.3
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 +36 -11
- package/dist/ai-chat-bot.cjs.js +2 -1
- package/dist/ai-chat-bot.es.js +166 -155
- package/package.json +8 -12
- package/dist/ai-chat-bot.umd.js +0 -1
- package/dist/react-ai-chat-bot.css +0 -2
package/README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
# @ai-chat-bot/react-ai-chat-bot
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
3
|
+
⚠️ **Note: This package is currently under development.**
|
|
4
|
+
|
|
5
|
+
### 🌟 Features
|
|
6
|
+
Enter your website URL. Our AI will reply instantly with answers to user questions. Free & Premium Tiers available and many more features!
|
|
7
|
+
|
|
8
|
+
### 📢 Stay Tuned for the Launch!
|
|
9
|
+
Once it's launched, you will be notified! Please fill out the [AI CHAT BOT Waitlist Form](https://docs.google.com/forms/d/e/1FAIpQLSdPh0L9nC-RiNSPN_530za-KR0xOfzXq9yDZN0AvCC6rTeXsg/viewform?usp=publish-editorm) to get on the waitlist.
|
|
8
10
|
|
|
9
11
|
An embeddable, customizable React AI Chatbot Widget component for your web applications.
|
|
10
12
|
|
|
@@ -34,7 +36,6 @@ function App() {
|
|
|
34
36
|
|
|
35
37
|
<ChatWidget
|
|
36
38
|
widgetToken="YOUR_WIDGET_TOKEN"
|
|
37
|
-
apiBaseUrl="https://api.yourdomain.com"
|
|
38
39
|
title="AI Assistant"
|
|
39
40
|
subtitle="Always online"
|
|
40
41
|
greeting="Hello! How can I assist you today?"
|
|
@@ -43,6 +44,10 @@ function App() {
|
|
|
43
44
|
'How do I contact support?',
|
|
44
45
|
'What are the pricing plans?'
|
|
45
46
|
]}
|
|
47
|
+
theme={{
|
|
48
|
+
primaryColor: '#8b5cf6',
|
|
49
|
+
chatBg: 'rgba(10, 11, 20, 0.92)'
|
|
50
|
+
}}
|
|
46
51
|
/>
|
|
47
52
|
</div>
|
|
48
53
|
);
|
|
@@ -56,23 +61,43 @@ export default App;
|
|
|
56
61
|
| Prop | Type | Default | Description |
|
|
57
62
|
| --- | --- | --- | --- |
|
|
58
63
|
| `widgetToken` | `string` | `''` | Authentication token for your backend API endpoint |
|
|
59
|
-
| `apiKey` | `string` | `''` | Optional direct API key |
|
|
60
|
-
| `apiBaseUrl` | `string` | `''` | Base URL for the backend API server |
|
|
61
64
|
| `title` | `string` | `'SYNAPSE NODE ALPHA'` | Header title for the chat widget |
|
|
62
65
|
| `subtitle` | `string` | `'AI Assistant Active'` | Header status or subtitle |
|
|
63
|
-
| `greeting` | `string` |
|
|
64
|
-
| `
|
|
66
|
+
| `greeting` | `string` | `'Greetings Operator...'` | Initial welcome message shown when widget opens |
|
|
67
|
+
| `fallbackMessage` | `string \| func` | `'Sorry, I'm having...'` | Message/function used when a connection or error occurs |
|
|
65
68
|
| `faqOptions` | `string[]` | Pre-set array | Quick question buttons displayed to user |
|
|
69
|
+
| `placeholder` | `string` | `'Query mainframe...'` | Text placeholder for input box |
|
|
66
70
|
| `position` | `string` | `'bottom-right'` | Position of floating button (`bottom-right`, `bottom-left`, `top-right`, `top-left`) |
|
|
67
71
|
| `initialOpen` | `boolean` | `false` | Whether widget opens expanded initially |
|
|
68
72
|
| `showBadge` | `boolean` | `true` | Show status badge on header |
|
|
69
73
|
| `badgeText` | `string` | `'Beta'` | Status badge label |
|
|
70
74
|
| `customIcon` | `ReactNode` | `null` | Custom SVG/icon for floating launcher |
|
|
71
75
|
| `customCloseIcon`| `ReactNode` | `null` | Custom SVG/icon for close button |
|
|
76
|
+
| `customHeaderIcon`| `ReactNode` | `null` | Custom SVG/icon for the header status dot |
|
|
72
77
|
| `onOpenChange` | `function` | `undefined` | Callback fired when widget opens or closes `(isOpen) => {}` |
|
|
73
78
|
| `onSendMessage` | `function` | `undefined` | Custom message sender callback `(message) => {}` |
|
|
79
|
+
| `onResponse` | `function` | `undefined` | Callback fired when receiving a bot response `(response) => {}` |
|
|
80
|
+
| `onError` | `function` | `undefined` | Callback fired on errors `(error) => {}` |
|
|
81
|
+
| `theme` | `object` | `{}` | Theme configuration object for overriding default CSS variables |
|
|
82
|
+
|
|
83
|
+
### Theming
|
|
84
|
+
|
|
85
|
+
The `theme` prop accepts an object with the following optional properties to customize the appearance of the widget:
|
|
86
|
+
|
|
87
|
+
| Property | Description |
|
|
88
|
+
| --- | --- |
|
|
89
|
+
| `primaryColor`, `primaryColorGradient` | Main accent colors |
|
|
90
|
+
| `chatBg`, `headerBg`, `messagesBg`, `inputBg` | Background colors for widget sections |
|
|
91
|
+
| `headerText`, `subtitleText`, `iconTextColor`, `inputText` | Text colors |
|
|
92
|
+
| `userMessageBg`, `userBubbleBg`, `userMessageText`, `userBubbleText` | User message bubble styling |
|
|
93
|
+
| `systemMessageBg`, `botBubbleBg`, `systemMessageText`, `botBubbleText` | Bot message bubble styling |
|
|
94
|
+
| `faqChipBg`, `faqChipText`, `faqChipBorder`, `faqChipHoverBg` | FAQ buttons styling |
|
|
95
|
+
| `betaBadgeBackground`, `badgeBg`, `betaBadgeTextColor`, `badgeText` | Beta badge styling |
|
|
96
|
+
| `inputBorder`, `inputFocusBorder` | Input border styling |
|
|
97
|
+
| `sendButtonBg`, `sendButtonText` | Send button styling |
|
|
98
|
+
| `statusIndicator` | Status dot color |
|
|
99
|
+
| `borderRadius`, `width`, `height`, `zIndex`, `fontFamily` | Generic dimensions and styles |
|
|
74
100
|
|
|
75
101
|
## License
|
|
76
102
|
|
|
77
103
|
MIT
|
|
78
|
-
|
package/dist/ai-chat-bot.cjs.js
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.ai-chat-widget-container{--cw-primary:#6366f1;--cw-primary-gradient:#8b5cf6;--cw-icon-text:#fff;--cw-beta-bg:#ef4444;--cw-beta-text:#fff;--cw-chat-bg:#0a0b14eb;--cw-border-color:#8b5cf64d;--cw-shadow:0 20px 50px #0009;--cw-border-radius:16px;--cw-font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--cw-z-index:999999;--cw-width:380px;--cw-height:520px;--cw-header-bg:linear-gradient(90deg, #13112c, #070f1e);--cw-header-border:#8b5cf633;--cw-header-text:#fff;--cw-subtitle-text:#94a3b8;--cw-status-indicator:#10b981;--cw-messages-bg:radial-gradient(circle at 50% 50%, #0d0e1980 0%, #050508 100%);--cw-user-msg-bg:#6366f1;--cw-user-msg-text:#fff;--cw-user-msg-shadow:0 4px 12px #6366f14d;--cw-bot-msg-bg:#1e293bbf;--cw-bot-msg-text:#e2e8f0;--cw-bot-msg-border:#ffffff14;--cw-faq-chip-bg:#06b6d41a;--cw-faq-chip-text:#06b6d4;--cw-faq-chip-border:#06b6d44d;--cw-faq-chip-hover-bg:#06b6d433;--cw-input-area-bg:#08080c;--cw-input-area-border:#8b5cf633;--cw-input-bg:#0f101ad9;--cw-input-text:#fff;--cw-input-border:#8b5cf640;--cw-input-focus-border:#06b6d4;--cw-input-placeholder:#64748b;--cw-send-btn-bg:linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);--cw-send-btn-text:#fff;z-index:var(--cw-z-index);font-family:var(--cw-font-family);box-sizing:border-box;position:fixed}.ai-chat-widget-container *{box-sizing:border-box}.ai-chat-widget-position-bottom-right{bottom:24px;right:24px}.ai-chat-widget-position-bottom-left{bottom:24px;left:24px}.ai-chat-widget-position-top-right{top:24px;right:24px}.ai-chat-widget-position-top-left{top:24px;left:24px}.ai-chat-widget-button{background:linear-gradient(135deg, var(--cw-primary), var(--cw-primary-gradient));width:60px;height:60px;color:var(--cw-icon-text);cursor:pointer;border:1px solid #ffffff26;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;transition:transform .3s cubic-bezier(.16,1,.3,1),boxShadow .3s;display:flex;position:relative;box-shadow:0 0 20px #06b6d466}.ai-chat-widget-button:hover{transform:scale(1.08)rotate(3deg);box-shadow:0 0 30px #06b6d4b3}.ai-chat-widget-button:active{transform:scale(.95)}.ai-chat-widget-icon{width:26px;height:26px;color:var(--cw-icon-text);transition:transform .3s}.ai-chat-widget-badge{background-color:var(--cw-beta-bg);color:var(--cw-beta-text);letter-spacing:.5px;text-transform:uppercase;border:2px solid #0a0b14cc;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;position:absolute;top:-4px;right:-8px;box-shadow:0 2px 6px #0000004d}.ai-chat-widget-window{width:var(--cw-width);height:var(--cw-height);z-index:var(--cw-z-index);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s;position:fixed}.ai-chat-widget-position-bottom-right .ai-chat-widget-window{transform-origin:100% 100%;bottom:96px;right:24px}.ai-chat-widget-position-bottom-left .ai-chat-widget-window{transform-origin:0 100%;bottom:96px;left:24px}.ai-chat-widget-position-top-right .ai-chat-widget-window{transform-origin:100% 0;top:96px;right:24px}.ai-chat-widget-position-top-left .ai-chat-widget-window{transform-origin:0 0;top:96px;left:24px}.ai-chat-widget-window-open{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.ai-chat-widget-window-closed{opacity:0;pointer-events:none;transform:scale(.3)translateY(40px)}.ai-chat-widget-card{border-radius:var(--cw-border-radius);background:var(--cw-chat-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--cw-border-color);height:100%;box-shadow:var(--cw-shadow);flex-direction:column;display:flex;overflow:hidden}.ai-chat-widget-header{background:var(--cw-header-bg);border-bottom:1px solid var(--cw-header-border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.ai-chat-widget-header-left{align-items:center;gap:10px;display:flex}.ai-chat-widget-status-dot{background-color:var(--cw-status-indicator);width:9px;height:9px;box-shadow:0 0 10px var(--cw-status-indicator);border-radius:50%}.ai-chat-widget-header-title{color:var(--cw-header-text);letter-spacing:.5px;flex-direction:column;gap:2px;font-size:14px;font-weight:700;display:flex}.ai-chat-widget-header-subtitle{color:var(--cw-subtitle-text);letter-spacing:0;font-size:11px;font-weight:400}.ai-chat-widget-header-close{color:var(--cw-subtitle-text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:background-color .2s,color .2s;display:flex}.ai-chat-widget-header-close:hover{color:#fff;background-color:#ffffff1a}.ai-chat-widget-messages{background:var(--cw-messages-bg);flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.ai-chat-widget-messages::-webkit-scrollbar{width:6px}.ai-chat-widget-messages::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.ai-chat-widget-message-row{width:100%;display:flex}.ai-chat-widget-user-row{justify-content:flex-end}.ai-chat-widget-bot-row{justify-content:flex-start}.ai-chat-widget-bubble{word-break:break-word;border-radius:12px;max-width:82%;padding:10px 14px;font-size:13.5px;line-height:1.5}.ai-chat-widget-user-bubble{background-color:var(--cw-user-msg-bg);color:var(--cw-user-msg-text);box-shadow:var(--cw-user-msg-shadow);border-top-right-radius:2px}.ai-chat-widget-bot-bubble{background-color:var(--cw-bot-msg-bg);color:var(--cw-bot-msg-text);border:1px solid var(--cw-bot-msg-border);border-top-left-radius:2px}.ai-chat-widget-faq-container{flex-direction:column;gap:8px;margin-top:10px;display:flex}.ai-chat-widget-faq-chip{text-align:left;background-color:var(--cw-faq-chip-bg);border:1px solid var(--cw-faq-chip-border);color:var(--cw-faq-chip-text);cursor:pointer;border-radius:18px;outline:none;padding:7px 12px;font-size:12px;transition:all .2s;display:inline-block}.ai-chat-widget-faq-chip:hover{background-color:var(--cw-faq-chip-hover-bg);transform:translateY(-1px)}.ai-chat-widget-typing{align-items:center;gap:5px;padding:4px 6px;display:flex}.ai-chat-widget-dot{background-color:var(--cw-faq-chip-text);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite ai-chat-widget-bounce}.ai-chat-widget-dot:nth-child(2){animation-delay:.2s}.ai-chat-widget-dot:nth-child(3){animation-delay:.4s}@keyframes ai-chat-widget-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}.ai-chat-widget-input-area{border-top:1px solid var(--cw-input-area-border);background:var(--cw-input-area-bg);gap:10px;padding:12px 14px;display:flex}.ai-chat-widget-input{background-color:var(--cw-input-bg);border:1px solid var(--cw-input-border);color:var(--cw-input-text);border-radius:10px;outline:none;flex:1;padding:10px 14px;font-size:13.5px;transition:border-color .2s}.ai-chat-widget-input::placeholder{color:var(--cw-input-placeholder)}.ai-chat-widget-input:focus{border-color:var(--cw-input-focus-border)}.ai-chat-widget-send-btn{background:var(--cw-send-btn-bg);color:var(--cw-send-btn-text);cursor:pointer;border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;padding:0 16px;transition:opacity .2s,transform .15s;display:flex}.ai-chat-widget-send-btn:hover{opacity:.9;transform:translateY(-1px)}.ai-chat-widget-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ai-chat-widget-watermark{background:var(--cw-input-area-bg);text-align:center;color:#64748b;border-bottom-left-radius:var(--cw-border-radius);border-bottom-right-radius:var(--cw-border-radius);padding-bottom:12px;font-size:11px}.ai-chat-widget-watermark strong{color:#94a3b8;font-weight:600}@media (width<=480px){.ai-chat-widget-position-bottom-right .ai-chat-widget-window,.ai-chat-widget-position-bottom-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;bottom:84px;left:12px;right:12px}.ai-chat-widget-position-top-right .ai-chat-widget-window,.ai-chat-widget-position-top-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;top:84px;left:12px;right:12px}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
|
|
2
|
+
Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,n));let c=require("react");c=s(c,1);let l=require("react/jsx-runtime");var u=()=>(0,l.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,width:`28`,height:`28`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,className:`ai-chat-widget-icon`,children:[(0,l.jsx)(`path`,{d:`M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z`}),(0,l.jsx)(`line`,{x1:`8`,y1:`10`,x2:`16`,y2:`10`}),(0,l.jsx)(`line`,{x1:`8`,y1:`14`,x2:`13`,y2:`14`})]}),d=()=>(0,l.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`,style:{width:24,height:24},children:(0,l.jsx)(`path`,{d:`m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z`})}),f=()=>(0,l.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`,style:{width:18,height:18},children:(0,l.jsx)(`path`,{d:`M5.7 12 2.3 3.27a.75.75 0 0 1 .94-.98l.1.04 18 9c.51.26.54.97.1 1.28l-.1.06-18 9a.75.75 0 0 1-1.07-.85l.03-.1L5.7 12 2.3 3.27 5.7 12ZM4.4 4.54l2.61 6.7 6.63.01c.38 0 .7.28.74.65v.1c0 .38-.27.7-.64.74l-.1.01H7l-2.6 6.7L19.31 12 4.4 4.54Z`})}),p=`https://localhost:7068`,m=({widgetToken:e=``,title:t=`SYNAPSE NODE ALPHA`,subtitle:n=`AI Assistant Active`,greeting:r=`Greetings Operator. I am Synapse-Node-Alpha, your AI assistant. How can I help you navigate our mainframe today?`,fallbackMessage:i=`Sorry, I'm having trouble connecting right now. Please try again later.`,faqOptions:a=[`What is an MCP Server?`,`How do I deploy Synapse Agents?`,`Are connections secure?`],placeholder:o=`Query mainframe (e.g. security)...`,showBadge:s=!0,badgeText:m=`Beta`,initialOpen:h=!1,position:g=`bottom-right`,customIcon:_=null,customCloseIcon:v=null,customHeaderIcon:y=null,onOpenChange:b,onSendMessage:x,onResponse:S,onError:C,theme:w={}})=>{let[T,E]=(0,c.useState)(h),[D,O]=(0,c.useState)([]),[k,A]=(0,c.useState)(``),[j,M]=(0,c.useState)(!1),[N,P]=(0,c.useState)(null),F=(0,c.useRef)(null),[I,L]=(0,c.useState)(null),[R,z]=(0,c.useState)(!0);if((0,c.useEffect)(()=>{let e=[];r&&e.push({id:`msg-greeting`,text:r,sender:`bot`}),a&&a.length>0&&e.push({id:`msg-faq`,text:`Select a topic of interest:`,sender:`bot`,isFaqOptions:!0}),O(e)},[r,a]),(0,c.useEffect)(()=>{T&&F.current&&F.current.scrollIntoView({behavior:`smooth`})},[D,j,T]),(0,c.useEffect)(()=>{if(!e){z(!0);return}var t=p.replace(/\/$/,``)+`/api/Chat/init`;fetch(t,{method:`GET`,headers:{"Content-Type":`application/json`,"X-Widget-Token":e}}).then(function(e){if(e.ok)return e.json()}).then(function(e){e&&L(e),z(!1)}).catch(function(e){console.error(`Widget initialization failed:`,e),z(!0)})},[e]),R||I&&I.quotaExceeded)return null;let B=()=>{var e=!T;E(e),b&&b(e)},V=async t=>{var n=t.trim();if(!(!n||j)){O(function(e){return e.concat([{id:`user-`+Date.now(),text:n,sender:`user`}])}),A(``),M(!0),x&&x(n);var r=``;if(e)try{var a=p.replace(/\/$/,``)+`/api/Chat`,o=await fetch(a,{method:`POST`,headers:{"Content-Type":`application/json`,"X-Widget-Token":e},body:JSON.stringify({input:n,previousInteractionId:N})});if(o.ok){var s=await o.json();r=s.reply||s.content||`Response received successfully.`,s.interactionId&&P(s.interactionId)}else{var c=await o.json().catch(function(){return{}}),l=c.error||c.message||`Server responded with status `+o.status;C&&C(l),r=o.status===429?c.error||c.message||`Rate limit exceeded. Please wait a moment before sending another message.`:typeof i==`function`?i(n):i}}catch(e){C&&C(e),r=typeof i==`function`?i(n):i}else await new Promise(function(e){setTimeout(e,800)}),r=typeof i==`function`?i(n):i;M(!1),O(function(e){return e.concat([{id:`bot-`+Date.now(),text:r,sender:`bot`}])}),S&&S(r)}},H=e=>{e.key===`Enter`&&(e.preventDefault(),V(k))};var U={"--cw-primary":w.primaryColor||`#8b5cf6`,"--cw-primary-gradient":w.primaryColorGradient||`#06b6d4`,"--cw-icon-text":w.iconTextColor||`#ffffff`,"--cw-beta-bg":w.betaBadgeBackground||w.badgeBg||`#ef4444`,"--cw-beta-text":w.betaBadgeTextColor||w.badgeText||`#ffffff`,"--cw-chat-bg":w.chatBg||`rgba(10, 11, 20, 0.92)`,"--cw-header-bg":w.headerBg||`linear-gradient(90deg, #13112c, #070f1e)`,"--cw-header-text":w.headerText||w.headerTextColor||`#ffffff`,"--cw-subtitle-text":w.subtitleText||`#94a3b8`,"--cw-status-indicator":w.statusIndicator||`#10b981`,"--cw-messages-bg":w.messagesBg||`radial-gradient(circle at 50% 50%, rgba(13, 14, 25, 0.5) 0%, #050508 100%)`,"--cw-user-msg-bg":w.userMessageBg||w.userBubbleBg||`#6366f1`,"--cw-user-msg-text":w.userMessageText||w.userBubbleText||`#ffffff`,"--cw-bot-msg-bg":w.systemMessageBg||w.botBubbleBg||`rgba(30, 41, 59, 0.75)`,"--cw-bot-msg-text":w.systemMessageText||w.botBubbleText||`#e2e8f0`,"--cw-faq-chip-bg":w.faqChipBg||`rgba(6, 182, 212, 0.1)`,"--cw-faq-chip-text":w.faqChipText||`#06b6d4`,"--cw-faq-chip-border":w.faqChipBorder||`rgba(6, 182, 212, 0.3)`,"--cw-faq-chip-hover-bg":w.faqChipHoverBg||`rgba(6, 182, 212, 0.2)`,"--cw-input-bg":w.inputBg||`rgba(15, 16, 26, 0.85)`,"--cw-input-text":w.inputText||`#ffffff`,"--cw-input-border":w.inputBorder||`rgba(139, 92, 246, 0.25)`,"--cw-input-focus-border":w.inputFocusBorder||`#06b6d4`,"--cw-send-btn-bg":w.sendButtonBg||`linear-gradient(135deg, #6366f1 0%, #06b6d4 100%)`,"--cw-send-btn-text":w.sendButtonText||`#ffffff`,"--cw-border-radius":w.borderRadius||`16px`,"--cw-width":w.width||`380px`,"--cw-height":w.height||`520px`,"--cw-z-index":w.zIndex||999999,"--cw-font-family":w.fontFamily||`'Inter', system-ui, -apple-system, sans-serif`},W=`ai-chat-widget-position-`+g;return(0,l.jsxs)(`div`,{className:`ai-chat-widget-container `+W,style:U,children:[(0,l.jsxs)(`button`,{className:`ai-chat-widget-button`,onClick:B,"aria-label":T?`Close chat`:`Open chat`,children:[T?v||(0,l.jsx)(d,{}):_||(0,l.jsx)(u,{}),s&&!T&&(0,l.jsx)(`span`,{className:`ai-chat-widget-badge`,children:m})]}),(0,l.jsx)(`div`,{className:`ai-chat-widget-window `+(T?`ai-chat-widget-window-open`:`ai-chat-widget-window-closed`),children:(0,l.jsxs)(`div`,{className:`ai-chat-widget-card`,children:[(0,l.jsxs)(`div`,{className:`ai-chat-widget-header`,children:[(0,l.jsxs)(`div`,{className:`ai-chat-widget-header-left`,children:[y||(0,l.jsx)(`div`,{className:`ai-chat-widget-status-dot`}),(0,l.jsxs)(`div`,{className:`ai-chat-widget-header-title`,children:[(0,l.jsx)(`span`,{children:t}),n&&(0,l.jsx)(`span`,{className:`ai-chat-widget-header-subtitle`,children:n})]})]}),(0,l.jsx)(`button`,{className:`ai-chat-widget-header-close`,onClick:B,"aria-label":`Close widget`,children:v||(0,l.jsx)(d,{})})]}),(0,l.jsxs)(`div`,{className:`ai-chat-widget-messages`,children:[D.map(function(e){return(0,l.jsx)(`div`,{className:`ai-chat-widget-message-row `+(e.sender===`user`?`ai-chat-widget-user-row`:`ai-chat-widget-bot-row`),children:(0,l.jsxs)(`div`,{className:`ai-chat-widget-bubble `+(e.sender===`user`?`ai-chat-widget-user-bubble`:`ai-chat-widget-bot-bubble`),children:[e.text,e.isFaqOptions&&a&&a.length>0&&(0,l.jsx)(`div`,{className:`ai-chat-widget-faq-container`,children:a.map(function(e,t){return(0,l.jsxs)(`button`,{className:`ai-chat-widget-faq-chip`,onClick:function(){V(e)},children:[`> `,e]},t)})})]})},e.id)}),j&&(0,l.jsx)(`div`,{className:`ai-chat-widget-message-row ai-chat-widget-bot-row`,children:(0,l.jsx)(`div`,{className:`ai-chat-widget-bubble ai-chat-widget-bot-bubble`,children:(0,l.jsxs)(`div`,{className:`ai-chat-widget-typing`,children:[(0,l.jsx)(`div`,{className:`ai-chat-widget-dot`}),(0,l.jsx)(`div`,{className:`ai-chat-widget-dot`}),(0,l.jsx)(`div`,{className:`ai-chat-widget-dot`})]})})}),(0,l.jsx)(`div`,{ref:F})]}),(0,l.jsxs)(`div`,{className:`ai-chat-widget-input-area`,children:[(0,l.jsx)(`input`,{type:`text`,className:`ai-chat-widget-input`,value:k,onChange:function(e){A(e.target.value)},placeholder:o,onKeyDown:H,disabled:j}),(0,l.jsx)(`button`,{className:`ai-chat-widget-send-btn`,onClick:function(){V(k)},disabled:!k.trim()||j,"aria-label":`Send message`,children:(0,l.jsx)(f,{})})]}),(!I||!I.removeWatermark)&&(0,l.jsxs)(`div`,{className:`ai-chat-widget-watermark`,children:[`Powered by `,(0,l.jsx)(`strong`,{children:I&&I.organizationName||`AI-FAQ`})]})]})})]})},h=m;exports.ChatWidget=m,exports.default=h;
|
package/dist/ai-chat-bot.es.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.ai-chat-widget-container{--cw-primary:#6366f1;--cw-primary-gradient:#8b5cf6;--cw-icon-text:#fff;--cw-beta-bg:#ef4444;--cw-beta-text:#fff;--cw-chat-bg:#0a0b14eb;--cw-border-color:#8b5cf64d;--cw-shadow:0 20px 50px #0009;--cw-border-radius:16px;--cw-font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--cw-z-index:999999;--cw-width:380px;--cw-height:520px;--cw-header-bg:linear-gradient(90deg, #13112c, #070f1e);--cw-header-border:#8b5cf633;--cw-header-text:#fff;--cw-subtitle-text:#94a3b8;--cw-status-indicator:#10b981;--cw-messages-bg:radial-gradient(circle at 50% 50%, #0d0e1980 0%, #050508 100%);--cw-user-msg-bg:#6366f1;--cw-user-msg-text:#fff;--cw-user-msg-shadow:0 4px 12px #6366f14d;--cw-bot-msg-bg:#1e293bbf;--cw-bot-msg-text:#e2e8f0;--cw-bot-msg-border:#ffffff14;--cw-faq-chip-bg:#06b6d41a;--cw-faq-chip-text:#06b6d4;--cw-faq-chip-border:#06b6d44d;--cw-faq-chip-hover-bg:#06b6d433;--cw-input-area-bg:#08080c;--cw-input-area-border:#8b5cf633;--cw-input-bg:#0f101ad9;--cw-input-text:#fff;--cw-input-border:#8b5cf640;--cw-input-focus-border:#06b6d4;--cw-input-placeholder:#64748b;--cw-send-btn-bg:linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);--cw-send-btn-text:#fff;z-index:var(--cw-z-index);font-family:var(--cw-font-family);box-sizing:border-box;position:fixed}.ai-chat-widget-container *{box-sizing:border-box}.ai-chat-widget-position-bottom-right{bottom:24px;right:24px}.ai-chat-widget-position-bottom-left{bottom:24px;left:24px}.ai-chat-widget-position-top-right{top:24px;right:24px}.ai-chat-widget-position-top-left{top:24px;left:24px}.ai-chat-widget-button{background:linear-gradient(135deg, var(--cw-primary), var(--cw-primary-gradient));width:60px;height:60px;color:var(--cw-icon-text);cursor:pointer;border:1px solid #ffffff26;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;transition:transform .3s cubic-bezier(.16,1,.3,1),boxShadow .3s;display:flex;position:relative;box-shadow:0 0 20px #06b6d466}.ai-chat-widget-button:hover{transform:scale(1.08)rotate(3deg);box-shadow:0 0 30px #06b6d4b3}.ai-chat-widget-button:active{transform:scale(.95)}.ai-chat-widget-icon{width:26px;height:26px;color:var(--cw-icon-text);transition:transform .3s}.ai-chat-widget-badge{background-color:var(--cw-beta-bg);color:var(--cw-beta-text);letter-spacing:.5px;text-transform:uppercase;border:2px solid #0a0b14cc;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;position:absolute;top:-4px;right:-8px;box-shadow:0 2px 6px #0000004d}.ai-chat-widget-window{width:var(--cw-width);height:var(--cw-height);z-index:var(--cw-z-index);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s;position:fixed}.ai-chat-widget-position-bottom-right .ai-chat-widget-window{transform-origin:100% 100%;bottom:96px;right:24px}.ai-chat-widget-position-bottom-left .ai-chat-widget-window{transform-origin:0 100%;bottom:96px;left:24px}.ai-chat-widget-position-top-right .ai-chat-widget-window{transform-origin:100% 0;top:96px;right:24px}.ai-chat-widget-position-top-left .ai-chat-widget-window{transform-origin:0 0;top:96px;left:24px}.ai-chat-widget-window-open{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.ai-chat-widget-window-closed{opacity:0;pointer-events:none;transform:scale(.3)translateY(40px)}.ai-chat-widget-card{border-radius:var(--cw-border-radius);background:var(--cw-chat-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--cw-border-color);height:100%;box-shadow:var(--cw-shadow);flex-direction:column;display:flex;overflow:hidden}.ai-chat-widget-header{background:var(--cw-header-bg);border-bottom:1px solid var(--cw-header-border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.ai-chat-widget-header-left{align-items:center;gap:10px;display:flex}.ai-chat-widget-status-dot{background-color:var(--cw-status-indicator);width:9px;height:9px;box-shadow:0 0 10px var(--cw-status-indicator);border-radius:50%}.ai-chat-widget-header-title{color:var(--cw-header-text);letter-spacing:.5px;flex-direction:column;gap:2px;font-size:14px;font-weight:700;display:flex}.ai-chat-widget-header-subtitle{color:var(--cw-subtitle-text);letter-spacing:0;font-size:11px;font-weight:400}.ai-chat-widget-header-close{color:var(--cw-subtitle-text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:background-color .2s,color .2s;display:flex}.ai-chat-widget-header-close:hover{color:#fff;background-color:#ffffff1a}.ai-chat-widget-messages{background:var(--cw-messages-bg);flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.ai-chat-widget-messages::-webkit-scrollbar{width:6px}.ai-chat-widget-messages::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.ai-chat-widget-message-row{width:100%;display:flex}.ai-chat-widget-user-row{justify-content:flex-end}.ai-chat-widget-bot-row{justify-content:flex-start}.ai-chat-widget-bubble{word-break:break-word;border-radius:12px;max-width:82%;padding:10px 14px;font-size:13.5px;line-height:1.5}.ai-chat-widget-user-bubble{background-color:var(--cw-user-msg-bg);color:var(--cw-user-msg-text);box-shadow:var(--cw-user-msg-shadow);border-top-right-radius:2px}.ai-chat-widget-bot-bubble{background-color:var(--cw-bot-msg-bg);color:var(--cw-bot-msg-text);border:1px solid var(--cw-bot-msg-border);border-top-left-radius:2px}.ai-chat-widget-faq-container{flex-direction:column;gap:8px;margin-top:10px;display:flex}.ai-chat-widget-faq-chip{text-align:left;background-color:var(--cw-faq-chip-bg);border:1px solid var(--cw-faq-chip-border);color:var(--cw-faq-chip-text);cursor:pointer;border-radius:18px;outline:none;padding:7px 12px;font-size:12px;transition:all .2s;display:inline-block}.ai-chat-widget-faq-chip:hover{background-color:var(--cw-faq-chip-hover-bg);transform:translateY(-1px)}.ai-chat-widget-typing{align-items:center;gap:5px;padding:4px 6px;display:flex}.ai-chat-widget-dot{background-color:var(--cw-faq-chip-text);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite ai-chat-widget-bounce}.ai-chat-widget-dot:nth-child(2){animation-delay:.2s}.ai-chat-widget-dot:nth-child(3){animation-delay:.4s}@keyframes ai-chat-widget-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}.ai-chat-widget-input-area{border-top:1px solid var(--cw-input-area-border);background:var(--cw-input-area-bg);gap:10px;padding:12px 14px;display:flex}.ai-chat-widget-input{background-color:var(--cw-input-bg);border:1px solid var(--cw-input-border);color:var(--cw-input-text);border-radius:10px;outline:none;flex:1;padding:10px 14px;font-size:13.5px;transition:border-color .2s}.ai-chat-widget-input::placeholder{color:var(--cw-input-placeholder)}.ai-chat-widget-input:focus{border-color:var(--cw-input-focus-border)}.ai-chat-widget-send-btn{background:var(--cw-send-btn-bg);color:var(--cw-send-btn-text);cursor:pointer;border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;padding:0 16px;transition:opacity .2s,transform .15s;display:flex}.ai-chat-widget-send-btn:hover{opacity:.9;transform:translateY(-1px)}.ai-chat-widget-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.ai-chat-widget-watermark{background:var(--cw-input-area-bg);text-align:center;color:#64748b;border-bottom-left-radius:var(--cw-border-radius);border-bottom-right-radius:var(--cw-border-radius);padding-bottom:12px;font-size:11px}.ai-chat-widget-watermark strong{color:#94a3b8;font-weight:600}@media (width<=480px){.ai-chat-widget-position-bottom-right .ai-chat-widget-window,.ai-chat-widget-position-bottom-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;bottom:84px;left:12px;right:12px}.ai-chat-widget-position-top-right .ai-chat-widget-window,.ai-chat-widget-position-top-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;top:84px;left:12px;right:12px}}/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();
|
|
1
2
|
import { useEffect as e, useRef as t, useState as n } from "react";
|
|
2
3
|
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
3
4
|
//#region src/ChatWidget.jsx
|
|
@@ -45,151 +46,147 @@ var a = () => /* @__PURE__ */ i("svg", {
|
|
|
45
46
|
height: 18
|
|
46
47
|
},
|
|
47
48
|
children: /* @__PURE__ */ r("path", { d: "M5.7 12 2.3 3.27a.75.75 0 0 1 .94-.98l.1.04 18 9c.51.26.54.97.1 1.28l-.1.06-18 9a.75.75 0 0 1-1.07-.85l.03-.1L5.7 12 2.3 3.27 5.7 12ZM4.4 4.54l2.61 6.7 6.63.01c.38 0 .7.28.74.65v.1c0 .38-.27.7-.64.74l-.1.01H7l-2.6 6.7L19.31 12 4.4 4.54Z" })
|
|
48
|
-
}), c =
|
|
49
|
+
}), c = "https://localhost:7068", l = ({ widgetToken: l = "", title: u = "SYNAPSE NODE ALPHA", subtitle: d = "AI Assistant Active", greeting: f = "Greetings Operator. I am Synapse-Node-Alpha, your AI assistant. How can I help you navigate our mainframe today?", fallbackMessage: p = "Sorry, I'm having trouble connecting right now. Please try again later.", faqOptions: m = [
|
|
49
50
|
"What is an MCP Server?",
|
|
50
51
|
"How do I deploy Synapse Agents?",
|
|
51
52
|
"Are connections secure?"
|
|
52
|
-
], placeholder:
|
|
53
|
-
let [
|
|
54
|
-
e(() => {
|
|
53
|
+
], placeholder: h = "Query mainframe (e.g. security)...", showBadge: g = !0, badgeText: _ = "Beta", initialOpen: v = !1, position: y = "bottom-right", customIcon: b = null, customCloseIcon: x = null, customHeaderIcon: S = null, onOpenChange: C, onSendMessage: w, onResponse: T, onError: E, theme: D = {} }) => {
|
|
54
|
+
let [O, k] = n(v), [A, j] = n([]), [M, N] = n(""), [P, F] = n(!1), [I, L] = n(null), R = t(null), [z, B] = n(null), [V, H] = n(!0);
|
|
55
|
+
if (e(() => {
|
|
55
56
|
let e = [];
|
|
56
|
-
|
|
57
|
+
f && e.push({
|
|
57
58
|
id: "msg-greeting",
|
|
58
|
-
text:
|
|
59
|
+
text: f,
|
|
59
60
|
sender: "bot"
|
|
60
|
-
}),
|
|
61
|
+
}), m && m.length > 0 && e.push({
|
|
61
62
|
id: "msg-faq",
|
|
62
63
|
text: "Select a topic of interest:",
|
|
63
64
|
sender: "bot",
|
|
64
65
|
isFaqOptions: !0
|
|
65
|
-
}),
|
|
66
|
-
}, [
|
|
67
|
-
|
|
66
|
+
}), j(e);
|
|
67
|
+
}, [f, m]), e(() => {
|
|
68
|
+
O && R.current && R.current.scrollIntoView({ behavior: "smooth" });
|
|
68
69
|
}, [
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
])
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
70
|
+
A,
|
|
71
|
+
P,
|
|
72
|
+
O
|
|
73
|
+
]), e(() => {
|
|
74
|
+
if (!l) {
|
|
75
|
+
H(!0);
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
var e = c.replace(/\/$/, "") + "/api/Chat/init";
|
|
79
|
+
fetch(e, {
|
|
80
|
+
method: "GET",
|
|
81
|
+
headers: {
|
|
82
|
+
"Content-Type": "application/json",
|
|
83
|
+
"X-Widget-Token": l
|
|
84
|
+
}
|
|
85
|
+
}).then(function(e) {
|
|
86
|
+
if (e.ok) return e.json();
|
|
87
|
+
}).then(function(e) {
|
|
88
|
+
e && B(e), H(!1);
|
|
89
|
+
}).catch(function(e) {
|
|
90
|
+
console.error("Widget initialization failed:", e), H(!0);
|
|
91
|
+
});
|
|
92
|
+
}, [l]), V || z && z.quotaExceeded) return null;
|
|
93
|
+
let U = () => {
|
|
94
|
+
var e = !O;
|
|
95
|
+
k(e), C && C(e);
|
|
96
|
+
}, W = async (e) => {
|
|
97
|
+
var t = e.trim();
|
|
98
|
+
if (!(!t || P)) {
|
|
99
|
+
j(function(e) {
|
|
100
|
+
return e.concat([{
|
|
101
|
+
id: "user-" + Date.now(),
|
|
102
|
+
text: t,
|
|
103
|
+
sender: "user"
|
|
104
|
+
}]);
|
|
105
|
+
}), N(""), F(!0), w && w(t);
|
|
106
|
+
var n = "";
|
|
107
|
+
if (l) try {
|
|
108
|
+
var r = c.replace(/\/$/, "") + "/api/Chat", i = await fetch(r, {
|
|
109
|
+
method: "POST",
|
|
110
|
+
headers: {
|
|
111
|
+
"Content-Type": "application/json",
|
|
112
|
+
"X-Widget-Token": l
|
|
113
|
+
},
|
|
114
|
+
body: JSON.stringify({
|
|
115
|
+
input: t,
|
|
116
|
+
previousInteractionId: I
|
|
117
|
+
})
|
|
118
|
+
});
|
|
119
|
+
if (i.ok) {
|
|
120
|
+
var a = await i.json();
|
|
121
|
+
n = a.reply || a.content || "Response received successfully.", a.interactionId && L(a.interactionId);
|
|
122
|
+
} else {
|
|
123
|
+
var o = await i.json().catch(function() {
|
|
124
|
+
return {};
|
|
125
|
+
}), s = o.error || o.message || "Server responded with status " + i.status;
|
|
126
|
+
E && E(s), n = i.status === 429 ? o.error || o.message || "Rate limit exceeded. Please wait a moment before sending another message." : typeof p == "function" ? p(t) : p;
|
|
127
|
+
}
|
|
128
|
+
} catch (e) {
|
|
129
|
+
E && E(e), n = typeof p == "function" ? p(t) : p;
|
|
103
130
|
}
|
|
104
|
-
|
|
105
|
-
|
|
131
|
+
else await new Promise(function(e) {
|
|
132
|
+
setTimeout(e, 800);
|
|
133
|
+
}), n = typeof p == "function" ? p(t) : p;
|
|
134
|
+
F(!1), j(function(e) {
|
|
135
|
+
return e.concat([{
|
|
136
|
+
id: "bot-" + Date.now(),
|
|
137
|
+
text: n,
|
|
138
|
+
sender: "bot"
|
|
139
|
+
}]);
|
|
140
|
+
}), T && T(n);
|
|
106
141
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
sendButtonText: O.sendButtonText || "#ffffff",
|
|
143
|
-
borderRadius: O.borderRadius || "16px",
|
|
144
|
-
width: O.width || "380px",
|
|
145
|
-
height: O.height || "520px",
|
|
146
|
-
zIndex: O.zIndex || 999999,
|
|
147
|
-
fontFamily: O.fontFamily || "'Inter', system-ui, -apple-system, sans-serif"
|
|
148
|
-
}, K = {
|
|
149
|
-
"--cw-primary": G.primaryColor,
|
|
150
|
-
"--cw-primary-gradient": G.primaryColorGradient,
|
|
151
|
-
"--cw-icon-text": G.iconTextColor,
|
|
152
|
-
"--cw-beta-bg": G.betaBadgeBackground,
|
|
153
|
-
"--cw-beta-text": G.betaBadgeTextColor,
|
|
154
|
-
"--cw-chat-bg": G.chatBg,
|
|
155
|
-
"--cw-header-bg": G.headerBg,
|
|
156
|
-
"--cw-header-text": G.headerText,
|
|
157
|
-
"--cw-subtitle-text": G.subtitleText,
|
|
158
|
-
"--cw-status-indicator": G.statusIndicator,
|
|
159
|
-
"--cw-messages-bg": G.messagesBg,
|
|
160
|
-
"--cw-user-msg-bg": G.userMessageBg,
|
|
161
|
-
"--cw-user-msg-text": G.userMessageText,
|
|
162
|
-
"--cw-bot-msg-bg": G.systemMessageBg,
|
|
163
|
-
"--cw-bot-msg-text": G.systemMessageText,
|
|
164
|
-
"--cw-faq-chip-bg": G.faqChipBg,
|
|
165
|
-
"--cw-faq-chip-text": G.faqChipText,
|
|
166
|
-
"--cw-faq-chip-border": G.faqChipBorder,
|
|
167
|
-
"--cw-faq-chip-hover-bg": G.faqChipHoverBg,
|
|
168
|
-
"--cw-input-bg": G.inputBg,
|
|
169
|
-
"--cw-input-text": G.inputText,
|
|
170
|
-
"--cw-input-border": G.inputBorder,
|
|
171
|
-
"--cw-input-focus-border": G.inputFocusBorder,
|
|
172
|
-
"--cw-send-btn-bg": G.sendButtonBg,
|
|
173
|
-
"--cw-send-btn-text": G.sendButtonText,
|
|
174
|
-
"--cw-border-radius": G.borderRadius,
|
|
175
|
-
"--cw-width": G.width,
|
|
176
|
-
"--cw-height": G.height,
|
|
177
|
-
"--cw-z-index": G.zIndex,
|
|
178
|
-
"--cw-font-family": G.fontFamily
|
|
179
|
-
}, q = `ai-chat-widget-position-${b}`;
|
|
142
|
+
}, G = (e) => {
|
|
143
|
+
e.key === "Enter" && (e.preventDefault(), W(M));
|
|
144
|
+
};
|
|
145
|
+
var K = {
|
|
146
|
+
"--cw-primary": D.primaryColor || "#8b5cf6",
|
|
147
|
+
"--cw-primary-gradient": D.primaryColorGradient || "#06b6d4",
|
|
148
|
+
"--cw-icon-text": D.iconTextColor || "#ffffff",
|
|
149
|
+
"--cw-beta-bg": D.betaBadgeBackground || D.badgeBg || "#ef4444",
|
|
150
|
+
"--cw-beta-text": D.betaBadgeTextColor || D.badgeText || "#ffffff",
|
|
151
|
+
"--cw-chat-bg": D.chatBg || "rgba(10, 11, 20, 0.92)",
|
|
152
|
+
"--cw-header-bg": D.headerBg || "linear-gradient(90deg, #13112c, #070f1e)",
|
|
153
|
+
"--cw-header-text": D.headerText || D.headerTextColor || "#ffffff",
|
|
154
|
+
"--cw-subtitle-text": D.subtitleText || "#94a3b8",
|
|
155
|
+
"--cw-status-indicator": D.statusIndicator || "#10b981",
|
|
156
|
+
"--cw-messages-bg": D.messagesBg || "radial-gradient(circle at 50% 50%, rgba(13, 14, 25, 0.5) 0%, #050508 100%)",
|
|
157
|
+
"--cw-user-msg-bg": D.userMessageBg || D.userBubbleBg || "#6366f1",
|
|
158
|
+
"--cw-user-msg-text": D.userMessageText || D.userBubbleText || "#ffffff",
|
|
159
|
+
"--cw-bot-msg-bg": D.systemMessageBg || D.botBubbleBg || "rgba(30, 41, 59, 0.75)",
|
|
160
|
+
"--cw-bot-msg-text": D.systemMessageText || D.botBubbleText || "#e2e8f0",
|
|
161
|
+
"--cw-faq-chip-bg": D.faqChipBg || "rgba(6, 182, 212, 0.1)",
|
|
162
|
+
"--cw-faq-chip-text": D.faqChipText || "#06b6d4",
|
|
163
|
+
"--cw-faq-chip-border": D.faqChipBorder || "rgba(6, 182, 212, 0.3)",
|
|
164
|
+
"--cw-faq-chip-hover-bg": D.faqChipHoverBg || "rgba(6, 182, 212, 0.2)",
|
|
165
|
+
"--cw-input-bg": D.inputBg || "rgba(15, 16, 26, 0.85)",
|
|
166
|
+
"--cw-input-text": D.inputText || "#ffffff",
|
|
167
|
+
"--cw-input-border": D.inputBorder || "rgba(139, 92, 246, 0.25)",
|
|
168
|
+
"--cw-input-focus-border": D.inputFocusBorder || "#06b6d4",
|
|
169
|
+
"--cw-send-btn-bg": D.sendButtonBg || "linear-gradient(135deg, #6366f1 0%, #06b6d4 100%)",
|
|
170
|
+
"--cw-send-btn-text": D.sendButtonText || "#ffffff",
|
|
171
|
+
"--cw-border-radius": D.borderRadius || "16px",
|
|
172
|
+
"--cw-width": D.width || "380px",
|
|
173
|
+
"--cw-height": D.height || "520px",
|
|
174
|
+
"--cw-z-index": D.zIndex || 999999,
|
|
175
|
+
"--cw-font-family": D.fontFamily || "'Inter', system-ui, -apple-system, sans-serif"
|
|
176
|
+
}, q = "ai-chat-widget-position-" + y;
|
|
180
177
|
return /* @__PURE__ */ i("div", {
|
|
181
|
-
className:
|
|
178
|
+
className: "ai-chat-widget-container " + q,
|
|
182
179
|
style: K,
|
|
183
180
|
children: [/* @__PURE__ */ i("button", {
|
|
184
181
|
className: "ai-chat-widget-button",
|
|
185
|
-
onClick:
|
|
186
|
-
"aria-label":
|
|
187
|
-
children: [
|
|
182
|
+
onClick: U,
|
|
183
|
+
"aria-label": O ? "Close chat" : "Open chat",
|
|
184
|
+
children: [O ? x || /* @__PURE__ */ r(o, {}) : b || /* @__PURE__ */ r(a, {}), g && !O && /* @__PURE__ */ r("span", {
|
|
188
185
|
className: "ai-chat-widget-badge",
|
|
189
|
-
children:
|
|
186
|
+
children: _
|
|
190
187
|
})]
|
|
191
188
|
}), /* @__PURE__ */ r("div", {
|
|
192
|
-
className:
|
|
189
|
+
className: "ai-chat-widget-window " + (O ? "ai-chat-widget-window-open" : "ai-chat-widget-window-closed"),
|
|
193
190
|
children: /* @__PURE__ */ i("div", {
|
|
194
191
|
className: "ai-chat-widget-card",
|
|
195
192
|
children: [
|
|
@@ -197,38 +194,44 @@ var a = () => /* @__PURE__ */ i("svg", {
|
|
|
197
194
|
className: "ai-chat-widget-header",
|
|
198
195
|
children: [/* @__PURE__ */ i("div", {
|
|
199
196
|
className: "ai-chat-widget-header-left",
|
|
200
|
-
children: [
|
|
197
|
+
children: [S || /* @__PURE__ */ r("div", { className: "ai-chat-widget-status-dot" }), /* @__PURE__ */ i("div", {
|
|
201
198
|
className: "ai-chat-widget-header-title",
|
|
202
|
-
children: [/* @__PURE__ */ r("span", { children:
|
|
199
|
+
children: [/* @__PURE__ */ r("span", { children: u }), d && /* @__PURE__ */ r("span", {
|
|
203
200
|
className: "ai-chat-widget-header-subtitle",
|
|
204
|
-
children:
|
|
201
|
+
children: d
|
|
205
202
|
})]
|
|
206
203
|
})]
|
|
207
204
|
}), /* @__PURE__ */ r("button", {
|
|
208
205
|
className: "ai-chat-widget-header-close",
|
|
209
|
-
onClick:
|
|
206
|
+
onClick: U,
|
|
210
207
|
"aria-label": "Close widget",
|
|
211
|
-
children:
|
|
208
|
+
children: x || /* @__PURE__ */ r(o, {})
|
|
212
209
|
})]
|
|
213
210
|
}),
|
|
214
211
|
/* @__PURE__ */ i("div", {
|
|
215
212
|
className: "ai-chat-widget-messages",
|
|
216
213
|
children: [
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
214
|
+
A.map(function(e) {
|
|
215
|
+
return /* @__PURE__ */ r("div", {
|
|
216
|
+
className: "ai-chat-widget-message-row " + (e.sender === "user" ? "ai-chat-widget-user-row" : "ai-chat-widget-bot-row"),
|
|
217
|
+
children: /* @__PURE__ */ i("div", {
|
|
218
|
+
className: "ai-chat-widget-bubble " + (e.sender === "user" ? "ai-chat-widget-user-bubble" : "ai-chat-widget-bot-bubble"),
|
|
219
|
+
children: [e.text, e.isFaqOptions && m && m.length > 0 && /* @__PURE__ */ r("div", {
|
|
220
|
+
className: "ai-chat-widget-faq-container",
|
|
221
|
+
children: m.map(function(e, t) {
|
|
222
|
+
return /* @__PURE__ */ i("button", {
|
|
223
|
+
className: "ai-chat-widget-faq-chip",
|
|
224
|
+
onClick: function() {
|
|
225
|
+
W(e);
|
|
226
|
+
},
|
|
227
|
+
children: ["> ", e]
|
|
228
|
+
}, t);
|
|
229
|
+
})
|
|
230
|
+
})]
|
|
231
|
+
})
|
|
232
|
+
}, e.id);
|
|
233
|
+
}),
|
|
234
|
+
P && /* @__PURE__ */ r("div", {
|
|
232
235
|
className: "ai-chat-widget-message-row ai-chat-widget-bot-row",
|
|
233
236
|
children: /* @__PURE__ */ r("div", {
|
|
234
237
|
className: "ai-chat-widget-bubble ai-chat-widget-bot-bubble",
|
|
@@ -242,7 +245,7 @@ var a = () => /* @__PURE__ */ i("svg", {
|
|
|
242
245
|
})
|
|
243
246
|
})
|
|
244
247
|
}),
|
|
245
|
-
/* @__PURE__ */ r("div", { ref:
|
|
248
|
+
/* @__PURE__ */ r("div", { ref: R })
|
|
246
249
|
]
|
|
247
250
|
}),
|
|
248
251
|
/* @__PURE__ */ i("div", {
|
|
@@ -250,23 +253,31 @@ var a = () => /* @__PURE__ */ i("svg", {
|
|
|
250
253
|
children: [/* @__PURE__ */ r("input", {
|
|
251
254
|
type: "text",
|
|
252
255
|
className: "ai-chat-widget-input",
|
|
253
|
-
value:
|
|
254
|
-
onChange: (e)
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
256
|
+
value: M,
|
|
257
|
+
onChange: function(e) {
|
|
258
|
+
N(e.target.value);
|
|
259
|
+
},
|
|
260
|
+
placeholder: h,
|
|
261
|
+
onKeyDown: G,
|
|
262
|
+
disabled: P
|
|
258
263
|
}), /* @__PURE__ */ r("button", {
|
|
259
264
|
className: "ai-chat-widget-send-btn",
|
|
260
|
-
onClick: ()
|
|
261
|
-
|
|
265
|
+
onClick: function() {
|
|
266
|
+
W(M);
|
|
267
|
+
},
|
|
268
|
+
disabled: !M.trim() || P,
|
|
262
269
|
"aria-label": "Send message",
|
|
263
270
|
children: /* @__PURE__ */ r(s, {})
|
|
264
271
|
})]
|
|
272
|
+
}),
|
|
273
|
+
(!z || !z.removeWatermark) && /* @__PURE__ */ i("div", {
|
|
274
|
+
className: "ai-chat-widget-watermark",
|
|
275
|
+
children: ["Powered by ", /* @__PURE__ */ r("strong", { children: z && z.organizationName || "AI-FAQ" })]
|
|
265
276
|
})
|
|
266
277
|
]
|
|
267
278
|
})
|
|
268
279
|
})]
|
|
269
280
|
});
|
|
270
|
-
},
|
|
281
|
+
}, u = l;
|
|
271
282
|
//#endregion
|
|
272
|
-
export {
|
|
283
|
+
export { l as ChatWidget, u as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ai-chat-bot/react-ai-chat-bot",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.3",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Embeddable React AI Chatbot Widget component",
|
|
6
6
|
"type": "module",
|
|
@@ -10,13 +10,11 @@
|
|
|
10
10
|
".": {
|
|
11
11
|
"import": "./dist/ai-chat-bot.es.js",
|
|
12
12
|
"require": "./dist/ai-chat-bot.cjs.js"
|
|
13
|
-
}
|
|
14
|
-
"./style.css": "./dist/ai-chat-bot.css",
|
|
15
|
-
"./dist/style.css": "./dist/ai-chat-bot.css",
|
|
16
|
-
"./dist/ai-chat-bot.css": "./dist/ai-chat-bot.css"
|
|
13
|
+
}
|
|
17
14
|
},
|
|
18
15
|
"files": [
|
|
19
|
-
"dist"
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md"
|
|
20
18
|
],
|
|
21
19
|
"scripts": {
|
|
22
20
|
"dev": "vite",
|
|
@@ -34,17 +32,15 @@
|
|
|
34
32
|
],
|
|
35
33
|
"license": "MIT",
|
|
36
34
|
"peerDependencies": {
|
|
37
|
-
"react": "
|
|
38
|
-
"react-dom": "
|
|
35
|
+
"react": ">=16.8.0",
|
|
36
|
+
"react-dom": ">=16.8.0"
|
|
39
37
|
},
|
|
40
38
|
"devDependencies": {
|
|
41
|
-
"@types/react": "^19.2.17",
|
|
42
|
-
"@types/react-dom": "^19.2.3",
|
|
43
39
|
"@vitejs/plugin-react": "^6.0.4",
|
|
44
40
|
"oxlint": "^1.75.0",
|
|
45
41
|
"react": "^19.2.8",
|
|
46
42
|
"react-dom": "^19.2.8",
|
|
47
|
-
"vite": "^8.2.0"
|
|
43
|
+
"vite": "^8.2.0",
|
|
44
|
+
"vite-plugin-css-injected-by-js": "^3.5.2"
|
|
48
45
|
}
|
|
49
46
|
}
|
|
50
|
-
|
package/dist/ai-chat-bot.umd.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.AiChatBot={},e.React,e.jsxRuntime))})(this,function(e,t,n){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var r=Object.create,i=Object.defineProperty,a=Object.getOwnPropertyDescriptor,o=Object.getOwnPropertyNames,s=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,l=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var s=o(t),l=0,u=s.length,d;l<u;l++)d=s[l],!c.call(e,d)&&d!==n&&i(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=a(t,d))||r.enumerable});return e};t=((e,t,n)=>(n=e==null?{}:r(s(e)),l(t||!e||!e.__esModule||!c.call(e,`default`)?i(n,`default`,{value:e,enumerable:!0}):n,e)))(t,1);var u=()=>(0,n.jsxs)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,width:`28`,height:`28`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,className:`ai-chat-widget-icon`,children:[(0,n.jsx)(`path`,{d:`M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z`}),(0,n.jsx)(`line`,{x1:`8`,y1:`10`,x2:`16`,y2:`10`}),(0,n.jsx)(`line`,{x1:`8`,y1:`14`,x2:`13`,y2:`14`})]}),d=()=>(0,n.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`,style:{width:24,height:24},children:(0,n.jsx)(`path`,{d:`m4.4 4.55.07-.08a.75.75 0 0 1 .98-.07l.08.07L12 10.94l6.47-6.47a.75.75 0 1 1 1.06 1.06L13.06 12l6.47 6.47c.27.27.3.68.07.98l-.07.08a.75.75 0 0 1-.98.07l-.08-.07L12 13.06l-6.47 6.47a.75.75 0 0 1-1.06-1.06L10.94 12 4.47 5.53a.75.75 0 0 1-.07-.98l.07-.08-.07.08Z`})}),f=()=>(0,n.jsx)(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 24 24`,fill:`currentColor`,style:{width:18,height:18},children:(0,n.jsx)(`path`,{d:`M5.7 12 2.3 3.27a.75.75 0 0 1 .94-.98l.1.04 18 9c.51.26.54.97.1 1.28l-.1.06-18 9a.75.75 0 0 1-1.07-.85l.03-.1L5.7 12 2.3 3.27 5.7 12ZM4.4 4.54l2.61 6.7 6.63.01c.38 0 .7.28.74.65v.1c0 .38-.27.7-.64.74l-.1.01H7l-2.6 6.7L19.31 12 4.4 4.54Z`})}),p=({widgetToken:e=``,apiKey:r=``,apiBaseUrl:i=``,title:a=`SYNAPSE NODE ALPHA`,subtitle:o=`AI Assistant Active`,greeting:s=`Greetings Operator. I am Synapse-Node-Alpha, your AI assistant. How can I help you navigate our mainframe today?`,fallbackMessage:c=`Sorry, I'm having trouble connecting right now. Please try again later.`,faqOptions:l=[`What is an MCP Server?`,`How do I deploy Synapse Agents?`,`Are connections secure?`],placeholder:p=`Query mainframe (e.g. security)...`,showBadge:m=!0,badgeText:h=`Beta`,initialOpen:g=!1,position:_=`bottom-right`,customIcon:v=null,customCloseIcon:y=null,customHeaderIcon:b=null,onOpenChange:x,onSendMessage:S,onResponse:C,onError:w,theme:T={}})=>{let[E,D]=(0,t.useState)(g),[O,k]=(0,t.useState)([]),[A,j]=(0,t.useState)(``),[M,N]=(0,t.useState)(!1),[P,F]=(0,t.useState)(null),I=(0,t.useRef)(null),L=Array.isArray(l)?l.join(`|`):``;(0,t.useEffect)(()=>{let e=[];s&&e.push({id:`msg-greeting`,text:s,sender:`bot`}),l&&l.length>0&&e.push({id:`msg-faq`,text:`Select a topic of interest:`,sender:`bot`,isFaqOptions:!0}),k(e)},[s,L]),(0,t.useEffect)(()=>{E&&I.current?.scrollIntoView({behavior:`smooth`})},[O,M,E]);let R=()=>{let e=!E;D(e),x&&x(e)},z=e=>typeof c==`function`?c(e):c||`Sorry, I'm having trouble connecting right now. Please try again later.`,B=async t=>{let n=t.trim();if(!n||M)return;let a={id:`user-${Date.now()}`,text:n,sender:`user`};k(e=>[...e,a]),j(``),N(!0),S&&S(n);let o=``,s=i.trim();if(e||r||s)try{let t=`${s?s.replace(/\/$/,``):``}/api/Chat`,i={"Content-Type":`application/json`};e&&(i[`X-Widget-Token`]=e),r&&(i[`X-API-KEY`]=r);let a=await fetch(t,{method:`POST`,headers:i,body:JSON.stringify({input:n,previousInteractionId:P})});if(a.ok){let e=await a.json();o=e.reply||e.content||`Response received successfully.`,e.interactionId&&F(e.interactionId)}else{let e=(await a.json().catch(()=>({}))).error||`Server responded with status ${a.status}`;w&&w(e),o=z(n)}}catch(e){w&&w(e),o=z(n)}else await new Promise(e=>setTimeout(e,800)),o=z(n);N(!1);let c={id:`bot-${Date.now()}`,text:o,sender:`bot`};k(e=>[...e,c]),C&&C(o)},V=e=>{e.key===`Enter`&&(e.preventDefault(),B(A))},H={primaryColor:T.primaryColor||`#8b5cf6`,primaryColorGradient:T.primaryColorGradient||`#06b6d4`,iconTextColor:T.iconTextColor||`#ffffff`,betaBadgeBackground:T.betaBadgeBackground||T.badgeBg||`#ef4444`,betaBadgeTextColor:T.betaBadgeTextColor||T.badgeText||`#ffffff`,chatBg:T.chatBg||`rgba(10, 11, 20, 0.92)`,headerBg:T.headerBg||`linear-gradient(90deg, #13112c, #070f1e)`,headerText:T.headerText||T.headerTextColor||`#ffffff`,subtitleText:T.subtitleText||`#94a3b8`,statusIndicator:T.statusIndicator||`#10b981`,messagesBg:T.messagesBg||`radial-gradient(circle at 50% 50%, rgba(13, 14, 25, 0.5) 0%, #050508 100%)`,userMessageBg:T.userMessageBg||T.userBubbleBg||`#6366f1`,userMessageText:T.userMessageText||T.userBubbleText||`#ffffff`,systemMessageBg:T.systemMessageBg||T.botBubbleBg||`rgba(30, 41, 59, 0.75)`,systemMessageText:T.systemMessageText||T.botBubbleText||`#e2e8f0`,faqChipBg:T.faqChipBg||`rgba(6, 182, 212, 0.1)`,faqChipText:T.faqChipText||`#06b6d4`,faqChipBorder:T.faqChipBorder||`rgba(6, 182, 212, 0.3)`,faqChipHoverBg:T.faqChipHoverBg||`rgba(6, 182, 212, 0.2)`,inputBg:T.inputBg||`rgba(15, 16, 26, 0.85)`,inputText:T.inputText||`#ffffff`,inputBorder:T.inputBorder||`rgba(139, 92, 246, 0.25)`,inputFocusBorder:T.inputFocusBorder||`#06b6d4`,sendButtonBg:T.sendButtonBg||`linear-gradient(135deg, #6366f1 0%, #06b6d4 100%)`,sendButtonText:T.sendButtonText||`#ffffff`,borderRadius:T.borderRadius||`16px`,width:T.width||`380px`,height:T.height||`520px`,zIndex:T.zIndex||999999,fontFamily:T.fontFamily||`'Inter', system-ui, -apple-system, sans-serif`},U={"--cw-primary":H.primaryColor,"--cw-primary-gradient":H.primaryColorGradient,"--cw-icon-text":H.iconTextColor,"--cw-beta-bg":H.betaBadgeBackground,"--cw-beta-text":H.betaBadgeTextColor,"--cw-chat-bg":H.chatBg,"--cw-header-bg":H.headerBg,"--cw-header-text":H.headerText,"--cw-subtitle-text":H.subtitleText,"--cw-status-indicator":H.statusIndicator,"--cw-messages-bg":H.messagesBg,"--cw-user-msg-bg":H.userMessageBg,"--cw-user-msg-text":H.userMessageText,"--cw-bot-msg-bg":H.systemMessageBg,"--cw-bot-msg-text":H.systemMessageText,"--cw-faq-chip-bg":H.faqChipBg,"--cw-faq-chip-text":H.faqChipText,"--cw-faq-chip-border":H.faqChipBorder,"--cw-faq-chip-hover-bg":H.faqChipHoverBg,"--cw-input-bg":H.inputBg,"--cw-input-text":H.inputText,"--cw-input-border":H.inputBorder,"--cw-input-focus-border":H.inputFocusBorder,"--cw-send-btn-bg":H.sendButtonBg,"--cw-send-btn-text":H.sendButtonText,"--cw-border-radius":H.borderRadius,"--cw-width":H.width,"--cw-height":H.height,"--cw-z-index":H.zIndex,"--cw-font-family":H.fontFamily},W=`ai-chat-widget-position-${_}`;return(0,n.jsxs)(`div`,{className:`ai-chat-widget-container ${W}`,style:U,children:[(0,n.jsxs)(`button`,{className:`ai-chat-widget-button`,onClick:R,"aria-label":E?`Close chat`:`Open chat`,children:[E?y||(0,n.jsx)(d,{}):v||(0,n.jsx)(u,{}),m&&!E&&(0,n.jsx)(`span`,{className:`ai-chat-widget-badge`,children:h})]}),(0,n.jsx)(`div`,{className:`ai-chat-widget-window ${E?`ai-chat-widget-window-open`:`ai-chat-widget-window-closed`}`,children:(0,n.jsxs)(`div`,{className:`ai-chat-widget-card`,children:[(0,n.jsxs)(`div`,{className:`ai-chat-widget-header`,children:[(0,n.jsxs)(`div`,{className:`ai-chat-widget-header-left`,children:[b||(0,n.jsx)(`div`,{className:`ai-chat-widget-status-dot`}),(0,n.jsxs)(`div`,{className:`ai-chat-widget-header-title`,children:[(0,n.jsx)(`span`,{children:a}),o&&(0,n.jsx)(`span`,{className:`ai-chat-widget-header-subtitle`,children:o})]})]}),(0,n.jsx)(`button`,{className:`ai-chat-widget-header-close`,onClick:R,"aria-label":`Close widget`,children:y||(0,n.jsx)(d,{})})]}),(0,n.jsxs)(`div`,{className:`ai-chat-widget-messages`,children:[O.map(e=>(0,n.jsx)(`div`,{className:`ai-chat-widget-message-row ${e.sender===`user`?`ai-chat-widget-user-row`:`ai-chat-widget-bot-row`}`,children:(0,n.jsxs)(`div`,{className:`ai-chat-widget-bubble ${e.sender===`user`?`ai-chat-widget-user-bubble`:`ai-chat-widget-bot-bubble`}`,children:[e.text,e.isFaqOptions&&l&&l.length>0&&(0,n.jsx)(`div`,{className:`ai-chat-widget-faq-container`,children:l.map((e,t)=>(0,n.jsxs)(`button`,{className:`ai-chat-widget-faq-chip`,onClick:()=>B(e),children:[`> `,e]},t))})]})},e.id)),M&&(0,n.jsx)(`div`,{className:`ai-chat-widget-message-row ai-chat-widget-bot-row`,children:(0,n.jsx)(`div`,{className:`ai-chat-widget-bubble ai-chat-widget-bot-bubble`,children:(0,n.jsxs)(`div`,{className:`ai-chat-widget-typing`,children:[(0,n.jsx)(`div`,{className:`ai-chat-widget-dot`}),(0,n.jsx)(`div`,{className:`ai-chat-widget-dot`}),(0,n.jsx)(`div`,{className:`ai-chat-widget-dot`})]})})}),(0,n.jsx)(`div`,{ref:I})]}),(0,n.jsxs)(`div`,{className:`ai-chat-widget-input-area`,children:[(0,n.jsx)(`input`,{type:`text`,className:`ai-chat-widget-input`,value:A,onChange:e=>j(e.target.value),placeholder:p,onKeyDown:V,disabled:M}),(0,n.jsx)(`button`,{className:`ai-chat-widget-send-btn`,onClick:()=>B(A),disabled:!A.trim()||M,"aria-label":`Send message`,children:(0,n.jsx)(f,{})})]})]})})]})},m=p;e.ChatWidget=p,e.default=m});
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.ai-chat-widget-container{--cw-primary:#6366f1;--cw-primary-gradient:#8b5cf6;--cw-icon-text:#fff;--cw-beta-bg:#ef4444;--cw-beta-text:#fff;--cw-chat-bg:#0a0b14eb;--cw-border-color:#8b5cf64d;--cw-shadow:0 20px 50px #0009;--cw-border-radius:16px;--cw-font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--cw-z-index:999999;--cw-width:380px;--cw-height:520px;--cw-header-bg:linear-gradient(90deg, #13112c, #070f1e);--cw-header-border:#8b5cf633;--cw-header-text:#fff;--cw-subtitle-text:#94a3b8;--cw-status-indicator:#10b981;--cw-messages-bg:radial-gradient(circle at 50% 50%, #0d0e1980 0%, #050508 100%);--cw-user-msg-bg:#6366f1;--cw-user-msg-text:#fff;--cw-user-msg-shadow:0 4px 12px #6366f14d;--cw-bot-msg-bg:#1e293bbf;--cw-bot-msg-text:#e2e8f0;--cw-bot-msg-border:#ffffff14;--cw-faq-chip-bg:#06b6d41a;--cw-faq-chip-text:#06b6d4;--cw-faq-chip-border:#06b6d44d;--cw-faq-chip-hover-bg:#06b6d433;--cw-input-area-bg:#08080c;--cw-input-area-border:#8b5cf633;--cw-input-bg:#0f101ad9;--cw-input-text:#fff;--cw-input-border:#8b5cf640;--cw-input-focus-border:#06b6d4;--cw-input-placeholder:#64748b;--cw-send-btn-bg:linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);--cw-send-btn-text:#fff;z-index:var(--cw-z-index);font-family:var(--cw-font-family);box-sizing:border-box;position:fixed}.ai-chat-widget-container *{box-sizing:border-box}.ai-chat-widget-position-bottom-right{bottom:24px;right:24px}.ai-chat-widget-position-bottom-left{bottom:24px;left:24px}.ai-chat-widget-position-top-right{top:24px;right:24px}.ai-chat-widget-position-top-left{top:24px;left:24px}.ai-chat-widget-button{background:linear-gradient(135deg, var(--cw-primary), var(--cw-primary-gradient));width:60px;height:60px;color:var(--cw-icon-text);cursor:pointer;border:1px solid #ffffff26;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;transition:transform .3s cubic-bezier(.16,1,.3,1),boxShadow .3s;display:flex;position:relative;box-shadow:0 0 20px #06b6d466}.ai-chat-widget-button:hover{transform:scale(1.08)rotate(3deg);box-shadow:0 0 30px #06b6d4b3}.ai-chat-widget-button:active{transform:scale(.95)}.ai-chat-widget-icon{width:26px;height:26px;color:var(--cw-icon-text);transition:transform .3s}.ai-chat-widget-badge{background-color:var(--cw-beta-bg);color:var(--cw-beta-text);letter-spacing:.5px;text-transform:uppercase;border:2px solid #0a0b14cc;border-radius:10px;padding:2px 7px;font-size:10px;font-weight:700;position:absolute;top:-4px;right:-8px;box-shadow:0 2px 6px #0000004d}.ai-chat-widget-window{width:var(--cw-width);height:var(--cw-height);z-index:var(--cw-z-index);transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s;position:fixed}.ai-chat-widget-position-bottom-right .ai-chat-widget-window{transform-origin:100% 100%;bottom:96px;right:24px}.ai-chat-widget-position-bottom-left .ai-chat-widget-window{transform-origin:0 100%;bottom:96px;left:24px}.ai-chat-widget-position-top-right .ai-chat-widget-window{transform-origin:100% 0;top:96px;right:24px}.ai-chat-widget-position-top-left .ai-chat-widget-window{transform-origin:0 0;top:96px;left:24px}.ai-chat-widget-window-open{opacity:1;pointer-events:auto;transform:scale(1)translateY(0)}.ai-chat-widget-window-closed{opacity:0;pointer-events:none;transform:scale(.3)translateY(40px)}.ai-chat-widget-card{border-radius:var(--cw-border-radius);background:var(--cw-chat-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--cw-border-color);height:100%;box-shadow:var(--cw-shadow);flex-direction:column;display:flex;overflow:hidden}.ai-chat-widget-header{background:var(--cw-header-bg);border-bottom:1px solid var(--cw-header-border);justify-content:space-between;align-items:center;padding:14px 18px;display:flex}.ai-chat-widget-header-left{align-items:center;gap:10px;display:flex}.ai-chat-widget-status-dot{background-color:var(--cw-status-indicator);width:9px;height:9px;box-shadow:0 0 10px var(--cw-status-indicator);border-radius:50%}.ai-chat-widget-header-title{color:var(--cw-header-text);letter-spacing:.5px;flex-direction:column;gap:2px;font-size:14px;font-weight:700;display:flex}.ai-chat-widget-header-subtitle{color:var(--cw-subtitle-text);letter-spacing:0;font-size:11px;font-weight:400}.ai-chat-widget-header-close{color:var(--cw-subtitle-text);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:6px;transition:background-color .2s,color .2s;display:flex}.ai-chat-widget-header-close:hover{color:#fff;background-color:#ffffff1a}.ai-chat-widget-messages{background:var(--cw-messages-bg);flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.ai-chat-widget-messages::-webkit-scrollbar{width:6px}.ai-chat-widget-messages::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:4px}.ai-chat-widget-message-row{width:100%;display:flex}.ai-chat-widget-user-row{justify-content:flex-end}.ai-chat-widget-bot-row{justify-content:flex-start}.ai-chat-widget-bubble{word-break:break-word;border-radius:12px;max-width:82%;padding:10px 14px;font-size:13.5px;line-height:1.5}.ai-chat-widget-user-bubble{background-color:var(--cw-user-msg-bg);color:var(--cw-user-msg-text);box-shadow:var(--cw-user-msg-shadow);border-top-right-radius:2px}.ai-chat-widget-bot-bubble{background-color:var(--cw-bot-msg-bg);color:var(--cw-bot-msg-text);border:1px solid var(--cw-bot-msg-border);border-top-left-radius:2px}.ai-chat-widget-faq-container{flex-direction:column;gap:8px;margin-top:10px;display:flex}.ai-chat-widget-faq-chip{text-align:left;background-color:var(--cw-faq-chip-bg);border:1px solid var(--cw-faq-chip-border);color:var(--cw-faq-chip-text);cursor:pointer;border-radius:18px;outline:none;padding:7px 12px;font-size:12px;transition:all .2s;display:inline-block}.ai-chat-widget-faq-chip:hover{background-color:var(--cw-faq-chip-hover-bg);transform:translateY(-1px)}.ai-chat-widget-typing{align-items:center;gap:5px;padding:4px 6px;display:flex}.ai-chat-widget-dot{background-color:var(--cw-faq-chip-text);border-radius:50%;width:6px;height:6px;animation:1.2s ease-in-out infinite ai-chat-widget-bounce}.ai-chat-widget-dot:nth-child(2){animation-delay:.2s}.ai-chat-widget-dot:nth-child(3){animation-delay:.4s}@keyframes ai-chat-widget-bounce{0%,80%,to{transform:translateY(0)}40%{transform:translateY(-6px)}}.ai-chat-widget-input-area{border-top:1px solid var(--cw-input-area-border);background:var(--cw-input-area-bg);gap:10px;padding:12px 14px;display:flex}.ai-chat-widget-input{background-color:var(--cw-input-bg);border:1px solid var(--cw-input-border);color:var(--cw-input-text);border-radius:10px;outline:none;flex:1;padding:10px 14px;font-size:13.5px;transition:border-color .2s}.ai-chat-widget-input::placeholder{color:var(--cw-input-placeholder)}.ai-chat-widget-input:focus{border-color:var(--cw-input-focus-border)}.ai-chat-widget-send-btn{background:var(--cw-send-btn-bg);color:var(--cw-send-btn-text);cursor:pointer;border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;padding:0 16px;transition:opacity .2s,transform .15s;display:flex}.ai-chat-widget-send-btn:hover{opacity:.9;transform:translateY(-1px)}.ai-chat-widget-send-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (width<=480px){.ai-chat-widget-position-bottom-right .ai-chat-widget-window,.ai-chat-widget-position-bottom-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;bottom:84px;left:12px;right:12px}.ai-chat-widget-position-top-right .ai-chat-widget-window,.ai-chat-widget-position-top-left .ai-chat-widget-window{width:calc(100% - 24px);height:460px;top:84px;left:12px;right:12px}}
|
|
2
|
-
/*$vite$:1*/
|