feat: vllm support

src/pages/playground/components/view-code-modal.tsx

@@ -1,6 +1,6 @@
 import EditorWrap from '@/components/editor-wrap';
+import HighlightCode from '@/components/highlight-code';
 import { BulbOutlined } from '@ant-design/icons';
-import Editor from '@monaco-editor/react';
 import { useIntl } from '@umijs/max';
 import { Button, Modal } from 'antd';
 import _ from 'lodash';
@@ -16,6 +16,18 @@ type ViewModalProps = {
   onCancel: () => void;
 };
 
+const langMap = {
+  shell: 'bash',
+  python: 'python',
+  javascript: 'javascript'
+};
+
+const langOptions = [
+  { label: 'Curl', value: langMap.shell },
+  { label: 'Python', value: langMap.python },
+  { label: 'Nodejs', value: langMap.javascript }
+];
+
 const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const {
     title,
@@ -31,7 +43,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const editorRef = useRef(null);
   const [loaded, setLoaded] = useState(false);
   const [codeValue, setCodeValue] = useState('');
-  const [lang, setLang] = useState('shell');
+  const [lang, setLang] = useState(langMap.shell);
 
   const BaseURL = `${window.location.origin}/v1-openai`;
   const ClientType = apiType === 'chat' ? 'chat.completions' : 'embeddings';
@@ -39,24 +51,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const logcommand =
     apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding';
 
-  const langOptions = [
-    { label: 'Curl', value: 'shell' },
-    { label: 'Python', value: 'python' },
-    { label: 'Nodejs', value: 'javascript' }
-  ];
-
-  const formatCode = () => {
-    if (editorRef.current) {
-      setTimeout(() => {
-        editorRef.current
-          ?.getAction?.('editor.action.formatDocument')
-          ?.run()
-          .then(() => {
-            console.log('format success');
-          });
-      }, 100);
-    }
-  };
   const generateCode = () => {
     const systemList = systemMessage
       ? [
@@ -91,7 +85,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         ]
       };
     });
-    if (lang === 'shell') {
+    if (lang === langMap.shell) {
       const messages = [...systemList, ...formatMessageList];
       const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
         {
@@ -102,7 +96,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         2
       )}'`;
       setCodeValue(code);
-    } else if (lang === 'javascript') {
+    } else if (lang === langMap.javascript) {
       const messages = [...systemList, ...formatMessageList];
       const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n  "apiKey": "YOUR_GPUSTACK_API_KEY",\n  "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n  const params = ${JSON.stringify(
         {
@@ -113,7 +107,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
         4
       )};\nconst response = await openai.${ClientType}.create(params);\n  console.log(response.${logcommand});\n}\nmain();`;
       setCodeValue(code);
-    } else if (lang === 'python') {
+    } else if (lang === langMap.python) {
       const formattedParams = _.keys(parameters).reduce(
         (acc: string, key: string) => {
           if (parameters[key] === null) {
@@ -138,20 +132,6 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       const code = `from openai import OpenAI\n\nclient = OpenAI(\n  base_url="${BaseURL}", \n  api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${ClientType}.create(\n${formattedParams}  ${messages})\nprint(response.${logcommand})`;
       setCodeValue(code);
     }
-    formatCode();
-  };
-  const handleEditorDidMount = (editor: any, monaco: any) => {
-    editorRef.current = editor;
-    setLoaded(true);
-    console.log('loaded====', editor, monaco);
-  };
-
-  const handleBeforeMount = (monaco: any) => {
-    monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-      noSemanticValidation: false,
-      noSyntaxValidation: false,
-      diagnosticCodesToIgnore: [80001]
-    });
   };
 
   const handleOnChangeLang = (value: string) => {
@@ -159,7 +139,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   };
 
   const handleClose = () => {
-    setLang('shell');
+    setLang(langMap.shell);
     onCancel();
   };
   const editorConfig = {
@@ -203,21 +183,22 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
           <EditorWrap
             copyText={codeValue}
             langOptions={langOptions}
-            defaultValue="shell"
-            showHeader={loaded}
+            defaultValue={langMap.shell}
+            showHeader={true}
             onChangeLang={handleOnChangeLang}
+            styles={{
+              wrapper: {
+                backgroundColor: 'var(--color-editor-dark)'
+              }
+            }}
           >
-            <Editor
+            <HighlightCode
               height={380}
-              theme="vs-dark"
-              className="monaco-editor"
-              defaultLanguage="shell"
-              language={lang}
-              value={codeValue}
-              options={editorConfig}
-              beforeMount={handleBeforeMount}
-              onMount={handleEditorDidMount}
-            />
+              theme="dark"
+              code={codeValue}
+              lang={lang}
+              copyable={false}
+            ></HighlightCode>
           </EditorWrap>
           <div
             style={{ marginTop: 10, display: 'flex', alignItems: 'baseline' }}