chore: add no available models notes

src/pages/playground/components/empty-models.tsx

@@ -0,0 +1,42 @@
+import { useIntl, useNavigate } from '@umijs/max';
+import { Button, Empty, Typography } from 'antd';
+import React from 'react';
+
+const EmptyModels: React.FC<{
+  style?: React.CSSProperties;
+}> = ({ style }) => {
+  const intl = useIntl();
+  const navigate = useNavigate();
+
+  const handleDeployModel = () => {
+    navigate('/models');
+  };
+  return (
+    <div
+      className="flex-center justify-center"
+      style={{
+        ...style
+      }}
+    >
+      <Empty
+        image={Empty.PRESENTED_IMAGE_SIMPLE}
+        description={
+          <div className="flex-column">
+            <Typography.Text type="secondary">
+              {intl.formatMessage({ id: 'playground.model.noavailable' })}
+            </Typography.Text>
+            <Typography.Text type="secondary">
+              {intl.formatMessage({ id: 'playground.model.noavailable.tips' })}
+            </Typography.Text>
+          </div>
+        }
+      >
+        <Button type="primary" onClick={handleDeployModel}>
+          {intl.formatMessage({ id: 'models.button.deploy' })}
+        </Button>
+      </Empty>
+    </div>
+  );
+};
+
+export default EmptyModels;

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -1,3 +1,4 @@
+import AutoTooltip from '@/components/auto-tooltip';
 import IconFont from '@/components/icon-font';
 import useOverlayScroller from '@/hooks/use-overlay-scroller';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
@@ -369,6 +370,19 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               options={modelFullList}
               onChange={handleModelChange}
               value={params.model}
+              optionRender={(data) => {
+                return (
+                  <AutoTooltip
+                    title={data.label}
+                    ghost
+                    tooltipProps={{
+                      placement: 'right'
+                    }}
+                  >
+                    {data.label}
+                  </AutoTooltip>
+                );
+              }}
             ></Select>
           </span>
           <ReferenceParams usage={tokenResult}></ReferenceParams>

src/pages/playground/index.tsx

@@ -2,26 +2,24 @@ import IconFont from '@/components/icon-font';
 import HotKeys from '@/config/hotkeys';
 import { MessageOutlined, OneToOneOutlined } from '@ant-design/icons';
 import { PageContainer } from '@ant-design/pro-components';
-import { useIntl, useSearchParams } from '@umijs/max';
+import { useIntl } from '@umijs/max';
 import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { queryModelsList } from './apis';
+import EmptyModels from './components/empty-models';
 import GroundLeft from './components/ground-left';
 import MultipleChat from './components/multiple-chat';
 import './style/play-ground.less';
 
 const Playground: React.FC = () => {
   const intl = useIntl();
-  const [searchParams] = useSearchParams();
-  const selectModel = searchParams.get('model') || '';
-  const [params, setParams] = useState({});
-  const [collapse, setCollapse] = useState(false);
   const [activeKey, setActiveKey] = useState('chat');
   const groundLeftRef = useRef<any>(null);
   const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
+  const [loaded, setLoaded] = useState(false);
   const optionsList = [
     {
       label: intl.formatMessage({ id: 'menu.chat' }),
@@ -74,13 +72,15 @@ const Playground: React.FC = () => {
         setModelList(list);
       } catch (error) {
         console.error(error);
+      } finally {
+        setLoaded(true);
       }
     };
     getModelList();
   }, []);
 
   const renderExtra = () => {
-    if (activeKey === 'compare') {
+    if (activeKey === 'compare' || modelList.length === 0) {
       return false;
     }
     return (
@@ -123,12 +123,14 @@ const Playground: React.FC = () => {
         title: (
           <div className="flex items-center">
             {intl.formatMessage({ id: 'menu.playground' })}
-            <Segmented
-              options={optionsList}
-              size="middle"
-              className="m-l-40"
-              onChange={(key) => setActiveKey(key)}
-            ></Segmented>
+            {modelList.length > 0 && (
+              <Segmented
+                options={optionsList}
+                size="middle"
+                className="m-l-40"
+                onChange={(key) => setActiveKey(key)}
+              ></Segmented>
+            )}
           </div>
         )
       }}
@@ -140,7 +142,15 @@ const Playground: React.FC = () => {
     >
       <div className="play-ground">
         <div className="chat">
-          <Tabs items={items} activeKey={activeKey}></Tabs>
+          {modelList.length > 0 ? (
+            <Tabs items={items} activeKey={activeKey}></Tabs>
+          ) : (
+            loaded && (
+              <EmptyModels
+                style={{ height: 'calc(100vh - 72px)', paddingBottom: 100 }}
+              ></EmptyModels>
+            )
+          )}
         </div>
       </div>
     </PageContainer>