feat: Add permission reload modal for Firefox and update localization strings

Author: NekoWings

entrypoints/sidepanel/components/Chat/CameraButton.vue

@@ -1,24 +1,32 @@
 <template>
-  <button
-    v-if="showButton"
-    :class="classNames(
-      'size-6 rounded-md flex items-center justify-center transition-colors',
-      isCapturing
-        ? 'cursor-wait opacity-50'
-        : 'hover:bg-bg-tertiary cursor-pointer'
-    )"
-    :disabled="isCapturing"
-    @click="handleCapture"
-  >
-    <IconCamera :class="classNames('size-6', hasCapturedPage ? 'text-accent-primary' : 'text-text-tertiary')" />
-  </button>
+  <div>
+    <button
+      v-if="showButton"
+      :class="classNames(
+        'size-6 rounded-md flex items-center justify-center transition-colors',
+        isCapturing
+          ? 'cursor-wait opacity-50'
+          : 'hover:bg-bg-tertiary cursor-pointer'
+      )"
+      :disabled="isCapturing"
+      @click="handleCapture"
+    >
+      <IconCamera :class="classNames('size-6', hasCapturedPage ? 'text-accent-primary' : 'text-text-tertiary')" />
+    </button>
+
+    <!-- Permission Reload Modal for Firefox -->
+    <Modal v-model="isShowPermissionReloadModal">
+      <PermissionReloadModal @close="isShowPermissionReloadModal = false" />
+    </Modal>
+  </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { browser } from 'wxt/browser'
 
 import IconCamera from '@/assets/icons/camera.svg?component'
+import Modal from '@/components/Modal.vue'
 import { CapturedPageAttachment, ContextAttachmentStorage } from '@/types/chat'
 import { useI18n } from '@/utils/i18n'
 import { generateRandomId } from '@/utils/id'
@@ -30,6 +38,7 @@ import { getUserConfig } from '@/utils/user-config'
 import { classNames } from '@/utils/vue/utils'
 
 import type AttachmentSelector from '../AttachmentSelector.vue'
+import PermissionReloadModal from './PermissionReloadModal.vue'
 
 const props = defineProps<{
   attachmentSelectorRef?: InstanceType<typeof AttachmentSelector>
@@ -41,6 +50,8 @@ const { t } = useI18n()
 
 const isCapturing = ref(false)
 const supportsVision = ref(false)
+const isFirefox = import.meta.env.FIREFOX
+const isShowPermissionReloadModal = ref(false)
 
 // Maximum number of images and screenshots allowed combined
 const MAX_IMAGE_COUNT = 5
@@ -121,6 +132,9 @@ const handleCapture = async () => {
   }
   catch (error) {
     logger.error('Failed to capture screenshot:', error)
+    if (isFirefox) {
+      isShowPermissionReloadModal.value = true
+    }
   }
   finally {
     isCapturing.value = false

entrypoints/sidepanel/components/Chat/PermissionReloadModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="bg-bg-primary text-text-primary py-6 px-6 rounded-md max-w-sm flex flex-col gap-4">
+    <!-- Title -->
+    <div class="font-bold text-base flex flex-row gap-2 items-center">
+      <IconCamera class="size-4 text-accent-primary" />
+      {{ t('chat.camera.permission_reload_title') }}
+    </div>
+
+    <!-- Description -->
+    <div class="text-text-secondary text-sm">
+      {{ t('chat.camera.permission_reload_description') }}
+    </div>
+
+    <!-- Divider -->
+    <Divider class="my-2" />
+
+    <!-- Buttons -->
+    <div class="flex gap-2 items-center justify-end">
+      <Button
+        variant="secondary"
+        class="p-2"
+        @click="handleClose"
+      >
+        {{ t('tooltips.close') }}
+      </Button>
+      <Button
+        variant="primary"
+        class="p-2"
+        @click="handleReload"
+      >
+        {{ t('chat.camera.reload_extension') }}
+      </Button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { browser } from 'wxt/browser'
+
+import IconCamera from '@/assets/icons/camera.svg?component'
+import Button from '@/components/ui/Button.vue'
+import Divider from '@/components/ui/Divider.vue'
+import { useI18n } from '@/utils/i18n'
+
+const emit = defineEmits<{
+  (e: 'close'): void
+}>()
+
+const { t } = useI18n()
+
+const handleClose = () => {
+  emit('close')
+}
+
+const handleReload = () => {
+  browser.runtime.reload()
+}
+</script>

locales/de.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "Suchen"
       }
+    },
+    "camera": {
+      "permission_reload_title": "Neustart erforderlich",
+      "permission_reload_description": "Nach der Genehmigung aktivieren Sie bitte die NativeMind-Erweiterung in Firefox erneut, um die Screenshot-Funktion zu aktivieren.",
+      "reload_extension": "Erweiterung neu laden"
     }
   },
   "chat_history": {

locales/en.json

@@ -277,6 +277,11 @@
         "captured_page_prefix": "Page Captured:"
       }
     },
+    "camera": {
+      "permission_reload_title": "Reload Required",
+      "permission_reload_description": "After granting permission, please re-enable the NativeMind extension in Firefox to enable the screenshot feature.",
+      "reload_extension": "Reload Extension"
+    },
     "prompt": {
       "summarize_page_content": {
         "title": "Summarize the page"

locales/es.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "Buscar"
       }
+    },
+    "camera": {
+      "permission_reload_title": "Recarga requerida",
+      "permission_reload_description": "Después de otorgar el permiso, vuelva a habilitar la extensión NativeMind en Firefox para habilitar la función de captura de pantalla.",
+      "reload_extension": "Recargar extensión"
     }
   },
   "chat_history": {

locales/fr.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "Recherche"
       }
+    },
+    "camera": {
+      "permission_reload_title": "Rechargement requis",
+      "permission_reload_description": "Après avoir accordé la permission, veuillez réactiver l'extension NativeMind dans Firefox pour activer la fonction de capture d'écran.",
+      "reload_extension": "Recharger l'extension"
     }
   },
   "chat_history": {

locales/id.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "Cari"
       }
+    },
+    "camera": {
+      "permission_reload_title": "Muat ulang diperlukan",
+      "permission_reload_description": "Setelah memberikan izin, silakan aktifkan kembali ekstensi NativeMind di Firefox untuk mengaktifkan fitur tangkapan layar.",
+      "reload_extension": "Muat ulang ekstensi"
     }
   },
   "chat_history": {

locales/ja.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "検索"
       }
+    },
+    "camera": {
+      "permission_reload_title": "再読み込みが必要です",
+      "permission_reload_description": "権限を付与した後、スクリーンショット機能を有効にするためにFirefoxでNativeMind拡張機能を再度有効にしてください。",
+      "reload_extension": "拡張機能を再読み込み"
     }
   },
   "chat_history": {

locales/ko.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "검색"
       }
+    },
+    "camera": {
+      "permission_reload_title": "다시 로드 필요",
+      "permission_reload_description": "권한을 부여한 후 Firefox에서 NativeMind 확장 프로그램을 다시 활성화하여 스크린샷 기능을 활성화하세요.",
+      "reload_extension": "확장 프로그램 다시 로드"
     }
   },
   "chat_history": {

locales/pt.json

@@ -88,6 +88,11 @@
       "online_search": {
         "title": "Pesquisar"
       }
+    },
+    "camera": {
+      "permission_reload_title": "Recarga necessária",
+      "permission_reload_description": "Após conceder permissão, reative a extensão NativeMind no Firefox para ativar a função de captura de tela.",
+      "reload_extension": "Recarregar extensão"
     }
   },
   "chat_history": {