NapCatQQ/napcat.webui/src/components/onebot/display_card/response.tsx

import { Button } from '@heroui/button';
import { Chip } from '@heroui/chip';
import { Popover, PopoverContent, PopoverTrigger } from '@heroui/popover';
import { Snippet } from '@heroui/snippet';

import { getResponseStatusColor, getResponseStatusText } from '@/utils/onebot';

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

export interface OneBotDisplayResponseProps {
  data: RequestResponse
}

const OneBotDisplayResponse: React.FC<OneBotDisplayResponseProps> = ({
  data,
}) => {
  return (
    <div className='flex gap-2 items-center'>
      <Chip color={getResponseStatusColor(data.status)} variant='flat'>
        {getResponseStatusText(data.status)}
      </Chip>
      {data.data && (
        <Popover
          placement='right'
          showArrow
          classNames={{
            content: 'max-h-96 max-w-96 overflow-hidden p-0',
          }}
        >
          <PopoverTrigger>
            <Button
              size='sm'
              color='primary'
              variant='flat'
              radius='full'
              className='text-medium'
            >
              查看数据
            </Button>
          </PopoverTrigger>
          <PopoverContent>
            <Snippet
              hideSymbol
              tooltipProps={{
                content: '点击复制',
              }}
              classNames={{
                copyButton: 'self-start sticky top-0 right-0',
              }}
              className='bg-content1 h-full overflow-y-scroll items-start'
            >
              {JSON.stringify(data.data, null, 2)
                .split('\n')
                .map((line, i) => (
                  <span key={i} className='whitespace-pre-wrap break-all'>
                    {line}
                  </span>
                ))}
            </Snippet>
          </PopoverContent>
        </Popover>
      )}
      {data.message && (
        <Chip className='pl-0.5' variant='flat'>
          <Chip color='warning' size='sm' className='-ml-2 mr-1' variant='flat'>
            返回消息
          </Chip>
          {data.message}
        </Chip>
      )}
    </div>
  );
};

export default OneBotDisplayResponse;