fix: model list watch data

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

@@ -1,7 +1,8 @@
 import EditorWrap from '@/components/editor-wrap';
+import { BulbOutlined } from '@ant-design/icons';
 import Editor from '@monaco-editor/react';
 import { useIntl } from '@umijs/max';
-import { Modal, Spin } from 'antd';
+import { Button, Modal, Spin } from 'antd';
 import _ from 'lodash';
 import React, { useEffect, useRef, useState } from 'react';
 
@@ -30,6 +31,8 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
   const [codeValue, setCodeValue] = useState('');
   const [lang, setLang] = useState('shell');
 
+  const BaseURL = `${window.location.origin}/v1-openai/chat/completions`;
+
   const langOptions = [
     { label: 'Curl', value: 'shell' },
     { label: 'Python', value: 'python' },
@@ -66,7 +69,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       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(
+      const code = `import OpenAI from "openai";\nconst openai = new OpenAI();\n\nconst baseURL = "${BaseURL}"\n\nasync function main(){\nconst params = ${JSON.stringify(
         {
           ...parameters,
           messages: [...systemList, ...messageList]
@@ -92,7 +95,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
       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)`;
+      const code = `from openai import OpenAI\nclient = OpenAI()\n\nbaseURL = ${BaseURL}\n\ncompletion = client.chat.completions.create(\n${formattedParams}  messages=${JSON.stringify([...systemList, ...messageList], null, 2)})\nprint(completion.choices[0].message)`;
       setCodeValue(code);
     }
     formatCode();
@@ -152,7 +155,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
             onChangeLang={handleOnChangeLang}
           >
             <Editor
-              height="min(450px, 90vh)"
+              height={380}
               theme="vs-dark"
               className="monaco-editor"
               defaultLanguage="shell"
@@ -162,6 +165,29 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
               onMount={handleEditorDidMount}
             />
           </EditorWrap>
+          <div style={{ marginTop: 10 }}>
+            <BulbOutlined className="m-r-8" />
+            <span>
+              {intl.formatMessage(
+                { id: 'playground.viewcode.tips' },
+                {
+                  here: (
+                    <Button
+                      type="link"
+                      size="small"
+                      href="#/api-keys"
+                      target="_blank"
+                    >
+                      <span>
+                        {' '}
+                        {intl.formatMessage({ id: 'playground.viewcode.here' })}
+                      </span>
+                    </Button>
+                  )
+                }
+              )}
+            </span>
+          </div>
         </Spin>
       </Modal>
     </>