From 1abaa164f5a50daa297815549232bb736ecc960e Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 13 Sep 2024 10:16:21 +0800
Subject: [PATCH] refactor: playground chat

---
 .../playground/components/ground-left.tsx     |  33 +++-
 .../playground/components/message-input.tsx   |  66 ++++---
 .../multiple-chat/active-models.tsx           |  12 +-
 .../components/multiple-chat/index.tsx        | 185 ++++++++++++++----
 .../components/multiple-chat/model-item.tsx   | 107 +++++++---
 .../playground/components/prompt-modal.tsx    |  83 ++++----
 .../playground/config/compare-context.ts      |   4 +-
 src/pages/playground/config/types.ts          |   5 +
 src/pages/playground/index.tsx                |  15 +-
 src/pages/playground/style/chat-footer.less   |   4 +-
 src/pages/playground/style/ground-left.less   |   4 +-
 src/pages/playground/style/message-input.less |  17 +-
 src/pages/playground/style/model-item.less    |  36 ++++
 src/pages/playground/style/play-ground.less   |   6 +-
 src/pages/playground/style/prompt-modal.less  |   2 +
 15 files changed, 406 insertions(+), 173 deletions(-)
 create mode 100644 src/pages/playground/config/types.ts

diff --git a/src/pages/playground/components/ground-left.tsx b/src/pages/playground/components/ground-left.tsx
index d3babc9d..6c60d008 100644
--- a/src/pages/playground/components/ground-left.tsx
+++ b/src/pages/playground/components/ground-left.tsx
@@ -19,13 +19,13 @@ import { CHAT_API } from '../apis';
 import { Roles } from '../config';
 import '../style/ground-left.less';
 import '../style/system-message-wrap.less';
-import ChatFooter from './chat-footer';
+import MessageInput from './message-input';
 import MessageItem from './message-item';
-import ReferenceParams from './reference-params';
 import ViewCodeModal from './view-code-modal';
 
 interface MessageProps {
   parameters: any;
+  modelList: Global.BaseOption<string>[];
   ref?: any;
 }
 
@@ -36,7 +36,7 @@ interface MessageItemProps {
 }
 
 const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
