style: playground style

src/pages/llmodels/apis/index.ts

@@ -136,6 +136,12 @@ export async function queryHuggingfaceModelDetail(
   });
 }
 
+export async function queryModelScopeModels() {
+  return request(`https://www.modelscope.cn/api/v1/dolphin/models`, {
+    method: 'PUT'
+  });
+}
+
 export async function queryHuggingfaceModels(
   params: {
     search: {

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

@@ -153,7 +153,7 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     paddingInline: 'var(--ant-table-cell-padding-inline)'
                   }}
                 >
-                  <Tooltip title={renderWorkerInfo(item)} trigger={['click']}>
+                  <Tooltip title={renderWorkerInfo(item)}>
                     <span className="m-r-5">{item.name}</span>
                     <InfoCircleOutlined />
                   </Tooltip>

src/pages/login/components/styles.less

@@ -1,6 +1,6 @@
 :local(.login-form-wrapper) {
   margin: 0 auto;
-  border-radius: 8px;
+  border-radius: var(--border-radius-modal);
   width: max-content;
   height: max-content;
   padding: 32px;

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

@@ -1,9 +1,7 @@
-import HotKeys from '@/config/hotkeys';
 import useContainerScroll from '@/hooks/use-container-scorll';
 import { fetchChunkedData, readStreamData } from '@/utils/fetch-chunk-data';
-import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
 import { useIntl, useSearchParams } from '@umijs/max';
-import { Button, Tooltip } from 'antd';
+import { Spin } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
 import {
@@ -14,7 +12,6 @@ import {
   useRef,
   useState
 } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
 import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../apis';
 import { Roles } from '../config';
@@ -25,6 +22,7 @@ import MessageInput from './message-input';
 import MessageContent from './multiple-chat/message-content';
 import SystemMessage from './multiple-chat/system-message';
 import ParamsSettings from './params-settings';
+import ReferenceParams from './reference-params';
 import ViewCodeModal from './view-code-modal';
 
 interface MessageProps {
@@ -43,14 +41,12 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const selectModel = searchParams.get('model') || '';
   const [parameters, setParams] = useState<any>({});
   const [systemMessage, setSystemMessage] = useState('');
-  const [collapsed, setCollapsed] = useState(true);
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
   const [activeIndex, setActiveIndex] = useState(-1);
   const [tokenResult, setTokenResult] = useState<any>(null);
   const [currentIsFocus, setCurrentIsFocus] = useState(false);
   const [collapse, setCollapse] = useState(false);
-  const systemRef = useRef<any>(null);
   const contentRef = useRef<any>('');
   const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
@@ -81,9 +77,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
       }
     };
   });
-  const handleSystemMessageChange = (e: any) => {
-    setSystemMessage(e.target.value);
-  };
 
   const setMessageId = () => {
     messageId.current = messageId.current + 1;
@@ -223,10 +216,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     }
     setMessageId();
     setMessageList([]);
-  };
-
-  const handleView = () => {
-    setShow(true);
+    setTokenResult(null);
   };
 
   const handleSendMessage = (message: { role: string; content: string }) => {
@@ -235,53 +225,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     submitMessage(currentMessage);
   };
 
-  const handleSubmit = () => {
-    submitMessage();
-  };
-
   const handleCloseViewCode = () => {
     setShow(false);
   };
 
-  const handleDelete = (index: number) => {
-    messageList.splice(index, 1);
-    setMessageList([...messageList]);
-  };
-
-  const handleUpdateMessage = (index: number, message: MessageItem) => {
-    messageList[index] = message;
-    setMessageList([...messageList]);
-  };
-
-  const renderLabel = () => {
-    return (
-      <div className="system-message-wrap ">
-        <span className="title">
-          {intl.formatMessage({ id: 'playground.system' })}
-        </span>
-        <Tooltip
-          title={
-            collapsed
-              ? intl.formatMessage({ id: 'common.button.collapse' })
-              : intl.formatMessage({ id: 'common.button.expand' })
-          }
-        >
-          <Button size="small">
-            {collapsed ? <EyeInvisibleOutlined /> : <EyeOutlined />}
-          </Button>
-        </Tooltip>
-      </div>
-    );
-  };
-
-  const handleFocus = () => {
-    setCurrentIsFocus(true);
-  };
-
-  const handleBlur = () => {
-    setCurrentIsFocus(false);
-  };
-
   const handleSelectModel = () => {};
 
   const handlePresetPrompt = (list: { role: string; content: string }[]) => {
@@ -299,95 +246,30 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
     setMessageList(userMsg);
   };
 
