fix: markdown view \n do not work

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
           }}