@antscorp/antsomi-ui 2.0.13 → 2.0.15

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

@@ -1,4 +1,3 @@
-var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
 // Libraries
 import styled, { css } from 'styled-components';
 import { Typography } from 'antd';
@@ -14,7 +13,7 @@ export const ContainerCapture = styled.div `
   left: 0px;
   z-index: 99999;
 
-  /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
+  /* border: 5px solid ${THEME.token?.blue7}; */
   /* background-color: rgba(0, 0, 0, 0.15); */
 
   z-index: 9999;
@@ -45,7 +44,7 @@ export const ContainerCapture = styled.div `
   }
 
   .tui-image-editor-canvas-container {
-    /* border: 5px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue7}; */
+    /* border: 5px solid ${THEME.token?.blue7}; */
     overflow: hidden;
     box-sizing: border-box;
   }
@@ -54,16 +53,13 @@ export const ContainerCapture = styled.div `
     cursor: none !important;
   }
 
-  ${props => {
-    var _a;
-    return props.isRecord &&
-        css `
+  ${props => props.isRecord &&
+    css `
       position: unset;
       width: 0px;
       height: 0px;
-      /* border: 5px solid ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue7}; */
-    `;
-}}
+      /* border: 5px solid ${THEME.token?.blue7}; */
+    `}
 `;
 export const BorderOverlay = styled.div `
   position: absolute;
@@ -72,7 +68,7 @@ export const BorderOverlay = styled.div `
   width: 100%;
   height: 100%;
   z-index: 999;
-  border: 5px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7};
+  border: 5px solid ${THEME.token?.blue7};
   box-sizing: border-box;
   clip-path: polygon(
     5px 5px,
@@ -108,14 +104,14 @@ export const WrapperIcon = styled.div `
   width: 40px;
   height: 40px;
   cursor: pointer;
-  background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue7};
+  background-color: ${THEME.token?.blue7};
   z-index: 10;
 `;
 export const DrawerGroups = styled.div `
   display: flex;
   align-items: center;
   height: 52px;
-  background-color: ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.bw0};
+  background-color: ${THEME.token?.bw0};
   z-index: 9999;
 `;
 export const WrapperDraggable = styled.strong `
@@ -140,7 +136,7 @@ export const DrawerGroupItem = styled.div `
   }
 
   &.active {
-    color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.colorPrimary};
+    color: ${THEME.token?.colorPrimary};
     background-color: #deeffe;
   }
 
