@antscorp/antsomi-ui 1.3.2 → 1.3.3

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

@@ -0,0 +1,280 @@
+var _a;
+// Libraries
+import styled from 'styled-components';
+// Constantsim
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const ChatBoxWrapper = styled.div `
+  box-sizing: border-box;
+  width: ${props => (props.withoutBox ? '100%' : '450px')};
+  min-height: ${props => (props.withoutBox ? '100%' : '300px')};
+  max-height: ${props => (props.withoutBox ? 'unset' : 'calc(100vh - 57px)')};
+  position: ${props => (props.withoutBox ? 'static' : 'fixed')};
+  right: 5px;
+  bottom: 0px;
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+
+  font-family: Roboto, san-serif;
+  border: 1px solid #e5e5e5;
+`;
+export const ChatBoxHeader = styled.div `
+  flex: 0 0 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0 10px 0 20px;
+  background: #fff;
+
+  .title {
+    font-size: 16px;
+  }
+
+  .close-btn {
+    border: none;
+    padding: 0;
+  }
+`;
+export const ChatBoxBody = styled.div `
+  flex: 1;
+  background: #fff;
+  // max-height: calc(100vh - 150px);
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+
+  padding: 11px 0;
+
+  ::-webkit-scrollbar {
+    height: 1rem;
+    width: 0.5rem;
+  }
+  ::-webkit-scrollbar-thumb {
+    --tw-border-opacity: 1;
+    background-color: rgba(217, 217, 227, 0.8);
+    border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+    border-radius: 9999px;
+    border-width: 1px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    border-radius: 9999px;
+  }
+
+  // &::-webkit-scrollbar {
+  //   -webkit-appearance: none;
+  //   background-color: #eee;
+  //   width: 8px;
+  //   height: 8px;
+  // }
+  // &::-webkit-scrollbar-thumb {
+  //   background-color: rgba(0, 0, 0, 0.2);
+  //   -webkit-border-top-right-radius: 4px;
+  //   -webkit-border-bottom-right-radius: 4px;
+  //   -webkit-border-bottom-left-radius: 4px;
+  //   -webkit-border-top-left-radius: 4px;
+  //   border-top-right-radius: 4px;
+  //   border-bottom-right-radius: 4px;
+  //   border-bottom-left-radius: 4px;
+  //   border-top-left-radius: 4px;
+  // }
+`;
+export const ChatBoxFooter = styled.div `
+  background: #fff;
+`;
+export const MessageItemWrapper = styled.div `
+  margin: 0 11px;
+  padding: 10px;
+  border-radius: 3px;
+  background: transparent;
+
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  // text-align: justify;
+
+  &.greyBg {
+    background: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw2};
+  }
+
+  .icon {
+    min-width: 30px;
+    min-height: 30px;
+  }
+  .gpt {
+    background-image: url(/assets/images/gpt.png);
+  }
+  .user {
+    min-width: 24px;
+    min-height: 24px;
+  }
+  .avatar {
+    width: 30px;
+    height: 30px;
+    object-fit: contain;
+  }
+  .reactMarkDown {
+    white-space: pre-wrap;
+  }
+  .reactMarkDown * {
+    font-size: 12px;
+    line-height: 1.5;
+  }
+  .reactMarkDown > *:first-child {
+    margin-top: 0 !important;
+  }
+  .reactMarkDown ol {
+    padding-inline-start: 12px !important;
+  }
+  .reactMarkDown p,
+  .reactMarkDown ol,
+  .reactMarkDown ul {
+    margin: 0 !important;
+    margin-block: 0 !important;
+  }
+  .reactMarkDown ol,
+  .reactMarkDown ul {
+    line-height: 0 !important;
+  }
+  .reactMarkDown ol :not(ol):not(ul),
+  .reactMarkDown ul :not(ol):not(ul) {
+    line-height: 1.5 !important;
+  }
+
+  .typing {
+    overflow: hidden; /* Ensures the content is not revealed until the animation */
+    border-right: 0.15em solid orange; /* The typwriter cursor */
+    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;
+  }
+
+  @keyframes cursor-blink {
+    to {
+      visibility: hidden;
+    }
+  }
+
+  .ants-text-streaming > div {
+    white-space: pre-wrap;
+  }
+
+  .ants-text-streaming > div > :not(ol):not(ul):not(pre):last-child,
+  .ants-text-streaming > div > ol:last-child li:last-child,
+  .ants-text-streaming > div > ul:last-child li:last-child {
+    white-space: pre-wrap !important;
+  }
+  // .ants-text-streaming > div > pre:last-child code:last-child span:last-child {
+  //   white-space: nowrap !important;
+  // }
+
+  .ants-text-streaming > div > :not(ol):not(ul):not(pre):last-child:after,
+  .ants-text-streaming > div > ol:last-child > li:last-child > *:last-child:after,
+  .ants-text-streaming > div > pre:last-child > code:last-child > span:last-child:after,
+  .ants-text-streaming > div > ul:last-child > li:last-child:after {
+    -webkit-animation: cursor-blink 1s steps(5, start) infinite;
+    animation: cursor-blink 1s steps(5, start) infinite;
+    content: '▋';
+    margin-left: 0.25rem;
+    vertical-align: baseline;
+    line-height: 1.5;
+  }
+
+  // .mes-content,
+  // .mes-content * {
+  //   max-width: 100%;
+  //   overflow: auto;
+  //   font-size: 14px;
+  // }
+  // .mes-content > p:first-child {
+  //   margin-top: 0 !important;
+  // }
+  .mes-content pre {
+    ::-webkit-scrollbar {
+      height: 0.5rem;
+    }
+    ::-webkit-scrollbar-thumb {
+      --tw-border-opacity: 1;
+      background-color: rgba(217, 217, 227, 0.8);
+      border-color: rgba(255, 255, 255, var(--tw-border-opacity));
+      border-radius: 9999px;
+      border-width: 1px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: transparent;
+      border-radius: 9999px;
+    }
+  }
+  code {
+    white-space: pre-wrap;
+  }
+`;
+export const WarningWrapper = styled.div `
+  padding: 10px;
+  display: flex;
+  align-item: flex-start;
+  gap: 10px;
+  border: 1px solid #fec9c9;
+  background: #fec9c9;
+  margin: 0 10px;
+
+  .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;
+
+  .input {
+    border: none;
+    font-size: 12px;
+
+    &:focus {
+      outline: none !important;
+      box-shadow: none !important;
+    }
+  }
+  .submit-btn {
+    border: none;
+    padding: 0;
+    border-radius: 50%;
+    aspect-ratio: 1;
+    // border: 1px solid;
+    position: relative;
+    left: -3px;
+
+    &:focus {
+      outline: none !important;
+    }
+    &.disabled {
+      opacity: 0.65;
+    }
+  }
+  .icon {
+    flex: 0 0 24px;
+    position: relative;
+    left: 3px;
+  }
+`;
+export const TypingCursor = styled.div `
+  width: 3px;
+  height: 10px;
+  background: #000;
+  animation: cursor-blink 1.5s steps(2) infinite;
+  // animation:
+  //   typing 3.5s steps(40, end),
+  //   blink-caret .75s step-end infinite;
+`;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Collapse: import("react").ForwardRefExoticComponent<import("antd").CollapseProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Panel: import("react").ForwardRefExoticComponent<import("antd").CollapsePanelProps & import("react").RefAttributes<HTMLDivElement>>;
+};

package/es/components/molecules/Collapse/Collapse.js

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

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

@@ -0,0 +1 @@
+export * from './Collapse';

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

@@ -0,0 +1 @@
+export * from './Collapse';

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

@@ -0,0 +1,3 @@
+// Styled
+import { StyledChromePicker } from './styled';
+export const ChromePicker = StyledChromePicker;

package/es/components/molecules/ColorPicker/ChromePicker/styled.js

@@ -0,0 +1,15 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { ChromePicker } from 'react-color';
+export const StyledChromePicker = styled(ChromePicker) `
+  padding: 0px !important;
+  --tw-shadow: 0 0 #0000 !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow) !important;
+
+  div + div {
+    padding-left: 0px !important;
+    padding-right: 0px !important;
+  }
+`;