V0.6 release

This release includes the fixes from the 0.5.9 pre-release plus:

- Shortcut support
- A bug fix for the buttons not showing up sometimes
- Several bug fixes & improvements for the user input box.

Author: TiesdeKok

README.md

@@ -1,21 +1,26 @@
 # ChatGPT for Jupyter
 
-A browser extension to provide various helper functions in Jupyter Notebooks and Jupyter Lab, powered by ChatGPT.
+A browser extension to provide various helper functions in Jupyter Notebooks and Jupyter Lab, powered by ChatGPT or GPT-4.
 
-Primary functions, have ChatGPT:
+Primary functions, have ChatGPT/GPT-4:
 
 - **Format** - Automatically add comments, docstrings, and formatting to your code cell.
 - **Explain** - Explain the content of your code cell, ELI5 style.
 - **Debug** - Help you debug an error message in your code cell.
 - **Complete** - Help you complete a code snippet in your code cell.
 - **Review** - Provide a code review of your code cell.
+- **Ask a question** - Ask ChatGPT a custom question.
+- **Voice command** - Ask ChatGPT a custom question through your microphone.
+    - Note: this requires an OpenAI API key and uses the OpenAI Whisper API, which charges $0.006 per minute.
 
-**Project status:** Stable - but ChatGPT changes frequently - if you run into problems or have feature suggestions --> Submit them as an issue!
+**Note: *Ask a question* and *Voice command* are a work-in-progress.**
+
+**Project status:** Stable - but developments happen frequently - if you run into problems or have feature suggestions --> Submit them as an issue!
 
 **Major acknowledgements:** 
 
-- [ChatGPT](https://openai.com/blog/chatgpt/) for doing all the heavy lifting. 
-- [wong2/chat-gpt-google-extension](https://github.com/wong2/chat-gpt-google-extension) for serving as a base for the extension. The entire backend integration with ChatGPT is built by them and I use it as-is (including the readme instructions below). It is phenomenal work and I highly recommend checking it out.
+- [ChatGPT/GPT-4](https://openai.com/blog/chatgpt/) for doing all the heavy lifting. 
+- [wong2/chat-gpt-google-extension](https://github.com/wong2/chat-gpt-google-extension) for serving as the original base for the extension.
 
 **Caveats & Warnings:**
 

build.mjs

@@ -25,7 +25,7 @@ async function runEsbuild() {
     bundle: true,
     outdir: outdir,
     treeShaking: true,
-    minify: false,
+    minify: true,
     legalComments: 'none',
     jsxFactory: 'h',
     jsxFragment: 'Fragment',

src/background/index.ts

@@ -30,7 +30,6 @@ async function generateAnswers(port: Browser.Runtime.Port, question: string) {
       prompt: question,
       signal: controller.signal,
       onEvent(event) {
-        console.log("debug")
         if (event.type === 'done') {
           port.postMessage({ event: 'DONE' })
           return
@@ -86,7 +85,6 @@ port.onMessage.addListener(async (msg) => {
     if (msg.type === 'GENERATE_ANSWERS') {
         await generateAnswers(port, msg.question);
     } else if (msg.type === 'TRANSCRIBE_AUDIO') {
-        console.log("received", msg.dataUrl)
         await transcribeAudio(port, msg.dataUrl);
     }
     } catch (err: any) {
@@ -115,4 +113,71 @@ Browser.runtime.onInstalled.addListener((details) => {
 if (details.reason === 'install') {
     Browser.runtime.openOptionsPage()
 }
-})
+})
+
+Browser.commands.onCommand.addListener((command) => {
+    if (command === 'format_code') {
+      Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+        if (tabs.length === 0 || !tabs[0].id) {
+          return;
+        }
+        Browser.tabs.sendMessage(tabs[0].id, { action: 'formatCode' });
+      });
+    }
+
+    if (command === 'explain_code') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+          if (tabs.length === 0 || !tabs[0].id) {
+            return;
+          }
+          Browser.tabs.sendMessage(tabs[0].id, { action: 'explainCode' });
+        });
+      }
+
+    if (command === 'debug_code') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+            if (tabs.length === 0 || !tabs[0].id) {
+            return;
+            }
+            Browser.tabs.sendMessage(tabs[0].id, { action: 'debugCode' });
+        });
+    }
+
+    if (command === 'complete_code') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+            if (tabs.length === 0 || !tabs[0].id) {
+            return;
+            }
+            Browser.tabs.sendMessage(tabs[0].id, { action: 'completeCode' });
+        });
+    }
+
+    if (command === 'review_code') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+            if (tabs.length === 0 || !tabs[0].id) {
+            return;
+            }
+            Browser.tabs.sendMessage(tabs[0].id, { action: 'reviewCode' });
+        });
+    }
+
+    if (command === 'ask_question') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+            if (tabs.length === 0 || !tabs[0].id) {
+            return;
+            }
+            Browser.tabs.sendMessage(tabs[0].id, { action: 'askQuestion' });
+        });
+    }
+
+    if (command === 'voice_command') {
+        Browser.tabs.query({ active: true, currentWindow: true }).then((tabs) => {
+            if (tabs.length === 0 || !tabs[0].id) {
+            return;
+            }
+            Browser.tabs.sendMessage(tabs[0].id, { action: 'voiceCommand' });
+        });
+    }
+
+  });
+  

src/content-script/ChatGPTQueryBuilder.tsx

@@ -37,6 +37,7 @@ function BuildQuery(
             return ""
         }
     } else {
+        console.log("ChatGPT Jupyter: Warning - Unknown site name")
         return ""
     }
 
