@antscorp/antsomi-ui 1.6.4 → 1.6.6

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

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

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

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

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

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

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

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

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

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

package/es/components/molecules/ChatBox/ChatBoxInsight/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/ChatBoxInsight/constants.d.ts

@@ -0,0 +1,11 @@
+import { Role } from './types';
+export declare const CONVERSATION: {
+    role: Role;
+    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/ChatBoxInsight/constants.js

@@ -0,0 +1,78 @@
+export const CONVERSATION = [
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Hi there! How can I help?',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+    {
+        role: "assistant" /* Role.Assistant */,
+        content: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident',
+    },
+    {
+        role: "user" /* Role.User */,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua',
+    },
+];
+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/ChatBoxInsight/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IChartSettings } from './types';
+interface IConfig {
+    domain: string;
+    lang: 'vi' | 'en';
+    token: string;
+    userId: string;
+    portalId?: string;
+    avatar?: string;
+}
+interface IGenerativeInsights {
+    isShowPopup: boolean;
+    title?: any;
+    onClose: () => void;
+    boundsDraggable?: string;
+    isShowResizeHover?: boolean;
+    configs: IConfig;
+    chartSettings: IChartSettings;
+}
+export declare const ChatBoxInsight: React.FC<IGenerativeInsights>;
+export {};

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

@@ -0,0 +1,45 @@
+/* eslint-disable prettier/prettier */
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { PopupDraggable } from '../..';
+import { ChatBox } from './ChatBox';
+import { Header, WrapperBody, WrapperHeader } from './styled';
+export const ChatBoxInsight = props => {
+    const { onClose, isShowPopup, title, boundsDraggable, isShowResizeHover, configs, chartSettings, } = props;
+    const { domain, userId, token, avatar, lang } = configs || {};
+    const callback = (type) => {
+        switch (type) {
+            case 'ON_CLOSE_POPUP': {
+                onClose();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    };
+    if (!isShowPopup)
+        return null;
+    return createPortal(React.createElement(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');
+};
+ChatBoxInsight.defaultProps = {
+    title: 'Insights',
+    boundsDraggable: 'body',
+    isShowResizeHover: true,
+    configs: {
+        domain: 'http://localhost:5001',
+        portalId: '33167',
+        userId: '123',
+        token: '23123',
+        lang: 'vi',
+    },
+};

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

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const ChatBoxWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+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 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>;
+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>;
+export declare const WrapperBody: import("styled-components").StyledComponent<"div", any, {
+    types?: string | undefined;
+}, never>;