feat: option to display selection tools next to input box to avoid blocking (#271)

src/_locales/en/main.json

@@ -113,5 +113,6 @@
   "API Url": "API Url",
   "Others": "Others",
   "API Modes": "API Modes",
-  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time"
+  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time",
+  "Display selection tools next to input box to avoid blocking": "Display selection tools next to input box to avoid blocking"
 }

src/_locales/zh-hans/main.json

@@ -113,5 +113,6 @@
   "API Url": "API地址",
   "Others": "其他",
   "API Modes": "API模式",
-  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "禁用网页版模式历史记录以获得更好的隐私保护, 但会导致对话在一段时间后不可用"
+  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "禁用网页版模式历史记录以获得更好的隐私保护, 但会导致对话在一段时间后不可用",
+  "Display selection tools next to input box to avoid blocking": "将选择浮动工具显示在输入框旁边以避免遮挡"
 }

src/_locales/zh-hant/main.json

@@ -113,5 +113,6 @@
   "API Url": "API網址",
   "Others": "其他",
   "API Modes": "API模式",
-  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "禁用網頁版模式歷史記錄以獲得更好的隱私保護, 但會導致對話在壹段時間後不可用"
+  "Disable web mode history for better privacy protection, but it will result in unavailable conversations after a period of time": "禁用網頁版模式歷史記錄以獲得更好的隱私保護, 但會導致對話在壹段時間後不可用",
+  "Display selection tools next to input box to avoid blocking": "將選擇浮動工具顯示在輸入框旁邊以避免遮擋"
 }

src/config/index.mjs

@@ -93,6 +93,7 @@ export const defaultConfig = {
   insertAtTop: isMobile(),
   lockWhenAnswer: false,
   autoRegenAfterSwitchModel: false,
+  selectionToolsNextToInputBox: false,
   alwaysPinWindow: false,
 
   apiKey: '', // openai ApiKey

src/content-script/index.jsx

@@ -135,23 +135,28 @@ async function prepareForSelectionTools() {
     if (toolbarContainer && selectionElement && toolbarContainer.contains(selectionElement)) return
 
     deleteToolbar()
-    setTimeout(() => {
+    setTimeout(async () => {
       const selection = window
         .getSelection()
         ?.toString()
         .trim()
         .replace(/^-+|-+$/g, '')
       if (selection) {
-        const inputElement = selectionElement.querySelector('input, textarea')
         let position
-        if (inputElement) {
-          position = getClientPosition(inputElement)
-          position = {
-            x: position.x + window.scrollX + inputElement.offsetWidth + 50,
-            y: e.pageY + 30,
+
+        const config = await getUserConfig()
+        if (!config.selectionToolsNextToInputBox) position = { x: e.pageX + 20, y: e.pageY + 20 }
+        else {
+          const inputElement = selectionElement.querySelector('input, textarea')
+          if (inputElement) {
+            position = getClientPosition(inputElement)
+            position = {
+              x: position.x + window.scrollX + inputElement.offsetWidth + 50,
+              y: e.pageY + 30,
+            }
+          } else {
+            position = { x: e.pageX + 20, y: e.pageY + 20 }
           }
-        } else {
-          position = { x: e.pageX + 20, y: e.pageY + 20 }
         }
         toolbarContainer = createElementAtPosition(position.x, position.y)
         createSelectionTools(toolbarContainer, selection)

src/popup/sections/GeneralPart.jsx

@@ -316,6 +316,17 @@ export function GeneralPart({ config, updateConfig }) {
         />
         {t('Regenerate the answer after switching model')}
       </label>
+      <label>
+        <input
+          type="checkbox"
+          checked={config.selectionToolsNextToInputBox}
+          onChange={(e) => {
+            const checked = e.target.checked
+            updateConfig({ selectionToolsNextToInputBox: checked })
+          }}
+        />
+        {t('Display selection tools next to input box to avoid blocking')}
+      </label>
       <label>
         <input
           type="checkbox"