cozy-search/dist/components/Conversations/ConversationComposer.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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _react = require("@assistant-ui/react");

var _twakeIcons = require("@linagora/twake-icons");

var _classnames = _interopRequireDefault(require("classnames"));

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

var _cozyFlags = _interopRequireDefault(require("cozy-flags"));

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

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

var _ConversationBar = _interopRequireDefault(require("./ConversationBar"));

var _AssistantSelection = _interopRequireDefault(require("../Assistant/AssistantSelection"));

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

var _TwakeKnowledgeSelector = _interopRequireDefault(require("../TwakeKnowledges/TwakeKnowledgeSelector"));

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 = {
  "composerContainer": "styles__composerContainer___3bNfY",
  "composerActions": "styles__composerActions___2xQEH",
  "conversationBar": "styles__conversationBar___2J-Us",
  "conversationBar--mobile": "styles__conversationBar--mobile___1jdg8",
  "conversationViewport": "styles__conversationViewport___24jYX",
  "conversationBar-input": "styles__conversationBar-input___2DfdZ",
  "chatConversation": "styles__chatConversation___2EmkA",
  "conversationHeaderBar": "styles__conversationHeaderBar___C8tlD",
  "conversationList": "styles__conversationList___2GCzV",
  "conversationList--container": "styles__conversationList--container___2xRAG",
  "conversationList--hidden": "styles__conversationList--hidden___20BsT",
  "conversationListItem--selected": "styles__conversationListItem--selected___2jCyB",
  "menuToggler": "styles__menuToggler___39GfB",
  "menuToggler--disabled": "styles__menuToggler--disabled___15vd4",
  "conversationChips-container": "styles__conversationChips-container___327dE",
  "conversationChips-startIcon": "styles__conversationChips-startIcon___1yOVn",
  "conversationChips-chipIcon": "styles__conversationChips-chipIcon___1wmF-",
  "conversationChips-deleteIcon": "styles__conversationChips-deleteIcon___s9C40",
  "is-warning": "styles__is-warning___3sa0v",
  "conversationChips-chip": "styles__conversationChips-chip___2PqQv",
  "cozyThread-messageContent": "styles__cozyThread-messageContent___2HjdB",
  "conversation-list-item": "styles__conversation-list-item___rQapI",
  "conversation-list-item-action": "styles__conversation-list-item-action___qiuKm",
  "conversation-list-item--selected--light": "styles__conversation-list-item--selected--light___3WvIn",
  "conversation-list-item--selected--dark": "styles__conversation-list-item--selected--dark___JDQlY",
  "conversation-list-item--wider": "styles__conversation-list-item--wider___2Tl2c",
  "conversation-list-item-divider": "styles__conversation-list-item-divider___2LOP1",
  "conversation-list-item-text": "styles__conversation-list-item-text___31VBM",
  "conversation-list-item-title": "styles__conversation-list-item-title___3je_6",
  "conversation-list-item-meta": "styles__conversation-list-item-meta___3Zk-r",
  "conversation-list-item-subtitle": "styles__conversation-list-item-subtitle___3e_h0"
};

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

  var composerRuntime = (0, _react.useComposerRuntime)();
  var isRunning = (0, _react.useThread)(function (state) {
    return state.isRunning;
  });
  var isThreadEmpty = (0, _react.useThread)(function (state) {
    return state.messages.length === 0;
  });

  var _useAssistant = (0, _AssistantProvider.useAssistant)(),
      setOpenedKnowledgePanel = _useAssistant.setOpenedKnowledgePanel,
      websearchEnabled = _useAssistant.websearchEnabled,
      setWebsearchEnabled = _useAssistant.setWebsearchEnabled;

  var value = (0, _react.useComposer)(function (state) {
    return state.text;
  });
  var isEmpty = (0, _react.useComposer)(function (state) {
    return state.isEmpty;
  });
  var handleSend = (0, _react2.useCallback)(function () {
    composerRuntime.send();
  }, [composerRuntime]);
  var handleCancel = (0, _react2.useCallback)(function () {
    composerRuntime.cancel();
  }, [composerRuntime]);
  var handleKeyDown = (0, _react2.useCallback)(function (ev) {
    if (!isMobile) {
      if (ev.shiftKey && ev.key === 'Enter') {
        return;
      }

      if (ev.key === 'Enter') {
        ev.preventDefault();
        handleSend();
      }
    }
  }, [isMobile, handleSend]);
  var handleToggleWebsearch = (0, _react2.useCallback)(function () {
    if (isRunning) return;
    setWebsearchEnabled(function (prev) {
      return !prev;
    });
  }, [isRunning, setWebsearchEnabled]);
  return /*#__PURE__*/_react2.default.createElement(_react.ComposerPrimitive.Root, {
    className: (0, _classnames.default)('u-w-100 u-maw-7 u-mh-auto u-bxz', styles['composerContainer'])
  }, /*#__PURE__*/_react2.default.createElement("div", {
    className: "u-flex u-flex-items-start u-flex-justify-between"
  }, /*#__PURE__*/_react2.default.createElement(_ConversationBar.default, {
    value: value,
    isEmpty: isEmpty,
    onKeyDown: handleKeyDown
  }), /*#__PURE__*/_react2.default.createElement("div", {
    className: "u-flex u-flex-items-center u-flex-shrink-0"
  }, /*#__PURE__*/_react2.default.createElement(_Buttons.default, (0, _extends2.default)({
    size: "small",
    className: "u-miw-auto u-w-2 u-h-2 u-bdrs-circle u-flex-shrink-0",
    classes: {
      label: 'u-flex u-w-auto'
    }
  }, isRunning ? {
    label: /*#__PURE__*/_react2.default.createElement(_twakeIcons.Icon, {
      icon: _twakeIcons.Stop,
      size: 12
    }),
    onClick: handleCancel
  } : {
    variant: 'primary',
    label: /*#__PURE__*/_react2.default.createElement(_twakeIcons.Icon, {
      icon: _twakeIcons.Paperplane,
      size: 12,
      rotate: -45
    }),
    onClick: handleSend
  })))), /*#__PURE__*/_react2.default.createElement("div", {
    className: (0, _classnames.default)('u-flex u-flex-items-center u-flex-justify-between', styles['composerActions'])
  }, (0, _cozyFlags.default)('cozy.assistant.create-assistant.enabled') && /*#__PURE__*/_react2.default.createElement(_AssistantSelection.default, {
    disabled: !isThreadEmpty
  }), /*#__PURE__*/_react2.default.createElement(_TwakeKnowledgeSelector.default, {
    className: "u-ml-auto",
    onSelectTwakeKnowledge: setOpenedKnowledgePanel,
    websearchEnabled: websearchEnabled,
    onToggleWebsearch: handleToggleWebsearch
  })));
};

var _default = ConversationComposer;
exports.default = _default;