lobe-chat

1
'use client';
2

3
import { Icon } from '@lobehub/ui';
4
import { Skeleton } from 'antd';
5
import { css, cx } from 'antd-style';
6
import { ChevronDown, ChevronUp } from 'lucide-react';
7
import dynamic from 'next/dynamic';
8
import { memo, useState } from 'react';
9
import { useTranslation } from 'react-i18next';
10
import { Flexbox } from 'react-layout-kit';
11

12
const container = css`
13
  pre.shiki {
14
    padding: 8px !important;
15
  }
16
`;
17

18
const Highlighter = dynamic(() => import('@lobehub/ui/es/Highlighter'), {
19
  loading: () => <Skeleton avatar={false} title={false} />,
20
  ssr: false,
21
});
22

23
const Description = memo<{ message: string; status: number }>(({ message, status }) => {
24
  const { t } = useTranslation('error');
25
  const [show, setShow] = useState(false);
26
  return (
27
    <Flexbox gap={8}>
28
      {t(`response.${status}` as any)}
29
      <Flexbox
30
        gap={4}
31
        horizontal
32
        onClick={() => {
33
          setShow(!show);
34
        }}
35
        style={{ cursor: 'pointer', fontSize: 12 }}
36
      >
37
        {t('fetchErrorDetail')} <Icon icon={show ? ChevronUp : ChevronDown} />
38
      </Flexbox>
39
      <Highlighter
40
        className={cx(container)}
41
        language={'text'}
42
        style={{ display: show ? undefined : 'none', maxHeight: 80 }}
43
      >
44
        {message}
45
      </Highlighter>
46
    </Flexbox>
47
  );
48
});
49

50
export default Description;
51