cozy-search/dist/components/CreateAssistantSteps/BasicInfoStep.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 _twakeIcons = require("@linagora/twake-icons");

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

var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));

var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));

var _twakeI18n = require("twake-i18n");

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 = {
  "BasicInfoStep": "styles__BasicInfoStep___2r0eM",
  "avatar-container": "styles__avatar-container___kJ_64",
  "avatar-image": "styles__avatar-image___2Mkxj",
  "file-input": "styles__file-input___2fB5n",
  "ModelSelectionStep": "styles__ModelSelectionStep___1auXB",
  "grid-container": "styles__grid-container___3wOus",
  "grid-container--mobile": "styles__grid-container--mobile___uCAg1",
  "model-card": "styles__model-card___fbAqF",
  "model-card--selected": "styles__model-card--selected___3hKq3",
  "model-card--openrag--light": "styles__model-card--openrag--light___1vabR",
  "model-card--openrag--dark": "styles__model-card--openrag--dark___1x0sK",
  "icon-container": "styles__icon-container___1vaTp",
  "icon-container--google": "styles__icon-container--google___3gtC7",
  "icon-container--custom": "styles__icon-container--custom___1_EFK",
  "icon-container--openai": "styles__icon-container--openai___3DsoO",
  "check-icon": "styles__check-icon___3uPUk",
  "CreateAssistantDialog": "styles__CreateAssistantDialog___1dSe_",
  "close-button": "styles__close-button___3jc_w"
};

var BasicInfoStep = function BasicInfoStep(_ref) {
  var name = _ref.name,
      description = _ref.description,
      icon = _ref.icon,
      onChange = _ref.onChange,
      onAvatarChange = _ref.onAvatarChange;

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

  var fileInputRef = (0, _react.useRef)(null);

  var handleAvatarClick = function handleAvatarClick() {
    var _fileInputRef$current;

    (_fileInputRef$current = fileInputRef.current) === null || _fileInputRef$current === void 0 ? void 0 : _fileInputRef$current.click();
  };

  var handleFileChange = function handleFileChange(event) {
    var file = event.target.files[0];

    if (file) {
      var reader = new FileReader();

      reader.onloadend = function () {
        onAvatarChange(reader.result);
      };

      reader.readAsDataURL(file);
    }
  };

  return /*#__PURE__*/_react.default.createElement("div", {
    className: "u-flex u-flex-column u-gap-1 ".concat(styles.BasicInfoStep)
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body1",
    className: "u-mb-1 u-c-text-secondary"
  }, t('assistant_create.steps.basic_info.description')), /*#__PURE__*/_react.default.createElement("div", {
    className: "u-mb-1"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: "u-mb-half"
  }, t('assistant_create.steps.basic_info.avatar')), /*#__PURE__*/_react.default.createElement("div", {
    className: "u-flex u-flex-items-center u-flex-justify-center"
  }, /*#__PURE__*/_react.default.createElement("div", {
    role: "button",
    tabIndex: 0,
    "aria-label": t('assistant_create.steps.basic_info.avatar'),
    className: "u-w-3 u-h-3 u-flex u-flex-justify-center u-flex-items-center u-c-pointer u-bd-1 u-bd-coolGrey u-ov-hidden ".concat(styles['avatar-container']),
    onClick: handleAvatarClick
  }, icon ? /*#__PURE__*/_react.default.createElement("img", {
    src: icon,
    alt: "Avatar",
    className: "u-w-100 u-h-100 u-obj-cover ".concat(styles['avatar-image'])
  }) : /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
    icon: _twakeIcons.Plus
  })), /*#__PURE__*/_react.default.createElement("input", {
    type: "file",
    ref: fileInputRef,
    onChange: handleFileChange,
    className: styles['file-input'],
    accept: "image/*",
    "data-testid": "avatar-input"
  }))), /*#__PURE__*/_react.default.createElement("div", {
    className: "u-mb-1"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: "u-mb-half"
  }, t('assistant_create.steps.basic_info.name')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
    fullWidth: true,
    placeholder: t('assistant_create.steps.basic_info.name_placeholder'),
    value: name,
    onChange: onChange('name'),
    variant: "outlined"
  })), /*#__PURE__*/_react.default.createElement("div", {
    className: "u-mb-1"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: "u-mb-half"
  }, t('assistant_create.steps.basic_info.instructions')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
    fullWidth: true,
    multiline: true,
    rows: 6,
    placeholder: t('assistant_create.steps.basic_info.instructions_placeholder'),
    value: description,
    onChange: onChange('description'),
    variant: "outlined"
  })));
};

var _default = BasicInfoStep;
exports.default = _default;