cx-chat 0.0.1

package/src/views/chat/components/references-knowledge/modal/knowledge-doc-detail-drawer.tsx

@@ -0,0 +1,529 @@
+import { deleteKnowDocSharedAPI, getKnowDocDetailAPI, getKnowDocSharedPageAPI } from '@/api/menus/knowledge'
+import { getDepartmentTreeAPI } from '@api/system/department'
+import ConfirmDialog from '@/components/common/modal/confirm-dialog'
+import { SelectTableView, createSelectTableConfig } from '@/components/table-view'
+import { useAuth } from '@/contexts/AuthContext'
+import { useToast } from '@/contexts/ToastContext'
+import {
+  CxButton,
+  CxDrawer,
+  CxTabs,
+  CxTag,
+  UploadFile as CxUploadFile,
+  useCxModal,
+} from '@cx-ui'
+import { Form, Spin } from 'antd'
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import { X } from 'lucide-react'
+import { parseDocDetail, pickApiData } from '@/views/page-menus/knowledge/modal/doc-parse'
+
+interface OpenPayload {
+  opeId?: string | number
+  record?: any
+}
+
+/** 各类型的抽屉统一宽度（px）。 */
+const DOC_DETAIL_DRAWER_WIDTH = 1120
+/** 详情抽屉固定高度（内容区内部滚动）。 */
+const DOC_DETAIL_DRAWER_HEIGHT = 'min(95dvh, 95vh)'
+
+/** 归一化文档类型：0 文本 / 1 文件。 */
+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 0
+}
+
+const KnowledgeDocDetailDrawer = forwardRef<any, unknown>(function KnowledgeDocDetailDrawer(_props, ref) {
+  const { t } = useTranslation()
+  const { hasPermission } = useAuth()
+  const { showToast } = useToast()
+  const [loading, setLoading] = useState(false)
+  const [activeTab, setActiveTab] = useState('content')
+  const [shareSelectedRows, setShareSelectedRows] = useState<any[]>([])
+  const [shareRemoving, setShareRemoving] = useState(false)
+  const [shareRemovingSubmitting, setShareRemovingSubmitting] = useState(false)
+  const [shareRemoveSubmitConfirmOpen, setShareRemoveSubmitConfirmOpen] = useState(false)
+  const [shareTreeCheckedKeys, setShareTreeCheckedKeys] = useState<Set<string>>(() => new Set())
+  const canViewSharePage = hasPermission('knowledge:doc:data-permission-page')
+  const canDeleteShare = hasPermission('knowledge:data-permission-delete')
+
+  /** 打开抽屉时加载文档详情数据。 */
+  const modal = useCxModal({
+    onOpen: async (payload: OpenPayload & { data?: any }) => {
+      const opeId = payload.opeId ?? payload.data?.id
+      setLoading(true)
+      modal.setFormData({})
+      setActiveTab('content')
+      setShareSelectedRows([])
+      setShareRemoving(false)
+      setShareRemovingSubmitting(false)
+      setShareRemoveSubmitConfirmOpen(false)
+      setShareTreeCheckedKeys(new Set())
+
+      if (opeId == null || `${opeId}`.trim() === '') {
+        setLoading(false)
+        return
+      }
+
+      try {
+        const res = await getKnowDocDetailAPI(opeId)
+        const detail = parseDocDetail(pickApiData(res))
+        modal.setFormData({
+          id: opeId,
+          name: detail.name,
+          description: detail.description,
+          version: detail.version,
+          type: normalizeType(detail.type),
+          rawText: detail.rawText,
+          files: detail.files,
+          status: detail.status,
+          auditStatus: detail.auditStatus,
+        })
+      } finally {
+        setLoading(false)
+      }
+    },
+    onClose: () => {},
+  })
+
+  const { isOpen, close, opeId } = modal
+  const detailData = (modal.formData ?? {}) as Record<string, any>
+
+  /** 暴露给父组件的 open/close 调用方法。 */
+  useImperativeHandle(
+    ref,
+    () => ({
+      open: modal.open,
+      close,
+    }),
+    [modal.open, close],
+  )
+
+  /** 转换上传控件展示用的文件列表。 */
+  const fileUploadList = useMemo(() => {
+    const arr = Array.isArray(detailData.files) ? detailData.files : []
+    return arr
+      .map((x: any, idx: number) => {
+        const fileId = x?.fileId ?? ''
+        const name = x?.fileName ?? x?.name ?? ''
+        const url = x?.fileUrl ?? x?.address ?? ''
+        if (!fileId) return null
+        return {
+          uid: fileId || `row:${idx}`,
+          name: name || 'file',
+          status: 'done',
+          ...(url ? ({ url, address: url } as any) : undefined),
+        } as any
+      })
+      .filter(Boolean) as any[]
+  }, [detailData.files])
+
+  /** 清空共享列表的勾选数据。 */
+  const clearShareCheckedRows = useCallback(() => {
+    setShareSelectedRows([])
+  }, [])
+
+  /** 进入共享批量移除模式。 */
+  const startShareRemoving = useCallback(() => {
+    setShareRemoving(true)
+  }, [])
+
+  /** 退出共享批量移除模式并重置状态。 */
+  const cancelShareRemoving = useCallback(() => {
+    setShareRemoving(false)
+    setShareTreeCheckedKeys(new Set())
+    clearShareCheckedRows()
+  }, [clearShareCheckedRows])
+
+  /** 打开共享移除二次确认弹窗。 */
+  const openShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(true)
+  }, [])
+
+  /** 关闭共享移除二次确认弹窗。 */
+  const closeShareRemoveSubmitConfirm = useCallback(() => {
+    setShareRemoveSubmitConfirmOpen(false)
+  }, [])
+
+  /** 构建共享分页表格配置。 */
+  const useShareTableConfig = createSelectTableConfig({
+    tableAPI: canViewSharePage
+      ? (queryParams) => {
+          if (queryParams.departmentId === '0') {
+            queryParams.departmentId = null
+          }
+          return getKnowDocSharedPageAPI({
+            ...queryParams,
+            knowledgeDocumentId: opeId,
+          })
+        }
+      : undefined,
+    treeAPI: hasPermission('knowledge:manage-permission-dep-list') ? getDepartmentTreeAPI : undefined,
+    tree: {
+      fieldNames: {
+        id: 'id',
+        label: 'name',
+        children: 'children',
+      },
+      searchField: 'departmentId',
+    },
+    searchFields: [
+      {
+        prop: 'userName',
+        label: 'menus.knowledge.share.user_name',
+        placeholder: 'menus.knowledge.share.user_name_placeholder',
+      },
+      {
+        prop: 'grantUserName',
+        label: 'menus.knowledge.share.grant_user',
+        placeholder: 'menus.knowledge.share.grant_user_placeholder',
+      },
+    ],
+    pageInfo: {
+      searchButtonSize: 'small',
+    },
+    table: {
+      showPagination: true,
+      showSelection: canDeleteShare && shareRemoving,
+    },
+    pagination: { page: 1, pageSize: 10, total: 0 },
+  })
+
+  /** 获取共享分页配置实例。 */
+  const shareTableConfig = useShareTableConfig()
+
+  /** 共享表格列定义。 */
+  const shareColumns = useMemo(
+    () => [
+      {
+        title: 'menus.knowledge.share.user_name',
+        key: 'userName',
+        width: 120,
+      },
+      {
+        title: 'menus.knowledge.share.department',
+        key: 'departmentName',
+        width: 150,
+      },
+      {
+        title: 'menus.knowledge.share.grant_user',
+        key: 'grantUserName',
+        width: 150,
+      },
+      {
+        title: 'menus.knowledge.share.grant_time',
+        key: 'grantTime',
+        width: 150,
+      },
+    ],
+    [],
+  )
+
+  /** 提交共享批量移除。 */
+  const submitShareRemoving = useCallback(async () => {
+    const knowledgeDocumentId = opeId
+    if (!knowledgeDocumentId) return
+
+    const idList = (Array.isArray(shareSelectedRows) ? shareSelectedRows : [])
+      .map((row: any) => row?.id)
+      .filter((x: any) => x != null && String(x).trim() !== '')
+      .map((x: any) => String(x))
+
+    const departmentIdList = Array.from(shareTreeCheckedKeys)
+      .filter((x) => x != null && String(x).trim() !== '' && String(x) !== '0')
+      .map((x) => String(x))
+
+    if (idList.length === 0 && departmentIdList.length === 0) return
+
+    setShareRemovingSubmitting(true)
+    try {
+      await deleteKnowDocSharedAPI({
+        knowledgeDocumentId: String(knowledgeDocumentId),
+        idList,
+        departmentIdList,
+      })
+      showToast(t('common.operation_success'), 'success')
+      cancelShareRemoving()
+      closeShareRemoveSubmitConfirm()
+      await shareTableConfig?.fetchTableData?.()
+    } catch (e) {
+      console.error('remove knowledge doc share failed:', e)
+    } finally {
+      setShareRemovingSubmitting(false)
+    }
+  }, [
+    cancelShareRemoving,
+    closeShareRemoveSubmitConfirm,
+    opeId,
+    shareSelectedRows,
+    shareTableConfig,
+    shareTreeCheckedKeys,
+    showToast,
+    t,
+  ])
+
+  /** 根据当前 tab 构建右上角操作按钮。 */
+  const tabActions = useMemo(() => {
+    if (activeTab === 'share' && canDeleteShare) {
+      if (shareRemoving) {
+        return (
+          <>
+            <CxButton.Cancel size="small" disabled={shareRemovingSubmitting} onClick={cancelShareRemoving}>
+              {t('common.cancel')}
+            </CxButton.Cancel>
+            <CxButton.Delete
+              size="small"
+              icon={false}
+              loading={shareRemovingSubmitting}
+              disabled={shareRemovingSubmitting || (shareSelectedRows.length === 0 && shareTreeCheckedKeys.size === 0)}
+              onClick={openShareRemoveSubmitConfirm}
+            >
+              {t('selectTable.remove_selected')}
+            </CxButton.Delete>
+          </>
+        )
+      }
+      return (
+        <CxButton.Delete size="small" icon={false} onClick={startShareRemoving}>
+          {t('selectTable.batch_remove')}
+        </CxButton.Delete>
+      )
+    }
+    return null
+  }, [
+    activeTab,
+    canDeleteShare,
+    shareSelectedRows.length,
+    shareTreeCheckedKeys.size,
+    shareRemoving,
+    shareRemovingSubmitting,
+    cancelShareRemoving,
+    openShareRemoveSubmitConfirm,
+    startShareRemoving,
+    t,
+  ])
+
+  /** 切换共享树节点勾选状态。 */
+  const handleShareTreeCheck = useCallback((key: string | number, checked: boolean) => {
+    const k = String(key)
+    setShareTreeCheckedKeys((prev) => {
+      const next = new Set(prev)
+      if (checked) {
+        next.add(k)
+      } else {
+        next.delete(k)
+      }
+      return next
+    })
+  }, [])
+
+  return (
+    <>
+    <CxDrawer
+      title={t('menus.knowledge.doc.detail_title')}
+      isOpen={isOpen}
+      onClose={close}
+      drawerConfig={{
+        width: DOC_DETAIL_DRAWER_WIDTH,
+        closable: false,
+        extra: (
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-200"
+            onClick={close}
+            aria-label={t('common.close')}
+          >
+            <X size={16} />
+          </button>
+        ),
+        styles: {
+          body: {
+            padding: 24,
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+            height: DOC_DETAIL_DRAWER_HEIGHT,
+          },
+        },
+      }}
+    >
+      {loading ? (
+        <div className="flex justify-center py-20">
+          <Spin size="large" />
+        </div>
+      ) : (
+        <Form
+          component={false}
+          className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
+          <div className="grid shrink-0 grid-cols-1 md:grid-cols-4">
+            <Form.Item label={t('menus.knowledge.doc.name')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">{detailData.name || '-'}</div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.version')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {detailData.version != null && detailData.version !== '' ? String(detailData.version) : '-'}
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.type')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.type} enumKey="knowledgeDocType" />
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('menus.knowledge.doc.col_audit_status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enum value={detailData.auditStatus} enumKey="auditStatus" />
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.status')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100">
+                <CxTag.Enabled value={detailData.status} />
+              </div>
+            </Form.Item>
+
+            <Form.Item label={t('common.description')} className="!mb-0">
+              <div className="text-sm text-gray-900 dark:text-gray-100 break-words">
+                {String(detailData.description ?? '').trim() || '-'}
+              </div>
+            </Form.Item>
+          </div>
+
+          <div className="relative flex min-h-0 flex-1 flex-col overflow-hidden">
+            <CxTabs
+              activeKey={activeTab}
+              onChange={setActiveTab}
+              className="flex-1 flex flex-col min-h-0 [&_.ant-tabs-nav]:pr-[220px]"
+              items={[
+                {
+                  key: 'content',
+                  label: t('menus.knowledge.doc.tab_content'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden">
+                      {normalizeType(detailData.type) === 0 ? (
+                        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                          <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+                            <h3 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+                              {t('menus.knowledge.doc.content')}
+                            </h3>
+                          </div>
+                          <div className="min-h-0 flex-1 overflow-auto p-3 prose dark:prose-invert prose-sm max-w-none text-gray-900 dark:text-gray-100">
+                            {String(detailData.rawText ?? '').trim() ? (
+                              <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                {String(detailData.rawText ?? '')}
+                              </ReactMarkdown>
+                            ) : (
+                              <span className="text-gray-400 text-sm not-prose">{t('menus.knowledge.doc.preview_empty')}</span>
+                            )}
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
+                          <div className="flex min-h-[44px] shrink-0 items-center border-b border-gray-200 bg-gray-50 px-3 py-2.5 dark:border-gray-700 dark:bg-gray-700/50">
+                            <h3 className="line-clamp-1 py-0.5 text-xs font-semibold uppercase tracking-wider text-gray-700 dark:text-gray-300">
+                              {t('menus.knowledge.doc.attachment')}
+                            </h3>
+                          </div>
+                          <div className="min-h-0 flex-1 overflow-auto p-3">
+                            <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3">
+                              {fileUploadList.map((f, index) => (
+                                <div
+                                  key={f.uid}
+                                  className="relative h-[92px] rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800 px-4"
+                                >
+                                  <div className="absolute right-2 top-1 h-5 min-w-5 px-1.5 rounded-full bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-200 text-xs flex items-center justify-center">
+                                    {index + 1}
+                                  </div>
+                                  <div className="flex h-full items-center gap-3">
+                                    <div className="shrink-0" style={{ width: 72, height: 72 }}>
+                                      <CxUploadFile
+                                        disabled
+                                        draggable={false}
+                                        maxCount={1}
+                                        displayMode="picture"
+                                        thumbSize={72}
+                                        fileList={[f]}
+                                      />
+                                    </div>
+                                    <div className="min-w-0 flex-1">
+                                      <div className="text-sm text-gray-900 dark:text-gray-100 break-words line-clamp-2">
+                                        {f.name || '-'}
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              ))}
+                              {fileUploadList.length === 0 ? <div className="text-sm text-gray-400">{t('common.empty')}</div> : null}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  ),
+                },
+                {
+                  key: 'share',
+                  label: t('menus.knowledge.doc.tab_share'),
+                  children: (
+                    <div className="min-h-0 flex-1 flex flex-col overflow-hidden h-full">
+                      {shareTableConfig ? (
+                        <div className="flex min-h-0 h-full flex-col overflow-hidden">
+                          <div className="min-h-0 flex-1">
+                            <SelectTableView
+                              expectTree
+                              noPadding
+                              pageConfig={shareTableConfig}
+                              columns={shareColumns as any}
+                              rowKey="id"
+                              selectionMode={shareRemoving ? 'multiple' : 'none'}
+                              showSelectedPanel={false}
+                              treeCheckable={canDeleteShare && shareRemoving}
+                              treeCheckedKeys={shareTreeCheckedKeys}
+                              onTreeCheck={(_key, checked, node) => {
+                                const nodeKey = node?.id ?? node?.key ?? _key
+                                handleShareTreeCheck(nodeKey, checked)
+                              }}
+                              treeRenderLabel={(node: any) => node?.name ?? node?.title ?? '-'}
+                              value={shareSelectedRows}
+                              onChange={(next) => {
+                                setShareSelectedRows(Array.isArray(next) ? next : [])
+                              }}
+                            />
+                          </div>
+                        </div>
+                      ) : (
+                        <div className="flex items-center justify-center h-full text-gray-400">{t('common.no_data')}</div>
+                      )}
+                    </div>
+                  ),
+                },
+              ]}
+            />
+          </div>
+        </Form>
+      )}
+    </CxDrawer>
+    <ConfirmDialog
+      isOpen={shareRemoveSubmitConfirmOpen}
+      danger
+      title={t('common.confirm')}
+      message={t('selectTable.remove_selected_confirm')}
+      confirmText={t('common.confirm')}
+      cancelText={t('common.cancel')}
+      onClose={closeShareRemoveSubmitConfirm}
+      onConfirm={() => void submitShareRemoving()}
+    />
+    </>
+  )
+})
+
+KnowledgeDocDetailDrawer.displayName = 'KnowledgeDocDetailDrawer'
+
+export default KnowledgeDocDetailDrawer

package/src/views/chat/components/references-knowledge/panel.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { Message } from '@/types'
+import { X } from 'lucide-react'
+import KnowledgeDetailDrawer from './modal/knowledge-detail-drawer'
+import KnowledgeDocDetailDrawer from './modal/knowledge-doc-detail-drawer'
+
+export type ReferencesKnowledgePanelProps = {
+  isOpen: boolean
+  onClose: () => void
+  items: NonNullable<Message['references_knowledge_items']>
+}
+
+/**
+ * 会话右侧面板：展示本次回答引用的知识库资料（标题/正文/说明三段）。
+ * 说明：该面板不使用抽屉/遮罩，打开后不阻断主会话区域操作。
+ */
+export function ReferencesKnowledgePanel({
+  isOpen,
+  onClose,
+  items,
+}: ReferencesKnowledgePanelProps) {
+  const { t } = useTranslation()
+  const knowledgeDetailDrawerRef = useRef<any>(null)
+  const knowledgeDocDetailDrawerRef = useRef<any>(null)
+  const title = useMemo(
+    () => t('chat.references_panel_title', { count: items.length }),
+    [items.length, t],
+  )
+
+  /** 点击知识库名称后打开知识库详情抽屉。 */
+  const handleJumpKnowledgeDetail = (kbCode: string) => {
+    knowledgeDetailDrawerRef.current?.open({ opeId: kbCode })
+  }
+
+  /** 点击资料卡片后打开文档详情抽屉。 */
+  const handleOpenDocDetailDrawer = (docCode: string) => {
+    knowledgeDocDetailDrawerRef.current?.open({ opeId: docCode })
+  }
+
+  if (!isOpen) return null
+
+  return (
+    <>
+      <div className="fixed inset-y-0 right-0 z-30 flex w-[400px] flex-col border-l border-gray-200 bg-white text-gray-900 shadow-lg dark:border-white/10 dark:bg-[#131314] dark:text-gray-100">
+        <div className="flex items-center justify-between gap-3 border-b border-gray-200 px-4 py-3 dark:border-white/10">
+          <div className="min-w-0 text-sm font-semibold truncate">{title}</div>
+          <button
+            type="button"
+            className="rounded-lg p-1.5 text-gray-500 hover:bg-gray-50 hover:text-gray-700 active:scale-95 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-200"
+            onClick={onClose}
+            aria-label={t('common.close')}
+          >
+            <X size={16} />
+          </button>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto p-3 pb-6">
+          <div className="flex flex-col gap-3">
+            {items.map((x, idx) => {
+              const docName =
+                (typeof x.doc_name === 'string' && x.doc_name) ||
+                (typeof x.docName === 'string' && x.docName) ||
+                ''
+              const titleText = docName
+                ? t('chat.references_item_with_doc', {
+                    index: idx + 1,
+                    docName,
+                  })
+                : t('chat.references_item_plain', { index: idx + 1 })
+              const kbName = x.kb_name ?? '-'
+              const kbCode = x.kb_code ?? ''
+              return (
+                <div
+                  key={`${x.kb_code ?? 'kb'}-${x.doc_code ?? 'doc'}-${idx}`}
+                  className="group relative cursor-pointer rounded-xl bg-transparent p-4 text-gray-900 transition-colors hover:bg-gray-100 dark:text-gray-100 dark:hover:bg-white/10"
+                  onClick={() => handleOpenDocDetailDrawer(x.doc_code ?? '')}
+                >
+                  <div className="text-sm font-semibold">{titleText}</div>
+                  <div className="mt-2 line-clamp-3 text-sm leading-relaxed whitespace-pre-wrap break-words">
+                    {x.page_content || t('chat.references_excerpt_placeholder')}
+                  </div>
+                  <div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
+                    <span>{t('chat.references_kb_label')}</span>
+                    {kbCode ? (
+                      <button
+                        type="button"
+                        className="text-blue-500 dark:text-blue-400"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          handleJumpKnowledgeDetail(kbCode)
+                        }}
+                      >
+                        {kbName}
+                      </button>
+                    ) : (
+                      <span>{kbName}</span>
+                    )}
+                  </div>
+
+                  <div className="absolute bottom-3 right-3 flex h-6 w-6 items-center justify-center rounded-full bg-gray-200 text-[12px] font-semibold text-gray-700 dark:bg-white/10 dark:text-gray-200">
+                    {idx + 1}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      <KnowledgeDetailDrawer ref={knowledgeDetailDrawerRef} />
+      <KnowledgeDocDetailDrawer ref={knowledgeDocDetailDrawerRef} />
+    </>
+  )
+}

package/src/views/chat/hooks/use-chat-common.ts

@@ -0,0 +1,19 @@
+import { useCallback } from 'react'
+
+import { useAuth } from '@/contexts/AuthContext'
+import { useChatContext } from '@/contexts/ChatContext'
+
+/** 新对话页 / 会话页共用的停止流式与创建权限 */
+export function useChatCommon() {
+  const { hasPermission } = useAuth()
+  const { stopStream } = useChatContext()
+
+  const handleStop = useCallback(async () => {
+    await stopStream()
+  }, [stopStream])
+
+  return {
+    canCreate: hasPermission('system:chat:send'),
+    handleStop,
+  }
+}