feat: enhance child segment list and segment card UI with improved styling and new props for EditSlice

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

@@ -3,6 +3,7 @@ import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { EditSlice } from '../../../formatted-text/flavours/edit-slice'
 import { useDocumentContext } from '../index'
+import { FormattedText } from '../../../formatted-text/formatted'
 import Empty from './common/empty'
 import FullDocListSkeleton from './skeleton/full-doc-list-skeleton'
 import type { ChildChunkDetail } from '@/models/datasets'
@@ -135,9 +136,13 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       {isLoading ? <FullDocListSkeleton /> : null}
       {((isFullDocMode && !isLoading) || !collapsed)
         ? <div className={classNames('flex items-center gap-x-0.5', isFullDocMode ? 'grow' : '')}>
-          {isParagraphMode && <Divider type='vertical' className='h-auto w-[2px] mx-[7px] bg-text-accent-secondary' />}
+          {isParagraphMode && (
+            <div className='self-stretch my-0.5'>
+              <Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
+            </div>
+          )}
           {childChunks.length > 0
-            ? <div className={classNames('w-full !leading-5 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
+            ? <FormattedText className={classNames('w-full !leading-6 flex flex-col', isParagraphMode ? 'gap-y-2' : 'gap-y-3')}>
               {childChunks.map((childChunk) => {
                 const edited = childChunk.updated_at !== childChunk.created_at
                 return <EditSlice
@@ -146,13 +151,15 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
                   text={childChunk.content}
                   onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
                   className='line-clamp-3'
+                  labelClassName='font-semibold'
+                  contentClassName={'!leading-6'}
                   onClick={(e) => {
                     e.stopPropagation()
                     onClickSlice?.(childChunk)
                   }}
                 />
               })}
-            </div>
+            </FormattedText>
             : inputValue !== ''
               ? <div className='h-full w-full'>
                 <Empty onClearFilter={onClearFilter!} />

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

@@ -10,7 +10,6 @@ import { SegmentIndexTag } from './common/segment-index-tag'
 import ParentChunkCardSkeleton from './skeleton/parent-chunk-card-skeleton'
 import { useSegmentListContext } from './index'
 import type { ChildChunkDetail, SegmentDetailModel } from '@/models/datasets'
-import Indicator from '@/app/components/header/indicator'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
 import { formatNumber } from '@/utils/format'
@@ -157,66 +156,58 @@ const SegmentCard: FC<ISegmentCardProps> = ({
           </div>
           {!isFullDocMode
             ? <div className='flex items-center'>
-              {loading
-                ? (
-                  <Indicator color="gray" />
-                )
-                : (
-                  <>
-                    <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
-                    {embeddingAvailable && (
-                      <div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
+              <StatusItem status={enabled ? 'enabled' : 'disabled'} reverse textCls="text-text-tertiary system-xs-regular" />
+              {embeddingAvailable && (
+                <div className="absolute -top-2 -right-2.5 z-20 hidden group-hover/card:flex items-center gap-x-0.5 p-1
                       rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg shadow-md backdrop-blur-[5px]">
-                        {!archived && (
-                          <>
-                            <Tooltip
-                              popupContent='Edit'
-                              popupClassName='text-text-secondary system-xs-medium'
-                            >
-                              <div
-                                className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  onClickEdit?.()
-                                }}>
-                                <RiEditLine className='w-4 h-4 text-text-tertiary' />
-                              </div>
-                            </Tooltip>
-                            <Tooltip
-                              popupContent='Delete'
-                              popupClassName='text-text-secondary system-xs-medium'
-                            >
-                              <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-destructive-hover cursor-pointer group/delete'
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  setShowModal(true)
-                                }
-                                }>
-                                <RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
-                              </div>
-                            </Tooltip>
-                            <Divider type="vertical" className="h-3.5 bg-divider-regular" />
-                          </>
-                        )}
+                  {!archived && (
+                    <>
+                      <Tooltip
+                        popupContent='Edit'
+                        popupClassName='text-text-secondary system-xs-medium'
+                      >
                         <div
-                          onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                          className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-base-hover cursor-pointer'
+                          onClick={(e) => {
                             e.stopPropagation()
+                            onClickEdit?.()
+                          }}>
+                          <RiEditLine className='w-4 h-4 text-text-tertiary' />
+                        </div>
+                      </Tooltip>
+                      <Tooltip
+                        popupContent='Delete'
+                        popupClassName='text-text-secondary system-xs-medium'
+                      >
+                        <div className='shrink-0 w-6 h-6 flex items-center justify-center rounded-lg hover:bg-state-destructive-hover cursor-pointer group/delete'
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            setShowModal(true)
                           }
-                          className="flex items-center"
-                        >
-                          <Switch
-                            size='md'
-                            disabled={archived || detail.status !== 'completed'}
-                            defaultValue={enabled}
-                            onChange={async (val) => {
-                              await onChangeSwitch?.(val, id)
-                            }}
-                          />
+                          }>
+                          <RiDeleteBinLine className='w-4 h-4 text-text-tertiary group-hover/delete:text-text-destructive' />
                         </div>
-                      </div>
-                    )}
-                  </>
-                )}
+                      </Tooltip>
+                      <Divider type="vertical" className="h-3.5 bg-divider-regular" />
+                    </>
+                  )}
+                  <div
+                    onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) =>
+                      e.stopPropagation()
+                    }
+                    className="flex items-center"
+                  >
+                    <Switch
+                      size='md'
+                      disabled={archived || detail.status !== 'completed'}
+                      defaultValue={enabled}
+                      onChange={async (val) => {
+                        await onChangeSwitch?.(val, id)
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
             </div>
             : null}
         </>

web/app/components/datasets/formatted-text/flavours/edit-slice.tsx

@@ -10,10 +10,12 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
 type EditSliceProps = SliceProps<{
   label: ReactNode
   onDelete: () => void
+  labelClassName?: string
+  contentClassName?: string
 }>
 
 export const EditSlice: FC<EditSliceProps> = (props) => {
-  const { label, className, text, onDelete, ...rest } = props
+  const { label, className, text, onDelete, labelClassName, contentClassName, ...rest } = props
   const [delBtnShow, setDelBtnShow] = useState(false)
   const [isDelBtnHover, setDelBtnHover] = useState(false)
 
@@ -44,12 +46,16 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         <SliceLabel
           className={classNames(
             isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
+            labelClassName,
           )}
         >
           {label}
         </SliceLabel>
         <SliceContent
-          className={classNames(isDestructive && '!bg-state-destructive-hover-alt')}
+          className={classNames(
+            isDestructive && '!bg-state-destructive-hover-alt',
+            contentClassName,
+          )}
         >
           {text}
         </SliceContent>