style: no available models tips

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>
   );
 };

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 }}>

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({

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}