feat: child chunk component for dataset

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

@@ -999,8 +999,11 @@ const StepTwo = ({
           </div>
         </div>
       </div>
-      <FloatRightContainer isMobile={isMobile} isOpen={showPreview} onClose={hidePreview} footer={null}>
-        {showPreview && <div ref={previewScrollRef} className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll border-l border-[#F2F4F7]')}>
+      <FloatRightContainer isMobile={isMobile} isOpen={true} onClose={() => { }} footer={null}>
+        {showPreview && <div
+          ref={previewScrollRef}
+          className={cn(s.previewWrap, isMobile && s.isMobile, 'relative h-full overflow-y-scroll border-l border-[#F2F4F7]')}
+        >
           <div className={cn(s.previewHeader, previewScrolled && `${s.fixed} pb-3`)}>
             <div className='flex items-center justify-between px-8'>
               <div className='grow flex items-center'>

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

@@ -0,0 +1,7 @@
+import type { FC, PropsWithChildren } from 'react'
+
+export type FormattedTextProps = PropsWithChildren
+
+export const FormattedText: FC<FormattedTextProps> = (props) => {
+  return <p className='leading-7'>{props.children}</p>
+}

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

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import type { FC, ReactNode } from 'react'
+import { autoUpdate, flip, inline, shift, useDismiss, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
+import type { SliceProps } from './type'
+import classNames from '@/utils/classnames'
+
+type NormalSliceProps = SliceProps<{
+  label: ReactNode
+  tooltip: ReactNode
+}>
+
+const baseStyle = 'py-[3px]'
+
+export const NormalSlice: FC<NormalSliceProps> = (props) => {
+  const { label, className, text, tooltip, ...rest } = props
+  const [tooltipOpen, setTooltipOpen] = useState(false)
+  const { refs, floatingStyles, context } = useFloating({
+    open: tooltipOpen,
+    onOpenChange: setTooltipOpen,
+    whileElementsMounted: autoUpdate,
+    placement: 'top',
+    middleware: [
+      inline(),
+      flip(),
+      shift(),
+    ],
+  })
+  const hover = useHover(context, {
+    delay: { open: 500 },
+    move: true,
+  })
+  const dismiss = useDismiss(context)
+  const role = useRole(context, { role: 'tooltip' })
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, dismiss, role])
+  return (
+    <>
+      <span {...rest} className={classNames(
+        'group align-bottom mr-1 select-none text-sm',
+        className,
+      )} ref={refs.setReference}
+      {...getReferenceProps()}
+      >
+        <span className={classNames(
+          baseStyle,
+          'px-1 bg-state-base-hover-alt text-text-tertiary group-hover:bg-state-accent-solid group-hover:text-white',
+        )}>
+          {label}
+        </span>
+        <span className={classNames(
+          baseStyle,
+          'px-1 text-text-secondary bg-state-base-hover group-hover:bg-state-accent-hover-alt group-hover:text-text-primary',
+        )}>
+          {text}
+        </span>
+        <span
+          className='py-[3px] bg-state-base-active group-hover:bg-state-accent-solid text-sm px-[1px]'
+        >
+          {/* use a zero-width space to make the hover area bigger */}
+          &#8203;
+        </span>
+      </span>
+      {tooltipOpen && <div ref={refs.setFloating} style={floatingStyles}
+        {...getFloatingProps()}
+        className='p-2 rounded-md bg-components-tooltip-bg shadow shadow-shadow-shadow-5 backdrop-blur-[5px] text-text-secondary leading-4 border-[0.5px] border-components-panel-border text-xs'
+      >
+        {tooltip}
+      </div>}
+    </>
+  )
+}

web/app/components/datasets/formatted-text/flavours/type.ts

@@ -0,0 +1,5 @@
+import type { ComponentProps } from 'react'
+
+export type SliceProps<T = {}> = T & {
+  text: string
+} & ComponentProps<'span'>

web/app/dev-preview/page.tsx

@@ -1,12 +1,16 @@
 'use client'
 
-import { useState } from 'react'
-import { InputNumber } from '../components/base/input-number'
-// import { Stepper } from '../components/datasets/create/stepper'
+import { FormattedText } from '../components/datasets/formatted-text/flavours/formatted'
+import { NormalSlice } from '../components/datasets/formatted-text/flavours/normal'
 
 export default function Page() {
-  const [step, setStep] = useState(0)
   return <div className='p-4'>
-    <InputNumber onChange={setStep} unit={'tokens'} />
+    <FormattedText>
+      <NormalSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+      <NormalSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+      <NormalSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+      <NormalSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+      <NormalSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+    </FormattedText>
   </div>
 }