Merge pull request #707 from n4ze3m/next

n4ze3m · web-flow · commit 75a66cbe504d · 2025-09-07T20:59:44.000+05:30
v1.5.30
diff --git a/README.md b/README.md
@@ -123,6 +123,7 @@ Page Assist supports various keyboard shortcuts to enhance your productivity:
 | New Chat | `Ctrl+Shift+O` | Starts a new chat conversation |
 | Toggle Sidebar | `Ctrl+B` | Opens/closes the chat history sidebar |
 | Focus Textarea | `Shift+Esc` | Focuses the message input field |
+| Toggle Chat Mode | `Ctrl+E` | Toggles between normal chat and chat with current page |
 
 
 
diff --git a/docs/shortcuts.md b/docs/shortcuts.md
@@ -9,7 +9,16 @@ Page Assist supports the following shortcut keys:
 
 You can change the keyboard shortcuts from the extension settings on the Chrome Extension Management page.
 
-## Changing Keyboard Shortcuts
+## Application Shortcuts
+
+| Action | Shortcut | Description |
+|--------|----------|-------------|
+| New Chat | `Ctrl+Shift+O` | Starts a new chat conversation |
+| Toggle Sidebar | `Ctrl+B` | Opens/closes the chat history sidebar |
+| Focus Textarea | `Shift+Esc` | Focuses the message input field |
+| Toggle Chat Mode | `Ctrl+E` | Toggles between normal chat and chat with current page |
+
+## Changing Keyboard Shortcuts (Browser Specific)
 
 To change the keyboard shortcuts, follow these steps:
 
diff --git a/src/assets/locale/en/settings.json b/src/assets/locale/en/settings.json
@@ -72,6 +72,9 @@
       },
       "sidepanelTemporaryChat": {
         "label": "Enable Temporary Chat in SidePanel by default"
+      },
+      "removeReasoningTagFromCopy": {
+        "label": "Remove Reasoning Tag from Copied Text" 
       }
     },
     "sidepanelRag": {
diff --git a/src/components/Common/CodeBlock.tsx b/src/components/Common/CodeBlock.tsx
@@ -68,10 +68,20 @@ export const CodeBlock: FC<Props> = ({ language, value }) => {
     const code = previewValue || ""
     if ((language || "").toLowerCase() === "svg") {
       const hasSvgTag = /<svg[\s>]/i.test(code)
-      const svgMarkup = hasSvgTag
+      let svgMarkup = hasSvgTag
         ? code
         : `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>${code}</svg>`
-      return `<!doctype html><html><head><meta charset='utf-8'/><style>html,body{margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:#fff;height:100%;}</style></head><body>${svgMarkup}</body></html>`
+      
+      const hasWidthHeight = /\s(width|height)\s*=/.test(svgMarkup)
+      
+      if (!hasWidthHeight && hasSvgTag) {
+        svgMarkup = svgMarkup.replace(
+          /<svg([^>]*?)>/i,
+          '<svg$1 width="100%" height="100%" style="max-width: 100%; max-height: 100%;">'
+        )
+      }
+      
+      return `<!doctype html><html><head><meta charset='utf-8'/><style>html,body{margin:0;padding:0;display:flex;align-items:center;justify-content:center;background:#fff;height:100%;overflow:hidden;}svg{max-width:100%;max-height:100%;}</style></head><body>${svgMarkup}</body></html>`
     }
     return `<!doctype html><html><head><meta charset='utf-8'/></head><body>${code}</body></html>`
   }, [previewValue, language])
