tjdify/web/app/(commonLayout)/datasets/Container.tsx

'use client'

// Libraries
import { useEffect, useMemo, useRef, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useTranslation } from 'react-i18next'
import { useBoolean, useDebounceFn } from 'ahooks'
import { useQuery } from '@tanstack/react-query'

// Components
import ExternalAPIPanel from '../../components/datasets/external-api/external-api-panel'
import Datasets from './Datasets'
import DatasetFooter from './DatasetFooter'
import ApiServer from './ApiServer'
import Doc from './Doc'
import TabSliderNew from '@/app/components/base/tab-slider-new'
import TagManagementModal from '@/app/components/base/tag-management'
import TagFilter from '@/app/components/base/tag-management/filter'
import Input from '@/app/components/base/input'

// Services
import { fetchDatasetApiBaseUrl } from '@/service/datasets'

// Hooks
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 { SimpleSelect } from '@/app/components/base/select'
import { fetchDepts, fetchTypes } from '@/service/common'
import Statistic from '@/app/(commonLayout)/datasets/Statistic'
import { TreeSelect as AntdTreeSelect } from 'antd'

const Container = () => {
  const { t } = useTranslation()
  const router = useRouter()
  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
  const [includeAll, { toggle: toggleIncludeAll }] = useBoolean(false)

  const options = useMemo(() => {
    return [
      { value: 'dataset', text: t('dataset.datasets') },
      ...(currentWorkspace.role === 'dataset_operator' ? [] : [{ value: 'api', text: t('dataset.datasetsApi') }]),
      { value: 'statistic', text: '知识总览' },
    ]
  }, [currentWorkspace.role, t])

  const [activeTab, setActiveTab] = useTabSearchParams({
    defaultTab: 'dataset',
  })
  const containerRef = useRef<HTMLDivElement>(null)
  const { data } = useQuery(
    {
      queryKey: ['datasetApiBaseInfo'],
      queryFn: () => fetchDatasetApiBaseUrl('/datasets/api-base-info'),
      enabled: activeTab !== 'dataset',
    },
  )

  const [keywords, setKeywords] = useState('')
  const [searchKeywords, setSearchKeywords] = useState('')
  const { run: handleSearch } = useDebounceFn(() => {
    setSearchKeywords(keywords)
  }, { wait: 500 })
  const handleKeywordsChange = (value: string) => {
    setKeywords(value)
    handleSearch()
  }
  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
  const [tagIDs, setTagIDs] = useState<string[]>([])
  const { run: handleTagsUpdate } = useDebounceFn(() => {
    setTagIDs(tagFilterValue)
  }, { wait: 500 })
  const handleTagsChange = (value: string[]) => {
    setTagFilterValue(value)
    handleTagsUpdate()
  }

  useEffect(() => {
    if (currentWorkspace.role === 'normal')
      return router.replace('/apps')
  }, [currentWorkspace, router])

  const [type, setType] = useState<any>()
  const [searchType, setSearchType] = useState('')
  const { run: handleTypeUpdate } = useDebounceFn(() => {
    setSearchType(type)
  }, { wait: 500 })
  const [optionsType, setOptionsType] = useState<any>([])
  useEffect(() => {
    fetchTypes({
      url: '/tags/page',
      params: {
        page: 1,
        limit: 99999,
        tag_type: 'knowledge_category',
      },
    }).then((res: any) => {
      setOptionsType(res.data.map((v: any) => ({ name: v.name, value: v.id })) || [])
    })
  }, [])
  const [dept, setDept] = useState<any>()
  const [optionsDept, setOptionsDept] = useState<any>([])
  useEffect(() => {
    fetchDepts({
      url: '/depts',
    }).then((res: any) => {
      setOptionsDept(res.data || [])
    })
  }, [])
  const [authType, setAuthType] = useState<any>('')
  const optionsAuthType = [
    { name: '创建', value: '1' },
    { name: '编辑', value: '2' },
    { name: '授权编辑', value: '3' },
    { name: '授权可见', value: '4' },
  ]
  return (
    <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
      <div className='sticky top-0 z-10 flex flex-wrap justify-between gap-y-2 bg-background-body px-12 pb-2 pt-4 leading-[56px]'>
        <TabSliderNew
          value={activeTab}
          onChange={newActiveTab => setActiveTab(newActiveTab)}
          options={options}
        />
        {activeTab === 'dataset' && (
          <div className='flex items-center justify-center gap-2'>
            <SimpleSelect
              wrapperClassName="h-[32px] w-[200px]"
              defaultValue={authType}
              onSelect={(i) => {
                setAuthType(i.value)
              }}
              items={optionsAuthType}
              allowSearch={false}
              placeholder="请选择权限类型"
            />
            <AntdTreeSelect
              showSearch
              style={{ width: '200px' }}
              value={dept}
              dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
              placeholder="请选择部门"
              allowClear
              treeDefaultExpandAll
              onChange={v => setDept(v || '')}
              treeData={optionsDept}
              fieldNames={{ label: 'dept_name', value: 'dept_id' }}
            />
            <SimpleSelect
              wrapperClassName="h-[32px] w-[200px]"
              defaultValue={type}
              onSelect={(i) => {
                setType(i.value)
                handleTypeUpdate()
              }}
              items={optionsType}
              allowSearch={false}
              placeholder="请选择类型"
            />
            {/* {isCurrentWorkspaceOwner && <CheckboxWithLabel */}
            {/*  isChecked={includeAll} */}
            {/*  onChange={toggleIncludeAll} */}
            {/*  label={t('dataset.allKnowledge')} */}
            {/*  labelClassName='system-md-regular text-text-secondary' */}
            {/*  className='mr-2' */}
            {/*  tooltip={t('dataset.allKnowledgeDescription') as string} */}
            {/* />} */}
            <TagFilter type='knowledge' value={tagFilterValue} onChange={handleTagsChange} />
            <Input
              showLeftIcon
              showClearIcon
              wrapperClassName='w-[200px]'
              value={keywords}
              onChange={e => handleKeywordsChange(e.target.value)}
              onClear={() => handleKeywordsChange('')}
            />
            {/* <div className="h-4 w-[1px] bg-divider-regular" /> */}
            {/* <Button */}
            {/*  className='shadows-shadow-xs gap-0.5' */}
            {/*  onClick={() => setShowExternalApiPanel(true)} */}
            {/* > */}
            {/*  <ApiConnectionMod className='h-4 w-4 text-components-button-secondary-text' /> */}
            {/*  <div className='system-sm-medium flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text'>{t('dataset.externalAPIPanelTitle')}</div> */}
            {/* </Button> */}
          </div>
        )}
        {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
      </div>
      {activeTab === 'dataset' && (
        <>
          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} type={searchType} dept={dept} authType={authType} />
          <DatasetFooter />
          {showTagManagementModal && (
            <TagManagementModal type='knowledge' show={showTagManagementModal} />
          )}
        </>
      )}
      {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
      {activeTab === 'statistic' && data && <Statistic/>}

      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
    </div>
  )
}

export default Container