dify/web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx

'use client'
import type { FC } from 'react'
import type { PluginCategoryEnum } from '../../types'
import { Button } from '@langgenius/dify-ui/button'
import { RiAddLine } from '@remixicon/react'
import { useBoolean } from 'ahooks'
import * as React from 'react'
import { useCallback, useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { useInstalledPluginList } from '@/service/use-plugins'
import NoPluginSelected from './no-plugin-selected'
import PluginsSelected from './plugins-selected'
import ToolPicker from './tool-picker'
import { AUTO_UPDATE_MODE } from './types'

const i18nPrefix = 'autoUpdate'

type Props = Readonly<{
  updateMode: AUTO_UPDATE_MODE
  value: string[] // plugin ids
  onChange: (value: string[]) => void
  integrationCategory?: PluginCategoryEnum
}>

const PluginsPicker: FC<Props> = ({
  updateMode,
  value,
  onChange,
  integrationCategory,
}) => {
  const { t } = useTranslation()
  const { data } = useInstalledPluginList()
  const pluginCategoryById = useMemo(() => {
    return new Map(data?.plugins.map(plugin => [plugin.plugin_id, plugin.declaration.category]))
  }, [data?.plugins])
  const isCurrentCategoryPlugin = useCallback((pluginId: string) => {
    if (!integrationCategory)
      return true

    return pluginCategoryById.get(pluginId) === integrationCategory
  }, [integrationCategory, pluginCategoryById])
  const visiblePlugins = useMemo(() => {
    return value.filter(isCurrentCategoryPlugin)
  }, [isCurrentCategoryPlugin, value])
  const hiddenPlugins = useMemo(() => {
    if (!integrationCategory)
      return []

    return value.filter(plugin => !isCurrentCategoryPlugin(plugin))
  }, [integrationCategory, isCurrentCategoryPlugin, value])
  const hasSelected = visiblePlugins.length > 0
  const isExcludeMode = updateMode === AUTO_UPDATE_MODE.exclude
  const handleClear = () => {
    onChange(hiddenPlugins)
  }
  const handleVisiblePluginsChange = useCallback((newVisiblePlugins: string[]) => {
    onChange(integrationCategory
      ? [...hiddenPlugins, ...newVisiblePlugins.filter(plugin => !hiddenPlugins.includes(plugin))]
      : newVisiblePlugins)
  }, [hiddenPlugins, integrationCategory, onChange])

  const [isShowToolPicker, {
    set: setToolPicker,
  }] = useBoolean(false)
  return (
    <div className="mt-2 flex w-full flex-col gap-2 rounded-[10px] bg-background-section-burn p-2.5">
      {hasSelected
        ? (
            <div className="flex items-center justify-between gap-3">
              <div className="min-w-0 flex-1 system-xs-medium text-text-tertiary">
                {t(`${i18nPrefix}.${isExcludeMode ? 'excludeUpdate' : 'partialUPdate'}`, {
                  ns: 'plugin',
                  count: visiblePlugins.length,
                  num: visiblePlugins.length,
                })}
              </div>
              <button
                type="button"
                className="shrink-0 cursor-pointer border-none bg-transparent p-0 text-left system-xs-medium text-text-tertiary hover:text-text-secondary focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
                onClick={handleClear}
              >
                {t(`${i18nPrefix}.operation.clearAll`, { ns: 'plugin' })}
              </button>
            </div>
          )
        : (
            <NoPluginSelected updateMode={updateMode} />
          )}

      {hasSelected && (
        <PluginsSelected
          className="h-6 w-full gap-1"
          plugins={visiblePlugins}
        />
      )}

      <ToolPicker
        trigger={(
          <Button className="h-6 w-full gap-1" size="small" variant="secondary-accent">
            <RiAddLine className="size-3.5" />
            {t(`${i18nPrefix}.operation.select`, { ns: 'plugin' })}
          </Button>
        )}
        value={visiblePlugins}
        onChange={handleVisiblePluginsChange}
        isShow={isShowToolPicker}
        onShowChange={setToolPicker}
        integrationCategory={integrationCategory}
      />
    </div>
  )
}
export default React.memo(PluginsPicker)