feat: vllm support

src/components/highlight-code/code-viewer-dark.tsx

@@ -8,12 +8,21 @@ interface CodeViewerProps {
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
 }
 const DarkViewer: React.FC<CodeViewerProps> = (props) => {
-  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
+  const {
+    code,
+    lang,
+    autodetect,
+    ignoreIllegals,
+    copyable,
+    height = 'auto'
+  } = props || {};
 
   return (
     <CodeViewer
+      height={height}
       code={code}
       lang={lang}
       theme="dark"

src/components/highlight-code/code-viewer-light.tsx

@@ -8,12 +8,21 @@ interface CodeViewerProps {
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
 }
 const LightViewer: React.FC<CodeViewerProps> = (props) => {
-  const { code, lang, autodetect, ignoreIllegals, copyable } = props || {};
+  const {
+    code,
+    lang,
+    autodetect,
+    ignoreIllegals,
+    copyable,
+    height = 'auto'
+  } = props || {};
 
   return (
     <CodeViewer
+      height={height}
       code={code}
       lang={lang}
       theme="light"

src/components/highlight-code/code-viewer.tsx

@@ -10,6 +10,7 @@ interface CodeViewerProps {
   autodetect?: boolean;
   ignoreIllegals?: boolean;
   copyable?: boolean;
+  height?: string | number;
   theme?: 'light' | 'dark';
 }
 const CodeViewer: React.FC<CodeViewerProps> = (props) => {
@@ -18,7 +19,8 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
     lang,
     autodetect = true,
     ignoreIllegals = true,
-    copyable = true
+    copyable = true,
+    height = 'auto'
   } = props || {};
 
   const highlightedCode = useMemo(() => {
@@ -58,11 +60,14 @@ const CodeViewer: React.FC<CodeViewerProps> = (props) => {
 
   return (
     <pre
-      className={classNames('code-pre', {
+      className={classNames('code-pre custome-scrollbar ', {
         dark: props.theme === 'dark',
         light: props.theme === 'light',
         copyable: copyable
       })}
+      style={{
+        height: height
+      }}
     >
       <code
         className={highlightedCode.className}

src/components/highlight-code/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import CodeViewerDark from './code-viewer-dark';
 import CodeViewerLight from './code-viewer-light';
 import './styles/index.less';
@@ -7,18 +8,35 @@ const HighlightCode: React.FC<{
   lang?: string;
   copyable?: boolean;
   theme?: 'light' | 'dark';
+  height?: string | number;
 }> = (props) => {
-  const { code, lang = 'bash', copyable = true, theme = 'dark' } = props;
+  const {
+    code,
+    lang = 'bash',
+    copyable = true,
+    theme = 'dark',
+    height = 'auto'
+  } = props;
 
   return (
-    <div className="high-light-wrapper">
+    <div className="high-light-wrapper hj-wrapper">
       {theme === 'dark' ? (
-        <CodeViewerDark lang={lang} code={code} copyable={copyable} />
+        <CodeViewerDark
+          lang={lang}
+          code={code}
+          copyable={copyable}
+          height={height}
+        />
       ) : (
-        <CodeViewerLight lang={lang} code={code} copyable={copyable} />
+        <CodeViewerLight
+          lang={lang}
+          code={code}
+          copyable={copyable}
+          height={height}
+        />
       )}
     </div>
   );
 };
 
-export default HighlightCode;
+export default React.memo(HighlightCode);

src/components/highlight-code/styles/index.less

@@ -1,5 +1,6 @@
 .high-light-wrapper {
   text-align: left;
+  font-size: var(--font-size-base);
 
   .hljs {
     font-weight: var(--font-weight-normal);