17 |

18 | An error occurred
19 | {message}

20 | Check the console for more details. (Ctrl+Shift+J) 21 |

22 | ) 23 | } 24 | 25 | export default ErrorMessage 26 | -------------------------------------------------------------------------------- /src/components/footer.tsx: -------------------------------------------------------------------------------- 1 | import { h, Component } from 'preact' 2 | import Browser from 'webextension-polyfill' 3 | 4 | function Footer() { 5 | const extension_version = Browser.runtime.getManifest().version 6 | 7 | return ( 8 |

9 | 10 | GoogleChatGPT extension v.{extension_version} 11 | . 12 | If you like the extension, please consider supporting GoogleChatGPT. 13 |

14 | ) 15 | } 16 | 17 | export default Footer 18 | -------------------------------------------------------------------------------- /src/components/navBar.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact' 2 | import { useCallback, useEffect, useState } from 'preact/hooks' 3 | import { icons } from 'src/util/icons' 4 | import { getTranslation, Languages, localizationKeys } from 'src/util/localization' 5 | import Browser from 'webextension-polyfill' 6 | import IconButton from './socialIconButton' 7 | import TooltipWrapper from './tooltipWrapper' 8 | 9 | 10 | const NavBar = ( 11 | props: { 12 | language: string, 13 | onLanguageChange: (language: string) => void, 14 | } 15 | ) => { 16 | 17 | const version = Browser.runtime.getManifest().version 18 | 19 | return (

20 |

21 |

22 | GoogleChatGPT 23 | {version} 24 |

25 |

26 |

27 | 28 |

29 |

) 30 | } 31 | 32 | // 33 | // 34 | // 35 | export default NavBar 36 | -------------------------------------------------------------------------------- /src/components/promptEditor.tsx: -------------------------------------------------------------------------------- 1 | import { h } from 'preact' 2 | import { useState, useEffect, useRef, useLayoutEffect } from 'preact/hooks' 3 | import { getTranslation, localizationKeys } from 'src/util/localization' 4 | import { deletePrompt, getDefaultPrompt, getSavedPrompts, Prompt, savePrompt } from 'src/util/promptManager' 5 | import TooltipWrapper from './tooltipWrapper' 6 | 7 | const PromptEditor = ( 8 | props: { 9 | language: string 10 | } 11 | ) => { 12 | const [savedPrompts, setSavedPrompts] = useState([]) 13 | const [prompt, setPrompt] = useState(getDefaultPrompt()) 14 | const [hasWebResultsPlaceholder, setHasWebResultsPlaceholder] = useState(false) 15 | const [hasQueryPlaceholder, setHasQueryPlaceholder] = useState(false) 16 | const [deleteBtnText, setDeleteBtnText] = useState("delete") 17 | 18 | const [showErrors, setShowErrors] = useState(false) 19 | const [nameError, setNameError] = useState(false) 20 | const [textError, setTextError] = useState(false) 21 | const [webResultsError, setWebResultsError] = useState(false) 22 | const [queryError, setQueryError] = useState(false) 23 | 24 | useLayoutEffect(() => { 25 | updateSavedPrompts() 26 | }, []) 27 | 28 | const updateSavedPrompts = async () => { 29 | let prompts = await getSavedPrompts() 30 | setSavedPrompts(prompts) 31 | if (prompt.uuid === 'default') { 32 | setPrompt(prompts[0]) 33 | } 34 | } 35 | 36 | useEffect(() => { 37 | updateSavedPrompts() 38 | }, [props.language]) 39 | 40 | useEffect(() => { 41 | updatePlaceholderButtons(prompt.text) 42 | }, [prompt]) 43 | 44 | useEffect(() => { 45 | setNameError(prompt.name.trim() === '') 46 | setTextError(prompt.text.trim() === '') 47 | setWebResultsError(!prompt.text.includes('{web_results}')) 48 | setQueryError(!prompt.text.includes('{query}')) 49 | }, [prompt]) 50 | 51 | async function updateList() { 52 | getSavedPrompts().then(sp => { 53 | setSavedPrompts(sp) 54 | }) 55 | } 56 | 57 | const handleSelect = (prompt: Prompt) => { 58 | setShowErrors(false) 59 | setPrompt(prompt) 60 | setDeleteBtnText("delete") 61 | } 62 | 63 | 64 | const handleAdd = () => { 65 | setShowErrors(false) 66 | setPrompt({ name: '', text: '' }) 67 | setDeleteBtnText("delete") 68 | if (nameInputRef.current) { 69 | nameInputRef.current.focus() 70 | } 71 | } 72 | 73 | const handleSave = async () => { 74 | setShowErrors(true) 75 | if (nameError || textError || webResultsError || queryError) { 76 | return 77 | } 78 | 79 | await savePrompt(prompt) 80 | await updateList() 81 | } 82 | 83 | const handleDeleteBtnClick = () => { 84 | if (deleteBtnText === "delete") { 85 | setDeleteBtnText("check"); 86 | } else { 87 | handleDelete(); 88 | } 89 | } 90 | 91 | const handleDelete = async () => { 92 | await deletePrompt(prompt) 93 | updateList() 94 | handleAdd() 95 | } 96 | 97 | 98 | const nameInputRef = useRef(null) 99 | const textareaRef = useRef(null) 100 | 101 | const handleInsertText = (text: string) => { 102 | if (textareaRef.current) { 103 | const start = textareaRef.current.selectionStart 104 | const end = textareaRef.current.selectionEnd 105 | const currentText = textareaRef.current.value 106 | const newText = currentText.substring(0, start) + text + currentText.substring(end, currentText.length) 107 | textareaRef.current.setSelectionRange(start + text.length, start + text.length) 108 | textareaRef.current.focus() 109 | 110 | setPrompt({ ...prompt, text: newText }) 111 | } 112 | } 113 | 114 | const handleTextareaChange = (e: Event) => { 115 | let text = (e.target as HTMLTextAreaElement).value 116 | if (text !== prompt.text) { 117 | setTextError(false) 118 | setPrompt({ ...prompt, text: text }) 119 | } 120 | } 121 | 122 | const updatePlaceholderButtons = (text: string) => { 123 | setHasWebResultsPlaceholder(text.includes("{web_results}")) 124 | setHasQueryPlaceholder(text.includes("{query}")) 125 | } 126 | 127 | const actionToolbar = ( 128 |

131 |

132 | 133 | 144 | 145 | 146 | 157 | 158 | 159 | 165 | 166 |

167 | 168 | 174 |

175 | ) 176 | 177 | const PromptList = ( 178 |

179 |

handleSelect(prmpt)} 186 | > 187 | 188 | 📝 {prmpt.name} 189 | 190 |

193 |

194 | ) 195 | 196 | const nameInput = ( 197 | { 205 | setNameError(false) 206 | setPrompt({ ...prompt, name: (e.target as HTMLInputElement).value }) 207 | }} 208 | disabled={prompt.uuid === 'default' || prompt.uuid === 'default_en'} 209 | /> 210 | ) 211 | 212 | const btnDelete = ( 213 | 223 | ) 224 | 225 | const textArea = ( 226 |

235 |     )
236 | 
237 |     return (
238 |         <div className="wcg-w-4/5 wcg-border wcg-rounded-box wcg-py-4 wcg-flex wcg-flex-row wcg-gap-4 wcg-h-[32rem] wcg-mt-10">
239 |             <div className="wcg-w-1/3">
240 |                 {PromptList}
241 |             </div>
242 | 
243 |             <div className="wcg-flex wcg-flex-col wcg-w-2/3">
244 |                 <div className="wcg-flex wcg-flex-row wcg-gap-2 wcg-items-center">
245 |                     {nameInput}
246 |                     {btnDelete}
247 |                 </div>
248 |                 {textArea}
249 | 
250 |                 {actionToolbar}
251 |             </div>
252 |         </div >
253 |     )
254 | }
255 | 
256 | export default PromptEditor
257 |

