Skip to content

Commit 1a62248

Browse files
experdotexperdot
committed
style: Refactor ChatWindow and MessageTreeSidebar components for improved code readability and consistency, including formatting adjustments and callback function structure
1 parent e6ddfb9 commit 1a62248

2 files changed

Lines changed: 115 additions & 91 deletions

File tree

‎src/renderer/src/components/pages/chat/ChatWindow.tsx‎

Lines changed: 99 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
import React, { useState, useMemo, useRef, forwardRef, useImperativeHandle, useCallback } from 'react'
1+
import React, {
2+
useState,
3+
useMemo,
4+
useRef,
5+
forwardRef,
6+
useImperativeHandle,
7+
useCallback
8+
} from 'react'
29
import { usePagesStore } from '../../../stores/pagesStore'
310
import { useTabsStore } from '../../../stores/tabsStore'
411
import { useUIStore } from '../../../stores/uiStore'
@@ -65,14 +72,20 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({ chatId }, ref)
6572
}, [chat?.messages])
6673

6774
// 处理分支切换（所有消息都使用兄弟分支切换）
68-
const handleSwitchBranch = useCallback((messageId: string, branchIndex: number) => {
69-
const newPath = messageTree.switchToSiblingBranch(messageId, branchIndex)
70-
updateCurrentPath(chatId, newPath)
71-
}, [messageTree, updateCurrentPath, chatId])
75+
const handleSwitchBranch = useCallback(
76+
(messageId: string, branchIndex: number) => {
77+
const newPath = messageTree.switchToSiblingBranch(messageId, branchIndex)
78+
updateCurrentPath(chatId, newPath)
79+
},
80+
[messageTree, updateCurrentPath, chatId]
81+
)
7282

73-
const handleToggleMessageCollapse = useCallback((messageId: string) => {
74-
toggleMessageCollapse(chatId, messageId)
75-
}, [toggleMessageCollapse, chatId])
83+
const handleToggleMessageCollapse = useCallback(
84+
(messageId: string) => {
85+
toggleMessageCollapse(chatId, messageId)
86+
},
87+
[toggleMessageCollapse, chatId]
88+
)
7689

