feat: upgrade knowledge metadata (#16063)

Support filter knowledge by metadata.

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: NFish <douxc512@gmail.com>

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

@@ -34,6 +34,8 @@ const DatePicker = ({
   placeholder,
   needTimePicker = true,
   renderTrigger,
+  triggerWrapClassName,
+  popupZIndexClassname = 'z-[11]',
 }: DatePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -127,7 +129,9 @@ const DatePicker = ({
   }
 
   const handleConfirmDate = () => {
-    onChange(selectedDate)
+    // debugger
+    console.log(selectedDate, selectedDate?.tz(timezone))
+    onChange(selectedDate ? selectedDate.tz(timezone) : undefined)
     setIsOpen(false)
   }
 
@@ -200,7 +204,7 @@ const DatePicker = ({
       onOpenChange={setIsOpen}
       placement='bottom-end'
     >
-      <PortalToFollowElemTrigger>
+      <PortalToFollowElemTrigger className={triggerWrapClassName}>
         {renderTrigger ? (renderTrigger({
           value,
           selectedDate,
@@ -234,7 +238,7 @@ const DatePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className={popupZIndexClassname}>
         <div className='w-[252px] mt-1 bg-components-panel-bg rounded-xl shadow-lg shadow-shadow-shadow-5 border-[0.5px] border-components-panel-border'>
           {/* Header */}
           {view === ViewType.date ? (

web/app/components/base/date-and-time-picker/types.ts

@@ -11,7 +11,7 @@ export enum Period {
   PM = 'PM',
 }
 
-type TriggerProps = {
+export type TriggerProps = {
   value: Dayjs | undefined
   selectedDate: Dayjs | undefined
   isOpen: boolean
@@ -26,7 +26,9 @@ export type DatePickerProps = {
   needTimePicker?: boolean
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
+  triggerWrapClassName?: string
   renderTrigger?: (props: TriggerProps) => React.ReactNode
+  popupZIndexClassname?: string
 }
 
 export type DatePickerHeaderProps = {

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

@@ -53,15 +53,17 @@ export default function Drawer({
         />
         <div className={cn('relative z-50 flex flex-col justify-between bg-components-panel-bg w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
           <>
-            {title && <Dialog.Title
-              as="h3"
-              className="text-lg font-medium leading-6 text-text-primary"
-            >
-              {title}
-            </Dialog.Title>}
-            {showClose && <Dialog.Title className="flex items-center mb-4" as="div">
-              <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
-            </Dialog.Title>}
+            <div className='flex justify-between'>
+              {title && <Dialog.Title
+                as="h3"
+                className="text-lg font-medium leading-6 text-text-primary"
+              >
+                {title}
+              </Dialog.Title>}
+              {showClose && <Dialog.Title className="flex items-center mb-4 cursor-pointer" as="div">
+                <XMarkIcon className='w-4 h-4 text-text-tertiary' onClick={onClose} />
+              </Dialog.Title>}
+            </div>
             {description && <Dialog.Description className='text-text-tertiary text-xs font-normal mt-2'>{description}</Dialog.Description>}
             {children}
           </>

web/app/components/base/input-number/index.tsx

@@ -13,10 +13,13 @@ export type InputNumberProps = {
   min?: number
   defaultValue?: number
   disabled?: boolean
+  wrapClassName?: string
+  controlWrapClassName?: string
+  controlClassName?: string
 } & Omit<InputProps, 'value' | 'onChange' | 'size' | 'min' | 'max' | 'defaultValue'>
 
 export const InputNumber: FC<InputNumberProps> = (props) => {
-  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, disabled, ...rest } = props
+  const { unit, className, onChange, amount = 1, value, size = 'md', max, min, defaultValue, wrapClassName, controlWrapClassName, controlClassName, disabled, ...rest } = props
 
   const isValidValue = (v: number) => {
     if (max && v > max)
@@ -51,7 +54,7 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     onChange(newValue)
   }
 
-  return <div className='flex'>
+  return <div className={classNames('flex', wrapClassName)}>
     <Input {...rest}
       // disable default controller
       type='text'
@@ -77,16 +80,14 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
     <div className={classNames(
       'flex flex-col bg-components-input-bg-normal rounded-r-md border-l border-divider-subtle text-text-tertiary focus:shadow-xs',
       disabled && 'opacity-50 cursor-not-allowed',
-    )}>
-      <button
-        onClick={inc}
-        disabled={disabled}
-        className={classNames(
-          size === 'sm' ? 'pt-1' : 'pt-1.5',
-          'px-1.5 hover:bg-components-input-bg-hover',
-          disabled && 'cursor-not-allowed hover:bg-transparent',
-        )}
-      >
+      controlWrapClassName)}
+    >
+      <button onClick={inc} disabled={disabled} className={classNames(
+        size === 'sm' ? 'pt-1' : 'pt-1.5',
+        'px-1.5 hover:bg-components-input-bg-hover',
+        disabled && 'cursor-not-allowed hover:bg-transparent',
+        controlClassName,
+      )}>
         <RiArrowUpSLine className='size-3' />
       </button>
       <button
@@ -96,8 +97,8 @@ export const InputNumber: FC<InputNumberProps> = (props) => {
           size === 'sm' ? 'pb-1' : 'pb-1.5',
           'px-1.5 hover:bg-components-input-bg-hover',
           disabled && 'cursor-not-allowed hover:bg-transparent',
-        )}
-      >
+          controlClassName,
+        )}>
         <RiArrowDownSLine className='size-3' />
       </button>
     </div>

web/app/components/base/modal-like-wrap/index.tsx

@@ -0,0 +1,58 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import Button from '../button'
+import { RiCloseLine } from '@remixicon/react'
+
+type Props = {
+  title: string
+  className?: string
+  beforeHeader?: React.ReactNode
+  onClose: () => void
+  hideCloseBtn?: boolean
+  onConfirm: () => void
+  children: React.ReactNode
+}
+
+const ModalLikeWrap: FC<Props> = ({
+  title,
+  className,
+  beforeHeader,
+  children,
+  onClose,
+  hideCloseBtn,
+  onConfirm,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('w-[320px] px-3 pt-3.5 pb-4 bg-components-panel-bg shadow-xl rounded-2xl border-[0.5px] border-components-panel-border', className)}>
+      {beforeHeader || null}
+      <div className='mb-1 flex h-6 items-center justify-between'>
+        <div className='system-xl-semibold text-text-primary'>{title}</div>
+        {!hideCloseBtn && (
+          <div
+            className='p-1.5 text-text-tertiary cursor-pointer'
+            onClick={onClose}
+          >
+            <RiCloseLine className='size-4' />
+          </div>
+        )}
+      </div>
+      <div className='mt-2'>{children}</div>
+      <div className='mt-4 flex justify-end'>
+        <Button
+          className='mr-2'
+          onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button
+          onClick={onConfirm}
+          variant='primary'
+        >{t('common.operation.save')}</Button>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(ModalLikeWrap)