--------------------------------------------------------------------------------
/src/components/socialIconButton.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from "preact";
 2 | import TooltipWrapper from "./tooltipWrapper";
 3 | 
 4 | function IconButton(props: { url: string, tip: string, icon: JSX.Element }) {
 5 |     return (
 6 |         <TooltipWrapper tip={props.tip}>
 7 |             <a href={props.url} target="_blank" rel="noopener noreferrer">
 8 |                 <div className="wcg-btn wcg-btn-ghost wcg-p-2 wcg-px-4">
 9 |                     {props.icon}
10 |                 </div>
11 |             </a>
12 |         </TooltipWrapper>
13 |     )
14 | }
15 | 
16 | export default IconButton
17 |

--------------------------------------------------------------------------------
/src/components/toolbar.tsx:
--------------------------------------------------------------------------------
 1 | import { h, options } from 'preact'
 2 | import { useCallback, useEffect, useMemo, useState } from 'preact/hooks'
 3 | import { icons } from 'src/util/icons'
 4 | import { getSavedPrompts, Prompt } from 'src/util/promptManager'
 5 | import { getUserConfig, updateUserConfig } from 'src/util/userConfig'
 6 | import timePeriodOptions from 'src/util/timePeriodOptions.json'
 7 | import regionOptions from 'src/util/regionOptions.json'
 8 | import Browser from 'webextension-polyfill'
 9 | import Dropdown from './dropdown'
10 | import { getTranslation, localizationKeys, setLocaleLanguage } from 'src/util/localization'
11 | 
12 | 
13 | const numResultsOptions = Array.from({ length: 10 }, (_, i) => i + 1).map((num) => ({
14 |     value: num,
15 |     label: `${num} result${num === 1 ? '' : 's'}`
16 | }))
17 | 
18 | function Toolbar() {
19 |     const [webAccess, setWebAccess] = useState(true)
20 |     const [numResults, setNumResults] = useState(3)
21 |     const [timePeriod, setTimePeriod] = useState('')
22 |     const [region, setRegion] = useState('wt-wt')
23 |     const [promptUUID, setPromptUUID] = useState<string>('')
24 |     const [prompts, setPrompts] = useState<Prompt[]>([])
25 | 
26 |     useEffect(() => {
27 |         getUserConfig().then((userConfig) => {
28 |             setWebAccess(userConfig.webAccess)
29 |             setNumResults(userConfig.numWebResults)
30 |             setTimePeriod(userConfig.timePeriod)
31 |             setRegion(userConfig.region)
32 |             setPromptUUID(userConfig.promptUUID)
33 | 
34 |             setLocaleLanguage(userConfig.language)
35 |         })
36 |         updatePrompts()
37 |     }, [])
38 | 
39 |     const handlePromptClick = () => {
40 |         updatePrompts()
41 |     }
42 | 
43 |     const updatePrompts = () => {
44 |         getSavedPrompts().then((savedPrompts) => {
45 |             setPrompts(savedPrompts)
46 |         })
47 |     }
48 | 
49 |     const handleWebAccessToggle = useCallback(() => {
50 |         setWebAccess(!webAccess)
51 |         updateUserConfig({ webAccess: !webAccess })
52 |     }, [webAccess])
53 | 
54 |     const handleNumResultsChange = useCallback((e: { target: { value: string } }) => {
55 |         const value = parseInt(e.target.value)
56 |         setNumResults(value)
57 |         updateUserConfig({ numWebResults: value })
58 |     }, [numResults])
59 | 
60 |     const handleTimePeriodChange = useCallback((e: { target: { value: string } }) => {
61 |         setTimePeriod(e.target.value)
62 |         updateUserConfig({ timePeriod: e.target.value })
63 |     }, [timePeriod])
64 | 
65 |     const handleRegionChange = useCallback((e: { target: { value: string } }) => {
66 |         setRegion(e.target.value)
67 |         updateUserConfig({ region: e.target.value })
68 |     }, [region])
69 | 
70 |     const handlePromptChange = (uuid: string) => {
71 |         removeFocusFromCurrentElement()
72 | 
73 |         setPromptUUID(uuid)
74 |         updateUserConfig({ promptUUID: uuid })
75 |     }
76 | 
77 |     const removeFocusFromCurrentElement = () => (document.activeElement as HTMLElement)?.blur()
78 | 
79 | 
80 |     const webAccessToggle = <label className="wcg-relative wcg-inline-flex wcg-items-center wcg-cursor-pointer">
81 |         <input type="checkbox" value="" className="wcg-sr-only wcg-peer" checked={webAccess} onChange={handleWebAccessToggle} />
82 |         <div className="wcg-w-9 wcg-h-5 wcg-bg-gray-500 wcg-rounded-full wcg-peer peer-checked:after:wcg-translate-x-full peer-checked:after:wcg-border-white after:wcg-content-[''] after:wcg-absolute after:wcg-top-[2px] after:wcg-left-[2px] after:wcg-bg-white after:wcg-border-gray-300 after:wcg-border after:wcg-rounded-full after:wcg-h-4 after:wcg-w-4 after:wcg-transition-all dark:wcg-border-gray-600 peer-checked:wcg-bg-emerald-700" />
83 |         <span className="wcg-ml-1 wcg-text-sm md:after:wcg-content-['Search_on_the_web'] after:wcg-content-['Web']" />
84 |     </label>
85 | 
86 |     return (
87 |         <div className="wcg-toolbar wcg-flex wcg-items-center wcg-gap-2 wcg-mt-0 wcg-p-0 wcg-px-1 wcg-rounded-md">            
88 |             <div className="wcg-btn wcg-btn-xs"
89 |                 onClick={() => Browser.runtime.sendMessage("show_options")}
90 |             >
91 |                 {icons.tune}
92 |             </div>
93 |             {webAccessToggle}
94 |         </div>
95 |     )
96 | }
97 | 
98 | export default Toolbar
99 |

--------------------------------------------------------------------------------
/src/components/tooltipWrapper.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from "preact";
 2 | 
 3 | export const tooltipPositions = {
 4 |     top: "wcg-tooltip-top",
 5 |     bottom: "wcg-tooltip-bottom"
 6 | }
 7 | 
 8 | 
 9 | function TooltipWrapper(props: { tip: string, children: JSX.Element, position?: string }) {
10 |     if (!props.tip) {
11 |         return props.children
12 |     } else {
13 |         return (
14 |             <span className={
15 |                 `wcg-tooltip ${props.position || tooltipPositions.bottom}
16 |              wcg-normal-case before:wcg-text-xs before:wcg-content-[attr(data-tip)]`
17 |             }
18 |                 data-tip={props.tip}>
19 |                 {props.children}
20 |             </span>
21 |         )
22 |     }
23 | }
24 | 
25 | export default TooltipWrapper
26 |

--------------------------------------------------------------------------------
/src/content-scripts/api.ts:
--------------------------------------------------------------------------------
 1 | export interface SearchResult {
 2 |     body: string
 3 |     href: string
 4 |     title: string
 5 | }
 6 | 
 7 | export async function apiSearch(query: string, numResults: number, timePeriod: string, region: string): Promise<SearchResult[]> {
 8 |     const url = `https://ddg-webapp-aagd.vercel.app/search?`
 9 |         + `max_results=${numResults}`
10 |         + `&q=${query}`
11 |         + (timePeriod ? `&time=${timePeriod}` : "")
12 |         + (region ? `®ion=${region}` : "")
13 | 
14 |     const response = await fetch(url)
15 |     const results = await response.json()
16 |     return results.map((result: any) => {
17 |         return {
18 |             body: result.body,
19 |             href: result.href,
20 |             title: result.title
21 |         }
22 |     })
23 | }

