@antscorp/antsomi-ui 1.3.5-beta.26 → 1.3.5-beta.261

package/es/components/molecules/AccountSelection/styled.js

@@ -0,0 +1,100 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import styled from 'styled-components';
+export const AccountSelectionStyled = styled.div `
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  width: 300px;
+  height: 450px;
+  box-shadow: 0px 3px 20px 0px #002e5933;
+
+  .input__wrapper .antsomi-input-affix-wrapper {
+    padding: 8px 10px;
+  }
+
+  .recent-text {
+    color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw7};
+    padding: 6px 10px 0;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  ul.account-list {
+    border-top: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+    overflow-y: auto;
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 10px;
+    margin-bottom: 6px;
+    cursor: pointer;
+
+    .account-name {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .account-id {
+      flex-shrink: 0;
+    }
+  }
+
+  .all-account {
+    padding: 8px 10px;
+    border-top: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.bw3};
+    cursor: pointer;
+  }
+
+  li:hover,
+  .all-account:hover {
+    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+  }
+
+  li.is-selected,
+  .all-account.is-selected {
+    background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1_1};
+  }
+`;
+export const PopoverFieldStyled = styled.div `
+  box-sizing: border-box;
+  width: 190px;
+  height: 36px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 10px;
+  cursor: pointer;
+
+  background-color: white;
+
+  font-size: 12px;
+  font-weight: bold;
+
+  span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &.select {
+    border: 1px solid ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw3};
+    border-radius: 999px;
+  }
+
+  &.input {
+    border-bottom: 1px solid ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.colorPrimary};
+    width: 300px;
+  }
+
+  & .is-placeholder {
+    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw6};
+    font-weight: normal;
+  }
+`;

package/es/components/molecules/AddDynamicContent/AddDynamicContent.js

@@ -14,6 +14,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 // Libraries
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from 'react';
 import { omit, isEmpty, flatMapDeep, set, get, isNaN } from 'lodash';
+import { useQueryClient } from '@tanstack/react-query';
 // Hooks
 import { useDeepCompareEffect, useDeepCompareMemo } from '@antscorp/antsomi-ui/es/hooks';
 // Components
@@ -27,7 +28,6 @@ import { translations } from '@antscorp/antsomi-ui/es/locales/translations';
 import { useGetDynamicContentAttr, useGetListPromotionPool, useGetListEventAttr, useGetListPromotionCodeAttr, useGetListBO, useGetListAllEvents, useGetListSourceByEvent, useGetListAttributeBO, useGetCustomFunction, useAddSavedCSFunction, useUpdateCSFunction, } from '@antscorp/antsomi-ui/es/queries';
 import { useGetEventTrackingAttributes } from '@antscorp/antsomi-ui/es/queries/ThirdParty';
 // Queries config
-import { queryClientAntsomiUI } from '@antscorp/antsomi-ui/es/queries/configs';
 import { QUERY_KEYS } from '@antscorp/antsomi-ui/es/constants/queries';
 import { dateExample } from './components/FormatDatetime';
 import DisplayFormat from './components/DisplayFormat';
