refactor: embeddding input list

src/components/alert-info/index.tsx

@@ -46,4 +46,4 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
   );
 };
 
-export default React.memo(AlertInfo);
+export default AlertInfo;

src/components/auto-image/single-image.tsx

@@ -15,10 +15,10 @@ interface SingleImageProps {
   maxWidth?: number;
   dataUrl: string;
   label?: React.ReactNode;
-  uid: number;
+  uid: number | string;
   preview?: boolean;
   autoSize?: boolean;
-  onDelete: (uid: number) => void;
+  onDelete: (uid: number | string) => void;
   onClick?: (item: any) => void;
   autoBgColor?: boolean;
   editable?: boolean;
@@ -94,7 +94,7 @@ const SingleImage: React.FC<SingleImageProps> = (props) => {
 
   const handleOnLoad = React.useCallback(async () => {}, []);
 
-  const handleOnDelete = (uid: number, e: any) => {
+  const handleOnDelete = (uid: number | string, e: any) => {
     e.stopPropagation();
     onDelete(uid);
   };

src/components/seal-form/row-textarea.tsx

@@ -1,4 +1,7 @@
-import { CloseOutlined } from '@ant-design/icons';
+import SmallCloseButton from '@/pages/_components/small-close-button';
+import ThumbImg from '@/pages/playground/components/thumb-img';
+import useAddImage from '@/pages/playground/hooks/use-add-image';
+import { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import classNames from 'classnames';
@@ -7,12 +10,20 @@ import './styles/row-textarea.less';
 
 interface SystemMessageProps {
   style?: React.CSSProperties;
-  value: string;
+  data: {
+    text: string;
+    uid: number | string;
+    name: string;
+    dataUrl?: string;
+  };
   placeholder?: string;
   label?: React.ReactNode;
   height?: number;
+  onUploadImage?: (list: { uid: number | string; dataUrl: string }[]) => void;
+  onDeleteImage?: () => void;
   onChange: (e: any) => void;
   onPaste?: (e: any) => void;
+  onDelete?: () => void;
   onSelect?: (data: {
     start: number;
     end: number;
@@ -23,9 +34,12 @@ interface SystemMessageProps {
 
 const RowTextarea: React.FC<SystemMessageProps> = (props) => {
   const {
-    value,
+    data,
+    onDeleteImage,
+    onUploadImage,
     onChange,
     onSelect,
+    onDelete,
     style,
     label,
     placeholder,
@@ -76,8 +90,8 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
     const start = e.target.selectionStart;
     const end = e.target.selectionEnd;
 
-    const beforeText = value.substring(0, start);
+    const beforeText = data.text.substring(0, start);
-    const afterText = value.substring(end, value.length);
+    const afterText = data.text.substring(end, data.text.length);
     onSelect?.({
       start,
       end,
@@ -86,64 +100,130 @@ const RowTextarea: React.FC<SystemMessageProps> = (props) => {
     });
   };
 
+  const handleUploadImage = (
+    list: { uid: number | string; dataUrl: string }[]
+  ) => {
+    onUploadImage?.(list);
+  };
+
+  const { ImageURLInput, UploadImageButton, isFromUrl, dropDownOpen } =
+    useAddImage({
+      size: 'small',
+      inputProps: {
+        variant: 'filled'
+      },
+      handleUpdateImgList: handleUploadImage,
+      updateUidCount: () => `img-${Date.now()}`
+    });
+
+  const expanded = autoSize.focus || !!data.dataUrl || isFromUrl;
+  // const expanded = true;
+
+  console.log('expanded===========', expanded);
+
   return (
     <div
-      className={classNames('row-textarea', {
+      className={classNames('row-textarea-wrapper', {
-        focus: autoSize.focus
+        dropDownOpen: dropDownOpen,
+        expanded: expanded
       })}
-      style={{ ...style }}
     >
-      {
+      <div
+        className={classNames('row-textarea', {
+          expanded: expanded
+        })}
+        style={{ ...style }}
+      >
         <div
-          style={{ display: autoSize.focus ? 'block' : 'none' }}
+          style={{
+            display: expanded ? 'block' : 'none'
+          }}
           className="textarea-wrapper"
         >
           {label && <span className="textarea-label">{label}</span>}
+          {data.dataUrl && (
+            <div style={{ padding: 8 }}>
+              <ThumbImg
+                editable
+                dataList={
+                  data.dataUrl ? [{ uid: data.uid, dataUrl: data.dataUrl }] : []
+                }
+                onDelete={onDeleteImage}
+              />
+            </div>
+          )}
+
           <Input.TextArea
             className="custome-scrollbar"
+            allowClear
             ref={rowTextAreaRef}
             placeholder={placeholder}
             style={{
               borderRadius: '0',
-              border: 'none'
+              border: 'none',
-            }}
+              width: '100%',
-            value={value}
+              boxShadow: 'none'
-            autoSize={{
-              minRows: autoSize.minRows,
-              maxRows: autoSize.maxRows
             }}
+            value={data.text}
+            autoSize={
+              expanded
+                ? {
+                    minRows: 5,
+                    maxRows: 5
+                  }
+                : { minRows: autoSize.minRows, maxRows: autoSize.maxRows }
+            }
             onFocus={handleFocus}
             onBlur={handleBlur}
-            allowClear={false}
             onChange={handleOnChange}
             onSelect={handleOnSelect}
             onPaste={handleOnPaste}
+            onClear={handleClear}
           ></Input.TextArea>
         </div>
-      }
+
-      {!autoSize.focus && (
+        {!expanded && (
-        <div className="content-wrap" onClick={handleFocus}>
+          <div
-          <div className="content" style={{ height: height }}>
+            className={classNames('content-wrap', {
-            {label && <span className="title">{label}</span>}
+              dropDownOpen: dropDownOpen
-            {value || (
+            })}
-              <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+            onClick={handleFocus}
-                {placeholder}
+          >
-              </span>
+            {
-            )}
+              <div className="content" style={{ height: height }}>
+                {label && <span className="title">{label}</span>}
+                {data.text || (
+                  <span style={{ color: 'var(--ant-color-text-tertiary)' }}>
+                    {placeholder}
+                  </span>
+                )}
+              </div>
+            }
           </div>
-          {value && (
+        )}
-            <Tooltip title={intl.formatMessage({ id: 'common.button.clear' })}>
+        <div
+          className={classNames('actions-wrapper', {
+            show: expanded
+          })}
+        >
+          {ImageURLInput}
+          <div className={'actions'}>
+            {!expanded && data.text && (
+              <SmallCloseButton onClick={handleClear}></SmallCloseButton>
+            )}
+            {UploadImageButton}
+            <Tooltip title={intl.formatMessage({ id: 'common.button.delete' })}>
               <Button
-                className="clear-btn"
+                danger
-                type="text"
-                icon={<CloseOutlined />}
                 size="small"
-                onClick={handleClear}
+                type="text"
+                icon={<DeleteOutlined></DeleteOutlined>}
+                onClick={onDelete}
               ></Button>
             </Tooltip>
-          )}
+          </div>
         </div>
-      )}
+      </div>
     </div>
   );
 };

src/components/seal-form/styles/row-textarea.less

@@ -1,8 +1,89 @@
-.row-textarea {
+.row-textarea-wrapper {
   position: relative;
 
-  &.focus {
+  .actions-wrapper {
-    // padding-top: 9px;
+    display: none;
+    position: absolute;
+    right: 6px;
+    bottom: 50%;
+    transform: translateY(50%);
+    gap: 8px;
+    z-index: 10;
+    align-items: center;
+    justify-content: flex-end;
+  }
+
+  .actions {
+    gap: 4px;
+    align-items: center;
+    border-radius: var(--ant-border-radius);
+  }
+
+  &.show {
+    display: flex;
+    bottom: 8px;
+    transform: unset;
+  }
+
+  &:hover {
+    .actions-wrapper {
+      display: flex;
+    }
+  }
+
+  &.dropDownOpen {
+    .actions-wrapper {
+      display: flex;
+    }
+  }
+
+  &.expanded {
+    .actions-wrapper {
+      display: flex;
+      bottom: 8px;
+      transform: unset;
+    }
+  }
+}
+
+.row-textarea {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0;
+  overflow: hidden;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  border-radius: var(--border-radius-base);
+  border: 1px solid var(--ant-color-border);
+
+  .textarea-wrapper {
+    flex: 1;
+    width: 100%;
+  }
+
+  &:hover {
+    &::before {
+      content: '';
+      display: flex;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      top: 0;
+      background-color: var(--ant-color-fill-tertiary);
+      z-index: 5;
+      pointer-events: none;
+    }
+  }
+
+  &:focus-within {
+    background-color: transparent;
+
+    &::before {
+      background-color: transparent;
+    }
   }
 
   .content-wrap {
@@ -10,13 +91,12 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding-right: 20px;
+    flex: 1;
+    width: 100%;
     cursor: pointer;
 
-    &:hover {
+    .content {
-      .clear-btn {
+      margin-right: 60px;
-        display: flex;
-      }
     }
   }
 
@@ -25,14 +105,6 @@
     box-shadow: none;
   }
 
-  .clear-btn {
-    display: none;
-    position: absolute;
-    right: 6px;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
   .textarea-label {
     position: relative;
     top: 4px;
@@ -45,7 +117,6 @@
     height: 46px;
     line-height: 30px;
     padding: 8px 14px;
-    padding-right: 4px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;

src/locales/lang-config-map.tsx

@@ -330,7 +330,6 @@ const langConfigMap = {
     title: '語言'
   }
 };
-
 export type LangConfigType = keyof typeof langConfigMap;
 
 export default langConfigMap;

src/pages/_components/small-close-button.tsx

@@ -0,0 +1,36 @@
+import { CloseCircleFilled } from '@ant-design/icons';
+import { Button } from 'antd';
+import styled from 'styled-components';
+
+const StyledButton = styled(Button)`
+  background-color: transparent !important;
+  padding: 0;
+  .anticon {
+    color: var(--ant-color-text-quaternary);
+    font-size: 12px !important;
+    transition: color 0.3s ease;
+  }
+  &:hover {
+    .anticon {
+      color: var(--ant-color-text-tertiary);
+    }
+  }
+`;
+
+interface SmallCloseButtonProps {
+  onClick?: () => void;
+}
+
+const SmallCloseButton: React.FC<SmallCloseButtonProps> = ({ onClick }) => {
+  return (
+    <StyledButton
+      icon={<CloseCircleFilled />}
+      shape="circle"
+      type="text"
+      onClick={onClick}
+      size="small"
+    ></StyledButton>
+  );
+};
+
+export default SmallCloseButton;

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

@@ -80,17 +80,19 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const selectionTextRef = useRef<any>(null);
 
   const [textList, setTextList] = useState<
-    { text: string; uid: number | string; name: string }[]
+    { text: string; dataUrl?: string; uid: number | string; name: string }[]
   >([
     {
       text: '',
       uid: -1,
-      name: ''
+      name: '',
+      dataUrl: ''
     },
     {
       text: '',
       uid: -2,
-      name: ''
+      name: '',
+      dataUrl: ''
     }
   ]);
 
@@ -169,12 +171,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     try {
       await formRef.current?.form.validateFields();
       if (!parameters.model) return;
-      const validTextList = textList.filter((item) => item.text);
+      const validTextList = textList.filter(
+        (item) => item.text || item.dataUrl
+      );
       const validFileList = fileList.filter((item) => item.text);
 
       const inputList = [
-        ...validTextList.map((item) => item.text),
+        ...validTextList.map((item) => item.text || item.dataUrl || ''),
-        ...validFileList.map((item) => item.text)
+        ...validFileList.map((item) => item.text || '')
       ];
 
       if (inputList.length < 2) {
@@ -280,6 +284,44 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     setTextList(list);
   };
 
+  const handleOnUploadImage = (
+    list: { uid: number | string; dataUrl: string }[],
+    index: number
+  ) => {
+    // replace the text with dataUrl in the textList
+    setTextList((preList) => {
+      const newList = [...preList];
+      const current = newList[index];
+      if (current) {
+        newList[index] = {
+          ...current,
+          text: '',
+          uid: list[0].uid,
+          dataUrl: list[0].dataUrl
+        };
+      }
+      return newList;
+    });
+  };
+
+  const handleOnDeleteImage = (item: {
+    text: string;
+    uid: number | string;
+    name: string;
+    dataUrl?: string;
+  }) => {
+    // replace the dataUrl with empty text in the textList
+    setTextList((preList) => {
+      const newList = [...preList];
+      const current = newList.find((i) => i.uid === item.uid);
+      if (current) {
+        current.text = '';
+        current.dataUrl = '';
+      }
+      return newList;
+    });
+  };
+
   const handleonSelect = useCallback(
     (data: {
       start: number;
@@ -540,6 +582,8 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
                 onChange={handleTextListChange}
                 onSelect={handleonSelect}
                 onPaste={handleOnPaste}
+                onUploadImage={handleOnUploadImage}
+                onDeleteImage={handleOnDeleteImage}
               ></InputList>
               {fileList.length > 0 && (
                 <div style={{ marginTop: 8 }}>
@@ -576,7 +620,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
           }}
         >
           <h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-16">
-            <div className="flex gap-20">
+            <div className="flex gap-16">
               <span className="flex-center">
                 {intl.formatMessage({ id: 'playground.embedding.output' })}
                 <Tooltip
@@ -602,6 +646,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
               </span>
               <AlertInfo
                 type="danger"
+                style={{ marginRight: 16 }}
                 message={tokenResult?.errorMessage}
               ></AlertInfo>
             </div>

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

@@ -122,6 +122,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
       name: string;
       score?: number;
       showExtra?: boolean;
+      dataUrl?: string;
       percent?: number;
       rank?: number;
     }[]
@@ -129,12 +130,14 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     {
       text: '',
       uid: -1,
-      name: ''
+      name: '',
+      dataUrl: ''
     },
     {
       text: '',
       uid: -2,
-      name: ''
+      name: '',
+      dataUrl: ''
     }
   ]);
   const [queryValue, setQueryValue] = useState<string>('');
@@ -388,6 +391,44 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     selectionTextRef.current = data;
   };
 
+  const handleOnUploadImage = (
+    list: { uid: number | string; dataUrl: string }[],
+    index: number
+  ) => {
+    // replace the text with dataUrl in the textList
+    setTextList((preList) => {
+      const newList = [...preList];
+      const current = newList[index];
+      if (current) {
+        newList[index] = {
+          ...current,
+          text: '',
+          uid: list[0].uid,
+          dataUrl: list[0].dataUrl
+        };
+      }
+      return newList;
+    });
+  };
+
+  const handleOnDeleteImage = (item: {
+    text: string;
+    uid: number | string;
+    name: string;
+    dataUrl?: string;
+  }) => {
+    // replace the dataUrl with empty text in the textList
+    setTextList((preList) => {
+      const newList = [...preList];
+      const current = newList.find((i) => i.uid === item.uid);
+      if (current) {
+        current.text = '';
+        current.dataUrl = '';
+      }
+      return newList;
+    });
+  };
+
   const handleOnPaste = (e: any, index: number) => {
     if (!multiplePasteEnable.current) return;
     const text = e.clipboardData.getData('text');
@@ -559,7 +600,9 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
                 onChange={handleTextListChange}
                 extra={renderPercent}
                 onSelect={handleonSelect}
+                onUploadImage={handleOnUploadImage}
                 onPaste={handleOnPaste}
+                onDeleteImage={handleOnDeleteImage}
               ></InputList>
               {isEmptyText && (
                 <div className="m-t-16">

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

@@ -1,7 +1,5 @@
 import RowTextarea from '@/components/seal-form/row-textarea';
-import { DeleteOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Tooltip } from 'antd';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import '../style/input-list.less';
 
@@ -14,11 +12,26 @@ interface InputListProps {
     text: string;
     uid: number | string;
     name: string;
+    dataUrl?: string;
   }[];
   onChange?: (
-    textList: { text: string; uid: number | string; name: string }[]
+    textList: {
+      text: string;
+      uid: number | string;
+      name: string;
+      dataUrl?: string;
+    }[]
   ) => void;
   onPaste?: (e: any, index: number) => void;
+  onDeleteImage?: (dataItem: {
+    text: string;
+    uid: number | string;
+    name: string;
+  }) => void;
+  onUploadImage?: (
+    list: { uid: number | string; dataUrl: string }[],
+    index: number
+  ) => void;
   onSelect?: (data: {
     start: number;
     end: number;
@@ -30,7 +43,17 @@ interface InputListProps {
 
 const InputList: React.FC<InputListProps> = forwardRef(
   (
-    { textList, showLabel = true, height, onChange, extra, onPaste, onSelect },
+    {
+      textList,
+      showLabel = true,
+      height,
+      onUploadImage,
+      onDeleteImage,
+      onChange,
+      extra,
+      onPaste,
+      onSelect
+    },
     ref
   ) => {
     const intl = useIntl();
@@ -53,19 +76,19 @@ const InputList: React.FC<InputListProps> = forwardRef(
       onChange?.(dataList);
     };
 
-    const handleDelete = (text: { text: string; uid: number | string }) => {
+    const handleDelete = (dataItem: { text: string; uid: number | string }) => {
       const dataList = [...textList];
-      const index = dataList.findIndex((item) => item.uid === text.uid);
+      const index = dataList.findIndex((item) => item.uid === dataItem.uid);
       dataList.splice(index, 1);
       onChange?.(dataList);
     };
 
     const handleTextChange = (
       value: string,
-      text: { text: string; uid: number | string }
+      dataItem: { text: string; uid: number | string }
     ) => {
       const dataList = [...textList];
-      const index = dataList.findIndex((item) => item.uid === text.uid);
+      const index = dataList.findIndex((item) => item.uid === dataItem.uid);
       dataList[index].text = value;
       onChange?.(dataList);
     };
@@ -79,36 +102,26 @@ const InputList: React.FC<InputListProps> = forwardRef(
 
     return (
       <div className="input-list" ref={containerRef}>
-        {textList.map((text, index) => {
+        {textList.map((item, index) => {
           return (
-            <div key={text.uid} className="input-item" data-uid={text.uid}>
+            <div key={item.uid} className="input-item" data-uid={item.uid}>
               <div className="input-wrap">
                 <RowTextarea
                   height={height}
                   label={showLabel ? `${index + 1}` : null}
-                  value={text.text}
+                  data={item}
                   placeholder={intl.formatMessage({
                     id: 'playground.embedding.inputyourtext'
                   })}
-                  onChange={(e) => handleTextChange(e.target.value, text)}
+                  onChange={(e) => handleTextChange(e.target.value, item)}
                   onPaste={(e) => onPaste?.(e, index)}
                   onSelect={(data) => onSelect?.({ ...data, index })}
+                  onUploadImage={(list) => onUploadImage?.(list, index)}
+                  onDeleteImage={() => onDeleteImage?.(item)}
+                  onDelete={() => handleDelete(item)}
                 ></RowTextarea>
               </div>
-              <span className="btn-group">
+              {extra?.(item)}
-                <Tooltip
-                  title={intl.formatMessage({ id: 'common.button.delete' })}
-                >
-                  <Button
-                    danger
-                    size="small"
-                    type="text"
-                    icon={<DeleteOutlined></DeleteOutlined>}
-                    onClick={() => handleDelete(text)}
-                  ></Button>
-                </Tooltip>
-              </span>
-              {extra?.(text)}
             </div>
           );
         })}

src/pages/playground/hooks/use-add-image.tsx

@@ -30,15 +30,27 @@ const ImgInputWrapper = styled.div`
 
 const useAddImage = (options: {
   size?: 'small' | 'middle' | 'large';
+  inputProps?: Record<string, any>;
   handleUpdateImgList: (
     list: { uid: number | string; dataUrl: string }[]
   ) => void;
   updateUidCount: () => number | string;
 }) => {
-  const { handleUpdateImgList, updateUidCount, size = 'middle' } = options;
+  const {
+    handleUpdateImgList,
+    updateUidCount,
+    size = 'middle',
+    inputProps
+  } = options;
   const intl = useIntl();
   const [isFromUrl, setIsFromUrl] = useState(false);
   const [openImgTips, setOpenImgTips] = useState(false);
+  const [dropDownOpen, setDropDownOpen] = useState(false);
+
+  const handleOnOpenChange = (open: boolean) => {
+    setDropDownOpen(open);
+    console.log('handleOnOpenChange', open);
+  };
   const inputImgRef = useRef<any>(null);
 
   const handleAddImgFromUrl = () => {
@@ -93,6 +105,7 @@ const useAddImage = (options: {
     >
       <ImgInputWrapper>
         <Input
+          {...inputProps}
           ref={inputImgRef}
           status={openImgTips ? 'error' : ''}
           placeholder={intl.formatMessage({
@@ -117,6 +130,7 @@ const useAddImage = (options: {
 
   const UploadImageButton = (
     <DropDownActions
+      onOpenChange={handleOnOpenChange}
       placement={'topLeft'}
       menu={{
         items: [
@@ -143,13 +157,21 @@ const useAddImage = (options: {
         ]
       }}
     >
-      <Button type="text" size={size} icon={<PictureOutlined />}></Button>
+      <Button
+        type="text"
+        size={size}
+        icon={<PictureOutlined />}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      ></Button>
     </DropDownActions>
   );
 
   return {
     isFromUrl,
     ImageURLInput,
+    dropDownOpen,
     UploadImageButton
   };
 };

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

@@ -1,53 +1,12 @@
 .input-list {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 16px;
 
   .input-item {
     position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0;
-    padding-right: 6px;
-    overflow: hidden;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-    border-radius: var(--border-radius-base);
-    border: 1px solid var(--ant-color-border);
-
-    .btn-group {
-      display: none;
-    }
-
-    &:hover {
-      //background-color: var(--ant-color-fill-tertiary);
-      &::before {
-        content: '';
-        display: flex;
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        top: 0;
-        background-color: var(--ant-color-fill-tertiary);
-        z-index: 5;
-        pointer-events: none;
-      }
-
-      .btn-group {
-        display: flex;
-        gap: 8px;
-      }
-
-      .hover-hidden {
-        opacity: 0;
-      }
-    }
 
     &:focus-within {
-      //background-color: transparent;
-
       &::before {
         background-color: transparent;
       }