opensource
/
dify
mirror of https://github.com/langgenius/dify.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Yi 2024-11-07 11:37:21 +08:00
parent e99e87269e b1242ba1ac
commit 6c47e0b5d1
9 changed files with 83 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/(commonLayout)/datasets/Container.tsx
View File

@ -5,7 +5,6 @@ import { useEffect, useMemo, useRef, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useDebounceFn } from 'ahooks'
import useSWR from 'swr'
// Components
import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
@ -28,6 +27,7 @@ import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
import { useAppContext } from '@/context/app-context'
import { useExternalApiPanel } from '@/context/external-api-panel-context'
import { useQuery } from '@tanstack/react-query'
const Container = () => {
const { t } = useTranslation()
@ -47,7 +47,13 @@ const Container = () => {
defaultTab: 'dataset',
})
const containerRef = useRef<HTMLDivElement>(null)
const { data } = useSWR(activeTab === 'dataset' ? null : '/datasets/api-base-info', fetchDatasetApiBaseUrl)
const { data } = useQuery(
{
queryKey: ['datasetApiBaseInfo', activeTab],
queryFn: () => fetchDatasetApiBaseUrl('/datasets/api-base-info'),
enabled: activeTab !== 'dataset',
},
)
const [keywords, setKeywords] = useState('')
const [searchKeywords, setSearchKeywords] = useState('')

5
web/app/(commonLayout)/layout.tsx
View File

