@dpocean/chatui 1.0.0

package/lib/components/ComponentsProvider/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComponentsProvider = void 0;
+Object.defineProperty(exports, "useComponents", {
+  enumerable: true,
+  get: function get() {
+    return _useComponents.useComponents;
+  }
+});
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _lazyComponent = require("../../utils/lazyComponent");
+var _LazyComponent = require("../LazyComponent");
+var _ComponentsContext = require("./ComponentsContext");
+var _useComponents = require("./useComponents");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var ComponentsProvider = exports.ComponentsProvider = function ComponentsProvider(props) {
+  var components = props.components,
+    children = props.children;
+  var componentsRef = _react.default.useRef(_objectSpread({}, components));
+  (0, _react.useEffect)(function () {
+    componentsRef.current = _objectSpread(_objectSpread({}, components), componentsRef.current);
+  }, [components]);
+  function addComponent(code, val) {
+    componentsRef.current[code] = val;
+  }
+  function hasComponent(code) {
+    return componentsRef.current.hasOwnProperty(code);
+  }
+  function getComponent(code) {
+    var callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
+    var comp = componentsRef.current[code];
+
+    // no component
+    if (!comp) {
+      callback({
+        code: code,
+        errCode: 'NO_CODE'
+      });
+      return null;
+    }
+    if ('component' in comp) {
+      if (comp.type !== 'decorator') {
+        callback({
+          code: code,
+          async: false,
+          component: comp.component
+        });
+      }
+      return comp.component;
+    }
+    if ('decorator' in comp) {
+      var component = function component(compProps) {
+        return /*#__PURE__*/_react.default.createElement(_LazyComponent.LazyComponentWithCode, (0, _extends2.default)({
+          code: comp.decorator,
+          decoratorData: comp.data,
+          onLoad: callback
+        }, compProps));
+      };
+      componentsRef.current[code] = {
+        component: component,
+        type: 'decorator'
+      };
+      return component;
+    }
+    if ('url' in comp) {
+      var _component = (0, _lazyComponent.lazyComponent)(comp.url, comp.name, function () {
+        componentsRef.current[code] = {
+          component: _component
+        };
+        callback({
+          code: code,
+          async: true,
+          component: _component
+        });
+      }, function () {
+        callback({
+          code: code,
+          errCode: 'ERR_IMPORT_SCRIPT'
+        });
+      });
+      return _component;
+    }
+    callback({
+      code: code,
+      errCode: 'NO_HANDLER'
+    });
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_ComponentsContext.ComponentsContext.Provider, {
+    value: {
+      addComponent: addComponent,
+      hasComponent: hasComponent,
+      getComponent: getComponent
+    }
+  }, children);
+};

package/lib/components/ComponentsProvider/interface.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { LazyComponentResult } from '../../utils/lazyComponent';
+interface ComponentInterfaceWithComponent {
+    component: React.ComponentType<any>;
+    type?: 'decorator';
+}
+interface ComponentInterfaceWithUrl {
+    url: string;
+    name: string;
+}
+interface ComponentInterfaceWithDecorator {
+    decorator: string;
+    data: any;
+}
+export type ComponentInterface = ComponentInterfaceWithComponent | ComponentInterfaceWithUrl | ComponentInterfaceWithDecorator;
+interface CallbackParamsWithAsync {
+    code: string;
+    async: boolean;
+    component: React.ComponentType;
+}
+interface CallbackParamsWithError {
+    code: string;
+    errCode: string;
+}
+export interface GetComponentCallback {
+    (e: CallbackParamsWithAsync | CallbackParamsWithError): void;
+}
+export interface ComponentsContextInterface {
+    addComponent: (code: string, value: ComponentInterface) => void;
+    hasComponent: (code: string) => boolean;
+    getComponent: (code: string, callback?: GetComponentCallback) => React.ComponentType<any> | LazyComponentResult | null;
+}
+export interface ComponentsMap {
+    [k: string]: ComponentInterface;
+}
+export interface ComponentsProviderProps {
+    components: ComponentsMap;
+    children?: React.ReactNode;
+}
+export {};

