From 2ca712435adcab62a354929395ba7210b2f9ec7c Mon Sep 17 00:00:00 2001 From: jialin Date: Wed, 13 Aug 2025 19:33:14 +0800 Subject: [PATCH] fix: markdown view \n do not work --- package.json | 1 + pnpm-lock.yaml | 18 ++++++++++++++++++ .../logs-viewer/virtual-log-list.tsx | 4 ++-- .../markdown-viewer/full-markdown.tsx | 7 +++---- src/components/markdown-viewer/index.less | 4 +--- src/pages/llmodels/components/table-list.tsx | 1 + .../llmodels/components/view-logs-modal.tsx | 15 +++++++++++---- 7 files changed, 37 insertions(+), 13 deletions(-) diff --git a/package.json b/package.json index 5c4f2af7..9010e312 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da16460d..1e291570 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/components/logs-viewer/virtual-log-list.tsx b/src/components/logs-viewer/virtual-log-list.tsx index 2d06c76b..37604575 100644 --- a/src/components/logs-viewer/virtual-log-list.tsx +++ b/src/components/logs-viewer/virtual-log-list.tsx @@ -255,7 +255,7 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { return () => { chunkRequedtRef.current?.current?.abort?.(); }; - }, [url]); + }, [url, isDownloading]); useEffect(() => { debouncedScroll(); @@ -357,4 +357,4 @@ const LogsViewer: React.FC = forwardRef((props, ref) => { ); }); -export default React.memo(LogsViewer); +export default LogsViewer; diff --git a/src/components/markdown-viewer/full-markdown.tsx b/src/components/markdown-viewer/full-markdown.tsx index c5e34ae9..02cbe753 100644 --- a/src/components/markdown-viewer/full-markdown.tsx +++ b/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 = ({ content, theme }) => { return ( = ({ onOk={handleCreateModel} > void; }; const ViewLogsModal: React.FC = (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(''); + const [isDownloading, setIsDownloading] = useState( + status === InstanceStatusMap.Downloading + ); const logsViewerRef = React.useRef(null); const requestRef = React.useRef(null); const contentRef = React.useRef(null); @@ -33,8 +36,9 @@ const ViewLogsModal: React.FC = (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 = (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 = (props) => { url={url} tail={tail} enableScorllLoad={enableScorllLoad} - isDownloading={instanceState !== InstanceStatusMap.Downloading} + isDownloading={isDownloading} params={{ follow: true }}