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

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

import * as React from 'react';
import BaseComponent from '../_base/baseComponent';
import cls from "classnames";
import '@douyinfe/semi-foundation/lib/es/aiChatDialogue/aiChatDialogue.css';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/aiChatDialogue/constants';
import { Checkbox } from '../checkbox';
import DialogueTitle from './widgets/dialogueTitle';
import DialogueAvatar from './widgets/dialogueAvatar';
import DialogueAction from './widgets/dialogueAction';
import DialogueContent from './widgets/dialogueContent';
const prefixCls = cssClasses.PREFIX;
const {
  ROLE,
  DIALOGUE_ALIGN
} = strings;
class Dialogue extends BaseComponent {
  constructor(props) {
    super(props);
    this.getRoleInfo = () => {
      const {
        role,
        message
      } = this.props;
      if (role instanceof Map) {
        return role.get(message === null || message === void 0 ? void 0 : message.name);
      }
      return role;
    };
    this.avatarNode = () => {
      const {
        role,
        dialogueRenderConfig,
        continueSend,
        message
      } = this.props;
      return /*#__PURE__*/React.createElement(DialogueAvatar, {
        role: this.getRoleInfo(),
        message: message,
        customRenderFunc: dialogueRenderConfig === null || dialogueRenderConfig === void 0 ? void 0 : dialogueRenderConfig.renderDialogueAvatar
      });
    };
    this.titleNode = () => {
      const {
        role,
        dialogueRenderConfig,
        message
      } = this.props;
      return /*#__PURE__*/React.createElement(DialogueTitle, {
        role: this.getRoleInfo(),
        message: message,
        customRenderFunc: dialogueRenderConfig === null || dialogueRenderConfig === void 0 ? void 0 : dialogueRenderConfig.renderDialogueTitle
      });
    };
    this.contentNode = () => {
      const {
        message,
        mode,
        dialogueRenderConfig,
        markdownRenderProps,
        messageEditRender,
        disabledFileItemClick,
        renderDialogueContentItem,
        onFileClick,
        onImageClick,
        onAnnotationClick,
        onReferenceClick,
        showReference,
        escapeHtml
      } = this.props;
      return /*#__PURE__*/React.createElement(DialogueContent, {
        key: message.editing,
        message: message,
        mode: mode,
        editing: message.editing && message.role === ROLE.USER,
        escapeHtml: escapeHtml,
        messageEditRender: messageEditRender,
        onFileClick: onFileClick,
        onImageClick: onImageClick,
        disabledFileItemClick: disabledFileItemClick,
        renderDialogueContentItem: renderDialogueContentItem,
        onAnnotationClick: onAnnotationClick,
        onReferenceClick: onReferenceClick,
        customRenderFunc: dialogueRenderConfig === null || dialogueRenderConfig === void 0 ? void 0 : dialogueRenderConfig.renderDialogueContent,
        markdownRenderProps: markdownRenderProps,
        showReference: showReference
      });
    };
    this.actionNode = () => {
      const {
        role,
        message,
        showReset,
        isLastChat,
        dialogueRenderConfig,
        onMessageReset,
        onMessageGoodFeedback,
        onMessageBadFeedback,
        onMessageCopy,
        onMessageShare,
        messageEditRender,
        onMessageEdit,
        onMessageDelete
      } = this.props;
      return /*#__PURE__*/React.createElement(DialogueAction, {
        role: role,
        message: message,
        onMessageCopy: onMessageCopy,
        onMessageReset: onMessageReset,
        onMessageGoodFeedback: onMessageGoodFeedback,
        onMessageBadFeedback: onMessageBadFeedback,
        showReset: showReset,
        isLastChat: isLastChat,
        onMessageShare: onMessageShare,
        onMessageEdit: onMessageEdit,
        onMessageDelete: onMessageDelete,
        messageEditRender: messageEditRender,
        customRenderFunc: dialogueRenderConfig === null || dialogueRenderConfig === void 0 ? void 0 : dialogueRenderConfig.renderDialogueAction
      });
    };
  }
  render() {
    const {
      message,
      selecting,
      align,
      isSelected,
      onSelectChange,
      continueSend
    } = this.props;
    const id = message.id;
    const isRightAlign = message.role === ROLE.USER && align === DIALOGUE_ALIGN.LEFT_RIGHT;
    const containerCls = cls({
      [`${prefixCls}-container`]: true,
      [`${prefixCls}-container-right`]: isRightAlign
    });
    return /*#__PURE__*/React.createElement("div", {
      className: cls(`${prefixCls}-wrapper`, {
        [`${prefixCls}-wrapper-selected`]: selecting && isSelected,
        [`${prefixCls}-wrapper-continue-send`]: continueSend
      })
    }, selecting && (/*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-checkbox`
    }, /*#__PURE__*/React.createElement(Checkbox, {
      checked: isSelected,
      onChange: e => onSelectChange(e.target.checked, id)
    }))), /*#__PURE__*/React.createElement("div", {
      className: containerCls
    }, this.avatarNode(), /*#__PURE__*/React.createElement("div", {
      className: `${prefixCls}-inner`
    }, !continueSend && this.titleNode(), this.contentNode(), this.actionNode())));
  }
}
export default Dialogue;