From 3978ec683d63c61f5deb4f19a41f28c8a019af69 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Sun, 29 Sep 2024 20:30:08 +0800
Subject: [PATCH] style: no available models tips

---
 src/locales/en-US/playground.ts               |  2 +-
 .../playground/components/empty-models.tsx    | 13 +---
 .../playground/components/ground-left.tsx     | 61 ++++++++++---------
 .../playground/components/message-input.tsx   |  2 +-
 .../components/multiple-chat/index.tsx        | 54 +++++++++-------
 src/pages/playground/index.tsx                | 19 ++----
 6 files changed, 75 insertions(+), 76 deletions(-)

diff --git a/src/locales/en-US/playground.ts b/src/locales/en-US/playground.ts
index c86fd793..f70d4c62 100644
--- a/src/locales/en-US/playground.ts
+++ b/src/locales/en-US/playground.ts
@@ -44,7 +44,7 @@ export default {
   'playground.input.holder': 'Type <kbd>/</kbd> to input message',
   'playground.compare.apply': 'Apply',
   'playground.compare.applytoall': 'Apply to all models',
-  'playground.model.noavailable': 'No available models.',
+  'playground.model.noavailable': 'No available models',
   'playground.model.noavailable.tips':
     'Please deploy a model first, and it should not be an embedding-only model.'
 };
diff --git a/src/pages/playground/components/empty-models.tsx b/src/pages/playground/components/empty-models.tsx
index 06bc33ee..a66fae4a 100644
--- a/src/pages/playground/components/empty-models.tsx
+++ b/src/pages/playground/components/empty-models.tsx
@@ -1,5 +1,5 @@
 import { useIntl, useNavigate } from '@umijs/max';
-import { Button, Empty, Typography } from 'antd';
+import { Empty, Typography } from 'antd';
 import React from 'react';
 
 const EmptyModels: React.FC<{
@@ -13,7 +13,7 @@ const EmptyModels: React.FC<{
   };
   return (
     <div
-      className="flex-center justify-center"
+      className="flex-center  justify-center"
       style={{
         ...style
       }}
@@ -25,16 +25,9 @@ const EmptyModels: React.FC<{
             <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>
+      ></Empty>
     </div>
   );
 };
diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index 335278b7..2487c2a8 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/src/pages/playground/components/ground-left.tsx
@@ -27,6 +27,7 @@ import ViewCodeModal from './view-code-modal';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
+  loaded?: boolean;
   ref?: any;
 }
 
@@ -253,38 +254,40 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     <div className="ground-left-wrapper">
       <div className="ground-left">
         <div className="message-list-wrap" ref={scroller}>
-          <div
-            style={{
-              marginBottom: 20
-            }}
-          >
-            <SystemMessage
+          <>
+            <div
               style={{
-                borderRadius: 'var(--border-radius-mini)',
-                overflow: 'hidden'
+                marginBottom: 20
               }}
-              systemMessage={systemMessage}
-              setSystemMessage={setSystemMessage}
-            ></SystemMessage>
-          </div>
+            >
+              <SystemMessage
+                style={{
+                  borderRadius: 'var(--border-radius-mini)',
+                  overflow: 'hidden'
+                }}
+                systemMessage={systemMessage}
+                setSystemMessage={setSystemMessage}
+              ></SystemMessage>
+            </div>
 
