@douyinfe/semi-foundation 2.62.0 → 2.63.0-beta.0

package/lib/cjs/chat/constants.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+var _constants = require("../base/constants");
+const cssClasses = exports.cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-chat`,
+  PREFIX_DIVIDER: `${_constants.BASE_CLASS_PREFIX}-chat-divider`,
+  PREFIX_CHAT_BOX: `${_constants.BASE_CLASS_PREFIX}-chat-chatBox`,
+  PREFIX_CHAT_BOX_ACTION: `${_constants.BASE_CLASS_PREFIX}-chat-chatBox-action`,
+  PREFIX_INPUT_BOX: `${_constants.BASE_CLASS_PREFIX}-chat-inputBox`,
+  PREFIX_ATTACHMENT: `${_constants.BASE_CLASS_PREFIX}-chat-attachment`,
+  PREFIX_HINT: `${_constants.BASE_CLASS_PREFIX}-chat-hint`
+};
+const ROLE = {
+  USER: 'user',
+  ASSISTANT: 'assistant',
+  SYSTEM: 'system',
+  DIVIDER: 'divider'
+};
+const CHAT_ALIGN = {
+  LEFT_RIGHT: 'leftRight',
+  LEFT_ALIGN: 'leftAlign'
+};
+const MESSAGE_STATUS = {
+  LOADING: 'loading',
+  INCOMPLETE: 'incomplete',
+  COMPLETE: 'complete',
+  ERROR: 'error'
+};
+const PIC_SUFFIX_ARRAY = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp'];
+const PIC_PREFIX = 'image/';
+const SCROLL_ANIMATION_TIME = 300;
+const SHOW_SCROLL_GAP = 100;
+const MODE = {
+  BUBBLE: 'bubble',
+  NO_BUBBLE: 'noBubble',
+  USER_BUBBLE: 'userBubble'
+};
+const SEND_HOT_KEY = {
+  ENTER: 'enter',
+  SHIFT_PLUS_ENTER: 'shift+enter'
+};
+const strings = exports.strings = {
+  ROLE,
+  CHAT_ALIGN,
+  MESSAGE_STATUS,
+  PIC_SUFFIX_ARRAY,
+  PIC_PREFIX,
+  SCROLL_ANIMATION_TIME,
+  SHOW_SCROLL_GAP,
+  MODE,
+  SEND_HOT_KEY
+};

package/lib/cjs/chat/foundation.d.ts

@@ -0,0 +1,76 @@
+/// <reference types="react" />
+/// <reference types="lodash" />
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface Content {
+    type: 'text' | 'image_url' | 'file_url';
+    text?: string;
+    image_url?: {
+        url: string;
+        [x: string]: any;
+    };
+    file_url?: {
+        url: string;
+        name: string;
+        size: string;
+        type: string;
+        [x: string]: any;
+    };
+}
+export interface Message {
+    role?: string;
+    name?: string;
+    id?: string;
+    content?: string | Content[];
+    parentId?: string;
+    createAt?: number;
+    status?: 'loading' | 'incomplete' | 'complete' | 'error';
+    [x: string]: any;
+}
+export interface ChatAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    getContainerRef: () => React.RefObject<HTMLDivElement>;
+    setWheelScroll: (flag: boolean) => void;
+    notifyChatsChange: (chats: Message[]) => void;
+    notifyLikeMessage: (message: Message) => void;
+    notifyDislikeMessage: (message: Message) => void;
+    notifyCopyMessage: (message: Message) => void;
+    notifyClearContext: () => void;
+    notifyMessageSend: (content: string, attachment: any[]) => void;
+    notifyInputChange: (props: {
+        inputValue: string;
+        attachment: any[];
+    }) => void;
+    setBackBottomVisible: (visible: boolean) => void;
+    registerWheelEvent: () => void;
+    unRegisterWheelEvent: () => void;
+    notifyStopGenerate: (e: any) => void;
+    notifyHintClick: (hint: string) => void;
+    setUploadAreaVisible: (visible: boolean) => void;
+    manualUpload: (e: any) => void;
+    getDropAreaElement: () => HTMLDivElement;
+}
+export default class ChatFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ChatAdapter<P, S>, P, S> {
+    animation: any;
+    constructor(adapter: ChatAdapter<P, S>);
+    init: () => void;
+    destroy: () => void;
+    stopGenerate: (e: any) => void;
+    scrollToBottomImmediately: () => void;
+    scrollToBottomWithAnimation: () => void;
+    containerScroll: (e: any) => void;
+    getScroll: import("lodash").DebouncedFunc<(target: any) => typeof scroll>;
+    clearContext: (e: any) => void;
+    onMessageSend: (input: string, attachment: any[]) => void;
+    onHintClick: (hint: string) => void;
+    onInputChange: (props: {
+        inputValue: string;
+        attachment: any[];
+    }) => void;
+    deleteMessage: (message: Message) => void;
+    likeMessage: (message: Message) => void;
+    dislikeMessage: (message: Message) => void;
+    resetMessage: (message: Message) => void;
+    handleDragOver: (e: any) => void;
+    handleContainerDragOver: (e: any) => void;
+    handleContainerDrop: (e: any) => void;
+    handleContainerDragLeave: (e: any) => void;
+}

package/lib/cjs/chat/foundation.js

@@ -0,0 +1,275 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _constants = require("./constants");
+var _semiAnimation = require("@douyinfe/semi-animation");
+var _uuid = require("../utils/uuid");
+var _a11y = require("../utils/a11y");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  PIC_PREFIX,
+  PIC_SUFFIX_ARRAY,
+  ROLE,
+  SCROLL_ANIMATION_TIME,
+  SHOW_SCROLL_GAP
+} = _constants.strings;
+class ChatFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.init = () => {
+      this.scrollToBottomImmediately();
+      this._adapter.registerWheelEvent();
+    };
+    this.destroy = () => {
+      this.animation && this.animation.destroy();
+      this._adapter.unRegisterWheelEvent();
+    };
+    this.stopGenerate = e => {
+      this._adapter.notifyStopGenerate(e);
+    };
+    this.scrollToBottomImmediately = () => {
+      const containerRef = this._adapter.getContainerRef();
+      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      if (element) {
+        element.scrollTop = element.scrollHeight;
+      }
+    };
+    this.scrollToBottomWithAnimation = () => {
+      const duration = SCROLL_ANIMATION_TIME;
+      const containerRef = this._adapter.getContainerRef();
+      const element = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current;
+      if (!element) {
+        return;
+      }
+      const from = element.scrollTop;
+      const to = element.scrollHeight;
+      this.animation = new _semiAnimation.Animation({
+        from: {
+          scrollTop: from
+        },
+        to: {
+          scrollTop: to
+        }
+      }, {
+        duration,
+        easing: 'easeInOutCubic'
+      });
+      this.animation.on('frame', _ref => {
+        let {
+          scrollTop
+        } = _ref;
+        element.scrollTop = scrollTop;
+      });
+      this.animation.start();
+    };
+    this.containerScroll = e => {
+      if (e.target !== e.currentTarget) {
+        return;
+      }
+      e.persist();
+      const update = () => {
+        this.getScroll(e.target);
+      };
+      requestAnimationFrame(update);
+    };
+    this.getScroll = (0, _debounce2.default)(target => {
+      const scrollHeight = target.scrollHeight;
+      const clientHeight = target.clientHeight;
+      const scrollTop = target.scrollTop;
+      const {
+        backBottomVisible
+      } = this.getStates();
+      if (scrollHeight - scrollTop - clientHeight <= SHOW_SCROLL_GAP) {
+        if (backBottomVisible) {
+          this._adapter.setBackBottomVisible(false);
+        }
+      } else {
+        if (!backBottomVisible) {
+          this._adapter.setBackBottomVisible(true);
+        }
+      }
+      return scroll;
+    }, 100);
+    this.clearContext = e => {
+      const {
+        chats
+      } = this.getStates();
+      if (chats[chats.length - 1].role === ROLE.DIVIDER) {
+        return;
+      }
+      const dividerMessage = {
+        role: ROLE.DIVIDER,
+        id: (0, _uuid.getUuidv4)(),
+        createAt: Date.now()
+      };
+      const newChats = [...chats, dividerMessage];
+      this._adapter.notifyChatsChange(newChats);
+      this._adapter.notifyClearContext();
+    };
+    this.onMessageSend = (input, attachment) => {
+      let content;
+      if (Boolean(attachment) && attachment.length === 0) {
+        content = input;
+      } else {
+        content = [];
+        input && content.push({
+          type: 'text',
+          text: input
+        });
+        (attachment !== null && attachment !== void 0 ? attachment : []).map(item => {
+          var _a;
+          const {
+            fileInstance,
+            name = '',
+            url,
+            size
+          } = item;
+          const suffix = name.split('.').pop();
+          const isImg = ((_a = fileInstance === null || fileInstance === void 0 ? void 0 : fileInstance.type) === null || _a === void 0 ? void 0 : _a.startsWith(PIC_PREFIX)) || PIC_SUFFIX_ARRAY.includes(suffix);
+          if (isImg) {
+            content.push({
+              type: 'image_url',
+              image_url: {
+                url: url
+              }
+            });
+          } else {
+            content.push({
+              type: 'file_url',
+              file_url: {
+                url: url,
+                name: name,
+                size: size,
+                type: fileInstance === null || fileInstance === void 0 ? void 0 : fileInstance.type
+              }
+            });
+          }
+        });
+      }
+      if (content) {
+        const newMessage = {
+          role: ROLE.USER,
+          id: (0, _uuid.getUuidv4)(),
+          createAt: Date.now(),
+          content
+        };
+        this._adapter.notifyChatsChange([...this.getStates().chats, newMessage]);
+      }
+      this._adapter.setWheelScroll(false);
+      this._adapter.registerWheelEvent();
+      this._adapter.notifyMessageSend(input, attachment);
+    };
+    this.onHintClick = hint => {
+      const {
+        chats
+      } = this.getStates();
+      const newMessage = {
+        role: ROLE.USER,
+        id: (0, _uuid.getUuidv4)(),
+        createAt: Date.now(),
+        content: hint
+      };
+      const newChats = [...chats, newMessage];
+      this._adapter.notifyChatsChange(newChats);
+      this._adapter.notifyHintClick(hint);
+    };
+    this.onInputChange = props => {
+      this._adapter.notifyInputChange(props);
+    };
+    this.deleteMessage = message => {
+      const {
+        onMessageDelete,
+        onChatsChange
+      } = this.getProps();
+      const {
+        chats
+      } = this.getStates();
+      onMessageDelete === null || onMessageDelete === void 0 ? void 0 : onMessageDelete(message);
+      const newChats = chats.filter(item => item.id !== message.id);
+      onChatsChange === null || onChatsChange === void 0 ? void 0 : onChatsChange(newChats);
+    };
+    this.likeMessage = message => {
+      const {
+        chats
+      } = this.getStates();
+      this._adapter.notifyLikeMessage(message);
+      const index = chats.findIndex(item => item.id === message.id);
+      const newChat = Object.assign(Object.assign({}, chats[index]), {
+        like: !chats[index].like,
+        dislike: false
+      });
+      const newChats = [...chats];
+      newChats.splice(index, 1, newChat);
+      this._adapter.notifyChatsChange(newChats);
+    };
+    this.dislikeMessage = message => {
+      const {
+        chats
+      } = this.getStates();
+      this._adapter.notifyDislikeMessage(message);
+      const index = chats.findIndex(item => item.id === message.id);
+      const newChat = Object.assign(Object.assign({}, chats[index]), {
+        like: false,
+        dislike: !chats[index].dislike
+      });
+      const newChats = [...chats];
+      newChats.splice(index, 1, newChat);
+      this._adapter.notifyChatsChange(newChats);
+    };
+    this.resetMessage = message => {
+      const {
+        chats
+      } = this.getStates();
+      const lastMessage = chats[chats.length - 1];
+      const newLastChat = Object.assign(Object.assign({}, lastMessage), {
+        status: 'loading',
+        content: '',
+        id: (0, _uuid.getUuidv4)(),
+        createAt: Date.now()
+      });
+      const newChats = chats.slice(0, -1).concat(newLastChat);
+      this._adapter.notifyChatsChange(newChats);
+      const {
+        onMessageReset
+      } = this.getProps();
+      onMessageReset === null || onMessageReset === void 0 ? void 0 : onMessageReset(message);
+    };
+    this.handleDragOver = e => {
+      this._adapter.setUploadAreaVisible(true);
+    };
+    this.handleContainerDragOver = e => {
+      (0, _a11y.handlePrevent)(e);
+    };
+    this.handleContainerDrop = e => {
+      var _a;
+      this._adapter.setUploadAreaVisible(false);
+      this._adapter.manualUpload((_a = e === null || e === void 0 ? void 0 : e.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);
+      // 禁用默认实现，防止文件被打开
+      //Disable the default implementation, preventing files from being opened
+      (0, _a11y.handlePrevent)(e);
+    };
+    this.handleContainerDragLeave = e => {
+      (0, _a11y.handlePrevent)(e);
+      // 鼠标移动至 container 的子元素，则不做任何操作
+      // If the mouse moves to the child element of container, no operation will be performed.
+      const dropAreaElement = this._adapter.getDropAreaElement();
+      if (dropAreaElement !== e.target && dropAreaElement.contains(e.target)) {
+        return;
+      }
+      /**
+       * 延迟隐藏 container ，防止父元素的 mouseOver 被触发，导致 container 无法隐藏
+       * Delay hiding of the container to prevent the parent element's mouseOver from being triggered,
+       * causing the container to be unable to be hidden.
+      */
+      setTimeout(() => {
+        this._adapter.setUploadAreaVisible(false);
+      });
+    };
+  }
+}
+exports.default = ChatFoundation;

package/lib/cjs/chat/inputboxFoundation.d.ts

@@ -0,0 +1,20 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+export interface InputBoxAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    notifyInputChange: (props: {
+        inputValue: string;
+        attachment: any[];
+    }) => void;
+    setInputValue: (value: string) => void;
+    setAttachment: (attachment: any[]) => void;
+    notifySend: (content: string, attachment: any[]) => void;
+}
+export default class InputBoxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<InputBoxAdapter<P, S>, P, S> {
+    constructor(adapter: InputBoxAdapter<P, S>);
+    onInputAreaChange: (value: string) => void;
+    onAttachmentAdd: (props: any) => void;
+    onAttachmentDelete: (props: any) => void;
+    onSend: (e: any) => void;
+    getDisableSend: () => any;
+    onEnterPress: (e: any) => void;
+    onPaste: (e: any) => void;
+}

package/lib/cjs/chat/inputboxFoundation.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _a11y = require("../utils/a11y");
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+var _constants = require("./constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const {
+  SEND_HOT_KEY
+} = _constants.strings;
+class InputBoxFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    this.onInputAreaChange = value => {
+      const attachment = this.getState('attachment');
+      this._adapter.setInputValue(value);
+      this._adapter.notifyInputChange({
+        inputValue: value,
+        attachment
+      });
+    };
+    this.onAttachmentAdd = props => {
+      const {
+        fileList
+      } = props;
+      const {
+        uploadProps
+      } = this.getProps();
+      const {
+        onChange
+      } = uploadProps;
+      if (onChange) {
+        onChange(props);
+      }
+      const {
+        content
+      } = this.getStates();
+      let newFileList = [...fileList];
+      this._adapter.setAttachment(newFileList);
+      this._adapter.notifyInputChange({
+        inputValue: content,
+        attachment: newFileList
+      });
+    };
+    this.onAttachmentDelete = props => {
+      const {
+        content,
+        attachment
+      } = this.getStates();
+      const newAttachMent = attachment.filter(item => item.uid !== props.uid);
+      this._adapter.setAttachment(newAttachMent);
+      this._adapter.notifyInputChange({
+        inputValue: content,
+        attachment: newAttachMent
+      });
+    };
+    this.onSend = e => {
+      if (this.getDisableSend()) {
+        return;
+      }
+      const {
+        content,
+        attachment
+      } = this.getStates();
+      this._adapter.setInputValue('');
+      this._adapter.setAttachment([]);
+      this._adapter.notifySend(content, attachment);
+    };
+    this.getDisableSend = () => {
+      const {
+        content,
+        attachment
+      } = this.getStates();
+      const {
+        disableSend: disableSendInProps
+      } = this.getProps();
+      const disabledSend = disableSendInProps || content.length === 0 && attachment.length === 0;
+      return disabledSend;
+    };
+    this.onEnterPress = e => {
+      const {
+        sendHotKey
+      } = this.getProps();
+      if (sendHotKey === SEND_HOT_KEY.SHIFT_PLUS_ENTER && e.shiftKey === false) {
+        return;
+      } else if (sendHotKey === SEND_HOT_KEY.ENTER && e.shiftKey === true) {
+        return;
+      }
+      (0, _a11y.handlePrevent)(e);
+      this.onSend(e);
+    };
+    this.onPaste = e => {
+      var _a;
+      const items = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.items;
+      const {
+        manualUpload
+      } = this.getProps();
+      let files = [];
+      if (items) {
+        for (const it of items) {
+          const file = it.getAsFile();
+          file && files.push(it.getAsFile());
+        }
+        if (files.length) {
+          // 文件上传，则需要阻止默认粘贴行为
+          // File upload, you need to prevent the default paste behavior
+          manualUpload(files);
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    };
+  }
+}
+exports.default = InputBoxFoundation;

package/lib/cjs/chat/rtl.scss

@@ -0,0 +1,22 @@
+
+$module: #{$prefix}-chat;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-hint-icon {
+            transform: scaleX(-1);
+        }
+
+        &-inputBox-sendButton-icon {
+            transform: rotate(225deg);
+        }
+
+        &-chatBox-action-icon-redo {
+            transform: scaleX(-1);
+        } 
+    }
+   
+}