diff --git a/src/components/Layouts/MoreOptions.tsx b/src/components/Layouts/MoreOptions.tsx
@@ -96,8 +96,11 @@ export const MoreOptions = ({
           key: "copy-text",
           label: t("more.copy.asText"),
           icon: <FileText className="w-4 h-4" />,
-          onClick: () => {
-            navigator.clipboard.writeText(formatAsText(messages))
+          onClick: async () => {
+            await copyToClipboard({
+              text: formatAsText(messages),
+              formatted: false
+            })
             message.success(t("more.copy.success"))
           }
         },
@@ -113,16 +116,18 @@ export const MoreOptions = ({
               text: mkd,
               formatted: true
             })
-            // navigator.clipboard.writeText(formatAsMarkdown(messages))
             message.success(t("more.copy.success"))
           }
         },
         {
           key: "copy-markdown",
           label: t("more.copy.asMarkdown"),
           icon: <FileCode className="w-4 h-4" />,
-          onClick: () => {
-            navigator.clipboard.writeText(formatAsMarkdown(messages))
+          onClick: async () => {
+            await copyToClipboard({
+              text: formatAsMarkdown(messages),
+              formatted: false
+            })
             message.success(t("more.copy.success"))
           }
         }
diff --git a/src/components/Option/Settings/general-settings.tsx b/src/components/Option/Settings/general-settings.tsx
@@ -82,6 +82,9 @@ export const GeneralSettings = () => {
     false
   )
 
+  const [removeReasoningTagFromCopy, setRemoveReasoningTagFromCopy] =
+    useStorage("removeReasoningTagFromCopy", true)
+
   const { mode, toggleDarkMode } = useDarkMode()
   const { t } = useTranslation("settings")
   const { changeLocale, locale, supportLanguage } = useI18n()
@@ -349,6 +352,17 @@ export const GeneralSettings = () => {
         />
       </div>
 
+      <div className="flex flex-row justify-between">
+        <span className="text-gray-700 dark:text-neutral-50 ">
+          {t("generalSettings.settings.removeReasoningTagFromCopy.label")}
+        </span>
+
+        <Switch
+          checked={removeReasoningTagFromCopy}
+          onChange={(checked) => setRemoveReasoningTagFromCopy(checked)}
+        />
+      </div>
+
       <div className="flex flex-row justify-between">
         <span className="text-gray-700 dark:text-neutral-50 ">
           {t("generalSettings.settings.darkMode.label")}
diff --git a/src/components/Option/Settings/system-settings.tsx b/src/components/Option/Settings/system-settings.tsx
@@ -126,12 +126,12 @@ export const SystemSettings = () => {
         </h2>
         <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
       </div>
-      <div className="flex flex-row mb-3 justify-between items-center">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
         <span className="text-black dark:text-white font-medium">
           <BetaTag />
           {t("generalSettings.system.fontSize.label")}
         </span>
-        <div className="flex flex-row items-center gap-3">
+        <div className="flex flex-row items-center gap-3 justify-center sm:justify-end">
           <button
             onClick={decrease}
             className="bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-black px-3 py-1.5 rounded-lg transition-colors duration-200 font-medium text-sm">
@@ -148,8 +148,8 @@ export const SystemSettings = () => {
         </div>
       </div>
 
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           <BetaTag />
           {t("generalSettings.system.actionIcon.label")}
         </span>
@@ -165,14 +165,14 @@ export const SystemSettings = () => {
             }
           ]}
           value={actionIconClick}
-          className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+          className="w-full sm:w-[200px]"
           onChange={(value) => {
             setActionIconClick(value)
           }}
         />
       </div>
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           <BetaTag />
           {t("generalSettings.system.contextMenu.label")}
         </span>
@@ -188,15 +188,15 @@ export const SystemSettings = () => {
             }
           ]}
           value={contextMenuClick}
