fix: playground message flashing

src/pages/dashboard/components/active-table.tsx

@@ -98,7 +98,7 @@ const ActiveTable = () => {
       }
     },
     {
-      title: intl.formatMessage({ id: 'dashboard.runninginstances' }),
+      title: intl.formatMessage({ id: 'models.form.replicas' }),
       dataIndex: 'instance_count',
       key: 'instance_count'
     },

src/pages/dashboard/config/index.ts

@@ -2,31 +2,22 @@ export const overviewConfigs = [
   {
     key: 'worker_count',
     label: 'dashboard.workers',
-    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
     backgroundColor: 'var(--color-white-1)'
   },
   {
     key: 'gpu_count',
     label: 'dashboard.totalgpus',
     backgroundColor: 'var(--color-white-1)'
-    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
-  // {
-  //   key: 'allocatedGpus',
-  //   label: 'dashboard.allocategpus',
-  //   backgroundColor: 'var(--color-white-1)'
-  //   // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
-  // },
+
   {
     key: 'model_count',
     label: 'dashboard.models',
     backgroundColor: 'var(--color-white-1)'
-    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   },
   {
     key: 'model_instance_count',
-    label: 'dashboard.instances',
+    label: 'models.form.replicas',
     backgroundColor: 'var(--color-white-1)'
-    // backgroundColor: 'linear-gradient(135deg, #ffffff, rgb(232 249 240 / 60%))'
   }
 ];

src/pages/llmodels/components/instance-item.tsx

@@ -19,11 +19,17 @@ interface InstanceItemProps {
   ) => void;
 }
 
