estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: the frontend part of mcp (#22131)

Browse Source 
Co-authored-by: jZonG <jzongcode@gmail.com>
Co-authored-by: Novice <novice12185727@gmail.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
This commit is contained in:
Joel
2025-07-10 14:14:02 +08:00
committed by GitHub
parent 535fff62f3
commit 5375d9bb27
152 changed files with 6340 additions and 695 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/app/components/plugins/marketplace/search-box/index.tsx
View File

@@ -1,8 +1,9 @@
'use client'
import { RiCloseLine } from '@remixicon/react'
import { RiCloseLine, RiSearchLine } from '@remixicon/react'
import TagsFilter from './tags-filter'
import ActionButton from '@/app/components/base/action-button'
import cn from '@/utils/classnames'
import { RiAddLine } from '@remixicon/react'
type SearchBoxProps = {
search: string
@@ -13,6 +14,9 @@ type SearchBoxProps = {
size?: 'small' | 'large'
placeholder?: string
locale?: string
supportAddCustomTool?: boolean
onShowAddCustomCollectionModal?: () => void
onAddedCustomTool?: () => void
}
const SearchBox = ({
search,
@@ -23,46 +27,62 @@ const SearchBox = ({
size = 'small',
placeholder = '',
locale,
supportAddCustomTool,
onShowAddCustomCollectionModal,
}: SearchBoxProps) => {
return (
<div
className={cn(
'z-[11] flex items-center',
size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
inputClassName,
)}
className='z-[11] flex items-center'
>
<TagsFilter
tags={tags}
onTagsChange={onTagsChange}
size={size}
locale={locale}
/>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<div className='relative flex grow items-center p-1 pl-2'>
<div className='mr-2 flex w-full items-center'>
<input
className={cn(
'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
)}
value={search}
onChange={(e) => {
onSearchChange(e.target.value)
}}
placeholder={placeholder}
/>
{
search && (
<div className='absolute right-2 top-1/2 -translate-y-1/2'>
<ActionButton onClick={() => onSearchChange('')}>
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)
}
<div className={
cn('flex items-center',
size === 'large' && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
size === 'small' && 'rounded-lg bg-components-input-bg-normal p-0.5',
inputClassName,
)
}>
<div className='relative flex grow items-center p-1 pl-2'>
<div className='mr-2 flex w-full items-center'>
<RiSearchLine className='mr-1.5 size-4 text-text-placeholder' />
<input
className={cn(
'body-md-medium block grow appearance-none bg-transparent text-text-secondary outline-none',
)}
value={search}
onChange={(e) => {
onSearchChange(e.target.value)
}}
placeholder={placeholder}
/>
{
search && (
<div className='absolute right-2 top-1/2 -translate-y-1/2'>
<ActionButton onClick={() => onSearchChange('')}>
<RiCloseLine className='h-4 w-4' />
</ActionButton>
</div>
)
}
</div>
</div>
<div className='mx-1 h-3.5 w-[1px] bg-divider-regular'></div>
<TagsFilter
tags={tags}
onTagsChange={onTagsChange}
size={size}
locale={locale}
/>
</div>
{supportAddCustomTool && (
<div className='flex shrink-0 items-center'>
<ActionButton
className='ml-2 rounded-full bg-components-button-primary-bg text-components-button-primary-text hover:bg-components-button-primary-bg hover:text-components-button-primary-text'
onClick={onShowAddCustomCollectionModal}
>
<RiAddLine className='h-4 w-4' />
</ActionButton>
</div>
)}
</div>
)
}

50
web/app/components/plugins/marketplace/search-box/tags-filter.tsx
View File

@@ -2,9 +2,7 @@
import { useState } from 'react'
import {
RiArrowDownSLine,
RiCloseCircleFill,
RiFilter3Line,
RiPriceTag3Line,
} from '@remixicon/react'
import {
PortalToFollowElem,
@@ -57,47 +55,15 @@ const TagsFilter = ({
onClick={() => setOpen(v => !v)}
>
<div className={cn(
'flex cursor-pointer items-center rounded-lg text-text-tertiary hover:bg-state-base-hover',
size === 'large' && 'h-8 px-2 py-1',
size === 'small' && 'h-7 py-0.5 pl-1 pr-1.5 ',
selectedTagsLength && 'text-text-secondary',
open && 'bg-state-base-hover',
'ml-0.5 mr-1.5 flex items-center text-text-tertiary ',
size === 'large' && 'h-8 py-1',
size === 'small' && 'h-7 py-0.5 ',
// selectedTagsLength && 'text-text-secondary',
// open && 'bg-state-base-hover',
)}>
<div className='p-0.5'>
<RiFilter3Line className='h-4 w-4' />
<div className='cursor-pointer rounded-md p-0.5 hover:bg-state-base-hover'>
<RiPriceTag3Line className='h-4 w-4 text-text-tertiary' />
</div>
<div className={cn(
'system-sm-medium flex items-center p-1',
size === 'large' && 'p-1',
size === 'small' && 'px-0.5 py-1',
)}>
{
!selectedTagsLength && t('pluginTags.allTags')
}
{
!!selectedTagsLength && tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')
}
{
selectedTagsLength > 2 && (
<div className='system-xs-medium ml-1 text-text-tertiary'>
+{selectedTagsLength - 2}
</div>
)
}
</div>
{
!!selectedTagsLength && (
<RiCloseCircleFill
className='h-4 w-4 cursor-pointer text-text-quaternary'
onClick={() => onTagsChange([])}
/>
)
}
{
!selectedTagsLength && (
<RiArrowDownSLine className='h-4 w-4' />
)
}
</div>
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[1000]'>