mirror of
https://github.com/CherryHQ/cherry-studio.git
synced 2026-01-05 04:19:02 +08:00
fix: chat navigation triggering (#6774)
* fix: exclude MessageEditor * fix: more accurate triggering area
This commit is contained in:
parent
41bc118426
commit
fda4ca88c1
@ -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;
|
||||||
|
|||||||
@ -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) => (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user