+const testStatus = {
+  state: InstanceStatusMap.Downloading,
+  text: 'Downloading'
+};
+
 const InstanceItem: React.FC<InstanceItemProps> = ({
   list,
   handleChildSelect
 }) => {
   console.log('instance item====');
+
   const intl = useIntl();
   const childActionList = [
     {

src/pages/login/components/styles.less

@@ -4,7 +4,7 @@
   width: max-content;
   height: max-content;
   padding: 32px;
-  background-color: rgba(255, 255, 255, 50%);
+  background-color: rgba(255, 255, 255, 90%);
 
   :global(.field-wrapper) {
     background-color: transparent !important;

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

@@ -26,6 +26,7 @@ interface ChatFooterProps {
 }
 
 const ChatFooter: React.FC<ChatFooterProps> = (props) => {
+  console.log('chat footer=====');
   const platform = platformCall();
   const intl = useIntl();
   const {

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

@@ -69,12 +69,14 @@ const MessageList: React.FC<MessageProps> = (props) => {
   };
 
   const joinMessage = (chunk: any) => {
+    if (!chunk) {
+      return;
+    }
     if (_.get(chunk, 'choices.0.finish_reason')) {
       setTokenResult({
         ...chunk?.usage
       });
-
-      return true;
+      return;
     }
     contentRef.current =
       contentRef.current + _.get(chunk, 'choices.0.delta.content', '');
@@ -86,8 +88,6 @@ const MessageList: React.FC<MessageProps> = (props) => {
         uid: messageId.current
       }
     ]);
-    console.log('messageList=====', messageList, messageId.current, chunk);
-    return false;
   };
   const handleStopConversation = () => {
     controllerRef.current?.abort?.();

src/pages/playground/components/message-item.tsx

@@ -3,7 +3,7 @@ import HotKeys from '@/config/hotkeys';
 import { MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Space } from 'antd';
-import { memo, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
 import '../style/message-item.less';
@@ -23,10 +23,7 @@ const MessageItem: React.FC<{
   onDelete: () => void;
 }> = ({ message, isFocus, onDelete, updateMessage, onSubmit, loading }) => {
   const intl = useIntl();
-  const [roleType, setRoleType] = useState(message.role);
   const [isTyping, setIsTyping] = useState(false);
-  const [messageContent, setMessageContent] = useState(message.content);
-  const isInitialRender = useRef(true);
   const [isAnimating, setIsAnimating] = useState(false);
   const [currentIsFocus, setCurrentIsFocus] = useState(isFocus);
   const inputRef = useRef<any>(null);
@@ -57,29 +54,20 @@ const MessageItem: React.FC<{
   //   return () => clearInterval(intervalId);
   // }, [message.content, isTyping]);
 
-  useEffect(() => {
-    setMessageContent(message.content);
-  }, [message.content]);
-
-  useEffect(() => {
-    if (!isInitialRender.current) {
-      updateMessage({
-        role: roleType,
-        content: messageContent,
-        uid: message.uid
-      });
-    } else {
-      isInitialRender.current = false;
-    }
-  }, [roleType, messageContent]);
-
+  const handleUpdateMessage = (params: { role: string; message: string }) => {
+    updateMessage({
+      role: params.role,
+      content: params.message,
+      uid: message.uid
+    });
+  };
   const handleMessageChange = (e: any) => {
-    setIsTyping(true);
-    setMessageContent(e.target.value);
+    // setIsTyping(true);
+    handleUpdateMessage({ role: message.role, message: e.target.value });
   };
 
   const handleBlur = () => {
-    setIsTyping(true);
+    // setIsTyping(true);
     setCurrentIsFocus(false);
   };
 
@@ -88,11 +76,10 @@ const MessageItem: React.FC<{
   };
 
   const handleRoleChange = () => {
-    setRoleType((prevRoleType) => {
-      const newRoleType =
-        prevRoleType === Roles.User ? Roles.Assistant : Roles.User;
-      return newRoleType;
-    });
+    const newRoleType =
+      message.role === Roles.User ? Roles.Assistant : Roles.User;
+
+    handleUpdateMessage({ role: newRoleType, message: message.content });
   };
 
   const handleDelete = () => {
@@ -116,14 +103,14 @@ const MessageItem: React.FC<{
     <div className="message-item">
       <div className="role-type">
         <Button onClick={handleRoleChange} type="text">
-          {intl.formatMessage({ id: `playground.${roleType}` })}
+          {intl.formatMessage({ id: `playground.${message.role}` })}
         </Button>
       </div>
       <div className="message-content-input">
         <Input.TextArea
           ref={inputRef}
           style={{ paddingBlock: '12px' }}
-          value={messageContent}
+          value={message.content}
           autoSize={true}
           variant="filled"
           readOnly={loading}
@@ -134,8 +121,8 @@ const MessageItem: React.FC<{
       </div>
       <div className="delete-btn">
         <Space size={5}>
-          {messageContent && (
-            <CopyButton text={messageContent} size="small"></CopyButton>
+          {message.content && (
+            <CopyButton text={message.content} size="small"></CopyButton>
           )}
           <Button
             type="text"
@@ -151,4 +138,4 @@ const MessageItem: React.FC<{
   );
 };
 
-export default memo(MessageItem);
+export default MessageItem;

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

@@ -112,13 +112,15 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
         style={{ width: INPUT_WIDTH.mini }}
       >
         <span className="text">
-          <span> {args.label}</span>
-          {args.description && (
-            <span className="m-l-5">
-              <Tooltip title={args.description}>
+          {args.description ? (
+            <Tooltip title={args.description}>
+              <span> {args.label}</span>
+              <span className="m-l-5">
                 <InfoCircleOutlined />
-              </Tooltip>
-            </span>
+              </span>
+            </Tooltip>
+          ) : (
+            <span>{args.label}</span>
           )}
         </span>
 
@@ -240,26 +242,14 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
           name="seed"
           rules={[{ required: true }]}
         >
-          <FieldWrapper
-            label={renderLabel({
-              field: 'seed',
-              label: 'Seed',
-              description: intl.formatMessage({
-                id: 'playground.params.seed.tips'
-              })
+          <SealInput.Number
+            label="Seed"
+            min={0}
+            description={intl.formatMessage({
+              id: 'playground.params.seed.tips'
             })}
-            style={{ paddingInline: 0 }}
-            variant="borderless"
-          >
-            <Slider
-              defaultValue={undefined}
-              step={1}
-              tooltip={{ open: false }}
-              value={form.getFieldValue('seed') || undefined}
-              onChange={(val) => handleFieldValueChange(val, 'seed')}
-              style={{ marginBottom: 0, marginTop: 16 }}
-            ></Slider>
-          </FieldWrapper>
+            style={{ width: INPUT_WIDTH.mini }}
+          ></SealInput.Number>
         </Form.Item>
         <Form.Item<ParamsSettingsFormProps>
           name="stop"

src/pages/profile/index.tsx

@@ -116,6 +116,7 @@ const Profile: React.FC = () => {
           >
             <SealInput.Password
               required={true}
+              style={{ width: INPUT_WIDTH.default }}
               label={intl.formatMessage({ id: 'users.password.confirm' })}
             />
           </Form.Item>

src/pages/resources/components/workers.tsx

@@ -217,7 +217,7 @@ const Resources: React.FC = () => {
             return (
               <StatusTag
                 statusValue={{
-                  status: ['Inactive', 'unknown'].includes(record.state)
+                  status: ['Inactive', 'Unknown'].includes(record.state)
                     ? 'inactive'
                     : 'success',
                   text: record.state