7790
const handleCollapseAll = useCallback(() => {
7891
collapseAllMessages(
@@ -94,92 +107,101 @@ const ChatWindow = forwardRef<ChatWindowRef, ChatWindowProps>(({ chatId }, ref)
94107
setMessageTreeCollapsed(!messageTreeCollapsed)
95108
}, [messageTreeCollapsed])
96109

97-
const handleMessageTreeNodeSelect = useCallback((messageId: string) => {
98-
if (!chat?.messages) return
110+
const handleMessageTreeNodeSelect = useCallback(
111+
(messageId: string) => {
112+
if (!chat?.messages) return
99113

100-
// 设置选中的消息ID，用于滚动
101-
setSelectedMessageId(messageId)
114+
// 设置选中的消息ID，用于滚动
115+
setSelectedMessageId(messageId)
102116

103-
const messageMap = new Map<string, ChatMessage>()
104-
chat.messages.forEach((msg) => {
105-
messageMap.set(msg.id, msg)
106-
})
117+
const messageMap = new Map<string, ChatMessage>()
118+
chat.messages.forEach((msg) => {
119+
messageMap.set(msg.id, msg)
120+
})
107121

108-
// 构建从根节点到选中节点的路径
109-
const pathToSelected: string[] = []
110-
let currentMsg = messageMap.get(messageId)
111-
while (currentMsg) {
112-
pathToSelected.unshift(currentMsg.id)
113-
if (currentMsg.parentId) {
114-
currentMsg = messageMap.get(currentMsg.parentId)
115-
} else {
116-
break
122+
// 构建从根节点到选中节点的路径
123+
const pathToSelected: string[] = []
124+
let currentMsg = messageMap.get(messageId)
125+
while (currentMsg) {
126+
pathToSelected.unshift(currentMsg.id)
127+
if (currentMsg.parentId) {
128+
currentMsg = messageMap.get(currentMsg.parentId)
129+
} else {
130+
break
131+
}
117132
}
118-
}
119133

120-
// 如果选中的节点在当前路径中，需要保持到叶子节点的完整路径
121-
if (chat.currentPath && chat.currentPath.includes(messageId)) {
122-
// 找到选中节点在当前路径中的位置
123-
const selectedIndex = chat.currentPath.findIndex(id => id === messageId)
124-
if (selectedIndex !== -1) {
125-
// 从根节点到选中节点的路径 + 选中节点之后的原路径
126-
const afterSelected = chat.currentPath.slice(selectedIndex + 1)
127-
const newPath = [...pathToSelected, ...afterSelected]
128-
updateCurrentPath(chatId, newPath)
129-
return
134+
// 如果选中的节点在当前路径中，需要保持到叶子节点的完整路径
135+
if (chat.currentPath && chat.currentPath.includes(messageId)) {
136+
// 找到选中节点在当前路径中的位置
137+
const selectedIndex = chat.currentPath.findIndex((id) => id === messageId)
138+
if (selectedIndex !== -1) {
139+
// 从根节点到选中节点的路径 + 选中节点之后的原路径
140+
const afterSelected = chat.currentPath.slice(selectedIndex + 1)
141+
const newPath = [...pathToSelected, ...afterSelected]
142+
updateCurrentPath(chatId, newPath)
143+
return
144+
}
130145
}
131-
}
132146

133-
// 如果不在当前路径中，则需要延续到第一个子节点的路径
134-
let extendedPath = [...pathToSelected]
135-
let lastNode = messageMap.get(messageId)
136-
137-
// 如果该节点有子节点，默认选择第一个子节点并延续路径
138-
while (lastNode && lastNode.children && lastNode.children.length > 0) {
139-
const firstChild = messageMap.get(lastNode.children[0])
140-
if (firstChild) {
141-
extendedPath.push(firstChild.id)
142-
lastNode = firstChild
143-
} else {
144-
break
147+
// 如果不在当前路径中，则需要延续到第一个子节点的路径
148+
let extendedPath = [...pathToSelected]
149+
let lastNode = messageMap.get(messageId)
150+
151+
// 如果该节点有子节点，默认选择第一个子节点并延续路径
152+
while (lastNode && lastNode.children && lastNode.children.length > 0) {
153+
const firstChild = messageMap.get(lastNode.children[0])
154+
if (firstChild) {
155+
extendedPath.push(firstChild.id)
156+
lastNode = firstChild
157+
} else {
158+
break
159+
}
145160
}
146-
}
147161

148-
// 更新当前路径
149-
updateCurrentPath(chatId, extendedPath)
150-
}, [chat?.messages, chat?.currentPath, updateCurrentPath, chatId])
162+
// 更新当前路径
163+
updateCurrentPath(chatId, extendedPath)
164+
},
165+
[chat?.messages, chat?.currentPath, updateCurrentPath, chatId]
166+
)
151167

152-
const handleMessageTreePathChange = useCallback((path: string[]) => {
153-
// 更新当前路径
154-
updateCurrentPath(chatId, path)
155-
}, [updateCurrentPath, chatId])
168+
const handleMessageTreePathChange = useCallback(
169+
(path: string[]) => {
170+
// 更新当前路径
171+
updateCurrentPath(chatId, path)
172+
},
173+
[updateCurrentPath, chatId]
174+
)
156175

157176
const handleMessageTreeWidthChange = useCallback((width: number) => {
158177
setMessageTreeWidth(width)
159178
localStorage.setItem('messageTreeWidth', width.toString())
160179
}, [])
161180

162-
const handleAutoQuestionChange = useCallback((enabled: boolean, mode: 'ai' | 'preset', listId?: string) => {
163-
console.log('ChatWindow handleAutoQuestionChange:', {
164-
enabled,
165-
mode,
166-
listId,
167-
currentEnabled: autoQuestionEnabled,
168-
currentMode: autoQuestionMode,
169-
currentListId: autoQuestionListId
170-
})
181+
const handleAutoQuestionChange = useCallback(
182+
(enabled: boolean, mode: 'ai' | 'preset', listId?: string) => {
183+
console.log('ChatWindow handleAutoQuestionChange:', {
184+
enabled,
185+
mode,
186+
listId,
187+
currentEnabled: autoQuestionEnabled,
188+
currentMode: autoQuestionMode,
189+
currentListId: autoQuestionListId
190+
})
171191

172-
setAutoQuestionEnabled(enabled)
173-
setAutoQuestionMode(mode)
174-
if (listId) {
175-
setAutoQuestionListId(listId)
176-
} else if (mode === 'preset' && !listId && settings.promptLists?.length > 0) {
177-
// 如果选择预设模式但没有指定listId，使用默认的
178-
const defaultListId = settings.defaultPromptListId || settings.promptLists[0].id
179-
setAutoQuestionListId(defaultListId)
180-
console.log('ChatWindow 自动设置 defaultListId:', defaultListId)
181-
}
182-
}, [settings.promptLists, settings.defaultPromptListId])
192+
setAutoQuestionEnabled(enabled)
193+
setAutoQuestionMode(mode)
194+
if (listId) {
195+
setAutoQuestionListId(listId)
196+
} else if (mode === 'preset' && !listId && settings.promptLists?.length > 0) {
197+
// 如果选择预设模式但没有指定listId，使用默认的
198+
const defaultListId = settings.defaultPromptListId || settings.promptLists[0].id
199+
setAutoQuestionListId(defaultListId)
200+
console.log('ChatWindow 自动设置 defaultListId:', defaultListId)
201+
}
202+
},
203+
[settings.promptLists, settings.defaultPromptListId]
204+
)
183205

184206
if (!chat) {
185207
return <div className="chat-window-error">聊天不存在</div>

‎src/renderer/src/components/pages/chat/MessageTreeSidebar.tsx‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
7272
if (!targetMessageId && currentPath.length > 0) {
7373
targetMessageId = currentPath[currentPath.length - 1]
7474
}
75-
75+
7676
if (!targetMessageId) return []
7777

7878
// 构建从根节点到目标节点的完整路径
@@ -94,7 +94,7 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
9494

9595
const fullPath = buildFullPath(targetMessageId)
9696
const nodes: PathNodeData[] = []
97-
97+
9898
fullPath.forEach((messageId, index) => {
9999
const message = messageMap.get(messageId)
100100
if (!message) return
@@ -105,14 +105,13 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
105105
const parent = messageMap.get(message.parentId)
106106
if (parent && parent.children) {
107107
siblings = parent.children
108-
.map(id => messageMap.get(id))
108+
.map((id) => messageMap.get(id))
109109
.filter(Boolean)
110-
.filter(sibling => sibling!.id !== messageId) as ChatMessage[]
110+
.filter((sibling) => sibling!.id !== messageId) as ChatMessage[]
111111
}
112112
} else {
113113
// 根节点的兄弟节点是其他根节点
114-
siblings = messages
115-
.filter(msg => !msg.parentId && msg.id !== messageId)
114+
siblings = messages.filter((msg) => !msg.parentId && msg.id !== messageId)
116115
}
117116

118117
nodes.push({
@@ -175,7 +174,7 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
175174
// 如果选中的节点在当前路径中，需要保持到叶子节点的完整路径
176175
if (currentPath.includes(messageId)) {
177176
// 找到选中节点在当前路径中的位置
178-
const selectedIndex = currentPath.findIndex(id => id === messageId)
177+
const selectedIndex = currentPath.findIndex((id) => id === messageId)
179178
if (selectedIndex !== -1) {
180179
// 从根节点到选中节点的路径 + 选中节点之后的原路径
181180
const beforeSelected = pathToSelected
@@ -187,7 +186,7 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
187186
// 如果不在当前路径中，或者是叶子节点，则需要延续到第一个子节点的路径
188187
let extendedPath = [...pathToSelected]
189188
let lastNode = messageMap.get(messageId)
190-
189+
191190
// 如果该节点有子节点，默认选择第一个子节点并延续路径
192191
while (lastNode && lastNode.children && lastNode.children.length > 0) {
193192
const firstChild = messageMap.get(lastNode.children[0])
@@ -204,7 +203,7 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
204203

205204
// 处理兄弟节点的展开/收起
206205
const toggleSiblings = (messageId: string) => {
207-
setExpandedSiblings(prev => {
206+
setExpandedSiblings((prev) => {
208207
const newSet = new Set(prev)
209208
if (newSet.has(messageId)) {
210209
newSet.delete(messageId)
@@ -486,8 +485,8 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
486485
)}
487486
</div>
488487
<div className="path-node-preview">
489-
<Text
490-
type={selectedMessageId === node.messageId ? 'success' : 'secondary'}
488+
<Text
489+
type={selectedMessageId === node.messageId ? 'success' : 'secondary'}
491490
style={{ fontSize: '11px' }}
492491
>
493492
{node.message.content.slice(0, 50)}
@@ -498,7 +497,10 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
498497

499498
{/* 兄弟节点列表 */}
500499
{node.showSiblings && node.siblings && (
501-
<div className="siblings-list" style={{ paddingLeft: `${(node.depth + 1) * 12 + 16}px` }}>
500+
<div
501+
className="siblings-list"
502+
style={{ paddingLeft: `${(node.depth + 1) * 12 + 16}px` }}
503+
>
502504
{node.siblings.map((sibling) => (
503505
<div
504506
key={sibling.id}
@@ -526,8 +528,8 @@ const MessageTreeSidebar: React.FC<MessageTreeSidebarProps> = ({
526528
</div>
527529
</div>
528530
<div className="sibling-node-preview">
529-
<Text
530-
type={selectedMessageId === sibling.id ? 'success' : 'secondary'}
531+
<Text
532+
type={selectedMessageId === sibling.id ? 'success' : 'secondary'}
531533
style={{ fontSize: '11px' }}
532534
>
533535
{sibling.content.slice(0, 50)}

0 commit comments

Comments
 (0)