Dynamic form in LobeChat source code.
In this article, we analyse Settings modal that renders the form fields dynamically by reviewing the Lobechat source code.
There’s a catch here, when you refresh the page, the settings no longer appears as a form, instead it appears as a page as shown in the below image.
Code that renders this Settings form
In this file named Common.tsx, you will find the code that renders this settings form. Ideally, you would just write the code for form that has all these fields written in HTML, but LobeChat does it differently.
return (
<Form
form={form}
initialValues={settings}
items={[system]}
itemsType={'group'}
onValuesChange={setSettings}
variant={'pure'}
{...FORM_STYLE}
/>
);This Form element has a property called items that is a assigned a value named system
Where is this Form element imported from? At the top of this file, you will find this below import:
import { Form, type ItemGroup } from '@lobehub/ui';Lobe-ui is an open-source UI component library for building AIGC (artificial intelligence generated content) web apps.
Form fields:
Form fields are assigned to a variable named system.
const system: SettingItemGroup = {
children: [
{
children: (
<Input.Password
autoComplete={'new-password'}
placeholder={t('settingSystem.accessCode.placeholder')}
/>
),
desc: t('settingSystem.accessCode.desc'),
hidden: !showAccessCodeConfig,
label: t('settingSystem.accessCode.title'),
name: ['keyVaults', 'password'],
},
{
children: (
<Button danger onClick={handleReset} type="primary">
{t('danger.reset.action')}
</Button>
),
desc: t('danger.reset.desc'),
label: t('danger.reset.title'),
minWidth: undefined,
},
{
children: (
<Button danger onClick={handleClear} type="primary">
{t('danger.clear.action')}
</Button>
),
desc: t('danger.clear.desc'),
label: t('danger.clear.title'),
minWidth: undefined,
},
],
title: t('settingSystem.title'),
};Just by looking at this source code, you can see how the fields are configured here. For example, the first field is an input with password type and the rest of them are buttons.
These elements have properties such as desc, label in common. Read more about Forms in Lobe-ui.
These Button and Input elements are imported from antd, found at the top of the Common.tsx
import { App, Button, Input } from 'antd';LobeChat uses components provided by ant.design.
About us:
At Thinkthroo, we study large open source projects and provide architectural guides. We have developed reusable Components, built with tailwind, that you can use in your project.
We offer Next.js, React and Node development services.
Book a meeting with us to discuss your project.
