@douyinfe/semi-ui/lib/es/chat/chatBox/index.js

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

import React, { useMemo } from 'react';
import cls from 'classnames';
import ChatBoxAvatar from './chatBoxAvatar';
import ChatBoxTitle from './chatBoxTitle';
import ChatBoxContent from './chatBoxContent';
import ChatBoxAction from './chatBoxAction';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/chat/constants';
const {
  PREFIX_CHAT_BOX
} = cssClasses;
const {
  ROLE,
  CHAT_ALIGN
} = strings;
const ChatBox = /*#__PURE__*/React.memo(props => {
  const {
    message,
    lastChat,
    align,
    toast,
    mode,
    roleConfig,
    onMessageBadFeedback,
    onMessageGoodFeedback,
    onMessageCopy,
    onChatsChange,
    onMessageDelete,
    onMessageReset,
    chatBoxRenderConfig = {},
    customMarkDownComponents,
    previousMessage,
    markdownRenderProps
  } = props;
  const {
    renderChatBoxAvatar,
    renderChatBoxAction,
    renderChatBoxContent,
    renderChatBoxTitle,
    renderFullChatBox
  } = chatBoxRenderConfig;
  const continueSend = useMemo(() => {
    return (message === null || message === void 0 ? void 0 : message.role) === (previousMessage === null || previousMessage === void 0 ? void 0 : previousMessage.role);
  }, [message.role, previousMessage]);
  const info = useMemo(() => {
    var _a;
    let info = {};
    if (roleConfig) {
      info = (_a = roleConfig[message.role]) !== null && _a !== void 0 ? _a : {};
    }
    return info;
  }, [message.role, roleConfig]);
  const avatarNode = useMemo(() => {
    return /*#__PURE__*/React.createElement(ChatBoxAvatar, {
      continueSend: continueSend,
      role: info,
      message: message,
      customRenderFunc: renderChatBoxAvatar
    });
  }, [info, message, renderChatBoxAvatar]);
  const titleNode = useMemo(() => {
    return /*#__PURE__*/React.createElement(ChatBoxTitle, {
      role: info,
      message: message,
      customRenderFunc: renderChatBoxTitle
    });
  }, [info, message, renderChatBoxTitle]);
  const contentNode = useMemo(() => {
    return /*#__PURE__*/React.createElement(ChatBoxContent, {
      mode: mode,
      role: info,
      message: message,
      customMarkDownComponents: customMarkDownComponents,
      customRenderFunc: renderChatBoxContent,
      markdownRenderProps: markdownRenderProps
    });
  }, [message, info, renderChatBoxContent, mode]);
  const actionNode = useMemo(() => {
    return /*#__PURE__*/React.createElement(ChatBoxAction, {
      toast: toast,
      role: info,
      message: message,
      lastChat: lastChat,
      onMessageBadFeedback: onMessageBadFeedback,
      onMessageCopy: onMessageCopy,
      onChatsChange: onChatsChange,
      onMessageDelete: onMessageDelete,
      onMessageGoodFeedback: onMessageGoodFeedback,
      onMessageReset: onMessageReset,
      customRenderFunc: renderChatBoxAction
    });
  }, [message, info, lastChat, onMessageBadFeedback, onMessageGoodFeedback, onMessageCopy, onChatsChange, onMessageDelete, onMessageReset, renderChatBoxAction]);
  const containerCls = useMemo(() => cls(PREFIX_CHAT_BOX, {
    [`${PREFIX_CHAT_BOX}-right`]: message.role === ROLE.USER && align === CHAT_ALIGN.LEFT_RIGHT
  }), [message.role, align]);
  if (typeof renderFullChatBox !== 'function') {
    return /*#__PURE__*/React.createElement("div", {
      className: containerCls
    }, avatarNode, /*#__PURE__*/React.createElement("div", {
      className: `${PREFIX_CHAT_BOX}-wrap`
    }, !continueSend && titleNode, contentNode, actionNode));
  } else {
    return renderFullChatBox({
      message,
      role: info,
      defaultNodes: {
        avatar: avatarNode,
        title: titleNode,
        content: contentNode,
        action: actionNode
      },
      className: containerCls
    });
  }
});
export default ChatBox;