✨ feat: Introduce FOLDER_WIDTH constant and update components

- Add new constant FOLDER_WIDTH and use it in different components
- Import various components and libraries
- Define new functions and components
- Modify layout and structure of components in some files
- Update tsconfig.json to include new paths in the project

src/const/layoutTokens.ts

@@ -1,3 +1,5 @@
 export const HEADER_HEIGHT = 64;
 export const CHAT_TEXTAREA_HEIGHT = 200;
 export const CHAT_SIDEBAR_WIDTH = 280;
+
+export const FOLDER_WIDTH = 256;

src/features/FolderPanel/index.tsx

@@ -1,9 +1,10 @@
-import { DraggablePanel } from '@lobehub/ui';
+import { DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { PropsWithChildren, memo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { FOLDER_WIDTH } from '@/const/layoutTokens';
 import { useSettings } from '@/store/settings';
 
 export const useStyles = createStyles(({ css, token }) => ({
@@ -29,7 +30,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
       defaultSize={{ width: tmpWidth }}
       expand={sessionExpandable}
       maxWidth={400}
-      minWidth={256}
+      minWidth={FOLDER_WIDTH}
       onExpandChange={(expand) => {
         useSettings.setState({
           sessionExpandable: expand,
@@ -49,7 +50,9 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
       placement="left"
       size={{ height: '100vh', width: sessionsWidth }}
     >
-      {children}
+      <DraggablePanelContainer style={{ flex: 'none', minWidth: FOLDER_WIDTH }}>
+        {children}
+      </DraggablePanelContainer>
     </DraggablePanel>
   );
 });

src/pages/chat/SessionList/List/index.tsx

@@ -1,16 +1,13 @@
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { sessionSelectors, useSessionStore } from '@/store/session';
 
 import SessionItem from './SessionItem';
-import { useStyles } from './style';
 
 const SessionList = memo(() => {
-  const { styles, cx } = useStyles();
   const list = useSessionStore((s) => sessionSelectors.chatList(s), isEqual);
   const [activeId, loading] = useSessionStore(
     (s) => [s.activeId, s.autocompleteLoading.title],
@@ -18,13 +15,13 @@ const SessionList = memo(() => {
   );
 
   return (
-    <Flexbox className={cx(styles.list)}>
+    <>
       {list.map(({ id }) => (
         <Link href={`/chat/${id}`} key={id}>
           <SessionItem active={activeId === id} id={id} loading={loading && id === activeId} />
         </Link>
       ))}
-    </Flexbox>
+    </>
   );
 });
 

src/pages/chat/SessionList/List/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 
-export const useStyles = createStyles(({ css, token, cx, stylish }) => {
+export const useStyles = createStyles(({ css, token }) => {
   return {
     active: css`
       display: flex;
@@ -63,13 +63,6 @@ export const useStyles = createStyles(({ css, token, cx, stylish }) => {
         }
       }
     `,
-    list: cx(
-      stylish.noScrollbar,
-      css`
-        overflow-x: hidden;
-        overflow-y: scroll;
-      `,
-    ),
     time: css`
       align-self: flex-start;
     `,

src/pages/chat/SessionList/index.tsx

@@ -1,5 +1,5 @@
+import { DraggablePanelBody } from '@lobehub/ui';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
@@ -9,10 +9,10 @@ import SessionList from './List';
 export const Sessions = memo(() => {
   return (
     <FolderPanel>
-      <Flexbox gap={8} height={'100%'}>
-        <Header />
+      <Header />
+      <DraggablePanelBody>
         <SessionList />
-      </Flexbox>
+      </DraggablePanelBody>
     </FolderPanel>
   );
 });

src/pages/chat/[id]/Config/index.tsx

@@ -1,4 +1,9 @@
-import { ActionIcon, DraggablePanel, DraggablePanelContainer } from '@lobehub/ui';
+import {
+  ActionIcon,
+  DraggablePanel,
+  DraggablePanelBody,
+  DraggablePanelContainer,
+} from '@lobehub/ui';
 import { createStyles } from 'antd-style';
 import { LucideEdit, LucideX } from 'lucide-react';
 import Router from 'next/router';
@@ -7,7 +12,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { CHAT_SIDEBAR_WIDTH, HEADER_HEIGHT } from '@/const/layoutTokens';
+import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
+import HeaderSpacing from '@/features/HeaderSpacing';
 import { useSessionStore } from '@/store/session';
 
 import ReadMode from './ReadMode';
@@ -36,15 +42,13 @@ const Config = () => {
     <DraggablePanel
       className={styles.drawer}
       expand={showAgentSettings}
-      expandable={false}
-      headerHeight={HEADER_HEIGHT}
       maxWidth={CHAT_SIDEBAR_WIDTH}
       minWidth={CHAT_SIDEBAR_WIDTH}
-      mode={'float'}
-      pin
+      onExpandChange={toggleConfig}
       placement={'right'}
-      resize={{ left: false }}
+      resize={false}
     >
+      <HeaderSpacing />
       <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
         <Flexbox
           align={'center'}
@@ -74,7 +78,9 @@ const Config = () => {
             />
           </Flexbox>
         </Flexbox>
-        <ReadMode />
+        <DraggablePanelBody>
+          <ReadMode />
+        </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>
   );

src/pages/chat/[id]/Conversation/index.tsx

@@ -1,4 +1,5 @@
 import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/features/HeaderSpacing';
 import ChatInput from '@/pages/chat/[id]/Conversation/Input';
@@ -7,13 +8,13 @@ import ChatList from './ChatList';
 
 const Conversation = () => {
   return (
-    <>
+    <Flexbox flex={1}>
       <div style={{ flex: 1, overflowY: 'scroll' }}>
         <HeaderSpacing />
         <ChatList />
       </div>
       <ChatInput />
-    </>
+    </Flexbox>
   );
 };
 

src/pages/chat/[id]/Header.tsx

@@ -1,7 +1,6 @@
 import { ActionIcon, Avatar, ChatHeader } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
-import { ArchiveIcon, LucideEdit, MoreVerticalIcon, Share2Icon } from 'lucide-react';
-import Router from 'next/router';
+import { ArchiveIcon, MoreVerticalIcon, Share2 } from 'lucide-react';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
@@ -54,7 +53,7 @@ const Header = memo(() => {
         id && (
           <>
             <ActionIcon
-              icon={Share2Icon}
+              icon={Share2}
               onClick={() => {
                 // genShareUrl();
               }}
@@ -62,14 +61,6 @@ const Header = memo(() => {
               title={t('share')}
             />
             <ActionIcon icon={ArchiveIcon} size={{ fontSize: 24 }} title={t('archive')} />
-            <ActionIcon
-              icon={LucideEdit}
-              onClick={() => {
-                Router.push(`/chat/${id}/edit`);
-              }}
-              size={{ blockSize: 32, fontSize: 20 }}
-              title={t('edit')}
-            />
             <ActionIcon
               icon={MoreVerticalIcon}
               onClick={() => toggleConfig()}

src/pages/chat/[id]/edit/index.page.tsx

@@ -1,6 +1,7 @@
-import { ChatHeader } from '@lobehub/ui';
-import { Button } from 'antd';
+import { ActionIcon, ChatHeader } from '@lobehub/ui';
 import { createStyles } from 'antd-style';
+import { Download, Share2 } from 'lucide-react';
+import Head from 'next/head';
 import Router from 'next/router';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -36,29 +37,34 @@ const EditPage = memo(() => {
 
   const { styles } = useStyles();
 
+  const pageTitle = t('editAgentProfile');
+
   return (
-    <ChatLayout>
-      <Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
-        {/*header*/}
-        <ChatHeader
-          left={<div className={styles.title}>{t('editAgentProfile')}</div>}
-          onBackClick={() => Router.back()}
-          right={
-            <>
-              <Button>{t('share')}</Button>
-              <Button type={'primary'}>{t('export')}</Button>
-            </>
-          }
-          showBackButton
-        />
-        {/*form*/}
-        <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
-          <HeaderSpacing />
-          <AgentMeta />
-          <AgentConfig />
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <ChatLayout>
+        <Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
+          <ChatHeader
+            left={<div className={styles.title}>{t('editAgentProfile')}</div>}
+            onBackClick={() => Router.back()}
+            right={
+              <>
+                <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share')} />
+                <ActionIcon icon={Download} size={{ fontSize: 24 }} title={t('export')} />
+              </>
+            }
+            showBackButton
+          />
+          <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
+            <HeaderSpacing />
+            <AgentMeta />
+            <AgentConfig />
+          </Flexbox>
         </Flexbox>
-      </Flexbox>
-    </ChatLayout>
+      </ChatLayout>
+    </>
   );
 });
 

src/pages/chat/[id]/index.page.tsx

@@ -25,8 +25,10 @@ const Chat = memo(() => {
       </Head>
       <Flexbox id={'lobe-conversion-container'} style={{ height: '100vh', position: 'relative' }}>
         <Header />
-        <Conversation />
-        <Config />
+        <Flexbox flex={1} horizontal>
+          <Conversation />
+          <Config />
+        </Flexbox>
       </Flexbox>
     </Layout>
   );

src/pages/setting/index.page.tsx

@@ -4,9 +4,8 @@ import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/features/HeaderSpacing';
-import SideBar from '@/features/SideBar';
 import { createI18nNext } from '@/locales/create';
-import { Sessions } from '@/pages/chat/SessionList';
+import ChatLayout from '@/pages/chat/layout';
 
 import Header from './Header';
 import SettingForm from './SettingForm';
@@ -25,9 +24,7 @@ const SettingLayout = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Flexbox height={'100vh'} horizontal width={'100%'}>
-        <SideBar />
-        <Sessions />
+      <ChatLayout>
         <Flexbox flex={1}>
           <Header />
           <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
@@ -35,7 +32,7 @@ const SettingLayout = memo(() => {
             <SettingForm />
           </Flexbox>
         </Flexbox>
-      </Flexbox>
+      </ChatLayout>
     </>
   );
 });

tsconfig.json

@@ -22,7 +22,15 @@
     }
   },
   "exclude": ["node_modules"],
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.d.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts",
+    "vitest.config.ts",
+    "src",
+    "tests",
+    "**/*.ts",
+    "**/*.d.ts",
+    "**/*.tsx"
+  ],
   "ts-node": {
     "compilerOptions": {
       "module": "commonjs"