tjdify/web/app/components/header/account-setting/knowledges-page/index.tsx

'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