fix: markdown view \n do not work

package.json

@@ -68,6 +68,7 @@
     "react-hotkeys-hook": "^4.5.0",
     "react-markdown": "^9.0.3",
     "rehype-katex": "^7.0.1",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "simplebar-react": "^3.2.6",

pnpm-lock.yaml

@@ -165,6 +165,9 @@ dependencies:
   rehype-katex:
     specifier: ^7.0.1
     version: 7.0.1
+  remark-breaks:
+    specifier: ^4.0.0
+    version: 4.0.0
   remark-gfm:
     specifier: ^4.0.1
     version: 4.0.1
@@ -13121,6 +13124,13 @@ packages:
       - supports-color
     dev: false
 
+  /mdast-util-newline-to-break@2.0.0:
+    resolution: {integrity: sha512-MbgeFca0hLYIEx/2zGsszCSEJJ1JSCdiY5xQxRcLDDGa8EPvlLPupJ4DSajbMPAnC0je8jfb9TiUATnxxrHUog==, tarball: https://registry.npmjs.org/mdast-util-newline-to-break/-/mdast-util-newline-to-break-2.0.0.tgz}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-find-and-replace: 3.0.2
+    dev: false
+
   /mdast-util-phrasing@4.1.0:
     resolution: {integrity: sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==, tarball: https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz}
     dependencies:
@@ -17456,6 +17466,14 @@ packages:
     engines: {node: '>= 0.10'}
     dev: false
 
+  /remark-breaks@4.0.0:
+    resolution: {integrity: sha512-IjEjJOkH4FuJvHZVIW0QCDWxcG96kCq7An/KVH2NfJe6rKZU2AsHeB3OEjPNRxi4QC34Xdx7I2KGYn6IpT7gxQ==, tarball: https://registry.npmjs.org/remark-breaks/-/remark-breaks-4.0.0.tgz}
+    dependencies:
+      '@types/mdast': 4.0.4
+      mdast-util-newline-to-break: 2.0.0
+      unified: 11.0.5
+    dev: false
+
   /remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==, tarball: https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz}
     dependencies:

src/components/logs-viewer/virtual-log-list.tsx

@@ -255,7 +255,7 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
     return () => {
       chunkRequedtRef.current?.current?.abort?.();
     };
-  }, [url]);
+  }, [url, isDownloading]);
 
   useEffect(() => {
     debouncedScroll();
@@ -357,4 +357,4 @@ const LogsViewer: React.FC<LogsViewerProps> = forwardRef((props, ref) => {
   );
 });
 
-export default React.memo(LogsViewer);
+export default LogsViewer;

src/components/markdown-viewer/full-markdown.tsx

@@ -3,6 +3,7 @@ import 'katex/dist/katex.min.css';
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
 import rehypeKatex from 'rehype-katex';
+import remarkBreaks from 'remark-breaks';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import styled from 'styled-components';
@@ -17,9 +18,7 @@ interface FullMarkdownProps {
 
 const Wrapper = styled.div.attrs(() => ({
   className: 'markdown-viewer'
-}))`
+}))``;
-  line-height: 2;
-`;
 
 const CodeViewer = (props: any) => {
   const { children, className, node, theme, ...rest } = props;
@@ -41,7 +40,7 @@ const FullMarkdown: React.FC<FullMarkdownProps> = ({ content, theme }) => {
   return (
     <Wrapper>
       <ReactMarkdown
-        remarkPlugins={[[remarkMath], remarkGfm]}
+        remarkPlugins={[[remarkMath], remarkGfm, remarkBreaks]}
         rehypePlugins={[rehypeKatex]}
         components={{
           code(props) {

src/components/markdown-viewer/index.less

@@ -1,6 +1,6 @@
 .markdown-viewer {
   word-break: break-word;
-  white-space: pre-line;
+  line-height: 2;
   font-size: var(--font-size-base);
 
   .hr {
@@ -61,13 +61,11 @@
   ul {
     margin-bottom: 0;
     padding-left: 20px;
-    line-height: 2;
   }
 
   ol {
     margin-bottom: 0;
     padding-left: 20px;
-    line-height: 2;
   }
 
   a * {

src/pages/llmodels/components/table-list.tsx

@@ -877,6 +877,7 @@ const Models: React.FC<ModelsProps> = ({
         onOk={handleCreateModel}
       ></DeployModal>
       <ViewLogsModal
+        status={currentInstance.status}
         url={currentInstance.url}
         tail={currentInstance.tail}
         id={currentInstance.id}

src/pages/llmodels/components/view-logs-modal.tsx

@@ -12,15 +12,18 @@ type ViewModalProps = {
   id?: number | string;
   modelId?: number | string;
   tail?: number;
+  status?: string;
   onCancel: () => void;
 };
 
 const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
   const intl = useIntl();
   const { setChunkRequest } = useSetChunkRequest();
-  const { open, url, onCancel, tail } = props || {};
+  const { open, url, onCancel, tail, status } = props || {};
   const [enableScorllLoad, setEnableScorllLoad] = useState(true);
-  const [instanceState, setInstanceState] = useState<string>('');
+  const [isDownloading, setIsDownloading] = useState<boolean>(
+    status === InstanceStatusMap.Downloading
+  );
   const logsViewerRef = React.useRef<any>(null);
   const requestRef = React.useRef<any>(null);
   const contentRef = React.useRef<any>(null);
@@ -33,8 +36,9 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
   const updateHandler = (list: any) => {
     const data = list?.find((item: any) => item.data?.id === props.id);
     // state in InstanceRealtimeLogStatus will not enable scorll load, because it is in the trasisition state
+
     if (data) {
-      setInstanceState(data?.data?.state);
+      setIsDownloading(data?.data?.state === InstanceStatusMap.Downloading);
       setEnableScorllLoad(
         () => !InstanceRealtimeLogStatus.includes(data?.data?.state)
       );
@@ -72,6 +76,9 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
         url: `${MODELS_API}/${props.modelId}/instances`,
         handler: updateHandler
       });
+    } else {
+      logsViewerRef.current?.abort();
+      requestRef.current?.current?.cancel?.();
     }
 
     return () => {
@@ -113,7 +120,7 @@ const ViewLogsModal: React.FC<ViewModalProps> = (props) => {
           url={url}
           tail={tail}
           enableScorllLoad={enableScorllLoad}
-          isDownloading={instanceState !== InstanceStatusMap.Downloading}
+          isDownloading={isDownloading}
           params={{
             follow: true
           }}