|
@@ -0,0 +1,149 @@
|
|
|
+'use client'
|
|
|
+import { useState } from 'react'
|
|
|
+import useSWR from 'swr'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import 'dayjs/locale/zh-cn'
|
|
|
+import relativeTime from 'dayjs/plugin/relativeTime'
|
|
|
+import DetailModal from './detail-modal'
|
|
|
+import { useContext } from 'use-context-selector'
|
|
|
+import { RiAddLine } from '@remixicon/react'
|
|
|
+import { useTranslation } from 'react-i18next'
|
|
|
+import { fetchKnowledges } from '@/service/common'
|
|
|
+import I18n from '@/context/i18n'
|
|
|
+import { useAppContext } from '@/context/app-context'
|
|
|
+import LogoEmbeddedChatHeader from '@/app/components/base/logo/logo-embedded-chat-header'
|
|
|
+import { useProviderContext } from '@/context/provider-context'
|
|
|
+import { Plan } from '@/app/components/billing/type'
|
|
|
+import Button from '@/app/components/base/button'
|
|
|
+import UpgradeBtn from '@/app/components/billing/upgrade-btn'
|
|
|
+import { NUM_INFINITE } from '@/app/components/billing/config'
|
|
|
+import { LanguagesSupported } from '@/i18n/language'
|
|
|
+import cn from '@/utils/classnames'
|
|
|
+dayjs.extend(relativeTime)
|
|
|
+
|
|
|
+const KnowledgesPage = () => {
|
|
|
+ const { t } = useTranslation()
|
|
|
+ const { locale } = useContext(I18n)
|
|
|
+ const ServiceTypeMap: any = {
|
|
|
+ 1: '智能问答',
|
|
|
+ 2: '智能搜索',
|
|
|
+ 3: '智能推荐',
|
|
|
+ }
|
|
|
+ const StatusMap: any = {
|
|
|
+ 0: '未启用',
|
|
|
+ 1: '已启用',
|
|
|
+ }
|
|
|
+ const { userProfile, currentWorkspace, isCurrentWorkspaceOwner, isCurrentWorkspaceManager, systemFeatures } = useAppContext()
|
|
|
+ const { data, mutate }: any = useSWR(
|
|
|
+ {
|
|
|
+ url: '/workspaces/123123',
|
|
|
+ params: {},
|
|
|
+ },
|
|
|
+ fetchKnowledges,
|
|
|
+ )
|
|
|
+ const [detailModalVisible, setDetailModalVisible] = useState(false)
|
|
|
+ const [transfer, setTransfer] = useState<any>({
|
|
|
+ mode: 'add',
|
|
|
+ id: null,
|
|
|
+ })
|
|
|
+ const knowledgeList = data?.data || []
|
|
|
+ const { plan, enableBilling } = useProviderContext()
|
|
|
+ const isNotUnlimitedMemberPlan = enableBilling && plan.type !== Plan.team && plan.type !== Plan.enterprise
|
|
|
+ const isMemberFull = enableBilling && isNotUnlimitedMemberPlan && knowledgeList.length >= plan.total.teamMembers
|
|
|
+
|
|
|
+ return (
|
|
|
+ <>
|
|
|
+ <div className='flex flex-col'>
|
|
|
+ <div className='mb-4 flex items-center gap-3 rounded-xl border-l-[0.5px] border-t-[0.5px] border-divider-subtle bg-gradient-to-r from-background-gradient-bg-fill-chat-bg-2 to-background-gradient-bg-fill-chat-bg-1 p-3 pr-5'>
|
|
|
+ <LogoEmbeddedChatHeader className='!h-12 !w-12' />
|
|
|
+ <div className='grow'>
|
|
|
+ <div className='system-md-semibold text-text-secondary'>{currentWorkspace?.name}</div>
|
|
|
+ {enableBilling && (
|
|
|
+ <div className='system-xs-medium mt-1 text-text-tertiary'>
|
|
|
+ {isNotUnlimitedMemberPlan
|
|
|
+ ? (
|
|
|
+ <div className='flex space-x-1'>
|
|
|
+ <div>{t('billing.plansCommon.member')}{locale !== LanguagesSupported[1] && knowledgeList.length > 1 && 's'}</div>
|
|
|
+ <div className=''>{knowledgeList.length}</div>
|
|
|
+ <div>/</div>
|
|
|
+ <div>{plan.total.teamMembers === NUM_INFINITE ? t('billing.plansCommon.unlimited') : plan.total.teamMembers}</div>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ : (
|
|
|
+ <div className='flex space-x-1'>
|
|
|
+ <div>{knowledgeList.length}</div>
|
|
|
+ <div>{t('billing.plansCommon.memberAfter')}{locale !== LanguagesSupported[1] && knowledgeList.length > 1 && 's'}</div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ {isMemberFull && (
|
|
|
+ <UpgradeBtn className='mr-2' loc='member-invite' />
|
|
|
+ )}
|
|
|
+ <Button variant='primary' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull}
|
|
|
+ onClick={() => {
|
|
|
+ setTransfer({ mode: 'add', row: null })
|
|
|
+ setDetailModalVisible(true)
|
|
|
+ }}>
|
|
|
+ <RiAddLine className='mr-1 h-4 w-4' />
|
|
|
+ 新增
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ <div className='overflow-visible lg:overflow-visible'>
|
|
|
+ <div className='flex min-w-[480px] items-center border-b border-divider-regular py-[7px]'>
|
|
|
+ <div className='system-xs-medium-uppercase w-[100px] shrink-0 text-center text-text-tertiary'>服务类型</div>
|
|
|
+ <div className='system-xs-medium-uppercase shrink-0 grow text-center text-text-tertiary'>系统名称</div>
|
|
|
+ <div className='system-xs-medium-uppercase shrink-0 grow text-center text-text-tertiary'>URL</div>
|
|
|
+ <div className='system-xs-medium-uppercase w-[80px] shrink-0 text-center text-text-tertiary'>连接应用状态</div>
|
|
|
+ <div className='system-xs-medium-uppercase w-[160px] shrink-0 text-center text-text-tertiary'>更新时间</div>
|
|
|
+ <div className='system-xs-medium-uppercase w-[120px] shrink-0 px-3 text-center text-text-tertiary'>操作</div>
|
|
|
+ </div>
|
|
|
+ <div className='relative min-w-[480px]'>
|
|
|
+ {
|
|
|
+ knowledgeList.map((know: any) => (
|
|
|
+ <div key={know.id} className='flex justify-between border-b border-divider-subtle'>
|
|
|
+ <div className='system-sm-regular w-[100px] shrink-0 py-2 text-center text-text-secondary'>{ServiceTypeMap[Number(know.serviceType)]}</div>
|
|
|
+ <div className='system-sm-regular shrink-0 grow py-2 text-center text-text-secondary'>{know.serviceName}</div>
|
|
|
+ <div className='system-sm-regular shrink-0 grow py-2 text-center text-text-secondary'>{know.url}</div>
|
|
|
+ <div className='system-sm-regular w-[80px] shrink-0 py-2 text-center text-text-secondary'>{StatusMap[Number(know.status)]}</div>
|
|
|
+ <div className='system-sm-regular w-[160px] shrink-0 py-2 text-center text-text-secondary'>{know.time}</div>
|
|
|
+ <div className='flex w-[120px] shrink-0 items-center justify-center'>
|
|
|
+ <Button variant='ghost-accent' size='small' className={cn('shrink-0')} disabled={!isCurrentWorkspaceManager || isMemberFull}
|
|
|
+ onClick={() => {
|
|
|
+ setTransfer({
|
|
|
+ mode: 'edit',
|
|
|
+ row: JSON.parse(JSON.stringify(know)),
|
|
|
+ })
|
|
|
+ setDetailModalVisible(true)
|
|
|
+ }}>
|
|
|
+ <RiAddLine className='mr-1 h-4 w-4' />
|
|
|
+ 编辑
|
|
|
+ </Button>
|
|
|
+ <Button variant='ghost' size='small' className={cn('shrink-0 text-red-600')} disabled={!isCurrentWorkspaceManager || isMemberFull} onClick={() => setDetailModalVisible(true)}>
|
|
|
+ <RiAddLine className='mr-1 h-4 w-4' />
|
|
|
+ 刪除
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ ))
|
|
|
+ }
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ {
|
|
|
+ detailModalVisible && (
|
|
|
+ <DetailModal
|
|
|
+ transfer={transfer}
|
|
|
+ onCancel={() => setDetailModalVisible(false)}
|
|
|
+ onSend={() => {
|
|
|
+ mutate()
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }
|
|
|
+ </>
|
|
|
+ )
|
|
|
+}
|
|
|
+
|
|
|
+export default KnowledgesPage
|