feat: add sanitizeText utility for clipboard data handling #843

Simon-He95 · 2025-09-03T10:01:48Z

Pull Request Description

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is.
*For example: I'm always frustrated when [...] *

Describe the solution you'd like
A clear and concise description of what you want to happen.

UI/UX changes for Desktop Application
If this PR introduces UI/UX changes, please describe them in detail.

Include screenshots or GIFs if applicable to visually demonstrate the changes.
Explain the reasoning behind the UI/UX decisions and how they improve the user experience of the desktop application.

Platform Compatibility Notes
If this PR has specific platform compatibility considerations (Windows, macOS, Linux), please describe them here.

Are there any platform-specific behaviors or code adjustments?
Have you tested on all relevant platforms?

Additional context
Add any other context about the pull request here.

Pull Request Description (中文)

你的功能请求是否与某个问题有关？请描述一下。
请对问题进行清晰扼要的描述。
*例如：我增加了 [...] 的功能 *

请描述你希望的解决方案
请对你希望实现的效果进行清晰扼要的描述。

桌面应用程序的 UI/UX 更改
如果此 PR 引入了 UI/UX 更改，请详细描述它们。

如果适用，请包含屏幕截图或 GIF 以直观地演示更改。
解释 UI/UX 决策背后的原因，以及它们如何改善桌面应用程序的用户体验。

平台兼容性注意事项
如果此 PR 具有特定的平台兼容性考虑因素（Windows、macOS、Linux），请在此处描述。

是否有任何平台特定的行为或代码调整？
你是否已在所有相关平台上进行过测试？

附加背景
在此处添加关于此 Pull Request 的任何其他背景信息。

Summary by CodeRabbit

New Features
- Paste images and files directly into chat; images get thumbnails and files are queued for upload automatically.
Improvements
- Pasted text is sanitized to remove hidden/control characters and normalize Unicode for cleaner, safer input.
- Seamless insertion at cursor or replacement of selected text, keeping the input in sync.
Bug Fixes
- Prevents duplicate paste processing that could cause repeated content or actions.
- More robust clipboard handling across text and files, reducing errors during paste operations.

coderabbitai · 2025-09-03T10:01:55Z

Walkthrough

Implements capture-phase paste handling in ChatInput.vue to sanitize text and process clipboard files before TipTap insertion. Adds a sanitizeText utility. Integrates sanitized insertion, file parsing (images and others), selection syncing, event deduplication, and cleanup of event listeners.

Changes

Cohort / File(s)	Summary
Chat input paste handling `src/renderer/src/components/ChatInput.vue`	Adds capture-phase paste listener with dedup guard; sanitizes plain text before insertion; processes clipboard files (images to base64+temp file with thumbnail; other files with mime resolution); updates selectedFiles and emits file-upload; preserves non-captured paste path; mounts/unmounts listener safely.
Text sanitization utility `src/renderer/src/lib/sanitizeText.ts`	Introduces sanitizeText(s, maxLen?) removing control chars and zero-width/soft hyphen, normalizing Unicode (NFD→remove marks→NFC with fallback), and optional truncation with defensive feature detection.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant B as Browser
  participant CI as ChatInput.vue
  participant E as TipTap Editor
  participant S as sanitizeText
  participant FS as File System

  U->>B: Paste (Ctrl+V / Cmd+V)
  B-->>CI: paste (capture phase)
  alt Event already handled (_deepchatHandled)
    CI-->>B: Ignore event
  else Clipboard has files
    CI->>B: preventDefault()
    CI->>CI: Parse files
    alt Image file
      CI->>FS: Convert to base64 & write temp file
      FS-->>CI: Temp path
      CI->>CI: Build MessageFile + thumbnail
    else Other file
      CI->>CI: Resolve path & mime
      CI->>CI: Build FileInfo
    end
    CI->>CI: Push to selectedFiles
    CI-->>B: Emit file-upload (if any)
  else Plain text
    CI->>B: preventDefault()
    CI->>S: sanitizeText(clipboardText, maxLen?)
    S-->>CI: sanitizedText
    CI->>E: insertContentAt(selection|cursor, sanitizedText)
    CI->>CI: Sync inputText
  end
  note over CI,E: TipTap default paste path remains for non-captured flows

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

