diff --git a/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/audio-support-icon.svg b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/audio-support-icon.svg new file mode 100644 index 0000000000..cad145c65f --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/audio-support-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/document-support-icon.svg b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/document-support-icon.svg new file mode 100644 index 0000000000..d7c09789fb --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/document-support-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/video-support-icon.svg b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/video-support-icon.svg new file mode 100644 index 0000000000..f87aa023b6 --- /dev/null +++ b/web/app/components/base/icons/assets/vender/solid/mediaAndDevices/video-support-icon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.json b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.json new file mode 100644 index 0000000000..cd3006b76d --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "xmlns": "http://www.w3.org/2000/svg", + "width": "12", + "height": "12", + "viewBox": "0 0 12 12", + "fill": "none" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10.3567 3.56405L10.2334 3.84689C10.1432 4.05396 9.8568 4.05396 9.76655 3.84689L9.6433 3.56405C9.42355 3.05973 9.02775 2.6582 8.53385 2.43854L8.154 2.26961C7.94865 2.17826 7.94865 1.8794 8.154 1.78806L8.5126 1.62857C9.0192 1.40325 9.4221 0.986865 9.63805 0.465414L9.76465 0.159767C9.8529 -0.0532556 10.1471 -0.0532556 10.2353 0.159767L10.3619 0.465414C10.5779 0.986865 10.9808 1.40325 11.4874 1.62857L11.846 1.78806C12.0514 1.8794 12.0514 2.17826 11.846 2.26961L11.4662 2.43854C10.9723 2.6582 10.5764 3.05973 10.3567 3.56405ZM4.25 3H3.25V9H4.25V3ZM2 5H1V7H2V5ZM6.5 1H5.5V11H6.5V1ZM8.75 4H7.75V9H8.75V4ZM11 5H10V7H11V5Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "AudioSupportIcon" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx new file mode 100644 index 0000000000..c9477fc07f --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/AudioSupportIcon.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './AudioSupportIcon.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'AudioSupportIcon' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.json b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.json new file mode 100644 index 0000000000..49cb6a521c --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "xmlns": "http://www.w3.org/2000/svg", + "width": "12", + "height": "12", + "viewBox": "0 0 12 12", + "fill": "none" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10.5 4V10.4966C10.5 10.7751 10.2776 11 10.0033 11H1.9967C1.72248 11 1.5 10.778 1.5 10.5041V1.4959C1.5 1.22766 1.72435 1 2.00111 1H7.4984L10.5 4ZM9.5 4.5H7V2H2.5V10H9.5V4.5ZM4 3.5H5.5V4.5H4V3.5ZM4 5.5H8V6.5H4V5.5ZM4 7.5H8V8.5H4V7.5Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "DocumentSupportIcon" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx new file mode 100644 index 0000000000..d848c5a156 --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/DocumentSupportIcon.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './DocumentSupportIcon.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'DocumentSupportIcon' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.json b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.json new file mode 100644 index 0000000000..4bc6881a5d --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.json @@ -0,0 +1,26 @@ +{ + "icon": { + "type": "element", + "isRootNode": true, + "name": "svg", + "attributes": { + "xmlns": "http://www.w3.org/2000/svg", + "width": "12", + "height": "12", + "viewBox": "0 0 12 12", + "fill": "none" + }, + "children": [ + { + "type": "element", + "name": "path", + "attributes": { + "d": "M10.2334 4.3469L10.3567 4.06406C10.5764 3.55974 10.9723 3.15821 11.4662 2.93854L11.846 2.76961C12.0514 2.67827 12.0514 2.37941 11.846 2.28806L11.4874 2.12857C10.9808 1.90326 10.5779 1.48687 10.3619 0.965415L10.2353 0.659765C10.1471 0.446745 9.8529 0.446745 9.76465 0.659765L9.63805 0.965415C9.4221 1.48687 9.0192 1.90326 8.5126 2.12857L8.154 2.28806C7.94865 2.37941 7.94865 2.67827 8.154 2.76961L8.53385 2.93854C9.02775 3.15821 9.42355 3.55974 9.6433 4.06406L9.76655 4.3469C9.8568 4.55396 10.1432 4.55396 10.2334 4.3469ZM1.4959 1.5H7V2.5H4V9.5H8V4.5H9V5.5H10H11V10.0033C11 10.2776 10.7723 10.5 10.5041 10.5H1.4959C1.22203 10.5 1 10.2775 1 10.0033V1.9967C1 1.72238 1.22766 1.5 1.4959 1.5ZM2 2.5V3.5H3V2.5H2ZM2 4.5V5.5H3V4.5H2ZM2 6.5V7.5H3V6.5H2ZM9 6.5V7.5H10V6.5H9ZM2 8.5V9.5H3V8.5H2ZM9 8.5V9.5H10V8.5H9Z", + "fill": "currentColor" + }, + "children": [] + } + ] + }, + "name": "VideoSupportIcon" +} \ No newline at end of file diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx new file mode 100644 index 0000000000..6406af0746 --- /dev/null +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/VideoSupportIcon.tsx @@ -0,0 +1,16 @@ +// GENERATE BY script +// DON NOT EDIT IT MANUALLY + +import * as React from 'react' +import data from './VideoSupportIcon.json' +import IconBase from '@/app/components/base/icons/IconBase' +import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase' + +const Icon = React.forwardRef, Omit>(( + props, + ref, +) => ) + +Icon.displayName = 'VideoSupportIcon' + +export default Icon diff --git a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/index.ts b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/index.ts index ab43a47ea1..7c313fecfb 100644 --- a/web/app/components/base/icons/src/vender/solid/mediaAndDevices/index.ts +++ b/web/app/components/base/icons/src/vender/solid/mediaAndDevices/index.ts @@ -1,3 +1,5 @@ +export { default as AudioSupportIcon } from './AudioSupportIcon' +export { default as DocumentSupportIcon } from './DocumentSupportIcon' export { default as MagicBox } from './MagicBox' export { default as MagicEyes } from './MagicEyes' export { default as MagicWand } from './MagicWand' @@ -7,3 +9,4 @@ export { default as Robot } from './Robot' export { default as Sliders02 } from './Sliders02' export { default as Speaker } from './Speaker' export { default as StopCircle } from './StopCircle' +export { default as VideoSupportIcon } from './VideoSupportIcon' diff --git a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx index a90421fa06..eda380d2ae 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-icon/index.tsx @@ -41,7 +41,7 @@ const ModelIcon: FC = ({ return (
diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx index e9f59cd38e..54987e6720 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/feature-icon.tsx @@ -6,10 +6,13 @@ import { ModelFeatureTextEnum, } from '../declarations' import { + AudioSupportIcon, + DocumentSupportIcon, // MagicBox, MagicEyes, // MagicWand, // Robot, + VideoSupportIcon, } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices' import Tooltip from '@/app/components/base/tooltip' @@ -73,6 +76,48 @@ const FeatureIcon: FC = ({ ) } + if (feature === ModelFeatureEnum.document) { + return ( + +
+ + + +
+ + ) + } + + if (feature === ModelFeatureEnum.audio) { + return ( + +
+ + + +
+ + ) + } + + if (feature === ModelFeatureEnum.video) { + return ( + +
+ + + +
+ + ) + } + return null } diff --git a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx index db1866693d..09c47f670b 100644 --- a/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx +++ b/web/app/components/header/account-setting/model-provider-page/model-selector/model-trigger.tsx @@ -34,18 +34,20 @@ const ModelTrigger: FC = ({ return (
- +
+ +
-
+
{verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />} diff --git a/web/app/components/tools/types.ts b/web/app/components/tools/types.ts index 19432f4217..32c468cde8 100644 --- a/web/app/components/tools/types.ts +++ b/web/app/components/tools/types.ts @@ -49,6 +49,7 @@ export type Collection = { allow_delete: boolean labels: string[] plugin_id?: string + letter?: string } export type ToolParameter = { diff --git a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx index 8e07eb5650..04622cabff 100644 --- a/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx +++ b/web/app/components/workflow/block-selector/tool/tool-list-flat-view/list.tsx @@ -6,31 +6,53 @@ import type { BlockEnum } from '../../../types' import type { ToolDefaultValue } from '../../types' import Tool from '../tool' import { ViewType } from '../../view-type-select' +import { useMemo } from 'react' type Props = { payload: ToolWithProvider[] isShowLetterIndex: boolean hasSearchText: boolean onSelect: (type: BlockEnum, tool?: ToolDefaultValue) => void + letters: string[] + toolRefs: any } const ToolViewFlatView: FC<Props> = ({ + letters, payload, isShowLetterIndex, hasSearchText, onSelect, + toolRefs, }) => { + const firstLetterToolIds = useMemo(() => { + const res: Record<string, string> = {} + letters.forEach((letter) => { + const firstToolId = payload.find(tool => tool.letter === letter)?.id + if (firstToolId) + res[firstToolId] = letter + }) + return res + }, [payload, letters]) return ( <div> {payload.map(tool => ( - <Tool + <div key={tool.id} - payload={tool} - viewType={ViewType.flat} - isShowLetterIndex={isShowLetterIndex} - hasSearchText={hasSearchText} - onSelect={onSelect} - /> + ref={(el) => { + const letter = firstLetterToolIds[tool.id] + if (letter) + toolRefs.current[letter] = el + }} + > + <Tool + payload={tool} + viewType={ViewType.flat} + isShowLetterIndex={isShowLetterIndex} + hasSearchText={hasSearchText} + onSelect={onSelect} + /> + </div> ))} </div> ) diff --git a/web/app/components/workflow/block-selector/tools.tsx b/web/app/components/workflow/block-selector/tools.tsx index c19eecf88b..060f6dfa2c 100644 --- a/web/app/components/workflow/block-selector/tools.tsx +++ b/web/app/components/workflow/block-selector/tools.tsx @@ -71,7 +71,12 @@ const Blocks = ({ const result: ToolWithProvider[] = [] letters.forEach((letter) => { Object.keys(withLetterAndGroupViewToolsData[letter]).forEach((groupName) => { - result.push(...withLetterAndGroupViewToolsData[letter][groupName]) + result.push(...withLetterAndGroupViewToolsData[letter][groupName].map((item) => { + return { + ...item, + letter, + } + })) }) }) @@ -95,6 +100,8 @@ const Blocks = ({ {!!tools.length && ( isFlatView ? ( <ToolListFlatView + toolRefs={toolRefs} + letters={letters} payload={listViewToolData} isShowLetterIndex={isShowLetterIndex} hasSearchText={hasSearchText}