@@ -126,6 +126,7 @@ export const AddDynamicContent = props => {
     const [attrDFOptions, setAttrDFOptions] = useState([]);
     // Template Custom
     const [templateId, settemplateId] = useState();
+    const queryClient = useQueryClient();
     const { data: listBoAttributes = [], isFetching: isFetchingListBoAttr, isError: isErrorBoAttr, } = useGetListAttributeBO({
         url,
         itemTypeIds: itemTypeId ? [itemTypeId] : [],
@@ -911,7 +912,7 @@ export const AddDynamicContent = props => {
                             break;
                         setItemTypeId(Number(selectedItemTypeId));
                         const key = [QUERY_KEYS.GET_EVENT_ATTRIBUTE_BO, [selectedItemTypeId]];
-                        const listAttBOByItemTypeId = serilizeBOAttr(queryClientAntsomiUI.getQueryData(key));
+                        const listAttBOByItemTypeId = serilizeBOAttr(queryClient.getQueryData(key));
                         if (listAttBOByItemTypeId.length) {
                             form.setFieldsValue({
                                 [DYNAMIC_CONTENT_SETTING_KEY.ATTRIBUTE]: listAttBOByItemTypeId[0],

package/es/components/molecules/AddDynamicContent/constants.d.ts

@@ -99,3 +99,20 @@ export declare const ATTRIBUTE_NUMBERIC_FORMAT_OPTION: {
         };
     };
 };
+export declare const COLLECTION_STATUS: {
+    2: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    4: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+    DELETE: {
+        value: number;
+        label: string;
+        errorMessage: string;
+    };
+};

package/es/components/molecules/AddDynamicContent/constants.js

@@ -150,3 +150,20 @@ export const ATTRIBUTE_NUMBERIC_FORMAT_OPTION = {
         },
     },
 };
+export const COLLECTION_STATUS = {
+    2: {
+        value: 2,
+        label: 'Disable',
+        errorMessage: 'This collection is disabled',
+    },
+    4: {
+        value: 4,
+        label: 'Archive',
+        errorMessage: 'This collection is not available',
+    },
+    DELETE: {
+        value: 3,
+        label: 'Delete',
+        errorMessage: 'This collection does not exist',
+    },
+};

package/es/components/molecules/AddDynamicContent/styled.d.ts

@@ -6,7 +6,7 @@ export declare const InputSuggestion: import("styled-components").StyledComponen
     Option: import("rc-select/lib/Option").OptionFC;
     _InternalPanelDoNotUseOrYouWillBeFired: (props: import("antd/es/_util/type").AnyObject) => import("react").JSX.Element;
 }, any, {}, never>;
-export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, import("../Modal/styled").CustomModalProps, any>;
+export declare const ModalCustom: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof import("react").JSX.IntrinsicElements, any, any, any>;
 export declare const ButtonCustom: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
     Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
 }, any, {}, never>;

package/es/components/molecules/AlignSetting/utils.d.ts

@@ -1,3 +1,3 @@
 import { TAlign } from './index';
-export declare const mapAlignToJustifyContent: (value: TAlign) => "center" | "auto" | "end" | "start";
+export declare const mapAlignToJustifyContent: (value: TAlign) => "auto" | "center" | "end" | "start";
 export declare const mapJustifyContentToAlign: (value: 'start' | 'end' | 'center') => string | undefined;

package/es/components/molecules/CalendarSelection/CalendarSelection.js

@@ -10,12 +10,12 @@ import { initState, resetValue } from './actions';
 import { useTriggerOut } from './hooks/useTriggerOut';
 export const CalendarSelection = props => {
     const initialed = useRef(false);
-    const { value, popoverProps, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, onChange, } = props;
+    const { value, rangeLimit = RANGE_LIMIT, timezone = LOCAL_TIMEZONE, timeDisplayProps, popoverProps, rangePickerProps, onChange, } = props;
     const [state, dispatch] = useReducer(reducer, INITIAL_STATE);
     useLayoutEffect(() => {
-        if (!value)
+        if (!value || initialed.current)
             return;
-        dispatch(initState(value, !initialed.current));
+        dispatch(initState(value, initialed.current));
         initialed.current = true;
     }, [value]);
     useLayoutEffect(() => {
@@ -30,7 +30,7 @@ export const CalendarSelection = props => {
         React.createElement(StyledPopoverBody, null,
             React.createElement(RangeSelectOptions, null),
             React.createElement(Divider, { type: "vertical", style: { margin: 0, height: 'auto' } }),
-            React.createElement(CustomPicker, null)),
+            React.createElement(CustomPicker, Object.assign({}, rangePickerProps))),
         React.createElement(Divider, { style: { margin: 0 } }),
         React.createElement(Footer, null)));
     // console.log(state.value.current.rangeValue);

package/es/components/molecules/CalendarSelection/components/CustomPicker/CustomPicker.js

@@ -1,3 +1,14 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 /* eslint-disable react/no-array-index-key */
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
@@ -19,7 +30,8 @@ const generateRangeInputLabel = (idx, label) => {
         return 'custom';
     return `custom compare${idx > 1 ? ` ${idx}}` : ''}`;
 };
-export const CustomPicker = () => {
+export const CustomPicker = props => {
+    const rest = __rest(props, []);
     const popupContainer = useRef(null);
     const { state, action } = useCalendarSelectionContext();
     const { rangeValue } = state.value.current;
@@ -66,7 +78,7 @@ export const CustomPicker = () => {
             } },
             React.createElement("div", { className: "range-input" },
                 React.createElement("div", { className: "range-input-label" }, generateRangeInputLabel(rangeIdx, range.label)),
-                React.createElement(RangePicker, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
+                React.createElement(RangePicker, Object.assign({}, rest, { open: true, value: [dayjs(range.start), dayjs(range.end)], onClick: () => setActiveRangeIdx(rangeIdx), getPopupContainer: () => popupContainer.current || document.body, panelRender: originalPanel => {
                         if (activeRangeIdx !== rangeIdx)
                             return null;
                         return originalPanel;
@@ -90,7 +102,7 @@ export const CustomPicker = () => {
                             end = valueFirst.toISOString();
                         }
                         handleCalendarChange(start, end);
-                    } })))))),
+                    } }))))))),
         React.createElement(AutoUpdateTo, null),
         React.createElement(CalendarContainerStyled, { className: "calendar-container", ref: popupContainer })));
 };

