dify

dify/web/app/components/plugins/marketplace/search-box/index.tsx

@@ -0,0 +1,136 @@
+'use client'
+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'
+import Divider from '@/app/components/base/divider'
+
+type SearchBoxProps = {
+  search: string
+  onSearchChange: (search: string) => void
+  wrapperClassName?: string
+  inputClassName?: string
+  tags: string[]
+  onTagsChange: (tags: string[]) => void
+  placeholder?: string
+  locale?: string
+  supportAddCustomTool?: boolean
+  usedInMarketplace?: boolean
+  onShowAddCustomCollectionModal?: () => void
+  onAddedCustomTool?: () => void
+  autoFocus?: boolean
+}
+const SearchBox = ({
+  search,
+  onSearchChange,
+  wrapperClassName,
+  inputClassName,
+  tags,
+  onTagsChange,
+  placeholder = '',
+  locale,
+  usedInMarketplace = false,
+  supportAddCustomTool,
+  onShowAddCustomCollectionModal,
+  autoFocus = false,
+}: SearchBoxProps) => {
+  return (
+    <div
+      className={cn('z-[11] flex items-center', wrapperClassName)}
+    >
+      <div className={
+        cn('flex items-center',
+          usedInMarketplace && 'rounded-xl border border-components-chat-input-border bg-components-panel-bg-blur p-1.5 shadow-md',
+          !usedInMarketplace && 'radius-md border border-transparent bg-components-input-bg-normal focus-within:border-components-input-border-active hover:border-components-input-border-hover',
+          inputClassName,
+        )
+      }>
+        {
+          usedInMarketplace && (
+            <>
+              <TagsFilter
+                tags={tags}
+                onTagsChange={onTagsChange}
+                usedInMarketplace
+                locale={locale}
+              />
+              <Divider type='vertical' className='mx-1 h-3.5' />
+              <div className='flex grow items-center gap-x-2 p-1'>
+                <input
+                  className={cn(
+                    'body-md-medium inline-block grow appearance-none bg-transparent text-text-secondary outline-none',
+                  )}
+                  value={search}
+                  onChange={(e) => {
+                    onSearchChange(e.target.value)
+                  }}
+                  placeholder={placeholder}
+                />
+                {
+                  search && (
+                    <ActionButton
+                      onClick={() => onSearchChange('')}
+                      className='shrink-0'
+                    >
+                      <RiCloseLine className='size-4' />
+                    </ActionButton>
+                  )
+                }
+              </div>
+            </>
+          )
+        }
+        {
+          !usedInMarketplace && (
+            <>
+              <div className='flex grow items-center py-[7px] pl-2 pr-3'>
+                <RiSearchLine className='size-4 text-components-input-text-placeholder' />
+                <input
+                  autoFocus={autoFocus}
+                  className={cn(
+                    'system-sm-regular ml-1.5 mr-1 inline-block grow appearance-none bg-transparent text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder',
+                    search && 'mr-2',
+                  )}
+                  value={search}
+                  onChange={(e) => {
+                    onSearchChange(e.target.value)
+                  }}
+                  placeholder={placeholder}
+                />
+                {
+                  search && (
+                    <ActionButton
+                      onClick={() => onSearchChange('')}
+                      className='shrink-0'
+                    >
+                      <RiCloseLine className='size-4' />
+                    </ActionButton>
+                  )
+                }
+              </div>
+              <Divider type='vertical' className='mx-0 mr-0.5 h-3.5' />
+              <TagsFilter
+                tags={tags}
+                onTagsChange={onTagsChange}
+                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>
+  )
+}
+
+export default SearchBox

dify/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { useMarketplaceContext } from '../context'
+import {
+  useMixedTranslation,
+  useSearchBoxAutoAnimate,
+} from '../hooks'
+import SearchBox from './index'
+import cn from '@/utils/classnames'
+
+type SearchBoxWrapperProps = {
+  locale?: string
+  searchBoxAutoAnimate?: boolean
+}
+const SearchBoxWrapper = ({
+  locale,
+  searchBoxAutoAnimate,
+}: SearchBoxWrapperProps) => {
+  const { t } = useMixedTranslation(locale)
+  const intersected = useMarketplaceContext(v => v.intersected)
+  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
+  const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
+  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
+  const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
+  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
+
+  return (
+    <SearchBox
+      wrapperClassName={cn(
+        'z-[0] mx-auto w-[640px] shrink-0',
+        searchBoxCanAnimate && 'sticky top-3 z-[11]',
+        !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
+      )}
+      inputClassName='w-full'
+      search={searchPluginText}
+      onSearchChange={handleSearchPluginTextChange}
+      tags={filterPluginTags}
+      onTagsChange={handleFilterPluginTagsChange}
+      locale={locale}
+      placeholder={t('plugin.searchPlugins')}
+      usedInMarketplace
+    />
+  )
+}
+
+export default SearchBoxWrapper

dify/web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -0,0 +1,114 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Checkbox from '@/app/components/base/checkbox'
+import Input from '@/app/components/base/input'
+import { useTags } from '@/app/components/plugins/hooks'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+import MarketplaceTrigger from './trigger/marketplace'
+import ToolSelectorTrigger from './trigger/tool-selector'
+
+type TagsFilterProps = {
+  tags: string[]
+  onTagsChange: (tags: string[]) => void
+  usedInMarketplace?: boolean
+  locale?: string
+}
+const TagsFilter = ({
+  tags,
+  onTagsChange,
+  usedInMarketplace = false,
+  locale,
+}: TagsFilterProps) => {
+  const { t } = useMixedTranslation(locale)
+  const [open, setOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const { tags: options, tagsMap } = useTags(t)
+  const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchText.toLowerCase()))
+  const handleCheck = (id: string) => {
+    if (tags.includes(id))
+      onTagsChange(tags.filter((tag: string) => tag !== id))
+    else
+      onTagsChange([...tags, id])
+  }
+  const selectedTagsLength = tags.length
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -6,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger
+        className='shrink-0'
+        onClick={() => setOpen(v => !v)}
+      >
+        {
+          usedInMarketplace && (
+            <MarketplaceTrigger
+              selectedTagsLength={selectedTagsLength}
+              open={open}
+              tags={tags}
+              tagsMap={tagsMap}
+              locale={locale}
+              onTagsChange={onTagsChange}
+            />
+          )
+        }
+        {
+          !usedInMarketplace && (
+            <ToolSelectorTrigger
+              selectedTagsLength={selectedTagsLength}
+              open={open}
+              tags={tags}
+              tagsMap={tagsMap}
+              onTagsChange={onTagsChange}
+            />
+          )
+        }
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              placeholder={t('pluginTags.searchTags') || ''}
+            />
+          </div>
+          <div className='max-h-[448px] overflow-y-auto p-1'>
+            {
+              filteredOptions.map(option => (
+                <div
+                  key={option.name}
+                  className='flex h-7 cursor-pointer select-none items-center rounded-lg px-2 py-1.5 hover:bg-state-base-hover'
+                  onClick={() => handleCheck(option.name)}
+                >
+                  <Checkbox
+                    className='mr-1'
+                    checked={tags.includes(option.name)}
+                  />
+                  <div className='system-sm-medium px-1 text-text-secondary'>
+                    {option.label}
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TagsFilter

dify/web/app/components/plugins/marketplace/search-box/trigger/marketplace.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { RiArrowDownSLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
+import type { Tag } from '../../../hooks'
+import cn from '@/utils/classnames'
+import { useMixedTranslation } from '../../hooks'
+
+type MarketplaceTriggerProps = {
+  selectedTagsLength: number
+  open: boolean
+  tags: string[]
+  tagsMap: Record<string, Tag>
+  locale?: string
+  onTagsChange: (tags: string[]) => void
+}
+
+const MarketplaceTrigger = ({
+  selectedTagsLength,
+  open,
+  tags,
+  tagsMap,
+  locale,
+  onTagsChange,
+}: MarketplaceTriggerProps) => {
+  const { t } = useMixedTranslation(locale)
+
+  return (
+    <div
+      className={cn(
+        'flex h-8 cursor-pointer select-none items-center rounded-lg px-2 py-1 text-text-tertiary',
+        !!selectedTagsLength && 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs shadow-shadow-shadow-3',
+        open && !selectedTagsLength && 'bg-state-base-hover',
+      )}
+    >
+      <div className='p-0.5'>
+        <RiFilter3Line className={cn('size-4', !!selectedTagsLength && 'text-text-secondary')} />
+      </div>
+      <div className='system-sm-medium flex items-center gap-x-1 p-1'>
+        {
+          !selectedTagsLength && <span>{t('pluginTags.allTags')}</span>
+        }
+        {
+          !!selectedTagsLength && (
+            <span className='text-text-secondary'>
+              {tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')}
+            </span>
+          )
+        }
+        {
+          selectedTagsLength > 2 && (
+            <div className='system-xs-medium text-text-tertiary'>
+              +{selectedTagsLength - 2}
+            </div>
+          )
+        }
+      </div>
+      {
+        !!selectedTagsLength && (
+          <RiCloseCircleFill
+            className='size-4 text-text-quaternary'
+            onClick={() => onTagsChange([])}
+          />
+        )
+      }
+      {
+        !selectedTagsLength && (
+          <div className='p-0.5'>
+            <RiArrowDownSLine className='size-4 text-text-tertiary' />
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(MarketplaceTrigger)

dify/web/app/components/plugins/marketplace/search-box/trigger/tool-selector.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import type { Tag } from '../../../hooks'
+import cn from '@/utils/classnames'
+import { RiCloseCircleFill, RiPriceTag3Line } from '@remixicon/react'
+
+type ToolSelectorTriggerProps = {
+  selectedTagsLength: number
+  open: boolean
+  tags: string[]
+  tagsMap: Record<string, Tag>
+  onTagsChange: (tags: string[]) => void
+}
+
+const ToolSelectorTrigger = ({
+  selectedTagsLength,
+  open,
+  tags,
+  tagsMap,
+  onTagsChange,
+}: ToolSelectorTriggerProps) => {
+  return (
+    <div className={cn(
+      'flex h-7 cursor-pointer select-none items-center rounded-md p-0.5 text-text-tertiary',
+      !selectedTagsLength && 'py-1 pl-1.5 pr-2',
+      !!selectedTagsLength && 'border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg py-0.5 pl-1 pr-1.5 shadow-xs shadow-shadow-shadow-3',
+      open && !selectedTagsLength && 'bg-state-base-hover',
+    )}
+    >
+      <div className='p-0.5'>
+        <RiPriceTag3Line className={cn('size-4', !!selectedTagsLength && 'text-text-secondary')} />
+      </div>
+      {
+        !!selectedTagsLength && (
+          <div className='system-sm-medium flex items-center gap-x-0.5 px-0.5 py-1'>
+            <span className='text-text-secondary'>
+              {tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')}
+            </span>
+            {
+              selectedTagsLength > 2 && (
+                <div className='system-xs-medium text-text-tertiary'>
+                  +{selectedTagsLength - 2}
+                </div>
+              )
+            }
+          </div>
+        )
+      }
+      {
+        !!selectedTagsLength && (
+          <RiCloseCircleFill
+            className='size-4 text-text-quaternary'
+            onClick={(e) => {
+              e.stopPropagation()
+              onTagsChange([])
+            }}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default React.memo(ToolSelectorTrigger)