--------------------------------------------------------------------------------
/src/content-scripts/mainUI.tsx:
--------------------------------------------------------------------------------
  1 | import '../style/base.css'
  2 | import { h, render } from 'preact'
  3 | import { getTextArea, getFooter, getRootElement, getSubmitButton, getWebChatGPTToolbar } from '../util/elementFinder'
  4 | import Toolbar from 'src/components/toolbar'
  5 | import Footer from 'src/components/footer'
  6 | import ErrorMessage from 'src/components/errorMessage'
  7 | import { getUserConfig } from 'src/util/userConfig'
  8 | import { apiSearch, SearchResult } from './api'
  9 | import createShadowRoot from 'src/util/createShadowRoot'
 10 | import { compilePrompt } from 'src/util/promptManager'
 11 | 
 12 | var isProcessing = false
 13 | 
 14 | var btnSubmit: HTMLButtonElement
 15 | var textarea: HTMLTextAreaElement
 16 | var footer: HTMLDivElement
 17 | 
 18 | async function onSubmit(event: any) {
 19 | 
 20 |     if (event.shiftKey && event.key === 'Enter')
 21 |         return
 22 | 
 23 |     if ((event.type === "click" || event.key === 'Enter') && !isProcessing) {
 24 | 
 25 |         let query = textarea.value.trim()
 26 | 
 27 |         if (query === "") return
 28 | 
 29 |         textarea.value = ""
 30 | 
 31 |         const userConfig = await getUserConfig()
 32 | 
 33 |         isProcessing = true
 34 | 
 35 |         if (!userConfig.webAccess) {
 36 |             textarea.value = query
 37 |             pressEnter()
 38 |             isProcessing = false
 39 |             return
 40 |         }
 41 | 
 42 |         textarea.value = ""
 43 | 
 44 |         try {
 45 |             const results = await apiSearch(query, userConfig.numWebResults, userConfig.timePeriod, userConfig.region)
 46 |             await pasteWebResultsToTextArea(results, query)
 47 |             pressEnter()
 48 |             isProcessing = false
 49 | 
 50 |         } catch (error) {
 51 |             isProcessing = false
 52 |             showErrorMessage(error)
 53 |         }
 54 |     }
 55 | }
 56 | 
 57 | async function pasteWebResultsToTextArea(results: SearchResult[], query: string) {
 58 | 
 59 |     textarea.value = await compilePrompt(results, query)
 60 | }
 61 | 
 62 | function pressEnter() {
 63 |     textarea.focus()
 64 |     const enterEvent = new KeyboardEvent('keydown', {
 65 |         bubbles: true,
 66 |         cancelable: true,
 67 |         key: 'Enter',
 68 |         code: 'Enter'
 69 |     })
 70 |     textarea.dispatchEvent(enterEvent)
 71 | }
 72 | 
 73 | function showErrorMessage(error: Error) {
 74 |     console.log("GoogleChatGPT error --> API error: ", error)
 75 |     let div = document.createElement('div')
 76 |     document.body.appendChild(div)
 77 |     render(<ErrorMessage message={error.message} />, div)
 78 | }
 79 | 
 80 | 
 81 | async function updateUI() {
 82 | 
 83 |     if (getWebChatGPTToolbar()) return
 84 | 
 85 |     btnSubmit = getSubmitButton()
 86 |     textarea = getTextArea()
 87 |     footer = getFooter()
 88 | 
 89 |     if (textarea && btnSubmit) {
 90 | 
 91 |         textarea.addEventListener("keydown", onSubmit)
 92 |         btnSubmit.addEventListener("click", onSubmit)
 93 | 
 94 |         const textareaParent = textarea.parentElement.parentElement
 95 |         textareaParent.style.flexDirection = 'column'
 96 | 
 97 |         const { shadowRootDiv, shadowRoot } = await createShadowRoot('content-scripts/mainUI.css')
 98 |         textareaParent.appendChild(shadowRootDiv)
 99 |         render(<Toolbar />, shadowRoot)
100 |     }
101 | 
102 |     if (footer) {
103 |         let div = document.createElement('div')
104 |         footer.lastElementChild.appendChild(div)
105 |         render(<Footer />, div)
106 |     }
107 | }
108 | 
109 | const rootEl = getRootElement()
110 | window.onload = function () {
111 |     updateUI()
112 | 
113 |     try {
114 |         new MutationObserver(() => {
115 |             updateUI()
116 |         }).observe(rootEl, { childList: true })
117 |     } catch (e) {
118 |         console.info("WebChatGPT error --> Could not update UI:\n", e.stack)
119 |     }
120 | }
121 |

--------------------------------------------------------------------------------
/src/declaration.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.css' {
2 | 	const mapping: Record<string, string>
3 | 	export default mapping
4 | }
5 |

--------------------------------------------------------------------------------
/src/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 3,
 3 |   "name": "__MSG_appName__",
 4 |   "description": "__MSG_appDesc__",
 5 |   "default_locale": "en",
 6 |   "version": "2023.02.04",
 7 |   "icons": {
 8 |     "16": "icons/icon16.png",
 9 |     "48": "icons/icon48.png",
10 |     "128": "icons/icon128.png"
11 |   },
12 |   "permissions": ["storage"],
13 |   "host_permissions": ["https://ddg-webapp-aagd.vercel.app/*"],
14 |   "background": {
15 |     "service_worker": "background/bg.js"
16 |   },
17 |   "action": {},
18 |   "content_scripts": [
19 |     {
20 |       "matches": ["https://chat.openai.com/chat*"],
21 |       "js": ["content-scripts/mainUI.js"]
22 |     }
23 |   ],
24 |   "options_ui": {
25 |     "page": "options/options.html",
26 |     "open_in_tab": true,
27 |     "css": ["options/options.css"]
28 |   },
29 |   "web_accessible_resources": [
30 |     {
31 |       "resources": [
32 |         "content-scripts/mainUI.css",
33 |         "icons/icon48.png"
34 |       ],
35 |       "matches": ["https://chat.openai.com/*"]
36 |     }
37 |   ]
38 | }
39 |

--------------------------------------------------------------------------------
/src/manifest.v2.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "manifest_version": 2,
 3 |   "name": "__MSG_appName__",
 4 |   "description": "__MSG_appDesc__",
 5 |   "default_locale": "en",
 6 |   "version": "2023.02.04",
 7 |   "icons": {
 8 |     "16": "icons/icon16.png",
 9 |     "48": "icons/icon48.png",
10 |     "128": "icons/icon128.png"
11 |   },
12 |   "permissions": [
13 |     "storage",
14 |     "webRequest",
15 |     "https://ddg-webapp-aagd.vercel.app/*"
16 |   ],
17 |   "background": {
18 |     "scripts": ["background/bg.js"]
19 |   },
20 |   "browser_action": {},
21 |   "browser_specific_settings": {
22 |     "gecko": {
23 |       "id": "{b13d04e3-41db-48b3-842c-8079df93c7ad}"
24 |     }
25 |   },
26 |   "content_scripts": [
27 |     {
28 |       "matches": ["https://chat.openai.com/*"],
29 |       "js": ["content-scripts/mainUI.js"]
30 |     }
31 |   ],
32 |   "options_ui": {
33 |     "page": "options/options.html",
34 |     "open_in_tab": true,
35 |     "chrome_style": true
36 |   },
37 |   "web_accessible_resources": ["content-scripts/mainUI.css", "icons/icon48.png"]
38 | }
39 |