package/lib/components/ComponentsProvider/interface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/components/ComponentsProvider/useComponents.d.ts

@@ -0,0 +1 @@
+export declare function useComponents(): import("./interface").ComponentsContextInterface;

package/lib/components/ComponentsProvider/useComponents.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponents = useComponents;
+var _react = _interopRequireDefault(require("react"));
+var _ComponentsContext = require("./ComponentsContext");
+function useComponents() {
+  return _react.default.useContext(_ComponentsContext.ComponentsContext);
+}

package/lib/components/Composer/AccessoryWrap.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AccessoryWrapProps {
+    onClickOutside: () => void;
+    children: React.ReactNode;
+}
+export declare const AccessoryWrap: ({ onClickOutside, children }: AccessoryWrapProps) => React.JSX.Element;
+export {};

package/lib/components/Composer/AccessoryWrap.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccessoryWrap = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ClickOutside = require("../ClickOutside");
+var AccessoryWrap = exports.AccessoryWrap = function AccessoryWrap(_ref) {
+  var onClickOutside = _ref.onClickOutside,
+    children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_ClickOutside.ClickOutside, {
+    onClick: onClickOutside
+  }, children);
+};

package/lib/components/Composer/Action.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IconButtonProps } from '../IconButton';
+export declare const Action: (props: IconButtonProps) => React.JSX.Element;

package/lib/components/Composer/Action.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Action = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _IconButton = require("../IconButton");
+var Action = exports.Action = function Action(props) {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Composer-actions",
+    "data-action-icon": props.icon
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.IconButton, (0, _extends2.default)({
+    size: "lg"
+  }, props)));
+};

package/lib/components/Composer/ComposerInput.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { InputProps } from '../Input';
+interface ComposerInputProps extends InputProps {
+    invisible: boolean;
+    inputRef: React.MutableRefObject<HTMLTextAreaElement>;
+    onImageSend?: (file: File) => Promise<any>;
+}
+export declare const ComposerInput: ({ inputRef, invisible, onImageSend, ...rest }: ComposerInputProps) => React.JSX.Element;
+export {};

package/lib/components/Composer/ComposerInput.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ComposerInput = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Input = require("../Input");
+var _SendConfirm = require("../SendConfirm");
+var _riseInput = _interopRequireDefault(require("./riseInput"));
+var _parseDataTransfer = _interopRequireDefault(require("../../utils/parseDataTransfer"));
+var _canUse = _interopRequireDefault(require("../../utils/canUse"));
+var _excluded = ["inputRef", "invisible", "onImageSend"];
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var canTouch = (0, _canUse.default)('touch');
+var ComposerInput = exports.ComposerInput = function ComposerInput(_ref) {
+  var inputRef = _ref.inputRef,
+    invisible = _ref.invisible,
+    onImageSend = _ref.onImageSend,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    pastedImage = _useState2[0],
+    setPastedImage = _useState2[1];
+  var handlePaste = (0, _react.useCallback)(function (e) {
+    (0, _parseDataTransfer.default)(e, setPastedImage);
+  }, []);
+  var handleImageCancel = (0, _react.useCallback)(function () {
+    setPastedImage(null);
+  }, []);
+  var handleImageSend = (0, _react.useCallback)(function () {
+    if (onImageSend && pastedImage) {
+      Promise.resolve(onImageSend(pastedImage)).then(function () {
+        setPastedImage(null);
+      });
+    }
+  }, [onImageSend, pastedImage]);
+  (0, _react.useEffect)(function () {
+    if (canTouch && inputRef.current) {
+      var $composer = document.querySelector('.Composer');
+      (0, _riseInput.default)(inputRef.current, $composer);
+    }
+  }, [inputRef]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)({
+      'S--invisible': invisible
+    }),
+    "aria-hidden": invisible
+  }, /*#__PURE__*/_react.default.createElement(_Input.Input, (0, _extends2.default)({
+    className: "Composer-input",
+    rows: 1,
+    autoSize: true,
+    enterKeyHint: "send",
+    onPaste: onImageSend ? handlePaste : undefined,
+    ref: inputRef
+  }, rest)), pastedImage && /*#__PURE__*/_react.default.createElement(_SendConfirm.SendConfirm, {
+    file: pastedImage,
+    onCancel: handleImageCancel,
+    onSend: handleImageSend
+  }));
+};

