code7-leia 0.1.44 → 0.1.46

package/dist/code7-leia.esm.js

@@ -1,12 +1,12 @@
-import React, { forwardRef, useState, useEffect, useMemo, Suspense } from 'react';
+import React, { forwardRef, useRef, useCallback, useEffect, useState, useMemo, Suspense } from 'react';
 import { useLocation, useRouteMatch, useHistory, Switch, Route } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import cc from 'classcat';
 import styled from 'styled-components';
 import { FaSearch, FaUpload, FaList, FaPlus, FaMicrophone } from 'react-icons/fa';
 import unorm from 'unorm';
+import { MdClose, MdPerson2 } from 'react-icons/md';
 import { PiWaveformBold } from 'react-icons/pi';
-import { MdPerson2 } from 'react-icons/md';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -119,7 +119,8 @@ var defaultLanguage = {
     },
     modal: {
       descriptionUpload: 'Drag and drop files here or',
-      chooseFile: 'Choose a file'
+      chooseFile: 'Choose a file',
+      uploadFile: 'Upload a file'
     }
   },
   buttons: {
@@ -156,7 +157,8 @@ var getLanguage = function getLanguage(language) {
         }),
         modal: _extends({}, defaultLanguage.fileArea.modal, {
           descriptionUpload: 'Arraste e solte os arquivos aqui ou',
-          chooseFile: 'Escolha um arquivo'
+          chooseFile: 'Escolha um arquivo',
+          uploadFile: 'Enviar um arquivo'
         })
       }),
       buttons: _extends({}, defaultLanguage.buttons, {
@@ -305,8 +307,158 @@ var SearchInput = function SearchInput(_ref) {
   }, React.createElement(FaSearch, null)));
 };
 
