@antscorp/antsomi-ui 1.3.2-beta.9 → 1.3.3

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

@@ -0,0 +1,62 @@
+// Themes
+// import { blackTheme } from './themes/black';
+// Constants
+import { DRAW_KEYS } from './constants';
+export const getEditorConfigs = () => ({
+    selectionStyle: {
+        cornerSize: 20,
+        rotatingPointOffset: 70,
+    },
+    usageStatistics: false,
+});
+export const initDefaultColors = () => ({
+    [DRAW_KEYS.HIGHLIGHT]: '#0f2eae',
+    [DRAW_KEYS.COMMENT]: '#0f2eae',
+    [DRAW_KEYS.PEN]: '#0f2eae',
+    [DRAW_KEYS.ARROW]: '#0f2eae',
+    [DRAW_KEYS.HIDE]: '#0f2eae',
+});
+export const base64ToFile = (dataUrl, filename) => {
+    const arr = dataUrl.split(',');
+    if (arr.length) {
+        const mime = arr[0].match(/:(.*?);/)[1];
+        const bstr = window.atob(arr[1]);
+        let n = bstr.length;
+        const u8arr = new Uint8Array(n);
+        while (n--) {
+            u8arr[n] = bstr.charCodeAt(n);
+        }
+        return new File([u8arr], filename, { type: mime });
+    }
+};
+export const convertBlobToFile = (blob, fileName) => {
+    const file = new File([blob], fileName);
+    return file;
+};
+export const generateUniqueId = () => {
+    const randomId = Math.random().toString(36).substring(2);
+    const timestamp = Date.now().toString(36);
+    return randomId + timestamp;
+};
+export const mergeAudioStreams = (desktopStream, voiceStream) => {
+    const context = new AudioContext();
+    const destination = context.createMediaStreamDestination();
+    let hasDesktop = false;
+    let hasVoice = false;
+    if (desktopStream && desktopStream.getAudioTracks().length > 0) {
+        // If you don't want to share Audio from the desktop it should still work with just the voice.
+        const source1 = context.createMediaStreamSource(desktopStream);
+        const desktopGain = context.createGain();
+        desktopGain.gain.value = 0.7;
+        source1.connect(desktopGain).connect(destination);
+        hasDesktop = true;
+    }
+    if (voiceStream && voiceStream.getAudioTracks().length > 0) {
+        const source2 = context.createMediaStreamSource(voiceStream);
+        const voiceGain = context.createGain();
+        voiceGain.gain.value = 0.7;
+        source2.connect(voiceGain).connect(destination);
+        hasVoice = true;
+    }
+    return hasDesktop || hasVoice ? destination.stream.getAudioTracks() : [];
+};

package/es/components/molecules/Card/Card.d.ts

@@ -0,0 +1 @@
+export declare const Card: import("antd/es/card").CardInterface;

package/es/components/molecules/Card/Card.js

@@ -0,0 +1,2 @@
+import { Card as AntdCard } from 'antd';
+export const Card = AntdCard;

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

@@ -0,0 +1 @@
+export { Card } from './Card';

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

@@ -0,0 +1 @@
+export { Card } from './Card';

package/es/components/molecules/Cascader/Cascader.d.ts

@@ -0,0 +1 @@
+export { Cascader } from 'antd';

package/es/components/molecules/Cascader/Cascader.js

@@ -0,0 +1 @@
+export { Cascader } from 'antd';

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

@@ -0,0 +1 @@
+export { Cascader } from './Cascader';

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

@@ -0,0 +1 @@
+export { Cascader } from './Cascader';

package/es/components/molecules/ChatBox/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/ChatBox.js

@@ -0,0 +1,188 @@
+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/no-unused-prop-types */
+// Libraries
+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 { Input as AntdInput } from 'antd';
+// Components
+import MessageItem from './MessageItem';
+import { CloseIcon, PlaneIcon, WarningIcon } from '@antscorp/antsomi-ui/es/components/icons';
+// Styled
+import { ChatBoxWrapper, ChatBoxHeader, ChatBoxBody, ChatBoxFooter, WarningWrapper, InputWrapper, } from './styled';
+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);
+    const [limitMessage, setLimitMessage] = useState('');
+    const [isAnswering, setAnswering] = useState(false);
+    const [showPlaceHolder, setShowPlaceholder] = useState(false);
+    const [conversation, setConversation] = useState([]);
+    const bodyRef = useRef(null);
+    const inputRef = useRef(null);
+    const initRef = useRef(false);
+    const answeringRef = useRef(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 = "assistant" /* Role.Assistant */) => {
+        setConversation(prev => [
+            ...prev,
+            {
+                id: crypto.randomUUID(),
+                role,
+                content,
+            },
+        ]);
+    };
+    const loadConversation = () => __awaiter(void 0, void 0, void 0, function* () {
+        const result = yield axios.get(`${domain}/api/chat/performance`, {
+            params: {
+                _token: token,
+                _user_id: userId,
+                _account_id: userId,
+                format: 'grid',
+                objType: 7,
+                limit: 1000,
+                page: 1,
+            },
+        });
+        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,
+                });
+            });
+            setConversation(initConversation);
+        }
+    });
+    const request = (question) => __awaiter(void 0, void 0, void 0, function* () {
+        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`, {
+            message: question,
+        }, {
+            params: {
+                _token: token,
+                _user_id: userId,
+                _account_id: userId,
+            },
+        });
+        if (result && result.data && result.data.data && result.data.data.message) {
+            addMessage(result.data.data.message);
+        }
+        else if (result && result.data && result.data.code === 400) {
+            setLimitMessage(result.data.message);
+        }
+    });
+    useEffect(() => {
+        loadConversation();
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, []);
+    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 || limitMessage || !question || !question.trim()) {
+                return;
+            }
+            initRef.current = true;
+            answeringRef.current = true;
+            setAnswering(true);
+            addMessage(question, "user" /* Role.User */);
+            request(question);
+            setQuestion('');
+        }
+    };
+    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') }))))));
+};
+ChatBox.defaultProps = {
+    withoutBox: false,
+    avatar: '',
+};

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

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

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect, useRef } from 'react';
+import clsx from 'clsx';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+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 } 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: "reactMarkDown" }, text));
+            contentRef.current = newContent;
+            return contentRef.current;
+        }
+        catch (error) {
+            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))));
+};
+MessageItem.defaultProps = {
+    renderType: 'markdown',
+};
+export default React.memo(MessageItem);

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

@@ -0,0 +1,6 @@
+import { Role } from './types';
+export declare const CONVERSATION: {
+    role: Role;
+    content: string;
+}[];
+export declare const LIMIT_MESSAGE = 10;

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

@@ -0,0 +1,51 @@
+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;

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

@@ -0,0 +1 @@
+export { ChatBox } from './ChatBox';

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

@@ -0,0 +1 @@
+export { ChatBox } from './ChatBox';

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

@@ -0,0 +1,10 @@
+export declare const ChatBoxWrapper: import("styled-components").StyledComponent<"div", any, {
+    withoutBox?: boolean | undefined;
+}, 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>;