4.6.4-alpha (#582)

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

@@ -5,7 +5,7 @@ import RemarkGfm from 'remark-gfm';
 import RemarkMath from 'remark-math';
 import RehypeKatex from 'rehype-katex';
 import RemarkBreaks from 'remark-breaks';
-import { eventBus } from '@/web/common/utils/eventbus';
+import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
 
 import 'katex/dist/katex.min.css';
 import styles from '../index.module.scss';
@@ -27,7 +27,7 @@ function MyLink(e: any) {
         textDecoration={'underline'}
         cursor={'pointer'}
         onClick={() => {
-          eventBus.emit('guideClick', { text });
+          eventBus.emit(EventNameEnum.sendQuestion, { text });
         }}
       >
         {text}

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

@@ -0,0 +1,92 @@
+import React, { useMemo } from 'react';
+import { Box, Flex, useTheme } from '@chakra-ui/react';
+import 'katex/dist/katex.min.css';
+import ChatBoxDivider from '@/components/core/chat/Divider';
+import { useTranslation } from 'next-i18next';
+import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
+import MyTooltip from '@/components/MyTooltip';
+import MyIcon from '@/components/Icon';
+
+const QuestionGuide = ({ text }: { text: string }) => {
+  const theme = useTheme();
+  const { t } = useTranslation();
+  const questionGuides = useMemo(() => {
+    try {
+      const json = JSON.parse(text);
+      if (Array.isArray(json) && !json.find((item) => typeof item !== 'string')) {
+        return json as string[];
+      }
+      return [];
+    } catch (error) {
+      return [];
+    }
+  }, [text]);
+
+  return questionGuides.length > 0 ? (
+    <Box mt={2}>
+      <ChatBoxDivider icon="core/chat/QGFill" text={t('chat.Question Guide Tips')} />
+      <Flex alignItems={'center'} flexWrap={'wrap'} gap={2}>
+        {questionGuides.map((text) => (
+          <Flex
+            key={text}
+            alignItems={'center'}
+            flexWrap={'wrap'}
+            fontSize={'sm'}
+            border={theme.borders.sm}
+            py={'1px'}
+            px={3}
+            borderRadius={'md'}
+            _hover={{
+              '.controller': {
+                display: 'flex'
+              }
+            }}
+            overflow={'hidden'}
+            position={'relative'}
+          >
+            <Box className="textEllipsis" flex={'1 0 0'}>
+              {text}
+            </Box>
+            <Box
+              className="controller"
+              display={['flex', 'none']}
+              pr={2}
+              position={'absolute'}
+              right={0}
+              left={0}
+              justifyContent={'flex-end'}
+              alignItems={'center'}
+              h={'100%'}
+              lineHeight={0}
+              bg={`linear-gradient(to left, white,white min(60px,100%),rgba(255,255,255,0) 80%)`}
+            >
+              <MyTooltip label={t('core.chat.markdown.Edit Question')}>
+                <MyIcon
+                  name={'edit'}
+                  w={'14px'}
+                  cursor={'pointer'}
+                  _hover={{
+                    color: 'green.600'
+                  }}
+                  onClick={() => eventBus.emit(EventNameEnum.editQuestion, { text })}
+                />
+              </MyTooltip>
+              <MyTooltip label={t('core.chat.markdown.Send Question')}>
+                <MyIcon
+                  ml={4}
+                  name={'core/chat/sendLight'}
+                  w={'14px'}
+                  cursor={'pointer'}
+                  _hover={{ color: 'myBlue.600' }}
+                  onClick={() => eventBus.emit(EventNameEnum.sendQuestion, { text })}
+                />
+              </MyTooltip>
+            </Box>
+          </Flex>
+        ))}
+      </Flex>
+    </Box>
+  ) : null;
+};
+
+export default React.memo(QuestionGuide);

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

@@ -1,64 +0,0 @@
-import React, { useMemo } from 'react';
-import { Box, useTheme } from '@chakra-ui/react';
-import { getFileAndOpen } from '@/web/core/dataset/utils';
-import { useToast } from '@/web/common/hooks/useToast';
-import { getErrText } from '@fastgpt/global/common/error/utils';
-
-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;