@banbox/chat 1.0.9 → 1.0.10
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 +44 -70
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +7 -1
- package/dist/index.d.ts +7 -1
- package/dist/index.js +44 -70
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/chat/InboxPopup.tsx +8 -16
- package/src/chat/SinglePopup.tsx +22 -26
- 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,20 +3804,6 @@ var avatarBgByInitial = {
|
|
|
3810
3804
|
B: "#F0EDEB",
|
|
3811
3805
|
b: "#F0EDEB"
|
|
3812
3806
|
};
|
|
3813
|
-
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%)";
|
|
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
3807
|
var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
3828
3808
|
const { close, selectThread, selectedThreadId, reference } = useChatUI();
|
|
3829
3809
|
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
@@ -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",
|
|
@@ -4100,13 +4083,10 @@ var InboxPopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4100
4083
|
] });
|
|
4101
4084
|
};
|
|
4102
4085
|
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
4086
|
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 : "");
|
|
4087
|
+
if (!reference?.id) return threads[0]?.id ?? "";
|
|
4088
|
+
const refId = reference.id;
|
|
4089
|
+
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
4090
|
}
|
|
4111
4091
|
function toRef(m) {
|
|
4112
4092
|
return {
|
|
@@ -4119,25 +4099,19 @@ function toRef(m) {
|
|
|
4119
4099
|
audio: m.audio
|
|
4120
4100
|
};
|
|
4121
4101
|
}
|
|
4122
|
-
function getThemeAttr2(theme) {
|
|
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
4102
|
var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
4136
4103
|
const { close, reference } = useChatUI();
|
|
4137
4104
|
const { isOpen: isGalleryOpen, closeGallery } = useGallery();
|
|
4138
|
-
const threads = adapter.threads.list(reference);
|
|
4105
|
+
const [threads, setThreads] = React16__default.default.useState(() => adapter.threads.list(reference));
|
|
4106
|
+
React16__default.default.useEffect(() => {
|
|
4107
|
+
setThreads(adapter.threads.list(reference));
|
|
4108
|
+
const unsub = adapter.threads.subscribe(() => {
|
|
4109
|
+
setThreads(adapter.threads.list(reference));
|
|
4110
|
+
});
|
|
4111
|
+
return unsub;
|
|
4112
|
+
}, [adapter, reference]);
|
|
4139
4113
|
const initialThreadId = React16__default.default.useMemo(
|
|
4140
|
-
() => coalesceThreadId(reference, threads),
|
|
4114
|
+
() => coalesceThreadId(reference, adapter.threads.list(reference)),
|
|
4141
4115
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
4142
4116
|
[reference]
|
|
4143
4117
|
);
|
|
@@ -4201,12 +4175,12 @@ var SinglePopup = ({ adapter, uiCallbacks, theme }) => {
|
|
|
4201
4175
|
{
|
|
4202
4176
|
role: "dialog",
|
|
4203
4177
|
"aria-modal": "true",
|
|
4204
|
-
"data-theme":
|
|
4178
|
+
"data-theme": getThemeAttr(theme),
|
|
4205
4179
|
className: "banbox-chat-root relative h-[650px] w-[450px] rounded-[20px] p-[2px]",
|
|
4206
4180
|
style: {
|
|
4207
4181
|
boxShadow: "0px 2px 12px 0px #3B33331A",
|
|
4208
|
-
background:
|
|
4209
|
-
...
|
|
4182
|
+
background: GRADIENT_BORDER,
|
|
4183
|
+
...getThemeVars(theme)
|
|
4210
4184
|
},
|
|
4211
4185
|
initial: { x: "110%" },
|
|
4212
4186
|
animate: { x: 0 },
|