box-ui-elements 19.0.0-beta.9 → 19.0.0

package/src/features/collapsible-sidebar/__tests__/__snapshots__/CollapsibleSidebarNav.test.js.snap

@@ -7,14 +7,14 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
 >
   <mockConstructor
     value={
-      Object {
+      {
         "isScrolling": false,
       }
     }
   >
     <Scrollbar
       className="foobar"
-      contentProps={Object {}}
+      contentProps={{}}
       fallbackScrollbarWidth={20}
       minimalThumbSize={30}
       momentum={true}
@@ -23,25 +23,25 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
       onUpdate={[Function]}
       renderer={[Function]}
       scrollDetectionThreshold={100}
-      scrollerProps={Object {}}
+      scrollerProps={{}}
       style={
-        Object {
+        {
           "flexGrow": 1,
           "height": "auto",
           "width": "100%",
         }
       }
-      thumbXProps={Object {}}
+      thumbXProps={{}}
       thumbYProps={
-        Object {
+        {
           "renderer": [Function],
         }
       }
       trackClickBehavior="jump"
-      trackXProps={Object {}}
+      trackXProps={{}}
       trackYProps={
-        Object {
-          "style": Object {
+        {
+          "style": {
             "background": "none",
             "height": "100%",
             "marginRight": "1px",
@@ -50,12 +50,12 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
           },
         }
       }
-      wrapperProps={Object {}}
+      wrapperProps={{}}
     >
       <CollapsibleSidebarNav__StyledScrollContainer
         className="ScrollbarsCustom foobar"
         style={
-          Object {
+          {
             "flexGrow": 1,
             "height": "auto",
             "position": "relative",
@@ -66,7 +66,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
         <div
           className="CollapsibleSidebarNav__StyledScrollContainer-csqupn-1 cFwMnb ScrollbarsCustom foobar"
           style={
-            Object {
+            {
               "flexGrow": 1,
               "height": "auto",
               "position": "relative",
@@ -78,7 +78,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
             className="ScrollbarsCustom-Wrapper"
             key="ScrollbarsCustom-Wrapper"
             style={
-              Object {
+              {
                 "bottom": 0,
                 "left": 0,
                 "overflow": "hidden",
@@ -93,7 +93,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
               key="ScrollbarsCustom-Scroller"
               onScroll={[Function]}
               style={
-                Object {
+                {
                   "WebkitOverflowScrolling": "touch",
                   "bottom": 0,
                   "left": 0,
@@ -113,7 +113,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                 className="ScrollbarsCustom-Content"
                 key="ScrollbarsCustom-Content"
                 style={
-                  Object {
+                  {
                     "boxSizing": "border-box",
                     "minHeight": "100%",
                     "minWidth": "100%",
@@ -144,7 +144,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
             key="ScrollbarsCustom-TrackY"
             onClick={[Function]}
             style={
-              Object {
+              {
                 "background": "none",
                 "borderRadius": 4,
                 "display": "none",
@@ -162,7 +162,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
             <div
               className="ScrollbarsCustom-Track ScrollbarsCustom-TrackY"
               style={
-                Object {
+                {
                   "background": "none",
                   "borderRadius": 4,
                   "display": "none",
@@ -185,7 +185,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                 onDragEnd={[Function]}
                 renderer={[Function]}
                 style={
-                  Object {
+                  {
                     "borderRadius": 4,
                     "cursor": "pointer",
                     "height": 0,
@@ -215,7 +215,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
                     style={
-                      Object {
+                      {
                         "borderRadius": 4,
                         "cursor": "pointer",
                         "height": 0,
@@ -231,7 +231,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                       onTouchEnd={[Function]}
                       onTouchStart={[Function]}
                       style={
-                        Object {
+                        {
                           "borderRadius": 4,
                           "cursor": "pointer",
                           "height": 0,
@@ -251,7 +251,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
             key="ScrollbarsCustom-TrackX"
             onClick={[Function]}
             style={
-              Object {
+              {
                 "background": "rgba(0,0,0,.1)",
                 "borderRadius": 4,
                 "bottom": 0,
@@ -268,7 +268,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
             <div
               className="ScrollbarsCustom-Track ScrollbarsCustom-TrackX"
               style={
-                Object {
+                {
                   "background": "rgba(0,0,0,.1)",
                   "borderRadius": 4,
                   "bottom": 0,
@@ -289,7 +289,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                 onDrag={[Function]}
                 onDragEnd={[Function]}
                 style={
-                  Object {
+                  {
                     "background": "rgba(0,0,0,.4)",
                     "borderRadius": 4,
                     "cursor": "pointer",
@@ -319,7 +319,7 @@ exports[`components/core/collapsible-sidebar/CollapsibleSidebarNav render 1`] =
                     onTouchEnd={[Function]}
                     onTouchStart={[Function]}
                     style={
-                      Object {
+                      {
                         "background": "rgba(0,0,0,.4)",
                         "borderRadius": 4,
                         "cursor": "pointer",

package/src/features/content-answers/Answer.scss

@@ -0,0 +1,4 @@
+.bdl-Answer {
+    font-size: 15px;
+    white-space: pre-wrap;
+}

package/src/features/content-answers/Answer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import ContentAnswersGridCard from './ContentAnswersGridCard';
+import LoadingElement from './LoadingElement';
+
+import './Answer.scss';
+
+type Props = {
+    answer?: string;
+    isLoading: boolean;
+};
+
+const Answer = ({ answer, isLoading }: Props) => {
+    return (
+        <div className="bdl-Answer" data-testid="Answer">
+            {answer && <ContentAnswersGridCard>{answer}</ContentAnswersGridCard>}
+            {!answer && isLoading && <LoadingElement />}
+        </div>
+    );
+};
+
+export default Answer;

package/src/features/content-answers/ContentAnswers.tsx

@@ -0,0 +1,60 @@
+import React, { useCallback, useState } from 'react';
+
+import getProp from 'lodash/get';
+import ContentAnswersModal from './ContentAnswersModal';
+import ContentAnswersOpenButton from './ContentAnswersOpenButton';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { BoxItem } from '../../common/types/core';
+
+type ExternalProps = {
+    show?: boolean;
+};
+
+type Props = {
+    file: BoxItem;
+};
+
+const ContentAnswers = ({ file }: Props) => {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [hasQuestions, setHasQuestions] = useState(false);
+    const [isHighlighted, setIsHighlighted] = useState(false);
+
+    const handleClick = useCallback(() => {
+        setIsModalOpen(true);
+    }, [setIsModalOpen]);
+
+    const handleClose = useCallback(() => {
+        setIsModalOpen(false);
+        if (hasQuestions) {
+            setIsHighlighted(true);
+        }
+    }, [hasQuestions]);
+
+    const handleAsk = useCallback(() => {
+        setHasQuestions(true);
+    }, []);
+
+    const currentExtension = getProp(file, 'extension');
+    return (
+        <div className="bdl-ContentAnswers">
+            <ContentAnswersOpenButton
+                data-testid="content-answers-open-button"
+                fileExtension={currentExtension}
+                isHighlighted={isHighlighted}
+                isModalOpen={isModalOpen}
+                onClick={handleClick}
+            />
+            <ContentAnswersModal
+                data-testid="content-answers-modal"
+                file={file}
+                isOpen={isModalOpen}
+                onAsk={handleAsk}
+                onRequestClose={handleClose}
+            />
+        </div>
+    );
+};
+
+export type ContentAnswersProps = ExternalProps;
+export default ContentAnswers;

package/src/features/content-answers/ContentAnswersGridCard.scss

@@ -0,0 +1,26 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersGridCard {
+    margin-top: $bdl-grid-unit * 4;
+
+    .bdl-ContentAnswersGridCard-icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $bdl-grid-unit * 8;
+        height: $bdl-grid-unit * 8;
+        background: $bdl-light-blue-20;
+        border-radius: 50%;
+    }
+
+    .bdl-ContentAnswersGridCard-body {
+        padding: $bdl-grid-unit * 4;
+        background-color: $white;
+        border: 1px solid $bdl-gray-10;
+        border-radius: $bdl-border-radius-size-xlarge;
+    }
+
+    .bdl-Media-figure {
+        margin: $bdl-grid-unit * 4 $bdl-grid-unit * 3 0 0;
+    }
+}

package/src/features/content-answers/ContentAnswersGridCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import BoxAi from '../../icon/line/BoxAi';
+import Media from '../../components/media';
+
+import './ContentAnswersGridCard.scss';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const ContentAnswersGridCard = ({ children }: Props) => {
+    return (
+        <Media className="bdl-ContentAnswersGridCard" data-testid="content-answers-grid-card">
+            <Media.Figure>
+                <div className="bdl-ContentAnswersGridCard-icon">
+                    <BoxAi height={16} width={16} />
+                </div>
+            </Media.Figure>
+            <Media.Body>
+                <div className="bdl-ContentAnswersGridCard-body">{children}</div>
+            </Media.Body>
+        </Media>
+    );
+};
+
+export default ContentAnswersGridCard;

package/src/features/content-answers/ContentAnswersModal.scss

@@ -0,0 +1,56 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersModal {
+    .modal-dialog-container {
+        display: flex;
+        flex-basis: 0;
+        width: 100%;
+        height: 100%;
+        max-height: 702px;
+    }
+
+    .modal-dialog {
+        width: 768px;
+        height: 100%;
+        max-height: 702px;
+        padding: 0;
+        background-color: $bdl-gray-05;
+    }
+
+    .modal-header-container {
+        z-index: 1;
+        margin: 0;
+        padding: $bdl-grid-unit * 4 $bdl-grid-unit * 5;
+        background-color: white;
+        border-radius: $bdl-border-radius-size-xlarge $bdl-border-radius-size-xlarge 0 0;
+        box-shadow: 0 0 8px rgba(0, 0, 0, .05), 0 1px 0 $bdl-gray-10;
+
+        .modal-title {
+            display: flex;
+            align-items: center;
+        }
+
+        .bdl-BoxAiLogo {
+            margin-right: $bdl-grid-unit * 3;
+        }
+    }
+
+    .modal-content {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        max-height: 638px;
+        margin-top: 0;
+        overflow: hidden;
+    }
+
+    .modal-close-button {
+        top: 20px;
+    }
+
+    .bdl-ContentAnswersModalFooter-submitButton {
+        height: $bdl-btn-height-large;
+        margin: 0;
+        font-size: 14px;
+    }
+}

package/src/features/content-answers/ContentAnswersModal.tsx

@@ -0,0 +1,136 @@
+import React, { useState, useCallback } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import withCurrentUser from '../../elements/common/current-user';
+import BoxAiLogo from '../../icon/logo/BoxAiLogo';
+import ContentAnswersModalContent from './ContentAnswersModalContent';
+import ContentAnswersModalFooter from './ContentAnswersModalFooter';
+// @ts-ignore flow import
+import Modal from '../../components/modal/Modal';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { BoxItem, User } from '../../../common/types/core';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { withAPIContext } from '../../elements/common/api-context';
+// @ts-ignore: no ts definition
+import APIFactory from '../../api';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { ElementsXhrError } from '../../common/types/api';
+
+import messages from './messages';
+
+import './ContentAnswersModal.scss';
+
+export type QuestionType = {
+    answer?: string;
+    createdAt?: string;
+    error?: ElementsXhrError;
+    prompt: string;
+};
+
+type Props = {
+    api: APIFactory;
+    currentUser?: User;
+    file: BoxItem;
+    isOpen: boolean;
+    onAsk: () => void;
+    onRequestClose: () => void;
+};
+
+const ContentAnswersModal = ({ api, currentUser, file, isOpen, onAsk, onRequestClose }: Props) => {
+    const fileName = file && file.name;
+    const [hasError, setHasError] = useState<boolean>(false);
+    const [isLoading, setIsLoading] = useState<boolean>(false);
+    const [questions, setQuestions] = useState<QuestionType[]>([]);
+
+    const handleSuccessCallback = useCallback((response): void => {
+        const question = {
+            answer: response.data.answer,
+            createdAt: response.data.created_at,
+        };
+
+        setQuestions(prevState => {
+            const lastQuestion = prevState[prevState.length - 1];
+            return [...prevState.slice(0, -1), { ...lastQuestion, ...question }];
+        });
+    }, []);
+
+    const handleErrorCallback = useCallback((error: ElementsXhrError): void => {
+        setHasError(true);
+        setQuestions(prevState => {
+            const lastQuestion = prevState[prevState.length - 1];
+            return [...prevState.slice(0, -1), { ...lastQuestion, error }];
+        });
+    }, []);
+
+    const handleAsk = useCallback(
+        async (prompt: string, isRetry = false) => {
+            setHasError(false);
+            onAsk();
+            const id = file && file.id;
+            const items = [
+                {
+                    id,
+                    type: 'file',
+                },
+            ];
+
+            const nextQuestions = [...(isRetry ? questions.slice(0, -1) : questions)];
+            setQuestions([...nextQuestions, { prompt }]);
+
+            setIsLoading(true);
+            try {
+                const response = await api.getIntelligenceAPI(true).ask(prompt, items);
+                handleSuccessCallback(response);
+            } catch (e) {
+                handleErrorCallback(e);
+            }
+            setIsLoading(false);
+        },
+        [api, file, handleErrorCallback, handleSuccessCallback, onAsk, questions],
+    );
+
+    const handleRetry = useCallback(() => {
+        handleAsk(questions[questions.length - 1].prompt, true);
+    }, [handleAsk, questions]);
+
+    return (
+        <Modal
+            className="bdl-ContentAnswersModal"
+            data-testid="content-answers-modal"
+            isOpen={isOpen}
+            onRequestClose={onRequestClose}
+            title={
+                <>
+                    <BoxAiLogo
+                        className="bdl-BoxAiLogo"
+                        data-testid="content-answers-icon-color"
+                        width={32}
+                        height={32}
+                    />
+                    <FormattedMessage {...messages.contentAnswersTitle} />
+                </>
+            }
+        >
+            <ContentAnswersModalContent
+                currentUser={currentUser}
+                data-testid="content-answers-modal-content"
+                fileName={fileName}
+                isLoading={isLoading}
+                questions={questions}
+            />
+            <ContentAnswersModalFooter
+                currentUser={currentUser}
+                data-testid="content-answers-modal-footer"
+                hasError={hasError}
+                isLoading={isLoading}
+                onAsk={handleAsk}
+                onRetry={handleRetry}
+            />
+        </Modal>
+    );
+};
+
+export default withAPIContext(withCurrentUser(ContentAnswersModal));

package/src/features/content-answers/ContentAnswersModalContent.scss

@@ -0,0 +1,12 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersModalContent {
+    flex: 1 1 auto;
+    width: auto;
+    padding: 0 $bdl-grid-unit * 5 $bdl-grid-unit * 5 $bdl-grid-unit * 5;
+    overflow: auto;
+
+    ul {
+        margin: 0;
+    }
+}

package/src/features/content-answers/ContentAnswersModalContent.tsx

@@ -0,0 +1,64 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+
+import Answer from './Answer';
+import InlineError from './InlineError';
+import Question from './Question';
+import WelcomeMessage from './WelcomeMessage';
+import { QuestionType } from './ContentAnswersModal';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { User } from '../../../common/types/core';
+
+import './ContentAnswersModalContent.scss';
+
+type Props = {
+    currentUser?: User;
+    fileName: string;
+    isLoading: boolean;
+    questions: QuestionType[];
+};
+
+const ContentAnswersModalContent = ({ currentUser, fileName, isLoading, questions }: Props) => {
+    const messagesEndRef = useRef<HTMLDivElement | null>(null);
+
+    const handleScrollToBottom = useCallback(
+        behavior => {
+            if (messagesEndRef.current && messagesEndRef.current.scrollIntoView) {
+                messagesEndRef.current.scrollIntoView({ behavior });
+            }
+        },
+        [messagesEndRef],
+    );
+
+    // scroll to bottom instantly when modal opens
+    useEffect(() => {
+        setTimeout(() => {
+            handleScrollToBottom('instant');
+        }, 0);
+    }, [handleScrollToBottom]);
+
+    // scroll to bottom for both cases that answer is loading and answer has been generated
+    useEffect(() => {
+        handleScrollToBottom('smooth');
+    }, [handleScrollToBottom, isLoading]);
+
+    return (
+        <div className="bdl-ContentAnswersModalContent" data-testid="content-answers-modal-content">
+            <WelcomeMessage fileName={fileName} />
+            <ul>
+                {questions.map(({ prompt, error, answer = '' }, index) => {
+                    const hasError = !!error;
+                    return (
+                        <li key={index}>
+                            <Question currentUser={currentUser} prompt={prompt} />
+                            {hasError ? <InlineError /> : <Answer answer={answer} isLoading={isLoading} />}
+                        </li>
+                    );
+                })}
+            </ul>
+            <div ref={messagesEndRef} />
+        </div>
+    );
+};
+
+export default ContentAnswersModalContent;

package/src/features/content-answers/ContentAnswersModalError.scss

@@ -0,0 +1,28 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersModalError {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    text-align: center;
+
+    .bdl-ContentAnswersModalError-illustration {
+        margin-block-end: 1.5rem;
+    }
+
+    h2 {
+        margin: 0;
+        font-weight: bold;
+        font-size: 1rem;
+        margin-block-end: .75rem;
+    }
+
+    p {
+        margin: 0;
+        font-weight: normal;
+        font-size: .875rem;
+        letter-spacing: .01875rem;
+    }
+}

package/src/features/content-answers/ContentAnswersModalError.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import Unplugged140 from '../../illustration/Unplugged140';
+
+import messages from './messages';
+
+import './ContentAnswersModalError.scss';
+
+const ContentAnswersModalError = () => {
+    return (
+        <div className="bdl-ContentAnswersModalError">
+            <div
+                className="bdl-ContentAnswersModalError-illustration"
+                data-testid="content-answers-modal-error-illustration"
+            >
+                <Unplugged140 />
+            </div>
+
+            <h2 data-testid="content-answers-modal-error-heading">
+                <FormattedMessage {...messages.intelligenceUnavailableHeading} />
+            </h2>
+            <p data-testid="content-answers-modal-error-description">
+                <FormattedMessage {...messages.intelligenceUnavailableDescription} />
+            </p>
+            <p data-testid="content-answers-modal-error-tryagain">
+                <FormattedMessage {...messages.intelligenceUnavailableTryAgain} />
+            </p>
+        </div>
+    );
+};
+
+export default ContentAnswersModalError;