cx-chat 0.0.1

package/src/views/page-menus/knowledge/modal/doc-submit-modal.tsx

@@ -0,0 +1,349 @@
+import { addKnowDocAPI, getKnowDocDetailAPI, updateKnowDocAPI } from '@/api/menus/knowledge'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { useToast } from '@/contexts/ToastContext'
+import { useModalSubmit } from '@/hooks/useModalSubmit'
+import { DocEditorByType } from '@/views/page-menus/knowledge/components/doc-editor-by-type'
+import { CxForm, CxFormItem, CxInput, CxModal, CxSelect, useCxModal } from '@cx-ui'
+import { Form } from 'antd'
+import type { FormInstance } from 'antd/es/form'
+import { forwardRef, useImperativeHandle, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { parseDocDetail, parseDocFileRows, pickApiData } from './doc-parse'
+
+/** 各类型的弹窗统一宽度（px） */
+const DOC_SUBMIT_MODAL_WIDTH = 1120
+/** 新增/编辑弹窗固定高度（内容区内部滚动） */
+const DOC_SUBMIT_MODAL_HEIGHT = 'min(95dvh, 95vh)'
+const docModalShellStyles = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+    height: DOC_SUBMIT_MODAL_HEIGHT,
+    maxHeight: DOC_SUBMIT_MODAL_HEIGHT,
+  },
+  body: {
+    flex: '1 1 0%',
+    minHeight: 0,
+    display: 'flex',
+    flexDirection: 'column' as const,
+    overflow: 'hidden',
+  },
+}
+
+interface DocModalProps {
+  onOk?: (values: any) => void | Promise<void>
+  onCancel?: () => void
+}
+
+function normalizeType(raw: unknown): number {
+  if (typeof raw === 'number' && !Number.isNaN(raw)) return raw
+  if (raw === 'text' || raw === 0 || raw === '0') return 0
+  if (raw === 'file' || raw === 1 || raw === '1') return 1
+  return Number(raw) === 1 ? 1 : 0
+}
+
+function hasContentForDocType(form: FormInstance, type: number): boolean {
+  if (type === 0) {
+    return String(form.getFieldValue('rawText') ?? '').trim().length > 0
+  }
+  if (type === 1) {
+    const files = form.getFieldValue('knowledgeDocumentFileInfoDTOList')
+    if (!Array.isArray(files) || files.length === 0) return false
+    // 默认行（1 行且 fileId/name 都为空）不算“已有内容”，切换类型不需要弹确认
+    if (files.length === 1) {
+      const first: any = files[0]
+      const fileId = `${first?.fileId ?? ''}`.trim()
+      const name = `${first?.name ?? ''}`.trim()
+      if (!fileId && !name) return false
+    }
+    return true
+  }
+  return false
+}
+
+type DocTypeSelectFieldProps = {
+  value?: number
+  onChange?: (v: number) => void
+  options: { label: string; value: number }[]
+  placeholder?: string
+}
+
+function DocTypeSelectField({ value, onChange, options, placeholder }: DocTypeSelectFieldProps) {
+  const { t } = useTranslation()
+  const form = Form.useFormInstance()
+  const [pendingSwitch, setPendingSwitch] = useState<{ prev: number; next: number } | null>(null)
+
+  const handleChange = (nextVal: unknown) => {
+    const prev = normalizeType(value)
+    const next = normalizeType(nextVal)
+    if (prev === next) return
+
+    if (hasContentForDocType(form, prev)) {
+      setPendingSwitch({ prev, next })
+    } else {
+      onChange?.(next)
+    }
+  }
+
+  const applySwitch = () => {
+    if (!pendingSwitch) return
+    const { prev, next } = pendingSwitch
+    if (prev === 0) {
+      form.setFieldValue('rawText', '')
+    }
+    if (prev === 1) {
+      form.setFieldValue('knowledgeDocumentFileInfoDTOList', [])
+    }
+    onChange?.(next)
+    setPendingSwitch(null)
+  }
+
+  return (
+    <>
+      <CxSelect
+        value={value}
+        onChange={handleChange}
+        options={options}
+        placeholder={placeholder}
+      />
+      <ConfirmDialog
+        overlayClassName="z-[2000]"
+        isOpen={pendingSwitch != null}
+        title={t('menus.knowledge.doc.switch_type_confirm_title')}
+        message={t('menus.knowledge.doc.switch_type_confirm_content')}
+        confirmText={t('common.confirm')}
+        cancelText={t('common.cancel')}
+        onClose={() => setPendingSwitch(null)}
+        onConfirm={applySwitch}
+      />
+    </>
+  )
+}
+
+const DocSubmitModal = forwardRef<any, DocModalProps>(function DocSubmitModal(_props, ref) {
+  const { t } = useTranslation()
+  const { showToast } = useToast()
+  const { onOk, onCancel } = _props
+  const openPayloadRef = useRef<{ knowledgeId?: string }>({})
+
+  const { submitting, handleSubmit } = useModalSubmit()
+
+  const modal = useCxModal({
+    onOpen: async (payload: any) => {
+      openPayloadRef.current = {
+        knowledgeId:
+          payload.knowledgeId != null && String(payload.knowledgeId).trim() !== ''
+            ? String(payload.knowledgeId)
+            : undefined,
+      }
+      const nextType = payload.opeType ?? 'add'
+      const record = payload.data
+      const presetDocType = payload.docType
+      const { form } = modal
+
+      if (nextType === 'edit' && record) {
+        const opeIdFromRecord = payload.opeId ?? record.id ?? record.docId
+        let detailRecord: any = record
+        if (opeIdFromRecord != null && `${opeIdFromRecord}`.trim() !== '') {
+          try {
+            const res = await getKnowDocDetailAPI(opeIdFromRecord)
+            detailRecord = pickApiData(res)
+          } catch {
+            detailRecord = record
+          }
+        }
+
+        const parsed = parseDocDetail(detailRecord)
+        const dt = normalizeType(parsed.type)
+
+        form.setFieldsValue({
+          name: parsed.name,
+          description: parsed.description,
+          version: parsed.version,
+          docType: dt,
+          rawText: parsed.rawText,
+          knowledgeDocumentFileInfoDTOList: parseDocFileRows(parsed.files),
+        })
+      } else {
+        form.resetFields()
+        const dt =
+          presetDocType !== undefined && presetDocType !== null
+            ? normalizeType(presetDocType)
+            : 0
+        form.setFieldsValue({
+          name: '',
+          description: '',
+          docType: dt,
+          version: '',
+          rawText: '',
+          knowledgeDocumentFileInfoDTOList: [],
+        })
+      }
+    },
+    onClose: () => {
+      onCancel?.()
+    },
+  })
+
+  const { isOpen, close, form, opeType, opeId } = modal
+
+  const formRules = useMemo(
+    () => ({
+      name: [{ required: true, message: t('menus.knowledge.doc.name_required') }],
+      version: [{ required: true, message: t('menus.knowledge.doc.version_required') }],
+      docType: [{ required: true, message: t('menus.knowledge.doc.type_required') }],
+    }),
+    [t],
+  )
+
+  const title = useMemo(
+    () => (opeType === 'edit' ? t('menus.knowledge.doc.edit') : t('menus.knowledge.doc.add')),
+    [opeType, t],
+  )
+
+  const docType = Form.useWatch('docType', form) as number | undefined
+
+  const onSubmit = async () => {
+    if (opeType === 'detail') return
+    const kid = String(openPayloadRef.current.knowledgeId ?? '').trim()
+    if (!kid) {
+      showToast(t('menus.knowledge.doc.knowledge_id_missing'), 'error')
+      return
+    }
+
+    const result = await handleSubmit({
+      opeType: opeType === 'edit' ? 'edit' : 'add',
+      validate: () => form.validateFields(),
+      addAPI: addKnowDocAPI,
+      editAPI: updateKnowDocAPI,
+      transform: (values: any) => {
+        const type = normalizeType(values.docType)
+        const normalizeFileList = (list: any[]) =>
+          (Array.isArray(list) ? list : [])
+            .map((x: any, idx: number) => ({
+              fileId: x?.fileId ?? '',
+              sortOrder: idx,
+            }))
+            .filter((x) => x.fileId)
+        const base: Record<string, unknown> = {
+          name: values.name,
+          description: values.description ?? '',
+          version: String(values.version ?? ''),
+          type,
+          rawText: type === 0 ? String(values.rawText ?? '') : '',
+          knowledgeDocumentFileInfoDTOList:
+            type === 1
+              ? Array.isArray(values.knowledgeDocumentFileInfoDTOList)
+                ? normalizeFileList(values.knowledgeDocumentFileInfoDTOList)
+                : []
+              : [],
+        }
+        if (opeType === 'edit' && opeId != null) {
+          return { id: opeId, ...base }
+        }
+        return { knowledgeId: kid, ...base }
+      },
+      onSuccess: async ({ payload }) => {
+        await onOk?.(payload)
+      },
+    })
+    if (result) close()
+  }
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  const typeOptions = useMemo(
+    () => [
+      { label: t('menus.knowledge.doc.type_text'), value: 0 },
+      { label: t('menus.knowledge.doc.type_file'), value: 1 },
+    ],
+    [t],
+  )
+
+  return (
+    <CxModal
+      title={title}
+      isOpen={isOpen}
+      onClose={close}
+      opeType={opeType}
+      submitting={submitting}
+      onSubmit={onSubmit}
+      modalConfig={{
+        width: DOC_SUBMIT_MODAL_WIDTH,
+        styles: {
+          ...docModalShellStyles,
+        },
+        rootClassName: 'cx-modal-content-fill',
+      }}>
+      <CxForm
+        form={form}
+        rules={formRules}
+        layout="vertical"
+        className="flex h-full min-h-0 flex-1 flex-col overflow-hidden"
+      >
+        <div className="flex flex-col h-full min-h-0">
+          {/* 头部信息区：固定不滚动 */}
+          <div className="shrink-0">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-x-4 gap-y-2">
+              <CxFormItem
+                className="!mb-0"
+                label={t('menus.knowledge.doc.name')}
+                name="name">
+                <CxInput.Large placeholder={t('menus.knowledge.doc.name_placeholder')} />
+              </CxFormItem>
+
+              <CxFormItem
+                className="!mb-0"
+                label={t('menus.knowledge.doc.version')}
+                name="version">
+                <CxInput.Large placeholder={t('menus.knowledge.doc.version_placeholder')} />
+              </CxFormItem>
+
+              <CxFormItem
+                className="!mb-0"
+                label={t('menus.knowledge.doc.type')}
+                name="docType">
+                <DocTypeSelectField
+                  options={typeOptions}
+                  placeholder={t('menus.knowledge.doc.type_placeholder')}
+                />
+              </CxFormItem>
+            </div>
+
+            <div className="mt-2">
+              <CxFormItem
+                className="!mb-0"
+                label={t('common.description')}
+                name="description"
+              >
+                <CxInput.Textarea
+                  placeholder={t('common.description_placeholder')}
+                  rows={2}
+                />
+              </CxFormItem>
+            </div>
+          </div>
+
+          {/* 编辑区：内部滚动 */}
+          <div className="flex min-h-0 flex-1 flex-col overflow-hidden mt-3">
+            <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
+              <DocEditorByType docType={normalizeType(docType)} />
+            </div>
+          </div>
+        </div>
+      </CxForm>
+    </CxModal>
+  )
+})
+
+DocSubmitModal.displayName = 'DocSubmitModal'
+
+export default DocSubmitModal