@@ -141,7 +142,7 @@ function BuildQuery(
     /*                 Third, build the query string and return it                */
     /* -------------------------------------------------------------------------- */
     let query = ""
-    if (code && code) {
+    if (code || (type == "question" && userInput)) {
         if (type == "complete") {
             query = promptTemplates["complete"](prev_cell_text, code)
         } else if (type == "explain") {
@@ -156,14 +157,13 @@ function BuildQuery(
             if (userInput) {
                 query = promptTemplates["question"](userInput)
             } else {
-                // If no user input, then error
                 console.log("ChatGPT Jupyter: Error - No user input provided")
+                return ""
             }
         }
-
-        //console.log(query)
         return query
     } else {
+        console.log("ChatGPT Jupyter: Error - No code found")
         return ""
     }
 }

src/content-script/FloatingInput.tsx

@@ -1,62 +1,90 @@
-// FloatingInput.tsx
-import React, { useImperativeHandle, useRef, useState } from 'react';
+import React, { useImperativeHandle, useRef, useState, useEffect } from 'react';
 import { Rnd } from 'react-rnd';
 import { GrabberIcon, XIcon } from '@primer/octicons-react';
 
-import { submit_and_add_question } from './ChatGPTRender';
-
-
 interface FloatingInputProps {
   onSubmit: (inputValue: string) => void;
 }
 
 const FloatingInput = React.forwardRef((props: FloatingInputProps, ref) => {
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
   const handleSubmit = () => {
     if (textareaRef.current) {
       props.onSubmit(textareaRef.current.value);
       textareaRef.current.value = '';
-    setIsVisible(false);
+      setIsVisible(false);
     }
   };
 
   const handleClose = () => {
     setIsVisible(false);
   };
 
-  const handleOpen = () => { // Add this function
+  const handleOpen = () => {
     setIsVisible(true);
   };
 
-// Expose the handleOpen function to the parent component
-useImperativeHandle(ref, () => ({
+  useImperativeHandle(ref, () => ({
     openFloatingInput: handleOpen,
-    }));
+  }));
 
+  // Focus textarea when isVisible changes to true
+  useEffect(() => {
+    if (isVisible && textareaRef.current) {
+      textareaRef.current.focus();
+    }
+  }, [isVisible]);
+
+  // Add event listener for Ctrl+Enter
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && e.ctrlKey) {
+      handleSubmit();
+    } else if (e.key === 'Escape') {
+        handleClose();
+    } 
+    e.stopPropagation();
+  };
+    
   const windowWidth = window.innerWidth;
   const windowHeight = window.innerHeight;
   const boxWidth = 600;
   const boxHeight = 300;
-  const initialX = (windowWidth - boxWidth) / 2;
-  const initialY = (windowHeight - boxHeight) / 2;
+  const topPercentage = (windowHeight - boxHeight) / (2 * windowHeight) * 100;
+  const leftPercentage = (windowWidth - boxWidth) / (2 * windowWidth) * 100;
 
   if (!isVisible) {
     return null;
   }
+    
 
   return (
-    <Rnd
-      default={{
-        x: initialX,
-        y: initialY,
-        width: boxWidth,
-        height: boxHeight,
+    <div>
+    <div className="backdrop" onClick={handleClose}></div>
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'fixed',
+        top: `${topPercentage}%`,
+        left: `${leftPercentage}%`,
+        right: 0,
+        bottom: 0,
+        zIndex: 9999998,
       }}
-      minWidth={boxWidth/2}
-      minHeight={boxHeight/2}
-      dragHandleClassName="drag-handle"
+    >
+      <Rnd
+        default={{
+          x: 0,
+          y: 0,
+          width: boxWidth,
+          height: boxHeight,
+        }}
+        minWidth={boxWidth / 2}
+        minHeight={boxHeight / 2}
+      dragHandleClassName='drag-handle'
       enableResizing={{
         top: true,
         right: true,
@@ -69,7 +97,8 @@ useImperativeHandle(ref, () => ({
       }}
       cancel="textarea, button"
       dragGrid={[40, 40]}
-      >
+      style = {{zIndex: 9999999}}
+    >
       <div className="floating-input-container">
         <div className="top-bar">
           <div className="drag-handle">
@@ -85,11 +114,14 @@ useImperativeHandle(ref, () => ({
             ref={textareaRef}
             style={{ flex: 1 }}
             placeholder="Type your input"
+            onKeyDown={handleKeyDown}
           />
         </div>
-        <button onClick={handleSubmit}>Submit</button>
+        <button onClick={handleSubmit}>Submit (ctrl+Enter)</button>
       </div>
-    </Rnd>
+      </Rnd>
+    </div>
+    </div>
   );
 });
 

src/content-script/Interface.tsx

@@ -1,6 +1,7 @@
 import { Icon } from '@primer/octicons-react'
 
 interface Props { 
+    id : string,
     name : string,
     onClick : () => void,
     icon : Icon,
@@ -11,7 +12,7 @@ interface Props {
 export function Button(props: Props) {  
     const isNotebook = props.siteName == "notebook"
     return (
-        <button className="btn btn-default btn-xs chat-gpt-button" onClick={props.onClick } disabled={props.disabled} style= {{marginTop: isNotebook ? '-0.5px' : '4px' }} title={props.name} >
+        <button id={props.id} className="btn btn-default btn-xs chat-gpt-button" onClick={props.onClick } disabled={props.disabled} style= {{marginTop: isNotebook ? '-0.5px' : '4px' }} title={props.name} >
             <props.icon size='small' className="icon" />
         </button> 
     )