--------------------------------------------------------------------------------
/src/options/options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <title>WebChatpGPT Options</title>
 5 |     <link rel="stylesheet" href="options.css">
 6 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0">
 7 |     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans">
 8 |     <style>
 9 |         * {
10 |             font-family: 'PT+Sans', sans-serif;
11 |         }
12 |     </style>
13 | </head>
14 | <body>
15 |     <div id="options" class="wcg-flex wcg-justify-center wcg-items-center wcg-flex-col"></div>
16 |     <script src="options.js"></script>
17 | </body>
18 | </html>

--------------------------------------------------------------------------------
/src/options/options.tsx:
--------------------------------------------------------------------------------
 1 | import "../style/base.css"
 2 | import { h, JSX, render } from "preact"
 3 | import { getUserConfig, updateUserConfig } from "src/util/userConfig"
 4 | import { useLayoutEffect, useState } from "preact/hooks"
 5 | import PromptEditor from "src/components/promptEditor"
 6 | import { getTranslation, localizationKeys, setLocaleLanguage } from "src/util/localization"
 7 | import NavBar from "src/components/navBar"
 8 | import { icons } from "src/util/icons"
 9 | 
10 | const Footer = (props: { language: string; }) => (
11 |     <div className="wcg-flex wcg-flex-col wcg-items-center wcg-p-4" >
12 |         <p style={{ whiteSpace: "pre-line" }} className="wcg-text-sm wcg-m-0 wcg-p-1 wcg-text-center">
13 |             {getTranslation(localizationKeys.UI.supportMe)}
14 |         </p>
15 |         <a className="wcg-p-4" href="https://www.buymeacoffee.com/googlechatgpt?utm_source=webchatgpt&utm_medium=options_page" target="_blank" rel="noopener noreferrer">
16 |             <img src="https://img.buymeacoffee.com/button-api/?text=Support this project&emoji=&slug=anzorq&button_colour=FFDD00&font_colour=000000&font_family=Poppins&outline_colour=000000&coffee_colour=ffffff" />
17 |         </a>
18 |     </div>
19 | )
20 | 
21 | const SocialCard = ({ icon, text }: { icon: JSX.Element, text: string }) => (
22 |     <div className="wcg-btn wcg-btn-ghost wcg-h-28 wcg-w-36 wcg-p-2 wcg-rounded-xl wcg-flex wcg-flex-col">
23 |         {icon}
24 |         <p className="wcg-normal-case wcg-p-2">{text}</p>
25 |     </div>
26 | )
27 | 
28 | 
29 | export default function OptionsPage() {
30 | 
31 |     const [language, setLanguage] = useState<string>(null)
32 | 
33 | 
34 |     useLayoutEffect(() => {
35 |         getUserConfig().then(config => {
36 |             setLanguage(config.language)
37 |             setLocaleLanguage(config.language)
38 |         })
39 |     }, [])
40 | 
41 |     const onLanguageChange = (language: string) => {
42 |         setLanguage(language)
43 |         updateUserConfig({ language })
44 |         setLocaleLanguage(language)
45 |     }
46 | 
47 |     if (!language) {
48 |         return <div></div>
49 |     }
50 | 
51 |     return (
52 |         <div className="wcg-w-3/5 wcg-flex wcg-flex-col wcg-items-center">
53 | 
54 |             <NavBar
55 |                 language={language}
56 |                 onLanguageChange={onLanguageChange}
57 |             />
58 | 
59 |             <PromptEditor
60 |                 language={language}
61 |             />
62 | 
63 | 
64 |             <div className="wcg-mt-28 wcg-self-center wcg-items-center wcg-flex wcg-flex-col">
65 |                 {/* <div className="wcg-flex wcg-flex-row wcg-gap-4">
66 |                     <SocialCard icon={icons.twitter} text={getTranslation(localizationKeys.socialButtonTips.twitter)} />
67 |                     <SocialCard icon={icons.discord} text={getTranslation(localizationKeys.socialButtonTips.discord)} />
68 |                     <SocialCard icon={icons.github} text={getTranslation(localizationKeys.socialButtonTips.github)} />
69 |                 </div> */}
70 |             </div>
71 | 
72 |         </div >
73 |     )
74 | }
75 | 
76 | 
77 | render(<OptionsPage />, document.getElementById("options"))
78 |

--------------------------------------------------------------------------------
/src/style/base.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;

--------------------------------------------------------------------------------
/src/util/createShadowRoot.ts:
--------------------------------------------------------------------------------
 1 | import Browser from "webextension-polyfill"
 2 | 
 3 | async function createShadowRoot(pathToCSS: string) {
 4 |     let shadowRootDiv = document.createElement('div')
 5 |     const shadowRoot = shadowRootDiv.attachShadow({ mode: 'open' })
 6 |     const style = document.createElement('style')
 7 |     style.textContent = await fetch(Browser.runtime.getURL(pathToCSS)).then(response => response.text())
 8 |     shadowRoot.append(style)
 9 |     return { shadowRootDiv, shadowRoot }
10 | }
11 | 
12 | export default createShadowRoot
13 |

--------------------------------------------------------------------------------
/src/util/elementFinder.ts:
--------------------------------------------------------------------------------
 1 | export function getTextArea(): HTMLTextAreaElement {
 2 |     return document.querySelector('textarea')
 3 | }
 4 | 
 5 | export function getFooter(): HTMLDivElement {
 6 |     return document.querySelector("div[class*='absolute bottom-0']")
 7 | }
 8 | 
 9 | export function getRootElement(): HTMLDivElement {
10 |     return document.querySelector('div[id="__next"]')
11 | }
12 | 
13 | export function getWebChatGPTToolbar(): HTMLElement {
14 |     return document.querySelector("div[class*='wcg-toolbar']")
15 | }
16 | 
17 | export function getSubmitButton(): HTMLButtonElement {
18 |     const textarea = getTextArea()
19 |     if (!textarea) {
20 |         return null
21 |     }
22 |     return textarea.parentNode.querySelector("button")
23 | }
24 |

