Merge branch 'main' into feat/plugin-auto-upgrade-fe

web/app/components/base/date-and-time-picker/common/option-list-item.tsx

@@ -4,18 +4,21 @@ import cn from '@/utils/classnames'
 type OptionListItemProps = {
   isSelected: boolean
   onClick: () => void
+  noAutoScroll?: boolean
 } & React.LiHTMLAttributes<HTMLLIElement>
 
 const OptionListItem: FC<OptionListItemProps> = ({
   isSelected,
   onClick,
+  noAutoScroll,
   children,
 }) => {
   const listItemRef = useRef<HTMLLIElement>(null)
 
   useEffect(() => {
-    if (isSelected)
+    if (isSelected && !noAutoScroll)
       listItemRef.current?.scrollIntoView({ behavior: 'instant' })
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (

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

@@ -1,13 +1,18 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 
-const Header = () => {
+type Props = {
+  title?: string
+}
+const Header = ({
+  title,
+}: Props) => {
   const { t } = useTranslation()
 
   return (
     <div className='flex flex-col border-b-[0.5px] border-divider-regular'>
       <div className='system-md-semibold flex items-center px-2 py-1.5 text-text-primary'>
-        {t('time.title.pickTime')}
+        {title || t('time.title.pickTime')}
       </div>
     </div>
   )

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

@@ -20,6 +20,9 @@ const TimePicker = ({
   onChange,
   onClear,
   renderTrigger,
+  title,
+  minuteFilter,
+  popupClassName,
 }: TimePickerProps) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
@@ -108,18 +111,7 @@ const TimePicker = ({
   const displayValue = value?.format(timeFormat) || ''
   const placeholderDate = isOpen && selectedTime ? selectedTime.format(timeFormat) : (placeholder || t('time.defaultPlaceholder'))
 
-  return (
-    <PortalToFollowElem
-      open={isOpen}
-      onOpenChange={setIsOpen}
-      placement='bottom-end'
-    >
-      <PortalToFollowElemTrigger>
-        {renderTrigger ? (renderTrigger()) : (
-          <div
-            className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
-            onClick={handleClickTrigger}
-          >
+  const inputElem = (
     <input
       className='system-xs-regular flex-1 cursor-pointer appearance-none truncate bg-transparent p-1
             text-components-input-text-filled outline-none placeholder:text-components-input-text-placeholder'
@@ -127,6 +119,24 @@ const TimePicker = ({
       value={isOpen ? '' : displayValue}
       placeholder={placeholderDate}
     />
+  )
+  return (
+    <PortalToFollowElem
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      placement='bottom-end'
+    >
+      <PortalToFollowElemTrigger>
+        {renderTrigger ? (renderTrigger({
+          inputElem,
+          onClick: handleClickTrigger,
+          isOpen,
+        })) : (
+          <div
+            className='group flex w-[252px] cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal px-2 py-1 hover:bg-state-base-hover-alt'
+            onClick={handleClickTrigger}
+          >
+            {inputElem}
             <RiTimeLine className={cn(
               'h-4 w-4 shrink-0 text-text-quaternary',
               isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
@@ -142,14 +152,15 @@ const TimePicker = ({
           </div>
         )}
       </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-50'>
+      <PortalToFollowElemContent className={cn('z-50', popupClassName)}>
         <div className='mt-1 w-[252px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg shadow-shadow-shadow-5'>
           {/* Header */}
-          <Header />
+          <Header title={title} />
 
           {/* Time Options */}
           <Options
             selectedTime={selectedTime}
+            minuteFilter={minuteFilter}
             handleSelectHour={handleSelectHour}
             handleSelectMinute={handleSelectMinute}
             handleSelectPeriod={handleSelectPeriod}

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

@@ -5,6 +5,7 @@ import OptionListItem from '../common/option-list-item'
 
 const Options: FC<TimeOptionsProps> = ({
   selectedTime,
+  minuteFilter,
   handleSelectHour,
   handleSelectMinute,
   handleSelectPeriod,
@@ -33,7 +34,7 @@ const Options: FC<TimeOptionsProps> = ({
       {/* Minute */}
       <ul className='no-scrollbar flex h-[208px] flex-col gap-y-0.5 overflow-y-auto pb-[184px]'>
         {
-          minuteOptions.map((minute) => {
+          (minuteFilter ? minuteFilter(minuteOptions) : minuteOptions).map((minute) => {
             const isSelected = selectedTime?.format('mm') === minute
             return (
               <OptionListItem
@@ -57,6 +58,7 @@ const Options: FC<TimeOptionsProps> = ({
                 key={period}
                 isSelected={isSelected}
                 onClick={handleSelectPeriod.bind(null, period)}
+                noAutoScroll // if choose PM which would hide(scrolled) AM that may make user confused that there's no am.
               >
                 {period}
               </OptionListItem>

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

@@ -28,6 +28,7 @@ export type DatePickerProps = {
   onClear: () => void
   triggerWrapClassName?: string
   renderTrigger?: (props: TriggerProps) => React.ReactNode
+  minuteFilter?: (minutes: string[]) => string[]
   popupZIndexClassname?: string
 }
 
@@ -47,13 +48,21 @@ export type DatePickerFooterProps = {
   handleConfirmDate: () => void
 }
 
+export type TriggerParams = {
+  isOpen: boolean
+  inputElem: React.ReactNode
+  onClick: (e: React.MouseEvent) => void
+}
 export type TimePickerProps = {
   value: Dayjs | undefined
   timezone?: string
   placeholder?: string
   onChange: (date: Dayjs | undefined) => void
   onClear: () => void
-  renderTrigger?: () => React.ReactNode
+  renderTrigger?: (props: TriggerParams) => React.ReactNode
+  title?: string
+  minuteFilter?: (minutes: string[]) => string[]
+  popupClassName?: string
 }
 
 export type TimePickerFooterProps = {
@@ -81,6 +90,7 @@ export type CalendarItemProps = {
 
 export type TimeOptionsProps = {
   selectedTime: Dayjs | undefined
+  minuteFilter?: (minutes: string[]) => string[]
   handleSelectHour: (hour: string) => void
   handleSelectMinute: (minute: string) => void
   handleSelectPeriod: (period: Period) => void

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

@@ -2,6 +2,7 @@ import dayjs, { type Dayjs } from 'dayjs'
 import type { Day } from '../types'
 import utc from 'dayjs/plugin/utc'
 import timezone from 'dayjs/plugin/timezone'
+import tz from '@/utils/timezone.json'
 
 dayjs.extend(utc)
 dayjs.extend(timezone)
@@ -78,3 +79,14 @@ export const getHourIn12Hour = (date: Dayjs) => {
 export const getDateWithTimezone = (props: { date?: Dayjs, timezone?: string }) => {
   return props.date ? dayjs.tz(props.date, props.timezone) : dayjs().tz(props.timezone)
 }
+
+// Asia/Shanghai -> UTC+8
+const DEFAULT_OFFSET_STR = 'UTC+0'
+export const convertTimezoneToOffsetStr = (timezone?: string) => {
+  if(!timezone)
+    return DEFAULT_OFFSET_STR
+  const tzItem = tz.find(item => item.value === timezone)
+  if(!tzItem)
+    return DEFAULT_OFFSET_STR
+  return `UTC${tzItem.name.charAt(0)}${tzItem.name.charAt(2)}`
+}

web/app/components/base/icons/assets/vender/line/general/search-menu.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.0049 16C28.0049 20.4183 24.4231 24 20.0049 24C15.5866 24 12.0049 20.4183 12.0049 16C12.0049 11.5817 15.5866 8 20.0049 8C24.4231 8 28.0049 11.5817 28.0049 16Z" stroke="#676F83" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.00488 16H6.67155" stroke="#676F83" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.00488 9.33334H8.00488" stroke="#676F83" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.00488 22.6667H8.00488" stroke="#676F83" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M26 22L29.3333 25.3333" stroke="#676F83" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

web/app/components/base/icons/assets/vender/system/auto-update-line.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3308 16H14.2915L13.6249 13.9476H10.3761L9.70846 16H7.66918L10.7759 7H13.2281L16.3308 16ZM10.8595 12.4622H13.1435L12.0378 9.05639H11.9673L10.8595 12.4622Z" fill="black"/>
+</svg>

web/app/components/base/icons/src/public/tracing/WeaveIcon.tsx

@@ -4,12 +4,16 @@
 import * as React from 'react'
 import data from './WeaveIcon.json'
 import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
 
-const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
-  props,
+const Icon = (
+  {
     ref,
-) => <IconBase {...props} ref={ref} data={data as IconData} />)
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
 
 Icon.displayName = 'WeaveIcon'
 

web/app/components/base/icons/src/public/tracing/WeaveIconBig.tsx

@@ -4,12 +4,16 @@
 import * as React from 'react'
 import data from './WeaveIconBig.json'
 import IconBase from '@/app/components/base/icons/IconBase'
-import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
 
-const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
-  props,
+const Icon = (
+  {
     ref,
-) => <IconBase {...props} ref={ref} data={data as IconData} />)
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
 
 Icon.displayName = 'WeaveIconBig'
 

web/app/components/base/icons/src/vender/line/general/SearchMenu.json

@@ -0,0 +1,77 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "32",
+			"height": "32",
+			"viewBox": "0 0 32 32",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M28.0049 16C28.0049 20.4183 24.4231 24 20.0049 24C15.5866 24 12.0049 20.4183 12.0049 16C12.0049 11.5817 15.5866 8 20.0049 8C24.4231 8 28.0049 11.5817 28.0049 16Z",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4.00488 16H6.67155",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4.00488 9.33334H8.00488",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M4.00488 22.6667H8.00488",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M26 22L29.3333 25.3333",
+					"stroke": "currentColor",
+					"stroke-width": "2",
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "SearchMenu"
+}

web/app/components/base/icons/src/vender/line/general/SearchMenu.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './SearchMenu.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'SearchMenu'
+
+export default Icon

web/app/components/base/icons/src/vender/line/general/index.ts

@@ -19,6 +19,7 @@ export { default as Pin01 } from './Pin01'
 export { default as Pin02 } from './Pin02'
 export { default as Plus02 } from './Plus02'
 export { default as Refresh } from './Refresh'
+export { default as SearchMenu } from './SearchMenu'
 export { default as Settings01 } from './Settings01'
 export { default as Settings04 } from './Settings04'
 export { default as Target04 } from './Target04'

web/app/components/base/icons/src/vender/system/AutoUpdateLine.json

@@ -0,0 +1,37 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "24",
+			"height": "24",
+			"viewBox": "0 0 24 24",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M5.46257 4.43262C7.21556 2.91688 9.5007 2 12 2C17.5228 2 22 6.47715 22 12C22 14.1361 21.3302 16.1158 20.1892 17.7406L17 12H20C20 7.58172 16.4183 4 12 4C9.84982 4 7.89777 4.84827 6.46023 6.22842L5.46257 4.43262ZM18.5374 19.5674C16.7844 21.0831 14.4993 22 12 22C6.47715 22 2 17.5228 2 12C2 9.86386 2.66979 7.88416 3.8108 6.25944L7 12H4C4 16.4183 7.58172 20 12 20C14.1502 20 16.1022 19.1517 17.5398 17.7716L18.5374 19.5674Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"fill-rule": "evenodd",
+					"clip-rule": "evenodd",
+					"d": "M16.3308 16H14.2915L13.6249 13.9476H10.3761L9.70846 16H7.66918L10.7759 7H13.2281L16.3308 16ZM10.8595 12.4622H13.1435L12.0378 9.05639H11.9673L10.8595 12.4622Z",
+					"fill": "currentColor"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "AutoUpdateLine"
+}

web/app/components/base/icons/src/vender/system/AutoUpdateLine.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './AutoUpdateLine.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'AutoUpdateLine'
+
+export default Icon

web/app/components/base/icons/src/vender/system/index.ts

@@ -0,0 +1 @@
+export { default as AutoUpdateLine } from './AutoUpdateLine'

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -10,7 +10,7 @@ import type { ExposeRefs } from './install-multi'
 import InstallMulti from './install-multi'
 import { useInstallOrUpdate } from '@/service/use-plugins'
 import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
-import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-permission'
+import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { useMittContextSelector } from '@/context/mitt-context'
 import Checkbox from '@/app/components/base/checkbox'
 const i18nPrefix = 'plugin.installModal'

web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -35,7 +35,12 @@ import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { API_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
+import { AutoUpdateLine } from '../../base/icons/src/vender/system'
+import { convertUTCDaySecondsToLocalSeconds, timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
 import { getMarketplaceUrl } from '@/utils/var'
+import useReferenceSetting from '../plugin-page/use-reference-setting'
+import { AUTO_UPDATE_MODE } from '../reference-setting-modal/auto-update-setting/types'
+import { useAppContext } from '@/context/app-context'
 
 const i18nPrefix = 'plugin.action'
 
@@ -51,6 +56,8 @@ const DetailHeader = ({
   onUpdate,
 }: Props) => {
   const { t } = useTranslation()
+    const { userProfile: { timezone } } = useAppContext()
+
   const { theme } = useTheme()
   const locale = useGetLanguage()
   const { checkForUpdates, fetchReleases } = useGitHubReleases()
@@ -97,8 +104,24 @@ const DetailHeader = ({
     setFalse: hideUpdateModal,
   }] = useBoolean(false)
 
-  const handleUpdate = async () => {
+  const { referenceSetting } = useReferenceSetting()
+  const { auto_upgrade: autoUpgradeInfo } = referenceSetting || {}
+  const isAutoUpgradeEnabled = useMemo(() => {
+    if(!autoUpgradeInfo)
+      return false
+    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.update_all)
+      return true
+    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.partial && autoUpgradeInfo.include_plugins.includes(plugin_id))
+      return true
+    if(autoUpgradeInfo.upgrade_mode === AUTO_UPDATE_MODE.exclude && !autoUpgradeInfo.exclude_plugins.includes(plugin_id))
+      return true
+    return false
+  }, [autoUpgradeInfo, plugin_id])
+
+  const [isDowngrade, setIsDowngrade] = useState(false)
+  const handleUpdate = async (isDowngrade?: boolean) => {
     if (isFromMarketplace) {
+      setIsDowngrade(!!isDowngrade)
       showUpdateModal()
       return
     }
@@ -165,9 +188,6 @@ const DetailHeader = ({
     }
   }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders])
 
-  // #plugin TODO# used in apps
-  // const usedInApps = 3
-
   return (
     <div className={cn('shrink-0 border-b border-divider-subtle bg-components-panel-bg p-4 pb-3')}>
       <div className="flex">
@@ -186,7 +206,7 @@ const DetailHeader = ({
               currentVersion={version}
               onSelect={(state) => {
                 setTargetVersion(state)
-                handleUpdate()
+                handleUpdate(state.isDowngrade)
               }}
               trigger={
                 <Badge
@@ -206,6 +226,18 @@ const DetailHeader = ({
                 />
               }
             />
+            {/* Auto update info */}
+            {isAutoUpgradeEnabled && (
+              <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(autoUpgradeInfo?.upgrade_time_of_day || 0, timezone!)).format('hh:mm A') })}>
+                {/* add a a div to fix tooltip hover not show problem */}
+                <div>
+                  <Badge className='mr-1 cursor-pointer px-1'>
+                    <AutoUpdateLine className='size-3' />
+                  </Badge>
+                </div>
+              </Tooltip>
+            )}
+
             {(hasNewVersion || isFromGitHub) && (
               <Button variant='secondary-accent' size='small' className='!h-5' onClick={() => {
                 if (isFromMarketplace) {
@@ -290,6 +322,7 @@ const DetailHeader = ({
       {
         isShowUpdateModal && (
           <UpdateFromMarketplace
+            pluginId={plugin_id}
             payload={{
               category: detail.declaration.category,
               originalPackageInfo: {
@@ -303,6 +336,7 @@ const DetailHeader = ({
             }}
             onCancel={hideUpdateModal}
             onSave={handleUpdatedFromMarketplace}
+            isShowDowngradeWarningModal={isDowngrade && isAutoUpgradeEnabled}
           />
         )
       }

web/app/components/plugins/plugin-page/index.tsx

@@ -17,14 +17,14 @@ import {
 } from './context'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import { useUploader } from './use-uploader'
-import usePermission from './use-permission'
+import useReferenceSetting from './use-reference-setting'
 import DebugInfo from './debug-info'
 import PluginTasks from './plugin-tasks'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
-import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
+import ReferenceSettingModal from '@/app/components/plugins/reference-setting-modal/modal'
 import InstallFromMarketplace from '../install-plugin/install-from-marketplace'
 import {
   useRouter,
@@ -121,16 +121,16 @@ const PluginPage = ({
   }, [packageId, bundleInfo])
 
   const {
+    referenceSetting,
     canManagement,
     canDebugger,
     canSetPermissions,
-    permissions,
-    setPermissions,
-  } = usePermission()
+    setReferenceSettings,
+  } = useReferenceSetting()
   const [showPluginSettingModal, {
     setTrue: setShowPluginSettingModal,
     setFalse: setHidePluginSettingModal,
-  }] = useBoolean()
+  }] = useBoolean(false)
   const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
   const options = usePluginPageContext(v => v.options)
@@ -276,10 +276,10 @@ const PluginPage = ({
       }
 
       {showPluginSettingModal && (
-        <PermissionSetModal
-          payload={permissions!}
+        <ReferenceSettingModal
+          payload={referenceSetting!}
           onHide={setHidePluginSettingModal}
-          onSave={setPermissions}
+          onSave={setReferenceSettings}
         />
       )}
 

web/app/components/plugins/plugin-page/use-reference-setting.ts

@@ -2,7 +2,7 @@ import { PermissionType } from '../types'
 import { useAppContext } from '@/context/app-context'
 import Toast from '../../base/toast'
 import { useTranslation } from 'react-i18next'
-import { useInvalidatePermissions, useMutationPermissions, usePermissions } from '@/service/use-plugins'
+import { useInvalidateReferenceSettings, useMutationReferenceSettings, useReferenceSettings } from '@/service/use-plugins'
 import { useMemo } from 'react'
 import { useGlobalPublicStore } from '@/context/global-public-context'
 
@@ -19,14 +19,16 @@ const hasPermission = (permission: PermissionType | undefined, isAdmin: boolean)
   return isAdmin
 }
 
-const usePermission = () => {
+const useReferenceSetting = () => {
   const { t } = useTranslation()
   const { isCurrentWorkspaceManager, isCurrentWorkspaceOwner } = useAppContext()
-  const { data: permissions } = usePermissions()
-  const invalidatePermissions = useInvalidatePermissions()
-  const { mutate: updatePermission, isPending: isUpdatePending } = useMutationPermissions({
+  const { data } = useReferenceSettings()
+  // console.log(data)
+  const { permission: permissions } = data || {}
+  const invalidateReferenceSettings = useInvalidateReferenceSettings()
+  const { mutate: updateReferenceSetting, isPending: isUpdatePending } = useMutationReferenceSettings({
     onSuccess: () => {
-      invalidatePermissions()
+      invalidateReferenceSettings()
       Toast.notify({
         type: 'success',
         message: t('common.api.actionSuccess'),
@@ -36,18 +38,18 @@ const usePermission = () => {
   const isAdmin = isCurrentWorkspaceManager || isCurrentWorkspaceOwner
 
   return {
+    referenceSetting: data,
+    setReferenceSettings: updateReferenceSetting,
     canManagement: hasPermission(permissions?.install_permission, isAdmin),
     canDebugger: hasPermission(permissions?.debug_permission, isAdmin),
     canSetPermissions: isAdmin,
-    permissions,
-    setPermissions: updatePermission,
     isUpdatePending,
   }
 }
 
 export const useCanInstallPluginFromMarketplace = () => {
   const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
-  const { canManagement } = usePermission()
+  const { canManagement } = useReferenceSetting()
 
   const canInstallPluginFromMarketplace = useMemo(() => {
     return enable_marketplace && canManagement
@@ -58,4 +60,4 @@ export const useCanInstallPluginFromMarketplace = () => {
   }
 }
 
-export default usePermission
+export default useReferenceSetting

web/app/components/plugins/reference-setting-modal/auto-update-setting/config.ts

@@ -0,0 +1,9 @@
+import type { AutoUpdateConfig } from './types'
+import { AUTO_UPDATE_MODE, AUTO_UPDATE_STRATEGY } from './types'
+export const defaultValue: AutoUpdateConfig = {
+  strategy_setting: AUTO_UPDATE_STRATEGY.disabled,
+  upgrade_time_of_day: 0,
+  upgrade_mode: AUTO_UPDATE_MODE.update_all,
+  exclude_plugins: [],
+  include_plugins: [],
+}

web/app/components/plugins/reference-setting-modal/auto-update-setting/index.tsx

@@ -0,0 +1,185 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo } from 'react'
+import { AUTO_UPDATE_MODE, AUTO_UPDATE_STRATEGY, type AutoUpdateConfig } from './types'
+import Label from '../label'
+import StrategyPicker from './strategy-picker'
+import { Trans, useTranslation } from 'react-i18next'
+import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import PluginsPicker from './plugins-picker'
+import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds, dayjsToTimeOfDay, timeOfDayToDayjs } from './utils'
+import { useAppContext } from '@/context/app-context'
+import type { TriggerParams } from '@/app/components/base/date-and-time-picker/types'
+import { RiTimeLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { convertTimezoneToOffsetStr } from '@/app/components/base/date-and-time-picker/utils/dayjs'
+import { useModalContextSelector } from '@/context/modal-context'
+
+const i18nPrefix = 'plugin.autoUpdate'
+
+type Props = {
+  payload: AutoUpdateConfig
+  onChange: (payload: AutoUpdateConfig) => void
+}
+
+const SettingTimeZone: FC<{
+  children?: React.ReactNode
+}> = ({
+  children,
+}) => {
+  const setShowAccountSettingModal = useModalContextSelector(s => s.setShowAccountSettingModal)
+  return (
+    <span className='body-xs-regular cursor-pointer text-text-accent' onClick={() => setShowAccountSettingModal({ payload: 'language' })} >{children}</span>
+  )
+}
+const AutoUpdateSetting: FC<Props> = ({
+  payload,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { userProfile: { timezone } } = useAppContext()
+
+  const {
+    strategy_setting,
+    upgrade_time_of_day,
+    upgrade_mode,
+    exclude_plugins,
+    include_plugins,
+  } = payload
+
+  const minuteFilter = useCallback((minutes: string[]) => {
+    return minutes.filter((m) => {
+      const time = Number.parseInt(m, 10)
+      return time % 15 === 0
+    })
+  }, [])
+  const strategyDescription = useMemo(() => {
+    switch (strategy_setting) {
+      case AUTO_UPDATE_STRATEGY.fixOnly:
+        return t(`${i18nPrefix}.strategy.fixOnly.selectedDescription`)
+      case AUTO_UPDATE_STRATEGY.latest:
+        return t(`${i18nPrefix}.strategy.latest.selectedDescription`)
+      default:
+        return ''
+    }
+  }, [strategy_setting, t])
+
+  const plugins = useMemo(() => {
+    switch (upgrade_mode) {
+      case AUTO_UPDATE_MODE.partial:
+        return include_plugins
+      case AUTO_UPDATE_MODE.exclude:
+        return exclude_plugins
+      default:
+        return []
+    }
+  }, [upgrade_mode, exclude_plugins, include_plugins])
+
+  const handlePluginsChange = useCallback((newPlugins: string[]) => {
+    if (upgrade_mode === AUTO_UPDATE_MODE.partial) {
+      onChange({
+        ...payload,
+        include_plugins: newPlugins,
+      })
+    }
+    else if (upgrade_mode === AUTO_UPDATE_MODE.exclude) {
+      onChange({
+        ...payload,
+        exclude_plugins: newPlugins,
+      })
+    }
+  }, [payload, upgrade_mode, onChange])
+  const handleChange = useCallback((key: keyof AutoUpdateConfig) => {
+    return (value: AutoUpdateConfig[keyof AutoUpdateConfig]) => {
+      onChange({
+        ...payload,
+        [key]: value,
+      })
+    }
+  }, [payload, onChange])
+
+  const renderTimePickerTrigger = useCallback(({ inputElem, onClick, isOpen }: TriggerParams) => {
+    return (
+        <div
+          className='group float-right flex h-8 w-[160px] cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal px-2 hover:bg-state-base-hover-alt'
+          onClick={onClick}
+        >
+          <div className='flex w-0 grow items-center gap-x-1'>
+            <RiTimeLine className={cn(
+              'h-4 w-4 shrink-0 text-text-tertiary',
+              isOpen ? 'text-text-secondary' : 'group-hover:text-text-secondary',
+            )} />
+            {inputElem}
+          </div>
+          <div className='system-sm-regular text-text-tertiary'>{convertTimezoneToOffsetStr(timezone)}</div>
+        </div>
+    )
+  }, [timezone])
+
+  return (
+    <div className='self-stretch px-6'>
+      <div className='my-3 flex items-center'>
+        <div className='system-xs-medium-uppercase text-text-tertiary'>{t(`${i18nPrefix}.updateSettings`)}</div>
+        <div className='ml-2 h-px grow bg-divider-subtle'></div>
+      </div>
+
+      <div className='space-y-4'>
+        <div className='flex items-center justify-between'>
+          <Label label={t(`${i18nPrefix}.automaticUpdates`)} description={strategyDescription} />
+          <StrategyPicker value={strategy_setting} onChange={handleChange('strategy_setting')} />
+        </div>
+        {strategy_setting !== AUTO_UPDATE_STRATEGY.disabled && (
+          <>
+            <div className='flex items-center justify-between'>
+              <Label label={t(`${i18nPrefix}.updateTime`)} />
+              <div className='flex flex-col justify-start'>
+                <TimePicker
+                  value={timeOfDayToDayjs(convertUTCDaySecondsToLocalSeconds(upgrade_time_of_day, timezone!))}
+                  timezone={timezone}
+                  onChange={v => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(dayjsToTimeOfDay(v), timezone!))}
+                  onClear={() => handleChange('upgrade_time_of_day')(convertLocalSecondsToUTCDaySeconds(0, timezone!))}
+                  popupClassName='z-[99]'
+                  title={t(`${i18nPrefix}.updateTime`)}
+                  minuteFilter={minuteFilter}
+                  renderTrigger={renderTimePickerTrigger}
+                />
+                <div className='body-xs-regular mt-1 text-right text-text-tertiary'>
+                  <Trans
+                    i18nKey={`${i18nPrefix}.changeTimezone`}
+                    components={{
+                      setTimezone: <SettingTimeZone />,
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <Label label={t(`${i18nPrefix}.specifyPluginsToUpdate`)} />
+              <div className='mt-1 flex w-full items-start justify-between gap-2'>
+                {[AUTO_UPDATE_MODE.update_all, AUTO_UPDATE_MODE.exclude, AUTO_UPDATE_MODE.partial].map(option => (
+                  <OptionCard
+                    key={option}
+                    title={t(`${i18nPrefix}.upgradeMode.${option}`)}
+                    onSelect={() => handleChange('upgrade_mode')(option)}
+                    selected={upgrade_mode === option}
+                    className="flex-1"
+                  />
+                ))}
+              </div>
+
+              {upgrade_mode !== AUTO_UPDATE_MODE.update_all && (
+                <PluginsPicker
+                  value={plugins}
+                  onChange={handlePluginsChange}
+                  updateMode={upgrade_mode}
+                />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(AutoUpdateSetting)

web/app/components/plugins/reference-setting-modal/auto-update-setting/no-data-placeholder.tsx

@@ -0,0 +1,31 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+import { SearchMenu } from '@/app/components/base/icons/src/vender/line/general'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  className: string
+  noPlugins?: boolean
+}
+
+const NoDataPlaceholder: FC<Props> = ({
+  className,
+  noPlugins,
+}) => {
+  const { t } = useTranslation()
+  const icon = noPlugins ? (<Group className='size-6 text-text-quaternary' />) : (<SearchMenu className='size-8 text-text-tertiary' />)
+  const text = t(`plugin.autoUpdate.noPluginPlaceholder.${noPlugins ? 'noInstalled' : 'noFound'}`)
+  return (
+    <div className={cn('flex items-center justify-center', className)}>
+      <div className='flex flex-col items-center'>
+        {icon}
+        <div className='system-sm-regular mt-2 text-text-tertiary'>{text}</div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(NoDataPlaceholder)

web/app/components/plugins/reference-setting-modal/auto-update-setting/no-plugin-selected.tsx

@@ -0,0 +1,22 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { AUTO_UPDATE_MODE } from './types'
+import { useTranslation } from 'react-i18next'
+
+type Props = {
+  updateMode: AUTO_UPDATE_MODE
+}
+
+const NoPluginSelected: FC<Props> = ({
+  updateMode,
+}) => {
+  const { t } = useTranslation()
+  const text = `${t(`plugin.autoUpdate.upgradeModePlaceholder.${updateMode === AUTO_UPDATE_MODE.partial ? 'partial' : 'exclude'}`)}`
+  return (
+    <div className='system-xs-regular rounded-[10px] border border-[divider-subtle] bg-background-section p-3 text-center text-text-tertiary'>
+      {text}
+    </div>
+  )
+}
+export default React.memo(NoPluginSelected)

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-picker.tsx

@@ -0,0 +1,69 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import NoPluginSelected from './no-plugin-selected'
+import { AUTO_UPDATE_MODE } from './types'
+import PluginsSelected from './plugins-selected'
+import Button from '@/app/components/base/button'
+import { RiAddLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import ToolPicker from './tool-picker'
+
+const i18nPrefix = 'plugin.autoUpdate'
+
+type Props = {
+  updateMode: AUTO_UPDATE_MODE
+  value: string[] // plugin ids
+  onChange: (value: string[]) => void
+}
+
+const PluginsPicker: FC<Props> = ({
+  updateMode,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const hasSelected = value.length > 0
+  const isExcludeMode = updateMode === AUTO_UPDATE_MODE.exclude
+  const handleClear = () => {
+    onChange([])
+  }
+
+  const [isShowToolPicker, {
+    set: setToolPicker,
+  }] = useBoolean(false)
+  return (
+    <div className='mt-2 rounded-[10px] bg-background-section-burn p-2.5'>
+      {hasSelected ? (
+        <div className='flex justify-between text-text-tertiary'>
+          <div className='system-xs-medium'>{t(`${i18nPrefix}.${isExcludeMode ? 'excludeUpdate' : 'partialUPdate'}`, { num: value.length })}</div>
+          <div className='system-xs-medium cursor-pointer' onClick={handleClear}>{t(`${i18nPrefix}.operation.clearAll`)}</div>
+        </div>
+      ) : (
+        <NoPluginSelected updateMode={updateMode} />
+      )}
+
+      {hasSelected && (
+        <PluginsSelected
+          className='mt-2'
+          plugins={value}
+        />
+      )}
+
+      <ToolPicker
+        trigger={
+          <Button className='mt-2 w-[412px]' size='small' variant='secondary-accent'>
+            <RiAddLine className='size-3.5' />
+            {t(`${i18nPrefix}.operation.select`)}
+          </Button>
+        }
+        value={value}
+        onChange={onChange}
+        isShow={isShowToolPicker}
+        onShowChange={setToolPicker}
+      />
+    </div>
+  )
+}
+export default React.memo(PluginsPicker)

web/app/components/plugins/reference-setting-modal/auto-update-setting/plugins-selected.tsx

@@ -0,0 +1,29 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+
+const MAX_DISPLAY_COUNT = 14
+type Props = {
+  className?: string
+  plugins: string[]
+}
+
+const PluginsSelected: FC<Props> = ({
+  className,
+  plugins,
+}) => {
+  const isShowAll = plugins.length < MAX_DISPLAY_COUNT
+  const displayPlugins = plugins.slice(0, MAX_DISPLAY_COUNT)
+  return (
+    <div className={cn('flex items-center space-x-1', className)}>
+      {displayPlugins.map(plugin => (
+        <Icon key={plugin} size='tiny' src={`${MARKETPLACE_API_PREFIX}/plugins/${plugin}/icon`} />
+      ))}
+      {!isShowAll && <div className='system-xs-medium text-text-tertiary'>+{plugins.length - MAX_DISPLAY_COUNT}</div>}
+    </div>
+  )
+}
+export default React.memo(PluginsSelected)

web/app/components/plugins/reference-setting-modal/auto-update-setting/strategy-picker.tsx

@@ -0,0 +1,98 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react'
+import { AUTO_UPDATE_STRATEGY } from './types'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Button from '@/app/components/base/button'
+const i18nPrefix = 'plugin.autoUpdate.strategy'
+
+type Props = {
+  value: AUTO_UPDATE_STRATEGY
+  onChange: (value: AUTO_UPDATE_STRATEGY) => void
+}
+const StrategyPicker = ({
+  value,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const options = [
+    {
+      value: AUTO_UPDATE_STRATEGY.disabled,
+      label: t(`${i18nPrefix}.disabled.name`),
+      description: t(`${i18nPrefix}.disabled.description`),
+    },
+    {
+      value: AUTO_UPDATE_STRATEGY.fixOnly,
+      label: t(`${i18nPrefix}.fixOnly.name`),
+      description: t(`${i18nPrefix}.fixOnly.description`),
+    },
+    {
+      value: AUTO_UPDATE_STRATEGY.latest,
+      label: t(`${i18nPrefix}.latest.name`),
+      description: t(`${i18nPrefix}.latest.description`),
+    },
+  ]
+  const selectedOption = options.find(option => option.value === value)
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='top-end'
+      offset={4}
+    >
+      <PortalToFollowElemTrigger onClick={(e) => {
+        e.stopPropagation()
+        e.nativeEvent.stopImmediatePropagation()
+        setOpen(v => !v)
+      }}>
+        <Button
+          size='small'
+        >
+          {selectedOption?.label}
+          <RiArrowDownSLine className='h-3.5 w-3.5' />
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[99]'>
+        <div className='w-[280px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg'>
+          {
+            options.map(option => (
+              <div
+                key={option.value}
+                className='flex cursor-pointer rounded-lg p-2 pr-3 hover:bg-state-base-hover'
+                onClick={(e) => {
+                  e.stopPropagation()
+                  e.nativeEvent.stopImmediatePropagation()
+                  onChange(option.value)
+                  setOpen(false)
+                }}
+              >
+                <div className='mr-1 w-4 shrink-0'>
+                  {
+                    value === option.value && (
+                      <RiCheckLine className='h-4 w-4 text-text-accent' />
+                    )
+                  }
+                </div>
+                <div className='grow'>
+                  <div className='system-sm-semibold mb-0.5 text-text-secondary'>{option.label}</div>
+                  <div className='system-xs-regular text-text-tertiary'>{option.description}</div>
+                </div>
+              </div>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default StrategyPicker

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-item.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import { renderI18nObject } from '@/i18n'
+import { useGetLanguage } from '@/context/i18n'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import Checkbox from '@/app/components/base/checkbox'
+
+type Props = {
+  payload: PluginDetail
+  isChecked?: boolean
+  onCheckChange: () => void
+}
+
+const ToolItem: FC<Props> = ({
+  payload,
+  isChecked,
+  onCheckChange,
+}) => {
+  const language = useGetLanguage()
+
+  const { plugin_id, declaration } = payload
+  const { label, author: org } = declaration
+  return (
+    <div className='p-1'>
+      <div
+        className='flex w-full select-none items-center rounded-lg pr-2 hover:bg-state-base-hover'
+      >
+        <div className='flex h-8 grow items-center space-x-2 pl-3 pr-2'>
+          <Icon size='tiny' src={`${MARKETPLACE_API_PREFIX}/plugins/${plugin_id}/icon`} />
+          <div className='system-sm-medium max-w-[150px] shrink-0 truncate text-text-primary'>{renderI18nObject(label, language)}</div>
+          <div className='system-xs-regular max-w-[150px] shrink-0  truncate text-text-quaternary'>{org}</div>
+        </div>
+        <Checkbox
+          checked={isChecked}
+          onCheck={onCheckChange}
+          className='shrink-0'
+        />
+      </div>
+    </div>
+  )
+}
+export default React.memo(ToolItem)

web/app/components/plugins/reference-setting-modal/auto-update-setting/tool-picker.tsx

@@ -0,0 +1,165 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useInstalledPluginList } from '@/service/use-plugins'
+import { PLUGIN_TYPE_SEARCH_MAP } from '../../marketplace/plugin-type-switch'
+import SearchBox from '@/app/components/plugins/marketplace/search-box'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import ToolItem from './tool-item'
+import Loading from '@/app/components/base/loading'
+import NoDataPlaceholder from './no-data-placeholder'
+
+type Props = {
+  trigger: React.ReactNode
+  value: string[]
+  onChange: (value: string[]) => void
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+
+}
+
+const ToolPicker: FC<Props> = ({
+  trigger,
+  value,
+  onChange,
+  isShow,
+  onShowChange,
+}) => {
+  const { t } = useTranslation()
+  const toggleShowPopup = useCallback(() => {
+    onShowChange(!isShow)
+  }, [onShowChange, isShow])
+
+  const tabs = [
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.all,
+      name: t('plugin.category.all'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.model,
+      name: t('plugin.category.models'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.tool,
+      name: t('plugin.category.tools'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.agent,
+      name: t('plugin.category.agents'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.extension,
+      name: t('plugin.category.extensions'),
+    },
+    {
+      key: PLUGIN_TYPE_SEARCH_MAP.bundle,
+      name: t('plugin.category.bundles'),
+    },
+  ]
+
+  const [pluginType, setPluginType] = useState(PLUGIN_TYPE_SEARCH_MAP.all)
+  const [query, setQuery] = useState('')
+  const [tags, setTags] = useState<string[]>([])
+  const { data, isLoading } = useInstalledPluginList()
+  const filteredList = useMemo(() => {
+    const list = data ? data.plugins : []
+    return list.filter((plugin) => {
+      return (
+        (pluginType === PLUGIN_TYPE_SEARCH_MAP.all || plugin.declaration.category === pluginType)
+        && (tags.length === 0 || tags.some(tag => plugin.declaration.tags.includes(tag)))
+        && (query === '' || plugin.plugin_id.toLowerCase().includes(query.toLowerCase()))
+      )
+    })
+  }, [data, pluginType, query, tags])
+  const handleCheckChange = useCallback((pluginId: string) => {
+    return () => {
+      const newValue = value.includes(pluginId)
+        ? value.filter(id => id !== pluginId)
+        : [...value, pluginId]
+      onChange(newValue)
+    }
+  }, [onChange, value])
+
+  const listContent = (
+    <div className='max-h-[396px] overflow-y-auto'>
+      {filteredList.map(item => (
+        <ToolItem
+          key={item.plugin_id}
+          payload={item}
+          isChecked={value.includes(item.plugin_id)}
+          onCheckChange={handleCheckChange(item.plugin_id)}
+        />
+      ))}
+    </div>
+  )
+
+  const loadingContent = (
+    <div className='flex h-[396px] items-center justify-center'>
+      <Loading />
+    </div>
+  )
+
+  const noData = (
+    <NoDataPlaceholder className='h-[396px]' noPlugins={!query} />
+  )
+
+  return (
+    <PortalToFollowElem
+        placement='top'
+        offset={0}
+        open={isShow}
+        onOpenChange={onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          onClick={toggleShowPopup}
+        >
+          {trigger}
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className={cn('relative min-h-20 w-[436px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur pb-2 shadow-lg backdrop-blur-sm')}>
+            <div className='p-2 pb-1'>
+              <SearchBox
+                search={query}
+                onSearchChange={setQuery}
+                tags={tags}
+                onTagsChange={setTags}
+                size='small'
+                placeholder={t('plugin.searchTools')!}
+                inputClassName='w-full'
+              />
+            </div>
+            <div className='flex items-center justify-between border-b-[0.5px] border-divider-subtle bg-background-default-hover px-3 shadow-xs'>
+              <div className='flex h-8 items-center space-x-1'>
+                {
+                  tabs.map(tab => (
+                    <div
+                      className={cn(
+                        'flex h-6 cursor-pointer items-center rounded-md px-2 hover:bg-state-base-hover',
+                        'text-xs font-medium text-text-secondary',
+                        pluginType === tab.key && 'bg-state-base-hover-alt',
+                      )}
+                      key={tab.key}
+                      onClick={() => setPluginType(tab.key)}
+                    >
+                      {tab.name}
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
+            {!isLoading && filteredList.length > 0 && listContent}
+            {!isLoading && filteredList.length === 0 && noData}
+            {isLoading && loadingContent}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+  )
+}
+
+export default React.memo(ToolPicker)

web/app/components/plugins/reference-setting-modal/auto-update-setting/types.ts

@@ -0,0 +1,19 @@
+export enum AUTO_UPDATE_STRATEGY {
+  fixOnly = 'fix_only',
+  disabled = 'disabled',
+  latest = 'latest',
+}
+
+export enum AUTO_UPDATE_MODE {
+  partial = 'partial',
+  exclude = 'exclude',
+  update_all = 'all',
+}
+
+export type AutoUpdateConfig = {
+  strategy_setting: AUTO_UPDATE_STRATEGY
+  upgrade_time_of_day: number
+  upgrade_mode: AUTO_UPDATE_MODE
+  exclude_plugins: string[]
+  include_plugins: string[]
+}

web/app/components/plugins/reference-setting-modal/auto-update-setting/utils.spec.ts

@@ -0,0 +1,15 @@
+// write unit test for convertLocalSecondsToUTCDaySeconds
+import { convertLocalSecondsToUTCDaySeconds, convertUTCDaySecondsToLocalSeconds } from './utils'
+
+describe('convertLocalSecondsToUTCDaySeconds', () => {
+  it('should convert local seconds to UTC day seconds correctly', () => {
+    const localTimezone = 'Asia/Shanghai'
+    const utcSeconds = convertLocalSecondsToUTCDaySeconds(0, localTimezone)
+    expect(utcSeconds).toBe((24 - 8) * 3600)
+  })
+
+  it('should convert local seconds to UTC day seconds for a specific time', () => {
+    const localTimezone = 'Asia/Shanghai'
+    expect(convertUTCDaySecondsToLocalSeconds(convertLocalSecondsToUTCDaySeconds(0, localTimezone), localTimezone)).toBe(0)
+  })
+})

web/app/components/plugins/reference-setting-modal/auto-update-setting/utils.ts

@@ -0,0 +1,37 @@
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+import utc from 'dayjs/plugin/utc'
+import timezone from 'dayjs/plugin/timezone'
+
+dayjs.extend(utc)
+dayjs.extend(timezone)
+
+export const timeOfDayToDayjs = (timeOfDay: number): Dayjs => {
+  const hours = Math.floor(timeOfDay / 3600)
+  const minutes = (timeOfDay - hours * 3600) / 60
+  const res = dayjs().startOf('day').hour(hours).minute(minutes)
+  return res
+}
+
+export const convertLocalSecondsToUTCDaySeconds = (secondsInDay: number, localTimezone: string): number => {
+  const localDayStart = dayjs().tz(localTimezone).startOf('day')
+  const localTargetTime = localDayStart.add(secondsInDay, 'second')
+  const utcTargetTime = localTargetTime.utc()
+  const utcDayStart = utcTargetTime.startOf('day')
+  const secondsFromUTCMidnight = utcTargetTime.diff(utcDayStart, 'second')
+  return secondsFromUTCMidnight
+}
+
+export const dayjsToTimeOfDay = (date?: Dayjs): number => {
+  if(!date) return 0
+  return date.hour() * 3600 + date.minute() * 60
+}
+
+export const convertUTCDaySecondsToLocalSeconds = (utcDaySeconds: number, localTimezone: string): number => {
+    const utcDayStart = dayjs().utc().startOf('day')
+    const utcTargetTime = utcDayStart.add(utcDaySeconds, 'second')
+    const localTargetTime = utcTargetTime.tz(localTimezone)
+    const localDayStart = localTargetTime.startOf('day')
+    const secondsInLocalDay = localTargetTime.diff(localDayStart, 'second')
+    return secondsInLocalDay
+}

web/app/components/plugins/reference-setting-modal/label.tsx

@@ -0,0 +1,28 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  label: string
+  description?: string
+}
+
+const Label: FC<Props> = ({
+  label,
+  description,
+}) => {
+  return (
+    <div>
+      <div className={cn('flex h-6 items-center', description && 'h-4')}>
+        <span className='system-sm-semibold text-text-secondary'>{label}</span>
+      </div>
+      {description && (
+        <div className='body-xs-regular mt-1 text-text-tertiary'>
+          {description}
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(Label)

web/app/components/plugins/reference-setting-modal/modal.tsx

@@ -5,14 +5,18 @@ import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import Button from '@/app/components/base/button'
-import type { Permissions } from '@/app/components/plugins/types'
+import type { Permissions, ReferenceSetting } from '@/app/components/plugins/types'
 import { PermissionType } from '@/app/components/plugins/types'
+import type { AutoUpdateConfig } from './auto-update-setting/types'
+import AutoUpdateSetting from './auto-update-setting'
+import { defaultValue as autoUpdateDefaultValue } from './auto-update-setting/config'
+import Label from './label'
 
 const i18nPrefix = 'plugin.privilege'
 type Props = {
-  payload: Permissions
+  payload: ReferenceSetting
   onHide: () => void
-  onSave: (payload: Permissions) => void
+  onSave: (payload: ReferenceSetting) => void
 }
 
 const PluginSettingModal: FC<Props> = ({
@@ -21,7 +25,9 @@ const PluginSettingModal: FC<Props> = ({
   onSave,
 }) => {
   const { t } = useTranslation()
-  const [tempPrivilege, setTempPrivilege] = useState<Permissions>(payload)
+  const { auto_upgrade: autoUpdateConfig, permission: privilege } = payload || {}
+  const [tempPrivilege, setTempPrivilege] = useState<Permissions>(privilege)
+  const [tempAutoUpdateConfig, setTempAutoUpdateConfig] = useState<AutoUpdateConfig>(autoUpdateConfig || autoUpdateDefaultValue)
   const handlePrivilegeChange = useCallback((key: string) => {
     return (value: PermissionType) => {
       setTempPrivilege({
@@ -32,18 +38,21 @@ const PluginSettingModal: FC<Props> = ({
   }, [tempPrivilege])
 
   const handleSave = useCallback(async () => {
-    await onSave(tempPrivilege)
+    await onSave({
+      permission: tempPrivilege,
+      auto_upgrade: tempAutoUpdateConfig,
+    })
     onHide()
-  }, [onHide, onSave, tempPrivilege])
+  }, [onHide, onSave, tempAutoUpdateConfig, tempPrivilege])
 
   return (
     <Modal
       isShow
       onClose={onHide}
       closable
-      className='w-[420px] !p-0'
+      className='w-[480px] !p-0'
     >
-      <div className='shadows-shadow-xl flex w-[420px] flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg'>
+      <div className='shadows-shadow-xl flex w-[480px] flex-col items-start rounded-2xl border border-components-panel-border bg-components-panel-bg'>
         <div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
           <span className='title-2xl-semi-bold self-stretch text-text-primary'>{t(`${i18nPrefix}.title`)}</span>
         </div>
@@ -53,9 +62,7 @@ const PluginSettingModal: FC<Props> = ({
             { title: t(`${i18nPrefix}.whoCanDebug`), key: 'debug_permission', value: tempPrivilege?.debug_permission || PermissionType.noOne },
           ].map(({ title, key, value }) => (
             <div key={key} className='flex flex-col items-start gap-1 self-stretch'>
-              <div className='flex h-6 items-center gap-0.5'>
-                <span className='system-sm-semibold text-text-secondary'>{title}</span>
-              </div>
+              <Label label={title} />
               <div className='flex w-full items-start justify-between gap-2'>
                 {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
                   <OptionCard
@@ -70,6 +77,8 @@ const PluginSettingModal: FC<Props> = ({
             </div>
           ))}
         </div>
+
+        <AutoUpdateSetting payload={tempAutoUpdateConfig} onChange={setTempAutoUpdateConfig} />
         <div className='flex h-[76px] items-center justify-end gap-2 self-stretch p-6 pt-5'>
           <Button
             className='min-w-[72px]'

web/app/components/plugins/types.ts

@@ -2,6 +2,7 @@ import type { CredentialFormSchemaBase } from '../header/account-setting/model-p
 import type { ToolCredential } from '@/app/components/tools/types'
 import type { Locale } from '@/i18n'
 import type { AgentFeature } from '@/app/components/workflow/nodes/agent/types'
+import type { AutoUpdateConfig } from './reference-setting-modal/auto-update-setting/types'
 export enum PluginType {
   tool = 'tool',
   model = 'model',
@@ -167,6 +168,11 @@ export type Permissions = {
   debug_permission: PermissionType
 }
 
+export type ReferenceSetting = {
+  permission: Permissions
+  auto_upgrade: AutoUpdateConfig
+}
+
 export type UpdateFromMarketPlacePayload = {
   category: PluginType
   originalPackageInfo: {

web/app/components/plugins/update-plugin/downgrade-warning.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import Button from '@/app/components/base/button'
+
+const i18nPrefix = 'plugin.autoUpdate.pluginDowngradeWarning'
+
+type Props = {
+  onCancel: () => void
+  onJustDowngrade: () => void
+  onExcludeAndDowngrade: () => void
+}
+const DowngradeWarningModal = ({
+  onCancel,
+  onJustDowngrade,
+  onExcludeAndDowngrade,
+}: Props) => {
+  const { t } = useTranslation()
+
+  return (
+    <>
+      <div className='flex flex-col items-start gap-2 self-stretch'>
+        <div className='title-2xl-semi-bold text-text-primary'>{t(`${i18nPrefix}.title`)}</div>
+        <div className='system-md-regular text-text-secondary'>
+        {t(`${i18nPrefix}.description`)}
+        </div>
+      </div>
+      <div className='mt-9 flex items-start justify-end space-x-2 self-stretch'>
+        <Button variant='secondary' onClick={() => onCancel()}>{t('app.newApp.Cancel')}</Button>
+        <Button variant='secondary' destructive onClick={onJustDowngrade}>{t(`${i18nPrefix}.downgrade`)}</Button>
+        <Button variant='primary' onClick={onExcludeAndDowngrade}>{t(`${i18nPrefix}.exclude`)}</Button>
+      </div>
+    </>
+  )
+}
+
+export default DowngradeWarningModal

web/app/components/plugins/update-plugin/from-market-place.tsx

@@ -13,13 +13,18 @@ import { updateFromMarketPlace } from '@/service/plugins'
 import checkTaskStatus from '@/app/components/plugins/install-plugin/base/check-task-status'
 import { usePluginTaskList } from '@/service/use-plugins'
 import Toast from '../../base/toast'
+import DowngradeWarningModal from './downgrade-warning'
+import { useInvalidateReferenceSettings, useRemoveAutoUpgrade } from '@/service/use-plugins'
+import cn from '@/utils/classnames'
 
 const i18nPrefix = 'plugin.upgrade'
 
 type Props = {
   payload: UpdateFromMarketPlacePayload
+  pluginId: string
   onSave: () => void
   onCancel: () => void
+  isShowDowngradeWarningModal?: boolean
 }
 
 enum UploadStep {
@@ -30,8 +35,10 @@ enum UploadStep {
 
 const UpdatePluginModal: FC<Props> = ({
   payload,
+  pluginId,
   onSave,
   onCancel,
+  isShowDowngradeWarningModal,
 }) => {
   const {
     originalPackageInfo,
@@ -103,14 +110,34 @@ const UpdatePluginModal: FC<Props> = ({
       onSave()
   }, [onSave, uploadStep, check, originalPackageInfo.id, handleRefetch, targetPackageInfo.id])
 
+  const { mutateAsync } = useRemoveAutoUpgrade()
+  const invalidateReferenceSettings = useInvalidateReferenceSettings()
+  const handleExcludeAndDownload = async () => {
+    await mutateAsync({
+      plugin_id: pluginId,
+    })
+    invalidateReferenceSettings()
+    handleConfirm()
+  }
+  const doShowDowngradeWarningModal = isShowDowngradeWarningModal && uploadStep === UploadStep.notStarted
+
   return (
     <Modal
       isShow={true}
       onClose={onCancel}
-      className='min-w-[560px]'
+      className={cn('min-w-[560px]', doShowDowngradeWarningModal && 'min-w-[640px]')}
       closable
-      title={t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
+      title={!doShowDowngradeWarningModal && t(`${i18nPrefix}.${uploadStep === UploadStep.installed ? 'successfulTitle' : 'title'}`)}
     >
+      {doShowDowngradeWarningModal && (
+        <DowngradeWarningModal
+          onCancel={onCancel}
+          onJustDowngrade={handleConfirm}
+          onExcludeAndDowngrade={handleExcludeAndDownload}
+        />
+      )}
+    {!doShowDowngradeWarningModal && (
+      <>
         <div className='system-md-regular mb-2 mt-3 text-text-secondary'>
           {t(`${i18nPrefix}.description`)}
         </div>
@@ -148,6 +175,9 @@ const UpdatePluginModal: FC<Props> = ({
             {configBtnText}
           </Button>
         </div>
+      </>
+    )}
+
     </Modal>
   )
 }

web/app/components/plugins/update-plugin/plugin-version-picker.tsx

@@ -15,6 +15,7 @@ import type {
 import { useVersionListOfPlugin } from '@/service/use-plugins'
 import useTimestamp from '@/hooks/use-timestamp'
 import cn from '@/utils/classnames'
+import { lt } from 'semver'
 
 type Props = {
   disabled?: boolean
@@ -28,9 +29,11 @@ type Props = {
   onSelect: ({
     version,
     unique_identifier,
+    isDowngrade,
   }: {
     version: string
     unique_identifier: string
+    isDowngrade: boolean
   }) => void
 }
 
@@ -59,13 +62,14 @@ const PluginVersionPicker: FC<Props> = ({
 
   const { data: res } = useVersionListOfPlugin(pluginID)
 
-  const handleSelect = useCallback(({ version, unique_identifier }: {
+  const handleSelect = useCallback(({ version, unique_identifier, isDowngrade }: {
     version: string
     unique_identifier: string
+    isDowngrade: boolean
   }) => {
     if (currentVersion === version)
       return
-    onSelect({ version, unique_identifier })
+    onSelect({ version, unique_identifier, isDowngrade })
     onShowChange(false)
   }, [currentVersion, onSelect, onShowChange])
 
@@ -99,6 +103,7 @@ const PluginVersionPicker: FC<Props> = ({
                 onClick={() => handleSelect({
                   version: version.version,
                   unique_identifier: version.unique_identifier,
+                  isDowngrade: lt(version.version, currentVersion),
                 })}
               >
                 <div className='flex grow items-center'>

web/i18n/en-US/plugin.ts

@@ -114,6 +114,56 @@ const translation = {
     admins: 'Admins',
     noone: 'No one',
   },
+  autoUpdate: {
+    automaticUpdates: 'Automatic updates',
+    updateTime: 'Update time',
+    specifyPluginsToUpdate: 'Specify plugins to update',
+    strategy: {
+      disabled: {
+        name: 'Disabled',
+        description: 'Plugins will not auto-update',
+      },
+      fixOnly: {
+        name: 'Fix Only',
+        description: 'Auto-update for patch versions only (e.g., 1.0.1 → 1.0.2). Minor version changes won\'t trigger updates.',
+        selectedDescription: 'Auto-update for patch versions only',
+      },
+      latest: {
+        name: 'Latest',
+        description: 'Always update to latest version',
+        selectedDescription: 'Always update to latest version',
+      },
+    },
+    updateTimeTitle: 'Update time',
+    upgradeMode: {
+      all: 'Update all',
+      exclude: 'Exclude selected',
+      partial: 'Only selected',
+    },
+    upgradeModePlaceholder: {
+      exclude: 'Selected plugins will not auto-update',
+      partial: 'Only selected plugins will auto-update. No plugins are currently selected, so no plugins will auto-update.',
+    },
+    excludeUpdate: 'The following {{num}} plugins will not auto-update',
+    partialUPdate: 'Only the following {{num}} plugins will auto-update',
+    operation: {
+      clearAll: 'Clear all',
+      select: 'Select plugins',
+    },
+    nextUpdateTime: 'Next auto-update: {{time}}',
+    pluginDowngradeWarning: {
+      title: 'Plugin Downgrade',
+      description: 'Auto-update is currently enabled for this plugin. Downgrading the version may cause your changes to be overwritten during the next automatic update.',
+      downgrade: 'Downgrade anyway',
+      exclude: 'Exclude from auto-update',
+    },
+    noPluginPlaceholder: {
+      noFound: 'No plugins were found',
+      noInstalled: 'No plugins installed',
+    },
+    updateSettings: 'Update Settings',
+    changeTimezone: 'To change time zone, go to <setTimezone>Settings</setTimezone>',
+  },
   pluginInfoModal: {
     title: 'Plugin info',
     repository: 'Repository',

web/i18n/zh-Hans/plugin.ts

@@ -114,6 +114,56 @@ const translation = {
     admins: '管理员',
     noone: '无人',
   },
+  autoUpdate: {
+    automaticUpdates: '自动更新',
+    updateTime: '更新时间',
+    specifyPluginsToUpdate: '指定要更新的插件',
+    strategy: {
+      disabled: {
+        name: '禁用',
+        description: '插件将不会自动更新',
+      },
+      fixOnly: {
+        name: '仅修复',
+        description: '仅自动更新补丁版本（例如，1.0.1 → 1.0.2）。次要版本更改不会触发更新。',
+        selectedDescription: '仅自动更新补丁版本',
+      },
+      latest: {
+        name: '最新',
+        description: '始终更新到最新版本',
+        selectedDescription: '始终更新到最新版本',
+      },
+    },
+    updateTimeTitle: '更新时间',
+    upgradeMode: {
+      all: '更新全部',
+      exclude: '排除选定',
+      partial: '仅选定',
+    },
+    upgradeModePlaceholder: {
+      exclude: '选定的插件将不会自动更新',
+      partial: '仅选定的插件将自动更新。目前未选择任何插件，因此不会自动更新任何插件。',
+    },
+    excludeUpdate: '以下 {{num}} 个插件将不会自动更新',
+    partialUPdate: '仅以下 {{num}} 个插件将自动更新',
+    operation: {
+      clearAll: '清除所有',
+      select: '选择插件',
+    },
+    nextUpdateTime: '下次自动更新时间: {{time}}',
+    pluginDowngradeWarning: {
+      title: '插件降级',
+      description: '此插件目前已启用自动更新。降级版本可能会导致您的更改在下次自动更新时被覆盖。',
+      downgrade: '仍然降级',
+      exclude: '从自动更新中排除',
+    },
+    noPluginPlaceholder: {
+      noFound: '未找到插件',
+      noInstalled: '未安装插件',
+    },
+    updateSettings: '更新设置',
+    changeTimezone: '要更改时区，请前往<setTimezone>设置</setTimezone>',
+  },
   pluginInfoModal: {
     title: '插件信息',
     repository: '仓库',

web/service/use-plugins.ts

@@ -13,7 +13,6 @@ import type {
   InstalledLatestVersionResponse,
   InstalledPluginListWithTotalResponse,
   PackageDependency,
-  Permissions,
   Plugin,
   PluginDeclaration,
   PluginDetail,
@@ -22,6 +21,7 @@ import type {
   PluginType,
   PluginsFromMarketplaceByInfoResponse,
   PluginsFromMarketplaceResponse,
+  ReferenceSetting,
   VersionInfo,
   VersionListResponse,
   uploadGitHubResponse,
@@ -40,7 +40,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 import { useInvalidateAllBuiltInTools } from './use-tools'
-import usePermission from '@/app/components/plugins/plugin-page/use-permission'
+import useReferenceSetting from '@/app/components/plugins/plugin-page/use-reference-setting'
 import { uninstallPlugin } from '@/service/plugins'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
 import { cloneDeep } from 'lodash-es'
@@ -350,37 +350,45 @@ export const useDebugKey = () => {
   })
 }
 
-const usePermissionsKey = [NAME_SPACE, 'permissions']
-export const usePermissions = () => {
+const useReferenceSettingKey = [NAME_SPACE, 'referenceSettings']
+export const useReferenceSettings = () => {
   return useQuery({
-    queryKey: usePermissionsKey,
-    queryFn: () => get<Permissions>('/workspaces/current/plugin/permission/fetch'),
+    queryKey: useReferenceSettingKey,
+    queryFn: () => get<ReferenceSetting>('/workspaces/current/plugin/preferences/fetch'),
   })
 }
 
-export const useInvalidatePermissions = () => {
+export const useInvalidateReferenceSettings = () => {
   const queryClient = useQueryClient()
   return () => {
     queryClient.invalidateQueries(
       {
-        queryKey: usePermissionsKey,
+        queryKey: useReferenceSettingKey,
       })
   }
 }
 
-export const useMutationPermissions = ({
+export const useMutationReferenceSettings = ({
   onSuccess,
 }: {
   onSuccess?: () => void
 }) => {
   return useMutation({
-    mutationFn: (payload: Permissions) => {
-      return post('/workspaces/current/plugin/permission/change', { body: payload })
+    mutationFn: (payload: ReferenceSetting) => {
+      return post('/workspaces/current/plugin/preferences/change', { body: payload })
     },
     onSuccess,
   })
 }
 
+export const useRemoveAutoUpgrade = () => {
+  return useMutation({
+    mutationFn: (payload: { plugin_id: string }) => {
+      return post('/workspaces/current/plugin/preferences/autoupgrade/exclude', { body: payload })
+    },
+  })
+}
+
 export const useMutationPluginsFromMarketplace = () => {
   return useMutation({
     mutationFn: (pluginsSearchParams: PluginsSearchParams) => {
@@ -427,6 +435,39 @@ export const useFetchPluginsInMarketPlaceByIds = (unique_identifiers: string[],
   })
 }
 
+export const useFetchPluginListOrBundleList = (pluginsSearchParams: PluginsSearchParams) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'fetchPluginListOrBundleList', pluginsSearchParams],
+    queryFn: () => {
+      const {
+        query,
+        sortBy,
+        sortOrder,
+        category,
+        tags,
+        exclude,
+        type,
+        page = 1,
+        pageSize = 40,
+      } = pluginsSearchParams
+      const pluginOrBundle = type === 'bundle' ? 'bundles' : 'plugins'
+      return postMarketplace<{ data: PluginsFromMarketplaceResponse }>(`/${pluginOrBundle}/search/advanced`, {
+        body: {
+          page,
+          page_size: pageSize,
+          query,
+          sort_by: sortBy,
+          sort_order: sortOrder,
+          category: category !== 'all' ? category : '',
+          tags,
+          exclude,
+          type,
+        },
+      })
+    },
+  })
+}
+
 export const useFetchPluginsInMarketPlaceByInfo = (infos: Record<string, any>[]) => {
   return useQuery({
     queryKey: [NAME_SPACE, 'fetchPluginsInMarketPlaceByInfo', infos],
@@ -448,7 +489,7 @@ const usePluginTaskListKey = [NAME_SPACE, 'pluginTaskList']
 export const usePluginTaskList = (category?: PluginType) => {
   const {
     canManagement,
-  } = usePermission()
+  } = useReferenceSetting()
   const { refreshPluginList } = useRefreshPluginList()
   const {
     data,