From 1cae6e7ef261292bdf61d3d822171a416dee79e2 Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Tue, 28 Jan 2025 11:10:44 -0300 Subject: [PATCH 1/9] refactor: settings page --- .../Eliza/components/SettingsPage.tsx | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index da5815fb5..095d75b97 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -43,7 +43,7 @@ export const SettingsPage: React.FC = ({ }) => { const [errorJson, setErrorJson] = useState(false); - const { control, formState, handleSubmit, reset } = useElizaForm(); + const { control, formState, register, handleSubmit, reset } = useElizaForm(); const readableErrors = transformErrors(formState.errors.settings); const hasErrors = readableErrors.length > 0 || errorJson; @@ -63,6 +63,28 @@ export const SettingsPage: React.FC = ({ goTo('review'); }; + return ( + + +
+ Settings + + Add the secrets for any services your AI agent will access, including + LLMs. Click{' '} + + here + {' '} + to view all the supported secrets. + + + + + ); + return ( From 15dc21c1347b4a3750e7fbfc5b8cc776377c9d5a Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Tue, 28 Jan 2025 13:28:56 -0300 Subject: [PATCH 2/9] feat: add inputs to settings secrets and voice --- .../Eliza/components/SettingsPage.tsx | 46 +++++++++++++++++-- 1 file changed, 43 insertions(+), 3 deletions(-) diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index 095d75b97..681b43ac2 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -7,7 +7,7 @@ import type React from 'react'; import Link, { Target } from './Link'; import { useElizaForm } from '../hooks/useElizaForm'; import { useState } from 'react'; -import { Controller } from 'react-hook-form'; +import { Controller, useForm } from 'react-hook-form'; import FileEditor from '@components/Eliza/components/FileEditor'; import { cn } from '@utils/cn'; import { Input } from './Input'; @@ -43,7 +43,7 @@ export const SettingsPage: React.FC = ({ }) => { const [errorJson, setErrorJson] = useState(false); - const { control, formState, register, handleSubmit, reset } = useElizaForm(); + const { control, formState, getValues, handleSubmit, reset } = useElizaForm(); const readableErrors = transformErrors(formState.errors.settings); const hasErrors = readableErrors.length > 0 || errorJson; @@ -63,6 +63,17 @@ export const SettingsPage: React.FC = ({ goTo('review'); }; + const defaultValues = { + secrets: { ...getValues().settings.secrets }, + voice: { + model: getValues().settings.voice.model, + }, + }; + + const formValues = Object.entries(defaultValues.secrets); + + const { register } = useForm({ defaultValues }); + return ( @@ -81,7 +92,36 @@ export const SettingsPage: React.FC = ({ to view all the supported secrets. - + + + + Add secrets + + Add secrets + + + Key + Value + + {formValues.map(([key]) => ( + + + + + + + + + ))} + + + + Voice + + + + + ); From 30f9f742bbbf8fab1c460e8dc01be94d9efd64fd Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Tue, 28 Jan 2025 14:25:28 -0300 Subject: [PATCH 3/9] feat: integrate settings form with eliza form --- src/components/Eliza/components/Input.tsx | 3 +- .../Eliza/components/SettingsPage.tsx | 181 ++++++------------ src/components/Eliza/utils/schema.ts | 23 ++- 3 files changed, 76 insertions(+), 131 deletions(-) diff --git a/src/components/Eliza/components/Input.tsx b/src/components/Eliza/components/Input.tsx index 1d88bddc7..f57983bf9 100644 --- a/src/components/Eliza/components/Input.tsx +++ b/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: [ diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index 681b43ac2..9125bd247 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -6,12 +6,10 @@ import type { GoToProps, Step } from '../utils/types'; import type React from 'react'; import Link, { Target } from './Link'; import { useElizaForm } from '../hooks/useElizaForm'; -import { useState } from 'react'; -import { Controller, useForm } from 'react-hook-form'; -import FileEditor from '@components/Eliza/components/FileEditor'; -import { cn } from '@utils/cn'; +import { useForm } from 'react-hook-form'; import { Input } from './Input'; -import { transformErrors } from '../utils/transformData'; +import { settingsSchema, type SettingsSchema } from '../utils/schema'; +import { zodResolver } from '@hookform/resolvers/zod'; type HeaderProps = { onPrevious: () => void; @@ -41,39 +39,35 @@ export const SettingsPage: React.FC = ({ completeStep, completedStep, }) => { - const [errorJson, setErrorJson] = useState(false); + const { getValues, reset, setValue } = useElizaForm(); - const { control, formState, getValues, handleSubmit, reset } = useElizaForm(); + const defaultValues = { + secrets: { ...getValues().settings.secrets }, + voice: { + model: getValues().settings.voice.model, + }, + }; + + const formValues = Object.entries(defaultValues.secrets); - const readableErrors = transformErrors(formState.errors.settings); - const hasErrors = readableErrors.length > 0 || errorJson; + const { register, handleSubmit, formState } = useForm({ + defaultValues, + resolver: zodResolver(settingsSchema), + }); const onPrevious = () => { reset(); goTo('characterfile'); }; - const onSubmit = () => { - if (errorJson) return; - + const onSubmit = (data: SettingsSchema) => { if (completedStep === 1) { completeStep(2); } - + setValue('settings', data); goTo('review'); }; - const defaultValues = { - secrets: { ...getValues().settings.secrets }, - voice: { - model: getValues().settings.voice.model, - }, - }; - - const formValues = Object.entries(defaultValues.secrets); - - const { register } = useForm({ defaultValues }); - return ( @@ -92,105 +86,56 @@ export const SettingsPage: React.FC = ({ to view all the supported secrets. - - - - Add secrets - - Add secrets - - - Key - Value - - {formValues.map(([key]) => ( - - - - - - - + + + + + Add secrets + + + These are required to connect with your model, clients and + plugins. + - ))} - - - - Voice - - - - - - - ); - - return ( - - -
- Settings - - Add the secrets for any services your AI agent will access, including - LLMs. Click{' '} - - here - {' '} - to view all the supported secrets. - - - - ( - { - try { - field.onChange(JSON.parse(data || '')); - } catch (e) { - console.warn( - `Settings have not been saved due to a malformed object that can't be parsed. The editor will try again in the next value change.`, - ); - } - }} - onValidation={(jsonError) => setErrorJson(!jsonError)} - className={cn({ - 'border-elz-danger-8 transition-colors': hasErrors, - })} - /> + + Key + Value + + {formValues.map(([key]) => { + const error = formState.errors.secrets?.[key]; + return ( + + + + + + + + + ); + })} + {formState.errors.secrets && ( + Please add the values missing. )} - /> - {errorJson && ( - + + + + + Voice + + Optional voice model + + + + + {formState.errors.voice && ( - There was an error parsing your code. Please fix it or revert the - change above. + {formState.errors.voice.model?.message} - - )} - {hasErrors && ( - - {readableErrors.map((error) => ( - - {readableErrors.length > 1 && '-'} {error.label}:{' '} - {error.message} - - ))} - - )} + )} + + diff --git a/src/components/Eliza/utils/schema.ts b/src/components/Eliza/utils/schema.ts index 941a77f0b..43792b13c 100644 --- a/src/components/Eliza/utils/schema.ts +++ b/src/components/Eliza/utils/schema.ts @@ -2,6 +2,15 @@ import { z } from 'zod'; import { CLIENT_NAMES, MODEL_PROVIDER_NAMES, PLUGIN_NAMES } from './constants'; import type { Character } from './types'; +export const settingsSchema = z.object({ + secrets: z.record(z.string().min(1, 'value is missing')), + voice: z.object({ + model: z.string().optional(), + }), +}); + +export type SettingsSchema = z.infer; + /** Schema for the form builder, which is * slightly different than the final characterfile. * We need it due to how React Hook Form handles arrays. @@ -18,12 +27,7 @@ export const characterFormSchema = z.object({ clients: z .array(z.enum(CLIENT_NAMES)) .min(1, 'At least one client is required'), - settings: z.object({ - secrets: z.record(z.string().min(1, 'value is missing')), - voice: z.object({ - model: z.string().min(3, 'Voice model is required'), - }), - }), + settings: settingsSchema, bio: z.array( z.object({ name: z.string().min(3, 'Bio is required, minimum of 3 characters'), @@ -112,12 +116,7 @@ export const characterfileSchema = z.object({ }), ) .min(1, 'At least one client is required'), - settings: z.object({ - secrets: z.record(z.string().min(1, 'value is missing')), - voice: z.object({ - model: z.string().min(3, 'Voice model is required'), - }), - }), + settings: settingsSchema, bio: z.array(z.string().min(3, 'Bio is required, minimum of 3 characters')), lore: z.array(z.string().min(3, 'Lore is required, minimum of 3 characters')), knowledge: z.array(z.string()).optional(), From 84209e87a439f4b5c74356e86838ef1d945cf7da Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Tue, 28 Jan 2025 17:13:58 -0300 Subject: [PATCH 4/9] refactor: review page --- .../Eliza/components/Collapsible.tsx | 30 +- .../Eliza/components/ReviewPage.tsx | 315 +++++++++++++++--- src/components/Eliza/components/Text.tsx | 2 + 3 files changed, 295 insertions(+), 52 deletions(-) diff --git a/src/components/Eliza/components/Collapsible.tsx b/src/components/Eliza/components/Collapsible.tsx index 71e8d80d1..8a3117d06 100644 --- a/src/components/Eliza/components/Collapsible.tsx +++ b/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 = ({ header, details, + defaultOpen = false, + container = false, }) => { - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(defaultOpen); return ( - + setIsOpen((prev) => !prev)} > {header} @@ -27,7 +43,13 @@ export const Collapsible: React.FC = ({ /> {isOpen && ( - + {details} )} diff --git a/src/components/Eliza/components/ReviewPage.tsx b/src/components/Eliza/components/ReviewPage.tsx index ee9609b8a..85950d7cb 100644 --- a/src/components/Eliza/components/ReviewPage.tsx +++ b/src/components/Eliza/components/ReviewPage.tsx @@ -15,8 +15,14 @@ import { cn } from '@utils/cn'; import { Input } from './Input'; import { characterfileSchema } from '../utils/schema'; import { validateZod } from '../utils/validateHelper'; -import { INITIAL_FORM } from '../utils/constants'; +import { + CLIENTS_MAP, + INITIAL_FORM, + MODEL_PROVIDER_NAMES_MAP, + PLUGINS_MAP, +} from '../utils/constants'; import { Collapsible } from './Collapsible'; +import { Badge } from './Badge'; type HeaderProps = { from: Options['from']; @@ -87,6 +93,9 @@ export const ReviewPage: React.FC = ({ characterfile || JSON.stringify(transformedData, null, 2), ); const [errors, setErrors] = useState(INITIAL_ERRORS); + const [viewMode, setViewMode] = useState<'readable' | 'json'>( + from === 'upload' ? 'json' : 'readable', + ); const hasErrors = errors.json || errors.form.length > 0; @@ -119,6 +128,213 @@ export const ReviewPage: React.FC = ({ onDeployBtnClick(payload); }; + const changeViewMode = ( + + + + + ); + + const deployButton = ( + + ); + + if (viewMode === 'readable') + return ( + + +
+ Confirm agent details + + You will be deploying an agent with the information below. This is + the final step before your agent is deployed. + + + + {changeViewMode} + General} + details={ + <> + + Name + {data.name} + + + Model provider + + {MODEL_PROVIDER_NAMES_MAP[data.modelProvider].label} + + + + Clients + + {data.clients.map((client) => ( + {CLIENTS_MAP[client].label} + ))} + + + {data.plugins.length > 0 && ( + + Plugins + + {data.plugins.map((plugin) => ( + {PLUGINS_MAP[plugin].label} + ))} + + + )} + + } + /> + Background} + details={ + <> + + Bio +
    + {data.bio.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + + Lore +
    + {data.lore.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + {data.knowledge && data.knowledge.length > 0 && ( + + Knowledge +
    + {data.knowledge.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + )} + + } + /> + Message examples} + details={ + <> + {data.messageExamples.map((example, idx) => ( + + Example #{idx + 1} + {example.map((msg, innerIdx) => { + const isEven = innerIdx % 2 === 0; + return ( + + + {isEven ? 'User' : data.name} + + {msg.content.text} + + ); + })} + + ))} + + } + /> + Communication style} + details={ + <> + + All +
    + {data.style.all.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + + Chat +
    + {data.style.chat.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + + Post +
    + {data.style.post.map((entry) => ( +
  • {entry.name}
    • + ))} +
+ + + } + /> + Interests} + details={ + <> + + Topics + + {data.topics.map((topic) => ( + + {topic} + + ))} + + + + Adjectives + + {data.adjectives.map((adjective) => ( + + {adjective} + + ))} + + + + } + /> + + {deployButton} + + ); + return ( @@ -129,55 +345,58 @@ export const ReviewPage: React.FC = ({ final step before your agent is deployed. - - - setErrors({ ...errors, json: !jsonError }) - } - className={cn({ 'border-elz-danger-8 transition-colors': hasErrors })} - /> - {errors.json && ( - - - JSON error: there was an error parsing your code. Please fix it or - revert the change above. - - )} - {errors.form.length > 0 && ( - - {errors.form.map((error, idx) => { - const isLastItem = idx === errors.form.length - 1; - const errorMsg = `${error.path}: ${error.message}`; - return ( - - {error.options ? ( - {errorMsg}} - details={ - - Supported options: {error.options.join(', ')} - - } - /> - ) : ( - {errorMsg} - )} - - ); + + {changeViewMode} + + + setErrors({ ...errors, json: !jsonError }) + } + className={cn({ + 'border-elz-danger-8 transition-colors': hasErrors, })} - - )} + /> + {errors.json && ( + + - JSON error: there was an error parsing your code. Please fix it + or revert the change above. + + )} + {errors.form.length > 0 && ( + + {errors.form.map((error, idx) => { + const isLastItem = idx === errors.form.length - 1; + const errorMsg = `${error.path}: ${error.message}`; + return ( + + {error.options ? ( + {errorMsg}} + details={ + + Supported options: {error.options.join(', ')} + + } + /> + ) : ( + {errorMsg} + )} + + ); + })} + + )} + - + {deployButton} ); }; diff --git a/src/components/Eliza/components/Text.tsx b/src/components/Eliza/components/Text.tsx index 20218e156..4a5d3d84c 100644 --- a/src/components/Eliza/components/Text.tsx +++ b/src/components/Eliza/components/Text.tsx @@ -7,6 +7,8 @@ const textVariants = cva('font-elz-plex-sans', { variant: { title: 'text-balance font-elz-sans text-[3.6rem] font-semibold leading-[1.125] -tracking-2 text-elz-neutral-12 md:text-[5.2rem]', + subtitle: + 'font-elz-plex-sans text-[1.6rem] text-elz-neutral-12 font-semibold', description: 'text-[1.8rem] font-medium text-elz-neutral-11', feature: 'text-[1.2rem] font-medium uppercase tracking-[0.256rem] text-elz-neutral-11', From 9e0d4e4a1f86626a64411357bc1a97b31b07c0eb Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Wed, 29 Jan 2025 15:12:22 -0300 Subject: [PATCH 5/9] refactor: move secrets mapping to settingspage --- .../Eliza/components/Characterfile.tsx | 28 +------------------ .../Eliza/components/SettingsPage.tsx | 13 +++++---- src/components/Eliza/utils/transformData.ts | 24 ++++++++++++++++ 3 files changed, 32 insertions(+), 33 deletions(-) diff --git a/src/components/Eliza/components/Characterfile.tsx b/src/components/Eliza/components/Characterfile.tsx index ac44ee836..4f43881fe 100644 --- a/src/components/Eliza/components/Characterfile.tsx +++ b/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 = ({ 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'); }; diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index 9125bd247..f1a8a2b10 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form'; import { Input } from './Input'; import { settingsSchema, type SettingsSchema } from '../utils/schema'; import { zodResolver } from '@hookform/resolvers/zod'; +import { extractSecretsFromData } from '../utils/transformData'; type HeaderProps = { onPrevious: () => void; @@ -41,20 +42,20 @@ export const SettingsPage: React.FC = ({ }) => { const { getValues, reset, setValue } = useElizaForm(); + const data = getValues(); + const defaultValues = { - secrets: { ...getValues().settings.secrets }, - voice: { - model: getValues().settings.voice.model, - }, + secrets: extractSecretsFromData(data), + voice: { model: data.settings.voice.model }, }; - const formValues = Object.entries(defaultValues.secrets); - const { register, handleSubmit, formState } = useForm({ defaultValues, resolver: zodResolver(settingsSchema), }); + const formValues = Object.entries(defaultValues.secrets); + const onPrevious = () => { reset(); goTo('characterfile'); diff --git a/src/components/Eliza/utils/transformData.ts b/src/components/Eliza/utils/transformData.ts index 04a002927..33156c098 100644 --- a/src/components/Eliza/utils/transformData.ts +++ b/src/components/Eliza/utils/transformData.ts @@ -2,6 +2,11 @@ import type { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form'; import type { Character } from './types'; import type { CharacterfileSchema, CharacterFormSchema } from './schema'; import type { Primitive, ZodError } from 'zod'; +import { + SECRETS_CLIENT_MAP, + SECRETS_MODEL_PROVIDER_MAP, + SECRETS_PLUGIN_MAP, +} from './constants'; type TransformedError = { label: string; @@ -100,3 +105,22 @@ export const transformSchemaToCharacter = ( }, }; }; + +export const extractSecretsFromData = (data: CharacterFormSchema) => { + const { modelProvider, clients, plugins } = data; + const model = { ...SECRETS_MODEL_PROVIDER_MAP[modelProvider] }; + const client = clients.reduce( + (acc, client) => ({ ...acc, ...SECRETS_CLIENT_MAP[client] }), + {}, + ); + const plugin = plugins.reduce( + (acc, plugin) => ({ ...acc, ...SECRETS_PLUGIN_MAP[plugin] }), + {}, + ); + return { + ...model, + ...client, + ...plugin, + ...data.settings.secrets, + }; +}; From 7ab304a95b78d8f47e3dc03badeec9e36d83e898 Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Wed, 29 Jan 2025 15:57:07 -0300 Subject: [PATCH 6/9] chore: sync forms --- src/components/Eliza/components/SettingsPage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index f1a8a2b10..429e227ca 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -40,7 +40,7 @@ export const SettingsPage: React.FC = ({ completeStep, completedStep, }) => { - const { getValues, reset, setValue } = useElizaForm(); + const { getValues, setValue } = useElizaForm(); const data = getValues(); @@ -49,7 +49,7 @@ export const SettingsPage: React.FC = ({ voice: { model: data.settings.voice.model }, }; - const { register, handleSubmit, formState } = useForm({ + const { reset, register, handleSubmit, formState } = useForm({ defaultValues, resolver: zodResolver(settingsSchema), }); From 8ef3cdc9b277e4f4be44d1080f2aa24161bbaeb7 Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Wed, 29 Jan 2025 16:13:54 -0300 Subject: [PATCH 7/9] chore: move form context up --- src/components/Eliza/CoreEliza.tsx | 15 +++++++++------ src/components/Eliza/components/Navigation.tsx | 7 +------ 2 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/components/Eliza/CoreEliza.tsx b/src/components/Eliza/CoreEliza.tsx index adcb234c1..06a83ae54 100644 --- a/src/components/Eliza/CoreEliza.tsx +++ b/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 = ({ )} - {steps.map( - (step) => - step.condition && ( - {step.content} - ), - )} + + {steps.map( + (step) => + step.condition && ( + {step.content} + ), + )} + ); }; diff --git a/src/components/Eliza/components/Navigation.tsx b/src/components/Eliza/components/Navigation.tsx index 1740d8138..d781b1e51 100644 --- a/src/components/Eliza/components/Navigation.tsx +++ b/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 = ({ ), }; - return ( - - {pages[navigationState.page]} - - ); + return pages[navigationState.page]; }; From 8964c35116b3e74cab0d896d5c58e029212c98f2 Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Wed, 29 Jan 2025 17:50:47 -0300 Subject: [PATCH 8/9] chore: schema improvements --- .../Eliza/components/ReviewPage.tsx | 45 +++++++++-------- .../Eliza/components/SettingsPage.tsx | 2 + src/components/Eliza/utils/schema.ts | 50 ++++++------------- 3 files changed, 42 insertions(+), 55 deletions(-) diff --git a/src/components/Eliza/components/ReviewPage.tsx b/src/components/Eliza/components/ReviewPage.tsx index 85950d7cb..9edf08509 100644 --- a/src/components/Eliza/components/ReviewPage.tsx +++ b/src/components/Eliza/components/ReviewPage.tsx @@ -177,14 +177,17 @@ export const ReviewPage: React.FC = ({ Model provider - {MODEL_PROVIDER_NAMES_MAP[data.modelProvider].label} + {MODEL_PROVIDER_NAMES_MAP[data.modelProvider]?.label || + data.modelProvider} Clients {data.clients.map((client) => ( - {CLIENTS_MAP[client].label} + + {CLIENTS_MAP[client]?.label || client} + ))} @@ -193,7 +196,9 @@ export const ReviewPage: React.FC = ({ Plugins {data.plugins.map((plugin) => ( - {PLUGINS_MAP[plugin].label} + + {PLUGINS_MAP[plugin]?.label || plugin} + ))} @@ -210,16 +215,16 @@ export const ReviewPage: React.FC = ({ Bio
    - {data.bio.map((entry) => ( -
  • {entry.name}
    • + {data.bio.map((entry, idx) => ( +
  • {entry.name}
    • ))}
Lore
    - {data.lore.map((entry) => ( -
  • {entry.name}
    • + {data.lore.map((entry, idx) => ( +
  • {entry.name}
    • ))}
@@ -227,8 +232,8 @@ export const ReviewPage: React.FC = ({ Knowledge
    - {data.knowledge.map((entry) => ( -
  • {entry.name}
    • + {data.knowledge.map((entry, idx) => ( +
  • {entry.name}
    • ))}
@@ -249,7 +254,7 @@ export const ReviewPage: React.FC = ({ const isEven = innerIdx % 2 === 0; return ( = ({ All
    - {data.style.all.map((entry) => ( -
  • {entry.name}
    • + {data.style.all.map((entry, idx) => ( +
  • {entry.name}
    • ))}
Chat
    - {data.style.chat.map((entry) => ( -
  • {entry.name}
    • + {data.style.chat.map((entry, idx) => ( +
  • {entry.name}
    • ))}
Post
    - {data.style.post.map((entry) => ( -
  • {entry.name}
    • + {data.style.post.map((entry, idx) => ( +
  • {entry.name}
    • ))}
@@ -310,8 +315,8 @@ export const ReviewPage: React.FC = ({ Topics - {data.topics.map((topic) => ( - + {data.topics.map((topic, idx) => ( + {topic} ))} @@ -320,8 +325,8 @@ export const ReviewPage: React.FC = ({ Adjectives - {data.adjectives.map((adjective) => ( - + {data.adjectives.map((adjective, idx) => ( + {adjective} ))} diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index 429e227ca..7fc0db14d 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -69,6 +69,8 @@ export const SettingsPage: React.FC = ({ goTo('review'); }; + console.log(completedStep); + return ( diff --git a/src/components/Eliza/utils/schema.ts b/src/components/Eliza/utils/schema.ts index 43792b13c..6d579e26a 100644 --- a/src/components/Eliza/utils/schema.ts +++ b/src/components/Eliza/utils/schema.ts @@ -16,7 +16,7 @@ export type SettingsSchema = z.infer; * We need it due to how React Hook Form handles arrays. */ export const characterFormSchema = z.object({ - name: z.string().min(3, 'Name is required, minimum of 3 characters'), + name: z.string().min(1, 'Name is required'), username: z.string().optional(), plugins: z.array(z.enum(PLUGIN_NAMES)), modelProvider: z.enum(MODEL_PROVIDER_NAMES, { @@ -30,12 +30,12 @@ export const characterFormSchema = z.object({ settings: settingsSchema, bio: z.array( z.object({ - name: z.string().min(3, 'Bio is required, minimum of 3 characters'), + name: z.string().min(1, 'Bio is required'), }), ), lore: z.array( z.object({ - name: z.string().min(3, 'Lore is required, minimum of 3 characters'), + name: z.string().min(1, 'Lore is required'), }), ), knowledge: z.array(z.object({ name: z.string() })).optional(), @@ -55,31 +55,23 @@ export const characterFormSchema = z.object({ .min(1, 'At least one message example is required'), postExamples: z.array( z.object({ - name: z - .string() - .min(3, 'Post example is required, minimum of 3 characters'), + name: z.string().min(1, 'Post example is required'), }), ), style: z.object({ all: z.array( z.object({ - name: z - .string() - .min(3, `Style for 'All' is required, minimum of 3 characters`), + name: z.string().min(1, `Style for 'All' is required`), }), ), chat: z.array( z.object({ - name: z - .string() - .min(3, `Style for 'Chat' is required, minimum of 3 characters`), + name: z.string().min(1, `Style for 'Chat' is required`), }), ), post: z.array( z.object({ - name: z - .string() - .min(3, `Style for 'Post' is required, minimum of 3 characters`), + name: z.string().min(1, `Style for 'Post' is required`), }), ), }), @@ -93,7 +85,7 @@ export type CharacterFormSchema = z.infer; /** Schema for the characterfile JSON file */ export const characterfileSchema = z.object({ - name: z.string().min(3, 'Name is required, minimum of 3 characters'), + name: z.string().min(1, 'Name is required'), username: z.string().optional(), plugins: z.array( z.enum(PLUGIN_NAMES, { @@ -117,8 +109,8 @@ export const characterfileSchema = z.object({ ) .min(1, 'At least one client is required'), settings: settingsSchema, - bio: z.array(z.string().min(3, 'Bio is required, minimum of 3 characters')), - lore: z.array(z.string().min(3, 'Lore is required, minimum of 3 characters')), + bio: z.array(z.string().min(1, 'Bio is required')), + lore: z.array(z.string().min(1, 'Lore is required')), knowledge: z.array(z.string()).optional(), messageExamples: z .array( @@ -127,30 +119,18 @@ export const characterfileSchema = z.object({ z.object({ user: z.string().min(1, 'User is required'), content: z.object({ - text: z.string().min(1, 'Message example is required'), + text: z.string(), }), }), ) .min(2), ) .min(1, 'At least one message example is required'), - postExamples: z.array( - z.string().min(3, 'Post example is required, minimum of 3 characters'), - ), + postExamples: z.array(z.string().min(1, 'Post example is required')), style: z.object({ - all: z.array( - z.string().min(3, `Style for 'All' is required, minimum of 3 characters`), - ), - chat: z.array( - z - .string() - .min(3, `Style for 'Chat' is required, minimum of 3 characters`), - ), - post: z.array( - z - .string() - .min(3, `Style for 'Post' is required, minimum of 3 characters`), - ), + all: z.array(z.string().min(1, `Style for 'All' is required`)), + chat: z.array(z.string().min(1, `Style for 'Chat' is required`)), + post: z.array(z.string().min(1, `Style for 'Post' is required`)), }), topics: z.array(z.string().min(1)).min(1, 'At least one topic is required'), adjectives: z From f74c6512213b01ec9c5936cb39719139f69b8a98 Mon Sep 17 00:00:00 2001 From: "Victor F. Santos" Date: Wed, 29 Jan 2025 17:55:56 -0300 Subject: [PATCH 9/9] chore: copy --- src/components/Eliza/components/SettingsPage.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Eliza/components/SettingsPage.tsx b/src/components/Eliza/components/SettingsPage.tsx index 7fc0db14d..566fb066b 100644 --- a/src/components/Eliza/components/SettingsPage.tsx +++ b/src/components/Eliza/components/SettingsPage.tsx @@ -69,8 +69,6 @@ export const SettingsPage: React.FC = ({ goTo('review'); }; - console.log(completedStep); - return ( @@ -118,7 +116,7 @@ export const SettingsPage: React.FC = ({ ); })} {formState.errors.secrets && ( - Please add the values missing. + Please fill the missing values. )}