tjdify/web/app/components/skill/corpus/detail-modal.tsx

'use client'
import React, { useCallback, useState } from 'react'
import { RiCloseLine } from '@remixicon/react'
import Modal from '@/app/components/base/modal'
import Button from '@/app/components/base/button'
import { delCorpusQuestion, fetchIntentName, fetchIntentType } from '@/service/common'
import 'react-multi-email/dist/style.css'
import Input from '@/app/components/base/input'
import { SimpleSelect } from '@/app/components/base/select'
import useSWR from 'swr'
import { v4 as uuid4 } from 'uuid'
import Checkbox from '@/app/components/base/checkbox'
import cn from '@/utils/classnames'
import { useContext } from 'use-context-selector'
import { ToastContext } from '@/app/components/base/toast'
import Confirm from '@/app/components/base/confirm'
import Textarea from '@/app/components/base/textarea'

const DetailModal = ({
  transfer,
  onCancel,
  onSend,
}: any) => {
  const { notify } = useContext(ToastContext)
  const [questionRelation, setQuestionRelation] = useState<string>('')
  const [questionFilter, setQuestionFilter] = useState<string>('') // the input value
  const [question, setQuestion] = useState<string>(transfer.row?.question || '') // the input value
  const [intentType, setIntentType] = useState<string>(transfer.row?.intentType || '') // the input value
  const { data: dataOptionsIntentType }: any = useSWR(
    {
      url: '/xxx',
      params: {
        page: 1,
        limit: 1000,
      },
    },
    fetchIntentType,
  )
  const optionsIntentType: any = dataOptionsIntentType?.data.map((v: any) => ({ name: v.name, value: v.id })) || []
  const [intentName, setIntentName] = useState<string>(transfer.row?.intentName || '') // the input value
  const { data: dataOptionsIntentName }: any = useSWR(
    {
      url: '/xxx',
      params: {
        page: 1,
        limit: 1000,
        intentType,
      },
    },
    fetchIntentName,
  )
  const optionsIntentName: any = dataOptionsIntentName?.data.map((v: any) => ({ name: v.name, value: v.id })) || []
  const [questionList, setQuestionList] = useState<any>([{ id: uuid4(), name: '啊啊啊啊啊啊啊啊啊啊' }, { id: uuid4(), name: '啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊' }])
  const handleAddQuestion = () => {
    if (!questionRelation)
      return

    if (questionList.some((v: any) => v.name === questionRelation)) {
      notify({ type: 'warning', message: '请勿新增重复数据！' })
      return
    }
    setQuestionList([...questionList, { id: uuid4(), name: questionRelation }])
    setQuestionRelation('')
  }
  const [questionSelectMap, setQuestionSelectMap] = useState<any>(new Map())
  const addQuestionSelectMap = (key: any, value: any) => {
    setQuestionSelectMap((prevMap: any) => {
      const newMap = new Map(prevMap)
      newMap.set(key, value)
      return newMap
    })
  }
  const delQuestionSelectMap = (key: any) => {
    setQuestionSelectMap((prevMap: any) => {
      const newMap = new Map(prevMap)
      newMap.delete(key)
      return newMap
    })
  }
  const [showConfirmDelete, setShowConfirmDelete] = useState(false)
  const [row, setRow] = useState<any>({})
  const handleDelQuestion = async () => {
    try {
      await delCorpusQuestion({
        url: `/xxx/${row.id}`,
        body: {},
      })
      setShowConfirmDelete(false)
      // mutate()
    }
    catch (e) { }
  }
  const [showQuestionEdit, setShowQuestionEdit] = useState(false)
  const [editQuestion, setEditQuestion] = useState<string>('')
  const [showCorpus, setShowCorpus] = useState(false)
  const [corpusRow, setCorpusRow] = useState<any>({})
  const [corpusInput, setCorpusInput] = useState<string>('')
  const handleSave = useCallback(async () => {
    // try {
    //   let res
    //   if (transfer.mode === 'add') {
    //     res = await addCorpus({
    //       url: '/xxx',
    //       body: { name, type: 'knowledge_category' },
    //     })
    //   }
    //   else {
    //     res = await editCorpus({
    //       url: '/xxx',
    //       body: { name },
    //     })
    //   }
    //   const { id }: any = res
    //   if (id) {
    //     onCancel()
    //     onSend()
    //   }
    // }
    // catch (e) { }
  }, [name, onCancel, onSend, transfer])
  const handleSaveQuestion = useCallback(async () => {
    // try {
    //   let res
    //   if (transfer.mode === 'add') {
    //     res = await addCorpus({
    //       url: '/xxx',
    //       body: { name, type: 'knowledge_category' },
    //     })
    //   }
    //   else {
    //     res = await editCorpus({
    //       url: '/xxx',
    //       body: { name },
    //     })
    //   }
    //   const { id }: any = res
    //   if (id) {
    //     onCancel()
    //     onSend()
    //   }
    // }
    // catch (e) { }
  }, [name, onCancel, onSend, transfer])
  const handleSaveCorpus = useCallback(async () => {
    // try {
    //   let res
    //   if (transfer.mode === 'add') {
    //     res = await addCorpus({
    //       url: '/xxx',
    //       body: { name, type: 'knowledge_category' },
    //     })
    //   }
    //   else {
    //     res = await editCorpus({
    //       url: '/xxx',
    //       body: { name },
    //     })
    //   }
    //   const { id }: any = res
    //   if (id) {
    //     onCancel()
    //     onSend()
    //   }
    // }
    // catch (e) { }
  }, [name, onCancel, onSend, transfer])
  return (
    <div>
      <Modal overflowVisible isShow onClose={() => { }} className="p-[24px 32px] w-[800px] max-w-[800px]">
        <div className='mb-2 flex justify-between'>
          <div className='text-xl font-semibold text-text-primary'>{transfer.mode === 'add' ? '新增' : '编辑'}语料</div>
          <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={onCancel} />
        </div>
        <div className="shrink-0 text-gray-500">
          <div className="flex flex-col gap-2">
            <div className="flex w-full items-center">
              <div className="w-[80px]">标准问题</div>
              <div className="flex-1">
                <Input
                  showClearIcon
                  value={question}
                  onChange={e => setQuestion(e.target.value)}
                  onClear={() => setQuestion('')}
                />
              </div>
              {
                transfer.mode === 'edit' && (
                  <Button variant='ghost-accent' size='small' className={cn('shrink-0')} onClick={() => {
                    setRow({
                      type: 'main',
                      name: question,
                    })
                    setCorpusInput(question)
                    setShowCorpus(true)
                  }}>
                    语料配置
                  </Button>
                )
              }
            </div>
            <div className="flex w-full items-center">
              <div className="w-[80px]">意图名称</div>
              <div className="flex flex-1">
                <SimpleSelect
                  className="h-[32px] w-[200px]"
                  defaultValue={intentType}
                  onSelect={(i: any) => {
                    setIntentType(i.value)
                    setIntentName('')
                  }}
                  items={optionsIntentType}
                  allowSearch={false}
                  placeholder="请选择意图类型"
                />
                <SimpleSelect
                  className="h-[32px] w-[200px]"
                  defaultValue={intentName}
                  onSelect={(i: any) => {
                    setIntentName(i.value)
                  }}
                  items={optionsIntentName}
                  allowSearch={false}
                  placeholder="请选择意图名称"
                  disabled={!intentType}
                />
              </div>
            </div>
            {
              transfer.mode === 'edit' && (
                <div className="flex w-full items-center">
                  <div className="w-[80px]">相似问题</div>
                  <div className="flex-1">
                    <Input
                      showClearIcon
                      value={questionRelation}
                      onChange={e => setQuestionRelation(e.target.value)}
                      onClear={() => setQuestionRelation('')}
                      placeholder='输入后Enter以添加'
                      onEnter={handleAddQuestion}
                    />
                  </div>
                </div>
              )
            }
          </div>
          {
            transfer.mode === 'edit' && (
              <div className="mt-3 flex flex-col">
                <div className="flex h-10 w-full items-center gap-2 border-2 border-[#F6F8FC] bg-[#F6F8FC] px-2">
                  <div className='flex items-center' onClick={e => e.stopPropagation()}>
                    <Checkbox
                      className='mr-2 shrink-0'
                      checked={questionList.every((v: any) => questionSelectMap.has(v.id))}
                      onCheck={() => {
                        questionList.every((v: any) => questionSelectMap.has(v.id))
                          ? setQuestionSelectMap(new Map())
                          : questionList.forEach((v: any) => addQuestionSelectMap(v.id, v))
                      }}
                      disabled={questionList.length === 0}
                    />
                    全选
                  </div>
                  <div className="ml-auto w-[200px]">
                    <Input
                      showClearIcon
                      value={questionFilter}
                      onChange={e => setQuestionFilter(e.target.value)}
                      onClear={() => setQuestionFilter('')}
                      placeholder='请输入相似问题名称进行过滤'
                    />
                  </div>
                  <Button variant='primary' className={cn('shrink-0')}>
                    批量删除
                  </Button>
                </div>
                <div className="flex h-[300px] flex-col gap-2 overflow-y-auto border-2 border-solid border-[#F6F8FC] p-2">
                  {
                    questionList.filter((v: any) => !questionFilter || v.name.includes(questionFilter)).map((item: any) => (
                      <div key={item.id} className="flex items-center">
                        <Checkbox
                          className='mr-2 shrink-0'
                          checked={questionSelectMap.has(item.id)}
                          onCheck={() => {
                            questionSelectMap.has(item.id)
                              ? delQuestionSelectMap(item.id)
                              : addQuestionSelectMap(item.id, item)
                          }}
                          disabled={questionList.length === 0}
                        />
                        <div className="flex-1">
                          {item.name}
                        </div>
                        <Button variant='ghost-accent' size='small' className={cn('shrink-0')} onClick={() => {
                          setRow(item)
                          setCorpusInput(item.name)
                          setShowCorpus(true)
                        }}>
                          语料配置
                        </Button>
                        <Button variant='ghost-accent' size='small' className={cn('shrink-0')}
                          onClick={() => {
                            setRow(item)
                            setEditQuestion(item.name)
                            setShowQuestionEdit(true)
                          }}>
                          编辑
                        </Button>
                        <Button variant='ghost' size='small' className={cn('shrink-0 text-red-600')}
                          onClick={() => {
                            setRow(item)
                            setShowConfirmDelete(true)
                          }}>
                          刪除
                        </Button>
                      </div>
                    ))
                  }
                </div>
                <div className="flex border-2 border-t-0 border-solid border-[#F6F8FC] p-2 text-xs">
                  <div>共{questionList.length}条</div>
                  <div className="ml-4">已选择{questionSelectMap.size}条</div>
                </div>
              </div>
            )
          }
          <Button
            tabIndex={0}
            className='mt-4 w-full'
            onClick={handleSave}
            disabled={!question.length || !intentType.length || !intentName.length}
            variant='primary'
          >
            保存
          </Button>
        </div>
      </Modal>
      {
        showQuestionEdit && (
          <Modal overflowVisible isShow onClose={() => { }} className="p-[24px 32px] w-[400px]">
            <div className='mb-2 flex justify-between'>
              <div className='text-xl font-semibold text-text-primary'>编辑相似问题</div>
              <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={() => setShowQuestionEdit(false)} />
            </div>
            <div>
              <div className={cn('flex flex-wrap items-center justify-between py-4')}>
                <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
                  相似问题
                </div>
                <Input
                  value={editQuestion}
                  onChange={e => setEditQuestion(e.target.value)}
                  className='h-9'
                  placeholder='请输入相似问题'
                />
              </div>
              <Button
                tabIndex={0}
                className='w-full'
                onClick={handleSaveQuestion}
                disabled={!editQuestion.length}
                variant='primary'
              >
                保存
              </Button>
            </div>
          </Modal>
        )
      }
      {
        showCorpus && (
          <Modal overflowVisible isShow onClose={() => { }} className="p-[24px 32px]  max-w-[800px]">
            <div className='mb-2 flex justify-between'>
              <div className='text-xl font-semibold text-text-primary'>训练语料配置</div>
              <RiCloseLine className='h-4 w-4 cursor-pointer text-text-tertiary' onClick={() => setShowCorpus(false)} />
            </div>
            <div>
              <div className={cn('flex flex-wrap items-center justify-between py-4')}>
                <div className='shrink-0 py-2 text-sm font-medium leading-[20px] text-text-primary'>
                  当前标注问题：{row.name}
                </div>
                <Textarea
                  value={corpusInput}
                  onChange={e => setCorpusInput(e.target.value)}
                  className='resize-none'
                  placeholder='请输入语料配置'
                  rows={30}
                />
              </div>
              <div className="flex gap-2">
                <Button
                  className='w-full'
                  onClick={() => setCorpusInput(row.name)}
                  variant='warning'
                >
                  重置
                </Button>
                <Button
                  className='w-full'
                  onClick={handleSaveCorpus}
                  disabled={!corpusInput.length}
                  variant='primary'
                >
                  保存
                </Button>
              </div>
            </div>
          </Modal>
        )
      }
      {showConfirmDelete && (
        <Confirm
          title="删除确认"
          content={`请确认是否删除${row.name}？`}
          isShow={showConfirmDelete}
          onConfirm={handleDelQuestion}
          onCancel={() => setShowConfirmDelete(false)}
        />
      )}
    </div>
  )
}

export default DetailModal