Add modal to show completion response data (#324)

client/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/common/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;