package/lib/components/Composer/SendButton.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface SendButtonProps {
+    disabled?: boolean;
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+export declare const SendButton: ({ disabled, onClick }: SendButtonProps) => React.JSX.Element;
+export {};

package/lib/components/Composer/SendButton.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SendButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Button = require("../Button");
+var _ConfigProvider = require("../ConfigProvider");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var SendButton = exports.SendButton = function SendButton(_ref) {
+  var disabled = _ref.disabled,
+    onClick = _ref.onClick;
+  var _useLocale = (0, _ConfigProvider.useLocale)('Composer'),
+    trans = _useLocale.trans;
+  var wrapRef = (0, _react.useRef)(null);
+  var btnRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var wrap = wrapRef.current;
+    var btn = btnRef.current;
+    if (wrap && btn) {
+      wrap.style.setProperty('--send-width', "".concat(btn.offsetWidth, "px"));
+    }
+  }, []);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "Composer-actions",
+    "data-action": "send",
+    ref: wrapRef
+  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: "Composer-sendBtn",
+    disabled: disabled,
+    onMouseDown: onClick,
+    color: "primary",
+    ref: btnRef
+  }, trans('send')));
+};

package/lib/components/Composer/ToolbarItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { ToolbarItemProps } from '../Toolbar';
+type IToolbarItem = {
+    item: ToolbarItemProps;
+    onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+export declare const ToolbarItem: (props: IToolbarItem) => React.JSX.Element;
+export {};

package/lib/components/Composer/ToolbarItem.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToolbarItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Action = require("./Action");
+var ToolbarItem = exports.ToolbarItem = function ToolbarItem(props) {
+  var item = props.item,
+    onClick = props.onClick;
+  return /*#__PURE__*/_react.default.createElement(_Action.Action, {
+    icon: item.icon,
+    img: item.img,
+    "data-icon": item.icon,
+    "data-tooltip": item.title || null,
+    "aria-label": item.title,
+    onClick: onClick
+  });
+};

package/lib/components/Composer/index.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { IconButtonProps } from '../IconButton';
+import { RecorderProps } from '../Recorder';
+import { ToolbarItemProps } from '../Toolbar';
+import { InputProps } from '../Input';
+export declare const CLASS_NAME_FOCUSING = "S--focusing";
+export type InputType = 'voice' | 'text';
+export type ComposerProps = {
+    wideBreakpoint?: string;
+    text?: string;
+    textOnce?: string;
+    inputOptions?: InputProps;
+    placeholder?: string;
+    inputType?: InputType;
+    onInputTypeChange?: (inputType: InputType) => void;
+    recorder?: RecorderProps;
+    onSend: (type: string, content: string) => void;
+    onBeforeSend?: (type: string, content: string) => boolean | Promise<boolean>;
+    onImageSend?: (file: File) => Promise<any>;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onChange?: (value: string, event: React.ChangeEvent<Element>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void;
+    toolbar?: ToolbarItemProps[];
+    onToolbarClick?: (item: ToolbarItemProps, event: React.MouseEvent) => void;
+    onAccessoryToggle?: (isAccessoryOpen: boolean) => void;
+    rightAction?: IconButtonProps;
+    isX?: boolean;
+};
+export interface ComposerHandle {
+    setText: (text: string) => void;
+}
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<ComposerHandle>>;