Add replace-with-answer button to selection tools

src/_locales/de/main.json

@@ -85,6 +85,8 @@
   "Confirm": "Bestätigen",
   "Clear Conversation": "Konversation löschen",
   "Retry": "Erneut versuchen",
+  "Replace Selection": "Auswahl ersetzen",
+  "Replace Failed": "Ersetzen fehlgeschlagen",
   "Exceeded maximum context length": "Maximale Kontextlänge überschritten, bitte Konversation löschen und erneut versuchen",
   "Regenerate the answer after switching model": "Antwort nach dem Wechseln des Modells neu generieren",
   "Pin": "Anheften",

src/_locales/en/main.json

@@ -92,6 +92,8 @@
   "Confirm": "Confirm",
   "Clear Conversation": "Clear Conversation",
   "Retry": "Retry",
+  "Replace Selection": "Replace Selection",
+  "Replace Failed": "Replace Failed",
   "Exceeded maximum context length": "Exceeded maximum context length, please clear the conversation and try again",
   "Regenerate the answer after switching model": "Regenerate the answer after switching model",
   "Pin": "Pin",

src/_locales/es/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Confirmar",
   "Clear Conversation": "Borrar conversación",
   "Retry": "Reintentar",
+  "Replace Selection": "Reemplazar selección",
+  "Replace Failed": "Error al reemplazar",
   "Exceeded maximum context length": "Se superó la longitud máxima del contexto, borre la conversación y vuelva a intentarlo",
   "Regenerate the answer after switching model": "Regenerar la respuesta después de cambiar el modelo",
   "Pin": "Fijar",

src/_locales/fr/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Confirmer",
   "Clear Conversation": "Effacer la conversation",
   "Retry": "Réessayer",
+  "Replace Selection": "Remplacer la sélection",
+  "Replace Failed": "Échec du remplacement",
   "Exceeded maximum context length": "Dépassement de la longueur maximale de contexte, veuillez effacer la conversation et réessayer",
   "Regenerate the answer after switching model": "Régénérer la réponse après avoir changé de modèle",
   "Pin": "Épingler",

src/_locales/in/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Konfirmasi",
   "Clear Conversation": "Bersihkan Percakapan",
   "Retry": "Coba Lagi",
+  "Replace Selection": "Ganti Teks Terpilih",
+  "Replace Failed": "Gagal Mengganti",
   "Exceeded maximum context length": "Melampaui batas maksimum panjang konteks, harap bersihkan percakapan dan coba lagi",
   "Regenerate the answer after switching model": "Hasilkan kembali jawaban setelah beralih ke model lain",
   "Pin": "Sematkan",

src/_locales/it/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Conferma",
   "Clear Conversation": "Pulisci la conversazione",
   "Retry": "Riprova",
+  "Replace Selection": "Sostituisci selezione",
+  "Replace Failed": "Sostituzione non riuscita",
   "Exceeded maximum context length": "Lunghezza massima del contesto superata, si prega di pulire la conversazione e riprovare",
   "Regenerate the answer after switching model": "Rigenerare la risposta dopo aver cambiato il modello",
   "Pin": "Fissa",

src/_locales/ja/main.json

@@ -83,6 +83,8 @@
   "Confirm": "確認",
   "Clear Conversation": "会話をクリア",
   "Retry": "再試行",
+  "Replace Selection": "選択範囲を置換",
+  "Replace Failed": "置換に失敗しました",
   "Exceeded maximum context length": "最大コンテキスト長を超えました。会話をクリアして再試行してください",
   "Regenerate the answer after switching model": "モデルを切り替えた後に回答を再生成",
   "Pin": "ピン留め",

src/_locales/ko/main.json

@@ -83,6 +83,8 @@
   "Confirm": "확인",
   "Clear Conversation": "대화 내용 지우기",
   "Retry": "재시도",
+  "Replace Selection": "선택 영역 바꾸기",
+  "Replace Failed": "바꾸기 실패",
   "Exceeded maximum context length": "최대 컨텍스트 길이를 초과하였습니다. 대화 내용을 지우고 다시 시도해주세요.",
   "Regenerate the answer after switching model": "모델 전환 후 대답 다시 생성",
   "Pin": "고정",

src/_locales/pt/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Confirmar",
   "Clear Conversation": "Limpar Conversa",
   "Retry": "Tentar novamente",
