@antscorp/antsomi-ui 1.3.5-beta.95 → 1.3.5-beta.950

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 = {};

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

@@ -1,4 +1,4 @@
-import Icon from '@antscorp/icons';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import clsx from 'clsx';
 import 'highlight.js/styles/vs2015.css';
 import React, { useEffect, useRef, useState } from 'react';
@@ -7,18 +7,23 @@ 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';
+import { MessageItemWrapper } from './styled';
+// Components
+import AntsomiAI from '../AntsomiAI';
 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') })),
+        ["assistant" /* Role.Assistant */]: _jsx(AntsomiAI, {}),
+        ["user" /* Role.User */]: null,
+        // [Role.User]: avatar ? (
+        //   <img className={clsx('avatar')} src={avatar} alt="avatar" />
+        // ) : (
+        //   <UserIcon className={clsx('icon', 'user')} />
+        // ),
     };
     useEffect(() => {
         if (isBot && doAnimation) {
@@ -44,10 +49,7 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
     }, [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));
+            const newContent = isPlaceholder ? (_jsx("div", { className: "reactMarkDown", children: _jsx("pre", { children: _jsx("code", { children: _jsx("span", {}) }) }) })) : (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: clsx('reactMarkDown', role === "user" /* Role.User */ && 'user'), children: text }));
             contentRef.current = newContent;
             return contentRef.current;
         }
