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?…