I nibble keys with careful haste,
Catching paste before it’s paste—
Sweep the ghosts between the bytes,
Trim their cloaks of zero-width whites.
Images hop to temp burrows snug,
Files line up—thump, thump, smug.
Clean chat fields; a rabbit’s hug.

✨ Finishing Touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

coderabbitai

Actionable comments posted: 4

🧹 Nitpick comments (6)

src/renderer/src/lib/sanitizeText.ts (3)

1-1: Add explicit return type for clarity and stricter typing

Be explicit on public util return types.

Apply this diff:
-export function sanitizeText(s: string | null | undefined, maxLen?: number) {
+export function sanitizeText(s: string | null | undefined, maxLen?: number): string {
24-26: Truncate without splitting surrogate pairs/grapheme clusters

slice(0, maxLen) can split emoji/surrogates. Use code-point or grapheme-aware truncation.

Apply this diff:
-  if (typeof maxLen === 'number' && isFinite(maxLen) && maxLen >= 0 && out.length > maxLen) {
-    out = out.slice(0, maxLen)
-  }
+  if (typeof maxLen === 'number' && isFinite(maxLen) && maxLen >= 0 && out.length > maxLen) {
+    // code point–safe truncation
+    out = Array.from(out).slice(0, maxLen).join('')
+  }
6-6: Silence control-character regex lint or replace with a predicate

OxLint/Biome often flag control chars in regex. Either suppress at rule-level with the tool you use, or replace with a predicate approach. Current behavior is correct; failing lint can block CI.

Option A (keep regex; suppress tooling near-line):
-  // eslint-disable-next-line no-control-regex
+  // oxlint-disable-next-line suspicious/noControlCharactersInRegex
Option B (predicate):
-  out = out.replace(/[\x00-\x08\x0B\x0C\x0E-\x1F\x7F]/g, '')
+  out = out.replace(/[\x00-\x1F\x7F]/g, (c) => (c === '\n' || c === '\r' || c === '\t' ? c : ''))

src/renderer/src/components/ChatInput.vue (3)

1103-1111: Cleanup: remove custom window and document listeners on unmount

The visibilitychange and context-menu-ask-ai listeners are never removed; add cleanup to avoid leaks.

Example patch (add handler refs and remove):

 onMounted(() => {
+  const onAskAI = (e: any) => {
+    inputText.value = e.detail
+    editor.commands.setContent(e.detail)
+    editor.commands.focus()
+  }
+  const onVisibility = () => {
+    if (!document.hidden) {
+      setTimeout(() => {
+        restoreFocus()
+      }, 100)
+    }
+  }
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  window.addEventListener('context-menu-ask-ai', (e: any) => {
-    inputText.value = e.detail
-    editor.commands.setContent(e.detail)
-    editor.commands.focus()
-  })
+  window.addEventListener('context-menu-ask-ai', onAskAI)
-  document.addEventListener('visibilitychange', () => {
-    if (!document.hidden) {
-      setTimeout(() => {
-        restoreFocus()
-      }, 100)
-    }
-  })
+  document.addEventListener('visibilitychange', onVisibility)
+  ;(window as any)._deepchatListeners = { onAskAI, onVisibility }
 })
 
 onUnmounted(() => {
   stopRateLimitPolling()
   window.electron.ipcRenderer.removeAllListeners(RATE_LIMIT_EVENTS.CONFIG_UPDATED)
   window.electron.ipcRenderer.removeAllListeners(RATE_LIMIT_EVENTS.REQUEST_EXECUTED)
   window.electron.ipcRenderer.removeAllListeners(RATE_LIMIT_EVENTS.REQUEST_QUEUED)
   // Remove capture-phase paste listener
   try {
     if (editorPasteHandler && editor && editor.view && editor.view.dom) {
       editor.view.dom.removeEventListener('paste', editorPasteHandler as EventListener, true)
       editorPasteHandler = null
     }
   } catch (err) {
     console.warn('Failed to remove editor paste handler', err)
   }
+  try {
+    const l = (window as any)._deepchatListeners
+    if (l) {
+      window.removeEventListener('context-menu-ask-ai', l.onAskAI)
+      document.removeEventListener('visibilitychange', l.onVisibility)
+      ;(window as any)._deepchatListeners = null
+    }
+  } catch (err) {
+    console.warn('Failed to remove global listeners', err)
+  }
 })

532-535: Logs and comments should be in English; prefer structured logs

Console messages are in Chinese and unstructured. Per guidelines, use English and structured logs (level, context). Consider a small logger wrapper.

Example:

-        console.error('文件处理失败:', error)
+        console.error('[ERROR] paste:file-process-failed', { file: file.name, error })

Also applies to: 558-559, 934-935

1068-1075: Optional: enforce a sane max paste length

Large pastes can freeze the editor. Consider a maxLen (e.g., 50_000 code points) and show a toast when truncating.

Example:

-            const clean = sanitizeText(text)
+            const MAX_PASTE = 50_000
+            const clean = sanitizeText(text, MAX_PASTE)
+            if (Array.from(text).length > MAX_PASTE) {
+              toast({ title: t('chat.input.pasteTruncatedTitle'), description: t('chat.input.pasteTruncatedDesc', { max: MAX_PASTE }) })
+            }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

MCP integration is disabled by default for public repositories
Jira integration is disabled by default for public repositories
Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 774ee4b and 48d4d47.

📒 Files selected for processing (2)

src/renderer/src/components/ChatInput.vue (4 hunks)
src/renderer/src/lib/sanitizeText.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (13)

**/*.{js,jsx,ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

**/*.{js,jsx,ts,tsx}: 使用 OxLint 进行代码检查
Log和注释使用英文书写

Files:

src/renderer/src/lib/sanitizeText.ts

src/{main,renderer}/**/*.ts

📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)

src/{main,renderer}/**/*.ts: Use context isolation for improved security
Implement proper inter-process communication (IPC) patterns
Optimize application startup time with lazy loading
Implement proper error handling and logging for debugging

Files:

src/renderer/src/lib/sanitizeText.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/error-logging.mdc)

