Northern_Lights/cherry-studio
1
0
Fork 0
mirror of https://github.com/CherryHQ/cherry-studio.git synced 2025-12-26 03:31:24 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat: add hideMenuBar prop to MessageItem and integrate MessageEditingProvider

Browse Source
This commit is contained in:
Pleasurecruise 2025-05-19 17:44:07 +08:00
parent 4e37735c21
commit 90fa501a9a
No known key found for this signature in database
GPG Key ID: E6385136096279B6
6 changed files with 57 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -51,3 +51,4 @@ local
coverage
.vitest-cache
vitest.config.*.timestamp-*
YOUR_MEMORY_FILE_PATH

37
src/renderer/src/pages/history/components/SearchMessage.tsx
View File

@ -1,5 +1,6 @@
import { ArrowRightOutlined } from '@ant-design/icons'
import { HStack } from '@renderer/components/Layout'
import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
import { useSettings } from '@renderer/hooks/useSettings'
import { getTopicById } from '@renderer/hooks/useTopic'
import { ChatProvider } from '@renderer/pages/home/Messages/ChatContext'
@ -43,23 +44,25 @@ const SearchMessage: FC<Props> = ({ message, ...props }) => {
return (
<ChatProvider activeTopic={topic}>
<MessagesContainer {...props} className={messageStyle}>
<ContainerWrapper style={{ paddingTop: 20, paddingBottom: 20, position: 'relative' }}>
<MessageItem message={message} topic={topic} />
<Button
type="text"
size="middle"
style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 10 }}
onClick={() => locateToMessage(navigate, message)}
icon={<ArrowRightOutlined />}
/>
<HStack mt="10px" justifyContent="center">
<Button onClick={() => locateToMessage(navigate, message)} icon={<ArrowRightOutlined />}>
{t('history.locate.message')}
</Button>
</HStack>
</ContainerWrapper>
</MessagesContainer>
<MessageEditingProvider>
<MessagesContainer {...props} className={messageStyle}>
<ContainerWrapper style={{ paddingTop: 20, paddingBottom: 20, position: 'relative' }}>
<MessageItem message={message} topic={topic} hideMenuBar={true} />
<Button
type="text"
size="middle"
style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 10 }}
onClick={() => locateToMessage(navigate, message)}
icon={<ArrowRightOutlined />}
/>
<HStack mt="10px" justifyContent="center">
<Button onClick={() => locateToMessage(navigate, message)} icon={<ArrowRightOutlined />}>
{t('history.locate.message')}
</Button>
</HStack>
</ContainerWrapper>
</MessagesContainer>
</MessageEditingProvider>
</ChatProvider>
)
}

53
src/renderer/src/pages/history/components/TopicMessages.tsx
View File

