✨ feat: Add new files, modify components, and adjust layout and styling

Add new files, modify existing files, and rename files in the codebase. Export constants, modify components, and adjust layout and styling for improved functionality and user experience.

src/const/layoutTokens.ts

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

src/features/AvatarWithUpload/index.tsx

@@ -27,7 +27,7 @@ interface AvatarWithUploadProps {
   size?: number;
 }
 
-export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
+const AvatarWithUpload = memo<AvatarWithUploadProps>(({ size = 40 }) => {
   const [avatar, setSettings] = useSettings((st) => [st.settings.avatar, st.setSettings], shallow);
   const { styles } = useStyle();
 
@@ -43,3 +43,5 @@ export default memo<AvatarWithUploadProps>(({ size = 40 }) => {
     </div>
   );
 });
+
+export default AvatarWithUpload;

src/features/FolderPanel/index.tsx

@@ -14,7 +14,7 @@ export const useStyles = createStyles(({ css, token }) => ({
   `,
 }));
 
-export default memo<PropsWithChildren>(({ children }) => {
+const FolderPanel = memo<PropsWithChildren>(({ children }) => {
   const { styles } = useStyles();
   const [sessionsWidth, sessionExpandable] = useSettings(
     (s) => [s.sessionsWidth, s.sessionExpandable],
@@ -53,3 +53,5 @@ export default memo<PropsWithChildren>(({ children }) => {
     </DraggablePanel>
   );
 });
+
+export default FolderPanel;

src/features/HeaderSpacing/index.tsx

@@ -0,0 +1,7 @@
+import { memo } from 'react';
+
+import { HEADER_HEIGHT } from '@/const/layoutTokens';
+
+const HeaderSpacing = memo(() => <div style={{ flex: 'none', height: HEADER_HEIGHT }} />);
+
+export default HeaderSpacing;

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

@@ -2,20 +2,23 @@ import { ActionIcon, DraggablePanel, DraggablePanelContainer } from '@lobehub/ui
 import { createStyles } from 'antd-style';
 import { LucideEdit, LucideX } from 'lucide-react';
 import Router from 'next/router';
+import { rgba } from 'polished';
 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 { useSessionStore } from '@/store/session';
 
 import ReadMode from './ReadMode';
 
-const WIDTH = 280;
-
-const useStyles = createStyles(({ css, token }) => ({
-  drawer: css`
-    background: ${token.colorBgLayout};
-  `,
+const useStyles = createStyles(({ cx, css, token, stylish }) => ({
+  drawer: cx(
+    stylish.blurStrong,
+    css`
+      background: ${rgba(token.colorBgLayout, 0.4)};
+    `,
+  ),
   header: css`
     border-bottom: 1px solid ${token.colorBorder};
   `,
@@ -34,14 +37,15 @@ const Config = () => {
       className={styles.drawer}
       expand={showAgentSettings}
       expandable={false}
-      maxWidth={WIDTH}
-      minWidth={WIDTH}
+      headerHeight={HEADER_HEIGHT}
+      maxWidth={CHAT_SIDEBAR_WIDTH}
+      minWidth={CHAT_SIDEBAR_WIDTH}
       mode={'float'}
       pin
       placement={'right'}
       resize={{ left: false }}
     >
-      <DraggablePanelContainer style={{ flex: 'none', minWidth: WIDTH }}>
+      <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
         <Flexbox
           align={'center'}
           className={styles.header}

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

@@ -5,6 +5,7 @@ import { Archive, Eraser, Languages } from 'lucide-react';
 import { memo, useMemo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { CHAT_TEXTAREA_HEIGHT, HEADER_HEIGHT } from '@/const/layoutTokens';
 import { ModelTokens } from '@/const/modelTokens';
 import { agentSelectors, chatSelectors, useSessionStore } from '@/store/session';
 import { useSettings } from '@/store/settings';
@@ -29,7 +30,8 @@ const ChatInput = () => {
     <DraggablePanel
       expandable={false}
       fullscreen={expand}
-      minHeight={200}
+      headerHeight={HEADER_HEIGHT}
+      minHeight={CHAT_TEXTAREA_HEIGHT}
       onSizeChange={(_, size) => {
         if (!size) return;
         useSettings.setState({
@@ -38,6 +40,7 @@ const ChatInput = () => {
       }}
       placement="bottom"
       size={{ height: inputHeight, width: '100%' }}
+      style={{ zIndex: 10 }}
     >
       <ChatInputArea
         actions={
@@ -49,7 +52,7 @@ const ChatInput = () => {
         }
         expand={expand}
         footer={<Button icon={<Icon icon={Archive} />} />}
-        minHeight={200}
+        minHeight={CHAT_TEXTAREA_HEIGHT}
         onExpandChange={setExpand}
         onInputChange={setText}
         onSend={sendMessage}

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

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

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

@@ -6,6 +6,8 @@ import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
+import HeaderSpacing from '@/features/HeaderSpacing';
+
 import ChatLayout from '../../layout';
 import AgentConfig from './AgentConfig';
 import AgentMeta from './AgentMeta';
@@ -51,6 +53,7 @@ const EditPage = memo(() => {
         />
         {/*form*/}
         <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
+          <HeaderSpacing />
           <AgentMeta />
           <AgentConfig />
         </Flexbox>

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

@@ -23,16 +23,10 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-
-      <Flexbox flex={1} height={'100vh'} style={{ overflow: 'hidden', position: 'relative' }}>
+      <Flexbox id={'lobe-conversion-container'} style={{ height: '100vh', position: 'relative' }}>
         <Header />
-        <Flexbox
-          id={'lobe-conversion-container'}
-          style={{ height: 'calc(100vh - 64px)', position: 'relative' }}
-        >
-          <Conversation />
-          <Config />
-        </Flexbox>
+        <Conversation />
+        <Config />
       </Flexbox>
     </Layout>
   );

src/pages/chat/layout.tsx

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

src/pages/setting/SettingForm.tsx

@@ -8,8 +8,8 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import AvatarWithUpload from '@/features/AvatarWithUpload';
+import SliderWithInput from '@/features/SliderWithInput';
 import { options } from '@/locales/options';
-import SliderWithInput from '@/pages/setting/SliderWithInput';
 import { settingsSelectors, useSettings } from '@/store/settings';
 import { DEFAULT_SETTINGS } from '@/store/settings/initialState';
 import { ConfigKeys } from '@/types/exportConfig';

src/pages/setting/index.page.tsx

@@ -3,6 +3,7 @@ import { memo, useEffect } from 'react';
 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';
@@ -30,6 +31,7 @@ const SettingLayout = memo(() => {
         <Flexbox flex={1}>
           <Header />
           <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+            <HeaderSpacing />
             <SettingForm />
           </Flexbox>
         </Flexbox>