chore: images create

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

@@ -15,6 +15,7 @@ interface MessageItemProps {
   data: MessageItem;
   editable?: boolean;
   loading?: boolean;
+  showTitle?: boolean;
   actions?: MessageItemAction[];
   updateMessage?: (message: MessageItem) => void;
   onDelete?: () => void;
@@ -26,6 +27,7 @@ const ContentItem: React.FC<MessageItemProps> = ({
   loading,
   data,
   editable,
+  showTitle = true,
   actions = ['upload', 'delete', 'copy']
 }) => {
   const intl = useIntl();
@@ -169,10 +171,16 @@ const ContentItem: React.FC<MessageItemProps> = ({
 
   return (
     <div className="content-item">
-      <div className="content-item-role">
-        <div className="role">
-          {data.title ?? intl.formatMessage({ id: `playground.${data.role}` })}
-        </div>
+      <div
+        className="content-item-role"
+        style={{ display: !showTitle && !actions.length ? 'none' : 'flex' }}
+      >
+        {showTitle && (
+          <div className="role">
+            {data.title ??
+              intl.formatMessage({ id: `playground.${data.role}` })}
+          </div>
+        )}
         <div className="actions">
           {actions.includes('upload') && data.role === Roles.User && (
             <UploadImg handleUpdateImgList={handleUpdateImgList}></UploadImg>

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

@@ -7,6 +7,7 @@ interface MessageContentProps {
   loading?: boolean;
   actions?: MessageItemAction[];
   editable?: boolean;
+  showTitle?: boolean;
   messageList: MessageItem[];
   setMessageList?: (list: any) => void;
 }
@@ -15,6 +16,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
   setMessageList,
   messageList,
   editable,
+  showTitle = true,
   actions = ['upload', 'delete', 'copy']
 }) => {
   const updateMessage = (index: number, message: MessageItem) => {
@@ -39,6 +41,7 @@ const MessageContent: React.FC<MessageContentProps> = ({
               data={item}
               editable={editable}
               actions={actions}
+              showTitle={showTitle}
               onDelete={() => handleDelete(index)}
               updateMessage={(data) => updateMessage(index, data)}
             />

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

@@ -24,7 +24,7 @@ import React, {
 } from 'react';
 import 'simplebar-react/dist/simplebar.min.css';
 import { CHAT_API } from '../../apis';
-import { Roles, generateMessages } from '../../config';
+import { OpenAIViewCode, Roles, generateMessages } from '../../config';
 import CompareContext from '../../config/compare-context';
 import { MessageItem, ModelSelectionItem } from '../../config/types';
 import '../../style/model-item.less';
@@ -452,7 +452,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
         <div className="content" ref={modelScrollRef}>
           <div>
             <MessageContent
-              spans={spans}
               messageList={messageList}
               setMessageList={setMessageList}
               editable={true}
@@ -465,6 +464,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
           </div>
         </div>
         <ViewCodeModal
+          {...OpenAIViewCode.chat}
           open={show}
           payLoad={{
             messages: viewCodeMessage