package/src/views/page-menus/knowledge/modal/doc-type-picker-modal.tsx

@@ -0,0 +1,88 @@
+import { CxButton, CxModal } from '@cx-ui'
+import type { RefObject } from 'react'
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FileText, Type } from 'lucide-react'
+
+export type DocTypePickerRef = {
+  open: () => Promise<0 | 1 | null>
+}
+
+/**
+ * 选择知识库文档类型（0=文本，1=文件）。返回 Promise，取消为 null。
+ */
+const DocTypePickerModal = forwardRef<DocTypePickerRef, object>(function DocTypePickerModal(
+  _props,
+  ref,
+) {
+    const { t } = useTranslation()
+    const [open, setOpen] = useState(false)
+    const resolveRef = useRef<((v: 0 | 1 | null) => void) | null>(null)
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open: () =>
+          new Promise<0 | 1 | null>((resolve) => {
+            resolveRef.current = resolve
+            setOpen(true)
+          }),
+      }),
+      [],
+    )
+
+    const finish = (v: 0 | 1 | null) => {
+      setOpen(false)
+      resolveRef.current?.(v)
+      resolveRef.current = null
+    }
+
+    return (
+      <CxModal
+        title={t('menus.knowledge.doc.type_picker_title')}
+        isOpen={open}
+        onClose={() => finish(null)}
+        opeType="detail"
+        modalConfig={{ width: 480 }}
+        actions={[
+          <CxButton key="cancel" type="default" onClick={() => finish(null)}>
+            {t('common.cancel')}
+          </CxButton>,
+        ]}>
+        <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+          {t('menus.knowledge.doc.type_picker_hint')}
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+          <button
+            type="button"
+            className="flex flex-col items-center gap-2 rounded-xl border-2 border-gray-200 dark:border-gray-600 p-6 hover:border-blue-500 hover:bg-blue-50/50 dark:hover:bg-blue-900/20 transition-colors text-left"
+            onClick={() => finish(0)}>
+            <Type className="text-blue-500" size={28} />
+            <span className="font-medium text-gray-900 dark:text-gray-100">
+              {t('menus.knowledge.doc.type_text')}
+            </span>
+            <span className="text-xs text-gray-500">{t('menus.knowledge.doc.type_text_desc')}</span>
+          </button>
+          <button
+            type="button"
+            className="flex flex-col items-center gap-2 rounded-xl border-2 border-gray-200 dark:border-gray-600 p-6 hover:border-emerald-500 hover:bg-emerald-50/50 dark:hover:bg-emerald-900/20 transition-colors text-left"
+            onClick={() => finish(1)}>
+            <FileText className="text-emerald-500" size={28} />
+            <span className="font-medium text-gray-900 dark:text-gray-100">
+              {t('menus.knowledge.doc.type_file')}
+            </span>
+            <span className="text-xs text-gray-500">{t('menus.knowledge.doc.type_file_desc')}</span>
+          </button>
+        </div>
+      </CxModal>
+    )
+  })
+
+DocTypePickerModal.displayName = 'DocTypePickerModal'
+
+export default DocTypePickerModal
+
+/** 供外层调用：`await openDocTypePickerModal(ref)` */
+export function openDocTypePickerModal(ref: RefObject<DocTypePickerRef | null>) {
+  return ref.current?.open() ?? Promise.resolve(null)
+}