Merge pull request #4 from ali-h-kudeir/fix/answer-auto-retreival

fixed auto answer retrieval after the first question

README.md

@@ -1,4 +1,4 @@
-# ChatGPT for Google
+# ChatGPT for Google Colab
 
 ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/ali-h-kudeir/chatgpt-google-colab/pre-release-build.yml)
 ![Visitors](https://visitor-badge.glitch.me/badge?page_id=ali-h-kudeir.chatgpt-google-colab&left_color=green&right_color=red)

src/content-script/ChatGPTCard.tsx

@@ -12,15 +12,17 @@ interface Props {
 function ChatGPTCard({ question, userConfig }: Props) {
   const [prompt, setPrompt] = useState('');
   const [includeCurrentCell, setIncludeCurrentCell] = useState(true);
-  const [retrieve, setRetrieve] = useState(false);
+
   const [closed, setClosed] = useState(false);
 
+  const [body, setBody] = useState('');
+
   const language = userConfig.language === Language.Auto ? '' : `(in ${userConfig.language})`;
 
   const query = includeCurrentCell ? `${prompt}\n${language}\n${question}` : `${prompt}\n${language}`;
 
   const handleButtonClick = () => {
-    setRetrieve(true);
+    setBody(query);
   };
 
   if (closed) {
@@ -70,7 +72,7 @@ function ChatGPTCard({ question, userConfig }: Props) {
             </label>
           </div>
         </div>
-        <ChatGPTQuery query={query} retrieve={retrieve} />
+        <ChatGPTQuery body={body} />
         <div className="flex items-center gap-5 mt-5">
           <button className="colab-button z-20 relative mt-5 cursor-pointer" onClick={() => setClosed(true)}>
             Close

src/content-script/ChatGPTQuery.tsx

@@ -11,11 +11,10 @@ import { shouldShowRatingTip } from './utils.js';
 export type QueryStatus = 'success' | 'error' | undefined;
 
 interface Props {
-  query: string;
-  retrieve: boolean;
+  body: string;
 }
 
-function ChatGPTQuery({ query, retrieve }: Props) {
+function ChatGPTQuery({ body }: Props) {
   const [answer, setAnswer] = useState<Answer | null>(null);
   const [error, setError] = useState('');
   const [retry, setRetry] = useState(0);
@@ -27,7 +26,7 @@ function ChatGPTQuery({ query, retrieve }: Props) {
   const isChrome = /chrome/i.test(navigator.userAgent);
 
   useEffect(() => {
-    if (!retrieve) {
+    if (!body) {
       return;
     }
     const port = Browser.runtime.connect();
@@ -43,12 +42,12 @@ function ChatGPTQuery({ query, retrieve }: Props) {
       }
     };
     port?.onMessage.addListener(listener);
-    port?.postMessage({ question: query });
+    port?.postMessage({ question: body });
     return () => {
       port?.onMessage.removeListener(listener);
       port?.disconnect();
     };
-  }, [query, retrieve, retry]);
+  }, [body, retry]);
 
   // retrieve error on focus
   useEffect(() => {
@@ -72,7 +71,7 @@ function ChatGPTQuery({ query, retrieve }: Props) {
     if (status === 'success') {
       captureEvent('show_answer', { host: location.host, language: navigator.language });
     }
-  }, [query, status]);
+  }, [body, status]);
 
   const clickCopyToClipboard = async () => {
     await navigator.clipboard.writeText(answer?.text ?? '');
@@ -147,7 +146,7 @@ function ChatGPTQuery({ query, retrieve }: Props) {
     );
   }
 
-  return retrieve ? <p className="text-[#b6b8ba] animate-pulse">Waiting for ChatGPT response...</p> : null;
+  return body ? <p className="text-[#b6b8ba] animate-pulse">Waiting for ChatGPT response...</p> : null;
 }
 
 export default memo(ChatGPTQuery);