Feat/plugins (#12547)

Co-authored-by: AkaraChen <akarachen@outlook.com>
Co-authored-by: Yi <yxiaoisme@gmail.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: kurokobo <kuro664@gmail.com>
Co-authored-by: Hiroshi Fujita <fujita-h@users.noreply.github.com>

web/app/components/base/install-button/index.tsx

@@ -0,0 +1,27 @@
+import Button from '../button'
+import { RiInstallLine, RiLoader2Line } from '@remixicon/react'
+
+type InstallButtonProps = {
+  loading: boolean
+  onInstall: (e: React.MouseEvent) => void
+  t: any
+}
+
+const InstallButton = ({ loading, onInstall, t }: InstallButtonProps) => {
+  return (
+    <Button size='small' className='z-[100]' onClick={onInstall}>
+      <div className={`flex px-[3px] justify-center items-center gap-1 
+        ${loading ? 'text-components-button-secondary-text-disabled' : 'text-components-button-secondary-text'} 
+        system-xs-medium`}
+      >
+        {loading ? t('workflow.nodes.agent.pluginInstaller.installing') : t('workflow.nodes.agent.pluginInstaller.install')}
+      </div>
+      {loading
+        ? <RiLoader2Line className='w-3.5 h-3.5 text-text-quaternary animate-spin' />
+        : <RiInstallLine className='w-3.5 h-3.5 text-text-secondary' />
+      }
+    </Button>
+  )
+}
+
+export default InstallButton