chore: add plugin panel

2025-08-14 09:36:13 +08:00 · 2024-10-18 14:02:40 +08:00 · 2024-10-18 14:02:40 +08:00 · 425f624de5
commit 425f624de5
parent b1919745e2
10 changed files with 433 additions and 20 deletions
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@ -111,11 +111,11 @@ const TagsFilter = ({
                <div
                  key={option.value}
                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  onClick={() => handleCheck(option.value)}
                >
                  <Checkbox
                    className='mr-1'
                    checked={value.includes(option.value)}
-                    onCheck={() => handleCheck(option.value)}
                  />
                  <div className='px-1 system-sm-medium text-text-secondary'>
                    {option.text}
--- a/web/app/components/plugins/plugin-item/index.tsx
+++ b/web/app/components/plugins/plugin-item/index.tsx
@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useContext } from 'use-context-selector'
-import { RiArrowRightUpLine, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
+import { RiArrowRightUpLine, RiBugLine, RiHardDrive3Line, RiLoginCircleLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { Github } from '../../base/icons/src/public/common'
 import Badge from '../../base/badge'
@ -19,12 +19,14 @@ import I18n from '@/context/i18n'
 type Props = {
  className?: string
  payload: Plugin
+  source: 'github' | 'marketplace' | 'local' | 'debug'
  onDelete: () => void
 }

 const PluginItem: FC<Props> = ({
  className,
  payload,
+  source,
  onDelete,
 }) => {
  const { locale } = useContext(I18n)
@ -34,7 +36,11 @@ const PluginItem: FC<Props> = ({
  const hasNewVersion = payload.latest_version !== payload.version

  return (
-    <div className='p-1 bg-background-section-burn rounded-xl'>
+    <div className={`p-1 ${source === 'debug'
+      ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
+      : 'bg-background-section-burn'} 
+      rounded-xl`}
+    >
      <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
        <CornerMark text={type} />
        {/* Header */}
@ -77,12 +83,42 @@ const PluginItem: FC<Props> = ({
        </div>

        <div className='flex items-center'>
-          <a href='' target='_blank' className='mr-1 text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</a>
-          <div className='flex items-center space-x-0.5 text-text-secondary'>
-            <Github className='ml-1 w-3 h-3' />
-            <div className='system-2xs-semibold-uppercase'>GitHub</div>
-            <RiArrowRightUpLine className='w-3 h-3' />
-          </div>
+          {source === 'github'
+            && <>
+              <a href='' target='_blank' className='flex items-center gap-1'>
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
+                <div className='flex items-center space-x-0.5 text-text-secondary'>
+                  <Github className='w-3 h-3' />
+                  <div className='system-2xs-semibold-uppercase'>GitHub</div>
+                  <RiArrowRightUpLine className='w-3 h-3' />
+                </div>
+              </a>
+            </>
+          }
+          {source === 'marketplace'
+            && <>
+              <a href='' target='_blank' className='flex items-center gap-0.5'>
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
+                <RiArrowRightUpLine className='w-3 h-3' />
+              </a>
+            </>
+          }
+          {source === 'local'
+            && <>
+              <div className='flex items-center gap-1'>
+                <RiHardDrive3Line className='text-text-tertiary w-3 h-3' />
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>Local Plugin</div>
+              </div>
+            </>
+          }
+          {source === 'debug'
+            && <>
+              <div className='flex items-center gap-1'>
+                <RiBugLine className='w-3 h-3 text-text-warning' />
+                <div className='text-text-warning system-2xs-medium-uppercase'>Debugging Plugin</div>
+              </div>
+            </>
+          }
        </div>
      </div>
    </div>
--- a/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/category-filter.tsx
@ -0,0 +1,136 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCloseCircleFill,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Checkbox from '@/app/components/base/checkbox'
+import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
+
+type CategoriesFilterProps = {
+  value: string[]
+  onChange: (categories: string[]) => void
+}
+const CategoriesFilter = ({
+  value,
+  onChange,
+}: CategoriesFilterProps) => {
+  const [open, setOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const options = [
+    {
+      value: 'model',
+      text: 'Model',
+    },
+    {
+      value: 'tool',
+      text: 'Tool',
+    },
+    {
+      value: 'extension',
+      text: 'Extension',
+    },
+    {
+      value: 'bundle',
+      text: 'Bundle',
+    },
+  ]
+  const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase()))
+  const handleCheck = (id: string) => {
+    if (value.includes(id))
+      onChange(value.filter(tag => tag !== id))
+    else
+      onChange([...value, id])
+  }
+  const selectedTagsLength = value.length
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn(
+          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
+          selectedTagsLength && 'text-text-secondary',
+          open && 'bg-state-base-hover',
+        )}>
+          <div className={cn(
+            'flex items-center p-1 system-sm-medium',
+          )}>
+            {
+              !selectedTagsLength && 'All Categories'
+            }
+            {
+              !!selectedTagsLength && value.slice(0, 2).join(',')
+            }
+            {
+              selectedTagsLength > 2 && (
+                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                  +{selectedTagsLength - 2}
+                </div>
+              )
+            }
+          </div>
+          {
+            !!selectedTagsLength && (
+              <RiCloseCircleFill
+                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                onClick={() => onChange([])}
+              />
+            )
+          }
+          {
+            !selectedTagsLength && (
+              <RiArrowDownSLine className='w-4 h-4' />
+            )
+          }
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              placeholder='Search categories'
+            />
+          </div>
+          <div className='p-1 max-h-[448px] overflow-y-auto'>
+            {
+              filteredOptions.map(option => (
+                <div
+                  key={option.value}
+                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  onClick={() => handleCheck(option.value)}
+                >
+                  <Checkbox
+                    className='mr-1'
+                    checked={value.includes(option.value)}
+                  />
+                  <div className='px-1 system-sm-medium text-text-secondary'>
+                    {option.text}
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default CategoriesFilter
--- a/web/app/components/plugins/plugin-page/filter-management/constant.ts
+++ b/web/app/components/plugins/plugin-page/filter-management/constant.ts
@ -0,0 +1,11 @@
+export type Tag = {
+  id: string
+  name: string
+  type: string
+  binding_count: number
+}
+
+export type Category = {
+  name: 'model' | 'tool' | 'extension' | 'bundle'
+  binding_count: number
+}
--- a/web/app/components/plugins/plugin-page/filter-management/index.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/index.tsx
@ -0,0 +1,47 @@
+import React, { useState } from 'react'
+import CategoriesFilter from './category-filter'
+import TagFilter from './tag-filter'
+import SearchBox from './search-box'
+
+export type FilterState = {
+  categories: string[]
+  tags: string[]
+  searchQuery: string
+}
+
+type FilterManagementProps = {
+  onFilterChange: (filters: FilterState) => void
+}
+
+const FilterManagement: React.FC<FilterManagementProps> = ({ onFilterChange }) => {
+  const [filters, setFilters] = useState<FilterState>({
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  })
+
+  const updateFilters = (newFilters: Partial<FilterState>) => {
+    const updatedFilters = { ...filters, ...newFilters }
+    setFilters(updatedFilters)
+    onFilterChange(updatedFilters)
+  }
+
+  return (
+    <div className='flex items-center gap-2 self-stretch'>
+      <CategoriesFilter
+        value={filters.categories}
+        onChange={categories => updateFilters({ categories })}
+      />
+      <TagFilter
+        value={filters.tags}
+        onChange={tags => updateFilters({ tags })}
+      />
+      <SearchBox
+        searchQuery={filters.searchQuery}
+        onChange={searchQuery => updateFilters({ searchQuery })}
+      />
+    </div>
+  )
+}
+
+export default FilterManagement
--- a/web/app/components/plugins/plugin-page/filter-management/search-box.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/search-box.tsx
@ -0,0 +1,26 @@
+'use client'
+
+import Input from '@/app/components/base/input'
+type SearchBoxProps = {
+  searchQuery: string
+  onChange: (query: string) => void
+}
+
+const SearchBox: React.FC<SearchBoxProps> = ({
+  searchQuery,
+  onChange,
+}) => {
+  return (
+    <Input
+      wrapperClassName='flex w-[200px] items-center rounded-lg bg-components-input-bg-normal'
+      showLeftIcon
+      value={searchQuery}
+      placeholder='Search'
+      onChange={(e) => {
+        onChange(e.target.value)
+      }}
+    />
+  )
+}
+
+export default SearchBox
--- a/web/app/components/plugins/plugin-page/filter-management/store.ts
+++ b/web/app/components/plugins/plugin-page/filter-management/store.ts
@ -0,0 +1,27 @@
+import { create } from 'zustand'
+import type { Category, Tag } from './constant'
+
+type State = {
+  tagList: Tag[]
+  categoryList: Category[]
+  showTagManagementModal: boolean
+  showCategoryManagementModal: boolean
+}
+
+type Action = {
+  setTagList: (tagList?: Tag[]) => void
+  setCategoryList: (categoryList?: Category[]) => void
+  setShowTagManagementModal: (showTagManagementModal: boolean) => void
+  setShowCategoryManagementModal: (showCategoryManagementModal: boolean) => void
+}
+
+export const useStore = create<State & Action>(set => ({
+  tagList: [],
+  categoryList: [],
+  setTagList: tagList => set(() => ({ tagList })),
+  setCategoryList: categoryList => set(() => ({ categoryList })),
+  showTagManagementModal: false,
+  showCategoryManagementModal: false,
+  setShowTagManagementModal: showTagManagementModal => set(() => ({ showTagManagementModal })),
+  setShowCategoryManagementModal: showCategoryManagementModal => set(() => ({ showCategoryManagementModal })),
+}))
--- a/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
+++ b/web/app/components/plugins/plugin-page/filter-management/tag-filter.tsx
@ -0,0 +1,128 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCloseCircleFill,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Checkbox from '@/app/components/base/checkbox'
+import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
+
+type TagsFilterProps = {
+  value: string[]
+  onChange: (tags: string[]) => void
+}
+const TagsFilter = ({
+  value,
+  onChange,
+}: TagsFilterProps) => {
+  const [open, setOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const options = [
+    {
+      value: 'search',
+      text: 'Search',
+    },
+    {
+      value: 'image',
+      text: 'Image',
+    },
+  ]
+  const filteredOptions = options.filter(option => option.text.toLowerCase().includes(searchText.toLowerCase()))
+  const handleCheck = (id: string) => {
+    if (value.includes(id))
+      onChange(value.filter(tag => tag !== id))
+    else
+      onChange([...value, id])
+  }
+  const selectedTagsLength = value.length
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className={cn(
+          'flex items-center px-2 py-1 h-8 text-text-tertiary rounded-lg bg-components-input-bg-normal hover:bg-state-base-hover-alt cursor-pointer',
+          selectedTagsLength && 'text-text-secondary',
+          open && 'bg-state-base-hover',
+        )}>
+          <div className={cn(
+            'flex items-center p-1 system-sm-medium',
+          )}>
+            {
+              !selectedTagsLength && 'All Tags'
+            }
+            {
+              !!selectedTagsLength && value.slice(0, 2).join(',')
+            }
+            {
+              selectedTagsLength > 2 && (
+                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                  +{selectedTagsLength - 2}
+                </div>
+              )
+            }
+          </div>
+          {
+            !!selectedTagsLength && (
+              <RiCloseCircleFill
+                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                onClick={() => onChange([])}
+              />
+            )
+          }
+          {
+            !selectedTagsLength && (
+              <RiArrowDownSLine className='w-4 h-4' />
+            )
+          }
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-10'>
+        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              placeholder='Search tags'
+            />
+          </div>
+          <div className='p-1 max-h-[448px] overflow-y-auto'>
+            {
+              filteredOptions.map(option => (
+                <div
+                  key={option.value}
+                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  onClick={() => handleCheck(option.value)}
+                >
+                  <Checkbox
+                    className='mr-1'
+                    checked={value.includes(option.value)}
+                  />
+                  <div className='px-1 system-sm-medium text-text-secondary'>
+                    {option.text}
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TagsFilter
--- a/web/app/components/plugins/plugin-page/list/index.tsx
+++ b/web/app/components/plugins/plugin-page/list/index.tsx
@ -1,12 +1,7 @@
-import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import PluginItem from '../../plugin-item'
 import { customTool, extensionDallE, modelGPT4, toolNotion } from '@/app/components/plugins/card/card-mock'
-import I18n from '@/context/i18n'

 const PluginList = () => {
-  const { locale } = useContext(I18n)
-  const { t } = useTranslation()
  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]

  return (
@ -18,8 +13,7 @@ const PluginList = () => {
              key={index}
              payload={plugin as any}
              onDelete={() => {}}
-              pluginI8n={t}
-              locale={locale}
+              source={'debug'}
            />
          ))}
        </div>
--- a/web/app/components/plugins/plugin-page/plugins-panel.tsx
+++ b/web/app/components/plugins/plugin-page/plugins-panel.tsx
@ -1,18 +1,26 @@
 'use client'

+import type { FilterState } from './filter-management'
+import FilterManagement from './filter-management'
 import List from './list'

 const PluginsPanel = () => {
+  const handleFilterChange = (filters: FilterState) => {
+    //
+  }
+
  return (
    <>
      <div className='flex flex-col pt-1 pb-3 px-12 justify-center items-start gap-3 self-stretch'>
        <div className='h-px self-stretch bg-divider-subtle'></div>
-        <div className='flex items-center gap-2 self-stretch'>
-          {/* Filters go here */}
-        </div>
+        <FilterManagement
+          onFilterChange={handleFilterChange}
+        />
      </div>
      <div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
-        <List />
+        <div className='w-full'>
+          <List />
+        </div>
      </div>
    </>
  )