fix: chat navigation triggering (#6774)

* fix: exclude MessageEditor

* fix: more accurate triggering area
This commit is contained in:
one 2025-06-04 17:34:51 +08:00 committed by GitHub
parent 41bc118426
commit fda4ca88c1
2 changed files with 16 additions and 6 deletions

View File

@ -18,7 +18,17 @@ import styled from 'styled-components'
import ChatFlowHistory from './ChatFlowHistory' import ChatFlowHistory from './ChatFlowHistory'
// Exclude some areas from the navigation // Exclude some areas from the navigation
const EXCLUDED_SELECTORS = ['.MessageFooter', '.code-toolbar', '.ant-collapse-header', '.group-menu-bar', '.code-block'] const EXCLUDED_SELECTORS = [
'.MessageFooter',
'.code-toolbar',
'.ant-collapse-header',
'.group-menu-bar',
'.code-block',
'.message-editor'
]
// Gap between the navigation bar and the right element
const RIGHT_GAP = 16
interface ChatNavigationProps { interface ChatNavigationProps {
containerId: string containerId: string
@ -264,10 +274,10 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
const triggerWidth = 60 // Same as the width in styled component const triggerWidth = 60 // Same as the width in styled component
// Safe way to calculate position when using calc expressions // Safe way to calculate position when using calc expressions
let rightOffset = 16 // Default right offset let rightOffset = RIGHT_GAP // Default right offset
if (showRightTopics) { if (showRightTopics) {
// When topics are shown on right, we need to account for topic list width // When topics are shown on right, we need to account for topic list width
rightOffset = 16 + 300 // Assuming topic list width is 300px, adjust if different rightOffset += 275 // --topic-list-width
} }
const rightPosition = window.innerWidth - rightOffset - triggerWidth const rightPosition = window.innerWidth - rightOffset - triggerWidth
@ -280,7 +290,7 @@ const ChatNavigation: FC<ChatNavigationProps> = ({ containerId }) => {
const isInTriggerArea = const isInTriggerArea =
!isInExcludedArea && !isInExcludedArea &&
e.clientX > rightPosition && e.clientX > rightPosition &&
e.clientX < rightPosition + triggerWidth && e.clientX < rightPosition + triggerWidth + RIGHT_GAP &&
e.clientY > topPosition && e.clientY > topPosition &&
e.clientY < topPosition + height e.clientY < topPosition + height
@ -412,7 +422,7 @@ interface NavigationContainerProps {
const NavigationContainer = styled.div<NavigationContainerProps>` const NavigationContainer = styled.div<NavigationContainerProps>`
position: fixed; position: fixed;
right: 16px; right: ${RIGHT_GAP}px;
top: 50%; top: 50%;
transform: translateY(-50%) translateX(${(props) => (props.$isVisible ? 0 : '100%')}); transform: translateY(-50%) translateX(${(props) => (props.$isVisible ? 0 : '100%')});
z-index: 999; z-index: 999;

View File

@ -172,7 +172,7 @@ const MessageBlockEditor: FC<Props> = ({ message, onSave, onResend, onCancel })
} }
return ( return (
<EditorContainer onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}> <EditorContainer className="message-editor" onDragOver={(e) => e.preventDefault()} onDrop={handleDrop}>
{editedBlocks {editedBlocks
.filter((block) => block.type === MessageBlockType.MAIN_TEXT) .filter((block) => block.type === MessageBlockType.MAIN_TEXT)
.map((block) => ( .map((block) => (