whai/cherry-studio
1
1
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: auto scroll on send new message

Browse Source
This commit is contained in:
kangfenmao 2024-07-07 20:50:46 +08:00
parent 20944e7cc4
commit 9d378d4f35
4 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/renderer/src/assets/styles/markdown.scss
View File

@ -21,7 +21,7 @@
h4,
h5,
h6 {
margin: 1.5em 0 0.5em 0;
margin: 0 0 1em 0;
font-weight: 800;
}

2
src/renderer/src/pages/home/components/Inputbar.tsx
View File

@ -24,7 +24,7 @@ const Inputbar: FC<Props> = ({ assistant, setActiveTopic }) => {
const { setShowRightSidebar } = useShowRightSidebar()
const { addTopic } = useAssistant(assistant.id)
const { sendMessageShortcut } = useSettings()
const inputRef = useRef<TextAreaRef>(null)
const inputRef = useRef<TextAreaRef>()
const sendMessage = () => {
if (isEmpty(text.trim())) {

1
src/renderer/src/pages/home/components/Message.tsx
View File

@ -23,6 +23,7 @@ const MessageItem: FC<Props> = ({ message, showMenu, onDeleteMessage }) => {
const onDelete = async () => {
const confirmed = await window.modal.confirm({
icon: null,
title: 'Delete Message',
content: 'Are you sure you want to delete this message?',
okText: 'Delete',

13
src/renderer/src/pages/home/components/Messages.tsx
View File

@ -1,7 +1,7 @@
import { EVENT_NAMES, EventEmitter } from '@renderer/services/event'
import { Assistant, Message, Topic } from '@renderer/types'
import localforage from 'localforage'
import { FC, useCallback, useEffect, useState } from 'react'
import { FC, useCallback, useEffect, useRef, useState } from 'react'
import styled from 'styled-components'
import MessageItem from './Message'
import { reverse } from 'lodash'
@ -23,6 +23,7 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
const [lastMessage, setLastMessage] = useState<Message | null>(null)
const { updateTopic } = useAssistant(assistant.id)
const provider = useProviderByAssistant(assistant)
const messagesRef = useRef<HTMLDivElement>(null)
const assistantDefaultMessage: Message = {
id: 'assistant',
@ -90,10 +91,14 @@ const Messages: FC<Props> = ({ assistant, topic }) => {
})
}, [topic.id])
useEffect(() => hljs.highlightAll())
useEffect(() => hljs.highlightAll(), [messages, lastMessage])
useEffect(() => {
messagesRef.current?.scrollIntoView({ behavior: 'smooth' })
}, [messages])
return (
<Container id="messages">
<Container id="messages" ref={messagesRef}>
{lastMessage && <MessageItem message={lastMessage} />}
{reverse([...messages]).map((message) => (
<MessageItem message={message} key={message.id} showMenu onDeleteMessage={onDeleteMessage} />
@ -109,6 +114,8 @@ const Container = styled.div`
overflow-y: scroll;
flex-direction: column-reverse;
max-height: calc(100vh - var(--input-bar-height) - var(--navbar-height));
padding-top: 10px;
padding-bottom: 20px;
&::-webkit-scrollbar {
display: none;
}