feat: vllm support

src/components/markdown-viewer/index.less

@@ -0,0 +1,77 @@
+.markdown-viewer {
+  font-family: var(--font-family) !important;
+  white-space: pre-wrap;
+
+  .hr {
+    border: none;
+    height: 1px;
+    background-color: var(--ant-color-split);
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    font-weight: 700;
+    font-weight: var(--font-weight-bold);
+    font-size: 14px;
+  }
+
+  .hj-wrapper {
+    margin-top: 16px;
+  }
+
+  strong {
+    font-weight: var(--font-weight-bold);
+  }
+
+  ul {
+    margin-bottom: 0;
+    padding-left: 20px;
+    line-height: 2;
+  }
+
+  ol {
+    margin-bottom: 0;
+    padding-left: 20px;
+    line-height: 2;
+  }
+
+  table {
+    width: 100%;
+
+    th {
+      text-align: left;
+      font-weight: var(--font-weight-bold);
+      line-height: 2;
+      padding-inline: 6px;
+      border-bottom: 1px solid var(--ant-color-split);
+    }
+
+    td {
+      line-height: 2;
+      padding-inline: 6px;
+      border-bottom: 1px solid var(--ant-color-split);
+    }
+
+    div {
+      display: inline;
+    }
+  }
+
+  a {
+    div {
+      display: inline;
+    }
+  }
+
+  .item-token {
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
+  }
+}

src/components/markdown-viewer/index.tsx

@@ -1,26 +1,143 @@
-import { marked, Tokens } from 'marked';
-import React from 'react';
+import { EyeOutlined } from '@ant-design/icons';
+import { Image, Typography } from 'antd';
+import { TokensList, marked } from 'marked';
+import React, { Fragment } from 'react';
+import HighlightCode from '../highlight-code';
+import './index.less';
+
+const { Text, Link, Paragraph } = Typography;
 
 interface MarkdownViewerProps {
   content: string;
   height?: string;
+  theme?: 'light' | 'dark';
 }
 
 const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
   content,
-  height = 'auto'
+  height = 'auto',
+  theme = 'light'
 }) => {
   const renderer = new marked.Renderer();
+  const tokens = marked.lexer(content);
+  const reDefineTypes = [
+    'code',
+    'link',
+    'hr',
+    'heading',
+    'paragraph',
+    'codespan',
+    'strong',
+    'text',
+    'image',
+    'em',
+    'list',
+    'list_item',
+    'br',
+    'html'
+  ];
 
-  renderer.link = ({ href, title, text }: Tokens.Link) => {
-    return `<a href="${href}" title="${title || ''}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+  const renderItem = (token: any, render: any) => {
+    // console.log('token======66==', token.raw, token.type);
+    if (!reDefineTypes.includes(token.type)) {
+      return (
+        <span
+          dangerouslySetInnerHTML={{
+            __html: marked.parser([token], { renderer })
+          }}
+        ></span>
+      );
+    }
+    let htmlstr: any = null;
+    let child: any = null;
+    if (token.tokens?.length) {
+      child = render?.(token.tokens as TokensList, render);
+    }
+    const text = child ? child : token.text;
+
+    if (token.type === 'html') {
+      htmlstr = <div dangerouslySetInnerHTML={{ __html: token.text }} />;
+    }
+    if (token.type === 'list') {
+      htmlstr = token.order ? (
+        <ol>{render?.(token.items, render)}</ol>
+      ) : (
+        <ul>{render?.(token.items, render)}</ul>
+      );
+    }
+
+    if (token.type === 'list_item') {
+      htmlstr = <li>{text}</li>;
+    }
+
+    if (token.type === 'br') {
+      htmlstr = <br />;
+    }
+
+    if (token.type === 'em') {
+      htmlstr = <em>{text}</em>;
+    }
+
+    if (token.type === 'image') {
+      htmlstr = (
+        <Image
+          src={token.href}
+          preview={{
+            mask: <EyeOutlined />
+          }}
+        />
+      );
+    }
+    if (token.type === 'text') {
+      htmlstr = text;
+    }
+    if (token.type === 'codespan') {
+      htmlstr = <Text code>{text}</Text>;
+    }
+    if (token.type === 'strong') {
+      htmlstr = <Text strong>{text}</Text>;
+    }
+    if (token.type === 'heading') {
+      htmlstr = <Typography.Title level={4}>{text}</Typography.Title>;
+    }
+    if (token.type === 'paragraph') {
+      htmlstr = <Paragraph> {text}</Paragraph>;
+    }
+    if (token.type === 'code') {
+      htmlstr = (
+        <HighlightCode theme={theme} code={token.text} lang={token.lang} />
+      );
+    }
+    if (token.type === 'link') {
+      htmlstr = (
+        <Link
+          href={token.href}
+          title={token.title || ''}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          {text}
+        </Link>
+      );
+    }
+    if (token.type === 'hr') {
+      htmlstr = <hr className="hr" />;
+    }
+
+    return htmlstr;
+  };
+  const renderTokens = (tokens: TokensList): any => {
+    return tokens?.map((token: any, index: number) => {
+      return <Fragment key={index}>{renderItem(token, renderTokens)}</Fragment>;
+    });
   };
 
   return (
-    <div style={{ height, overflow: 'auto' }}>
-      <div
-        dangerouslySetInnerHTML={{ __html: marked(content, { renderer }) }}
-      />
+    <div
+      style={{ height, overflow: 'auto' }}
+      className="markdown-viewer custom-scrollbar-horizontal"
+    >
+      {renderTokens(tokens)}
     </div>
   );
 };

src/components/markdown-viewer/render-rules.ts

@@ -0,0 +1 @@
+export default {};