🛠️ Fix: Update Agent Cache and Improve Actions UI (#5020)

* style: improve a11y, localization, and styling consistency of actions input form

* refactor: move agent mutations to dedicated module

* fix: update agent cache on agent deletion + delete and update actions

client/src/components/SidePanel/Builder/ActionsInput.tsx

@@ -18,7 +18,6 @@ import type { Spec } from './ActionsTable';
 import { useAssistantsMapContext, useToastContext } from '~/Providers';
 import { ActionsTable, columns } from './ActionsTable';
 import { useUpdateAction } from '~/data-provider';
-import { cn, removeFocusOutlines } from '~/utils';
 import useLocalize from '~/hooks/useLocalize';
 import { Spinner } from '~/components/svg';
 
@@ -219,7 +218,7 @@ export default function ActionsInput({
             htmlFor="example-schema"
             className="text-token-text-primary whitespace-nowrap font-medium"
           >
-            Schema
+            {localize('com_ui_schema')}
           </label>
           <div className="flex items-center gap-2">
             {/* <button className="btn btn-neutral border-token-border-light relative h-8 min-w-[100px] rounded-lg font-medium">
@@ -238,17 +237,15 @@ export default function ActionsInput({
             </select>
           </div>
         </div>
-        <div className="border-token-border-light mb-4 overflow-hidden rounded-lg border">
+        <div className="border-token-border-medium bg-token-surface-primary hover:border-token-border-hover mb-4 w-full overflow-hidden rounded-lg border ring-0">
           <div className="relative">
             <textarea
+              id="schemaInput"
               value={inputValue}
               onChange={handleInputChange}
               spellCheck="false"
-              placeholder="Enter your OpenAPI schema here"
-              className={cn(
-                'text-token-text-primary block h-96 w-full border-none bg-transparent p-2 font-mono text-xs',
-                removeFocusOutlines,
-              )}
+              placeholder={localize('com_ui_enter_openapi_schema')}
+              className="text-token-text-primary block h-96 w-full bg-transparent p-2 font-mono text-xs outline-none focus:ring-1 focus:ring-border-light"
             />
             {/* TODO: format input button */}
           </div>
@@ -271,20 +268,18 @@ export default function ActionsInput({
           <ActionsTable columns={columns} data={data} />
         </div>
       )}
-      <div className="mt-4">
-        <div className="rounded-md border border-gray-300 px-3 py-2 shadow-none focus-within:border-gray-800 focus-within:ring-1 focus-within:ring-gray-800 dark:border-gray-700 dark:bg-gray-700 dark:focus-within:border-gray-500 dark:focus-within:ring-gray-500">
-          <label htmlFor="privacyPolicyUrl" className="block text-xs text-text-secondary">
-            Privacy Policy URL
+      <div className="relative my-1">
+        <div className="mb-1.5 flex items-center">
+          <label className="text-token-text-primary block font-medium">
+            {localize('com_ui_privacy_policy_url')}
           </label>
-          <div className="relative">
-            <input
-              name="privacyPolicyUrl"
-              id="privacyPolicyUrl"
-              className="block w-full border-0 bg-transparent p-0 placeholder-text-secondary shadow-none outline-none focus-within:shadow-none focus-within:outline-none focus-within:ring-0 focus:border-none focus:ring-0 sm:text-sm"
-              placeholder="https://api.example-weather-app.com/privacy"
-              // value=""
-            />
-          </div>
+        </div>
+        <div className="border-token-border-medium bg-token-surface-primary hover:border-token-border-hover flex h-9 w-full rounded-lg border">
+          <input
+            type="text"
+            placeholder="https://api.example-weather-app.com/privacy"
+            className="flex-1 rounded-lg bg-transparent px-3 py-1.5 text-sm outline-none focus:ring-1 focus:ring-border-light"
+          />
         </div>
       </div>
       <div className="flex items-center justify-end">

client/src/components/SidePanel/Builder/ActionsPanel.tsx

@@ -155,16 +155,16 @@ export default function ActionsPanel({
             )}
 
             <div className="text-xl font-medium">{(action ? 'Edit' : 'Add') + ' ' + 'actions'}</div>
-            <div className="text-token-text-tertiary text-sm">
+            <div className="text-xs text-text-secondary">
               {localize('com_assistants_actions_info')}
             </div>
-            {/* <div className="text-sm text-token-text-tertiary">
+            {/* <div className="text-sm text-text-secondary">
             <a href="https://help.openai.com/en/articles/8554397-creating-a-gpt" target="_blank" rel="noreferrer" className="font-medium">Learn more.</a>
           </div> */}
           </div>
           <Dialog open={openAuthDialog} onOpenChange={setOpenAuthDialog}>
             <DialogTrigger asChild>
-              <div className="relative mb-6">
+              <div className="relative mb-4">
                 <div className="mb-1.5 flex items-center">
                   <label className="text-token-text-primary block font-medium">
                     {localize('com_ui_authentication')}