refactor(QuickAssistant): fix loop rendering & support context/pause/thinking block (#7336)

* fix: series bugs of quick assistant * fix: update quick assistant ID handling and improve error management in HomeWindow * refactor(HomeWindow, Messages): streamline clipboard handling and improve component structure - Removed unused imports and hotkey functionality from Messages component. - Refactored clipboard management in HomeWindow to use refs for better performance. - Enhanced user input handling and state management in HomeWindow. - Updated InputBar to accept assistant prop instead of model for better clarity. - Improved Footer component to handle copy functionality and pin state more effectively. * Enhance Footer component: add rotation animation to pin icon and adjust margin - Updated the Pin icon in the Footer component to include a rotation animation based on the pin state. - Adjusted the margin of the PinButtonArea for improved layout consistency. * refactor(HomeWindow): improve clipboard handling and input placeholder logic - Updated clipboard reading logic to check for document focus in addition to startup settings. - Consolidated key event handling to streamline input processing. - Enhanced placeholder logic in InputBar to reflect the current assistant's name or model more accurately.
2025-12-26 03:31:24 +08:00 · 2025-06-19 00:14:32 +08:00 · 2025-06-19 00:14:32 +08:00 · 1ac4d660e5
commit 1ac4d660e5
parent b2e9f33f37
12 changed files with 533 additions and 329 deletions
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@ -755,7 +755,8 @@
        "backspace_clear": "Backspace to clear",
        "esc": "ESC to {{action}}",
        "esc_back": "return",
-        "esc_close": "close"
+        "esc_close": "close",
+        "esc_pause": "pause"
      },
      "input": {
        "placeholder": {
--- a/src/renderer/src/i18n/locales/ja-jp.json
+++ b/src/renderer/src/i18n/locales/ja-jp.json
@ -752,10 +752,11 @@
      },
      "footer": {
        "copy_last_message": "C キーを押してコピー",
+        "backspace_clear": "バックスペースを押してクリアします",
        "esc": "ESC キーを押して{{action}}",
        "esc_back": "戻る",
        "esc_close": "ウィンドウを閉じる",
-        "backspace_clear": "バックスペースを押してクリアします"
+        "esc_pause": "一時停止"
      },
      "input": {
        "placeholder": {
--- a/src/renderer/src/i18n/locales/ru-ru.json
+++ b/src/renderer/src/i18n/locales/ru-ru.json
@ -752,10 +752,11 @@
      },
      "footer": {
        "copy_last_message": "Нажмите C для копирования",
+        "backspace_clear": "Нажмите Backspace, чтобы очистить",
        "esc": "Нажмите ESC {{action}}",
        "esc_back": "возвращения",
        "esc_close": "закрытия окна",
-        "backspace_clear": "Нажмите Backspace, чтобы очистить"
+        "esc_pause": "пауза"
      },
      "input": {
        "placeholder": {
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@ -755,7 +755,8 @@
        "backspace_clear": "按 Backspace 清空",
        "esc": "按 ESC {{action}}",
        "esc_back": "返回",
-        "esc_close": "关闭"
+        "esc_close": "关闭",
+        "esc_pause": "暂停"
      },
      "input": {
        "placeholder": {
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@ -752,10 +752,11 @@
      },
      "footer": {
        "copy_last_message": "按 C 鍵複製",
+        "backspace_clear": "按 Backspace 清空",
        "esc": "按 ESC {{action}}",
        "esc_back": "返回",
        "esc_close": "關閉視窗",
-        "backspace_clear": "按 Backspace 清空"
+        "esc_pause": "暫停"
      },
      "input": {
        "placeholder": {
--- a/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/ModelSettings.tsx
@ -170,7 +170,7 @@ const ModelSettings: FC = () => {
            <HStack alignItems="center" gap={0}>
              <StyledButton
                type={!quickAssistantId ? 'primary' : 'default'}
-                onClick={() => dispatch(setQuickAssistantId(null))}
+                onClick={() => dispatch(setQuickAssistantId(''))}
                selected={!quickAssistantId}>
                {t('settings.models.use_model')}
              </StyledButton>
@ -188,22 +188,29 @@ const ModelSettings: FC = () => {
        {!quickAssistantId ? null : (
          <HStack alignItems="center" style={{ marginTop: 12 }}>
            <Select
-              value={quickAssistantId}
+              value={quickAssistantId || defaultAssistant.id}
              style={{ width: 360 }}
              onChange={(value) => dispatch(setQuickAssistantId(value))}
              placeholder={t('settings.models.quick_assistant_selection')}>
-              {assistants.map((a) => (
-                <Select.Option key={a.id} value={a.id}>
-                  <AssistantItem>
-                    <ModelAvatar model={a.model || defaultModel} size={18} />
-                    <AssistantName>{a.name}</AssistantName>
-                    <Spacer />
-                    {a.id === defaultAssistant.id && (
-                      <DefaultTag isCurrent={true}>{t('settings.models.quick_assistant_default_tag')}</DefaultTag>
-                    )}
-                  </AssistantItem>
-                </Select.Option>
-              ))}
+              <Select.Option key={defaultAssistant.id} value={defaultAssistant.id}>
+                <AssistantItem>
+                  <ModelAvatar model={defaultAssistant.model || defaultModel} size={18} />
+                  <AssistantName>{defaultAssistant.name}</AssistantName>
+                  <Spacer />
+                  <DefaultTag isCurrent={true}>{t('settings.models.quick_assistant_default_tag')}</DefaultTag>
+                </AssistantItem>
+              </Select.Option>
+              {assistants
+                .filter((a) => a.id !== defaultAssistant.id)
+                .map((a) => (
+                  <Select.Option key={a.id} value={a.id}>
+                    <AssistantItem>
+                      <ModelAvatar model={a.model || defaultModel} size={18} />
+                      <AssistantName>{a.name}</AssistantName>
+                      <Spacer />
+                    </AssistantItem>
+                  </Select.Option>
+                ))}
            </Select>
          </HStack>
        )}
--- a/src/renderer/src/store/llm.ts
+++ b/src/renderer/src/store/llm.ts
@ -29,7 +29,7 @@ export interface LlmState {
  defaultModel: Model
  topicNamingModel: Model
  translateModel: Model
-  quickAssistantId: string | null
+  quickAssistantId: string
  settings: LlmSettings
 }

@ -534,7 +534,7 @@ export const initialState: LlmState = {
  defaultModel: SYSTEM_MODELS.defaultModel[0],
  topicNamingModel: SYSTEM_MODELS.defaultModel[1],
  translateModel: SYSTEM_MODELS.defaultModel[2],
-  quickAssistantId: null,
+  quickAssistantId: '',
  providers: INITIAL_PROVIDERS,
  settings: {
    ollama: {
@ -650,7 +650,7 @@ const llmSlice = createSlice({
      state.translateModel = action.payload.model
    },

-    setQuickAssistantId: (state, action: PayloadAction<string | null>) => {
+    setQuickAssistantId: (state, action: PayloadAction<string>) => {
      state.quickAssistantId = action.payload
    },
    setOllamaKeepAliveTime: (state, action: PayloadAction<number>) => {
--- a/src/renderer/src/windows/mini/chat/ChatWindow.tsx
+++ b/src/renderer/src/windows/mini/chat/ChatWindow.tsx
@ -1,18 +1,22 @@
 import Scrollbar from '@renderer/components/Scrollbar'
-import { Assistant } from '@renderer/types'
+import { Assistant, Topic } from '@renderer/types'
 import { FC } from 'react'
 import styled from 'styled-components'

 import Messages from './components/Messages'
 interface Props {
  route: string
-  assistant: Assistant
+  assistant: Assistant | null
+  topic: Topic | null
+  isOutputted: boolean
 }

-const ChatWindow: FC<Props> = ({ route, assistant }) => {
+const ChatWindow: FC<Props> = ({ route, assistant, topic, isOutputted }) => {
+  if (!assistant || !topic) return null
+
  return (
    <Main className="bubble">
-      <Messages assistant={{ ...assistant }} route={route} />
+      <Messages assistant={assistant} topic={topic} route={route} isOutputted={isOutputted} />
    </Main>
  )
 }
--- a/src/renderer/src/windows/mini/chat/components/Messages.tsx
+++ b/src/renderer/src/windows/mini/chat/components/Messages.tsx
@ -1,61 +1,29 @@
+import { LoadingOutlined } from '@ant-design/icons'
 import Scrollbar from '@renderer/components/Scrollbar'
 import { useTopicMessages } from '@renderer/hooks/useMessageOperations'
-import { Assistant } from '@renderer/types'
-import { getMainTextContent } from '@renderer/utils/messageUtils/find'
-import { last } from 'lodash'
-import { FC, useRef } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
-import { useTranslation } from 'react-i18next'
+import { Assistant, Topic } from '@renderer/types'
+import { FC } from 'react'
 import styled from 'styled-components'

 import MessageItem from './Message'

 interface Props {
  assistant: Assistant
+  topic: Topic
  route: string
+  isOutputted: boolean
 }

 interface ContainerProps {
  right?: boolean
 }

-const Messages: FC<Props> = ({ assistant, route }) => {
-  // const [messages, setMessages] = useState<Message[]>([])
-  const messages = useTopicMessages(assistant.topics[0].id)
-  const containerRef = useRef<HTMLDivElement>(null)
-  const messagesRef = useRef(messages)
+const Messages: FC<Props> = ({ assistant, topic, route, isOutputted }) => {
+  const messages = useTopicMessages(topic.id)

-  const { t } = useTranslation()
-
-  messagesRef.current = messages
-
-  // const onSendMessage = useCallback(
-  //   async (message: Message) => {
-  //     setMessages((prev) => {
-  // const assistantMessage = getAssistantMessage({ assistant, topic: assistant.topics[0] })
-  // store.dispatch(newMessagesActions.addMessage({ topicId: assistant.topics[0].id, message: assistantMessage }))
-  //       const messages = prev.concat([message, assistantMessage])
-  //       return messages
-  //     })
-  //   },
-  //   [assistant]
-  // )
-
-  // useEffect(() => {
-  //   const unsubscribes = [EventEmitter.on(EVENT_NAMES.SEND_MESSAGE, onSendMessage)]
-  //   return () => unsubscribes.forEach((unsub) => unsub())
-  // }, [assistant.id])
-
-  useHotkeys('c', () => {
-    const lastMessage = last(messages)
-    if (lastMessage) {
-      const content = getMainTextContent(lastMessage)
-      navigator.clipboard.writeText(content)
-      window.message.success(t('message.copy.success'))
-    }
-  })
  return (
-    <Container id="messages" key={assistant.id} ref={containerRef}>
+    <Container id="messages" key={assistant.id}>
+      {!isOutputted && <LoadingOutlined style={{ fontSize: 16 }} spin />}
      {[...messages].reverse().map((message, index) => (
        <MessageItem key={message.id} message={message} index={index} total={messages.length} route={route} />
      ))}
--- a/src/renderer/src/windows/mini/home/HomeWindow.tsx
+++ b/src/renderer/src/windows/mini/home/HomeWindow.tsx
@ -1,27 +1,27 @@
 import { isMac } from '@renderer/config/constant'
 import { useTheme } from '@renderer/context/ThemeProvider'
-import { useDefaultAssistant, useDefaultModel } from '@renderer/hooks/useAssistant'
+import { useAssistant } from '@renderer/hooks/useAssistant'
 import { useSettings } from '@renderer/hooks/useSettings'
 import i18n from '@renderer/i18n'
 import { fetchChatCompletion } from '@renderer/services/ApiService'
-import { getAssistantById } from '@renderer/services/AssistantService'
+import { getDefaultTopic } from '@renderer/services/AssistantService'
 import { getAssistantMessage, getUserMessage } from '@renderer/services/MessagesService'
 import store, { useAppSelector } from '@renderer/store'
-import { upsertManyBlocks } from '@renderer/store/messageBlock'
-import { updateOneBlock, upsertOneBlock } from '@renderer/store/messageBlock'
-import { newMessagesActions } from '@renderer/store/newMessage'
-import { Assistant, ThemeMode } from '@renderer/types'
+import { updateOneBlock, upsertManyBlocks, upsertOneBlock } from '@renderer/store/messageBlock'
+import { newMessagesActions, selectMessagesForTopic } from '@renderer/store/newMessage'
+import { ThemeMode, Topic } from '@renderer/types'
 import { Chunk, ChunkType } from '@renderer/types/chunk'
-import { AssistantMessageStatus } from '@renderer/types/newMessage'
-import { MessageBlockStatus } from '@renderer/types/newMessage'
-import { createMainTextBlock } from '@renderer/utils/messageUtils/create'
+import { AssistantMessageStatus, MessageBlockStatus } from '@renderer/types/newMessage'
+import { abortCompletion } from '@renderer/utils/abortController'
+import { isAbortError } from '@renderer/utils/error'
+import { createMainTextBlock, createThinkingBlock } from '@renderer/utils/messageUtils/create'
+import { getMainTextContent } from '@renderer/utils/messageUtils/find'
 import { defaultLanguage } from '@shared/config/constant'
 import { IpcChannel } from '@shared/IpcChannel'
 import { Divider } from 'antd'
-import dayjs from 'dayjs'
 import { isEmpty } from 'lodash'
-import React, { FC, useCallback, useEffect, useRef, useState } from 'react'
-import { useHotkeys } from 'react-hotkeys-hook'
+import { last } from 'lodash'
+import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

@ -33,63 +33,111 @@ import Footer from './components/Footer'
 import InputBar from './components/InputBar'

 const HomeWindow: FC = () => {
-  const [route, setRoute] = useState<'home' | 'chat' | 'translate' | 'summary' | 'explanation'>('home')
-  const [isFirstMessage, setIsFirstMessage] = useState(true)
-  const [clipboardText, setClipboardText] = useState('')
-  const [selectedText, setSelectedText] = useState('')
-  const [currentAssistant, setCurrentAssistant] = useState<Assistant>({} as Assistant)
-  const [text, setText] = useState('')
-  const [lastClipboardText, setLastClipboardText] = useState<string | null>(null)
-  const textChange = useState(() => {})[1]
-  const { defaultAssistant } = useDefaultAssistant()
-  const topic = defaultAssistant.topics[0]
-  const { defaultModel } = useDefaultModel()
-  const model = currentAssistant.model || defaultModel
  const { language, readClipboardAtStartup, windowStyle } = useSettings()
  const { theme } = useTheme()
  const { t } = useTranslation()
-  const inputBarRef = useRef<HTMLDivElement>(null)
-  const featureMenusRef = useRef<FeatureMenusRef>(null)
-  const referenceText = selectedText || clipboardText || text

-  const content = isFirstMessage ? (referenceText === text ? text : `${referenceText}\n\n${text}`).trim() : text.trim()
+  const [route, setRoute] = useState<'home' | 'chat' | 'translate' | 'summary' | 'explanation'>('home')
+  const [isFirstMessage, setIsFirstMessage] = useState(true)
+
+  const [userInputText, setUserInputText] = useState('')
+
+  const [clipboardText, setClipboardText] = useState('')
+  const lastClipboardTextRef = useRef<string | null>(null)
+
+  const [isPinned, setIsPinned] = useState(false)
+
+  // Indicator for loading(thinking/streaming)
+  const [isLoading, setIsLoading] = useState(false)
+  // Indicator for whether the first message is outputted
+  const [isOutputted, setIsOutputted] = useState(false)
+
+  const [error, setError] = useState<string | null>(null)

  const { quickAssistantId } = useAppSelector((state) => state.llm)
+  const { assistant: currentAssistant } = useAssistant(quickAssistantId)

-  const readClipboard = useCallback(async () => {
-    if (!readClipboardAtStartup) return
+  const currentTopic = useRef<Topic>(getDefaultTopic(currentAssistant.id))
+  const currentAskId = useRef('')

-    const text = await navigator.clipboard.readText().catch(() => null)
-    if (text && text !== lastClipboardText) {
-      setLastClipboardText(text)
-      setClipboardText(text.trim())
+  const inputBarRef = useRef<HTMLDivElement>(null)
+  const featureMenusRef = useRef<FeatureMenusRef>(null)
+
+  const referenceText = useMemo(() => clipboardText || userInputText, [clipboardText, userInputText])
+
+  const userContent = useMemo(() => {
+    if (isFirstMessage) {
+      return referenceText === userInputText ? userInputText : `${referenceText}\n\n${userInputText}`.trim()
    }
-  }, [readClipboardAtStartup, lastClipboardText])
+    return userInputText.trim()
+  }, [isFirstMessage, referenceText, userInputText])

-  const focusInput = () => {
+  useEffect(() => {
+    i18n.changeLanguage(language || navigator.language || defaultLanguage)
+  }, [language])
+
+  // Reset state when switching to home route
+  useEffect(() => {
+    if (route === 'home') {
+      setIsFirstMessage(true)
+      setError(null)
+    }
+  }, [route])
+
+  const focusInput = useCallback(() => {
    if (inputBarRef.current) {
      const input = inputBarRef.current.querySelector('input')
      if (input) {
        input.focus()
      }
    }
-  }
+  }, [])
+
+  // Use useCallback with stable dependencies to avoid infinite loops
+  const readClipboard = useCallback(async () => {
+    if (!readClipboardAtStartup || !document.hasFocus()) return
+
+    try {
+      const text = await navigator.clipboard.readText()
+      if (text && text !== lastClipboardTextRef.current) {
+        lastClipboardTextRef.current = text
+        setClipboardText(text.trim())
+      }
+    } catch (error) {
+      // Silently handle clipboard read errors (common in some environments)
+      console.warn('Failed to read clipboard:', error)
+    }
+  }, [readClipboardAtStartup])
+
+  const clearClipboard = useCallback(async () => {
+    setClipboardText('')
+    lastClipboardTextRef.current = null
+    focusInput()
+  }, [focusInput])

  const onWindowShow = useCallback(async () => {
    featureMenusRef.current?.resetSelectedIndex()
-    readClipboard().then()
+    await readClipboard()
    focusInput()
-  }, [readClipboard])
+  }, [readClipboard, focusInput])
+
+  useEffect(() => {
+    window.api.miniWindow.setPin(isPinned)
+  }, [isPinned])
+
+  useEffect(() => {
+    window.electron.ipcRenderer.on(IpcChannel.ShowMiniWindow, onWindowShow)
+
+    return () => {
+      window.electron.ipcRenderer.removeAllListeners(IpcChannel.ShowMiniWindow)
+    }
+  }, [onWindowShow])

  useEffect(() => {
    readClipboard()
  }, [readClipboard])

-  useEffect(() => {
-    i18n.changeLanguage(language || navigator.language || defaultLanguage)
-  }, [language])
-
-  const onCloseWindow = () => window.api.miniWindow.hide()
+  const handleCloseWindow = useCallback(() => window.api.miniWindow.hide(), [])

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    // 使用非直接输入法时（例如中文、日文输入法），存在输入法键入过程
@ -97,10 +145,7 @@ const HomeWindow: FC = () => {
    // 例子，中文输入法候选词过程使用`Enter`直接上屏字母，日文输入法候选词过程使用`Enter`输入假名
    // 输入法可以`Esc`终止候选词过程
    // 这两个例子的`Enter`和`Esc`快捷助手都不应该响应
-    if (e.nativeEvent.isComposing) {
-      return
-    }
-    if (e.key === 'Process') {
+    if (e.nativeEvent.isComposing || e.key === 'Process') {
      return
    }

@ -108,14 +153,16 @@ const HomeWindow: FC = () => {
      case 'Enter':
      case 'NumpadEnter':
        {
+          if (isLoading) return
+
          e.preventDefault()
-          if (content) {
+          if (userContent) {
            if (route === 'home') {
              featureMenusRef.current?.useFeature()
            } else {
-              // 目前文本框只在'chat'时可以继续输入，这里相当于 route === 'chat'
+              // Currently text input is only available in 'chat' mode
              setRoute('chat')
-              onSendMessage().then()
+              handleSendMessage()
              focusInput()
            }
          }
@ -123,11 +170,9 @@ const HomeWindow: FC = () => {
        break
      case 'Backspace':
        {
-          textChange(() => {
-            if (text.length === 0) {
-              clearClipboard()
-            }
-          })
+          if (userInputText.length === 0) {
+            clearClipboard()
+          }
        }
        break
      case 'ArrowUp':
@ -148,226 +193,345 @@ const HomeWindow: FC = () => {
        break
      case 'Escape':
        {
-          setText('')
-          setRoute('home')
-          route === 'home' && onCloseWindow()
+          handleEsc()
        }
        break
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setText(e.target.value)
+    setUserInputText(e.target.value)
  }

-  useEffect(() => {
-    const defaultCurrentAssistant = {
-      ...defaultAssistant,
-      model: defaultModel
-    }
+  const handleError = (error: Error) => {
+    setIsLoading(false)
+    setError(error.message)
+  }

-    if (quickAssistantId) {
-      // 獲取指定助手，如果不存在則使用默認助手
-      const assistantFromId = getAssistantById(quickAssistantId)
-      const currentAssistant = assistantFromId || defaultCurrentAssistant
-      // 如果助手本身沒有設定模型，則使用預設模型
-      if (!currentAssistant.model) {
-        currentAssistant.model = defaultModel
-      }
-      setCurrentAssistant(currentAssistant)
-    } else {
-      setCurrentAssistant(defaultCurrentAssistant)
-    }
-  }, [quickAssistantId, defaultAssistant, defaultModel])
-
-  const onSendMessage = useCallback(
+  const handleSendMessage = useCallback(
    async (prompt?: string) => {
-      if (isEmpty(content)) {
+      if (isEmpty(userContent) || !currentTopic.current) {
        return
      }
-      const topic = currentAssistant.topics[0]
-      const messageParams = {
-        role: 'user',
-        content: [prompt, content].filter(Boolean).join('\n\n'),
-        assistant: currentAssistant,
-        topic,
-        createdAt: dayjs().format('YYYY-MM-DD HH:mm:ss'),
-        status: 'success'
-      }
-      const topicId = topic.id
-      const { message: userMessage, blocks } = getUserMessage(messageParams)

-      store.dispatch(newMessagesActions.addMessage({ topicId, message: userMessage }))
-      store.dispatch(upsertManyBlocks(blocks))
+      try {
+        const topicId = currentTopic.current.id

-      const assistant = currentAssistant
-      let blockId: string | null = null
-      let blockContent: string = ''
+        const { message: userMessage, blocks } = getUserMessage({
+          content: [prompt, userContent].filter(Boolean).join('\n\n'),
+          assistant: currentAssistant,
+          topic: currentTopic.current
+        })

-      const assistantMessage = getAssistantMessage({ assistant, topic: assistant.topics[0] })
-      store.dispatch(newMessagesActions.addMessage({ topicId, message: assistantMessage }))
+        store.dispatch(newMessagesActions.addMessage({ topicId, message: userMessage }))
+        store.dispatch(upsertManyBlocks(blocks))

-      fetchChatCompletion({
-        messages: [userMessage],
-        assistant: { ...assistant, settings: { streamOutput: true } },
-        onChunkReceived: (chunk: Chunk) => {
-          if (chunk.type === ChunkType.TEXT_DELTA) {
-            blockContent += chunk.text
-            if (!blockId) {
-              const block = createMainTextBlock(assistantMessage.id, chunk.text, {
-                status: MessageBlockStatus.STREAMING
-              })
-              blockId = block.id
-              store.dispatch(
-                newMessagesActions.updateMessage({
-                  topicId,
-                  messageId: assistantMessage.id,
-                  updates: { blockInstruction: { id: block.id } }
-                })
-              )
-              store.dispatch(upsertOneBlock(block))
-            } else {
-              store.dispatch(updateOneBlock({ id: blockId, changes: { content: blockContent } }))
+        const assistantMessage = getAssistantMessage({
+          assistant: currentAssistant,
+          topic: currentTopic.current
+        })
+        assistantMessage.askId = userMessage.id
+        currentAskId.current = userMessage.id
+
+        store.dispatch(newMessagesActions.addMessage({ topicId, message: assistantMessage }))
+
+        const allMessagesForTopic = selectMessagesForTopic(store.getState(), topicId)
+        const userMessageIndex = allMessagesForTopic.findIndex((m) => m?.id === userMessage.id)
+
+        const messagesForContext = allMessagesForTopic
+          .slice(0, userMessageIndex + 1)
+          .filter((m) => m && !m.status?.includes('ing'))
+
+        let blockId: string | null = null
+        let blockContent: string = ''
+        let thinkingBlockId: string | null = null
+        let thinkingBlockContent: string = ''
+
+        setIsLoading(true)
+        setIsOutputted(false)
+        setError(null)
+
+        setIsFirstMessage(false)
+        setUserInputText('')
+
+        await fetchChatCompletion({
+          messages: messagesForContext,
+          assistant: { ...currentAssistant, settings: { streamOutput: true } },
+          onChunkReceived: (chunk: Chunk) => {
+            switch (chunk.type) {
+              case ChunkType.THINKING_DELTA:
+                {
+                  thinkingBlockContent += chunk.text
+                  setIsOutputted(true)
+                  if (!thinkingBlockId) {
+                    const block = createThinkingBlock(assistantMessage.id, chunk.text, {
+                      status: MessageBlockStatus.STREAMING,
+                      thinking_millsec: chunk.thinking_millsec
+                    })
+                    thinkingBlockId = block.id
+                    store.dispatch(
+                      newMessagesActions.updateMessage({
+                        topicId,
+                        messageId: assistantMessage.id,
+                        updates: { blockInstruction: { id: block.id } }
+                      })
+                    )
+                    store.dispatch(upsertOneBlock(block))
+                  } else {
+                    store.dispatch(
+                      updateOneBlock({
+                        id: thinkingBlockId,
+                        changes: { content: thinkingBlockContent, thinking_millsec: chunk.thinking_millsec }
+                      })
+                    )
+                  }
+                }
+                break
+              case ChunkType.THINKING_COMPLETE:
+                {
+                  if (thinkingBlockId) {
+                    store.dispatch(
+                      updateOneBlock({
+                        id: thinkingBlockId,
+                        changes: { status: MessageBlockStatus.SUCCESS, thinking_millsec: chunk.thinking_millsec }
+                      })
+                    )
+                  }
+                }
+                break
+              case ChunkType.TEXT_DELTA:
+                {
+                  blockContent += chunk.text
+                  setIsOutputted(true)
+                  if (!blockId) {
+                    const block = createMainTextBlock(assistantMessage.id, chunk.text, {
+                      status: MessageBlockStatus.STREAMING
+                    })
+                    blockId = block.id
+                    store.dispatch(
+                      newMessagesActions.updateMessage({
+                        topicId,
+                        messageId: assistantMessage.id,
+                        updates: { blockInstruction: { id: block.id } }
+                      })
+                    )
+                    store.dispatch(upsertOneBlock(block))
+                  } else {
+                    store.dispatch(updateOneBlock({ id: blockId, changes: { content: blockContent } }))
+                  }
+                }
+                break
+
+              case ChunkType.TEXT_COMPLETE:
+                {
+                  blockId &&
+                    store.dispatch(updateOneBlock({ id: blockId, changes: { status: MessageBlockStatus.SUCCESS } }))
+                  store.dispatch(
+                    newMessagesActions.updateMessage({
+                      topicId,
+                      messageId: assistantMessage.id,
+                      updates: { status: AssistantMessageStatus.SUCCESS }
+                    })
+                  )
+                }
+                break
+              case ChunkType.ERROR: {
+                //stop the thinking timer
+                const isAborted = isAbortError(chunk.error)
+                const possibleBlockId = thinkingBlockId || blockId
+                if (possibleBlockId) {
+                  store.dispatch(
+                    updateOneBlock({
+                      id: possibleBlockId,
+                      changes: {
+                        status: isAborted ? MessageBlockStatus.PAUSED : MessageBlockStatus.ERROR
+                      }
+                    })
+                  )
+                }
+                if (!isAborted) {
+                  throw new Error(chunk.error.message)
+                }
+              }
+              //fall through
+              case ChunkType.BLOCK_COMPLETE:
+                setIsLoading(false)
+                setIsOutputted(true)
+                currentAskId.current = ''
+                break
            }
          }
-          if (chunk.type === ChunkType.TEXT_COMPLETE) {
-            blockId && store.dispatch(updateOneBlock({ id: blockId, changes: { status: MessageBlockStatus.SUCCESS } }))
-            store.dispatch(
-              newMessagesActions.updateMessage({
-                topicId,
-                messageId: assistantMessage.id,
-                updates: { status: AssistantMessageStatus.SUCCESS }
-              })
-            )
-          }
-        }
-      })
-
-      setIsFirstMessage(false)
-      setText('') // ✅ 清除输入框内容
+        })
+      } catch (err) {
+        if (isAbortError(err)) return
+        handleError(err instanceof Error ? err : new Error('An error occurred'))
+        console.error('Error fetching result:', err)
+      } finally {
+        setIsLoading(false)
+        setIsOutputted(true)
+        currentAskId.current = ''
+      }
    },
-    [content, currentAssistant, topic]
+    [userContent, currentAssistant]
  )

-  const clearClipboard = () => {
-    setClipboardText('')
-    setSelectedText('')
-    focusInput()
-  }
+  const handlePause = useCallback(() => {
+    if (currentAskId.current) {
+      abortCompletion(currentAskId.current)
+      setIsLoading(false)
+      setIsOutputted(true)
+      currentAskId.current = ''
+    }
+  }, [])

-  // If the input is focused, the `Esc` callback will not be triggered here.
-  useHotkeys('esc', () => {
-    if (route === 'home') {
-      onCloseWindow()
+  const handleEsc = useCallback(() => {
+    if (isLoading) {
+      handlePause()
    } else {
-      setRoute('home')
-      setText('')
+      if (route === 'home') {
+        handleCloseWindow()
+      } else {
+        // Clear the topic messages to reduce memory usage
+        if (currentTopic.current) {
+          store.dispatch(newMessagesActions.clearTopicMessages(currentTopic.current.id))
+        }
+
+        // Reset the topic
+        currentTopic.current = getDefaultTopic(currentAssistant.id)
+
+        setError(null)
+        setRoute('home')
+        setUserInputText('')
+      }
    }
-  })
+  }, [isLoading, route, handleCloseWindow, currentAssistant.id, handlePause])

-  useEffect(() => {
-    window.electron.ipcRenderer.on(IpcChannel.ShowMiniWindow, onWindowShow)
+  const handleCopy = useCallback(() => {
+    if (!currentTopic.current) return

-    return () => {
-      window.electron.ipcRenderer.removeAllListeners(IpcChannel.ShowMiniWindow)
+    const messages = selectMessagesForTopic(store.getState(), currentTopic.current.id)
+    const lastMessage = last(messages)
+
+    if (lastMessage) {
+      const content = getMainTextContent(lastMessage)
+      navigator.clipboard.writeText(content)
+      window.message.success(t('message.copy.success'))
    }
-  }, [onWindowShow, onSendMessage, setRoute])
+  }, [currentTopic, t])

-  // 当路由为home时，初始化isFirstMessage为true
-  useEffect(() => {
-    if (route === 'home') {
-      setIsFirstMessage(true)
-    }
-  }, [route])
-
-  const backgroundColor = () => {
+  const backgroundColor = useMemo(() => {
    // ONLY MAC: when transparent style + light theme: use vibrancy effect
    // because the dark style under mac's vibrancy effect has not been implemented
    if (isMac && windowStyle === 'transparent' && theme === ThemeMode.light) {
      return 'transparent'
    }
-
    return 'var(--color-background)'
-  }
+  }, [windowStyle, theme])

-  if (['chat', 'summary', 'explanation'].includes(route)) {
-    return (
-      <Container style={{ backgroundColor: backgroundColor() }}>
-        {route === 'chat' && (
-          <>
-            <InputBar
-              text={text}
-              model={model}
-              referenceText={referenceText}
-              placeholder={
-                quickAssistantId
-                  ? t('miniwindow.input.placeholder.empty', { model: currentAssistant.name })
-                  : t('miniwindow.input.placeholder.empty', { model: model.name })
-              }
-              handleKeyDown={handleKeyDown}
-              handleChange={handleChange}
-              ref={inputBarRef}
-            />
-            <Divider style={{ margin: '10px 0' }} />
-          </>
-        )}
-        {['summary', 'explanation'].includes(route) && (
-          <div style={{ marginTop: 10 }}>
-            <ClipboardPreview referenceText={referenceText} clearClipboard={clearClipboard} t={t} />
-          </div>
-        )}
-        <ChatWindow route={route} assistant={currentAssistant ?? defaultAssistant} />
-        <Divider style={{ margin: '10px 0' }} />
-        <Footer route={route} onExit={() => setRoute('home')} />
-      </Container>
-    )
-  }
+  // Memoize placeholder text
+  const inputPlaceholder = useMemo(() => {
+    if (referenceText && route === 'home') {
+      return t('miniwindow.input.placeholder.title')
+    }
+    return t('miniwindow.input.placeholder.empty', {
+      model: quickAssistantId ? currentAssistant.name : currentAssistant.model.name
+    })
+  }, [referenceText, route, t, quickAssistantId, currentAssistant])

-  if (route === 'translate') {
-    return (
-      <Container style={{ backgroundColor: backgroundColor() }}>
-        <TranslateWindow text={referenceText} />
-        <Divider style={{ margin: '10px 0' }} />
-        <Footer route={route} onExit={() => setRoute('home')} />
-      </Container>
-    )
-  }
-
-  return (
-    <Container style={{ backgroundColor: backgroundColor() }}>
-      <InputBar
-        text={text}
-        model={model}
-        referenceText={referenceText}
-        placeholder={
-          referenceText && route === 'home'
-            ? t('miniwindow.input.placeholder.title')
-            : quickAssistantId
-              ? t('miniwindow.input.placeholder.empty', { model: currentAssistant.name })
-              : t('miniwindow.input.placeholder.empty', { model: model.name })
-        }
-        handleKeyDown={handleKeyDown}
-        handleChange={handleChange}
-        ref={inputBarRef}
-      />
-      <Divider style={{ margin: '10px 0' }} />
-      <ClipboardPreview referenceText={referenceText} clearClipboard={clearClipboard} t={t} />
-      <Main>
-        <FeatureMenus setRoute={setRoute} onSendMessage={onSendMessage} text={content} ref={featureMenusRef} />
-      </Main>
-      <Divider style={{ margin: '10px 0' }} />
-      <Footer
-        route={route}
-        canUseBackspace={text.length > 0 || clipboardText.length == 0}
-        clearClipboard={clearClipboard}
-        onExit={() => {
-          setRoute('home')
-          setText('')
-          onCloseWindow()
-        }}
-      />
-    </Container>
+  // Memoize footer props
+  const baseFooterProps = useMemo(
+    () => ({
+      route,
+      loading: isLoading,
+      onEsc: handleEsc,
+      setIsPinned,
+      isPinned
+    }),
+    [route, isLoading, handleEsc, isPinned]
  )
+
+  switch (route) {
+    case 'chat':
+    case 'summary':
+    case 'explanation':
+      return (
+        <Container style={{ backgroundColor }}>
+          {route === 'chat' && (
+            <>
+              <InputBar
+                text={userInputText}
+                assistant={currentAssistant}
+                referenceText={referenceText}
+                placeholder={inputPlaceholder}
+                loading={isLoading}
+                handleKeyDown={handleKeyDown}
+                handleChange={handleChange}
+                ref={inputBarRef}
+              />
+              <Divider style={{ margin: '10px 0' }} />
+            </>
+          )}
+          {['summary', 'explanation'].includes(route) && (
+            <div style={{ marginTop: 10 }}>
+              <ClipboardPreview referenceText={referenceText} clearClipboard={clearClipboard} t={t} />
+            </div>
+          )}
+          <ChatWindow
+            route={route}
+            assistant={currentAssistant}
+            topic={currentTopic.current}
+            isOutputted={isOutputted}
+          />
+          {error && <ErrorMsg>{error}</ErrorMsg>}
+
+          <Divider style={{ margin: '10px 0' }} />
+          <Footer key="footer" {...baseFooterProps} onCopy={handleCopy} />
+        </Container>
+      )
+
+    case 'translate':
+      return (
+        <Container style={{ backgroundColor }}>
+          <TranslateWindow text={referenceText} />
+          <Divider style={{ margin: '10px 0' }} />
+          <Footer key="footer" {...baseFooterProps} />
+        </Container>
+      )
+
+    // Home
+    default:
+      return (
+        <Container style={{ backgroundColor }}>
+          <InputBar
+            text={userInputText}
+            assistant={currentAssistant}
+            referenceText={referenceText}
+            placeholder={inputPlaceholder}
+            loading={isLoading}
+            handleKeyDown={handleKeyDown}
+            handleChange={handleChange}
+            ref={inputBarRef}
+          />
+          <Divider style={{ margin: '10px 0' }} />
+          <ClipboardPreview referenceText={referenceText} clearClipboard={clearClipboard} t={t} />
+          <Main>
+            <FeatureMenus
+              setRoute={setRoute}
+              onSendMessage={handleSendMessage}
+              text={userContent}
+              ref={featureMenusRef}
+            />
+          </Main>
+          <Divider style={{ margin: '10px 0' }} />
+          <Footer
+            key="footer"
+            {...baseFooterProps}
+            canUseBackspace={userInputText.length > 0 || clipboardText.length === 0}
+            clearClipboard={clearClipboard}
+          />
+        </Container>
+      )
+  }
 }

 const Container = styled.div`
@ -388,4 +552,15 @@ const Main = styled.main`
  overflow: hidden;
 `

+const ErrorMsg = styled.div`
+  color: var(--color-error);
+  background: rgba(255, 0, 0, 0.15);
+  border: 1px solid var(--color-error);
+  padding: 8px 12px;
+  border-radius: 4px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  word-break: break-all;
+`
+
 export default HomeWindow
--- a/src/renderer/src/windows/mini/home/components/Footer.tsx
+++ b/src/renderer/src/windows/mini/home/components/Footer.tsx
@ -1,25 +1,45 @@
-import { ArrowLeftOutlined } from '@ant-design/icons'
+import { ArrowLeftOutlined, LoadingOutlined } from '@ant-design/icons'
 import { Tag as AntdTag, Tooltip } from 'antd'
 import { CircleArrowLeft, Copy, Pin } from 'lucide-react'
-import { FC, useState } from 'react'
+import { FC } from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'

 interface FooterProps {
  route: string
  canUseBackspace?: boolean
+  loading?: boolean
+  setIsPinned: (isPinned: boolean) => void
+  isPinned: boolean
  clearClipboard?: () => void
-  onExit: () => void
+  onEsc: () => void
+  onCopy?: () => void
 }

-const Footer: FC<FooterProps> = ({ route, canUseBackspace, clearClipboard, onExit }) => {
+const Footer: FC<FooterProps> = ({
+  route,
+  canUseBackspace,
+  loading,
+  clearClipboard,
+  onEsc,
+  setIsPinned,
+  isPinned,
+  onCopy
+}) => {
  const { t } = useTranslation()
-  const [isPinned, setIsPinned] = useState(false)

-  const onClickPin = () => {
-    window.api.miniWindow.setPin(!isPinned).then(() => {
-      setIsPinned(!isPinned)
-    })
+  useHotkeys('esc', () => {
+    onEsc()
+  })
+
+  useHotkeys('c', () => {
+    handleCopy()
+  })
+
+  const handleCopy = () => {
+    if (loading || !onCopy) return
+    onCopy()
  }

  return (
@ -27,11 +47,21 @@ const Footer: FC<FooterProps> = ({ route, canUseBackspace, clearClipboard, onExi
      <FooterText>
        <Tag
          bordered={false}
-          icon={<CircleArrowLeft size={14} color="var(--color-text)" />}
+          icon={
+            loading ? (
+              <LoadingOutlined style={{ fontSize: 12, color: 'var(--color-error)', padding: 0 }} spin />
+            ) : (
+              <CircleArrowLeft size={14} color="var(--color-text)" />
+            )
+          }
          className="nodrag"
-          onClick={() => onExit()}>
+          onClick={onEsc}>
          {t('miniwindow.footer.esc', {
-            action: route === 'home' ? t('miniwindow.footer.esc_close') : t('miniwindow.footer.esc_back')
+            action: loading
+              ? t('miniwindow.footer.esc_pause')
+              : route === 'home'
+                ? t('miniwindow.footer.esc_close')
+                : t('miniwindow.footer.esc_back')
          })}
        </Tag>
        {route === 'home' && !canUseBackspace && (
@ -44,19 +74,27 @@ const Footer: FC<FooterProps> = ({ route, canUseBackspace, clearClipboard, onExi
            {t('miniwindow.footer.backspace_clear')}
          </Tag>
        )}
-        {route !== 'home' && (
+        {route !== 'home' && !loading && (
          <Tag
            bordered={false}
            icon={<Copy size={14} color="var(--color-text)" />}
            style={{ cursor: 'pointer' }}
-            className="nodrag">
+            className="nodrag"
+            onClick={handleCopy}>
            {t('miniwindow.footer.copy_last_message')}
          </Tag>
        )}
      </FooterText>
-      <PinButtonArea onClick={() => onClickPin()} className="nodrag">
+      <PinButtonArea onClick={() => setIsPinned(!isPinned)} className="nodrag">
        <Tooltip title={t('miniwindow.tooltip.pin')} mouseEnterDelay={0.8} placement="left">
-          <Pin size={14} stroke={isPinned ? 'var(--color-primary)' : 'var(--color-text)'} />
+          <Pin
+            size={14}
+            stroke={isPinned ? 'var(--color-primary)' : 'var(--color-text)'}
+            style={{
+              transform: isPinned ? 'rotate(40deg)' : 'rotate(0deg)',
+              transition: 'transform 0.2s ease-in-out'
+            }}
+          />
        </Tooltip>
      </PinButtonArea>
    </WindowFooter>
@ -84,6 +122,7 @@ const PinButtonArea = styled.div`
  cursor: pointer;
  display: flex;
  align-items: center;
+  margin-right: 5px;
 `

 const Tag = styled(AntdTag)`
@ -91,6 +130,12 @@ const Tag = styled(AntdTag)`
  display: flex;
  align-items: center;
  gap: 5px;
+  transition: all 0.2s ease-in-out;
+
+  &:hover {
+    background-color: var(--color-background-soft);
+    color: var(--color-primary);
+  }
 `

 export default Footer
--- a/src/renderer/src/windows/mini/home/components/InputBar.tsx
+++ b/src/renderer/src/windows/mini/home/components/InputBar.tsx
@ -1,5 +1,5 @@
 import ModelAvatar from '@renderer/components/Avatar/ModelAvatar'
-import { useRuntime } from '@renderer/hooks/useRuntime'
+import { Assistant } from '@renderer/types'
 import { Input as AntdInput } from 'antd'
 import { InputRef } from 'rc-input/lib/interface'
 import React, { useRef } from 'react'
@ -7,9 +7,10 @@ import styled from 'styled-components'

 interface InputBarProps {
  text: string
-  model: any
+  assistant: Assistant
  referenceText: string
  placeholder: string
+  loading: boolean
  handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void
  handleChange: (e: React.ChangeEvent<HTMLInputElement>) => void
 }
@ -17,19 +18,19 @@ interface InputBarProps {
 const InputBar = ({
  ref,
  text,
-  model,
+  assistant,
  placeholder,
+  loading,
  handleKeyDown,
  handleChange
 }: InputBarProps & { ref?: React.RefObject<HTMLDivElement | null> }) => {
-  const { generating } = useRuntime()
  const inputRef = useRef<InputRef>(null)
-  if (!generating) {
+  if (!loading) {
    setTimeout(() => inputRef.current?.input?.focus(), 0)
  }
  return (
    <InputWrapper ref={ref}>
-      <ModelAvatar model={model} size={30} />
+      {assistant.model && <ModelAvatar model={assistant.model} size={30} />}
      <Input
        value={text}
        placeholder={placeholder}
@ -37,7 +38,6 @@ const InputBar = ({
        autoFocus
        onKeyDown={handleKeyDown}
        onChange={handleChange}
-        disabled={generating}
        ref={inputRef}
      />
    </InputWrapper>