@antscorp/antsomi-ui 1.3.5-beta.571 → 1.3.5-beta.572

package/es/__tests__/fileMock.test.d.ts

@@ -0,0 +1,2 @@
+declare const _exports: string;
+export = _exports;

package/es/__tests__/fileMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = 'test-file-stub';

package/es/__tests__/styleMock.test.d.ts

@@ -0,0 +1 @@
+export {};

package/es/__tests__/styleMock.test.js

@@ -0,0 +1,2 @@
+"use strict";
+module.exports = {};

package/es/components/atoms/Popover/styled.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const PopoverWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").PopoverProps & import("react").RefAttributes<unknown>> & {
+    _InternalPanelDoNotUseOrYouWillBeFired: import("react").FC<import("antd/es/popover/PurePanel").PurePanelProps>;
+}, any, {}, never>;

package/es/components/atoms/Popover/styled.js

@@ -0,0 +1,5 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Popover as AntdPopover } from 'antd';
+export const PopoverWrapper = styled(AntdPopover) ``;

package/es/components/atoms/SlideBar/SlideBar.js

@@ -264,9 +264,7 @@ export const SlideBar = props => {
                 fontSize: `${BTN_ADD_SIZE}px`,
                 cursor: disabledAdd ? 'not-allowed' : 'pointer',
                 color: disabledAdd ? (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.colorTextDisabled : (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.colorPrimary,
-            }, 
-            // disabled={disabledAdd}
-            onClick: (e) => {
+            }, onClick: (e) => {
                 e.stopPropagation();
                 if (!disabledAdd) {
                     handleAddSlide();

package/es/components/atoms/Slider/index.js

@@ -9,15 +9,20 @@ export const Slider = memo(props => {
     const { range, value, min = 0, max = 0, className, tooltipVisible } = props;
     const isNegative = useMemo(() => !!(!range && min < 0), [range, min]);
     const calculateWidth = useMemo(() => ((value || 0) * 100) / (Math.abs(max) + Math.abs(min) || 1), [min, max, value]);
-    const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    // const restProps = tooltipVisible === 'default' ? omit(props, ['tooltipVisible']) : props;
+    const restProps = omit(props, ['tooltipVisible']);
     if (isNegative) {
         return (React.createElement(SliderWrapper, { isNegative: true, width: calculateWidth, className: className },
-            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { marks: {
+            React.createElement(AntdSlider, Object.assign({}, omit(restProps, ['marks', 'className']), { tooltip: tooltipVisible !== 'default' && {
+                    open: tooltipVisible,
+                }, marks: {
                     0: ' ',
                 } }))));
     }
     return (React.createElement(SliderWrapper, { className: className },
-        React.createElement(AntdSlider, Object.assign({}, restProps))));
+        React.createElement(AntdSlider, Object.assign({}, restProps, { tooltip: tooltipVisible !== 'default' && {
+                open: tooltipVisible,
+            } }))));
 });
 Slider.defaultProps = {
     tooltipVisible: false,

package/es/components/icons/index.d.ts

@@ -32,13 +32,13 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -100,9 +100,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -145,8 +145,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -156,7 +156,6 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
-export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -232,7 +231,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
+export { WebIcon } from './WebIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/icons/index.js

@@ -32,13 +32,13 @@ export { ChatBubbleOutlineIcon } from './ChatBubbleOutlineIcon';
 export { ChatConversationCommentAddCommentIcon } from './ChatConversationCommentAddCommentIcon';
 export { ChatMentionIcon } from './ChatMentionIcon';
 export { ChatUnreadIcon } from './ChatUnreadIcon';
-export { CheckSlimIcon } from './CheckSlimIcon';
 export { CheckboxChecked5RadiusIcon } from './CheckboxChecked5RadiusIcon';
 export { CheckboxCheckedIcon } from './CheckboxCheckedIcon';
 export { CheckboxIndeterminate5RadiusIcon } from './CheckboxIndeterminate5RadiusIcon';
 export { CheckboxIndeterminateIcon } from './CheckboxIndeterminateIcon';
 export { CheckboxUnchecked5RadiusIcon } from './CheckboxUnchecked5RadiusIcon';
 export { CheckboxUncheckedIcon } from './CheckboxUncheckedIcon';
+export { CheckSlimIcon } from './CheckSlimIcon';
 export { CircleAddElementIcon } from './CircleAddElementIcon';
 export { CircleNotificationsIcon } from './CircleNotificationsIcon';
 export { CloseIcon } from './CloseIcon';
@@ -100,9 +100,9 @@ export { ForecastIcon } from './ForecastIcon';
 export { ForwardIcon } from './ForwardIcon';
 export { FreeDrawIcon } from './FreeDrawIcon';
 export { FullReviewIcon } from './FullReviewIcon';
-export { GPTIcon } from './GPTIcon';
 export { GenerateAutoWizardIcon } from './GenerateAutoWizardIcon';
 export { GetInsightIcon } from './GetInsightIcon';
+export { GPTIcon } from './GPTIcon';
 export { GridViewIcon } from './GridViewIcon';
 export { GroupIcon } from './GroupIcon';
 export { GroupLayerIcon } from './GroupLayerIcon';
@@ -145,8 +145,8 @@ export { MoveToIcon } from './MoveToIcon';
 export { MuteIcon } from './MuteIcon';
 export { NodeViewIcon } from './NodeViewIcon';
 export { NotificationIcon } from './NotificationIcon';
-export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { NotificationsActiveIcon } from './NotificationsActiveIcon';
+export { NotificationSettingIcon } from './NotificationSettingIcon';
 export { OpenNewTabIcon } from './OpenNewTabIcon';
 export { OpenUrlIcon } from './OpenUrlIcon';
 export { PageArticleIcon } from './PageArticleIcon';
@@ -156,7 +156,6 @@ export { PenDrawingIcon } from './PenDrawingIcon';
 export { PersonAddDisabledIcon } from './PersonAddDisabledIcon';
 export { PersonUserAccountIcon } from './PersonUserAccountIcon';
 export { PhoneCallbackIcon } from './PhoneCallbackIcon';
-export { PivotTableChartIcon } from './PivotTableChartIcon';
 export { PlaneIcon } from './PlaneIcon';
 export { PreviewIcon } from './PreviewIcon';
 export { PreviewVisibilityEyeIcon } from './PreviewVisibilityEyeIcon';
@@ -232,7 +231,7 @@ export { ViewDetailsInformationIcon } from './ViewDetailsInformationIcon';
 export { VisibilityOffEyeIcon } from './VisibilityOffEyeIcon';
 export { WarningIcon } from './WarningIcon';
 export { WebAssetIcon } from './WebAssetIcon';
-export { WebIcon } from './WebIcon';
 export { WebhookIcon } from './WebhookIcon';
+export { WebIcon } from './WebIcon';
 export { WidgetIcon } from './WidgetIcon';
 export { WritingAIAssitantIcon } from './WritingAIAssitantIcon';

package/es/components/molecules/AccountSelection/index.d.ts

@@ -1,4 +1,3 @@
 export { AccountSelection, type AccountSelectionProps } from './AccountSelection';
-export { AccountListing } from './AccountListing';
-export type { AccountListingHandle } from './AccountListing';
+export { AccountListing, type AccountListingHandle } from './AccountListing';
 export { useAccountSelection } from './hooks';

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

@@ -13,9 +13,9 @@ export const CalendarSelection = 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(() => {

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/MessageItem.js

@@ -9,9 +9,10 @@ import { Typography } from '@antscorp/antsomi-ui/es/components/atoms';
 // Components
 import { GPTIcon, UserIcon } from '@antscorp/antsomi-ui/es/components/icons';
 // Style
-import { MessageItemWrapper } from './styled';
+import { MessageItemWrapper, WrapperIsHelpful } from './styled';
+import Icon from '@antscorp/icons';
 const { Text } = Typography;
-const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, }) => {
+const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avatar, idx, isPlaceholder, renderType, isGenerativeMode, }) => {
     const isBot = role === "assistant" /* Role.Assistant */;
     const [text, setText] = useState(isBot && doAnimation ? '' : content);
     const contentRef = useRef();
@@ -46,7 +47,7 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             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: "reactMarkDown" }, text));
+                        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;
         }
@@ -54,11 +55,16 @@ const MessageItem = ({ role, content, scrollBody, renderDone, doAnimation, avata
             return contentRef.current;
         }
     };
-    return (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))));
+    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' })))));
 };
 MessageItem.defaultProps = {
     renderType: 'markdown',

package/es/components/molecules/ChatBox/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 {};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+const Item = styled.div `
+  padding: 10px;
+  background-color: #f3f9ff;
+  cursor: pointer;
+`;
+export const QuestionItem = props => {
+    const { message, onClickItem } = props;
+    return React.createElement(Item, { onClick: () => onClickItem(Object.assign({}, props)) }, message);
+};

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

@@ -4,3 +4,8 @@ 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,3 +49,30 @@ 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,7 +4,11 @@ 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, {}, never>;
+export declare const MessageItemWrapper: import("styled-components").StyledComponent<"div", any, {
+    isGenerativeMode?: boolean | undefined;
+}, 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>;

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

@@ -1,4 +1,3 @@
-var _a;
 // Libraries
 import styled from 'styled-components';
 // Constantsim
@@ -98,7 +97,7 @@ export const MessageItemWrapper = styled.div `
   // text-align: justify;
 
   &.greyBg {
-    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+    background: ${props => { var _a; return (props.isGenerativeMode ? '' : (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2); }};
   }
 
   .icon {
@@ -119,6 +118,14 @@ export const MessageItemWrapper = styled.div `
   }
   .reactMarkDown {
     white-space: pre-wrap;
+
+    &.user {
+      ${({ isGenerativeMode }) => isGenerativeMode &&
+    `
+        padding: 5px;
+        background-color: #F3F9FF;
+      `}
+    }
   }
   .reactMarkDown * {
     font-size: 12px;
@@ -278,3 +285,22 @@ export const TypingCursor = styled.div `
   //   typing 3.5s steps(40, end),
   //   blink-caret .75s step-end infinite;
 `;
+export const WrapperIsHelpful = styled.div `
+  font-size: 11px;
+  color: #949494;
+  padding: 0 60px;
+
+  .icon-vote {
+    font-size: 18px;
+    margin-left: 10px;
+    cursor: pointer;
+    &:hover {
+      background-color: #e8e8e8;
+    }
+  }
+`;
+export const WrapperContentSuggest = styled.div `
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;

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

@@ -20,6 +20,7 @@ export interface IChatBoxMessageProps extends Message {
     avatar?: string;
     idx?: number;
     renderType: 'text' | 'markdown';
+    isGenerativeMode?: boolean;
 }
 export interface IChatBoxProps {
     onClose?: Function;
@@ -29,4 +30,6 @@ export interface IChatBoxProps {
     token: string;
     avatar?: string;
     style?: Record<string, any>;
+    isGenerativeMode?: boolean;
+    conversationData?: Record<string, any>[];
 }

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

@@ -0,0 +1,2 @@
+import { Message } from './types';
+export declare const buildConversation: (rows: any) => Message[];

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

@@ -0,0 +1,18 @@
+export const buildConversation = rows => {
+    const initConversation = [];
+    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,
+        });
+    });
+    return initConversation;
+};

package/es/components/molecules/ColorPicker/CustomPicker/index.js

@@ -53,7 +53,7 @@ const styleContainAlpha = {
 const CustomPicker = props => {
     var _a, _b, _c, _d;
     // Props
-    const { className, style, children, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "onChange", "onChangeComplete", "presetColors"]);
+    const { className, style, children, isHideAlpha, onChange, onChangeComplete, presetColors } = props, restOf = __rest(props, ["className", "style", "children", "isHideAlpha", "onChange", "onChangeComplete", "presetColors"]);
     // State
     const [isShowRgbaInput, setShowRgbaInput] = useState(true);
     const onChangeRgbaColor = (key, value) => {
@@ -101,9 +101,9 @@ const CustomPicker = props => {
                 React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_c = props.rgb) === null || _c === void 0 ? void 0 : _c.b, controls: false, onChange: value => onChangeRgbaColor('b', value) }),
                     React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "B")),
-                React.createElement("div", { style: rgbaStyling },
+                !isHideAlpha && (React.createElement("div", { style: rgbaStyling },
                     React.createElement(InputNumberWrapper, { value: (_d = props.rgb) === null || _d === void 0 ? void 0 : _d.a, controls: false, onChange: value => onChangeRgbaColor('a', value) }),
-                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A")))) : (React.createElement(EditableInputWrapper, null,
+                    React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "A"))))) : (React.createElement(EditableInputWrapper, null,
                 React.createElement(EditableInput, { value: props.color, onChange: onChange }),
                 React.createElement(Text, { style: { position: 'absolute', bottom: '-20px' } }, "HEX"))),
             React.createElement(Button, { onClick: () => {

package/es/components/molecules/ColorPicker/index.d.ts

@@ -3,6 +3,7 @@ export interface ColorPickerProps {
     className?: string;
     color?: string;
     presetColors?: any[] | ReactNode;
+    isHideAlpha?: boolean;
     defaultColor?: string;
     icon?: React.ReactNode | string;
     onChange?: (color: string) => void;

package/es/components/molecules/ColorPicker/index.js

@@ -21,7 +21,7 @@ const styleBtnColor = {
 };
 export const ColorPicker = props => {
     // Props
-    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, } = props;
+    const { className = '', defaultColor = '#000000', presetColors, positionInput = 'left', icon, showInput = true, style = {}, isHideAlpha, } = props;
     const { onChange = () => { } } = props;
     // States
     const [color, setColor] = useState(defaultColor);
@@ -74,7 +74,7 @@ export const ColorPicker = props => {
     };
     return (React.createElement(ColorPickerWrapper, { className: `antsomi-color-picker ${className || ''}`, style: style },
         showInput && positionInput === 'left' && (React.createElement(Input, { style: { textTransform: 'uppercase' }, value: color, onChange: onChangeColorInput })),
-        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
+        React.createElement(Popover, { arrow: true, content: React.createElement(CustomPicker, { color: color, presetColors: presetColors, isHideAlpha: isHideAlpha, onChange: onChangeColorPicker, onChangeComplete: onChangeComplete }), trigger: "click", open: popoverVisible, getPopupContainer: triggerNode => triggerNode, onOpenChange: onPopoverVisibleChange },
             React.createElement("div", { className: "antsomi-popover-button", style: styleBtnColor }, iconNode || (React.createElement("span", { style: {
                     backgroundColor: color,
                     display: 'block',
@@ -88,6 +88,7 @@ ColorPicker.defaultProps = {
     className: '',
     color: '#000000',
     defaultColor: '#000000',
+    isHideAlpha: false,
     onChange: () => { },
     showInput: true,
     positionInput: 'left',

package/es/components/molecules/DatePicker/components/AdvancedRangePicker/AdvancedRangePicker.js

@@ -57,7 +57,7 @@ export const AdvancedRangePicker = props => {
             });
         }
     };
-    return (React.createElement(Space, { size: 20, align: "end", className: className || '' },
+    return (React.createElement(Space, { size: 15, align: "end", className: className || '' },
         React.createElement(AdvancedPicker, { valueType: valueType, disabled: disabled, label: showLabel ? t(translations.datePicker.startDate) || '' : '', date: timeRange.startDate.date, option: omit(timeRange.startDate, 'date'), operatorKey: "between", type: "startDate", format: useFormatMapping
                 ? getFormatDisplayFromValueType('startDate', valueType)
                 : ADVANCED_RANGE_PICKER_FORMAT.startDate, 

package/es/components/molecules/FontSetting/index.js

@@ -37,7 +37,7 @@ export const FontSettingEdit = ({ settings, styles, showSettings, onChange, }) =
     [settings]);
     const filteredSetting = useMemo(() => {
         if (!showSettings || (showSettings === null || showSettings === void 0 ? void 0 : showSettings.length) === 0) {
-            return Object.keys(settingMap).map(keySetting => settingMap[keySetting]);
+            return Object.keys(settingMap).map(keySetting => (React.createElement(React.Fragment, { key: keySetting }, settingMap[keySetting])));
         }
         return showSettings.map(keySetting => settingMap[keySetting]);
     }, [showSettings, settingMap]);

package/es/components/molecules/RichMenu/RichMenuBlock/constants.js

@@ -721,7 +721,7 @@ export const SAMPLE_RICHMENU = {
         displayDefault: true,
     },
     image: {
-        imageUrl: 'https://sandbox-st-media-template.antsomi.com/upload/2024/01/04/8d8cf39a-748f-435c-b6c6-b71b5facc739.gif',
+        imageUrl: 'https://s.cystack.net/portal/organizations/487b0f9dd9d8543312dc25e32ac71e4f/logo.jpg',
         imageStyles: {
             borderTopLeftRadius: '0px',
             borderTopRightRadius: '0px',

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

@@ -131,8 +131,8 @@ export const TemplateSaveAsStyled = styled(Flex) `
     width: 250px;
     height: 36px;
     border: 1px solid #b8cfe6;
-    padding: 0 5px;
     border-radius: ${globalToken === null || globalToken === void 0 ? void 0 : globalToken.borderRadiusXL}px;
+    padding: 0 10px;
 
     & > .remove-btn {
       cursor: pointer;

package/es/components/molecules/UploadImage/MediaThumb.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { MediaMode } from '.';
+export interface MediaThumbProps {
+    mode: MediaMode;
+    media: any;
+}
+declare const _default: React.NamedExoticComponent<MediaThumbProps>;
+export default _default;