@ -8,6 +8,7 @@ import Header from '@/app/components/header'
import { EventEmitterContextProvider } from '@/context/event-emitter'
import { ProviderContextProvider } from '@/context/provider-context'
import { ModalContextProvider } from '@/context/modal-context'
import { TanstackQueryIniter } from '@/context/query-client'
const Layout = ({ children }: { children: ReactNode }) => {
return (
@ -21,7 +22,9 @@ const Layout = ({ children }: { children: ReactNode }) => {
<HeaderWrapper>
<Header />
</HeaderWrapper>
{children}
<TanstackQueryIniter>
{children}
</TanstackQueryIniter>
</ModalContextProvider>
</ProviderContextProvider>
</EventEmitterContextProvider>

6
web/app/components/plugins/base/key-value-item.tsx
View File

@ -2,7 +2,6 @@
import type { FC } from 'react'
import React, { useCallback, useEffect, useState } from 'react'
import copy from 'copy-to-clipboard'
import {
RiClipboardLine,
} from '@remixicon/react'
@ -11,16 +10,19 @@ import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
import Tooltip from '../../base/tooltip'
import cn from '@/utils/classnames'
import ActionButton from '@/app/components/base/action-button'
type Props = {
label: string
labelWidthClassName?: string
value: string
valueMaxWidthClassName?: string
}
const KeyValueItem: FC<Props> = ({
label,
labelWidthClassName = 'w-10',
value,
valueMaxWidthClassName = 'max-w-[162px]',
}) => {
const { t } = useTranslation()
const [isCopied, setIsCopied] = useState(false)
@ -46,7 +48,7 @@ const KeyValueItem: FC<Props> = ({
<div className='flex items-center gap-1'>
<span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
<div className='flex justify-center items-center gap-0.5'>
<span className='max-w-[162px] truncate system-xs-medium text-text-secondary'>
<span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
{value}
</span>
<Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>

5
web/app/components/plugins/plugin-page/context.tsx
View File

@ -27,6 +27,7 @@ export type PluginPageContextValue = {
setCurrentPluginDetail: (plugin: PluginDetail) => void
installedPluginList: PluginDetail[]
mutateInstalledPluginList: () => void
isPluginListLoading: boolean
filters: FilterState
setFilters: (filter: FilterState) => void
activeTab: string
@ -45,6 +46,7 @@ export const PluginPageContext = createContext<PluginPageContextValue>({
setCurrentPluginDetail: () => {},
installedPluginList: [],
mutateInstalledPluginList: () => {},
isPluginListLoading: true,
filters: {
categories: [],
tags: [],
@ -78,7 +80,7 @@ export const PluginPageContextProvider = ({
tags: [],
searchQuery: '',
})
const { data, mutate: mutateInstalledPluginList } = useSWR({ url: '/workspaces/current/plugin/list' }, fetchInstalledPluginList)
const { data, mutate: mutateInstalledPluginList, isLoading: isPluginListLoading } = useSWR({ url: '/workspaces/current/plugin/list' }, fetchInstalledPluginList)
const [currentPluginDetail, setCurrentPluginDetail] = useState<PluginDetail | undefined>()
const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
@ -106,6 +108,7 @@ export const PluginPageContextProvider = ({
setCurrentPluginDetail,
installedPluginList: data?.plugins || [],
mutateInstalledPluginList,
isPluginListLoading,
filters,
setFilters,
activeTab,

3
web/app/components/plugins/plugin-page/plugin-info.tsx
View File

@ -4,6 +4,7 @@ import React from 'react'
import { useTranslation } from 'react-i18next'
import KeyValueItem from '../base/key-value-item'
import Modal from '../../base/modal'
import { convertRepoToUrl } from '../install-plugin/utils'
const i18nPrefix = 'plugin.pluginInfoModal'
type Props = {
@ -30,7 +31,7 @@ const PlugInfo: FC<Props> = ({
closable
>
<div className='mt-5 space-y-3'>
{repository && <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={repository} />}
{repository && <KeyValueItem label={t(`${i18nPrefix}.repository`)} labelWidthClassName={labelWidthClassName} value={`${convertRepoToUrl(repository)}`} valueMaxWidthClassName='max-w-[190px]' />}
{release && <KeyValueItem label={t(`${i18nPrefix}.release`)} labelWidthClassName={labelWidthClassName} value={release} />}
{packageName && <KeyValueItem label={t(`${i18nPrefix}.packageName`)} labelWidthClassName={labelWidthClassName} value={packageName} />}
</div>

4
web/app/components/plugins/plugin-page/plugins-panel.tsx
View File

@ -8,10 +8,12 @@ import PluginDetailPanel from '@/app/components/plugins/plugin-detail-panel'
import { usePluginPageContext } from './context'
import { useDebounceFn } from 'ahooks'
import Empty from './empty'
import Loading from '../../base/loading'
const PluginsPanel = () => {
const [filters, setFilters] = usePluginPageContext(v => [v.filters, v.setFilters]) as [FilterState, (filter: FilterState) => void]
const pluginList = usePluginPageContext(v => v.installedPluginList) as PluginDetail[]
const isPluginListLoading = usePluginPageContext(v => v.isPluginListLoading)
const mutateInstalledPluginList = usePluginPageContext(v => v.mutateInstalledPluginList)
const { run: handleFilterChange } = useDebounceFn((filters: FilterState) => {
@ -38,7 +40,7 @@ const PluginsPanel = () => {
onFilterChange={handleFilterChange}
/>
</div>
{filteredList.length > 0 ? (
{isPluginListLoading ? <Loading type='app' /> : filteredList.length > 0 ? (
<div className='flex px-12 items-start content-start gap-2 flex-grow self-stretch flex-wrap'>
<div className='w-full'>
<List pluginList={filteredList} />

15
web/context/query-client.tsx Normal file
View File

@ -0,0 +1,15 @@
'use client'
import type { FC, PropsWithChildren } from 'react'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
const client = new QueryClient()
export const TanstackQueryIniter: FC <PropsWithChildren> = (props) => {
const { children } = props
return <QueryClientProvider client={client}>
{children}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
}

2
web/package.json
View File

@ -44,6 +44,8 @@
"@svgdotjs/svg.js": "^3.2.4",
"@tailwindcss/line-clamp": "^0.4.4",
"@tailwindcss/typography": "^0.5.9",
"@tanstack/react-query": "^5.59.20",
"@tanstack/react-query-devtools": "^5.59.20",
"ahooks": "^3.8.1",
"class-variance-authority": "^0.7.0",
"classnames": "^2.5.1",

44
web/pnpm-lock.yaml
View File

@ -73,6 +73,12 @@ importers:
'@tailwindcss/typography':
specifier: ^0.5.9
version: 0.5.15(tailwindcss@3.4.14(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5)))
'@tanstack/react-query':
specifier: ^5.59.20
version: 5.59.20(react@18.2.0)
'@tanstack/react-query-devtools':
specifier: ^5.59.20
version: 5.59.20(@tanstack/react-query@5.59.20(react@18.2.0))(react@18.2.0)
ahooks:
specifier: ^3.8.1
version: 3.8.1(react@18.2.0)
@ -2377,6 +2383,23 @@ packages:
peerDependencies:
tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20'
'@tanstack/query-core@5.59.20':
resolution: {integrity: sha512-e8vw0lf7KwfGe1if4uPFhvZRWULqHjFcz3K8AebtieXvnMOz5FSzlZe3mTLlPuUBcydCnBRqYs2YJ5ys68wwLg==}
'@tanstack/query-devtools@5.59.20':
resolution: {integrity: sha512-vxhuQ+8VV4YWQSFxQLsuM+dnEKRY7VeRzpNabFXdhEwsBYLrjXlF1pM38A8WyKNLqZy8JjyRO8oP4Wd/oKHwuQ==}
'@tanstack/react-query-devtools@5.59.20':
resolution: {integrity: sha512-AL/eQS1NFZhwwzq2Bq9Gd8wTTH+XhPNOJlDFpzPMu9NC5CQVgA0J8lWrte/sXpdWNo5KA4hgHnEdImZsF4h6Lw==}
peerDependencies:
'@tanstack/react-query': ^5.59.20
react: ^18 || ^19
'@tanstack/react-query@5.59.20':
resolution: {integrity: sha512-Zly0egsK0tFdfSbh5/mapSa+Zfc3Et0Zkar7Wo5sQkFzWyB3p3uZWOHR2wrlAEEV2L953eLuDBtbgFvMYiLvUw==}
peerDependencies:
react: ^18 || ^19
'@tanstack/react-virtual@3.10.8':
resolution: {integrity: sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==}
peerDependencies:
@ -10699,6 +10722,21 @@ snapshots:
postcss-selector-parser: 6.0.10
tailwindcss: 3.4.14(ts-node@10.9.2(@types/node@18.15.0)(typescript@4.9.5))
'@tanstack/query-core@5.59.20': {}
'@tanstack/query-devtools@5.59.20': {}
'@tanstack/react-query-devtools@5.59.20(@tanstack/react-query@5.59.20(react@18.2.0))(react@18.2.0)':
dependencies:
'@tanstack/query-devtools': 5.59.20
'@tanstack/react-query': 5.59.20(react@18.2.0)
react: 18.2.0
'@tanstack/react-query@5.59.20(react@18.2.0)':
dependencies:
'@tanstack/query-core': 5.59.20
react: 18.2.0
'@tanstack/react-virtual@3.10.8(react-dom@18.2.0(react@18.2.0))(react@18.2.0)':
dependencies:
'@tanstack/virtual-core': 3.10.8
@ -12844,7 +12882,7 @@ snapshots:
debug: 4.3.7
enhanced-resolve: 5.17.1
eslint: 9.13.0(jiti@1.21.6)
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@1.21.6))
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import-x@4.3.1(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))
fast-glob: 3.3.2
get-tsconfig: 4.8.1
is-bun-module: 1.2.1
@ -12862,7 +12900,7 @@ snapshots:
dependencies:
eslint: 9.13.0(jiti@1.21.6)
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@1.21.6)):
eslint-module-utils@2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import-x@4.3.1(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6)):
dependencies:
debug: 3.2.7
optionalDependencies:
@ -12918,7 +12956,7 @@ snapshots:
doctrine: 2.1.0
eslint: 9.13.0(jiti@1.21.6)
eslint-import-resolver-node: 0.3.9
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@9.13.0(jiti@1.21.6))
eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.11.0(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import-x@4.3.1(eslint@9.13.0(jiti@1.21.6))(typescript@4.9.5))(eslint-plugin-import@2.31.0)(eslint@9.13.0(jiti@1.21.6)))(eslint@9.13.0(jiti@1.21.6))
hasown: 2.0.2
is-core-module: 2.15.1
is-glob: 4.0.3