monorepo packages (#344)

projects/app/src/components/Markdown/chat/Guide.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react';
+import { Box, Link } from '@chakra-ui/react';
+import ReactMarkdown from 'react-markdown';
+import RemarkGfm from 'remark-gfm';
+import RemarkMath from 'remark-math';
+import RehypeKatex from 'rehype-katex';
+import { event } from '@/utils/plugin/eventbus';
+
+import 'katex/dist/katex.min.css';
+import styles from '../index.module.scss';
+import Image from '../img/Image';
+
+function MyLink(e: any) {
+  const href = e.href;
+  const text = String(e.children);
+
+  return !!href ? (
+    <Link href={href} target={'_blank'}>
+      {text}
+    </Link>
+  ) : (
+    <Box as={'ul'}>
+      <Box as={'li'}>
+        <Box
+          as={'span'}
+          color={'blue.600'}
+          textDecoration={'underline'}
+          cursor={'pointer'}
+          onClick={() => {
+            event.emit('guideClick', { text });
+          }}
+        >
+          {text}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
+
+const Guide = ({ text }: { text: string }) => {
+  const formatText = useMemo(() => text.replace(/\[(.*?)\]($|\n)/g, '[$1]()\n'), [text]);
+
+  return (
+    <ReactMarkdown
+      className={`markdown ${styles.markdown}`}
+      remarkPlugins={[RemarkGfm, RemarkMath]}
+      rehypePlugins={[RehypeKatex]}
+      components={{
+        a: MyLink,
+        img: Image
+      }}
+    >
+      {formatText}
+    </ReactMarkdown>
+  );
+};
+
+export default React.memo(Guide);

projects/app/src/components/Markdown/chat/Quote.tsx

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { Box, useTheme } from '@chakra-ui/react';
+import { getFileAndOpen } from '@/utils/web/file';
+import { useToast } from '@/hooks/useToast';
+import { getErrText } from '@/utils/tools';
+
+type QuoteItemType = {
+  file_id?: string;
+  filename: string;
+};
+
+const QuoteBlock = ({ code }: { code: string }) => {
+  const theme = useTheme();
+  const { toast } = useToast();
+  const quoteList = useMemo(() => {
+    try {
+      return JSON.parse(code) as QuoteItemType[];
+    } catch (error) {
+      return [];
+    }
+  }, [code]);
+
+  return (
+    <Box mt={3} pt={2} borderTop={theme.borders.base}>
+      {quoteList.length > 0 ? (
+        <>
+          <Box>本次回答的引用:</Box>
+          <Box as={'ol'}>
+            {quoteList.map((item, i) => (
+              <Box
+                key={i}
+                as={'li'}
+                {...(item.file_id
+                  ? {
+                      textDecoration: 'underline',
+                      color: 'myBlue.800',
+                      cursor: 'pointer'
+                    }
+                  : {})}
+                onClick={async () => {
+                  if (!item.file_id) return;
+                  try {
+                    await getFileAndOpen(item.file_id);
+                  } catch (error) {
+                    toast({
+                      status: 'warning',
+                      title: getErrText(error, '打开文件失败')
+                    });
+                  }
+                }}
+              >
+                {item.filename}
+              </Box>
+            ))}
+          </Box>
+        </>
+      ) : (
+        <Box>正在生成引用……</Box>
+      )}
+    </Box>
+  );
+};
+
+export default QuoteBlock;