chore: perfect type definition (#1003)

web/app/(commonLayout)/apps/AppCard.tsx

 import AppModeLabel from './AppModeLabel'
 import s from './style.module.css'
 import SettingsModal from '@/app/components/app/overview/settings'
+import type { ConfigParams } from '@/app/components/app/overview/settings'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
 import { ToastContext } from '@/app/components/base/toast'
   }
 
   const onSaveSiteConfig = useCallback(
-    async (params: any) => {
+    async (params: ConfigParams) => {
       const [err] = await asyncRunSafe<App>(
         updateAppSiteConfig({
           url: `/apps/${app.id}/site`,
   )
 
   const Operations = (props: any) => {
-    const onClickSettings = async (e: any) => {
+    const onClickSettings = async (e: React.MouseEvent<HTMLButtonElement>) => {
       props?.onClose()
       e.preventDefault()
       await getAppDetail()
     }
-    const onClickDelete = async (e: any) => {
+    const onClickDelete = async (e: React.MouseEvent<HTMLDivElement>) => {
       props?.onClose()
       e.preventDefault()
       setShowConfirmDelete(true)

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout.tsx

 'use client'
-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import React, { useEffect } from 'react'
 import { usePathname } from 'next/navigation'
 import useSWR from 'swr'
   )
 }
 
-const TargetIcon: FC<{ className?: string }> = ({ className }) => {
+const TargetIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <g clip-path="url(#clip0_4610_6951)">
       <path d="M10.6666 5.33325V3.33325L12.6666 1.33325L13.3332 2.66659L14.6666 3.33325L12.6666 5.33325H10.6666ZM10.6666 5.33325L7.9999 7.99988M14.6666 7.99992C14.6666 11.6818 11.6818 14.6666 7.99992 14.6666C4.31802 14.6666 1.33325 11.6818 1.33325 7.99992C1.33325 4.31802 4.31802 1.33325 7.99992 1.33325M11.3333 7.99992C11.3333 9.84087 9.84087 11.3333 7.99992 11.3333C6.15897 11.3333 4.66659 9.84087 4.66659 7.99992C4.66659 6.15897 6.15897 4.66659 7.99992 4.66659" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-const TargetSolidIcon: FC<{ className?: string }> = ({ className }) => {
+const TargetSolidIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path fillRule="evenodd" clipRule="evenodd" d="M12.7733 0.67512C12.9848 0.709447 13.1669 0.843364 13.2627 1.03504L13.83 2.16961L14.9646 2.73689C15.1563 2.83273 15.2902 3.01486 15.3245 3.22639C15.3588 3.43792 15.2894 3.65305 15.1379 3.80458L13.1379 5.80458C13.0128 5.92961 12.8433 5.99985 12.6665 5.99985H10.9426L8.47124 8.47124C8.21089 8.73159 7.78878 8.73159 7.52843 8.47124C7.26808 8.21089 7.26808 7.78878 7.52843 7.52843L9.9998 5.05707V3.33318C9.9998 3.15637 10.07 2.9868 10.1951 2.86177L12.1951 0.861774C12.3466 0.710244 12.5617 0.640794 12.7733 0.67512Z" fill="#155EEF" />
     <path d="M1.99984 7.99984C1.99984 4.68613 4.68613 1.99984 7.99984 1.99984C8.36803 1.99984 8.6665 1.70136 8.6665 1.33317C8.6665 0.964981 8.36803 0.666504 7.99984 0.666504C3.94975 0.666504 0.666504 3.94975 0.666504 7.99984C0.666504 12.0499 3.94975 15.3332 7.99984 15.3332C12.0499 15.3332 15.3332 12.0499 15.3332 7.99984C15.3332 7.63165 15.0347 7.33317 14.6665 7.33317C14.2983 7.33317 13.9998 7.63165 13.9998 7.99984C13.9998 11.3135 11.3135 13.9998 7.99984 13.9998C4.68613 13.9998 1.99984 11.3135 1.99984 7.99984Z" fill="#155EEF" />
   </svg>
 }
 
-const BookOpenIcon: FC<{ className?: string }> = ({ className }) => {
+const BookOpenIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path opacity="0.12" d="M1 3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7V10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1Z" fill="#155EEF" />
     <path d="M6 10.5L5.94997 10.425C5.60265 9.90398 5.42899 9.64349 5.19955 9.45491C4.99643 9.28796 4.76238 9.1627 4.5108 9.0863C4.22663 9 3.91355 9 3.28741 9H2.6C2.03995 9 1.75992 9 1.54601 8.89101C1.35785 8.79513 1.20487 8.64215 1.10899 8.45399C1 8.24008 1 7.96005 1 7.4V3.1C1 2.53995 1 2.25992 1.10899 2.04601C1.20487 1.85785 1.35785 1.70487 1.54601 1.60899C1.75992 1.5 2.03995 1.5 2.6 1.5H2.8C3.9201 1.5 4.48016 1.5 4.90798 1.71799C5.28431 1.90973 5.59027 2.21569 5.78201 2.59202C6 3.01984 6 3.5799 6 4.7M6 10.5V4.7M6 10.5L6.05003 10.425C6.39735 9.90398 6.57101 9.64349 6.80045 9.45491C7.00357 9.28796 7.23762 9.1627 7.4892 9.0863C7.77337 9 8.08645 9 8.71259 9H9.4C9.96005 9 10.2401 9 10.454 8.89101C10.6422 8.79513 10.7951 8.64215 10.891 8.45399C11 8.24008 11 7.96005 11 7.4V3.1C11 2.53995 11 2.25992 10.891 2.04601C10.7951 1.85785 10.6422 1.70487 10.454 1.60899C10.2401 1.5 9.96005 1.5 9.4 1.5H9.2C8.07989 1.5 7.51984 1.5 7.09202 1.71799C6.71569 1.90973 6.40973 2.21569 6.21799 2.59202C6 3.01984 6 3.5799 6 4.7" stroke="#155EEF" strokeLinecap="round" strokeLinejoin="round" />

web/app/components/app-sidebar/index.tsx

 import React from 'react'
-import type { FC } from 'react'
 import NavLink from './navLink'
 import AppBasic from './basic'
 
+import type { NavIcon } from './navLink'
+
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
   title: string
   navigation: Array<{
     name: string
     href: string
-    icon: any
-    selectedIcon: any
+    icon: NavIcon
+    selectedIcon: NavIcon
   }>
   extraInfo?: React.ReactNode
 }
 
-const AppDetailNav: FC<IAppDetailNavProps> = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }) => {
+const AppDetailNav = ({ title, desc, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
   return (
     <div className="flex flex-col w-56 overflow-y-auto bg-white border-r border-gray-200 shrink-0">
       <div className="flex flex-shrink-0 p-4">

web/app/components/app-sidebar/navLink.tsx

 'use client'
+
 import { useSelectedLayoutSegment } from 'next/navigation'
 import classNames from 'classnames'
 import Link from 'next/link'
 
+export type NavIcon = React.ComponentType<
+React.PropsWithoutRef<React.ComponentProps<'svg'>> & {
+  title?: string | undefined
+  titleId?: string | undefined
+}
+>
+
+export type NavLinkProps = {
+  name: string
+  href: string
+  iconMap: {
+    selected: NavIcon
+    normal: NavIcon
+  }
+}
+
 export default function NavLink({
   name,
   href,
   iconMap,
-}: {
-  name: string
-  href: string
-  iconMap: { selected: any; normal: any }
-}) {
+}: NavLinkProps) {
   const segment = useSelectedLayoutSegment()
   const isActive = href.toLowerCase().split('/')?.pop() === segment?.toLowerCase()
   const NavIcon = isActive ? iconMap.selected : iconMap.normal

web/app/components/app/chat/icon-component/index.tsx

-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import { HandThumbDownIcon, HandThumbUpIcon } from '@heroicons/react/24/outline'
 
 export const stopIcon = (
   </svg>
 )
 
-export const OpeningStatementIcon: FC<{ className?: string }> = ({ className }) => (
+export const OpeningStatementIcon = ({ className }: SVGProps<SVGElement>) => (
   <svg className={className} width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path fillRule="evenodd" clipRule="evenodd" d="M6.25002 1C3.62667 1 1.50002 3.12665 1.50002 5.75C1.50002 6.28 1.58702 6.79071 1.7479 7.26801C1.7762 7.35196 1.79285 7.40164 1.80368 7.43828L1.80722 7.45061L1.80535 7.45452C1.79249 7.48102 1.77339 7.51661 1.73766 7.58274L0.911727 9.11152C0.860537 9.20622 0.807123 9.30503 0.770392 9.39095C0.733879 9.47635 0.674738 9.63304 0.703838 9.81878C0.737949 10.0365 0.866092 10.2282 1.05423 10.343C1.21474 10.4409 1.38213 10.4461 1.475 10.4451C1.56844 10.444 1.68015 10.4324 1.78723 10.4213L4.36472 10.1549C4.406 10.1506 4.42758 10.1484 4.44339 10.1472L4.44542 10.147L4.45161 10.1492C4.47103 10.1562 4.49738 10.1663 4.54285 10.1838C5.07332 10.3882 5.64921 10.5 6.25002 10.5C8.87338 10.5 11 8.37335 11 5.75C11 3.12665 8.87338 1 6.25002 1ZM4.48481 4.29111C5.04844 3.81548 5.7986 3.9552 6.24846 4.47463C6.69831 3.9552 7.43879 3.82048 8.01211 4.29111C8.58544 4.76175 8.6551 5.562 8.21247 6.12453C7.93825 6.47305 7.24997 7.10957 6.76594 7.54348C6.58814 7.70286 6.49924 7.78255 6.39255 7.81466C6.30103 7.84221 6.19589 7.84221 6.10436 7.81466C5.99767 7.78255 5.90878 7.70286 5.73098 7.54348C5.24694 7.10957 4.55867 6.47305 4.28444 6.12453C3.84182 5.562 3.92117 4.76675 4.48481 4.29111Z" fill="#667085" />
   </svg>
   return isLike ? <HandThumbUpIcon className='w-4 h-4' /> : <HandThumbDownIcon className='w-4 h-4' />
 }
 
-export const EditIcon: FC<{ className?: string }> = ({ className }) => {
+export const EditIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
     <path d="M14 11.9998L13.3332 12.7292C12.9796 13.1159 12.5001 13.3332 12.0001 13.3332C11.5001 13.3332 11.0205 13.1159 10.6669 12.7292C10.3128 12.3432 9.83332 12.1265 9.33345 12.1265C8.83359 12.1265 8.35409 12.3432 7.99998 12.7292M2 13.3332H3.11636C3.44248 13.3332 3.60554 13.3332 3.75899 13.2963C3.89504 13.2637 4.0251 13.2098 4.1444 13.1367C4.27895 13.0542 4.39425 12.9389 4.62486 12.7083L13 4.33316C13.5523 3.78087 13.5523 2.88544 13 2.33316C12.4477 1.78087 11.5523 1.78087 11 2.33316L2.62484 10.7083C2.39424 10.9389 2.27894 11.0542 2.19648 11.1888C2.12338 11.3081 2.0695 11.4381 2.03684 11.5742C2 11.7276 2 11.8907 2 12.2168V13.3332Z" stroke="#6B7280" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-export const EditIconSolid: FC<{ className?: string }> = ({ className }) => {
+export const EditIconSolid = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
     <path fillRule="evenodd" clipRule="evenodd" d="M10.8374 8.63108C11.0412 8.81739 11.0554 9.13366 10.8691 9.33747L10.369 9.88449C10.0142 10.2725 9.52293 10.5001 9.00011 10.5001C8.47746 10.5001 7.98634 10.2727 7.63157 9.8849C7.45561 9.69325 7.22747 9.59515 7.00014 9.59515C6.77271 9.59515 6.54446 9.69335 6.36846 9.88517C6.18177 10.0886 5.86548 10.1023 5.66201 9.91556C5.45853 9.72888 5.44493 9.41259 5.63161 9.20911C5.98678 8.82201 6.47777 8.59515 7.00014 8.59515C7.52251 8.59515 8.0135 8.82201 8.36867 9.20911L8.36924 9.20974C8.54486 9.4018 8.77291 9.50012 9.00011 9.50012C9.2273 9.50012 9.45533 9.40182 9.63095 9.20979L10.131 8.66276C10.3173 8.45895 10.6336 8.44476 10.8374 8.63108Z" fill="#6B7280" />
     <path fillRule="evenodd" clipRule="evenodd" d="M7.89651 1.39656C8.50599 0.787085 9.49414 0.787084 10.1036 1.39656C10.7131 2.00604 10.7131 2.99419 10.1036 3.60367L3.82225 9.88504C3.81235 9.89494 3.80254 9.90476 3.79281 9.91451C3.64909 10.0585 3.52237 10.1855 3.3696 10.2791C3.23539 10.3613 3.08907 10.4219 2.93602 10.4587C2.7618 10.5005 2.58242 10.5003 2.37897 10.5001C2.3652 10.5001 2.35132 10.5001 2.33732 10.5001H1.50005C1.22391 10.5001 1.00005 10.2763 1.00005 10.0001V9.16286C1.00005 9.14886 1.00004 9.13497 1.00003 9.1212C0.999836 8.91776 0.999669 8.73838 1.0415 8.56416C1.07824 8.4111 1.13885 8.26479 1.22109 8.13058C1.31471 7.97781 1.44166 7.85109 1.58566 7.70736C1.5954 7.69764 1.60523 7.68783 1.61513 7.67793L7.89651 1.39656Z" fill="#6B7280" />

web/app/components/app/configuration/config-var/index.tsx

 import VarIcon from '../base/icons/var-icon'
 import EditModel from './config-model'
 import IconTypeIcon from './input-type-icon'
+import type { IInputTypeIconProps } from './input-type-icon'
 import s from './style.module.css'
 import Tooltip from '@/app/components/base/tooltip'
 import type { PromptVariable } from '@/models/debug'
     return obj
   })()
 
-  const updatePromptVariable = (key: string, updateKey: string, newValue: any) => {
-    const newPromptVariables = promptVariables.map((item, i) => {
+  const updatePromptVariable = (key: string, updateKey: string, newValue: string | boolean) => {
+    const newPromptVariables = promptVariables.map((item) => {
       if (item.key === key) {
         return {
           ...item,
                 <tr key={index} className="h-9 leading-9">
                   <td className="w-[160px] border-b border-gray-100 pl-3">
                     <div className='flex items-center space-x-1'>
-                      <IconTypeIcon type={type} />
+                      <IconTypeIcon type={type as IInputTypeIconProps['type']} />
                       {!readonly
                         ? (
                           <input

web/app/components/app/configuration/config-var/input-type-icon.tsx

 import React from 'react'
 import type { FC } from 'react'
 
-type IInputTypeIconProps = {
+export type IInputTypeIconProps = {
   type: 'string' | 'select'
 }
 

web/app/components/app/log/index.tsx

 'use client'
-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import React, { useState } from 'react'
 import useSWR from 'swr'
 import { usePathname } from 'next/navigation'
 // Custom page count is not currently supported.
 const limit = 10
 
-const ThreeDotsIcon: FC<{ className?: string }> = ({ className }) => {
+const ThreeDotsIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>

web/app/components/app/overview/appCard.tsx

 'use client'
-import type { FC } from 'react'
+import type { HTMLProps } from 'react'
 import React, { useMemo, useState } from 'react'
 import {
   Cog8ToothIcon,
   onGenerateCode?: () => Promise<void>
 }
 
-const EmbedIcon: FC<{ className?: string }> = ({ className = '' }) => {
+const EmbedIcon = ({ className = '' }: HTMLProps<HTMLDivElement>) => {
   return <div className={`${style.codeBrowserIcon} ${className}`}></div>
 }
 

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

 import type { ChangeEvent, FC } from 'react'
 import React, { useState } from 'react'
 import data from '@emoji-mart/data'
+import type { Emoji, EmojiMartData } from '@emoji-mart/data'
 import { SearchIndex, init } from 'emoji-mart'
 import cn from 'classnames'
 import {
 init({ data })
 
 async function search(value: string) {
-  const emojis = await SearchIndex.search(value) || []
+  const emojis: Emoji[] = await SearchIndex.search(value) || []
 
-  const results = emojis.map((emoji: any) => {
+  const results = emojis.map((emoji) => {
     return emoji.skins[0].native
   })
   return results
   '#ECE9FE',
   '#FFE4E8',
 ]
+
 type IEmojiPickerProps = {
   isModal?: boolean
   onSelect?: (emoji: string, background: string) => void
   isModal = true,
   onSelect,
   onClose,
-
 }) => {
   const { t } = useTranslation()
-  const { categories } = data as any
+  const { categories } = data as EmojiMartData
   const [selectedEmoji, setSelectedEmoji] = useState('')
   const [selectedBackground, setSelectedBackground] = useState(backgroundColors[0])
 
-  const [searchedEmojis, setSearchedEmojis] = useState([])
+  const [searchedEmojis, setSearchedEmojis] = useState<string[]>([])
   const [isSearching, setIsSearching] = useState(false)
 
   return isModal ? <Modal
         </div>
       </>}
 
-      {categories.map((category: any, index: number) => {
+      {categories.map((category, index: number) => {
         return <div key={`category-${index}`} className='flex flex-col'>
           <p className='font-medium uppercase text-xs text-[#101828] mb-1'>{category.id}</p>
           <div className='w-full h-full grid grid-cols-8 gap-1'>
-            {category.emojis.map((emoji: string, index: number) => {
+            {category.emojis.map((emoji, index: number) => {
               return <div
                 key={`emoji-${index}`}
                 className='inline-flex w-10 h-10 rounded-lg items-center justify-center'

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

 'use client'
-import type { FC } from 'react'
+import type { SVGProps } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import s from './style.module.css'
   placeholder?: string
   value?: string
   defaultValue?: string
-  onChange?: (v: any) => void
+  onChange?: (v: string) => void
   className?: string
   wrapperClassName?: string
   type?: string
   prefixIcon?: React.ReactNode
 }
 
-const GlassIcon: FC<{ className?: string }> = ({ className }) => (
+const GlassIcon = ({ className }: SVGProps<SVGElement>) => (
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M12.25 12.25L10.2084 10.2083M11.6667 6.70833C11.6667 9.44675 9.44675 11.6667 6.70833 11.6667C3.96992 11.6667 1.75 9.44675 1.75 6.70833C1.75 3.96992 3.96992 1.75 6.70833 1.75C9.44675 1.75 11.6667 3.96992 11.6667 6.70833Z" stroke="#344054" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 )
 
-const Input: FC<InputProps> = ({ value, defaultValue, onChange, className = '', wrapperClassName = '', placeholder, type, showPrefix, prefixIcon }) => {
+const Input = ({ value, defaultValue, onChange, className = '', wrapperClassName = '', placeholder, type, showPrefix, prefixIcon }: InputProps) => {
   const [localValue, setLocalValue] = useState(value ?? defaultValue)
   const { t } = useTranslation()
   return (
       <input
         type={type ?? 'text'}
         className={`${s.input} ${showPrefix ? '!pl-7' : ''} ${className}`}
-        placeholder={placeholder ?? (showPrefix ? t('common.operation.search') : 'please input')}
+        placeholder={placeholder ?? (showPrefix ? t('common.operation.search') ?? '' : 'please input')}
         value={localValue}
         onChange={(e) => {
           setLocalValue(e.target.value)

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

   type?: IconTypes
   name?: string | null
   className?: string
-  src?: string | null | Pick<DataSourceNotionPage, 'page_icon'>['page_icon']
+  src?: string | null | DataSourceNotionPage['page_icon']
 }
 const NotionIcon = ({
   type = 'workspace',

web/app/components/base/notion-page-selector/base.tsx

 import { preImportNotionPages } from '@/service/datasets'
 import AccountSetting from '@/app/components/header/account-setting'
 import { NotionConnector } from '@/app/components/datasets/create/step-one'
-import type { DataSourceNotionPage, DataSourceNotionPageMap, DataSourceNotionWorkspace } from '@/models/common'
+import type { DataSourceNotionPageMap, DataSourceNotionWorkspace, NotionPage } from '@/models/common'
 import { ToastContext } from '@/app/components/base/toast'
 
-export type NotionPageSelectorValue = DataSourceNotionPage & { workspace_id: string }
 
 type NotionPageSelectorProps = {
   value?: string[]
-  onSelect: (selectedPages: NotionPageSelectorValue[]) => void
+  onSelect: (selectedPages: NotionPage[]) => void
   canPreview?: boolean
   previewPageId?: string
-  onPreview?: (selectedPage: NotionPageSelectorValue) => void
+  onPreview?: (selectedPage: NotionPage) => void
   datasetId?: string
   countLimit: number
   countUsed: number

web/app/components/base/radio/component/radio/index.tsx

   checked?: boolean
   value?: string | number
   disabled?: boolean
-  onChange?: (e: any) => void
+  onChange?: (e?: IRadioProps['value']) => void
 }
 
 export default function Radio({

web/app/components/datasets/create/embedding-process/index.tsx

     setIndexingStatusDetail(status.data)
   }
 
-  const [runId, setRunId, getRunId] = useGetState<any>(null)
+  const [_, setRunId, getRunId] = useGetState<ReturnType<typeof setInterval>>()
 
   const stopQueryStatus = () => {
     clearInterval(getRunId())
   }
 
   const isEmbedding = useMemo(() => {
-    return indexingStatusBatchDetail.some((indexingStatusDetail: { indexing_status: any }) => ['indexing', 'splitting', 'parsing', 'cleaning'].includes(indexingStatusDetail?.indexing_status || ''))
+    return indexingStatusBatchDetail.some(indexingStatusDetail => ['indexing', 'splitting', 'parsing', 'cleaning'].includes(indexingStatusDetail?.indexing_status || ''))
   }, [indexingStatusBatchDetail])
   const isEmbeddingCompleted = useMemo(() => {
-    return indexingStatusBatchDetail.every((indexingStatusDetail: { indexing_status: any }) => ['completed', 'error'].includes(indexingStatusDetail?.indexing_status || ''))
+    return indexingStatusBatchDetail.every(indexingStatusDetail => ['completed', 'error'].includes(indexingStatusDetail?.indexing_status || ''))
   }, [indexingStatusBatchDetail])
 
   const getSourceName = (id: string) => {
     const doc = documents.find(document => document.id === id)
     return doc?.data_source_type as DataSourceType
   }
+
   const getIcon = (id: string) => {
-    const doc = documents.find(document => document.id === id) as any // TODO type fix
+    const doc = documents.find(document => document.id === id)
 
-    return doc.data_source_info.notion_page_icon
+    return doc?.data_source_info.notion_page_icon
   }
   const isSourceEmbedding = (detail: IndexingStatusResponse) => ['indexing', 'splitting', 'parsing', 'cleaning', 'waiting'].includes(detail.indexing_status || '')
 

web/app/components/datasets/create/file-uploader/index.tsx

   titleClassName?: string
   prepareFileList: (files: FileItem[]) => void
   onFileUpdate: (fileItem: FileItem, progress: number, list: FileItem[]) => void
-  onFileListUpdate?: (files: any) => void
+  onFileListUpdate?: (files: FileItem[]) => void
   onPreview: (file: File) => void
   countLimit: number
   countUsed: number

web/app/components/datasets/create/index.tsx

 import type { DataSet, FileItem, createDocumentResponse } from '@/models/datasets'
 import { fetchDataSource } from '@/service/common'
 import { fetchDataDetail } from '@/service/datasets'
-import type { DataSourceNotionPage } from '@/models/common'
+import type { NotionPage } from '@/models/common'
 import { useProviderContext } from '@/context/provider-context'
 
 import AccountSetting from '@/app/components/header/account-setting'
 
-type Page = DataSourceNotionPage & { workspace_id: string }
-
 type DatasetUpdateFormProps = {
   datasetId?: string
 }
   const [hasError, setHasError] = useState(false)
   const { embeddingsDefaultModel } = useProviderContext()
 
-  const [notionPages, setNotionPages] = useState<Page[]>([])
-  const updateNotionPages = (value: Page[]) => {
+  const [notionPages, setNotionPages] = useState<NotionPage[]>([])
+  const updateNotionPages = (value: NotionPage[]) => {
     setNotionPages(value)
   }
 

web/app/components/datasets/create/notion-page-preview/index.tsx

 import cn from 'classnames'
 import { XMarkIcon } from '@heroicons/react/20/solid'
 import s from './index.module.css'
-import type { DataSourceNotionPage } from '@/models/common'
+import type { NotionPage } from '@/models/common'
 import NotionIcon from '@/app/components/base/notion-icon'
 import { fetchNotionPagePreview } from '@/service/datasets'
 
-type Page = DataSourceNotionPage & { workspace_id: string }
 type IProps = {
-  currentPage?: Page
+  currentPage?: NotionPage
   hidePreview: () => void
 }
 

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

 import EmptyDatasetCreationModal from '../empty-dataset-creation-modal'
 import s from './index.module.css'
 import type { FileItem } from '@/models/datasets'
-import type { DataSourceNotionPage } from '@/models/common'
+import type { NotionPage } from '@/models/common'
 import { DataSourceType } from '@/models/datasets'
 import Button from '@/app/components/base/button'
 import { NotionPageSelector } from '@/app/components/base/notion-page-selector'
   files: FileItem[]
   updateFileList: (files: FileItem[]) => void
   updateFile: (fileItem: FileItem, progress: number, list: FileItem[]) => void
-  notionPages?: any[]
-  updateNotionPages: (value: any[]) => void
+  notionPages?: NotionPage[]
+  updateNotionPages: (value: NotionPage[]) => void
   onStepChange: () => void
   changeType: (type: DataSourceType) => void
 }
 
-type Page = DataSourceNotionPage & { workspace_id: string }
-
 type NotionConnectorProps = {
   onSetting: () => void
 }

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

 
 import Toast from '@/app/components/base/toast'
 import { formatNumber } from '@/utils/format'
-import type { DataSourceNotionPage } from '@/models/common'
+import type { NotionPage } from '@/models/common'
 import { DataSourceType, DocForm } from '@/models/datasets'
 import NotionIcon from '@/app/components/base/notion-icon'
 import Switch from '@/app/components/base/switch'
 import I18n from '@/context/i18n'
 import { IS_CE_EDITION } from '@/config'
 
-type Page = DataSourceNotionPage & { workspace_id: string }
-
 type StepTwoProps = {
   isSetting?: boolean
   documentDetail?: FullDocumentDetail
   indexingType?: string
   dataSourceType: DataSourceType
   files: CustomFile[]
-  notionPages?: Page[]
+  notionPages?: NotionPage[]
   onStepChange?: (delta: number) => void
   updateIndexingTypeCache?: (type: string) => void
   updateResultCache?: (res: createDocumentResponse) => void
     return segmentationType === SegmentType.AUTO ? automaticFileIndexingEstimate : customFileIndexingEstimate
   })()
 
-  const scrollHandle = (e: any) => {
-    if (e.target.scrollTop > 0)
+  const scrollHandle = (e: Event) => {
+    if ((e.target as HTMLDivElement).scrollTop > 0)
       setScrolled(true)
 
     else
       setScrolled(false)
   }
 
-  const previewScrollHandle = (e: any) => {
-    if (e.target.scrollTop > 0)
+  const previewScrollHandle = (e: Event) => {
+    if ((e.target as HTMLDivElement).scrollTop > 0)
       setPreviewScrolled(true)
 
     else

web/app/components/datasets/documents/detail/completed/InfiniteVirtualList.tsx

   hasNextPage?: boolean // Are there more items to load? (This information comes from the most recent API request.)
   isNextPageLoading: boolean // Are we currently loading a page of items? (This may be an in-flight flag in your Redux store for example.)
   items: Array<SegmentDetailModel[]> // Array of items loaded so far.
-  loadNextPage: () => Promise<any> // Callback function responsible for loading the next page of items.
+  loadNextPage: () => Promise<void> // Callback function responsible for loading the next page of items.
   onClick: (detail: SegmentDetailModel) => void
   onChangeSwitch: (segId: string, enabled: boolean) => Promise<void>
   onDelete: (segId: string) => Promise<void>

web/app/components/datasets/documents/detail/completed/SegmentCard.tsx

     hit_count,
     index_node_hash,
     answer,
-  } = detail as any
+  } = detail as Required<ISegmentCardProps>['detail']
   const isDocScene = scene === 'doc'
   const [showModal, setShowModal] = useState(false)
 

web/app/components/datasets/documents/detail/completed/index.tsx

       </div>
       <div className={cn(s.footer, s.numberInfo)}>
         <div className='flex items-center'>
-          <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as any)} {t('datasetDocuments.segment.characters')}</span>
-          <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as any)} {t('datasetDocuments.segment.hitCount')}</span>
+          <div className={cn(s.commonIcon, s.typeSquareIcon)} /><span className='mr-8'>{formatNumber(segInfo?.word_count as number)} {t('datasetDocuments.segment.characters')}</span>
+          <div className={cn(s.commonIcon, s.targetIcon)} /><span className='mr-8'>{formatNumber(segInfo?.hit_count as number)} {t('datasetDocuments.segment.hitCount')}</span>
           <div className={cn(s.commonIcon, s.bezierCurveIcon)} /><span className={s.hashText}>{t('datasetDocuments.segment.vectorHash')}{segInfo?.index_node_hash}</span>
         </div>
         <div className='flex items-center'>

web/app/components/datasets/documents/detail/embedding/index.tsx

-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import useSWR from 'swr'
 import { useRouter } from 'next/navigation'
   detailUpdate: VoidFunction
 }
 
-const StopIcon: FC<{ className?: string }> = ({ className }) => {
+const StopIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <g clip-path="url(#clip0_2328_2798)">
       <path d="M1.5 3.9C1.5 3.05992 1.5 2.63988 1.66349 2.31901C1.8073 2.03677 2.03677 1.8073 2.31901 1.66349C2.63988 1.5 3.05992 1.5 3.9 1.5H8.1C8.94008 1.5 9.36012 1.5 9.68099 1.66349C9.96323 1.8073 10.1927 2.03677 10.3365 2.31901C10.5 2.63988 10.5 3.05992 10.5 3.9V8.1C10.5 8.94008 10.5 9.36012 10.3365 9.68099C10.1927 9.96323 9.96323 10.1927 9.68099 10.3365C9.36012 10.5 8.94008 10.5 8.1 10.5H3.9C3.05992 10.5 2.63988 10.5 2.31901 10.3365C2.03677 10.1927 1.8073 9.96323 1.66349 9.68099C1.5 9.36012 1.5 8.94008 1.5 8.1V3.9Z" stroke="#344054" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-const ResumeIcon: FC<{ className?: string }> = ({ className }) => {
+const ResumeIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M10 3.5H5C3.34315 3.5 2 4.84315 2 6.5C2 8.15685 3.34315 9.5 5 9.5H10M10 3.5L8 1.5M10 3.5L8 5.5" stroke="#344054" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>

web/app/components/datasets/documents/index.tsx

 import { createDocument, fetchDocuments } from '@/service/datasets'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import { NotionPageSelectorModal } from '@/app/components/base/notion-page-selector'
-import type { DataSourceNotionPage } from '@/models/common'
+import type { NotionPage } from '@/models/common'
 import type { CreateDocumentReq } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
 
 // Custom page count is not currently supported.
 const limit = 15
 
-const FolderPlusIcon: FC<{ className?: string }> = ({ className }) => {
+const FolderPlusIcon = ({ className }: React.SVGProps<SVGElement>) => {
   return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M10.8332 5.83333L9.90355 3.9741C9.63601 3.439 9.50222 3.17144 9.30265 2.97597C9.12615 2.80311 8.91344 2.67164 8.6799 2.59109C8.41581 2.5 8.11668 2.5 7.51841 2.5H4.33317C3.39975 2.5 2.93304 2.5 2.57652 2.68166C2.26292 2.84144 2.00795 3.09641 1.84816 3.41002C1.6665 3.76654 1.6665 4.23325 1.6665 5.16667V5.83333M1.6665 5.83333H14.3332C15.7333 5.83333 16.4334 5.83333 16.9681 6.10582C17.4386 6.3455 17.821 6.72795 18.0607 7.19836C18.3332 7.73314 18.3332 8.4332 18.3332 9.83333V13.5C18.3332 14.9001 18.3332 15.6002 18.0607 16.135C17.821 16.6054 17.4386 16.9878 16.9681 17.2275C16.4334 17.5 15.7333 17.5 14.3332 17.5H5.6665C4.26637 17.5 3.56631 17.5 3.03153 17.2275C2.56112 16.9878 2.17867 16.6054 1.93899 16.135C1.6665 15.6002 1.6665 14.9001 1.6665 13.5V5.83333ZM9.99984 14.1667V9.16667M7.49984 11.6667H12.4998" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-const ThreeDotsIcon: FC<{ className?: string }> = ({ className }) => {
+const ThreeDotsIcon = ({ className }: React.SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M5 6.5V5M8.93934 7.56066L10 6.5M10.0103 11.5H11.5103" stroke="#374151" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-const NotionIcon: FC<{ className?: string }> = ({ className }) => {
+const NotionIcon = ({ className }: React.SVGProps<SVGElement>) => {
   return <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <g clip-path="url(#clip0_2164_11263)">
       <path fillRule="evenodd" clipRule="evenodd" d="M3.5725 18.2611L1.4229 15.5832C0.905706 14.9389 0.625 14.1466 0.625 13.3312V3.63437C0.625 2.4129 1.60224 1.39936 2.86295 1.31328L12.8326 0.632614C13.5569 0.583164 14.2768 0.775682 14.8717 1.17794L18.3745 3.5462C19.0015 3.97012 19.375 4.66312 19.375 5.40266V16.427C19.375 17.6223 18.4141 18.6121 17.1798 18.688L6.11458 19.3692C5.12958 19.4298 4.17749 19.0148 3.5725 18.2611Z" fill="white" />
 
   const isLoading = !documentsRes && !error
 
-  const handleSaveNotionPageSelected = async (selectedPages: (DataSourceNotionPage & { workspace_id: string })[]) => {
+  const handleSaveNotionPageSelected = async (selectedPages: NotionPage[]) => {
     const workspacesMap = groupBy(selectedPages, 'workspace_id')
     const workspaces = Object.keys(workspacesMap).map((workspaceId) => {
       return {

web/app/components/datasets/documents/list.tsx

 /* eslint-disable no-mixed-operators */
 'use client'
-import type { FC } from 'react'
+import type { FC, SVGProps } from 'react'
 import React, { useEffect, useState } from 'react'
 import { ArrowDownIcon, TrashIcon } from '@heroicons/react/24/outline'
 import { ExclamationCircleIcon } from '@heroicons/react/24/solid'
 import type { CommonResponse } from '@/models/common'
 import { DotsHorizontal, HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
 
-export const SettingsIcon: FC<{ className?: string }> = ({ className }) => {
+export const SettingsIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M2 5.33325L10 5.33325M10 5.33325C10 6.43782 10.8954 7.33325 12 7.33325C13.1046 7.33325 14 6.43782 14 5.33325C14 4.22868 13.1046 3.33325 12 3.33325C10.8954 3.33325 10 4.22868 10 5.33325ZM6 10.6666L14 10.6666M6 10.6666C6 11.7712 5.10457 12.6666 4 12.6666C2.89543 12.6666 2 11.7712 2 10.6666C2 9.56202 2.89543 8.66659 4 8.66659C5.10457 8.66659 6 9.56202 6 10.6666Z" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-export const SyncIcon: FC<{ className?: string }> = () => {
+export const SyncIcon = () => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M5.69773 13.1783C7.29715 13.8879 9.20212 13.8494 10.8334 12.9075C13.5438 11.3427 14.4724 7.87704 12.9076 5.16672L12.7409 4.87804M3.09233 10.8335C1.52752 8.12314 2.45615 4.65746 5.16647 3.09265C6.7978 2.15081 8.70277 2.11227 10.3022 2.82185M1.66226 10.8892L3.48363 11.3773L3.97166 9.5559M12.0284 6.44393L12.5164 4.62256L14.3378 5.1106" stroke="#667085" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
   </svg>
 }
 
-export const FilePlusIcon: FC<{ className?: string }> = ({ className }) => {
+export const FilePlusIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M13.3332 6.99992V4.53325C13.3332 3.41315 13.3332 2.85309 13.1152 2.42527C12.9234 2.04895 12.6175 1.74299 12.2412 1.55124C11.8133 1.33325 11.2533 1.33325 10.1332 1.33325H5.8665C4.7464 1.33325 4.18635 1.33325 3.75852 1.55124C3.3822 1.74299 3.07624 2.04895 2.88449 2.42527C2.6665 2.85309 2.6665 3.41315 2.6665 4.53325V11.4666C2.6665 12.5867 2.6665 13.1467 2.88449 13.5746C3.07624 13.9509 3.3822 14.2569 3.75852 14.4486C4.18635 14.6666 4.7464 14.6666 5.8665 14.6666H7.99984M9.33317 7.33325H5.33317M6.6665 9.99992H5.33317M10.6665 4.66659H5.33317M11.9998 13.9999V9.99992M9.99984 11.9999H13.9998" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 }
 
-export const ArchiveIcon: FC<{ className?: string }> = ({ className }) => {
+export const ArchiveIcon = ({ className }: SVGProps<SVGElement>) => {
   return <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className={className ?? ''}>
     <path d="M2.66683 5.33106C2.55749 5.32824 2.47809 5.32191 2.40671 5.30771C1.87779 5.2025 1.46432 4.78904 1.35912 4.26012C1.3335 4.13132 1.3335 3.97644 1.3335 3.66667C1.3335 3.3569 1.3335 3.20201 1.35912 3.07321C1.46432 2.54429 1.87779 2.13083 2.40671 2.02562C2.53551 2 2.69039 2 3.00016 2H13.0002C13.3099 2 13.4648 2 13.5936 2.02562C14.1225 2.13083 14.536 2.54429 14.6412 3.07321C14.6668 3.20201 14.6668 3.3569 14.6668 3.66667C14.6668 3.97644 14.6668 4.13132 14.6412 4.26012C14.536 4.78904 14.1225 5.2025 13.5936 5.30771C13.5222 5.32191 13.4428 5.32824 13.3335 5.33106M6.66683 8.66667H9.3335M2.66683 5.33333H13.3335V10.8C13.3335 11.9201 13.3335 12.4802 13.1155 12.908C12.9238 13.2843 12.6178 13.5903 12.2415 13.782C11.8137 14 11.2536 14 10.1335 14H5.86683C4.74672 14 4.18667 14 3.75885 13.782C3.38252 13.5903 3.07656 13.2843 2.88482 12.908C2.66683 12.4802 2.66683 11.9201 2.66683 10.8V5.33333Z" stroke="#667085" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>

web/app/components/datasets/hit-testing/hit-detail.tsx

         <div className={s.keywordWrapper}>
           {!segInfo?.keywords?.length
             ? '-'
-            : segInfo?.keywords?.map((word: any) => {
+            : segInfo?.keywords?.map((word) => {
               return <div className={s.keyword}>{word}</div>
             })}
         </div>

web/app/components/explore/app-list/index.tsx

 import Toast from '../../base/toast'
 import s from './style.module.css'
 import ExploreContext from '@/context/explore-context'
-import type { App } from '@/models/explore'
+import type { App, AppCategory } from '@/models/explore'
 import Category from '@/app/components/explore/category'
 import AppCard from '@/app/components/explore/app-card'
 import { fetchAppDetail, fetchAppList, installApp } from '@/service/explore'
   const { t } = useTranslation()
   const router = useRouter()
   const { setControlUpdateInstalledApps, hasEditPermission } = useContext(ExploreContext)
-  const [currCategory, setCurrCategory] = React.useState('')
+  const [currCategory, setCurrCategory] = React.useState<AppCategory | ''>('')
   const [allList, setAllList] = React.useState<App[]>([])
   const [isLoaded, setIsLoaded] = React.useState(false)
 
       return allList
     return allList.filter(item => item.category === currCategory)
   })()
-  const [categories, setCategories] = React.useState([])
+
+  const [categories, setCategories] = React.useState<AppCategory[]>([])
   useEffect(() => {
     (async () => {
       const { categories, recommended_apps }: any = await fetchAppList()

web/app/components/explore/category.tsx

 import { useTranslation } from 'react-i18next'
 import cn from 'classnames'
 import exploreI18n from '@/i18n/lang/explore.en'
+import type { AppCategory } from '@/models/explore'
 
 const categoryI18n = exploreI18n.category
 
 export type ICategoryProps = {
   className?: string
-  list: string[]
+  list: AppCategory[]
   value: string
-  onChange: (value: string) => void
+  onChange: (value: AppCategory | '') => void
 }
 
 const Category: FC<ICategoryProps> = ({
           style={itemStyle(name === value)}
           onClick={() => onChange(name)}
         >
-          {(categoryI18n as any)[name] ? t(`explore.category.${name}`) : name}
+          {categoryI18n[name] ? t(`explore.category.${name}`) : name}
         </div>
       ))}
     </div>

web/app/components/header/account-setting/index.tsx

   ]
   const scrollRef = useRef<HTMLDivElement>(null)
   const [scrolled, setScrolled] = useState(false)
-  const scrollHandle = (e: any) => {
-    if (e.target.scrollTop > 0)
+  const scrollHandle = (e: Event) => {
+    if ((e.target as HTMLDivElement).scrollTop > 0)
       setScrolled(true)
 
     else

web/app/components/header/account-setting/model-page/model-item/Card.tsx

 type CardProps = {
   providerType: ProviderEnum
   models: Model[]
-  onOpenModal: (v: any) => void
+  onOpenModal: (v: Omit<Model, 'config'> & Model['config']) => void
   onOperate: (v: Record<string, any>) => void
 }
 

web/app/components/share/text-generation/result/index.tsx

 
     setResponsingTrue()
     sendCompletionMessage(data, {
-      onData: (data: string, _isFirstMessage: boolean, { messageId }: any) => {
+      onData: (data: string, _isFirstMessage: boolean, { messageId }) => {
         tempMessageId = messageId
         res.push(data)
         setCompletionRes(res.join(''))

web/models/common.ts

   is_bound: boolean
 }
 
+export type NotionPage = DataSourceNotionPage & {
+  workspace_id: string
+}
+
 export type DataSourceNotionPageMap = Record<string, DataSourceNotionPage & { workspace_id: string }>
 
 export type DataSourceNotionWorkspace = {

web/models/explore.ts

   icon_background: string
 }
 
+export type AppCategory = 'Writing' | 'Translate' | 'HR' | 'Programming' | 'Assistant'
+
 export type App = {
   app: AppBasicInfo
   app_id: string
   description: string
   copyright: string
   privacy_policy: string
-  category: string
+  category: AppCategory
   position: number
   is_listed: boolean
   install_count: number