@@ -189,14 +185,14 @@ export const PopupBySide = styled.div `
   padding: 8px 10px 10px;
   width: 124px;
   min-height: 110px;
-  border-radius: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.borderRadius}px;
+  border-radius: ${THEME.token?.borderRadius}px;
   box-shadow: 0px 4px 10px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.bw0};
+  background-color: ${THEME.token?.bw0};
   cursor: default;
 `;
 export const Heading = styled(AntText) `
-  color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.colorText};
-  font-size: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.fontSize};
+  color: ${THEME.token?.colorText};
+  font-size: ${THEME.token?.fontSize};
   font-weight: normal !important;
 `;
 export const WrapperColor = styled.div `

package/es/components/molecules/ChartTab/ChartTab.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Lib
-import React, { useState } from 'react';
+import { useState } from 'react';
 // Utils
 import { ChartTabStyled } from './styled';
 import { Item } from './components/Item';
@@ -7,30 +8,27 @@ import { DndContext } from '@dnd-kit/core';
 import { arrayMove, horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 export const ChartTab = props => {
     const { hiddenMenuOption, className, pages, pageActiveId, onChangeActivePage, onDuplicate, onRemove, onSaveName, onDnD, } = props;
-    const [activePage, setActivePage] = useState(pageActiveId || (pages === null || pages === void 0 ? void 0 : pages[0].id));
+    const [activePage, setActivePage] = useState(pageActiveId || pages?.[0].id);
     const [pageList, setPageList] = useState(pages);
     const handleChangeActivePage = (id) => {
         setActivePage(id);
-        onChangeActivePage === null || onChangeActivePage === void 0 ? void 0 : onChangeActivePage(id);
+        onChangeActivePage?.(id);
     };
     const handleDragEnd = (event) => {
         const { active, over } = event;
-        if (active.id !== (over === null || over === void 0 ? void 0 : over.id)) {
+        if (active.id !== over?.id) {
             setPageList(items => {
                 const oldIndex = items.findIndex(item => item.id === active.id);
-                const newIndex = items.findIndex(item => item.id === (over === null || over === void 0 ? void 0 : over.id));
+                const newIndex = items.findIndex(item => item.id === over?.id);
                 const newArray = arrayMove(items, oldIndex, newIndex);
-                onDnD === null || onDnD === void 0 ? void 0 : onDnD(newArray);
+                onDnD?.(newArray);
                 return arrayMove(items, oldIndex, newIndex);
             });
         }
     };
-    return (React.createElement(DndContext, { onDragEnd: handleDragEnd, 
+    return (_jsx(DndContext, { onDragEnd: handleDragEnd, 
         // HACK: trick as click tab => set new active page
         onDragStart: event => {
-            var _a;
-            handleChangeActivePage((_a = event === null || event === void 0 ? void 0 : event.active) === null || _a === void 0 ? void 0 : _a.id);
-        } },
-        React.createElement(SortableContext, { items: pageList === null || pageList === void 0 ? void 0 : pageList.map(item => item.id), strategy: horizontalListSortingStrategy },
-            React.createElement(ChartTabStyled, { className: className || '' }, pageList.map((pageItem, index) => (React.createElement(Item, { key: pageItem.id, page: pageItem, hiddenMenuOption: hiddenMenuOption, isActive: activePage === pageItem.id, onDuplicate: onDuplicate, onRemove: onRemove, onSaveName: onSaveName })))))));
+            handleChangeActivePage(event?.active?.id);
+        }, children: _jsx(SortableContext, { items: pageList?.map(item => item.id), strategy: horizontalListSortingStrategy, children: _jsx(ChartTabStyled, { className: className || '', children: pageList.map((pageItem, index) => (_jsx(Item, { page: pageItem, hiddenMenuOption: hiddenMenuOption, isActive: activePage === pageItem.id, onDuplicate: onDuplicate, onRemove: onRemove, onSaveName: onSaveName }, pageItem.id))) }) }) }));
 };

package/es/components/molecules/ChartTab/components/Item.js

@@ -1,5 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Libraries
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import Icon from '@antscorp/icons';
@@ -15,33 +16,29 @@ export const Item = (props) => {
         transform: CSS.Transform.toString(transform),
         transition,
     };
-    return (React.createElement("li", Object.assign({ id: page.id, ref: setNodeRef, style: style }, attributes, listeners),
-        React.createElement(ItemStyled, { id: page.id, "$isActive": isActive },
-            isEditable ? (React.createElement(ContentEditable, { value: page.name, onSave: newValue => {
-                    setIsEditable(false);
-                    onSaveName === null || onSaveName === void 0 ? void 0 : onSaveName(page.id, newValue);
-                } })) : (React.createElement(Typography.Text, { ellipsis: { tooltip: true } }, page.name)),
-            !hiddenMenuOption ? (React.createElement(Dropdown, { menu: {
-                    items: [
-                        { label: 'Rename', key: 'rename' },
-                        { label: 'Duplicate', key: 'duplicate' },
-                        { label: 'Remove', key: 'remove' },
-                    ],
-                    onClick: ({ key }) => {
-                        switch (key) {
-                            case 'rename':
-                                setIsEditable(true);
-                                break;
-                            case 'duplicate':
-                                onDuplicate === null || onDuplicate === void 0 ? void 0 : onDuplicate(page.id);
-                                break;
-                            case 'remove':
-                                onRemove === null || onRemove === void 0 ? void 0 : onRemove(page.id);
-                                break;
-                            default:
-                                break;
-                        }
-                    },
-                }, trigger: ['hover'], placement: "topLeft" },
-                React.createElement(Icon, { type: "icon-ants-three-dot-vertical", style: { cursor: 'pointer' } }))) : null)));
+    return (_jsx("li", { id: page.id, ref: setNodeRef, style: style, ...attributes, ...listeners, children: _jsxs(ItemStyled, { id: page.id, "$isActive": isActive, children: [isEditable ? (_jsx(ContentEditable, { value: page.name, onSave: newValue => {
+                        setIsEditable(false);
+                        onSaveName?.(page.id, newValue);
+                    } })) : (_jsx(Typography.Text, { ellipsis: { tooltip: true }, children: page.name })), !hiddenMenuOption ? (_jsx(Dropdown, { menu: {
+                        items: [
+                            { label: 'Rename', key: 'rename' },
+                            { label: 'Duplicate', key: 'duplicate' },
+                            { label: 'Remove', key: 'remove' },
+                        ],
+                        onClick: ({ key }) => {
+                            switch (key) {
+                                case 'rename':
+                                    setIsEditable(true);
+                                    break;
+                                case 'duplicate':
+                                    onDuplicate?.(page.id);
+                                    break;
+                                case 'remove':
+                                    onRemove?.(page.id);
+                                    break;
+                                default:
+                                    break;
+                            }
+                        },
+                    }, trigger: ['hover'], placement: "topLeft", children: _jsx(Icon, { type: "icon-ants-three-dot-vertical", style: { cursor: 'pointer' } }) })) : null] }) }));
 };

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

@@ -1,4 +1,3 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Tokens
@@ -15,13 +14,13 @@ export const ItemStyled = styled.div `
   min-width: 80px;
   max-width: 130px;
 
