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

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

@@ -0,0 +1,42 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersModalFooter-questionInput {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: end;
+    padding: $bdl-grid-unit * 4 $bdl-grid-unit * 5;
+    background: $white;
+    border-radius: 0 0 $bdl-border-radius-size-xlarge $bdl-border-radius-size-xlarge;
+    box-shadow: 0 0 8px rgba(0, 0, 0, .05), 0 -1px 0 $bdl-gray-10;
+
+    .bdl-ContentAnswersModalFooter-avatar {
+        height: $bdl-grid-unit * 8;
+        margin-bottom: $bdl-grid-unit;
+    }
+
+    .text-area-container {
+        width: 100%;
+        margin: 0 $bdl-grid-unit * 4;
+    }
+
+    textarea {
+        width: 100%;
+        height: $bdl-grid-unit * 10;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+        font-size: 14px;
+        line-height: 1.25rem;
+        letter-spacing: .01875rem;
+        border: none;
+        border-radius: $bdl-border-radius-size-med;
+        box-shadow: 0 0 0 .0625rem $bdl-gray-50;
+        padding-block: .625rem;
+        padding-inline: .75rem;
+    }
+
+    textarea:focus {
+        border: 1.5px solid $bdl-box-blue;
+    }
+}

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

@@ -0,0 +1,103 @@
+import React, { useCallback, useState } from 'react';
+import { injectIntl, FormattedMessage, IntlShape } from 'react-intl';
+
+import Avatar from '../../components/avatar';
+import PrimaryButton from '../../components/primary-button';
+// @ts-ignore flow import
+import TextArea from '../../components/text-area';
+import { TEXT_AREA } from './constants';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { User } from '../../../common/types/core';
+import ContentAnswersModalFooterActions from './ContentAnswersModalFooterActions';
+
+import messages from './messages';
+
+import './ContentAnswersModalFooter.scss';
+
+type Props = {
+    currentUser?: User;
+    hasError: boolean;
+    intl: IntlShape;
+    isLoading: boolean;
+    onAsk: (prompt: string) => void;
+    onRetry: () => void;
+};
+
+const ContentAnswersModalFooter = ({ currentUser, hasError, intl, isLoading, onAsk, onRetry }: Props) => {
+    const { formatMessage } = intl;
+    const { id, name } = currentUser || {};
+    const [prompt, setPrompt] = useState('');
+    const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+    const [hasMaxCharacterError, setHasMaxCharacterError] = useState(false);
+
+    const handleInputChange = useCallback(
+        (event: React.FormEvent<HTMLInputElement>) => {
+            let currentInput = event.currentTarget.value;
+            if (currentInput.length > TEXT_AREA.MAX_LENGTH) {
+                currentInput = currentInput.slice(0, TEXT_AREA.MAX_LENGTH);
+            }
+            setPrompt(currentInput);
+            setHasMaxCharacterError(currentInput.length >= TEXT_AREA.MAX_LENGTH);
+            if (!isLoading) {
+                setIsSubmitDisabled(currentInput.trim().length === 0);
+            }
+        },
+        [isLoading],
+    );
+
+    const handleOnAsk = useCallback(() => {
+        if (!isSubmitDisabled && prompt) {
+            onAsk(prompt);
+            setPrompt('');
+            setIsSubmitDisabled(true);
+        }
+    }, [isSubmitDisabled, onAsk, prompt]);
+
+    const handleKeyDown = useCallback(
+        event => {
+            if (event.keyCode === 13 && event.shiftKey === false) {
+                event.preventDefault();
+                handleOnAsk();
+            }
+        },
+        [handleOnAsk],
+    );
+
+    return (
+        <div className="bdl-ContentAnswersModalFooter">
+            <ContentAnswersModalFooterActions hasError={hasError} onRetry={onRetry} />
+            <div className="bdl-ContentAnswersModalFooter-questionInput">
+                <div className="bdl-ContentAnswersModalFooter-avatar">
+                    <Avatar id={id} name={name} />
+                </div>
+                <TextArea
+                    data-testid="content-answers-question-input"
+                    error={
+                        hasMaxCharacterError &&
+                        formatMessage(messages.maxCharactersReachedError, {
+                            characterLimit: TEXT_AREA.MAX_LENGTH,
+                        })
+                    }
+                    hideLabel
+                    label={formatMessage(messages.askQuestionPlaceholder)}
+                    maxLength={TEXT_AREA.MAX_LENGTH}
+                    onChange={handleInputChange}
+                    placeholder={formatMessage(messages.askQuestionPlaceholder)}
+                    value={prompt}
+                    onKeyDown={handleKeyDown}
+                />
+                <PrimaryButton
+                    className="bdl-ContentAnswersModalFooter-submitButton"
+                    data-testid="content-answers-submit-button"
+                    isDisabled={isSubmitDisabled}
+                    onClick={handleOnAsk}
+                >
+                    <FormattedMessage {...messages.ask} />
+                </PrimaryButton>
+            </div>
+        </div>
+    );
+};
+
+export default injectIntl(ContentAnswersModalFooter);

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

@@ -0,0 +1,17 @@
+@import '../../styles/variables';
+
+.bdl-ContentAnswersModalFooterActions {
+    position: relative;
+    top: -$bdl-grid-unit * 4;
+    display: flex;
+    padding: $bdl-grid-unit * 3 0 0 0;
+}
+
+.bdl-ContentAnswersModalFooterActions-button {
+    margin: auto;
+
+    &:not(.bdl-is-disabled):focus {
+        border: 1px solid #bcbcbc;
+        box-shadow: 0 0 0 1px $white, 0 0 0 3px $bdl-light-blue;
+    }
+}

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

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { FormattedMessage } from 'react-intl';
+import Button from '../../components/button';
+
+import messages from './messages';
+
+import './ContentAnswersModalFooterActions.scss';
+
+interface Props {
+    hasError: boolean;
+    onRetry: () => void;
+}
+
+const ContentAnswersModalFooterActions = ({ hasError, onRetry }: Props) => {
+    const retryButtonRef = React.useRef<HTMLButtonElement | null>(null);
+
+    React.useEffect(() => {
+        if (retryButtonRef.current && hasError) {
+            retryButtonRef.current.focus();
+        }
+    }, [retryButtonRef, hasError]);
+
+    if (!hasError) {
+        return null;
+    }
+
+    return (
+        <div className="bdl-ContentAnswersModalFooterActions" data-testid="content-answers-modal-footer-actions">
+            <Button
+                setRef={(ref: HTMLButtonElement) => {
+                    retryButtonRef.current = ref;
+                }}
+                className="bdl-ContentAnswersModalFooterActions-button"
+                data-testid="content-answers-retry-button"
+                onClick={onRetry}
+                size="large"
+            >
+                <FormattedMessage {...messages.retryResponse} />
+            </Button>
+        </div>
+    );
+};
+
+export default ContentAnswersModalFooterActions;

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