+  "Replace Selection": "Substituir seleção",
+  "Replace Failed": "Falha ao substituir",
   "Exceeded maximum context length": "Ultrapassou o comprimento máximo do contexto. Limpe a conversa e tente novamente",
   "Regenerate the answer after switching model": "Regenerar a resposta após trocar o modelo",
   "Pin": "Fixar",

src/_locales/ru/main.json

@@ -91,6 +91,8 @@
   "Confirm": "Подтверждение",
   "Clear Conversation": "Очистить беседу",
   "Retry": "Повторить",
+  "Replace Selection": "Заменить выделенное",
+  "Replace Failed": "Не удалось заменить",
   "Exceeded maximum context length": "Превышена максимальная длина контекста, очистите беседу и повторите попытку",
   "Regenerate the answer after switching model": "Генерировать ответ после смены модели",
   "Pin": "Закрепить",

src/_locales/tr/main.json

@@ -83,6 +83,8 @@
   "Confirm": "Onayla",
   "Clear Conversation": "Konuşmayı Temizle",
   "Retry": "Tekrar Dene",
+  "Replace Selection": "Seçimi Değiştir",
+  "Replace Failed": "Değiştirme Başarısız",
   "Exceeded maximum context length": "Maksimum bağlam uzunluğu aşıldı",
   "Regenerate the answer after switching model": "Modeli değiştirdikten sonra cevabı yeniden oluştur",
   "Pin": "Sabitle",

src/_locales/zh-hans/main.json

@@ -86,6 +86,8 @@
   "Confirm": "确认",
   "Clear Conversation": "清理对话",
   "Retry": "重试",
+  "Replace Selection": "替换选中文本",
+  "Replace Failed": "替换失败",
   "Exceeded maximum context length": "超出最大上下文长度, 请清理对话并重试",
   "Regenerate the answer after switching model": "快捷切换模型时自动重新生成回答",
   "Pin": "固定侧边",

src/_locales/zh-hant/main.json

@@ -86,6 +86,8 @@
   "Confirm": "確認",
   "Clear Conversation": "清除對話",
   "Retry": "重試",
+  "Replace Selection": "取代選取文字",
+  "Replace Failed": "取代失敗",
   "Exceeded maximum context length": "超出最大上下文長度，請清除對話並重試",
   "Regenerate the answer after switching model": "切換模型後自動重新產生回答",
   "Pin": "固定側邊",

src/components/ConversationCard/index.jsx

@@ -583,6 +583,11 @@ function ConversationCard(props) {
             type={data.type}
             descName={data.type === 'answer' && currentAiName}
             onRetry={idx === conversationItemData.length - 1 ? retryFn : null}
+            onReplace={
+              data.type === 'answer' && data.done && props.onReplaceContent
+                ? () => props.onReplaceContent(data.content.replace(/\n<hr\/>$/, ''))
+                : null
+            }
           />
         ))}
       </div>