**/*.{ts,tsx}: 始终使用 try-catch 处理可能的错误
提供有意义的错误信息
记录详细的错误日志
优雅降级处理
日志应包含时间戳、日志级别、错误代码、错误描述、堆栈跟踪（如适用）、相关上下文信息
日志级别应包括 ERROR、WARN、INFO、DEBUG
不要吞掉错误
提供用户友好的错误信息
实现错误重试机制
避免记录敏感信息
使用结构化日志
设置适当的日志级别

Enable and adhere to strict TypeScript type checking across the codebase

Files:

src/renderer/src/lib/sanitizeText.ts

src/renderer/src/**/*

📄 CodeRabbit inference engine (.cursor/rules/i18n.mdc)

src/renderer/src/**/*: All user-facing strings must use i18n keys (avoid hardcoded user-visible text in code)
Use the 'vue-i18n' framework for all internationalization in the renderer
Ensure all user-visible text in the renderer uses the translation system

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/**/*.{vue,ts,js,tsx,jsx}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

渲染进程代码放在 src/renderer

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

src/renderer/src/**/*.{vue,ts,tsx,js,jsx}: Use the Composition API for better code organization and reusability
Implement proper state management with Pinia
Utilize Vue Router for navigation and route management
Leverage Vue's built-in reactivity system for efficient data handling

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError).
Use TypeScript for all code; prefer types over interfaces.
Avoid enums; use const objects instead.
Use arrow functions for methods and computed properties.
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements.

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/**/*.{vue,ts}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Implement lazy loading for routes and components.

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching.
Implement SEO best practices using Nuxt's useHead and useSeoMeta.

Use Pinia for frontend state management

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Write logs and comments in English

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/src/**

📄 CodeRabbit inference engine (CLAUDE.md)

Place full application UI functionality (tab content) under src/renderer/src/ organized by feature

Files:

src/renderer/src/lib/sanitizeText.ts
src/renderer/src/components/ChatInput.vue

src/renderer/src/**/*.vue

📄 CodeRabbit inference engine (.cursor/rules/vue-best-practices.mdc)

Use scoped styles to prevent CSS conflicts between components

Files:

src/renderer/src/components/ChatInput.vue

src/renderer/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/**/*.vue: Use Vue 3 Composition API for all Vue components
Use Tailwind CSS with scoped styles for component styling
When creating new UI components, use Composition API with proper TypeScript typing, ensure responsive design (Tailwind), and include error/loading states

Files:

src/renderer/src/components/ChatInput.vue

🪛 Biome (2.1.2)

src/renderer/src/lib/sanitizeText.ts