Merge remote-tracking branch 'origin/main' into feat/trigger

web/app/components/base/action-button/index.spec.tsx

@@ -0,0 +1,76 @@
+import { render, screen } from '@testing-library/react'
+import { ActionButton, ActionButtonState } from './index'
+
+describe('ActionButton', () => {
+  test('renders button with default props', () => {
+    render(<ActionButton>Click me</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Click me' })
+    expect(button).toBeInTheDocument()
+    expect(button.classList.contains('action-btn')).toBe(true)
+    expect(button.classList.contains('action-btn-m')).toBe(true)
+  })
+
+  test('renders button with xs size', () => {
+    render(<ActionButton size='xs'>Small Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Small Button' })
+    expect(button.classList.contains('action-btn-xs')).toBe(true)
+  })
+
+  test('renders button with l size', () => {
+    render(<ActionButton size='l'>Large Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Large Button' })
+    expect(button.classList.contains('action-btn-l')).toBe(true)
+  })
+
+  test('renders button with xl size', () => {
+    render(<ActionButton size='xl'>Extra Large Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Extra Large Button' })
+    expect(button.classList.contains('action-btn-xl')).toBe(true)
+  })
+
+  test('applies correct state classes', () => {
+    const { rerender } = render(
+      <ActionButton state={ActionButtonState.Destructive}>Destructive</ActionButton>,
+    )
+    let button = screen.getByRole('button', { name: 'Destructive' })
+    expect(button.classList.contains('action-btn-destructive')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Active}>Active</ActionButton>)
+    button = screen.getByRole('button', { name: 'Active' })
+    expect(button.classList.contains('action-btn-active')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Disabled}>Disabled</ActionButton>)
+    button = screen.getByRole('button', { name: 'Disabled' })
+    expect(button.classList.contains('action-btn-disabled')).toBe(true)
+
+    rerender(<ActionButton state={ActionButtonState.Hover}>Hover</ActionButton>)
+    button = screen.getByRole('button', { name: 'Hover' })
+    expect(button.classList.contains('action-btn-hover')).toBe(true)
+  })
+
+  test('applies custom className', () => {
+    render(<ActionButton className='custom-class'>Custom Class</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Custom Class' })
+    expect(button.classList.contains('custom-class')).toBe(true)
+  })
+
+  test('applies custom style', () => {
+    render(
+      <ActionButton styleCss={{ color: 'red', backgroundColor: 'blue' }}>
+        Custom Style
+      </ActionButton>,
+    )
+    const button = screen.getByRole('button', { name: 'Custom Style' })
+    expect(button).toHaveStyle({
+      color: 'red',
+      backgroundColor: 'blue',
+    })
+  })
+
+  test('forwards additional button props', () => {
+    render(<ActionButton disabled data-testid='test-button'>Disabled Button</ActionButton>)
+    const button = screen.getByRole('button', { name: 'Disabled Button' })
+    expect(button).toBeDisabled()
+    expect(button).toHaveAttribute('data-testid', 'test-button')
+  })
+})

web/app/components/base/action-button/index.tsx

@@ -32,6 +32,7 @@ export type ActionButtonProps = {
   size?: 'xs' | 's' | 'm' | 'l' | 'xl'
   state?: ActionButtonState
   styleCss?: CSSProperties
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof actionButtonVariants>
 
 function getActionButtonState(state: ActionButtonState) {
@@ -49,24 +50,22 @@ function getActionButtonState(state: ActionButtonState) {
   }
 }
 
-const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
-  ({ className, size, state = ActionButtonState.Default, styleCss, children, ...props }, ref) => {
-    return (
-      <button
-        type='button'
-        className={classNames(
-          actionButtonVariants({ className, size }),
-          getActionButtonState(state),
-        )}
-        ref={ref}
-        style={styleCss}
-        {...props}
-      >
-        {children}
-      </button>
-    )
-  },
-)
+const ActionButton = ({ className, size, state = ActionButtonState.Default, styleCss, children, ref, ...props }: ActionButtonProps) => {
+  return (
+    <button
+      type='button'
+      className={classNames(
+        actionButtonVariants({ className, size }),
+        getActionButtonState(state),
+      )}
+      ref={ref}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
 ActionButton.displayName = 'ActionButton'
 
 export default ActionButton

web/app/components/base/agent-log-modal/tool-call.tsx

@@ -33,7 +33,7 @@ const ToolCallItem: FC<Props> = ({ toolCall, isLLM = false, isFinal, tokens, obs
     if (time < 1)
       return `${(time * 1000).toFixed(3)} ms`
     if (time > 60)
-      return `${Number.parseInt(Math.round(time / 60).toString())} m ${(time % 60).toFixed(3)} s`
+      return `${Math.floor(time / 60)} m ${(time % 60).toFixed(3)} s`
     return `${time.toFixed(3)} s`
   }
 

web/app/components/base/app-icon-picker/index.tsx

@@ -5,7 +5,6 @@ import type { Area } from 'react-easy-crop'
 import Modal from '../modal'
 import Divider from '../divider'
 import Button from '../button'
-import { ImagePlus } from '../icons/src/vender/line/images'
 import { useLocalFileUploader } from '../image-uploader/hooks'
 import EmojiPickerInner from '../emoji-picker/Inner'
 import type { OnImageInput } from './ImageInput'
@@ -16,6 +15,7 @@ import type { AppIconType, ImageFile } from '@/types/app'
 import cn from '@/utils/classnames'
 import { DISABLE_UPLOAD_IMAGE_AS_ICON } from '@/config'
 import { noop } from 'lodash-es'
+import { RiImageCircleAiLine } from '@remixicon/react'
 
 export type AppIconEmojiSelection = {
   type: 'emoji'
@@ -46,7 +46,7 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
 
   const tabs = [
     { key: 'emoji', label: t('app.iconPicker.emoji'), icon: <span className="text-lg">🤖</span> },
-    { key: 'image', label: t('app.iconPicker.image'), icon: <ImagePlus /> },
+    { key: 'image', label: t('app.iconPicker.image'), icon: <RiImageCircleAiLine className='size-4' /> },
   ]
   const [activeTab, setActiveTab] = useState<AppIconType>('emoji')
 
@@ -119,10 +119,10 @@ const AppIconPicker: FC<AppIconPickerProps> = ({
         {tabs.map(tab => (
           <button
             key={tab.key}
-            className={`
-                        flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 text-sm font-medium
-                        ${activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active shadow-md'}
-                      `}
+            className={cn(
+              'system-sm-medium flex h-8 flex-1 shrink-0 items-center justify-center rounded-lg p-2 text-text-tertiary',
+              activeTab === tab.key && 'bg-components-main-nav-nav-button-bg-active text-text-accent shadow-md',
+            )}
             onClick={() => setActiveTab(tab.key as AppIconType)}
           >
             {tab.icon} &nbsp; {tab.label}

web/app/components/base/app-icon/index.spec.tsx

@@ -0,0 +1,159 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import '@testing-library/jest-dom'
+import AppIcon from './index'
+
+// Mock emoji-mart initialization
+jest.mock('emoji-mart', () => ({
+  init: jest.fn(),
+}))
+
+// Mock emoji data
+jest.mock('@emoji-mart/data', () => ({}))
+
+// Mock the ahooks useHover hook
+jest.mock('ahooks', () => ({
+  useHover: jest.fn(() => false),
+}))
+
+describe('AppIcon', () => {
+  beforeEach(() => {
+    // Mock custom element
+    if (!customElements.get('em-emoji')) {
+      customElements.define('em-emoji', class extends HTMLElement {
+        constructor() {
+          super()
+        }
+
+        // Mock basic functionality
+        connectedCallback() {
+          this.innerHTML = '🤖'
+        }
+      })
+    }
+
+    // Reset mocks
+    require('ahooks').useHover.mockReset().mockReturnValue(false)
+  })
+
+  it('renders default emoji when no icon or image is provided', () => {
+    render(<AppIcon />)
+    const emojiElement = document.querySelector('em-emoji')
+    expect(emojiElement).toBeInTheDocument()
+    expect(emojiElement?.getAttribute('id')).toBe('🤖')
+  })
+
+  it('renders with custom emoji when icon is provided', () => {
+    render(<AppIcon icon='smile' />)
+    const emojiElement = document.querySelector('em-emoji')
+    expect(emojiElement).toBeInTheDocument()
+    expect(emojiElement?.getAttribute('id')).toBe('smile')
+  })
+
+  it('renders image when iconType is image and imageUrl is provided', () => {
+    render(<AppIcon iconType='image' imageUrl='test-image.jpg' />)
+    const imgElement = screen.getByAltText('app icon')
+    expect(imgElement).toBeInTheDocument()
+    expect(imgElement).toHaveAttribute('src', 'test-image.jpg')
+  })
+
+  it('renders innerIcon when provided', () => {
+    render(<AppIcon innerIcon={<div data-testid='inner-icon'>Custom Icon</div>} />)
+    const innerIcon = screen.getByTestId('inner-icon')
+    expect(innerIcon).toBeInTheDocument()
+  })
+
+  it('applies size classes correctly', () => {
+    const { container: xsContainer } = render(<AppIcon size='xs' />)
+    expect(xsContainer.firstChild).toHaveClass('w-4 h-4 rounded-[4px]')
+
+    const { container: tinyContainer } = render(<AppIcon size='tiny' />)
+    expect(tinyContainer.firstChild).toHaveClass('w-6 h-6 rounded-md')
+
+    const { container: smallContainer } = render(<AppIcon size='small' />)
+    expect(smallContainer.firstChild).toHaveClass('w-8 h-8 rounded-lg')
+
+    const { container: mediumContainer } = render(<AppIcon size='medium' />)
+    expect(mediumContainer.firstChild).toHaveClass('w-9 h-9 rounded-[10px]')
+
+    const { container: largeContainer } = render(<AppIcon size='large' />)
+    expect(largeContainer.firstChild).toHaveClass('w-10 h-10 rounded-[10px]')
+
+    const { container: xlContainer } = render(<AppIcon size='xl' />)
+    expect(xlContainer.firstChild).toHaveClass('w-12 h-12 rounded-xl')
+
+    const { container: xxlContainer } = render(<AppIcon size='xxl' />)
+    expect(xxlContainer.firstChild).toHaveClass('w-14 h-14 rounded-2xl')
+  })
+
+  it('applies rounded class when rounded=true', () => {
+    const { container } = render(<AppIcon rounded />)
+    expect(container.firstChild).toHaveClass('rounded-full')
+  })
+
+  it('applies custom background color', () => {
+    const { container } = render(<AppIcon background='#FF5500' />)
+    expect(container.firstChild).toHaveStyle('background: #FF5500')
+  })
+
+  it('uses default background color when no background is provided for non-image icons', () => {
+    const { container } = render(<AppIcon />)
+    expect(container.firstChild).toHaveStyle('background: #FFEAD5')
+  })
+
+  it('does not apply background style for image icons', () => {
+    const { container } = render(<AppIcon iconType='image' imageUrl='test.jpg' background='#FF5500' />)
+    // Should not have the background style from the prop
+    expect(container.firstChild).not.toHaveStyle('background: #FF5500')
+  })
+
+  it('calls onClick handler when clicked', () => {
+    const handleClick = jest.fn()
+    const { container } = render(<AppIcon onClick={handleClick} />)
+    fireEvent.click(container.firstChild!)
+
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<AppIcon className='custom-class' />)
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
+
+  it('does not display edit icon when showEditIcon=false', () => {
+    render(<AppIcon />)
+    const editIcon = screen.queryByRole('svg')
+    expect(editIcon).not.toBeInTheDocument()
+  })
+
+  it('displays edit icon when showEditIcon=true and hovering', () => {
+    // Mock the useHover hook to return true for this test
+    require('ahooks').useHover.mockReturnValue(true)
+
+    render(<AppIcon showEditIcon />)
+    const editIcon = document.querySelector('svg')
+    expect(editIcon).toBeInTheDocument()
+  })
+
+  it('does not display edit icon when showEditIcon=true but not hovering', () => {
+    // useHover returns false by default from our mock setup
+    render(<AppIcon showEditIcon />)
+    const editIcon = document.querySelector('svg')
+    expect(editIcon).not.toBeInTheDocument()
+  })
+
+  it('handles conditional isValidImageIcon check correctly', () => {
+    // Case 1: Valid image icon
+    const { rerender } = render(
+      <AppIcon iconType='image' imageUrl='test.jpg' />,
+    )
+    expect(screen.getByAltText('app icon')).toBeInTheDocument()
+
+    // Case 2: Invalid - missing image URL
+    rerender(<AppIcon iconType='image' imageUrl={null} />)
+    expect(screen.queryByAltText('app icon')).not.toBeInTheDocument()
+
+    // Case 3: Invalid - wrong icon type
+    rerender(<AppIcon iconType='emoji' imageUrl='test.jpg' />)
+    expect(screen.queryByAltText('app icon')).not.toBeInTheDocument()
+  })
+})

web/app/components/base/app-icon/index.tsx

@@ -1,12 +1,13 @@
 'use client'
-
 import React from 'react'
-import type { FC } from 'react'
+import { type FC, useRef } from 'react'
 import { init } from 'emoji-mart'
 import data from '@emoji-mart/data'
 import { cva } from 'class-variance-authority'
 import type { AppIconType } from '@/types/app'
 import classNames from '@/utils/classnames'
+import { useHover } from 'ahooks'
+import { RiEditLine } from '@remixicon/react'
 
 init({ data })
 
@@ -20,20 +21,21 @@ export type AppIconProps = {
   className?: string
   innerIcon?: React.ReactNode
   coverElement?: React.ReactNode
+  showEditIcon?: boolean
   onClick?: () => void
 }
 const appIconVariants = cva(
-  'flex items-center justify-center relative text-lg rounded-lg grow-0 shrink-0 overflow-hidden leading-none',
+  'flex items-center justify-center relative grow-0 shrink-0 overflow-hidden leading-none border-[0.5px] border-divider-regular',
   {
     variants: {
       size: {
-        xs: 'w-4 h-4 text-xs',
-        tiny: 'w-6 h-6 text-base',
-        small: 'w-8 h-8 text-xl',
-        medium: 'w-9 h-9 text-[22px]',
-        large: 'w-10 h-10 text-[24px]',
-        xl: 'w-12 h-12 text-[28px]',
-        xxl: 'w-14 h-14 text-[32px]',
+        xs: 'w-4 h-4 text-xs rounded-[4px]',
+        tiny: 'w-6 h-6 text-base rounded-md',
+        small: 'w-8 h-8 text-xl rounded-lg',
+        medium: 'w-9 h-9 text-[22px] rounded-[10px]',
+        large: 'w-10 h-10 text-[24px] rounded-[10px]',
+        xl: 'w-12 h-12 text-[28px] rounded-xl',
+        xxl: 'w-14 h-14 text-[32px] rounded-2xl',
       },
       rounded: {
         true: 'rounded-full',
@@ -44,6 +46,46 @@ const appIconVariants = cva(
       rounded: false,
     },
   })
+const EditIconWrapperVariants = cva(
+  'absolute left-0 top-0 z-10 flex items-center justify-center bg-background-overlay-alt',
+  {
+    variants: {
+      size: {
+        xs: 'w-4 h-4 rounded-[4px]',
+        tiny: 'w-6 h-6 rounded-md',
+        small: 'w-8 h-8 rounded-lg',
+        medium: 'w-9 h-9 rounded-[10px]',
+        large: 'w-10 h-10 rounded-[10px]',
+        xl: 'w-12 h-12 rounded-xl',
+        xxl: 'w-14 h-14 rounded-2xl',
+      },
+      rounded: {
+        true: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+      rounded: false,
+    },
+  })
+const EditIconVariants = cva(
+  'text-text-primary-on-surface',
+  {
+    variants: {
+      size: {
+        xs: 'size-3',
+        tiny: 'size-3.5',
+        small: 'size-5',
+        medium: 'size-[22px]',
+        large: 'size-6',
+        xl: 'size-7',
+        xxl: 'size-8',
+      },
+    },
+    defaultVariants: {
+      size: 'medium',
+    },
+  })
 const AppIcon: FC<AppIconProps> = ({
   size = 'medium',
   rounded = false,
@@ -55,21 +97,35 @@ const AppIcon: FC<AppIconProps> = ({
   innerIcon,
   coverElement,
   onClick,
+  showEditIcon = false,
 }) => {
   const isValidImageIcon = iconType === 'image' && imageUrl
+  const Icon = (icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />
+  const wrapperRef = useRef<HTMLSpanElement>(null)
+  const isHovering = useHover(wrapperRef)
 
-  return <span
-    className={classNames(appIconVariants({ size, rounded }), className)}
-    style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
-    onClick={onClick}
-  >
-    {isValidImageIcon
-
-      ? <img src={imageUrl} className="h-full w-full" alt="app icon" />
-      : (innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />))
-    }
-    {coverElement}
-  </span>
+  return (
+    <span
+      ref={wrapperRef}
+      className={classNames(appIconVariants({ size, rounded }), className)}
+      style={{ background: isValidImageIcon ? undefined : (background || '#FFEAD5') }}
+      onClick={onClick}
+    >
+      {
+        isValidImageIcon
+          ? <img src={imageUrl} className='h-full w-full' alt='app icon' />
+          : (innerIcon || Icon)
+      }
+      {
+        showEditIcon && isHovering && (
+          <div className={EditIconWrapperVariants({ size, rounded })}>
+            <RiEditLine className={EditIconVariants({ size })} />
+          </div>
+        )
+      }
+      {coverElement}
+    </span>
+  )
 }
 
 export default React.memo(AppIcon)

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

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import cn from '@/utils/classnames'
 
 export type AvatarProps = {
@@ -27,6 +27,12 @@ const Avatar = ({
     onError?.(true)
   }
 
+  // after uploaded, api would first return error imgs url: '.../files//file-preview/...'. Then return the right url, Which caused not show the avatar
+  useEffect(() => {
+    if(avatar && imgError)
+      setImgError(false)
+  }, [avatar])
+
   if (avatar && !imgError) {
     return (
       <img

web/app/components/base/button/index.css

@@ -60,6 +60,7 @@
     @apply
     border-[0.5px]
     shadow-xs
+    backdrop-blur-[5px]
     bg-components-button-secondary-bg
     border-components-button-secondary-border
     hover:bg-components-button-secondary-bg-hover
@@ -69,6 +70,7 @@
 
   .btn-secondary.btn-disabled {
     @apply
+    backdrop-blur-sm
     bg-components-button-secondary-bg-disabled
     border-components-button-secondary-border-disabled
     text-components-button-secondary-text-disabled;

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

@@ -35,27 +35,26 @@ export type ButtonProps = {
   loading?: boolean
   styleCss?: CSSProperties
   spinnerClassName?: string
+  ref?: React.Ref<HTMLButtonElement>
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<typeof buttonVariants>
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ...props }, ref) => {
-    return (
-      <button
-        type='button'
-        className={classNames(
-          buttonVariants({ variant, size, className }),
-          destructive && 'btn-destructive',
-        )}
-        ref={ref}
-        style={styleCss}
-        {...props}
-      >
-        {children}
-        {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
-      </button>
-    )
-  },
-)
+const Button = ({ className, variant, size, destructive, loading, styleCss, children, spinnerClassName, ref, ...props }: ButtonProps) => {
+  return (
+    <button
+      type='button'
+      className={classNames(
+        buttonVariants({ variant, size, className }),
+        destructive && 'btn-destructive',
+      )}
+      ref={ref}
+      style={styleCss}
+      {...props}
+    >
+      {children}
+      {loading && <Spinner loading={loading} className={classNames('!ml-1 !h-3 !w-3 !border-2 !text-white', spinnerClassName)} />}
+    </button>
+  )
+}
 Button.displayName = 'Button'
 
 export default Button

web/app/components/base/chat/chat-with-history/chat-wrapper.tsx

@@ -52,6 +52,10 @@ const ChatWrapper = () => {
     allInputsHidden,
     initUserVariables,
   } = useChatWithHistoryContext()
+
+  // Semantic variable for better code readability
+  const isHistoryConversation = !!currentConversationId
+
   const appConfig = useMemo(() => {
     const config = appParams || {}
 
@@ -62,9 +66,9 @@ const ChatWrapper = () => {
         fileUploadConfig: (config as any).system_parameters,
       },
       supportFeedback: true,
-      opening_statement: currentConversationId ? currentConversationItem?.introduction : (config as any).opening_statement,
+      opening_statement: isHistoryConversation ? currentConversationItem?.introduction : (config as any).opening_statement,
     } as ChatConfig
-  }, [appParams, currentConversationItem?.introduction, currentConversationId])
+  }, [appParams, currentConversationItem?.introduction, isHistoryConversation])
   const {
     chatList,
     setTargetMessageId,
@@ -75,7 +79,7 @@ const ChatWrapper = () => {
   } = useChat(
     appConfig,
     {
-      inputs: (currentConversationId ? currentConversationInputs : newConversationInputs) as any,
+      inputs: (isHistoryConversation ? currentConversationInputs : newConversationInputs) as any,
       inputsForm: inputsForms,
     },
     appPrevChatTree,
@@ -83,7 +87,7 @@ const ChatWrapper = () => {
     clearChatList,
     setClearChatList,
   )
-  const inputsFormValue = currentConversationId ? currentConversationInputs : newConversationInputsRef?.current
+  const inputsFormValue = isHistoryConversation ? currentConversationInputs : newConversationInputsRef?.current
   const inputDisabled = useMemo(() => {
     if (allInputsHidden)
       return false
@@ -132,7 +136,7 @@ const ChatWrapper = () => {
     const data: any = {
       query: message,
       files,
-      inputs: formatBooleanInputs(inputsForms, currentConversationId ? currentConversationInputs : newConversationInputs),
+      inputs: formatBooleanInputs(inputsForms, isHistoryConversation ? currentConversationInputs : newConversationInputs),
       conversation_id: currentConversationId,
       parent_message_id: (isRegenerate ? parentAnswer?.id : getLastAnswer(chatList)?.id) || null,
     }
@@ -142,11 +146,11 @@ const ChatWrapper = () => {
       data,
       {
         onGetSuggestedQuestions: responseItemId => fetchSuggestedQuestions(responseItemId, isInstalledApp, appId),
-        onConversationComplete: currentConversationId ? undefined : handleNewConversationCompleted,
+        onConversationComplete: isHistoryConversation ? undefined : handleNewConversationCompleted,
         isPublicAPI: !isInstalledApp,
       },
     )
-  }, [chatList, handleNewConversationCompleted, handleSend, currentConversationId, currentConversationInputs, newConversationInputs, isInstalledApp, appId])
+  }, [chatList, handleNewConversationCompleted, handleSend, isHistoryConversation, currentConversationInputs, newConversationInputs, isInstalledApp, appId])
 
   const doRegenerate = useCallback((chatItem: ChatItemInTree, editedQuestion?: { message: string, files?: FileEntity[] }) => {
     const question = editedQuestion ? chatItem : chatList.find(item => item.id === chatItem.parentMessageId)!
@@ -159,31 +163,30 @@ const ChatWrapper = () => {
   }, [chatList, doSend])
 
   const messageList = useMemo(() => {
-    if (currentConversationId)
-      return chatList
+    // Always filter out opening statement from message list as it's handled separately in welcome component
     return chatList.filter(item => !item.isOpeningStatement)
-  }, [chatList, currentConversationId])
+  }, [chatList])
 
-  const [collapsed, setCollapsed] = useState(!!currentConversationId)
+  const [collapsed, setCollapsed] = useState(isHistoryConversation)
 
   const chatNode = useMemo(() => {
     if (allInputsHidden || !inputsForms.length)
       return null
     if (isMobile) {
-      if (!currentConversationId)
+      if (!isHistoryConversation)
         return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
       return null
     }
     else {
       return <InputsForm collapsed={collapsed} setCollapsed={setCollapsed} />
     }
-  }, [inputsForms.length, isMobile, currentConversationId, collapsed, allInputsHidden])
+  }, [inputsForms.length, isMobile, isHistoryConversation, collapsed, allInputsHidden])
 
   const welcome = useMemo(() => {
     const welcomeMessage = chatList.find(item => item.isOpeningStatement)
     if (respondingState)
       return null
-    if (currentConversationId)
+    if (isHistoryConversation)
       return null
     if (!welcomeMessage)
       return null
@@ -224,7 +227,7 @@ const ChatWrapper = () => {
         </div>
       </div>
     )
-  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, currentConversationId, inputsForms.length, respondingState, allInputsHidden])
+  }, [appData?.site.icon, appData?.site.icon_background, appData?.site.icon_type, appData?.site.icon_url, chatList, collapsed, isHistoryConversation, inputsForms.length, respondingState, allInputsHidden])
 
   const answerIcon = (appData?.site && appData.site.use_icon_as_answer_icon)
     ? <AnswerIcon
@@ -248,7 +251,7 @@ const ChatWrapper = () => {
         chatFooterClassName='pb-4'
         chatFooterInnerClassName={`mx-auto w-full max-w-[768px] ${isMobile ? 'px-2' : 'px-4'}`}
         onSend={doSend}
-        inputs={currentConversationId ? currentConversationInputs as any : newConversationInputs}
+        inputs={isHistoryConversation ? currentConversationInputs as any : newConversationInputs}
         inputsForm={inputsForms}
         onRegenerate={doRegenerate}
         onStopResponding={handleStop}

web/app/components/base/chat/chat-with-history/hooks.tsx

@@ -122,19 +122,31 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
     setLocaleFromProps()
   }, [appData])
 
-  const [sidebarCollapseState, setSidebarCollapseState] = useState<boolean>(false)
+  const [sidebarCollapseState, setSidebarCollapseState] = useState<boolean>(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        const localState = localStorage.getItem('webappSidebarCollapse')
+        return localState === 'collapsed'
+      }
+      catch (e) {
+        // localStorage may be disabled in private browsing mode or by security settings
+        // fallback to default value
+        return false
+      }
+    }
+    return false
+  })
   const handleSidebarCollapse = useCallback((state: boolean) => {
     if (appId) {
       setSidebarCollapseState(state)
-      localStorage.setItem('webappSidebarCollapse', state ? 'collapsed' : 'expanded')
+      try {
+        localStorage.setItem('webappSidebarCollapse', state ? 'collapsed' : 'expanded')
+      }
+      catch (e) {
+        // localStorage may be disabled, continue without persisting state
+      }
     }
   }, [appId, setSidebarCollapseState])
-  useEffect(() => {
-    if (appId) {
-      const localState = localStorage.getItem('webappSidebarCollapse')
-      setSidebarCollapseState(localState === 'collapsed')
-    }
-  }, [appId])
   const [conversationIdInfo, setConversationIdInfo] = useLocalStorageState<Record<string, Record<string, string>>>(CONVERSATION_ID_INFO, {
     defaultValue: {},
   })
@@ -215,7 +227,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
         }
       }
       if (item.number) {
-        const convertedNumber = Number(initInputs[item.number.variable]) ?? undefined
+        const convertedNumber = Number(initInputs[item.number.variable])
         return {
           ...item.number,
           default: convertedNumber || item.default || item.number.default,
@@ -508,7 +520,7 @@ export const useChatWithHistory = (installedAppInfo?: InstalledApp) => {
   }, [mutateAppConversationData, handleConversationIdInfoChange])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
-    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, appId)
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
     notify({ type: 'success', message: t('common.api.success') })
   }, [isInstalledApp, appId, t, notify])
 

web/app/components/base/chat/chat-with-history/index.tsx

@@ -47,6 +47,11 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
     themeBuilder?.buildTheme(site?.chat_color_theme, site?.chat_color_theme_inverted)
   }, [site, customConfig, themeBuilder])
 
+  useEffect(() => {
+    if (!isSidebarCollapsed)
+      setShowSidePanel(false)
+  }, [isSidebarCollapsed])
+
   useDocumentTitle(site?.title || 'Chat')
 
   return (
@@ -76,7 +81,7 @@ const ChatWithHistory: FC<ChatWithHistoryProps> = ({
             onMouseEnter={() => setShowSidePanel(true)}
             onMouseLeave={() => setShowSidePanel(false)}
           >
-            <Sidebar isPanel />
+            <Sidebar isPanel panelVisible={showSidePanel} />
           </div>
         )}
         <div className={cn('flex h-full flex-col overflow-hidden border-[0,5px] border-components-panel-border-subtle bg-chatbot-bg', isMobile ? 'rounded-t-2xl' : 'rounded-2xl')}>

web/app/components/base/chat/chat-with-history/sidebar/index.tsx

@@ -23,9 +23,10 @@ import { useGlobalPublicStore } from '@/context/global-public-context'
 
 type Props = {
   isPanel?: boolean
+  panelVisible?: boolean
 }
 
-const Sidebar = ({ isPanel }: Props) => {
+const Sidebar = ({ isPanel, panelVisible }: Props) => {
   const { t } = useTranslation()
   const {
     isInstalledApp,
@@ -138,7 +139,12 @@ const Sidebar = ({ isPanel }: Props) => {
         )}
       </div>
       <div className='flex shrink-0 items-center justify-between p-3'>
-        <MenuDropdown hideLogout={isInstalledApp} placement='top-start' data={appData?.site} />
+        <MenuDropdown
+          hideLogout={isInstalledApp}
+          placement='top-start'
+          data={appData?.site}
+          forceClose={isPanel && !panelVisible}
+        />
         {/* powered by */}
         <div className='shrink-0'>
           {!appData?.custom_config?.remove_webapp_brand && (

web/app/components/base/chat/chat/answer/operation.tsx

@@ -20,6 +20,8 @@ import EditReplyModal from '@/app/components/app/annotation/edit-annotation-moda
 import Log from '@/app/components/base/chat/chat/log'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import NewAudioButton from '@/app/components/base/new-audio-button'
+import Modal from '@/app/components/base/modal/modal'
+import Textarea from '@/app/components/base/textarea'
 import cn from '@/utils/classnames'
 
 type OperationProps = {
@@ -32,6 +34,7 @@ type OperationProps = {
   hasWorkflowProcess: boolean
   noChatInput?: boolean
 }
+
 const Operation: FC<OperationProps> = ({
   item,
   question,
@@ -52,6 +55,8 @@ const Operation: FC<OperationProps> = ({
     onRegenerate,
   } = useChatContext()
   const [isShowReplyModal, setIsShowReplyModal] = useState(false)
+  const [isShowFeedbackModal, setIsShowFeedbackModal] = useState(false)
+  const [feedbackContent, setFeedbackContent] = useState('')
   const {
     id,
     isOpeningStatement,
@@ -70,14 +75,29 @@ const Operation: FC<OperationProps> = ({
     return messageContent
   }, [agent_thoughts, messageContent])
 
-  const handleFeedback = async (rating: 'like' | 'dislike' | null) => {
+  const handleFeedback = async (rating: 'like' | 'dislike' | null, content?: string) => {
     if (!config?.supportFeedback || !onFeedback)
       return
 
-    await onFeedback?.(id, { rating })
+    await onFeedback?.(id, { rating, content })
     setLocalFeedback({ rating })
   }
 
+  const handleThumbsDown = () => {
+    setIsShowFeedbackModal(true)
+  }
+
+  const handleFeedbackSubmit = async () => {
+    await handleFeedback('dislike', feedbackContent)
+    setFeedbackContent('')
+    setIsShowFeedbackModal(false)
+  }
+
+  const handleFeedbackCancel = () => {
+    setFeedbackContent('')
+    setIsShowFeedbackModal(false)
+  }
+
   const operationWidth = useMemo(() => {
     let width = 0
     if (!isOpeningStatement)
@@ -153,7 +173,7 @@ const Operation: FC<OperationProps> = ({
                 <ActionButton onClick={() => handleFeedback('like')}>
                   <RiThumbUpLine className='h-4 w-4' />
                 </ActionButton>
-                <ActionButton onClick={() => handleFeedback('dislike')}>
+                <ActionButton onClick={handleThumbsDown}>
                   <RiThumbDownLine className='h-4 w-4' />
                 </ActionButton>
               </>
@@ -188,6 +208,32 @@ const Operation: FC<OperationProps> = ({
         createdAt={annotation?.created_at}
         onRemove={() => onAnnotationRemoved?.(index)}
       />
+      {isShowFeedbackModal && (
+        <Modal
+          title={t('common.feedback.title') || 'Provide Feedback'}
+          subTitle={t('common.feedback.subtitle') || 'Please tell us what went wrong with this response'}
+          onClose={handleFeedbackCancel}
+          onConfirm={handleFeedbackSubmit}
+          onCancel={handleFeedbackCancel}
+          confirmButtonText={t('common.operation.submit') || 'Submit'}
+          cancelButtonText={t('common.operation.cancel') || 'Cancel'}
+        >
+          <div className='space-y-3'>
+            <div>
+              <label className='system-sm-semibold mb-2 block text-text-secondary'>
+                {t('common.feedback.content') || 'Feedback Content'}
+              </label>
+              <Textarea
+                value={feedbackContent}
+                onChange={e => setFeedbackContent(e.target.value)}
+                placeholder={t('common.feedback.placeholder') || 'Please describe what went wrong or how we can improve...'}
+                rows={4}
+                className='w-full'
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
     </>
   )
 }

web/app/components/base/chat/chat/hooks.ts

@@ -682,7 +682,7 @@ export const useChat = (
     updateChatTreeNode(targetAnswerId, {
       content: chatList[index].content,
       annotation: {
-        ...(chatList[index].annotation || {}),
+        ...chatList[index].annotation,
         id: '',
       } as Annotation,
     })

web/app/components/base/chat/embedded-chatbot/hooks.tsx

@@ -188,7 +188,7 @@ export const useEmbeddedChatbot = () => {
         }
       }
       if (item.number) {
-        const convertedNumber = Number(initInputs[item.number.variable]) ?? undefined
+        const convertedNumber = Number(initInputs[item.number.variable])
         return {
           ...item.number,
           default: convertedNumber || item.default || item.number.default,
@@ -390,7 +390,7 @@ export const useEmbeddedChatbot = () => {
   }, [mutateAppConversationData, handleConversationIdInfoChange])
 
   const handleFeedback = useCallback(async (messageId: string, feedback: Feedback) => {
-    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating } }, isInstalledApp, appId)
+    await updateFeedback({ url: `/messages/${messageId}/feedbacks`, body: { rating: feedback.rating, content: feedback.content } }, isInstalledApp, appId)
     notify({ type: 'success', message: t('common.api.success') })
   }, [isInstalledApp, appId, t, notify])
 

web/app/components/base/chat/types.ts

@@ -93,4 +93,5 @@ export type Callback = {
 
 export type Feedback = {
   rating: 'like' | 'dislike' | null
+  content?: string | null
 }

web/app/components/base/chat/utils.ts

@@ -43,6 +43,16 @@ async function getProcessedInputsFromUrlParams(): Promise<Record<string, any>> {
 
 async function getProcessedSystemVariablesFromUrlParams(): Promise<Record<string, any>> {
   const urlParams = new URLSearchParams(window.location.search)
+  const redirectUrl = urlParams.get('redirect_url')
+  if (redirectUrl) {
+    const decodedRedirectUrl = decodeURIComponent(redirectUrl)
+    const queryString = decodedRedirectUrl.split('?')[1]
+    if (queryString) {
+      const redirectParams = new URLSearchParams(queryString)
+      for (const [key, value] of redirectParams.entries())
+        urlParams.set(key, value)
+    }
+  }
   const systemVariables: Record<string, any> = {}
   const entriesArray = Array.from(urlParams.entries())
   await Promise.all(

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

@@ -5,7 +5,7 @@ import IndeterminateIcon from './assets/indeterminate-icon'
 type CheckboxProps = {
   id?: string
   checked?: boolean
-  onCheck?: () => void
+  onCheck?: (event: React.MouseEvent<HTMLDivElement>) => void
   className?: string
   disabled?: boolean
   indeterminate?: boolean
@@ -35,10 +35,10 @@ const Checkbox = ({
         disabled && disabledClassName,
         className,
       )}
-      onClick={() => {
+      onClick={(event) => {
         if (disabled)
           return
-        onCheck?.()
+        onCheck?.(event)
       }}
       data-testid={`checkbox-${id}`}
     >

web/app/components/base/content-dialog/index.tsx

@@ -18,8 +18,8 @@ const ContentDialog = ({
   return (
     <Transition
       show={show}
-      as="div"
-      className="absolute left-0 top-0 z-20 box-border h-full w-full p-2"
+      as='div'
+      className='absolute left-0 top-0 z-30 box-border h-full w-full p-2'
     >
       <TransitionChild>
         <div

web/app/components/base/corner-label/index.tsx

@@ -10,8 +10,8 @@ type CornerLabelProps = {
 const CornerLabel: React.FC<CornerLabelProps> = ({ label, className, labelClassName }) => {
   return (
     <div className={cn('group/corner-label inline-flex items-start', className)}>
-      <Corner className='h-5 w-[13px] text-background-section group-hover/corner-label:text-background-section-burn' />
-      <div className={cn('flex items-center gap-0.5 bg-background-section py-1 pr-2 group-hover/corner-label:bg-background-section-burn', labelClassName)}>
+      <Corner className='h-5 w-[13px] text-background-section-burn' />
+      <div className={cn('flex items-center gap-0.5 bg-background-section-burn py-1 pr-2', labelClassName)}>
         <div className='system-2xs-medium-uppercase text-text-tertiary'>{label}</div>
       </div>
     </div>

web/app/components/base/date-and-time-picker/date-picker/index.tsx

@@ -43,7 +43,14 @@ const DatePicker = ({
   const [view, setView] = useState(ViewType.date)
   const containerRef = useRef<HTMLDivElement>(null)
   const isInitial = useRef(true)
-  const inputValue = useRef(value ? value.tz(timezone) : undefined).current
+
+  // Normalize the value to ensure that all subsequent uses are Day.js objects.
+  const normalizedValue = useMemo(() => {
+    if (!value) return undefined
+    return dayjs.isDayjs(value) ? value.tz(timezone) : dayjs(value).tz(timezone)
+  }, [value, timezone])
+
+  const inputValue = useRef(normalizedValue).current
   const defaultValue = useRef(getDateWithTimezone({ timezone })).current
 
   const [currentDate, setCurrentDate] = useState(inputValue || defaultValue)
@@ -69,8 +76,8 @@ const DatePicker = ({
       return
     }
     clearMonthMapCache()
-    if (value) {
-      const newValue = getDateWithTimezone({ date: value, timezone })
+    if (normalizedValue) {
+      const newValue = getDateWithTimezone({ date: normalizedValue, timezone })
       setCurrentDate(newValue)
       setSelectedDate(newValue)
       onChange(newValue)
@@ -89,9 +96,9 @@ const DatePicker = ({
     }
     setView(ViewType.date)
     setIsOpen(true)
-    if (value) {
-      setCurrentDate(value)
-      setSelectedDate(value)
+    if (normalizedValue) {
+      setCurrentDate(normalizedValue)
+      setSelectedDate(normalizedValue)
     }
   }
 
@@ -193,7 +200,7 @@ const DatePicker = ({
   }
 
   const timeFormat = needTimePicker ? t('time.dateFormats.displayWithTime') : t('time.dateFormats.display')
-  const displayValue = value?.format(timeFormat) || ''
+  const displayValue = normalizedValue?.format(timeFormat) || ''
   const displayTime = selectedDate?.format('hh:mm A') || '--:-- --'
   const placeholderDate = isOpen && selectedDate ? selectedDate.format(timeFormat) : (placeholder || t('time.defaultPlaceholder'))
 
@@ -205,7 +212,7 @@ const DatePicker = ({
     >
       <PortalToFollowElemTrigger className={triggerWrapClassName}>
         {renderTrigger ? (renderTrigger({
-          value,
+          value: normalizedValue,
           selectedDate,
           isOpen,
           handleClear,

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

@@ -1,5 +1,6 @@
 import type { FC } from 'react'
 import { useState } from 'react'
+import cn from '@/utils/classnames'
 import {
   RiMoreFill,
 } from '@remixicon/react'
@@ -8,6 +9,8 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
+import ActionButton from '@/app/components/base/action-button'
+import type { ActionButtonProps } from '@/app/components/base/action-button'
 
 export type Item = {
   value: string | number
@@ -18,14 +21,20 @@ type DropdownProps = {
   secondItems?: Item[]
   onSelect: (item: Item) => void
   renderTrigger?: (open: boolean) => React.ReactNode
+  triggerProps?: ActionButtonProps
   popupClassName?: string
+  itemClassName?: string
+  secondItemClassName?: string
 }
 const Dropdown: FC<DropdownProps> = ({
   items,
   onSelect,
   secondItems,
   renderTrigger,
+  triggerProps,
   popupClassName,
+  itemClassName,
+  secondItemClassName,
 }) => {
   const [open, setOpen] = useState(false)
 
@@ -45,14 +54,15 @@ const Dropdown: FC<DropdownProps> = ({
           renderTrigger
             ? renderTrigger(open)
             : (
-              <div
-                className={`
-                  flex h-6 w-6 cursor-pointer items-center justify-center rounded-md
-                  ${open && 'bg-divider-regular'}
-                `}
+              <ActionButton
+                {...triggerProps}
+                className={cn(
+                  open && 'bg-divider-regular',
+                  triggerProps?.className,
+                )}
               >
                 <RiMoreFill className='h-4 w-4 text-text-tertiary' />
-              </div>
+              </ActionButton>
             )
         }
       </PortalToFollowElemTrigger>
@@ -65,7 +75,10 @@ const Dropdown: FC<DropdownProps> = ({
                   items.map(item => (
                     <div
                       key={item.value}
-                      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
+                      className={cn(
+                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
+                        itemClassName,
+                      )}
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}
@@ -87,7 +100,10 @@ const Dropdown: FC<DropdownProps> = ({
                   secondItems.map(item => (
                     <div
                       key={item.value}
-                      className='flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover'
+                      className={cn(
+                        'flex h-8 cursor-pointer items-center rounded-lg px-3 hover:bg-components-panel-on-panel-item-bg-hover',
+                        secondItemClassName,
+                      )}
                       onClick={() => handleSelect(item)}
                     >
                       {item.text}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type EffectProps = {
+  className?: string
+}
+
+const Effect = ({
+  className,
+}: EffectProps) => {
+  return (
+    <div
+      className={cn('absolute size-[112px] rounded-full bg-util-colors-blue-brand-blue-brand-500 blur-[80px]', className)}
+    />
+  )
+}
+
+export default React.memo(Effect)

web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx

@@ -83,9 +83,7 @@ const OpeningSettingModal = ({
   }, [handleSave, hideConfirmAddVar])
 
   const autoAddVar = useCallback(() => {
-    onAutoAddPromptVariable?.([
-      ...notIncludeKeys.map(key => getNewVar(key, 'string')),
-    ])
+    onAutoAddPromptVariable?.(notIncludeKeys.map(key => getNewVar(key, 'string')))
     hideConfirmAddVar()
     handleSave(true)
   }, [handleSave, hideConfirmAddVar, notIncludeKeys, onAutoAddPromptVariable])

web/app/components/base/features/types.ts

@@ -29,6 +29,11 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {
   config?: any
 }
 
+export enum PreviewMode {
+  NewPage = 'new_page',
+  CurrentPage = 'current_page',
+}
+
 export type FileUpload = {
   image?: EnabledOrDisabled & {
     detail?: Resolution
@@ -56,6 +61,10 @@ export type FileUpload = {
   allowed_file_upload_methods?: TransferMethod[]
   number_limits?: number
   fileUploadConfig?: FileUploadConfigResponse
+  preview_config?: {
+    mode?: PreviewMode
+    file_type_list?: string[]
+  }
 } & EnabledOrDisabled
 
 export type AnnotationReplyConfig = {

web/app/components/base/file-uploader/file-list-in-log.tsx

@@ -66,7 +66,7 @@ const FileListInLog = ({ fileList, isExpanded = false, noBorder = false, noPaddi
                       <div key={id} className='rounded-md border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-1.5 shadow-xs'>
                         <FileTypeIcon
                           type={getFileAppearanceType(name, type)}
-                          size='md'
+                          size='lg'
                         />
                       </div>
                     </Tooltip>

web/app/components/base/file-uploader/file-type-icon.tsx

@@ -69,13 +69,14 @@ const FILE_TYPE_ICON_MAP = {
 }
 type FileTypeIconProps = {
   type: FileAppearanceType
-  size?: 'sm' | 'lg' | 'md'
+  size?: 'sm' | 'md' | 'lg' | 'xl'
   className?: string
 }
 const SizeMap = {
-  sm: 'w-4 h-4',
-  md: 'w-5 h-5',
-  lg: 'w-6 h-6',
+  sm: 'size-4',
+  md: 'size-[18px]',
+  lg: 'size-5',
+  xl: 'size-6',
 }
 const FileTypeIcon = ({
   type,

web/app/components/base/file-uploader/file-uploader-in-attachment/file-item.tsx

@@ -23,6 +23,7 @@ import cn from '@/utils/classnames'
 import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import ImagePreview from '@/app/components/base/image-uploader/image-preview'
+import { PreviewMode } from '@/app/components/base/features/types'
 
 type FileInAttachmentItemProps = {
   file: FileEntity
@@ -31,6 +32,7 @@ type FileInAttachmentItemProps = {
   onRemove?: (fileId: string) => void
   onReUpload?: (fileId: string) => void
   canPreview?: boolean
+  previewMode?: PreviewMode
 }
 const FileInAttachmentItem = ({
   file,
@@ -39,6 +41,7 @@ const FileInAttachmentItem = ({
   onRemove,
   onReUpload,
   canPreview,
+  previewMode = PreviewMode.CurrentPage,
 }: FileInAttachmentItemProps) => {
   const { id, name, type, progress, supportFileType, base64Url, url, isRemote } = file
   const ext = getFileExtension(name, type, isRemote)
@@ -49,7 +52,13 @@ const FileInAttachmentItem = ({
       <div className={cn(
         'flex h-12 items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pr-3 shadow-xs',
         progress === -1 && 'border-state-destructive-border bg-state-destructive-hover',
-      )}>
+        canPreview && previewMode === PreviewMode.NewPage && 'cursor-pointer',
+      )}
+      onClick={() => {
+        if (canPreview && previewMode === PreviewMode.NewPage)
+          window.open(url || base64Url || '', '_blank')
+      }}
+      >
         <div className='flex h-12 w-12 items-center justify-center'>
           {
             isImageFile && (
@@ -63,7 +72,7 @@ const FileInAttachmentItem = ({
             !isImageFile && (
               <FileTypeIcon
                 type={getFileAppearanceType(name, type)}
-                size='lg'
+                size='xl'
               />
             )
           }

web/app/components/base/file-uploader/file-uploader-in-attachment/index.tsx

@@ -106,6 +106,8 @@ const FileUploaderInAttachment = ({
               showDownloadAction={false}
               onRemove={() => handleRemoveFile(file.id)}
               onReUpload={() => handleReUploadFile(file.id)}
+              canPreview={fileConfig.preview_config?.file_type_list?.includes(file.type)}
+              previewMode={fileConfig.preview_config?.mode}
             />
           ))
         }
@@ -114,7 +116,7 @@ const FileUploaderInAttachment = ({
   )
 }
 
-type FileUploaderInAttachmentWrapperProps = {
+export type FileUploaderInAttachmentWrapperProps = {
   value?: FileEntity[]
   onChange: (files: FileEntity[]) => void
   fileConfig: FileUpload

web/app/components/base/form/components/base/base-field.tsx

@@ -14,17 +14,18 @@ import { useStore } from '@tanstack/react-form'
 import {
   isValidElement,
   memo,
+  useCallback,
   useMemo,
 } from 'react'
 
-const getInputType = (type: FormTypeEnum) => {
+const getExtraProps = (type: FormTypeEnum) => {
   switch (type) {
     case FormTypeEnum.secretInput:
-      return 'password'
+      return { type: 'password', autoComplete: 'new-password' }
     case FormTypeEnum.textNumber:
-      return 'number'
+      return { type: 'number' }
     default:
-      return 'text'
+      return { type: 'text' }
   }
 }
 
@@ -36,6 +37,7 @@ export type BaseFieldProps = {
   formSchema: FormSchema
   field: AnyFieldApi
   disabled?: boolean
+  onChange?: (field: string, value: any) => void
 }
 
 const BaseField = ({
@@ -46,6 +48,7 @@ const BaseField = ({
   formSchema,
   field,
   disabled: propsDisabled,
+  onChange,
 }: BaseFieldProps) => {
   const renderI18nObject = useRenderI18nObject()
   const {
@@ -54,9 +57,7 @@ const BaseField = ({
     placeholder,
     options,
     labelClassName: formLabelClassName,
-    show_on = [],
     disabled: formSchemaDisabled,
-    showRadioUI,
     type: formItemType,
     dynamicSelectParams,
   } = formSchema
@@ -86,11 +87,8 @@ const BaseField = ({
         variables.add(condition.variable)
     }
 
-    for (const condition of show_on || [])
-      variables.add(condition.variable)
-
     return Array.from(variables)
-  }, [options, show_on])
+  }, [options])
 
   const watchedValues = useStore(field.form.store, (s) => {
     const result: Record<string, any> = {}
@@ -138,20 +136,10 @@ const BaseField = ({
     }))
   }, [dynamicOptionsData, renderI18nObject])
 
-  const show = useMemo(() => {
-    return show_on.every((condition) => {
-      return watchedValues[condition.variable] === condition.value
-    })
-  }, [watchedValues, show_on])
-
-  const booleanRadioValue = useMemo(() => {
-    if (value === null || value === undefined)
-      return undefined
-    return value ? 1 : 0
-  }, [value])
-
-  if (!show)
-    return null
+  const handleChange = useCallback((value: any) => {
+    field.handleChange(value)
+    onChange?.(field.name, value)
+  }, [field, onChange])
 
   return (
     <div className={cn(fieldClassName)}>
@@ -171,11 +159,13 @@ const BaseField = ({
               name={field.name}
               className={cn(inputClassName)}
               value={value || ''}
-              onChange={e => field.handleChange(e.target.value)}
+              onChange={(e) => {
+                handleChange(e.target.value)
+              }}
               onBlur={field.handleBlur}
               disabled={disabled}
               placeholder={memorizedPlaceholder}
-              type={getInputType(formItemType)}
+              {...getExtraProps(formItemType)}
             />
           )
         }
@@ -183,11 +173,14 @@ const BaseField = ({
           formItemType === FormTypeEnum.select && (
             <PureSelect
               value={value}
-              onChange={v => field.handleChange(v)}
+              onChange={v => handleChange(v)}
               disabled={disabled}
               placeholder={memorizedPlaceholder}
               options={memorizedOptions}
               triggerPopupSameWidth
+              popupProps={{
+                className: 'max-h-[320px] overflow-y-auto',
+              }}
             />
           )
         }
@@ -222,9 +215,16 @@ const BaseField = ({
                       disabled && 'cursor-not-allowed opacity-50',
                       inputClassName,
                     )}
-                    onClick={() => !disabled && field.handleChange(option.value)}
+                    onClick={() => !disabled && handleChange(option.value)}
                   >
-                    {showRadioUI && <RadioE isChecked={value === option.value} />}
+                    {
+                      formSchema.showRadioUI && (
+                        <RadioE
+                          className='mr-2'
+                          isChecked={value === option.value}
+                        />
+                      )
+                    }
                     {option.label}
                   </div>
                 ))
@@ -235,12 +235,12 @@ const BaseField = ({
         {
           formItemType === FormTypeEnum.boolean && (
             <Radio.Group
-              className='flex w-fit items-center gap-1'
-              value={booleanRadioValue}
-              onChange={val => field.handleChange(val === 1)}
+              className='flex w-fit items-center'
+              value={value}
+              onChange={v => field.handleChange(v)}
             >
-              <Radio value={1}>True</Radio>
-              <Radio value={0}>False</Radio>
+              <Radio value={true} className='!mr-1'>True</Radio>
+              <Radio value={false}>False</Radio>
             </Radio.Group>
           )
         }

web/app/components/base/form/components/base/base-form.tsx

@@ -8,7 +8,10 @@ import type {
   AnyFieldApi,
   AnyFormApi,
 } from '@tanstack/react-form'
-import { useForm } from '@tanstack/react-form'
+import {
+  useForm,
+  useStore,
+} from '@tanstack/react-form'
 import type {
   FormRef,
   FormSchema,
@@ -32,6 +35,7 @@ export type BaseFormProps = {
   ref?: FormRef
   disabled?: boolean
   formFromProps?: AnyFormApi
+  onChange?: (field: string, value: any) => void
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void
   preventDefaultSubmit?: boolean
 } & Pick<BaseFieldProps, 'fieldClassName' | 'labelClassName' | 'inputContainerClassName' | 'inputClassName'>
@@ -47,6 +51,7 @@ const BaseForm = ({
   ref,
   disabled,
   formFromProps,
+  onChange,
   onSubmit,
   preventDefaultSubmit = false,
 }: BaseFormProps) => {
@@ -67,6 +72,19 @@ const BaseForm = ({
   const { getFormValues } = useGetFormValues(form, formSchemas)
   const { getValidators } = useGetValidators()
 
+  const showOnValues = useStore(form.store, (s: any) => {
+    const result: Record<string, any> = {}
+    formSchemas.forEach((schema) => {
+      const { show_on } = schema
+      if (show_on?.length) {
+        show_on.forEach((condition) => {
+          result[condition.variable] = s.values[condition.variable]
+        })
+      }
+    })
+    return result
+  })
+
   useImperativeHandle(ref, () => {
     return {
       getForm() {
@@ -91,19 +109,29 @@ const BaseForm = ({
           inputContainerClassName={inputContainerClassName}
           inputClassName={inputClassName}
           disabled={disabled}
+          onChange={onChange}
         />
       )
     }
 
     return null
-  }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled])
+  }, [formSchemas, fieldClassName, labelClassName, inputContainerClassName, inputClassName, disabled, onChange])
 
   const renderFieldWrapper = useCallback((formSchema: FormSchema) => {
     const validators = getValidators(formSchema)
     const {
       name,
+      show_on = [],
     } = formSchema
 
+    const show = show_on?.every((condition) => {
+      const conditionValue = showOnValues[condition.variable]
+      return conditionValue === condition.value
+    })
+
+    if (!show)
+      return null
+
     return (
       <form.Field
         key={name}
@@ -113,7 +141,7 @@ const BaseForm = ({
         {renderField}
       </form.Field>
     )
-  }, [renderField, form, getValidators])
+  }, [renderField, form, getValidators, showOnValues])
 
   if (!formSchemas?.length)
     return null

web/app/components/base/form/components/field/custom-select.tsx

@@ -0,0 +1,41 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../..'
+import type { CustomSelectProps, Option } from '../../../select/custom'
+import CustomSelect from '../../../select/custom'
+import type { LabelProps } from '../label'
+import Label from '../label'
+
+type CustomSelectFieldProps<T extends Option> = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  options: T[]
+  className?: string
+} & Omit<CustomSelectProps<T>, 'options' | 'value' | 'onChange'>
+
+const CustomSelectField = <T extends Option>({
+  label,
+  labelOptions,
+  options,
+  className,
+  ...selectProps
+}: CustomSelectFieldProps<T>) => {
+  const field = useFieldContext<string>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <CustomSelect<T>
+        value={field.state.value}
+        options={options}
+        onChange={value => field.handleChange(value)}
+        {...selectProps}
+      />
+    </div>
+  )
+}
+
+export default CustomSelectField

web/app/components/base/form/components/field/file-types.tsx

@@ -0,0 +1,83 @@
+import cn from '@/utils/classnames'
+import type { LabelProps } from '../label'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import FileTypeItem from '@/app/components/workflow/nodes/_base/components/file-type-item'
+import { useCallback } from 'react'
+
+type FieldValue = {
+  allowedFileTypes: string[],
+  allowedFileExtensions: string[]
+}
+
+type FileTypesFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+}
+
+const FileTypesField = ({
+  label,
+  labelOptions,
+  className,
+}: FileTypesFieldProps) => {
+  const field = useFieldContext<FieldValue>()
+
+  const handleSupportFileTypeChange = useCallback((type: SupportUploadFileTypes) => {
+    let newAllowFileTypes = [...field.state.value.allowedFileTypes]
+    if (type === SupportUploadFileTypes.custom) {
+      if (!newAllowFileTypes.includes(SupportUploadFileTypes.custom))
+        newAllowFileTypes = [SupportUploadFileTypes.custom]
+      else
+        newAllowFileTypes = newAllowFileTypes.filter(v => v !== type)
+    }
+    else {
+      newAllowFileTypes = newAllowFileTypes.filter(v => v !== SupportUploadFileTypes.custom)
+      if (newAllowFileTypes.includes(type))
+        newAllowFileTypes = newAllowFileTypes.filter(v => v !== type)
+      else
+        newAllowFileTypes.push(type)
+    }
+    field.handleChange({
+      ...field.state.value,
+      allowedFileTypes: newAllowFileTypes,
+    })
+  }, [field])
+
+  const handleCustomFileTypesChange = useCallback((customFileTypes: string[]) => {
+    field.handleChange({
+      ...field.state.value,
+      allowedFileExtensions: customFileTypes,
+    })
+  }, [field])
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      {
+        [SupportUploadFileTypes.document, SupportUploadFileTypes.image, SupportUploadFileTypes.audio, SupportUploadFileTypes.video].map((type: SupportUploadFileTypes) => (
+          <FileTypeItem
+            key={type}
+            type={type as SupportUploadFileTypes.image | SupportUploadFileTypes.document | SupportUploadFileTypes.audio | SupportUploadFileTypes.video}
+            selected={field.state.value.allowedFileTypes.includes(type)}
+            onToggle={handleSupportFileTypeChange}
+          />
+        ))
+      }
+      <FileTypeItem
+        type={SupportUploadFileTypes.custom}
+        selected={field.state.value.allowedFileTypes.includes(SupportUploadFileTypes.custom)}
+        onToggle={handleSupportFileTypeChange}
+        customFileTypes={field.state.value.allowedFileExtensions}
+        onCustomFileTypesChange={handleCustomFileTypesChange}
+      />
+    </div>
+  )
+}
+
+export default FileTypesField

web/app/components/base/form/components/field/file-uploader.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { useFieldContext } from '../..'
+import type { LabelProps } from '../label'
+import Label from '../label'
+import cn from '@/utils/classnames'
+import type { FileUploaderInAttachmentWrapperProps } from '../../../file-uploader/file-uploader-in-attachment'
+import FileUploaderInAttachmentWrapper from '../../../file-uploader/file-uploader-in-attachment'
+import type { FileEntity } from '../../../file-uploader/types'
+
+type FileUploaderFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+} & Omit<FileUploaderInAttachmentWrapperProps, 'value' | 'onChange'>
+
+const FileUploaderField = ({
+  label,
+  labelOptions,
+  className,
+  ...inputProps
+}: FileUploaderFieldProps) => {
+  const field = useFieldContext<FileEntity[]>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <FileUploaderInAttachmentWrapper
+        value={field.state.value}
+        onChange={value => field.handleChange(value)}
+        {...inputProps}
+      />
+    </div>
+  )
+}
+
+export default FileUploaderField

web/app/components/base/form/components/field/input-type-select/hooks.tsx

@@ -0,0 +1,52 @@
+import { InputTypeEnum } from './types'
+import { PipelineInputVarType } from '@/models/pipeline'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAlignLeft,
+  RiCheckboxLine,
+  RiFileCopy2Line,
+  RiFileTextLine,
+  RiHashtag,
+  RiListCheck3,
+  RiTextSnippet,
+} from '@remixicon/react'
+
+const i18nFileTypeMap: Record<string, string> = {
+  'number': 'number',
+  'file': 'single-file',
+  'file-list': 'multi-files',
+}
+
+const INPUT_TYPE_ICON = {
+  [PipelineInputVarType.textInput]: RiTextSnippet,
+  [PipelineInputVarType.paragraph]: RiAlignLeft,
+  [PipelineInputVarType.number]: RiHashtag,
+  [PipelineInputVarType.select]: RiListCheck3,
+  [PipelineInputVarType.checkbox]: RiCheckboxLine,
+  [PipelineInputVarType.singleFile]: RiFileTextLine,
+  [PipelineInputVarType.multiFiles]: RiFileCopy2Line,
+}
+
+const DATA_TYPE = {
+  [PipelineInputVarType.textInput]: 'string',
+  [PipelineInputVarType.paragraph]: 'string',
+  [PipelineInputVarType.number]: 'number',
+  [PipelineInputVarType.select]: 'string',
+  [PipelineInputVarType.checkbox]: 'boolean',
+  [PipelineInputVarType.singleFile]: 'file',
+  [PipelineInputVarType.multiFiles]: 'array[file]',
+}
+
+export const useInputTypeOptions = (supportFile: boolean) => {
+  const { t } = useTranslation()
+  const options = supportFile ? InputTypeEnum.options : InputTypeEnum.exclude(['file', 'file-list']).options
+
+  return options.map((value) => {
+    return {
+      value,
+      label: t(`appDebug.variableConfig.${i18nFileTypeMap[value] || value}`),
+      Icon: INPUT_TYPE_ICON[value],
+      type: DATA_TYPE[value],
+    }
+  })
+}

web/app/components/base/form/components/field/input-type-select/index.tsx

@@ -0,0 +1,64 @@
+import cn from '@/utils/classnames'
+import { useFieldContext } from '../../..'
+import type { CustomSelectProps } from '../../../../select/custom'
+import CustomSelect from '../../../../select/custom'
+import type { LabelProps } from '../../label'
+import Label from '../../label'
+import { useCallback } from 'react'
+import Trigger from './trigger'
+import type { FileTypeSelectOption, InputType } from './types'
+import { useInputTypeOptions } from './hooks'
+import Option from './option'
+
+type InputTypeSelectFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  supportFile: boolean
+  className?: string
+} & Omit<CustomSelectProps<FileTypeSelectOption>, 'options' | 'value' | 'onChange' | 'CustomTrigger' | 'CustomOption'>
+
+const InputTypeSelectField = ({
+  label,
+  labelOptions,
+  supportFile,
+  className,
+  ...customSelectProps
+}: InputTypeSelectFieldProps) => {
+  const field = useFieldContext<InputType>()
+  const inputTypeOptions = useInputTypeOptions(supportFile)
+
+  const renderTrigger = useCallback((option: FileTypeSelectOption | undefined, open: boolean) => {
+    return <Trigger option={option} open={open} />
+  }, [])
+  const renderOption = useCallback((option: FileTypeSelectOption) => {
+    return <Option option={option} />
+  }, [])
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <CustomSelect<FileTypeSelectOption>
+        value={field.state.value}
+        options={inputTypeOptions}
+        onChange={value => field.handleChange(value as InputType)}
+        triggerProps={{
+          className: 'gap-x-0.5',
+        }}
+        popupProps={{
+          className: 'w-[368px]',
+          wrapperClassName: 'z-[9999999]',
+          itemClassName: 'gap-x-1',
+        }}
+        CustomTrigger={renderTrigger}
+        CustomOption={renderOption}
+        {...customSelectProps}
+      />
+    </div>
+  )
+}
+
+export default InputTypeSelectField

web/app/components/base/form/components/field/input-type-select/option.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import type { FileTypeSelectOption } from './types'
+import Badge from '@/app/components/base/badge'
+
+type OptionProps = {
+  option: FileTypeSelectOption
+}
+
+const Option = ({
+  option,
+}: OptionProps) => {
+  return (
+    <>
+      <option.Icon className='h-4 w-4 shrink-0 text-text-tertiary' />
+      <span className='grow px-1'>{option.label}</span>
+      <Badge text={option.type} uppercase={false} />
+    </>
+  )
+}
+
+export default React.memo(Option)

web/app/components/base/form/components/field/input-type-select/trigger.tsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import Badge from '@/app/components/base/badge'
+import cn from '@/utils/classnames'
+import { RiArrowDownSLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import type { FileTypeSelectOption } from './types'
+
+type TriggerProps = {
+  option: FileTypeSelectOption | undefined
+  open: boolean
+}
+
+const Trigger = ({
+  option,
+  open,
+}: TriggerProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      {option ? (
+        <>
+          <option.Icon className='h-4 w-4 shrink-0 text-text-tertiary' />
+          <span className='grow p-1'>{option.label}</span>
+          <div className='pr-0.5'>
+            <Badge text={option.type} uppercase={false} />
+          </div>
+        </>
+      ) : (
+        <span className='grow p-1'>{t('common.placeholder.select')}</span>
+      )}
+      <RiArrowDownSLine
+        className={cn(
+          'h-4 w-4 shrink-0 text-text-quaternary group-hover:text-text-secondary',
+          open && 'text-text-secondary',
+        )}
+      />
+    </>
+  )
+}
+
+export default React.memo(Trigger)

web/app/components/base/form/components/field/input-type-select/types.tsx

@@ -0,0 +1,21 @@
+import type { RemixiconComponentType } from '@remixicon/react'
+import { z } from 'zod'
+
+export const InputTypeEnum = z.enum([
+  'text-input',
+  'paragraph',
+  'number',
+  'select',
+  'checkbox',
+  'file',
+  'file-list',
+])
+
+export type InputType = z.infer<typeof InputTypeEnum>
+
+export type FileTypeSelectOption = {
+  value: InputType
+  label: string
+  Icon: RemixiconComponentType
+  type: string
+}

web/app/components/base/form/components/field/mixed-variable-text-input/index.tsx

@@ -0,0 +1,39 @@
+import {
+  memo,
+} from 'react'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import cn from '@/utils/classnames'
+import Placeholder from './placeholder'
+
+type MixedVariableTextInputProps = {
+  editable?: boolean
+  value?: string
+  onChange?: (text: string) => void
+}
+const MixedVariableTextInput = ({
+  editable = true,
+  value = '',
+  onChange,
+}: MixedVariableTextInputProps) => {
+  return (
+    <PromptEditor
+      wrapperClassName={cn(
+        'rounded-lg border border-transparent bg-components-input-bg-normal px-2 py-1',
+        'hover:border-components-input-border-hover hover:bg-components-input-bg-hover',
+        'focus-within:border-components-input-border-active focus-within:bg-components-input-bg-active focus-within:shadow-xs',
+      )}
+      className='caret:text-text-accent'
+      editable={editable}
+      value={value}
+      workflowVariableBlock={{
+        show: true,
+        variables: [],
+        workflowNodesMap: {},
+      }}
+      placeholder={<Placeholder />}
+      onChange={onChange}
+    />
+  )
+}
+
+export default memo(MixedVariableTextInput)

web/app/components/base/form/components/field/mixed-variable-text-input/placeholder.tsx

@@ -0,0 +1,49 @@
+import { useCallback } from 'react'
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { FOCUS_COMMAND } from 'lexical'
+import { $insertNodes } from 'lexical'
+import { CustomTextNode } from '@/app/components/base/prompt-editor/plugins/custom-text/node'
+import Badge from '@/app/components/base/badge'
+
+const Placeholder = () => {
+  const [editor] = useLexicalComposerContext()
+
+  const handleInsert = useCallback((text: string) => {
+    editor.update(() => {
+      const textNode = new CustomTextNode(text)
+      $insertNodes([textNode])
+    })
+    editor.dispatchCommand(FOCUS_COMMAND, undefined as any)
+  }, [editor])
+
+  return (
+    <div
+      className='pointer-events-auto flex h-full w-full cursor-text items-center px-2'
+      onClick={(e) => {
+        e.stopPropagation()
+        handleInsert('')
+      }}
+    >
+      <div className='flex grow items-center'>
+        Type or press
+        <div className='system-kbd mx-0.5 flex h-4 w-4 items-center justify-center rounded bg-components-kbd-bg-gray text-text-placeholder'>/</div>
+        <div
+          className='system-sm-regular cursor-pointer text-components-input-text-placeholder underline decoration-dotted decoration-auto underline-offset-auto hover:text-text-tertiary'
+          onClick={((e) => {
+            e.stopPropagation()
+            handleInsert('/')
+          })}
+        >
+          insert variable
+        </div>
+      </div>
+      <Badge
+        className='shrink-0'
+        text='String'
+        uppercase={false}
+      />
+    </div>
+  )
+}
+
+export default Placeholder

web/app/components/base/form/components/field/number-input.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { useFieldContext } from '../..'
+import type { LabelProps } from '../label'
 import Label from '../label'
 import cn from '@/utils/classnames'
 import type { InputNumberProps } from '../../../input-number'
@@ -7,33 +8,24 @@ import { InputNumber } from '../../../input-number'
 
 type TextFieldProps = {
   label: string
-  isRequired?: boolean
-  showOptional?: boolean
-  tooltip?: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
   className?: string
-  labelClassName?: string
 } & Omit<InputNumberProps, 'id' | 'value' | 'onChange' | 'onBlur'>
 
 const NumberInputField = ({
   label,
-  isRequired,
-  showOptional,
-  tooltip,
+  labelOptions,
   className,
-  labelClassName,
   ...inputProps
 }: TextFieldProps) => {
-  const field = useFieldContext<number | undefined>()
+  const field = useFieldContext<number>()
 
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
       <Label
         htmlFor={field.name}
         label={label}
-        isRequired={isRequired}
-        showOptional={showOptional}
-        tooltip={tooltip}
-        className={labelClassName}
+        {...(labelOptions ?? {})}
       />
       <InputNumber
         id={field.name}

web/app/components/base/form/components/field/number-slider.tsx

@@ -0,0 +1,47 @@
+import cn from '@/utils/classnames'
+import type { LabelProps } from '../label'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import type { InputNumberWithSliderProps } from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
+import InputNumberWithSlider from '@/app/components/workflow/nodes/_base/components/input-number-with-slider'
+
+type NumberSliderFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  description?: string
+  className?: string
+} & Omit<InputNumberWithSliderProps, 'value' | 'onChange'>
+
+const NumberSliderField = ({
+  label,
+  labelOptions,
+  description,
+  className,
+  ...InputNumberWithSliderProps
+}: NumberSliderFieldProps) => {
+  const field = useFieldContext<number>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <div>
+        <Label
+          htmlFor={field.name}
+          label={label}
+          {...(labelOptions ?? {})}
+        />
+        {description && (
+          <div className='body-xs-regular pb-0.5 text-text-tertiary'>
+            {description}
+          </div>
+        )}
+      </div>
+      <InputNumberWithSlider
+        value={field.state.value}
+        onChange={value => field.handleChange(value)}
+        {...InputNumberWithSliderProps}
+      />
+    </div>
+  )
+}
+
+export default NumberSliderField

web/app/components/base/form/components/field/options.tsx

@@ -1,27 +1,29 @@
 import cn from '@/utils/classnames'
 import { useFieldContext } from '../..'
+import type { LabelProps } from '../label'
 import Label from '../label'
+import type { Options } from '@/app/components/app/configuration/config-var/config-select'
 import ConfigSelect from '@/app/components/app/configuration/config-var/config-select'
 
 type OptionsFieldProps = {
   label: string;
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
   className?: string;
-  labelClassName?: string;
 }
 
 const OptionsField = ({
   label,
   className,
-  labelClassName,
+  labelOptions,
 }: OptionsFieldProps) => {
-  const field = useFieldContext<string[]>()
+  const field = useFieldContext<Options>()
 
   return (
     <div className={cn('flex flex-col gap-y-0.5', className)}>
       <Label
         htmlFor={field.name}
         label={label}
-        className={labelClassName}
+        {...(labelOptions ?? {})}
       />
       <ConfigSelect
         options={field.state.value}

web/app/components/base/form/components/field/select.tsx

@@ -1,31 +1,25 @@
 import cn from '@/utils/classnames'
 import { useFieldContext } from '../..'
+import type { Option, PureSelectProps } from '../../../select/pure'
 import PureSelect from '../../../select/pure'
+import type { LabelProps } from '../label'
 import Label from '../label'
 
-type SelectOption = {
-  value: string
-  label: string
-}
-
 type SelectFieldProps = {
   label: string
-  options: SelectOption[]
-  isRequired?: boolean
-  showOptional?: boolean
-  tooltip?: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  options: Option[]
+  onChange?: (value: string) => void
   className?: string
-  labelClassName?: string
-}
+} & Omit<PureSelectProps, 'options' | 'value' | 'onChange'>
 
 const SelectField = ({
   label,
+  labelOptions,
   options,
-  isRequired,
-  showOptional,
-  tooltip,
+  onChange,
   className,
-  labelClassName,
+  ...selectProps
 }: SelectFieldProps) => {
   const field = useFieldContext<string>()
 
@@ -34,15 +28,13 @@ const SelectField = ({
       <Label
         htmlFor={field.name}
         label={label}
-        isRequired={isRequired}
-        showOptional={showOptional}
-        tooltip={tooltip}
-        className={labelClassName}
+        {...(labelOptions ?? {})}
       />
       <PureSelect
         value={field.state.value}
         options={options}
         onChange={value => field.handleChange(value)}
+        {...selectProps}
       />
     </div>
   )

web/app/components/base/form/components/field/text-area.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import { useFieldContext } from '../..'
+import type { LabelProps } from '../label'
+import Label from '../label'
+import cn from '@/utils/classnames'
+import type { TextareaProps } from '../../../textarea'
+import Textarea from '../../../textarea'
+
+type TextAreaFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+} & Omit<TextareaProps, 'className' | 'onChange' | 'onBlur' | 'value' | 'id'>
+
+const TextAreaField = ({
+  label,
+  labelOptions,
+  className,
+  ...inputProps
+}: TextAreaFieldProps) => {
+  const field = useFieldContext<string>()
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <Textarea
+        id={field.name}
+        value={field.state.value}
+        onChange={e => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+        {...inputProps}
+      />
+    </div>
+  )
+}
+
+export default TextAreaField

web/app/components/base/form/components/field/text.tsx

@@ -1,25 +1,20 @@
 import React from 'react'
 import { useFieldContext } from '../..'
 import Input, { type InputProps } from '../../../input'
+import type { LabelProps } from '../label'
 import Label from '../label'
 import cn from '@/utils/classnames'
 
 type TextFieldProps = {
   label: string
-  isRequired?: boolean
-  showOptional?: boolean
-  tooltip?: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
   className?: string
-  labelClassName?: string
 } & Omit<InputProps, 'className' | 'onChange' | 'onBlur' | 'value' | 'id'>
 
 const TextField = ({
   label,
-  isRequired,
-  showOptional,
-  tooltip,
+  labelOptions,
   className,
-  labelClassName,
   ...inputProps
 }: TextFieldProps) => {
   const field = useFieldContext<string>()
@@ -29,10 +24,7 @@ const TextField = ({
       <Label
         htmlFor={field.name}
         label={label}
-        isRequired={isRequired}
-        showOptional={showOptional}
-        tooltip={tooltip}
-        className={labelClassName}
+        {...(labelOptions ?? {})}
       />
       <Input
         id={field.name}

web/app/components/base/form/components/field/upload-method.tsx

@@ -0,0 +1,58 @@
+import cn from '@/utils/classnames'
+import type { LabelProps } from '../label'
+import { useFieldContext } from '../..'
+import Label from '../label'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import { useTranslation } from 'react-i18next'
+import { TransferMethod } from '@/types/app'
+import { useCallback } from 'react'
+
+type UploadMethodFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+}
+
+const UploadMethodField = ({
+  label,
+  labelOptions,
+  className,
+}: UploadMethodFieldProps) => {
+  const { t } = useTranslation()
+  const field = useFieldContext<TransferMethod[]>()
+
+  const { value } = field.state
+
+  const handleUploadMethodChange = useCallback((method: TransferMethod) => {
+    field.handleChange(method === TransferMethod.all ? [TransferMethod.local_file, TransferMethod.remote_url] : [method])
+  }, [field])
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={field.name}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <div className='grid grid-cols-3 gap-2'>
+        <OptionCard
+          title={t('appDebug.variableConfig.localUpload')}
+          selected={value.length === 1 && value.includes(TransferMethod.local_file)}
+          onSelect={handleUploadMethodChange.bind(null, TransferMethod.local_file)}
+        />
+        <OptionCard
+          title="URL"
+          selected={value.length === 1 && value.includes(TransferMethod.remote_url)}
+          onSelect={handleUploadMethodChange.bind(null, TransferMethod.remote_url)}
+        />
+        <OptionCard
+          title={t('appDebug.variableConfig.both')}
+          selected={value.includes(TransferMethod.local_file) && value.includes(TransferMethod.remote_url)}
+          onSelect={handleUploadMethodChange.bind(null, TransferMethod.all)}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default UploadMethodField

web/app/components/base/form/components/field/variable-or-constant-input.tsx

@@ -0,0 +1,86 @@
+import type { ChangeEvent } from 'react'
+import { useState } from 'react'
+import { RiEditLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import SegmentedControl from '@/app/components/base/segmented-control'
+import { VariableX } from '@/app/components/base/icons/src/vender/workflow'
+import Input from '@/app/components/base/input'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import type { LabelProps } from '../label'
+import Label from '../label'
+
+type VariableOrConstantInputFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+}
+
+const VariableOrConstantInputField = ({
+  className,
+  label,
+  labelOptions,
+}: VariableOrConstantInputFieldProps) => {
+  const [variableType, setVariableType] = useState('variable')
+
+  const options = [
+    {
+      Icon: VariableX,
+      value: 'variable',
+    },
+    {
+      Icon: RiEditLine,
+      value: 'constant',
+    },
+  ]
+
+  const handleVariableOrConstantChange = (value: string) => {
+    setVariableType(value)
+  }
+
+  const handleVariableValueChange = () => {
+    console.log('Variable value changed')
+  }
+
+  const handleConstantValueChange = (e: ChangeEvent<HTMLInputElement>) => {
+    console.log('Constant value changed:', e.target.value)
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={'variable-or-constant'}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <div className='flex items-center'>
+        <SegmentedControl
+          className='mr-1 shrink-0'
+          value={variableType}
+          onChange={handleVariableOrConstantChange as any}
+          options={options as any}
+        />
+        {
+          variableType === 'variable' && (
+            <VarReferencePicker
+              className='grow'
+              nodeId=''
+              readonly={false}
+              value={[]}
+              onChange={handleVariableValueChange}
+            />
+          )
+        }
+        {
+          variableType === 'constant' && (
+            <Input
+              className='ml-1'
+              onChange={handleConstantValueChange}
+            />
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default VariableOrConstantInputField

web/app/components/base/form/components/field/variable-selector.tsx

@@ -0,0 +1,41 @@
+import cn from '@/utils/classnames'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import type { LabelProps } from '../label'
+import Label from '../label'
+
+type VariableOrConstantInputFieldProps = {
+  label: string
+  labelOptions?: Omit<LabelProps, 'htmlFor' | 'label'>
+  className?: string
+}
+
+const VariableOrConstantInputField = ({
+  className,
+  label,
+  labelOptions,
+}: VariableOrConstantInputFieldProps) => {
+  const handleVariableValueChange = () => {
+    console.log('Variable value changed')
+  }
+
+  return (
+    <div className={cn('flex flex-col gap-y-0.5', className)}>
+      <Label
+        htmlFor={'variable-or-constant'}
+        label={label}
+        {...(labelOptions ?? {})}
+      />
+      <div className='flex items-center'>
+        <VarReferencePicker
+          className='grow'
+          nodeId=''
+          readonly={false}
+          value={[]}
+          onChange={handleVariableValueChange}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default VariableOrConstantInputField

web/app/components/base/form/components/form/actions.tsx

@@ -0,0 +1,43 @@
+import { useStore } from '@tanstack/react-form'
+import type { FormType } from '../..'
+import { useFormContext } from '../..'
+import Button from '../../../button'
+import { useTranslation } from 'react-i18next'
+
+export type CustomActionsProps = {
+  form: FormType
+  isSubmitting: boolean
+  canSubmit: boolean
+}
+
+type ActionsProps = {
+  CustomActions?: (props: CustomActionsProps) => React.ReactNode | React.JSX.Element
+}
+
+const Actions = ({
+  CustomActions,
+}: ActionsProps) => {
+  const { t } = useTranslation()
+  const form = useFormContext()
+
+  const [isSubmitting, canSubmit] = useStore(form.store, state => [
+    state.isSubmitting,
+    state.canSubmit,
+  ])
+
+  if (CustomActions)
+    return CustomActions({ form, isSubmitting, canSubmit })
+
+  return (
+    <Button
+      variant='primary'
+      disabled={isSubmitting || !canSubmit}
+      loading={isSubmitting}
+      onClick={() => form.handleSubmit()}
+    >
+      {t('common.operation.submit')}
+    </Button>
+  )
+}
+
+export default Actions

web/app/components/base/form/components/form/submit-button.tsx

@@ -1,25 +0,0 @@
-import { useStore } from '@tanstack/react-form'
-import { useFormContext } from '../..'
-import Button, { type ButtonProps } from '../../../button'
-
-type SubmitButtonProps = Omit<ButtonProps, 'disabled' | 'loading' | 'onClick'>
-
-const SubmitButton = ({ ...buttonProps }: SubmitButtonProps) => {
-  const form = useFormContext()
-
-  const [isSubmitting, canSubmit] = useStore(form.store, state => [
-    state.isSubmitting,
-    state.canSubmit,
-  ])
-
-  return (
-    <Button
-      disabled={isSubmitting || !canSubmit}
-      loading={isSubmitting}
-      onClick={() => form.handleSubmit()}
-      {...buttonProps}
-    />
-  )
-}
-
-export default SubmitButton

web/app/components/base/form/form-scenarios/base/field.tsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { type BaseConfiguration, BaseFieldType } from './types'
+import { withForm } from '../..'
+import { useStore } from '@tanstack/react-form'
+
+type BaseFieldProps = {
+  initialData?: Record<string, any>
+  config: BaseConfiguration
+}
+
+const BaseField = ({
+  initialData,
+  config,
+}: BaseFieldProps) => withForm({
+  defaultValues: initialData,
+  render: function Render({
+    form,
+  }) {
+    const {
+      type,
+      label,
+      placeholder,
+      variable,
+      tooltip,
+      showConditions,
+      max,
+      min,
+      options,
+      required,
+      showOptional,
+      popupProps,
+      allowedFileExtensions,
+      allowedFileTypes,
+      allowedFileUploadMethods,
+      maxLength,
+      unit,
+    } = config
+
+    const isAllConditionsMet = useStore(form.store, (state) => {
+      const fieldValues = state.values
+      if (!showConditions.length) return true
+      return showConditions.every((condition) => {
+        const { variable, value } = condition
+        const fieldValue = fieldValues[variable as keyof typeof fieldValues]
+        return fieldValue === value
+      })
+    })
+
+    if (!isAllConditionsMet)
+      return <></>
+
+    if (type === BaseFieldType.textInput) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.TextField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.paragraph) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.TextAreaField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.numberInput) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.NumberInputField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+              max={max}
+              min={min}
+              unit={unit}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.checkbox) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.CheckboxField
+              label={label}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.select) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.SelectField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              options={options!}
+              popupProps={popupProps}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.file) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.FileUploaderField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              fileConfig={{
+                allowed_file_extensions: allowedFileExtensions,
+                allowed_file_types: allowedFileTypes,
+                allowed_file_upload_methods: allowedFileUploadMethods,
+                number_limits: 1,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === BaseFieldType.fileList) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.FileUploaderField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              fileConfig={{
+                allowed_file_extensions: allowedFileExtensions,
+                allowed_file_types: allowedFileTypes,
+                allowed_file_upload_methods: allowedFileUploadMethods,
+                number_limits: maxLength,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    return <></>
+  },
+})
+
+export default BaseField

web/app/components/base/form/form-scenarios/base/index.tsx

@@ -0,0 +1,63 @@
+import React, { useMemo } from 'react'
+import { useAppForm } from '../..'
+import BaseField from './field'
+import type { BaseFormProps } from './types'
+import { generateZodSchema } from './utils'
+
+const BaseForm = ({
+  initialData,
+  configurations,
+  onSubmit,
+  CustomActions,
+}: BaseFormProps) => {
+  const schema = useMemo(() => {
+    const schema = generateZodSchema(configurations)
+    return schema
+  }, [configurations])
+
+  const baseForm = useAppForm({
+    defaultValues: initialData,
+    validators: {
+      onChange: ({ value }) => {
+        const result = schema.safeParse(value)
+        if (!result.success) {
+          const issues = result.error.issues
+          const firstIssue = issues[0].message
+          return firstIssue
+        }
+        return undefined
+      },
+    },
+    onSubmit: ({ value }) => {
+      onSubmit(value)
+    },
+  })
+
+  return (
+    <form
+      className='w-full'
+      onSubmit={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        baseForm.handleSubmit()
+      }}
+    >
+      <div className='flex flex-col gap-4 px-4 py-2'>
+        {configurations.map((config, index) => {
+          const FieldComponent = BaseField({
+            initialData,
+            config,
+          })
+          return <FieldComponent key={index} form={baseForm} />
+        })}
+      </div>
+      <baseForm.AppForm>
+        <baseForm.Actions
+          CustomActions={CustomActions}
+        />
+      </baseForm.AppForm>
+    </form>
+  )
+}
+
+export default React.memo(BaseForm)

web/app/components/base/form/form-scenarios/base/types.ts

@@ -0,0 +1,61 @@
+import type { TransferMethod } from '@/types/app'
+import type { Option } from '../../../select/pure'
+import type { CustomActionsProps } from '../../components/form/actions'
+
+export enum BaseFieldType {
+  textInput = 'text-input',
+  paragraph = 'paragraph',
+  numberInput = 'number-input',
+  checkbox = 'checkbox',
+  select = 'select',
+  file = 'file',
+  fileList = 'file-list',
+}
+
+export type ShowCondition = {
+  variable: string
+  value: any
+}
+
+export type NumberConfiguration = {
+  max?: number
+  min?: number
+  unit?: string
+}
+
+export type SelectConfiguration = {
+  options: Option[] // Options for select field
+  popupProps?: {
+    wrapperClassName?: string
+    className?: string
+    itemClassName?: string
+    title?: string
+  }
+}
+
+export type FileConfiguration = {
+  allowedFileTypes: string[]
+  allowedFileExtensions: string[]
+  allowedFileUploadMethods: TransferMethod[]
+}
+
+export type BaseConfiguration = {
+  label: string
+  variable: string // Variable name
+  maxLength?: number // Max length for text input
+  placeholder?: string
+  required: boolean
+  showOptional?: boolean // show optional label
+  showConditions: ShowCondition[] // Show this field only when all conditions are met
+  type: BaseFieldType
+  tooltip?: string // Tooltip for this field
+} & NumberConfiguration
+  & Partial<SelectConfiguration>
+  & Partial<FileConfiguration>
+
+export type BaseFormProps = {
+  initialData?: Record<string, any>
+  configurations: BaseConfiguration[]
+  CustomActions?: (props: CustomActionsProps) => React.ReactNode
+  onSubmit: (value: Record<string, any>) => void
+}

web/app/components/base/form/form-scenarios/base/utils.ts

@@ -0,0 +1,57 @@
+import type { ZodNumber, ZodSchema, ZodString } from 'zod'
+import { z } from 'zod'
+import { type BaseConfiguration, BaseFieldType } from './types'
+
+export const generateZodSchema = (fields: BaseConfiguration[]) => {
+  const shape: Record<string, ZodSchema> = {}
+
+  fields.forEach((field) => {
+    let zodType
+
+    switch (field.type) {
+      case BaseFieldType.textInput:
+      case BaseFieldType.paragraph:
+        zodType = z.string()
+        break
+      case BaseFieldType.numberInput:
+        zodType = z.number()
+        break
+      case BaseFieldType.checkbox:
+        zodType = z.boolean()
+        break
+      case BaseFieldType.select:
+        zodType = z.string()
+        break
+      default:
+        zodType = z.any()
+        break
+    }
+
+    if (field.maxLength) {
+      if ([BaseFieldType.textInput, BaseFieldType.paragraph].includes(field.type))
+        zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
+    }
+
+    if (field.min) {
+      if ([BaseFieldType.numberInput].includes(field.type))
+        zodType = (zodType as ZodNumber).min(field.min, `${field.label} must be at least ${field.min}`)
+    }
+
+    if (field.max) {
+      if ([BaseFieldType.numberInput].includes(field.type))
+        zodType = (zodType as ZodNumber).max(field.max, `${field.label} exceeds max value of ${field.max}`)
+    }
+
+    if (field.required) {
+      if ([BaseFieldType.textInput, BaseFieldType.paragraph].includes(field.type))
+        zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
+    }
+    else {
+      zodType = zodType.optional().nullable()
+    }
+
+    shape[field.variable] = zodType
+  })
+
+  return z.object(shape)
+}

web/app/components/base/form/form-scenarios/demo/index.tsx

@@ -59,7 +59,7 @@ const DemoForm = () => {
         )
       }
       <form.AppForm>
-        <form.SubmitButton>Submit</form.SubmitButton>
+        <form.Actions />
       </form.AppForm>
     </form>
   )

web/app/components/base/form/form-scenarios/input-field/field.tsx

@@ -0,0 +1,222 @@
+import React from 'react'
+import { type InputFieldConfiguration, InputFieldType } from './types'
+import { withForm } from '../..'
+import { useStore } from '@tanstack/react-form'
+
+type InputFieldProps = {
+  initialData?: Record<string, any>
+  config: InputFieldConfiguration
+}
+
+const InputField = ({
+  initialData,
+  config,
+}: InputFieldProps) => withForm({
+  defaultValues: initialData,
+  render: function Render({
+    form,
+  }) {
+    const {
+      type,
+      label,
+      placeholder,
+      variable,
+      tooltip,
+      showConditions,
+      max,
+      min,
+      required,
+      showOptional,
+      supportFile,
+      description,
+      options,
+      listeners,
+      popupProps,
+    } = config
+
+    const isAllConditionsMet = useStore(form.store, (state) => {
+      const fieldValues = state.values
+      return showConditions.every((condition) => {
+        const { variable, value } = condition
+        const fieldValue = fieldValues[variable as keyof typeof fieldValues]
+        return fieldValue === value
+      })
+    })
+
+    if (!isAllConditionsMet)
+      return <></>
+
+    if (type === InputFieldType.textInput) {
+      return (
+        <form.AppField
+          name={variable}
+          listeners={listeners}
+          children={field => (
+            <field.TextField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.numberInput) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.NumberInputField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+              max={max}
+              min={min}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.numberSlider) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.NumberSliderField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              description={description}
+              max={max}
+              min={min}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.checkbox) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.CheckboxField
+              label={label}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.select) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.SelectField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              options={options!}
+              popupProps={popupProps}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.inputTypeSelect) {
+      return (
+        <form.AppField
+          name={variable}
+          listeners={listeners}
+          children={field => (
+            <field.InputTypeSelectField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              supportFile={!!supportFile}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.uploadMethod) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.UploadMethodField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.fileTypes) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.FileTypesField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.options) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.OptionsField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    return <></>
+  },
+})
+
+export default InputField

web/app/components/base/form/form-scenarios/input-field/types.ts

@@ -0,0 +1,39 @@
+import type { DeepKeys, FieldListeners } from '@tanstack/react-form'
+import type { NumberConfiguration, SelectConfiguration, ShowCondition } from '../base/types'
+
+export enum InputFieldType {
+  textInput = 'textInput',
+  numberInput = 'numberInput',
+  numberSlider = 'numberSlider',
+  checkbox = 'checkbox',
+  options = 'options',
+  select = 'select',
+  inputTypeSelect = 'inputTypeSelect',
+  uploadMethod = 'uploadMethod',
+  fileTypes = 'fileTypes',
+}
+
+export type InputTypeSelectConfiguration = {
+  supportFile: boolean
+}
+
+export type NumberSliderConfiguration = {
+  description: string
+  max?: number
+  min?: number
+}
+
+export type InputFieldConfiguration = {
+  label: string
+  variable: string // Variable name
+  maxLength?: number // Max length for text input
+  placeholder?: string
+  required: boolean
+  showOptional?: boolean // show optional label
+  showConditions: ShowCondition[] // Show this field only when all conditions are met
+  type: InputFieldType
+  tooltip?: string // Tooltip for this field
+  listeners?: FieldListeners<Record<string, any>, DeepKeys<Record<string, any>>> // Listener for this field
+} & NumberConfiguration & Partial<InputTypeSelectConfiguration>
+  & Partial<NumberSliderConfiguration>
+  & Partial<SelectConfiguration>

web/app/components/base/form/form-scenarios/input-field/utils.ts

@@ -0,0 +1,75 @@
+import type { ZodSchema, ZodString } from 'zod'
+import { z } from 'zod'
+import { type InputFieldConfiguration, InputFieldType } from './types'
+import { SupportedFileTypes, TransferMethod } from '@/app/components/rag-pipeline/components/panel/input-field/editor/form/schema'
+
+export const generateZodSchema = (fields: InputFieldConfiguration[]) => {
+  const shape: Record<string, ZodSchema> = {}
+
+  fields.forEach((field) => {
+    let zodType
+
+    switch (field.type) {
+      case InputFieldType.textInput:
+        zodType = z.string()
+        break
+      case InputFieldType.numberInput:
+        zodType = z.number()
+        break
+      case InputFieldType.numberSlider:
+        zodType = z.number()
+        break
+      case InputFieldType.checkbox:
+        zodType = z.boolean()
+        break
+      case InputFieldType.options:
+        zodType = z.array(z.string())
+        break
+      case InputFieldType.select:
+        zodType = z.string()
+        break
+      case InputFieldType.fileTypes:
+        zodType = z.object({
+          allowedFileExtensions: z.string().optional(),
+          allowedFileTypes: z.array(SupportedFileTypes),
+        })
+        break
+      case InputFieldType.inputTypeSelect:
+        zodType = z.string()
+        break
+      case InputFieldType.uploadMethod:
+        zodType = z.array(TransferMethod)
+        break
+      default:
+        zodType = z.any()
+        break
+    }
+
+    if (field.maxLength) {
+      if ([InputFieldType.textInput].includes(field.type))
+        zodType = (zodType as ZodString).max(field.maxLength, `${field.label} exceeds max length of ${field.maxLength}`)
+    }
+
+    if (field.min) {
+      if ([InputFieldType.numberInput].includes(field.type))
+        zodType = (zodType as ZodString).min(field.min, `${field.label} must be at least ${field.min}`)
+    }
+
+    if (field.max) {
+      if ([InputFieldType.numberInput].includes(field.type))
+        zodType = (zodType as ZodString).max(field.max, `${field.label} exceeds max value of ${field.max}`)
+    }
+
+    if (field.required) {
+      if ([InputFieldType.textInput].includes(field.type))
+        zodType = (zodType as ZodString).nonempty(`${field.label} is required`)
+    }
+    else {
+      zodType = zodType.optional()
+    }
+
+    shape[field.variable] = zodType
+  })
+
+  return z.object(shape)
+}

web/app/components/base/form/form-scenarios/node-panel/field.tsx

@@ -0,0 +1,239 @@
+import React from 'react'
+import { type InputFieldConfiguration, InputFieldType } from './types'
+import { withForm } from '../..'
+import { useStore } from '@tanstack/react-form'
+
+type InputFieldProps = {
+  initialData?: Record<string, any>
+  config: InputFieldConfiguration
+}
+
+const NodePanelField = ({
+  initialData,
+  config,
+}: InputFieldProps) => withForm({
+  defaultValues: initialData,
+  render: function Render({
+    form,
+  }) {
+    const {
+      type,
+      label,
+      placeholder,
+      variable,
+      tooltip,
+      showConditions,
+      max,
+      min,
+      required,
+      showOptional,
+      supportFile,
+      description,
+      options,
+      listeners,
+      popupProps,
+    } = config
+
+    const isAllConditionsMet = useStore(form.store, (state) => {
+      const fieldValues = state.values
+      return showConditions.every((condition) => {
+        const { variable, value } = condition
+        const fieldValue = fieldValues[variable as keyof typeof fieldValues]
+        return fieldValue === value
+      })
+    })
+
+    if (!isAllConditionsMet)
+      return <></>
+
+    if (type === InputFieldType.textInput) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.TextField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.numberInput) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.NumberInputField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              placeholder={placeholder}
+              max={max}
+              min={min}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.numberSlider) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.NumberSliderField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              description={description}
+              max={max}
+              min={min}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.checkbox) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.CheckboxField
+              label={label}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.select) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.SelectField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              options={options!}
+              popupProps={popupProps}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.inputTypeSelect) {
+      return (
+        <form.AppField
+          name={variable}
+          listeners={listeners}
+          children={field => (
+            <field.InputTypeSelectField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+              supportFile={!!supportFile}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.uploadMethod) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.UploadMethodField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.fileTypes) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.FileTypesField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.options) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.OptionsField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    if (type === InputFieldType.variableOrConstant) {
+      return (
+        <form.AppField
+          name={variable}
+          children={field => (
+            <field.VariableOrConstantInputField
+              label={label}
+              labelOptions={{
+                tooltip,
+                isRequired: required,
+                showOptional,
+              }}
+            />
+          )}
+        />
+      )
+    }
+
+    return <></>
+  },
+})
+
+export default NodePanelField

web/app/components/base/form/form-scenarios/node-panel/types.ts

@@ -0,0 +1,40 @@
+import type { DeepKeys, FieldListeners } from '@tanstack/react-form'
+import type { NumberConfiguration, SelectConfiguration, ShowCondition } from '../base/types'
+
+export enum InputFieldType {
+  textInput = 'textInput',
+  numberInput = 'numberInput',
+  numberSlider = 'numberSlider',
+  checkbox = 'checkbox',
+  options = 'options',
+  select = 'select',
+  inputTypeSelect = 'inputTypeSelect',
+  uploadMethod = 'uploadMethod',
+  fileTypes = 'fileTypes',
+  variableOrConstant = 'variableOrConstant',
+}
+
+export type InputTypeSelectConfiguration = {
+  supportFile: boolean
+}
+
+export type NumberSliderConfiguration = {
+  description: string
+  max?: number
+  min?: number
+}
+
+export type InputFieldConfiguration = {
+  label: string
+  variable: string // Variable name
+  maxLength?: number // Max length for text input
+  placeholder?: string
+  required: boolean
+  showOptional?: boolean // show optional label
+  showConditions: ShowCondition[] // Show this field only when all conditions are met
+  type: InputFieldType
+  tooltip?: string // Tooltip for this field
+  listeners?: FieldListeners<Record<string, any>, DeepKeys<Record<string, any>>> // Listener for this field
+} & NumberConfiguration & Partial<InputTypeSelectConfiguration>
+& Partial<NumberSliderConfiguration>
+& Partial<SelectConfiguration>

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

@@ -3,8 +3,16 @@ import TextField from './components/field/text'
 import NumberInputField from './components/field/number-input'
 import CheckboxField from './components/field/checkbox'
 import SelectField from './components/field/select'
+import CustomSelectField from './components/field/custom-select'
 import OptionsField from './components/field/options'
-import SubmitButton from './components/form/submit-button'
+import Actions from './components/form/actions'
+import InputTypeSelectField from './components/field/input-type-select'
+import FileTypesField from './components/field/file-types'
+import UploadMethodField from './components/field/upload-method'
+import NumberSliderField from './components/field/number-slider'
+import VariableOrConstantInputField from './components/field/variable-selector'
+import TextAreaField from './components/field/text-area'
+import FileUploaderField from './components/field/file-uploader'
 
 export const { fieldContext, useFieldContext, formContext, useFormContext }
   = createFormHookContexts()
@@ -12,14 +20,24 @@ export const { fieldContext, useFieldContext, formContext, useFormContext }
 export const { useAppForm, withForm } = createFormHook({
   fieldComponents: {
     TextField,
+    TextAreaField,
     NumberInputField,
     CheckboxField,
     SelectField,
+    CustomSelectField,
     OptionsField,
+    InputTypeSelectField,
+    FileTypesField,
+    UploadMethodField,
+    NumberSliderField,
+    VariableOrConstantInputField,
+    FileUploaderField,
   },
   formComponents: {
-    SubmitButton,
+    Actions,
   },
   fieldContext,
   formContext,
 })
+
+export type FormType = ReturnType<typeof useFormContext>

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

@@ -24,7 +24,7 @@ const GA: FC<IGAProps> = ({
   if (IS_CE_EDITION)
     return null
 
-  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') : ''
+  const nonce = process.env.NODE_ENV === 'production' ? (headers() as unknown as UnsafeUnwrappedHeaders).get('x-nonce') ?? '' : ''
 
   return (
     <>
@@ -32,7 +32,7 @@ const GA: FC<IGAProps> = ({
         strategy="beforeInteractive"
         async
         src={`https://www.googletagmanager.com/gtag/js?id=${gaIdMaps[gaType]}`}
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       ></Script>
       <Script
         id="ga-init"
@@ -44,14 +44,14 @@ gtag('js', new Date());
 gtag('config', '${gaIdMaps[gaType]}');
           `,
         }}
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       >
       </Script>
       {/* Cookie banner */}
       <Script
         id="cookieyes"
         src='https://cdn-cookieyes.com/client_data/2a645945fcae53f8e025a2b1/script.js'
-        nonce={nonce!}
+        nonce={nonce ?? undefined}
       ></Script>
     </>
 

web/app/components/base/icons/IconBase.tsx

@@ -18,7 +18,7 @@ const IconBase = (
     ref,
     ...props
   }: IconBaseProps & {
-    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+    ref?: React.RefObject<React.RefObject<HTMLOrSVGElement>>;
   },
 ) => {
   const { data, className, onClick, style, ...restProps } = props

web/app/components/base/icons/assets/public/billing/aws-marketplace-dark.svg

@@ -0,0 +1,23 @@
+<svg width="126" height="25" viewBox="0 0 126 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4_12262)">
+<path d="M47.3131 15.0593V9.21609C47.3131 8.64631 47.2037 8.23413 46.9849 7.95531C46.7662 7.6886 46.4259 7.54313 45.9641 7.54313C45.1377 7.54313 44.2991 7.79771 43.4606 8.30687C43.4728 8.39173 43.4728 8.47659 43.4728 8.56145C43.4728 8.64631 43.4728 8.7433 43.4728 8.82816V15.0351H41.7834V9.19184C41.7834 8.62207 41.6741 8.20989 41.4553 7.93106C41.2366 7.66436 40.8963 7.51888 40.4345 7.51888C39.5716 7.51888 38.7452 7.77346 37.9553 8.2705V15.023H36.266V6.4157H37.6757L37.8459 7.27642C38.9396 6.5248 39.9969 6.16112 41.03 6.16112C42.0873 6.16112 42.8043 6.56117 43.1689 7.36128C44.287 6.56117 45.4172 6.16112 46.5353 6.16112C47.313 6.16112 47.9207 6.37933 48.3339 6.82788C48.7593 7.2643 48.9659 7.89469 48.9659 8.70693V15.023H47.3131V15.0593Z" fill="#222225"/>
+<path d="M55.966 15.0593L55.8323 14.1744C55.4191 14.5259 54.9694 14.7926 54.4833 14.9866C53.985 15.1806 53.4989 15.2775 53.0128 15.2775C52.2107 15.2775 51.5666 15.0472 51.0805 14.5865C50.5944 14.1259 50.3513 13.5197 50.3513 12.7439C50.3513 11.9195 50.643 11.2527 51.2385 10.7678C51.834 10.2708 52.6239 10.0283 53.6205 10.0283C54.2767 10.0283 54.9937 10.1253 55.7594 10.3193V9.20397C55.7594 8.59782 55.6257 8.1614 55.3462 7.91894C55.0667 7.66436 54.5927 7.54313 53.9243 7.54313C52.9642 7.54313 51.9677 7.71285 50.9346 8.06441V6.87637C51.3478 6.65816 51.8461 6.50056 52.4295 6.37933C53.025 6.2581 53.6205 6.19749 54.216 6.19749C55.2976 6.19749 56.0875 6.4157 56.5979 6.86425C57.1084 7.31279 57.3636 7.99168 57.3636 8.91302V15.0593H55.966ZM53.4139 14.0046C54.1795 14.0046 54.9694 13.7137 55.7594 13.1439V11.4103C55.1639 11.2649 54.5684 11.1921 53.9607 11.1921C52.6847 11.1921 52.0406 11.6892 52.0406 12.6711C52.0406 13.0954 52.1621 13.4349 52.393 13.6652C52.6361 13.8834 52.9763 14.0046 53.4139 14.0046Z" fill="#222225"/>
+<path d="M59.2959 15.0593V6.45207H60.7056L60.8879 7.72497C61.2039 7.38553 61.4956 7.11883 61.7751 6.93698C62.0546 6.75514 62.322 6.60966 62.6137 6.5248C62.8932 6.43994 63.2092 6.39145 63.5373 6.39145C63.756 6.39145 63.987 6.40357 64.23 6.43994V7.96743C63.8654 7.91894 63.5616 7.89469 63.3064 7.89469C62.3949 7.89469 61.6171 8.1614 60.973 8.70693V15.0593H59.2959Z" fill="#222225"/>
+<path d="M65.2752 15.0593V2.5H66.9644V10.2102L70.6225 6.46419H72.6763L68.5929 10.5496L72.9437 15.0593H70.8169L66.9523 10.986V15.0593H65.2752Z" fill="#222225"/>
+<path d="M74.4871 11.1194C74.5114 12.0892 74.7545 12.8166 75.2163 13.2773C75.6781 13.7379 76.383 13.9683 77.3552 13.9683C78.2546 13.9683 79.166 13.7985 80.0897 13.447V14.6472C79.2754 15.0836 78.2789 15.3139 77.1 15.3139C75.7024 15.3139 74.6451 14.926 73.9403 14.1622C73.2232 13.3985 72.8708 12.2589 72.8708 10.7557C72.8708 9.31307 73.2232 8.19776 73.9403 7.40978C74.6573 6.62179 75.6538 6.20961 76.9299 6.20961C78.0115 6.20961 78.8379 6.51268 79.4091 7.11883C79.9925 7.72497 80.272 8.5857 80.272 9.68888C80.272 10.2223 80.2234 10.7072 80.1383 11.1315H74.4871V11.1194ZM76.8327 7.47039C76.1156 7.47039 75.5566 7.6886 75.1677 8.10078C74.7667 8.52508 74.5479 9.15547 74.4871 9.99195H78.7285C78.7407 9.90709 78.7407 9.7495 78.7407 9.55553C78.7407 8.86452 78.5827 8.34324 78.2546 7.99168C77.9386 7.65223 77.4646 7.47039 76.8327 7.47039Z" fill="#222225"/>
+<path d="M86.8589 14.8532C86.2998 15.0715 85.6679 15.1806 84.9752 15.1806C83.3588 15.1806 82.5567 14.3804 82.5567 12.7681V7.77346H80.989V6.6824L82.6053 6.47631L82.8605 4.02749H84.2338V6.43994H86.786V7.76134H84.2338V12.6832C84.2338 13.1075 84.3311 13.3985 84.5134 13.5682C84.6956 13.7379 85.0238 13.8228 85.4734 13.8228C85.9353 13.8228 86.3971 13.7622 86.8467 13.6531V14.8532H86.8589Z" fill="#222225"/>
+<path d="M88.0134 6.45207H89.4232L89.5811 7.33704C90.444 6.5733 91.4041 6.19749 92.4614 6.19749C93.5673 6.19749 94.4302 6.59754 95.0621 7.39765C95.6941 8.19776 96.0101 9.2767 96.0101 10.6466C96.0101 12.0407 95.6698 13.156 95.0014 13.9925C94.333 14.829 93.4458 15.2533 92.3277 15.2533C91.3069 15.2533 90.4319 14.9139 89.6905 14.2471V18.5628H88.0134V6.45207ZM91.9753 7.55525C91.1732 7.55525 90.4076 7.80983 89.6905 8.33112V13.0712C90.4319 13.6167 91.1732 13.8834 91.9388 13.8834C93.5066 13.8834 94.2844 12.8287 94.2844 10.7315C94.2844 9.65251 94.0899 8.86453 93.7132 8.34324C93.3486 7.82196 92.7652 7.55525 91.9753 7.55525Z" fill="#222225"/>
+<path d="M100.628 14.9381C100.251 15.0715 99.8504 15.1442 99.4008 15.1442C98.8053 15.1442 98.3435 14.9745 98.0275 14.6229C97.7115 14.2835 97.5535 13.7864 97.5535 13.1439V2.5H99.2428V13.0348C99.2428 13.2894 99.2914 13.4834 99.4008 13.6046C99.5101 13.7258 99.6924 13.7864 99.9355 13.7864C100.166 13.7864 100.397 13.7743 100.628 13.7379V14.9381Z" fill="#222225"/>
+<path d="M107.142 15.0593L107.009 14.1744C106.595 14.5259 106.146 14.7926 105.66 14.9866C105.161 15.1806 104.675 15.2775 104.189 15.2775C103.387 15.2775 102.743 15.0472 102.257 14.5865C101.771 14.1259 101.528 13.5197 101.528 12.7439C101.528 11.9195 101.819 11.2527 102.415 10.7678C103.01 10.2708 103.8 10.0283 104.797 10.0283C105.453 10.0283 106.17 10.1253 106.936 10.3193V9.20397C106.936 8.59782 106.802 8.1614 106.522 7.91894C106.243 7.66436 105.769 7.54313 105.101 7.54313C104.14 7.54313 103.144 7.71285 102.111 8.06441V6.87637C102.524 6.65816 103.022 6.50056 103.606 6.37933C104.201 6.2581 104.797 6.19749 105.392 6.19749C106.474 6.19749 107.264 6.4157 107.774 6.86425C108.285 7.31279 108.54 7.99168 108.54 8.91302V15.0593H107.142ZM104.59 14.0046C105.356 14.0046 106.146 13.7137 106.936 13.1439V11.4103C106.34 11.2649 105.745 11.1921 105.137 11.1921C103.861 11.1921 103.217 11.6892 103.217 12.6711C103.217 13.0954 103.338 13.4349 103.569 13.6652C103.812 13.8834 104.153 14.0046 104.59 14.0046Z" fill="#222225"/>
+<path d="M116.488 14.732C115.832 15.0715 115.066 15.2412 114.203 15.2412C112.866 15.2412 111.845 14.8532 111.128 14.0895C110.424 13.3258 110.059 12.2226 110.059 10.7678C110.059 9.32519 110.424 8.22201 111.153 7.43402C111.882 6.64603 112.915 6.2581 114.252 6.2581C115.017 6.2581 115.722 6.4157 116.391 6.73089V7.93106C115.747 7.72497 115.115 7.62799 114.483 7.62799C113.535 7.62799 112.842 7.87045 112.429 8.35536C112.003 8.84028 111.797 9.60402 111.797 10.6587V10.8769C111.797 11.9074 112.016 12.659 112.429 13.1439C112.854 13.6288 113.523 13.8713 114.446 13.8713C115.054 13.8713 115.722 13.7622 116.451 13.5318V14.732H116.488Z" fill="#222225"/>
+<path d="M118.882 11.1194C118.906 12.0892 119.149 12.8166 119.611 13.2773C120.073 13.7379 120.778 13.9683 121.75 13.9683C122.649 13.9683 123.561 13.7985 124.484 13.447V14.6472C123.67 15.0836 122.674 15.3139 121.495 15.3139C120.097 15.3139 119.04 14.926 118.335 14.1622C117.618 13.3985 117.266 12.2589 117.266 10.7557C117.266 9.31307 117.618 8.19776 118.335 7.40978C119.052 6.62179 120.049 6.20961 121.325 6.20961C122.406 6.20961 123.233 6.51268 123.804 7.11883C124.387 7.72497 124.667 8.5857 124.667 9.68888C124.667 10.2223 124.618 10.7072 124.533 11.1315H118.882V11.1194ZM121.228 7.47039C120.511 7.47039 119.951 7.6886 119.563 8.10078C119.162 8.52508 118.943 9.15547 118.882 9.99195H123.123C123.136 9.90709 123.136 9.7495 123.136 9.55553C123.136 8.86452 122.978 8.34324 122.649 7.99168C122.321 7.65223 121.847 7.47039 121.228 7.47039Z" fill="#222225"/>
+<path d="M26.9203 15.3139C26.3735 15.3139 25.8387 15.2533 25.3161 15.1321C24.7936 15.0108 24.3925 14.8775 24.113 14.7199C23.9429 14.6229 23.8335 14.5259 23.797 14.4289C23.7484 14.332 23.7363 14.235 23.7363 14.138V13.6167C23.7363 13.3985 23.8092 13.2894 23.9672 13.2894C24.0279 13.2894 24.0887 13.3015 24.1616 13.3258C24.2224 13.35 24.3196 13.3864 24.429 13.4349C24.7814 13.5925 25.1582 13.7137 25.5714 13.7985C25.9846 13.8834 26.3978 13.9198 26.811 13.9198C27.4672 13.9198 27.9655 13.8107 28.3301 13.5803C28.6825 13.35 28.8648 13.0227 28.8648 12.5984C28.8648 12.3074 28.7676 12.065 28.5853 11.871C28.403 11.677 28.0506 11.4952 27.5401 11.3255L26.0332 10.8527C25.2675 10.6102 24.7206 10.2587 24.3682 9.79799C24.0279 9.33732 23.8456 8.84028 23.8456 8.29475C23.8456 7.85832 23.9429 7.47039 24.1251 7.14307C24.3074 6.81575 24.5627 6.5248 24.8665 6.29447C25.1703 6.06413 25.5349 5.88229 25.9481 5.76106C26.3613 5.63983 26.7988 5.57922 27.2606 5.57922C27.4915 5.57922 27.7224 5.59134 27.9655 5.62771C28.1964 5.66408 28.4273 5.70045 28.6339 5.74894C28.8405 5.79743 29.0471 5.84592 29.2294 5.90654C29.4117 5.96715 29.5575 6.02777 29.6669 6.08838C29.8128 6.17324 29.91 6.2581 29.9707 6.34296C30.0315 6.42782 30.0558 6.53693 30.0558 6.6824V7.16732C30.0558 7.38553 29.9829 7.49464 29.8249 7.49464C29.7398 7.49464 29.6061 7.45827 29.4239 7.37341C28.8284 7.1067 28.1599 6.97335 27.4308 6.97335C26.8353 6.97335 26.3735 7.07033 26.0453 7.2643C25.7172 7.45827 25.5592 7.76134 25.5592 8.18564C25.5592 8.47659 25.6564 8.71905 25.863 8.92514C26.0696 9.11911 26.4464 9.31307 27.0054 9.49492L28.4759 9.96771C29.2294 10.2102 29.7641 10.5375 30.0801 10.9618C30.3961 11.3861 30.5662 11.871 30.5662 12.4165C30.5662 12.8651 30.4812 13.2651 30.2989 13.6167C30.1166 13.9683 29.8614 14.2835 29.5454 14.538C29.2294 14.7926 28.8405 14.9866 28.3908 15.1199C27.9412 15.2412 27.4551 15.3139 26.9203 15.3139ZM13.5885 15.0351C13.4062 15.0351 13.2725 14.9987 13.1875 14.9381C13.1024 14.8775 13.0295 14.732 12.9687 14.5259L10.5381 6.51268C10.4774 6.30659 10.4531 6.17324 10.4531 6.1005C10.4531 5.93078 10.5381 5.84592 10.7083 5.84592H11.7291C11.9236 5.84592 12.0573 5.88229 12.1423 5.9429C12.2152 6.00352 12.2882 6.14899 12.3489 6.35508L14.0989 13.2045L15.691 6.35508C15.7396 6.14899 15.8004 6.01564 15.8854 5.9429C15.9705 5.88229 16.1042 5.84592 16.2986 5.84592H17.1372C17.3316 5.84592 17.4653 5.88229 17.5504 5.9429C17.6355 6.00352 17.6962 6.14899 17.7448 6.35508L19.3855 13.3015L21.1841 6.35508C21.2449 6.14899 21.3178 6.01564 21.3907 5.9429C21.4636 5.88229 21.6095 5.84592 21.8039 5.84592H22.764C22.9341 5.84592 23.0192 5.93078 23.0192 6.1005C23.0192 6.14899 23.007 6.19749 23.007 6.2581C22.9948 6.31871 22.9706 6.40357 22.9341 6.51268L20.4306 14.5259C20.3698 14.732 20.2969 14.8654 20.2118 14.9381C20.1268 14.9987 19.9931 15.0351 19.8108 15.0351H18.9236C18.7292 15.0351 18.5955 14.9987 18.5104 14.926C18.4254 14.8532 18.3646 14.7199 18.316 14.5138L16.6996 7.8462L15.0954 14.5138C15.0468 14.7199 14.986 14.8532 14.901 14.926C14.8159 14.9987 14.6822 15.0351 14.4878 15.0351H13.5885ZM5.23942 13.9077C5.57971 13.9077 5.93214 13.847 6.30889 13.7137C6.68563 13.5925 7.01376 13.3621 7.29328 13.0469C7.46342 12.853 7.58495 12.6347 7.64572 12.3802C7.70648 12.1377 7.74294 11.8346 7.74294 11.4831V11.0466C7.43911 10.9739 7.12314 10.9133 6.78285 10.8769C6.45472 10.8406 6.12659 10.8163 5.81061 10.8163C5.11789 10.8163 4.60747 10.9497 4.26718 11.2285C3.9269 11.5073 3.75676 11.9074 3.75676 12.4287C3.75676 12.9136 3.87829 13.2773 4.1335 13.5197C4.41302 13.7864 4.76546 13.9077 5.23942 13.9077ZM9.45651 12.3317C9.45651 12.7196 9.49297 13.0227 9.57804 13.253C9.65096 13.4834 9.77249 13.7258 9.91832 13.9925C9.96694 14.0774 9.99124 14.1501 9.99124 14.2228C9.99124 14.332 9.93048 14.4289 9.79679 14.5259L9.12838 14.9866C9.03116 15.0472 8.94608 15.0715 8.86101 15.0715C8.75164 15.0715 8.65441 15.023 8.55719 14.926C8.41135 14.7805 8.28982 14.6229 8.18045 14.4411C8.08322 14.2713 7.97385 14.0653 7.86447 13.8349C7.05022 14.7926 6.02937 15.2654 4.81407 15.2654C3.93905 15.2654 3.24633 15.023 2.74806 14.5259C2.23763 14.0289 1.98242 13.3621 1.98242 12.5378C1.98242 11.6528 2.2984 10.9497 2.93036 10.4041C3.56231 9.87073 4.41302 9.5919 5.47033 9.5919C5.82277 9.5919 6.18736 9.61614 6.5641 9.67676C6.94084 9.72525 7.34189 9.81011 7.75509 9.90709V9.14335C7.75509 8.35536 7.5971 7.80983 7.26897 7.48251C6.94084 7.16732 6.3818 6.9976 5.57971 6.9976C5.21512 6.9976 4.83838 7.04609 4.46163 7.13095C4.08489 7.21581 3.70815 7.33704 3.34356 7.48251C3.17342 7.55525 3.05189 7.60374 2.97897 7.61587C2.90605 7.62799 2.85744 7.64011 2.82098 7.64011C2.67514 7.64011 2.60222 7.531 2.60222 7.31279V6.80363C2.60222 6.63391 2.62653 6.51268 2.67514 6.43994C2.72375 6.36721 2.82098 6.29447 2.96681 6.22173C3.3314 6.03989 3.76891 5.88229 4.27934 5.74894C4.78976 5.61559 5.32449 5.55497 5.89568 5.55497C7.13529 5.55497 8.03461 5.8338 8.61796 6.40357C9.18915 6.96123 9.48082 7.80983 9.48082 8.94938V12.3317H9.45651Z" fill="#222225"/>
+<path d="M28.889 20.3449C25.474 22.8665 20.5156 24.2 16.2499 24.2C10.2707 24.2 4.88689 21.9936 0.803479 18.3204C0.487501 18.0294 0.76702 17.6415 1.15592 17.8597C5.5553 20.4177 10.9877 21.9451 16.6145 21.9451C20.4062 21.9451 24.5747 21.1572 28.4029 19.5448C28.9741 19.3023 29.4481 19.9327 28.889 20.3449Z" fill="#FF9900"/>
+<path d="M30.3109 18.7205C29.8734 18.1628 27.4185 18.4537 26.3126 18.5871C25.9845 18.6235 25.9237 18.3325 26.2275 18.1264C28.1842 16.7565 31.3925 17.1566 31.7693 17.6051C32.146 18.0658 31.6721 21.2784 29.837 22.8059C29.5574 23.0362 29.2901 22.915 29.4116 22.5998C29.8248 21.5815 30.7484 19.2902 30.3109 18.7205Z" fill="#FF9900"/>
+</g>
+<defs>
+<clipPath id="clip0_4_12262">
+<rect width="124.5" height="24" fill="white" transform="translate(0.666748 0.5)"/>
+</clipPath>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/dataset-card/external-knowledge-base.svg

@@ -0,0 +1,29 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#828DAD"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78238)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g filter="url(#filter0_d_5617_78238)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.5C7.067 5.5 5.5 7.067 5.5 9C5.5 10.933 7.067 12.5 9 12.5C10.2949 12.5 11.4261 11.7971 12.032 10.7496C12.1703 10.5106 12.4762 10.4289 12.7152 10.5672C12.9542 10.7055 13.0359 11.0113 12.8977 11.2504C12.1204 12.5941 10.6662 13.5 9 13.5C6.68372 13.5 4.77619 11.75 4.52746 9.5H4C3.72386 9.5 3.5 9.27614 3.5 9C3.5 8.72386 3.72386 8.5 4 8.5H4.52746C4.77619 6.25002 6.68372 4.5 9 4.5C10.6662 4.5 12.1204 5.40588 12.8977 6.74964C13.0359 6.98867 12.9542 7.29454 12.7152 7.43281C12.4762 7.57107 12.1703 7.48939 12.032 7.25036C11.4261 6.20291 10.2949 5.5 9 5.5ZM9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82841 8.17158 10.5 9 10.5C9.82841 10.5 10.5 9.82841 10.5 9C10.5 8.17158 9.82841 7.5 9 7.5ZM6.5 9C6.5 7.61929 7.61929 6.5 9 6.5C10.2095 6.5 11.2184 7.35888 11.45 8.5H14C14.2761 8.5 14.5 8.72386 14.5 9C14.5 9.27614 14.2761 9.5 14 9.5H11.45C11.2183 10.6411 10.2095 11.5 9 11.5C7.61928 11.5 6.5 10.3807 6.5 9Z" fill="url(#paint1_linear_5617_78238)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_5617_78238" x="3" y="4.25" width="12" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78238"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78238" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78238" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78238" x1="9" y1="4.5" x2="9" y2="13.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/dataset-card/general.svg

@@ -0,0 +1,54 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#444CE7"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78288)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g filter="url(#filter0_d_5617_78288)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 5.5C11.25 5.08579 11.5858 4.75 12 4.75H13.5C13.9142 4.75 14.25 5.08579 14.25 5.5C14.25 5.91421 13.9142 6.25 13.5 6.25H12C11.5858 6.25 11.25 5.91421 11.25 5.5Z" fill="url(#paint1_linear_5617_78288)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 5.5C3.75 5.08579 4.08579 4.75 4.5 4.75H9.5C9.91421 4.75 10.25 5.08579 10.25 5.5C10.25 5.91421 9.91421 6.25 9.5 6.25H4.5C4.08579 6.25 3.75 5.91421 3.75 5.5Z" fill="url(#paint2_linear_5617_78288)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 9C3.75 8.58579 4.08579 8.25 4.5 8.25H6C6.41421 8.25 6.75 8.58579 6.75 9C6.75 9.41421 6.41421 9.75 6 9.75H4.5C4.08579 9.75 3.75 9.41421 3.75 9Z" fill="url(#paint3_linear_5617_78288)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.75 9C7.75 8.58579 8.08579 8.25 8.5 8.25H13.5C13.9142 8.25 14.25 8.58579 14.25 9C14.25 9.41421 13.9142 9.75 13.5 9.75H8.5C8.08579 9.75 7.75 9.41421 7.75 9Z" fill="url(#paint4_linear_5617_78288)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.25 12.5C11.25 12.0858 11.5858 11.75 12 11.75H13.5C13.9142 11.75 14.25 12.0858 14.25 12.5C14.25 12.9142 13.9142 13.25 13.5 13.25H12C11.5858 13.25 11.25 12.9142 11.25 12.5Z" fill="url(#paint5_linear_5617_78288)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 12.5C3.75 12.0858 4.08579 11.75 4.5 11.75H9.5C9.91421 11.75 10.25 12.0858 10.25 12.5C10.25 12.9142 9.91421 13.25 9.5 13.25H4.5C4.08579 13.25 3.75 12.9142 3.75 12.5Z" fill="url(#paint6_linear_5617_78288)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_5617_78288" x="3.25" y="4.5" width="11.5" height="9.5" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78288"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78288" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78288" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint4_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint5_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint6_linear_5617_78288" x1="9" y1="4.75" x2="9" y2="13.25" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/dataset-card/graph.svg

@@ -0,0 +1,124 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#7839EE"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78246)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g clip-path="url(#clip0_5617_78246)">
+<g filter="url(#filter0_d_5617_78246)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00004 5.31818C9.27619 5.31818 9.50004 5.54204 9.50004 5.81818V8.09091C9.50004 8.36705 9.27619 8.59091 9.00004 8.59091C8.7239 8.59091 8.50004 8.36705 8.50004 8.09091V5.81818C8.50004 5.54204 8.7239 5.31818 9.00004 5.31818Z" fill="url(#paint1_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00004 9.40909C9.27619 9.40909 9.50004 9.63295 9.50004 9.90909V12.1818C9.50004 12.458 9.27619 12.6818 9.00004 12.6818C8.7239 12.6818 8.50004 12.458 8.50004 12.1818V9.90909C8.50004 9.63295 8.7239 9.40909 9.00004 9.40909Z" fill="url(#paint2_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64355 5.1094C8.77894 5.35007 8.6936 5.65493 8.45293 5.79033L6.40065 6.94487C6.15998 7.08027 5.85512 6.99492 5.71973 6.75425C5.58433 6.51358 5.66968 6.20872 5.91035 6.07332L7.96262 4.91878C8.20329 4.78338 8.50815 4.86873 8.64355 5.1094Z" fill="url(#paint3_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.35653 5.1094C9.49193 4.86873 9.79679 4.78338 10.0375 4.91878L12.0897 6.07332C12.3304 6.20872 12.4158 6.51358 12.2804 6.75425C12.145 6.99492 11.8401 7.08027 11.5994 6.94487L9.54715 5.79033C9.30648 5.65493 9.22114 5.35007 9.35653 5.1094Z" fill="url(#paint4_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.71973 11.2458C5.85512 11.0051 6.15998 10.9197 6.40065 11.0551L8.45293 12.2097C8.6936 12.3451 8.77894 12.6499 8.64355 12.8906C8.50815 13.1313 8.20329 13.2166 7.96262 13.0812L5.91035 11.9267C5.66968 11.7913 5.58433 11.4864 5.71973 11.2458Z" fill="url(#paint5_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2804 11.2458C12.4158 11.4864 12.3304 11.7913 12.0897 11.9267L10.0375 13.0812C9.79679 13.2166 9.49193 13.1313 9.35653 12.8906C9.22114 12.6499 9.30648 12.3451 9.54715 12.2097L11.5994 11.0551C11.8401 10.9197 12.145 11.0051 12.2804 11.2458Z" fill="url(#paint6_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.36368 7.36364C5.63982 7.36364 5.86368 7.58749 5.86368 7.86364V10.1364C5.86368 10.4125 5.63982 10.6364 5.36368 10.6364C5.08754 10.6364 4.86368 10.4125 4.86368 10.1364V7.86364C4.86368 7.58749 5.08754 7.36364 5.36368 7.36364Z" fill="url(#paint7_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6364 7.36364C12.9126 7.36364 13.1364 7.58749 13.1364 7.86364V10.1364C13.1364 10.4125 12.9126 10.6364 12.6364 10.6364C12.3603 10.6364 12.1364 10.4125 12.1364 10.1364V7.86364C12.1364 7.58749 12.3603 7.36364 12.6364 7.36364Z" fill="url(#paint8_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.71928 7.1544C5.85467 6.91373 6.15953 6.82838 6.4002 6.96377L8.45338 8.11877C8.69406 8.25416 8.77941 8.55902 8.64402 8.79969C8.50863 9.04037 8.20377 9.12572 7.96309 8.99033L5.90991 7.83533C5.66924 7.69994 5.58389 7.39508 5.71928 7.1544Z" fill="url(#paint9_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.2799 7.15488C12.4153 7.39557 12.3299 7.70042 12.0892 7.8358L10.0374 8.98989C9.79675 9.12527 9.49189 9.0399 9.35652 8.79922C9.22114 8.55854 9.30651 8.25368 9.54719 8.1183L11.599 6.96421C11.8397 6.82884 12.1445 6.9142 12.2799 7.15488Z" fill="url(#paint10_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.64402 9.20031C8.77941 9.44099 8.69406 9.74585 8.45338 9.88124L6.4002 11.0362C6.15953 11.1716 5.85467 11.0863 5.71928 10.8456C5.58389 10.6049 5.66924 10.3001 5.90991 10.1647L7.96309 9.00968C8.20377 8.87429 8.50863 8.95964 8.64402 9.20031Z" fill="url(#paint11_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.35652 9.20078C9.49189 8.9601 9.79675 8.87473 10.0374 9.01011L12.0892 10.1642C12.3299 10.2996 12.4153 10.6044 12.2799 10.8451C12.1445 11.0858 11.8397 11.1712 11.599 11.0358L9.54719 9.8817C9.30651 9.74632 9.22114 9.44146 9.35652 9.20078Z" fill="url(#paint12_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.36368 10.6364C5.13775 10.6364 4.95459 10.8195 4.95459 11.0455C4.95459 11.2714 5.13775 11.4545 5.36368 11.4545C5.58962 11.4545 5.77277 11.2714 5.77277 11.0455C5.77277 10.8195 5.58962 10.6364 5.36368 10.6364ZM3.95459 11.0455C3.95459 10.2672 4.58546 9.63636 5.36368 9.63636C6.1419 9.63636 6.77277 10.2672 6.77277 11.0455C6.77277 11.8237 6.1419 12.4545 5.36368 12.4545C4.58546 12.4545 3.95459 11.8237 3.95459 11.0455Z" fill="url(#paint13_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.36368 6.54545C5.13775 6.54545 4.95459 6.72861 4.95459 6.95455C4.95459 7.18048 5.13775 7.36364 5.36368 7.36364C5.58962 7.36364 5.77277 7.18048 5.77277 6.95455C5.77277 6.72861 5.58962 6.54545 5.36368 6.54545ZM3.95459 6.95455C3.95459 6.17633 4.58546 5.54545 5.36368 5.54545C6.1419 5.54545 6.77277 6.17633 6.77277 6.95455C6.77277 7.73276 6.1419 8.36364 5.36368 8.36364C4.58546 8.36364 3.95459 7.73276 3.95459 6.95455Z" fill="url(#paint14_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6364 10.6364C12.4105 10.6364 12.2273 10.8195 12.2273 11.0455C12.2273 11.2714 12.4105 11.4545 12.6364 11.4545C12.8623 11.4545 13.0455 11.2714 13.0455 11.0455C13.0455 10.8195 12.8623 10.6364 12.6364 10.6364ZM11.2273 11.0455C11.2273 10.2672 11.8582 9.63636 12.6364 9.63636C13.4146 9.63636 14.0455 10.2672 14.0455 11.0455C14.0455 11.8237 13.4146 12.4545 12.6364 12.4545C11.8582 12.4545 11.2273 11.8237 11.2273 11.0455Z" fill="url(#paint15_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6364 6.54545C12.4105 6.54545 12.2273 6.72861 12.2273 6.95455C12.2273 7.18048 12.4105 7.36364 12.6364 7.36364C12.8623 7.36364 13.0455 7.18048 13.0455 6.95455C13.0455 6.72861 12.8623 6.54545 12.6364 6.54545ZM11.2273 6.95455C11.2273 6.17633 11.8582 5.54545 12.6364 5.54545C13.4146 5.54545 14.0455 6.17633 14.0455 6.95455C14.0455 7.73276 13.4146 8.36364 12.6364 8.36364C11.8582 8.36364 11.2273 7.73276 11.2273 6.95455Z" fill="url(#paint16_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00004 8.59091C8.77411 8.59091 8.59095 8.77407 8.59095 9C8.59095 9.22593 8.77411 9.40909 9.00004 9.40909C9.22598 9.40909 9.40914 9.22593 9.40914 9C9.40914 8.77407 9.22598 8.59091 9.00004 8.59091ZM7.59095 9C7.59095 8.22178 8.22182 7.59091 9.00004 7.59091C9.77826 7.59091 10.4091 8.22178 10.4091 9C10.4091 9.77822 9.77826 10.4091 9.00004 10.4091C8.22182 10.4091 7.59095 9.77822 7.59095 9Z" fill="url(#paint17_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00004 4.5C8.77411 4.5 8.59095 4.68316 8.59095 4.90909C8.59095 5.13503 8.77411 5.31818 9.00004 5.31818C9.22598 5.31818 9.40914 5.13503 9.40914 4.90909C9.40914 4.68316 9.22598 4.5 9.00004 4.5ZM7.59095 4.90909C7.59095 4.13087 8.22182 3.5 9.00004 3.5C9.77826 3.5 10.4091 4.13087 10.4091 4.90909C10.4091 5.68731 9.77826 6.31818 9.00004 6.31818C8.22182 6.31818 7.59095 5.68731 7.59095 4.90909Z" fill="url(#paint18_linear_5617_78246)" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.00004 12.6818C8.77411 12.6818 8.59095 12.865 8.59095 13.0909C8.59095 13.3168 8.77411 13.5 9.00004 13.5C9.22598 13.5 9.40914 13.3168 9.40914 13.0909C9.40914 12.865 9.22598 12.6818 9.00004 12.6818ZM7.59095 13.0909C7.59095 12.3127 8.22182 11.6818 9.00004 11.6818C9.77826 11.6818 10.4091 12.3127 10.4091 13.0909C10.4091 13.8691 9.77826 14.5 9.00004 14.5C8.22182 14.5 7.59095 13.8691 7.59095 13.0909Z" fill="url(#paint19_linear_5617_78246)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_5617_78246" x="3.45459" y="3.25" width="11.0908" height="12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78246"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78246" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78246" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint4_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint5_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint6_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint7_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint8_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint9_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint10_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint11_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint12_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint13_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint14_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint15_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint16_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint17_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint18_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint19_linear_5617_78246" x1="9.00004" y1="3.5" x2="9.00004" y2="14.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<clipPath id="clip0_5617_78246">
+<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/dataset-card/parent-child.svg

@@ -0,0 +1,44 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#0BA5EC"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78274)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g clip-path="url(#clip0_5617_78274)">
+<g filter="url(#filter0_d_5617_78274)">
+<path d="M6.70834 6.87516C7.51375 6.87516 8.16667 6.22224 8.16667 5.41683C8.16667 4.61141 7.51375 3.9585 6.70834 3.9585C5.90292 3.9585 5.25001 4.61141 5.25001 5.41683C5.25001 6.22224 5.90292 6.87516 6.70834 6.87516Z" fill="url(#paint1_linear_5617_78274)" shape-rendering="crispEdges"/>
+<path d="M11.2917 6.87516C12.0971 6.87516 12.75 6.22224 12.75 5.41683C12.75 4.61141 12.0971 3.9585 11.2917 3.9585C10.4863 3.9585 9.83334 4.61141 9.83334 5.41683C9.83334 6.22224 10.4863 6.87516 11.2917 6.87516Z" fill="url(#paint2_linear_5617_78274)" shape-rendering="crispEdges"/>
+<path d="M11.2917 7.70849C10.8377 7.709 10.3912 7.82377 9.99324 8.04222C9.59529 8.26067 9.25874 8.57578 9.01459 8.95849C9.34482 8.96235 9.66011 9.09673 9.89159 9.33229C10.1231 9.56785 10.2519 9.88545 10.25 10.2157C10.2481 10.5459 10.1155 10.862 9.8813 11.0949C9.6471 11.3277 9.33026 11.4584 9 11.4584C8.66975 11.4584 8.35291 11.3277 8.1187 11.0949C7.8845 10.862 7.75195 10.5459 7.75003 10.2157C7.7481 9.88545 7.87695 9.56785 8.10842 9.33229C8.3399 9.09673 8.65519 8.96235 8.98542 8.95849C8.67086 8.46429 8.20432 8.08561 7.656 7.87941C7.10767 7.67321 6.50721 7.65065 5.94496 7.81512C5.3827 7.97959 4.88906 8.32219 4.53831 8.79139C4.18755 9.26059 3.99864 9.83101 4.00001 10.4168V13.1252C4.00001 13.2357 4.04391 13.3416 4.12205 13.4198C4.20019 13.4979 4.30617 13.5418 4.41667 13.5418H7.33334V12.5002L5.83334 11.3752C5.78957 11.3423 5.75269 11.3012 5.72481 11.2541C5.69693 11.207 5.6786 11.1549 5.67086 11.1008C5.65523 10.9914 5.6837 10.8802 5.75001 10.7918C5.81631 10.7034 5.91502 10.645 6.02441 10.6293C6.13381 10.6137 6.24493 10.6422 6.33334 10.7085L7.88875 11.8752H10.1113L11.6667 10.7085C11.7551 10.6422 11.8662 10.6137 11.9756 10.6293C12.085 10.645 12.1837 10.7034 12.25 10.7918C12.3163 10.8802 12.3448 10.9914 12.3291 11.1008C12.3135 11.2101 12.2551 11.3089 12.1667 11.3752L10.6667 12.5002V13.5418H13.5833C13.6938 13.5418 13.7998 13.4979 13.878 13.4198C13.9561 13.3416 14 13.2357 14 13.1252V10.4168C13.9991 9.6988 13.7135 9.01044 13.2058 8.50272C12.6981 7.995 12.0097 7.70938 11.2917 7.70849Z" fill="url(#paint3_linear_5617_78274)" shape-rendering="crispEdges"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_5617_78274" x="3.5" y="3.7085" width="11" height="10.5835" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78274"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78274" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78274" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78274" x1="9" y1="3.9585" x2="9" y2="13.5418" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint2_linear_5617_78274" x1="9" y1="3.9585" x2="9" y2="13.5418" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<linearGradient id="paint3_linear_5617_78274" x1="9" y1="3.9585" x2="9" y2="13.5418" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+<clipPath id="clip0_5617_78274">
+<rect width="12" height="12" fill="white" transform="translate(3 3)"/>
+</clipPath>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/dataset-card/qa.svg

@@ -0,0 +1,29 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#0E9384"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78260)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g filter="url(#filter0_d_5617_78260)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.001 5.5C14.001 4.94772 13.5533 4.5 13.001 4.5H7.00098C6.44869 4.5 6.00098 4.94772 6.00098 5.5V6.5H5.00098C4.44869 6.5 4.00098 6.94772 4.00098 7.5V11.5C4.00098 12.0523 4.44869 12.5 5.00098 12.5H5.50098V13.25C5.50098 13.4271 5.59473 13.5911 5.74742 13.681C5.9001 13.7708 6.08894 13.7731 6.2438 13.6871L8.38055 12.5H11.001C11.5533 12.5 12.001 12.0523 12.001 11.5V10.5H13.001C13.5533 10.5 14.001 10.0523 14.001 9.5V5.5ZM11.001 6.5H7.00098V5.5H13.001V9.5H12.001V7.5C12.001 6.94772 11.5533 6.5 11.001 6.5ZM6.5 8C6.22386 8 6 8.22386 6 8.5C6 8.77614 6.22386 9 6.5 9H9.5C9.77614 9 10 8.77614 10 8.5C10 8.22386 9.77614 8 9.5 8H6.5ZM6.5 10C6.22386 10 6 10.2239 6 10.5C6 10.7761 6.22386 11 6.5 11H8C8.27614 11 8.5 10.7761 8.5 10.5C8.5 10.2239 8.27614 10 8 10H6.5Z" fill="url(#paint1_linear_5617_78260)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_5617_78260" x="3.50098" y="4.25" width="11" height="10.25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78260"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78260" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78260" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78260" x1="9.00099" y1="4.5" x2="9.00099" y2="13.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/file.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.66667 1.34356C8.66667 1.32602 8.66667 1.31725 8.66591 1.30135C8.65018 0.972168 8.3607 0.682824 8.03151 0.667251C8.01562 0.666499 8.0104 0.666501 8.00001 0.666504H5.8391C5.30248 0.666497 4.85957 0.666491 4.49878 0.695968C4.12405 0.726585 3.77958 0.792295 3.45603 0.957155C2.95426 1.21282 2.54631 1.62077 2.29065 2.12253C2.12579 2.44609 2.06008 2.79056 2.02946 3.16529C1.99999 3.52608 1.99999 3.96899 2 4.50562V11.494C1.99999 12.0307 1.99999 12.4736 2.02946 12.8344C2.06008 13.2091 2.12579 13.5536 2.29065 13.8771C2.54631 14.3789 2.95426 14.7869 3.45603 15.0425C3.77958 15.2074 4.12405 15.2731 4.49878 15.3037C4.85958 15.3332 5.30248 15.3332 5.83912 15.3332H10.1609C10.6975 15.3332 11.1404 15.3332 11.5012 15.3037C11.8759 15.2731 12.2204 15.2074 12.544 15.0425C13.0457 14.7869 13.4537 14.3789 13.7093 13.8771C13.8742 13.5536 13.9399 13.2091 13.9705 12.8344C14 12.4736 14 12.0307 14 11.4941V6.66646C14 6.65611 14 6.65093 13.9993 6.63505C13.9837 6.30583 13.6943 6.01631 13.3651 6.0006C13.3492 5.99985 13.3405 5.99985 13.323 5.99985L10.3787 5.99985C10.2105 5.99987 10.0466 5.99989 9.90785 5.98855C9.75545 5.9761 9.57563 5.94672 9.39468 5.85452C9.1438 5.72669 8.93983 5.52272 8.81199 5.27183C8.7198 5.09088 8.69042 4.91106 8.67797 4.75867C8.66663 4.61989 8.66665 4.45603 8.66667 4.28778L8.66667 1.34356ZM5.33333 8.6665C4.96514 8.6665 4.66667 8.96498 4.66667 9.33317C4.66667 9.70136 4.96514 9.99984 5.33333 9.99984H10.6667C11.0349 9.99984 11.3333 9.70136 11.3333 9.33317C11.3333 8.96498 11.0349 8.6665 10.6667 8.6665H5.33333ZM5.33333 11.3332C4.96514 11.3332 4.66667 11.6316 4.66667 11.9998C4.66667 12.368 4.96514 12.6665 5.33333 12.6665H9.33333C9.70152 12.6665 10 12.368 10 11.9998C10 11.6316 9.70152 11.3332 9.33333 11.3332H5.33333Z" fill="#444CE7"/>
+<path d="M12.6053 4.6665C12.8011 4.6665 12.8989 4.6665 12.9791 4.61735C13.0923 4.54794 13.16 4.3844 13.129 4.25526C13.107 4.16382 13.0432 4.10006 12.9155 3.97253L10.694 1.75098C10.5664 1.62333 10.5027 1.5595 10.4112 1.53752C10.2821 1.50648 10.1186 1.57417 10.0492 1.6874C10 1.76757 10 1.86545 10 2.0612L10 4.13315C10 4.31982 10 4.41316 10.0363 4.48446C10.0683 4.54718 10.1193 4.59818 10.182 4.63014C10.2533 4.66647 10.3466 4.66647 10.5333 4.66647L12.6053 4.6665Z" fill="#444CE7"/>
+</svg>

web/app/components/base/icons/assets/public/knowledge/general-type.svg

@@ -1,5 +0,0 @@
-<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Icon L">
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M6 0.5C6.27615 0.5 6.5 0.72386 6.5 1V1.52755C6.95855 1.57831 7.3967 1.69804 7.80355 1.87619L8.067 1.41997C8.20505 1.18083 8.51085 1.09889 8.75 1.23696C8.98915 1.37503 9.07105 1.68082 8.933 1.91998L8.6692 2.37685C9.033 2.64523 9.3548 2.96707 9.6232 3.33084L10.0801 3.06703C10.3193 2.92896 10.6251 3.0109 10.7632 3.25005C10.9012 3.4892 10.8193 3.79499 10.5801 3.93306L10.1238 4.19649C10.302 4.60333 10.4218 5.0415 10.4725 5.50005H11C11.2761 5.50005 11.5 5.7239 11.5 6.00005C11.5 6.2762 11.2761 6.50005 11 6.50005H10.4725C10.4218 6.9586 10.302 7.3968 10.1238 7.80365L10.5801 8.0671C10.8193 8.20515 10.9012 8.51095 10.7632 8.7501C10.6251 8.98925 10.3193 9.0712 10.0801 8.9331L9.6232 8.6693C9.3548 9.03305 9.03295 9.3549 8.6692 9.62325L8.933 10.0802C9.07105 10.3193 8.98915 10.6251 8.75 10.7632C8.51085 10.9012 8.20505 10.8193 8.067 10.5802L7.80355 10.1239C7.3967 10.3021 6.95855 10.4218 6.5 10.4726V11C6.5 11.2761 6.27615 11.5 6 11.5C5.72385 11.5 5.5 11.2761 5.5 11V10.4726C5.04145 10.4218 4.60328 10.3021 4.19644 10.1239L3.933 10.5802C3.79493 10.8194 3.48914 10.9013 3.24999 10.7633C3.01084 10.6252 2.92891 10.3194 3.06698 10.0802L3.3308 9.62325C2.96702 9.3549 2.64517 9.03305 2.37678 8.66925L1.91986 8.93305C1.68071 9.07115 1.37492 8.9892 1.23685 8.75005C1.09878 8.5109 1.18072 8.2051 1.41986 8.06705L1.87612 7.8036C1.69797 7.39675 1.57824 6.9586 1.52749 6.50005L0.999975 6.5C0.723835 6.5 0.499987 6.2761 0.5 6C0.500015 5.72385 0.72388 5.5 1.00003 5.5L1.5275 5.50005C1.57825 5.0415 1.69796 4.60335 1.87611 4.19652L1.41987 3.93312C1.18072 3.79504 1.09878 3.48925 1.23685 3.2501C1.37492 3.01095 1.68071 2.92901 1.91985 3.06709L2.37675 3.33086C2.64514 2.96708 2.967 2.64524 3.33078 2.37684L3.06698 1.91992C2.92891 1.68077 3.01084 1.37498 3.24999 1.23691C3.48914 1.09884 3.79493 1.18077 3.933 1.41992L4.19642 1.87619C4.60327 1.69803 5.04145 1.57831 5.5 1.52755V1C5.5 0.72386 5.72385 0.5 6 0.5ZM3.83484 3.24991C3.48643 3.52463 3.19141 3.86415 2.96808 4.25014C2.67048 4.7645 2.49999 5.3616 2.49999 6.00005C2.49999 6.6385 2.67048 7.2356 2.96809 7.75C3.19142 8.13595 3.48645 8.4755 3.83486 8.7502L4.8599 6.97475C4.63581 6.71285 4.49999 6.37245 4.49999 6.00005C4.49999 5.62765 4.63581 5.28725 4.8599 5.02535L3.83484 3.24991ZM5.7258 4.52514L4.70041 2.74911C5.10185 2.58847 5.5402 2.50005 6 2.50005C6.63845 2.50005 7.23555 2.67054 7.74995 2.96816C8.28125 3.27557 8.7245 3.71882 9.0319 4.25012C9.2503 4.62764 9.4003 5.04975 9.4646 5.50005H7.41465C7.2087 4.91745 6.6531 4.50005 6 4.50005C5.9065 4.50005 5.8148 4.50865 5.7258 4.52514ZM7.41465 6.50005C7.2087 7.08265 6.6531 7.50005 6 7.50005C5.9065 7.50005 5.8148 7.49145 5.7258 7.47495L4.70043 9.251C5.10185 9.41165 5.5402 9.50005 6 9.50005C6.63845 9.50005 7.23555 9.32955 7.7499 9.03195C8.2812 8.72455 8.72445 8.2813 9.03185 7.75C9.2503 7.3725 9.4003 6.95035 9.4646 6.50005H7.41465Z" fill="#676F83"/>
-</g>
-</svg>

web/app/components/base/icons/assets/public/knowledge/layout-right-2-line-mod.svg

@@ -1,5 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Icon L">
-<path id="Vector" d="M14.0002 2C14.3684 2 14.6668 2.29848 14.6668 2.66667V13.3333C14.6668 13.7015 14.3684 14 14.0002 14H2.00016C1.63198 14 1.3335 13.7015 1.3335 13.3333V2.66667C1.3335 2.29848 1.63198 2 2.00016 2H14.0002ZM13.3335 3.33333H2.66683V12.6667H13.3335V3.33333ZM14.0002 2.66667V13.3333H10.0002V2.66667H14.0002Z" fill="#354052"/>
-</g>
-</svg>

web/app/components/base/icons/assets/public/knowledge/online-drive/buckets-blue.svg

@@ -0,0 +1,61 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dg_9100_35711)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.93353 4.92661C2.89594 4.7923 2.875 4.65006 2.875 4.49999C2.875 3.87927 3.23334 3.39224 3.64546 3.04834C4.06181 2.70093 4.61943 2.4217 5.24258 2.20177C6.49565 1.75951 8.1777 1.5 10 1.5C11.8223 1.5 13.5044 1.75951 14.7574 2.20177C15.3806 2.4217 15.9382 2.70093 16.3545 3.04834C16.7667 3.39224 17.125 3.87927 17.125 4.49999C17.125 4.65011 17.104 4.79242 17.0664 4.92676L15.5233 14.6092C15.4517 15.1277 15.1621 15.5477 14.8098 15.867C14.456 16.1877 14.0028 16.4419 13.5123 16.6392C12.5299 17.0342 11.2752 17.2499 10 17.2499C8.72762 17.2499 7.48138 17.0419 6.50197 16.6499C5.58181 16.2816 4.63932 15.6399 4.47799 14.6173L4.47785 14.6165L2.93353 4.92661ZM15.3935 4.79995C15.1646 4.99091 14.7887 5.19651 14.2582 5.38375C13.2039 5.75583 11.6985 6 10 6C8.30148 6 6.79603 5.75583 5.7418 5.38375C5.2113 5.19651 4.83532 4.99091 4.60649 4.79995C4.35379 4.58909 4.34365 4.41936 4.60649 4.20004C4.83532 4.00908 5.2113 3.80347 5.7418 3.61624C6.79603 3.24416 8.30148 2.99998 10 2.99998C11.6985 2.99998 13.2039 3.24416 14.2582 3.61624C14.7887 3.80347 15.1646 4.00908 15.3935 4.20004C15.6535 4.41698 15.6591 4.57832 15.3935 4.79995Z" fill="url(#paint0_linear_9100_35711)"/>
+<path d="M10 1.75C11.8015 1.75 13.454 2.00701 14.6738 2.4375C15.2815 2.65197 15.8093 2.91891 16.1943 3.24023C16.5772 3.55975 16.875 3.98319 16.875 4.5C16.875 4.6265 16.8569 4.74611 16.8252 4.85938L16.8223 4.87305L16.8193 4.8877L15.2764 14.5693L15.2754 14.5752C15.2141 15.0182 14.9653 15.3882 14.6416 15.6816C14.3164 15.9764 13.8919 16.2171 13.4189 16.4072C12.4721 16.788 11.2501 17 10 17C8.75169 17 7.53815 16.7956 6.59473 16.418C5.68992 16.0559 4.86386 15.4608 4.72461 14.5781V14.5762L3.18066 4.8877L3.17773 4.87305L3.17383 4.85938L3.1377 4.68457C3.12934 4.62474 3.125 4.56323 3.125 4.5C3.125 3.98318 3.42277 3.55974 3.80566 3.24023C4.19077 2.91891 4.71851 2.65197 5.32617 2.4375C6.54607 2.00701 8.1985 1.75 10 1.75ZM10 2.75C8.28084 2.75 6.74557 2.99708 5.6582 3.38086C5.11261 3.57347 4.70632 3.79086 4.44629 4.00781C4.30195 4.12826 4.16025 4.29177 4.16309 4.50684C4.16605 4.71916 4.30918 4.87778 4.44629 4.99219C4.70632 5.20914 5.11262 5.42654 5.6582 5.61914C6.74557 6.00292 8.28084 6.25 10 6.25C11.7192 6.25 13.2544 6.00292 14.3418 5.61914C14.8874 5.42653 15.2937 5.20915 15.5537 4.99219C15.6953 4.87406 15.8424 4.71212 15.8408 4.49609C15.8391 4.2817 15.6913 4.12258 15.5537 4.00781C15.2937 3.79085 14.8874 3.57347 14.3418 3.38086C13.2544 2.99708 11.7192 2.75 10 2.75Z" stroke="white" stroke-opacity="0.01" stroke-width="0.5"/>
+</g>
+<path opacity="0.8" d="M10 9.375C9.28547 9.375 8.67149 9.8031 8.39956 10.4162C7.7401 10.5741 7.25 11.1672 7.25 11.875C7.25 12.7034 7.92157 13.375 8.75 13.375H11.5C12.1904 13.375 12.75 12.8154 12.75 12.125C12.75 11.5151 12.3132 11.0072 11.7353 10.8971C11.6236 10.0383 10.8893 9.375 10 9.375Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.93353 4.92665C2.89594 4.79234 2.875 4.6501 2.875 4.50003C2.875 4.36905 2.89096 4.24402 2.92001 4.12503C2.92424 4.14236 2.92875 4.15957 2.93353 4.17665L4.47799 13.8674C4.63931 14.8899 5.58181 15.5316 6.50197 15.8999C7.48138 16.2919 8.72762 16.5 10 16.5C11.2752 16.5 12.5299 16.2843 13.5123 15.8892C14.0028 15.692 14.456 15.4377 14.8098 15.117C15.1621 14.7977 15.4517 14.3777 15.5233 13.8592L17.0664 4.1768C17.0712 4.15967 17.0757 4.1424 17.08 4.125C17.109 4.244 17.125 4.36904 17.125 4.50003C17.125 4.65015 17.104 4.79246 17.0664 4.9268L15.5233 14.6092C15.4517 15.1277 15.1621 15.5477 14.8098 15.867C14.456 16.1877 14.0028 16.442 13.5123 16.6392C12.5299 17.0343 11.2752 17.25 10 17.25C8.72762 17.25 7.48138 17.0419 6.50197 16.6499C5.58181 16.2816 4.63931 15.6399 4.47799 14.6174L2.93353 4.92665Z" fill="#101828" fill-opacity="0.14"/>
+<defs>
+<filter id="filter0_dg_9100_35711" x="0.875" y="0.3" width="18.25" height="19.95" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0431373 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9100_35711"/>
+<feBlend mode="normal" in="BackgroundImageFix" in2="effect1_dropShadow_9100_35711" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="5297" result="displacementX" />
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="5298" result="displacementY" />
+<feColorMatrix in="displacementX" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXRed" />
+<feColorMatrix in="displacementY" type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" />
+<feComposite in="displacementXRed" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="sourceDisplacedAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feColorMatrix in="shape" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="inputSourceAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feComposite in="sourceDisplacedAlpha" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="displacementAlphasMultiplied"/>
+<feComposite in="displacementAlphasMultiplied"  operator="arithmetic" k1="0" k2="0" k3="-0.5" k4="0.5" result="centeringAdjustment"/>
+<feComposite in="displacementX" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXFinal" />
+<feComposite in="displacementY" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" result="displacementYFinal" />
+<feComposite in="displacementXFinal" in2="displacementYFinal" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feComposite in2="displacementAlphasMultiplied" operator="in" result="displacementMap" />
+<feFlood flood-color="rgb(127, 127, 127)" flood-opacity="1"/>
+<feComposite in2="displacementAlphasMultiplied" operator="out" />
+<feComposite in2="displacementMap" operator="over" result="displacementMapWithBg"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImage" />
+<feColorMatrix in="shape" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 127 0" result="imageOpaque" />
+<feDisplacementMap in="imageOpaque" in2="displacementMapWithBg" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImageOpaque" />
+<feColorMatrix in="displacedImage" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" result="displacedImageRed" />
+<feColorMatrix in="shape" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" />
+<feComposite in="displacedImageRed"  operator="atop" result="transparencyRedMap"/>
+<feColorMatrix in="transparencyRedMap" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0" result="transparencyAlphaMap" />
+<feComposite in="displacedImageOpaque" in2="imageOpaque" operator="over" />
+<feComposite in2="transparencyAlphaMap" operator="in" result="effect2_texture_9100_35711"/>
+</filter>
+<linearGradient id="paint0_linear_9100_35711" x1="10" y1="1.5" x2="10" y2="17.2499" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296DFF"/>
+<stop offset="1" stop-color="#155AEF"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/online-drive/buckets-gray.svg

@@ -0,0 +1,61 @@
+<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dg_9155_106569)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.71865 4.37937C2.68524 4.25999 2.66663 4.13355 2.66663 4.00016C2.66663 3.4484 2.98515 3.01549 3.35148 2.7098C3.72157 2.40099 4.21723 2.15279 4.77114 1.95729C5.88498 1.56417 7.38013 1.3335 8.99996 1.3335C10.6198 1.3335 12.115 1.56417 13.2288 1.95729C13.7827 2.15279 14.2784 2.40099 14.6484 2.7098C15.0148 3.01549 15.3333 3.4484 15.3333 4.00016C15.3333 4.1336 15.3146 4.26009 15.2812 4.37951L13.9096 12.9861C13.8459 13.447 13.5885 13.8203 13.2754 14.1042C12.9608 14.3892 12.558 14.6152 12.122 14.7906C11.2488 15.1417 10.1334 15.3334 8.99996 15.3334C7.86896 15.3334 6.76119 15.1485 5.8906 14.8C5.07268 14.4727 4.23491 13.9023 4.09151 12.9934L4.09139 12.9926L2.71865 4.37937ZM13.7942 4.26678C13.5908 4.43652 13.2566 4.61928 12.785 4.78572C11.8479 5.11646 10.5098 5.3335 8.99996 5.3335C7.49016 5.3335 6.15199 5.11646 5.21489 4.78572C4.74334 4.61928 4.40913 4.43652 4.20573 4.26678C3.98111 4.07936 3.97209 3.92848 4.20573 3.73353C4.40913 3.56379 4.74334 3.38103 5.21489 3.2146C6.15199 2.88386 7.49016 2.66682 8.99996 2.66682C10.5098 2.66682 11.8479 2.88386 12.785 3.2146C13.2566 3.38103 13.5908 3.56379 13.7942 3.73353C14.0253 3.92637 14.0303 4.06978 13.7942 4.26678Z" fill="url(#paint0_linear_9155_106569)"/>
+<path d="M8.99963 1.5835C10.5986 1.5835 12.0645 1.81154 13.1451 2.19287C13.6835 2.38289 14.1491 2.61917 14.4879 2.90186C14.825 3.18316 15.0836 3.55264 15.0836 4.00049C15.0836 4.11011 15.0681 4.21383 15.0406 4.31201L15.0367 4.32568L15.0348 4.34033L13.6627 12.9468L13.6617 12.9517C13.6085 13.3371 13.3916 13.6605 13.1071 13.9185C12.8211 14.1776 12.4474 14.3908 12.0289 14.5591C11.1912 14.8959 10.1081 15.0835 8.99963 15.0835C7.89281 15.0835 6.81755 14.9019 5.98303 14.5679C5.18068 14.2467 4.4599 13.7234 4.3385 12.9546V12.9526L2.96545 4.34033L2.9635 4.32568L2.95959 4.31201L2.92737 4.16064C2.92011 4.10875 2.91664 4.05535 2.91663 4.00049C2.91663 3.55274 3.17436 3.18313 3.51135 2.90186C3.85017 2.61914 4.31573 2.38291 4.85413 2.19287C5.93475 1.81147 7.40056 1.58353 8.99963 1.5835ZM8.99963 2.4165C7.46933 2.41654 6.10163 2.63659 5.13147 2.979C4.64464 3.15085 4.28017 3.34571 4.04553 3.5415C3.91579 3.64976 3.78112 3.80197 3.78381 4.00635C3.7865 4.20806 3.92243 4.35576 4.04553 4.4585C4.28015 4.65428 4.64467 4.84915 5.13147 5.021C6.10163 5.36341 7.46933 5.58346 8.99963 5.5835C10.5299 5.5835 11.8975 5.36338 12.8678 5.021C13.3547 4.84912 13.72 4.65433 13.9547 4.4585C14.0815 4.35269 14.2209 4.20184 14.2194 3.99658C14.2178 3.79281 14.0778 3.64424 13.9547 3.5415C13.72 3.34567 13.3547 3.15088 12.8678 2.979C11.8975 2.63664 10.5299 2.4165 8.99963 2.4165Z" stroke="white" stroke-opacity="0.01" stroke-width="0.5"/>
+</g>
+<path opacity="0.8" d="M8.99999 8.3335C8.36485 8.3335 7.81909 8.71403 7.57737 9.25902C6.99119 9.39939 6.55554 9.92652 6.55554 10.5557C6.55554 11.2921 7.1525 11.8891 7.88888 11.8891H10.3333C10.947 11.8891 11.4444 11.3916 11.4444 10.7779C11.4444 10.2358 11.0561 9.78432 10.5425 9.68647C10.4432 8.92308 9.79045 8.3335 8.99999 8.3335Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.71865 4.37908C2.68524 4.2597 2.66663 4.13326 2.66663 3.99986C2.66663 3.88343 2.68081 3.7723 2.70663 3.66653C2.71039 3.68194 2.7144 3.69723 2.71865 3.71241L4.09151 12.3264C4.23491 13.2353 5.07268 13.8057 5.8906 14.1331C6.76119 14.4815 7.86896 14.6665 8.99996 14.6665C10.1334 14.6665 11.2488 14.4747 12.122 14.1236C12.558 13.9483 12.9608 13.7223 13.2754 13.4372C13.5885 13.1533 13.8459 12.78 13.9096 12.3191L15.2812 3.71255C15.2855 3.69732 15.2895 3.68197 15.2933 3.6665C15.3191 3.77228 15.3333 3.88343 15.3333 3.99986C15.3333 4.1333 15.3146 4.2598 15.2812 4.37922L13.9096 12.9858C13.8459 13.4467 13.5885 13.82 13.2754 14.1039C12.9608 14.3889 12.558 14.6149 12.122 14.7903C11.2488 15.1414 10.1334 15.3331 8.99996 15.3331C7.86896 15.3331 6.76119 15.1482 5.8906 14.7997C5.07268 14.4724 4.23491 13.902 4.09151 12.9931L2.71865 4.37908Z" fill="#101828" fill-opacity="0.14"/>
+<defs>
+<filter id="filter0_dg_9155_106569" x="0.666626" y="0.133496" width="16.6666" height="18.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0431373 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9155_106569"/>
+<feBlend mode="normal" in="BackgroundImageFix" in2="effect1_dropShadow_9155_106569" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="5297" result="displacementX" />
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="5298" result="displacementY" />
+<feColorMatrix in="displacementX" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXRed" />
+<feColorMatrix in="displacementY" type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" />
+<feComposite in="displacementXRed" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="sourceDisplacedAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feColorMatrix in="shape" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="inputSourceAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feComposite in="sourceDisplacedAlpha" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="displacementAlphasMultiplied"/>
+<feComposite in="displacementAlphasMultiplied"  operator="arithmetic" k1="0" k2="0" k3="-0.5" k4="0.5" result="centeringAdjustment"/>
+<feComposite in="displacementX" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXFinal" />
+<feComposite in="displacementY" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" result="displacementYFinal" />
+<feComposite in="displacementXFinal" in2="displacementYFinal" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feComposite in2="displacementAlphasMultiplied" operator="in" result="displacementMap" />
+<feFlood flood-color="rgb(127, 127, 127)" flood-opacity="1"/>
+<feComposite in2="displacementAlphasMultiplied" operator="out" />
+<feComposite in2="displacementMap" operator="over" result="displacementMapWithBg"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImage" />
+<feColorMatrix in="shape" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 127 0" result="imageOpaque" />
+<feDisplacementMap in="imageOpaque" in2="displacementMapWithBg" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImageOpaque" />
+<feColorMatrix in="displacedImage" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" result="displacedImageRed" />
+<feColorMatrix in="shape" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" />
+<feComposite in="displacedImageRed"  operator="atop" result="transparencyRedMap"/>
+<feColorMatrix in="transparencyRedMap" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0" result="transparencyAlphaMap" />
+<feComposite in="displacedImageOpaque" in2="imageOpaque" operator="over" />
+<feComposite in2="transparencyAlphaMap" operator="in" result="effect2_texture_9155_106569"/>
+</filter>
+<linearGradient id="paint0_linear_9155_106569" x1="8.99996" y1="1.3335" x2="8.99996" y2="15.3334" gradientUnits="userSpaceOnUse">
+<stop stop-color="#98A2B2"/>
+<stop offset="1" stop-color="#676F83"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/online-drive/folder.svg

@@ -0,0 +1,111 @@
+<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dg_9155_106307)">
+<path d="M11.8106 3.75L8.81065 6.75H2.5V15C2.5 15.4142 2.83579 15.75 3.25 15.75H16.75C17.1642 15.75 17.5 15.4142 17.5 15V4.5C17.5 4.08579 17.1642 3.75 16.75 3.75H11.8106Z" fill="url(#paint0_linear_9155_106307)"/>
+<path d="M16.75 4C17.0262 4 17.25 4.22386 17.25 4.5V15C17.25 15.2762 17.0262 15.5 16.75 15.5H3.25C2.97386 15.5 2.75 15.2762 2.75 15V7H8.91406L11.9141 4H16.75Z" stroke="white" stroke-opacity="0.01" stroke-width="0.5"/>
+</g>
+<g opacity="0.6" filter="url(#filter1_dg_9155_106307)">
+<path d="M3.25 2.25C2.83579 2.25 2.5 2.58579 2.5 3V5.25H8.18934L10 3.43934L8.81065 2.25H3.25Z" fill="#296DFF"/>
+<path d="M3.25 2.5H8.70703L9.64648 3.43945L8.08594 5H2.75V3C2.75 2.72386 2.97386 2.5 3.25 2.5Z" stroke="white" stroke-opacity="0.01" stroke-width="0.5"/>
+</g>
+<path d="M17.5 15C17.5 15.4142 17.1642 15.75 16.75 15.75H3.25C2.83579 15.75 2.5 15.4142 2.5 15V14.25H17.5V15Z" fill="#101828" fill-opacity="0.14"/>
+<defs>
+<filter id="filter0_dg_9155_106307" x="0.5" y="2.55" width="19" height="16.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0431373 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9155_106307"/>
+<feBlend mode="normal" in="BackgroundImageFix" in2="effect1_dropShadow_9155_106307" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="8029" result="displacementX" />
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="8030" result="displacementY" />
+<feColorMatrix in="displacementX" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXRed" />
+<feColorMatrix in="displacementY" type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" />
+<feComposite in="displacementXRed" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="sourceDisplacedAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feColorMatrix in="shape" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="inputSourceAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feComposite in="sourceDisplacedAlpha" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="displacementAlphasMultiplied"/>
+<feComposite in="displacementAlphasMultiplied"  operator="arithmetic" k1="0" k2="0" k3="-0.5" k4="0.5" result="centeringAdjustment"/>
+<feComposite in="displacementX" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXFinal" />
+<feComposite in="displacementY" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" result="displacementYFinal" />
+<feComposite in="displacementXFinal" in2="displacementYFinal" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feComposite in2="displacementAlphasMultiplied" operator="in" result="displacementMap" />
+<feFlood flood-color="rgb(127, 127, 127)" flood-opacity="1"/>
+<feComposite in2="displacementAlphasMultiplied" operator="out" />
+<feComposite in2="displacementMap" operator="over" result="displacementMapWithBg"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImage" />
+<feColorMatrix in="shape" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 127 0" result="imageOpaque" />
+<feDisplacementMap in="imageOpaque" in2="displacementMapWithBg" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImageOpaque" />
+<feColorMatrix in="displacedImage" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" result="displacedImageRed" />
+<feColorMatrix in="shape" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" />
+<feComposite in="displacedImageRed"  operator="atop" result="transparencyRedMap"/>
+<feColorMatrix in="transparencyRedMap" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0" result="transparencyAlphaMap" />
+<feComposite in="displacedImageOpaque" in2="imageOpaque" operator="over" />
+<feComposite in2="transparencyAlphaMap" operator="in" result="effect2_texture_9155_106307"/>
+</filter>
+<filter id="filter1_dg_9155_106307" x="0.5" y="1.05" width="11.5" height="7.2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0352941 0 0 0 0 0.0352941 0 0 0 0 0.0431373 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_9155_106307"/>
+<feBlend mode="normal" in="BackgroundImageFix" in2="effect1_dropShadow_9155_106307" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="8754" result="displacementX" />
+<feTurbulence type="fractalNoise" baseFrequency="9.0909090042114258 9.0909090042114258" numOctaves="3" seed="8755" result="displacementY" />
+<feColorMatrix in="displacementX" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXRed" />
+<feColorMatrix in="displacementY" type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" />
+<feComposite in="displacementXRed" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="sourceDisplacedAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feColorMatrix in="shape" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0" />
+<feComponentTransfer result="inputSourceAlpha">
+<feFuncA type="gamma" exponent="0.2" />
+</feComponentTransfer>
+<feComposite in="sourceDisplacedAlpha" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" result="displacementAlphasMultiplied"/>
+<feComposite in="displacementAlphasMultiplied"  operator="arithmetic" k1="0" k2="0" k3="-0.5" k4="0.5" result="centeringAdjustment"/>
+<feComposite in="displacementX" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0 1" result="displacementXFinal" />
+<feComposite in="displacementY" in2="displacementAlphasMultiplied" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
+<feComposite in="centeringAdjustment" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feColorMatrix  type="matrix" values="0 0 0 0 0  0 0 0 1 0  0 0 0 0 0  0 0 0 0 1" result="displacementYFinal" />
+<feComposite in="displacementXFinal" in2="displacementYFinal" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" />
+<feComposite in2="displacementAlphasMultiplied" operator="in" result="displacementMap" />
+<feFlood flood-color="rgb(127, 127, 127)" flood-opacity="1"/>
+<feComposite in2="displacementAlphasMultiplied" operator="out" />
+<feComposite in2="displacementMap" operator="over" result="displacementMapWithBg"/>
+<feDisplacementMap in="shape" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImage" />
+<feColorMatrix in="shape" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 127 0" result="imageOpaque" />
+<feDisplacementMap in="imageOpaque" in2="displacementMapWithBg" scale="2.4000000953674316" xChannelSelector="R" yChannelSelector="G" width="100%" height="100%" result="displacedImageOpaque" />
+<feColorMatrix in="displacedImage" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" result="displacedImageRed" />
+<feColorMatrix in="shape" type="matrix" values="0 0 0 1 0  0 0 0 0 0  0 0 0 0 0  0 0 0 127 0" />
+<feComposite in="displacedImageRed"  operator="atop" result="transparencyRedMap"/>
+<feColorMatrix in="transparencyRedMap" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0" result="transparencyAlphaMap" />
+<feComposite in="displacedImageOpaque" in2="imageOpaque" operator="over" />
+<feComposite in2="transparencyAlphaMap" operator="in" result="effect2_texture_9155_106307"/>
+</filter>
+<linearGradient id="paint0_linear_9155_106307" x1="10" y1="3.75" x2="10" y2="15.75" gradientUnits="userSpaceOnUse">
+<stop stop-color="#296DFF"/>
+<stop offset="1" stop-color="#155AEF"/>
+</linearGradient>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue-light.svg

@@ -0,0 +1,12 @@
+<svg width="212" height="74" viewBox="0 0 212 74" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Effect" opacity="0.8" filter="url(#filter0_f_6128_88629)">
+<circle cx="24" cy="24" r="28" fill="#0BA5EC"/>
+</g>
+<defs>
+<filter id="filter0_f_6128_88629" x="-164" y="-164" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_88629"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/option-card-effect-blue.svg

@@ -0,0 +1,12 @@
+<svg width="214" height="124" viewBox="0 0 214 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Effect" opacity="0.5" filter="url(#filter0_f_6128_89310)">
+<circle cx="26" cy="26" r="28" fill="#6172F3"/>
+</g>
+<defs>
+<filter id="filter0_f_6128_89310" x="-162" y="-162" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_6128_89310"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/option-card-effect-orange.svg

@@ -0,0 +1,12 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Effect" opacity="0.8" filter="url(#filter0_f_481_16338)">
+<circle cx="32" cy="32" r="28" fill="#EF6820"/>
+</g>
+<defs>
+<filter id="filter0_f_481_16338" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_481_16338"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/option-card-effect-purple.svg

@@ -0,0 +1,12 @@
+<svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Effect" opacity="0.8" filter="url(#filter0_f_5863_82395)">
+<circle cx="32" cy="32" r="28" fill="#6938EF"/>
+</g>
+<defs>
+<filter id="filter0_f_5863_82395" x="-156" y="-156" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_5863_82395"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/option-card-effect-teal.svg

@@ -0,0 +1,12 @@
+<svg width="212" height="92" viewBox="0 0 212 92" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" filter="url(#filter0_f_9981_52393)">
+<circle cx="24" cy="24" r="28" fill="#0E9384"/>
+</g>
+<defs>
+<filter id="filter0_f_9981_52393" x="-164" y="-164" width="376" height="376" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="80" result="effect1_foregroundBlur_9981_52393"/>
+</filter>
+</defs>
+</svg>

web/app/components/base/icons/assets/public/knowledge/parent-child-type.svg

@@ -1,7 +0,0 @@
-<svg width="10" height="11" viewBox="0 0 10 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="Group">
-<path id="Vector" d="M2.70833 3.87501C3.51375 3.87501 4.16666 3.22209 4.16666 2.41668C4.16666 1.61126 3.51375 0.958344 2.70833 0.958344C1.90292 0.958344 1.25 1.61126 1.25 2.41668C1.25 3.22209 1.90292 3.87501 2.70833 3.87501Z" fill="#676F83"/>
-<path id="Vector_2" d="M7.29158 3.87501C8.097 3.87501 8.74992 3.22209 8.74992 2.41668C8.74992 1.61126 8.097 0.958344 7.29158 0.958344C6.48617 0.958344 5.83325 1.61126 5.83325 2.41668C5.83325 3.22209 6.48617 3.87501 7.29158 3.87501Z" fill="#676F83"/>
-<path id="Vector_3" d="M7.29167 4.70835C6.83771 4.70886 6.39118 4.82363 5.99324 5.04208C5.59529 5.26053 5.25874 5.57563 5.01459 5.95835C5.34482 5.9622 5.66011 6.09658 5.89159 6.33215C6.12306 6.56771 6.25191 6.8853 6.24998 7.21555C6.24805 7.5458 6.11551 7.86187 5.8813 8.09472C5.6471 8.32756 5.33026 8.45826 5 8.45826C4.66975 8.45826 4.35291 8.32756 4.1187 8.09472C3.8845 7.86187 3.75195 7.5458 3.75003 7.21555C3.7481 6.8853 3.87695 6.56771 4.10842 6.33215C4.3399 6.09658 4.65519 5.9622 4.98542 5.95835C4.67086 5.46415 4.20432 5.08546 3.656 4.87926C3.10767 4.67306 2.50721 4.6505 1.94496 4.81497C1.3827 4.97944 0.889064 5.32205 0.538306 5.79125C0.187547 6.26045 -0.00135882 6.83086 7.35834e-06 7.41668V10.125C7.35834e-06 10.2355 0.043906 10.3415 0.122046 10.4196C0.200186 10.4978 0.306167 10.5417 0.416674 10.5417H3.33334V9.50001L1.83334 8.37501C1.78957 8.34218 1.75269 8.30105 1.72481 8.25397C1.69693 8.20688 1.6786 8.15477 1.67086 8.1006C1.65523 7.99121 1.6837 7.88008 1.75001 7.79168C1.81631 7.70327 1.91502 7.64483 2.02441 7.6292C2.13381 7.61357 2.24493 7.64204 2.33334 7.70835L3.88875 8.87501H6.11125L7.66667 7.70835C7.75507 7.64204 7.8662 7.61357 7.97559 7.6292C8.08499 7.64483 8.1837 7.70327 8.25 7.79168C8.31631 7.88008 8.34478 7.99121 8.32915 8.1006C8.31352 8.21 8.25507 8.30871 8.16667 8.37501L6.66667 9.50001V10.5417H9.58333C9.69384 10.5417 9.79982 10.4978 9.87796 10.4196C9.9561 10.3415 10 10.2355 10 10.125V7.41668C9.99912 6.69866 9.71349 6.01029 9.20577 5.50257C8.69805 4.99485 8.00969 4.70923 7.29167 4.70835Z" fill="#676F83"/>
-</g>
-</svg>

web/app/components/base/icons/assets/public/knowledge/watercrawl.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+    <path style="fill: rgb(0, 23, 87); stroke: rgb(13, 14, 52);" d="M 247.794 213.903 L 246.81 76.976 L 254.345 76.963 L 254.592 213.989 L 247.794 213.903 Z"/>
+    <ellipse style="fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);" cx="250.025" cy="43.859" rx="33.966" ry="33.906"/>
+    <path style="fill: rgb(30, 141, 166); stroke: rgb(30, 141, 166);" d="M 282.472 260.389 L 414.181 330.253 L 410.563 336.234 L 279.38 265.739 L 282.472 260.389 Z"/>
+    <path style="fill: rgb(15, 17, 57); stroke: rgb(13, 14, 52);" d="M 255.105 281.394 L 254.485 417.656 L 246.156 417.691 L 246.688 280.51 L 255.105 281.394 Z"/>
+    <path style="paint-order: fill; fill: rgb(30, 141, 166); stroke: rgb(30, 141, 166);" d="M 279.486 229.517 L 410.351 160.07 L 413.923 167.04 L 283.727 235.998 L 279.486 229.517 Z"/>
+    <path style="fill: rgb(15, 164, 161); stroke: rgb(15, 164, 161);" d="M 88.545 164.884 L 219.797 236.07 L 222.867 229.568 L 90.887 159.47 L 88.545 164.884 Z"/>
+    <path style="fill: rgb(15, 164, 161); stroke: rgb(15, 164, 161);" d="M 224.76 266.9 L 95.55 334.829 L 92.878 328.37 L 219.955 261.275 L 224.76 266.9 Z"/>
+    <ellipse style="paint-order: fill; fill: rgb(2, 181, 225); stroke: rgb(2, 181, 225);" cx="251.242" cy="247.466" rx="33.966" ry="33.906"/>
+    <path style="fill: rgb(13, 14, 52); stroke: rgb(13, 14, 52);" d="M 279.502 433.617 L 408.666 359.443 C 408.666 359.443 412.398 366.965 412.398 366.916 C 412.398 366.867 281.544 440.217 281.544 440.217 L 279.502 433.617 Z"/>
+    <path style="fill: rgb(13, 14, 52); stroke: rgb(13, 14, 52);" d="M 223.119 431.408 L 96.643 361.068 L 93.265 368.047 L 218.895 438.099 L 223.119 431.408 Z"/>
+    <ellipse style="fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);" cx="250.504" cy="451.168" rx="33.966" ry="33.906"/>
+    <path style="fill: rgb(90, 191, 187); stroke: rgb(90, 191, 187);" d="M 435.665 180.895 L 435.859 316.869 L 443.103 315.579 L 442.56 180.697 L 435.665 180.895 Z"/>
+    <ellipse style="fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);" cx="441.06" cy="349.665" rx="33.966" ry="33.906"/>
+    <ellipse style="fill: rgb(2, 181, 225); stroke: rgb(2, 181, 225);" cx="441.512" cy="147.767" rx="33.966" ry="33.906"/>
+    <path style="fill: rgb(84, 187, 181); stroke: rgb(84, 187, 181);" d="M 64.755 314.523 L 57.928 315.006 L 58.307 182.961 L 65.169 182.865 L 64.755 314.523 Z"/>
+    <ellipse style="fill: rgb(0, 23, 87); stroke: rgb(0, 23, 87);" cx="58.177" cy="149.757" rx="33.966" ry="33.906"/>
+    <ellipse style="fill: rgb(61, 224, 203); stroke: rgb(61, 224, 203);" cx="65.909" cy="348.17" rx="33.966" ry="33.906"/>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/add-chunks.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0855 2.50411C10.5056 2.54689 10.8333 2.90198 10.8333 3.33337C10.8333 3.79361 10.4602 4.16671 10 4.16671H6.00017C5.51971 4.16671 5.20926 4.16776 4.97315 4.18705C4.74683 4.20555 4.66278 4.23686 4.62159 4.25785C4.46494 4.33771 4.33768 4.46498 4.25782 4.62162C4.23683 4.66282 4.20551 4.74687 4.18702 4.97319C4.16772 5.2093 4.16667 5.51975 4.16667 6.0002V13.9999C4.16667 14.4803 4.16772 14.7908 4.18702 15.0269C4.20551 15.2532 4.23684 15.3373 4.25782 15.3785C4.33771 15.5351 4.465 15.6624 4.62159 15.7422C4.66278 15.7632 4.74684 15.7945 4.97315 15.813C5.20926 15.8323 5.51971 15.8334 6.00017 15.8334H13.9998C14.4803 15.8334 14.7907 15.8323 15.0269 15.813C15.2532 15.7945 15.3372 15.7632 15.3784 15.7422C15.5351 15.6624 15.6624 15.5351 15.7422 15.3785C15.7632 15.3373 15.7945 15.2532 15.813 15.0269C15.8323 14.7908 15.8333 14.4803 15.8333 13.9999V10C15.8333 9.53981 16.2064 9.16671 16.6667 9.16671C17.1269 9.16671 17.5 9.53981 17.5 10V13.9999C17.5 14.4528 17.5009 14.8431 17.4748 15.1628C17.4478 15.4922 17.388 15.82 17.2274 16.1353C16.9878 16.6055 16.6054 16.9878 16.1353 17.2274C15.82 17.3881 15.4922 17.4479 15.1628 17.4748C14.843 17.5009 14.4528 17.5 13.9998 17.5H6.00017C5.54721 17.5 5.15697 17.5009 4.83724 17.4748C4.50786 17.4479 4.18 17.3881 3.86475 17.2274C3.39449 16.9878 3.01223 16.6054 2.77263 16.1353C2.61199 15.82 2.55216 15.4922 2.52523 15.1628C2.49911 14.8431 2.5 14.4528 2.5 13.9999V6.0002C2.5 5.54725 2.49911 5.15701 2.52523 4.83728C2.55216 4.5079 2.612 4.18003 2.77263 3.86479C3.01227 3.3946 3.39456 3.0123 3.86475 2.77266C4.18 2.61203 4.50786 2.55219 4.83724 2.52527C5.15697 2.49915 5.54721 2.50004 6.00017 2.50004H10L10.0855 2.50411Z" fill="#155AEF"/>
+<path d="M10.8333 12.5C11.2936 12.5 11.6667 12.8731 11.6667 13.3334C11.6667 13.7936 11.2936 14.1667 10.8333 14.1667H6.66667C6.20643 14.1667 5.83334 13.7936 5.83334 13.3334C5.83334 12.8731 6.20643 12.5 6.66667 12.5H10.8333Z" fill="#155AEF"/>
+<path d="M8.33334 9.16671C8.79357 9.16671 9.16667 9.5398 9.16667 10C9.16667 10.4603 8.79357 10.8334 8.33334 10.8334H6.66667C6.20643 10.8334 5.83334 10.4603 5.83334 10C5.83334 9.5398 6.20643 9.16671 6.66667 9.16671H8.33334Z" fill="#155AEF"/>
+<path d="M13.3333 9.16671C13.7936 9.16671 14.1667 9.5398 14.1667 10C14.1667 10.4603 13.7936 10.8334 13.3333 10.8334H10.8333C10.3731 10.8334 10 10.4603 10 10C10 9.5398 10.3731 9.16671 10.8333 9.16671H13.3333Z" fill="#155AEF"/>
+<path d="M10 5.83337C10.4602 5.83337 10.8333 6.20647 10.8333 6.66671C10.8333 7.12694 10.4602 7.50004 10 7.50004H6.66667C6.20643 7.50004 5.83334 7.12694 5.83334 6.66671C5.83334 6.20647 6.20643 5.83338 6.66667 5.83337H10Z" fill="#155AEF"/>
+<path d="M15.8333 0.833374C16.2936 0.833374 16.6667 1.20647 16.6667 1.66671V3.33337H18.3333C18.7936 3.33337 19.1667 3.70647 19.1667 4.16671C19.1667 4.62694 18.7936 5.00004 18.3333 5.00004H16.6667V6.66671C16.6667 7.12694 16.2936 7.50004 15.8333 7.50004C15.3731 7.50004 15 7.12694 15 6.66671V5.00004H13.3333C12.8731 5.00004 12.5 4.62694 12.5 4.16671C12.5 3.70647 12.8731 3.33338 13.3333 3.33337H15V1.66671C15 1.20647 15.3731 0.833376 15.8333 0.833374Z" fill="#155AEF"/>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/api-aggregate.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.92578 11.0094C5.92578 10.0174 5.12163 9.21256 4.12956 9.21256C3.13752 9.2126 2.33333 10.0174 2.33333 11.0094C2.33349 12.0014 3.13762 12.8056 4.12956 12.8057C5.12153 12.8057 5.92562 12.0014 5.92578 11.0094ZM13.6667 11.0094C13.6667 10.0174 12.8625 9.2126 11.8704 9.21256C10.8784 9.21256 10.0742 10.0174 10.0742 11.0094C10.0744 12.0014 10.8785 12.8057 11.8704 12.8057C12.8624 12.8056 13.6665 12.0014 13.6667 11.0094ZM9.79622 4.32389C9.79619 3.33186 8.99205 2.52767 8 2.52767C7.00796 2.52767 6.20382 3.33186 6.20378 4.32389C6.20378 5.31596 7.00793 6.12012 8 6.12012C8.99207 6.12012 9.79622 5.31596 9.79622 4.32389ZM11.1296 4.32389C11.1296 5.82351 10.0748 7.07628 8.66667 7.38184V7.9196L9.74284 8.71387C10.3012 8.19607 11.0489 7.87923 11.8704 7.87923C13.5989 7.87927 15 9.28101 15 11.0094C14.9998 12.7377 13.5988 14.139 11.8704 14.139C10.1421 14.139 8.74104 12.7378 8.74089 11.0094C8.74089 10.5837 8.82585 10.1776 8.97982 9.80762L8 9.08366L7.01953 9.80762C7.17356 10.1777 7.25911 10.5836 7.25911 11.0094C7.25896 12.7378 5.85791 14.139 4.12956 14.139C2.40124 14.139 1.00016 12.7377 1 11.0094C1 9.28101 2.40114 7.87927 4.12956 7.87923C4.95094 7.87923 5.69819 8.19627 6.25651 8.71387L7.33333 7.9196V7.38184C5.92523 7.07628 4.87044 5.82351 4.87044 4.32389C4.87048 2.59548 6.27158 1.19434 8 1.19434C9.72843 1.19434 11.1295 2.59548 11.1296 4.32389Z" fill="#354052"/>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/arrow-shape.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="11" viewBox="0 0 24 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Arrow Shape" d="M9.87868 1.12132C11.0503 -0.0502525 12.9497 -0.0502525 14.1213 1.12132L23.3137 10.3137H0.686292L9.87868 1.12132Z" fill="white"/>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/divider.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="30" viewBox="0 0 6 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Line 3" d="M1.44595 28.7455L5.49125 1.00004" stroke="#101828" stroke-opacity="0.08" stroke-linecap="round"/>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/economic.svg

@@ -0,0 +1,8 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="piggy-bank-mod">
+<g id="Union">
+<path d="M12.75 1.80737C12.75 3.18809 11.6307 4.30738 10.25 4.30738C8.8693 4.30738 7.74998 3.18809 7.74998 1.80737L12.75 1.80737Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.29769 4.71516C6.27454 4.43606 7.31331 4.77702 7.93687 5.55738H11.8125C14.4013 5.55738 16.5 7.65605 16.5 10.2449C16.5 12.5126 14.8896 14.4043 12.75 14.8386V16.1824H11.5V14.9324H7.12498V16.1824H5.87498V14.8508C5.05321 14.6764 4.30548 14.229 3.76111 13.5695L2.99101 12.6365L1.5 12.0103V8.93745L3.29116 8.46851L4 7.56623V5.08593L5.29769 4.71516ZM7.75 7.43238H12.75V8.68239H7.75V7.43238ZM5.875 8.99489C5.875 9.51264 5.45527 9.93239 4.9375 9.93239C4.41973 9.93239 4 9.51264 4 8.99489C4 8.47714 4.41973 8.05739 4.9375 8.05739C5.45527 8.05739 5.875 8.47714 5.875 8.99489Z" fill="#444CE7"/>
+</g>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/full-text-search.svg

@@ -0,0 +1,7 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M13.008 4.24996H9.62427V0.866211L13.008 4.24996Z" fill="#676F83"/>
+<path id="Vector_2" d="M7.18052 12.375H3.06177C2.97889 12.375 2.8994 12.3421 2.8408 12.2835C2.78219 12.2249 2.74927 12.1454 2.74927 12.0625V11.4375C2.74927 11.3546 2.78219 11.2751 2.8408 11.2165C2.8994 11.1579 2.97889 11.125 3.06177 11.125H7.18052C7.29883 10.4268 7.61311 9.7765 8.08677 9.25H3.06177C2.97889 9.25 2.8994 9.21708 2.8408 9.15847C2.78219 9.09987 2.74927 9.02038 2.74927 8.9375V8.3125C2.74927 8.22962 2.78219 8.15013 2.8408 8.09153C2.8994 8.03292 2.97889 8 3.06177 8H10.8743C11.798 8.00025 12.6888 8.34321 13.3743 8.9625V5.5H8.99927C8.83351 5.5 8.67454 5.43415 8.55733 5.31694C8.44011 5.19973 8.37427 5.04076 8.37427 4.875V0.5H1.49927C1.33351 0.5 1.17454 0.565848 1.05733 0.683058C0.940116 0.800269 0.874268 0.95924 0.874268 1.125V14.875C0.874268 15.0408 0.940116 15.1997 1.05733 15.3169C1.17454 15.4342 1.33351 15.5 1.49927 15.5H10.2493C9.46028 15.4015 8.72775 15.0392 8.17066 14.4719C7.61356 13.9046 7.26462 13.1656 7.18052 12.375ZM3.06177 4.875H6.18677C6.26965 4.875 6.34913 4.90792 6.40774 4.96653C6.46634 5.02513 6.49927 5.10462 6.49927 5.1875V5.8125C6.49927 5.89538 6.46634 5.97487 6.40774 6.03347C6.34913 6.09208 6.26965 6.125 6.18677 6.125H3.06177C2.97889 6.125 2.8994 6.09208 2.8408 6.03347C2.78219 5.97487 2.74927 5.89538 2.74927 5.8125V5.1875C2.74927 5.10462 2.78219 5.02513 2.8408 4.96653C2.8994 4.90792 2.97889 4.875 3.06177 4.875Z" fill="#676F83"/>
+<path id="Vector_3" d="M14.4411 14.4331L13.0199 13.0119C13.2496 12.6309 13.3721 12.1949 13.3743 11.75C13.3743 11.2555 13.2276 10.7722 12.9529 10.3611C12.6782 9.94995 12.2878 9.62952 11.831 9.4403C11.3742 9.25108 10.8715 9.20157 10.3865 9.29804C9.90159 9.3945 9.45613 9.6326 9.1065 9.98223C8.75687 10.3319 8.51877 10.7773 8.42231 11.2623C8.32584 11.7472 8.37535 12.2499 8.56457 12.7067C8.75379 13.1635 9.07422 13.554 9.48534 13.8287C9.89647 14.1034 10.3798 14.25 10.8743 14.25C11.3192 14.2478 11.7552 14.1254 12.1361 13.8956L13.5574 15.3169C13.6753 15.4307 13.8331 15.4937 13.997 15.4923C14.1609 15.4909 14.3176 15.4251 14.4335 15.3093C14.5494 15.1934 14.6151 15.0366 14.6166 14.8728C14.618 14.7089 14.555 14.551 14.4411 14.4331ZM9.62427 11.75C9.62427 11.5028 9.69758 11.2611 9.83493 11.0555C9.97228 10.85 10.1675 10.6898 10.3959 10.5952C10.6243 10.5005 10.8757 10.4758 11.1181 10.524C11.3606 10.5723 11.5833 10.6913 11.7582 10.8661C11.933 11.0409 12.052 11.2637 12.1003 11.5061C12.1485 11.7486 12.1237 11.9999 12.0291 12.2284C11.9345 12.4568 11.7743 12.652 11.5687 12.7893C11.3632 12.9267 11.1215 13 10.8743 13C10.5427 13 10.2248 12.8683 9.99039 12.6339C9.75597 12.3995 9.62427 12.0815 9.62427 11.75Z" fill="#676F83"/>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/general-chunk.svg

@@ -0,0 +1,12 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="general">
+<g id="Vector">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.375 3.75C12.375 3.12868 12.8787 2.625 13.5 2.625H15.75C16.3713 2.625 16.875 3.12868 16.875 3.75C16.875 4.37132 16.3713 4.875 15.75 4.875H13.5C12.8787 4.875 12.375 4.37132 12.375 3.75Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 3.75C1.125 3.12868 1.62868 2.625 2.25 2.625H9.75C10.3713 2.625 10.875 3.12868 10.875 3.75C10.875 4.37132 10.3713 4.875 9.75 4.875H2.25C1.62868 4.875 1.125 4.37132 1.125 3.75Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 9C1.125 8.37868 1.62868 7.875 2.25 7.875H4.5C5.12132 7.875 5.625 8.37868 5.625 9C5.625 9.62132 5.12132 10.125 4.5 10.125H2.25C1.62868 10.125 1.125 9.62132 1.125 9Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.125 9C7.125 8.37868 7.62868 7.875 8.25 7.875H15.75C16.3713 7.875 16.875 8.37868 16.875 9C16.875 9.62132 16.3713 10.125 15.75 10.125H8.25C7.62868 10.125 7.125 9.62132 7.125 9Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.375 14.25C12.375 13.6287 12.8787 13.125 13.5 13.125H15.75C16.3713 13.125 16.875 13.6287 16.875 14.25C16.875 14.8713 16.3713 15.375 15.75 15.375H13.5C12.8787 15.375 12.375 14.8713 12.375 14.25Z" fill="#444CE7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.125 14.25C1.125 13.6287 1.62868 13.125 2.25 13.125H9.75C10.3713 13.125 10.875 13.6287 10.875 14.25C10.875 14.8713 10.3713 15.375 9.75 15.375H2.25C1.62868 15.375 1.125 14.8713 1.125 14.25Z" fill="#444CE7"/>
+</g>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/high-quality.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="gold-coin">
+<path id="Vector" d="M9 1.5C7.51664 1.5 6.06659 1.93987 4.83323 2.76398C3.59986 3.58809 2.63856 4.75943 2.07091 6.12987C1.50325 7.50032 1.35472 9.00832 1.64411 10.4632C1.9335 11.918 2.64781 13.2544 3.6967 14.3033C4.7456 15.3522 6.08197 16.0665 7.53683 16.3559C8.99168 16.6453 10.4997 16.4967 11.8701 15.9291C13.2406 15.3614 14.4119 14.4001 15.236 13.1668C16.0601 11.9334 16.5 10.4834 16.5 9C16.5 7.01087 15.7098 5.10322 14.3033 3.6967C12.8968 2.29018 10.9891 1.5 9 1.5ZM11.0656 5.09312L11.8006 4.08187C11.8489 4.01543 11.9098 3.95915 11.9798 3.91623C12.0498 3.87332 12.1276 3.84462 12.2087 3.83176C12.2898 3.81891 12.3726 3.82215 12.4525 3.84131C12.5323 3.86047 12.6076 3.89518 12.6741 3.94344C12.7405 3.9917 12.7968 4.05257 12.8397 4.12259C12.8826 4.1926 12.9113 4.27038 12.9242 4.35148C12.937 4.43259 12.9338 4.51543 12.9146 4.59529C12.8955 4.67514 12.8608 4.75043 12.8125 4.81687L12.0775 5.82812C11.98 5.96231 11.8333 6.05228 11.6695 6.07824C11.5057 6.1042 11.3382 6.06403 11.2041 5.96656C11.0699 5.86909 10.9799 5.72232 10.954 5.55851C10.928 5.39471 10.9682 5.22731 11.0656 5.09312ZM5.32625 3.94375C5.39271 3.89519 5.4681 3.86023 5.54811 3.84089C5.62811 3.82154 5.71115 3.81819 5.79245 3.83103C5.87375 3.84386 5.95172 3.87263 6.02187 3.91567C6.09203 3.95872 6.15299 4.0152 6.20125 4.08187L6.9375 5.09312C7.03497 5.22772 7.07498 5.39552 7.04872 5.55962C7.02247 5.72371 6.9321 5.87066 6.7975 5.96812C6.66291 6.06559 6.4951 6.1056 6.33101 6.07934C6.16691 6.05309 6.01997 5.96272 5.9225 5.82812L5.1875 4.81687C5.13927 4.75044 5.10459 4.67515 5.08546 4.59531C5.06632 4.51548 5.06311 4.43265 5.07599 4.35157C5.08888 4.27048 5.11761 4.19274 5.16055 4.12276C5.20349 4.05279 5.2598 3.99196 5.32625 3.94375ZM5.0325 10.9437L3.845 11.33C3.76604 11.3594 3.68196 11.3725 3.5978 11.3686C3.51364 11.3646 3.43114 11.3437 3.35527 11.3071C3.2794 11.2705 3.21171 11.2189 3.15629 11.1554C3.10086 11.092 3.05883 11.018 3.03274 10.9379C3.00664 10.8577 2.997 10.7732 3.00442 10.6893C3.01183 10.6053 3.03613 10.5238 3.07587 10.4495C3.1156 10.3752 3.16995 10.3097 3.23564 10.2569C3.30133 10.2042 3.37701 10.1653 3.45813 10.1425L4.64563 9.75625C4.72467 9.72655 4.80892 9.71317 4.89327 9.71693C4.97763 9.72069 5.06035 9.7415 5.13644 9.77811C5.21253 9.81472 5.28042 9.86637 5.33599 9.92994C5.39157 9.99352 5.43369 10.0677 5.45981 10.148C5.48593 10.2283 5.4955 10.3131 5.48796 10.3972C5.48041 10.4813 5.45591 10.563 5.41591 10.6373C5.37592 10.7117 5.32127 10.7772 5.25527 10.8299C5.18926 10.8825 5.11389 10.9213 5.0325 10.9437ZM9.625 14.625C9.625 14.7908 9.55915 14.9497 9.44194 15.0669C9.32473 15.1841 9.16576 15.25 9 15.25C8.83424 15.25 8.67527 15.1841 8.55806 15.0669C8.44085 14.9497 8.375 14.7908 8.375 14.625V13.375C8.375 13.2092 8.44085 13.0503 8.55806 12.9331C8.67527 12.8158 8.83424 12.75 9 12.75C9.16576 12.75 9.32473 12.8158 9.44194 12.9331C9.55915 13.0503 9.625 13.2092 9.625 13.375V14.625ZM9 11L6.6475 12.2375L7.09688 9.61812L5.19375 7.76312L7.82375 7.38125L9 5L10.1763 7.38125L12.8063 7.76312L10.9031 9.61812L11.3525 12.2375L9 11ZM14.1563 11.3312L12.9688 10.945C12.8874 10.9225 12.8114 10.8838 12.7454 10.8311C12.6794 10.7784 12.6247 10.7129 12.5847 10.6386C12.5447 10.5642 12.5202 10.4825 12.5127 10.3984C12.5051 10.3143 12.5147 10.2295 12.5408 10.1492C12.5669 10.0689 12.6091 9.99477 12.6646 9.9312C12.7202 9.86762 12.7881 9.81597 12.8642 9.77936C12.9403 9.74275 13.023 9.72194 13.1074 9.71818C13.1917 9.71442 13.276 9.7278 13.355 9.7575L14.5425 10.1437C14.6236 10.1665 14.6993 10.2054 14.765 10.2582C14.8307 10.311 14.885 10.3764 14.9248 10.4507C14.9645 10.525 14.9888 10.6066 14.9962 10.6905C15.0036 10.7744 14.994 10.859 14.9679 10.9391C14.9418 11.0192 14.8998 11.0932 14.8443 11.1567C14.7889 11.2201 14.7212 11.2717 14.6454 11.3083C14.5695 11.345 14.487 11.3659 14.4028 11.3698C14.3187 11.3738 14.2352 11.3606 14.1563 11.3312Z" fill="#EF6820"/>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/hybrid-search.svg

@@ -0,0 +1,13 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M2.54546 15.5001C2.1409 15.5001 1.74544 15.3801 1.40906 15.1554C1.07269 14.9306 0.810517 14.6112 0.655702 14.2374C0.500886 13.8636 0.460379 13.4524 0.539304 13.0556C0.618228 12.6588 0.813039 12.2943 1.0991 12.0083C1.38516 11.7222 1.74963 11.5274 2.14641 11.4485C2.54319 11.3696 2.95446 11.4101 3.32822 11.5649C3.70198 11.7197 4.02143 11.9819 4.24619 12.3182C4.47095 12.6546 4.59091 13.0501 4.59091 13.4546C4.59091 13.9971 4.37541 14.5174 3.99181 14.901C3.60821 15.2846 3.08794 15.5001 2.54546 15.5001Z" fill="#6938EF"/>
+<path id="Vector_2" d="M8.00005 5.95459C7.59549 5.95459 7.20003 6.07455 6.86365 6.29931C6.52728 6.52407 6.26511 6.84352 6.11029 7.21728C5.95548 7.59104 5.91497 8.00231 5.99389 8.39909C6.07282 8.79587 6.26763 9.16034 6.55369 9.4464C6.83975 9.73246 7.20422 9.92727 7.601 10.0062C7.99778 10.0851 8.40905 10.0446 8.78281 9.8898C9.15656 9.73498 9.47602 9.47281 9.70078 9.13644C9.92554 8.80006 10.0455 8.4046 10.0455 8.00004C10.0455 7.45756 9.83 6.93729 9.4464 6.55369C9.0628 6.17009 8.54253 5.95459 8.00005 5.95459Z" fill="#6938EF"/>
+<path id="Vector_3" d="M2.54546 0.5C2.1409 0.5 1.74544 0.619964 1.40906 0.844721C1.07269 1.06948 0.810517 1.38893 0.655702 1.76269C0.500886 2.13645 0.460379 2.54772 0.539304 2.9445C0.618228 3.34128 0.813039 3.70575 1.0991 3.99181C1.38516 4.27787 1.74963 4.47268 2.14641 4.55161C2.54319 4.63053 2.95446 4.59002 3.32822 4.43521C3.70198 4.28039 4.02143 4.01822 4.24619 3.68185C4.47095 3.34547 4.59091 2.95001 4.59091 2.54545C4.59091 2.00297 4.37541 1.4827 3.99181 1.0991C3.60821 0.715503 3.08794 0.5 2.54546 0.5Z" fill="#6938EF"/>
+<path id="Vector_4" d="M13.4545 0.5C13.05 0.5 12.6545 0.619964 12.3181 0.844721C11.9817 1.06948 11.7196 1.38893 11.5648 1.76269C11.4099 2.13645 11.3694 2.54772 11.4484 2.9445C11.5273 3.34128 11.7221 3.70575 12.0082 3.99181C12.2942 4.27787 12.6587 4.47268 13.0555 4.55161C13.4522 4.63053 13.8635 4.59002 14.2373 4.43521C14.611 4.28039 14.9305 4.01822 15.1552 3.68185C15.38 3.34547 15.5 2.95001 15.5 2.54545C15.5 2.00297 15.2845 1.4827 14.9009 1.0991C14.5173 0.715503 13.997 0.5 13.4545 0.5Z" fill="#6938EF"/>
+<path id="Vector_5" d="M13.4545 11.4092C13.05 11.4092 12.6545 11.5291 12.3181 11.7539C11.9817 11.9787 11.7196 12.2981 11.5648 12.6719C11.4099 13.0456 11.3694 13.4569 11.4484 13.8537C11.5273 14.2505 11.7221 14.6149 12.0082 14.901C12.2942 15.1871 12.6587 15.3819 13.0555 15.4608C13.4522 15.5397 13.8635 15.4992 14.2373 15.3444C14.611 15.1896 14.9305 14.9274 15.1552 14.591C15.38 14.2547 15.5 13.8592 15.5 13.4546C15.5 12.9121 15.2845 12.3919 14.9009 12.0083C14.5173 11.6247 13.997 11.4092 13.4545 11.4092Z" fill="#6938EF"/>
+<path id="Vector_6" d="M4.59091 5.95459H0.5V10.0455H4.59091V5.95459Z" fill="#6938EF"/>
+<path id="Vector_7" d="M15.5 5.95459H11.4091V10.0455H15.5V5.95459Z" fill="#6938EF"/>
+<path id="Vector_8" d="M10.0455 0.5H5.95459V4.59091H10.0455V0.5Z" fill="#6938EF"/>
+<path id="Vector_9" d="M10.0455 11.4092H5.95459V15.5001H10.0455V11.4092Z" fill="#6938EF"/>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/index.ts

@@ -0,0 +1,13 @@
+export { default as Chunk } from './Chunk'
+export { default as Collapse } from './Collapse'
+export { default as Divider } from './Divider'
+export { default as File } from './File'
+export { default as GeneralType } from './GeneralType'
+export { default as LayoutRight2LineMod } from './LayoutRight2LineMod'
+export { default as OptionCardEffectBlueLight } from './OptionCardEffectBlueLight'
+export { default as OptionCardEffectBlue } from './OptionCardEffectBlue'
+export { default as OptionCardEffectOrange } from './OptionCardEffectOrange'
+export { default as OptionCardEffectPurple } from './OptionCardEffectPurple'
+export { default as ParentChildType } from './ParentChildType'
+export { default as SelectionMod } from './SelectionMod'
+export { default as Watercrawl } from './Watercrawl'

web/app/components/base/icons/assets/vender/knowledge/parent-child-chunk.svg

@@ -0,0 +1,9 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="parent-child">
+<g id="Vector">
+<path d="M5.56251 5.8125C6.77063 5.8125 7.75001 4.83312 7.75001 3.625C7.75001 2.41688 6.77063 1.4375 5.56251 1.4375C4.35439 1.4375 3.37501 2.41688 3.37501 3.625C3.37501 4.83312 4.35439 5.8125 5.56251 5.8125Z" fill="#0BA5EC"/>
+<path d="M12.4375 5.8125C13.6456 5.8125 14.625 4.83312 14.625 3.625C14.625 2.41688 13.6456 1.4375 12.4375 1.4375C11.2294 1.4375 10.25 2.41688 10.25 3.625C10.25 4.83312 11.2294 5.8125 12.4375 5.8125Z" fill="#0BA5EC"/>
+<path d="M12.4375 7.0625C11.7566 7.06326 11.0868 7.23541 10.4899 7.56309C9.89294 7.89077 9.38811 8.36342 9.02188 8.9375C9.51723 8.94327 9.99017 9.14485 10.3374 9.49819C10.6846 9.85154 10.8779 10.3279 10.875 10.8233C10.8721 11.3187 10.6733 11.7928 10.322 12.1421C9.97065 12.4913 9.49539 12.6874 9.00001 12.6874C8.50462 12.6874 8.02937 12.4913 7.67805 12.1421C7.32674 11.7928 7.12793 11.3187 7.12504 10.8233C7.12215 10.3279 7.31542 9.85154 7.66263 9.49819C8.00984 9.14485 8.48278 8.94327 8.97813 8.9375C8.50629 8.1962 7.80649 7.62817 6.984 7.31887C6.16151 7.00957 5.26082 6.97572 4.41744 7.22243C3.57406 7.46914 2.8336 7.98305 2.30746 8.68685C1.78132 9.39065 1.49796 10.2463 1.50001 11.125V15.1875C1.50001 15.3533 1.56586 15.5122 1.68307 15.6294C1.80028 15.7466 1.95925 15.8125 2.12501 15.8125H6.50001V14.25L4.25001 12.5625C4.18435 12.5132 4.12903 12.4515 4.08721 12.3809C4.0454 12.3103 4.0179 12.2321 4.00629 12.1509C3.98285 11.9868 4.02555 11.8201 4.12501 11.6875C4.22447 11.5549 4.37253 11.4672 4.53662 11.4438C4.70072 11.4203 4.8674 11.463 5.00001 11.5625L7.33313 13.3125H10.6669L13 11.5625C13.1326 11.463 13.2993 11.4203 13.4634 11.4438C13.6275 11.4672 13.7755 11.5549 13.875 11.6875C13.9745 11.8201 14.0172 11.9868 13.9937 12.1509C13.9703 12.315 13.8826 12.463 13.75 12.5625L11.5 14.25V15.8125H15.875C16.0408 15.8125 16.1997 15.7466 16.3169 15.6294C16.4342 15.5122 16.5 15.3533 16.5 15.1875V11.125C16.4987 10.048 16.0702 9.01541 15.3087 8.25383C14.5471 7.49226 13.5145 7.06382 12.4375 7.0625Z" fill="#0BA5EC"/>
+</g>
+</g>
+</svg>

web/app/components/base/icons/assets/vender/knowledge/question-and-answer.svg

@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="qa">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M16.5015 3.75C16.5015 2.92157 15.8299 2.25 15.0015 2.25H6.00146C5.17304 2.25 4.50146 2.92157 4.50146 3.75V5.25H3.00146C2.17304 5.25 1.50146 5.92157 1.50146 6.75V12.75C1.50146 13.5784 2.17304 14.25 3.00146 14.25H3.75146V15.375C3.75146 15.6407 3.89209 15.8867 4.12112 16.0214C4.35015 16.1562 4.6334 16.1597 4.8657 16.0307L8.07083 14.25H12.0015C12.8299 14.25 13.5015 13.5784 13.5015 12.75V11.25H15.0015C15.8299 11.25 16.5015 10.5785 16.5015 9.75V3.75ZM12.0015 5.25H6.00146V3.75H15.0015V9.75H13.5015V6.75C13.5015 5.92157 12.8299 5.25 12.0015 5.25ZM5.25 7.5C4.83579 7.5 4.5 7.83579 4.5 8.25C4.5 8.66421 4.83579 9 5.25 9H9.75C10.1642 9 10.5 8.66421 10.5 8.25C10.5 7.83579 10.1642 7.5 9.75 7.5H5.25ZM5.25 10.5C4.83579 10.5 4.5 10.8358 4.5 11.25C4.5 11.6642 4.83579 12 5.25 12H7.5C7.91421 12 8.25 11.6642 8.25 11.25C8.25 10.8358 7.91421 10.5 7.5 10.5H5.25Z" fill="#676F83"/>
+</g>
+</svg>