@lobehub/chat 0.1.6 → 0.3.0

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [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>
+
+#### ✨ Features
+
+- **misc**: Add import statement and define CSS styles for Avatar component.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add import statement and define CSS styles for Avatar component ([8c23a8d](https://github.com/lobehub/lobe-chat/commit/8c23a8d))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ### [Version 0.1.6](https://github.com/lobehub/lobe-chat/compare/v0.1.5...v0.1.6)
 
 <sup>Released on **2023-07-18**</sup>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/chat",
-  "version": "0.1.6",
+  "version": "0.3.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,3 @@
+export const HEADER_HEIGHT = 64;
+export const CHAT_TEXTAREA_HEIGHT = 200;
+export const CHAT_SIDEBAR_WIDTH = 280;

package/src/features/AvatarWithUpload/index.tsx

@@ -1,27 +1,47 @@
 import { Avatar, Logo } from '@lobehub/ui';
 import { Upload } from 'antd';
+import { createStyles } from 'antd-style';
 import { memo } from 'react';
 import { shallow } from 'zustand/shallow';
 
 import { useSettings } from '@/store/settings';
 import { createUploadImageHandler } from '@/utils/uploadFIle';
 
+const useStyle = createStyles(
+  ({ css, token }) => css`
+    cursor: pointer;
+    border-radius: 50%;
+    transition: scale 400ms ${token.motionEaseOut}, box-shadow 100ms ${token.motionEaseOut};
+
+    &:hover {
+      box-shadow: 0 0 0 3px ${token.colorText};
+    }
+
+    &:active {
+      scale: 0.8;
+    }
+  `,
+);
+
 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();
 
   const handleUploadAvatar = createUploadImageHandler((avatar) => {
     setSettings({ avatar });
   });
 
   return (
-    <div style={{ maxHeight: size, maxWidth: size }}>
+    <div className={styles} style={{ maxHeight: size, maxWidth: size }}>
       <Upload beforeUpload={handleUploadAvatar} itemRender={() => void 0} maxCount={1}>
         {avatar ? <Avatar avatar={avatar} size={size} /> : <Logo size={size} />}
       </Upload>
     </div>
   );
 });
+
+export default AvatarWithUpload;

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

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

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,30 +1,18 @@
-import { createStyles } from 'antd-style';
 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 useStyles = createStyles(({ css, token }) => ({
-  input: css`
-    position: sticky;
-    z-index: 10;
-    bottom: 0;
-    background: ${token.colorBgLayout};
-  `,
-}));
-
 const Conversation = () => {
-  const { styles } = useStyles();
   return (
     <>
       <div style={{ flex: 1, overflowY: 'scroll' }}>
+        <HeaderSpacing />
         <ChatList />
       </div>
-      <Flexbox className={styles.input}>
-        <ChatInput />
-      </Flexbox>
+      <ChatInput />
     </>
   );
 };

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

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

@@ -23,16 +23,10 @@ const Chat = memo(() => {
       <Head>
         <title>{pageTitle}</title>
       </Head>
-
-      <Flexbox flex={1}>
+      <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>
   );

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

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