Skip to content

feat: add ESC key to close floating chat window #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zerob13 merged 1 commit into from
Aug 12, 2025
Merged

feat: add ESC key to close floating chat window #728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/main/presenter/windowPresenter/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,17 @@ export class WindowPresenter implements IWindowPresenter {
event.returnValue = event.sender.id
})

ipcMain.on('close-floating-window', (event) => {
// 检查发送者是否是悬浮聊天窗口
const webContentsId = event.sender.id
if (
this.floatingChatWindow &&
this.floatingChatWindow.getWindow()?.webContents.id === webContentsId
) {
this.hideFloatingChatWindow()
}
})

Comment on lines +58 to +68
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Ad-hoc IPC channel bypasses presenter pattern and silently no-ops with current App.vue sender. Add error handling or switch to presenter.

  • Architecture: Renderer→Main should use usePresenter, not new raw ipcMain channels. Consider exposing hideFloatingChatWindow via the existing WindowPresenter bridge and calling it from the floating window’s renderer.
  • Functionality: Given App.vue is sending this event, your sender check will ignore it (webContents mismatch), so ESC won’t close the floating window. If you keep this IPC, mount the ESC handler in the floating window renderer.
  • Robustness: Add try-catch and explicit logs for unauthorized senders.

Apply this minimal hardening (if you keep the IPC):

-    ipcMain.on('close-floating-window', (event) => {
-      // 检查发送者是否是悬浮聊天窗口
-      const webContentsId = event.sender.id
-      if (
-        this.floatingChatWindow &&
-        this.floatingChatWindow.getWindow()?.webContents.id === webContentsId
-      ) {
-        this.hideFloatingChatWindow()
-      }
-    })
+    ipcMain.on('close-floating-window', (event) => {
+      try {
+        // Verify the sender is the floating chat window
+        const webContentsId = event.sender.id
+        const floatingId = this.floatingChatWindow?.getWindow()?.webContents.id
+        if (floatingId && floatingId === webContentsId) {
+          this.hideFloatingChatWindow()
+        } else {
+          console.debug(
+            `Ignoring "close-floating-window" from webContents ${webContentsId}; expected floating window ${floatingId}.`
+          )
+        }
+      } catch (err) {
+        console.error(
+          'Error handling "close-floating-window" IPC. Failed to hide floating chat window:',
+          err
+        )
+      }
+    })

Optional follow-ups:

  • Define the channel in your central events constants (e.g., WINDOW_EVENTS.CLOSE_FLOATING_WINDOW) instead of a string literal.
  • Prefer presenter-based calls for Renderer→Main and remove this IPC entirely once the floating window registers the ESC handler and calls windowPresenter.hideFloatingChatWindow().

To verify the mismatch causing a no-op, search where the ESC event is emitted and confirm sender IDs:

🏁 Script executed:

#!/bin/bash
# Show all emits of 'close-floating-window' in renderer
rg -n "ipcRenderer\\.send\\(['\"]close-floating-window['\"]" -A 2 -B 2 src/renderer || true

# Show the floating window webContents id when created (if logged)
rg -n "FloatingChatWindow.*webContents|getWindow\\(\\)\\?\\.webContents\\.id" -S src || true

Length of output: 588

#!/bin/bash

Verify that hideFloatingChatWindow is defined in the presenter

rg -n "hideFloatingChatWindow" -S src/main/presenter/windowPresenter/index.ts -A 5 -B 5

🏁 Script executed:

#!/bin/bash
# Locate implementation of hideFloatingChatWindow in the main presenter
rg -n "hideFloatingChatWindow" -S src/main/presenter -A5 -B5

# Verify if hideFloatingChatWindow is exposed via usePresenter in the renderer
rg -n "hideFloatingChatWindow" -S src/renderer/src/composables/usePresenter.ts -A5 -B5

Length of output: 1799

Refine close-floating-window IPC handling

The current ipcMain.on('close-floating-window', …) only hides the floating window when the sender’s WebContents ID matches the floating window, but your ESC handler lives in App.vue (main window). As a result, pressing Escape in the floating window won’t trigger hideFloatingChatWindow, and pressing it in the main window is intentionally ignored by your guard.

• Code Locations:

  • src/main/presenter/windowPresenter/index.ts (lines 58–68): raw ipcMain listener
  • src/renderer/src/App.vue (lines 173–177): ESC → ipcRenderer.send('close-floating-window')
  • src/renderer/src/composables/usePresenter.ts: currently does not expose hideFloatingChatWindow

