knowledge base node

web/app/components/workflow/nodes/knowledge-base/components/index-method.tsx

@@ -0,0 +1,62 @@
+import { useTranslation } from 'react-i18next'
+import { RiQuestionLine } from '@remixicon/react'
+import {
+  Economic,
+  HighQuality,
+} from '@/app/components/base/icons/src/vender/knowledge'
+import Tooltip from '@/app/components/base/tooltip'
+import Slider from '@/app/components/base/slider'
+import Input from '@/app/components/base/input'
+import OptionCard from './option-card'
+
+const IndexMethod = () => {
+  const { t } = useTranslation()
+
+  return (
+    <div>
+      <div className='system-sm-semibold-uppercase mb-0.5 flex h-6 items-center text-text-secondary'>Index method</div>
+      <div className='space-y-1'>
+        <OptionCard
+          icon={<HighQuality className='h-[15px] w-[15px] text-util-colors-orange-orange-500' />}
+          title={t('datasetCreation.stepTwo.qualified')}
+          description={t('datasetSettings.form.indexMethodHighQualityTip')}
+          showHighlightBorder
+        ></OptionCard>
+        <OptionCard
+          icon={<Economic className='h-[15px] w-[15px] text-text-tertiary' />}
+          title={t('datasetSettings.form.indexMethodEconomy')}
+          description={t('datasetSettings.form.indexMethodEconomyTip')}
+          showChildren
+          showHighlightBorder
+        >
+          <div className='flex items-center'>
+            <div className='flex grow items-center'>
+              <div className='system-xs-medium truncate text-text-secondary'>
+                Number of Keywords
+              </div>
+              <Tooltip
+                popupContent='number of keywords'
+              >
+                <RiQuestionLine className='ml-0.5 h-3.5 w-3.5 text-text-quaternary' />
+              </Tooltip>
+            </div>
+            <Slider
+              className='mr-3 w-24 shrink-0'
+              value={0}
+              onChange={() => {
+                console.log('change')
+              }}
+            />
+            <Input
+              className='shrink-0'
+              wrapperClassName='shrink-0 w-[72px]'
+              type='number'
+            />
+          </div>
+        </OptionCard>
+      </div>
+    </div>
+  )
+}
+
+export default IndexMethod

web/app/components/workflow/nodes/knowledge-base/components/option-card.tsx

@@ -0,0 +1,104 @@
+import type { ReactNode } from 'react'
+import { memo } from 'react'
+import cn from '@/utils/classnames'
+import Badge from '@/app/components/base/badge'
+import { ArrowShape } from '@/app/components/base/icons/src/vender/knowledge'
+import {
+  OptionCardEffectBlue,
+  OptionCardEffectOrange,
+  OptionCardEffectPurple,
+} from '@/app/components/base/icons/src/public/knowledge'
+
+const EffectMap = {
+  blue: <OptionCardEffectBlue className='absolute left-1 top-1 h-14 w-14 fill-util-colors-indigo-indigo-500 text-util-colors-indigo-indigo-500 opacity-80 blur-[80px]' />,
+  orange: <OptionCardEffectOrange className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
+  purple: <OptionCardEffectPurple className='absolute left-1 top-1 h-14 w-14 opacity-80 blur-[80px]' />,
+}
+type OptionCardProps = {
+  showHighlightBorder?: boolean
+  showRadio?: boolean
+  radioIsActive?: boolean
+  icon?: ReactNode
+  title: string
+  description?: string
+  isRecommended?: boolean
+  children?: ReactNode
+  showChildren?: boolean
+  effectColor?: 'blue' | 'orange' | 'purple'
+}
+const OptionCard = ({
+  showHighlightBorder,
+  showRadio,
+  radioIsActive,
+  icon,
+  title,
+  description,
+  isRecommended,
+  children,
+  showChildren,
+  effectColor = 'blue',
+}: OptionCardProps) => {
+  return (
+    <div className={cn(
+      'cursor-pointer rounded-xl border border-components-option-card-option-border bg-components-option-card-option-bg',
+      showHighlightBorder && 'border-[2px] border-components-option-card-option-selected-border',
+    )}>
+      <div className='relative flex p-2'>
+        {
+          showChildren && (
+            <ArrowShape className='absolute bottom-[-13px] left-[13px] h-4 w-4 text-components-panel-bg' />
+          )
+        }
+        {
+          showChildren && effectColor && EffectMap[effectColor]
+        }
+        {
+          icon && (
+            <div className='mr-1 shrink-0 p-[3px]'>
+              {icon}
+            </div>
+          )
+        }
+        <div className='grow py-1'>
+          <div className='flex items-center'>
+            <div className='system-sm-medium flex grow items-center text-text-secondary'>
+              {title}
+              {
+                isRecommended && (
+                  <Badge>
+                    Recommend
+                  </Badge>
+                )
+              }
+            </div>
+            {
+              showRadio && (
+                <div className={cn(
+                  'ml-2 h-4 w-4 shrink-0 rounded-full border border-components-radio-border bg-components-radio-bg',
+                  radioIsActive && 'border-[5px] border-components-radio-border-checked',
+                )}>
+                </div>
+              )
+            }
+          </div>
+          {
+            description && (
+              <div className='system-xs-regular mt-1 text-text-tertiary'>
+                {description}
+              </div>
+            )
+          }
+        </div>
+      </div>
+      {
+        children && showChildren && (
+          <div className='p-3'>
+            {children}
+          </div>
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(OptionCard)

web/app/components/workflow/nodes/knowledge-base/panel.tsx

@@ -1,12 +1,17 @@
 import type { FC } from 'react'
 import { memo } from 'react'
 import type { KnowledgeBaseNodeType } from './types'
+import IndexMethod from './components/index-method'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 
 const Panel: FC<NodePanelProps<KnowledgeBaseNodeType>> = () => {
   return (
-    <div className='mb-2 mt-2 space-y-4 px-4'>
-      Knowledge Base
+    <div>
+      <div className='py-2'>
+        <div className='px-4 py-2'>
+          <IndexMethod />
+        </div>
+      </div>
     </div>
   )
 }