@ -1,6 +1,7 @@
import { ArrowRightOutlined, MessageOutlined } from '@ant-design/icons'
import { HStack } from '@renderer/components/Layout'
import SearchPopup from '@renderer/components/Popups/SearchPopup'
import { MessageEditingProvider } from '@renderer/context/MessageEditingContext'
import useScrollPosition from '@renderer/hooks/useScrollPosition'
import { useSettings } from '@renderer/hooks/useSettings'
import { ChatProvider } from '@renderer/pages/home/Messages/ChatContext'
@ -48,31 +49,33 @@ const TopicMessages: FC<Props> = ({ topic, ...props }) => {
return (
<ChatProvider activeTopic={topic}>
<MessagesContainer {...props} ref={containerRef} onScroll={handleScroll} className={messageStyle}>
<ContainerWrapper style={{ paddingTop: 30, paddingBottom: 30 }}>
{topic?.messages.map((message) => (
<div key={message.id} style={{ position: 'relative' }}>
<MessageItem message={message} topic={topic} />
<Button
type="text"
size="middle"
style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 5 }}
onClick={() => locateToMessage(navigate, message)}
icon={<ArrowRightOutlined />}
/>
<Divider style={{ margin: '8px auto 15px' }} variant="dashed" />
</div>
))}
{isEmpty && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
{!isEmpty && (
<HStack justifyContent="center">
<Button onClick={() => onContinueChat(topic)} icon={<MessageOutlined />}>
{t('history.continue_chat')}
</Button>
</HStack>
)}
</ContainerWrapper>
</MessagesContainer>
<MessageEditingProvider>
<MessagesContainer {...props} ref={containerRef} onScroll={handleScroll} className={messageStyle}>
<ContainerWrapper style={{ paddingTop: 30, paddingBottom: 30 }}>
{topic?.messages.map((message) => (
<div key={message.id} style={{ position: 'relative' }}>
<MessageItem message={message} topic={topic} hideMenuBar={true} />
<Button
type="text"
size="middle"
style={{ color: 'var(--color-text-3)', position: 'absolute', right: 0, top: 5 }}
onClick={() => locateToMessage(navigate, message)}
icon={<ArrowRightOutlined />}
/>
<Divider style={{ margin: '8px auto 15px' }} variant="dashed" />
</div>
))}
{isEmpty && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />}
{!isEmpty && (
<HStack justifyContent="center">
<Button onClick={() => onContinueChat(topic)} icon={<MessageOutlined />}>
{t('history.continue_chat')}
</Button>
</HStack>
)}
</ContainerWrapper>
</MessagesContainer>
</MessageEditingProvider>
</ChatProvider>
)
}

4
src/renderer/src/pages/home/Messages/Message.tsx
View File

@ -29,6 +29,7 @@ interface Props {
index?: number
total?: number
hidePresetMessages?: boolean
hideMenuBar?: boolean
style?: React.CSSProperties
isGrouped?: boolean
isStreaming?: boolean
@ -41,6 +42,7 @@ const MessageItem: FC<Props> = ({
// assistant,
index,
hidePresetMessages,
hideMenuBar = false,
isGrouped,
isStreaming = false,
style
@ -97,7 +99,7 @@ const MessageItem: FC<Props> = ({
const isLastMessage = index === 0
const isAssistantMessage = message.role === 'assistant'
const showMenubar = !isStreaming && !message.status.includes('ing') && !isEditing
const showMenubar = !hideMenuBar && !isStreaming && !message.status.includes('ing') && !isEditing
const messageBorder = showMessageDivider ? undefined : 'none'
const messageBackground = getMessageBackground(isBubbleStyle, isAssistantMessage)

2
src/renderer/src/pages/home/Messages/MessageEditor.tsx
View File

@ -297,7 +297,7 @@ const FileBlocksContainer = styled.div`
gap: 8px;
padding: 0 15px;
margin: 8px 0;
background: transplant;
background: transparent;
border-radius: 4px;
`

8
src/renderer/src/pages/home/Messages/Messages.tsx
View File

@ -79,7 +79,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
if (!isMultiSelectMode) return
const updateDragPos = (e: MouseEvent) => {
const container = containerRef.current!
const container = scrollContainerRef.current!
const rect = container.getBoundingClientRect()
const x = e.clientX - rect.left + container.scrollLeft
const y = e.clientY - rect.top + container.scrollTop
@ -123,7 +123,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
setIsDragging(false)
}
const container = containerRef.current
const container = scrollContainerRef.current!
if (container) {
container.addEventListener('mousedown', handleMouseDown)
window.addEventListener('mousemove', handleMouseMove)
@ -137,7 +137,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
window.removeEventListener('mouseup', handleMouseUp)
}
}
}, [isMultiSelectMode, isDragging, dragStart, dragCurrent, handleSelectMessage])
}, [isMultiSelectMode, isDragging, dragStart, dragCurrent, handleSelectMessage, scrollContainerRef])
const registerMessageElement = useCallback((id: string, element: HTMLElement | null) => {
if (element) {
@ -343,7 +343,7 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic, o
return (
<Container
id="messages"
ref={containerRef}
ref={scrollContainerRef}
style={{
position: 'relative',
maxWidth,