• Actionable Fixes:

  1. Move/mirror your ESC key handler into the floating window’s renderer so its own WebContents can send the IPC.
  2. Or—preferably—expose hideFloatingChatWindow via your existing Presenter bridge:
    • Add hideFloatingChatWindow to usePresenter.ts
    • Call it directly from the floating‐window renderer instead of raw ipcRenderer.send(...)
  3. If you retain the IPC channel, harden it with error handling and logging:
   ipcMain.on('close-floating-window', (event) => {
-    // 检查发送者是否是悬浮聊天窗口
-    const webContentsId = event.sender.id
-    if (
-      this.floatingChatWindow &&
-      this.floatingChatWindow.getWindow()?.webContents.id === webContentsId
-    ) {
-      this.hideFloatingChatWindow()
-    }
+    try {
+      const senderId = event.sender.id
+      const floatId = this.floatingChatWindow?.getWindow()?.webContents.id
+      if (floatId === senderId) {
+        this.hideFloatingChatWindow()
+      } else {
+        console.debug(
+          `Ignored close-floating-window from ${senderId}, expected ${floatId}`
+        )
+      }
+    } catch (err) {
+      console.error('Failed to handle close-floating-window IPC:', err)
+    }

• Optional Follow-Ups:

  • Define the channel in a central constant (e.g. WINDOW_EVENTS.CLOSE_FLOATING_WINDOW)
  • Remove the raw IPC listener once all floating-window callers use the Presenter API
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
ipcMain.on('close-floating-window', (event) => {
// 检查发送者是否是悬浮聊天窗口
const webContentsId = event.sender.id
if (
this.floatingChatWindow &&
this.floatingChatWindow.getWindow()?.webContents.id === webContentsId
) {
this.hideFloatingChatWindow()
}
})
ipcMain.on('close-floating-window', (event) => {
try {
const senderId = event.sender.id
const floatId = this.floatingChatWindow?.getWindow()?.webContents.id
if (floatId === senderId) {
this.hideFloatingChatWindow()
} else {
console.debug(
`Ignored close-floating-window from ${senderId}, expected ${floatId}`
)
}
} catch (err) {
console.error('Failed to handle close-floating-window IPC:', err)
}
})
🤖 Prompt for AI Agents 
In src/main/presenter/windowPresenter/index.ts around lines 58 to 68, the
ipcMain listener for 'close-floating-window' only hides the floating window when
the sender's webContents id matches the existing floating window, which prevents
the floating-window renderer (whose ESC handler should send the event) from
closing itself; fix this by adding a hideFloatingChatWindow method to the
renderer Presenter bridge (add to src/renderer/src/composables/usePresenter.ts
and implement a corresponding main-side handler) and update the floating-window
renderer to call presenter.hideFloatingChatWindow on ESC (or move the ESC
handler into the floating-window renderer), and if you keep the raw IPC channel,
relax the sender-id guard and add error handling/logging so attempts to close
are logged and safely ignored when no floating window exists.

// 监听应用即将退出的事件，设置退出标志，避免窗口关闭时触发隐藏逻辑
app.on('before-quit', () => {
console.log('App is quitting, setting isQuitting flag.')
Expand Down
11 changes: 11 additions & 0 deletions src/renderer/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,13 @@ const handleGoSettings = () => {
}
}

// 处理ESC键 - 关闭悬浮聊天窗口
const handleEscKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
window.electron.ipcRenderer.send('close-floating-window')
}
}

Comment on lines +172 to +178
Copy link
Contributor

@coderabbitai coderabbitai bot Aug 12, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

ESC handler in App.vue + raw IPC won’t close the floating window (sender check blocks it). Move to floating window and use presenter.

  • The IPC handler in main validates the sender is the floating chat window. App.vue runs in the main shell window, so pressing ESC here emits from the wrong WebContents and is ignored. Net result: ESC won’t close the floating window.
  • Renderer-to-Main should go through usePresenter, not ad-hoc IPC channels, per project guidelines.
  • Also, the new comment is not in English.

Apply this diff to improve correctness and align with guidelines (still in App.vue if you decide to keep it here), and make the comment English. Note: add windowPresenter (see snippet below).

-// 处理ESC键 - 关闭悬浮聊天窗口
-const handleEscKey = (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
-    window.electron.ipcRenderer.send('close-floating-window')
-  }
-}
+// Handle ESC key — close the floating chat window
+const handleEscKey = (event: KeyboardEvent) => {
+  if (event.key !== 'Escape' || event.isComposing || event.repeat) return
+  const active = document.activeElement as HTMLElement | null
+  const tag = active?.tagName?.toLowerCase()
+  const isTyping =
+    active?.isContentEditable ||
+    tag === 'input' ||
+    tag === 'textarea' ||
+    (active as HTMLInputElement)?.type === 'text'
+  if (isTyping) return
+  try {
+    windowPresenter.hideFloatingChatWindow()
+  } catch (err) {
+    console.error('[ERROR][App] Failed to hide floating chat window on ESC:', err)
+  }
+}

Additionally required (outside this hunk): declare the presenter once near your other presenters:

const windowPresenter = usePresenter('windowPresenter')

Recommended: register this ESC handler in the floating chat window’s renderer root instead of App.vue, to ensure ESC only closes when that window has focus and to avoid no-ops due to sender mismatch. If you prefer IPC, keep the handler in the floating window but call a typed presenter instead of raw IPC.

To confirm the current ESC listener runs in the floating window (it likely doesn’t), run:

🏁 Script executed:

