refactor: unified cn utils (#29916)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: yyh <92089059+lyzno1@users.noreply.github.com>

web/app/components/datasets/documents/create-from-pipeline/data-source-options/datasource-icon.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react'
 import { memo } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DatasourceIconProps = {
   size?: string

web/app/components/datasets/documents/create-from-pipeline/data-source-options/option-card.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNodeType } from '@/app/components/workflow/nodes/data-source/types'
 import DatasourceIcon from './datasource-icon'
 import { useDatasourceIcon } from './hooks'

web/app/components/datasets/documents/create-from-pipeline/data-source/base/credential-selector/trigger.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import type { DataSourceCredential } from '@/types/pipeline'
 import { RiArrowDownSLine } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CredentialIcon } from '@/app/components/datasets/common/credential-icon'
 
 type TriggerProps = {

web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
 import { RiDeleteBinLine, RiErrorWarningFill, RiUploadCloud2Line } from '@remixicon/react'
 import DocumentFileIcon from '@/app/components/datasets/common/document-file-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CustomFile as File, FileItem } from '@/models/datasets'
 import { ToastContext } from '@/app/components/base/toast'
 import { upload } from '@/service/base'

web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx

@@ -5,7 +5,7 @@ import type { ListChildComponentProps } from 'react-window'
 import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import Checkbox from '@/app/components/base/checkbox'
 import NotionIcon from '@/app/components/base/notion-icon'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'
 import Radio from '@/app/components/base/radio/ui'
 

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react'
 import { BucketsGray } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BucketProps = {
   bucketName: string

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useTranslation } from 'react-i18next'
 
 type DriveProps = {

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/dropdown/index.tsx

@@ -5,7 +5,7 @@ import {
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
 import { RiMoreFill } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Menu from './menu'
 
 type DropdownProps = {

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/item.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type BreadcrumbItemProps = {
   name: string

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/file-icon.tsx

@@ -3,7 +3,7 @@ import { OnlineDriveFileType } from '@/models/pipeline'
 import { BucketsBlue, Folder } from '@/app/components/base/icons/src/public/knowledge/online-drive'
 import FileTypeIcon from '@/app/components/base/file-uploader/file-type-icon'
 import { getFileType } from './utils'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type FileIconProps = {
   type: OnlineDriveFileType

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx

@@ -6,7 +6,7 @@ import FileIcon from './file-icon'
 import { formatFileSize } from '@/utils/format'
 import Tooltip from '@/app/components/base/tooltip'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { Placement } from '@floating-ui/react'
 
 type ItemProps = {

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/checkbox-with-label.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 import Tooltip from '@/app/components/base/tooltip'
 

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx

@@ -1,6 +1,6 @@
 'use client'
 import React, { useCallback } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem as CrawlResultItemType } from '@/models/datasets'
 import Checkbox from '@/app/components/base/checkbox'
 import Button from '@/app/components/base/button'

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { CrawlResultItem } from '@/models/datasets'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx

@@ -1,7 +1,7 @@
 'use client'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type CrawlingProps = {
   className?: string

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/error-message.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiErrorWarningFill } from '@remixicon/react'
 
 type ErrorMessageProps = {

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx

@@ -2,7 +2,7 @@ import Button from '@/app/components/base/button'
 import { useAppForm } from '@/app/components/base/form'
 import BaseField from '@/app/components/base/form/form-scenarios/base/field'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { RiPlayLargeLine } from '@remixicon/react'
 import { useBoolean } from 'ahooks'
 import { useEffect, useMemo } from 'react'

web/app/components/datasets/documents/create-from-pipeline/processing/embedding-process/index.tsx

@@ -9,7 +9,7 @@ import {
   RiLoader2Fill,
   RiTerminalBoxLine,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Button from '@/app/components/base/button'
 import type { IndexingStatusResponse } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'

web/app/components/datasets/documents/create-from-pipeline/step-indicator.tsx

@@ -1,4 +1,4 @@
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import React from 'react'
 
 export type Step = {

web/app/components/datasets/documents/detail/batch-modal/csv-uploader.tsx

@@ -6,7 +6,7 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'

web/app/components/datasets/documents/detail/completed/child-segment-detail.tsx

@@ -13,7 +13,7 @@ import { useSegmentListContext } from './index'
 import type { ChildChunkDetail, ChunkingMode } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatTime } from '@/utils/time'
 
@@ -72,7 +72,7 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.editChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -105,8 +105,8 @@ const ChildSegmentDetail: FC<IChildSegmentDetailProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={docForm}
             question={content}

web/app/components/datasets/documents/detail/completed/child-segment-list.tsx

@@ -9,7 +9,7 @@ import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
 import { useSegmentListContext } from './index'
 import type { ChildChunkDetail } from '@/models/datasets'
 import Input from '@/app/components/base/input'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 

web/app/components/datasets/documents/detail/completed/common/add-another.tsx

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Checkbox from '@/app/components/base/checkbox'
 
 type AddAnotherProps = {
@@ -17,7 +17,7 @@ const AddAnother: FC<AddAnotherProps> = ({
   const { t } = useTranslation()
 
   return (
-    <div className={classNames('flex items-center gap-x-1 pl-1', className)}>
+    <div className={cn('flex items-center gap-x-1 pl-1', className)}>
       <Checkbox
         key='add-another-checkbox'
         className='shrink-0'

web/app/components/datasets/documents/detail/completed/common/batch-action.tsx

@@ -3,7 +3,7 @@ import { RiArchive2Line, RiCheckboxCircleLine, RiCloseCircleLine, RiDeleteBinLin
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import Divider from '@/app/components/base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Confirm from '@/app/components/base/confirm'
 import Button from '@/app/components/base/button'
 

web/app/components/datasets/documents/detail/completed/common/chunk-content.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import type { ComponentProps, FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChunkingMode } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { Markdown } from '@/app/components/base/markdown'
 
 type IContentProps = ComponentProps<'textarea'>
@@ -16,10 +16,8 @@ const Textarea: FC<IContentProps> = React.memo(({
 }) => {
   return (
     <textarea
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none overflow-y-auto border-none bg-transparent outline-none',
+        className)}
       placeholder={placeholder}
       value={value}
       disabled={disabled}
@@ -82,10 +80,8 @@ const AutoResizeTextArea: FC<IAutoResizeTextAreaProps> = React.memo(({
   return (
     <textarea
       ref={textareaRef}
-      className={classNames(
-        'inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
-        className,
-      )}
+      className={cn('inset-0 w-full resize-none appearance-none border-none bg-transparent outline-none',
+        className)}
       style={{
         maxHeight,
       }}

web/app/components/datasets/documents/detail/completed/common/drawer.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useKeyPress } from 'ahooks'
 import { useSegmentListContext } from '..'
 

web/app/components/datasets/documents/detail/completed/common/full-screen-drawer.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Drawer from './drawer'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { noop } from 'lodash-es'
 
 type IFullScreenDrawerProps = {

web/app/components/datasets/documents/detail/completed/common/keywords.tsx

@@ -1,6 +1,6 @@
 import React, { type FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import type { SegmentDetailModel } from '@/models/datasets'
 import TagInput from '@/app/components/base/tag-input'
 
@@ -23,7 +23,7 @@ const Keywords: FC<IKeywordsProps> = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={classNames('flex flex-col', className)}>
+    <div className={cn('flex flex-col', className)}>
       <div className='system-xs-medium-uppercase text-text-tertiary'>{t('datasetDocuments.segment.keywords')}</div>
       <div className='flex max-h-[200px] w-full flex-wrap gap-1 overflow-auto text-text-tertiary'>
         {(!segInfo?.keywords?.length && actionType === 'view')

web/app/components/datasets/documents/detail/completed/common/segment-index-tag.tsx

@@ -1,6 +1,6 @@
 import React, { type FC, useMemo } from 'react'
 import { Chunk } from '@/app/components/base/icons/src/vender/knowledge'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type ISegmentIndexTagProps = {
   positionId?: string | number

web/app/components/datasets/documents/detail/completed/common/tag.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 const Tag = ({ text, className }: { text: string; className?: string }) => {
   return (

web/app/components/datasets/documents/detail/completed/index.tsx

@@ -19,7 +19,7 @@ import FullScreenDrawer from './common/full-screen-drawer'
 import ChildSegmentDetail from './child-segment-detail'
 import StatusItem from './status-item'
 import Pagination from '@/app/components/base/pagination'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import Input from '@/app/components/base/input'

web/app/components/datasets/documents/detail/completed/new-child-segment.tsx

@@ -15,7 +15,7 @@ import { useSegmentListContext } from './index'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { type ChildChunkDetail, ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddChildSegment } from '@/service/knowledge/use-segment'
@@ -114,7 +114,7 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
 
   return (
     <div className={'flex h-full flex-col'}>
-      <div className={classNames('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
+      <div className={cn('flex items-center justify-between', fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}>
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>{t('datasetDocuments.segment.addChildChunk')}</div>
           <div className='flex items-center gap-x-2'>
@@ -145,8 +145,8 @@ const NewChildSegmentModal: FC<NewChildSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
-        <div className={classNames('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
+      <div className={cn('flex w-full grow', fullScreen ? 'flex-row justify-center px-6 pt-6' : 'px-4 py-3')}>
+        <div className={cn('h-full overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'w-full')}>
           <ChunkContent
             docForm={ChunkingMode.parentChild}
             question={content}

web/app/components/datasets/documents/detail/completed/segment-card/chunk-content.tsx

@@ -1,5 +1,5 @@
 import React, { type FC } from 'react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useSegmentListContext } from '..'
 import { Markdown } from '@/app/components/base/markdown'
 

web/app/components/datasets/documents/detail/completed/segment-card/index.tsx

@@ -13,7 +13,7 @@ import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
 import Confirm from '@/app/components/base/confirm'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Badge from '@/app/components/base/badge'
 import { isAfter } from '@/utils/time'
 import Tooltip from '@/app/components/base/tooltip'

web/app/components/datasets/documents/detail/completed/segment-detail.tsx

@@ -16,7 +16,7 @@ import { useSegmentListContext } from './index'
 import { ChunkingMode, type SegmentDetailModel } from '@/models/datasets'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { formatNumber } from '@/utils/format'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { IndexingType } from '@/app/components/datasets/create/step-two'

web/app/components/datasets/documents/detail/document-title.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react'
 import type { ChunkingMode, ParentMode } from '@/models/datasets'
 import { useRouter } from 'next/navigation'
 import DocumentPicker from '../../common/document-picker'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 
 type DocumentTitleProps = {
   datasetId: string

web/app/components/datasets/documents/detail/embedding/index.tsx

@@ -10,7 +10,7 @@ import { IndexingType } from '../../../create/step-two'
 import { indexMethodIcon, retrievalIcon } from '../../../create/icons'
 import EmbeddingSkeleton from './skeleton'
 import { RETRIEVE_METHOD } from '@/types/app'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import { ToastContext } from '@/app/components/base/toast'
 import type { IndexingStatusResponse } from '@/models/datasets'

web/app/components/datasets/documents/detail/index.tsx

@@ -12,7 +12,7 @@ import Metadata from '@/app/components/datasets/metadata/metadata-document'
 import SegmentAdd, { ProcessStatus } from './segment-add'
 import BatchModal from './batch-modal'
 import style from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Divider from '@/app/components/base/divider'
 import Loading from '@/app/components/base/loading'
 import Toast from '@/app/components/base/toast'

web/app/components/datasets/documents/detail/metadata/index.tsx

@@ -7,7 +7,7 @@ import { useContext } from 'use-context-selector'
 import { get } from 'lodash-es'
 import { useDocumentContext } from '../context'
 import s from './style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Input from '@/app/components/base/input'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'

web/app/components/datasets/documents/detail/new-segment.tsx

@@ -15,7 +15,7 @@ import Dot from './completed/common/dot'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { ToastContext } from '@/app/components/base/toast'
 import { ChunkingMode, type SegmentUpdater } from '@/models/datasets'
-import classNames from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { formatNumber } from '@/utils/format'
 import Divider from '@/app/components/base/divider'
 import { useAddSegment } from '@/service/knowledge/use-segment'
@@ -153,10 +153,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
   return (
     <div className={'flex h-full flex-col'}>
       <div
-        className={classNames(
-          'flex items-center justify-between',
-          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3',
-        )}
+        className={cn('flex items-center justify-between',
+          fullScreen ? 'border border-divider-subtle py-3 pl-6 pr-4' : 'pl-4 pr-3 pt-3')}
       >
         <div className='flex flex-col'>
           <div className='system-xl-semibold text-text-primary'>
@@ -189,8 +187,8 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
-        <div className={classNames('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
+      <div className={cn('flex grow', fullScreen ? 'w-full flex-row justify-center gap-x-8 px-6 pt-6' : 'flex-col gap-y-1 px-4 py-3')}>
+        <div className={cn('overflow-hidden whitespace-pre-line break-all', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}
             question={question}
@@ -200,7 +198,7 @@ const NewSegmentModal: FC<NewSegmentModalProps> = ({
             isEditMode={true}
           />
         </div>
-        <div className={classNames('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
+        <div className={cn('flex flex-col', fullScreen ? 'w-[320px] gap-y-2' : 'w-full gap-y-1')}>
           <ImageUploaderInChunk
             key={imageUploaderKey}
             value={attachments}

web/app/components/datasets/documents/detail/segment-add/index.tsx

@@ -8,7 +8,7 @@ import {
   RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { CheckCircle } from '@/app/components/base/icons/src/vender/solid/general'
 import Popover from '@/app/components/base/popover'
 import { useBoolean } from 'ahooks'

web/app/components/datasets/documents/index.tsx

@@ -16,7 +16,7 @@ import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
 import IndexFailed from '@/app/components/datasets/common/document-status-with-action/index-failed'
 import { useProviderContext } from '@/context/provider-context'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import { useDocumentList, useInvalidDocumentDetail, useInvalidDocumentList } from '@/service/knowledge/use-document'
 import { useInvalid } from '@/service/use-base'
 import { useChildSegmentListKey, useSegmentListKey } from '@/service/knowledge/use-segment'

web/app/components/datasets/documents/list.tsx

@@ -15,7 +15,7 @@ import FileTypeIcon from '../../base/file-uploader/file-type-icon'
 import s from './style.module.css'
 import RenameModal from './rename-modal'
 import BatchAction from './detail/completed/common/batch-action'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Toast from '@/app/components/base/toast'
 import { asyncRunSafe } from '@/utils'

web/app/components/datasets/documents/operations.tsx

@@ -22,7 +22,7 @@ import Switch from '../../base/switch'
 import { noop } from 'lodash-es'
 import Tooltip from '../../base/tooltip'
 import Divider from '../../base/divider'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import {
   RiArchive2Line,
   RiDeleteBinLine,

web/app/components/datasets/documents/status-item/index.tsx

@@ -11,7 +11,7 @@ import type { CommonResponse } from '@/models/common'
 import { asyncRunSafe } from '@/utils'
 import { useDebounceFn } from 'ahooks'
 import s from '../style.module.css'
-import cn from '@/utils/classnames'
+import { cn } from '@/utils/classnames'
 import Tooltip from '@/app/components/base/tooltip'
 import Switch from '@/app/components/base/switch'
 import type { OperationName } from '../types'