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

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

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

var _Box = _interopRequireDefault(require("cozy-ui/transpiled/react/Box"));

var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));

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

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

var _CozyTheme = require("cozy-ui-plus/dist/providers/CozyTheme");

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

var _helpers = require("./helpers");

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 ApiKeyStep = function ApiKeyStep(_ref) {
  var formData = _ref.formData,
      selectedProvider = _ref.selectedProvider,
      onChange = _ref.onChange;

  var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
      theme = _useCozyTheme.type;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      showPassword = _useState2[0],
      setShowPassword = _useState2[1];

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

  var _ref2 = selectedProvider || {},
      id = _ref2.id,
      providerName = _ref2.name;

  var _ref3 = formData || {},
      _ref3$model = _ref3.model,
      model = _ref3$model === void 0 ? '' : _ref3$model,
      _ref3$baseUrl = _ref3.baseUrl,
      baseUrl = _ref3$baseUrl === void 0 ? '' : _ref3$baseUrl,
      _ref3$apiKey = _ref3.apiKey,
      apiKey = _ref3$apiKey === void 0 ? '' : _ref3$apiKey,
      _ref3$encryptedApiKey = _ref3.encryptedApiKey,
      encryptedApiKey = _ref3$encryptedApiKey === void 0 ? '' : _ref3$encryptedApiKey;

  var isCustomModel = id === 'custom';
  var isModelUnsupported = (0, _helpers.checkIfModelUnsupported)(selectedProvider, model);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: "u-flex u-flex-column u-gap-1"
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body1",
    className: "u-mb-1 u-c-text-secondary"
  }, isCustomModel ? t('assistant_create.steps.configuration.custom_provider_description') : t('assistant_create.steps.configuration.description')), isCustomModel && /*#__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.configuration.url.label')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
    fullWidth: true,
    placeholder: t('assistant_create.steps.configuration.url.placeholder'),
    value: baseUrl,
    onChange: onChange('baseUrl'),
    variant: "outlined",
    type: "text"
  })), /*#__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.configuration.model.label')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
    fullWidth: true,
    placeholder: t('assistant_create.steps.configuration.model.placeholder'),
    value: model,
    onChange: onChange('model'),
    variant: "outlined",
    type: "text",
    error: isModelUnsupported,
    helperText: isModelUnsupported ? t('assistant_create.steps.configuration.model.unsupported') : undefined
  })), /*#__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.configuration.api_key.label')), /*#__PURE__*/_react.default.createElement(_TextField.default, {
    fullWidth: true,
    placeholder: encryptedApiKey ? '••••••••••••' : t('assistant_create.steps.configuration.api_key.placeholder'),
    value: apiKey,
    onChange: onChange('apiKey'),
    variant: "outlined",
    type: showPassword ? 'text' : 'password',
    InputProps: {
      endAdornment: /*#__PURE__*/_react.default.createElement(_IconButton.default, {
        onClick: function onClick() {
          return setShowPassword(function (prev) {
            return !prev;
          });
        },
        "aria-label": showPassword ? t('assistant.hide') : t('assistant.show')
      }, /*#__PURE__*/_react.default.createElement(_twakeIcons.Icon, {
        icon: _twakeIcons.Eye
      }))
    }
  })), /*#__PURE__*/_react.default.createElement(_Box.default, {
    display: "block",
    border: 1,
    borderColor: "var(--dividerColor)",
    borderRadius: 8,
    padding: 2,
    className: (0, _classnames.default)({
      'u-bg-primaryBackgroundLight': theme === 'light',
      'u-bg-coolGrey': theme === 'dark'
    })
  }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "h6",
    className: "u-mb-half"
  }, t('assistant_create.steps.configuration.no_key')), /*#__PURE__*/_react.default.createElement(_Typography.default, {
    variant: "body2",
    color: "textSecondary"
  }, /*#__PURE__*/_react.default.createElement("span", null, t('assistant_create.steps.configuration.generate', {
    provider: !isCustomModel ? providerName : t('assistant_create.steps.configuration.custom_provider')
  })))));
};

var _default = ApiKeyStep;
exports.default = _default;