feat: parent child retrieval (#12106)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/datasets/create/step-two/index.module.css

@@ -13,18 +13,6 @@
   z-index: 10;
 }
 
-.form {
-  @apply px-16 pb-8;
-}
-
-.form .label {
-  @apply pt-6 pb-2 flex items-center;
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-  color: #344054;
-}
-
 .segmentationItem {
   min-height: 68px;
 }
@@ -75,6 +63,10 @@
   cursor: pointer;
 }
 
+.disabled {
+  cursor: not-allowed !important;
+}
+
 .indexItem.disabled:hover {
   background-color: #fcfcfd;
   border-color: #f2f4f7;
@@ -87,8 +79,7 @@
 }
 
 .radioItem {
-  @apply relative mb-2 rounded-xl border border-gray-100 cursor-pointer;
-  background-color: #fcfcfd;
+  @apply relative mb-2 rounded-xl border border-components-option-card-option-border cursor-pointer bg-components-option-card-option-bg;
 }
 
 .radioItem.segmentationItem.custom {
@@ -146,7 +137,7 @@
 }
 
 .typeIcon.economical {
-  background-image: url(../assets/piggy-bank-01.svg);
+  background-image: url(../assets/piggy-bank-mod.svg);
 }
 
 .radioItem .radio {
@@ -247,7 +238,7 @@
 }
 
 .ruleItem {
-  @apply flex items-center;
+  @apply flex items-center py-1.5;
 }
 
 .formFooter {
@@ -394,19 +385,6 @@
   max-width: 524px;
 }
 
-.previewHeader {
-  position: sticky;
-  top: 0;
-  left: 0;
-  padding-top: 42px;
-  background-color: #fff;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 28px;
-  color: #101828;
-  z-index: 10;
-}
-
 /* 
  * `fixed` must under `previewHeader` because of style override would not work
  */
@@ -432,4 +410,4 @@
     font-size: 12px;
     line-height: 18px;
   }
-}
+}

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

