style: chat message render markdown by default

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

@@ -1,9 +1,5 @@
 import CopyButton from '@/components/copy-button';
-import {
-  FileMarkdownOutlined,
-  FileTextOutlined,
-  MinusCircleOutlined
-} from '@ant-design/icons';
+import { EditOutlined, MinusCircleOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Tooltip } from 'antd';
 import React, { useCallback } from 'react';
@@ -14,24 +10,19 @@ import UploadImg from '../upload-img';
 interface MessageActionsProps {
   data: MessageItem;
   actions: MessageItemAction[];
-  renderMode?: string;
-  renderModeChange?: (value: string) => void;
+  loading?: boolean;
   updateMessage?: (message: MessageItem) => void;
   onDelete?: () => void;
+  onEdit?: () => void;
 }
 
-const renderOptions = [
-  { label: 'Markdown', value: 'markdown', icon: <FileMarkdownOutlined /> },
-  { label: 'Plain', value: 'plain', icon: <FileTextOutlined /> }
-];
-
 const MessageActions: React.FC<MessageActionsProps> = ({
   actions,
   data,
-  renderMode,
-  renderModeChange,
+  loading,
   updateMessage,
-  onDelete
+  onDelete,
+  onEdit
 }) => {
   const intl = useIntl();
 
@@ -49,30 +40,44 @@ const MessageActions: React.FC<MessageActionsProps> = ({
 
   return (
     <>
-      {actions.length > 1 ? (
+      {actions.length > 1 && !loading ? (
         <div className="actions">
-          {actions.includes('upload') && data.role === Roles.User && (
-            <UploadImg handleUpdateImgList={handleUpdateImgList} />
-          )}
-          {data.content && actions.includes('copy') && (
-            <CopyButton
-              text={data.content}
-              size="small"
-              shape="default"
-              type="text"
-              fontSize="12px"
-            />
-          )}
-          {actions.includes('delete') && (
-            <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
-              <Button
+          <div className="actions-wrap gap-5">
+            {actions.includes('upload') && data.role === Roles.User && (
+              <UploadImg handleUpdateImgList={handleUpdateImgList} />
+            )}
+            {actions.includes('edit') && data.role === Roles.Assistant && (
+              <Tooltip title={intl.formatMessage({ id: 'common.button.edit' })}>
+                <Button
+                  size="small"
+                  type="text"
+                  icon={<EditOutlined />}
+                  onClick={onEdit}
+                />
+              </Tooltip>
+            )}
+            {data.content && actions.includes('copy') && (
+              <CopyButton
+                text={data.content}
                 size="small"
+                shape="default"
                 type="text"
-                onClick={onDelete}
-                icon={<MinusCircleOutlined />}
+                fontSize="12px"
               />
-            </Tooltip>
-          )}
+            )}
+            {actions.includes('delete') && (
+              <Tooltip
+                title={intl.formatMessage({ id: 'common.button.delete' })}
+              >
+                <Button
+                  size="small"
+                  type="text"
+                  onClick={onDelete}
+                  icon={<MinusCircleOutlined />}
+                />
+              </Tooltip>
+            )}
+          </div>
         </div>
       ) : null}
     </>