V0.0.8 (#15)

* v0.0.8
albertocubeddu · Aug 6, 2024 · 8c9ecb5 · 8c9ecb5
1 parent 6f5687b
commit 8c9ecb5
Show file tree

Hide file tree

Showing 7 changed files with 149 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ Imagine a world where every user has access to powerful models (LLMs and more) d
 
 ## 📸 Screenshots
 
-Select and right-click—it's that easy!
+Select, right-click and selecte the functionality—it's that easy!
 ![action](./assets/showcase/action.png)
 
 Pick your favorite provider and select the model that excites you the most.
@@ -63,9 +63,7 @@ Move it somewhere else ASAP:
 
 ### Urgent & Important
 
--  [x] **Prompt Factory**: Add the ability to edit a single prompt.
 -  [ ] **Logging**: Determine a location to store log files.
--  [ ] **MoA**: Implement this feature.
 
 ### Urgent, Not Important
 
@@ -75,15 +73,14 @@ Move it somewhere else ASAP:
 -  [ ] Automated Testing
 -  [ ] Investigate if Playwright supports Chrome extension testing.
 -  [ ] Automated Tagging / Release
+-  [ ] Locale
 
 ### Important, Not Urgent
 
 -  [ ] UI for the Prompt Factory is not intuitive and the "save all" button UX is cr@p.
 -  [ ] The sidebar API doesn't work after the storage API is called (User Interaction must be done)
 -  [ ] Move files to a `/src` folder to improve organization.
 -  [ ] Strategically organize the codebase structure.
--  [ ] Perfect the README documentation.
--  [x] Evaluate the necessity of `executeScript`.
 -  [ ] Decide on a package manager: npm, pnpm, or yarn.
 
 ### Not Urgent, Not Important
@@ -119,11 +116,17 @@ Move it somewhere else ASAP:
 -  ShadCn -> All the UI?
 -  Plasmo -> The Framework
 -  Groq -> Extra credits
+-  Icons -> icons8
 
 # Changelog
 
 ### 0.0.8 (under dev)
 
+-  Removed an unnecessary dependency to comply with Chrome Store publication guidelines.
+-  Introduced a new icon.
+-  Implemented a loading state.
+-  Fixed an issue where Reddit visibility was broken.
+
 ### 0.0.7
 
 -  Adding missing models from together.ai

diff --git a/assets/AppIcons/loading.png b/assets/AppIcons/loading.png
diff --git a/assets/icon.png b/assets/icon.png
diff --git a/background.ts b/background.ts
@@ -51,14 +51,13 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
 
    const items = (await storage.get("contextMenuItems")) as any[];
 
-   console.log(items);
-
    //In the past we've used the hashmap, however it would overcomplicated the rest of the codebase always because we are not able to use the chrome.storage and the sidebar.open in the same function. This can be reviewed and use an hashmap if we find the solution for that bug. At the moment i don't expect having more than 20 prompt per user, so readability and clean code beats efficiency.
    const element = items.find((item) => item.id === info.menuItemId);
 
    switch (info.menuItemId) {
       case element.id:
          if (element.functionType === "callAI-copyClipboard") {
+            sendLoadingAction();
             response = await callOpenAIReturn(element.prompt, message);
             copyTextToClipboard(response);
             break;
@@ -132,13 +131,14 @@ const copyTextToClipboard = (response: ApiResponse<any>) => {
    }
 };
 
-function clickAllCheckboxes() {
-   const checkboxes = document.querySelectorAll(
-      '[id^="i18n_checkbox-invitee-suggestion"]'
-   );
-   checkboxes.forEach(function (checkbox) {
-      if (checkbox instanceof HTMLElement) {
-         checkbox.click();
+function sendLoadingAction() {
+   chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      if (tabs[0]?.id) {
+         chrome.tabs.sendMessage(tabs[0].id, {
+            action: "loadingAction",
+         });
+      } else {
+         throw new Error("No active tab found.");
       }
    });
 }
diff --git a/content.tsx b/content.tsx
@@ -1,4 +1,5 @@
 import successImage from "data-base64:~assets/AppIcons/success.gif"
+import loadingImage from "data-base64:~assets/AppIcons/loading.png"
 import cssText from "data-text:~/plasmo-overlay.css"
 import type { PlasmoCSConfig } from "plasmo"
 import { useEffect, useState } from "react"
@@ -7,114 +8,139 @@ import { useStorage } from "@plasmohq/storage/hook"
 
 // We enable the extension to be used in anywebsite with an http/https protocol.
 export const config: PlasmoCSConfig = {
-  matches: ["https://*/*", "http://*/*"]
+    matches: ["https://*/*", "http://*/*"]
 }
 
 export const getStyle = () => {
-  const style = document.createElement("style")
-  style.textContent = cssText
-  return style
+    const style = document.createElement("style")
+    style.textContent = cssText
+    return style
 }
 
 const PlasmoOverlay = () => {
-  const [responseText, setResponseText] = useState("")
-  const [successDivVisibe, setSuccessDivVisibile] = useState(false)
-  const [errorDivVisibe, setErrorDivVisibe] = useState(false)
-  const [llmModel] = useStorage("llmModel")
-  const [debugInfo] = useStorage("debugInfo")
+    const [responseText, setResponseText] = useState("")
+    const [successDivVisibe, setSuccessDivVisibile] = useState(false)
+    const [isLoading, setIsLoading] = useState(false)
+    const [errorDivVisibe, setErrorDivVisibe] = useState(false)
+    const [llmModel] = useStorage("llmModel")
+    const [debugInfo] = useStorage("debugInfo")
 
-  useEffect(() => {
-    const messageListener = function (request) {
-      if (request.action === "copyToClipboard") {
-        setResponseText(request.text)
-        setSuccessDivVisibile(true)
-        navigator.clipboard
-          .writeText(request.text)
-          .then(() => {
-            console.log("Text copied to clipboard")
-            setTimeout(() => {
-              setSuccessDivVisibile(false)
-            }, 5000)
-          })
-          .catch((err) => console.error("Could not copy text: ", err))
-      }
+    useEffect(() => {
+        const handleClipboardCopy = async (text) => {
+            try {
+                await navigator.clipboard.writeText(text)
+                setTimeout(() => {
+                    setSuccessDivVisibile(false)
+                }, 5000)
+            } catch (err) {
+                console.error("Could not copy text: ", err)
+            }
+        }
 
-      //If we get any error, we should tell the user what is going on
-      //This will be crucial in the future to provide the best UX.
-      if (request.action === "error") {
-        setResponseText(request.text)
-        setErrorDivVisibe(true)
-        setTimeout(() => {
-          setErrorDivVisibe(false)
-        }, 15000)
-      }
-    }
+        const messageListener = (request) => {
+            switch (request.action) {
+                case "copyToClipboard":
+                    setResponseText(request.text)
+                    setIsLoading(false)
+                    setSuccessDivVisibile(true)
+                    handleClipboardCopy(request.text)
+                    break
+                case "loadingAction":
+                    setIsLoading(true)
+                    break
+                case "error":
+                    setResponseText(request.text)
+                    setIsLoading(false)
+                    setErrorDivVisibe(true)
+                    setTimeout(() => {
+                        setErrorDivVisibe(false)
+                    }, 15000)
+                    break
+                default:
+                    console.warn("Unknown action:", request.action)
+            }
+        }
 
-    chrome.runtime.onMessage.addListener(messageListener)
+        chrome.runtime.onMessage.addListener(messageListener)
 
-    // Cleanup listener on component unmount
-    return () => chrome.runtime.onMessage.removeListener(messageListener)
-  }, [])
+        // Cleanup listener on component unmount
+        return () => chrome.runtime.onMessage.removeListener(messageListener)
+    }, [])
 
-  return (
-    <>
-      {/* DEBUG BOX */}
-      <div
-        style={{
-          padding: "12px",
-          backgroundColor: "white",
-          boxShadow: "0 4px 6px",
-          borderRadius: "8px",
-          width: "500px",
-          maxWidth: "1300px",
-          wordBreak: "break-word",
-          display: successDivVisibe && debugInfo ? "block" : "none",
-          color: "black"
-        }}>
-        <h1 style={{ fontSize: "16px" }}>Debug Info</h1>{" "}
-        <p>
-          <b>Model used:</b> {llmModel}{" "}
-        </p>
-        <p>
-          <b>Response from AI: </b>
-          <span>{responseText}</span>
-        </p>
-      </div>
+    return (
+        <>
+            {/* DEBUG BOX */}
+            <div
+                style={{
+                    padding: "12px",
+                    backgroundColor: "white",
+                    boxShadow: "0 4px 6px",
+                    borderRadius: "8px",
+                    width: "500px",
+                    maxWidth: "1300px",
+                    wordBreak: "break-word",
+                    display: successDivVisibe && debugInfo ? "block" : "none",
+                    color: "black"
+                }}>
+                <h1 style={{ fontSize: "16px" }}>Debug Info</h1>{" "}
+                <p>
+                    <b>Model used:</b> {llmModel}{" "}
+                </p>
+                <p>
+                    <b>Response from AI: </b>
+                    <span>{responseText}</span>
+                </p>
+            </div>
 
-      {/* Executed */}
-      <div
-        style={{
-          position: "fixed",
-          textAlign: "center",
-          bottom: "16px",
-          right: "16px",
-          maxWidth: "1300px",
-          wordBreak: "break-word",
-          display: successDivVisibe ? "block" : "none"
-        }}>
-        <img src={successImage} className="w-full h-auto" />
-      </div>
+            {/* Executed */}
+            <div
+                style={{
+                    position: "fixed",
+                    textAlign: "center",
+                    bottom: "16px",
+                    right: "16px",
+                    maxWidth: "1300px",
+                    wordBreak: "break-word",
+                    display: successDivVisibe ? "block" : "none"
+                }}>
+                <img src={successImage} className="w-full h-auto" />
+            </div>
 
-      <div
-        style={{
-          position: "fixed",
-          textAlign: "center",
-          bottom: "16px",
-          right: "16px",
-          padding: "12px",
-          backgroundColor: "red",
-          boxShadow: "0 4px 6px",
-          borderRadius: "8px",
-          width: "fit",
-          maxWidth: "1300px",
-          wordBreak: "break-word",
-          display: errorDivVisibe ? "block" : "none",
-          color: "white"
-        }}>
-        <h1 style={{ fontSize: "16px" }}>Error: {responseText}</h1>{" "}
-      </div>
-    </>
-  )
+            {/* Loading box */}
+            <div
+                style={{
+                    position: "fixed",
+                    textAlign: "center",
+                    bottom: "7px",
+                    right: "30px",
+                    maxWidth: "1300px",
+                    wordBreak: "break-word",
+                    display: isLoading ? "block" : "none",
+                }}>
+                <img src={loadingImage} className="w-full h-auto" />
+            </div>
+
+            {/* Error box */}
+            <div
+                style={{
+                    position: "fixed",
+                    textAlign: "center",
+                    bottom: "16px",
+                    right: "16px",
+                    padding: "12px",
+                    backgroundColor: "red",
+                    boxShadow: "0 4px 6px",
+                    borderRadius: "8px",
+                    width: "fit",
+                    maxWidth: "1300px",
+                    wordBreak: "break-word",
+                    display: errorDivVisibe ? "block" : "none",
+                    color: "white"
+                }}>
+                <h1 style={{ fontSize: "16px" }}>Error: {responseText}</h1>{" "}
+            </div>
+        </>
+    )
 }
 
 export default PlasmoOverlay
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
    "name": "extension-os",
    "displayName": "Extension-OS: Your AI Partner",
-   "version": "0.0.7",
+   "version": "0.0.8",
    "description": "AI at Your Fingertips, Anytime, Anywhere.",
    "author": "[email protected]",
    "scripts": {
@@ -44,12 +44,7 @@
       "typescript": "5.3.3"
    },
    "manifest": {
-      "host_permissions": [
-         "https://*/*",
-         "http://*/*"
-      ],
       "permissions": [
-         "tabs",
          "contextMenus",
          "clipboard",
          "sidePanel",

diff --git a/plasmo-overlay.css b/plasmo-overlay.css
@@ -1,17 +1,18 @@
 .hw-top {
-  width: 1000px;
-  background: red;
-  color: white;
+   width: 1000px;
+   background: red;
+   color: white;
 }
 
 #plasmo-shadow-container {
-  z-index: 18111987 !important;
-  position: fixed !important;
+   z-index: 18111987 !important;
+   position: fixed !important;
+   visibility: visible !important;
 }
 
 #plasmo-overlay-0 {
-  border: 0px;
-  margin-left: 10px;
-  margin-top: 10px;
-  color: black;
+   border: 0px;
+   margin-left: 10px;
+   margin-top: 10px;
+   color: black;
 }