dify
This commit is contained in:
40
dify/web/app/components/datasets/extra-info/index.tsx
Normal file
40
dify/web/app/components/datasets/extra-info/index.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
import React from 'react'
|
||||
import type { RelatedAppResponse } from '@/models/datasets'
|
||||
import Statistics from './statistics'
|
||||
import ServiceApi from './service-api'
|
||||
import { useDatasetApiBaseUrl } from '@/service/knowledge/use-dataset'
|
||||
import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
|
||||
|
||||
type IExtraInfoProps = {
|
||||
relatedApps?: RelatedAppResponse
|
||||
documentCount?: number
|
||||
expand: boolean
|
||||
}
|
||||
|
||||
const ExtraInfo = ({
|
||||
relatedApps,
|
||||
documentCount,
|
||||
expand,
|
||||
}: IExtraInfoProps) => {
|
||||
const apiEnabled = useDatasetDetailContextWithSelector(state => state.dataset?.enable_api)
|
||||
const { data: apiBaseInfo } = useDatasetApiBaseUrl()
|
||||
|
||||
return (
|
||||
<>
|
||||
{expand && (
|
||||
<Statistics
|
||||
expand={expand}
|
||||
documentCount={documentCount}
|
||||
relatedApps={relatedApps}
|
||||
/>
|
||||
)}
|
||||
<ServiceApi
|
||||
expand={expand}
|
||||
apiBaseUrl={apiBaseInfo?.api_base_url ?? ''}
|
||||
apiEnabled={apiEnabled ?? false}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ExtraInfo)
|
||||
143
dify/web/app/components/datasets/extra-info/service-api/card.tsx
Normal file
143
dify/web/app/components/datasets/extra-info/service-api/card.tsx
Normal file
@@ -0,0 +1,143 @@
|
||||
import React, { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import Switch from '@/app/components/base/switch'
|
||||
import { useSelector as useAppContextSelector } from '@/context/app-context'
|
||||
import cn from '@/utils/classnames'
|
||||
import CopyFeedback from '@/app/components/base/copy-feedback'
|
||||
import Button from '@/app/components/base/button'
|
||||
import { RiBookOpenLine, RiKey2Line } from '@remixicon/react'
|
||||
import { useDisableDatasetServiceApi, useEnableDatasetServiceApi } from '@/service/knowledge/use-dataset'
|
||||
import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
|
||||
import Link from 'next/link'
|
||||
import SecretKeyModal from '@/app/components/develop/secret-key/secret-key-modal'
|
||||
import { useDatasetApiAccessUrl } from '@/hooks/use-api-access-url'
|
||||
|
||||
type CardProps = {
|
||||
apiEnabled: boolean
|
||||
apiBaseUrl: string
|
||||
}
|
||||
|
||||
const Card = ({
|
||||
apiEnabled,
|
||||
apiBaseUrl,
|
||||
}: CardProps) => {
|
||||
const { t } = useTranslation()
|
||||
const datasetId = useDatasetDetailContextWithSelector(state => state.dataset?.id)
|
||||
const mutateDatasetRes = useDatasetDetailContextWithSelector(state => state.mutateDatasetRes)
|
||||
const { mutateAsync: enableDatasetServiceApi } = useEnableDatasetServiceApi()
|
||||
const { mutateAsync: disableDatasetServiceApi } = useDisableDatasetServiceApi()
|
||||
const [isSecretKeyModalVisible, setIsSecretKeyModalVisible] = useState(false)
|
||||
|
||||
const isCurrentWorkspaceManager = useAppContextSelector(state => state.isCurrentWorkspaceManager)
|
||||
|
||||
const apiReferenceUrl = useDatasetApiAccessUrl()
|
||||
|
||||
const onToggle = useCallback(async (state: boolean) => {
|
||||
let result: 'success' | 'fail'
|
||||
if (state)
|
||||
result = (await enableDatasetServiceApi(datasetId ?? '')).result
|
||||
else
|
||||
result = (await disableDatasetServiceApi(datasetId ?? '')).result
|
||||
if (result === 'success')
|
||||
mutateDatasetRes?.()
|
||||
}, [datasetId, enableDatasetServiceApi, disableDatasetServiceApi])
|
||||
|
||||
const handleOpenSecretKeyModal = useCallback(() => {
|
||||
setIsSecretKeyModalVisible(true)
|
||||
}, [])
|
||||
|
||||
const handleCloseSecretKeyModal = useCallback(() => {
|
||||
setIsSecretKeyModalVisible(false)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className='flex w-[360px] flex-col rounded-xl border border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-1'>
|
||||
<div className='flex flex-col gap-y-3 p-4'>
|
||||
<div className='flex items-center gap-x-3'>
|
||||
<div className='flex grow items-center gap-x-2'>
|
||||
<div className='flex size-6 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-brand-blue-brand-500 shadow-md shadow-shadow-shadow-5'>
|
||||
<ApiAggregate className='size-4 text-text-primary-on-surface' />
|
||||
</div>
|
||||
<div className='system-sm-semibold grow truncate text-text-secondary'>
|
||||
{t('dataset.serviceApi.card.title')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<Indicator
|
||||
className='shrink-0'
|
||||
color={apiEnabled ? 'green' : 'yellow'}
|
||||
/>
|
||||
<div
|
||||
className={cn(
|
||||
'system-xs-semibold-uppercase',
|
||||
apiEnabled ? 'text-text-success' : 'text-text-warning',
|
||||
)}
|
||||
>
|
||||
{apiEnabled
|
||||
? t('dataset.serviceApi.enabled')
|
||||
: t('dataset.serviceApi.disabled')}
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
defaultValue={apiEnabled}
|
||||
onChange={onToggle}
|
||||
disabled={!isCurrentWorkspaceManager}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col'>
|
||||
<div className='system-xs-regular leading-6 text-text-tertiary'>
|
||||
{t('dataset.serviceApi.card.endpoint')}
|
||||
</div>
|
||||
<div className='flex h-8 items-center gap-0.5 rounded-lg bg-components-input-bg-normal p-1 pl-2'>
|
||||
<div className='flex h-4 min-w-0 flex-1 items-start justify-start gap-2 px-1'>
|
||||
<div className='system-xs-medium truncate text-text-secondary'>
|
||||
{apiBaseUrl}
|
||||
</div>
|
||||
</div>
|
||||
<CopyFeedback
|
||||
content={apiBaseUrl}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Actions */}
|
||||
<div className='flex gap-x-1 border-t-[0.5px] border-divider-subtle p-4'>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='gap-x-px text-text-tertiary'
|
||||
onClick={handleOpenSecretKeyModal}
|
||||
>
|
||||
<RiKey2Line className='size-3.5 shrink-0' />
|
||||
<span className='system-xs-medium px-[3px]'>
|
||||
{t('dataset.serviceApi.card.apiKey')}
|
||||
</span>
|
||||
</Button>
|
||||
<Link
|
||||
href={apiReferenceUrl}
|
||||
target='_blank'
|
||||
rel='noopener noreferrer'
|
||||
>
|
||||
<Button
|
||||
variant='ghost'
|
||||
size='small'
|
||||
className='gap-x-px text-text-tertiary'
|
||||
>
|
||||
<RiBookOpenLine className='size-3.5 shrink-0' />
|
||||
<span className='system-xs-medium px-[3px]'>
|
||||
{t('dataset.serviceApi.card.apiReference')}
|
||||
</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<SecretKeyModal
|
||||
isShow={isSecretKeyModalVisible}
|
||||
onClose={handleCloseSecretKeyModal}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Card)
|
||||
@@ -0,0 +1,66 @@
|
||||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ApiAggregate } from '@/app/components/base/icons/src/vender/knowledge'
|
||||
import Indicator from '@/app/components/header/indicator'
|
||||
import cn from '@/utils/classnames'
|
||||
import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '@/app/components/base/portal-to-follow-elem'
|
||||
import Card from './card'
|
||||
|
||||
type ServiceApiProps = {
|
||||
expand: boolean
|
||||
apiBaseUrl: string
|
||||
apiEnabled: boolean
|
||||
}
|
||||
|
||||
const ServiceApi = ({
|
||||
expand,
|
||||
apiBaseUrl,
|
||||
apiEnabled,
|
||||
}: ServiceApiProps) => {
|
||||
const { t } = useTranslation()
|
||||
const [open, setOpen] = useState(false)
|
||||
|
||||
const handleToggle = () => {
|
||||
setOpen(!open)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='p-3 pt-2'>
|
||||
<PortalToFollowElem
|
||||
open={open}
|
||||
onOpenChange={setOpen}
|
||||
placement='top-start'
|
||||
offset={{
|
||||
mainAxis: 4,
|
||||
crossAxis: -4,
|
||||
}}
|
||||
>
|
||||
<PortalToFollowElemTrigger
|
||||
className='w-full'
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<div className={cn(
|
||||
'relative flex h-8 cursor-pointer items-center gap-2 rounded-lg border border-components-panel-border px-3',
|
||||
!expand && 'w-8 justify-center',
|
||||
open ? 'bg-state-base-hover' : 'hover:bg-state-base-hover',
|
||||
)}>
|
||||
<ApiAggregate className='size-4 shrink-0 text-text-secondary' />
|
||||
{expand && <div className='system-sm-medium grow text-text-secondary'>{t('dataset.serviceApi.title')}</div>}
|
||||
<Indicator
|
||||
className={cn('shrink-0', !expand && 'absolute -right-px -top-px')}
|
||||
color={apiEnabled ? 'green' : 'yellow'}
|
||||
/>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[10]'>
|
||||
<Card
|
||||
apiEnabled={apiEnabled}
|
||||
apiBaseUrl={apiBaseUrl}
|
||||
/>
|
||||
</PortalToFollowElemContent>
|
||||
</PortalToFollowElem>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ServiceApi)
|
||||
66
dify/web/app/components/datasets/extra-info/statistics.tsx
Normal file
66
dify/web/app/components/datasets/extra-info/statistics.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
|
||||
import NoLinkedAppsPanel from '../no-linked-apps-panel'
|
||||
import { RiInformation2Line } from '@remixicon/react'
|
||||
import type { RelatedAppResponse } from '@/models/datasets'
|
||||
|
||||
type StatisticsProps = {
|
||||
expand: boolean
|
||||
documentCount?: number
|
||||
relatedApps?: RelatedAppResponse
|
||||
}
|
||||
|
||||
const Statistics = ({
|
||||
expand,
|
||||
documentCount,
|
||||
relatedApps,
|
||||
}: StatisticsProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const relatedAppsTotal = relatedApps?.total
|
||||
const hasRelatedApps = relatedApps?.data && relatedApps.data.length > 0
|
||||
|
||||
return (
|
||||
<div className='flex items-center gap-x-0.5 p-2 pb-0'>
|
||||
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
|
||||
<div className='system-md-semibold-uppercase text-text-secondary'>
|
||||
{documentCount ?? '--'}
|
||||
</div>
|
||||
<div className='system-2xs-medium-uppercase text-text-tertiary'>
|
||||
{t('common.datasetMenus.documents')}
|
||||
</div>
|
||||
</div>
|
||||
<div className='py-2 pl-0.5 pr-1.5'>
|
||||
<Divider className='text-test-divider-regular h-full w-fit' />
|
||||
</div>
|
||||
<div className='flex grow flex-col px-2 pb-1.5 pt-1'>
|
||||
<div className='system-md-semibold-uppercase text-text-secondary'>
|
||||
{relatedAppsTotal ?? '--'}
|
||||
</div>
|
||||
<Tooltip
|
||||
position='top-start'
|
||||
noDecoration
|
||||
needsDelay
|
||||
popupContent={
|
||||
hasRelatedApps ? (
|
||||
<LinkedAppsPanel
|
||||
relatedApps={relatedApps.data}
|
||||
isMobile={!expand}
|
||||
/>
|
||||
) : <NoLinkedAppsPanel />
|
||||
}
|
||||
>
|
||||
<div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
|
||||
<span>{t('common.datasetMenus.relatedApp')}</span>
|
||||
<RiInformation2Line className='size-3' />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Statistics)
|
||||
Reference in New Issue
Block a user