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 me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on an interesting project. Send me an email at [e-mail]

My Github - https://github.com/ramu-narasinga
My website - https://ramunarasinga.com
My Youtube channel - https://www.youtube.com/@thinkthroo
Learning platform - https://thinkthroo.com
Codebase Architecture - https://app.thinkthroo.com/architecture
Best practices - https://app.thinkthroo.com/best-practices
Production-grade projects - https://app.thinkthroo.com/production-grade-projects

References:

1. https://github.com/lobehub/lobe-chat/blob/main/src/app/(main)/settings/common/features/Common.tsx

2. https://github.com/lobehub/lobe-ui

3. https://ui.lobehub.com/components/form

4. https://ant.design/components/overview/