--------------------------------------------------------------------------------
/src/util/icons.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact'
 2 | 
 3 | export const twitterIcon = (
 4 |     <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 5 |         <path fill="#fff" fill-rule="evenodd" d="M24 4.309a9.83 9.83 0 0 1-2.828.775 4.94 4.94 0 0 0 2.165-2.724 9.865 9.865 0 0 1-3.127 1.196 4.925 4.925 0 0 0-8.39 4.49A13.974 13.974 0 0 1 1.671 2.9a4.902 4.902 0 0 0-.667 2.476c0 1.708.869 3.216 2.191 4.099A4.936 4.936 0 0 1 .964 8.86v.06a4.926 4.926 0 0 0 3.95 4.829 4.964 4.964 0 0 1-2.224.085 4.93 4.93 0 0 0 4.6 3.42 9.886 9.886 0 0 1-6.115 2.107c-.398 0-.79-.023-1.175-.068a13.945 13.945 0 0 0 7.548 2.212c9.057 0 14.009-7.503 14.009-14.01 0-.213-.005-.425-.014-.636A10.012 10.012 0 0 0 24 4.309" />
 6 |     </svg>
 7 | )
 8 | 
 9 | export const discordIcon = (
10 |     <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
11 |         <path d="M18.942 5.556a16.299 16.299 0 0 0-4.126-1.297c-.178.321-.385.754-.529 1.097a15.175 15.175 0 0 0-4.573 0 11.583 11.583 0 0 0-.535-1.097 16.274 16.274 0 0 0-4.129 1.3c-2.611 3.946-3.319 7.794-2.965 11.587a16.494 16.494 0 0 0 5.061 2.593 12.65 12.65 0 0 0 1.084-1.785 10.689 10.689 0 0 1-1.707-.831c.143-.106.283-.217.418-.331 3.291 1.539 6.866 1.539 10.118 0 .137.114.277.225.418.331-.541.326-1.114.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595c.415-4.396-.709-8.209-2.973-11.589zM8.678 14.813c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c.001 1.123-.793 2.045-1.798 2.045zm6.644 0c-.988 0-1.798-.922-1.798-2.045s.793-2.047 1.798-2.047 1.815.922 1.798 2.047c0 1.123-.793 2.045-1.798 2.045z" fill="#fff" fill-rule="evenodd" />
12 |     </svg>
13 | )
14 | 
15 | export const githubIcon = (
16 |     <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
17 |         <path d="M12 2C6.475 2 2 6.475 2 12a9.994 9.994 0 0 0 6.838 9.488c.5.087.687-.213.687-.476 0-.237-.013-1.024-.013-1.862-2.512.463-3.162-.612-3.362-1.175-.113-.288-.6-1.175-1.025-1.413-.35-.187-.85-.65-.013-.662.788-.013 1.35.725 1.538 1.025.9 1.512 2.338 1.087 2.912.825.088-.65.35-1.087.638-1.337-2.225-.25-4.55-1.113-4.55-4.938 0-1.088.387-1.987 1.025-2.688-.1-.25-.45-1.275.1-2.65 0 0 .837-.262 2.75 1.026a9.28 9.28 0 0 1 2.5-.338c.85 0 1.7.112 2.5.337 1.912-1.3 2.75-1.024 2.75-1.024.55 1.375.2 2.4.1 2.65.637.7 1.025 1.587 1.025 2.687 0 3.838-2.337 4.688-4.562 4.938.362.312.675.912.675 1.85 0 1.337-.013 2.412-.013 2.75 0 .262.188.574.688.474A10.016 10.016 0 0 0 22 12c0-5.525-4.475-10-10-10Z" fill="#fff" fill-rule="evenodd" />
18 |     </svg>
19 | )
20 | 
21 | export const tuneIcon = (
22 |     <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
23 |         <path fill="#aaa" d="M11 21v-6h2v2h8v2h-8v2Zm-8-2v-2h6v2Zm4-4v-2H3v-2h4V9h2v6Zm4-2v-2h10v2Zm4-4V3h2v2h4v2h-4v2ZM3 7V5h10v2Z" />
24 |     </svg>
25 | )
26 | 
27 | export const Language = (
28 |     <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
29 |         <path fill="#fff" d="m11.9 22 4.55-12h2.1l4.55 12H21l-1.05-3.05H15.1L14 22Zm3.8-4.8h3.6l-1.75-4.95h-.1ZM4 19l-1.4-1.4 5.05-5.05q-.95-1.05-1.662-2.175Q5.275 9.25 4.75 8h2.1q.45.9.963 1.625.512.725 1.237 1.525 1.1-1.2 1.825-2.462Q11.6 7.425 12.1 6H1V4h7V2h2v2h7v2h-2.9q-.525 1.775-1.425 3.45-.9 1.675-2.225 3.15l2.4 2.45-.75 2.05L9 14Z" />
30 |     </svg>
31 | )
32 | 
33 | export const Expand = (
34 |     <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24">
35 |         <path fill="#fff" d="m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4Z" />
36 |     </svg>
37 | )
38 | 
39 | export const icons = {
40 |     twitter: twitterIcon,
41 |     discord: discordIcon,
42 |     github: githubIcon,
43 |     tune: tuneIcon,
44 |     language: Language,
45 |     expand: Expand,
46 | }
47 |

--------------------------------------------------------------------------------
/src/util/localization.ts:
--------------------------------------------------------------------------------
 1 | import Browser from "webextension-polyfill"
 2 | import * as localizedStrings from './localizedStrings.json'
 3 | 
 4 | export const getSystemLanguage = () => Browser.i18n.getUILanguage().split("-")[0]
 5 | 
 6 | export const Languages = {
 7 |     "auto": "Auto",
 8 |     "en": "English",
 9 |     "de": "Deutsch",
10 |     "es": "Español",
11 |     "fr": "Français",
12 |     "it": "Italiano",
13 |     "ja": "日本語",
14 |     "ko": "한국어",
15 |     "pt": "Português",
16 |     "zh": "中文"
17 | }
18 | 
19 | const DEFAULT_LANGUAGE = 'en'
20 | 
21 | 
22 | let language = getSystemLanguage()
23 | 
24 | export const getLocaleLanguage = () => language
25 | 
26 | export const getCurrentLanguageName = () => language === Languages.auto ? Languages.en : Languages[language]
27 | 
28 | export const setLocaleLanguage = (newLanguage: string) => {
29 |     language = newLanguage === 'auto' ? getSystemLanguage() : newLanguage
30 |     console.debug(`Language set to ${language}`)
31 | }
32 | 
33 | export const getTranslation = (key: string, lang? : string) => {
34 |     if(lang) {
35 |         return localizedStrings[key][lang]
36 |     }
37 |     if (language in localizedStrings[key]) {
38 |         return localizedStrings[key][language]
39 |     }
40 |     return localizedStrings[key][DEFAULT_LANGUAGE]
41 | }
42 | 
43 | 
44 | export const localizationKeys = {
45 |     defaultPrompt: 'default_prompt',
46 |     UI: {
47 |         language: 'language',
48 |         supportThisProject: 'support_this_project',
49 |         supportMe: 'support_me',
50 |         chooseLanguage: 'choose_language',
51 |     },
52 |     placeholders: {
53 |         namePlaceholder: 'name_placeholder',
54 |     },
55 |     buttons: {
56 |         save: 'save',
57 |         newPrompt: 'new_prompt',
58 |     },
59 |     placeHolderTips: {
60 |         currentDate: 'current_date_placeholder_tip',
61 |         webResults: 'web_results_placeholder_tip',
62 |         query: 'query_placeholder_tip',
63 |     },
64 |     socialButtonTips: {
65 |         twitter: 'twitter_button_tip',
66 |         github: 'github_button_tip',
67 |         discord: 'discord_button_tip',
68 |     }
69 | }
70 |