-var _templateObject$4;
-var Container$1 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
+var _templateObject$4, _templateObject2$3, _templateObject3$1, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var FullScreen = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: ", ";\n  cursor: ", ";\n\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  justify-content: center;\n  align-items: center;\n  z-index: ", ";\n  animation: fadeIn 380ms ease-in-out 1;\n  background-color: #2f3845b8;\n  backdrop-filter: blur(2px);\n\n  @keyframes fadeIn {\n    from {\n      background-color: #2f384521;\n    }\n    to {\n      background-color: #2f3845b8;\n    }\n  }\n"])), function (_ref) {
+  var isOpen = _ref.isOpen;
+  return isOpen === 1 ? 'flex' : 'none';
+}, function (_ref2) {
+  var isFixed = _ref2.isFixed;
+  return isFixed === 0 ? 'pointer' : 'default';
+}, function (_ref3) {
+  var zIndex = _ref3.zIndex;
+  return zIndex;
+});
+var Modal = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: #fff;\n  border-radius: 3px;\n  position: relative;\n  cursor: default;\n  width: 100%;\n  max-width: ", ";\n  animation: slideIn 350ms cubic-bezier(0.42, 0, 0.21, 1) 1;\n\n  @keyframes slideIn {\n    from {\n      transform: translateY(-120px);\n      opacity: 0;\n    }\n\n    20% {\n      opacity: 0;\n    }\n\n    to {\n      transform: translateY(0);\n      opacity: 1;\n    }\n  }\n"])), function (_ref4) {
+  var maxWidth = _ref4.maxWidth;
+  return maxWidth;
+});
+var ModalContainer = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: auto;\n  max-height: ", ";\n"])), function (_ref5) {
+  var maxHeight = _ref5.maxHeight;
+  return maxHeight;
+});
+var ModalHeader = /*#__PURE__*/styled.header(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid #dadce3;\n  padding: var(--spacement-medium);\n"])));
+var ModalTitle = /*#__PURE__*/styled.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-style: normal;\n  font-weight: normal;\n  font-size: 20px;\n  line-height: 150%;\n  letter-spacing: 0.0075em;\n  color: var(--neutral-4);\n"])));
+var ModalButtonClose = /*#__PURE__*/styled.button(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  outline: none;\n  cursor: pointer;\n\n  :hover {\n    opacity: 0.7;\n  }\n"])));
+var ModalContentWrapper = /*#__PURE__*/styled.div(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  overflow-y: ", ";\n  max-height: ", ";\n  padding: var(--spacement-medium);\n"])), function (_ref6) {
+  var overflowY = _ref6.overflowY;
+  return overflowY;
+}, function (_ref7) {
+  var maxHeight = _ref7.maxHeight;
+  return maxHeight;
+});
+var ModalFooterWrapper = /*#__PURE__*/styled.div(_templateObject8 || (_templateObject8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding: var(--spacement-medium);\n  background: var(--neutral-0);\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--spacement-medium);\n"])));
+
+var _excluded$2 = ["children"];
+var ModalFooter = function ModalFooter(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+  return React.createElement(ModalFooterWrapper, Object.assign({}, rest), children);
+};
+ModalFooter.propTypes = {
+  children: PropTypes.node.isRequired
+};
+
+var _excluded$3 = ["children", "maxHeight", "overflowY"];
+var ModalContent = function ModalContent(_ref) {
+  var children = _ref.children,
+    _ref$maxHeight = _ref.maxHeight,
+    maxHeight = _ref$maxHeight === void 0 ? 'max-content' : _ref$maxHeight,
+    _ref$overflowY = _ref.overflowY,
+    overflowY = _ref$overflowY === void 0 ? 'initial' : _ref$overflowY,
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+  return React.createElement(ModalContentWrapper, Object.assign({
+    maxHeight: maxHeight,
+    overflowY: overflowY
+  }, rest), children);
+};
+ModalContent.propTypes = {
+  children: PropTypes.node.isRequired,
+  maxHeight: PropTypes.string,
+  overflowY: PropTypes.string
+};
+
+var Modal$1 = function Modal$1(_ref) {
+  var isOpen = _ref.isOpen,
+    style = _ref.style,
+    maxWidth = _ref.maxWidth,
+    maxHeight = _ref.maxHeight,
+    className = _ref.className,
+    title = _ref.title,
+    children = _ref.children,
+    onClose = _ref.onClose,
+    contentStyle = _ref.contentStyle,
+    isFixed = _ref.isFixed,
+    zIndex = _ref.zIndex;
+  var modalRef = useRef(null);
+  var handleKeyUp = useCallback(function (e) {
+    var keys = {
+      // ESC Key
+      27: function _() {
+        e.preventDefault();
+        if (!isFixed && onClose) {
+          onClose();
+        }
+        window.removeEventListener('keyup', handleKeyUp, false);
+      }
+    };
+    if (keys[e.keyCode] && isOpen) {
+      keys[e.keyCode]();
+    }
+  }, [onClose, isOpen, isFixed]);
+  var handleOutsideClick = useCallback(function (e) {
+    if (modalRef.current && modalRef.current.parentNode === e.target) {
+      if (!isFixed && onClose) {
+        onClose();
+      }
+      document.removeEventListener('click', handleOutsideClick, false);
+    }
+  }, [onClose, isFixed]);
+  useEffect(function () {
+    window.addEventListener('keyup', handleKeyUp, false);
+    document.addEventListener('click', handleOutsideClick, false);
+    return function () {
+      window.removeEventListener('keyup', handleKeyUp, false);
+      document.removeEventListener('click', handleOutsideClick, false);
+    };
+  }, [handleKeyUp, handleOutsideClick]);
+  return React.createElement(FullScreen, {
+    isFixed: isFixed ? 1 : 0,
+    isOpen: isOpen ? 1 : 0,
+    zIndex: zIndex != null ? zIndex : 0
+  }, React.createElement(Modal, {
+    ref: modalRef,
+    style: style,
+    maxWidth: maxWidth,
+    className: className
+  }, React.createElement(ModalContainer, {
+    className: "styleOverlay",
+    maxHeight: maxHeight,
+    style: contentStyle
+  }, React.createElement(ModalHeader, null, React.createElement(ModalTitle, null, String(title)), React.createElement(ModalButtonClose, {
+    type: "button",
+    onClick: onClose
+  }, React.createElement(MdClose, {
+    color: "#5A5D68",
+    size: 16
+  }))), children)));
+};
+Modal$1.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  title: /*#__PURE__*/PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.func]),
+  children: PropTypes.node.isRequired,
+  onClose: PropTypes.func,
+  style: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
+  contentStyle: /*#__PURE__*/PropTypes.objectOf(PropTypes.any),
+  className: PropTypes.string,
+  maxWidth: PropTypes.string,
+  maxHeight: PropTypes.string,
+  isFixed: PropTypes.bool,
+  zIndex: PropTypes.number
+};
+Modal$1.defaultProps = {
+  title: '',
+  style: {},
+  contentStyle: {},
+  className: '',
+  maxWidth: '360px',
+  maxHeight: 'max-content',
+  isFixed: false,
+  onClose: function onClose() {},
+  zIndex: 9999
+};
+
+var _templateObject$5;
+var Container$1 = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  padding: 24px 0;\n  height: 193px;\n\n  background: ", ";\n  background-position: top, right, bottom, left;\n  background-repeat: repeat-x, repeat-y;\n  background-size: 40px 1px, 1px 40px;\n  background-color: ", ";\n\n  & .content {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    & > .icon {\n      background-color: ", ";\n      border-radius: 16px;\n      width: 145px;\n      height: 145px;\n\n      display: flex;\n      justify-content: center;\n\n      & svg {\n        width: 100%;\n        height: 70%;\n        margin: 20px;\n      }\n    }\n\n    & .description {\n      max-width: 600px;\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      padding: 8px 0 8px 24px;\n\n      .button-add {\n        cursor: pointer;\n      }\n\n      .start-icon {\n        display: flex;\n        align-items: center;\n      }\n    }\n  }\n"])), function (_ref) {
   var hasBorder = _ref.hasBorder;
   return hasBorder && "linear-gradient(\n        to right,\n        #dadce3 50%,\n        rgba(255, 255, 255, 0) 0%\n      ),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(to right, #dadce3 50%, rgba(255, 255, 255, 0) 0%),\n      linear-gradient(#dadce3 50%, rgba(255, 255, 255, 0) 0%)";
 }, function (_ref2) {
@@ -317,7 +469,7 @@ var Container$1 = /*#__PURE__*/styled.div(_templateObject$4 || (_templateObject$
   return backgroundIcon;
 });
 
-var _excluded$2 = ["icon", "title", "description", "activeButton", "iconButton", "descriptionButton", "widthButton", "button", "backgroundIcon", "backgroundColor", "hasBorder"];
+var _excluded$4 = ["icon", "title", "description", "activeButton", "iconButton", "descriptionButton", "widthButton", "button", "backgroundIcon", "backgroundColor", "hasBorder"];
 var EmptyState = function EmptyState(_ref) {
   var icon = _ref.icon,
     title = _ref.title,
@@ -328,7 +480,7 @@ var EmptyState = function EmptyState(_ref) {
     backgroundIcon = _ref.backgroundIcon,
     backgroundColor = _ref.backgroundColor,
     hasBorder = _ref.hasBorder,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return React.createElement(Container$1, Object.assign({
     backgroundIcon: backgroundIcon,
     backgroundColor: backgroundColor,
@@ -366,6 +518,36 @@ EmptyState.defaultProps = {
   hasBorder: true
 };
 
+var _templateObject$6;
+var Container$2 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
+
+var Select = function Select(_ref) {
+  var options = _ref.options,
+    onSelect = _ref.onSelect,
+    placeholder = _ref.placeholder;
+  var _useState = useState(''),
+    selectedValue = _useState[0],
+    setSelectedValue = _useState[1];
+  var handleSelectChange = function handleSelectChange(event) {
+    var selectedOption = event.target.value;
+    setSelectedValue(selectedOption);
+    onSelect(selectedOption);
+  };
+  return React.createElement(Container$2, null, React.createElement("select", {
+    value: selectedValue,
+    onChange: handleSelectChange
+  }, React.createElement("option", {
+    value: "",
+    disabled: true,
+    hidden: true
+  }, placeholder), options.map(function (option) {
+    return React.createElement("option", {
+      key: option.value,
+      value: option.value
+    }, option.label);
+  })));
+};
+
 var FileArea = function FileArea() {
   var _useState = useState([]),
     files = _useState[0],
@@ -375,8 +557,12 @@ var FileArea = function FileArea() {
     setInitialFiles = _useState2[1];
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname;
+  var _useState3 = useState(false),
+    modal = _useState3[0],
+    setModal = _useState3[1];
   var id = pathname.split('/')[4];
   var t = getLanguage('pt-br');
+  var tags = ["pae", "boteria", "vr", "code7", "vidalink"];
   useEffect(function () {
     setFiles([{
       "name": "Documentação conceitual Code7_v3",
@@ -408,6 +594,12 @@ var FileArea = function FileArea() {
   useEffect(function () {
     console.log('files, id, t: ', files, id, t);
   }, [files]);
+  var optionsPresset = tags.map(function (tag) {
+    return {
+      label: tag,
+      value: tag
+    };
+  });
   var presset = function presset(tags) {
     var tagsSplit = tags.split(',');
     var html = '';
@@ -416,6 +608,12 @@ var FileArea = function FileArea() {
     }).join('');
     return html;
   };
+  var handleOpenModal = function handleOpenModal() {
+    setModal(!modal);
+  };
+  var handleSelect = function handleSelect(value) {
+    console.log(value);
+  };
   var renderFiles = function renderFiles() {
     return React.createElement(Container, null, React.createElement(Header, null, React.createElement("div", {
       className: 'infos'
@@ -425,7 +623,9 @@ var FileArea = function FileArea() {
       placeholder: t.fileArea.search,
       setFiles: setFiles,
       initialFiles: initialFiles
-    }), React.createElement("button", null, React.createElement(FaUpload, null), " ", t.fileArea.fileUpload))), files.length === 0 ? React.createElement(EmptyState, {
+    }), React.createElement("button", {
+      onClick: handleOpenModal
+    }, React.createElement(FaUpload, null), " ", t.fileArea.fileUpload))), files.length === 0 ? React.createElement(EmptyState, {
       icon: React.createElement(FaList, null),
       title: t.fileArea.emptyState.title,
       description: t.fileArea.emptyState.description,
@@ -455,52 +655,43 @@ var FileArea = function FileArea() {
       }, React.createElement("button", {
         className: 'buttonDelete'
       }, t.buttons["delete"]))));
-    }))));
+    }))), React.createElement(Modal$1, {
+      isOpen: modal,
+      maxWidth: "1100px",
+      maxHeight: "max-content",
+      onClose: handleOpenModal,
+      title: t.fileArea.modal.uploadFile
+    }, React.createElement(ModalContent, null, React.createElement("div", null, React.createElement("input", {
+      type: "file",
+      id: "file",
+      name: "file"
+    }), React.createElement("label", {
+      htmlFor: "file"
+    }, t.fileArea.modal.chooseFile), React.createElement(Select, {
+      placeholder: t.testArea.selectPresset,
+      options: optionsPresset,
+      onSelect: handleSelect
+    }))), React.createElement(ModalFooter, null, React.createElement("button", {
+      onClick: handleOpenModal
+    }, t.buttons.cancel), React.createElement("button", {
+      type: "submit",
+      form: "form-tts"
+    }, t.buttons.send))));
   };
   return React.createElement(Container, null, renderFiles());
 };
 
