Skip to content

S
sdream-ai-fe
Commit f30979f3 by Liu
Options

fix：切换工具按钮时调用常见问题时机&&切换工具时增加loading

parent 172d8756
Showing with 56 additions and 40 deletions
src/components/ChatEditor/index.tsx
...@@ -18,7 +18,7 @@ interface ChatEditorProps { ...@@ -18,7 +18,7 @@ interface ChatEditorProps {
onChange?: (value: string) => void onChange?: (value: string) => void
onFocus?: () => void onFocus?: () => void
onSubmit?: (value: string, toolId?: string) => void onSubmit?: (value: string, toolId?: string) => void
onToolClick?: (isToolBtn: boolean, toolId?: string, toolName?: string, shouldChangeStyle?: boolean, conversationId?: string) => void onToolClick?: (isToolBtn: boolean, toolId?: string, toolName?: string, shouldChangeStyle?: boolean, conversationId?: string, isLoading?: boolean) => void
placeholders: string[] placeholders: string[]
showContentTips?: boolean showContentTips?: boolean
initialValue?: string initialValue?: string
...@@ -321,28 +321,30 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, ...@@ -321,28 +321,30 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
const handleGeneralClick = async () => { const handleGeneralClick = async () => {
if (!checkAuth()) if (!checkAuth())
return return
// 重置提交按钮状态 // 通知上层开始 loading
dispatch(setIsAsking(false)) onToolClick?.(true, undefined, '制度活化', false, undefined, true)
// 先更新 Redux，确保状态同步
dispatch(clearCurrentToolId())
// 立即更新本地状态，让 UI 立即响应
setIsToolBtnActive(true)
setSelectedToolId(null)
safeSessionStorageRemoveItem('showToolQuestion')
safeSessionStorageRemoveItem('currentToolId')
setSessionToolId(null)
setShowToolQuestion(false)
// 先通知上层更新欢迎语（即便后续接口异常也能生效）
onToolClick?.(true, undefined, '制度活化', false)
// 清空路由中的 toolId 参数
if (toolIdFromUrl) {
const newSearchParams = new URLSearchParams(searchParams)
newSearchParams.delete('toolId')
setSearchParams(newSearchParams, { replace: true })
}
// 先调用 fetchSessionConversationId 获取会话ID
try { try {
// 重置提交按钮状态
dispatch(setIsAsking(false))
// 先更新 Redux，确保状态同步
dispatch(clearCurrentToolId())
// 立即更新本地状态，让 UI 立即响应
setIsToolBtnActive(true)
setSelectedToolId(null)
safeSessionStorageRemoveItem('showToolQuestion')
safeSessionStorageRemoveItem('currentToolId')
setSessionToolId(null)
setShowToolQuestion(false)
// 先通知上层更新欢迎语（即便后续接口异常也能生效）
onToolClick?.(true, undefined, '制度活化', false)
// 清空路由中的 toolId 参数
if (toolIdFromUrl) {
const newSearchParams = new URLSearchParams(searchParams)
newSearchParams.delete('toolId')
setSearchParams(newSearchParams, { replace: true })
}
// 先调用 fetchSessionConversationId 获取会话ID
// 等待 token 就绪后再调用接口 // 等待 token 就绪后再调用接口
await waitForToken() await waitForToken()
const requestData = { const requestData = {
...@@ -383,28 +385,34 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, ...@@ -383,28 +385,34 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
// 出错时也要清除标记 // 出错时也要清除标记
sessionStorage.removeItem('toolHistoryLoading') sessionStorage.removeItem('toolHistoryLoading')
} }
finally {
// 通知上层结束 loading
onToolClick?.(true, undefined, '制度活化', false, undefined, false)
}
} }
// 处理工具按钮点击：先创建新会话，再切换工具 // 处理工具按钮点击：先创建新会话，再切换工具
const handleToolClick = async (tool: any) => { const handleToolClick = async (tool: any) => {
// 重置提交按钮状态 // 通知上层开始 loading
dispatch(setIsAsking(false)) onToolClick?.(false, tool.toolId, tool.toolName, true, undefined, true)
if (tool.toolName === '数据助手') {
safeSessionStorageSetItem('showToolQuestion', 'true')
setShowToolQuestion(true)
}
else {
safeSessionStorageRemoveItem('showToolQuestion')
setShowToolQuestion(false)
}
dispatch(setCurrentToolId(tool.toolId))
setSelectedToolId(tool.toolId)
setIsToolBtnActive(false)
safeSessionStorageSetItem('currentToolId', tool.toolId)
setSessionToolId(tool.toolId)
// 先调用 fetchSessionConversationId 获取会话ID
try { try {
// 重置提交按钮状态
dispatch(setIsAsking(false))
if (tool.toolName === '数据助手') {
safeSessionStorageSetItem('showToolQuestion', 'true')
setShowToolQuestion(true)
}
else {
safeSessionStorageRemoveItem('showToolQuestion')
setShowToolQuestion(false)
}
dispatch(setCurrentToolId(tool.toolId))
setSelectedToolId(tool.toolId)
setIsToolBtnActive(false)
safeSessionStorageSetItem('currentToolId', tool.toolId)
setSessionToolId(tool.toolId)
// 先调用 fetchSessionConversationId 获取会话ID
// 等待 token 就绪后再调用接口 // 等待 token 就绪后再调用接口
await waitForToken() await waitForToken()
const requestData = { const requestData = {
...@@ -450,6 +458,10 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, ...@@ -450,6 +458,10 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
// 出错时也要清除标记 // 出错时也要清除标记
sessionStorage.removeItem('toolHistoryLoading') sessionStorage.removeItem('toolHistoryLoading')
} }
finally {
// 通知上层结束 loading
onToolClick?.(false, tool.toolId, tool.toolName, true, undefined, false)
}
} }
useEffect(() => { useEffect(() => {
......
src/pages/Chat/Chat.tsx
...@@ -859,7 +859,11 @@ export const Chat: React.FC = () => { ...@@ -859,7 +859,11 @@ export const Chat: React.FC = () => {
</div> </div>
<ChatEditor <ChatEditor
onSubmit={(question, toolId) => handleSubmitQuestion(question, undefined, toolId)} onSubmit={(question, toolId) => handleSubmitQuestion(question, undefined, toolId)}
onToolClick={(isToolBtn, toolId, toolName, shouldChangeStyle, conversationId) => { onToolClick={(isToolBtn, toolId, toolName, shouldChangeStyle, conversationId, isLoading) => {
// 如果传递了 loading 状态，更新 isLoading
if (isLoading !== undefined) {
setIsLoading(isLoading)
}
// 发送自定义事件到父组件 // 发送自定义事件到父组件
window.dispatchEvent(new CustomEvent('toolButtonClick', { window.dispatchEvent(new CustomEvent('toolButtonClick', {
detail: { isToolBtn, toolId, toolName, shouldChangeStyle, conversationId }, detail: { isToolBtn, toolId, toolName, shouldChangeStyle, conversationId },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment