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

package/es/features/content-answers/ContentAnswersModal.js

@@ -0,0 +1,111 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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
+
+// @ts-ignore: no ts definition
+// eslint-disable-next-line import/named
+import { withAPIContext } from '../../elements/common/api-context'; // @ts-ignore: no ts definition
+
+import messages from './messages';
+import './ContentAnswersModal.scss';
+
+const ContentAnswersModal = (_ref) => {
+  let {
+    api,
+    currentUser,
+    file,
+    isOpen,
+    onAsk,
+    onRequestClose
+  } = _ref;
+  const fileName = file && file.name;
+  const [hasError, setHasError] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [questions, setQuestions] = useState([]);
+  const handleSuccessCallback = useCallback(response => {
+    const question = {
+      answer: response.data.answer,
+      createdAt: response.data.created_at
+    };
+    setQuestions(prevState => {
+      const lastQuestion = prevState[prevState.length - 1];
+      return [...prevState.slice(0, -1), _objectSpread({}, lastQuestion, {}, question)];
+    });
+  }, []);
+  const handleErrorCallback = useCallback(error => {
+    setHasError(true);
+    setQuestions(prevState => {
+      const lastQuestion = prevState[prevState.length - 1];
+      return [...prevState.slice(0, -1), _objectSpread({}, lastQuestion, {
+        error
+      })];
+    });
+  }, []);
+  const handleAsk = useCallback(async function (prompt) {
+    let isRetry = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 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 React.createElement(Modal, {
+    className: "bdl-ContentAnswersModal",
+    "data-testid": "content-answers-modal",
+    isOpen: isOpen,
+    onRequestClose: onRequestClose,
+    title: React.createElement(React.Fragment, null, React.createElement(BoxAiLogo, {
+      className: "bdl-BoxAiLogo",
+      "data-testid": "content-answers-icon-color",
+      width: 32,
+      height: 32
+    }), React.createElement(FormattedMessage, messages.contentAnswersTitle))
+  }, React.createElement(ContentAnswersModalContent, {
+    currentUser: currentUser,
+    "data-testid": "content-answers-modal-content",
+    fileName: fileName,
+    isLoading: isLoading,
+    questions: questions
+  }), React.createElement(ContentAnswersModalFooter, {
+    currentUser: currentUser,
+    "data-testid": "content-answers-modal-footer",
+    hasError: hasError,
+    isLoading: isLoading,
+    onAsk: handleAsk,
+    onRetry: handleRetry
+  }));
+};
+
+export default withAPIContext(withCurrentUser(ContentAnswersModal));
+//# sourceMappingURL=ContentAnswersModal.js.map

package/es/features/content-answers/ContentAnswersModal.js.map

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

package/es/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/es/features/content-answers/ContentAnswersModalContent.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import Answer from './Answer';
+import InlineError from './InlineError';
+import Question from './Question';
+import WelcomeMessage from './WelcomeMessage';
+import './ContentAnswersModalContent.scss';
+
+const ContentAnswersModalContent = (_ref) => {
+  let {
+    currentUser,
+    fileName,
+    isLoading,
+    questions
+  } = _ref;
+  const messagesEndRef = useRef(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 React.createElement("div", {
+    className: "bdl-ContentAnswersModalContent",
+    "data-testid": "content-answers-modal-content"
+  }, React.createElement(WelcomeMessage, {
+    fileName: fileName
+  }), React.createElement("ul", null, questions.map((_ref2, index) => {
+    let {
+      prompt,
+      error,
+      answer = ''
+    } = _ref2;
+    const hasError = !!error;
+    return React.createElement("li", {
+      key: index
+    }, React.createElement(Question, {
+      currentUser: currentUser,
+      prompt: prompt
+    }), hasError ? React.createElement(InlineError, null) : React.createElement(Answer, {
+      answer: answer,
+      isLoading: isLoading
+    }));
+  })), React.createElement("div", {
+    ref: messagesEndRef
+  }));
+};
+
+export default ContentAnswersModalContent;
+//# sourceMappingURL=ContentAnswersModalContent.js.map

package/es/features/content-answers/ContentAnswersModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-answers/ContentAnswersModalContent.tsx"],"names":["React","useCallback","useEffect","useRef","Answer","InlineError","Question","WelcomeMessage","ContentAnswersModalContent","currentUser","fileName","isLoading","questions","messagesEndRef","handleScrollToBottom","behavior","current","scrollIntoView","setTimeout","map","index","prompt","error","answer","hasError"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,WAAhB,EAA6BC,SAA7B,EAAwCC,MAAxC,QAAsD,OAAtD;AAEA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,WAAP,MAAwB,eAAxB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,OAAOC,cAAP,MAA2B,kBAA3B;AAMA,OAAO,mCAAP;;AASA,MAAMC,0BAA0B,GAAG,UAA4D;AAAA,MAA3D;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,QAAf;AAAyBC,IAAAA,SAAzB;AAAoCC,IAAAA;AAApC,GAA2D;AAC3F,QAAMC,cAAc,GAAGV,MAAM,CAAwB,IAAxB,CAA7B;AAEA,QAAMW,oBAAoB,GAAGb,WAAW,CACpCc,QAAQ,IAAI;AACR,QAAIF,cAAc,CAACG,OAAf,IAA0BH,cAAc,CAACG,OAAf,CAAuBC,cAArD,EAAqE;AACjEJ,MAAAA,cAAc,CAACG,OAAf,CAAuBC,cAAvB,CAAsC;AAAEF,QAAAA;AAAF,OAAtC;AACH;AACJ,GALmC,EAMpC,CAACF,cAAD,CANoC,CAAxC,CAH2F,CAY3F;;AACAX,EAAAA,SAAS,CAAC,MAAM;AACZgB,IAAAA,UAAU,CAAC,MAAM;AACbJ,MAAAA,oBAAoB,CAAC,SAAD,CAApB;AACH,KAFS,EAEP,CAFO,CAAV;AAGH,GAJQ,EAIN,CAACA,oBAAD,CAJM,CAAT,CAb2F,CAmB3F;;AACAZ,EAAAA,SAAS,CAAC,MAAM;AACZY,IAAAA,oBAAoB,CAAC,QAAD,CAApB;AACH,GAFQ,EAEN,CAACA,oBAAD,EAAuBH,SAAvB,CAFM,CAAT;AAIA,SACI;AAAK,IAAA,SAAS,EAAC,gCAAf;AAAgD,mBAAY;AAA5D,KACI,oBAAC,cAAD;AAAgB,IAAA,QAAQ,EAAED;AAA1B,IADJ,EAEI,gCACKE,SAAS,CAACO,GAAV,CAAc,QAAiCC,KAAjC,KAA2C;AAAA,QAA1C;AAAEC,MAAAA,MAAF;AAAUC,MAAAA,KAAV;AAAiBC,MAAAA,MAAM,GAAG;AAA1B,KAA0C;AACtD,UAAMC,QAAQ,GAAG,CAAC,CAACF,KAAnB;AACA,WACI;AAAI,MAAA,GAAG,EAAEF;AAAT,OACI,oBAAC,QAAD;AAAU,MAAA,WAAW,EAAEX,WAAvB;AAAoC,MAAA,MAAM,EAAEY;AAA5C,MADJ,EAEKG,QAAQ,GAAG,oBAAC,WAAD,OAAH,GAAqB,oBAAC,MAAD;AAAQ,MAAA,MAAM,EAAED,MAAhB;AAAwB,MAAA,SAAS,EAAEZ;AAAnC,MAFlC,CADJ;AAMH,GARA,CADL,CAFJ,EAaI;AAAK,IAAA,GAAG,EAAEE;AAAV,IAbJ,CADJ;AAiBH,CAzCD;;AA2CA,eAAeL,0BAAf","sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport Answer from './Answer';\nimport InlineError from './InlineError';\nimport Question from './Question';\nimport WelcomeMessage from './WelcomeMessage';\nimport { QuestionType } from './ContentAnswersModal';\n// @ts-ignore: no ts definition\n// eslint-disable-next-line import/named\nimport { User } from '../../../common/types/core';\n\nimport './ContentAnswersModalContent.scss';\n\ntype Props = {\n    currentUser?: User;\n    fileName: string;\n    isLoading: boolean;\n    questions: QuestionType[];\n};\n\nconst ContentAnswersModalContent = ({ currentUser, fileName, isLoading, questions }: Props) => {\n    const messagesEndRef = useRef<HTMLDivElement | null>(null);\n\n    const handleScrollToBottom = useCallback(\n        behavior => {\n            if (messagesEndRef.current && messagesEndRef.current.scrollIntoView) {\n                messagesEndRef.current.scrollIntoView({ behavior });\n            }\n        },\n        [messagesEndRef],\n    );\n\n    // scroll to bottom instantly when modal opens\n    useEffect(() => {\n        setTimeout(() => {\n            handleScrollToBottom('instant');\n        }, 0);\n    }, [handleScrollToBottom]);\n\n    // scroll to bottom for both cases that answer is loading and answer has been generated\n    useEffect(() => {\n        handleScrollToBottom('smooth');\n    }, [handleScrollToBottom, isLoading]);\n\n    return (\n        <div className=\"bdl-ContentAnswersModalContent\" data-testid=\"content-answers-modal-content\">\n            <WelcomeMessage fileName={fileName} />\n            <ul>\n                {questions.map(({ prompt, error, answer = '' }, index) => {\n                    const hasError = !!error;\n                    return (\n                        <li key={index}>\n                            <Question currentUser={currentUser} prompt={prompt} />\n                            {hasError ? <InlineError /> : <Answer answer={answer} isLoading={isLoading} />}\n                        </li>\n                    );\n                })}\n            </ul>\n            <div ref={messagesEndRef} />\n        </div>\n    );\n};\n\nexport default ContentAnswersModalContent;\n"],"file":"ContentAnswersModalContent.js"}

package/es/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/es/features/content-answers/ContentAnswersModalError.js

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

package/es/features/content-answers/ContentAnswersModalError.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-answers/ContentAnswersModalError.tsx"],"names":["React","FormattedMessage","Unplugged140","messages","ContentAnswersModalError","intelligenceUnavailableHeading","intelligenceUnavailableDescription","intelligenceUnavailableTryAgain"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,YAAP,MAAyB,iCAAzB;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,iCAAP;;AAEA,MAAMC,wBAAwB,GAAG,MAAM;AACnC,SACI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI;AACI,IAAA,SAAS,EAAC,2CADd;AAEI,mBAAY;AAFhB,KAII,oBAAC,YAAD,OAJJ,CADJ,EAQI;AAAI,mBAAY;AAAhB,KACI,oBAAC,gBAAD,EAAsBD,QAAQ,CAACE,8BAA/B,CADJ,CARJ,EAWI;AAAG,mBAAY;AAAf,KACI,oBAAC,gBAAD,EAAsBF,QAAQ,CAACG,kCAA/B,CADJ,CAXJ,EAcI;AAAG,mBAAY;AAAf,KACI,oBAAC,gBAAD,EAAsBH,QAAQ,CAACI,+BAA/B,CADJ,CAdJ,CADJ;AAoBH,CArBD;;AAuBA,eAAeH,wBAAf","sourcesContent":["import React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport Unplugged140 from '../../illustration/Unplugged140';\n\nimport messages from './messages';\n\nimport './ContentAnswersModalError.scss';\n\nconst ContentAnswersModalError = () => {\n    return (\n        <div className=\"bdl-ContentAnswersModalError\">\n            <div\n                className=\"bdl-ContentAnswersModalError-illustration\"\n                data-testid=\"content-answers-modal-error-illustration\"\n            >\n                <Unplugged140 />\n            </div>\n\n            <h2 data-testid=\"content-answers-modal-error-heading\">\n                <FormattedMessage {...messages.intelligenceUnavailableHeading} />\n            </h2>\n            <p data-testid=\"content-answers-modal-error-description\">\n                <FormattedMessage {...messages.intelligenceUnavailableDescription} />\n            </p>\n            <p data-testid=\"content-answers-modal-error-tryagain\">\n                <FormattedMessage {...messages.intelligenceUnavailableTryAgain} />\n            </p>\n        </div>\n    );\n};\n\nexport default ContentAnswersModalError;\n"],"file":"ContentAnswersModalError.js"}