@@ -641,6 +646,7 @@ ConversationCard.propTypes = {
   session: PropTypes.object.isRequired,
   question: PropTypes.string,
   onUpdate: PropTypes.func,
+  onReplaceContent: PropTypes.func,
   draggable: PropTypes.bool,
   closeable: PropTypes.bool,
   onClose: PropTypes.func,

src/components/ConversationItem/index.jsx

@@ -2,6 +2,7 @@ import { memo, useState } from 'react'
 import { ChevronDownIcon, XCircleIcon, SyncIcon } from '@primer/octicons-react'
 import CopyButton from '../CopyButton'
 import ReadButton from '../ReadButton'
+import ReplaceButton from '../ReplaceButton'
 import PropTypes from 'prop-types'
 import MarkdownRender from '../MarkdownRender/markdown.jsx'
 import { useTranslation } from 'react-i18next'
@@ -16,7 +17,7 @@ AnswerTitle.propTypes = {
   descName: PropTypes.string,
 }
 
-export function ConversationItem({ type, content, descName, onRetry }) {
+export function ConversationItem({ type, content, descName, onRetry, onReplace }) {
   const { t } = useTranslation()
   const [collapsed, setCollapsed] = useState(false)
 
@@ -62,6 +63,7 @@ export function ConversationItem({ type, content, descName, onRetry }) {
                   <SyncIcon size={14} />
                 </span>
               )}
+              {descName && onReplace && <ReplaceButton onReplace={onReplace} size={14} />}
               {descName && (
                 <CopyButton contentFn={() => content.replace(/\n<hr\/>$/, '')} size={14} />
               )}
@@ -130,6 +132,7 @@ ConversationItem.propTypes = {
   content: PropTypes.string.isRequired,
   descName: PropTypes.string,
   onRetry: PropTypes.func,
+  onReplace: PropTypes.func,
 }
 
 export default memo(ConversationItem)

src/components/FloatingToolbar/index.jsx

@@ -2,7 +2,12 @@ import { cloneElement, useCallback, useEffect, useState } from 'react'
 import ConversationCard from '../ConversationCard'
 import PropTypes from 'prop-types'
 import { config as toolsConfig } from '../../content-script/selection-tools'
-import { getClientPosition, isMobile, setElementPositionInViewport } from '../../utils'
+import {
+  getClientPosition,
+  isMobile,
+  replaceCapturedSelection,
+  setElementPositionInViewport,
+} from '../../utils'
 import Draggable from 'react-draggable'
 import { useClampWindowSize } from '../../hooks/use-clamp-window-size'
 import { useTranslation } from 'react-i18next'
@@ -106,6 +111,11 @@ function FloatingToolbar(props) {
                 dockable={props.dockable}
                 onDock={onDock}
                 onUpdate={onUpdate}
+                onReplaceContent={
+                  props.capturedSelection
+                    ? (content) => replaceCapturedSelection(props.capturedSelection, content)
+                    : null
+                }
                 waitForTrigger={prompt && !triggered && !selection}
               />
             </div>
@@ -168,6 +178,7 @@ FloatingToolbar.propTypes = {
   closeable: PropTypes.bool,
   dockable: PropTypes.bool,
   prompt: PropTypes.string,
+  capturedSelection: PropTypes.object,
 }
 
 export default FloatingToolbar

src/components/ReplaceButton/index.jsx

@@ -0,0 +1,49 @@
+import { useEffect, useRef, useState } from 'react'
+import { CheckIcon, ReplyIcon, XIcon } from '@primer/octicons-react'
+import PropTypes from 'prop-types'
+import { useTranslation } from 'react-i18next'
+
+ReplaceButton.propTypes = {
+  onReplace: PropTypes.func.isRequired,
+  size: PropTypes.number.isRequired,
+  className: PropTypes.string,
+}
+
+function ReplaceButton({ className, onReplace, size }) {
+  const { t } = useTranslation()
+  const [status, setStatus] = useState('idle')
+  const timeoutRef = useRef(null)
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    }
+  }, [])
+
+  const onClick = () => {
+    setStatus(onReplace() ? 'replaced' : 'failed')
+    if (timeoutRef.current) clearTimeout(timeoutRef.current)
+    timeoutRef.current = setTimeout(() => {
+      setStatus('idle')
+      timeoutRef.current = null
+    }, 800)
+  }
+
+  return (
+    <span
+      title={status === 'failed' ? t('Replace Failed') : t('Replace Selection')}
+      className={`gpt-util-icon ${className ? className : ''}`}
+      onClick={onClick}
+    >
+      {status === 'replaced' ? (
+        <CheckIcon size={size} />
+      ) : status === 'failed' ? (
+        <XIcon size={size} />
+      ) : (
+        <ReplyIcon size={size} />
+      )}
+    </span>
+  )
+}
+
+export default ReplaceButton

src/content-script/index.jsx

@@ -14,6 +14,7 @@ import {
   setUserConfig,
 } from '../config/index.mjs'
 import {
+  captureEditableSelection,
   createElementAtPosition,
   cropText,
   endsWithQuestionMark,
@@ -236,12 +237,14 @@ const deleteToolbar = () => {
   }
 }
 
