v0.0.20 (#34)

* 0.0.20

README.md

@@ -4,6 +4,14 @@
 
 ⭐️ Welcome to Extension | OS: AI at Your Fingertips, Anytime, Anywhere.
 
+## **Tired of the endless back-and-forth with ChatGPT, Claude, and other AI tools just to repeat the same task over and over?**
+
+You're not alone! I felt the same frustration, so I built a solution: **Extension | OS**—an open-source browser extension that makes AI accessible directly where you need it.
+
+Imagine this: you create a prompt like "Fix the grammar for this text," right-click, and job done—no more switching tabs, no more wasted time.
+
+![](./assets/showcase/demo.gif)
+
 > Imagine a world where every user has access to powerful models (LLMs and more) directly within their web browser. By integrating AI into everyday internet browsing, we can revolutionise the way people interact with information online, providing them with instant, intelligent assistance tailored to their needs.
 
 ## Pre-release on Google Chrome Store
@@ -104,9 +112,9 @@ Move it somewhere else ASAP:
 -  [ ] **Prompt Factory**: Add the option to select which LLM to use for each prompt.
 -  [ ] Remove all the silly comments, maybe one day....
 
-# Presentation Video
+# Youtube Video From the Hackathon
 
-[![Video Title](https://img.youtube.com/vi/dM1BOxVoebg/0.jpg)](https://www.youtube.com/watch?v=dM1BOxVoebg)
+[![Extesion | OS - San Francisco Presso](https://img.youtube.com/vi/dM1BOxVoebg/0.jpg)](https://www.youtube.com/watch?v=dM1BOxVoebg)
 
 ## Footage
 
@@ -135,6 +143,12 @@ Move it somewhere else ASAP:
 
 # Changelog
 
+### 0.0.20
+
+-  SelectionMenu: Now accessible on Reddit as well! (Consider prefixing all Tailwind classes for consistency)
+-  PromptSelector: Resolved all React warnings for a smoother experience
+-  Verified that pre-selection functions correctly (Thanks to E2E testing) 
+
 ### 0.0.19
 
 -  Added more instruction for ollama

background/init.ts

@@ -15,6 +15,11 @@ export interface IContextConfigItems {
 export async function initializeStorage() {
    //   https://unicode-table.com/
 
+   if (process.env.NODE_ENV === "development") {
+      //Useful to test a fresh-install
+      // storage.removeAll();
+   }
+
    const initState = await storage.get("contextMenuItems");
 
    if (initState) {

components/blocks/LabelWithTooltip.tsx

@@ -10,13 +10,14 @@ interface LabelWithTooltipProps {
     labelText: string
     tooltipText: string
     sheetIncluded?: boolean
+    onClick?: () => void
 }
 
-export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText, sheetIncluded = false }: LabelWithTooltipProps) {
+export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText, sheetIncluded = false, onClick }: LabelWithTooltipProps) {
     return (
         <TooltipProvider delayDuration={200}>
             <Tooltip>
-                <TooltipTrigger className="flex flex-row gap-1 items-center">
+                <TooltipTrigger onClick={onClick ? onClick : undefined} className="flex flex-row gap-1 items-center">
 
                     <Label
                         className="text-sm text-gray-200"

contents/SelectionMenu.tsx

@@ -169,7 +169,7 @@ const SelectionMenu = () => {
     return (
         <>
             {config.selectionMenu.display && menuPosition.x !== 0 && menuPosition.y !== 0 && ( // Check if .x and .y are not equal to 0
-                <div id="extension-os-selection-menu">
+                <div id="extension-os-selection-menu" className="w-max">
                     <Command className="rounded-2xl shadow-lg p-0 bg-[#161616] border border-[#505050] dark:border-[#fff] translate-x-1 translate-y-1" style={{
                         position: "relative",
                         top: `${menuPosition.y}px`,
@@ -182,7 +182,7 @@ const SelectionMenu = () => {
                             <CommandEmpty>No results found.</CommandEmpty>
                             <CommandGroup >
                                 {menuItems.map((item) => (
-                                    <CommandItem className="cursor-pointer opacity-50 hover:opacity-100 hover:bg-[#505050] font-bold m-1 rounded-[5px] py-1 text-[0.9rem]" key={item.id} value={item.title} onSelect={() => handleMenuItemClick(item)}>
+                                    <CommandItem className="cursor-pointer opacity-50 hover:opacity-100 hover:bg-[#505050] font-bold m-1 rounded-[5px] py-1 text-[16px]" key={item.id} value={item.title} onSelect={() => handleMenuItemClick(item)}>
                                         <span className="text-white">{item.title}</span>
                                     </CommandItem>
                                 ))}

globals.css

@@ -1,3 +1,5 @@
+@import "plasmo-overlay.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

options/LlmSettings.tsx

@@ -168,8 +168,10 @@ export const providersData = {
 }
 
 
+
+
 export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
-    const [llmModel, setLlmModel] = useStorage("llmModel", "")
+    const [llmModel, setLlmModel] = useStorage("llmModel", "llama-3.1-70b-versatile")
     const [llmProvider, setLlmProvider] = useStorage("llmProvider", "extension | OS")
     const [llmKeys, setLlmKeys] = useStorage("llmKeys", {})
 
@@ -178,24 +180,29 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
     //To auto-assign a model when the provider is changed.
     useEffect(() => {
         if (!hasRun.current) {
-            hasRun.current = true; // Set to true after the first run
+            /* Plasmo storage is undefined here, it will read only the default value! */
+            hasRun.current = true;
             return; // Skip the first cycle, so plasmo loads the useStorage correctly...
         }
 
         if (llmProvider) {
-            const selectedProvider = providersData.providers.find(
-                (provider) => provider.name === llmProvider
-            )
+            validateAndSetModel(llmProvider);
+        }
+    }, [llmProvider])
 
-            const isModelValid = selectedProvider?.models.includes(llmModel)
+    const validateAndSetModel = (providerName) => {
+        const selectedProvider = providersData.providers.find(
+            (provider) => provider.name === providerName
+        )
 
-            //We need to ensure the selectedProvider is valid
-            //E.g. We do change a name in the config -> From OpenAI to ClosedAI (pun intended..)
-            if (!isModelValid && selectedProvider) {
-                setLlmModel(selectedProvider.models[0])
-            }
+        const isModelValid = selectedProvider?.models.includes(llmModel)
+
+        // We need to ensure the selectedProvider is valid
+        // E.g. We do change a name in the config -> From OpenAI to ClosedAI (pun intended..)
+        if (!isModelValid && selectedProvider) {
+            setLlmModel(selectedProvider.models[0])
         }
-    }, [llmProvider])
+    }
 
     const handleKeyChange = (provider, key) => {
         setLlmKeys((prevKeys) => ({ ...prevKeys, [provider]: key }))