fix: Enhance components with display names and ref forwarding; fix preview and edit slice style issue

web/app/components/base/auto-height-textarea/common.tsx

@@ -49,4 +49,6 @@ const AutoHeightTextarea = forwardRef<HTMLTextAreaElement, AutoHeightTextareaPro
   },
 )
 
+AutoHeightTextarea.displayName = 'AutoHeightTextarea'
+
 export default AutoHeightTextarea

web/app/components/base/switch/index.tsx

@@ -11,7 +11,7 @@ type SwitchProps = {
   className?: string
 }
 
-const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps) => {
+const Switch = React.forwardRef<HTMLButtonElement>(({ onChange, size = 'md', defaultValue = false, disabled = false, className }: SwitchProps, ref) => {
   const [enabled, setEnabled] = useState(defaultValue)
   useEffect(() => {
     setEnabled(defaultValue)
@@ -38,6 +38,7 @@ const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false,
   }
   return (
     <OriginalSwitch
+      ref={ref}
       checked={enabled}
       onChange={(checked: boolean) => {
         if (disabled)
@@ -63,5 +64,8 @@ const Switch = ({ onChange, size = 'md', defaultValue = false, disabled = false,
       />
     </OriginalSwitch>
   )
-}
+})
+
+Switch.displayName = 'Switch'
+
 export default React.memo(Switch)

web/app/components/datasets/chunk.tsx

@@ -29,9 +29,9 @@ export const ChunkContainer: FC<ChunkContainerProps> = (props) => {
   const { label, characterCount, children } = props
   return <div className='space-y-2'>
     <ChunkLabel label={label} characterCount={characterCount} />
-    <p className='text-text-secondary text-sm tracking-[-0.0005em]'>
+    <div className='text-text-secondary text-sm tracking-[-0.0005em]'>
       {children}
-    </p>
+    </div>
   </div>
 }
 

web/app/components/datasets/create/step-two/index.tsx

@@ -1086,6 +1086,7 @@ const StepTwo = ({
                           label={`C-${indexForLabel}`}
                           text={child}
                           tooltip={`Child-chunk-${indexForLabel} · ${child.length} Characters`}
+                          labelInnerClassName='text-[10px] font-semibold align-bottom leading-7'
                         />
                       )
                     })}

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

@@ -137,7 +137,7 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
       {((isFullDocMode && !isLoading) || !collapsed)
         ? <div className={classNames('flex items-center gap-x-0.5', isFullDocMode ? 'grow mb-6' : '')}>
           {isParagraphMode && (
-            <div className='self-stretch my-0.5'>
+            <div className='self-stretch'>
               <Divider type='vertical' className='w-[2px] mx-[7px] bg-text-accent-secondary' />
             </div>
           )}
@@ -151,8 +151,9 @@ const ChildSegmentList: FC<IChildSegmentCardProps> = ({
                   text={childChunk.content}
                   onDelete={() => onDelete?.(childChunk.segment_id, childChunk.id)}
                   className='line-clamp-3'
-                  labelClassName='font-semibold'
-                  contentClassName={'!leading-6'}
+                  labelInnerClassName='text-[10px] font-semibold align-bottom leading-6'
+                  contentClassName='!leading-6'
+                  showDivider={false}
                   onClick={(e) => {
                     e.stopPropagation()
                     onClickSlice?.(childChunk)

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

@@ -133,7 +133,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
           </div>
         </div>
       </div>
-      <div className={classNames('flex grow overflow-hidden', fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4')}>
+      <div className={classNames(
+        'flex grow overflow-hidden',
+        fullScreen ? 'w-full flex-row justify-center px-6 pt-6 gap-x-8 mx-auto' : 'flex-col gap-y-1 py-3 px-4',
+        !isEditMode && 'pb-0',
+      )}>
         <div className={classNames('break-all overflow-y-auto whitespace-pre-line', fullScreen ? 'w-1/2' : 'grow')}>
           <ChunkContent
             docForm={docForm}

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

@@ -10,12 +10,22 @@ import ActionButton, { ActionButtonState } from '@/app/components/base/action-bu
 type EditSliceProps = SliceProps<{
   label: ReactNode
   onDelete: () => void
-  labelClassName?: string
+  labelInnerClassName?: string
   contentClassName?: string
+  showDivider?: boolean
 }>
 
 export const EditSlice: FC<EditSliceProps> = (props) => {
-  const { label, className, text, onDelete, labelClassName, contentClassName, ...rest } = props
+  const {
+    label,
+    className,
+    text,
+    onDelete,
+    labelInnerClassName,
+    contentClassName,
+    showDivider = true,
+    ...rest
+  } = props
   const [delBtnShow, setDelBtnShow] = useState(false)
   const [isDelBtnHover, setDelBtnHover] = useState(false)
 
@@ -37,7 +47,7 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
   const isDestructive = delBtnShow && isDelBtnHover
 
   return (
-    <div>
+    <span className='inline-block'>
       <SliceContainer {...rest}
         className={className}
         ref={refs.setReference}
@@ -46,8 +56,8 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         <SliceLabel
           className={classNames(
             isDestructive && '!bg-state-destructive-solid !text-text-primary-on-surface',
-            labelClassName,
           )}
+          labelInnerClassName={labelInnerClassName}
         >
           {label}
         </SliceLabel>
@@ -59,11 +69,11 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
         >
           {text}
         </SliceContent>
-        <SliceDivider
+        {showDivider && <SliceDivider
           className={classNames(
             isDestructive && '!bg-state-destructive-hover-alt',
           )}
-        />
+        />}
         {delBtnShow && <FloatingFocusManager
           context={context}
         >
@@ -88,6 +98,6 @@ export const EditSlice: FC<EditSliceProps> = (props) => {
           </div>
         </FloatingFocusManager>}
       </SliceContainer>
-    </div>
+    </span>
   )
 }

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

@@ -7,10 +7,11 @@ import { SliceContainer, SliceContent, SliceDivider, SliceLabel } from './shared
 type PreviewSliceProps = SliceProps<{
   label: ReactNode
   tooltip: ReactNode
+  labelInnerClassName?: string
 }>
 
 export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
-  const { label, className, text, tooltip, ...rest } = props
+  const { label, className, text, tooltip, labelInnerClassName, ...rest } = props
   const [tooltipOpen, setTooltipOpen] = useState(false)
   const { refs, floatingStyles, context } = useFloating({
     open: tooltipOpen,
@@ -37,7 +38,7 @@ export const PreviewSlice: FC<PreviewSliceProps> = (props) => {
         ref={refs.setReference}
         {...getReferenceProps()}
       >
-        <SliceLabel>{label}</SliceLabel>
+        <SliceLabel labelInnerClassName={labelInnerClassName}>{label}</SliceLabel>
         <SliceContent>{text}</SliceContent>
         <SliceDivider />
       </SliceContainer>

web/app/components/datasets/formatted-text/flavours/shared.tsx

@@ -14,16 +14,18 @@ export const SliceContainer: FC<SliceContainerProps> = forwardRef((props, ref) =
 })
 SliceContainer.displayName = 'SliceContainer'
 
-export type SliceLabelProps = ComponentProps<'span'>
+export type SliceLabelProps = ComponentProps<'span'> & { labelInnerClassName?: string }
 
 export const SliceLabel: FC<SliceLabelProps> = forwardRef((props, ref) => {
-  const { className, children, ...rest } = props
+  const { className, children, labelInnerClassName, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
     baseStyle,
     'px-1 bg-state-base-hover-alt group-hover:bg-state-accent-solid group-hover:text-text-primary-on-surface uppercase text-text-tertiary',
     className,
   )}>
-    {children}
+    <span className={classNames('text-nowrap', labelInnerClassName)}>
+      {children}
+    </span>
   </span>
 })
 SliceLabel.displayName = 'SliceLabel'
@@ -47,7 +49,8 @@ export type SliceDividerProps = ComponentProps<'span'>
 export const SliceDivider: FC<SliceDividerProps> = forwardRef((props, ref) => {
   const { className, ...rest } = props
   return <span {...rest} ref={ref} className={classNames(
-    'py-[3px] bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
+    baseStyle,
+    'bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]',
     className,
   )}>
     {/* use a zero-width space to make the hover area bigger */}