Fix bug.

Author: Zhongyi

.github/workflows/submit.yml

@@ -2,15 +2,15 @@ import type { PlasmoMessaging } from "@plasmohq/messaging";
 import { Configuration, OpenAIApi } from "openai";
 import fetchAdapter from "@vespaiach/axios-fetch-adapter";
 
-const handler: PlasmoMessaging.MessageHandler<{ message: string }> = async (req, res) => {
+const handler: PlasmoMessaging.MessageHandler<{ text: string, openaiKey: string }> = async (req, res) => {
     const configuration = new Configuration({
-        apiKey: "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"
+        apiKey: req.body.openaiKey,
     });
     const openai = new OpenAIApi(configuration);
 
     await openai.createCompletion({
         model: "text-davinci-003",
-        prompt: "Translate to Simplified Chinese, returns the HTML tags in the original text:\n\n" + req.body,
+        prompt: "Translate to Simplified Chinese, returns the HTML tags in the original text:\n\n" + req.body.text,
         temperature: 0.7,
         max_tokens: 60,
         top_p: 1.0,

background/messages/openai_summarize.ts

@@ -31,6 +31,7 @@ function ChatArticle () {
 
     return (
         <Rnd
+            id="rs-chat-container"
             ref={e => {
                 this.rnf = e;
             }}

background/messages/openai_translate.ts

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { getLatestState } from "~utils/state";
 import { ChatMessage, ChatMessageContext } from "~provider/chat";
+import { SettingContext } from "~provider/setting";
 
 const ChatUserMessage = (props) => {
     const { chatScrollRef } = React.useContext(ChatMessageContext);
@@ -25,6 +26,7 @@ const ChatUserMessage = (props) => {
 
 const ChatAssistantMessage = (props) => {
     const [message, setMessage] = useState("");
+    const { settingObject: { openaiKey } } = React.useContext(SettingContext);
     const { messages, setMessages, chatScrollRef, isLoading, setIsLoading } = React.useContext(ChatMessageContext);
 
     useEffect(() => {
@@ -38,7 +40,7 @@ const ChatAssistantMessage = (props) => {
     function handleMessages () {
         const threshold = 4096 - 512;
 
-        let limitMessages = []
+        let limitMessages = [];
         let currentLength = 0;
 
         for (let i = messages.length - 1; i >= 1; i--) {
@@ -55,9 +57,10 @@ const ChatAssistantMessage = (props) => {
     }
 
     const callOpenAI = function () {
+        // check openaiKey
         const myHeaders = new Headers();
         myHeaders.append("Content-Type", "application/json");
-        myHeaders.append("Authorization", "Bearer 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");
+        myHeaders.append("Authorization", `Bearer ${openaiKey}`);
 
         const raw = JSON.stringify({
             "model": "gpt-3.5-turbo-0301",
@@ -78,7 +81,13 @@ const ChatAssistantMessage = (props) => {
                 const stream = response.body;
                 const reader = stream.getReader();
 
-                // read from the stream
+                if (!response.ok) {
+                    setMessage("请检查 API Key 是否正确，「Settings -> OpenAI Key`」");
+                    setIsLoading(false);
+
+                    return
+                }
+
                 function readStream () {
                     reader.read().then(async ({ done, value }) => {
                         if (done) {
@@ -130,11 +139,6 @@ const ChatAssistantMessage = (props) => {
                 }
 
                 readStream();
-
-            })
-            .catch(error => {
-                setIsLoading(false);
-                console.log("error", error);
             });
 
     };

components/chat_article.tsx

@@ -13,19 +13,18 @@ function OpenAI () {
 
     const handleOpenaiButtonClick = function () {
         setButtonState(!buttonState);
+        const openai = document.querySelectorAll("plasmo-csui")[0]
+            .shadowRoot
+            .querySelector<HTMLElement>("#rs-chat-container");
 
-        // const openai = document.querySelectorAll("plasmo-csui")[0]
-        //     .shadowRoot
-        //     .querySelector<HTMLElement>("#rs-openai-chat");
-        //
-        // openai.style.display = "block";
+        openai.style.display = !buttonState ? "block" : "none";
 
     };
 
     return (
         <div className={"setting select-none"}>
             <Tooltip message={"OpenAI"}>
-                <button className={"outline-none"}>
+                <button className={"outline-none"} onClick={handleOpenaiButtonClick}>
                     <IconOpenAI />
                 </button>
             </Tooltip>

components/chat_messgae.tsx

@@ -9,7 +9,6 @@ import PageWidthLeft from "data-base64:~assets/page-width-left.svg";
 import PageWidthRight from "data-base64:~assets/page-width-right.svg";
 import IconSetting from "react:~/assets/setting-config.svg";
 import Tooltip from "~components/tooltip";
-import { debounce } from "~utils/debounce";
 
 export enum EnumLineSpacing {
     Small = "1.4em",
@@ -129,14 +128,16 @@ function TranslateServiceSelect () {
 
 function OpenAIKeyInput () {
     const { settingObject: { openaiKey }, setSetting } = useContext(SettingContext);
+    const [value, setValue] = React.useState(openaiKey);
 
-    const handleOpenaiApiKeyChange = debounce(async function (e: React.ChangeEvent<HTMLInputElement>) {
-        await setSetting({ openaiKey: e.target.value });
-    }, 500);
+    const handleOpenaiApiKeyChange = function (e: React.ChangeEvent<HTMLInputElement>) {
+        setValue(e.target.value);
+        void setSetting({ openaiKey: e.target.value });
+    }
 
     return (
-        <input type="text" value={openaiKey} onChange={handleOpenaiApiKeyChange}
-            className={"text-[var(--setting-foreground)] text-[16px] outline-none p-[4px] bg-[white]"} />
+        <input type="text" value={value} onChange={handleOpenaiApiKeyChange}
+            className={"text-[var(--setting-foreground)] text-[12px] p-[4px] bg-[white] w-full"} />
     );
 }
 

components/openai.tsx

@@ -12,8 +12,7 @@ const TRANSLATED_TAG = "rs-translated";
 
 export const TRANSLATED_RESULT = "rs-translated-result";
 
-export const translateAnchor = async function (anchor: Element, translateService: string) {
-
+export const translateAnchor = async function (anchor: Element, translateService: string, openaiKey?: string) {
     if (anchor.getAttribute(TRANSLATED_TAG)) {
         return;
     }
@@ -37,7 +36,7 @@ export const translateAnchor = async function (anchor: Element, translateService
         const message = await sendToBackground({
             // @ts-ignore
             name: translateService,
-            body: translateService === EnumTranslateServices.TencentTranslate ? anchor.textContent : anchor.outerHTML
+            body: buildRequestBody(translateService, anchor, openaiKey)
         });
         console.log(message.message);
         const resp = JSON.parse(message.message);
@@ -58,3 +57,16 @@ export const translateAnchor = async function (anchor: Element, translateService
         console.log(e);
     }
 };
+
+const buildRequestBody = (translateService: string, anchor: Element, openaiKey: string) => {
+    if (translateService === EnumTranslateServices.TencentTranslate) {
+        return anchor.textContent;
+    } else if (translateService === EnumTranslateServices.GoogleTranslate) {
+        return anchor.outerHTML;
+    } else if (translateService === EnumTranslateServices.OpenaiTranslate) {
+        return {
+            "openaiKey": openaiKey,
+            "text": anchor.outerHTML
+        };
+    }
+}

components/setting.tsx

@@ -15,7 +15,7 @@ function Translate () {
             entries => {
                 for (const entry of entries) {
                     if (entry.isIntersecting) {
-                        void translateAnchor(entry.target, settingObject.translateService);
+                        void translateAnchor(entry.target, settingObject.translateService, settingObject.openaiKey);
                     } else {
                         // do nothing
                     }

components/tranlator.tsx

@@ -99,11 +99,11 @@ function ContainerWrap ({ children }: { children: ReactNode }) {
 function Title ({ title }: { title: string }) {
     const { translateOn } = useContext(ReaderContext);
     const ref = useRef<HTMLHeadingElement>(null);
-    const { settingObject: { translateService } } = useContext(SettingContext);
+    const { settingObject: { translateService, openaiKey } } = useContext(SettingContext);
 
     useEffect(() => {
         if (translateOn && ref && ref.current) {
-            void translateAnchor(ref.current, translateService);
+            void translateAnchor(ref.current, translateService, openaiKey);
         }
     }, [translateOn, ref, ref.current]);