@@ -55,18 +57,11 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             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" })))));
+    return (_jsx(_Fragment, { children: _jsxs(MessageItemWrapper, { className: clsx({ sender: !isBot, bot: isBot }), children: [MAP_ICON[role], renderType === 'markdown' ? (_jsx("div", { className: clsx('answer', {
+                        'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text.length < content.length),
+                    }), children: renderMarkdown() })) : (_jsx(Text, { className: clsx('answer', {
+                        'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text !== content),
+                    }), children: isPlaceholder ? '' : text }))] }) }));
 };
 MessageItem.defaultProps = {
     renderType: 'markdown',

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

@@ -1,11 +1,16 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
 const Item = styled.div `
-  padding: 10px;
-  background-color: #f3f9ff;
+  padding: 5px 10px;
+  background-color: #ffffff;
+  border-radius: 10px;
   cursor: pointer;
+
+  &:hover {
+    background-color: #f2f9ff;
+  }
 `;
 export const QuestionItem = props => {
     const { message, onClickItem } = props;
-    return React.createElement(Item, { onClick: () => onClickItem(Object.assign({}, props)) }, message);
+    return _jsx(Item, { onClick: () => onClickItem({ ...props }), children: message });
 };

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

@@ -1,7 +1,6 @@
-/* eslint-disable prettier/prettier */
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createPortal } from 'react-dom';
-import { PopupDraggable } from '../..';
+import { PopupDraggable } from '@antscorp/antsomi-ui/es/components/molecules/PopupDraggable';
 import { ChatBox } from './ChatBox';
 import { Header, WrapperBody, WrapperHeader } from './styled';
 export const ChatBoxInsight = props => {
@@ -20,19 +19,15 @@ export const ChatBoxInsight = props => {
     };
     if (!isShowPopup)
         return null;
-    return createPortal(React.createElement(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
+    return createPortal(_jsxs(PopupDraggable, { isHiddenResizing: true, bounds: boundsDraggable, isShowResizeHover: isShowResizeHover, callback: callback, styleContainer: {
             display: 'flex',
             flexDirection: 'column',
             textAlign: 'left',
             zIndex: 9999,
-        } },
-        React.createElement(WrapperHeader, { className: "cursor" },
-            React.createElement(Header, null, title)),
-        React.createElement(WrapperBody, { className: "popup-content", style: { padding: 0 } },
-            React.createElement(ChatBox, { domain: domain, userId: userId, token: token, avatar: avatar, lang: lang, chartSettings: chartSettings }))), document.body, 'PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP');
+        }, children: [_jsx(WrapperHeader, { className: "cursor", children: _jsx(Header, { children: title }) }), _jsx(WrapperBody, { className: "popup-content", style: { padding: 0 }, children: _jsx(ChatBox, { domain: domain, userId: userId, token: token, avatar: avatar, lang: lang, chartSettings: chartSettings }) })] }), document.body, 'PORTALS_ANTSOMI_PACKAGE_UI_KEY_POPUP');
 };
 ChatBoxInsight.defaultProps = {
-    title: 'Insights',
+    title: 'Antsomi Intelligence',
     boundsDraggable: 'body',
     isShowResizeHover: true,
     configs: {

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

@@ -8,6 +8,7 @@ export declare const WarningWrapper: import("styled-components").StyledComponent
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TypingCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperIsHelpful: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TitleSuggest: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperContentSuggest: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WrapperHeader: import("styled-components").StyledComponent<"strong", any, {}, never>;
 export declare const Header: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/typography/Text").TextProps & import("react").RefAttributes<HTMLSpanElement>>, any, {}, never>;

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

@@ -1,4 +1,3 @@
-var _a, _b, _c;
 // Libraries
 import { Typography } from 'antd';
 import styled from 'styled-components';
@@ -20,7 +19,7 @@ export const ChatBoxWrapper = styled.div `
   flex-direction: column;
 
   font-family: Roboto, san-serif;
-  border: 1px solid #e5e5e5;
+  /* border: 1px solid #e5e5e5; */
   height: calc(100% - 50px);
 `;
 export const ChatBoxHeader = styled.div `
@@ -51,7 +50,7 @@ export const ChatBoxBody = styled.div `
   flex-direction: column;
   gap: 5px;
 
-  padding: 11px 0;
+  padding: 10px;
 
   ::-webkit-scrollbar {
     height: 1rem;
@@ -91,9 +90,9 @@ export const ChatBoxFooter = styled.div `
   background: #fff;
 `;
 export const MessageItemWrapper = styled.div `
-  margin: 0 11px;
-  padding: 10px;
-  border-radius: 3px;
+  /* margin: 0 11px;
+  padding: 10px; */
+  border-radius: 10px;
   background: transparent;
 
   display: flex;
@@ -101,6 +100,26 @@ export const MessageItemWrapper = styled.div `
   gap: 10px;
   // text-align: justify;
 
+  &.bot {
+    padding: 10px;
+    .answer {
+      background: ${THEME.token?.accent};
+    }
+  }
+  &.sender {
+    padding: 0 10px;
+    justify-content: flex-end;
+    .answer {
+      background: ${THEME.token?.blue};
+    }
+  }
+
+  .answer {
+    padding: 10px;
+    border-radius: 10px;
+    word-break: break-word;
+  }
+
   .icon {
     min-width: 30px;
     min-height: 30px;
@@ -123,7 +142,7 @@ export const MessageItemWrapper = styled.div `
 
   .reactMarkDown * {
     font-size: 12px;
-    line-height: 1.5;
+    line-height: 14px;
   }
   .reactMarkDown > *:first-child {
     margin-top: 0 !important;
@@ -152,7 +171,9 @@ export const MessageItemWrapper = styled.div `
     white-space: nowrap; /* Keeps the content on a single line */
     margin: 0 auto; /* Gives that scrolling effect as the typing happens */
     letter-spacing: 0.15em; /* Adjust as needed */
-    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+    animation:
+      typing 3.5s steps(40, end),
+      blink-caret 0.75s step-end infinite;
   }
 
   @keyframes cursor-blink {
@@ -216,7 +237,7 @@ export const MessageItemWrapper = styled.div `
   }
 
   &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+    background: ${THEME.token?.bw2};
   }
   .reactMarkDown.user {
     padding: 5px;
@@ -224,36 +245,58 @@ export const MessageItemWrapper = styled.div `
   }
 `;
 export const WarningWrapper = styled.div `
-  padding: 10px;
   display: flex;
-  align-item: flex-start;
+  align-items: center;
   gap: 10px;
-  border: 1px solid #fec9c9;
-  background: #fec9c9;
-  margin: 0 10px;
+
+  padding: 10px;
+  margin: 10px 20px;
+
+  border-radius: 10px;
+  background: #ffd8db;
 
   .icon {
     min-width: 18px;
   }
 `;
 export const InputWrapper = styled.div `
-  min-height: 44px;
   display: flex;
   align-items: center;
   gap: 10px;
-  padding: 0 15px 0 10px;
-  margin: 10px;
 
-  border: 1px solid #e5e5e5;
-  background: #fff;
+  min-height: 50px;
+  max-height: 250px;
+  padding: 0px 15px;
+  margin: 10px 20px;
+
+  /* border: 1px solid #e5e5e5; */
+  background: #eef5fc;
+  border-radius: 25px;
 
   .input {
     border: none;
     font-size: 12px;
+    line-height: 1.5 !important;
+
+    /* padding: 10px 0px; */
+    min-height: auto !important;
+    max-height: 230px !important;
+    background: #eef5fc;
+    margin: 10px 0;
+    padding: 0;
 
     &:focus {
       outline: none !important;
       box-shadow: none !important;
+      background: #eef5fc;
+    }
+
+    &::placeholder {
+      font-size: 12px;
+      font-style: normal !important;
+      line-height: 1.5 !important;
+      color: #a2a2a2;
+      font-weight: 400;
     }
   }
   .submit-btn {
@@ -264,12 +307,16 @@ export const InputWrapper = styled.div `
     // border: 1px solid;
     position: relative;
     left: -3px;
+    background: #eef5fc;
+    color: #666666;
 
     &:focus {
       outline: none !important;
     }
     &.disabled {
       opacity: 0.65;
+      background-color: #f0f0f0;
+      color: #bebebe;
     }
   }
   .icon {
@@ -301,15 +348,22 @@ export const WrapperIsHelpful = styled.div `
     }
   }
 `;
+export const TitleSuggest = styled.div `
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 18.75px;
+  padding: 0 10px;
+  margin-bottom: 10px;
+`;
 export const WrapperContentSuggest = styled.div `
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 6px;
 `;
 export const WrapperHeader = styled.strong `
   display: block;
   height: 50px;
-  border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.bw3};
+  border-bottom: 1px solid ${THEME.token?.bw3};
   line-height: 50px;
   padding-left: 15px;
   box-sizing: border-box;
@@ -320,7 +374,7 @@ export const WrapperHeader = styled.strong `
 `;
 export const Header = styled(AntText) `
   font-size: 16px !important;
-  color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorText} !important;
+  color: ${THEME.token?.colorText} !important;
   font-weight: normal !important;
 `;
 export const WrapperBody = styled.div `

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

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef } from 'react';
 import clsx from 'clsx';
 import ReactMarkdown from 'react-markdown';
@@ -6,19 +7,23 @@ import rehypeHighlight from 'rehype-highlight';
 import 'highlight.js/styles/vs2015.css';
 // 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';
-import Icon from '@antscorp/icons';
+import { MessageItemWrapper } from './styled';
+// Components
+import AntsomiAI from './AntsomiAI';
 const { Text } = Typography;
-const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, isGenerativeMode, }) => {
+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') })),
+        ["assistant" /* Role.Assistant */]: _jsx(AntsomiAI, {}),
+        ["user" /* Role.User */]: null,
+        // [Role.User]: avatar ? (
+        //   <img className={clsx('avatar')} src={avatar} alt="avatar" />
+        // ) : (
+        //   <UserIcon className={clsx('icon', 'user')} />
+        // ),
     };
     useEffect(() => {
         if (isBot && doAnimation) {
@@ -44,10 +49,7 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
     }, [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));
+            const newContent = isPlaceholder ? (_jsx("div", { className: "reactMarkDown", children: _jsx("pre", { children: _jsx("code", { children: _jsx("span", {}) }) }) })) : (_jsx(ReactMarkdown, { remarkPlugins: [remarkGfm], rehypePlugins: [rehypeHighlight], className: "reactMarkDown", children: text }));
             contentRef.current = newContent;
             return contentRef.current;
         }
@@ -55,16 +57,11 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             return contentRef.current;
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MessageItemWrapper, { className: clsx({ greyBg: isBot }), isGenerativeMode: isGenerativeMode },
-            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))),
-        isGenerativeMode && 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' })))));
+    return (_jsxs(MessageItemWrapper, { className: clsx({ sender: !isBot, bot: isBot }), children: [MAP_ICON[role], renderType === 'markdown' ? (_jsx("div", { className: clsx('answer', {
+                    'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text.length < content.length),
+                }), children: renderMarkdown() })) : (_jsx(Text, { className: clsx('answer', {
+                    'ants-text-streaming': isPlaceholder || (isBot && doAnimation && text !== content),
+                }), children: isPlaceholder ? '' : text }))] }));
 };
 MessageItem.defaultProps = {
     renderType: 'markdown',

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

@@ -4,8 +4,3 @@ export declare const CONVERSATION: {
     content: string;
 }[];
 export declare const LIMIT_MESSAGE = 10;
-export declare const SUGGESTED_QUESTIONS: {
-    message_id: number;
-    message: string;
-    ctime: string;
-}[];

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

@@ -49,30 +49,3 @@ export const CONVERSATION = [
     },
 ];
 export const LIMIT_MESSAGE = 10;
-export const SUGGESTED_QUESTIONS = [
-    {
-        message_id: 54000,
-        message: `How many users did I have last week?`,
-        ctime: '2023-05-30T08:58:42.017Z',
-    },
-    {
-        message_id: 54001,
-        message: `What are my top pages and screens by weeks?`,
-        ctime: '2023-05-30T08:58:42.017Z',
-    },
-    {
-        message_id: 54002,
-        message: `On what days I get the most users?`,
-        ctime: '2023-05-30T08:58:42.017Z',
-    },
-    {
-        message_id: 54003,
-        message: `How many new users this year?`,
-        ctime: '2023-05-30T08:58:42.017Z',
-    },
-    {
-        message_id: 54004,
-        message: `What are my top events by users?`,
-        ctime: '2023-05-30T08:58:42.017Z',
-    },
-];

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

@@ -4,11 +4,7 @@ export declare const ChatBoxWrapper: import("styled-components").StyledComponent
 export declare const ChatBoxHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBoxBody: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ChatBoxFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const MessageItemWrapper: import("styled-components").StyledComponent<"div", any, {
-    isGenerativeMode?: boolean | undefined;
-}, never>;
+export declare const MessageItemWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const WarningWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const InputWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TypingCursor: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WrapperIsHelpful: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const WrapperContentSuggest: import("styled-components").StyledComponent<"div", any, {}, never>;