chore: model list ux

src/pages/playground/components/chat-footer.tsx

@@ -48,7 +48,7 @@ const ChatFooter: React.FC<ChatFooterProps> = (props) => {
               onClick={onView}
               disabled={disabled}
             >
-              View
+              View Code
             </Button>
             <Button
               disabled={disabled}

src/pages/playground/components/ground-left.tsx

@@ -179,6 +179,9 @@ const MessageList: React.FC<MessageProps> = (props) => {
       </div>
       <ViewCodeModal
         open={show}
+        systemMessage={systemMessage}
+        messageList={messageList}
+        parameters={parameters}
         onCancel={handleCloseViewCode}
         title="View code"
       ></ViewCodeModal>

src/pages/playground/components/params-settings.tsx

@@ -22,11 +22,6 @@ type ParamsSettingsProps = {
   params?: ParamsSettingsFormProps;
   setParams: (params: any) => void;
 };
-// const dataList = [
-//   { value: 'llama3:latest', label: 'llama3:latest' },
-//   { value: 'wangfuyun/AnimateLCM', label: 'wangfuyun/AnimateLCM' },
-//   { value: 'Revanthraja/Text_to_Vision', label: 'Revanthraja/Text_to_Vision' }
-// ];
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   onClose,
@@ -126,7 +121,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
               max={2}
               step={0.1}
               style={{ marginBottom: 0 }}
-              tooltip={{ open: true }}
             ></Slider>
           </FieldWrapper>
         </Form.Item>
@@ -149,7 +143,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
               max={1}
               step={0.1}
               style={{ marginBottom: 0 }}
-              tooltip={{ open: true }}
             ></Slider>
           </FieldWrapper>
         </Form.Item>

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

@@ -1,83 +1,173 @@
 import EditorWrap from '@/components/editor-wrap';
 import Editor from '@monaco-editor/react';
-import { Modal } from 'antd';
-import React, { useRef, useState } from 'react';
+import { Modal, Spin } from 'antd';
+import _ from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
 
 type ViewModalProps = {
+  systemMessage?: string;
+  messageList: any[];
+  parameters: any;
   title: string;
   open: boolean;
   onCancel: () => void;
 };
 
 const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
-  const { title, open, onCancel } = props || {};
-  if (!open) {
-    return null;
-  }
+  const {
+    title,
+    open,
+    onCancel,
+    systemMessage,
+    messageList,
+    parameters = {}
+  } = props || {};
+
   const editorRef = useRef(null);
+  const [loaded, setLoaded] = useState(false);
   const [codeValue, setCodeValue] = useState('');
-  const [lang, setLang] = useState('json');
+  const [lang, setLang] = useState('shell');
 
   const langOptions = [
-    { label: 'curl', value: 'curl' },
-    { label: 'JSON', value: 'json' },
-    { label: 'JavaScript', value: 'javascript' },
-    { label: 'Python', value: 'python' }
+    { label: 'Curl', value: 'shell' },
+    { label: 'Python', value: 'python' },
+    { label: 'Nodejs', value: 'javascript' }
   ];
 
+  useEffect(() => {
+    generateCode();
+  }, [lang, systemMessage, messageList, parameters]);
+
+  const generateCode = () => {
+    if (lang === 'shell') {
+      const systemList = systemMessage
+        ? [{ role: 'system', content: systemMessage }]
+        : [];
+      const code = `curl ${window.location.origin}/v1/chat/completions \n-H "Content-Type: application/json" \n-H "Authorization: Bearer $\{GPUSTACK_API_KEY}\" \n-d '${JSON.stringify(
+        {
+          ...parameters,
+          messages: [...systemList, ...messageList]
+        },
+        null,
+        2
+      )}'`;
+      setCodeValue(code);
+    } else if (lang === 'javascript') {
+      const systemList = systemMessage
+        ? [{ role: 'system', content: systemMessage }]
+        : [];
+      const code = `import OpenAI from "openai";\nconst openai = new OpenAI();\n\nasync function main(){\nconst params = ${JSON.stringify(
+        {
+          ...parameters,
+          messages: [...systemList, ...messageList]
+        },
+        null,
+        2
+      )};\nconst chatCompletion = await openai.chat.completions.create(params);\nfor await (const chunk of chatCompletion) {\n  process.stdout.write(chunk.choices[0]?.delta?.content || '');\n}\n}\nmain();`;
+      setCodeValue(code);
+    } else if (lang === 'python') {
+      const formattedParams = _.keys(parameters).reduce(
+        (acc: string, key: string) => {
+          if (parameters[key] === null) {
+            return acc;
+          }
+          const value =
+            typeof parameters[key] === 'string'
+              ? `"${parameters[key]}"`
+              : parameters[key];
+          return acc + `  ${key}=${value},\n`;
+        },
+        ''
+      );
+      const systemList = systemMessage
+        ? [{ role: 'system', content: systemMessage }]
+        : [];
+      const code = `from openai import OpenAI\nclient = OpenAI()\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
+      setCodeValue(code);
+    }
+    formatCode();
+  };
   const handleEditorDidMount = (editor: any, monaco: any) => {
     editorRef.current = editor;
+    setLoaded(true);
   };
 
+  function formatCode() {
+    if (editorRef.current) {
+      setTimeout(() => {
+        editorRef.current
+          ?.getAction?.('editor.action.formatDocument')
+          ?.run()
+          .then(() => {
+            console.log('format success');
+          });
+      }, 100);
+    }
+  }
+
   const handleOnChangeLang = (value: string) => {
     setLang(value);
   };
+
+  const handleClose = () => {
+    setLang('shell');
+    onCancel();
+  };
   const editorConfig = {
     minimap: {
       enabled: false
     },
+    formatOnType: true,
+    formatOnPaste: true,
     scrollbar: {
       verticalSliderSize: 8
     }
   };
+
   return (
-    <Modal
-      title={title}
-      open={open}
-      onCancel={onCancel}
-      destroyOnClose={true}
-      closeIcon={true}
-      maskClosable={false}
-      keyboard={false}
-      width={600}
-      style={{ top: '80px' }}
-      footer={null}
-    >
-      <div style={{ marginBottom: '10px' }}>
-        You can use the following code to start integrating your current prompt
-        and settings into your application.
-      </div>
-      <EditorWrap
-        copyText={codeValue}
-        langOptions={langOptions}
-        onChangeLang={handleOnChangeLang}
+    <>
+      <Modal
+        title={title}
+        open={open}
+        onCancel={handleClose}
+        destroyOnClose={true}
+        closeIcon={true}
+        maskClosable={false}
+        keyboard={false}
+        width={600}
+        style={{ top: '80px' }}
+        footer={null}
       >
-        <Editor
-          height="400px"
-          theme="vs-dark"
-          className="monaco-editor"
-          defaultLanguage="javascript"
-          defaultValue="// some comment"
-          language={lang}
-          options={editorConfig}
-          onMount={handleEditorDidMount}
-        />
-      </EditorWrap>
-      <div style={{ marginTop: '10px' }}>
-        our API Key can be foundhere You should use environment variables or a
-        secret management tool to expose your key to your applications.
-      </div>
-    </Modal>
+        <div style={{ marginBottom: '10px' }}>
+          You can use the following code to start integrating your current
+          prompt and settings into your application.
+        </div>
+        <Spin spinning={!loaded}>
+          <EditorWrap
+            copyText={codeValue}
+            langOptions={langOptions}
+            defaultValue="shell"
+            showHeader={loaded}
+            onChangeLang={handleOnChangeLang}
+          >
+            <Editor
+              height="400px"
+              theme="vs-dark"
+              className="monaco-editor"
+              defaultLanguage="shell"
+              language={lang}
+              value={codeValue}
+              options={editorConfig}
+              onMount={handleEditorDidMount}
+            />
+          </EditorWrap>
+        </Spin>
+        <div style={{ marginTop: '10px' }}>
+          our API Key can be foundhere You should use environment variables or a
+          secret management tool to expose your key to your applications.
+        </div>
+      </Modal>
+    </>
   );
 };