[Architecture: Component Structure in Lobechat] [C: Introduction]

In this guide, you will learn how components are organized in Lobechat.

By components, here we mean the building blocks of the user interface or more precisely, the building blocks used in a page.

Our focus is primarily on the folder structure and file naming conventions used. In order to establish a common pattern and to understand components structure better, we will study few pages/routes in the Lobechat.

Our approach is to pick a route, locate the route in the source code and from there on, we will look at

1. Where the imported components are located in a project
2. Folder structure and naming conventions used
3. How the "page" is built using these imported components

There will be screenshots and links pointing to folders and components that belong to this project.

we will select some routes as shown in the following and discuss the components structure used.

1. Chat route
2. discover/(list) route group a. Home sub-route b. Assistants sub-route c. Models sub-route
3. (auth) route group

Use this free guide to learn how components are organized in Lobechat.

[C: Lobechat] [Chat route]

Chat route in lobechat uses Next.js parallel routes with named slots and default.js

So how is the folder structure, below shown, is responsible to load the chat route?

[Insert screenshot of https://github.com/lobehub/lobe-chat/tree/main/src/app/(main)/chat folder structure]

https://lobechat.com/chat has parallel routes for:

1. Sessions list
2. Conversation

@sessions slot

@session is responsible to show the list of sessions.

[Insert screenshot of sessions - https://lobechat.com/chat?session=inbox]

Is this slot using a page.tsx? Next.js documentation states that:

" Slots are not route segments and do not affect the URL structure. For example, for /@analytics/views, the URL will be /views since @analytics is a slot. "

You can create a route by creating a folder and adding a page.tsx, but does Lobechat do that? @session folder does not have any page.tsx

|-- _layout/ |-- features/ |-- default.ts

default.ts

You can define a default.js file to render as a fallback for unmatched slots during the initial load or full-page reload. since there's no page.tsx or sub route defined inside Lobechat @session folder's default.ts

@session/default.tsx

import { Suspense, lazy } from 'react';

import ServerLayout from '@/components/server/ServerLayout';

import Desktop from './_layout/Desktop';
import Mobile from './_layout/Mobile';
import SessionHydration from './features/SessionHydration';
import SkeletonList from './features/SkeletonList';

const SessionListContent = lazy(() => import('./features/SessionListContent'));

const Layout = ServerLayout({ Desktop, Mobile });

const Session = () => {
  return (
    <>
      <Layout>
        <Suspense fallback={<SkeletonList />}>
          <SessionListContent />
        </Suspense>
      </Layout>
      <SessionHydration />
    </>
  );
};

Session.displayName = 'Session';

export default Session;

_layout folder

_layout folder is common standard across the Lobechat routes and is used for responsiveness as it contains Desktop and Mobile folders.

import Desktop from './_layout/Desktop';
import Mobile from './_layout/Mobile';
...
const Layout = ServerLayout({ Desktop, Mobile });
...

Why such a pattern? well, we have concluded that this is because Lobechat uses antd-style, a css-in-js library.

// @session/features/SessionList.tsx
...
import { createStyles } from 'antd-style';
...
const useStyles = createStyles(({ css }) => ({
  paragraph: css`
    height: 12px !important;
    margin-block-start: 12px !important;

    > li {
      height: 12px !important;
    }
  `,