v0.0.9 (#16)

* v0.0.9
albertocubeddu · Aug 6, 2024 · 86ba98c · 86ba98c
1 parent 8c9ecb5
commit 86ba98c
Show file tree

Hide file tree

Showing 16 changed files with 242 additions and 197 deletions.
diff --git a/README.md b/README.md
@@ -120,7 +120,13 @@ Move it somewhere else ASAP:
 
 # Changelog
 
-### 0.0.8 (under dev)
+### 0.0.9
+
+-  Bug fixes
+-  Clean up codebase
+-  UX for the functionality improved
+
+### 0.0.8
 
 -  Removed an unnecessary dependency to comply with Chrome Store publication guidelines.
 -  Introduced a new icon.

diff --git a/background/init.ts b/background/init.ts
@@ -23,11 +23,11 @@ export async function initializeStorage() {
 
    const contextMenuItems: IContextConfigItems[] = [
       {
-         id: "linkedinPostComment",
+         id: "postComment",
          title: "💬 Comment Post",
          contexts: ["selection"],
          prompt:
-            "You're a helpful assistant expert in replying to LinkedIn posts in the form of a comment. It needs to be short, sweet, and coherent to the message. Do not reply with any text, only the fixed sentence, and without any quotation marks. This is the message:",
+            "You're a helpful assistant expert in replying to Social Media posts in the form of a comment. It needs to be short, sweet, and coherent to the message. Do not reply with any text, only the fixed sentence, and without any quotation marks. This is the message:",
          functionType: "callAI-copyClipboard",
       },
       {

diff --git a/components/blocks/LabelWithTooltip.tsx b/components/blocks/LabelWithTooltip.tsx
@@ -3,19 +3,19 @@ import { CircleHelp } from "lucide-react";
 import { Label } from "~components/ui/label";
 
 interface LabelWithTooltipProps {
-    key: string
+    keyTooltip: string
     labelText: string
     tooltipText: string
 }
 
-export default function LabelWithTooltip({ key, labelText, tooltipText }: LabelWithTooltipProps) {
+export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText }: LabelWithTooltipProps) {
     return (
         <TooltipProvider delayDuration={200}>
             <Tooltip>
                 <TooltipTrigger className="flex flex-row gap-1">
                     <Label
                         className="text-sm text-gray-200"
-                        htmlFor={`${labelText}-${key}`}
+                        htmlFor={`${labelText}-${keyTooltip}`}
                     >
                         {labelText}
                     </Label>

diff --git a/globals.css b/globals.css
@@ -81,3 +81,39 @@
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
 }
+
+@keyframes wiggle {
+   0% {
+      transform: skewX(9deg);
+   }
+   10% {
+      transform: skewX(-8deg);
+   }
+   20% {
+      transform: skewX(7deg);
+   }
+   30% {
+      transform: skewX(-6deg);
+   }
+   40% {
+      transform: skewX(5deg);
+   }
+   50% {
+      transform: skewX(-4deg);
+   }
+   60% {
+      transform: skewX(3deg);
+   }
+   70% {
+      transform: skewX(-2deg);
+   }
+   80% {
+      transform: skewX(1deg);
+   }
+   90% {
+      transform: skewX(0deg);
+   }
+   100% {
+      transform: skewX(0deg);
+   }
+}
diff --git a/lib/openAITypeCall.ts b/lib/openAITypeCall.ts
@@ -43,8 +43,6 @@ export async function callOpenAIReturn(
 
       const openAIEndpoint = vendorToEndpoint(vendor);
 
-      console.log("Model used: ", openAIModel);
-      console.log("Endpoint called: ", openAIEndpoint);
 
       const bodyReq = JSON.stringify({
          model: openAIModel,

diff --git a/lib/vapiOutbound.ts b/lib/vapiOutbound.ts
@@ -41,7 +41,6 @@ export const createCall = async (
    };
 
    try {
-      console.log(data);
       const response = await fetch("https://api.vapi.ai/call/phone", {
          method: "POST",
          headers: headers,
@@ -50,12 +49,8 @@ export const createCall = async (
 
       if (response.status === 201) {
          const responseData = await response.json();
-         console.log("Call created successfully");
-         console.log(responseData);
       } else {
          const errorData = await response.text();
-         console.log("Failed to create call");
-         console.log(errorData);
       }
    } catch (error) {
       console.error("Error creating call:", error);

diff --git a/options.tsx b/options.tsx
@@ -4,7 +4,6 @@ import React, { useState } from "react"
 
 import { useStorage } from "@plasmohq/storage/hook"
 
-import { Button } from "~components/ui/button"
 import OptionsAbout from "~options/OptionsAbout"
 import OptionsGeneral from "~options/OptionsGeneral"
 import OptionsHeader from "~options/OptionsHeader"
@@ -15,11 +14,6 @@ import OptionsPromptFactory from "~options/OptionsPromptFactory"
 // MAIN FUNCTION (OPTIONS)
 // --------------------------------
 export default function Options() {
-    // Use Plasmo's useStorage hook to interact with chrome.storage
-    const [yourCustomPrompt, setYourCustomPrompt] = useStorage(
-        "yourCustomPrompt",
-        ""
-    )
     const [activeTab, setActiveTab] = useState("general")
 
     return (

diff --git a/options/LlmSettings.tsx b/options/LlmSettings.tsx
@@ -14,15 +14,14 @@ import {
     SelectTrigger,
     SelectValue
 } from "@/components/ui/select"
-import groqLogo from "data-base64:~assets/AppIcons/groq.png"
-import openAILogo from "data-base64:~assets/AppIcons/openai.svg"
 import React, { useEffect } from "react"
 
 import { useStorage } from "@plasmohq/storage/hook"
 import LabelWithTooltip from "~components/blocks/LabelWithTooltip"
 import CardHeaderIntro from "~components/blocks/CardHeaderIntro"
 import FakeSaveButton from "~components/blocks/FakeSaveButton"
 import ProviderInstruction from "./promptFactory/ProviderInstruction"
+import { ArrowBigLeftDash, ArrowBigUpDash } from "lucide-react"
 
 // Add more combination here for the future
 // TODO: I may refactor it to be easier to access but whatever.
@@ -31,13 +30,13 @@ export const providersData = {
         {
             name: "groq",
             models: [
-                "gemma-7b-it",
-                "gemma2-9b-it",
                 "llama-3.1-70b-versatile",
                 "llama-3.1-8b-instant",
                 "llama3-70b-8192",
                 "llama3-8b-8192",
                 "mixtral-8x7b-32768",
+                "gemma-7b-it",
+                "gemma2-9b-it",
             ]
         },
         {
@@ -171,7 +170,6 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
             if (!isModelValid) {
                 setLlmModel(selectedProvider.models[0])
             }
-            console.log("Is model valid:", isModelValid)
         }
     }, [llmProvider])
 
@@ -187,25 +185,45 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
                 <CardHeaderIntro title={"LLM Settings"} description={" Provide which provider and model you want to use for Extension | OS"} />
             </CardHeader>
             <CardContent >
-                <div className="pb-10 pt-5">
+                <div className="flex flex-row pb-10 pt-5">
                     <ProviderInstruction provider={llmProvider} />
+                    {!getCurrentKey() && llmProvider && (
+                        <>
+                            {/* UX Note: This arrow indicates where users should click to obtain their API keys. */}
+                            <ArrowBigLeftDash size={40} strokeWidth={1} className=" mx-5 text-[#ff66cc] animate-[wiggle_1s_ease-in-out_infinite]" />
+                        </>
+                    )}
                 </div>
+
                 <div>
                     <div className="flex flex-col gap-1">
-                        <LabelWithTooltip key={"llmProvider"} labelText={"Default LLM Provider"} tooltipText={"This is the LLM provider that will be used by default."} />
-                        <Select value={llmProvider} onValueChange={setLlmProvider}>
-                            <SelectTrigger className="w-[180px]">
-                                <SelectValue placeholder="Select a provider" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                {providersData.providers.map((provider) => (
-                                    <SelectItem key={provider.name} value={provider.name}>
-                                        {provider.name.charAt(0).toUpperCase() +
-                                            provider.name.slice(1)}
-                                    </SelectItem>
-                                ))}
-                            </SelectContent>
-                        </Select>
+                        <LabelWithTooltip keyTooltip={"llmProvider"} labelText={"Default LLM Provider"} tooltipText={"This is the LLM provider that will be used by default."} />
+                        <div className="flex flex-row">
+                            <Select value={llmProvider} onValueChange={setLlmProvider}>
+                                <SelectTrigger className="w-[180px]">
+                                    <SelectValue placeholder="Select a provider" />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    {providersData.providers.map((provider) => (
+                                        <SelectItem key={provider.name} value={provider.name}>
+                                            {provider.name.charAt(0).toUpperCase() +
+                                                provider.name.slice(1)}
+                                        </SelectItem>
+                                    ))}
+                                </SelectContent>
+                            </Select>
+
+                            {!llmProvider && (
+                                <>
+                                    <ArrowBigLeftDash size={40} strokeWidth={1} className=" mx-5 text-[#ff66cc] animate-[wiggle_1s_ease-in-out_infinite]" />
+                                    <strong className="mr-2">Instructions:</strong> Choose a provider from the list on your left.<br /> The selected provider will be set as the default.
+                                </>
+                            )}
+
+
+
+
+                        </div>
                     </div>
                 </div>
                 <br />
@@ -215,7 +233,7 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
                             <div key={provider.name}>
                                 <div className="flex flex-col gap-1">
 
-                                    <LabelWithTooltip key={"llmModel"} labelText={"Default LLM Model"} tooltipText={"This is the LLM model that will be used by default."} />
+                                    <LabelWithTooltip keyTooltip={"llmModel"} labelText={"Default LLM Model"} tooltipText={"This is the LLM model that will be used by default."} />
                                     {provider.models.length > 0 ? (
                                         <Select value={llmModel} onValueChange={setLlmModel}>
                                             <SelectTrigger className="w-full">
@@ -245,16 +263,25 @@ export default function LlmSettings({ debugInfo }: { debugInfo: string }) {
                 )}
                 <br />
                 <div>
-                    <div className="flex flex-col gap-1">
-                        <LabelWithTooltip key={"llmProviderKey"} labelText={"API Key"} tooltipText={"This API Key for the seleted provider."} />
-                        <Input
-                            type="password"
-                            id="llmKey"
-                            disabled={!llmProvider}
-                            value={getCurrentKey()}
-                            onChange={(e) => handleKeyChange(llmProvider, e.target.value)}
-                        />
-                    </div>
+                    {providersData.providers.map(
+                        (provider) =>
+                            llmProvider === provider.name && (
+                                <div key={provider.name}>
+                                    {provider.models.length > 0 ? (
+                                        <div className="flex flex-col gap-1">
+                                            <LabelWithTooltip keyTooltip={"llmProviderKey"} labelText={"API Key"} tooltipText={"This API Key for the selected provider."} />
+                                            <Input
+                                                type="password"
+                                                id="llmKey"
+                                                disabled={!llmProvider}
+                                                value={getCurrentKey()}
+                                                onChange={(e) => handleKeyChange(llmProvider, e.target.value)}
+                                            />
+                                        </div>
+                                    ) : null}
+                                </div>
+                            )
+                    )}
                 </div>
             </CardContent>
             <CardFooter className="border-t px-6 py-4">

diff --git a/options/OptionsGeneral.tsx b/options/OptionsGeneral.tsx
@@ -1,4 +1,3 @@
-import { Button } from "@/components/ui/button"
 import {
     CardContent,
     CardFooter,

diff --git a/options/OptionsMixtureOfAgents.tsx b/options/OptionsMixtureOfAgents.tsx
@@ -2,9 +2,7 @@ import { Badge } from "@/components/ui/badge"
 import {
     Card,
     CardContent,
-    CardDescription,
     CardHeader,
-    CardTitle
 } from "@/components/ui/card"
 import {
     Select,