root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: embeddding input list

Browse Source
This commit is contained in:
jialin
2026-03-17 16:35:55 +08:00
committed by jialin
parent 6e98fb4274
commit e241c6cb6f
11 changed files with 404 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/_components/small-close-button.tsx
+36
View File
@@ -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
+52 -7
View File
@@ -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>
src/pages/playground/components/ground-reranker.tsx
+45 -2
View File
@@ -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
+39 -26
View File
@@ -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>
);
})}
src/pages/playground/hooks/use-add-image.tsx
+24 -2
View File
@@ -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 -42
View File
@@ -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;
}