@douyinfe/semi-ui/lib/es/chat/chatBox/chatBoxContent.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 MarkdownRender from '../../markdownRender';
import { cssClasses, strings } from '@douyinfe/semi-foundation/lib/es/chat/constants';
import { FileAttachment, ImageAttachment } from '../attachment';
import Code from './code';
const {
  PREFIX_CHAT_BOX
} = cssClasses;
const {
  MESSAGE_STATUS,
  MODE,
  ROLE
} = strings;
const ChatBoxContent = props => {
  const {
    message = {},
    customRenderFunc,
    role: roleInfo,
    customMarkDownComponents,
    mode
  } = props;
  const {
    content,
    role,
    status
  } = message;
  const markdownComponents = useMemo(() => Object.assign({
    'code': Code,
    'SemiFile': FileAttachment,
    'img': ImageAttachment
  }, customMarkDownComponents), [customMarkDownComponents]);
  const wrapCls = useMemo(() => {
    const isUser = role === ROLE.USER;
    const bubble = mode === MODE.BUBBLE;
    const userBubble = mode === MODE.USER_BUBBLE && isUser;
    return cls(`${PREFIX_CHAT_BOX}-content`, {
      [`${PREFIX_CHAT_BOX}-content-${mode}`]: bubble || userBubble,
      [`${PREFIX_CHAT_BOX}-content-user`]: bubble && isUser || userBubble,
      [`${PREFIX_CHAT_BOX}-content-error`]: status === MESSAGE_STATUS.ERROR && (bubble || userBubble)
    });
  }, [role, status]);
  const node = useMemo(() => {
    if (status === MESSAGE_STATUS.LOADING) {
      return /*#__PURE__*/React.createElement("span", {
        className: `${PREFIX_CHAT_BOX}-content-loading`
      }, /*#__PURE__*/React.createElement("span", {
        className: `${PREFIX_CHAT_BOX}-content-loading-item`
      }));
    } else {
      let realContent = '';
      if (typeof content === 'string') {
        realContent = content;
      } else if (Array.isArray(content)) {
        realContent = content.map(item => {
          var _a;
          if (item.type === 'text') {
            return item.text;
          } else if (item.type === 'image_url') {
            return `![image](${item.image_url.url})`;
          } else if (item.type === 'file_url') {
            const {
              name,
              size,
              url,
              type
            } = item.file_url;
            const realType = (_a = name.split('.').pop()) !== null && _a !== void 0 ? _a : type === null || type === void 0 ? void 0 : type.split('/').pop();
            return `<SemiFile url={'${url}'} name={'${name}'} size={'${size}'} type={'${realType}'}></SemiFile>`;
          }
          return '';
        }).join('\n\n');
      }
      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MarkdownRender, {
        raw: realContent,
        components: markdownComponents
      }));
    }
  }, [status, content]);
  if (customRenderFunc) {
    return customRenderFunc({
      message,
      role: roleInfo,
      defaultContent: node,
      className: wrapCls
    });
  } else {
    return /*#__PURE__*/React.createElement("div", {
      className: wrapCls
    }, node);
  }
};
export default ChatBoxContent;