@lobehub/chat 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # 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>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.3.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

@@ -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;

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 }) => ({
@@ -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', height: '100%', minWidth: FOLDER_WIDTH }}>
+        {children}
+      </DraggablePanelContainer>
     </DraggablePanel>
   );
 });

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

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,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>
   );

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

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,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,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

@@ -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>
   );

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

package/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,17 +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' }}>
-            <HeaderSpacing />
-            <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"