refactor: embeddding input list
This commit is contained in:
jialin
@@ -46,4 +46,4 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(AlertInfo);
|
||||
export default AlertInfo;
|
||||
|
||||
@@ -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);
|
||||
};
|
||||
|
||||
@@ -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 afterText = value.substring(end, value.length);
|
||||
const beforeText = data.text.substring(0, start);
|
||||
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', {
|
||||
focus: autoSize.focus
|
||||
className={classNames('row-textarea-wrapper', {
|
||||
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'
|
||||
}}
|
||||
value={value}
|
||||
autoSize={{
|
||||
minRows: autoSize.minRows,
|
||||
maxRows: autoSize.maxRows
|
||||
border: 'none',
|
||||
width: '100%',
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
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 && (
|
||||
<div className="content-wrap" onClick={handleFocus}>
|
||||
<div className="content" style={{ height: height }}>
|
||||
{label && <span className="title">{label}</span>}
|
||||
{value || (
|
||||
<span style={{ color: 'var(--ant-color-text-tertiary)' }}>
|
||||
{placeholder}
|
||||
</span>
|
||||
)}
|
||||
|
||||
{!expanded && (
|
||||
<div
|
||||
className={classNames('content-wrap', {
|
||||
dropDownOpen: dropDownOpen
|
||||
})}
|
||||
onClick={handleFocus}
|
||||
>
|
||||
{
|
||||
<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"
|
||||
type="text"
|
||||
icon={<CloseOutlined />}
|
||||
danger
|
||||
size="small"
|
||||
onClick={handleClear}
|
||||
type="text"
|
||||
icon={<DeleteOutlined></DeleteOutlined>}
|
||||
onClick={onDelete}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,89 @@
|
||||
.row-textarea {
|
||||
.row-textarea-wrapper {
|
||||
position: relative;
|
||||
|
||||
&.focus {
|
||||
// padding-top: 9px;
|
||||
.actions-wrapper {
|
||||
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 {
|
||||
.clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
.content {
|
||||
margin-right: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -330,7 +330,6 @@ const langConfigMap = {
|
||||
title: '語言'
|
||||
}
|
||||
};
|
||||
|
||||
export type LangConfigType = keyof typeof langConfigMap;
|
||||
|
||||
export default langConfigMap;
|
||||
|
||||
@@ -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;
|
||||
@@ -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),
|
||||
...validFileList.map((item) => item.text)
|
||||
...validTextList.map((item) => item.text || item.dataUrl || ''),
|
||||
...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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
<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)}
|
||||
{extra?.(item)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
@@ -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
|
||||
};
|
||||
};
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user