fix: setting plugin style

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

@@ -9,7 +9,7 @@ import {
   InformationCircleIcon,
   XCircleIcon,
 } from '@heroicons/react/20/solid'
-import { createContext } from 'use-context-selector'
+import { createContext, useContext } from 'use-context-selector'
 
 export type IToastProps = {
   type?: 'success' | 'error' | 'warning' | 'info'
@@ -24,6 +24,7 @@ type IToastContext = {
 const defaultDuring = 3000
 
 export const ToastContext = createContext<IToastContext>({} as IToastContext)
+export const useToastContext = () => useContext(ToastContext)
 const Toast = ({
   type = 'info',
   duration,
@@ -31,9 +32,9 @@ const Toast = ({
   children,
 }: IToastProps) => {
   // sometimes message is react node array. Not handle it.
-  if (typeof message !== 'string') {
+  if (typeof message !== 'string')
     return null
-  }
+
   return <div className={classNames(
     'fixed rounded-md p-4 my-4 mx-8 z-50',
     'top-0',

web/app/components/header/account-setting/key-validator/KeyInput.tsx

@@ -58,7 +58,7 @@ const KeyInput = ({
       '>
         <input
           className='
-            w-full py-[9px]
+            w-full py-[9px] mr-2
             text-xs font-medium text-gray-700 leading-[18px]
             appearance-none outline-none bg-transparent
           '

web/app/components/header/account-setting/plugin-page/SerpapiPlugin.tsx

@@ -4,6 +4,7 @@ import SerpapiLogo from '../../assets/serpapi.png'
 import KeyValidator from '../key-validator'
 import type { Form, ValidateValue } from '../key-validator/declarations'
 import { updatePluginKey, validatePluginKey } from './utils'
+import { useToastContext } from '@/app/components/base/toast'
 import type { PluginProvider } from '@/models/common'
 
 type SerpapiPluginProps = {
@@ -15,6 +16,7 @@ const SerpapiPlugin = ({
   onUpdate,
 }: SerpapiPluginProps) => {
   const { t } = useTranslation()
+  const { notify } = useToastContext()
 
   const forms: Form[] = [{
     key: 'api_key',
@@ -51,6 +53,7 @@ const SerpapiPlugin = ({
     })
 
     if (res.status === 'success') {
+      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
       onUpdate()
       return true
     }

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

@@ -11,7 +11,7 @@ const PluginPage = () => {
   const { data: plugins, mutate } = useSWR('/workspaces/current/tool-providers', fetchPluginProviders)
 
   const Plugin_MAP: Record<string, any> = {
-    serpapi: (plugin: PluginProvider) => <SerpapiPlugin plugin={plugin} onUpdate={() => mutate()} />,
+    serpapi: (plugin: PluginProvider) => <SerpapiPlugin key='serpapi' plugin={plugin} onUpdate={() => mutate()} />,
   }
 
   return (
@@ -19,7 +19,7 @@ const PluginPage = () => {
       <div>
         {plugins?.map(plugin => Plugin_MAP[plugin.tool_name](plugin))}
       </div>
-      <div className='absolute bottom-0 w-full h-[42px] flex items-center bg-white text-xs text-gray-500'>
+      <div className='fixed bottom-0 w-[472px] h-[42px] flex items-center bg-white text-xs text-gray-500'>
         <LockClosedIcon className='w-3 h-3 mr-1' />
         {t('common.provider.encrypted.front')}
         <Link