✨ feat: Add BackToBottom to conversation

bentwnghk · Aug 15, 2023 · 1433aa9 · 1433aa9
1 parent b813d5b
commit 1433aa9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/src/locales/default/common.ts b/src/locales/default/common.ts
@@ -12,6 +12,7 @@ export default {
   archive: '归档',
   autoGenerate: '自动补全',
   autoGenerateTooltip: '基于提示词自动补全助手描述',
+  backToBottom: '查看最新消息',
   cancel: '取消',
   changelog: '更新日志',
   clearCurrentMessages: '清空当前会话消息',
@@ -35,7 +36,6 @@ export default {
   },
   feedback: '反馈与建议',
   import: '导入配置',
-
   inbox: {
     defaultMessage:
       '你好，我是你的智能助手，你可以问我任何问题，我会尽力回答你。如果需要获得更加专业或定制的助手，可以点击「+」创建自定义助手',
@@ -61,6 +61,7 @@ export default {
   sessionList: '助手列表',
   setting: '设置',
   share: '分享',
+  stop: '停止',
   tab: {
     chat: '会话',
     market: '助手市场',

diff --git a/src/pages/chat/features/Conversation/Input/index.tsx b/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>

diff --git a/src/pages/chat/features/Conversation/index.tsx b/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>