@banbox/chat 1.0.9 → 1.0.11
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/dist/index.cjs +53 -75
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +18 -2
- package/dist/index.d.ts +18 -2
- package/dist/index.js +53 -75
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/chat/ChatRoot.tsx +14 -1
- package/src/chat/InboxPopup.tsx +12 -17
- package/src/chat/SinglePopup.tsx +26 -27
- package/src/ui/ChatMessageItem.tsx +9 -31
- package/src/utils/theme.ts +37 -0
package/dist/index.cjs
CHANGED
|
@@ -3251,21 +3251,6 @@ var MessageHoverActions = ({
|
|
|
3251
3251
|
] });
|
|
3252
3252
|
};
|
|
3253
3253
|
var MessageHoverActions_default = MessageHoverActions;
|
|
3254
|
-
var toBanglaDemo = (s) => {
|
|
3255
|
-
const map = {
|
|
3256
|
-
Hi: "\u09B9\u09BE\u0987",
|
|
3257
|
-
"Do you have a freight forwarder in China?": "\u0986\u09AA\u09A8\u09BE\u09B0 \u0995\u09BF \u099A\u09C0\u09A8\u09C7 \u0995\u09CB\u09A8\u09CB \u09AB\u09CD\u09B0\u09C7\u0987\u099F \u09AB\u09B0\u0993\u09AF\u09BC\u09BE\u09B0\u09CD\u09A1\u09BE\u09B0 \u0986\u099B\u09C7?",
|
|
3258
|
-
"This conversation is empty. Say hi \u{1F44B}": "\u098F\u0987 \u0995\u09A5\u09CB\u09AA\u0995\u09A5\u09A8\u099F\u09BF \u0996\u09BE\u09B2\u09BF \u0964 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09B9\u09BE\u0987 \u09AC\u09B2\u09C1\u09A8 \u{1F44B}",
|
|
3259
|
-
"Can we schedule a call for tomorrow?": "\u0986\u09AE\u09B0\u09BE \u0995\u09BF \u0986\u0997\u09BE\u09AE\u09C0\u0995\u09BE\u09B2 \u098F\u0995\u099F\u09BF \u0995\u09B2 \u09A8\u09BF\u09B0\u09CD\u09A7\u09BE\u09B0\u09A3 \u0995\u09B0\u09A4\u09C7 \u09AA\u09BE\u09B0\u09BF?",
|
|
3260
|
-
"Sure, what time suits you?": "\u0985\u09AC\u09B6\u09CD\u09AF\u0987, \u0986\u09AA\u09A8\u09BE\u09B0 \u099C\u09A8\u09CD\u09AF \u0995\u09CB\u09A8 \u09B8\u09AE\u09AF\u09BC\u099F\u09BF \u09B8\u09C1\u09AC\u09BF\u09A7\u09BE\u099C\u09A8\u0995?",
|
|
3261
|
-
"Welcome to Global Marketplace": "\u0997\u09CD\u09B2\u09CB\u09AC\u09BE\u09B2 \u09AE\u09BE\u09B0\u09CD\u0995\u09C7\u099F\u09AA\u09CD\u09B2\u09C7\u09B8\u09C7 \u0986\u09AA\u09A8\u09BE\u0995\u09C7 \u09B8\u09CD\u09AC\u09BE\u0997\u09A4\u09AE \u{1F389}",
|
|
3262
|
-
"Happy to be here!": "\u098F\u0996\u09BE\u09A8\u09C7 \u09A5\u09BE\u0995\u09A4\u09C7 \u09AA\u09C7\u09B0\u09C7 \u0986\u09A8\u09A8\u09CD\u09A6\u09BF\u09A4!"
|
|
3263
|
-
};
|
|
3264
|
-
if (map[s]) {
|
|
3265
|
-
return map[s];
|
|
3266
|
-
}
|
|
3267
|
-
return `\u09AC\u09BE\u0982\u09B2\u09BE ${s}`;
|
|
3268
|
-
};
|
|
3269
3254
|
var ChatMessageItem = ({
|
|
3270
3255
|
id,
|
|
3271
3256
|
mine = false,
|
|
@@ -3288,31 +3273,24 @@ var ChatMessageItem = ({
|
|
|
3288
3273
|
}) => {
|
|
3289
3274
|
const originalTextRef = React16__default.default.useRef(text ?? "");
|
|
3290
3275
|
const [translated, setTranslated] = React16__default.default.useState(false);
|
|
3291
|
-
const displayText = translated ?
|
|
3276
|
+
const displayText = translated ? onTranslate?.(originalTextRef.current) ?? originalTextRef.current : originalTextRef.current;
|
|
3292
3277
|
const handleTranslateClick = () => {
|
|
3293
3278
|
setTranslated((v) => !v);
|
|
3294
|
-
onTranslate?.();
|
|
3295
3279
|
};
|
|
3296
3280
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx3__default.default("mb-4", className), "data-msg-id": id, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex items-end gap-3", mine && "justify-end"), children: [
|
|
3297
|
-
!mine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxRuntime.
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
),
|
|
3306
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
|
|
3307
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3281
|
+
!mine && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${showStatus ? "mb-5" : "mb-0"}`, children: initialSrc ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-10 w-10 shrink-0 rounded-full border border-[#F1F1F1]", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3282
|
+
"img",
|
|
3283
|
+
{
|
|
3284
|
+
src: initialSrc,
|
|
3285
|
+
alt: "avatar image",
|
|
3286
|
+
className: "h-full w-full rounded-full object-cover"
|
|
3287
|
+
}
|
|
3288
|
+
) }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
3308
3289
|
"div",
|
|
3309
3290
|
{
|
|
3310
3291
|
className: "relative grid h-10 w-10 shrink-0 place-items-center rounded-full border border-[#f1f1f1] font-semibold text-[#2c2c2c]",
|
|
3311
3292
|
style: { backgroundColor: avatarBg },
|
|
3312
|
-
children:
|
|
3313
|
-
authorInitial,
|
|
3314
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 right-0 h-[11.25px] w-[11.25px] rounded-full bg-[#328545] ring-1 ring-white" })
|
|
3315
|
-
]
|
|
3293
|
+
children: authorInitial
|
|
3316
3294
|
}
|
|
3317
3295
|
) }),
|
|
3318
3296
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx3__default.default("flex flex-col gap-1 w-full"), children: [
|
|
@@ -3715,6 +3693,22 @@ var ChatImagePreviewModal = ({
|
|
|
3715
3693
|
) }) });
|
|
3716
3694
|
};
|
|
3717
3695
|
var ChatImagePreviewModal_default = ChatImagePreviewModal;
|
|
3696
|
+
|
|
3697
|
+
// src/utils/theme.ts
|
|
3698
|
+
var GRADIENT_BORDER = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
|
|
3699
|
+
function getThemeAttr(theme) {
|
|
3700
|
+
if (!theme || theme === "marketplace") return "marketplace";
|
|
3701
|
+
if (theme === "admin") return "admin";
|
|
3702
|
+
return "custom";
|
|
3703
|
+
}
|
|
3704
|
+
function getThemeVars(theme) {
|
|
3705
|
+
if (!theme || theme === "marketplace" || theme === "admin") return {};
|
|
3706
|
+
const vars = {};
|
|
3707
|
+
if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
|
|
3708
|
+
if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
|
|
3709
|
+
if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
|
|
3710
|
+
return vars;
|
|
3711
|
+
}
|
|
3718
3712
|
var baseItem = "flex w-full items-center gap-3 px-3 py-2 text-sm hover:bg-black/5 cursor-pointer";
|
|
3719
3713
|
var ChatKebabMenu = ({
|
|
3720
3714
|
pinned,
|
|
@@ -3810,21 +3804,7 @@ var avatarBgByInitial = {
|
|
|
3810
3804
|
B: "#F0EDEB",
|
|
3811
3805
|
b: "#F0EDEB"
|
|
3812
3806
|
};
|
|
3813
|
-
var
|
|
3814
|
-
function getThemeAttr(theme) {
|
|
3815
|
-
if (!theme || theme === "marketplace") return "marketplace";
|
|
3816
|
-
if (theme === "admin") return "admin";
|
|
3817
|
-
return "custom";
|
|
3818
|
-
}
|
|
3819
|
-
function getThemeVars(theme) {
|
|
3820
|
-
if (!theme || theme === "marketplace" || theme === "admin") return {};
|
|
3821
|
-
const vars = {};
|
|
3822
|
-
if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
|
|
3823
|
-
if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
|
|
3824
|
-
if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
|
|
3825
|
-
return vars;
|
|
3826
|
-
}
|
|
3827
|
-
var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
3807
|
+
var InboxPopup = ({ adapter, uiCallbacks, theme, hiddenActionKeys }) => {
|
|
3828
3808
|
const { close, selectThread, selectedThreadId, reference } = useChatUI();
|
|
3829
3809
|
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
3830
3810
|
const [threads, setThreads] = React16.useState(() => adapter.threads.list(reference));
|
|
@@ -3878,6 +3858,9 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
3878
3858
|
if (activeId) adapter.threads.markRead?.(activeId);
|
|
3879
3859
|
}
|
|
3880
3860
|
}, [activeId, adapter]);
|
|
3861
|
+
React16.useEffect(() => {
|
|
3862
|
+
if (activeId) adapter.threads.markRead?.(activeId);
|
|
3863
|
+
}, []);
|
|
3881
3864
|
const toRef2 = (m) => ({
|
|
3882
3865
|
id: m.id,
|
|
3883
3866
|
author: typeof m.author === "string" ? m.author : "U",
|
|
@@ -4049,6 +4032,7 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4049
4032
|
replyTo,
|
|
4050
4033
|
clearReply: () => setReplyTo(void 0),
|
|
4051
4034
|
onAfterSend: () => setRev((v) => v + 1),
|
|
4035
|
+
hiddenActionKeys,
|
|
4052
4036
|
onSend: (payload) => {
|
|
4053
4037
|
if (activeId) adapter.messages.send(activeId, payload);
|
|
4054
4038
|
}
|
|
@@ -4100,13 +4084,10 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4100
4084
|
] });
|
|
4101
4085
|
};
|
|
4102
4086
|
var InboxPopup_default = InboxPopup;
|
|
4103
|
-
var GRADIENT_BORDER2 = "linear-gradient(236.83deg, rgba(51,201,212,0.3) 0.4%, rgba(39,83,251,0.3) 30.28%, rgba(39,83,251,0.3) 50.2%, rgba(39,83,251,0.3) 65.14%, rgba(235,67,255,0.3) 100%)";
|
|
4104
4087
|
function coalesceThreadId(reference, threads) {
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
}
|
|
4109
|
-
return referenceId && (threads.find((t) => t.id === referenceId)?.id || threads.find((t) => t.inquiryId === referenceId)?.id) || (threads.length ? threads[0].id : "");
|
|
4088
|
+
if (!reference?.id) return threads[0]?.id ?? "";
|
|
4089
|
+
const refId = reference.id;
|
|
4090
|
+
return threads.find((t) => t.id === refId)?.id ?? threads.find((t) => t.orderId === refId)?.id ?? threads.find((t) => t.inquiryId === refId)?.id ?? threads[0]?.id ?? "";
|
|
4110
4091
|
}
|
|
4111
4092
|
function toRef(m) {
|
|
4112
4093
|
return {
|
|
@@ -4119,25 +4100,19 @@ function toRef(m) {
|
|
|
4119
4100
|
audio: m.audio
|
|
4120
4101
|
};
|
|
4121
4102
|
}
|
|
4122
|
-
|
|
4123
|
-
if (!theme || theme === "marketplace") return "marketplace";
|
|
4124
|
-
if (theme === "admin") return "admin";
|
|
4125
|
-
return "custom";
|
|
4126
|
-
}
|
|
4127
|
-
function getThemeVars2(theme) {
|
|
4128
|
-
if (!theme || theme === "marketplace" || theme === "admin") return {};
|
|
4129
|
-
const vars = {};
|
|
4130
|
-
if (theme.primary) vars["--color-banbox-primary"] = theme.primary;
|
|
4131
|
-
if (theme.primaryActive) vars["--color-banbox-primary-active"] = theme.primaryActive;
|
|
4132
|
-
if (theme.surfaceLow) vars["--color-banbox-surface-container-low"] = theme.surfaceLow;
|
|
4133
|
-
return vars;
|
|
4134
|
-
}
|
|
4135
|
-
var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
4103
|
+
var SinglePopup = ({ adapter, uiCallbacks, theme, hiddenActionKeys }) => {
|
|
4136
4104
|
const { close, reference } = useChatUI();
|
|
4137
4105
|
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
4138
|
-
const threads = adapter.threads.list(reference);
|
|
4106
|
+
const [threads, setThreads] = React16__default.default.useState(() => adapter.threads.list(reference));
|
|
4107
|
+
React16__default.default.useEffect(() => {
|
|
4108
|
+
setThreads(adapter.threads.list(reference));
|
|
4109
|
+
const unsub = adapter.threads.subscribe(() => {
|
|
4110
|
+
setThreads(adapter.threads.list(reference));
|
|
4111
|
+
});
|
|
4112
|
+
return unsub;
|
|
4113
|
+
}, [adapter, reference]);
|
|
4139
4114
|
const initialThreadId = React16__default.default.useMemo(
|
|
4140
|
-
() => coalesceThreadId(reference, threads),
|
|
4115
|
+
() => coalesceThreadId(reference, adapter.threads.list(reference)),
|
|
4141
4116
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4142
4117
|
[reference]
|
|
4143
4118
|
);
|
|
@@ -4201,12 +4176,12 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4201
4176
|
{
|
|
4202
4177
|
role: "dialog",
|
|
4203
4178
|
"aria-modal": "true",
|
|
4204
|
-
"data-theme":
|
|
4179
|
+
"data-theme": getThemeAttr(theme),
|
|
4205
4180
|
className: "banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
|
|
4206
4181
|
style: {
|
|
4207
4182
|
boxShadow: "0px 2px 12px 0px #3B33331A",
|
|
4208
|
-
background:
|
|
4209
|
-
...
|
|
4183
|
+
background: GRADIENT_BORDER,
|
|
4184
|
+
...getThemeVars(theme)
|
|
4210
4185
|
},
|
|
4211
4186
|
initial: { x: "110%" },
|
|
4212
4187
|
animate: { x: 0 },
|
|
@@ -4305,6 +4280,7 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4305
4280
|
replyTo,
|
|
4306
4281
|
clearReply: () => setReplyTo(void 0),
|
|
4307
4282
|
onAfterSend: handleAfterSend,
|
|
4283
|
+
hiddenActionKeys,
|
|
4308
4284
|
onSend: (payload) => {
|
|
4309
4285
|
if (activeId) adapter.messages.send(activeId, payload);
|
|
4310
4286
|
}
|
|
@@ -4327,7 +4303,7 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4327
4303
|
] });
|
|
4328
4304
|
};
|
|
4329
4305
|
var SinglePopup_default = SinglePopup;
|
|
4330
|
-
function ChatRoot({ adapter, uiCallbacks, theme }) {
|
|
4306
|
+
function ChatRoot({ adapter, uiCallbacks, theme, hiddenActionKeys }) {
|
|
4331
4307
|
const { isOpen, variant } = useChatUI();
|
|
4332
4308
|
useDisableBodyScroll(isOpen);
|
|
4333
4309
|
if (typeof window === "undefined") {
|
|
@@ -4340,7 +4316,8 @@ function ChatRoot({ adapter, uiCallbacks, theme }) {
|
|
|
4340
4316
|
{
|
|
4341
4317
|
adapter,
|
|
4342
4318
|
uiCallbacks,
|
|
4343
|
-
theme
|
|
4319
|
+
theme,
|
|
4320
|
+
hiddenActionKeys
|
|
4344
4321
|
},
|
|
4345
4322
|
"inbox"
|
|
4346
4323
|
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -4348,7 +4325,8 @@ function ChatRoot({ adapter, uiCallbacks, theme }) {
|
|
|
4348
4325
|
{
|
|
4349
4326
|
adapter,
|
|
4350
4327
|
uiCallbacks,
|
|
4351
|
-
theme
|
|
4328
|
+
theme,
|
|
4329
|
+
hiddenActionKeys
|
|
4352
4330
|
},
|
|
4353
4331
|
"single"
|
|
4354
4332
|
)) }) }),
|