LobeChat Settings Form Dynamically Rendered With Lobe-ui Components

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}...