✨ 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.
bentwnghk · Jul 20, 2023 · 7f19a09 · 7f19a09
1 parent c511964
commit 7f19a09
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 27 deletions.
diff --git a/src/features/FolderPanel/index.tsx b/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>

diff --git a/src/features/SliderWithInput/index.tsx b/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}
         />

diff --git a/src/pages/chat/SessionList/index.tsx b/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>

diff --git a/src/pages/chat/[id]/edit/index.page.tsx b/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>
     </>

diff --git a/src/pages/chat/layout.tsx b/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>
   );
 });

diff --git a/src/pages/setting/index.page.tsx b/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>
     </>