-  useHotkeys(
-    HotKeys.SUBMIT,
-    () => {
-      handleSubmit();
-    },
-    {
-      enabled: currentIsFocus && !loading,
-      enableOnFormTags: currentIsFocus && !loading,
-      preventDefault: true
-    }
-  );
-
-  useHotkeys(
-    HotKeys.CREATE.join(','),
-    () => {
-      handleNewMessage();
-    },
-    {
-      enabled: !loading,
-      enableOnFormTags: !loading,
-      preventDefault: true
-    }
-  );
-
-  useHotkeys(
-    HotKeys.CLEAR.join(','),
-    () => {
-      handleClear();
-    },
-    {
-      enabled: !loading,
-      enableOnFormTags: !loading,
-      preventDefault: true
-    }
-  );
-
   return (
     <div className="ground-left-wrapper">
       <div className="ground-left">
-        <div className="message-list-wrap" onWheel={handleContentWheel}>
+        <div
+          className="message-list-wrap"
+          onWheel={handleContentWheel}
+          ref={scroller}
+        >
           <div
             style={{
-              marginBottom: 20,
-              borderRadius: 'var(--border-radius-mini)',
-              overflow: 'hidden'
+              marginBottom: 20
             }}
           >
             <SystemMessage
+              style={{
+                borderRadius: 'var(--border-radius-mini)',
+                overflow: 'hidden'
+              }}
               systemMessage={systemMessage}
               setSystemMessage={setSystemMessage}
             ></SystemMessage>
-            {/* <TransitionWrapper
-            header={renderLabel()}
-            variant="filled"
-            setCollapsed={setCollapsed}
-            ref={systemRef}
-          >
-            <Input.TextArea
-              value={systemMessage}
-              variant="filled"
-              autoSize={true}
-              onFocus={handleFocus}
-              onBlur={handleBlur}
-              style={{ minHeight: 40 }}
-              placeholder={intl.formatMessage({
-                id: 'playground.system.tips'
-              })}
-              onChange={handleSystemMessageChange}
-            ></Input.TextArea>
-          </TransitionWrapper> */}
           </div>
 
           <div className="content">
-            {/* {messageList.map((item, index) => {
-            return (
-              <MessageItem
-                key={item.uid}
-                isFocus={index === activeIndex}
-                islast={index === messageList.length - 1}
-                loading={loading}
-                onDelete={() => handleDelete(index)}
-                updateMessage={(message: MessageItem) =>
-                  handleUpdateMessage(index, message)
-                }
-                onSubmit={handleSubmit}
-                message={item}
-              />
-            );
-          })} */}
             <MessageContent
               spans={{
                 span: 24,
@@ -398,15 +280,21 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
               editable={true}
               loading={loading}
             />
-            {/* {loading && (
-            <Spin>
-              <div style={{ height: '46px' }}></div>
-            </Spin>
-          )} */}
+            {loading && (
+              <Spin size="small">
+                <div style={{ height: '46px' }}></div>
+              </Spin>
+            )}
           </div>
         </div>
+        {tokenResult && (
+          <div style={{ height: 40 }}>
+            <ReferenceParams usage={tokenResult}></ReferenceParams>
+          </div>
+        )}
         <div className="ground-left-footer">
           <MessageInput
+            scope="chat"
             loading={loading}
             disabled={!parameters.model}
             isEmpty={!messageList.length}

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

@@ -1,16 +1,16 @@
 import IconFont from '@/components/icon-font';
-import HotKeys from '@/config/hotkeys';
+import HotKeys, { KeyMap } from '@/config/hotkeys';
 import { platformCall } from '@/utils';
 import {
   ClearOutlined,
   ControlOutlined,
-  EnterOutlined,
+  SendOutlined,
   SwapOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Divider, Input, Select, Tooltip } from 'antd';
 import _ from 'lodash';
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { Roles } from '../config';
 import { MessageItem } from '../config/types';
@@ -77,6 +77,7 @@ interface MessageInputProps {
   showModelSelection?: boolean;
   disabled: boolean;
   isEmpty?: boolean;
+  scope: string;
 }
 
 const MessageInput: React.FC<MessageInputProps> = ({
@@ -91,19 +92,26 @@ const MessageInput: React.FC<MessageInputProps> = ({
   modelList,
   showModelSelection,
   disabled,
-  isEmpty
+  isEmpty,
+  scope
 }) => {
   const { TextArea } = Input;
   const intl = useIntl();
   const platform = platformCall();
   // const [disabled, setDisabled] = useState(false);
   const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
   const [message, setMessage] = useState<CurrentMessage>({
     role: Roles.User,
     content: '',
     imgs: []
   });
   const imgCountRef = useRef(0);
+  const inputRef = useRef<any>(null);
+
+  const isDisabled = useMemo(() => {
+    return disabled ? true : !message.content && isEmpty;
+  }, [disabled, message.content, isEmpty]);
 
   const resetMessage = () => {
     setMessage({
@@ -162,7 +170,7 @@ const MessageInput: React.FC<MessageInputProps> = ({
   };
 
   const handleAddMessage = () => {
-    console.log('add message');
+    console.log('add message=====1');
     addMessage({ ...message });
     resetMessage();
   };
@@ -279,12 +287,42 @@ const MessageInput: React.FC<MessageInputProps> = ({
   );
 
   useHotkeys(
-    HotKeys.SUBMIT.join(','),
+    HotKeys.SUBMIT,
     () => {
       console.log('submit message', loading);
+      inputRef.current?.blur?.();
       handleSendMessage();
     },
-    { enabled: true }
+    {
+      enabled: !loading && !isDisabled,
+      enableOnFormTags: focused,
+      preventDefault: true
+    }
+  );
+  useHotkeys(
+    HotKeys.ADD,
+    (e: any) => {
+      e.preventDefault();
+      e.stopPropagation();
+      console.log('add message', loading);
+      inputRef.current?.blur?.();
+      handleAddMessage();
+    },
+    {
+      enabled: !loading,
+      enableOnFormTags: focused,
+      preventDefault: true
+    }
+  );
+
+  useHotkeys(
+    HotKeys.FOCUS,
+    () => {
+      inputRef.current?.focus?.({
+        cursor: 'end'
+      });
+    },
+    { preventDefault: true }
   );
 
   return (
@@ -357,37 +395,46 @@ const MessageInput: React.FC<MessageInputProps> = ({
             ></Select>
           )}
 
-          <Button type="default" size="middle" onClick={handleAddMessage}>
-            {intl.formatMessage({ id: 'common.button.add' })}
-          </Button>
-          {!loading ? (
-            <Button
-              type="primary"
-              onClick={handleSendMessage}
-              size="middle"
-              disabled={disabled ? true : !message.content && isEmpty}
-            >
-              {intl.formatMessage({ id: 'common.button.submit' })}
-              <span className="m-l-5 opct-7">
-                {platform.isMac ? (
-                  <>
-                    <IconFont type="icon-command"></IconFont> +{' '}
-                    <EnterOutlined />
-                  </>
-                ) : (
-                  <>
-                    CTRL + <EnterOutlined />
-                  </>
-                )}
+          <Tooltip
+            title={
+              <span>
+                [{KeyMap.ADD.textKeybinding}]{' '}
+                {intl.formatMessage({ id: 'common.button.add' })}
               </span>
+            }
+          >
+            <Button type="default" size="middle" onClick={handleAddMessage}>
+              {intl.formatMessage({ id: 'common.button.add' })}
             </Button>
+          </Tooltip>
+          {!loading ? (
+            <Tooltip
+              title={
+                <span>
+                  [{KeyMap.SUBMIT.textKeybinding}]{' '}
+                  {intl.formatMessage({ id: 'common.button.submit' })}
+                </span>
+              }
+            >
+              <Button
+                style={{ width: 46 }}
+                type="primary"
+                onClick={handleSendMessage}
+                size="middle"
+                disabled={isDisabled}
+              >
+                <SendOutlined rotate={0} className="font-size-14" />
+              </Button>
+            </Tooltip>
           ) : (
             <Button
-              style={{ width: 44 }}
+              style={{ width: 46 }}
               type="primary"
               onClick={onStop}
               size="middle"
-              icon={<IconFont type="icon-stop1"></IconFont>}
+              icon={
+                <IconFont type="icon-stop1" className="font-size-14"></IconFont>
+              }
             ></Button>
           )}
         </div>
@@ -396,16 +443,25 @@ const MessageInput: React.FC<MessageInputProps> = ({
         dataList={message.imgs || []}
         onDelete={handleDeleteImg}
       ></ThumbImg>
-      <TextArea
-        placeholder="Type your message here"
-        autoSize={{ minRows: 3, maxRows: 3 }}
-        onChange={(e) => handleInputChange(e.target.value)}
-        value={message.content}
-        size="large"
-        variant="borderless"
-        onKeyDown={handleKeyDown}
-        onPaste={handleOnPaste}
-      ></TextArea>
+      <div className="input-box">
+        <TextArea
+          ref={inputRef}
+          autoSize={{ minRows: 3, maxRows: 3 }}
+          onChange={(e) => handleInputChange(e.target.value)}
+          value={message.content}
+          size="large"
+          variant="borderless"
+          onFocus={() => setFocused(true)}
+          onBlur={() => setFocused(false)}
+          onKeyDown={handleKeyDown}
+          onPaste={handleOnPaste}
+        ></TextArea>
+        {!message.content && !focused && (
+          <span className="holder">
+            Type <kbd>/</kbd> to input message
+          </span>
+        )}
+      </div>
       <PromptModal
         open={open}
         onCancel={() => setOpen(false)}

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

@@ -1,11 +1,10 @@
 import CopyButton from '@/components/copy-button';
-import IconFont from '@/components/icon-font';
-import { CloseOutlined, SwapOutlined, UserOutlined } from '@ant-design/icons';
+import { MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import classNames from 'classnames';
 import _ from 'lodash';
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Roles } from '../../config';
 import { MessageItem } from '../../config/types';
 import '../../style/content-item.less';
@@ -30,9 +29,6 @@ const ContentItem: React.FC<MessageItemProps> = ({
   const intl = useIntl();
   const inputRef = useRef<any>(null);
   const imgCountRef = useRef(0);
-  const [imgList, setImgList] = useState<
-    { uid: number | string; dataUrl: string }[]
-  >([]);
 
   const handleMessageChange = (e: any) => {
     updateMessage?.({
@@ -91,9 +87,7 @@ const ContentItem: React.FC<MessageItemProps> = ({
             dataUrl: img
           };
         });
-        // setImgList((pre) => {
-        //   return [...pre, ...list];
-        // });
+
         updateMessage?.({
           role: data.role,
           content: data.content,
@@ -124,9 +118,6 @@ const ContentItem: React.FC<MessageItemProps> = ({
 
   const handleUpdateImgList = useCallback(
     (list: { uid: number | string; dataUrl: string }[]) => {
-      // setImgList((preList) => {
-      //   return [...preList, ...list];
-      // });
       console.log('list===========', data.imgs, list);
       updateMessage?.({
         role: data.role,
@@ -140,7 +131,6 @@ const ContentItem: React.FC<MessageItemProps> = ({
 
   const handleDeleteImg = (uid: number | string) => {
     const list = _.filter(data.imgs, (item: MessageItem) => item.uid !== uid);
-    // setImgList(list);
     updateMessage?.({
       role: data.role,
       content: data.content,
@@ -185,16 +175,8 @@ const ContentItem: React.FC<MessageItemProps> = ({
   return (
     <div className="content-item">
       <div className="content-item-role">
-        <div className="role" onClick={handleToggleRole}>
-          <span className="m-r-5">
-            {Roles.User === data.role ? (
-              <UserOutlined></UserOutlined>
-            ) : (
-              <IconFont type="icon-AIzhineng"></IconFont>
-            )}
-          </span>
+        <div className="role">
           {intl.formatMessage({ id: `playground.${data.role}` })}
-          <SwapOutlined rotate={90} className="m-l-5" />
         </div>
         <div className="actions">
           {editable && (
@@ -215,7 +197,7 @@ const ContentItem: React.FC<MessageItemProps> = ({
                 size="small"
                 type="text"
                 onClick={onDelete}
-                icon={<CloseOutlined />}
+                icon={<MinusCircleOutlined />}
               ></Button>
             </Tooltip>
           )}

src/pages/playground/components/multiple-chat/index.tsx

@@ -242,6 +242,7 @@ const MultiCompare: React.FC<MultiCompareProps> = ({ modelList }) => {
       </div>
       <div>
         <MessageInput
+          scope="compare"
           loading={isLoading}
           disabled={isLoading || modelSelections.length === 0}
           handleSubmit={handleSubmit}

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

@@ -104,7 +104,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
 
     const submitMessage = async (currentParams: {
       parameters: Record<string, any>;
-      currentMessage: { role: string; content: string };
+      currentMessage: Omit<MessageItem, 'uid'>;
     }) => {
       console.log('currentMessage==========3', currentParams);
       const { parameters, currentMessage } = currentParams;
@@ -278,17 +278,14 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
 
     const handlePresetMessageList = (list: MessageItem[]) => {
       currentMessageRef.current = {} as MessageItem;
-      const messages = _.map(
-        list,
-        (item: { role: string; content: string }) => {
-          setMessageId();
-          return {
-            role: item.role,
-            content: item.content,
-            uid: messageId.current
-          };
-        }
-      );
+      const messages = _.map(list, (item: Omit<MessageItem, 'uid'>) => {
+        setMessageId();
+        return {
+          role: item.role,
+          content: item.content,
+          uid: messageId.current
+        };
+      });
       setTokenResult(null);
       setMessageList(messages);
     };

src/pages/playground/components/multiple-chat/system-message.tsx

@@ -1,15 +1,18 @@
 import { CloseOutlined } from '@ant-design/icons';
-import { Button, Divider, Input } from 'antd';
+import { useIntl } from '@umijs/max';
+import { Button, Divider, Input, Tooltip } from 'antd';
 import React, { useState } from 'react';
 import '../../style/sys-message.less';
 
 interface SystemMessageProps {
+  style?: React.CSSProperties;
   systemMessage: string;
   setSystemMessage: (value: string) => void;
 }
 
 const SystemMessage: React.FC<SystemMessageProps> = (props) => {
-  const { systemMessage, setSystemMessage } = props;
+  const { systemMessage, setSystemMessage, style } = props;
+  const intl = useIntl();
   const systemMessageRef = React.useRef<any>(null);
   const [autoSize, setAutoSize] = useState<{
     minRows: number;
@@ -43,13 +46,16 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
   };
 
   return (
-    <div className="sys-message">
+    <div className="sys-message" style={{ ...style }}>
       {
         <div style={{ display: autoSize.focus ? 'block' : 'none' }}>
+          <span className="system-label">
+            {intl.formatMessage({ id: 'playground.systemMessage' })}
+          </span>
           <Input.TextArea
             ref={systemMessageRef}
             variant="filled"
-            placeholder="Type system message here"
+            placeholder={intl.formatMessage({ id: 'playground.system.tips' })}
             style={{
               borderRadius: '0',
               border: 'none'
@@ -70,20 +76,25 @@ const SystemMessage: React.FC<SystemMessageProps> = (props) => {
       {!autoSize.focus && (
         <div className="sys-content-wrap" onClick={handleFocus}>
           <div className="sys-content">
+            <span className="title">
+              {intl.formatMessage({ id: 'playground.systemMessage' })}
+            </span>
             {systemMessage || (
               <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
-                Type system message here
+                {intl.formatMessage({ id: 'playground.system.tips' })}
               </span>
             )}
           </div>
           {systemMessage && (
-            <Button
-              className="clear-btn"
-              type="text"
-              icon={<CloseOutlined />}
-              size="small"
-              onClick={handleClearSystemMessage}
-            ></Button>
+            <Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
+              <Button
+                className="clear-btn"
+                type="text"
+                icon={<CloseOutlined />}
+                size="small"
+                onClick={handleClearSystemMessage}
+              ></Button>
+            </Tooltip>
           )}
         </div>
       )}

src/pages/playground/components/thumb-img.tsx

@@ -1,4 +1,4 @@
-import { CloseCircleOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, EyeOutlined } from '@ant-design/icons';
 import { Image } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
@@ -25,7 +25,14 @@ const ThumbImg: React.FC<{
         return (
           <span key={item.uid} className="thumb-img">
             <span className="img">
-              <Image src={item.dataUrl} width={56} height={56} />
+              <Image
+                src={item.dataUrl}
+                width={56}
+                height={56}
+                preview={{
+                  mask: <EyeOutlined />
+                }}
+              />
             </span>
 
             <span className="del" onClick={() => handleOnDelete(item.uid)}>

src/pages/playground/index.tsx

@@ -109,9 +109,7 @@ const Playground: React.FC = () => {
   useHotkeys(
     HotKeys.RIGHT.join(','),
     () => {
-      setCollapse((pre) => {
-        return !pre;
-      });
+      groundLeftRef.current?.setCollapse?.();
     },
     {
       preventDefault: true
@@ -136,7 +134,8 @@ const Playground: React.FC = () => {
       }}
       extra={renderExtra()}
       className={classNames('playground-container', {
-        compare: activeKey === 'compare'
+        compare: activeKey === 'compare',
+        chat: activeKey === 'chat'
       })}
     >
       <div className="play-ground">

src/pages/playground/style/content-item.less

@@ -15,10 +15,6 @@
     cursor: pointer;
     padding: 2px 4px;
     border-radius: var(--border-radius-mini);
-
-    &:hover {
-      background-color: var(--ant-color-fill-secondary);
-    }
   }
 
   .actions {

src/pages/playground/style/ground-left.less

@@ -7,6 +7,7 @@
     border-left: 1px solid var(--ant-color-split);
     transition: width 0.3s ease;
     height: calc(100vh - 72px);
+    padding-top: 16px;
     overflow-y: auto;
 
     .box {
@@ -42,6 +43,7 @@
       flex-direction: column;
       padding-inline: var(--layout-content-inlinepadding);
       overflow-y: auto;
+      padding-top: 16px;
 
       .content {
         flex: 1;

src/pages/playground/style/message-input.less

@@ -68,4 +68,24 @@
       justify-content: flex-end;
     }
   }
+
+  .input-box {
+    width: 100%;
+    display: flex;
+    position: relative;
+
+    .holder {
+      pointer-events: none;
+      position: absolute;
+      top: 0;
+      left: 6px;
+      color: var(--ant-color-text-quaternary);
+
+      kbd {
+        border: 1px solid var(--ant-color-border);
+        border-radius: 3px;
+        padding: 0 2px;
+      }
+    }
+  }
 }

src/pages/playground/style/play-ground.less

@@ -78,6 +78,25 @@
     padding-block: 0;
   }
 
+  .ant-page-header {
+    position: relative;
+    height: 72px;
+  }
+
+  &.chat {
+    .ant-page-header {
+      &::after {
+        position: absolute;
+        content: '';
+        left: 32px;
+        right: 32px;
+        bottom: 0;
+        height: 1px;
+        background-color: var(--ant-color-split);
+      }
+    }
+  }
+
   &.compare {
     .ant-pro-page-container-children-container {
       padding-inline: 0;

src/pages/playground/style/sys-message.less

@@ -24,12 +24,26 @@
     top: 6px;
   }
 
+  .system-label {
+    font-weight: var(--font-weight-bold);
+    padding-left: 16px;
+  }
+
   .sys-content {
+    flex: 1;
     height: 38px;
+    width: 300px;
     line-height: 18px;
     padding: 10px 14px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
+    color: var(--ant-color-text-secondary);
+
+    .title {
+      font-weight: var(--font-weight-bold);
+      padding-right: 10px;
+      color: var(--ant-color-text);
+    }
   }
 }

src/pages/playground/style/thumb-img.less

@@ -11,10 +11,6 @@
     overflow: hidden;
     border-radius: var(--border-radius-base);
     cursor: pointer;
-    // background-position: center;
-    // background-size: cover;
-    // background-repeat: no-repeat;
-    // border: 1px solid var(--ant-color-border);
   }
 
   .del {
@@ -26,12 +22,22 @@
     background-color: var(--color-white-1);
     display: none;
     border-radius: 50%;
+    height: 16px;
+    width: 16px;
     overflow: hidden;
+    pointer-events: all;
   }
 
   &:hover {
+    .ant-image .ant-image-mask {
+      opacity: 1;
+      transition: opacity var(--ant-motion-duration-slow);
+    }
+
     .del {
-      display: block;
+      display: flex;
+      justify-content: center;
+      align-items: center;
     }
   }
 }