-  const { parameters } = props;
+  const { parameters, modelList } = props;
   const messageId = useRef<number>(0);
   const [messageList, setMessageList] = useState<MessageItemProps[]>([
     {
@@ -81,11 +81,14 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
   };
-  const handleNewMessage = (role?: any) => {
-    messageList.push({
+  const handleNewMessage = (message?: { role: string; content: string }) => {
+    const newMessage = message || {
       role:
         _.last(messageList)?.role === Roles.User ? Roles.Assistant : Roles.User,
-      content: '',
+      content: ''
+    };
+    messageList.push({
+      ...newMessage,
       uid: messageId.current + 1
     });
     setMessageId();
@@ -234,6 +237,10 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
     setCurrentIsFocus(false);
   };
 
+  const handleSelectModel = () => {};
+
+  const handlePresetPrompt = () => {};
+
   useHotkeys(
     HotKeys.SUBMIT,
     () => {
@@ -324,7 +331,17 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
       </div>
       <div className="ground-left-footer">
-        <ChatFooter
+        <MessageInput
+          loading={loading}
+          handleSubmit={handleSubmit}
+          addMessage={handleNewMessage}
+          handleAbortFetch={handleStopConversation}
+          clearAll={handleClear}
+          setModelSelections={handleSelectModel}
+          presetPrompt={handlePresetPrompt}
+          modelList={modelList}
+        />
+        {/* <ChatFooter
           onClear={handleClear}
           onNewMessage={handleNewMessage}
           onSubmit={handleSubmit}
@@ -334,7 +351,7 @@ const MessageList: React.FC<MessageProps> = forwardRef((props, ref) => {
           selectedModel={parameters.model}
           hasTokenResult={!!tokenResult}
           feedback={<ReferenceParams usage={tokenResult}></ReferenceParams>}
-        ></ChatFooter>
+        ></ChatFooter> */}
       </div>
       <ViewCodeModal
         open={show}
diff --git a/src/pages/playground/components/message-input.tsx b/src/pages/playground/components/message-input.tsx
index f480476c..5dbed3c2 100644
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@@ -5,7 +5,6 @@ import {
   ClearOutlined,
   ControlOutlined,
   PictureOutlined,
-  SendOutlined,
   SwapOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
@@ -59,10 +58,15 @@ interface MessageInputProps {
   modelList: Global.BaseOption<string>[];
   handleSubmit: (params: { role: string; content: string }) => void;
   handleAbortFetch: () => void;
-  setSpans: (value: { span: number; count: number }) => void;
+  updateLayout?: (value: { span: number; count: number }) => void;
   clearAll: () => void;
-  setModelSelections: (modelList: Global.BaseOption<string>[]) => void;
+  setModelSelections: (
+    modelList: (Global.BaseOption<string> & {
+      instanceId: symbol;
+    })[]
+  ) => void;
   presetPrompt: (list: { role: string; content: string }[]) => void;
+  addMessage: (message: { role: string; content: string }) => void;
   loading: boolean;
 }
 
@@ -74,7 +78,8 @@ const MessageInput: React.FC<MessageInputProps> = ({
   loading,
   modelList,
   clearAll,
-  setSpans
+  updateLayout,
+  addMessage
 }) => {
   const { TextArea } = Input;
   const intl = useIntl();
@@ -105,7 +110,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
   };
   const handleLayoutChange = (value: { span: number; count: number }) => {
     console.log('layout change:', value);
-    setSpans(value);
+    updateLayout?.(value);
   };
 
   const handleToggleRole = () => {
@@ -125,7 +130,8 @@ const MessageInput: React.FC<MessageInputProps> = ({
     const list = value?.map?.((val) => {
       return {
         value: val,
-        label: val
+        label: val,
+        instanceId: Symbol(val)
       };
     });
     setModelSelections(list);
@@ -134,6 +140,16 @@ const MessageInput: React.FC<MessageInputProps> = ({
   const handleOpenPrompt = () => {
     setOpen(true);
   };
+
+  const handleAddMessage = () => {
+    console.log('add message');
+    addMessage({ ...message });
+    setMessage({
+      ...message,
+      content: ''
+    });
+  };
+
   useHotkeys(
     HotKeys.SUBMIT.join(','),
     () => {
@@ -167,21 +183,25 @@ const MessageInput: React.FC<MessageInputProps> = ({
             size="middle"
             onClick={handleOpenPrompt}
           ></Button>
-          <Divider type="vertical" style={{ margin: 0 }} />
-          {layoutOptions.map((option) => (
-            <Button
-              key={option.icon}
-              type="text"
-              icon={<IconFont type={option.icon}></IconFont>}
-              size="middle"
-              onClick={() => handleLayoutChange(option.value)}
-            ></Button>
-          ))}
+          {updateLayout && (
+            <>
+              <Divider type="vertical" style={{ margin: 0 }} />
+              {layoutOptions.map((option) => (
+                <Button
+                  key={option.icon}
+                  type="text"
+                  icon={<IconFont type={option.icon}></IconFont>}
+                  size="middle"
+                  onClick={() => handleLayoutChange(option.value)}
+                ></Button>
+              ))}
+            </>
+          )}
         </div>
         <div className="actions">
           <Select
             variant="borderless"
-            style={{ width: 200 }}
+            style={{ width: 180 }}
             placeholder="select models"
             options={modelList}
             mode="multiple"
@@ -190,14 +210,12 @@ const MessageInput: React.FC<MessageInputProps> = ({
             maxTagTextLength={15}
             onChange={handleUpdateModelSelections}
           ></Select>
+          <Button type="default" size="middle" onClick={handleAddMessage}>
+            {intl.formatMessage({ id: 'common.button.add' })}
+          </Button>
           {!loading ? (
-            <Button
-              style={{ width: 44 }}
-              type="primary"
-              onClick={handleSendMessage}
-              size="middle"
-            >
-              <SendOutlined />
+            <Button type="primary" onClick={handleSendMessage} size="middle">
+              {intl.formatMessage({ id: 'common.button.submit' })}
             </Button>
           ) : (
             <Button
diff --git a/src/pages/playground/components/multiple-chat/active-models.tsx b/src/pages/playground/components/multiple-chat/active-models.tsx
index 743366e6..37570f11 100644
--- a/src/pages/playground/components/multiple-chat/active-models.tsx
+++ b/src/pages/playground/components/multiple-chat/active-models.tsx
@@ -1,5 +1,6 @@
 import { Col, Row } from 'antd';
 import React from 'react';
+import { ModelSelectionItem } from '../../config/types';
 import ModelItem from './model-item';
 
 interface ActiveModelsProps {
@@ -7,8 +8,8 @@ interface ActiveModelsProps {
     span: number;
     count: number;
   };
-  modelSelections: Global.BaseOption<string>[];
-  setModelRefs: (modelname: string, value: React.MutableRefObject<any>) => void;
+  modelSelections: ModelSelectionItem[];
+  setModelRefs: (modelname: symbol, value: React.MutableRefObject<any>) => void;
 }
 
 const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
@@ -16,12 +17,13 @@ const ActiveModels: React.FC<ActiveModelsProps> = (props) => {
   return (
     <Row gutter={[16, 16]} style={{ height: '100%' }}>
       {modelSelections.map((model, index) => (
-        <Col span={spans.span} key={model.value}>
+        <Col span={spans.span} key={`${model.value || 'empty'}-${model.uid}`}>
           <ModelItem
-            key={model.value}
+            key={`${model.value || 'empty'}-${model.uid}`}
             ref={(el: React.MutableRefObject<any>) =>
-              setModelRefs(model.value, el)
+              setModelRefs(model.instanceId, el)
             }
+            instanceId={model.instanceId}
             modelList={modelSelections}
             model={model.value}
           />
diff --git a/src/pages/playground/components/multiple-chat/index.tsx b/src/pages/playground/components/multiple-chat/index.tsx
index 2dfd150f..2a8ac081 100644
--- a/src/pages/playground/components/multiple-chat/index.tsx
+++ b/src/pages/playground/components/multiple-chat/index.tsx
@@ -1,22 +1,23 @@
 import _ from 'lodash';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CompareContext from '../../config/compare-context';
+import { ModelSelectionItem } from '../../config/types';
 import '../../style/multiple-chat.less';
 import MessageInput from '../message-input';
 import ActiveModels from './active-models';
 
 interface MultiCompareProps {
-  modelList: Global.BaseOption<string>[];
+  modelList: (Global.BaseOption<string> & { type?: string })[];
   spans?: number;
 }
 
 const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
-  const [loadingStatus, setLoadingStatus] = useState<Record<string, boolean>>(
+  const [loadingStatus, setLoadingStatus] = useState<Record<symbol, boolean>>(
     {}
   );
-  const [modelSelections, setModelSelections] = useState<
-    Global.BaseOption<string>[]
-  >([]);
+  const [modelSelections, setModelSelections] = useState<ModelSelectionItem[]>(
+    []
+  );
   const [globalParams, setGlobalParams] = useState<Record<string, any>>({
     seed: null,
     stop: null,
@@ -31,69 +32,89 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
     span: 12,
     count: 2
   });
+  const cacheModelInstanceList = useRef<any[]>([]);
+  const modelsCounterMap = useRef<Record<string, number>>({});
   const modelRefs = useRef<any>({});
   const boxHeight = 'calc(100vh - 72px)';
 
   const isLoading = useMemo(() => {
-    console.log('loadingStatus========2', loadingStatus);
-    return _.keys(loadingStatus).some(
-      (modelname: string) => loadingStatus[modelname]
-    );
+    const modelRefList = Object.getOwnPropertySymbols(loadingStatus);
+    return modelRefList.some((instanceId: symbol) => loadingStatus[instanceId]);
   }, [loadingStatus]);
 
-  useEffect(() => {
-    const list = modelList.slice?.(0, spans.count);
-    setModelSelections(list);
-  }, [modelList, spans.count]);
-
-  useEffect(() => {
-    modelRefs.current = {};
-    modelSelections.forEach((item) => {
-      modelRefs.current[item.value] = null;
+  const modelFullList = useMemo(() => {
+    return modelList.map((item) => {
+      return {
+        ...item,
+        disabled: modelSelections.some((model) => model.value === item.value)
+      };
     });
-  }, [modelSelections]);
+  }, [modelList, modelSelections]);
+
+  const setModelCounter = (model: string) => {
+    modelsCounterMap.current[model] = _.add(modelsCounterMap.current[model], 1);
+    return modelsCounterMap.current[model];
+  };
+
+  const pruneInstanceSymbol = (instanceId: symbol) => {
+    modelRefs.current[instanceId] = null;
+    loadingStatus[instanceId] = false;
+  };
 
   const handleSubmit = (currentMessage: { role: string; content: string }) => {
-    const modelRefList = _.keys(modelRefs.current);
-    modelRefList.forEach(async (modelname: any, index: number) => {
-      const ref = modelRefs.current[modelname];
+    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
+    modelRefList.forEach((instanceId: symbol) => {
+      const ref = modelRefs.current[instanceId];
       ref?.submit(currentMessage);
     });
   };
 
+  const handleAddMessage = (message: { role: string; content: string }) => {
+    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
+    modelRefList.forEach((instanceId: symbol) => {
+      const ref = modelRefs.current[instanceId];
+      ref?.setMessageList((preList: any) => {
+        return [...preList, { ...message }];
+      });
+    });
+  };
+
   const handleAbortFetch = () => {
-    _.keys(modelRefs.current).forEach((modelname: string) => {
-      const ref = modelRefs.current[modelname];
+    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
+    modelRefList.forEach((instanceId: symbol) => {
+      const ref = modelRefs.current[instanceId];
       ref?.abortFetch();
     });
   };
 
   const setModelRefs = useCallback(
-    (modelname: string, el: React.MutableRefObject<any>) => {
-      modelRefs.current[modelname] = el;
+    (instanceId: symbol, el: React.MutableRefObject<any>) => {
+      modelRefs.current[instanceId] = el;
     },
     []
   );
 
-  const handleSetLoadingStatus = (modeName: string, status: boolean) => {
+  const handleSetLoadingStatus = (instanceId: symbol, status: boolean) => {
     setLoadingStatus((preStatus) => {
       const newState = { ...preStatus };
-      newState[modeName] = status;
+      newState[instanceId] = status;
       return newState;
     });
   };
 
   const handleClearAll = () => {
-    _.keys(modelRefs.current).forEach((modelname: string) => {
-      const ref = modelRefs.current[modelname];
+    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
+    modelRefList.forEach((instanceId: symbol) => {
+      const ref = modelRefs.current[instanceId];
       ref?.clear();
     });
   };
 
-  const handleDeleteModel = (modelname: string) => {
+  const handleDeleteModel = (instanceId: symbol) => {
     const newModelList = modelSelections.filter(
-      (model) => model.value !== modelname
+      (model) => model.instanceId !== instanceId
     );
+    pruneInstanceSymbol(instanceId);
     const span = Math.floor(24 / (24 / spans.span - 1));
     setSpans({
       span,
@@ -102,27 +123,108 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
     setModelSelections(newModelList);
   };
 
-  const handleUpdateModelSelections = (list: Global.BaseOption<string>[]) => {
-    // set spans.span
-    const span = Math.floor(24 / list.length);
+  const handleUpdateModelSelections = (
+    list: (Global.BaseOption<string> & { instanceId: symbol })[]
+  ) => {
+    const newList = list.map((item) => {
+      return {
+        ...item,
+        uid: setModelCounter(item.value),
+        instanceId: Symbol(item.value)
+      };
+    });
+    const updateList = _.concat(modelSelections, newList);
+    const span = Math.floor(24 / updateList.length);
     setSpans({
       span: span < 8 ? 8 : span,
       count: spans.count
     });
-    setModelSelections(list);
+    setModelSelections(updateList);
   };
 
   const handlePresetPrompt = (list: { role: string; content: string }[]) => {
     const sysMsg = list.filter((item) => item.role === 'system');
     const userMsg = list.filter((item) => item.role === 'user');
-    const modelRefList = _.keys(modelRefs.current);
-    modelRefList.forEach(async (modelname: any) => {
-      const ref = modelRefs.current[modelname];
+
+    const modelRefList = Object.getOwnPropertySymbols(modelRefs.current);
+    modelRefList.forEach(async (instanceId: symbol) => {
+      const ref = modelRefs.current[instanceId];
       ref?.presetPrompt(userMsg);
       ref?.setSystemMessage(_.get(sysMsg, '0.content', ''));
     });
   };
 
+  const handleUpdateModelList = (spans: { span: number; count: number }) => {
+    const list = modelSelections;
+    // less than count
+    if (list.length < spans.count) {
+      const restCount = spans.count - list.length;
+      const restList = _.slice(modelList, list.length, list.length + restCount);
+      const resultList = Array.from(
+        { length: restCount - restList.length },
+        (_, index) => {
+          return {
+            label: '',
+            value: '',
+            type: 'empty'
+          };
+        }
+      );
+      const newResultList = _.concat(restList, resultList).map((item: any) => {
+        return {
+          ...item,
+          uid: setModelCounter(item.value || 'empty'),
+          instanceId:
+            item.type === 'empty' ? Symbol('empty') : Symbol(item.value)
+        };
+      });
+      setModelSelections(_.concat(list, newResultList));
+      return;
+    }
+    // more than count
+    if (list.length > spans.count) {
+      const newList = list.slice(0, spans.count);
+      setModelSelections(newList);
+      return;
+    }
+  };
+
+  const updateLayout = (value: { span: number; count: number }) => {
+    setSpans(value);
+    handleUpdateModelList(value);
+  };
+
+  useEffect(() => {
+    modelRefs.current = {};
+    let list = _.take(modelList, spans.count);
+    if (list.length < spans.count && list.length > 0) {
+      const restCount = spans.count - list.length;
+      const restList = Array.from({ length: restCount }, (_, index) => {
+        return {
+          label: '',
+          value: '',
+          type: 'empty'
+        };
+      });
+      list = _.concat(list, restList);
+    }
+    const resultList = list.map((item: any) => {
+      return {
+        ...item,
+        uid: setModelCounter(item.value || 'empty'),
+        instanceId: item.type === 'empty' ? Symbol('empty') : Symbol(item.value)
+      };
+    });
+    setModelSelections(resultList);
+  }, [modelList]);
+
+  // useEffect(() => {
+  //   modelRefs.current = {};
+  //   modelSelections.forEach((item) => {
+  //     modelRefs.current[item.instanceId] = null;
+  //   });
+  // }, [modelSelections]);
+
   return (
     <div className="multiple-chat" style={{ height: boxHeight }}>
       <div className="chat-list">
@@ -147,12 +249,13 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
         <MessageInput
           loading={isLoading}
           handleSubmit={handleSubmit}
+          addMessage={handleAddMessage}
           handleAbortFetch={handleAbortFetch}
           clearAll={handleClearAll}
-          setSpans={setSpans}
+          updateLayout={updateLayout}
           setModelSelections={handleUpdateModelSelections}
           presetPrompt={handlePresetPrompt}
-          modelList={modelList}
+          modelList={modelFullList}
         />
       </div>
     </div>
diff --git a/src/pages/playground/components/multiple-chat/model-item.tsx b/src/pages/playground/components/multiple-chat/model-item.tsx
index a9d7311e..f7c515ba 100644
--- a/src/pages/playground/components/multiple-chat/model-item.tsx
+++ b/src/pages/playground/components/multiple-chat/model-item.tsx
@@ -23,6 +23,7 @@ import React, {
   useContext,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState
 } from 'react';
@@ -30,6 +31,7 @@ import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../../apis';
 import { Roles } from '../../config';
 import CompareContext from '../../config/compare-context';
+import { ModelSelectionItem } from '../../config/types';
 import '../../style/model-item.less';
 import ParamsSettings from '../params-settings';
 import ReferenceParams from '../reference-params';
@@ -38,7 +40,8 @@ import MessageContent from './message-content';
 
 interface ModelItemProps {
   model: string;
-  modelList: Global.BaseOption<string>[];
+  modelList: ModelSelectionItem[];
+  instanceId: symbol;
   ref: any;
 }
 
@@ -49,7 +52,7 @@ interface MessageItemProps {
 }
 
 const ModelItem: React.FC<ModelItemProps> = forwardRef(
-  ({ model, modelList }, ref) => {
+  ({ model, modelList, instanceId }, ref) => {
     const {
       spans,
       globalParams,
@@ -63,7 +66,8 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const [autoSize, setAutoSize] = useState<{
       minRows: number;
       maxRows: number;
-    }>({ minRows: 1, maxRows: 1 });
+      focus: boolean;
+    }>({ minRows: 1, maxRows: 1, focus: false });
     const [systemMessage, setSystemMessage] = useState<string>('');
     const [params, setParams] = useState<Record<string, any>>({});
     const [loading, setLoading] = useState(false);
@@ -74,6 +78,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     const contentRef = useRef<any>('');
     const controllerRef = useRef<any>(null);
     const currentMessageRef = useRef<MessageItemProps>({} as MessageItemProps);
+    const systemMessageRef = useRef<any>(null);
 
     const setMessageId = () => {
       messageId.current = messageId.current + 1;
@@ -81,7 +86,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
 
     const abortFetch = () => {
       controllerRef.current?.abort?.();
-      setLoadingStatus(params.model, false);
+      setLoadingStatus(instanceId, false);
     };
 
     const joinMessage = (chunk: any) => {
@@ -118,7 +123,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       const { parameters, currentMessage } = currentParams;
       if (!parameters.model) return;
       try {
-        setLoadingStatus(parameters.model, true);
+        setLoadingStatus(instanceId, true);
         setMessageId();
 
         controllerRef.current?.abort?.();
@@ -179,16 +184,15 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         await readStreamData(reader, decoder, (chunk: any) => {
           joinMessage(chunk);
         });
-        setLoadingStatus(params.model, false);
+        setLoadingStatus(instanceId, false);
       } catch (error) {
-        console.log('error=====', error);
-        setLoadingStatus(params.model, false);
+        setLoadingStatus(instanceId, false);
       }
     };
     const handleDropdownAction = useCallback(({ key }: { key: string }) => {
-      console.log('key:', key);
       if (key === 'clear') {
         setMessageList([]);
+        setSystemMessage('');
       }
       if (key === 'viewCode') {
         setShow(true);
@@ -239,7 +243,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       setTokenResult(null);
       setSystemMessage('');
       currentMessageRef.current = {} as MessageItemProps;
+      console.log('clear message', systemMessage);
     };
+
     const handleCloseViewCode = () => {
       setShow(false);
     };
@@ -270,23 +276,40 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
     };
 
     const handleDelete = () => {
-      handleDeleteModel(params.model);
+      handleDeleteModel(instanceId);
     };
 
     const handleFocus = () => {
       setAutoSize({
         minRows: 4,
-        maxRows: 4
+        maxRows: 4,
+        focus: true
       });
+      setTimeout(() => {
+        systemMessageRef.current?.focus?.({
+          cursor: 'end'
+        });
+      }, 100);
     };
 
     const handleBlur = () => {
       setAutoSize({
         minRows: 1,
-        maxRows: 1
+        maxRows: 1,
+        focus: false
       });
     };
 
+    const handleClearSystemMessage = () => {
+      setSystemMessage('');
+    };
+
+    const modelOptions = useMemo(() => {
+      return modelList.filter((item) => {
+        return item.type !== 'empty';
+      });
+    }, [modelList]);
+
     useEffect(() => {
       console.log('globalParams:', globalParams.model, globalParams);
       setParams({
@@ -319,8 +342,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <div className="header">
           <span className="title">
             <Select
+              style={{ minWidth: '100px' }}
               variant="borderless"
-              options={modelList}
+              options={modelOptions}
               onChange={handleModelChange}
               value={params.model}
             ></Select>
@@ -390,19 +414,50 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
             ></Button>
           </span>
         </div>
-        <div>
-          <Input.TextArea
-            variant="filled"
-            placeholder="Type system message here"
-            style={{ borderRadius: '0', border: 'none' }}
-            value={systemMessage}
-            autoSize={autoSize}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            allowClear={false}
-            onChange={(e) => setSystemMessage(e.target.value)}
-          ></Input.TextArea>
-          <Divider style={{ margin: '0' }}></Divider>
+        <div className="sys-message">
+          {
+            <div style={{ display: autoSize.focus ? 'block' : 'none' }}>
+              <Input.TextArea
+                ref={systemMessageRef}
+                variant="filled"
+                placeholder="Type system message here"
+                style={{
+                  borderRadius: '0',
+                  border: 'none'
+                }}
+                value={systemMessage}
+                autoSize={{
+                  minRows: autoSize.minRows,
+                  maxRows: autoSize.maxRows
+                }}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                allowClear={false}
+                onChange={(e) => setSystemMessage(e.target.value)}
+              ></Input.TextArea>
+              <Divider style={{ margin: '0' }}></Divider>
+            </div>
+          }
+          {!autoSize.focus && (
+            <div className="sys-content-wrap" onClick={handleFocus}>
+              <div className="sys-content">
+                {systemMessage || (
+                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                    Type system message here
+                  </span>
+                )}
+              </div>
+              {systemMessage && (
+                <Button
+                  className="clear-btn"
+                  type="text"
+                  icon={<CloseOutlined />}
+                  size="small"
+                  onClick={handleClearSystemMessage}
+                ></Button>
+              )}
+            </div>
+          )}
         </div>
         <div className="content">
           <MessageContent
diff --git a/src/pages/playground/components/prompt-modal.tsx b/src/pages/playground/components/prompt-modal.tsx
index 062531bd..3c86bb23 100644
--- a/src/pages/playground/components/prompt-modal.tsx
+++ b/src/pages/playground/components/prompt-modal.tsx
@@ -1,6 +1,8 @@
 import { useIntl } from '@umijs/max';
 import { Button, Modal, Typography } from 'antd';
 import React from 'react';
+import SimpleBar from 'simplebar-react';
+import 'simplebar-react/dist/simplebar.min.css';
 import promptList from '../config/prompt';
 import '../style/prompt-modal.less';
 
@@ -33,46 +35,55 @@ const AddWorker: React.FC<ViewModalProps> = (props) => {
       keyboard={false}
       width={660}
       styles={{
-        body: {
-          maxHeight: '550px',
-          overflow: 'auto'
+        content: {
+          padding: '0'
+        },
+        header: {
+          padding: 'var(--ant-modal-content-padding)',
+          marginBottom: '0'
         }
       }}
       footer={null}
     >
-      <div className="prompt-wrapper">
-        {promptList.map((item, index) => {
-          return (
-            <div key={index} className="prompt-item">
-              <h3 className="title">
-                <span className="text">{item.title}</span>
-                <Button
-                  size="middle"
-                  type="default"
-                  onClick={() => handleSelect(item)}
-                >
-                  Use
-                </Button>
-              </h3>
-              {item.data.map((data, i) => {
-                return (
-                  <div key={i} className="data-item">
-                    <span className="role">{data.role}</span>
-                    <span className="prompt">
-                      <Typography.Paragraph
-                        style={{ margin: 0 }}
-                        ellipsis={{ rows: 2, expandable: true, symbol: 'more' }}
-                      >
-                        {data.content}
-                      </Typography.Paragraph>
-                    </span>
-                  </div>
-                );
-              })}
-            </div>
-          );
-        })}
-      </div>
+      <SimpleBar style={{ maxHeight: '550px' }}>
+        <div className="prompt-wrapper">
+          {promptList.map((item, index) => {
+            return (
+              <div key={index} className="prompt-item">
+                <h3 className="title">
+                  <span className="text">{item.title}</span>
+                  <Button
+                    size="middle"
+                    type="default"
+                    onClick={() => handleSelect(item)}
+                  >
+                    Use
+                  </Button>
+                </h3>
+                {item.data.map((data, i) => {
+                  return (
+                    <div key={i} className="data-item">
+                      <span className="role">{data.role}</span>
+                      <span className="prompt">
+                        <Typography.Paragraph
+                          style={{ margin: 0 }}
+                          ellipsis={{
+                            rows: 2,
+                            expandable: true,
+                            symbol: 'more'
+                          }}
+                        >
+                          {data.content}
+                        </Typography.Paragraph>
+                      </span>
+                    </div>
+                  );
+                })}
+              </div>
+            );
+          })}
+        </div>
+      </SimpleBar>
     </Modal>
   );
 };
diff --git a/src/pages/playground/config/compare-context.ts b/src/pages/playground/config/compare-context.ts
index 190f4a89..2dd6df9c 100644
--- a/src/pages/playground/config/compare-context.ts
+++ b/src/pages/playground/config/compare-context.ts
@@ -8,10 +8,10 @@ interface CompareContextProps {
   systemMessage?: string;
   globalParams: Record<string, any>;
   loadingStatus: Record<string, boolean>;
-  handleDeleteModel: (modelname: string) => void;
+  handleDeleteModel: (instanceId: symbol) => void;
   setSystemMessage?: (message: string) => void;
   setGlobalParams: (value: Record<string, any>) => void;
-  setLoadingStatus: (modeName: string, status: boolean) => void;
+  setLoadingStatus: (instanceId: symbol, status: boolean) => void;
 }
 const CompareContext = React.createContext<CompareContextProps>(
   {} as CompareContextProps
diff --git a/src/pages/playground/config/types.ts b/src/pages/playground/config/types.ts
new file mode 100644
index 00000000..04730869
--- /dev/null
+++ b/src/pages/playground/config/types.ts
@@ -0,0 +1,5 @@
+export interface ModelSelectionItem extends Global.BaseOption<string> {
+  uid: number;
+  instanceId: symbol;
+  type?: string;
+}
diff --git a/src/pages/playground/index.tsx b/src/pages/playground/index.tsx
index 1753163d..d790d90c 100644
--- a/src/pages/playground/index.tsx
+++ b/src/pages/playground/index.tsx
@@ -3,7 +3,7 @@ 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 { Button, Divider, Segmented, Space, Tabs, TabsProps } from 'antd';
+import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import { useCallback, useEffect, useRef, useState } from 'react';
@@ -45,7 +45,11 @@ const Playground: React.FC = () => {
       key: 'chat',
       label: 'Chat',
       children: (
-        <GroundLeft parameters={params} ref={groundLeftRef}></GroundLeft>
+        <GroundLeft
+          parameters={params}
+          ref={groundLeftRef}
+          modelList={modelList}
+        ></GroundLeft>
       )
     },
     {
@@ -146,13 +150,6 @@ const Playground: React.FC = () => {
               collapse: collapse
             })}
           >
-            <div
-              className={classNames('divider-line', {
-                collapse: collapse
-              })}
-            >
-              <Divider type="vertical" />
-            </div>
             <div className={classNames('params')}>
               <div
                 className={classNames('params-box', {
diff --git a/src/pages/playground/style/chat-footer.less b/src/pages/playground/style/chat-footer.less
index 4c1363d7..b06c93b9 100644
--- a/src/pages/playground/style/chat-footer.less
+++ b/src/pages/playground/style/chat-footer.less
@@ -1,6 +1,6 @@
 .chat-footer {
-  display: flex;
-  align-items: center;
+  // display: flex;
+  // align-items: center;
   padding-block: 10px;
   padding-right: 32px;
 }
diff --git a/src/pages/playground/style/ground-left.less b/src/pages/playground/style/ground-left.less
index cc3c48e7..fc672099 100644
--- a/src/pages/playground/style/ground-left.less
+++ b/src/pages/playground/style/ground-left.less
@@ -3,11 +3,11 @@
   justify-content: space-between;
   flex-direction: column;
   position: relative;
-  height: calc(100vh - 136px);
+  height: calc(100vh - 72px);
 
   .message-list-wrap {
     max-height: calc(100vh - 152px);
     overflow-y: auto;
-    padding-right: 32px;
+    padding-inline: var(--layout-content-inlinepadding);
   }
 }
diff --git a/src/pages/playground/style/message-input.less b/src/pages/playground/style/message-input.less
index 5b6122df..a7acf421 100644
--- a/src/pages/playground/style/message-input.less
+++ b/src/pages/playground/style/message-input.less
@@ -33,25 +33,10 @@
     .actions {
       display: flex;
       align-items: center;
-      gap: 5px;
+      gap: 10px;
     }
   }
 
-  &:focus-within {
-    // border-color: var(--ant-input-active-border-color);
-    // box-shadow: var(--ant-input-active-shadow);
-    // background-color: var(--color-white-1);
-    // transition: all 0.2s ease;
-    // &:hover {
-    //   background-color: var(--color-white-1);
-    // }
-  }
-
-  &:hover {
-    // background: var(--ant-color-fill-secondary);
-    // transition: background 0.2s ease;
-  }
-
   textarea {
     padding-inline: 6px 0;
     padding-block: 0;
diff --git a/src/pages/playground/style/model-item.less b/src/pages/playground/style/model-item.less
index 2f3f4981..f88ccfd8 100644
--- a/src/pages/playground/style/model-item.less
+++ b/src/pages/playground/style/model-item.less
@@ -14,6 +14,42 @@
     border-bottom: 1px solid var(--ant-color-border);
   }
 
+  .sys-message {
+    position: relative;
+  }
+
+  .sys-content-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: var(--ant-color-fill-tertiary);
+    padding-right: 20px;
+    cursor: pointer;
+
+    &:hover {
+      .clear-btn {
+        display: block;
+      }
+    }
+  }
+
+  .clear-btn {
+    display: none;
+    position: absolute;
+    right: 6px;
+    top: 6px;
+  }
+
+  .sys-content {
+    height: 36px;
+    line-height: 20px;
+    padding: 8px 14px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   .content {
     flex: 1;
     padding: 16px;
diff --git a/src/pages/playground/style/play-ground.less b/src/pages/playground/style/play-ground.less
index d0636bd6..bd01b7da 100644
--- a/src/pages/playground/style/play-ground.less
+++ b/src/pages/playground/style/play-ground.less
@@ -36,7 +36,7 @@
 
   .params {
     overflow: hidden;
-    height: calc(100vh - 136px);
+    height: calc(100vh - 72px);
 
     .collapse {
       width: 0;
@@ -50,6 +50,7 @@
     width: 390px;
     overflow-y: auto;
     overflow-x: hidden;
+    border-left: 1px solid var(--ant-color-split);
 
     &.collapse {
       padding-inline: 0;
@@ -73,7 +74,8 @@
 
 .playground-container {
   .ant-pro-page-container-children-container {
-    padding-right: 0;
+    padding-inline: 0;
+    padding-block: 0;
   }
 
   &.compare {
diff --git a/src/pages/playground/style/prompt-modal.less b/src/pages/playground/style/prompt-modal.less
index fe70885e..f1c3044a 100644
--- a/src/pages/playground/style/prompt-modal.less
+++ b/src/pages/playground/style/prompt-modal.less
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  padding: var(--ant-modal-content-padding);
 
   .title {
     display: flex;
@@ -10,6 +11,7 @@
 
     .text {
       font-weight: var(--font-weight-bold);
+      font-size: var(--font-size-base);
     }
   }