4.6.7 first pr (#726)

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

@@ -24,7 +24,7 @@ const QuestionGuide = ({ text }: { text: string }) => {
 
   return questionGuides.length > 0 ? (
     <Box mt={2}>
-      <ChatBoxDivider icon="core/chat/QGFill" text={t('chat.Question Guide Tips')} />
+      <ChatBoxDivider icon="core/chat/QGFill" text={t('core.chat.Question Guide Tips')} />
       <Flex alignItems={'center'} flexWrap={'wrap'} gap={2}>
         {questionGuides.map((text) => (
           <Flex

projects/app/src/components/Markdown/img/Image.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { WheelEventHandler, useState } from 'react';
 import {
   Box,
   Image,
@@ -14,6 +14,17 @@ const MdImage = ({ src }: { src?: string }) => {
   const [isLoading, setIsLoading] = useState(true);
   const [succeed, setSucceed] = useState(false);
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const [scale, setScale] = useState(1);
+
+  const handleWheel: WheelEventHandler<HTMLImageElement> = (e) => {
+    setScale((prevScale) => {
+      const newScale = prevScale + e.deltaY * 0.5 * -0.01;
+      if (newScale < 0.5) return 0.5;
+      if (newScale > 10) return 10;
+      return newScale;
+    });
+  };
+
   return (
     <Skeleton
       minH="100px"
@@ -48,6 +59,7 @@ const MdImage = ({ src }: { src?: string }) => {
         <ModalOverlay />
         <ModalContent boxShadow={'none'} maxW={'auto'} w="auto" bg={'transparent'}>
           <Image
+            transform={`scale(${scale})`}
             borderRadius={'md'}
             src={src}
             alt={''}
@@ -57,6 +69,7 @@ const MdImage = ({ src }: { src?: string }) => {
             fallbackSrc={'/imgs/errImg.png'}
             fallbackStrategy={'onError'}
             objectFit={'contain'}
+            onWheel={handleWheel}
           />
         </ModalContent>
         <ModalCloseButton bg={'myWhite.500'} zIndex={999999} />

projects/app/src/components/Markdown/index.module.scss

@@ -343,7 +343,6 @@
   margin: 10px 0;
 }
 .markdown {
-  text-align: justify;
   tab-size: 4;
   word-spacing: normal;
   width: 100%;

projects/app/src/components/Markdown/index.tsx

@@ -112,6 +112,17 @@ function A({ children, ...props }: any) {
 }
 
 const Markdown = ({ source, isChatting = false }: { source: string; isChatting?: boolean }) => {
+  const components = useMemo<any>(
+    () => ({
+      img: Image,
+      pre: 'div',
+      p: (pProps: any) => <p {...pProps} dir="auto" />,
+      code: Code,
+      a: A
+    }),
+    []
+  );
+
   const formatSource = source
     .replace(/\\n/g, '\n&nbsp;')
     .replace(/(http[s]?:\/\/[^\s，。]+)([。，])/g, '$1 $2')
@@ -124,13 +135,7 @@ const Markdown = ({ source, isChatting = false }: { source: string; isChatting?:
     `}
       remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
       rehypePlugins={[RehypeKatex]}
-      components={{
-        img: Image,
-        pre: 'div',
-        p: (pProps) => <p {...pProps} dir="auto" />,
-        code: Code,
-        a: A
-      }}
+      components={components}
       linkTarget={'_blank'}
     >
       {formatSource}