DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Edited on • Originally published at thinkthroo.com

1

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.

Image description
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.

Image description

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}
    />
  );
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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'),
  };
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

LobeChat uses components provided by ant.design.

Image description

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 ramu.narasinga@gmail.com

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/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more