package/es/components/molecules/CalendarSelection/hooks/useStateContext.d.ts

@@ -1,4 +1,4 @@
 export declare const useCalendarSelectionContext: () => {
-    state: import("../types").ReducerState;
-    action: import("../types").ActionType;
+    state: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ReducerState;
+    action: import("@antscorp/antsomi-ui/es/components/molecules/CalendarSelection/types").ActionType;
 };

package/es/components/molecules/CalendarSelection/types.d.ts

@@ -1,4 +1,4 @@
-import { PopoverProps } from 'antd';
+import { DatePickerProps, PopoverProps } from 'antd';
 import { Dispatch } from 'react';
 import { ValueOf } from 'type-fest';
 import { updateRangeInfo, changeRangeType, updateRangeValue, changeAutoUpdateTo, initState, togglePopover, apply, resetValue } from './actions';
@@ -11,6 +11,7 @@ export type CalendarSelectionProps = Partial<{
     toDay: Date;
     value: CalendarSelectionValue;
     timeDisplayProps: TimeRangeDisplayProps;
+    rangePickerProps: DatePickerProps;
     onChange: (value: CalendarSelectionValue, info: TriggerOutInfo) => void;
 }>;
 export type Range = (typeof SELECTION_KEY)[keyof typeof SELECTION_KEY];

package/es/components/molecules/ChatBox/ChatBox.js

@@ -13,18 +13,23 @@ import React, { useEffect, useState, useRef, useCallback } from 'react';
 import clsx from 'clsx';
 import axios from 'axios';
 // Atoms
