ChatGPT/FastGPT
1
0
Fork 0
mirror of https://github.com/labring/FastGPT.git synced 2025-10-19 18:14:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feature: V4.11.1 (#5350)

Browse Source 
* perf: system toolset & mcp (#5200)

* feat: support system toolset

* fix: type

* fix: system tool config

* chore: mcptool config migrate

* refactor: mcp toolset

* fix: fe type error

* fix: type error

* fix: show version

* chore: support extract tool's secretInputConfig out of inputs

* chore: compatible with old version mcp

* chore: adjust

* deps: update dependency @fastgpt-skd/plugin

* fix: version

* fix: some bug (#5316)

* chore: compatible with old version mcp

* fix: version

* fix: compatible bug

* fix: mcp object params

* fix: type error

* chore: update test cases

* chore: remove log

* fix: toolset node name

* optimize app logs sort (#5310)

* log keys config modal

* multiple select

* api

* fontsize

* code

* chatid

* fix build

* fix

* fix component

* change name

* log keys config

* fix

* delete unused

* fix

* perf: log code

* perf: send auth code modal enter press

* fix log (#5328)

* perf: mcp toolset comment

* perf: log ui

* remove log (#5347)

* doc

* fix: action

* remove log

* fix: Table Optimization (#5319)

* feat: table test: 1

* feat: table test: 2

* feat: table test: 3

* feat: table test: 4

* feat: table test : 5 把maxSize改回chunkSize

* feat: table test : 6 都删了，只看maxSize

* feat: table test : 7 恢复初始，接下来删除标签功能

* feat: table test : 8 删除标签功能

* feat: table test : 9 删除标签功能成功

* feat: table test : 10 继续调试，修改trainingStates

* feat: table test : 11 修改第一步

* feat: table test : 12 修改第二步

* feat: table test : 13 修改了HtmlTable2Md

* feat: table test : 14 修改表头分块规则

* feat: table test : 15 前面表格分的太细了

* feat: table test : 16 改着改着表头又不加了

* feat: table test : 17 用CUSTOM_SPLIT_SIGN不行，重新改

* feat: table test : 18 表头仍然还会多加，但现在分块搞的合理了终于

* feat: table test : 19 还是需要搞好表头问题，先保存一下调试情况

* feat: table test : 20 调试结束，看一下replace有没有问题，没问题就pr

* feat: table test : 21 先把注释删了

* feat: table test : 21 注释replace都改了，下面切main分支看看情况

* feat: table test : 22 修改旧文件

* feat: table test : 23 修改测试文件

* feat: table test : 24 xlsx表格处理

* feat: table test : 25 刚才没保存先com了

* feat: table test : 26 fix

* feat: table test : 27 先com一版调试

* feat: table test : 28 试试放format2csv里

* feat: table test : 29 xlsx解决

* feat: table test : 30 tablesplit解决

* feat: table test : 31

* feat: table test : 32

* perf: table split

* perf: mcp old version compatibility (#5342)

* fix: system-tool secret inputs

* fix: rewrite runtime node i18n for system tool

* perf: mcp old version compatibility

* fix: splitPluginId

* fix: old mcp toolId

* fix: filter secret key

* feat: support system toolset activation

* chore: remove log

* perf: mcp update

* perf: rewrite toolset

* fix:delete variable id (#5335)

* perf: variable update

* fix: multiple select ui

* perf: model config move to plugin

* fix: var conflit

* perf: variable checker

* Avoid empty number

* update doc time

* fix: test

* fix: mcp object

* update count app

* update count app

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Co-authored-by: heheer <heheer@sealos.io>
Co-authored-by: heheer <zhiyu44@qq.com>
Co-authored-by: colnii <1286949794@qq.com>
Co-authored-by: dreamer6680 <1468683855@qq.com>
This commit is contained in:
Archer
2025-08-01 16:08:20 +08:00
committed by GitHub
parent e0c21a949c
commit e25d7efb5b
143 changed files with 2596 additions and 4177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
packages/web/components/common/MySelect/MultipleSelect.tsx
View File

@@ -1,9 +1,11 @@
import type { FlexProps } from '@chakra-ui/react';
import {
Box,
Button,
type ButtonProps,
Checkbox,
Flex,
Input,
Menu,
MenuButton,
MenuItem,
@@ -11,13 +13,27 @@ import {
MenuList,
useDisclosure
} from '@chakra-ui/react';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import MyTag from '../Tag/index';
import MyIcon from '../Icon';
import MyAvatar from '../Avatar';
import { useTranslation } from 'next-i18next';
import type { useScrollPagination } from '../../../hooks/useScrollPagination';
import MyDivider from '../MyDivider';
import { shadowLight } from '../../../styles/theme';
const menuItemStyles: MenuItemProps = {
borderRadius: 'sm',
py: 2,
display: 'flex',
alignItems: 'center',
_hover: {
backgroundColor: 'myGray.100'
},
_notLast: {
mb: 2
}
};
export type SelectProps<T = any> = {
list: {
@@ -30,19 +46,25 @@ export type SelectProps<T = any> = {
setIsSelectAll?: React.Dispatch<React.SetStateAction<boolean>>;
placeholder?: string;
maxH?: number;
itemWrap?: boolean;
onSelect: (val: T[]) => void;
closeable?: boolean;
isDisabled?: boolean;
ScrollData?: ReturnType<typeof useScrollPagination>['ScrollData'];
formLabel?: string;
formLabelFontSize?: string;
inputValue?: string;
setInputValue?: (val: string) => void;
tagStyle?: FlexProps;
} & Omit<ButtonProps, 'onSelect'>;
const MultipleSelect = <T = any,>({
value = [],
placeholder,
list = [],
maxH = 400,
onSelect,
closeable = false,
itemWrap = true,
@@ -50,27 +72,92 @@ const MultipleSelect = <T = any,>({
isSelectAll,
setIsSelectAll,
isDisabled = false,
formLabel,
formLabelFontSize = 'sm',
inputValue,
setInputValue,
tagStyle,
...props
}: SelectProps<T>) => {
const ref = useRef<HTMLButtonElement>(null);
const SearchInputRef = useRef<HTMLInputElement>(null);
const tagsContainerRef = useRef<HTMLDivElement>(null);
const { t } = useTranslation();
const { isOpen, onOpen, onClose } = useDisclosure();
const menuItemStyles: MenuItemProps = {
borderRadius: 'sm',
py: 2,
display: 'flex',
alignItems: 'center',
_hover: {
backgroundColor: 'myGray.100'
},
_notLast: {
mb: 2
}
const canInput = setInputValue !== undefined;
type SelectedItemType = {
icon?: string;
label: string | React.ReactNode;
value: T;
};
const [visibleItems, setVisibleItems] = useState<SelectedItemType[]>([]);
const [overflowItems, setOverflowItems] = useState<SelectedItemType[]>([]);
const selectedItems = useMemo(() => {
return value.map((val) => {
const listItem = list.find((item) => item.value === val);
return listItem || { value: val, label: String(val) };
});
}, [value, list]);
const handleKeyDown = useCallback(
(e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === 'Backspace' && (!inputValue || inputValue === '')) {
const newValue = [...value];
newValue.pop();
onSelect(newValue);
}
},
[inputValue, value, isSelectAll, onSelect]
);
useEffect(() => {
if (!isOpen) {
setInputValue?.('');
}
}, [isOpen]);
useEffect(() => {
const getWidth = (w: any) =>
typeof w === 'number' ? w : typeof w === 'string' ? parseInt(w) : 0;
const totalWidth = getWidth(props.w) || 200;
const tagWidth = getWidth(tagStyle?.w) || 60;
const formLabelWidth = formLabel ? formLabel.length * 8 + 20 : 0;
const availableWidth = totalWidth - formLabelWidth - 40;
const overflowWidth = 30;
if (availableWidth <= 0) {
setVisibleItems(selectedItems.length > 0 ? [selectedItems[0]] : []);
setOverflowItems(selectedItems.slice(1));
return;
}
const { count } = selectedItems.reduce(
(acc, item, i) => {
const remain = selectedItems.length - i - 1;
const needOverflow = remain > 0 ? overflowWidth : 0;
if (acc.used + tagWidth + needOverflow <= availableWidth) {
return {
used: acc.used + tagWidth,
count: i + 1
};
}
return acc;
},
{ used: 0, count: 0 }
);
setVisibleItems(selectedItems.slice(0, count));
setOverflowItems(selectedItems.slice(count));
}, [selectedItems, isOpen, props.w, tagStyle, formLabel]);
const onclickItem = useCallback(
(val: T) => {
// 全选状态下，value 实际上上空。
if (isSelectAll) {
onSelect(list.map((item) => item.value).filter((i) => i !== val));
setIsSelectAll?.(false);
@@ -141,12 +228,11 @@ const MultipleSelect = <T = any,>({
>
<MenuButton
as={Flex}
h={'100%'}
alignItems={'center'}
ref={ref}
px={3}
alignItems={'center'}
borderRadius={'md'}
border={'base'}
border={'sm'}
userSelect={'none'}
cursor={isDisabled ? 'not-allowed' : 'pointer'}
_active={{
@@ -159,68 +245,108 @@ const MultipleSelect = <T = any,>({
{...props}
{...(isOpen && !isDisabled
? {
boxShadow: '0px 0px 4px #A8DBFF',
borderColor: 'primary.500',
boxShadow: shadowLight,
borderColor: 'primary.600 !important',
bg: 'white'
}
: {})}
>
{value.length === 0 && placeholder ? (
<Box color={'myGray.500'} fontSize={'sm'}>
{placeholder}
</Box>
) : (
<Flex alignItems={'center'} gap={2}>
<Flex alignItems={'center'} w={'100%'} h={'100%'} py={1.5}>
{formLabel && (
<Flex alignItems={'center'}>
<Box color={'myGray.600'} fontSize={formLabelFontSize} whiteSpace={'nowrap'}>
{formLabel}
</Box>
<Box w={'1px'} h={'12px'} bg={'myGray.200'} mx={2} />
</Flex>
)}
{value.length === 0 && placeholder ? (
<Box color={'myGray.500'} fontSize={formLabelFontSize} flex={1}>
{placeholder}
</Box>
) : (
<Flex
alignItems={'center'}
gap={2}
flexWrap={itemWrap ? 'wrap' : 'nowrap'}
ref={tagsContainerRef}
flex={'1 0 0'}
gap={1}
flexWrap={'nowrap'}
overflow={'hidden'}
flex={1}
alignItems={'center'}
>
{isSelectAll ? (
<Box fontSize={'mini'} color={'myGray.900'}>
{t('common:All')}
</Box>
) : (
list
.filter((item) => value.includes(item.value))
.map((item, i) => (
<MyTag
className="tag-icon"
key={i}
bg={'primary.100'}
color={'primary.700'}
type={'fill'}
borderRadius={'lg'}
px={2}
py={0.5}
flexShrink={0}
>
{item.label}
{closeable && (
<MyIcon
name={'common/closeLight'}
ml={1}
w="0.8rem"
cursor={'pointer'}
_hover={{
color: 'red.500'
}}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
onclickItem(item.value);
}}
/>
)}
</MyTag>
))
{(!isOpen || !canInput) &&
(isSelectAll ? (
<Box fontSize={formLabelFontSize} color={'myGray.900'}>
{t('common:All')}
</Box>
) : (
<>
{visibleItems.map((item, i) => (
<MyTag
className="tag-icon"
key={i}
bg={'primary.100'}
color={'primary.700'}
type={'fill'}
borderRadius={'lg'}
px={2}
py={0.5}
flexShrink={0}
{...tagStyle}
>
{item.label}
{closeable && (
<MyIcon
name={'common/closeLight'}
ml={1}
w="0.8rem"
cursor={'pointer'}
_hover={{
color: 'red.500'
}}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
onclickItem(item.value);
}}
/>
)}
</MyTag>
))}
{overflowItems.length > 0 && (
<Box
fontSize={formLabelFontSize}
px={2}
py={0.5}
flexShrink={0}
borderRadius={'lg'}
bg={'myGray.100'}
>
+{overflowItems.length}
</Box>
)}
</>
))}
{canInput && isOpen && (
<Input
value={inputValue}
onChange={(e) => setInputValue?.(e.target.value)}
onKeyDown={handleKeyDown}
ref={SearchInputRef}
autoFocus
onBlur={() => {
setTimeout(() => {
SearchInputRef?.current?.focus();
}, 0);
}}
h={6}
variant={'unstyled'}
border={'none'}
/>
)}
</Flex>
<MyIcon name={'core/chat/chevronDown'} color={'myGray.600'} w={4} h={4} />
</Flex>
)}
)}
<MyIcon name={'core/chat/chevronDown'} color={'myGray.600'} w={4} h={4} />
</Flex>
</MenuButton>
<MenuList
@@ -254,7 +380,7 @@ const MultipleSelect = <T = any,>({
<MyDivider my={1} />
{ScrollData ? <ScrollData>{ListRender}</ScrollData> : ListRender}
{ScrollData ? <ScrollData minH={20}>{ListRender}</ScrollData> : ListRender}
</MenuList>
</Menu>
</Box>