@douyinfe/semi-ui/lib/es/aiChatDialogue/index.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

var __rest = this && this.__rest || function (s, e) {
  var t = {};
  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};
import * as React from 'react';
import BaseComponent from '../_base/baseComponent';
import PropTypes from 'prop-types';
import cls from "classnames";
import '@douyinfe/semi-foundation/lib/es/aiChatDialogue/aiChatDialogue.css';
import { ReasoningWidget } from './widgets/contentItem/reasoning';
import { DialogueStepWidget } from './widgets/contentItem/dialogueStep';
import { AnnotationWidget } from './widgets/contentItem/annotation';
import Code from './widgets/contentItem/code';
import DialogueItem from './Dialogue';
import DialogueFoundation from '@douyinfe/semi-foundation/lib/es/aiChatDialogue/foundation';
import { getDefaultPropsFromGlobalConfig } from '../_utils';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/aiChatDialogue/constants';
import Hint from './widgets/dialogueHint';
import { Button } from "../index";
import { IconChevronDown } from '@douyinfe/semi-icons';
export * from '@douyinfe/semi-foundation/lib/es/aiChatDialogue/foundation';
export * from './interface';
const {
  DIALOGUE_ALIGN,
  MODE
} = strings;
const {
  PREFIX
} = cssClasses;
class AIChatDialogue extends BaseComponent {
  constructor(props) {
    super(props);
    this.selectAll = () => {
      this.foundation.handleSelectAll();
    };
    this.deselectAll = () => {
      this.foundation.handleDeselectAll();
    };
    this.scrollToBottom = animation => {
      if (animation) {
        this.foundation.scrollToBottomWithAnimation();
      } else {
        this.foundation.scrollToBottomImmediately();
      }
    };
    this.scrollToTop = animation => {
      if (animation) {
        this.foundation.scrollToTopWithAnimation();
      } else {
        this.foundation.scrollToTopImmediately();
      }
    };
    this.containerScroll = e => {
      this.scrollTargetRef.current = e.target;
      if (e.target !== e.currentTarget) {
        return;
      }
      this.foundation.containerScroll(e);
    };
    this.foundation = new DialogueFoundation(this.adapter);
    this.containerRef = /*#__PURE__*/React.createRef();
    this.scrollTargetRef = /*#__PURE__*/React.createRef();
    this.wheelEventHandler = null;
    this.state = {
      cacheHints: [],
      selectedIds: new Set(),
      chats: [],
      backBottomVisible: false,
      wheelScroll: false
    };
    this.onSelectOrRemove = this.onSelectOrRemove.bind(this);
  }
  get adapter() {
    return Object.assign(Object.assign({}, super.adapter), {
      getContainerRef: () => {
        var _a;
        return (_a = this.containerRef) === null || _a === void 0 ? void 0 : _a.current;
      },
      setWheelScroll: flag => {
        this.setState({
          wheelScroll: flag
        });
      },
      updateSelected: selectedIds => {
        this.setState({
          selectedIds
        });
      },
      notifySelect: selectedIds => {
        const {
          onSelect
        } = this.props;
        onSelect && onSelect(selectedIds);
      },
      notifyChatsChange: chats => {
        const {
          onChatsChange
        } = this.props;
        onChatsChange && onChatsChange(chats);
      },
      notifyCopyMessage: message => {
        const {
          onMessageCopy
        } = this.props;
        onMessageCopy && onMessageCopy(message);
      },
      notifyLikeMessage: message => {
        const {
          onMessageGoodFeedback
        } = this.props;
        onMessageGoodFeedback && onMessageGoodFeedback(message);
      },
      notifyDislikeMessage: message => {
        const {
          onMessageBadFeedback
        } = this.props;
        onMessageBadFeedback && onMessageBadFeedback(message);
      },
      notifyEditMessage: message => {
        const {
          onMessageEdit
        } = this.props;
        onMessageEdit && onMessageEdit(message);
      },
      notifyHintClick: hint => {
        const {
          onHintClick
        } = this.props;
        onHintClick && onHintClick(hint);
      },
      setBackBottomVisible: visible => {
        this.setState(state => {
          if (state.backBottomVisible !== visible) {
            return {
              backBottomVisible: visible
            };
          }
          return null;
        });
      },
      registerWheelEvent: () => {
        this.adapter.unRegisterWheelEvent();
        const containerElement = this.containerRef.current;
        if (!containerElement) {
          return;
        }
        this.wheelEventHandler = e => {
          var _a;
          /**
           * Why use this.scrollTargetRef.current and wheel's currentTarget target comparison?
           * Both scroll and wheel events are on the container
           * his.scrollTargetRef.current is the object where scrolling actually occurs
           * wheel's currentTarget is the container,
           * Only when the wheel event occurs and there is scroll, the following logic(show scroll bar) needs to be executed
           */
          if (((_a = this.scrollTargetRef) === null || _a === void 0 ? void 0 : _a.current) !== e.currentTarget) {
            return;
          }
          this.adapter.setWheelScroll(true);
          this.adapter.unRegisterWheelEvent();
        };
        containerElement.addEventListener('wheel', this.wheelEventHandler);
      },
      unRegisterWheelEvent: () => {
        if (this.wheelEventHandler) {
          const containerElement = this.containerRef.current;
          if (!containerElement) {
            return;
          } else {
            containerElement.removeEventListener('wheel', this.wheelEventHandler);
          }
          this.wheelEventHandler = null;
        }
      }
    });
  }
  static getDerivedStateFromProps(nextProps, prevState) {
    const {
      chats,
      hints
    } = nextProps;
    const newState = {};
    if (chats !== prevState.chats) {
      newState.chats = chats !== null && chats !== void 0 ? chats : [];
    }
    if (hints !== prevState.cacheHints) {
      newState.cacheHints = hints;
    }
    if (Object.keys(newState).length) {
      return newState;
    }
    return null;
  }
  componentDidMount() {
    this.foundation.init();
  }
  componentDidUpdate(prevProps, prevState, snapshot) {
    const {
      chats: newChats,
      hints: newHints
    } = this.props;
    const {
      chats: oldChats,
      cacheHints
    } = prevState;
    const {
      wheelScroll
    } = this.state;
    let shouldScroll = false;
    if (newChats.length > oldChats.length) {
      this.adapter.setWheelScroll(false);
      this.adapter.registerWheelEvent();
      this.foundation.scrollToBottomImmediately();
    }
    if (newChats !== oldChats) {
      this.foundation.handleChatsChange(newChats);
      if (Array.isArray(newChats) && Array.isArray(oldChats)) {
        const newLastChat = newChats[newChats.length - 1];
        const oldLastChat = oldChats[oldChats.length - 1];
        if (newChats.length > oldChats.length) {
          if (oldChats.length === 0 || newLastChat.id !== oldLastChat.id) {
            shouldScroll = true;
          }
        } else if (newChats.length === oldChats.length && newChats.length && (newLastChat.status !== 'completed' || newLastChat.status !== oldLastChat.status)) {
          shouldScroll = true;
        }
      }
    }
    if (newHints !== cacheHints) {
      if (newHints.length > cacheHints.length) {
        shouldScroll = true;
      }
    }
    if (!wheelScroll && shouldScroll) {
      this.foundation.scrollToBottomImmediately();
    }
  }
  componentWillUnmount() {
    this.foundation.destroy();
  }
  onSelectOrRemove(isChecked, item) {
    this.foundation.handleSelectOrRemove(isChecked, item);
  }
  render() {
    const _a = this.props,
      {
        roleConfig,
        onMessageBadFeedback,
        onMessageGoodFeedback,
        onMessageReset,
        onMessageEdit,
        onMessageDelete,
        onHintClick,
        selecting,
        hintCls,
        hintStyle,
        hints,
        renderHintBox,
        style,
        className
      } = _a,
      restProps = __rest(_a, ["roleConfig", "onMessageBadFeedback", "onMessageGoodFeedback", "onMessageReset", "onMessageEdit", "onMessageDelete", "onHintClick", "selecting", "hintCls", "hintStyle", "hints", "renderHintBox", "style", "className"]);
    const {
      selectedIds,
      chats,
      backBottomVisible,
      wheelScroll
    } = this.state;
    return /*#__PURE__*/React.createElement("div", {
      className: cls(`${PREFIX}`, className),
      style: style
    }, /*#__PURE__*/React.createElement("div", {
      className: cls(`${PREFIX}-list`, {
        [`${PREFIX}-list-scroll-hidden`]: !wheelScroll
      }),
      onScroll: this.containerScroll,
      ref: this.containerRef
    }, chats.map((chat, index) => {
      var _a;
      const isLastChat = index === chats.length - 1;
      const continueSend = index > 0 && (chat === null || chat === void 0 ? void 0 : chat.role) === ((_a = chats[index - 1]) === null || _a === void 0 ? void 0 : _a.role);
      return /*#__PURE__*/React.createElement(DialogueItem, Object.assign({
        key: chat.id,
        message: chat,
        role: roleConfig[chat.role],
        onSelectChange: this.onSelectOrRemove,
        isSelected: selectedIds.has(chat.id),
        roleConfig: roleConfig,
        onMessageBadFeedback: this.foundation.dislikeMessage,
        onMessageGoodFeedback: this.foundation.likeMessage,
        onMessageReset: this.foundation.resetMessage,
        onMessageEdit: this.foundation.editMessage,
        onMessageDelete: this.foundation.deleteMessage,
        isLastChat: isLastChat,
        // todo: 不太确定用户的需求场景，暂时设置成 false，如果用户有相关需求，转为一个对外提供的 api
        // todo: Not sure about the user's demand scenario, temporarily set it to false. 
        // If the user has relevant needs, turn it into an external API
        continueSend: false,
        selecting: selecting
      }, restProps));
    }), !!(hints === null || hints === void 0 ? void 0 : hints.length) && /*#__PURE__*/React.createElement(Hint, {
      className: hintCls,
      style: hintStyle,
      hints: hints,
      onHintClick: this.foundation.onHintClick,
      renderHintBox: renderHintBox,
      selecting: selecting
    })), backBottomVisible && (/*#__PURE__*/React.createElement("span", {
      className: `${PREFIX}-backBottom`
    }, /*#__PURE__*/React.createElement(Button, {
      className: `${PREFIX}-backBottom-button`,
      icon: /*#__PURE__*/React.createElement(IconChevronDown, {
        size: "extra-large"
      }),
      type: "tertiary",
      onClick: this.foundation.scrollToBottomWithAnimation
    }))));
  }
}
AIChatDialogue.__SemiComponentName__ = "AIChatDialogue";
AIChatDialogue.Reasoning = ReasoningWidget;
AIChatDialogue.Step = DialogueStepWidget;
AIChatDialogue.Annotation = AnnotationWidget;
AIChatDialogue.defaultComponents = {
  code: Code
};
AIChatDialogue.propTypes = {
  align: PropTypes.oneOf(['leftRight', 'leftAlign']),
  chats: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string.isRequired,
    content: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
    output_text: PropTypes.string,
    role: PropTypes.string.isRequired,
    name: PropTypes.string,
    createdAt: PropTypes.number,
    updatedAt: PropTypes.number,
    model: PropTypes.string,
    status: PropTypes.string
  })),
  className: PropTypes.string,
  disabledFileItemClick: PropTypes.bool,
  hints: PropTypes.arrayOf(PropTypes.string),
  hintCls: PropTypes.string,
  hintStyle: PropTypes.object,
  selecting: PropTypes.bool,
  markdownRenderProps: PropTypes.object,
  messageEditRender: PropTypes.func,
  mode: PropTypes.oneOf(['bubble', 'noBubble', 'userBubble']),
  roleConfig: PropTypes.object,
  style: PropTypes.object,
  dialogueRenderConfig: PropTypes.shape({
    renderDialogueAction: PropTypes.func,
    renderDialogueAvatar: PropTypes.func,
    renderDialogueContent: PropTypes.func,
    renderDialogueTitle: PropTypes.func,
    renderFullDialogue: PropTypes.func
  }),
  renderHintBox: PropTypes.func,
  renderDialogueContentItem: PropTypes.object,
  onAnnotationClick: PropTypes.func,
  onChatsChange: PropTypes.func,
  onFileClick: PropTypes.func,
  onImageClick: PropTypes.func,
  onHintClick: PropTypes.func,
  onMessageBadFeedback: PropTypes.func,
  onMessageCopy: PropTypes.func,
  onMessageDelete: PropTypes.func,
  onMessageEdit: PropTypes.func,
  onMessageGoodFeedback: PropTypes.func,
  onMessageReset: PropTypes.func,
  onMessageShare: PropTypes.func,
  onReferenceClick: PropTypes.func,
  onSelect: PropTypes.func,
  showReset: PropTypes.bool,
  showReference: PropTypes.bool,
  escapeHtml: PropTypes.bool
};
AIChatDialogue.defaultProps = getDefaultPropsFromGlobalConfig(AIChatDialogue.__SemiComponentName__, {
  align: DIALOGUE_ALIGN.LEFT_RIGHT,
  mode: MODE.BUBBLE,
  selecting: false,
  disabledFileItemClick: false,
  showReset: true,
  showReference: false,
  escapeHtml: true
});
export default AIChatDialogue;