NapCatQQ/napcat.webui/src/components/onebot/render_message.tsx

import { Image } from '@heroui/image';
import qface from 'qface';
import { FaReply } from 'react-icons/fa6';

import { OB11Segment } from '@/types/onebot';

export const renderMessageContent = (
  segments: OB11Segment[],
  small = false
): React.ReactElement[] => {
  return segments.map((segment, index) => {
    switch (segment.type) {
      case 'text':
        return <span key={index}>{segment.data.text}</span>;
      case 'face':
        return (
          <Image
            removeWrapper
            classNames={{
              img: 'w-6 h-6 inline !text-[0px] m-0 -mt-1.5 !p-0',
            }}
            key={index}
            src={qface.getUrl(segment.data.id)}
            alt={`face-${segment.data.id}`}
          />
        );
      case 'image':
        return (
          <Image
            classNames={{
              wrapper: 'block !text-[0px] !m-0 !p-0',
              img: 'block',
            }}
            radius='sm'
            className={
              small
                ? 'max-h-16 object-cover'
                : 'max-w-64 max-h-96 h-auto object-cover'
            }
            key={index}
            src={segment.data.url || segment.data.file}
            alt='image'
            referrerPolicy='no-referrer'
          />
        );
      case 'record':
        return (
          <audio
            key={index}
            controls
            src={segment.data.url || segment.data.file}
          />
        );
      case 'video':
        return (
          <video
            key={index}
            controls
            src={segment.data.url || segment.data.file}
          />
        );
      case 'at':
        return (
          <span key={index} className='text-blue-500'>
            @
            {segment.data.qq === 'all'
              ? (
                '所有人'
              )
              : (
                <span>
                  {segment.data.name}({segment.data.qq})
                </span>
              )}
          </span>
        );
      case 'rps':
        return <span key={index}>[猜拳]</span>;
      case 'dice':
        return <span key={index}>[掷骰子]</span>;
      case 'shake':
        return <span key={index}>[窗口抖动]</span>;
      case 'poke':
        return (
          <span key={index}>
            [戳一戳: {segment.data.name || segment.data.id}]
          </span>
        );
      case 'anonymous':
        return <span key={index}>[匿名消息]</span>;
      case 'share':
        return (
          <a
            key={index}
            href={segment.data.url}
            target='_blank'
            rel='noopener noreferrer'
          >
            {segment.data.title}
          </a>
        );
      case 'contact':
        return (
          <span key={index}>
            [推荐{segment.data.type === 'qq' ? '好友' : '群'}: {segment.data.id}
            ]
          </span>
        );
      case 'location':
        return <span key={index}>[位置: {segment.data.title || '未知'}]</span>;
      case 'music':
        if (segment.data.type === 'custom') {
          return (
            <a
              key={index}
              href={segment.data.url}
              target='_blank'
              rel='noopener noreferrer'
            >
              {segment.data.title}
            </a>
          );
        }
        return (
          <span key={index}>
            [音乐: {segment.data.type} - {segment.data.id}]
          </span>
        );
      case 'reply':
        return (
          <div
            key={index}
            className='bg-content3 py-1 px-2 rounded-md flex items-center gap-1'
          >
            <FaReply className='text-default-500' />
            回复消息ID: {segment.data.id}
          </div>
        );
      case 'forward':
        return <span key={index}>[合并转发: {segment.data.id}]</span>;
      case 'node':
        return <span key={index}>[消息节点]</span>;
      case 'xml':
        return <pre key={index}>{segment.data.data}</pre>;
      case 'json':
        return (
          <pre key={index} className='break-all whitespace-break-spaces'>
            {segment.data.data}
          </pre>
        );
      case 'file':
        return (
          <a
            key={index}
            href={segment.data.file}
            target='_blank'
            rel='noopener noreferrer'
          >
            [文件]
          </a>
        );
      default:
        return <span key={index}>[不支持的消息类型]</span>;
    }
  });
};