refactor(eliza): WIP - settings page + review page revamp

src/components/Eliza/CoreEliza.tsx

@@ -21,6 +21,7 @@ import { Text } from './components/Text';
 import { pages } from './settings';
 import { NewsletterSubscriber } from './components/NewsletterSubscriber';
 import type { CaptureEventFn } from './types';
+import { FormProviderCharacterBuilder } from './hooks/useElizaForm';
 
 interface ElizaCoreProps {
   isLoggedIn: UseDeployAIAgentProps['isLoggedIn'];
@@ -202,12 +203,14 @@ export const CoreEliza: React.FC<ElizaCoreProps> = ({
           <IllustrationIcon className="h-304 animate-pulse pt-48" />
         </div>
       )}
-      {steps.map(
-        (step) =>
-          step.condition && (
-            <React.Fragment key={step.id}>{step.content}</React.Fragment>
-          ),
-      )}
+      <FormProviderCharacterBuilder>
+        {steps.map(
+          (step) =>
+            step.condition && (
+              <React.Fragment key={step.id}>{step.content}</React.Fragment>
+            ),
+        )}
+      </FormProviderCharacterBuilder>
     </Layout>
   );
 };

src/components/Eliza/components/Characterfile.tsx

@@ -10,9 +10,6 @@ import type { GoToProps, Step, Template } from '../utils/types';
 import type React from 'react';
 import {
   INITIAL_FORM,
-  SECRETS_CLIENT_MAP,
-  SECRETS_MODEL_PROVIDER_MAP,
-  SECRETS_PLUGIN_MAP,
   TEMPLATE_CHARACTERFILES_MAP,
   TEMPLATES,
   TEMPLATES_MAP,
@@ -27,7 +24,6 @@ import { StyleForm } from './StyleForm';
 import { FaChevronLeft } from 'react-icons/fa6';
 import { useState } from 'react';
 import { Input } from './Input';
-import type { CharacterFormSchema } from '../utils/schema';
 import { pages } from '../settings';
 import { PluginsDropdown } from './PluginsDropdown';
 
@@ -136,42 +132,20 @@ export const Characterfile: React.FC<CharacterfileProps> = ({
     handleSubmit,
     formState: { errors },
     reset,
-    setValue,
   } = useElizaForm();
 
   const hasErrors = Object.entries(errors).length > 0;
 
-  const mapSettingsSecretsAndUpdateForm = (data: CharacterFormSchema) => {
-    const { modelProvider, clients, plugins } = data;
-    const model = { ...SECRETS_MODEL_PROVIDER_MAP[modelProvider] };
-    const client = clients.reduce((acc, client) => {
-      const clientData = SECRETS_CLIENT_MAP[client];
-      return { ...acc, ...clientData };
-    }, {});
-    const plugin = plugins.reduce((acc, plugin) => {
-      const pluginData = SECRETS_PLUGIN_MAP[plugin];
-      return { ...acc, ...pluginData };
-    }, {});
-    const updatedSecrets = {
-      ...model,
-      ...client,
-      ...plugin,
-      ...data.settings.secrets,
-    };
-    setValue('settings.secrets', updatedSecrets);
-  };
-
   const onPrevious = () => {
     completeStep(0);
     reset(INITIAL_FORM);
     goTo('getStarted');
   };
 
-  const onSubmit = (data: CharacterFormSchema) => {
+  const onSubmit = () => {
     if (completedStep === 0) {
       completeStep(1);
     }
-    mapSettingsSecretsAndUpdateForm(data);
     goTo('settings');
   };
 

src/components/Eliza/components/Collapsible.tsx

@@ -7,18 +7,34 @@ import { cn } from '@utils/cn';
 type CollapsibleProps = {
   header: React.ReactNode;
   details: React.ReactNode;
+  defaultOpen?: boolean;
+  container?: boolean;
 };
 
 export const Collapsible: React.FC<CollapsibleProps> = ({
   header,
   details,
+  defaultOpen = false,
+  container = false,
 }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
 
   return (
-    <Box className="gap-4">
+    <Box
+      className={cn({
+        'gap-4': !container,
+        'gap-0 p-0': container,
+      })}
+      variant={container ? 'container' : undefined}
+    >
       <Box
-        className="cursor-pointer select-none flex-row items-center justify-between gap-16"
+        className={cn(
+          'cursor-pointer select-none flex-row items-center justify-between gap-16',
+          {
+            'p-16 hover:bg-elz-neutral-2': container,
+            'border-b border-elz-neutral-6': container && isOpen,
+          },
+        )}
         onClick={() => setIsOpen((prev) => !prev)}
       >
         {header}
@@ -27,7 +43,13 @@ export const Collapsible: React.FC<CollapsibleProps> = ({
         />
       </Box>
       {isOpen && (
-        <Box className="duration-200 animate-in fade-in-50 slide-in-from-top-4">
+        <Box
+          className={cn({
+            'duration-200 animate-in fade-in-50 slide-in-from-top-4':
+              !defaultOpen,
+            'gap-16 p-16': container,
+          })}
+        >
           {details}
         </Box>
       )}

src/components/Eliza/components/Input.tsx

@@ -22,7 +22,8 @@ const inputVariants = cva(
         isLoading: 'border-elz-neutral-4 animate-pulse bg-elz-neutral-4',
         error:
           'border-elz-danger-8 focus-within:border-elz-danger-8 focus-within:outline-elz-danger-8',
-        disabled: 'cursor-not-allowed bg-elz-neutral-3 border-elz-neutral-7',
+        disabled:
+          'cursor-not-allowed bg-elz-neutral-3 border-elz-neutral-7 text-elz-neutral-11',
       },
     },
     compoundVariants: [

src/components/Eliza/components/Navigation.tsx

@@ -7,7 +7,6 @@ import {
   type NavigationState,
 } from '../utils/types';
 import { Characterfile } from './Characterfile';
-import { FormProviderCharacterBuilder } from '../hooks/useElizaForm';
 import type { UseDeployAIAgentProps } from '../hooks/useDeployAIAgent';
 import { SettingsPage } from './SettingsPage';
 import { ReviewPage } from './ReviewPage';
@@ -103,9 +102,5 @@ export const Navigation: React.FC<NavigationProps> = ({
     ),
   };
 
-  return (
-    <FormProviderCharacterBuilder>
-      {pages[navigationState.page]}
-    </FormProviderCharacterBuilder>
-  );
+  return pages[navigationState.page];
 };