react-sigma-chatbox 1.0.2 → 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 +37 -41
- package/dist/components/Chatbox/ChatMessages.d.ts +1 -0
- package/dist/index.js +8 -8
- package/dist/index.mjs +308 -297
- package/dist/react-sigma-chatbox.css +1 -1
- package/dist/types.d.ts +10 -5
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -92,43 +92,6 @@ const handleSimpleAi = async (userInput: string, threadId: string, language: Lan
|
|
|
92
92
|
<Chatbox onGetAiResponse={handleSimpleAi} config={config} />
|
|
93
93
|
```
|
|
94
94
|
|
|
95
|
-
### Option 2: Streaming Response (Async Generator)
|
|
96
|
-
Use this for real-time "typing" effects.
|
|
97
|
-
|
|
98
|
-
```tsx
|
|
99
|
-
async function* handleStreamingAi(userInput: string, threadId: string, language: Language) {
|
|
100
|
-
const chunks = language === 'ja'
|
|
101
|
-
? ["こんにちは！", "私は **Sigma AI** です。", "何かお手伝いしましょうか？"]
|
|
102
|
-
: ["Hello! ", "I am **Sigma AI**. ", "How can I help?"];
|
|
103
|
-
|
|
104
|
-
for (const chunk of chunks) {
|
|
105
|
-
await new Promise(r => setTimeout(r, 150));
|
|
106
|
-
yield chunk;
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
<Chatbox onGetAiResponse={handleStreamingAi} config={config} />
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
### Option 3: Product Carousel Response
|
|
114
|
-
You can return an object containing products to show a carousel.
|
|
115
|
-
```tsx
|
|
116
|
-
const handleProductSearch = async (userInput: string, threadId: string, language: Language) => {
|
|
117
|
-
return {
|
|
118
|
-
text: language === 'vi' ? "Xem các mẫu **iPhone** mới nhất:" : "Check out our latest **iPhone** models:",
|
|
119
|
-
products: [
|
|
120
|
-
{
|
|
121
|
-
id: 'ip15',
|
|
122
|
-
name: 'iPhone 15 Pro Max',
|
|
123
|
-
price: '29.990.000₫',
|
|
124
|
-
image: 'https://fptshop.com.vn/img/products/iphone-15-pro-max.png',
|
|
125
|
-
description: 'The ultimate iPhone.'
|
|
126
|
-
}
|
|
127
|
-
]
|
|
128
|
-
};
|
|
129
|
-
};
|
|
130
|
-
```
|
|
131
|
-
|
|
132
95
|
---
|
|
133
96
|
|
|
134
97
|
## ⚙️ Component Configuration
|
|
@@ -144,11 +107,44 @@ const handleProductSearch = async (userInput: string, threadId: string, language
|
|
|
144
107
|
| :--- | :--- | :--- |
|
|
145
108
|
| `primaryColor` | `string` | Hex color used for accents and user bubbles. |
|
|
146
109
|
| `botName` | `string` | The display name shown in the header. |
|
|
147
|
-
| `welcomeMessage` | `string
|
|
148
|
-
| `
|
|
110
|
+
| `welcomeMessage` | `Translatable<string>` | Initial message sent by the bot. Automatically updates when language is changed before the conversation starts. |
|
|
111
|
+
| `description` | `Translatable<string>` | Text displayed in the introduction section (avatar area). Supports bold markdown. |
|
|
112
|
+
| `placeholder` | `Translatable<string>` | Input field placeholder text. |
|
|
149
113
|
| `avatarUrl` | `string` | URL for the bot icon. |
|
|
150
|
-
| `quickReplies` | `string[]
|
|
151
|
-
| `renderMarkdown` | `boolean` | Enable Markdown support for AI messages. |
|
|
114
|
+
| `quickReplies` | `Translatable<string[]>` | List of one-tap answer buttons. |
|
|
115
|
+
| `renderMarkdown` | `boolean` | Enable Markdown support for AI messages, including Tables. |
|
|
116
|
+
|
|
117
|
+
### Dynamic Multilingual Support (`Translatable<T>`)
|
|
118
|
+
The fields `welcomeMessage`, `description`, `placeholder`, and `quickReplies` support multilingual configuration. You can pass a simple value or an object mapped to `vi`, `en`, or `ja`.
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
const config: ChatboxConfig = {
|
|
122
|
+
// Simple value
|
|
123
|
+
botName: 'Sigma Assistant',
|
|
124
|
+
|
|
125
|
+
// Multilingual Object
|
|
126
|
+
welcomeMessage: {
|
|
127
|
+
vi: 'Chào bạn! Tôi có thể giúp gì cho bạn?',
|
|
128
|
+
en: 'Hello! How can I help you today?',
|
|
129
|
+
ja: 'こんにちは！今日はどのようなお手伝いができますか？'
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
description: {
|
|
133
|
+
vi: '**Sigma Assistant** hỗ trợ bạn mọi lúc mọi nơi',
|
|
134
|
+
en: '**Sigma Assistant** supports you anytime, anywhere'
|
|
135
|
+
},
|
|
136
|
+
|
|
137
|
+
placeholder: {
|
|
138
|
+
vi: 'Nhập tin nhắn...',
|
|
139
|
+
en: 'Type a message...'
|
|
140
|
+
},
|
|
141
|
+
|
|
142
|
+
quickReplies: {
|
|
143
|
+
vi: ['Giá iPhone 15', 'Bảo hành'],
|
|
144
|
+
en: ['iPhone 15 Price', 'Warranty']
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
```
|
|
152
148
|
|
|
153
149
|
---
|
|
154
150
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(R,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(R=typeof globalThis<"u"?globalThis:R||self,f(R.ReactSigmaChatbox={},R.React))})(this,(function(R,f){"use strict";var H={exports:{}},Y={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var
|
|
9
|
+
*/var q;function oe(){if(q)return Y;q=1;var r=Symbol.for("react.transitional.element"),u=Symbol.for("react.fragment");function s(o,l,c){var x=null;if(c!==void 0&&(x=""+c),l.key!==void 0&&(x=""+l.key),"key"in l){c={};for(var i in l)i!=="key"&&(c[i]=l[i])}else c=l;return l=c.ref,{$$typeof:r,type:o,key:x,ref:l!==void 0?l:null,props:c}}return Y.Fragment=u,Y.jsx=s,Y.jsxs=s,Y}var U={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var
|
|
17
|
+
*/var ee;function le(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&(function(){function r(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===k?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case _:return"Fragment";case B:return"Profiler";case C:return"StrictMode";case G:return"Suspense";case Q:return"SuspenseList";case Z:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case S:return"Portal";case J:return t.displayName||"Context";case V:return(t._context.displayName||"Context")+".Consumer";case X:var a=t.render;return t=t.displayName,t||(t=a.displayName||a.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case w:return a=t.displayName||null,a!==null?a:r(t.type)||"Memo";case A:a=t._payload,t=t._init;try{return r(t(a))}catch{}}return null}function u(t){return""+t}function s(t){try{u(t);var a=!1}catch{a=!0}if(a){a=console;var p=a.error,g=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return p.call(a,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",g),u(t)}}function o(t){if(t===_)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===A)return"<...>";try{var a=r(t);return a?"<"+a+">":"<...>"}catch{return"<...>"}}function l(){var t=N.A;return t===null?null:t.getOwner()}function c(){return Error("react-stack-top-frame")}function x(t){if(E.call(t,"key")){var a=Object.getOwnPropertyDescriptor(t,"key").get;if(a&&a.isReactWarning)return!1}return t.key!==void 0}function i(t,a){function p(){L||(L=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",a))}p.isReactWarning=!0,Object.defineProperty(t,"key",{get:p,configurable:!0})}function h(){var t=r(this.type);return D[t]||(D[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function n(t,a,p,g,z,K){var b=p.ref;return t={$$typeof:M,type:t,key:a,props:p,_owner:g},(b!==void 0?b:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:h}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:z}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:K}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function d(t,a,p,g,z,K){var b=a.children;if(b!==void 0)if(g)if(P(b)){for(g=0;g<b.length;g++)m(b[g]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else m(b);if(E.call(a,"key")){b=r(t);var W=Object.keys(a).filter(function(pe){return pe!=="key"});g=0<W.length?"{key: someKey, "+W.join(": ..., ")+": ...}":"{key: someKey}",ae[b+g]||(W=0<W.length?"{"+W.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,
|
|
23
|
-
`),
|
|
22
|
+
<%s key={someKey} {...props} />`,g,b,W,b),ae[b+g]=!0)}if(b=null,p!==void 0&&(s(p),b=""+p),x(a)&&(s(a.key),b=""+a.key),"key"in a){p={};for(var $ in a)$!=="key"&&(p[$]=a[$])}else p=a;return b&&i(p,typeof t=="function"?t.displayName||t.name||"Unknown":t),n(t,b,p,l(),z,K)}function m(t){y(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===A&&(t._payload.status==="fulfilled"?y(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function y(t){return typeof t=="object"&&t!==null&&t.$$typeof===M}var j=f,M=Symbol.for("react.transitional.element"),S=Symbol.for("react.portal"),_=Symbol.for("react.fragment"),C=Symbol.for("react.strict_mode"),B=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),J=Symbol.for("react.context"),X=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),Q=Symbol.for("react.suspense_list"),w=Symbol.for("react.memo"),A=Symbol.for("react.lazy"),Z=Symbol.for("react.activity"),k=Symbol.for("react.client.reference"),N=j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,E=Object.prototype.hasOwnProperty,P=Array.isArray,F=console.createTask?console.createTask:function(){return null};j={react_stack_bottom_frame:function(t){return t()}};var L,D={},ne=j.react_stack_bottom_frame.bind(j,c)(),se=F(o(c)),ae={};U.Fragment=_,U.jsx=function(t,a,p){var g=1e4>N.recentlyCreatedOwnerStacks++;return d(t,a,p,!1,g?Error("react-stack-top-frame"):ne,g?F(o(t)):se)},U.jsxs=function(t,a,p){var g=1e4>N.recentlyCreatedOwnerStacks++;return d(t,a,p,!0,g?Error("react-stack-top-frame"):ne,g?F(o(t)):se)}})()),U}var te;function ie(){return te||(te=1,process.env.NODE_ENV==="production"?H.exports=oe():H.exports=le()),H.exports}var e=ie(),T=(r=>(r.TEXT="text",r.PRODUCT_LIST="product_list",r.LOADING="loading",r))(T||{}),v=(r=>(r.USER="user",r.AI="ai",r))(v||{});const ce=({title:r,primaryColor:u,onClose:s,onReset:o,onToggleExpand:l,isExpanded:c,language:x,onLanguageChange:i})=>{const h=[{value:"en",label:"EN"},{value:"vi",label:"VI"},{value:"ja",label:"JA"}];return e.jsxs("div",{className:"px-4 py-3 flex items-center justify-between border-b border-red-50/50 sticky top-0 z-10 bg-[#fff1f2]/90 backdrop-blur-sm",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"w-8 h-8 rounded-full overflow-hidden bg-white p-0.5 shadow-sm",children:e.jsx("img",{src:"https://fptshop.com.vn/img/bitu/bitu-avatar.png",onError:n=>n.currentTarget.src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png",className:"w-full h-full object-contain",alt:"Bot Icon"})}),e.jsxs("div",{className:"flex flex-col",children:[e.jsxs("h3",{className:"font-bold text-[#1a2b56] text-[14px] leading-tight tracking-tight flex items-center gap-1",children:[r," ",e.jsx("span",{className:"text-red-400 text-[10px]",children:"✨"})]}),e.jsxs("span",{className:"text-[10px] text-green-500 font-medium flex items-center gap-1",children:[e.jsx("span",{className:"w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"}),"Online"]})]})]}),e.jsxs("div",{className:"flex items-center gap-1",children:[e.jsxs("div",{className:"relative group mr-1",children:[e.jsx("select",{value:x,onChange:n=>i(n.target.value),className:"appearance-none bg-white/50 border border-gray-200 rounded-lg px-2 pr-5 py-1 text-[10px] font-black text-indigo-600 cursor-pointer hover:bg-white transition-all focus:outline-none focus:ring-2 focus:ring-indigo-100 uppercase",title:"Select language",children:h.map(n=>e.jsx("option",{value:n.value,className:"font-sans font-bold",children:n.label},n.value))}),e.jsx("div",{className:"absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-indigo-400",children:e.jsx("svg",{width:"8",height:"8",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"4",strokeLinecap:"round",strokeLinejoin:"round",children:e.jsx("path",{d:"m6 9 6 6 6-6"})})})]}),e.jsx("button",{onClick:o,className:"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white/60 text-gray-500 hover:text-indigo-600 transition-all",title:"Reset chat",children:e.jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"}),e.jsx("path",{d:"M21 3v5h-5"}),e.jsx("path",{d:"M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"}),e.jsx("path",{d:"M8 16H3v5"})]})}),e.jsx("button",{onClick:l,className:"w-8 h-8 hidden md:flex items-center justify-center rounded-lg hover:bg-white/60 text-gray-500 hover:text-indigo-600 transition-all",title:c?"Collapse":"Expand",children:c?e.jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M4 14h6v6"}),e.jsx("path",{d:"M20 10h-6V4"}),e.jsx("path",{d:"M14 10l7-7"}),e.jsx("path",{d:"M10 14l-7 7"})]}):e.jsxs("svg",{width:"15",height:"15",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M15 3h6v6"}),e.jsx("path",{d:"M9 21H3v-6"}),e.jsx("path",{d:"M21 3l-7 7"}),e.jsx("path",{d:"M3 21l7-7"})]})}),e.jsx("button",{onClick:s,className:"w-8 h-8 flex items-center justify-center rounded-lg hover:bg-red-50 text-gray-500 hover:text-red-500 transition-all",title:"Close",children:e.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"M18 6 6 18"}),e.jsx("path",{d:"M6 6l12 12"})]})})]})]})},de=({product:r,primaryColor:u})=>e.jsxs("div",{className:"min-w-[170px] max-w-[170px] bg-white rounded-xl border border-gray-50 shadow-sm overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300 group",children:[e.jsxs("div",{className:"relative h-32 w-full bg-white flex items-center justify-center p-2",children:[e.jsx("img",{src:r.image,alt:r.name,className:"h-full w-full object-contain group-hover:scale-105 transition-transform duration-500"}),r.discount&&e.jsx("div",{className:"absolute top-2 left-2 bg-red-600 text-white text-[9px] font-bold px-1.5 py-0.5 rounded-md shadow-sm",children:r.discount})]}),e.jsxs("div",{className:"p-3 flex-1 flex flex-col justify-between border-t border-gray-50",children:[e.jsxs("div",{children:[e.jsx("h4",{className:"text-[11px] font-bold text-gray-800 line-clamp-2 min-h-[30px] mb-1.5 group-hover:text-red-600 transition-colors",children:r.name}),e.jsxs("div",{className:"mb-2",children:[e.jsx("span",{className:"text-red-600 font-extrabold text-[13px]",children:r.price}),r.oldPrice&&e.jsx("span",{className:"text-[10px] text-gray-400 line-through ml-1 block opacity-60",children:r.oldPrice})]})]}),e.jsx("button",{className:"w-full py-1.5 rounded-lg text-[11px] font-bold border transition-all duration-300 active:scale-95 shadow-sm",style:{borderColor:u,color:u},onMouseEnter:s=>{s.currentTarget.style.backgroundColor=u,s.currentTarget.style.color="white"},onMouseLeave:s=>{s.currentTarget.style.backgroundColor="transparent",s.currentTarget.style.color=u},children:"Chọn mua"})]})]}),O=r=>{const u=/(\*\*.*?\*\*|\[.*?\]\(.*?\))/g;return r.split(u).map((o,l)=>{if(o.startsWith("**")&&o.endsWith("**")){const x=o.slice(2,-2);return e.jsx("strong",{className:"font-bold text-gray-900",children:x},l)}const c=o.match(/\[(.*?)\]\((.*?)\)/);if(c){const[x,i,h]=c;return e.jsx("a",{href:h,target:"_blank",rel:"noopener noreferrer",className:"text-blue-600 hover:underline break-all font-semibold",children:i},l)}return o})},ue=({text:r})=>{const u=r.replace(/\r/g,"").split(`
|
|
23
|
+
`),s=[];let o=[],l=!1;const c=x=>{if(o.length>0){const h=o.length>1&&o[1].every(n=>n.trim().match(/^:?-+:?$/))?[o[0],...o.slice(2)]:o;h.length>0&&s.push(e.jsx("div",{className:"my-4 overflow-x-auto border border-slate-200 rounded-xl shadow-sm bg-white",children:e.jsxs("table",{className:"min-w-full border-collapse text-[13px] leading-normal",children:[e.jsx("thead",{className:"bg-slate-50 border-b border-slate-200",children:e.jsx("tr",{children:h[0].map((n,d)=>e.jsx("th",{className:"px-4 py-3 text-left font-bold text-slate-700 border-r last:border-r-0 border-slate-200 whitespace-nowrap",children:O(n.trim())},d))})}),e.jsx("tbody",{className:"divide-y divide-slate-100",children:h.slice(1).map((n,d)=>e.jsx("tr",{className:"hover:bg-slate-50/50 transition-colors",children:n.map((m,y)=>e.jsx("td",{className:"px-4 py-3 text-slate-600 border-r last:border-r-0 border-slate-200 align-top",children:O(m.trim())},y))},d))})]})},`table-wrapper-${x}`)),o=[],l=!1}};return u.forEach((x,i)=>{const h=x.trim();if(h.includes("|")&&(h.startsWith("|")||h.split("|").length>1)){let m=h.split("|");h.startsWith("|")&&m.shift(),h.endsWith("|")&&m.pop(),o.push(m),l=!0;return}else l&&c(i);const n=h.match(/^(#{1,4})\s+(.*)$/);if(n){const m=n[1].length,y=n[2],j=m===1?"text-xl font-bold mb-4 mt-6 first:mt-1":m===2?"text-lg font-bold mb-3 mt-5":"text-[13px] font-black mb-2 mt-5 text-indigo-600 uppercase tracking-widest";s.push(e.jsx("div",{className:j,children:O(y)},i));return}const d=h.match(/^[*+-]\s+(.*)$/);if(d){const m=d[1];s.push(e.jsxs("div",{className:"flex gap-3 pl-1 mb-2 items-start group",children:[e.jsx("span",{className:"text-indigo-400 flex-shrink-0 mt-2 w-1.5 h-1.5 bg-indigo-400 rounded-full group-hover:scale-125 transition-transform"}),e.jsx("div",{className:"flex-1 leading-relaxed text-slate-700",children:O(m)})]},i));return}if(h===""){s.push(e.jsx("div",{className:"h-3"},i));return}s.push(e.jsx("div",{className:"mb-1.5 leading-relaxed text-slate-700",children:O(x)},i))}),l&&c(u.length),e.jsx("div",{className:"markdown-render w-full",children:s})},he=({messages:r,isLoading:u,description:s,quickReplies:o,onQuickReply:l,primaryColor:c,renderMarkdown:x=!1})=>{const i="https://fptshop.com.vn/img/bitu/bitu-avatar.png",h="https://cdn-icons-png.flaticon.com/512/4712/4712035.png";return e.jsxs("div",{className:"flex flex-col gap-8 pb-4",children:[e.jsxs("div",{className:"flex flex-col items-center justify-center pt-4 text-center animate-msg",children:[e.jsx("div",{className:"relative mb-5",children:e.jsx("div",{className:"w-20 h-20 flex items-center justify-center",children:e.jsx("img",{src:i,onError:n=>n.currentTarget.src=h,className:"w-full h-full object-contain",alt:"Sigma AI Hero"})})}),e.jsxs("h2",{className:"text-xl font-bold text-[#1a2b56] flex items-center justify-center gap-1",children:["Sigma ",e.jsx("span",{className:"bg-indigo-600 text-white text-[10px] px-1.5 py-0.5 rounded-md leading-none ml-1 uppercase font-bold tracking-tight",children:"AI"})]}),e.jsx("div",{className:"text-[14px] text-gray-600 mt-3 leading-relaxed px-4 max-w-[280px]",children:s&&e.jsx("div",{className:"bot-description",children:O(s)})})]}),r.map((n,d)=>e.jsxs("div",{className:`flex flex-col animate-msg ${n.sender===v.USER?"items-end":"items-start"}`,style:{animationDelay:`${d*.05}s`},children:[n.sender===v.AI&&e.jsxs("div",{className:"flex items-center gap-1.5 mb-2 ml-1",children:[e.jsx("img",{src:i,onError:m=>m.currentTarget.src=h,className:"w-4 h-4 object-contain",alt:"AI"}),e.jsx("span",{className:"text-[11px] font-bold text-gray-400 uppercase tracking-widest",children:"AI Agent"})]}),e.jsxs("div",{className:`flex flex-col ${n.sender===v.USER?"items-end":"items-start"} w-full max-w-[96%]`,children:[e.jsx("div",{className:`px-4 py-3 rounded-[20px] shadow-sm border border-black/[0.02] overflow-hidden ${n.sender===v.USER?"bg-indigo-600 text-white rounded-tr-none whitespace-pre-line shadow-indigo-100/50":"bg-white text-slate-800 border-none rounded-tl-none"} ${!x||n.sender===v.USER?"whitespace-pre-line":""}`,children:x&&n.sender===v.AI?e.jsx(ue,{text:n.content}):n.content}),n.type===T.PRODUCT_LIST&&n.products&&e.jsx("div",{className:"w-full mt-4 flex gap-4 overflow-x-auto pb-4 pt-1 no-scrollbar snap-x",children:n.products.map(m=>e.jsx("div",{className:"product-card-snap",children:e.jsx(de,{product:m,primaryColor:c})},m.id))}),d===0&&r.length===1&&n.sender===v.AI&&e.jsx("div",{className:"mt-5 flex flex-wrap gap-2.5 w-full",children:o.map((m,y)=>e.jsx("button",{onClick:()=>l(m),className:"px-4 py-2 rounded-full text-[13px] font-semibold border border-transparent bg-white text-gray-600 hover:text-indigo-600 hover:border-indigo-100 transition-all duration-200 shadow-sm active:scale-95",children:m},y))})]})]},n.id)),u&&e.jsxs("div",{className:"flex flex-col gap-1.5 items-start animate-msg",children:[e.jsx("div",{className:"flex items-center gap-1.5 ml-1",children:e.jsx("img",{src:i,onError:n=>n.currentTarget.src=h,className:"w-4 h-4 object-contain",alt:"AI Loading"})}),e.jsxs("div",{className:"flex gap-1.5 bg-white px-4 py-3 rounded-[18px] rounded-tl-none border-none shadow-sm",children:[e.jsx("span",{className:"w-2 h-2 bg-indigo-300 rounded-full animate-sigma-bounce"}),e.jsx("span",{className:"w-2 h-2 bg-indigo-300 rounded-full animate-sigma-bounce [animation-delay:0.2s]"}),e.jsx("span",{className:"w-2 h-2 bg-indigo-300 rounded-full animate-sigma-bounce [animation-delay:0.4s]"})]})]})]})},me=({placeholder:r,onSendMessage:u,primaryColor:s})=>{const[o,l]=f.useState(""),c=()=>{o.trim()&&(u(o),l(""))},x=i=>{i.key==="Enter"&&!i.shiftKey&&(i.preventDefault(),c())};return e.jsx("div",{className:"p-1",children:e.jsxs("div",{className:"relative flex items-center bg-gray-50/50 rounded-2xl border border-gray-100 focus-within:border-indigo-100 focus-within:bg-white transition-all duration-200 pr-2 pl-3 py-1",children:[e.jsx("textarea",{value:o,onChange:i=>l(i.target.value),onKeyDown:x,placeholder:r,rows:1,className:"w-full bg-transparent border-none outline-none focus:ring-0 text-[14px] text-gray-700 font-normal py-3 px-1 resize-none chat-scrollbar min-h-[44px] max-h-[120px] leading-relaxed placeholder:text-gray-400",style:{fontWeight:400}}),e.jsx("button",{onClick:c,disabled:!o.trim(),className:`w-9 h-9 rounded-xl flex-shrink-0 flex items-center justify-center transition-all duration-300 shadow-sm ${o.trim()?"bg-indigo-600 text-white hover:bg-indigo-700 active:scale-95":"bg-gray-200 text-gray-400 cursor-not-allowed"}`,children:e.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round",children:[e.jsx("path",{d:"m5 12 7-7 7 7"}),e.jsx("path",{d:"M12 19V5"})]})})]})})},fe=({isOpen:r,onClick:u,primaryColor:s,className:o=""})=>e.jsx("div",{className:`fixed bottom-4 right-4 md:bottom-6 md:right-6 z-[100] ${o}`,children:e.jsx("button",{onClick:u,className:`w-12 h-12 bg-white rounded-2xl shadow-lg flex items-center justify-center border transition-all duration-300 overflow-hidden ${r?"border-indigo-500 ring-4 ring-indigo-50 scale-105 rotate-0":"border-slate-100 hover:scale-110 hover:shadow-xl"}`,children:e.jsx("img",{src:"https://fptshop.com.vn/img/bitu/bitu-avatar.png",className:"w-10 h-10 object-contain",alt:"Bitu",onError:l=>l.currentTarget.src="https://cdn-icons-png.flaticon.com/512/4712/4712035.png"})})}),re=()=>Math.random().toString(36).substring(2,15)+Math.random().toString(36).substring(2,15),I=(r,u,s)=>typeof r=="object"&&r!==null&&!Array.isArray(r)?r[u]||r.en||Object.values(r)[0]||s:r??s,xe=({config:r,onGetAiResponse:u})=>{const[s,o]=f.useState(!1),[l,c]=f.useState(!1),[x,i]=f.useState(!1),[h,n]=f.useState(re()),[d,m]=f.useState("en"),[y,j]=f.useState([]),[M,S]=f.useState(!1),_=f.useRef(null),C=f.useRef(0);f.useEffect(()=>{const w=I(r.welcomeMessage,d,"Hello!");j([{id:"welcome",type:T.TEXT,sender:v.AI,content:w,timestamp:new Date}])},[]);const B=f.useMemo(()=>I(r.placeholder,d,"Type a message..."),[r.placeholder,d]),V=f.useMemo(()=>I(r.quickReplies,d,[]),[r.quickReplies,d]),J=f.useMemo(()=>I(r.description,d,""),[r.description,d]);f.useEffect(()=>{if(y.length===1&&y[0].id==="welcome"){const w=I(r.welcomeMessage,d,"Hello!");j([{...y[0],content:w}])}},[d]),f.useEffect(()=>{if(s){const w=setTimeout(()=>i(!0),50);return()=>clearTimeout(w)}else i(!1)},[s]),f.useEffect(()=>{_.current&&s&&(_.current.scrollTop=_.current.scrollHeight)},[y,s,M]);const X=async w=>{if(!w.trim()||M)return;const A=++C.current,Z={id:`user-${Date.now()}`,type:T.TEXT,sender:v.USER,content:w,timestamp:new Date};j(k=>[...k,Z]),S(!0);try{const k=u(w,h,d);if(k&&typeof k=="object"&&Symbol.asyncIterator in k){let N="",E=!1;const P=`ai-${Date.now()}`;for await(const F of k){if(A!==C.current)return;E||(j(L=>[...L,{id:P,type:T.TEXT,sender:v.AI,content:"",timestamp:new Date}]),S(!1),E=!0),N+=F,j(L=>L.map(D=>D.id===P?{...D,content:N}:D))}}else{const N=await k;if(A!==C.current)return;S(!1);const E=typeof N=="string"?{text:N,products:void 0}:N;j(P=>[...P,{id:`ai-${Date.now()}`,type:E.products?T.PRODUCT_LIST:T.TEXT,sender:v.AI,content:E.text,products:E.products,timestamp:new Date}])}}catch(k){if(A!==C.current)return;console.error("Chatbox Error:",k),S(!1);const N=d==="vi"?"Hệ thống đang bận, vui lòng thử lại sau.":"System is busy, please try again later.";j(E=>[...E,{id:`err-${Date.now()}`,type:T.TEXT,sender:v.AI,content:N,timestamp:new Date}])}},G=()=>{C.current++,n(re());const w=I(r.welcomeMessage,d,"Hello!");j([{id:"welcome",type:T.TEXT,sender:v.AI,content:w,timestamp:new Date}]),S(!1),c(!1)},Q=`
|
|
24
24
|
fixed z-[99] overflow-hidden flex flex-col border border-white/40 shadow-2xl bg-white animate-chat-pop
|
|
25
|
-
${
|
|
26
|
-
${l?"bottom-0 right-0 w-full h-full md:bottom-6 md:right-28 md:w-[850px] md:h-[85vh] rounded-none md:rounded-[32px]":"bottom-0 right-0 w-full h-[80vh] md:bottom-6 md:right-28 md:w-[
|
|
27
|
-
`;return e.jsxs(e.Fragment,{children:[e.jsx(
|
|
25
|
+
${x?"transition-[width,height,border-radius,right,bottom] duration-300 ease-in-out":""}
|
|
26
|
+
${l?"bottom-0 right-0 w-full h-full md:bottom-6 md:right-28 md:w-[850px] md:h-[85vh] rounded-none md:rounded-[32px]":"bottom-0 right-0 w-full h-[80vh] md:bottom-6 md:right-28 md:w-[420px] md:h-[580px] rounded-t-[28px] md:rounded-[28px]"}
|
|
27
|
+
`;return e.jsxs(e.Fragment,{children:[e.jsx(fe,{isOpen:s,onClick:()=>o(!s),primaryColor:r.primaryColor,className:s?"hidden md:flex":"flex"}),s&&e.jsxs("div",{className:Q,style:{left:"auto"},children:[e.jsx(ce,{title:r.botName,primaryColor:r.primaryColor,onClose:()=>o(!1),onReset:G,onToggleExpand:()=>c(!l),isExpanded:l,language:d,onLanguageChange:m}),e.jsx("div",{className:"flex-1 overflow-y-auto chat-scrollbar px-5 py-5 bg-slate-50/30",ref:_,children:e.jsx(he,{messages:y,isLoading:M,description:J,quickReplies:V,onQuickReply:w=>X(w),primaryColor:r.primaryColor,renderMarkdown:r.renderMarkdown})}),e.jsx("div",{className:"bg-white p-3 border-t border-slate-100",children:e.jsx(me,{placeholder:B,onSendMessage:X,primaryColor:r.primaryColor})})]})]})};R.Chatbox=xe,R.MessageType=T,R.SenderType=v,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})}));
|