@droppii-org/chat-sdk 0.1.24 → 0.1.25
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/components/biz-inbox/BizInboxHeader.d.ts +3 -0
- package/dist/components/biz-inbox/BizInboxHeader.d.ts.map +1 -0
- package/dist/components/biz-inbox/BizInboxHeader.js +8 -0
- package/dist/components/biz-inbox/BizThreadAvatar.d.ts +10 -0
- package/dist/components/biz-inbox/BizThreadAvatar.d.ts.map +1 -0
- package/dist/components/biz-inbox/BizThreadAvatar.js +8 -0
- package/dist/components/biz-inbox/BizThreadCard.d.ts +8 -0
- package/dist/components/biz-inbox/BizThreadCard.d.ts.map +1 -0
- package/dist/components/biz-inbox/BizThreadCard.js +25 -0
- package/dist/components/biz-inbox/BizThreadList.d.ts +11 -0
- package/dist/components/biz-inbox/BizThreadList.d.ts.map +1 -0
- package/dist/components/biz-inbox/BizThreadList.js +35 -0
- package/dist/components/biz-inbox/BizThreadTitle.d.ts +8 -0
- package/dist/components/biz-inbox/BizThreadTitle.d.ts.map +1 -0
- package/dist/components/biz-inbox/BizThreadTitle.js +6 -0
- package/dist/components/biz-inbox/index.d.ts +10 -0
- package/dist/components/biz-inbox/index.d.ts.map +1 -0
- package/dist/components/biz-inbox/index.js +5 -0
- package/dist/components/bizThreadDetail/BizMessageBubble.d.ts +10 -0
- package/dist/components/bizThreadDetail/BizMessageBubble.d.ts.map +1 -0
- package/dist/components/bizThreadDetail/BizMessageBubble.js +11 -0
- package/dist/components/bizThreadDetail/BizMessageList.d.ts +3 -0
- package/dist/components/bizThreadDetail/BizMessageList.d.ts.map +1 -0
- package/dist/components/bizThreadDetail/BizMessageList.js +28 -0
- package/dist/components/bizThreadDetail/BizThreadDetailHeader.d.ts.map +1 -1
- package/dist/components/bizThreadDetail/BizThreadDetailHeader.js +4 -4
- package/dist/components/bizThreadDetail/BizThreadDetailInput.d.ts +2 -3
- package/dist/components/bizThreadDetail/BizThreadDetailInput.d.ts.map +1 -1
- package/dist/components/bizThreadDetail/BizThreadDetailInput.js +137 -10
- package/dist/components/bizThreadDetail/index.d.ts +3 -0
- package/dist/components/bizThreadDetail/index.d.ts.map +1 -1
- package/dist/components/bizThreadDetail/index.js +2 -0
- package/dist/components/bizThreadDetail/item/BizMessageItem.d.ts +8 -0
- package/dist/components/bizThreadDetail/item/BizMessageItem.d.ts.map +1 -0
- package/dist/components/bizThreadDetail/item/BizMessageItem.js +20 -0
- package/dist/components/cannedResponse/CannedResponseBody.js +2 -2
- package/dist/components/cannedResponse/CannedResponseFooter.js +1 -1
- package/dist/components/cannedResponse/CannedResponseHeader.js +1 -1
- package/dist/components/cannedResponse/team/TeamItem.d.ts.map +1 -1
- package/dist/components/cannedResponse/team/TeamItem.js +1 -1
- package/dist/components/chatBubble/ChatBubble.js +1 -1
- package/dist/components/conversation/ConversationBySessionItem.d.ts.map +1 -1
- package/dist/components/conversation/DeskConversationList.js +3 -3
- package/dist/components/mediaCollection/FileCollection.js +1 -1
- package/dist/components/mediaCollection/LinkCollection.js +1 -1
- package/dist/components/mediaCollection/VideoCollection.js +1 -1
- package/dist/components/mediaCollection/index.js +1 -1
- package/dist/components/message/GroupMembersDrawer.d.ts.map +1 -1
- package/dist/components/message/GroupMembersDrawer.js +1 -1
- package/dist/components/message/MessageHeader.d.ts.map +1 -1
- package/dist/components/message/MessageHeader.js +3 -3
- package/dist/components/message/MessageInfiniteScroll.d.ts +15 -0
- package/dist/components/message/MessageInfiniteScroll.d.ts.map +1 -0
- package/dist/components/message/MessageInfiniteScroll.js +20 -0
- package/dist/components/message/MessageList.d.ts.map +1 -1
- package/dist/components/message/MessageList.js +8 -76
- package/dist/components/message/SelectSession.js +1 -1
- package/dist/components/message/UnassignedSessionFooter.js +2 -2
- package/dist/components/message/footer/ActionBar.js +1 -1
- package/dist/components/message/footer/FilePreview.js +1 -1
- package/dist/components/message/footer/MediaActions.js +1 -1
- package/dist/components/message/footer/QuotedMessage.js +1 -1
- package/dist/components/message/footer/index.d.ts.map +1 -1
- package/dist/components/message/footer/index.js +1 -1
- package/dist/components/message/item/FileMessage.js +1 -1
- package/dist/components/message/item/QuoteMessage.js +2 -2
- package/dist/components/message/item/TextMessage.js +1 -1
- package/dist/components/message/item/index.js +1 -1
- package/dist/components/richTextEditor/RichTextEditor.js +4 -4
- package/dist/components/searchConversation/SearchAll.js +1 -1
- package/dist/components/searchConversation/SearchDrawer.js +1 -1
- package/dist/components/searchConversation/item/SearchItemAsUser.d.ts.map +1 -1
- package/dist/components/session/DeskAssignedSession.js +1 -1
- package/dist/components/session/DeskTeamInbox.js +1 -1
- package/dist/components/session/SessionFilterMenu.d.ts.map +1 -1
- package/dist/components/session/sessionMenuItems.d.ts.map +1 -1
- package/dist/components/session/sessionMenuItems.js +1 -1
- package/dist/components/thread/AssignConfirmModal.d.ts.map +1 -1
- package/dist/components/thread/ManualAssignPopover.js +1 -1
- package/dist/components/thread/SessionSection.d.ts.map +1 -1
- package/dist/components/thread/SessionSection.js +1 -1
- package/dist/components/thread/UserSection.js +1 -1
- package/dist/context/ChatContext.d.ts.map +1 -1
- package/dist/hooks/biz/index.d.ts +1 -0
- package/dist/hooks/biz/index.d.ts.map +1 -1
- package/dist/hooks/biz/index.js +1 -0
- package/dist/hooks/biz/useBizConversationList.d.ts.map +1 -1
- package/dist/hooks/biz/useBizSendMessage.d.ts +4 -0
- package/dist/hooks/biz/useBizSendMessage.d.ts.map +1 -0
- package/dist/hooks/biz/useBizSendMessage.js +61 -0
- package/dist/hooks/biz/useCreateBizConversation.d.ts.map +1 -1
- package/dist/hooks/cannedResponse/useFetchCannedCategories.d.ts.map +1 -1
- package/dist/hooks/cannedResponse/useFetchCannedResponse.d.ts.map +1 -1
- package/dist/hooks/conversation/useConversation.js +1 -1
- package/dist/hooks/global/useGlobalEvent.js +2 -2
- package/dist/hooks/message/useMessageListScroll.d.ts +29 -0
- package/dist/hooks/message/useMessageListScroll.d.ts.map +1 -0
- package/dist/hooks/message/useMessageListScroll.js +88 -0
- package/dist/hooks/message/usePullSessionMessages.d.ts.map +1 -1
- package/dist/hooks/message/useSendMessage.d.ts.map +1 -1
- package/dist/hooks/message/useSendMessage.js +1 -1
- package/dist/hooks/search/useSearchMessage.d.ts.map +1 -1
- package/dist/hooks/session/useAssignSession.d.ts.map +1 -1
- package/dist/hooks/session/useCloseSession.d.ts.map +1 -1
- package/dist/hooks/session/useCreateNote.d.ts.map +1 -1
- package/dist/hooks/session/useGetLabelSession.d.ts.map +1 -1
- package/dist/hooks/session/useGetListSessionByConversation.d.ts.map +1 -1
- package/dist/hooks/session/useGetSession.d.ts.map +1 -1
- package/dist/hooks/session/useGetSessionSummary.d.ts.map +1 -1
- package/dist/hooks/session/useGetTeamSessionSummary.d.ts.map +1 -1
- package/dist/hooks/session/useGetTeamSessionSummary.js +14 -8
- package/dist/hooks/session/useGetTeamSupporters.d.ts.map +1 -1
- package/dist/hooks/session/useGetUserSideInfo.d.ts.map +1 -1
- package/dist/hooks/session/useJoinSession.d.ts.map +1 -1
- package/dist/hooks/session/useLeaveConversation.d.ts.map +1 -1
- package/dist/hooks/session/useReopenOrCreateSession.d.ts.map +1 -1
- package/dist/hooks/session/useSessionLatestPreview.d.ts.map +1 -1
- package/dist/hooks/session/useSessionLatestPreview.js +1 -1
- package/dist/hooks/session/useSortedSessions.d.ts.map +1 -1
- package/dist/hooks/session/useUpdateNote.d.ts.map +1 -1
- package/dist/hooks/session/useUpdateSession.d.ts.map +1 -1
- package/dist/hooks/session/useUpdateSessionInfo.d.ts.map +1 -1
- package/dist/hooks/team/useFetchMyTeam.d.ts.map +1 -1
- package/dist/hooks/user/useCurrentUserAccountType.d.ts.map +1 -1
- package/dist/hooks/user/useUpdateFcmToken.d.ts.map +1 -1
- package/dist/hooks/user/useUpdateFcmToken.js +1 -1
- package/dist/locales/i18n.js +3 -3
- package/dist/locales/i18n.ts +3 -3
- package/dist/locales/vi/biz-inbox.json +20 -0
- package/dist/screens/bizMessage/index.d.ts.map +1 -1
- package/dist/screens/bizMessage/index.js +4 -4
- package/dist/screens/bizThreadDetail/index.d.ts.map +1 -1
- package/dist/screens/bizThreadDetail/index.js +2 -2
- package/dist/store/bizConversation.d.ts.map +1 -1
- package/dist/store/bizMessageDraft.d.ts +8 -0
- package/dist/store/bizMessageDraft.d.ts.map +1 -0
- package/dist/store/bizMessageDraft.js +23 -0
- package/dist/store/type.d.ts +111 -0
- package/dist/store/type.d.ts.map +1 -0
- package/dist/store/type.js +1 -0
- package/dist/styles/global.css +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/chat.d.ts +1 -0
- package/dist/types/chat.d.ts.map +1 -1
- package/dist/types/dto.d.ts +1 -1
- package/dist/types/dto.d.ts.map +1 -1
- package/dist/utils/bizConversation.d.ts.map +1 -1
- package/dist/utils/bizMessage.d.ts +15 -0
- package/dist/utils/bizMessage.d.ts.map +1 -0
- package/dist/utils/bizMessage.js +23 -0
- package/dist/utils/events.d.ts +1 -0
- package/dist/utils/events.d.ts.map +1 -1
- package/dist/utils/messageTransform.d.ts.map +1 -1
- package/package.json +126 -126
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizInboxHeader.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizInboxHeader.tsx"],"names":[],"mappings":"AAIA,QAAA,MAAM,cAAc,+CAkBnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
const BizInboxHeader = () => {
|
|
5
|
+
const { t } = useTranslation("biz-inbox");
|
|
6
|
+
return (_jsx("div", { "data-testid": "biz-inbox-header", className: "flex w-full flex-col border-b border-gray-100 bg-white", children: _jsx("div", { className: "flex h-12 items-end px-3", children: _jsxs("div", { className: "flex h-full flex-col items-center justify-end px-3", children: [_jsx("span", { className: "pb-1.5 text-center text-[16px] font-bold leading-[160%] tracking-[0.16px] text-[#1B3FE4]", children: t("tabs.messages") }), _jsx("span", { className: "h-[3px] w-full rounded-t bg-[#1B3FE4]" })] }) }) }));
|
|
7
|
+
};
|
|
8
|
+
export default BizInboxHeader;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BizChatCategory } from "../../types/biz";
|
|
2
|
+
export interface BizThreadAvatarProps {
|
|
3
|
+
chatCategory: BizChatCategory;
|
|
4
|
+
displayName: string;
|
|
5
|
+
avatarUrl: string | null;
|
|
6
|
+
badgeLabel: string;
|
|
7
|
+
}
|
|
8
|
+
declare const BizThreadAvatar: ({ chatCategory, displayName, avatarUrl, badgeLabel, }: BizThreadAvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default BizThreadAvatar;
|
|
10
|
+
//# sourceMappingURL=BizThreadAvatar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizThreadAvatar.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadAvatar.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAG9C,MAAM,WAAW,oBAAoB;IACnC,YAAY,EAAE,eAAe,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,eAAe,GAAI,uDAKtB,oBAAoB,4CA8BtB,CAAC;AAEF,eAAe,eAAe,CAAC"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { Icon } from "../../components/icon";
|
|
5
|
+
import { BizChatCategory } from "../../types/biz";
|
|
6
|
+
import { resolveBizBadgeColor } from "../../utils/bizConversation";
|
|
7
|
+
const BizThreadAvatar = ({ chatCategory, displayName, avatarUrl, badgeLabel, }) => (_jsxs("div", { className: "relative h-12 w-12 shrink-0", children: [avatarUrl ? (_jsx("img", { src: avatarUrl, alt: displayName, className: "h-12 w-12 rounded-full object-cover" })) : (_jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-[#0C5CFF] text-white", children: chatCategory === BizChatCategory.GROUP ? (_jsx(Icon, { icon: "user-two-b", size: 20 })) : chatCategory === BizChatCategory.BIZ_BOT_PDP ? (_jsx(Icon, { icon: "droppii-o-1", size: 20 })) : (_jsx(Icon, { icon: "user-o", size: 20 })) })), badgeLabel && (_jsx("span", { className: clsx("absolute -bottom-px -right-px flex h-[17px] items-center justify-center gap-2 rounded-md border border-white px-1 text-[10px] font-semibold leading-3 text-white shadow-[inset_2px_6px_8px_0_rgba(0,0,0,0.40)]", resolveBizBadgeColor(chatCategory)), children: badgeLabel }))] }));
|
|
8
|
+
export default BizThreadAvatar;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { BizConversationItem } from "../../types/biz";
|
|
2
|
+
export interface BizThreadCardProps {
|
|
3
|
+
item: BizConversationItem;
|
|
4
|
+
onClick: (item: BizConversationItem) => void;
|
|
5
|
+
}
|
|
6
|
+
declare const BizThreadCard: ({ item, onClick }: BizThreadCardProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default BizThreadCard;
|
|
8
|
+
//# sourceMappingURL=BizThreadCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizThreadCard.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadCard.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAYvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,mBAAmB,CAAC;IAC1B,OAAO,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CAC9C;AAOD,QAAA,MAAM,aAAa,GAAI,mBAAmB,kBAAkB,4CA+C3D,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useTranslation } from "react-i18next";
|
|
4
|
+
import { formatTimestamp } from "../../utils/common";
|
|
5
|
+
import { resolveBizAvatarUrl, resolveBizBadgeLabel, resolveBizDisplayName, resolveBizLastMessagePreview, resolveBizLastMessageTime, } from "../../utils/bizConversation";
|
|
6
|
+
import BizThreadAvatar from "./BizThreadAvatar";
|
|
7
|
+
import BizThreadTitle from "./BizThreadTitle";
|
|
8
|
+
const formatLatestMessageTime = (sendTime) => {
|
|
9
|
+
if (!sendTime)
|
|
10
|
+
return "";
|
|
11
|
+
return formatTimestamp(sendTime, { hasTime: true });
|
|
12
|
+
};
|
|
13
|
+
const BizThreadCard = ({ item, onClick }) => {
|
|
14
|
+
const { t } = useTranslation("biz-inbox");
|
|
15
|
+
const displayName = resolveBizDisplayName(item, t("thread_card.fallback_name"));
|
|
16
|
+
const avatarUrl = resolveBizAvatarUrl(item);
|
|
17
|
+
const badgeLabel = resolveBizBadgeLabel(item.chatCategory, t);
|
|
18
|
+
const latestMessagePreview = resolveBizLastMessagePreview(item.lastMessage, t);
|
|
19
|
+
const latestMessageTime = formatLatestMessageTime(resolveBizLastMessageTime(item.lastMessage));
|
|
20
|
+
const handleClick = () => {
|
|
21
|
+
onClick(item);
|
|
22
|
+
};
|
|
23
|
+
return (_jsxs("button", { type: "button", onClick: handleClick, "data-testid": "biz-inbox-thread-card", className: "flex w-full shrink-0 items-center gap-2 border-b border-[#EFEFEF] bg-white p-3 text-left transition-colors hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1677ff]", children: [_jsx(BizThreadAvatar, { chatCategory: item.chatCategory, displayName: displayName, avatarUrl: avatarUrl, badgeLabel: badgeLabel }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col pt-0.5", children: [_jsx(BizThreadTitle, { chatCategory: item.chatCategory, displayName: displayName }), _jsx("p", { className: "min-h-[22.4px] truncate text-[14px] font-normal leading-[160%] tracking-[0.14px] text-[#5C6366] [font-feature-settings:'liga'_off,'clig'_off]", children: latestMessagePreview })] }), latestMessageTime && (_jsx("span", { className: "shrink-0 text-[12px] font-normal leading-[160%] text-[#747B7E] [font-feature-settings:'liga'_off,'clig'_off]", children: latestMessageTime }))] }));
|
|
24
|
+
};
|
|
25
|
+
export default BizThreadCard;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { BizConversationItem } from "../../types/biz";
|
|
2
|
+
export interface BizThreadListProps {
|
|
3
|
+
items: BizConversationItem[];
|
|
4
|
+
isFetchingNextPage: boolean;
|
|
5
|
+
hasNextPage: boolean;
|
|
6
|
+
onLoadMore: () => void;
|
|
7
|
+
onSelectThread?: (item: BizConversationItem) => void;
|
|
8
|
+
}
|
|
9
|
+
declare const BizThreadList: ({ items, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }: BizThreadListProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export default BizThreadList;
|
|
11
|
+
//# sourceMappingURL=BizThreadList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizThreadList.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadList.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAKvD,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,mBAAmB,KAAK,IAAI,CAAC;CACtD;AAYD,QAAA,MAAM,aAAa,GAAI,yEAMpB,kBAAkB,4CAoEpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
4
|
+
import { useTranslation } from "react-i18next";
|
|
5
|
+
import { Empty } from "antd";
|
|
6
|
+
import InfiniteScroll from "react-infinite-scroll-component";
|
|
7
|
+
import useBizConversationStore from "../../store/bizConversation";
|
|
8
|
+
import { Icon } from "../../components/icon";
|
|
9
|
+
import BizThreadCard from "./BizThreadCard";
|
|
10
|
+
const FooterSkeleton = () => (_jsxs("div", { className: "flex items-center gap-3 p-3", children: [_jsx("div", { className: "h-10 w-10 animate-pulse rounded-full bg-neutral-200" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-neutral-200" }), _jsx("div", { className: "h-2.5 w-1/3 animate-pulse rounded bg-neutral-200" })] })] }));
|
|
11
|
+
const BizThreadList = ({ items, isFetchingNextPage, hasNextPage, onLoadMore, onSelectThread, }) => {
|
|
12
|
+
const { t } = useTranslation("biz-inbox");
|
|
13
|
+
const router = useRouter();
|
|
14
|
+
const pathname = usePathname();
|
|
15
|
+
const searchParams = useSearchParams();
|
|
16
|
+
const selectConversation = useBizConversationStore((state) => state.selectConversation);
|
|
17
|
+
const handleSelectThread = (item) => {
|
|
18
|
+
selectConversation(item);
|
|
19
|
+
if (searchParams.get("threadId") === item.conversationId) {
|
|
20
|
+
onSelectThread === null || onSelectThread === void 0 ? void 0 : onSelectThread(item);
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
const newSearchParams = new URLSearchParams(searchParams);
|
|
24
|
+
newSearchParams.set("threadId", item.conversationId);
|
|
25
|
+
router.push(`${pathname}?${newSearchParams.toString()}`);
|
|
26
|
+
onSelectThread === null || onSelectThread === void 0 ? void 0 : onSelectThread(item);
|
|
27
|
+
};
|
|
28
|
+
const handleEndReached = () => {
|
|
29
|
+
if (hasNextPage && !isFetchingNextPage) {
|
|
30
|
+
onLoadMore();
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
return (_jsx("div", { id: "scrollableBizThreadsDiv", "data-testid": "biz-inbox-thread-list", className: "min-h-0 w-full flex-1 overflow-auto", children: _jsx(InfiniteScroll, { dataLength: items.length, next: handleEndReached, hasMore: hasNextPage, loader: isFetchingNextPage ? _jsx(FooterSkeleton, {}) : null, scrollableTarget: "scrollableBizThreadsDiv", children: items.length === 0 ? (_jsx("div", { className: "flex items-center justify-center py-12", children: _jsx(Empty, { image: _jsx(Icon, { icon: "chat-square-b", size: 80, className: "text-gray-300" }), description: t("empty.no_conversations") }) })) : (items.map((item) => (_jsx(BizThreadCard, { item: item, onClick: handleSelectThread }, item.conversationId)))) }) }));
|
|
34
|
+
};
|
|
35
|
+
export default BizThreadList;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { BizChatCategory } from "../../types/biz";
|
|
2
|
+
export interface BizThreadTitleProps {
|
|
3
|
+
chatCategory: BizChatCategory;
|
|
4
|
+
displayName: string;
|
|
5
|
+
}
|
|
6
|
+
declare const BizThreadTitle: ({ chatCategory, displayName }: BizThreadTitleProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default BizThreadTitle;
|
|
8
|
+
//# sourceMappingURL=BizThreadTitle.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizThreadTitle.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/BizThreadTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,WAAW,mBAAmB;IAClC,YAAY,EAAE,eAAe,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,QAAA,MAAM,cAAc,GAAI,+BAA+B,mBAAmB,4CAczE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Icon } from "../../components/icon";
|
|
4
|
+
import { BizChatCategory } from "../../types/biz";
|
|
5
|
+
const BizThreadTitle = ({ chatCategory, displayName }) => (_jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [chatCategory === BizChatCategory.GROUP && (_jsx(Icon, { icon: "user-two-b", size: 12, className: "shrink-0 text-black" })), chatCategory === BizChatCategory.BIZ_BOT_PDP && (_jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center gap-0.5 rounded-full border border-white bg-[linear-gradient(93deg,#607CFB_0%,#1B3FE4_100%)] px-1 py-0.5 text-white", children: _jsx(Icon, { icon: "shield-done-b", size: 8 }) })), _jsx("span", { className: "truncate text-[16px] font-[510] leading-[160%] text-black", children: displayName })] }));
|
|
6
|
+
export default BizThreadTitle;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { default as BizInboxHeader } from "./BizInboxHeader";
|
|
2
|
+
export { default as BizThreadAvatar } from "./BizThreadAvatar";
|
|
3
|
+
export type { BizThreadAvatarProps } from "./BizThreadAvatar";
|
|
4
|
+
export { default as BizThreadTitle } from "./BizThreadTitle";
|
|
5
|
+
export type { BizThreadTitleProps } from "./BizThreadTitle";
|
|
6
|
+
export { default as BizThreadCard } from "./BizThreadCard";
|
|
7
|
+
export type { BizThreadCardProps } from "./BizThreadCard";
|
|
8
|
+
export { default as BizThreadList } from "./BizThreadList";
|
|
9
|
+
export type { BizThreadListProps } from "./BizThreadList";
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/biz-inbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,YAAY,EAAE,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
export { default as BizInboxHeader } from "./BizInboxHeader";
|
|
2
|
+
export { default as BizThreadAvatar } from "./BizThreadAvatar";
|
|
3
|
+
export { default as BizThreadTitle } from "./BizThreadTitle";
|
|
4
|
+
export { default as BizThreadCard } from "./BizThreadCard";
|
|
5
|
+
export { default as BizThreadList } from "./BizThreadList";
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface BizMessageBubbleProps {
|
|
2
|
+
isMine: boolean;
|
|
3
|
+
content: string;
|
|
4
|
+
senderName?: string;
|
|
5
|
+
showSenderName?: boolean;
|
|
6
|
+
showTip?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const BizMessageBubble: ({ isMine, content, senderName, showSenderName, showTip, }: BizMessageBubbleProps) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export default BizMessageBubble;
|
|
10
|
+
//# sourceMappingURL=BizMessageBubble.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizMessageBubble.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizMessageBubble.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AA6BD,QAAA,MAAM,gBAAgB,GAAI,2DAMvB,qBAAqB,4CA2BvB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
const INCOMING_TAIL_PATH = "M1.3798 18H4V0C3.51762 4.5 3.34269 10.5 0.966518 14C-0.568384 16.2608 -0.159364 18 1.3798 18Z";
|
|
5
|
+
const OUTGOING_TAIL_PATH = "M2.6202 18H0V0C0.482375 4.5 0.657308 10.5 3.03348 14C4.56838 16.2608 4.15936 18 2.6202 18Z";
|
|
6
|
+
const BizMessageBubbleTail = ({ isMine }) => (_jsx("div", { className: "flex shrink-0 items-center justify-center", children: _jsx("div", { className: "flex-none", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "4", height: "18", viewBox: "0 0 4 18", fill: "none", "aria-hidden": true, children: _jsx("path", { d: isMine ? OUTGOING_TAIL_PATH : INCOMING_TAIL_PATH, fill: isMine ? "#0051FF" : "#83899D", fillOpacity: "0.1" }) }) }) }));
|
|
7
|
+
const BizMessageBubble = ({ isMine, content, senderName, showSenderName, showTip = true, }) => {
|
|
8
|
+
const bubbleClass = clsx("relative max-w-full rounded-[20px] p-2", isMine ? "bg-[rgba(0,81,255,0.1)]" : "bg-[rgba(131,137,157,0.1)]");
|
|
9
|
+
return (_jsxs("div", { className: "relative flex items-end", "data-testid": "biz-message-bubble", children: [!isMine && showTip && _jsx(BizMessageBubbleTail, { isMine: isMine }), _jsx("div", { className: bubbleClass, children: _jsxs("div", { className: "flex flex-col gap-1 px-1", children: [showSenderName && senderName && (_jsx("span", { className: "text-[12px] font-medium leading-[160%] tracking-[0.12px] text-[#747B7E]", children: senderName })), _jsx("p", { className: "whitespace-pre-wrap break-words text-[16px] leading-[160%] tracking-[0.16px] text-[#393E40]", children: content })] }) }), isMine && showTip && _jsx(BizMessageBubbleTail, { isMine: isMine })] }));
|
|
10
|
+
};
|
|
11
|
+
export default BizMessageBubble;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizMessageList.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizMessageList.tsx"],"names":[],"mappings":"AAaA,QAAA,MAAM,cAAc,+CA8DnB,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect } from "react";
|
|
4
|
+
import { Empty, Spin } from "antd";
|
|
5
|
+
import { useTranslation } from "react-i18next";
|
|
6
|
+
import { useChatContext } from "../../context/ChatContext";
|
|
7
|
+
import MessageInfiniteScroll from "../../components/message/MessageInfiniteScroll";
|
|
8
|
+
import { useMessage } from "../../hooks/message/useMessage";
|
|
9
|
+
import { useMessageListScroll } from "../../hooks/message/useMessageListScroll";
|
|
10
|
+
import useBizConversationStore from "../../store/bizConversation";
|
|
11
|
+
import emitter from "../../utils/events";
|
|
12
|
+
import BizMessageItem from "./item/BizMessageItem";
|
|
13
|
+
const BizMessageList = () => {
|
|
14
|
+
const { t } = useTranslation("biz-inbox");
|
|
15
|
+
const { user } = useChatContext();
|
|
16
|
+
const conversationId = useBizConversationStore((state) => { var _a; return (_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.conversationId; });
|
|
17
|
+
const messageController = useMessage(conversationId, undefined, !!conversationId);
|
|
18
|
+
const { scrollRef, loadMoreOldMessage, handleInfiniteScroll, scrollToBottomIfAtBottom, } = useMessageListScroll(Object.assign({ conversationId, userId: user === null || user === void 0 ? void 0 : user.userID }, messageController));
|
|
19
|
+
const { loadState, moreNewLoading } = messageController;
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
emitter.on("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
|
|
22
|
+
return () => {
|
|
23
|
+
emitter.off("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM", scrollToBottomIfAtBottom);
|
|
24
|
+
};
|
|
25
|
+
}, [scrollToBottomIfAtBottom]);
|
|
26
|
+
return (_jsxs("div", { "data-testid": "biz-message-list", className: "relative flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-white", children: [_jsx(MessageInfiniteScroll, { scrollRef: scrollRef, scrollableTargetId: "scrollableBizMessagesDiv", loadState: loadState, onLoadMoreOld: loadMoreOldMessage, onScroll: handleInfiniteScroll, containerClassName: "h-full", empty: _jsx("div", { className: "flex flex-1 items-center justify-center py-12", children: _jsx(Empty, { description: t("empty.no_messages") }) }), children: loadState.messageList.map((message, _, array) => (_jsx(BizMessageItem, { message: message, allMessages: array }, message.clientMsgID))) }), moreNewLoading && (_jsx("div", { className: "flex items-center justify-center py-2", children: _jsx(Spin, {}) }))] }));
|
|
27
|
+
};
|
|
28
|
+
export default BizMessageList;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BizThreadDetailHeader.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizThreadDetailHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"BizThreadDetailHeader.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizThreadDetailHeader.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAQvD,MAAM,WAAW,0BAA0B;IACzC,YAAY,EAAE,mBAAmB,CAAC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAqBD,QAAA,MAAM,qBAAqB,GAAI,2BAG5B,0BAA0B,4CA8C5B,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useTranslation } from "react-i18next";
|
|
4
|
-
import { Icon } from "
|
|
5
|
-
import BizThreadAvatar from "
|
|
6
|
-
import BizThreadTitle from "
|
|
4
|
+
import { Icon } from "../../components/icon";
|
|
5
|
+
import BizThreadAvatar from "../../components/biz-inbox/BizThreadAvatar";
|
|
6
|
+
import BizThreadTitle from "../../components/biz-inbox/BizThreadTitle";
|
|
7
7
|
import { isBizGroupChat, resolveBizAvatarUrl, resolveBizBadgeLabel, resolveBizDisplayName, } from "../../utils/bizConversation";
|
|
8
8
|
const HeaderIconButton = ({ icon, onClick, testId, }) => (_jsx("button", { type: "button", onClick: onClick, "data-testid": testId, className: "flex shrink-0 cursor-pointer items-center justify-center p-2 text-[#1B3FE4]", children: _jsx(Icon, { icon: icon, size: 24 }) }));
|
|
9
9
|
const BizThreadDetailHeader = ({ conversation, onBack, }) => {
|
|
10
|
-
const { t } = useTranslation("
|
|
10
|
+
const { t } = useTranslation("biz-inbox");
|
|
11
11
|
const isGroup = isBizGroupChat(conversation);
|
|
12
12
|
const displayName = resolveBizDisplayName(conversation, t("thread_card.fallback_name"));
|
|
13
13
|
const avatarUrl = resolveBizAvatarUrl(conversation);
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
export interface BizThreadDetailInputProps {
|
|
2
2
|
placeholder?: string;
|
|
3
|
-
|
|
3
|
+
onSendMessage?: (text: string) => void;
|
|
4
4
|
onInputChange?: (value: string) => void;
|
|
5
|
-
value?: string;
|
|
6
5
|
}
|
|
7
|
-
declare const BizThreadDetailInput: ({ placeholder,
|
|
6
|
+
declare const BizThreadDetailInput: ({ placeholder, onSendMessage, onInputChange, }: BizThreadDetailInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
export default BizThreadDetailInput;
|
|
9
8
|
//# sourceMappingURL=BizThreadDetailInput.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BizThreadDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizThreadDetailInput.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"BizThreadDetailInput.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/BizThreadDetailInput.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,yBAAyB;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,QAAA,MAAM,oBAAoB,GAAI,gDAI3B,yBAAyB,4CAwM3B,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -1,20 +1,147 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useState } from "react";
|
|
3
|
+
import { useCallback, useEffect, useRef, useState } from "react";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
5
5
|
import clsx from "clsx";
|
|
6
|
-
import { Icon } from "
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
import { Icon } from "../../components/icon";
|
|
7
|
+
import { useBizSendMessage } from "../../hooks/biz/useBizSendMessage";
|
|
8
|
+
import useBizConversationStore from "../../store/bizConversation";
|
|
9
|
+
import useBizMessageDraftStore from "../../store/bizMessageDraft";
|
|
10
|
+
import { emit } from "../../utils/events";
|
|
11
|
+
const MAX_LINES = 5;
|
|
12
|
+
const CONTAINER_MIN_HEIGHT = 48;
|
|
13
|
+
const BizThreadDetailInput = ({ placeholder, onSendMessage, onInputChange, }) => {
|
|
14
|
+
const { t } = useTranslation("biz-inbox");
|
|
15
|
+
const { sendTextMessage } = useBizSendMessage();
|
|
16
|
+
const conversationId = useBizConversationStore((state) => { var _a; return (_a = state.conversationData) === null || _a === void 0 ? void 0 : _a.conversationId; });
|
|
17
|
+
const setDraft = useBizMessageDraftStore((state) => state.setDraft);
|
|
18
|
+
const clearDraft = useBizMessageDraftStore((state) => state.clearDraft);
|
|
19
|
+
const containerRef = useRef(null);
|
|
20
|
+
const textareaRef = useRef(null);
|
|
21
|
+
const [value, setValue] = useState("");
|
|
22
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
23
|
+
const [isSending, setIsSending] = useState(false);
|
|
24
|
+
const canSend = value.trim().length > 0 && !isSending;
|
|
25
|
+
const getTextareaHeights = useCallback(() => {
|
|
26
|
+
const textarea = textareaRef.current;
|
|
27
|
+
if (!textarea)
|
|
28
|
+
return null;
|
|
29
|
+
const lineHeight = parseFloat(window.getComputedStyle(textarea).lineHeight);
|
|
30
|
+
return {
|
|
31
|
+
lineHeight,
|
|
32
|
+
maxHeight: lineHeight * MAX_LINES,
|
|
33
|
+
};
|
|
34
|
+
}, []);
|
|
35
|
+
const adjustTextareaHeight = useCallback(() => {
|
|
36
|
+
const textarea = textareaRef.current;
|
|
37
|
+
const heights = getTextareaHeights();
|
|
38
|
+
if (!textarea || !heights)
|
|
39
|
+
return;
|
|
40
|
+
textarea.style.height = `${heights.lineHeight}px`;
|
|
41
|
+
const scrollHeight = textarea.scrollHeight;
|
|
42
|
+
const nextHeight = Math.min(Math.max(scrollHeight, heights.lineHeight), heights.maxHeight);
|
|
43
|
+
textarea.style.height = `${nextHeight}px`;
|
|
44
|
+
textarea.style.overflowY =
|
|
45
|
+
scrollHeight > heights.maxHeight ? "auto" : "hidden";
|
|
46
|
+
}, [getTextareaHeights]);
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
var _a;
|
|
49
|
+
if (!conversationId) {
|
|
50
|
+
setValue("");
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
const draft = (_a = useBizMessageDraftStore.getState().drafts[conversationId]) !== null && _a !== void 0 ? _a : "";
|
|
54
|
+
setValue(draft);
|
|
55
|
+
requestAnimationFrame(adjustTextareaHeight);
|
|
56
|
+
}, [conversationId, adjustTextareaHeight]);
|
|
57
|
+
useEffect(() => {
|
|
58
|
+
adjustTextareaHeight();
|
|
59
|
+
}, [value, adjustTextareaHeight]);
|
|
60
|
+
useEffect(() => {
|
|
61
|
+
if (!isFocused)
|
|
62
|
+
return;
|
|
63
|
+
const handlePointerDown = (event) => {
|
|
64
|
+
var _a, _b;
|
|
65
|
+
if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
|
|
66
|
+
return;
|
|
67
|
+
(_b = textareaRef.current) === null || _b === void 0 ? void 0 : _b.blur();
|
|
68
|
+
};
|
|
69
|
+
document.addEventListener("pointerdown", handlePointerDown);
|
|
70
|
+
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
|
71
|
+
}, [isFocused]);
|
|
72
|
+
useEffect(() => {
|
|
73
|
+
const viewport = window.visualViewport;
|
|
74
|
+
if (!viewport)
|
|
75
|
+
return;
|
|
76
|
+
const handleViewportChange = () => {
|
|
77
|
+
if (document.activeElement === textareaRef.current) {
|
|
78
|
+
emit("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
viewport.addEventListener("resize", handleViewportChange);
|
|
82
|
+
return () => viewport.removeEventListener("resize", handleViewportChange);
|
|
83
|
+
}, []);
|
|
12
84
|
const handleChange = (nextValue) => {
|
|
13
|
-
|
|
14
|
-
|
|
85
|
+
setValue(nextValue);
|
|
86
|
+
if (conversationId) {
|
|
87
|
+
setDraft(conversationId, nextValue);
|
|
15
88
|
}
|
|
16
89
|
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(nextValue);
|
|
17
90
|
};
|
|
18
|
-
|
|
91
|
+
const handleSend = async () => {
|
|
92
|
+
const text = value.trim();
|
|
93
|
+
if (!text || isSending)
|
|
94
|
+
return;
|
|
95
|
+
setIsSending(true);
|
|
96
|
+
try {
|
|
97
|
+
if (onSendMessage) {
|
|
98
|
+
onSendMessage(text);
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
const sent = await sendTextMessage(text);
|
|
102
|
+
if (!sent)
|
|
103
|
+
return;
|
|
104
|
+
}
|
|
105
|
+
setValue("");
|
|
106
|
+
if (conversationId) {
|
|
107
|
+
clearDraft(conversationId);
|
|
108
|
+
}
|
|
109
|
+
requestAnimationFrame(adjustTextareaHeight);
|
|
110
|
+
}
|
|
111
|
+
finally {
|
|
112
|
+
setIsSending(false);
|
|
113
|
+
}
|
|
114
|
+
};
|
|
115
|
+
const handleFocus = () => {
|
|
116
|
+
setIsFocused(true);
|
|
117
|
+
emit("BIZ_CHAT_SCROLL_TO_BOTTOM_IF_AT_BOTTOM");
|
|
118
|
+
};
|
|
119
|
+
const handleBlur = () => {
|
|
120
|
+
setIsFocused(false);
|
|
121
|
+
};
|
|
122
|
+
const insertNewline = (textarea) => {
|
|
123
|
+
const { selectionStart, selectionEnd } = textarea;
|
|
124
|
+
const nextValue = value.slice(0, selectionStart) + "\n" + value.slice(selectionEnd);
|
|
125
|
+
handleChange(nextValue);
|
|
126
|
+
requestAnimationFrame(() => {
|
|
127
|
+
textarea.selectionStart = selectionStart + 1;
|
|
128
|
+
textarea.selectionEnd = selectionStart + 1;
|
|
129
|
+
adjustTextareaHeight();
|
|
130
|
+
});
|
|
131
|
+
};
|
|
132
|
+
const handleKeyDown = (event) => {
|
|
133
|
+
if (event.key !== "Enter")
|
|
134
|
+
return;
|
|
135
|
+
if (event.shiftKey) {
|
|
136
|
+
event.preventDefault();
|
|
137
|
+
insertNewline(event.currentTarget);
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
void handleSend();
|
|
142
|
+
};
|
|
143
|
+
return (_jsx("div", { ref: containerRef, "data-testid": "biz-thread-detail-input", className: "flex w-full shrink-0 flex-col bg-[rgba(131,137,157,0.05)]", children: _jsxs("div", { className: "flex items-end gap-3 px-3 py-2", children: [_jsx("div", { className: clsx("flex min-w-0 flex-1 overflow-hidden rounded-xl border bg-white transition-shadow", isFocused
|
|
144
|
+
? "border-[#607CFB] shadow-[0px_0px_2px_rgba(27,63,228,0.5)]"
|
|
145
|
+
: "border-[#DDDEDF]"), style: { minHeight: CONTAINER_MIN_HEIGHT }, children: _jsx("div", { className: "flex min-w-0 flex-[1_0_0] items-center gap-2 self-stretch px-3 py-1", children: _jsx("textarea", { ref: textareaRef, value: value, rows: 1, onChange: (event) => handleChange(event.target.value), onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : t("thread_detail.input_placeholder"), "data-testid": "biz-thread-detail-message-input", className: "biz-message-input-scrollbar min-h-0 min-w-0 flex-1 resize-none bg-transparent text-[16px] leading-[1.6] tracking-[0.16px] text-black outline-none placeholder:text-[#747B7E]" }) }) }), _jsx("div", { className: "flex shrink-0 items-center pb-1", children: _jsx("button", { type: "button", onClick: () => void handleSend(), disabled: !canSend, "data-testid": "biz-thread-detail-send", className: clsx("flex h-10 w-10 items-center justify-center rounded-full", canSend ? "bg-[#002BEB]" : "bg-[#002BEB] opacity-25"), children: _jsx(Icon, { icon: "send-b", size: 20, className: "text-white" }) }) })] }) }));
|
|
19
146
|
};
|
|
20
147
|
export default BizThreadDetailInput;
|
|
@@ -2,4 +2,7 @@ export { default as BizThreadDetailHeader } from "./BizThreadDetailHeader";
|
|
|
2
2
|
export type { BizThreadDetailHeaderProps } from "./BizThreadDetailHeader";
|
|
3
3
|
export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
|
|
4
4
|
export type { BizThreadDetailInputProps } from "./BizThreadDetailInput";
|
|
5
|
+
export { default as BizMessageList } from "./BizMessageList";
|
|
6
|
+
export { default as BizMessageItem } from "./item/BizMessageItem";
|
|
7
|
+
export type { BizMessageItemProps } from "./item/BizMessageItem";
|
|
5
8
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/bizThreadDetail/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EAAE,0BAA0B,EAAE,MAAM,yBAAyB,CAAC;AAE1E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,2 +1,4 @@
|
|
|
1
1
|
export { default as BizThreadDetailHeader } from "./BizThreadDetailHeader";
|
|
2
2
|
export { default as BizThreadDetailInput } from "./BizThreadDetailInput";
|
|
3
|
+
export { default as BizMessageList } from "./BizMessageList";
|
|
4
|
+
export { default as BizMessageItem } from "./item/BizMessageItem";
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { MessageItem } from "@openim/wasm-client-sdk";
|
|
2
|
+
export interface BizMessageItemProps {
|
|
3
|
+
message: MessageItem;
|
|
4
|
+
allMessages: MessageItem[];
|
|
5
|
+
}
|
|
6
|
+
declare const BizMessageItem: ({ message, allMessages }: BizMessageItemProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
7
|
+
export default BizMessageItem;
|
|
8
|
+
//# sourceMappingURL=BizMessageItem.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BizMessageItem.d.ts","sourceRoot":"","sources":["../../../../src/components/bizThreadDetail/item/BizMessageItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAQtD,MAAM,WAAW,mBAAmB;IAClC,OAAO,EAAE,WAAW,CAAC;IACrB,WAAW,EAAE,WAAW,EAAE,CAAC;CAC5B;AA4BD,QAAA,MAAM,cAAc,GAAI,0BAA0B,mBAAmB,mDA6CpE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Icon } from "../../../components/icon";
|
|
4
|
+
import useAuthStore from "../../../store/auth";
|
|
5
|
+
import { formatTimestamp } from "../../../utils/common";
|
|
6
|
+
import { getBizMessageDisplay } from "../../../utils/bizMessage";
|
|
7
|
+
import BizMessageBubble from "../BizMessageBubble";
|
|
8
|
+
const BizMessageAvatar = ({ avatarUrl }) => (_jsx("div", { className: "flex shrink-0 items-center pb-4", children: avatarUrl ? (_jsx("img", { src: avatarUrl, alt: "", className: "h-6 w-6 rounded-full object-cover" })) : (_jsx("div", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-[#0C5CFF]", children: _jsx(Icon, { icon: "droppii-o-1", size: 14, className: "text-white" }) })) }));
|
|
9
|
+
const BizMessageTime = ({ sendTime }) => (_jsx("div", { className: "flex w-full items-center px-4 py-1", children: _jsx("div", { className: "flex min-w-0 flex-1 flex-col items-start", children: _jsx("p", { className: "w-full break-words text-center text-[12px] font-normal leading-[160%] tracking-normal text-[#747B7E]", children: formatTimestamp(sendTime, { hasTime: true }) }) }) }));
|
|
10
|
+
const BizMessageItem = ({ message, allMessages }) => {
|
|
11
|
+
const userID = useAuthStore((state) => state.userID);
|
|
12
|
+
if (!userID)
|
|
13
|
+
return null;
|
|
14
|
+
const display = getBizMessageDisplay(message, allMessages, userID);
|
|
15
|
+
if (!display.isMine) {
|
|
16
|
+
return (_jsxs("div", { className: "flex w-full flex-col pb-1", "data-testid": "biz-message-item", children: [display.showTimeBreak && _jsx(BizMessageTime, { sendTime: display.sendTime }), _jsxs("div", { className: "flex w-full items-end pl-3 pr-12", children: [display.showAvatar ? (_jsx(BizMessageAvatar, { avatarUrl: display.senderFaceUrl })) : (_jsx("div", { className: "w-6 shrink-0" })), _jsx("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: _jsx(BizMessageBubble, { isMine: display.isMine, content: display.content, senderName: display.senderName, showSenderName: display.showSenderName, showTip: display.showTip }) })] })] }));
|
|
17
|
+
}
|
|
18
|
+
return (_jsxs("div", { className: "flex w-full flex-col pb-1", "data-testid": "biz-message-item", children: [display.showTimeBreak && _jsx(BizMessageTime, { sendTime: display.sendTime }), _jsx("div", { className: "flex w-full justify-end pl-12 pr-3", children: _jsx("div", { className: "flex min-w-0 max-w-[calc(100%-48px)] flex-col items-end gap-1", children: _jsx(BizMessageBubble, { isMine: display.isMine, content: display.content, showTip: display.showTip }) }) })] }));
|
|
19
|
+
};
|
|
20
|
+
export default BizMessageItem;
|
|
@@ -7,13 +7,13 @@ import { CannedResponseVisibleScope } from "../../types/chat";
|
|
|
7
7
|
import TeamItem from "./team/TeamItem";
|
|
8
8
|
import { useFetchCannedResponse } from "../../hooks/cannedResponse/useFetchCannedResponse";
|
|
9
9
|
import InfiniteScroll from "react-infinite-scroll-component";
|
|
10
|
-
import { Icon } from "
|
|
10
|
+
import { Icon } from "../../components/icon";
|
|
11
11
|
import { sanitizeHtml } from "../../utils/common";
|
|
12
12
|
import { useDebounce } from "ahooks";
|
|
13
13
|
import clsx from "clsx";
|
|
14
14
|
import emitter from "../../utils/events";
|
|
15
15
|
import { isArray } from "lodash";
|
|
16
|
-
import { useMessageFooterContext } from "
|
|
16
|
+
import { useMessageFooterContext } from "../../components/message/footer";
|
|
17
17
|
const parseIndex = (index, length) => {
|
|
18
18
|
if (index === null)
|
|
19
19
|
return null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
|
-
import { Icon } from "
|
|
3
|
+
import { Icon } from "../../components/icon";
|
|
4
4
|
const CannedResponseFooter = ({ openCreateCannedModal, }) => {
|
|
5
5
|
const { t } = useTranslation();
|
|
6
6
|
return (_jsx("div", { className: "flex items-center justify-end border-t border-gray-200 p-2", children: _jsxs("div", { className: "flex cursor-pointer items-center gap-1", onClick: openCreateCannedModal, children: [_jsx(Icon, { icon: "plus-circle-o", size: 16, className: "text-blue-500" }), _jsx("span", { className: "text-sm text-blue-500", children: t("add_canned_response") })] }) }));
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import CannedResponseIcon from "../../assets/svg/cannedResponse";
|
|
4
4
|
import { Button, Input } from "antd";
|
|
5
|
-
import { Icon } from "
|
|
5
|
+
import { Icon } from "../../components/icon";
|
|
6
6
|
const CannedResponseHeader = (props) => {
|
|
7
7
|
const { onClose, search, setSearch } = props;
|
|
8
8
|
const { t } = useTranslation();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/cannedResponse/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TeamItem.d.ts","sourceRoot":"","sources":["../../../../src/components/cannedResponse/team/TeamItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAQ9C,UAAU,aAAa;IACrB,IAAI,EAAE,eAAe,CAAC;IACtB,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,QAAA,MAAM,QAAQ,GAAI,8EAMf,aAAa,4CAiFf,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useFetchCannedCategories } from "../../../hooks/cannedResponse/useFetchCannedCategories";
|
|
3
3
|
import { useBoolean } from "ahooks";
|
|
4
|
-
import { Icon } from "
|
|
4
|
+
import { Icon } from "../../../components/icon";
|
|
5
5
|
import clsx from "clsx";
|
|
6
6
|
import { useTranslation } from "react-i18next";
|
|
7
7
|
import { useCallback } from "react";
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { FloatButton, Drawer, Popover } from "antd";
|
|
4
4
|
import { MessageOutlined, CloseOutlined } from "@ant-design/icons";
|
|
5
|
-
import MessageList from "
|
|
5
|
+
import MessageList from "../../components/message/MessageList";
|
|
6
6
|
import useConversationStore from "../../store/conversation";
|
|
7
7
|
import { useIsMobile } from "../../hooks/common/useIsMobile";
|
|
8
8
|
import { useBoolean } from "ahooks";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"ConversationBySessionItem.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/ConversationBySessionItem.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yCAAyC,CAAC;AAE7E,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAQhD,UAAU,8BAA8B;IACtC,WAAW,EAAE,gBAAgB,CAAC;IAC9B,aAAa,CAAC,EAAE,aAAa,CAAC;CAC/B;AAED,QAAA,MAAM,yBAAyB,GAAI,iCAGhC,8BAA8B,mDAyFhC,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
|