package/es/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/es/features/content-answers/ContentAnswersModalFooter.js

@@ -0,0 +1,93 @@
+import React, { useCallback, useState } from 'react';
+import { injectIntl, FormattedMessage } 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 ContentAnswersModalFooterActions from './ContentAnswersModalFooterActions';
+import messages from './messages';
+import './ContentAnswersModalFooter.scss';
+
+const ContentAnswersModalFooter = (_ref) => {
+  let {
+    currentUser,
+    hasError,
+    intl,
+    isLoading,
+    onAsk,
+    onRetry
+  } = _ref;
+  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 => {
+    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 React.createElement("div", {
+    className: "bdl-ContentAnswersModalFooter"
+  }, React.createElement(ContentAnswersModalFooterActions, {
+    hasError: hasError,
+    onRetry: onRetry
+  }), React.createElement("div", {
+    className: "bdl-ContentAnswersModalFooter-questionInput"
+  }, React.createElement("div", {
+    className: "bdl-ContentAnswersModalFooter-avatar"
+  }, React.createElement(Avatar, {
+    id: id,
+    name: name
+  })), React.createElement(TextArea, {
+    "data-testid": "content-answers-question-input",
+    error: hasMaxCharacterError && formatMessage(messages.maxCharactersReachedError, {
+      characterLimit: TEXT_AREA.MAX_LENGTH
+    }),
+    hideLabel: true,
+    label: formatMessage(messages.askQuestionPlaceholder),
+    maxLength: TEXT_AREA.MAX_LENGTH,
+    onChange: handleInputChange,
+    placeholder: formatMessage(messages.askQuestionPlaceholder),
+    value: prompt,
+    onKeyDown: handleKeyDown
+  }), React.createElement(PrimaryButton, {
+    className: "bdl-ContentAnswersModalFooter-submitButton",
+    "data-testid": "content-answers-submit-button",
+    isDisabled: isSubmitDisabled,
+    onClick: handleOnAsk
+  }, React.createElement(FormattedMessage, messages.ask))));
+};
+
+export default injectIntl(ContentAnswersModalFooter);
+//# sourceMappingURL=ContentAnswersModalFooter.js.map

package/es/features/content-answers/ContentAnswersModalFooter.js.map

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

package/es/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/es/features/content-answers/ContentAnswersModalFooterActions.js

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

package/es/features/content-answers/ContentAnswersModalFooterActions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-answers/ContentAnswersModalFooterActions.tsx"],"names":["React","FormattedMessage","Button","messages","ContentAnswersModalFooterActions","hasError","onRetry","retryButtonRef","useRef","useEffect","current","focus","ref","retryResponse"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AAEA,SAASC,gBAAT,QAAiC,YAAjC;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,yCAAP;;AAOA,MAAMC,gCAAgC,GAAG,UAAkC;AAAA,MAAjC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,GAAiC;AACvE,QAAMC,cAAc,GAAGP,KAAK,CAACQ,MAAN,CAAuC,IAAvC,CAAvB;AAEAR,EAAAA,KAAK,CAACS,SAAN,CAAgB,MAAM;AAClB,QAAIF,cAAc,CAACG,OAAf,IAA0BL,QAA9B,EAAwC;AACpCE,MAAAA,cAAc,CAACG,OAAf,CAAuBC,KAAvB;AACH;AACJ,GAJD,EAIG,CAACJ,cAAD,EAAiBF,QAAjB,CAJH;;AAMA,MAAI,CAACA,QAAL,EAAe;AACX,WAAO,IAAP;AACH;;AAED,SACI;AAAK,IAAA,SAAS,EAAC,sCAAf;AAAsD,mBAAY;AAAlE,KACI,oBAAC,MAAD;AACI,IAAA,MAAM,EAAGO,GAAD,IAA4B;AAChCL,MAAAA,cAAc,CAACG,OAAf,GAAyBE,GAAzB;AACH,KAHL;AAII,IAAA,SAAS,EAAC,6CAJd;AAKI,mBAAY,8BALhB;AAMI,IAAA,OAAO,EAAEN,OANb;AAOI,IAAA,IAAI,EAAC;AAPT,KASI,oBAAC,gBAAD,EAAsBH,QAAQ,CAACU,aAA/B,CATJ,CADJ,CADJ;AAeH,CA5BD;;AA8BA,eAAeT,gCAAf","sourcesContent":["import React from 'react';\n\nimport { FormattedMessage } from 'react-intl';\nimport Button from '../../components/button';\n\nimport messages from './messages';\n\nimport './ContentAnswersModalFooterActions.scss';\n\ninterface Props {\n    hasError: boolean;\n    onRetry: () => void;\n}\n\nconst ContentAnswersModalFooterActions = ({ hasError, onRetry }: Props) => {\n    const retryButtonRef = React.useRef<HTMLButtonElement | null>(null);\n\n    React.useEffect(() => {\n        if (retryButtonRef.current && hasError) {\n            retryButtonRef.current.focus();\n        }\n    }, [retryButtonRef, hasError]);\n\n    if (!hasError) {\n        return null;\n    }\n\n    return (\n        <div className=\"bdl-ContentAnswersModalFooterActions\" data-testid=\"content-answers-modal-footer-actions\">\n            <Button\n                setRef={(ref: HTMLButtonElement) => {\n                    retryButtonRef.current = ref;\n                }}\n                className=\"bdl-ContentAnswersModalFooterActions-button\"\n                data-testid=\"content-answers-retry-button\"\n                onClick={onRetry}\n                size=\"large\"\n            >\n                <FormattedMessage {...messages.retryResponse} />\n            </Button>\n        </div>\n    );\n};\n\nexport default ContentAnswersModalFooterActions;\n"],"file":"ContentAnswersModalFooterActions.js"}