--------------------------------------------------------------------------------
/src/util/localizedStrings.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "default_prompt": {
  3 |         "en": "Web search results:\n{web_results}\nInstructions: Please provide a concise and informative response to the user's query based on the information available in your training data and current knowledge. If necessary, you may use web search results from {current_date} to supplement your answer, but please clearly cite your sources using [[number](URL)].\n\nUser Query: {query}",
  4 |         "pt": "Resultados de pesquisa na web:\n\n{web_results}\nData atual: {current_date}\n\nInstruções: Usando os resultados de pesquisa na web fornecidos, escreva uma resposta abrangente para a consulta dada. Certifique-se de citar os resultados usando a notação [[número](URL)] após a referência. Se os resultados de pesquisa fornecidos se referem a múltiplos assuntos com o mesmo nome, escreva respostas separadas para cada assunto.\nConsulta: {query}",
  5 |         "es": "Resultados de búsqueda en la web:\n\n{web_results}\nFecha actual: {current_date}\n\nInstrucciones: Utilizando los resultados de búsqueda en la web proporcionados, escriba una respuesta completa a la consulta dada. Asegúrese de citar los resultados utilizando la notación [[número](URL)] después de la referencia. Si los resultados de búsqueda proporcionados se refieren a varios temas con el mismo nombre, escriba respuestas separadas para cada tema.\nConsulta: {query}",
  6 |         "fr": "Résultats de recherche sur le web:\n\n{web_results}\nDate actuelle: {current_date}\n\nInstructions: En utilisant les résultats de recherche sur le web fournis, écrivez une réponse complète à la question posée. Assurez-vous de citer les résultats en utilisant la notation [[numéro](URL)] après la référence. Si les résultats de recherche fournis se réfèrent à plusieurs sujets ayant le même nom, écrivez des réponses séparées pour chaque sujet.\nRequête: {query}",
  7 |         "de": "Web-Suchergebnisse:\n\n{web_results}\nAktuelles Datum: {current_date}\n\nAnweisungen: Verwenden Sie die bereitgestellten Web-Suchergebnisse, um eine umfassende Antwort auf die gegebene Anfrage zu geben. Stellen Sie sicher, dass Sie die Ergebnisse mit der Notation [[Zahl](URL)] nach der Referenz zitieren. Wenn die bereitgestellten Suchergebnisse auf mehrere Themen mit demselben Namen verweisen, schreiben Sie separate Antworten für jedes Thema.\nAnfrage: {query}",
  8 |         "it": "Risultati della ricerca Web:\n\n{web_results}\nData corrente: {current_date}\n\nIstruzioni: utilizzando i risultati della ricerca Web forniti, scrivere una risposta completa alla query specificata. Assicurati di citare i risultati utilizzando la notazione [[numero](URL)] dopo il riferimento. Se i risultati di ricerca forniti si riferiscono a più argomenti con lo stesso nome, scrivi risposte separate per ogni argomento.\nQuery: {query}",
  9 |         "zh": "网络搜索结果:\n\n{web_results}\n当前日期: {current_date}\n\n说明: 使用提供的网络搜索结果，对给定的查询进行综合回复。 确保在参考文献后使用 [[数字](URL)] 符号来引用结果。 如果提供的搜索结果涉及同名的多个主题，请为每个主题分别写下答案。\n查询: {query}",
 10 |         "ja": "Web 検索結果:\n\n{web_results}\n現在の日付: {current_date}\n\n指示: 提供された Web 検索結果を使用して、指定されたクエリに対する包括的な回答を作成します。 参考文献の後に必ず[[数字](URL)]表記で結果を引用してください。 提供された検索結果が同じ名前の複数の件名を参照している場合は、件名ごとに個別の回答を記述してください。\nクエリ: {query}",
 11 |         "ko": "웹 검색 결과:\n\n{web_results}\n현재 날짜: {current_date}\n\n지침: 제공된 웹 검색 결과를 사용하여 주어진 쿼리에 대한 포괄적인 회신을 작성합니다. 반드시 [[숫자](URL)] 표기를 사용하여 결과를 인용한다. 제공된 검색 결과가 동일한 이름을 가진 여러 주제를 참조하는 경우 각 주제에 대해 별도의 답변을 작성하십시오.\n쿼리: {query}"
 12 |     },
 13 |     "language": {
 14 |         "en": "Language",
 15 |         "pt": "Idioma",
 16 |         "es": "Idioma",
 17 |         "fr": "Langue",
 18 |         "de": "Sprache",
 19 |         "it": "Lingua",
 20 |         "zh": "语言",
 21 |         "ja": "言語",
 22 |         "ko": "언어"
 23 |     },
 24 |     "choose_language": {
 25 |         "en": "Choose language",
 26 |         "pt": "Escolha o idioma",
 27 |         "es": "Elegir idioma",
 28 |         "fr": "Choisir la langue",
 29 |         "de": "Sprache auswählen",
 30 |         "it": "Scegli la lingua",
 31 |         "zh": "选择语言",
 32 |         "ja": "言語を選択",
 33 |         "ko": "언어 선택"
 34 |     },
 35 |     "support_this_project": {
 36 |         "en": "Support this project",
 37 |         "pt": "Apoie este projeto",
 38 |         "es": "Apoya este proyecto",
 39 |         "fr": "Soutenez ce projet",
 40 |         "de": "Unterstützen Sie dieses Projekt",
 41 |         "it": "Sostieni questo progetto",
 42 |         "zh": "支持此项目",
 43 |         "ja": "このプロジェクトを支援",
 44 |         "ko": "이 프로젝트 지원"
 45 |     },
 46 |     "support_me": {
 47 |         "en": "This extension is free! 🥳 But the server it runs on is not. 😬\nPlease help me keep it alive! ⤵️",
 48 |         "pt": "Esta extensão é gratuita! 🥳 Mas o servidor em que ela é executada não é. 😬\nAjude-me a mantê-lo vivo! ⤵️",
 49 |         "es": "¡Esta extensión es gratuita! 🥳 Pero el servidor en el que se ejecuta no lo es. 😬\n¡Ayúdame a mantenerla viva! ⤵️",
 50 |         "fr": "Cette extension est gratuite ! 🥳 Mais le serveur sur lequel elle fonctionne ne l'est pas. 😬\nVeuillez m'aider à la maintenir en vie ! ⤵️",
 51 |         "de": "Diese Erweiterung ist kostenlos! 🥳 Aber der Server, auf dem sie läuft, ist es nicht. 😬\nBitte hilf mir, sie am Leben zu erhalten! ⤵️",
 52 |         "it": "Questa estensione è gratuita! 🥳 Ma il server su cui viene eseguita non lo è. 😬\nPer favore aiutami a tenerlo vivo! ⤵️",
 53 |         "zh": "此扩展程序是免费的！🥳 但是它运行的服务器不是。😬\n帮助这个项目继续下去！⤵️",
 54 |         "ja": "この拡張機能は無料です！🥳 しかし、それが実行されているサーバーは無料ではありません。😬\nこのプロジェクトを維持するのを手伝ってください！⤵️",
 55 |         "ko": "이 확장 프로그램은 무료입니다! 🥳 그러나 그것이 실행되는 서버는 아닙니다. 😬\n이 프로젝트를 계속 유지하도록 도와주세요! ⤵️"
 56 |     },
 57 |     "save": {
 58 |         "en": "Save",
 59 |         "pt": "Salvar",
 60 |         "es": "Guardar",
 61 |         "fr": "Enregistrer",
 62 |         "de": "Speichern",
 63 |         "it": "Salva",
 64 |         "zh": "保存",
 65 |         "ja": "保存",
 66 |         "ko": "저장"
 67 |     },
 68 |     "new_prompt": {
 69 |         "en": "New prompt",
 70 |         "pt": "Novo prompt",
 71 |         "es": "Nuevo prompt",
 72 |         "fr": "Nouveau prompt",
 73 |         "de": "Neues Prompt",
 74 |         "it": "Nuovo prompt",
 75 |         "zh": "新提示",
 76 |         "ja": "新しいプロンプト",
 77 |         "ko": "새로운 프롬프트"
 78 |     },
 79 |     "name_placeholder": {
 80 |         "en": "Name",
 81 |         "pt": "Nome",
 82 |         "es": "Nombre",
 83 |         "fr": "Nom",
 84 |         "de": "Name",
 85 |         "it": "Nome",
 86 |         "zh": "名称",
 87 |         "ja": "名前",
 88 |         "ko": "이름"
 89 |     },
 90 |     "current_date_placeholder_tip": {
 91 |         "en": "Insert placeholder for the current date (optional)",
 92 |         "pt": "Insira o espaço reservado para a data atual (opcional)",
 93 |         "es": "Ingrese un marcador de posición para la fecha actual (opcional)",
 94 |         "fr": "Insérer un marqueur de place pour la date actuelle (facultatif)",
 95 |         "de": "Platzhalter für das aktuelle Datum einfügen (optional)",
 96 |         "it": "Inserisci il segnaposto per la data attuale (opzionale)",
 97 |         "zh": "插入当前日期的占位符（可选）",
 98 |         "ja": "現在の日付のプレースホルダーを挿入（任意）",
 99 |         "ko": "현재 날짜의 자리 표시자를 삽입 (선택 사항)"
100 |     },
101 |     "web_results_placeholder_tip": {
102 |         "en": "Insert placeholder for the web results (required)",
103 |         "pt": "Insira o espaço reservado para os resultados da pesquisa na web (obrigatório)",
104 |         "es": "Ingrese un marcador de posición para los resultados de búsqueda web (requerido)",
105 |         "fr": "Insérer un marqueur de place pour les résultats de recherche web (requis)",
106 |         "de": "Platzhalter für die Web-Ergebnisse einfügen (erforderlich)",
107 |         "it": "Inserisci il segnaposto per i risultati web (richiesto)",
108 |         "zh": "插入网络搜索结果的占位符（必需）",
109 |         "ja": "Web結果のプレースホルダーを挿入（必須）",
110 |         "ko": "웹 검색 결과의 자리 표시자를 삽입 (필수)"
111 |     },
112 |     "query_placeholder_tip": {
113 |         "en": "Insert placeholder for the initial query (required)",
114 |         "pt": "Insira o espaço reservado para a pergunta inicial (obrigatório)",
115 |         "es": "Ingrese un marcador de posición para la consulta inicial (requerido)",
116 |         "fr": "Insérer un marqueur de place pour la requête initiale (requis)",
117 |         "de": "Platzhalter für die ursprüngliche Anfrage einfügen (erforderlich)",
118 |         "it": "Inserisci il segnaposto per la query iniziale (richiesto)",
119 |         "zh": "插入初始查询的占位符（必需）",
120 |         "ja": "初期クエリのプレースホルダーを挿入（必須）",
121 |         "ko": "초기 쿼리의 자리 표시자를 삽입 (필수)"
122 |     },
123 |     "twitter_button_tip": {
124 |         "en": "Follow me on Twitter",
125 |         "pt": "Siga-me no Twitter",
126 |         "es": "Sígueme en Twitter",
127 |         "fr": "Me suivre sur Twitter",
128 |         "de": "Folgen Sie mir auf Twitter",
129 |         "it": "Seguimi su Twitter",
130 |         "zh": "在 Twitter 上关注我",
131 |         "ja": "Twitterで私をフォロー",
132 |         "ko": "Twitter에서 나를 팔로우하세요"
133 |     },
134 |     "github_button_tip": {
135 |         "en": "View the source code on GitHub",
136 |         "pt": "Veja o código fonte no GitHub",
137 |         "es": "Ver el código fuente en GitHub",
138 |         "fr": "Voir le code source sur GitHub",
139 |         "de": "Quellcode auf GitHub anzeigen",
140 |         "it": "Visualizza il codice sorgente su GitHub",
141 |         "zh": "在 GitHub 上查看源代码",
142 |         "ja": "GitHub上のソースコードを見る",
143 |         "ko": "GitHub에서 소스 코드 보기"
144 |     },
145 |     "discord_button_tip": {
146 |         "en": "Join our Discord community",
147 |         "pt": "Junte-se à nossa comunidade no Discord",
148 |         "es": "Únete a nuestra comunidad de Discord",
149 |         "fr": "Rejoignez notre communauté Discord",
150 |         "de": "Treten Sie unserer Discord-Community bei",
151 |         "it": "Unisciti alla nostra comunità su Discord",
152 |         "zh": "加入我们的 Discord 社区",
153 |         "ja": "私たちのDiscordコミュニティに参加してください",
154 |         "ko": "우리의 Discord 커뮤니티에 가입하세요"
155 |     }
156 | }
157 |

