@lobehub/chat 0.48.0 → 0.49.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 # Changelog
 
+## [Version 0.49.0](https://github.com/lobehub/lobe-chat/compare/v0.48.0...v0.49.0)
+
+<sup>Released on **2023-08-15**</sup>
+
+#### ✨ Features
+
+- **misc**: Add `BackToBottom` to conversation, Update icons and text in various components.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's improved
+
+- **misc**: Add `BackToBottom` to conversation ([1433aa9](https://github.com/lobehub/lobe-chat/commit/1433aa9))
+- **misc**: Update icons and text in various components ([0e7a683](https://github.com/lobehub/lobe-chat/commit/0e7a683))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 0.48.0](https://github.com/lobehub/lobe-chat/compare/v0.47.0...v0.48.0)
 
 <sup>Released on **2023-08-15**</sup>

package/package.json

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

package/src/features/SideBar/BottomActions.tsx

@@ -3,9 +3,9 @@ import { Dropdown, MenuProps, Upload } from 'antd';
 import {
   Feather,
   FileClock,
-  FolderInput,
-  FolderOutput,
   Github,
+  HardDriveDownload,
+  HardDriveUpload,
   Heart,
   Settings,
   Settings2,
@@ -33,7 +33,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
   const items: MenuProps['items'] = useMemo(
     () => [
       {
-        icon: <Icon icon={FolderInput} />,
+        icon: <Icon icon={HardDriveUpload} />,
         key: 'import',
         label: (
           <Upload maxCount={1} onChange={importConfig} showUploadList={false}>
@@ -67,7 +67,7 @@ const BottomActions = memo<BottomActionProps>(({ tab, setTab }) => {
             onClick: exportAll,
           },
         ],
-        icon: <Icon icon={FolderOutput} />,
+        icon: <Icon icon={HardDriveDownload} />,
         key: 'export',
         label: t('export'),
       },

package/src/locales/default/common.ts

@@ -8,10 +8,11 @@ export default {
   agentMaxToken: '会话最大长度',
   agentModel: '模型',
   agentProfile: '助手信息',
-  appInitializing: '智能集群启动中，请耐心等待...',
+  appInitializing: 'LobeChat 启动中，请耐心等待...',
   archive: '归档',
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',
+  backToBottom: '查看最新消息',
   cancel: '取消',
   changelog: '更新日志',
   clearCurrentMessages: '清空当前会话消息',
@@ -35,10 +36,9 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
-
   inbox: {
     defaultMessage:
-      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击「+」创建自定义助手',
+      '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击<kbd>+</kbd>创建自定义助手',
     desc: '开启大脑集群，激发思维火花。你的智能助理，就在这里与你交流一切',
     title: '随便聊聊',
   },
@@ -61,6 +61,7 @@ export default {
   sessionList: '助手列表',
   setting: '设置',
   share: '分享',
+  stop: '停止',
   tab: {
     chat: '会话',
     market: '助手市场',

package/src/pages/chat/SessionList/List/Item/Actions.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Icon } from '@lobehub/ui';
 import { App, Dropdown, type MenuProps } from 'antd';
 import { createStyles } from 'antd-style';
-import { FolderOutput, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
+import { HardDriveDownload, MoreVertical, Pin, PinOff, Trash } from 'lucide-react';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -58,7 +58,7 @@ const Actions = memo<ActionProps>(({ id, setOpen }) => {
             },
           },
         ],
-        icon: <Icon icon={FolderOutput} />,
+        icon: <Icon icon={HardDriveDownload} />,
         key: 'export',
         label: t('export'),
       },

package/src/pages/chat/SessionList/List/index.tsx

@@ -1,7 +1,6 @@
 import isEqual from 'fast-deep-equal';
 import Link from 'next/link';
 import { memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
 
 import { sessionSelectors, useSessionHydrated, useSessionStore } from '@/store/session';
 
@@ -17,13 +16,11 @@ const SessionList = memo(() => {
   return !isInit ? (
     <SkeletonList />
   ) : list.length > 0 ? (
-    <Flexbox>
-      {list.map(({ id }) => (
-        <Link href={`/chat/${id}`} key={id}>
-          <SessionItem id={id} />
-        </Link>
-      ))}
-    </Flexbox>
+    list.map(({ id }) => (
+      <Link href={`/chat/${id}`} key={id}>
+        <SessionItem id={id} />
+      </Link>
+    ))
   ) : (
     <AddButton />
   );

package/src/pages/chat/SessionList/index.tsx

@@ -1,8 +1,8 @@
 import { DraggablePanelBody } from '@lobehub/ui';
 import { CollapseProps } from 'antd';
+import { createStyles } from 'antd-style';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
 
 import FolderPanel from '@/features/FolderPanel';
 
@@ -11,8 +11,11 @@ import Header from './Header';
 import Inbox from './Inbox';
 import SessionList from './List';
 
+const useStyles = createStyles(({ stylish }) => stylish.noScrollbar);
+
 export const Sessions = memo(() => {
   const { t } = useTranslation('common');
+  const { styles } = useStyles();
 
   const items: CollapseProps['items'] = useMemo(
     () => [
@@ -28,11 +31,9 @@ export const Sessions = memo(() => {
   return (
     <FolderPanel>
       <Header />
-      <DraggablePanelBody style={{ padding: 0 }}>
-        <Flexbox>
-          <Inbox />
-          <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
-        </Flexbox>
+      <DraggablePanelBody className={styles} style={{ padding: 0 }}>
+        <Inbox />
+        <CollapseGroup defaultActiveKey={['sessionList']} items={items} />
       </DraggablePanelBody>
     </FolderPanel>
   );

package/src/pages/chat/[id]/setting/Header.tsx

@@ -1,6 +1,6 @@
 import { ActionIcon, ChatHeader, ChatHeaderTitle } from '@lobehub/ui';
 import { Dropdown, MenuProps } from 'antd';
-import { FolderOutput, Share2 } from 'lucide-react';
+import { HardDriveDownload, Share2 } from 'lucide-react';
 import Router from 'next/router';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -45,7 +45,7 @@ const Header = memo(() => {
           <ActionIcon icon={Share2} size={{ fontSize: 24 }} title={t('share', { ns: 'common' })} />
           <Dropdown arrow={false} menu={{ items }} trigger={['click']}>
             <ActionIcon
-              icon={FolderOutput}
+              icon={HardDriveDownload}
               size={{ fontSize: 24 }}
               title={t('export', { ns: 'common' })}
             />

package/src/pages/chat/features/Conversation/Input/index.tsx

@@ -73,6 +73,7 @@ const ChatInput = () => {
         placeholder={t('sendPlaceholder')}
         text={{
           send: t('send'),
+          stop: t('stop'),
         }}
       />
     </DraggablePanel>

package/src/pages/chat/features/Conversation/index.tsx

@@ -1,4 +1,6 @@
-import { memo } from 'react';
+import { BackBottom } from '@lobehub/ui';
+import { memo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Flexbox } from 'react-layout-kit';
 
 import HeaderSpacing from '@/components/HeaderSpacing';
@@ -7,11 +9,16 @@ import ChatList from './ChatList';
 import ChatInput from './Input';
 
 const Conversation = () => {
+  const ref = useRef(null);
+  const { t } = useTranslation('common');
   return (
     <Flexbox flex={1} style={{ position: 'relative' }}>
-      <div style={{ flex: 1, overflowY: 'scroll' }}>
-        <HeaderSpacing />
-        <ChatList />
+      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+        <div ref={ref} style={{ height: '100%', overflowY: 'scroll' }}>
+          <HeaderSpacing />
+          <ChatList />
+        </div>
+        <BackBottom target={ref} text={t('backToBottom')} />
       </div>
       <ChatInput />
     </Flexbox>

package/src/pages/chat/features/Sidebar/Header.tsx

@@ -5,7 +5,7 @@ import { Flexbox } from 'react-layout-kit';
 const useStyles = createStyles(
   ({ css, token }) => css`
     z-index: 10;
-    box-shadow: 0 2px 8px ${token.colorBgLayout};
+    box-shadow: 0 2px 6px ${token.colorBgLayout};
   `,
 );
 

package/src/pages/chat/features/Sidebar/Topic/TopicItem.tsx

@@ -9,7 +9,7 @@ import TopicContent from './TopicContent';
 
 const useStyles = createStyles(({ css, token, isDarkMode }) => ({
   active: css`
-    background: ${isDarkMode ? token.colorFillTertiary : token.colorFillSecondary};
+    background: ${isDarkMode ? token.colorFillSecondary : token.colorFillTertiary};
     transition: background 200ms ${token.motionEaseOut};
 
     &:hover {

package/src/pages/index/Loading.tsx

@@ -1,7 +1,5 @@
-import { GridBackground, Icon } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
+import { Icon, Logo } from '@lobehub/ui';
 import { Loader2 } from 'lucide-react';
-import { rgba } from 'polished';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Center, Flexbox } from 'react-layout-kit';
@@ -9,25 +7,15 @@ import { Center, Flexbox } from 'react-layout-kit';
 const Loading = memo(() => {
   const { t } = useTranslation('common');
 
-  const theme = useTheme();
-
   return (
     <Flexbox height={'100vh'} width={'100%'}>
-      <GridBackground
-        animation
-        colorBack={rgba(theme.colorText, 0.12)}
-        colorFront={rgba(theme.colorText, 0.4)}
-        flip
-      />
       <Center flex={1} gap={12} width={'100%'}>
-        <Icon icon={Loader2} size={{ fontSize: 64 }} spin />
-        {t('appInitializing')}
+        <Logo extra={'Chat'} size={48} type={'combine'} />
+        <Center gap={16} horizontal>
+          <Icon icon={Loader2} spin />
+          {t('appInitializing')}
+        </Center>
       </Center>
-      <GridBackground
-        animation
-        colorBack={rgba(theme.colorText, 0.12)}
-        colorFront={rgba(theme.colorText, 0.4)}
-      />
     </Flexbox>
   );
 });