package/es/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/es/features/content-answers/ContentAnswersOpenButton.js

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { injectIntl } 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';
+
+const ContentAnswersOpenButton = (_ref) => {
+  let {
+    fileExtension,
+    intl,
+    isHighlighted,
+    isModalOpen,
+    onClick
+  } = _ref;
+  const {
+    formatMessage
+  } = intl;
+  const buttonRef = React.useRef(null);
+  useEffect(() => {
+    if (isHighlighted && !isModalOpen && buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, [isHighlighted, isModalOpen]);
+
+  const isAllowedFileType = extension => {
+    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 React.createElement(Tooltip, {
+    className: "bdl-ContentAnswersOpenButton-tooltip",
+    text: getTooltipText()
+  }, React.createElement(Button, {
+    "aria-label": formatMessage(messages.contentAnswersTitle),
+    className: openButtonClassNames,
+    "data-testid": "content-answers-open-button",
+    isDisabled: !isAllowedFileType(fileExtension),
+    onClick: onClick,
+    setRef: ref => {
+      buttonRef.current = ref;
+    }
+  }, React.createElement(BoxAiLogo, {
+    className: "bdl-ContentAnswersOpenButton-icon",
+    width: 20,
+    height: 20
+  })));
+};
+
+export default injectIntl(ContentAnswersOpenButton);
+//# sourceMappingURL=ContentAnswersOpenButton.js.map

package/es/features/content-answers/ContentAnswersOpenButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/content-answers/ContentAnswersOpenButton.tsx"],"names":["React","useEffect","injectIntl","classNames","BoxAiLogo","Button","Tooltip","CODE_FILE_EXTENSIONS","DOCUMENT_FILE_EXTENSIONS","TEXT_FILE_EXTENSIONS","messages","ContentAnswersOpenButton","fileExtension","intl","isHighlighted","isModalOpen","onClick","formatMessage","buttonRef","useRef","current","focus","isAllowedFileType","extension","allowedTypes","includes","getTooltipText","hasQuestionsTooltip","disabledTooltipFileNotCompatible","defaultTooltip","openButtonClassNames","contentAnswersTitle","ref"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,SAAhB,QAAiC,OAAjC;AACA,SAASC,UAAT,QAAsC,YAAtC;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,SAAP,MAAsB,2BAAtB;AACA,OAAOC,MAAP,MAAmB,yBAAnB;AACA,OAAOC,OAAP,MAAoB,0BAApB;AACA,SAASC,oBAAT,EAA+BC,wBAA/B,EAAyDC,oBAAzD,QAAqF,aAArF;AAEA,OAAOC,QAAP,MAAqB,YAArB;AAEA,OAAO,iCAAP;;AAUA,MAAMC,wBAAwB,GAAG,UAMI;AAAA,MANH;AAC9BC,IAAAA,aAD8B;AAE9BC,IAAAA,IAF8B;AAG9BC,IAAAA,aAH8B;AAI9BC,IAAAA,WAJ8B;AAK9BC,IAAAA;AAL8B,GAMG;AACjC,QAAM;AAAEC,IAAAA;AAAF,MAAoBJ,IAA1B;AACA,QAAMK,SAAS,GAAGlB,KAAK,CAACmB,MAAN,CAAuC,IAAvC,CAAlB;AAEAlB,EAAAA,SAAS,CAAC,MAAM;AACZ,QAAIa,aAAa,IAAI,CAACC,WAAlB,IAAiCG,SAAS,CAACE,OAA/C,EAAwD;AACpDF,MAAAA,SAAS,CAACE,OAAV,CAAkBC,KAAlB;AACH;AACJ,GAJQ,EAIN,CAACP,aAAD,EAAgBC,WAAhB,CAJM,CAAT;;AAMA,QAAMO,iBAAiB,GAAIC,SAAD,IAAuB;AAC7C,UAAMC,YAAY,GAAG,CAAC,GAAGjB,oBAAJ,EAA0B,GAAGC,wBAA7B,EAAuD,GAAGC,oBAA1D,CAArB;AACA,WAAOe,YAAY,CAACC,QAAb,CAAsBF,SAAtB,CAAP;AACH,GAHD;;AAKA,QAAMG,cAAc,GAAG,MAAM;AACzB,QAAIZ,aAAJ,EAAmB;AACf,aAAOG,aAAa,CAACP,QAAQ,CAACiB,mBAAV,CAApB;AACH;;AACD,QAAI,CAACL,iBAAiB,CAACV,aAAD,CAAtB,EAAuC;AACnC,aAAOK,aAAa,CAACP,QAAQ,CAACkB,gCAAV,CAApB;AACH;;AACD,WAAOX,aAAa,CAACP,QAAQ,CAACmB,cAAV,CAApB;AACH,GARD;;AAUA,QAAMC,oBAAoB,GAAG3B,UAAU,CAAC,8BAAD,EAAiC;AACpE,kDAA8CW;AADsB,GAAjC,CAAvC;AAGA,SACI,oBAAC,OAAD;AAAS,IAAA,SAAS,EAAC,sCAAnB;AAA0D,IAAA,IAAI,EAAEY,cAAc;AAA9E,KACI,oBAAC,MAAD;AACI,kBAAYT,aAAa,CAACP,QAAQ,CAACqB,mBAAV,CAD7B;AAEI,IAAA,SAAS,EAAED,oBAFf;AAGI,mBAAY,6BAHhB;AAII,IAAA,UAAU,EAAE,CAACR,iBAAiB,CAACV,aAAD,CAJlC;AAKI,IAAA,OAAO,EAAEI,OALb;AAMI,IAAA,MAAM,EAAGgB,GAAD,IAA4B;AAChCd,MAAAA,SAAS,CAACE,OAAV,GAAoBY,GAApB;AACH;AARL,KAUI,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAC,mCAArB;AAAyD,IAAA,KAAK,EAAE,EAAhE;AAAoE,IAAA,MAAM,EAAE;AAA5E,IAVJ,CADJ,CADJ;AAgBH,CAlDD;;AAoDA,eAAe9B,UAAU,CAACS,wBAAD,CAAzB","sourcesContent":["import React, { useEffect } from 'react';\nimport { injectIntl, IntlShape } from 'react-intl';\nimport classNames from 'classnames';\n\nimport BoxAiLogo from '../../icon/logo/BoxAiLogo';\nimport Button from '../../components/button';\nimport Tooltip from '../../components/tooltip';\nimport { CODE_FILE_EXTENSIONS, DOCUMENT_FILE_EXTENSIONS, TEXT_FILE_EXTENSIONS } from './constants';\n\nimport messages from './messages';\n\nimport './ContentAnswersOpenButton.scss';\n\ninterface ContentAnswersOpenButtonProps {\n    fileExtension: string;\n    intl: IntlShape;\n    isHighlighted: boolean;\n    isModalOpen: boolean;\n    onClick: () => void;\n}\n\nconst ContentAnswersOpenButton = ({\n    fileExtension,\n    intl,\n    isHighlighted,\n    isModalOpen,\n    onClick,\n}: ContentAnswersOpenButtonProps) => {\n    const { formatMessage } = intl;\n    const buttonRef = React.useRef<HTMLButtonElement | null>(null);\n\n    useEffect(() => {\n        if (isHighlighted && !isModalOpen && buttonRef.current) {\n            buttonRef.current.focus();\n        }\n    }, [isHighlighted, isModalOpen]);\n\n    const isAllowedFileType = (extension: string) => {\n        const allowedTypes = [...CODE_FILE_EXTENSIONS, ...DOCUMENT_FILE_EXTENSIONS, ...TEXT_FILE_EXTENSIONS];\n        return allowedTypes.includes(extension);\n    };\n\n    const getTooltipText = () => {\n        if (isHighlighted) {\n            return formatMessage(messages.hasQuestionsTooltip);\n        }\n        if (!isAllowedFileType(fileExtension)) {\n            return formatMessage(messages.disabledTooltipFileNotCompatible);\n        }\n        return formatMessage(messages.defaultTooltip);\n    };\n\n    const openButtonClassNames = classNames('bdl-ContentAnswersOpenButton', {\n        'bdl-ContentAnswersOpenButton--hasQuestions': isHighlighted,\n    });\n    return (\n        <Tooltip className=\"bdl-ContentAnswersOpenButton-tooltip\" text={getTooltipText()}>\n            <Button\n                aria-label={formatMessage(messages.contentAnswersTitle)}\n                className={openButtonClassNames}\n                data-testid=\"content-answers-open-button\"\n                isDisabled={!isAllowedFileType(fileExtension)}\n                onClick={onClick}\n                setRef={(ref: HTMLButtonElement) => {\n                    buttonRef.current = ref;\n                }}\n            >\n                <BoxAiLogo className=\"bdl-ContentAnswersOpenButton-icon\" width={20} height={20} />\n            </Button>\n        </Tooltip>\n    );\n};\n\nexport default injectIntl(ContentAnswersOpenButton);\n"],"file":"ContentAnswersOpenButton.js"}