@@ -0,0 +1,77 @@
+import type { FC, PropsWithChildren, ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { InputProps } from '@/app/components/base/input'
+import Input from '@/app/components/base/input'
+import Tooltip from '@/app/components/base/tooltip'
+import type { InputNumberProps } from '@/app/components/base/input-number'
+import { InputNumber } from '@/app/components/base/input-number'
+
+const TextLabel: FC<PropsWithChildren> = (props) => {
+  return <label className='text-text-secondary text-xs font-semibold leading-none'>{props.children}</label>
+}
+
+const FormField: FC<PropsWithChildren<{ label: ReactNode }>> = (props) => {
+  return <div className='space-y-2 flex-1'>
+    <TextLabel>{props.label}</TextLabel>
+    {props.children}
+  </div>
+}
+
+export const DelimiterInput: FC<InputProps & { tooltip?: string }> = (props) => {
+  const { t } = useTranslation()
+  return <FormField label={<div className='flex items-center mb-1'>
+    <span className='system-sm-semibold mr-0.5'>{t('datasetCreation.stepTwo.separator')}</span>
+    <Tooltip
+      popupContent={
+        <div className='max-w-[200px]'>
+          {props.tooltip || t('datasetCreation.stepTwo.separatorTip')}
+        </div>
+      }
+    />
+  </div>}>
+    <Input
+      type="text"
+      className='h-9'
+      placeholder={t('datasetCreation.stepTwo.separatorPlaceholder')!}
+      {...props}
+    />
+  </FormField>
+}
+
+export const MaxLengthInput: FC<InputNumberProps> = (props) => {
+  const { t } = useTranslation()
+  return <FormField label={<div className='system-sm-semibold mb-1'>
+    {t('datasetCreation.stepTwo.maxLength')}
+  </div>}>
+    <InputNumber
+      type="number"
+      className='h-9'
+      placeholder={'≤ 4000'}
+      max={4000}
+      min={1}
+      {...props}
+    />
+  </FormField>
+}
+
+export const OverlapInput: FC<InputNumberProps> = (props) => {
+  const { t } = useTranslation()
+  return <FormField label={<div className='flex items-center mb-1'>
+    <span className='system-sm-semibold'>{t('datasetCreation.stepTwo.overlap')}</span>
+    <Tooltip
+      popupContent={
+        <div className='max-w-[200px]'>
+          {t('datasetCreation.stepTwo.overlapTip')}
+        </div>
+      }
+    />
+  </div>}>
+    <InputNumber
+      type="number"
+      className='h-9'
+      placeholder={t('datasetCreation.stepTwo.overlap') || ''}
+      min={1}
+      {...props}
+    />
+  </FormField>
+}

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

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React from 'react'
-import { RiArrowDownSLine } from '@remixicon/react'
+import { RiArrowDownSLine, RiCheckLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import Popover from '@/app/components/base/popover'
 import { languages } from '@/i18n/language'
@@ -22,25 +22,40 @@ const LanguageSelect: FC<ILanguageSelectProps> = ({
       manualClose
       trigger='click'
       disabled={disabled}
+      popupClassName='z-20'
       htmlContent={
-        <div className='w-full py-1'>
+        <div className='w-full p-1'>
           {languages.filter(language => language.supported).map(({ prompt_name }) => (
             <div
               key={prompt_name}
-              className='py-2 px-3 mx-1 flex items-center gap-2 hover:bg-gray-100 rounded-lg cursor-pointer text-gray-700 text-sm'
-              onClick={() => onSelect(prompt_name)}>{prompt_name}
+              className='w-full py-2 px-3 inline-flex items-center justify-between hover:bg-state-base-hover rounded-lg cursor-pointer'
+              onClick={() => onSelect(prompt_name)}
+            >
+              <span className='text-text-secondary system-sm-medium'>{prompt_name}</span>
+              {(currentLanguage === prompt_name) && <RiCheckLine className='size-4 text-text-accent' />}
             </div>
           ))}
         </div>
       }
       btnElement={
-        <div className='inline-flex items-center'>
-          <span className='pr-[2px] text-xs leading-[18px] font-medium'>{currentLanguage}</span>
-          <RiArrowDownSLine className='w-3 h-3 opacity-60' />
+        <div className={cn('inline-flex items-center gap-x-[1px]', disabled && 'cursor-not-allowed')}>
+          <span className={cn(
+            'px-[3px] system-xs-semibold text-components-button-tertiary-text',
+            disabled ? 'text-components-button-tertiary-text-disabled' : '',
+          )}>
+            {currentLanguage}
+          </span>
+          <RiArrowDownSLine className={cn(
+            'size-3.5 text-components-button-tertiary-text',
+            disabled ? 'text-components-button-tertiary-text-disabled' : '',
+          )} />
         </div>
       }
-      btnClassName={open => cn('!border-0 !px-0 !py-0 !bg-inherit !hover:bg-inherit', open ? 'text-blue-600' : 'text-gray-500')}
-      className='!w-[120px] h-fit !z-20 !translate-x-0 !left-[-16px]'
+      btnClassName={() => cn(
+        '!border-0 rounded-md !px-1.5 !py-1 !mx-1 !bg-components-button-tertiary-bg !hover:bg-components-button-tertiary-bg',
+        disabled ? 'bg-components-button-tertiary-bg-disabled' : '',
+      )}
+      className='!w-[140px] h-fit !z-20 !translate-x-0 !left-1'
     />
   )
 }

web/app/components/datasets/create/step-two/option-card.tsx

@@ -0,0 +1,98 @@
+import { type ComponentProps, type FC, type ReactNode, forwardRef } from 'react'
+import Image from 'next/image'
+import classNames from '@/utils/classnames'
+
+const TriangleArrow: FC<ComponentProps<'svg'>> = props => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="11" viewBox="0 0 24 11" fill="none" {...props}>
+    <path d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="currentColor"/>
+  </svg>
+)
+
+type OptionCardHeaderProps = {
+  icon: ReactNode
+  title: ReactNode
+  description: string
+  isActive?: boolean
+  activeClassName?: string
+  effectImg?: string
+}
+
+export const OptionCardHeader: FC<OptionCardHeaderProps> = (props) => {
+  const { icon, title, description, isActive, activeClassName, effectImg } = props
+  return <div className={classNames(
+    'flex h-full overflow-hidden rounded-t-xl relative',
+    isActive && activeClassName,
+  )}>
+    <div className='size-14 flex items-center justify-center relative overflow-hidden'>
+      {isActive && effectImg && <Image src={effectImg} className='absolute top-0 left-0 w-full h-full' alt='' width={56} height={56} />}
+      <div className='p-1'>
+        <div className='size-8 rounded-lg border p-1.5 shadow-md border-components-panel-border-subtle justify-center flex bg-background-default-dodge'>
+          {icon}
+        </div>
+      </div>
+    </div>
+    <TriangleArrow
+      className='absolute left-4 -bottom-1.5 text-components-panel-bg'
+    />
+    <div className='flex-1 space-y-0.5 py-3 pr-4'>
+      <div className='text-text-secondary system-md-semibold'>{title}</div>
+      <div className='text-text-tertiary system-xs-regular'>{description}</div>
+    </div>
+  </div>
+}
+
+type OptionCardProps = {
+  icon: ReactNode
+  className?: string
+  activeHeaderClassName?: string
+  title: ReactNode
+  description: string
+  isActive?: boolean
+  actions?: ReactNode
+  effectImg?: string
+  onSwitched?: () => void
+  noHighlight?: boolean
+  disabled?: boolean
+} & Omit<ComponentProps<'div'>, 'title' | 'onClick'>
+
+export const OptionCard: FC<OptionCardProps> = forwardRef((props, ref) => {
+  const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, onSwitched, noHighlight, disabled, ...rest } = props
+  return <div
+    className={classNames(
+      'rounded-xl bg-components-option-card-option-bg shadow-xs',
+      (isActive && !noHighlight)
+        ? 'border-[1.5px] border-components-option-card-option-selected-border'
+        : 'border border-components-option-card-option-border',
+      disabled && 'opacity-50',
+      className,
+    )}
+    style={{
+      ...style,
+    }}
+    onClick={() => {
+      if (!isActive && !disabled)
+        onSwitched?.()
+    }}
+    {...rest}
+    ref={ref}
+  >
+    <OptionCardHeader
+      icon={icon}
+      title={title}
+      description={description}
+      isActive={isActive && !noHighlight}
+      activeClassName={activeHeaderClassName}
+      effectImg={effectImg}
+    />
+    {/** Body */}
+    {isActive && (children || actions) && <div className='py-3 px-4 bg-components-panel-bg rounded-b-xl'>
+      {children}
+      {actions && <div className='flex gap-2 mt-4'>
+        {actions}
+      </div>
+      }
+    </div>}
+  </div>
+})
+
+OptionCard.displayName = 'OptionCard'