feat: support right-click actions after text selection (#624)

ayangweb · web-flow · commit 9eac8f8a8e08 · 2025-06-06T16:43:27.000+08:00
* feat: support right-click actions after text selection

* docs: update changelog

* feat: support for selecting messages sent by users
diff --git a/docs/content.en/docs/release-notes/_index.md b/docs/content.en/docs/release-notes/_index.md
@@ -16,6 +16,7 @@ Information about release notes of Coco Server is provided here.
 - feat: ai overview support is enabled with shortcut #597
 - feat: add key monitoring during reset #615
 - feat: calculator extension add description #623
+- feat: support right-click actions after text selection #624
 
 ### 🐛 Bug fix
 
diff --git a/src/components/ChatMessage/UserMessage.tsx b/src/components/ChatMessage/UserMessage.tsx
@@ -24,7 +24,7 @@ export const UserMessage = ({ messageContent }: UserMessageProps) => {
         <CopyButton textToCopy={messageContent} />
       </div>
       <div
-        className="px-3 py-2 bg-white dark:bg-[#202126] rounded-xl border border-black/12 dark:border-black/15 font-normal text-sm text-[#333333] dark:text-[#D8D8D8] cursor-pointer select-none"
+        className="px-3 py-2 bg-white dark:bg-[#202126] rounded-xl border border-black/12 dark:border-black/15 font-normal text-sm text-[#333333] dark:text-[#D8D8D8] cursor-pointer user-select-text"
         onDoubleClick={(e) => {
           const selection = window.getSelection();
           const range = document.createRange();
diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx
@@ -1,7 +1,12 @@
 import { useEffect } from "react";
 import { Outlet, useLocation } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { useAsyncEffect, useEventListener, useMount } from "ahooks";
+import {
+  useAsyncEffect,
+  useEventListener,
+  useMount,
+  useTextSelection,
+} from "ahooks";
 import { isArray, isString } from "lodash-es";
 import { error } from "@tauri-apps/plugin-log";
 
@@ -83,6 +88,7 @@ export default function Layout() {
   const { i18n } = useTranslation();
   const language = useAppStore((state) => state.language);
   const setLanguage = useAppStore((state) => state.setLanguage);
+  const { text: selectionText } = useTextSelection();
 
   useEffect(() => {
     if (language) {
@@ -108,7 +114,7 @@ export default function Layout() {
 
   // Disable right-click for production environment
   useEventListener("contextmenu", (event) => {
-    if (import.meta.env.DEV) return;
+    if (import.meta.env.DEV || selectionText) return;
 
     event.preventDefault();
   });