-var _templateObject$5, _templateObject2$3, _templateObject3$1, _templateObject4;
-var Container$2 = /*#__PURE__*/styled.div(_templateObject$5 || (_templateObject$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
-var Header$1 = /*#__PURE__*/styled.div(_templateObject2$3 || (_templateObject2$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
-var Inputs = /*#__PURE__*/styled.div(_templateObject3$1 || (_templateObject3$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
-var Result = /*#__PURE__*/styled.div(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
-
-var _templateObject$6;
-var Container$3 = /*#__PURE__*/styled.div(_templateObject$6 || (_templateObject$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 50%;\n  margin-right: 5px;\n  select {\n    padding: 12px;\n    border-radius: 4px;\n    border: 1px solid #979AA5;\n    width: 100%;\n    height: 40px;\n    \n    &:focus {\n      outline: none;\n      box-shadow: 0 0 0 3px #6690ff;\n    }\n\n    option {\n      background: white;\n      font-size: 14px;\n      color: #5a5d68;\n    }\n\n    option:checked, option:hover {\n      background: #6690ff;\n      font-size: 14px;\n      color: white;\n    }\n  }\n"])));
-
-var Select = function Select(_ref) {
-  var options = _ref.options,
-    onSelect = _ref.onSelect,
-    placeholder = _ref.placeholder;
-  var _useState = useState(''),
-    selectedValue = _useState[0],
-    setSelectedValue = _useState[1];
-  var handleSelectChange = function handleSelectChange(event) {
-    var selectedOption = event.target.value;
-    setSelectedValue(selectedOption);
-    onSelect(selectedOption);
-  };
-  return React.createElement(Container$3, null, React.createElement("select", {
-    value: selectedValue,
-    onChange: handleSelectChange
-  }, React.createElement("option", {
-    value: "",
-    disabled: true,
-    hidden: true
-  }, placeholder), options.map(function (option) {
-    return React.createElement("option", {
-      key: option.value,
-      value: option.value
-    }, option.label);
-  })));
-};
-
 var _templateObject$7, _templateObject2$4, _templateObject3$2, _templateObject4$1;
-var Container$4 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
-var StyledInput = /*#__PURE__*/styled.input(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
-var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
-var StyledMicrophoneIcon = /*#__PURE__*/styled(FaMicrophone)(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
+var Container$3 = /*#__PURE__*/styled.div(_templateObject$7 || (_templateObject$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n\n"])));
+var Header$1 = /*#__PURE__*/styled.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  .infos {\n    display: flex;\n    flex-direction: column;\n    padding: 14px 0;\n\n    h2 {\n      font-size: 20px\n    }\n\n    p {\n      font-size: 14px\n    }\n  }\n"])));
+var Inputs = /*#__PURE__*/styled.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 10px;\n\n  button {\n    background: #102693;\n    padding: 10px 20px;\n    color: white;\n    border-radius: 4px;\n    width: 190px;\n    height: 40px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n\n    svg {\n      width: 23px;\n      height: 23px;\n    }\n  }\n"])));
+var Result = /*#__PURE__*/styled.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  justify-content: left;\n  background: #F3F5F9;\n  padding: 15px;\n  border-radius: 5px;\n  margin-top: 15px;\n\n  .text{\n    margin-left: 5px;\n    font-size: 14px;\n  }\n\n  .icon {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-right: 5px;\n\n    svg {\n      width: 35px;\n      height: 35px;\n    }\n  }\n\n"])));
+
+var _templateObject$8, _templateObject2$5, _templateObject3$3, _templateObject4$2;
+var Container$4 = /*#__PURE__*/styled.div(_templateObject$8 || (_templateObject$8 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: 100%;\n  margin-right: 5px;\n"])));
+var StyledInput = /*#__PURE__*/styled.input(_templateObject2$5 || (_templateObject2$5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  padding-left: 10px;\n  padding-right: 40px;\n  border-radius: 5px;\n  border: 1px solid #ccc;\n  height: 40px;\n  width: 100%;\n\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 3px #6690ff;\n  }\n"])));
+var RecordAudioButton = /*#__PURE__*/styled.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n  cursor: pointer;\n"])));
+var StyledMicrophoneIcon = /*#__PURE__*/styled(FaMicrophone)(_templateObject4$2 || (_templateObject4$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  pointer-events: none;\n"])));
 
 var InputTest = function InputTest(_ref) {
   var placeholder = _ref.placeholder,
@@ -571,7 +762,7 @@ var TestArea = function TestArea() {
       "message": "Você precisa seguir algumas etapas importantes para ter um chatbot perfeito. Primeiro, defina claramente o objetivo do seu chatbot. Em seguida, crie uma mensagem de saudação cativante para atrair a atenção dos usuários. Não se esqueça de pedir feedbacks para melhorar constantemente o desempenho do seu chatbot. Além disso, construa um fluxo de conversa simples e utilize respostas curtas para manter a interação rápida e eficiente. Também é importante incorporar inteligência artificial para tornar o seu chatbot especialista em determinado assunto. Teste o seu bot antes de lançá-lo e personalize-o de acordo com as necessidades dos usuários. Por fim, direcione os usuários para um atendimento humano quando necessário. Seguindo essas dicas, você estará no caminho certo para ter um chatbot perfeito!"
     });
   };
-  return React.createElement(Container$2, null, React.createElement(Header$1, null, React.createElement("div", {
+  return React.createElement(Container$3, null, React.createElement(Header$1, null, React.createElement("div", {
     className: 'infos'
   }, React.createElement("h2", null, t.test), React.createElement("p", null, t.testArea.description))), React.createElement(Inputs, null, React.createElement(InputTest, {
     placeholder: t.testArea.typeSentence,