Selection tool explain (#491)

* hover selection tool Explain

* prompt

src/config/index.mjs

@@ -215,6 +215,7 @@ export const defaultConfig = {
   userLanguage: getNavigatorLanguage(),
   apiModes: Object.keys(Models),
   selectionTools: [
+    'explain',
     'translate',
     'translateToEn',
     'translateToZh',
@@ -227,6 +228,7 @@ export const defaultConfig = {
     'ask',
   ],
   selectionToolsDesc: [
+    'Explain',
     'Translate',
     'Translate (To English)',
     'Translate (Bidirectional)',

src/content-script/selection-tools/index.mjs

@@ -7,10 +7,19 @@ import {
   Translate,
   Braces,
   Globe,
+  ChatTextFill,
 } from 'react-bootstrap-icons'
 import { getPreferredLanguage } from '../../config/language.mjs'
 
 export const config = {
+  explain: {
+    icon: <ChatTextFill />,
+    label: 'Explain',
+    genPrompt: async (selection) => {
+      const preferredLanguage = await getPreferredLanguage()
+      return `Reply in ${preferredLanguage}.Explain the following:\n"${selection}"`
+    },
+  },
   translate: {
     icon: <Translate />,
     label: 'Translate',