@lobehub/chat 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,57 @@
 
 # Changelog
 
+## [Version 0.4.0](https://github.com/lobehub/lobe-chat/compare/v0.3.0...v0.4.0)
+
+<sup>Released on **2023-07-20**</sup>
+
+#### ✨ Features
+
+- **misc**: Add styles and modify layout of FolderPanel, SliderWithInput, SessionList, EditPage, ChatLayout, and SettingLayout components, Introduce FOLDER_WIDTH constant and update components.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add styles and modify layout of FolderPanel, SliderWithInput, SessionList, EditPage, ChatLayout, and SettingLayout components ([7f19a09](https://github.com/lobehub/lobe-chat/commit/7f19a09))
+- **misc**: Introduce FOLDER_WIDTH constant and update components ([c511964](https://github.com/lobehub/lobe-chat/commit/c511964))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 0.3.0](https://github.com/lobehub/lobe-chat/compare/v0.2.0...v0.3.0)
+
+<sup>Released on **2023-07-18**</sup>
+
+#### ✨ Features
+
+- **misc**: Add new files, modify components, and adjust layout and styling.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add new files, modify components, and adjust layout and styling ([b8c3b38](https://github.com/lobehub/lobe-chat/commit/b8c3b38))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.2.0](https://github.com/lobehub/lobe-chat/compare/v0.1.6...v0.2.0)
 
 <sup>Released on **2023-07-18**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Lobe Chat is an open-source chatbot client using LangChain, Typescript and Next.js",
   "keywords": [
     "chatbot",

package/src/const/layoutTokens.ts

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

package/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;

package/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 }) => ({
@@ -14,7 +15,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],
@@ -29,7 +30,7 @@ export default memo<PropsWithChildren>(({ children }) => {
       defaultSize={{ width: tmpWidth }}
       expand={sessionExpandable}
       maxWidth={400}
-      minWidth={256}
+      minWidth={FOLDER_WIDTH}
       onExpandChange={(expand) => {
         useSettings.setState({
           sessionExpandable: expand,
@@ -49,7 +50,11 @@ export default memo<PropsWithChildren>(({ children }) => {
       placement="left"
       size={{ height: '100vh', width: sessionsWidth }}
     >
-      {children}
+      <DraggablePanelContainer style={{ flex: 'none', height: '100%', minWidth: FOLDER_WIDTH }}>
+        {children}
+      </DraggablePanelContainer>
     </DraggablePanel>
   );
 });
+
+export default FolderPanel;

package/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;

package/src/{pages/setting → 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}
         />

package/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>
+    </>
   );
 });
 

package/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;
     `,

package/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 style={{ padding: 0 }}>
         <SessionList />
-      </Flexbox>
+      </DraggablePanelBody>
     </FolderPanel>
   );
 });

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

@@ -1,21 +1,30 @@
-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';
+import { rgba } from 'polished';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { CHAT_SIDEBAR_WIDTH } from '@/const/layoutTokens';
+import HeaderSpacing from '@/features/HeaderSpacing';
 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};
   `,
@@ -33,15 +42,14 @@ const Config = () => {
     <DraggablePanel
       className={styles.drawer}
       expand={showAgentSettings}
-      expandable={false}
-      maxWidth={WIDTH}
-      minWidth={WIDTH}
-      mode={'float'}
-      pin
+      maxWidth={CHAT_SIDEBAR_WIDTH}
+      minWidth={CHAT_SIDEBAR_WIDTH}
+      onExpandChange={toggleConfig}
       placement={'right'}
-      resize={{ left: false }}
+      resize={false}
     >
-      <DraggablePanelContainer style={{ flex: 'none', minWidth: WIDTH }}>
+      <HeaderSpacing />
+      <DraggablePanelContainer style={{ flex: 'none', minWidth: CHAT_SIDEBAR_WIDTH }}>
         <Flexbox
           align={'center'}
           className={styles.header}
@@ -70,7 +78,9 @@ const Config = () => {
             />
           </Flexbox>
         </Flexbox>
-        <ReadMode />
+        <DraggablePanelBody>
+          <ReadMode />
+        </DraggablePanelBody>
       </DraggablePanelContainer>
     </DraggablePanel>
   );

package/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}

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

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

package/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()}

package/src/pages/chat/[id]/edit/AgentMeta.tsx

@@ -93,7 +93,7 @@ const AgentMeta = () => {
               <Button
                 disabled={!hasSystemRole}
                 loading={Object.values(loading).some((i) => !!i)}
-                onClick={(e) => {
+                onClick={(e: any) => {
                   e.stopPropagation();
                   console.log(id);
                   if (!id) return;

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

@@ -1,11 +1,14 @@
-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';
 import { Flexbox } from 'react-layout-kit';
 
+import HeaderSpacing from '@/features/HeaderSpacing';
+
 import ChatLayout from '../../layout';
 import AgentConfig from './AgentConfig';
 import AgentMeta from './AgentMeta';
@@ -34,28 +37,32 @@ const EditPage = memo(() => {
 
   const { styles } = useStyles();
 
+  const pageTitle = t('editAgentProfile');
+
   return (
-    <ChatLayout>
-      <Flexbox height={'100vh'} style={{ position: 'relative' }} width={'100%'}>
-        {/*header*/}
+    <>
+      <Head>
+        <title>{pageTitle}</title>
+      </Head>
+      <ChatLayout>
         <ChatHeader
           left={<div className={styles.title}>{t('editAgentProfile')}</div>}
           onBackClick={() => Router.back()}
           right={
             <>
-              <Button>{t('share')}</Button>
-              <Button type={'primary'}>{t('export')}</Button>
+              <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share')} />
+              <ActionIcon icon={Download} size={{ fontSize: 24 }} title={t('export')} />
             </>
           }
           showBackButton
         />
-        {/*form*/}
         <Flexbox className={styles.form} flex={1} gap={10} padding={24}>
+          <HeaderSpacing />
           <AgentMeta />
           <AgentConfig />
         </Flexbox>
-      </Flexbox>
-    </ChatLayout>
+      </ChatLayout>
+    </>
   );
 });
 

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

@@ -23,13 +23,9 @@ 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' }}
-        >
+        <Flexbox flex={1} horizontal>
           <Conversation />
           <Config />
         </Flexbox>

package/src/pages/chat/layout.tsx

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

package/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';

package/src/pages/setting/index.page.tsx

@@ -3,9 +3,9 @@ import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
-import SideBar from '@/features/SideBar';
+import HeaderSpacing from '@/features/HeaderSpacing';
 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';
@@ -24,16 +24,13 @@ const SettingLayout = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-      <Flexbox height={'100vh'} horizontal width={'100%'}>
-        <SideBar />
-        <Sessions />
-        <Flexbox flex={1}>
-          <Header />
-          <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
-            <SettingForm />
-          </Flexbox>
+      <ChatLayout>
+        <Header />
+        <Flexbox align={'center'} flex={1} padding={24} style={{ overflow: 'auto' }}>
+          <HeaderSpacing />
+          <SettingForm />
         </Flexbox>
-      </Flexbox>
+      </ChatLayout>
     </>
   );
 });

package/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"