-          <div className="content">
-            <MessageContent
-              spans={{
-                span: 24,
-                count: 1
-              }}
-              messageList={messageList}
-              setMessageList={setMessageList}
-              editable={true}
-              loading={loading}
-            />
-            {loading && (
-              <Spin size="small">
-                <div style={{ height: '46px' }}></div>
-              </Spin>
-            )}
-          </div>
+            <div className="content">
+              <MessageContent
+                spans={{
+                  span: 24,
+                  count: 1
+                }}
+                messageList={messageList}
+                setMessageList={setMessageList}
+                editable={true}
+                loading={loading}
+              />
+              {loading && (
+                <Spin size="small">
+                  <div style={{ height: '46px' }}></div>
+                </Spin>
+              )}
+            </div>
+          </>
         </div>
         {tokenResult && (
           <div style={{ height: 40 }}>
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index af911131..a42d5ca8 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@@ -108,7 +108,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
     return disabled
       ? true
       : !message.content && isEmpty && !message.imgs?.length;
-  }, [disabled, message.content, isEmpty]);
+  }, [disabled, message, isEmpty]);
 
   const resetMessage = () => {
     setMessage({
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx
index eb955374..b7fbb733 100644
--- a/src/pages/playground/components/multiple-chat/index.tsx
+++ b/src/pages/playground/components/multiple-chat/index.tsx
@@ -5,6 +5,7 @@ import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CompareContext from '../../config/compare-context';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
 import '../../style/multiple-chat.less';
+import EmptyModels from '../empty-models';
 import MessageInput from '../message-input';
 import ActiveModels from './active-models';
 
@@ -12,10 +13,10 @@ type CurrentMessage = Omit<MessageItem, 'uid'>;
 
 interface MultiCompareProps {
   modelList: (Global.BaseOption<string> & { type?: string })[];
-  spans?: number;
+  loaded?: boolean;
 }
 
-const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
+const MultiCompare: React.FC<MultiCompareProps> = ({ modelList, loaded }) => {
   const { initialize } = useOverlayScroller();
   const [loadingStatus, setLoadingStatus] = useState<Record<symbol, boolean>>(
     {}
@@ -262,30 +263,41 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
   return (
     <div className="multiple-chat" style={{ height: boxHeight }}>
       <div className="chat-list" ref={chatListScrollRef}>
-        <CompareContext.Provider
-          value={{
-            spans,
-            globalParams,
-            loadingStatus,
-            modelFullList: modelList,
-            handleApplySystemChangeToAll,
-            setGlobalParams,
-            setLoadingStatus: handleSetLoadingStatus,
-            handleDeleteModel: handleDeleteModel
-          }}
-        >
-          <ActiveModels
-            spans={spans}
-            modelSelections={modelSelections}
-            setModelRefs={setModelRefs}
-          ></ActiveModels>
-        </CompareContext.Provider>
+        {modelList.length > 0 ? (
+          <CompareContext.Provider
+            value={{
+              spans,
+              globalParams,
+              loadingStatus,
+              modelFullList: modelList,
+              handleApplySystemChangeToAll,
+              setGlobalParams,
+              setLoadingStatus: handleSetLoadingStatus,
+              handleDeleteModel: handleDeleteModel
+            }}
+          >
+            <ActiveModels
+              spans={spans}
+              modelSelections={modelSelections}
+              setModelRefs={setModelRefs}
+            ></ActiveModels>
+          </CompareContext.Provider>
+        ) : (
+          loaded && (
+            <EmptyModels
+              style={{
+                height: '100%',
+                paddingBottom: 60
+              }}
+            ></EmptyModels>
+          )
+        )}
       </div>
       <div>
         <MessageInput
           scope="compare"
           loading={isLoading}
-          disabled={isLoading || modelSelections.length === 0}
+          disabled={isLoading || !modelSelections.length || !modelList.length}
           handleSubmit={handleSubmit}
           addMessage={handleAddMessage}
           handleAbortFetch={handleAbortFetch}
diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx
index 648e49ed..65f3ac7a 100644
--- a/src/pages/playground/index.tsx
+++ b/src/pages/playground/index.tsx
@@ -9,7 +9,6 @@ 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';
@@ -52,7 +51,7 @@ const Playground: React.FC = () => {
     {
       key: 'compare',
       label: 'Compare',
-      children: <MultipleChat modelList={modelList} />
+      children: <MultipleChat modelList={modelList} loaded={loaded} />
     }
   ];
 
@@ -80,7 +79,7 @@ const Playground: React.FC = () => {
   }, []);
 
   const renderExtra = () => {
-    if (activeKey === 'compare' || modelList.length === 0) {
+    if (activeKey === 'compare') {
       return false;
     }
     return (
@@ -123,14 +122,14 @@ const Playground: React.FC = () => {
         title: (
           <div className="flex items-center">
             {intl.formatMessage({ id: 'menu.playground' })}
-            {modelList.length > 0 && (
+            {
               <Segmented
                 options={optionsList}
                 size="middle"
                 className="m-l-40"
                 onChange={(key) => setActiveKey(key)}
               ></Segmented>
-            )}
+            }
           </div>
         )
       }}
@@ -142,15 +141,7 @@ const Playground: React.FC = () => {
     >
       <div className="play-ground">
         <div className="chat">
-          {modelList.length > 0 ? (
-            <Tabs items={items} activeKey={activeKey}></Tabs>
-          ) : (
-            loaded && (
-              <EmptyModels
-                style={{ height: 'calc(100vh - 72px)', paddingBottom: 100 }}
-              ></EmptyModels>
-            )
-          )}
+          <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
       </div>
     </PageContainer>