--------------------------------------------------------------------------------
/src/util/promptManager.ts:
--------------------------------------------------------------------------------
  1 | import { SearchResult } from "src/content-scripts/api"
  2 | import Browser from "webextension-polyfill"
  3 | import { v4 as uuidv4 } from 'uuid'
  4 | import { getCurrentLanguageName, getLocaleLanguage, getTranslation, localizationKeys } from "./localization"
  5 | import { getUserConfig } from "./userConfig"
  6 | 
  7 | export const DEFAULT_PROMPT_KEY = 'default_prompt'
  8 | export const CURRENT_PROMPT_UUID_KEY = 'promptUUID'
  9 | export const SAVED_PROMPTS_KEY = 'saved_prompts'
 10 | 
 11 | export interface Prompt {
 12 |     uuid?: string,
 13 |     name: string,
 14 |     text: string
 15 | }
 16 | 
 17 | export const compilePrompt = async (results: SearchResult[], query: string) => {
 18 |     const currentPrompt = await getCurrentPrompt()
 19 |     const formattedResults = formatWebResults(results)
 20 |     const currentDate = new Date().toLocaleDateString()
 21 |     const prompt = replaceVariables(currentPrompt.text, {
 22 |         '{web_results}': formattedResults,
 23 |         '{query}': query,
 24 |         '{current_date}': currentDate
 25 |     })
 26 |     return prompt
 27 | }
 28 | 
 29 | const formatWebResults = (results: SearchResult[]) => {
 30 |     let counter = 1
 31 |     return results.reduce((acc, result): string => acc += `[${counter++}] "${result.body}"\nURL: ${result.href}\n\n`, "")
 32 | }
 33 | 
 34 | const replaceVariables = (prompt: string, variables: { [key: string]: string }) => {
 35 |     let newPrompt = prompt
 36 |     for (const key in variables) {
 37 |         try {
 38 |             newPrompt = newPrompt.replaceAll(key, variables[key])
 39 |         } catch (error) {
 40 |             console.log("WebChatGPT error --> API error: ", error)
 41 |         }
 42 |     }
 43 |     return newPrompt
 44 | }
 45 | 
 46 | export const getDefaultPrompt = () => {
 47 |     return {
 48 |         name: 'Default prompt',
 49 |         // text: getTranslation(localizationKeys.defaultPrompt),
 50 |         text: getTranslation(localizationKeys.defaultPrompt, 'en') + (getLocaleLanguage() !== 'en' ? '\nReply in ' + getCurrentLanguageName() : ''),
 51 |         uuid: 'default'
 52 |     }
 53 | }
 54 | 
 55 | const getDefaultEnglishPrompt = () => {
 56 |     return { name: 'Default English', text: getTranslation(localizationKeys.defaultPrompt, 'en'), uuid: 'default_en' }
 57 | }
 58 | 
 59 | export const getCurrentPrompt = async () => {
 60 |     const userConfig = await getUserConfig()
 61 |     const currentPromptUuid = userConfig.promptUUID
 62 |     const savedPrompts = await getSavedPrompts()
 63 |     return savedPrompts.find((i: Prompt) => i.uuid === currentPromptUuid) || getDefaultPrompt()
 64 | }
 65 | 
 66 | export const getSavedPrompts = async (addDefaults: boolean = true) => {
 67 |     const data = await Browser.storage.sync.get([SAVED_PROMPTS_KEY])
 68 |     const savedPrompts = data[SAVED_PROMPTS_KEY] || []
 69 | 
 70 |     if (addDefaults)
 71 |         return addDefaultPrompts(savedPrompts)
 72 | 
 73 |     return savedPrompts
 74 | }
 75 | 
 76 | function addDefaultPrompts(prompts: Prompt[]) {
 77 | 
 78 |     if (getLocaleLanguage() !== 'en') {
 79 |         addPrompt(prompts, getDefaultEnglishPrompt())
 80 |     }
 81 |     addPrompt(prompts, getDefaultPrompt())
 82 |     return prompts
 83 | 
 84 |     function addPrompt(prompts: Prompt[], prompt: Prompt) {
 85 |         const index = prompts.findIndex((i: Prompt) => i.uuid === prompt.uuid)
 86 |         if (index >= 0) {
 87 |             prompts[index] = prompt
 88 |         } else {
 89 |             prompts.unshift(prompt)
 90 |         }
 91 |     }
 92 | }
 93 | 
 94 | export const savePrompt = async (prompt: Prompt) => {
 95 |     let savedPrompts = await getSavedPrompts(false)
 96 |     const index = savedPrompts.findIndex((i: Prompt) => i.uuid === prompt.uuid)
 97 |     if (index >= 0) {
 98 |         savedPrompts[index] = prompt
 99 |     } else {
100 |         prompt.uuid = uuidv4()
101 |         savedPrompts.push(prompt)
102 |     }
103 | 
104 |     await Browser.storage.sync.set({ [SAVED_PROMPTS_KEY]: savedPrompts })
105 | }
106 | 
107 | export const deletePrompt = async (prompt: Prompt) => {
108 |     let savedPrompts = await getSavedPrompts()
109 |     savedPrompts = savedPrompts.filter((i: Prompt) => i.uuid !== prompt.uuid)
110 |     await Browser.storage.sync.set({ [SAVED_PROMPTS_KEY]: savedPrompts })
111 | }
112 |