#!/bin/bash
# 1) Find the FloatingChatWindow implementation and see what it loads
fd -t f -a FloatingChatWindow . | while read -r f; do
  echo "=== $f ==="
  rg -n "class FloatingChatWindow|load(File|URL)|index\.html" -A 5 -B 5 "$f"
done

# 2) Check if any renderer other than App.vue registers the ESC listener
rg -n "addEventListener\\(['\"]keydown['\"].*handleEscKey" -A 2 -B 2

# 3) Check whether App.vue is used by the floating renderer entry (often a different HTML/entry)
rg -n "renderer/.*/floating|floating.*index\\.html|Floating" -S src | sed -n '1,200p'

Length of output: 15467

🏁 Script executed:

#!/bin/bash
# 1) Search for 'close-floating-window' IPC channel usage
rg -n "close-floating-window" -S src

# 2) Find where ipcMain listens for raw IPC messages in main process
rg -n "ipcMain\.on" -S src/main
rg -n "ipcMain\.handle" -S src/main

Length of output: 871

🏁 Script executed:

#!/bin/bash
# Show handler implementation for 'close-floating-window' in windowPresenter
rg -n "ipcMain.on('close-floating-window'" -A5 -B5 src/main/presenter/windowPresenter/index.ts

Length of output: 198

🏁 Script executed:

#!/bin/bash
# Locate 'close-floating-window' handler in windowPresenter and show surrounding context
file="src/main/presenter/windowPresenter/index.ts"
line=$(grep -n "close-floating-window" "$file" | head -n1 | cut -d: -f1)
if [[ -n "$line" ]]; then
  start=$((line - 5))
  [[ $start -lt 1 ]] && start=1
  end=$((line + 5))
  sed -n "${start},${end}p" "$file"
else
  echo "Handler not found in $file"
fi

Length of output: 622

Use Presenter for ESC Handler & Scope to Floating Chat Window

The current ESC listener in App.vue sends a raw IPC message from the main shell window, which is ignored by the ipcMain handler in windowPresenter (it only accepts messages from the floating window’s WebContents). To fix this:

  • Replace ad-hoc IPC with the typed presenter API via usePresenter('windowPresenter').
  • Guard against event.isComposing, event.repeat, and typing contexts (input, textarea, contentEditable).
  • Register the handler only in the floating chat window’s renderer entry (under src/renderer/floating) so ESC only closes when that window is focused.

File: src/renderer/src/App.vue (L172–178), update:

-// 处理ESC键 - 关闭悬浮聊天窗口
-const handleEscKey = (event: KeyboardEvent) => {
-  if (event.key === 'Escape') {
-    window.electron.ipcRenderer.send('close-floating-window')
-  }
-}
+// Handle ESC key — close the floating chat window
+const handleEscKey = (event: KeyboardEvent) => {
+  if (event.key !== 'Escape' || event.isComposing || event.repeat) return
+  const active = document.activeElement as HTMLElement | null
+  const tag = active?.tagName?.toLowerCase()
+  const isTyping =
+    active?.isContentEditable ||
+    tag === 'input' ||
+    tag === 'textarea' ||
+    (active as HTMLInputElement)?.type === 'text'
+  if (isTyping) return
+  try {
+    windowPresenter.hideFloatingChatWindow()
+  } catch (err) {
+    console.error('[ERROR][App] Failed to hide floating chat window on ESC:', err)
+  }
+}

And near your other presenters, add:

const windowPresenter = usePresenter('windowPresenter')
🤖 Prompt for AI Agents 
In src/renderer/src/App.vue around lines 172–178 the ESC handler sends a raw IPC
event from the main shell window which is ignored by the floating window
presenter; replace this with the typed presenter API by calling
usePresenter('windowPresenter') near your other presenters and invoke the
presenter's close method instead of sending raw ipc messages; add guards to the
keydown handler to return early if event.isComposing, event.repeat, or if the
active element is an input, textarea, or contentEditable to avoid interfering
with typing; and remove this global registration from the main shell — register
the handler only in the floating chat window renderer entry
(src/renderer/floating) so ESC only closes the floating window when it is
focused.

getInitComplete()

onMounted(() => {
Expand All @@ -179,6 +186,8 @@ onMounted(() => {
document.body.classList.add(themeStore.themeMode)
document.body.classList.add(settingsStore.fontSizeClass)

window.addEventListener('keydown', handleEscKey)

// 监听全局错误通知事件
window.electron.ipcRenderer.on(NOTIFICATION_EVENTS.SHOW_ERROR, (_event, error) => {
showErrorToast(error)
Expand Down Expand Up @@ -287,6 +296,8 @@ onBeforeUnmount(() => {
errorDisplayTimer.value = null
}

window.removeEventListener('keydown', handleEscKey)

// 移除快捷键事件监听
window.electron.ipcRenderer.removeAllListeners(SHORTCUT_EVENTS.ZOOM_IN)
window.electron.ipcRenderer.removeAllListeners(SHORTCUT_EVENTS.ZOOM_OUT)
Expand Down