cozy-search/dist/components/Conversations/ConversationBar.js

UI components about search bar and IA assistant

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _reactRouterDom = require("react-router-dom");

var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));

var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));

var _Paperplane = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Paperplane"));

var _Stop = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Stop"));

var _SearchBar = _interopRequireDefault(require("cozy-ui/transpiled/react/SearchBar"));

var _useEventListener = _interopRequireDefault(require("cozy-ui/transpiled/react/hooks/useEventListener"));

var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");

var _I18n = require("cozy-ui/transpiled/react/providers/I18n");

var _AssistantProvider = require("../AssistantProvider");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

var styles = {
  "conversationBar": "styles__conversationBar___2J-Us",
  "conversationBar-input": "styles__conversationBar-input___2DfdZ"
};

var ConversationBar = function ConversationBar(_ref) {
  var assistantStatus = _ref.assistantStatus;

  var _useI18n = (0, _I18n.useI18n)(),
      t = _useI18n.t;

  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
      isMobile = _useBreakpoints.isMobile;

  var _useAssistant = (0, _AssistantProvider.useAssistant)(),
      onAssistantExecute = _useAssistant.onAssistantExecute;

  var _useState = (0, _react.useState)(''),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      inputValue = _useState2[0],
      setInputValue = _useState2[1];

  var inputRef = (0, _react.useRef)();

  var _useParams = (0, _reactRouterDom.useParams)(),
      conversationId = _useParams.conversationId; // to adjust input height for multiline when typing in it


  (0, _useEventListener.default)(inputRef.current, 'input', function () {
    inputRef.current.style.height = 'auto'; // to resize input when emptying it

    inputRef.current.style.height = "".concat(inputRef.current.scrollHeight, "px");
  });

  var handleClear = function handleClear() {
    setInputValue('');
  };

  var handleChange = function handleChange(ev) {
    setInputValue(ev.target.value);
  };

  var handleStop = function handleStop() {
    // not supported right now
    return;
  };

  var handleClick = function handleClick() {
    return onAssistantExecute({
      value: inputValue,
      conversationId: conversationId
    }, function () {
      handleClear();
      inputRef.current.style.height = 'auto';
    });
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "u-w-100 u-maw-7 u-mh-auto"
  }, /*#__PURE__*/_react.default.createElement(_SearchBar.default, {
    className: styles['conversationBar'],
    icon: null,
    size: "auto",
    placeholder: t('assistant.search.placeholder'),
    value: inputValue,
    disabledClear: true,
    componentsProps: {
      inputBase: {
        inputRef: inputRef,
        className: 'u-pv-0',
        rows: 1,
        multiline: true,
        inputProps: {
          className: styles['conversationBar-input']
        },
        autoFocus: !isMobile,
        endAdornment: assistantStatus !== 'idle' ? /*#__PURE__*/_react.default.createElement(_Buttons.default, {
          component: "div",
          className: "u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle u-p-1 u-mr-1",
          classes: {
            label: 'u-flex u-w-auto'
          },
          label: /*#__PURE__*/_react.default.createElement(_Icon.default, {
            icon: _Stop.default,
            size: 12
          }),
          onClick: handleStop
        }) : /*#__PURE__*/_react.default.createElement(_Buttons.default, {
          component: "div",
          className: "u-miw-auto u-mih-auto u-w-2 u-h-2 u-bdrs-circle u-p-1 u-mr-1",
          classes: {
            label: 'u-flex u-w-auto'
          },
          label: /*#__PURE__*/_react.default.createElement(_Icon.default, {
            icon: _Paperplane.default,
            size: 12
          }),
          disabled: !inputValue,
          onClick: handleClick
        }),
        onKeyDown: function onKeyDown(ev) {
          if (!isMobile) {
            if (ev.shiftKey && ev.key === 'Enter') {
              return ev;
            }

            if (ev.key === 'Enter') {
              ev.preventDefault(); // prevent form submit

              return handleClick();
            }
          }
        }
      }
    },
    onChange: handleChange
  }));
};

var _default = ConversationBar;
exports.default = _default;