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

fix: glitchy UI when hover last message

Browse Source
This commit is contained in:
Louis 2025-04-23 22:42:59 +07:00
parent a81b644a8f
commit 7edb987cbd
No known key found for this signature in database
GPG Key ID: 44FA9F4D33C37DE2
4 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/screens/Thread/ThreadCenterPanel/ChatBody/index.tsx
View File

@ -202,6 +202,7 @@ const ChatBody = memo(
isCurrentMessage={ isCurrentMessage={
virtualRow.index === messages?.length - 1 virtualRow.index === messages?.length - 1
} }
isLast={virtualRow.index === messages?.length - 1}
onExpand={(props) => onExpand={(props) =>
preserveScrollOnExpand(() => { preserveScrollOnExpand(() => {
setToolCallExpanded((prev) => ({ setToolCallExpanded((prev) => ({

1
web/screens/Thread/ThreadCenterPanel/ChatItem/index.tsx
View File

@ -22,6 +22,7 @@ type Props = {
loadModelError?: string loadModelError?: string
isCurrentMessage?: boolean isCurrentMessage?: boolean
index: number index: number
isLast: boolean
onExpand: (props: { [id: number]: boolean }) => void onExpand: (props: { [id: number]: boolean }) => void
} & ThreadMessage } & ThreadMessage

1
web/screens/Thread/ThreadCenterPanel/TextMessage/ToolCallBlock.tsx
View File

@ -24,7 +24,6 @@ const ToolCallBlock = ({ id, name, result, loading, onExpand }: Props) => {
const isExpanded = collapseState[id] ?? false const isExpanded = collapseState[id] ?? false
const handleClick = () => { const handleClick = () => {
onExpand({ [id]: !isExpanded }) onExpand({ [id]: !isExpanded })
// setCollapseState((prev) => ({ ...prev, [id]: !isExpanded }))
} }
return ( return (
<div className="mx-auto w-full"> <div className="mx-auto w-full">

9
web/screens/Thread/ThreadCenterPanel/TextMessage/index.tsx
View File

@ -33,6 +33,7 @@ const MessageContainer: React.FC<
ThreadMessage & { ThreadMessage & {
isCurrentMessage: boolean isCurrentMessage: boolean
index: number index: number
isLast: boolean
onExpand: (props: { [id: number]: boolean }) => void onExpand: (props: { [id: number]: boolean }) => void
} }
> = (props) => { > = (props) => {
@ -124,10 +125,12 @@ const MessageContainer: React.FC<
<div <div
className={twMerge( className={twMerge(
'absolute right-0 order-1 flex cursor-pointer items-center justify-start gap-x-2 transition-all', 'absolute right-0 order-1 flex cursor-pointer items-center justify-start gap-x-2 transition-all',
twMerge( !props.isLast
'hidden group-hover:absolute group-hover:-bottom-4 group-hover:right-4 group-hover:z-50 group-hover:flex', ? twMerge(
'hidden group-hover:absolute group-hover:right-4 group-hover:top-4 group-hover:z-50 group-hover:flex',
image && 'group-hover:-top-2' image && 'group-hover:-top-2'
), )
: 'relative left-0 order-2 flex w-full justify-between opacity-0 group-hover:opacity-100',
props.isCurrentMessage && 'opacity-100' props.isCurrentMessage && 'opacity-100'
)} )}