-          className="w-full mt-4 sm:mt-0 sm:w-[200px]"
+          className="w-full sm:w-[200px]"
           onChange={(value) => {
             setContextMenuClick(value)
           }}
         />
       </div>
       {isFireFox && !isFireFoxPrivateMode && (
-        <div className="flex flex-row mb-3 justify-between">
-          <span className="text-gray-700 dark:text-neutral-50 ">
+        <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+          <span className="text-gray-700 dark:text-neutral-50">
             <BetaTag />
             {t("generalSettings.system.firefoxPrivateModeSync.label", {
               defaultValue:
@@ -208,7 +208,7 @@ export const SystemSettings = () => {
               syncFirefoxData.mutate()
             }}
             disabled={syncFirefoxData.isPending}
-            className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer">
+            className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer w-full sm:w-auto">
             {syncFirefoxData.isPending ? (
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
             ) : (
@@ -219,30 +219,32 @@ export const SystemSettings = () => {
           </button>
         </div>
       )}
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           {t("generalSettings.system.webuiBtnSidePanel.label")}
         </span>
-        <Switch
+         <div>
+          <Switch
           checked={webuiBtnSidePanel}
           onChange={(checked) => {
             setWebuiBtnSidePanel(checked)
           }}
         />
+         </div>
       </div>
 
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           <BetaTag />
           {t("generalSettings.system.chatBackgroundImage.label")}
         </span>
-        <div className="flex items-center gap-2">
+        <div className="flex items-center gap-2 justify-center sm:justify-end">
           {chatBackgroundImage ? (
             <button
               onClick={() => {
                 setChatBackgroundImage(null)
               }}
-              className=" text-gray-800 dark:text-white">
+              className="text-gray-800 dark:text-white">
               <RotateCcw className="size-4" />
             </button>
           ) : null}
@@ -262,23 +264,23 @@ export const SystemSettings = () => {
         </div>
       </div>
 
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           {t("generalSettings.system.export.label")}
         </span>
         <button
           onClick={exportPageAssistData}
-          className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer">
+          className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer w-full sm:w-auto">
           {t("generalSettings.system.export.button")}
         </button>
       </div>
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           {t("generalSettings.system.import.label")}
         </span>
         <label
           htmlFor="import"
-          className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer flex items-center">
+          className="bg-gray-800 dark:bg-white text-white dark:text-gray-900 px-4 py-2 rounded-md cursor-pointer flex items-center justify-center w-full sm:w-auto">
           {importDataMutation.isPending ? (
             <>
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -301,8 +303,8 @@ export const SystemSettings = () => {
         />
       </div>
 
-      <div className="flex flex-row mb-3 justify-between">
-        <span className="text-gray-700 dark:text-neutral-50 ">
+      <div className="flex flex-col sm:flex-row mb-3 gap-3 sm:gap-0 sm:justify-between sm:items-center">
+        <span className="text-gray-700 dark:text-neutral-50">
           {t("generalSettings.system.deleteChatHistory.label")}
         </span>
 
@@ -328,7 +330,7 @@ export const SystemSettings = () => {
               }
             }
           }}
-          className="bg-red-500 dark:bg-red-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
+          className="bg-red-500 dark:bg-red-600 text-white dark:text-gray-200 px-4 py-2 rounded-md w-full sm:w-auto">
           {t("generalSettings.system.deleteChatHistory.button")}
         </button>
       </div>
diff --git a/src/hooks/keyboard/useKeyboardShortcuts.ts b/src/hooks/keyboard/useKeyboardShortcuts.ts
@@ -174,3 +174,35 @@ export const useSidebarShortcuts = (
     shortcuts
   }
 }
+
+/**
+ * Hook specifically for chat mode shortcuts
+ * @param toggleChatMode Function to toggle chat mode between normal and rag
+ * @param enabled Whether the shortcuts are enabled
+ */
+export const useChatModeShortcuts = (
+  toggleChatMode: () => void,
+  enabled: boolean = true
+) => {
+  const { shortcuts: configuredShortcuts } = useShortcutConfig()
+
+  const toggleChatModeAction = useCallback(() => {
+    toggleChatMode()
+  }, [toggleChatMode])
+
+  const shortcuts: KeyboardShortcutConfig[] = [
+    {
+      shortcut: configuredShortcuts.toggleChatMode,
+      action: toggleChatModeAction,
+      enabled,
+      description: 'Toggle chat with current page'
+    }
+  ]
+
+  useKeyboardShortcuts(shortcuts)
+
+  return {
+    toggleChatMode: toggleChatModeAction,
+    shortcuts
+  }
+}
diff --git a/src/hooks/keyboard/useShortcutConfig.ts b/src/hooks/keyboard/useShortcutConfig.ts
@@ -5,6 +5,7 @@ export interface ShortcutConfig {
   focusTextarea: KeyboardShortcut
   newChat: KeyboardShortcut
   toggleSidebar: KeyboardShortcut
+  toggleChatMode: KeyboardShortcut
 }
 
 export const defaultShortcuts: ShortcutConfig = {
@@ -26,6 +27,12 @@ export const defaultShortcuts: ShortcutConfig = {
     ctrlKey: true,
     preventDefault: true,
     stopPropagation: true
+  },
+  toggleChatMode: {
+    key: 'e',
+    ctrlKey: true,
+    preventDefault: true,
+    stopPropagation: true
   }
 }
 
diff --git a/src/routes/sidepanel-chat.tsx b/src/routes/sidepanel-chat.tsx
@@ -6,7 +6,11 @@ import {
 import useBackgroundMessage from "@/hooks/useBackgroundMessage"
 import { useMigration } from "@/hooks/useMigration"
 import { useSmartScroll } from "@/hooks/useSmartScroll"
-import { useChatShortcuts, useSidebarShortcuts } from "@/hooks/keyboard/useKeyboardShortcuts"
+import {
+  useChatShortcuts,
+  useSidebarShortcuts,
+  useChatModeShortcuts
+} from "@/hooks/keyboard/useKeyboardShortcuts"
 import { copilotResumeLastChat } from "@/services/app"
 import { Storage } from "@plasmohq/storage"
 import { useStorage } from "@plasmohq/storage/hook"
@@ -37,6 +41,7 @@ const SidepanelChat = () => {
     setMessages,
     selectedModel,
     defaultChatWithWebsite,
+    chatMode,
     setChatMode,
     setTemporaryChat,
     sidepanelTemporaryChat,
@@ -46,11 +51,16 @@ const SidepanelChat = () => {
     useSmartScroll(messages, streaming, 100)
 
   const toggleSidebar = () => {
-    setSidebarOpen(prev => !prev)
+    setSidebarOpen((prev) => !prev)
+  }
+
+  const toggleChatMode = () => {
+    setChatMode(chatMode === "rag" ? "normal" : "rag")
   }
 
   useChatShortcuts(clearChat, true)
   useSidebarShortcuts(toggleSidebar, true)
+  useChatModeShortcuts(toggleChatMode, true)
 
   const [chatBackgroundImage] = useStorage({
     key: "chatBackgroundImage",
@@ -165,7 +175,7 @@ const SidepanelChat = () => {
     <div className="flex h-full w-full">
       <main className="relative h-dvh w-full">
         <div className="relative z-20 w-full">
-          <SidepanelHeader 
+          <SidepanelHeader
             sidebarOpen={sidebarOpen}
             setSidebarOpen={setSidebarOpen}
           />
diff --git a/src/services/app.ts b/src/services/app.ts
diff --git a/src/utils/clipboard.ts b/src/utils/clipboard.ts
diff --git a/wxt.config.ts b/wxt.config.ts

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@ export interface ShortcutConfig {`
`5`	`5`	`focusTextarea: KeyboardShortcut`
`6`	`6`	`newChat: KeyboardShortcut`
`7`	`7`	`toggleSidebar: KeyboardShortcut`
	`8`	`+ toggleChatMode: KeyboardShortcut`
`8`	`9`	`}`
`9`	`10`
`10`	`11`	`export const defaultShortcuts: ShortcutConfig = {`
`@@ -26,6 +27,12 @@ export const defaultShortcuts: ShortcutConfig = {`
`26`	`27`	`ctrlKey: true,`
`27`	`28`	`preventDefault: true,`
`28`	`29`	`stopPropagation: true`
	`30`	`+ },`
	`31`	`+ toggleChatMode: {`
	`32`	`+ key: 'e',`
	`33`	`+ ctrlKey: true,`
	`34`	`+ preventDefault: true,`
	`35`	`+ stopPropagation: true`
`29`	`36`	`}`
`30`	`37`	`}`
`31`	`38`