style: playground style

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