-const createSelectionTools = async (toolbarContainerElement, selection) => {
+const createSelectionTools = async (toolbarContainerElement, selection, capturedSelection) => {
   console.debug(
     '[content] createSelectionTools called with selection:',
     selection,
-    'and container:',
+    'container:',
     toolbarContainerElement,
+    'captured editable selection kind:',
+    capturedSelection?.kind,
   )
   try {
     toolbarContainerElement.className = 'chatgptbox-toolbar-container'
@@ -256,6 +259,7 @@ const createSelectionTools = async (toolbarContainerElement, selection) => {
         selection={selection}
         container={toolbarContainerElement}
         dockable={true}
+        capturedSelection={capturedSelection}
       />,
       toolbarContainerElement,
     )
@@ -291,11 +295,17 @@ async function prepareForSelectionTools() {
       deleteToolbar()
       setTimeout(async () => {
         try {
-          const selection = window
-            .getSelection()
-            ?.toString()
-            .trim()
-            .replace(/^-+|-+$/g, '')
+          const capturedSelection = captureEditableSelection()
+          const selection =
+            window
+              .getSelection()
+              ?.toString()
+              .trim()
+              .replace(/^-+|-+$/g, '') ||
+            // Firefox does not expose text field selections via window.getSelection()
+            (capturedSelection?.kind === 'text-field'
+              ? capturedSelection.text.trim().replace(/^-+|-+$/g, '')
+              : '')
           if (selection) {
             console.debug('[content] Text selected. Length:', selection.length)
             let position
@@ -325,7 +335,7 @@ async function prepareForSelectionTools() {
             }
             console.debug('[content] Toolbar position:', position)
             toolbarContainer = createElementAtPosition(position.x, position.y)
-            await createSelectionTools(toolbarContainer, selection)
+            await createSelectionTools(toolbarContainer, selection, capturedSelection)
           } else {
             console.debug('[content] No text selected on mouseup.')
           }
@@ -403,16 +413,22 @@ async function prepareForSelectionToolsTouch() {
       deleteToolbar()
       setTimeout(async () => {
         try {
-          const selection = window
-            .getSelection()
-            ?.toString()
-            .trim()
-            .replace(/^-+|-+$/g, '')
+          const capturedSelection = captureEditableSelection()
+          const selection =
+            window
+              .getSelection()
+              ?.toString()
+              .trim()
+              .replace(/^-+|-+$/g, '') ||
+            // Firefox does not expose text field selections via window.getSelection()
+            (capturedSelection?.kind === 'text-field'
+              ? capturedSelection.text.trim().replace(/^-+|-+$/g, '')
+              : '')
           if (selection) {
             console.debug('[content] Text selected via touch:', selection)
             const touch = e.changedTouches[0]
             toolbarContainer = createElementAtPosition(touch.pageX + 20, touch.pageY + 20)
-            await createSelectionTools(toolbarContainer, selection)
+            await createSelectionTools(toolbarContainer, selection, capturedSelection)
           } else {
             console.debug('[content] No text selected on touchend.')
           }
@@ -443,7 +459,7 @@ async function prepareForSelectionToolsTouch() {
   })
 }
 
-let menuX, menuY
+let menuX, menuY, menuCapturedSelection
 let rightClickMenuInitialized = false
 
 async function prepareForRightClickMenu() {
@@ -456,6 +472,9 @@ async function prepareForRightClickMenu() {
   document.addEventListener('contextmenu', (e) => {
     menuX = e.clientX
     menuY = e.clientY
+    // the menu click arrives asynchronously via the background script, so the
+    // editable selection has to be captured while it still exists
+    menuCapturedSelection = captureEditableSelection()
     console.debug(`[content] Context menu opened at X: ${menuX}, Y: ${menuY}`)
   })
 
@@ -465,6 +484,10 @@ async function prepareForRightClickMenu() {
       try {
         const data = message.data
         let prompt = ''
+        // only selection tools operate on the selected text; menu tools work
+        // on the whole page and must not offer replacing the selection
+        const capturedSelection = data.itemId in toolsConfig ? menuCapturedSelection : null
+        menuCapturedSelection = null
         if (data.itemId in toolsConfig) {
           console.debug('[content] Generating prompt from toolsConfig for item:', data.itemId)
           prompt = await toolsConfig[data.itemId].genPrompt(data.selectionText)
@@ -507,6 +530,7 @@ async function prepareForRightClickMenu() {
             triggered={true}
             closeable={true}
             prompt={prompt}
+            capturedSelection={capturedSelection}
           />,
           container,
         )

src/utils/index.mjs

@@ -15,6 +15,7 @@ export * from './limited-fetch'
 export * from './open-url'
 export * from './parse-float-with-clamp'
 export * from './parse-int-with-clamp'
+export * from './selection-replace'
 export * from './set-element-position-in-viewport'
 export * from './eventsource-parser.mjs'
 export * from './update-ref-height'