Merge branch 'feat/plugins' of https://github.com/langgenius/dify into feat/plugins

2025-01-07 11:57:40 +08:00 · 2025-01-07 11:57:40 +08:00 · 4c5fa00c50
parent 910e6d17d3 275696edba
commit 4c5fa00c50
12 changed files with 65 additions and 31 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/chartView.tsx
@ -46,7 +46,7 @@ export default function ChartView({ appId }: IChartViewProps) {

  return (
    <div>
-      <div className='flex flex-row items-center mt-8 mb-4 text-gray-900 text-base'>
+      <div className='flex flex-row items-center mt-8 mb-4 system-xl-semibold text-text-primary'>
        <span className='mr-3'>{t('appOverview.analysis.title')}</span>
        <SimpleSelect
          items={Object.entries(TIME_PERIOD_MAPPING).map(([k, v]) => ({ value: k, name: t(`appLog.filter.period.${v.name}`) }))}
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/overview/page.tsx
@ -12,7 +12,7 @@ const Overview = async ({
  params: { appId },
 }: IDevelopProps) => {
  return (
-    <div className="h-full px-4 sm:px-16 py-6 overflow-scroll">
+    <div className="h-full px-4 sm:px-12 py-6 overflow-scroll bg-chatbot-bg">
      <ApikeyInfoPanel />
      <TracingPanel />
      <CardView appId={appId} />
--- a/web/app/components/app-sidebar/basic.tsx
+++ b/web/app/components/app-sidebar/basic.tsx
@ -60,18 +60,18 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
  return (
    <div className="flex items-start p-1">
      {icon && icon_background && iconType === 'app' && (
-        <div className='flex-shrink-0 mr-3'>
+        <div className='shrink-0 mr-3'>
          <AppIcon icon={icon} background={icon_background} />
        </div>
      )}
      {iconType !== 'app'
-        && <div className='flex-shrink-0 mr-3'>
+        && <div className='shrink-0 mr-3'>
          {ICON_MAP[iconType]}
        </div>

      }
      {mode === 'expand' && <div className="group">
-        <div className={`flex flex-row items-center text-sm font-semibold text-gray-700 group-hover:text-gray-900 break-all ${textStyle?.main ?? ''}`}>
+        <div className={`flex flex-row items-center text-sm font-semibold text-text-secondary group-hover:text-text-primary break-all ${textStyle?.main ?? ''}`}>
          {name}
          {hoverTip
            && <Tooltip
@ -86,7 +86,7 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
            />
          }
        </div>
-        <div className={`text-xs font-normal text-gray-500 group-hover:text-gray-700 break-all ${textStyle?.extra ?? ''}`}>{type}</div>
+        <div className={`text-xs font-normal text-text-tertiary group-hover:text-text-secondary break-all ${textStyle?.extra ?? ''}`}>{type}</div>
        <div className='text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : ''}</div>
      </div>}
    </div>
--- a/web/app/components/app/overview/appChart.tsx
+++ b/web/app/components/app/overview/appChart.tsx
@ -231,7 +231,7 @@ const Chart: React.FC<IChartProps> = ({
  const sumData = isAvg ? (sum(yData) / yData.length) : sum(yData)

  return (
-    <div className={`flex flex-col w-full px-6 py-4 border-[0.5px] rounded-lg border-gray-200 shadow-xs ${className ?? ''}`}>
+    <div className={`flex flex-col w-full px-6 py-4 rounded-xl bg-components-chart-bg shadow-xs ${className ?? ''}`}>
      <div className='mb-3'>
        <Basic name={title} type={timePeriod} hoverTip={explanation} />
      </div>
@ -242,11 +242,11 @@ const Chart: React.FC<IChartProps> = ({
          type={!CHART_TYPE_CONFIG[chartType].showTokens
            ? ''
            : <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
-              <span className='ml-1 text-gray-500'>(</span>
+              <span className='ml-1 text-text-tertiary'>(</span>
              <span className='text-orange-400'>~{sum(statistics.map(item => Number.parseFloat(get(item, 'total_price', '0')))).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 4 })}</span>
-              <span className='text-gray-500'>)</span>
+              <span className='text-text-tertiary'>)</span>
            </span></span>}
-          textStyle={{ main: `!text-3xl !font-normal ${sumData === 0 ? '!text-gray-300' : ''}` }} />
+          textStyle={{ main: `!text-3xl !font-normal ${sumData === 0 ? '!text-text-quaternary' : ''}` }} />
      </div>
      <ReactECharts option={options} style={{ height: 160 }} />
    </div>
--- a/web/app/components/base/modal/index.tsx
+++ b/web/app/components/base/modal/index.tsx
@ -29,7 +29,7 @@ export default function Modal({
 }: IModal) {
  return (
    <Transition appear show={isShow} as={Fragment}>
-      <Dialog as="div" className={classNames('relative z-50', wrapperClassName)} onClose={onClose}>
+      <Dialog as="div" className={classNames('relative z-[60]', wrapperClassName)} onClose={onClose}>
        <Transition.Child
          as={Fragment}
          enter="ease-out duration-300"
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@ -245,7 +245,7 @@ const SimpleSelect: FC<ISelectProps> = ({
            leaveTo="opacity-0"
          >

-            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
+            <Listbox.Options className={classNames('absolute z-10 mt-1 px-1 max-h-60 w-full overflow-auto rounded-md bg-components-panel-bg-blur backdrop-blur-sm py-1 text-base shadow-lg border-components-panel-border border-[0.5px] focus:outline-none sm:text-sm', optionWrapClassName)}>
              {items.map((item: Item) => (
                <Listbox.Option
                  key={item.value}
--- 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
@ -28,7 +28,6 @@ const ModelIcon: FC<ModelIconProps> = ({

  if (provider?.icon_small) {
    return (
-
      <div className={`flex items-center justify-center ${isDeprecated ? 'opacity-50' : ''}`}>
        <img
          alt='model-icon'
@ -44,8 +43,8 @@ const ModelIcon: FC<ModelIconProps> = ({
      'flex items-center justify-center rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
      className,
    )}>
-      <div className='flex w-5 h5 items-center justify-center opacity-35'>
-        <Group className='text-text-tertiary' />
+      <div className='flex w-5 h-5 items-center justify-center opacity-35'>
+        <Group className='text-text-tertiary w-3 h-3' />
      </div>
    </div>
  )
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup-item.tsx
@ -91,7 +91,7 @@ const PopupItem: FC<PopupItemProps> = ({
            popupClassName='p-3 !w-[206px] bg-components-panel-bg-blur backdrop-blur-sm border-[0.5px] border-components-panel-border rounded-xl'
            popupContent={
              <div className='flex flex-col gap-1'>
-                <div className='flex flex-col gap-2'>
+                <div className='flex flex-col items-start gap-2'>
                  <ModelIcon
                    className={cn('shrink-0 w-5 h-5')}
                    provider={model}
--- a/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-selector/popup.tsx
@ -106,7 +106,7 @@ const Popup: FC<PopupProps> = ({
          )
        }
      </div>
-      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only' onClick={() => {
+      <div className='sticky bottom-0 px-4 py-2 flex items-center border-t border-divider-subtle cursor-pointer text-text-accent-light-mode-only bg-components-panel-bg rounded-b-lg' onClick={() => {
        onHide()
        setShowAccountSettingModal({ payload: 'provider' })
      }}>
--- a/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/system-model-selector/index.tsx
@ -139,7 +139,7 @@ const SystemModel: FC<SystemModelSelectorProps> = ({
          {t('common.modelProvider.systemModelSettings')}
        </Button>
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className='z-[60]'>
        <div className='pt-4 w-[360px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl'>
          <div className='px-6 py-1'>
            <div className='flex items-center h-8 text-[13px] font-medium text-text-primary'>
--- a/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
+++ b/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx
@ -0,0 +1,43 @@
+import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { useProviderContext } from '@/context/provider-context'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateStrategyProviders } from '@/service/use-strategy'
+import type { Plugin, PluginManifestInMarket } from '../../types'
+import { PluginType } from '../../types'
+
+const useRefreshPluginList = () => {
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const updateModelProviders = useUpdateModelProviders()
+  const { refreshModelProviders } = useProviderContext()
+
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools()
+
+  const invalidateStrategyProviders = useInvalidateStrategyProviders()
+  return {
+    refreshPluginList: (manifest: PluginManifestInMarket | Plugin) => {
+      // installed list
+      invalidateInstalledPluginList()
+
+      // tool page, tool select
+      if (PluginType.tool.includes(manifest.category)) {
+        invalidateAllToolProviders()
+        invalidateAllBuiltInTools()
+        // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
+      }
+
+      // model select
+      if (PluginType.model.includes(manifest.category)) {
+        updateModelProviders()
+        refreshModelProviders()
+      }
+
+      // agent select
+      if (PluginType.agent.includes(manifest.category))
+        invalidateStrategyProviders()
+    },
+  }
+}
+
+export default useRefreshPluginList
--- a/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
@ -3,13 +3,11 @@
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
 import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
-import { InstallStep, PluginType } from '../../types'
+import { InstallStep } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
 import { useTranslation } from 'react-i18next'
-import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
-import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
-import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
 import ReadyToInstallBundle from '../install-bundle/ready-to-install'

 const i18nPrefix = 'plugin.installModal'
@ -35,9 +33,7 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
  // readyToInstall -> check installed -> installed/failed
  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
  const [errorMsg, setErrorMsg] = useState<string | null>(null)
-  const updateModelProviders = useUpdateModelProviders()
-  const invalidateAllToolProviders = useInvalidateAllToolProviders()
-  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const { refreshPluginList } = useRefreshPluginList()

  const getTitle = useCallback(() => {
    if (isBundle && step === InstallStep.installed)
@ -51,12 +47,8 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({

  const handleInstalled = useCallback(() => {
    setStep(InstallStep.installed)
-    invalidateInstalledPluginList()
-    if (PluginType.model.includes(manifest.category))
-      updateModelProviders()
-    if (PluginType.tool.includes(manifest.category))
-      invalidateAllToolProviders()
-  }, [invalidateAllToolProviders, invalidateInstalledPluginList, manifest, updateModelProviders])
+    refreshPluginList(manifest)
+  }, [manifest, refreshPluginList])

  const handleFailed = useCallback((errorMsg?: string) => {
    setStep(InstallStep.installFailed)