fix: context menu

client/package.json

@@ -13,8 +13,8 @@
     "@alicloud/openapi-client": "^0.4.5",
     "@alicloud/tea-util": "^1.4.5",
     "@chakra-ui/icons": "^2.0.17",
-    "@chakra-ui/react": "^2.7.0",
-    "@chakra-ui/system": "^2.5.8",
+    "@chakra-ui/react": "^2.5.1",
+    "@chakra-ui/system": "^2.5.5",
     "@dqbd/tiktoken": "^1.0.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",

client/pnpm-lock.yaml

@@ -18,10 +18,10 @@ dependencies:
     specifier: ^2.0.17
     version: registry.npmmirror.com/@chakra-ui/icons@2.0.17(@chakra-ui/system@2.5.8)(react@18.2.0)
   '@chakra-ui/react':
-    specifier: ^2.7.0
+    specifier: ^2.5.1
     version: registry.npmmirror.com/@chakra-ui/react@2.7.0(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(@types/react@18.0.28)(framer-motion@9.0.6)(react-dom@18.2.0)(react@18.2.0)
   '@chakra-ui/system':
-    specifier: ^2.5.8
+    specifier: ^2.5.5
     version: registry.npmmirror.com/@chakra-ui/system@2.5.8(@emotion/react@11.10.6)(@emotion/styled@11.10.6)(react@18.2.0)
   '@dqbd/tiktoken':
     specifier: ^1.0.6

client/src/components/Markdown/MermaidCodeBlock.tsx

@@ -24,9 +24,10 @@ mermaidAPI.initialize({
 const MermaidBlock = ({ code }: { code: string }) => {
   const dom = useRef<HTMLDivElement>(null);
   const [svg, setSvg] = useState('');
+  const [errorSvgCode, setErrorSvgCode] = useState('');
 
   useEffect(() => {
-    try {
+    (async () => {
       const punctuationMap: Record<string, string> = {
         '，': ',',
         '；': ';',
@@ -50,13 +51,14 @@ const MermaidBlock = ({ code }: { code: string }) => {
         /([，；。：！？“”‘’【】（）《》、])/g,
         (match) => punctuationMap[match]
       );
-
-      mermaidAPI.render(`mermaid-${Date.now()}`, formatCode, (svgCode: string) => {
+      try {
+        const svgCode = await mermaidAPI.render(`mermaid-${Date.now()}`, formatCode);
         setSvg(svgCode);
-      });
-    } catch (error) {
-      console.log(error);
-    }
+      } catch (error) {
+        setErrorSvgCode(formatCode);
+        console.log(error);
+      }
+    })();
   }, [code]);
 
   const onclickExport = useCallback(() => {

client/src/pages/chat/components/History.tsx

@@ -41,6 +41,7 @@ const PcSliderBar = ({
     chatId: string;
   };
   const ContextMenuRef = useRef(null);
+  const onclickContext = useRef(false);
 
   const theme = useTheme();
   const { isPc } = useGlobalStore();
@@ -68,10 +69,16 @@ const PcSliderBar = ({
   // close contextMenu
   useOutsideClick({
     ref: ContextMenuRef,
-    handler: () =>
+    handler: () => {
       setTimeout(() => {
-        setContextMenuData(undefined);
-      }, 10)
+        if (contextMenuData && !onclickContext.current) {
+          setContextMenuData(undefined);
+        }
+      }, 10);
+      setTimeout(() => {
+        onclickContext.current = false;
+      }, 10);
+    }
   });
 
   const onclickContextMenu = useCallback(
@@ -80,9 +87,10 @@ const PcSliderBar = ({
 
       if (!isPc) return;
 
+      onclickContext.current = true;
       setContextMenuData({
-        left: e.clientX + 15,
-        top: e.clientY + 10,
+        left: e.clientX,
+        top: e.clientY,
         history
       });
     },

client/src/pages/chat/components/QuoteModal.tsx

@@ -43,35 +43,6 @@ const QuoteModal = ({
     isLoading
   } = useQuery(['getHistoryQuote'], () => getHistoryQuote({ historyId, chatId }));
 
-  /**
-   * click edit, get new kbDataItem
-   */
-  const onclickEdit = useCallback(
-    async (item: QuoteItemType) => {
-      try {
-        setIsLoading(true);
-        const data = (await getKbDataItemById(item.id)) as QuoteItemType;
-
-        if (!data) {
-          throw new Error('该数据已被删除');
-        }
-
-        setEditDataItem({
-          dataId: data.id,
-          q: data.q,
-          a: data.a
-        });
-      } catch (err) {
-        toast({
-          status: 'warning',
-          title: getErrText(err)
-        });
-      }
-      setIsLoading(false);
-    },
-    [setIsLoading, toast]
-  );
-
   /**
    * update kbData, update mongo status and reload quotes
    */
@@ -98,6 +69,36 @@ const QuoteModal = ({
     [chatId, historyId, refetch, setIsLoading, toast]
   );
 
+  /**
+   * click edit, get new kbDataItem
+   */
+  const onclickEdit = useCallback(
+    async (item: QuoteItemType) => {
+      try {
+        setIsLoading(true);
+        const data = (await getKbDataItemById(item.id)) as QuoteItemType;
+
+        if (!data) {
+          updateQuoteStatus(item.id, '已删除');
+          throw new Error('该数据已被删除');
+        }
+
+        setEditDataItem({
+          dataId: data.id,
+          q: data.q,
+          a: data.a
+        });
+      } catch (err) {
+        toast({
+          status: 'warning',
+          title: getErrText(err)
+        });
+      }
+      setIsLoading(false);
+    },
+    [setIsLoading, toast, updateQuoteStatus]
+  );
+
   return (
     <>
       <Modal isOpen={true} onClose={onClose}>

client/src/pages/chat/components/ShareHistory.tsx

@@ -39,6 +39,7 @@ const PcSliderBar = ({
   const { isPc } = useGlobalStore();
 
   const ContextMenuRef = useRef(null);
+  const onclickContext = useRef(false);
 
   const [contextMenuData, setContextMenuData] = useState<{
     left: number;
@@ -51,10 +52,16 @@ const PcSliderBar = ({
   // close contextMenu
   useOutsideClick({
     ref: ContextMenuRef,
-    handler: () =>
+    handler: () => {
       setTimeout(() => {
-        setContextMenuData(undefined);
-      })
+        if (contextMenuData && !onclickContext.current) {
+          setContextMenuData(undefined);
+        }
+      }, 10);
+      setTimeout(() => {
+        onclickContext.current = false;
+      }, 10);
+    }
   });
 
   const onclickContextMenu = useCallback(
@@ -62,10 +69,11 @@ const PcSliderBar = ({
       e.preventDefault(); // 阻止默认右键菜单
 
       if (!isPc) return;
+      onclickContext.current = true;
 
       setContextMenuData({
-        left: e.clientX + 15,
-        top: e.clientY + 10,
+        left: e.clientX,
+        top: e.clientY,
         history
       });
     },

client/src/pages/chat/index.tsx

@@ -78,7 +78,6 @@ const Chat = ({ modelId, chatId }: { modelId: string; chatId: string }) => {
   const [showHistoryQuote, setShowHistoryQuote] = useState<string>();
   const [showSystemPrompt, setShowSystemPrompt] = useState('');
   const [messageContextMenuData, setMessageContextMenuData] = useState<{
-    // message messageContextMenuData
     left: number;
     top: number;
     message: ChatSiteItemType;

client/src/pages/chat/share.tsx

@@ -235,7 +235,7 @@ const Chat = ({ shareId, historyId }: { shareId: string; historyId: string }) =>
         {
           type: 'shareChatFinish',
           data: {
-            question: formatPrompts[0].value,
+            question: formatPrompts[formatPrompts.length - 2].value,
             answer: responseText
           }
         },

client/src/pages/kb/components/Test.tsx

@@ -158,8 +158,7 @@ const Test = () => {
                 'repeat(1,1fr)',
                 'repeat(1,1fr)',
                 'repeat(1,1fr)',
-                'repeat(2,1fr)',
-                'repeat(3,1fr)'
+                'repeat(2,1fr)'
               ]}
               gridGap={4}
             >