✨ feat: Add styles and modify layout of FolderPanel, SliderWithInput, SessionList, EditPage, ChatLayout, and SettingLayout components

Add styles and modify layout of FolderPanel, SliderWithInput, SessionList, EditPage, ChatLayout, and SettingLayout components to improve the overall user experience and visual appeal.

src/features/FolderPanel/index.tsx

@@ -50,7 +50,7 @@ const FolderPanel = memo<PropsWithChildren>(({ children }) => {
       placement="left"
       size={{ height: '100vh', width: sessionsWidth }}
     >
-      <DraggablePanelContainer style={{ flex: 'none', minWidth: FOLDER_WIDTH }}>
+      <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
         {children}
       </DraggablePanelContainer>
     </DraggablePanel>

src/features/SliderWithInput/index.tsx

@@ -28,7 +28,7 @@ const SliderWithInput = memo<SliderSingleProps>(
           max={max}
           min={min}
           onChange={handleOnchange}
-          step={Number(step)}
+          step={Number.isNaN(step) || isNull(step) ? undefined : step}
           style={{ flex: 1, maxWidth: 64 }}
           value={typeof value === 'number' ? value : 0}
         />

src/pages/chat/SessionList/index.tsx

@@ -10,7 +10,7 @@ export const Sessions = memo(() => {
   return (
     <FolderPanel>
       <Header />
-      <DraggablePanelBody>
+      <DraggablePanelBody style={{ padding: 0 }}>
         <SessionList />
       </DraggablePanelBody>
     </FolderPanel>

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

@@ -45,23 +45,21 @@ const EditPage = memo(() => {
         <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>
+        <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>
       </ChatLayout>
     </>

src/pages/chat/layout.tsx

@@ -43,7 +43,9 @@ const ChatLayout = memo<PropsWithChildren>(({ children }) => {
     <Flexbox horizontal width={'100%'}>
       <SideBar />
       <Sessions />
-      <Flexbox flex={1}>{children}</Flexbox>
+      <Flexbox flex={1} height={'100vh'} style={{ position: 'relative' }}>
+        {children}
+      </Flexbox>
     </Flexbox>
   );
 });

src/pages/setting/index.page.tsx

@@ -25,12 +25,10 @@ const SettingLayout = memo(() => {
         <title>{pageTitle}</title>
       </Head>
       <ChatLayout>
-        <Flexbox flex={1}>
-          <Header />
-          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-            <HeaderSpacing />
-            <SettingForm />
-          </Flexbox>
+        <Header />
+        <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+          <HeaderSpacing />
+          <SettingForm />
         </Flexbox>
       </ChatLayout>
     </>