-import { Button, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Popover, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Input as AntdInput } from 'antd';
 // Components
 import MessageItem from './MessageItem';
 import { CloseIcon, PlaneIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { QuestionItem } from './QuestionItem';
 // Styled
-import { ChatBoxWrapper, ChatBoxHeader, ChatBoxBody, ChatBoxFooter, WarningWrapper, InputWrapper, } from './styled';
+import { ChatBoxWrapper, ChatBoxHeader, ChatBoxBody, ChatBoxFooter, WarningWrapper, InputWrapper, WrapperContentSuggest, } from './styled';
+// Utils
+import { buildConversation } from './utils';
+// Constants
+import { SUGGESTED_QUESTIONS } from './constants';
 const { TextArea } = AntdInput;
 const { Text } = Typography;
 export const ChatBox = props => {
     var _a;
-    const { onClose, domain, userId, token, withoutBox, avatar, style } = props;
+    const { onClose, domain, userId, token, withoutBox, avatar, style, isGenerativeMode = false, conversationData = [], } = props;
     const [question, setQuestion] = useState('');
     const [isClosed, setIsClosed] = useState(false);
     const [limitMessage, setLimitMessage] = useState('');
@@ -35,6 +40,7 @@ export const ChatBox = props => {
     const inputRef = useRef(null);
     const initRef = useRef(false);
     const answeringRef = useRef(false);
+    const [isOpenSuggestedQuestion, setIsOpenSuggestedQuestions] = useState(false);
     const scrollBody = useCallback(() => {
         if (bodyRef.current) {
             bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
@@ -69,24 +75,16 @@ export const ChatBox = props => {
             },
         });
         if (result && result.data && result.data.data && result.data.data.rows) {
-            const initConversation = [];
-            result.data.data.rows
-                .sort((a, b) => a.message_id - b.message_id)
-                .forEach(mess => {
-                initConversation.push({
-                    id: mess.message_id,
-                    role: "user" /* Role.User */,
-                    content: mess.message,
-                });
-                initConversation.push({
-                    id: `gpt_${mess.message_id}`,
-                    role: "assistant" /* Role.Assistant */,
-                    content: mess.response_message,
-                });
-            });
+            const initConversation = buildConversation(result.data.data.rows);
             setConversation(initConversation);
         }
     });
+    const handleClickQuestion = question => {
+        const { message } = question;
+        setQuestion(message);
+        setIsOpenSuggestedQuestions(false);
+    };
+    const renderContentSuggested = () => (React.createElement(WrapperContentSuggest, null, SUGGESTED_QUESTIONS.map((question) => (React.createElement(QuestionItem, Object.assign({}, question, { message: question.message, onClickItem: question => handleClickQuestion(question) }))))));
     const request = (question) => __awaiter(void 0, void 0, void 0, function* () {
         if (!question)
             return;
@@ -108,9 +106,17 @@ export const ChatBox = props => {
         }
     });
     useEffect(() => {
-        loadConversation();
-        if (inputRef.current) {
-            inputRef.current.focus();
+        if (conversationData && conversationData.length) {
+            const conversations = buildConversation(conversationData);
+            setConversation(conversations);
+        }
+    }, [conversationData]);
+    useEffect(() => {
+        if (!isGenerativeMode) {
+            loadConversation();
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
         }
     }, []);
     useEffect(() => {
@@ -139,7 +145,7 @@ export const ChatBox = props => {
             onClose();
         }
     };
-    const renderMessage = (message, idx, isPlaceholder = false) => (React.createElement(MessageItem, Object.assign({ key: idx, idx: idx }, message, { scrollBody: scrollBody, renderDone: renderDone, doAnimation: initRef.current && idx === conversation.length - 1, avatar: avatar, isPlaceholder: isPlaceholder })));
+    const renderMessage = (message, idx, isPlaceholder = false) => (React.createElement(MessageItem, Object.assign({ key: idx, idx: idx }, message, { scrollBody: scrollBody, renderDone: renderDone, doAnimation: initRef.current && idx === conversation.length - 1, avatar: avatar, isPlaceholder: isPlaceholder, isGenerativeMode: isGenerativeMode })));
     const handleKeyDown = e => {
         if (e.key === 'Enter') {
             e.preventDefault();
@@ -177,6 +183,12 @@ export const ChatBox = props => {
             limitMessage && (React.createElement(WarningWrapper, null,
                 React.createElement(WarningIcon, { className: clsx('icon') }),
                 React.createElement(Text, null, limitMessage))),
+            isGenerativeMode && (React.createElement(Popover, { arrow: false, title: "Suggested Questions", placement: "bottom", content: renderContentSuggested(), trigger: "click", open: isOpenSuggestedQuestion, getPopupContainer: triggerNode => triggerNode, onOpenChange: isOpen => setIsOpenSuggestedQuestions(isOpen), overlayInnerStyle: {
+                    padding: '12px 16px',
+                    minWidth: '330px',
+                    overflow: 'auto',
+                } },
+                React.createElement(Button, { onClick: () => setIsOpenSuggestedQuestions(true), type: "text" }, "Suggested Questions"))),
             React.createElement(InputWrapper, null,
                 React.createElement(TextArea, { ref: inputRef, value: question, onChange: e => setQuestion(e.target.value), className: clsx('input'), placeholder: "Type your question...", onKeyDown: handleKeyDown, autoSize: true }),
                 React.createElement(Button, { disabled: isAnswering, className: clsx('submit-btn', { disabled: isAnswering }), onClick: () => handleKeyDown({ key: 'Enter', preventDefault: () => null }) },

package/es/components/molecules/ChatBox/ChatBoxInsight/ChatBox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IChatBoxProps } from './types';
+export declare const ChatBox: React.FC<IChatBoxProps>;

package/es/components/molecules/ChatBox/ChatBoxInsight/ChatBox.js

@@ -0,0 +1,160 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+/* eslint-disable react-hooks/exhaustive-deps */
+// Libraries
+import axios from 'axios';
+import clsx from 'clsx';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+// Atoms
+import { Button, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Input as AntdInput } from 'antd';
+// Components
+import { PlaneIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import MessageItem from './MessageItem';
+import { QuestionItem } from './QuestionItem';
+// Styled
+import { ChatBoxBody, ChatBoxFooter, ChatBoxWrapper, InputWrapper, WrapperContentSuggest, } from './styled';
+const { TextArea } = AntdInput;
+export const ChatBox = props => {
+    var _a;
+    const { domain, userId, token, avatar, style, lang = 'vi', chartSettings } = props;
+    const { chartData, dataSourceName } = chartSettings;
+    const [question, setQuestion] = useState('');
+    const [isAnswering, setAnswering] = useState(false);
+    const [showPlaceHolder, setShowPlaceholder] = useState(false);
+    const [conversation, setConversation] = useState([]);
+    const [suggestQuestions, setSuggestQuestions] = useState([]);
+    const bodyRef = useRef(null);
+    const inputRef = useRef(null);
+    const initRef = useRef(false);
+    const answeringRef = useRef(false);
+    const [isOpenSuggestedQuestion, setIsOpenSuggestedQuestions] = useState(false);
+    const scrollBody = useCallback(() => {
+        if (bodyRef.current) {
+            bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
+        }
+    }, []);
+    const renderDone = useCallback(idx => {
+        if (idx === conversation.length - 1) {
+            answeringRef.current = false;
+            setAnswering(false);
+        }
+    }, [conversation]);
+    const addMessage = (content, role) => {
+        setConversation(prev => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                role,
+                content,
+            },
+        ]);
+    };
+    const fetchSuggestQuestions = () => __awaiter(void 0, void 0, void 0, function* () {
+        var _b, _c;
+        const res = yield axios.post(`${domain}/api/v1/insight/question`, { chart_settings: { chart_data: chartData, data_source_name: dataSourceName } }, { params: { _token: token, _user_id: userId, _account_id: userId, _lang: lang } });
+        setSuggestQuestions(((_c = (_b = res.data) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.questions) || []);
+    });
+    const handleClickQuestion = question => {
+        const { message } = question;
+        setQuestion(message);
+        setIsOpenSuggestedQuestions(false);
+    };
+    const request = (question) => __awaiter(void 0, void 0, void 0, function* () {
+        var _d;
+        const messages = [
+            ...conversation,
+            ...(question ? [{ content: question, role: "user" /* Role.User */ }] : []),
+        ]
+            // .filter(({ role }) => role === Role.User)
+            .map(({ content, role }) => ({ content, role }));
+        const res = yield axios.post(`${domain}/api/v1/insight/conversation`, {
+            chart_settings: { chart_data: chartData, data_source_name: dataSourceName },
+            messages,
+        }, { params: { _token: token, _user_id: userId, _account_id: userId, _lang: lang } });
+        const message = (_d = res.data) === null || _d === void 0 ? void 0 : _d.data;
+        if (message) {
+            addMessage(message, "assistant" /* Role.Assistant */);
+        }
+    });
+    useEffect(() => {
+        if (chartData === null || chartData === void 0 ? void 0 : chartData.length) {
+            initRef.current = true;
+            answeringRef.current = true;
+            setAnswering(true);
+            request();
+            fetchSuggestQuestions();
+        }
+    }, [chartData]);
+    useEffect(() => {
+        scrollBody();
+    }, [conversation]);
+    useEffect(() => {
+        var _a;
+        if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+            setTimeout(() => {
+                var _a;
+                if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+                    setShowPlaceholder(true);
+                }
+                else {
+                    setShowPlaceholder(false);
+                }
+            }, Math.random() * 4000);
+        }
+        else {
+            setShowPlaceholder(false);
+        }
+    }, [isAnswering, conversation]);
+    // const handleClose = () => {
+    //   setIsClosed(true);
+    //   if (typeof onClose === 'function') {
+    //     onClose();
+    //   }
+    // };
+    const renderMessage = (message, idx, isPlaceholder = false) => (React.createElement(MessageItem, Object.assign({ key: idx, idx: idx }, message, { scrollBody: scrollBody, renderDone: renderDone, doAnimation: initRef.current && idx === conversation.length - 1, avatar: avatar, isPlaceholder: isPlaceholder })));
+    const handleKeyDown = e => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            if (answeringRef.current || !question || !question.trim()) {
+                return;
+            }
+            initRef.current = true;
+            answeringRef.current = true;
+            setAnswering(true);
+            addMessage(question, "user" /* Role.User */);
+            request(question);
+            setQuestion('');
+        }
+    };
+    return (React.createElement(ChatBoxWrapper, { style: style },
+        React.createElement(ChatBoxBody, { ref: bodyRef },
+            conversation.map((message, idx) => renderMessage(message, idx)),
+            showPlaceHolder &&
+                isAnswering &&
+                ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */ &&
+                renderMessage({
+                    id: 'placeholder',
+                    role: "assistant" /* Role.Assistant */,
+                    content: '',
+                }, conversation.length, true)),
+        React.createElement(ChatBoxFooter, null,
+            (suggestQuestions === null || suggestQuestions === void 0 ? void 0 : suggestQuestions.length) ? (React.createElement(Popover, { arrow: false, title: "Suggested Questions", placement: "bottom", content: () => (React.createElement(WrapperContentSuggest, null, suggestQuestions.map(question => (React.createElement(QuestionItem, { key: question, message: question, onClickItem: question => handleClickQuestion(question) }))))), trigger: "click", open: isOpenSuggestedQuestion, getPopupContainer: triggerNode => triggerNode, onOpenChange: isOpen => setIsOpenSuggestedQuestions(isOpen), overlayInnerStyle: {
+                    padding: '12px 16px',
+                    minWidth: '330px',
+                    overflow: 'auto',
+                } },
+                React.createElement(Button, { onClick: () => setIsOpenSuggestedQuestions(true), type: "text" }, "Suggested Questions"))) : null,
+            React.createElement(InputWrapper, null,
+                React.createElement(TextArea, { ref: inputRef, value: question, onChange: e => setQuestion(e.target.value), className: clsx('input'), placeholder: "Type your question...", onKeyDown: handleKeyDown, autoSize: true }),
+                React.createElement(Button, { disabled: isAnswering, className: clsx('submit-btn', { disabled: isAnswering }), onClick: () => handleKeyDown({ key: 'Enter', preventDefault: () => null }) },
+                    React.createElement(PlaneIcon, { className: clsx('icon') }))))));
+};
+ChatBox.defaultProps = {};

package/es/components/molecules/ChatBox/ChatBoxInsight/MessageItem.d.ts

@@ -0,0 +1,5 @@
+import 'highlight.js/styles/vs2015.css';
+import React from 'react';
+import { IChatBoxMessageProps } from './types';
+declare const _default: React.NamedExoticComponent<IChatBoxMessageProps>;
+export default _default;

package/es/components/molecules/ChatBox/ChatBoxInsight/MessageItem.js

@@ -0,0 +1,74 @@
+import Icon from '@antscorp/icons';
+import clsx from 'clsx';
+import 'highlight.js/styles/vs2015.css';
+import React, { useEffect, useRef, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import rehypeHighlight from 'rehype-highlight';
+import remarkGfm from 'remark-gfm';
+// Atoms
+import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
+// Components
+import { GPTIconV3, UserIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Style
+import { MessageItemWrapper, WrapperIsHelpful } from './styled';
+const { Text } = Typography;
+const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, }) => {
+    const isBot = role === "assistant" /* Role.Assistant */;
+    const [text, setText] = useState(isBot && doAnimation ? '' : content);
+    const contentRef = useRef();
+    const MAP_ICON = {
+        ["assistant" /* Role.Assistant */]: React.createElement(GPTIconV3, { className: clsx('icon', 'gpt') }),
+        ["user" /* Role.User */]: avatar ? (React.createElement("img", { className: clsx('avatar'), src: avatar, alt: "avatar" })) : (React.createElement(UserIcon, { className: clsx('icon', 'user') })),
+    };
+    useEffect(() => {
+        if (isBot && doAnimation) {
+            let i = 0;
+            setTimeout(() => {
+                const intervalId = setInterval(() => {
+                    const nextSpace = content.slice(i).indexOf(' ');
+                    i += nextSpace >= 0 ? nextSpace + 1 : content.length + 1;
+                    setText(content.slice(0, i));
+                    if (i > content.length) {
+                        clearInterval(intervalId);
+                        renderDone(idx);
+                    }
+                    scrollBody();
+                }, 20);
+                return () => clearInterval(intervalId);
+            }, 150);
+        }
+        else {
+            scrollBody();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isBot]);
+    const renderMarkdown = () => {
+        try {
+            const newContent = isPlaceholder ? (React.createElement("div", { className: "reactMarkDown" },
+                React.createElement("pre", null,
+                    React.createElement("code", null,
+                        React.createElement("span", null))))) : (React.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: clsx('reactMarkDown', role === "user" /* Role.User */ && 'user') }, text));
+            contentRef.current = newContent;
+            return contentRef.current;
+        }
+        catch (error) {
+            return contentRef.current;
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MessageItemWrapper, { className: clsx({ greyBg: isBot }) },
+            MAP_ICON[role],
+            renderType === 'markdown' ? (React.createElement("div", { className: isPlaceholder || (isBot && doAnimation && text.length < content.length)
+                    ? 'ants-text-streaming'
+                    : '' }, renderMarkdown())) : (React.createElement(Text, { className: isPlaceholder || (isBot && doAnimation && text !== content)
+                    ? 'ants-text-streaming'
+                    : '' }, isPlaceholder ? '' : text))),
+        role === "assistant" /* Role.Assistant */ && (React.createElement(WrapperIsHelpful, null,
+            React.createElement("span", null, "Was this answer helful?"),
+            React.createElement(Icon, { className: "icon-vote", type: "icon-ants-angle-up" }),
+            React.createElement(Icon, { className: "icon-vote", type: "icon-ants-angle-down" })))));
+};
+MessageItem.defaultProps = {
+    renderType: 'markdown',
+};
+export default React.memo(MessageItem);

package/es/components/molecules/ChatBox/ChatBoxInsight/QuestionItem.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type TQuestionItem = {
+    message: string;
+    onClickItem: (data: Record<string, any>) => void;
+};
+export declare const QuestionItem: React.FC<TQuestionItem>;
+export {};