feat: plugin auto upgrade strategy (#19758)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: crazywoola <427733928@qq.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Novice <novice12185727@gmail.com>

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)