@@ -0,0 +1,54 @@
+@import '../../styles/variables';
+
+@mixin BackgroundGradient {
+    background: linear-gradient(135deg, #fe01da 0%, $bdl-light-blue 100%);
+    border: 1px solid #ffffff4d;
+}
+
+@mixin BackgroundGradientHover {
+    background: linear-gradient(0deg, #2223, #2223), linear-gradient(135deg, #fe01da 0%, $bdl-light-blue 100%);
+    border: 1px solid #2222224d;
+}
+
+.bdl-ContentAnswersOpenButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: $bdl-btn-height-large;
+    background-color: $bdl-gray-02;
+    border: none;
+
+    .btn-content {
+        display: flex;
+    }
+
+    &:not(.bdl-is-disabled):focus,
+    &:not(.bdl-is-disabled):hover {
+        background-color: $bdl-gray-10;
+    }
+
+    &.bdl-ContentAnswersOpenButton--hasQuestions {
+        @include BackgroundGradient;
+
+        .bdl-ContentAnswersOpenButton-icon {
+            path {
+                fill: $white;
+            }
+        }
+
+        &:hover {
+            @include BackgroundGradientHover;
+        }
+
+        &:not(.bdl-is-disabled):focus {
+            @include BackgroundGradientHover;
+
+            box-shadow: 0 0 0 1px $white, 0 0 0 3px $bdl-light-blue;
+        }
+    }
+
+    .bdl-ContentAnswersOpenButton-tooltip {
+        text-align: center;
+    }
+}

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

@@ -0,0 +1,74 @@
+import React, { useEffect } from 'react';
+import { injectIntl, IntlShape } from 'react-intl';
+import classNames from 'classnames';
+
+import BoxAiLogo from '../../icon/logo/BoxAiLogo';
+import Button from '../../components/button';
+import Tooltip from '../../components/tooltip';
+import { CODE_FILE_EXTENSIONS, DOCUMENT_FILE_EXTENSIONS, TEXT_FILE_EXTENSIONS } from './constants';
+
+import messages from './messages';
+
+import './ContentAnswersOpenButton.scss';
+
+interface ContentAnswersOpenButtonProps {
+    fileExtension: string;
+    intl: IntlShape;
+    isHighlighted: boolean;
+    isModalOpen: boolean;
+    onClick: () => void;
+}
+
+const ContentAnswersOpenButton = ({
+    fileExtension,
+    intl,
+    isHighlighted,
+    isModalOpen,
+    onClick,
+}: ContentAnswersOpenButtonProps) => {
+    const { formatMessage } = intl;
+    const buttonRef = React.useRef<HTMLButtonElement | null>(null);
+
+    useEffect(() => {
+        if (isHighlighted && !isModalOpen && buttonRef.current) {
+            buttonRef.current.focus();
+        }
+    }, [isHighlighted, isModalOpen]);
+
+    const isAllowedFileType = (extension: string) => {
+        const allowedTypes = [...CODE_FILE_EXTENSIONS, ...DOCUMENT_FILE_EXTENSIONS, ...TEXT_FILE_EXTENSIONS];
+        return allowedTypes.includes(extension);
+    };
+
+    const getTooltipText = () => {
+        if (isHighlighted) {
+            return formatMessage(messages.hasQuestionsTooltip);
+        }
+        if (!isAllowedFileType(fileExtension)) {
+            return formatMessage(messages.disabledTooltipFileNotCompatible);
+        }
+        return formatMessage(messages.defaultTooltip);
+    };
+
+    const openButtonClassNames = classNames('bdl-ContentAnswersOpenButton', {
+        'bdl-ContentAnswersOpenButton--hasQuestions': isHighlighted,
+    });
+    return (
+        <Tooltip className="bdl-ContentAnswersOpenButton-tooltip" text={getTooltipText()}>
+            <Button
+                aria-label={formatMessage(messages.contentAnswersTitle)}
+                className={openButtonClassNames}
+                data-testid="content-answers-open-button"
+                isDisabled={!isAllowedFileType(fileExtension)}
+                onClick={onClick}
+                setRef={(ref: HTMLButtonElement) => {
+                    buttonRef.current = ref;
+                }}
+            >
+                <BoxAiLogo className="bdl-ContentAnswersOpenButton-icon" width={20} height={20} />
+            </Button>
+        </Tooltip>
+    );
+};
+
+export default injectIntl(ContentAnswersOpenButton);

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

@@ -0,0 +1,39 @@
+@import '../../styles/variables';
+
+.bdl-InlineError {
+    margin-top: $bdl-grid-unit * 4;
+
+    .bdl-InlineError-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-InlineError-text {
+        flex-grow: 1;
+        margin: 0 $bdl-grid-unit * 3;
+        font-size: $bdl-fontSize--dejaBlue;
+    }
+
+    .bdl-InlineError-alertIcon {
+        width: 20px;
+        height: 20px;
+    }
+
+    .bdl-Media-figure {
+        margin: $bdl-grid-unit * 4 $bdl-grid-unit * 3 0 0;
+    }
+
+    .bdl-Media-body {
+        display: flex;
+        align-items: center;
+        padding: $bdl-grid-unit * 3 $bdl-grid-unit * 4;
+        background-color: $bdl-watermelon-red-10;
+        border: 2px solid $bdl-watermelon-red-50;
+        border-radius: $bdl-grid-unit * 3;
+    }
+}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import BoxAi from '../../icon/line/BoxAi';
+import Media from '../../components/media';
+import TriangleAlert16 from '../../icon/line/TriangleAlert16';
+
+import messages from './messages';
+
+import './InlineError.scss';
+
+const InlineError = () => {
+    return (
+        <Media className="bdl-InlineError" data-testid="InlineError">
+            <Media.Figure>
+                <div className="bdl-InlineError-icon">
+                    <BoxAi height={16} width={16} />
+                </div>
+            </Media.Figure>
+            <Media.Body>
+                <div className="bdl-InlineError-alertIcon">
+                    <TriangleAlert16 height={20} width={20} />
+                </div>
+                <div className="bdl-InlineError-text">
+                    <FormattedMessage {...messages.inlineErrorText} />
+                </div>
+            </Media.Body>
+        </Media>
+    );
+};
+
+export default InlineError;

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

@@ -0,0 +1,4 @@
+.bdl-LoadingElement-LoadingIndicator {
+    position: relative;
+    display: inline-flex;
+}

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import LoadingIndicator, { LoadingIndicatorSize } from '../../components/loading-indicator';
+import ContentAnswersGridCard from './ContentAnswersGridCard';
+
+import './LoadingElement.scss';
+
+const LoadingElement = () => {
+    return (
+        <div className="bdl-LoadingElement" data-testid="LoadingElement">
+            <ContentAnswersGridCard>
+                <LoadingIndicator className="bdl-LoadingElement-LoadingIndicator" size={LoadingIndicatorSize.MEDIUM} />
+            </ContentAnswersGridCard>
+        </div>
+    );
+};
+
+export default LoadingElement;

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

@@ -0,0 +1,16 @@
+@import '../../styles/variables';
+
+.bdl-Question {
+    margin-top: 1rem;
+    white-space: pre-wrap;
+
+    .bdl-Media-figure {
+        margin-right: $bdl-grid-unit * 3;
+    }
+
+    .bdl-Media {
+        align-items: center;
+        color: black;
+        font-size: 15px;
+    }
+}

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

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import Media from '../../components/media';
+import Avatar from '../../components/avatar';
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { User } from '../../../common/types/core';
+
+import './Question.scss';
+
+type Props = {
+    currentUser: User;
+    prompt: string;
+};
+
+const Question = ({ currentUser, prompt }: Props) => {
+    const { id, name } = currentUser || {};
+
+    return (
+        <div className="bdl-Question" data-testid="content-answers-question">
+            <Media>
+                <Media.Figure>
+                    <Avatar id={id} name={name} />
+                </Media.Figure>
+                <Media.Body>{prompt}</Media.Body>
+            </Media>
+        </div>
+    );
+};
+export default Question;

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

@@ -0,0 +1,25 @@
+@import '../../styles/variables';
+
+.bdl-WelcomeMessage {
+    .ContentAnswersGridCard {
+        margin-top: $bdl-grid-unit * 5;
+    }
+
+    .bdl-WelcomeMessage-title {
+        margin: 0;
+        font-weight: bold;
+        font-size: 15px;
+        line-height: 20px;
+    }
+
+    .bdl-WelcomeMessage-askQuestionText {
+        margin: $bdl-grid-unit * 3 0;
+        font-size: 15px;
+    }
+
+    .bdl-WelcomeMessage-clearChatText {
+        margin: 0;
+        color: $bdl-gray-65;
+        font-size: 13px;
+    }
+}

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ContentAnswersGridCard from './ContentAnswersGridCard';
+
+import messages from './messages';
+
+import './WelcomeMessage.scss';
+
+type Props = {
+    fileName: string;
+};
+
+const WelcomeMessage = ({ fileName }: Props) => {
+    return (
+        <div className="bdl-WelcomeMessage" data-testid="content-answers-welcome-message">
+            <ContentAnswersGridCard>
+                <div className="bdl-WelcomeMessage-title">
+                    <FormattedMessage {...messages.welcomeMessageTitle} />
+                </div>
+                <div className="bdl-WelcomeMessage-askQuestionText">
+                    <FormattedMessage
+                        {...messages.welcomeAskQuestionText}
+                        values={{ name: <b data-testid="content-answers-filename">&quot;{fileName}&quot;</b> }}
+                    />
+                </div>
+                <div className="bdl-WelcomeMessage-clearChatText">
+                    <FormattedMessage {...messages.welcomeClearChatText} />
+                </div>
+            </ContentAnswersGridCard>
+        </div>
+    );
+};
+
+export default WelcomeMessage;

package/src/features/content-answers/__mocks__/mocks.ts

@@ -0,0 +1,66 @@
+// eslint-disable-next-line import/prefer-default-export
+import { QuestionType } from '../ContentAnswersModal';
+
+export const mockCurrentUser = {
+    id: '123',
+    name: 'g w',
+};
+
+export const mockFile = {
+    id: '123',
+    name: 'filename',
+    extension: 'doc',
+};
+
+export const mockQuestionsNoAnswer: QuestionType[] = [
+    {
+        prompt: 'summarize',
+    },
+];
+
+export const mockQuestionsWithAnswer: QuestionType[] = [
+    {
+        prompt: 'summarize another question',
+        answer: 'summarize answer',
+        createdAt: '',
+    },
+];
+
+export const mockQuestionsWithError: QuestionType[] = [
+    {
+        prompt: 'summarize',
+        answer: '',
+        error: new Error('error'),
+    },
+];
+
+export const mockQuestionsWithAnswerAndNoAnswer: QuestionType[] = [
+    ...mockQuestionsWithAnswer,
+    ...mockQuestionsNoAnswer,
+];
+
+export const mockApi = {
+    getIntelligenceAPI: jest.fn().mockReturnValue({
+        ask: jest.fn().mockReturnValue({
+            data: mockQuestionsWithAnswer[0],
+        }),
+    }),
+    getUsersAPI: jest.fn().mockReturnValue({
+        getUser: jest.fn().mockReturnValue({
+            data: mockCurrentUser,
+        }),
+    }),
+};
+
+export const mockApiReturnError = {
+    getIntelligenceAPI: jest.fn().mockReturnValue({
+        ask: jest.fn().mockImplementation(() => {
+            throw new Error('error');
+        }),
+    }),
+    getUsersAPI: jest.fn().mockReturnValue({
+        getUser: jest.fn().mockReturnValue({
+            data: mockCurrentUser,
+        }),
+    }),
+};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import Answer from '../Answer';
+
+describe('features/content-answers/answer', () => {
+    const renderComponent = (props?: {}) => render(<Answer isLoading={false} {...props} />);
+
+    test('should only render the answer', () => {
+        renderComponent({ answer: 'some answer' });
+
+        const answer = screen.getByText('some answer');
+        expect(answer).toBeInTheDocument();
+        expect(screen.queryByTestId('LoadingElement')).not.toBeInTheDocument();
+    });
+
+    test('should only render the Loading Element', () => {
+        renderComponent({ answer: '', isLoading: true });
+
+        const loadingElement = screen.getByTestId('LoadingElement');
+        expect(loadingElement).toBeInTheDocument();
+        // expect there is only one element at Answer Component which is loading element
+        expect(screen.getByTestId('Answer').children.length).toBe(1);
+    });
+});