--------------------------------------------------------------------------------
/src/util/regionOptions.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     { "value": "wt-wt", "label": "Any region" },
 3 |     { "value": "xa-ar", "label": "Saudi Arabia" },
 4 |     { "value": "xa-en", "label": "Saudi Arabia (en)" },
 5 |     { "value": "ar-es", "label": "Argentina" },
 6 |     { "value": "au-en", "label": "Australia" },
 7 |     { "value": "at-de", "label": "Austria" },
 8 |     { "value": "be-fr", "label": "Belgium (fr)" },
 9 |     { "value": "be-nl", "label": "Belgium (nl)" },
10 |     { "value": "br-pt", "label": "Brazil" },
11 |     { "value": "bg-bg", "label": "Bulgaria" },
12 |     { "value": "ca-en", "label": "Canada" },
13 |     { "value": "ca-fr", "label": "Canada (fr)" },
14 |     { "value": "ct-ca", "label": "Catalan" },
15 |     { "value": "cl-es", "label": "Chile" },
16 |     { "value": "cn-zh", "label": "China" },
17 |     { "value": "co-es", "label": "Colombia" },
18 |     { "value": "hr-hr", "label": "Croatia" },
19 |     { "value": "cz-cs", "label": "Czech Republic" },
20 |     { "value": "dk-da", "label": "Denmark" },
21 |     { "value": "ee-et", "label": "Estonia" },
22 |     { "value": "fi-fi", "label": "Finland" },
23 |     { "value": "fr-fr", "label": "France" },
24 |     { "value": "de-de", "label": "Germany" },
25 |     { "value": "gr-el", "label": "Greece" },
26 |     { "value": "hk-tzh", "label": "Hong Kong" },
27 |     { "value": "hu-hu", "label": "Hungary" },
28 |     { "value": "in-en", "label": "India" },
29 |     { "value": "id-id", "label": "Indonesia" },
30 |     { "value": "id-en", "label": "Indonesia (en)" },
31 |     { "value": "ie-en", "label": "Ireland" },
32 |     { "value": "il-he", "label": "Israel" },
33 |     { "value": "it-it", "label": "Italy" },
34 |     { "value": "jp-jp", "label": "Japan" },
35 |     { "value": "kr-kr", "label": "Korea" },
36 |     { "value": "lv-lv", "label": "Latvia" },
37 |     { "value": "lt-lt", "label": "Lithuania" },
38 |     { "value": "xl-es", "label": "Latin America" },
39 |     { "value": "my-ms", "label": "Malaysia" },
40 |     { "value": "my-en", "label": "Malaysia (en)" },
41 |     { "value": "mx-es", "label": "Mexico" },
42 |     { "value": "nl-nl", "label": "Netherlands" },
43 |     { "value": "nz-en", "label": "New Zealand" },
44 |     { "value": "no-no", "label": "Norway" },
45 |     { "value": "pe-es", "label": "Peru" },
46 |     { "value": "ph-en", "label": "Philippines" },
47 |     { "value": "ph-tl", "label": "Philippines (tl)" },
48 |     { "value": "pl-pl", "label": "Poland" },
49 |     { "value": "pt-pt", "label": "Portugal" },
50 |     { "value": "ro-ro", "label": "Romania" },
51 |     { "value": "ru-ru", "label": "Russia" },
52 |     { "value": "sg-en", "label": "Singapore" },
53 |     { "value": "sk-sk", "label": "Slovak Republic" },
54 |     { "value": "sl-sl", "label": "Slovenia" },
55 |     { "value": "za-en", "label": "South Africa" },
56 |     { "value": "es-es", "label": "Spain" },
57 |     { "value": "se-sv", "label": "Sweden" },
58 |     { "value": "ch-de", "label": "Switzerland (de)" },
59 |     { "value": "ch-fr", "label": "Switzerland (fr)" },
60 |     { "value": "ch-it", "label": "Switzerland (it)" },
61 |     { "value": "tw-tzh", "label": "Taiwan" },
62 |     { "value": "th-th", "label": "Thailand" },
63 |     { "value": "tr-tr", "label": "Turkey" },
64 |     { "value": "ua-uk", "label": "Ukraine" },
65 |     { "value": "uk-en", "label": "United Kingdom" },
66 |     { "value": "us-en", "label": "United States" },
67 |     { "value": "ue-es", "label": "United States (es)" },
68 |     { "value": "ve-es", "label": "Venezuela" },
69 |     { "value": "vn-vi", "label": "Vietnam" }
70 | ]

--------------------------------------------------------------------------------
/src/util/timePeriodOptions.json:
--------------------------------------------------------------------------------
1 | [
2 |   { "value": "", "label": "Any time" },
3 |   { "value": "d", "label": "Past day" },
4 |   { "value": "w", "label": "Past week" },
5 |   { "value": "m", "label": "Past month" },
6 |   { "value": "y", "label": "Past year" }
7 | ]
8 |

--------------------------------------------------------------------------------
/src/util/userConfig.ts:
--------------------------------------------------------------------------------
 1 | import { defaults } from 'lodash-es'
 2 | import Browser from 'webextension-polyfill'
 3 | import { getSystemLanguage } from './localization'
 4 | 
 5 | 
 6 | const defaultConfig = {
 7 |     numWebResults: 1,
 8 |     webAccess: true,
 9 |     region: 'wt-wt',
10 |     timePeriod: '',
11 |     language: getSystemLanguage(),
12 |     promptUUID: 'default',
13 | }
14 | 
15 | export type UserConfig = typeof defaultConfig
16 | 
17 | export async function getUserConfig(): Promise<UserConfig> {
18 |     const config = await Browser.storage.sync.get(defaultConfig)
19 |     return defaults(config, defaultConfig)
20 | }
21 | 
22 | export async function updateUserConfig(config: Partial<UserConfig>): Promise<void> {
23 |     await Browser.storage.sync.set(config)
24 | }
25 |

--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   corePlugins: {
 4 |     preflight: false,
 5 |   },
 6 |   content: ["./src/**/*.{html,tsx}"],
 7 |   theme: {
 8 |     extend: {},
 9 |   },
10 |   plugins: [require("daisyui")],
11 |   daisyui: {
12 |     themes: ["dark"],
13 |   },
14 |   prefix: "wcg-",
15 | };
16 |

--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"compilerOptions": {
 3 | 		"target": "ESNext",
 4 | 		"module": "ESNext",
 5 | 		"moduleResolution": "Node",
 6 | 		"esModuleInterop": true,
 7 | 		"jsx": "react",
 8 | 		"jsxFactory": "h",
 9 | 		"jsxFragmentFactory": "Fragment",
10 | 		"noEmit": true,
11 | 		"allowJs": true,
12 | 		"checkJs": true,
13 | 		"skipLibCheck": true,
14 | 		"baseUrl": "./",
15 | 		"paths": {
16 | 			"react": ["./node_modules/preact/compat"],
17 | 			"react-dom": ["./node_modules/preact/compat"]
18 | 		},
19 | 		"resolveJsonModule": true
20 | 	},
21 | 	"include": ["src/**/*"]
22 | }
23 |

--------------------------------------------------------------------------------