fix: edit message add image

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

@@ -1,5 +1,4 @@
 import SimpleAudio from '@/components/audio-player/simple-audio';
-import DropDownActions from '@/components/drop-down-actions';
 import IconFont from '@/components/icon-font';
 import UploadAudio from '@/components/upload-audio';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
@@ -11,11 +10,8 @@ import {
 import {
   ClearOutlined,
   CustomerServiceOutlined,
-  LinkOutlined,
-  PictureOutlined,
   SendOutlined,
-  SwapOutlined,
-  UploadOutlined
+  SwapOutlined
 } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
@@ -32,9 +28,9 @@ import { useHotkeys } from 'react-hotkeys-hook';
 import styled from 'styled-components';
 import { Roles } from '../config';
 import { AudioFormat, MessageItem } from '../config/types';
+import useAddImage from '../hooks/use-add-image';
 import '../style/message-input.less';
 import ThumbImg from './thumb-img';
-import UploadImg from './upload-img';
 
 const AudioWrapper = styled.div`
   padding-block: 10px;
@@ -300,39 +296,6 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
       });
     };
 
-    const handleInputImageUrl = (e: any) => {
-      const url = e.target.value;
-      // ends with .png, .jpg, .jpeg
-      const regex = /(https?:\/\/\S+\.(png|jpg|jpeg))/gi;
-      const isValid = regex.test(url);
-      setOpenImgTips(!isValid);
-      if (!isValid) {
-        return;
-      }
-      handleUpdateImgList([
-        {
-          uid: updateUidCount(),
-          dataUrl: e.target.value
-        }
-      ]);
-      setIsFromUrl(false);
-      setOpenImgTips(false);
-    };
-
-    const handleOnEscape = (e: any) => {
-      if (e.key === 'Escape') {
-        setIsFromUrl(false);
-        setOpenImgTips(false);
-      }
-    };
-
-    const handleAddImgFromUrl = () => {
-      setIsFromUrl(true);
-      setTimeout(() => {
-        inputImgRef.current?.focus?.();
-      }, 100);
-    };
-
     const handleUploadAudioChange = async (data: {
       file: any;
       fileList: any[];
@@ -398,6 +361,11 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
       }
     };
 
+    const { ImageURLInput, UploadImageButton } = useAddImage({
+      handleUpdateImgList: handleUpdateImgList,
+      updateUidCount: updateUidCount
+    });
+
     useImperativeHandle(ref, () => ({
       handleInputChange: handleInputChange
     }));
@@ -451,41 +419,9 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                 {checkLabel}
               </Checkbox>
             )}
-            {actions.includes('upload') && message.role === Roles.User && (
-              <DropDownActions
-                placement={'topLeft'}
-                menu={{
-                  items: [
-                    {
-                      label: (
-                        <UploadImg
-                          handleUpdateImgList={handleUpdateImgList}
-                          size="middle"
-                        >
-                          {intl.formatMessage({ id: 'playground.img.upload' })}
-                        </UploadImg>
-                      ),
-                      key: 'upload_image',
-                      icon: <UploadOutlined />
-                    },
-                    {
-                      label: intl.formatMessage({
-                        id: 'playground.uploadImage.url.button'
-                      }),
-                      key: 'add_image_url',
-                      icon: <LinkOutlined />,
-                      onClick: handleAddImgFromUrl
-                    }
-                  ]
-                }}
-              >
-                <Button
-                  type="text"
-                  size="middle"
-                  icon={<PictureOutlined />}
-                ></Button>
-              </DropDownActions>
-            )}
+            {actions.includes('upload') &&
+              message.role === Roles.User &&
+              UploadImageButton}
 
             {actions.includes('upload') && message.role === Roles.User && (
               <UploadAudio
@@ -532,6 +468,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                 ))}
               </>
             )}
+            {ImageURLInput}
           </div>
           <div className="actions">
             {actions.includes('add') && (
@@ -603,26 +540,7 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
             </AudioWrapper>
           )}
         </ImgsWrapper>
-        {isFromUrl && (
-          <Tooltip
-            open={openImgTips}
-            title={intl.formatMessage({
-              id: 'playground.uploadImage.url.invalid'
-            })}
-          >
-            <Input
-              ref={inputImgRef}
-              status={openImgTips ? 'error' : ''}
-              placeholder={intl.formatMessage({
-                id: 'playground.uploadImage.url.holder'
-              })}
-              style={{ width: 360 }}
-              onBlur={handleInputImageUrl}
-              onPressEnter={handleInputImageUrl}
-              onKeyDown={handleOnEscape}
-            ></Input>
-          </Tooltip>
-        )}
+
         <div className="input-box">
           {actions.includes('paste') ? (
             <TextArea