feat: auto update button

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/llm/OpenaiYellow.tsx

@@ -1,20 +0,0 @@
-// GENERATE BY script
-// DON NOT EDIT IT MANUALLY
-
-import * as React from 'react'
-import data from './OpenaiYellow.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 = 'OpenaiYellow'
-
-export default Icon

web/app/components/base/icons/src/public/llm/index.ts

@@ -28,11 +28,9 @@ export { default as Microsoft } from './Microsoft'
 export { default as OpenaiBlack } from './OpenaiBlack'
 export { default as OpenaiBlue } from './OpenaiBlue'
 export { default as OpenaiGreen } from './OpenaiGreen'
-export { default as OpenaiTeal } from './OpenaiTeal'
 export { default as OpenaiText } from './OpenaiText'
 export { default as OpenaiTransparent } from './OpenaiTransparent'
 export { default as OpenaiViolet } from './OpenaiViolet'
-export { default as OpenaiYellow } from './OpenaiYellow'
 export { default as OpenllmText } from './OpenllmText'
 export { default as Openllm } from './Openllm'
 export { default as ReplicateText } from './ReplicateText'

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/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

@@ -2,7 +2,7 @@
 // DON NOT EDIT IT MANUALLY
 
 import * as React from 'react'
-import data from './OpenaiTeal.json'
+import data from './AutoUpdateLine.json'
 import IconBase from '@/app/components/base/icons/IconBase'
 import type { IconData } from '@/app/components/base/icons/IconBase'
 
@@ -15,6 +15,6 @@ const Icon = (
   },
 ) => <IconBase {...props} ref={ref} data={data as IconData} />
 
-Icon.displayName = 'OpenaiTeal'
+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/plugin-detail-panel/detail-header.tsx

@@ -35,6 +35,8 @@ import { useProviderContext } from '@/context/provider-context'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
 import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
+import { AutoUpdateLine } from '../../base/icons/src/vender/system'
+import { timeOfDayToDayjs } from '../reference-setting-modal/auto-update-setting/utils'
 
 const i18nPrefix = 'plugin.action'
 
@@ -205,6 +207,15 @@ const DetailHeader = ({
                 />
               }
             />
+            {/* Auto update info */}
+            <Tooltip popupContent={t('plugin.autoUpdate.nextUpdateTime', { time: timeOfDayToDayjs(3600).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) {

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

@@ -130,7 +130,7 @@ const PluginPage = ({
   const [showPluginSettingModal, {
     setTrue: setShowPluginSettingModal,
     setFalse: setHidePluginSettingModal,
-  }] = useBoolean(true)
+  }] = useBoolean(false)
   const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
   const options = usePluginPageContext(v => v.options)

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

@@ -6,25 +6,12 @@ import Label from '../label'
 import StrategyPicker from './strategy-picker'
 import { useTranslation } from 'react-i18next'
 import TimePicker from '@/app/components/base/date-and-time-picker/time-picker'
-import type { Dayjs } from 'dayjs'
-import dayjs from 'dayjs'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import PluginsPicker from './plugins-picker'
+import { dayjsToTimeOfDay, timeOfDayToDayjs } from './utils'
 
 const i18nPrefix = 'plugin.autoUpdate'
 
-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
-}
-
-const dayjsToTimeOfDay = (date?: Dayjs): number => {
-  if(!date) return 0
-  return date.hour() * 3600 + date.minute() * 60
-}
-
 type Props = {
   payload: AutoUpdateConfig
   onChange: (payload: AutoUpdateConfig) => void

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

@@ -0,0 +1,14 @@
+import type { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
+
+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 dayjsToTimeOfDay = (date?: Dayjs): number => {
+  if(!date) return 0
+  return date.hour() * 3600 + date.minute() * 60
+}

web/i18n/en-US/plugin.ts

@@ -143,6 +143,7 @@ const translation = {
       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.',
     },
+    nextUpdateTime: 'Next auto-update: {{time}}',
   },
   pluginInfoModal: {
     title: 'Plugin info',