Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update ScrollToBottom to use message status for button visibility

Browse Source 
Use the `MessageStatus` enum to determine when the “Generate AI Response” button should appear.
Previously the visibility logic checked the last message’s role or the presence of tool calls, which could be unreliable since we moved to combined tool call/reasoning block.
By checking that the last message exists and its status is not `Ready` which is that the message is finished generating when an eot token is found, the button is shown only while the AI has stopped generating before it could end properly, improving UX and aligning the UI state with the underlying message state.  The change also imports `MessageStatus` and cleans up formatting for readability.
This commit is contained in:
Akarshan 2025-10-30 11:01:21 +05:30
parent 890e6694c2
commit 89d158dc8b
No known key found for this signature in database
GPG Key ID: D75C9634A870665F
1 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web-app/src/containers/ScrollToBottom.tsx
View File

@ -8,6 +8,7 @@ import { cn } from '@/lib/utils'
import { ArrowDown } from 'lucide-react'
import { useTranslation } from '@/i18n/react-i18next-compat'
import { useAppState } from '@/hooks/useAppState'
import { MessageStatus } from '@janhq/core'
const ScrollToBottom = ({
threadId,
@ -18,8 +19,10 @@ const ScrollToBottom = ({
}) => {
const { t } = useTranslation()
const appMainViewBgColor = useAppearance((state) => state.appMainViewBgColor)
const { showScrollToBottomBtn, scrollToBottom } =
useThreadScrolling(threadId, scrollContainerRef)
const { showScrollToBottomBtn, scrollToBottom } = useThreadScrolling(
threadId,
scrollContainerRef
)
const { messages } = useMessages(
useShallow((state) => ({
messages: state.messages[threadId],
@ -28,12 +31,9 @@ const ScrollToBottom = ({
const streamingContent = useAppState((state) => state.streamingContent)
const lastMsg = messages[messages.length - 1]
const showGenerateAIResponseBtn =
(messages[messages.length - 1]?.role === 'user' ||
(messages[messages.length - 1]?.metadata &&
'tool_calls' in (messages[messages.length - 1].metadata ?? {}))) &&
!streamingContent
!!lastMsg && lastMsg.status !== MessageStatus.Ready && !streamingContent
return (
<div
className={cn(