Merge pull request #124 from qunash/dev

main <- dev

.hintrc

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/forms": "off"
+  }
+}

README.md

@@ -31,16 +31,18 @@ https://user-images.githubusercontent.com/3750161/214155508-5c1ad4d8-b565-4fe0-9
 <details>
    <summary><h2>Manual installation</h2></summary>
 
+  ℹ️ Don't forget to disable the extension installed from the Web Store while you're testing manually installed version.
+
   ### Chrome, Microsoft Edge, etc.
-  1. Download the prebuilt chrome zip file from [here](https://github.com/qunash/chatgpt-advanced/tree/main/build).
+  1. Download the prebuilt chrome zip file from [here](build).
   2. Unzip the file.
   3. Open `chrome://extensions` in Chrome / `edge://extensions` in Microsoft Edge.
   4. Enable developer mode (top right corner).
   5. Click on `Load unpacked` and select the unzipped folder.
   6. Go to [ChatGPT](https://chat.openai.com/chat/) and enjoy!
 
   ### Firefox
-  1. Download prebuilt firefox zip file from [here](https://github.com/qunash/chatgpt-advanced/tree/main/build).
+  1. Download prebuilt firefox zip file from [here](build).
 
   #### Temporary installation, in official Release or Beta
   1. Go to `about:debugging#/runtime/this-firefox`.

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "webchatgpt",
-  "version": "3.1.5",
+  "version": "3.2.4",
   "license": "MIT",
   "scripts": {
     "build-dev": "node build.mjs",

src/_locales/zh_TW/messages.json

@@ -3,6 +3,6 @@
       "message": "WebChatGPT：有網路存取功能的 ChatGPT"
     },
     "appDesc": {
-      "message": "使用來自網絡的相關結果，增加 ChatGPT 的回答功能。"
+      "message": "使用來自網路的相關結果，增加 ChatGPT 的回答功能。"
     }
 }

src/background/bg.ts

@@ -24,8 +24,9 @@ if (manifest_version == 2) {
 Browser.commands.onCommand.addListener(async (command) => {
     if (command === "toggle-web-access") {
         Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
-            if (tabs[0].url.startsWith("https://chat.openai.com/")) {
-                Browser.tabs.sendMessage(tabs[0].id, "toggle-web-access")
+            const tab = tabs[0]
+            if (tab.url && tab.id && tab.url.startsWith("https://chat.openai.com/")) {
+                Browser.tabs.sendMessage(tab.id, "toggle-web-access")
             }
         })
     }
@@ -77,6 +78,7 @@ Browser.declarativeNetRequest.updateDynamicRules({
 function update_origin_for_ddg_in_firefox() {
     Browser.webRequest.onBeforeSendHeaders.addListener(
         (details) => {
+            if (!details.requestHeaders) return
             for (let i = 0; i < details.requestHeaders.length; ++i) {
                 if (details.requestHeaders[i].name === 'Origin')
                     details.requestHeaders[i].value = "https://lite.duckduckgo.com"

src/components/dropdown.tsx

@@ -4,12 +4,14 @@ function Dropdown(props: {
     value: string | number
     onChange: any
     options: Array<{ value: string | number; label: string }>
+    onClick?: () => void
 }): JSX.Element {
 
     return (
         <select className="wcg-block wcg-max-w-[9.5rem] wcg-border-0 wcg-bg-[#343541] wcg-p-2.5 wcg-pr-2 wcg-text-sm wcg-text-white focus:wcg-ring-0"
             value={props.value}
             onChange={props.onChange}
+            onClick={props.onClick}
         >
             {props.options.map(({ value, label }) => (
                 <option key={value} value={value}>{label}</option>

src/components/errorMessage.tsx

@@ -2,7 +2,7 @@ import { h } from 'preact'
 import { useEffect, useState } from 'preact/hooks'
 
 
-function ErrorMessage({ message }) {
+function ErrorMessage(props: { message: string }): h.JSX.Element | null {
     const [show, setShow] = useState(true)
 
     useEffect(() => {
@@ -12,11 +12,14 @@ function ErrorMessage({ message }) {
         return () => clearTimeout(timer)
     }, [])
 
-    return show && (
+    if (!props.message) return null
+    if (!show) return null
+
+    return (
         // <div className="absolute wcg-bottom-0 wcg-right-1 dark:wcg-text-white wcg-bg-red-500 wcg-p-4 wcg-rounded-lg wcg-mb-4 wcg-mr-4 wcg-text-sm">
         <div role="alert" className="absolute bottom-0 right-1 dark:text-white bg-red-500 p-4 rounded-lg mb-4 mr-4 text-sm">
             <b>An error occurred</b><br />
-            {message}<br /><br />
+            {props.message}<br /><br />
             Please Check the console for more details. (Ctrl+Shift+J)
         </div>
     )

src/components/navBar.tsx

@@ -17,7 +17,7 @@ const NavBar = (
 
     return (<div className="wcg-navbar wcg-sticky wcg-top-0 wcg-z-30 wcg-rounded-lg wcg-bg-base-200">
         <div className="wcg-flex-1 wcg-items-center wcg-gap-2">
-            <img className="wcg-w-8 wcg-p-2" src="../icons/icon48.png" />
+            <img className="wcg-w-8 wcg-p-2" src="../icons/icon48.png" alt="WebChatGPT" />
             <span className="wcg-text-xl wcg-font-bold">WebChatGPT</span>
             <span className="font-mono text-xs text-opacity-50 wcg-pt-1">{version}</span>
         </div>

src/components/optionsEditor.tsx

@@ -0,0 +1,41 @@
+import { h } from "preact"
+import { useEffect, useState } from "preact/hooks"
+import { getTranslation, localizationKeys } from "src/util/localization"
+import { getUserConfig, updateUserConfig } from "src/util/userConfig"
+
+
+
+const OptionsEditor = () => {
+
+    const [trimLongText, setTrimLongText] = useState<boolean>(null)
+
+    useEffect(() => {
+        getUserConfig().then(config => {
+            setTrimLongText(config.trimLongText)
+        })
+    }, [])
+
+    return (
+
+        <div className="wcg-flex wcg-w-4/5 wcg-flex-col wcg-gap-2">
+            <h1 className="wcg-m-0 wcg-p-0 wcg-text-2xl">
+                {getTranslation(localizationKeys.UI.options)}
+            </h1 >
+            <div class="wcg-form-control">
+                <label className="wcg-label wcg-flex wcg-w-fit wcg-cursor-pointer wcg-items-center wcg-gap-2">
+                    <span className="wcg-label-text wcg-text-lg">{getTranslation(localizationKeys.UI.trimLongText)}</span>
+                    <input type="checkbox"
+                        checked={trimLongText}
+                        onChange={(e: Event) => {
+                            const checkbox: HTMLInputElement = e.target as HTMLInputElement
+                            setTrimLongText(checkbox.checked)
+                            updateUserConfig({ trimLongText: checkbox.checked })
+                        }}
+                    />
+                </label>
+            </div>
+        </div>
+    )
+}
+
+export default OptionsEditor

src/components/promptEditor.tsx

@@ -44,7 +44,7 @@ const PromptEditor = (
     useEffect(() => {
         setNameError(prompt.name.trim() === '')
         setTextError(prompt.text.trim() === '')
-        setWebResultsError(!prompt.text.includes('{web_results}'))
+        // setWebResultsError(!prompt.text.includes('{web_results}'))
         setQueryError(!prompt.text.includes('{query}'))
     }, [prompt])
 
@@ -129,20 +129,22 @@ const PromptEditor = (
                         ${prompt.uuid === 'default' || prompt.uuid === 'default_en' ? "wcg-hidden" : ""}`}
         >
             <div className="wcg-flex wcg-flex-row wcg-gap-4">
-                <TooltipWrapper tip={showErrors ? getTranslation(localizationKeys.placeHolderTips.webResults) : ""}>
+                {/* <TooltipWrapper tip={showErrors ? getTranslation(localizationKeys.placeHolderTips.webResults) : ""}> */}
+                <TooltipWrapper tip={getTranslation(localizationKeys.placeHolderTips.webResults)}>
                     <button
-                        className={`wcg-btn
-                        ${showErrors && webResultsError ? "wcg-btn-error" : hasWebResultsPlaceholder ? "wcg-btn-success" : "wcg-btn-warning"}
+                        // ${showErrors && webResultsError ? "wcg-btn-error" : hasWebResultsPlaceholder ? "wcg-btn-success" : "wcg-btn-warning"}
+                        className={`wcg-btn-success wcg-btn
                         wcg-p-1 wcg-lowercase`}
                         onClick={() => {
-                            setWebResultsError(false)
+                            // setWebResultsError(false)
                             handleInsertText('{web_results}')
                         }}
                     >
                         {"{web_results}"}
                     </button>
                 </TooltipWrapper>
-                <TooltipWrapper tip={showErrors ? getTranslation(localizationKeys.placeHolderTips.query) : ""}>
+                {/* <TooltipWrapper tip={showErrors ? getTranslation(localizationKeys.placeHolderTips.query) : ""}> */}
+                <TooltipWrapper tip={getTranslation(localizationKeys.placeHolderTips.query)}>
                     <button
                         className={`wcg-btn
                         ${showErrors && queryError ? "wcg-btn-error" : hasQueryPlaceholder ? "wcg-btn-success" : "wcg-btn-warning"}
@@ -166,6 +168,7 @@ const PromptEditor = (
             </div>
 
             <button
+                type={"button"}
                 className="wcg-btn-primary wcg-btn wcg-text-base"
                 onClick={handleSave}
             >
@@ -177,6 +180,7 @@ const PromptEditor = (
     const PromptList = (
         <div>
             <button
+                type={"button"}
                 className="wcg-btn-primary wcg-btn wcg-w-full wcg-text-base"
                 onClick={handleAdd}>
                 <span class="material-symbols-outlined wcg-mr-2">
@@ -219,6 +223,7 @@ const PromptEditor = (
 
     const btnDelete = (
         <button
+            type={"button"}
             className={`wcg-btn wcg-text-base
                     ${deleteBtnText === "check" ? "wcg-btn-error" : "wcg-btn-primary"}
                     ${prompt.uuid === 'default' || prompt.uuid === 'default_en' ? "wcg-hidden" : ""}`}
@@ -239,24 +244,29 @@ const PromptEditor = (
             value={prompt.text}
             onInput={handleTextareaChange}
             disabled={prompt.uuid === 'default' || prompt.uuid === 'default_en'}
+            title="Prompt template text"
         />
     )
 
     return (
-        <div className="wcg-rounded-box wcg-mt-10 wcg-flex wcg-h-[32rem] wcg-w-4/5 wcg-flex-row wcg-gap-4 wcg-border wcg-py-4">
-            <div className="wcg-w-1/3">
-                {PromptList}
-            </div>
-
-            <div className="wcg-flex wcg-w-2/3 wcg-flex-col">
-                <div className="wcg-flex wcg-flex-row wcg-items-center wcg-gap-2">
-                    {nameInput}
-                    {btnDelete}
+        <div className="wcg-rounded-box wcg-flex wcg-min-h-[32rem] wcg-w-4/5 wcg-flex-col wcg-gap-4 wcg-border wcg-py-6">
+
+            <h1 className="wcg-m-0 wcg-p-2 wcg-text-2xl">Prompt Editor</h1>
+            <div className="wcg-flex wcg-flex-row wcg-gap-4">
+                <div className="wcg-w-1/3">
+                    {PromptList}
                 </div>
-                {textArea}
 
-                {actionToolbar}
-            </div>
+                <div className="wcg-flex wcg-w-2/3 wcg-flex-col">
+                    <div className="wcg-flex wcg-flex-row wcg-items-center wcg-gap-2">
+                        {nameInput}
+                        {btnDelete}
+                    </div>
+                    {textArea}
+
+                    {actionToolbar}
+                </div>
+            </div >
         </div >
     )
 }

src/components/slashCommandsMenu.tsx

@@ -1,9 +1,8 @@
-import { h, render } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
+import { h } from 'preact'
+import { useEffect, useState } from 'preact/hooks'
 import { icons } from 'src/util/icons'
 import { getTranslation, localizationKeys } from 'src/util/localization'
 import { getUserConfig } from 'src/util/userConfig'
-import SlashButton from './slashButton'
 
 interface Command {
     name: string
@@ -43,15 +42,15 @@ const SlashCommandItem = (props: {
     )
 }
 
-const renderSlashButton = (textarea: HTMLTextAreaElement, show: boolean, onClick: () => void) => {
-    let div = document.querySelector('wcg-slash-button-div')
-    if (div) div.remove()
+// const renderSlashButton = (textarea: HTMLTextAreaElement, show: boolean, onClick: () => void) => {
+//     let div = document.querySelector('wcg-slash-button-div')
+//     if (div) div.remove()
 
-    div = document.createElement('wcg-slash-button-div')
-    div.className = "self-center"
-    textarea.parentElement.insertBefore(div, textarea.parentElement.firstChild)
-    render(<SlashButton show={show} onclick={onClick} />, div)
-}
+//     div = document.createElement('wcg-slash-button-div')
+//     div.className = "self-center"
+//     textarea.parentElement.insertBefore(div, textarea.parentElement.firstChild)
+//     render(<SlashButton show={show} onclick={onClick} />, div)
+// }
 
 function SlashCommandsMenu(
     props: {
@@ -65,7 +64,7 @@ function SlashCommandsMenu(
     const [filteredCommands, setFilteredCommands] = useState<Command[]>(slashCommands)
 
 
-    const onTextAreaInput = (e: InputEvent) => updateFilter(e)
+    const onTextAreaInput = (e: Event) => updateFilter(e)
 
     const onTextAreaKeyDown = (e: KeyboardEvent) => {
 
@@ -112,6 +111,7 @@ function SlashCommandsMenu(
     }
 
     function setTextAreaValue(value: string, dispatchEvent = true) {
+        if (!props.textarea) return
         props.textarea.value = value
         if (dispatchEvent)
             props.textarea.dispatchEvent(new Event('input', { bubbles: true }))
@@ -157,7 +157,7 @@ function SlashCommandsMenu(
 
     return (
         <ul className={`flex-col flex-1 overflow-y-auto border border-white/20 rounded-md bg-gray-900 shadow-[0_0_10px_rgba(0,0,0,0.10)]`}>
-            <div className='px-3 p-2 text-xs text-white b-2 border-b border-white/20'>WebChatGPT Commands</div>
+            <li className='px-3 p-2 text-xs text-white b-2 border-b border-white/20'>WebChatGPT Commands</li>
 
             {filteredCommands.map((command) => {
                 return (
@@ -170,11 +170,11 @@ function SlashCommandsMenu(
                     </li>
                 )
             })}
-            <div className='px-3 p-2 text-xs text-white b-2 border-t border-white/20'>{
+            <li className='px-3 p-2 text-xs text-white b-2 border-t border-white/20'>{
                 getTranslation(localizationKeys.UI.youCanUseDuckDuckGoBangs)
             }
-                <a href="https://duckduckgo.com/bang" target="_blank" rel="noreferrer" className="text-blue-500"> DuckDuckGo Bangs</a>
-            </div>
+                <a href="https://duckduckgo.com/bang" target="_blank" rel="noreferrer noopener" className="text-blue-500"> DuckDuckGo Bangs</a>
+            </li>
         </ul>
     )
 }