-  background-color: ${props => { var _a; return (props.$isActive ? 'white' : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2); }};
+  background-color: ${props => (props.$isActive ? 'white' : THEME.token?.bw2)};
   font-weight: ${props => (props.$isActive ? 500 : 400)};
   padding: 6px 10px;
 
   &:hover {
     font-weight: 500;
-    background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue} !important;
+    background-color: ${THEME.token?.blue} !important;
   }
 
   span[contenteditable='true'] {

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

@@ -10,14 +10,14 @@ export const ChartTabStyled = styled.ul `
 
     &:first-child {
       overflow: hidden;
-      border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
-      border-bottom-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
-      /* border-top-left-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}; */
+      border-top-left-radius: ${globalToken?.borderRadius}px;
+      border-bottom-left-radius: ${globalToken?.borderRadius}px;
+      /* border-top-left-radius: ${globalToken?.borderRadius}; */
     }
     &:last-child {
       overflow: hidden;
-      border-top-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
-      border-bottom-right-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadius}px;
+      border-top-right-radius: ${globalToken?.borderRadius}px;
+      border-bottom-right-radius: ${globalToken?.borderRadius}px;
     }
   }
 `;

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

@@ -0,0 +1,2 @@
+declare const AntsomiAI: () => import("react/jsx-runtime").JSX.Element;
+export default AntsomiAI;

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from 'styled-components';
+const AntsomiAI = () => {
+    const WrapperAvatar = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    padding: 3px;
+    border: 1px solid #e5e5e5;
+    border-radius: 10px;
+  `;
+    return (_jsx(WrapperAvatar, { className: "icon", children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_7_1294)", children: [_jsx("path", { d: "M13.2396 10.1461L10.0431 2.91297C9.92278 2.64229 9.72729 2.41029 9.47595 2.24702C9.22675 2.08375 8.93459 1.99783 8.63814 1.99783C8.34168 1.99783 8.04952 2.08375 7.80033 2.24702C7.55114 2.41029 7.3535 2.64015 7.2332 2.91297L0.131156 18.9731C0.0495231 19.1579 0.00441035 19.3555 0.000113897 19.5553C-0.00418256 19.7551 0.0301891 19.957 0.103229 20.1439C0.176269 20.3308 0.285828 20.5027 0.425463 20.6487C0.565098 20.7948 0.730511 20.9108 0.915259 20.9925C1.10001 21.0741 1.29764 21.1171 1.49958 21.1235C1.70151 21.1299 1.9013 21.0934 2.09034 21.0204C2.27938 20.9473 2.45124 20.8399 2.59517 20.7003C2.7391 20.5607 2.85726 20.3952 2.93889 20.2127L8.63599 7.32758L10.911 12.4704L13.2396 10.1461Z", fill: "#005EB8" }), _jsx("path", { d: "M17.1429 18.9731L15.0677 14.275L12.7412 16.5929L14.3373 20.2041C14.5028 20.5757 14.8078 20.8657 15.188 21.014C15.5683 21.16 15.9915 21.1514 16.3631 20.9882C16.7348 20.8249 17.0269 20.5199 17.1752 20.1418C17.3234 19.7637 17.3126 19.3426 17.1472 18.971", fill: "#005EB8" }), _jsx("path", { d: "M16.8252 8.19764C16.5373 7.90977 16.1463 7.74866 15.7403 7.74866C15.3343 7.74866 14.9433 7.90977 14.6554 8.19764L8.59959 14.2299L6.21506 11.8539L4.88745 14.8593L7.51259 17.4737C7.80045 17.7615 8.19143 17.9227 8.59744 17.9227C9.00346 17.9227 9.39443 17.7615 9.6823 17.4737L16.823 10.3566C17.1109 10.0709 17.272 9.67991 17.272 9.2739C17.272 8.86788 17.1109 8.47905 16.823 8.19334L16.8252 8.19764Z", fill: "#EF3340" }), _jsx("path", { d: "M6.67046 11.7723L5.00988 15.5274L2.68335 13.2094L4.34393 9.45435L6.67046 11.7723Z", fill: "#005EB8" }), _jsx("path", { d: "M22.7991 19.9355C23.1127 19.9355 23.3641 19.6821 23.551 19.1772L23.9978 19.2481C23.9978 19.4071 23.9355 19.6112 23.8088 19.8647C23.6992 20.101 23.566 20.2986 23.4092 20.4576C23.001 20.9001 22.3888 21.1214 21.5746 21.1214C19.8968 21.1214 19.0569 20.3394 19.0569 18.7734V9.41997C19.0569 8.53705 19.7722 7.81954 20.6573 7.81954C21.5402 7.81954 22.2577 8.5349 22.2577 9.41997V19.1278C22.2577 19.6649 22.4382 19.9334 22.7991 19.9334V19.9355Z", fill: "url(#paint0_linear_7_1294)" }), _jsx("path", { d: "M20.5628 6.40601C21.6899 6.40601 22.6036 5.49231 22.6036 4.3652C22.6036 3.23808 21.6899 2.32438 20.5628 2.32438C19.4357 2.32438 18.522 3.23808 18.522 4.3652C18.522 5.49231 19.4357 6.40601 20.5628 6.40601Z", fill: "#EF3340" })] }), _jsxs("defs", { children: [_jsxs("linearGradient", { id: "paint0_linear_7_1294", x1: "21.5295", y1: "21.1214", x2: "21.5295", y2: "7.82169", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { stopColor: "#005EB8" }), _jsx("stop", { offset: "1", stopColor: "#EF3340" })] }), _jsx("clipPath", { id: "clip0_7_1294", children: _jsx("rect", { width: "24", height: "24", fill: "white" }) })] })] }) }));
+};
+export default AntsomiAI;

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

@@ -1,19 +1,11 @@
-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());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react/no-unused-prop-types */
 // Libraries
-import React, { useEffect, useState, useRef, useCallback } from 'react';
+import { 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, Scrollbars, Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Input as AntdInput } from 'antd';
 // Components
 import MessageItem from './MessageItem';
@@ -23,7 +15,6 @@ import { ChatBoxWrapper, ChatBoxHeader, ChatBoxBody, ChatBoxFooter, WarningWrapp
 const { TextArea } = AntdInput;
 const { Text } = Typography;
 export const ChatBox = props => {
-    var _a;
     const { onClose, domain, userId, token, withoutBox, avatar, style } = props;
     const [question, setQuestion] = useState('');
     const [isClosed, setIsClosed] = useState(false);
@@ -35,10 +26,14 @@ export const ChatBox = props => {
     const inputRef = useRef(null);
     const initRef = useRef(false);
     const answeringRef = useRef(false);
+    const scrollRef = useRef(null);
     const scrollBody = useCallback(() => {
         if (bodyRef.current) {
             bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
         }
+        if (scrollRef.current) {
+            scrollRef.current.scrollToBottom();
+        }
     }, []);
     const renderDone = useCallback(idx => {
         if (idx === conversation.length - 1) {
@@ -56,8 +51,8 @@ export const ChatBox = props => {
             },
         ]);
     };
-    const loadConversation = () => __awaiter(void 0, void 0, void 0, function* () {
-        const result = yield axios.get(`${domain}/api/chat/performance`, {
+    const loadConversation = async () => {
+        const result = await axios.get(`${domain}/api/chat/performance`, {
             params: {
                 _token: token,
                 _user_id: userId,
@@ -86,12 +81,12 @@ export const ChatBox = props => {
             });
             setConversation(initConversation);
         }
-    });
-    const request = (question) => __awaiter(void 0, void 0, void 0, function* () {
+    };
+    const request = async (question) => {
         if (!question)
             return;
         // await new Promise<any>(r => setTimeout(() => r({data: {data:{message: 'Lorem ipsum'}}}), Math.random() * 3000))
-        const result = yield axios.post(`${domain}/api/chat/index`, {
+        const result = await axios.post(`${domain}/api/chat/index`, {
             message: question,
         }, {
             params: {
@@ -106,7 +101,7 @@ export const ChatBox = props => {
         else if (result && result.data && result.data.code === 400) {
             setLimitMessage(result.data.message);
         }
-    });
+    };
     useEffect(() => {
         loadConversation();
         if (inputRef.current) {
@@ -117,11 +112,9 @@ export const ChatBox = props => {
         scrollBody();
     }, [conversation]);
     useEffect(() => {
-        var _a;
-        if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+        if (isAnswering && conversation.at(-1)?.role !== "assistant" /* Role.Assistant */) {
             setTimeout(() => {
-                var _a;
-                if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+                if (isAnswering && conversation.at(-1)?.role !== "assistant" /* Role.Assistant */) {
                     setShowPlaceholder(true);
                 }
                 else {
@@ -139,9 +132,9 @@ 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) => (_jsx(MessageItem, { idx: idx, ...message, scrollBody: scrollBody, renderDone: renderDone, doAnimation: initRef.current && idx === conversation.length - 1, avatar: avatar, isPlaceholder: isPlaceholder }, idx));
     const handleKeyDown = e => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             if (answeringRef.current || limitMessage || !question || !question.trim()) {
                 return;
@@ -157,30 +150,15 @@ export const ChatBox = props => {
     if (isClosed) {
         return null;
     }
-    return (React.createElement(ChatBoxWrapper, { withoutBox: withoutBox, style: style },
-        !withoutBox && (React.createElement(ChatBoxHeader, null,
-            React.createElement(Text, { className: clsx('title') }, "Get ideas with ChatGPT"),
-            React.createElement(Button, { className: clsx('close-btn'), onClick: handleClose },
-                React.createElement(CloseIcon, null)))),
-        React.createElement(ChatBoxBody, { ref: bodyRef },
-            conversation.map((message, idx) => renderMessage(message, idx)),
-            showPlaceHolder &&
-                !limitMessage &&
-                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,
-            limitMessage && (React.createElement(WarningWrapper, null,
-                React.createElement(WarningIcon, { className: clsx('icon') }),
-                React.createElement(Text, null, limitMessage))),
-            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') }))))));
+    return (_jsxs(ChatBoxWrapper, { className: "chatbox", withoutBox: withoutBox, style: style, children: [!withoutBox && (_jsxs(ChatBoxHeader, { className: "chatbox-header", children: [_jsx(Text, { className: clsx('title'), children: "Antsomi Intelligence" }), _jsx(Button, { className: clsx('close-btn'), onClick: handleClose, children: _jsx(CloseIcon, {}) })] })), _jsx(Scrollbars, { ref: scrollRef, children: _jsxs(ChatBoxBody, { ref: bodyRef, className: "chatbox-body", children: [conversation.map((message, idx) => renderMessage(message, idx)), showPlaceHolder &&
+                            !limitMessage &&
+                            isAnswering &&
+                            conversation.at(-1)?.role !== "assistant" /* Role.Assistant */ &&
+                            renderMessage({
+                                id: 'placeholder',
+                                role: "assistant" /* Role.Assistant */,
+                                content: '',
+                            }, conversation.length, true)] }) }), _jsxs(ChatBoxFooter, { className: "chatbox-footer", children: [limitMessage && (_jsxs(WarningWrapper, { children: [_jsx(WarningIcon, { className: clsx('icon') }), _jsx(Text, { children: limitMessage })] })), _jsxs(InputWrapper, { children: [_jsx(TextArea, { ref: inputRef, rootClassName: "textarea", value: question, onChange: e => setQuestion(e.target.value), className: clsx('input'), placeholder: "Type your question...", onKeyDown: handleKeyDown, autoSize: true }), _jsx(Button, { disabled: isAnswering, className: clsx('submit-btn', { disabled: isAnswering }), onClick: () => handleKeyDown({ key: 'Enter', preventDefault: () => null }), children: _jsx(PlaneIcon, { className: clsx('icon') }) })] })] })] }));
 };
 ChatBox.defaultProps = {
     withoutBox: false,

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

@@ -1,29 +1,20 @@
-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());
-    });
-};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable react-hooks/exhaustive-deps */
 // Libraries
 import axios from 'axios';
 import clsx from 'clsx';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 // Atoms
-import { Button, Popover } from '@antscorp/antsomi-ui/es/components/atoms';
+import { Button, Scrollbars, Popover, Tooltip } from '@antscorp/antsomi-ui/es/components/atoms';
 import { Input as AntdInput } from 'antd';
 // Components
-import { PlaneIcon } from '@antscorp/antsomi-ui/es/components/icons';
+import { IdeaIcon, 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';
+import { ChatBoxBody, ChatBoxFooter, ChatBoxWrapper, InputWrapper, TitleSuggest, 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('');
@@ -35,11 +26,15 @@ export const ChatBox = props => {
     const inputRef = useRef(null);
     const initRef = useRef(false);
     const answeringRef = useRef(false);
+    const scrollRef = useRef(null);
     const [isOpenSuggestedQuestion, setIsOpenSuggestedQuestions] = useState(false);
     const scrollBody = useCallback(() => {
         if (bodyRef.current) {
             bodyRef.current.scrollTo(0, bodyRef.current.scrollHeight);
         }
+        if (scrollRef.current) {
+            scrollRef.current.scrollToBottom();
+        }
     }, []);
     const renderDone = useCallback(idx => {
         if (idx === conversation.length - 1) {
@@ -57,35 +52,33 @@ export const ChatBox = props => {
             },
         ]);
     };
-    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 fetchSuggestQuestions = async () => {
+        const res = await 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(res.data?.data?.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 request = async (question) => {
         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`, {
+        const res = await 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;
+        const message = res.data?.data;
         if (message) {
             addMessage(message, "assistant" /* Role.Assistant */);
         }
-    });
+    };
     useEffect(() => {
-        if (chartData === null || chartData === void 0 ? void 0 : chartData.length) {
+        if (chartData?.length) {
             initRef.current = true;
             answeringRef.current = true;
             setAnswering(true);
@@ -97,11 +90,9 @@ export const ChatBox = props => {
         scrollBody();
     }, [conversation]);
     useEffect(() => {
-        var _a;
-        if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+        if (isAnswering && conversation.at(-1)?.role !== "assistant" /* Role.Assistant */) {
             setTimeout(() => {
-                var _a;
-                if (isAnswering && ((_a = conversation.at(-1)) === null || _a === void 0 ? void 0 : _a.role) !== "assistant" /* Role.Assistant */) {
+                if (isAnswering && conversation.at(-1)?.role !== "assistant" /* Role.Assistant */) {
                     setShowPlaceholder(true);
                 }
                 else {
@@ -119,9 +110,9 @@ 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) => (_jsx(MessageItem, { idx: idx, ...message, scrollBody: scrollBody, renderDone: renderDone, doAnimation: initRef.current && idx === conversation.length - 1, avatar: avatar, isPlaceholder: isPlaceholder }, idx));
     const handleKeyDown = e => {
-        if (e.key === 'Enter') {
+        if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
             if (answeringRef.current || !question || !question.trim()) {
                 return;
@@ -134,27 +125,17 @@ export const ChatBox = props => {
             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') }))))));
+    return (_jsxs(ChatBoxWrapper, { className: "chatbox", style: style, children: [_jsx(Scrollbars, { ref: scrollRef, children: _jsxs(ChatBoxBody, { ref: bodyRef, className: "chatbox-body", children: [conversation.map((message, idx) => renderMessage(message, idx)), showPlaceHolder &&
+                            isAnswering &&
+                            conversation.at(-1)?.role !== "assistant" /* Role.Assistant */ &&
+                            renderMessage({
+                                id: 'placeholder',
+                                role: "assistant" /* Role.Assistant */,
+                                content: '',
+                            }, conversation.length, true)] }) }), _jsx(ChatBoxFooter, { className: "chatbox-footer", children: _jsxs(InputWrapper, { children: [_jsx(TextArea, { ref: inputRef, value: question, onChange: e => setQuestion(e.target.value), className: clsx('input'), placeholder: "Type your question...", onKeyDown: handleKeyDown, autoSize: true }), suggestQuestions?.length ? (_jsx(Popover, { arrow: false, title: _jsx(TitleSuggest, { children: "Suggested questions" }), placement: "topRight", content: () => (_jsx(WrapperContentSuggest, { children: suggestQuestions.map(question => (_jsx(QuestionItem, { message: question, onClickItem: question => handleClickQuestion(question) }, question))) })), trigger: "click", open: isOpenSuggestedQuestion, getPopupContainer: triggerNode => triggerNode, onOpenChange: isOpen => setIsOpenSuggestedQuestions(isOpen), overlayInnerStyle: {
+                                padding: '10px 5px',
+                                minWidth: '330px',
+                                overflow: 'auto',
+                            }, children: _jsx(Tooltip, { title: "Suggested questions", zIndex: isOpenSuggestedQuestion ? 0 : 10000, children: _jsx(Button, { disabled: isAnswering, className: clsx('submit-btn', { disabled: isAnswering }), onClick: () => setIsOpenSuggestedQuestions(true), type: "text", children: _jsx(IdeaIcon, { size: 24, className: clsx('icon') }) }) }) })) : null, _jsx(Button, { disabled: isAnswering, className: clsx('submit-btn', { disabled: isAnswering }), onClick: () => handleKeyDown({ key: 'Enter', preventDefault: () => null }), children: _jsx(PlaneIcon, { className: clsx('icon') }) })] }) })] }));
 };
 ChatBox.defaultProps = {};