@droppii-org/chat-sdk 0.1.6 → 0.1.8

package/dist/components/message/SelectSession.js

@@ -3,23 +3,21 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Select } from "antd";
 import { Icon } from "../icon";
 import clsx from "clsx";
-import { useTranslation } from "react-i18next";
 const SelectSession = ({ options, value, onChange, excludeOptions, placeholder, }) => {
-    const { t } = useTranslation();
     const selectedOption = options.find((option) => option.value === value);
-    // Filter out excluded options
-    const filteredOptions = options.filter((option) => !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
-    // Transform options for Ant Design Select
+    const renderOptionLabel = (option) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", option.tintColorClassname), children: option.label })] }));
+    const filteredOptions = options.filter((option) => option.value === value || !(excludeOptions === null || excludeOptions === void 0 ? void 0 : excludeOptions.includes(option.value)));
     const selectOptions = filteredOptions.map((option) => ({
-        label: (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: clsx("w-2 h-2 rounded-full", option.tintColorClassnameBg) }), _jsx("span", { className: clsx("text-xs truncate flex-1", option.tintColorClassname), children: option.label })] })),
+        label: renderOptionLabel(option),
         value: option.value,
     }));
-    // Handle selection change
     const handleSelect = (val) => {
         onChange(val);
     };
-    return (_jsx("div", { className: "relative", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: (option) => ["NONE", ""].includes(option.value)
+    return (_jsx("div", { className: "relative", children: _jsx(Select, { className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.bgTintColorClassname} custom-select min-w-[100px]`, placement: "bottomLeft", placeholder: placeholder, options: selectOptions, value: selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value, onSelect: handleSelect, suffixIcon: _jsx(Icon, { icon: "angle-down-o", className: `${selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.tintColorClassname} mt-[2px]`, size: 14 }), menuItemSelectedIcon: null, labelRender: () => ["NONE", ""].includes(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value)
                 ? placeholder
-                : option.label }) }));
+                : selectedOption
+                    ? renderOptionLabel(selectedOption)
+                    : undefined }) }));
 };
 export default SelectSession;

package/dist/components/message/footer/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,SAAS,+CA0Gd,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ActionBar.tsx"],"names":[],"mappings":"AAsBA,QAAA,MAAM,SAAS,+CA2Gd,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/message/footer/ActionBar.js

@@ -13,7 +13,7 @@ import MediaActions from "./MediaActions";
 import useConversationStore from "../../../store/conversation";
 const ActionBar = () => {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
+    const { onSendMessage, isInternal, listUploadFiles, setListUploadFiles } = useMessageFooterContext();
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     const [isEmptyInput, setIsEmptyInput] = useState(true);
     const canSend = useMemo(() => {
@@ -34,6 +34,7 @@ const ActionBar = () => {
                 plainText,
                 richText,
                 type: listUploadFiles.length > 0 ? "file" : "text",
+                isInternal,
             });
         }
         editor.update(() => {
@@ -71,7 +72,7 @@ const ActionBar = () => {
                 }
             }
         });
-    }, [editor, onSendMessage, canSend]);
+    }, [editor, onSendMessage, canSend, isInternal, listUploadFiles.length]);
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {

package/dist/components/message/footer/CannedResponsePlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAiCrE"}
+{"version":3,"file":"CannedResponsePlugin.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/CannedResponsePlugin.tsx"],"names":[],"mappings":"AAWA,KAAK,KAAK,GAAG;IACX,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,wBAAgB,2BAA2B,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,QAsFrE"}

package/dist/components/message/footer/CannedResponsePlugin.js

@@ -1,8 +1,10 @@
 import { useEffect } from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { $getSelection, $isRangeSelection } from "lexical";
+import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, } from "lexical";
+import { useMessageFooterContext } from ".";
 export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
     const [editor] = useLexicalComposerContext();
+    const { activeCannedIndex, setActiveCannedIndex, isOpenCanned, maxActiveCannedIndex, } = useMessageFooterContext();
     useEffect(() => {
         return editor.registerUpdateListener(({ editorState }) => {
             editorState.read(() => {
@@ -27,5 +29,39 @@ export function CannedResponseTriggerPlugin({ onOpen, onClose }) {
             });
         });
     }, [editor, onOpen, onClose]);
+    useEffect(() => {
+        const unregisterUp = editor.registerCommand(KEY_ARROW_UP_COMMAND, (e) => {
+            if (!isOpenCanned)
+                return false;
+            e.preventDefault();
+            setActiveCannedIndex(activeCannedIndex === null
+                ? null
+                : activeCannedIndex - 1 < 0
+                    ? 0
+                    : activeCannedIndex - 1);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        const unregisterDown = editor.registerCommand(KEY_ARROW_DOWN_COMMAND, (e) => {
+            if (!isOpenCanned)
+                return false;
+            e.preventDefault();
+            setActiveCannedIndex(activeCannedIndex === null
+                ? 0
+                : activeCannedIndex + 1 > maxActiveCannedIndex
+                    ? maxActiveCannedIndex
+                    : activeCannedIndex + 1);
+            return true;
+        }, COMMAND_PRIORITY_LOW);
+        return () => {
+            unregisterUp();
+            unregisterDown();
+        };
+    }, [
+        editor,
+        isOpenCanned,
+        activeCannedIndex,
+        setActiveCannedIndex,
+        maxActiveCannedIndex,
+    ]);
     return null;
 }

package/dist/components/message/footer/ComposerEditor.d.ts

@@ -0,0 +1,7 @@
+interface ComposerEditorProps {
+    isInternal: boolean;
+    placeholderText: string;
+}
+declare const ComposerEditor: ({ isInternal, placeholderText, }: ComposerEditorProps) => import("react/jsx-runtime").JSX.Element;
+export default ComposerEditor;
+//# sourceMappingURL=ComposerEditor.d.ts.map

package/dist/components/message/footer/ComposerEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerEditor.tsx"],"names":[],"mappings":"AAOA,UAAU,mBAAmB;IAC3B,UAAU,EAAE,OAAO,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,GAAI,kCAGrB,mBAAmB,4CAwBrB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/message/footer/ComposerEditor.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import clsx from "clsx";
+const ComposerEditor = ({ isInternal, placeholderText, }) => {
+    const editorClasses = clsx("min-h-[64px] max-h-[140px] overflow-y-auto rounded-md border px-3 py-2 text-sm", isInternal
+        ? "border-orange-300 bg-orange-50"
+        : "border-indigo-500 bg-blue-100");
+    return (_jsx("div", { className: "px-4", children: _jsx("div", { className: "relative", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: editorClasses }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": placeholderText, placeholder: _jsx("div", { className: "absolute left-3 top-2 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: placeholderText }) }) }) }) }));
+};
+export default ComposerEditor;

package/dist/components/message/footer/ComposerTabs.d.ts

@@ -0,0 +1,9 @@
+interface ComposerTabsProps {
+    canUseInternal: boolean;
+    hintText: string;
+    isInternal: boolean;
+    setIsInternal: (isInternal: boolean) => void;
+}
+declare const ComposerTabs: ({ canUseInternal, hintText, isInternal, setIsInternal, }: ComposerTabsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ComposerTabs;
+//# sourceMappingURL=ComposerTabs.d.ts.map

package/dist/components/message/footer/ComposerTabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComposerTabs.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/ComposerTabs.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC9C;AAeD,QAAA,MAAM,YAAY,GAAI,0DAKnB,iBAAiB,mDA2CnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/message/footer/ComposerTabs.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+import { Tabs } from "antd";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+const COMPOSER_TABS = [
+    {
+        isInternal: false,
+        activeClassName: "text-indigo-600",
+        labelKey: "reply",
+    },
+    {
+        isInternal: true,
+        activeClassName: "text-orange-600",
+        labelKey: "internal",
+    },
+];
+const ComposerTabs = ({ canUseInternal, hintText, isInternal, setIsInternal, }) => {
+    const { t } = useTranslation();
+    const items = useMemo(() => COMPOSER_TABS.map((tab) => ({
+        key: String(tab.isInternal),
+        label: (_jsx("span", { className: clsx("text-sm font-semibold", isInternal === tab.isInternal
+                ? tab.activeClassName
+                : "text-gray-500"), children: t(tab.labelKey) })),
+        children: null,
+    })), [isInternal, t]);
+    if (!canUseInternal) {
+        return null;
+    }
+    return (_jsx(Tabs, { activeKey: String(isInternal), items: items, onChange: (value) => setIsInternal(value === "true"), tabBarExtraContent: {
+            left: _jsx("p", { className: "pr-4 text-sm text-gray-500", children: hintText }),
+        }, className: clsx("[&_.ant-tabs-content-holder]:hidden [&_.ant-tabs-ink-bar]:hidden [&_.ant-tabs-nav]:mb-0 [&_.ant-tabs-nav]:px-4 [&_.ant-tabs-nav]:pt-0 [&_.ant-tabs-nav]:before:border-b-0 [&_.ant-tabs-nav-wrap]:justify-end [&_.ant-tabs-extra-content]:flex [&_.ant-tabs-extra-content]:items-center [&_.ant-tabs-extra-content]:overflow-hidden [&_.ant-tabs-extra-content]:text-ellipsis [&_.ant-tabs-tab]:mb-0 [&_.ant-tabs-tab]:rounded-t-[16px] [&_.ant-tabs-tab]:border [&_.ant-tabs-tab]:border-b-0 [&_.ant-tabs-tab]:border-transparent [&_.ant-tabs-tab]:px-3 [&_.ant-tabs-tab]:py-1.5 [&_.ant-tabs-tab]:leading-5 [&_.ant-tabs-tab-btn]:leading-5", isInternal
+            ? "[&_.ant-tabs-tab-active]:border-orange-200 [&_.ant-tabs-tab-active]:bg-orange-50"
+            : "[&_.ant-tabs-tab-active]:border-indigo-200 [&_.ant-tabs-tab-active]:bg-indigo-50") }));
+};
+export default ComposerTabs;

package/dist/components/message/footer/EnterHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAmGnC"}
+{"version":3,"file":"EnterHandler.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/EnterHandler.tsx"],"names":[],"mappings":"AAuBA,MAAM,CAAC,OAAO,UAAU,YAAY,SAiHnC"}

package/dist/components/message/footer/EnterHandler.js

@@ -7,9 +7,10 @@ import { $isListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND
 import { $isQuoteNode } from "@lexical/rich-text";
 import { useMessageFooterContext } from ".";
 import useConversationStore from "../../../store/conversation";
+import { emit } from "../../../utils/events";
 export default function EnterHandler() {
     const [editor] = useLexicalComposerContext();
-    const { onSendMessage, listUploadFiles } = useMessageFooterContext();
+    const { onSendMessage, isInternal, listUploadFiles, isOpenCanned, activeCannedIndex, } = useMessageFooterContext();
     const shiftEnterCount = useRef(0);
     const quotedMessage = useConversationStore((state) => state.quotedMessage);
     useEffect(() => {
@@ -18,6 +19,10 @@ export default function EnterHandler() {
             if (!event.shiftKey) {
                 event.preventDefault();
                 shiftEnterCount.current = 0;
+                if (isOpenCanned) {
+                    emit("CANNED_RESPONSE_SELECT", activeCannedIndex);
+                    return true;
+                }
                 let plainText = "";
                 let richText = "";
                 // lấy plain text & html
@@ -34,6 +39,7 @@ export default function EnterHandler() {
                         plainText,
                         richText,
                         type: hasFiles ? "file" : "text",
+                        isInternal,
                     });
                 }
                 editor.update(() => {
@@ -85,6 +91,9 @@ export default function EnterHandler() {
         listUploadFiles,
         quotedMessage,
         quotedMessage === null || quotedMessage === void 0 ? void 0 : quotedMessage.clientMsgID,
+        isInternal,
+        isOpenCanned,
+        activeCannedIndex,
     ]);
     return null;
 }

package/dist/components/message/footer/index.d.ts

@@ -1,7 +1,7 @@
 import { MessageFooterContextType } from "../../../types/chat";
-import { ISessionByStatus } from "../../../store/type";
+import { ISessionResponse } from "../../../types/dto";
 interface MessageFooterProps {
-    currentSession?: ISessionByStatus;
+    currentSession?: ISessionResponse;
     openCreateCannedModal?: () => void;
 }
 export declare const MessageFooterContext: import("react").Context<MessageFooterContextType>;

package/dist/components/message/footer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAK/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAQvD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAM/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAiHpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/footer/index.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,wBAAwB,EACzB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAWtD,UAAU,kBAAkB;IAC1B,cAAc,CAAC,EAAE,gBAAgB,CAAC;IAClC,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;CACpC;AASD,eAAO,MAAM,oBAAoB,mDAY/B,CAAC;AAEH,eAAO,MAAM,uBAAuB,gCAAyC,CAAC;AAE9E,QAAA,MAAM,qBAAqB,GAAI,4CAG5B,kBAAkB,4CAkJpB,CAAC;AAEF,eAAe,qBAAqB,CAAC"}

package/dist/components/message/footer/index.js

@@ -1,16 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { ContentEditable } from "@lexical/react/LexicalContentEditable";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { ToolbarPlugin } from "./ToolbarPlugin";
 import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin";
 import { editorTheme, editorNodes, editorOnError } from "./editorConfig";
-import { createContext, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 import EnterHandler from "./EnterHandler";
 import ActionBar from "./ActionBar";
+import { AccountType, } from "../../../types/chat";
 import { useSendMessage } from "../../../hooks/message/useSendMessage";
 import { Popover } from "antd";
 import FilePreview from "./FilePreview";
@@ -21,6 +19,9 @@ import CannedResponse from "../../cannedResponse";
 import { CannedResponseTriggerPlugin } from "./CannedResponsePlugin";
 import { useBoolean } from "ahooks";
 import useAuthStore from "../../../store/auth";
+import { useCurrentUserAccountType } from "../../../hooks/user/useCurrentUserAccountType";
+import ComposerTabs from "./ComposerTabs";
+import ComposerEditor from "./ComposerEditor";
 const initialConfig = {
     namespace: "ChatInput",
     theme: editorTheme,
@@ -29,22 +30,43 @@ const initialConfig = {
 };
 export const MessageFooterContext = createContext({
     onSendMessage: () => { },
+    isInternal: false,
+    setIsInternal: () => { },
     listUploadFiles: [],
     setListUploadFiles: () => { },
     isOpenCanned: false,
     setIsOpenCanned: () => { },
+    activeCannedIndex: 0,
+    setActiveCannedIndex: () => { },
+    maxActiveCannedIndex: 0,
+    setMaxActiveCannedIndex: () => { },
 });
 export const useMessageFooterContext = () => useContext(MessageFooterContext);
 const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
     const { t } = useTranslation();
     const { sendTextMessage, sendMergeMessage } = useSendMessage();
+    const accountType = useCurrentUserAccountType();
     const [listUploadFiles, setListUploadFiles] = useState([]);
-    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned, toggle: toggleCanned },] = useBoolean(false);
+    const [isOpenCanned, { setTrue: openCanned, setFalse: closeCanned },] = useBoolean(false);
     const isCrm = useAuthStore((state) => state.isCrm);
     const [cannedQuery, setCannedQuery] = useState("");
-    const onSendMessage = useCallback(async ({ plainText, richText, type, }) => {
+    const [activeCannedIndex, setActiveCannedIndex] = useState(0);
+    const [maxActiveCannedIndex, setMaxActiveCannedIndex] = useState(0);
+    const [isInternal, setIsInternal] = useState(false);
+    const canUseInternal = isCrm && accountType === AccountType.Staff;
+    useEffect(() => {
+        if (!canUseInternal && isInternal) {
+            setIsInternal(false);
+        }
+    }, [canUseInternal, isInternal]);
+    const placeholderText = useMemo(() => {
+        return isInternal
+            ? t("enter_internal_message")
+            : t("enter_message");
+    }, [isInternal, t]);
+    const onSendMessage = useCallback(async ({ plainText, richText, type, isInternal, }) => {
         if (type === "text") {
-            sendTextMessage({ plainText, richText, currentSession });
+            sendTextMessage({ plainText, richText, currentSession, isInternal });
         }
         else {
             sendMergeMessage({
@@ -52,6 +74,7 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
                 richText,
                 files: listUploadFiles,
                 currentSession,
+                isInternal,
             });
         }
         setListUploadFiles([]);
@@ -64,14 +87,27 @@ const MessageFooterProvider = ({ currentSession, openCreateCannedModal, }) => {
         setCannedQuery(query);
         openCanned();
     }, [openCanned]);
+    const setIsOpenCanned = useCallback((open) => {
+        if (open) {
+            openCanned();
+            return;
+        }
+        closeCanned();
+    }, [closeCanned, openCanned]);
     return (_jsx(MessageFooterContext.Provider, { value: {
             onSendMessage,
+            isInternal,
+            setIsInternal,
             listUploadFiles,
             setListUploadFiles,
             isOpenCanned,
-            setIsOpenCanned: toggleCanned,
+            setIsOpenCanned,
+            activeCannedIndex,
+            setActiveCannedIndex,
+            maxActiveCannedIndex,
+            setMaxActiveCannedIndex,
         }, children: _jsxs(LexicalComposer, { initialConfig: initialConfig, children: [_jsx(Popover, { open: isOpenCanned, content: _jsx(CannedResponse, { onClose: closeCanned, openCreateCannedModal: onOpenCreateCannedModal, cannedQuery: cannedQuery }), placement: "topLeft", trigger: "click", arrow: false, classNames: {
                         body: "mx-1 !p-0",
-                    }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsx("div", { className: "relative px-4", children: _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "border border-indigo-500 rounded-md bg-blue-100 min-h-[64px] max-h-[140px] overflow-y-auto px-3 py-2 text-sm" }), ErrorBoundary: LexicalErrorBoundary, "aria-placeholder": t("enter_message"), placeholder: _jsx("div", { className: "absolute top-2 left-7 pointer-events-none", children: _jsx("p", { className: "text-gray-500 text-sm", children: t("enter_message") }) }) }) }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }) }));
+                    }, destroyOnHidden: true, children: _jsxs("div", { className: "border-t pb-2 flex flex-col gap-1 bg-white", children: [_jsx(QuotedMessageFooter, {}), listUploadFiles.length > 0 && _jsx(FilePreview, {}), _jsx(ToolbarPlugin, {}), _jsxs("div", { children: [_jsx(ComposerTabs, { canUseInternal: canUseInternal, hintText: t("canned_response_hint"), isInternal: isInternal, setIsInternal: setIsInternal }), _jsx(ComposerEditor, { isInternal: isInternal, placeholderText: placeholderText })] }), _jsx(ActionBar, {})] }) }), _jsx(LinkPlugin, {}), _jsx(ListPlugin, {}), _jsx(EnterHandler, {}), _jsx(PasteAndDropPlugin, {}), isCrm && (_jsx(CannedResponseTriggerPlugin, { onClose: closeCanned, onOpen: onOpenCanned }))] }) }));
 };
 export default MessageFooterProvider;

package/dist/components/message/item/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA2BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDA0PlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/message/item/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,WAAW,IAAI,eAAe,EAG/B,MAAM,yBAAyB,CAAC;AA2BjC,UAAU,gBAAgB;IACxB,OAAO,EAAE,eAAe,CAAC;IACzB,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,uBAAuB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAClD,eAAe,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,eAAe,KAAK,IAAI,CAAC;IACpD,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;CACrD;AAED,QAAA,MAAM,WAAW,GAAI,2HAQlB,gBAAgB,mDAsQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/message/item/index.js

@@ -102,6 +102,7 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
             console.log("Failed to parse conversationData.ex");
         }
     }, [conversationData === null || conversationData === void 0 ? void 0 : conversationData.ex, isCrm, isMine]);
+    const isInternalMessage = Boolean(message === null || message === void 0 ? void 0 : message.isInternal);
     const hasContextMenu = contextMenuItems.length > 0;
     const isLatestMine = ((_a = allMessages.find((m) => m.sendID === userID)) === null || _a === void 0 ? void 0 : _a.clientMsgID) ===
         message.clientMsgID;
@@ -114,6 +115,9 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
     const showTimeBreak = prevTimeBreak;
     const showSenderAvatar = !nextSameUser;
     const showSenderName = !prevSameUser && !isMine;
+    if (!isCrm && isInternalMessage) {
+        return null;
+    }
     if (!isCrm &&
         (MessageType.CustomMessage === (message === null || message === void 0 ? void 0 : message.contentType) ||
             !visibleTypeMessage.includes(message === null || message === void 0 ? void 0 : message.contentType))) {
@@ -121,7 +125,13 @@ const MessageItem = ({ message, allMessages, contextMenuOpen, onContextMenuOpenC
     }
     return (_jsxs("div", { className: "flex flex-col gap-2 py-1 px-3 sm:px-4 min-w-0", id: `${MSG_ITEM_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [showTimeBreak && (_jsx("div", { className: "flex justify-center", children: _jsx("span", { className: "text-xs text-gray-600 text-center bg-neutral-100 px-2 py-1 rounded-full", children: formatTimestamp(message.sendTime, {
                         dateMonthFormat: "DD MMMM",
-                    }) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col max-w-[75%] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1 w-full", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", isMine ? "bg-blue-100" : "bg-white"), style: {
+                    }) }) })), _jsx("div", { className: clsx("flex min-w-0", isMine ? "justify-end" : "justify-start"), children: _jsxs("div", { className: clsx("flex flex-1 items-end gap-2 min-w-0", isMine ? "justify-end" : "justify-start"), children: [showSenderInfo && (_jsx("div", { className: "flex items-center justify-center w-[32px] h-[32px]", children: showSenderAvatar && (_jsx(Avatar, { src: message === null || message === void 0 ? void 0 : message.senderFaceUrl, children: ((_c = (_b = message === null || message === void 0 ? void 0 : message.senderNickname) === null || _b === void 0 ? void 0 : _b.charAt) === null || _c === void 0 ? void 0 : _c.call(_b, 0)) || "A" })) })), _jsxs("div", { className: clsx("flex flex-col max-w-[75%] min-w-0", isMine ? "items-end" : "items-start"), children: [showSenderName && showSenderInfo && (_jsx("span", { className: "text-xs font-bold mb-1 px-3 mt-2", children: message === null || message === void 0 ? void 0 : message.senderNickname })), _jsxs("div", { className: clsx("flex flex-col flex-1 w-full", isMine ? "items-end" : "items-start"), children: [(message === null || message === void 0 ? void 0 : message.quoteElem) && (_jsx(QuoteMessageItem, { message: message, isMine: isMine, onPressQuoteMessage: onPressQuoteMessage })), _jsxs("div", { className: "flex items-end gap-1.5", children: [isMine && (_jsx(MessageStatusIndicator, { message: message, isLatest: isLatestMine })), _jsx(Dropdown, { menu: { items: contextMenuItems }, trigger: hasContextMenu ? ["contextMenu"] : [], open: contextMenuOpen, onOpenChange: onContextMenuOpenChange, children: _jsxs("div", { className: clsx("px-3 py-2 rounded-2xl max-w-full min-w-0 break-normal flex flex-col flex-1 text-gray-900 gap-1 w-fit", isMine
+                                                            ? isInternalMessage
+                                                                ? "bg-orange-100"
+                                                                : "bg-blue-100"
+                                                            : isInternalMessage
+                                                                ? "bg-orange-100"
+                                                                : "bg-white"), style: {
                                                             wordBreak: "break-word",
                                                             overflowWrap: "anywhere",
                                                         }, id: `${MSG_ITEM_CONTENT_PREFIX}${message === null || message === void 0 ? void 0 : message.clientMsgID}`, children: [(message === null || message === void 0 ? void 0 : message.contentType) === MessageType.MergeMessage ? (_jsxs("div", { children: [(_e = (_d = message === null || message === void 0 ? void 0 : message.mergeElem) === null || _d === void 0 ? void 0 : _d.multiMessage) === null || _e === void 0 ? void 0 : _e.map((item) => {

package/dist/components/session/DeskAssignedSession.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAgBA,QAAA,MAAM,mBAAmB,+CA+NxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DeskAssignedSession.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskAssignedSession.tsx"],"names":[],"mappings":"AAeA,QAAA,MAAM,mBAAmB,+CA2ExB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/session/DeskAssignedSession.js

@@ -1,128 +1,33 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useBoolean } from "ahooks";
-import { Button, Layout, Menu } from "antd";
-import { useEffect, useMemo } from "react";
+import { Button, Layout } from "antd";
+import { useCallback, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { Icon } from "../icon";
 import { useGetSessionSummary } from "../../hooks/session/useGetSessionSummary";
 import useSessionStore from "../../store/session";
-import clsx from "clsx";
-import { SessionStatus, SessionTag } from "../../types/chat";
 import emitter from "../../utils/events";
+import DeskTeamInbox from "./DeskTeamInbox";
+import SessionFilterMenu from "./SessionFilterMenu";
 const { Sider } = Layout;
 const DeskAssignedSession = () => {
     const { t } = useTranslation();
     const [collapsed, { toggle }] = useBoolean(false);
     const setFilterSummary = useSessionStore((state) => state.setFilterSummary);
+    const filterSummary = useSessionStore((state) => state.filterSummary);
     const { data: sessionSummary, refetch } = useGetSessionSummary();
-    const menuItems = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
-        return [
-            {
-                label: t("active_sessions"),
-                key: "ACTIVE_SESSIONS",
-                icon: _jsx(Icon, { icon: "chat-dot-o", size: 20 }),
-                children: [
-                    {
-                        label: t("unassigned"),
-                        key: SessionStatus.UNASSIGNED,
-                        icon: (_jsx(Icon, { icon: "user-del-o", size: 18, className: "!text-amber-500" })),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: SessionStatus.UNASSIGNED,
-                                tag: undefined,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500 ", children: ((_b = (_a = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _a === void 0 ? void 0 : _a.find((s) => s.type === SessionStatus.UNASSIGNED)) === null || _b === void 0 ? void 0 : _b.count) || "" })),
-                    },
-                    {
-                        label: t("slow_processing"),
-                        key: SessionTag.SLOW_PROCESSING,
-                        icon: (_jsx(Icon, { icon: "warning-square-o", size: 18, className: "!text-red-500" })),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: undefined,
-                                tag: SessionTag.SLOW_PROCESSING,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_d = (_c = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _c === void 0 ? void 0 : _c.find((s) => s.type === SessionTag.SLOW_PROCESSING)) === null || _d === void 0 ? void 0 : _d.count) || "" })),
-                    },
-                    {
-                        label: t("waiting_process"),
-                        key: SessionStatus.WAITING_PROCESS,
-                        icon: (_jsx(Icon, { icon: "time-circle-o", size: 18, className: "!text-orange-400" })),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: SessionStatus.WAITING_PROCESS,
-                                tag: undefined,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_f = (_e = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _e === void 0 ? void 0 : _e.find((s) => s.type === SessionStatus.WAITING_PROCESS)) === null || _f === void 0 ? void 0 : _f.count) || "" })),
-                    },
-                    {
-                        label: t("awaiting_reply"),
-                        key: SessionTag.AWAITING_REPLY,
-                        icon: (_jsx(Icon, { icon: "arrow-reply-o", size: 18, className: "!text-purple-500" })),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: undefined,
-                                tag: SessionTag.AWAITING_REPLY,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_h = (_g = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _g === void 0 ? void 0 : _g.find((s) => s.type === SessionTag.AWAITING_REPLY)) === null || _h === void 0 ? void 0 : _h.count) || "" })),
-                    },
-                    {
-                        label: t("in_process"),
-                        key: SessionStatus.IN_PROCESS,
-                        icon: _jsx(Icon, { icon: "play-circle-o", size: 18 }),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: SessionStatus.IN_PROCESS,
-                                tag: undefined,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_k = (_j = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _j === void 0 ? void 0 : _j.find((s) => s.type === SessionStatus.IN_PROCESS)) === null || _k === void 0 ? void 0 : _k.count) || "" })),
-                    },
-                    {
-                        label: t("temporarily_paused"),
-                        key: SessionTag.TEMPORARILY_PAUSED,
-                        icon: _jsx(Icon, { icon: "pause-o", size: 18 }),
-                        onClick: () => {
-                            setFilterSummary({
-                                status: undefined,
-                                tag: SessionTag.TEMPORARILY_PAUSED,
-                            });
-                        },
-                        itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_m = (_l = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.tagCounts) === null || _l === void 0 ? void 0 : _l.find((s) => s.type === SessionTag.TEMPORARILY_PAUSED)) === null || _m === void 0 ? void 0 : _m.count) || "" })),
-                    },
-                ],
-                itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: ((_p = (_o = sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.sessionStatuses) === null || _o === void 0 ? void 0 : _o.find((s) => s.type === SessionStatus.IN_PROCESS)) === null || _p === void 0 ? void 0 : _p.count) || "" })),
-            },
-            {
-                label: t("closed_sessions"),
-                key: "CLOSED_SESSIONS",
-                icon: _jsx(Icon, { icon: "check-square-o", size: 20 }),
-                onClick: () => {
-                    setFilterSummary({
-                        status: SessionStatus.COMPLETED,
-                        tag: undefined,
-                    });
-                },
-                itemIcon: !collapsed && (_jsx("span", { className: "text-xs text-gray-500", children: (sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.completedSessionCount) || "" })),
-            },
-        ];
-    }, [sessionSummary, t, collapsed]);
+    const onFilterSelect = useCallback((filter) => setFilterSummary(filter), [setFilterSummary]);
     useEffect(() => {
-        emitter.on("UPDATE_SESSION", () => {
-            refetch();
-        });
+        const handler = () => refetch();
+        emitter.on("UPDATE_SESSION", handler);
         return () => {
-            emitter.off("UPDATE_SESSION", () => {
-                refetch();
-            });
+            emitter.off("UPDATE_SESSION", handler);
         };
-    }, []);
-    return (_jsxs(Sider, { collapsible: true, collapsed: collapsed, onCollapse: toggle, width: 220, className: "bg-white h-full border-r border-gray-200", trigger: null, children: [_jsxs("div", { className: clsx("flex items-center p-4 border-b", collapsed ? "justify-center" : "justify-between"), children: [!collapsed && (_jsx("span", { className: "text-md font-semibold flex-1 truncate", children: "Droppii Livechat" })), _jsx(Button, { type: "text", shape: "default", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: collapsed ? "angle-right-o" : "angle-left-o", size: 22 }) })] }), _jsx(Menu, { defaultSelectedKeys: [SessionStatus.IN_PROCESS], defaultOpenKeys: ["ACTIVE_SESSIONS"], mode: "inline", items: menuItems, inlineIndent: 12, expandIcon: _jsx("span", { className: "text-xs text-gray-500", children: sessionSummary === null || sessionSummary === void 0 ? void 0 : sessionSummary.activeSessionCount }) })] }));
+    }, [refetch]);
+    if (collapsed) {
+        return (_jsx("div", { className: "flex flex-col items-center pt-4 border-r border-gray-200 bg-white", children: _jsx(Button, { type: "text", shape: "circle", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-right-o", size: 22 }) }) }));
+    }
+    return (_jsx(Sider, { collapsible: true, collapsed: false, width: 220, className: "bg-white h-full border-r border-gray-200", trigger: null, children: _jsxs("div", { className: "flex flex-col h-full", children: [_jsxs("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [_jsx("span", { className: "text-md font-semibold flex-1 truncate", children: "Droppii Livechat" }), _jsx(Button, { type: "text", className: "text-gray-500 w-8 h-8 p-0", onClick: toggle, children: _jsx(Icon, { icon: "angle-left-o", size: 22 }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto min-h-0", children: [_jsx("div", { className: "px-4 pt-4 pb-2 text-xs font-semibold text-gray-400 tracking-wider", children: t("my_messages") }), sessionSummary && (_jsx(SessionFilterMenu, { summary: sessionSummary, isActive: !filterSummary.teamId, filterSummary: filterSummary, onFilterSelect: onFilterSelect, activeCount: sessionSummary.activeSessionCount })), _jsx(DeskTeamInbox, {})] })] }) }));
 };
 export default DeskAssignedSession;

package/dist/components/session/DeskTeamInbox.d.ts

@@ -0,0 +1,3 @@
+declare const DeskTeamInbox: () => import("react/jsx-runtime").JSX.Element | null;
+export default DeskTeamInbox;
+//# sourceMappingURL=DeskTeamInbox.d.ts.map

package/dist/components/session/DeskTeamInbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeskTeamInbox.d.ts","sourceRoot":"","sources":["../../../src/components/session/DeskTeamInbox.tsx"],"names":[],"mappings":"AAuDA,QAAA,MAAM,aAAa,sDAyElB,CAAC;AAEF,eAAe,aAAa,CAAC"}