Skip to content

Commit

Permalink
v0.0.10 (#17)
Browse files Browse the repository at this point in the history
* v0.0.10
  • Loading branch information
albertocubeddu authored Aug 8, 2024
1 parent 86ba98c commit e049466
Show file tree
Hide file tree
Showing 13 changed files with 330 additions and 65 deletions.
7 changes: 7 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,13 @@ Move it somewhere else ASAP:

# Changelog

### 0.0.10

- Context Menu: Added a new right-click option for seamless access to configuration settings.
- Context Menu: Improved the layout and organization of the context menu for enhanced user experience.
- Prompt Factory: Introduced a comprehensive sheet that details the context and functionality of each feature.
- Prompt Factory: Implemented a clickable icon to indicate that the tooltip contains additional information when clicked.

### 0.0.9

- Bug fixes
Expand Down
17 changes: 16 additions & 1 deletion background.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,17 @@ const storage = new Storage();
/*
Fired when the extension is first installed, when the extension is updated to a new version, and when Chrome is updated to a new version.
*/
chrome.runtime.onInstalled.addListener(async () => {
chrome.runtime.onInstalled.addListener(async (details) => {
if (details.reason === chrome.runtime.OnInstalledReason.UPDATE) {
console.log(
"Extension updated from version",
details.previousVersion,
"to",
chrome.runtime.getManifest().version
);
// Perform any update-specific tasks here
}

if (process.env.NODE_ENV === "production") {
chrome.runtime.openOptionsPage();
}
Expand Down Expand Up @@ -47,6 +57,7 @@ General Listener for the onClicked.
*/
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
const message = info.selectionText;

let response;

const items = (await storage.get("contextMenuItems")) as any[];
Expand All @@ -56,6 +67,10 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {

switch (info.menuItemId) {
case element.id:
if (element.id === "configuration") {
await storage.set("activeTab", "promptFactory");
chrome.runtime.openOptionsPage();
}
if (element.functionType === "callAI-copyClipboard") {
sendLoadingAction();
response = await callOpenAIReturn(element.prompt, message);
Expand Down
17 changes: 5 additions & 12 deletions background/init.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,29 +82,22 @@ Adopt these roles to create a productive and enriching conversation that leverag
# Text`,
functionType: "callVoice-ExternalNumber",
},
{
id: "separator1",
type: "separator",
contexts: ["all"],
},
{
id: "linkedinPostEmoji",
title: "Comment using only Emoji",
title: "👀 Comment using only Emoji",
contexts: ["selection"],
functionType: "callAI-copyClipboard",
prompt: `Respond to a LinkedIn post only using emojis but avoid hashtags`,
},
{
id: "separator2",
id: "separator1",
type: "separator",
contexts: ["all"],
},
{
id: "side_myOwnPromptSelection",
title: "Your Prompt",
contexts: ["selection"],
prompt: `Please provide your own prompt;`,
functionType: "callAI-openSideBar",
id: "configuration",
title: "Setup Your Own Prompt",
contexts: ["all"],
},
];
await storage.set("contextMenuItems", contextMenuItems);
Expand Down
18 changes: 14 additions & 4 deletions components/blocks/LabelWithTooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,36 @@ import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from "~compo
import { CircleHelp } from "lucide-react";
import { Label } from "~components/ui/label";

import { MousePointerClick } from 'lucide-react';


interface LabelWithTooltipProps {
keyTooltip: string
labelText: string
tooltipText: string
sheetIncluded?: boolean
}

export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText }: LabelWithTooltipProps) {
export default function LabelWithTooltip({ keyTooltip, labelText, tooltipText, sheetIncluded = false }: LabelWithTooltipProps) {
return (
<TooltipProvider delayDuration={200}>
<Tooltip>
<TooltipTrigger className="flex flex-row gap-1">
<TooltipTrigger className="flex flex-row gap-1 items-center">

<Label
className="text-sm text-gray-200"
htmlFor={`${labelText}-${keyTooltip}`}
>
{labelText}
</Label>
<span className="inline-flex items-center gap-1">
<CircleHelp color="white" size={12} />
<span className="inline-flex items-center gap-1 mb-2">
{sheetIncluded ? (
<MousePointerClick color="#ff66cc" size={15} />
) : (
<CircleHelp color="white" size={15} />
)}
</span>

</TooltipTrigger>
<TooltipContent>
<p>
Expand Down
46 changes: 46 additions & 0 deletions components/ui/scroll-area.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import * as React from "react"
import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
>(({ className, children, ...props }, ref) => (
<ScrollAreaPrimitive.Root
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName

const ScrollBar = React.forwardRef<
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
>(({ className, orientation = "vertical", ...props }, ref) => (
<ScrollAreaPrimitive.ScrollAreaScrollbar
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName

export { ScrollArea, ScrollBar }
3 changes: 2 additions & 1 deletion options.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ import OptionsPromptFactory from "~options/OptionsPromptFactory"
// MAIN FUNCTION (OPTIONS)
// --------------------------------
export default function Options() {
const [activeTab, setActiveTab] = useState("general")

const [activeTab, setActiveTab] = useStorage<string>("activeTab", "general")

return (
<div className="flex min-h-screen w-full flex-col">
Expand Down
102 changes: 56 additions & 46 deletions options/OptionsPromptFactory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,16 @@ import {
SelectTrigger,
SelectValue,
} from "~components/ui/select";

import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"

import { Textarea } from "~components/ui/textarea";
import { cleanProperties } from "~lib/cleanContextMenu";

Expand All @@ -26,6 +36,10 @@ import type { IContextConfigItems } from "~background/init";
import LabelWithTooltip from "../components/blocks/LabelWithTooltip";
import CardHeaderIntro from "~components/blocks/CardHeaderIntro";
import VapiSpecificConfiguration from "./promptFactory/VapiSpecificConfiguration";
import HelpSheetContext from "./promptFactory/HelpSheetContext";
import HelpSheetFunctionality from "./promptFactory/HelpSheetFunctionality";
import { chromeContextsParameters } from "./promptFactory/parameters/chromeContextParameters";
import { functionalityParameters } from "./promptFactory/parameters/functionalityParameters";

export default function OptionsPromptFactory() {
const [contextMenuItems, setContextMenuItems] = useState<IContextConfigItems[]>([]);
Expand All @@ -44,15 +58,13 @@ export default function OptionsPromptFactory() {
that is the one aware of opening the sidebar. Need to find a solution for the chrome.storage ASAP.
*/
const handleChange = useCallback((id, prop, value) => {
setContextMenuItems((prevItems) =>
setContextMenuItems(prevItems =>
prevItems.map(item => {
if (item.id === id) {
let newId = item.id;
if ("callAI-openSideBar" === value && "functionType" === prop && !item.id.startsWith("side_")) {
newId = `side_${item.id}`;
} else if ("callAI-openSideBar" !== value && "functionType" === prop && item.id.startsWith("side_")) {
newId = item.id.replace(/^side_/, '');
}
const newId = item.id.startsWith("side_")
? value === "callAI-openSideBar" ? item.id : item.id.replace(/^side_/, '')
: value === "callAI-openSideBar" ? `side_${item.id}` : item.id;

return { ...item, [prop]: value, id: newId };
}
return item;
Expand All @@ -62,21 +74,24 @@ export default function OptionsPromptFactory() {

//What a shit show, saving two things together. Best practice thrown in the bin. TODO: Refactor the smelly code. (10:00PM - night)
const handleSave = async () => {
await storage.set("contextMenuItems", contextMenuItems);
try {
await storage.set("contextMenuItems", contextMenuItems);
const cleanedContextMenuItems = cleanProperties(contextMenuItems);

const cleanedContextMenuItems = cleanProperties(contextMenuItems);

// Remove all existing context menu items
chrome.contextMenus.removeAll(() => {
// Create new context menu items
cleanedContextMenuItems.forEach((item) => {
chrome.contextMenus.create(item);
// Remove all existing context menu items
chrome.contextMenus.removeAll(() => {
cleanedContextMenuItems.forEach(item => chrome.contextMenus.create(item));
});
});

alert("Changes saved!");
alert("Changes saved!");
} catch (error) {
console.error("Failed to save changes:", error);
alert("Failed to save changes. Please try again.");
}
};



return (
<div className="grid gap-6">
<Card x-chunk="dashboard-04-chunk-2">
Expand All @@ -86,7 +101,8 @@ export default function OptionsPromptFactory() {
<CardContent>
{contextMenuItems ? (
<div>
{Object.keys(contextMenuItems).map((key) => {
{/* We exclude the separrator and the configuration button as it's not essential for the user to see at this stage */}
{Object.keys(contextMenuItems).filter(key => !contextMenuItems[key].id.startsWith("separator") && contextMenuItems[key].id !== "configuration").map((key) => {
return (
<div
key={key}
Expand All @@ -113,8 +129,15 @@ export default function OptionsPromptFactory() {
className="text-sm text-gray-600"
htmlFor={`context-${key}`}
>
<LabelWithTooltip keyTooltip={key} labelText="Context" tooltipText="The context in which the item should display" />
<Sheet>

<SheetTrigger><LabelWithTooltip keyTooltip={key} labelText="Context" tooltipText="The context in which the item should display. Click for more info" sheetIncluded={true} /></SheetTrigger>
<HelpSheetContext />
</Sheet>

</Label>


<Select
value={contextMenuItems[key].contexts.join(", ")}
onValueChange={(value) =>
Expand All @@ -129,26 +152,12 @@ export default function OptionsPromptFactory() {
<SelectValue placeholder="Select contexts" />
</SelectTrigger>
<SelectContent>
{[
"all",
"page",
"frame",
"selection",
"link",
"editable",
"image",
"video",
"audio",
"launcher",
"browser_action",
"page_action",
"action",
].map((context) => (
{chromeContextsParameters.map(({ key, display }) => (
<SelectItem
key={context}
value={context}
key={key}
value={key}
>
{context}
{display}
</SelectItem>
))}
</SelectContent>
Expand Down Expand Up @@ -177,7 +186,12 @@ export default function OptionsPromptFactory() {
<div className="flex flex-row gap-4">
<div className="text-sm text-white w-1/2">
<div className="flex flex-col gap-1">
<LabelWithTooltip keyTooltip={key} labelText="Functionality" tooltipText="The functionality after the prompt is executed" />

<Sheet>
<SheetTrigger> <LabelWithTooltip keyTooltip={key} labelText="Functionality" tooltipText="The functionality after the prompt is executed. Click for more info" sheetIncluded={true} /></SheetTrigger>
<HelpSheetFunctionality />
</Sheet>

<Select
value={contextMenuItems[key].functionType}
onValueChange={(value) =>
Expand All @@ -188,13 +202,9 @@ export default function OptionsPromptFactory() {
<SelectValue placeholder="Select function type" />
</SelectTrigger>
<SelectContent>
{[
{ key: "callAI-copyClipboard", value: "Copy to Clipboard" },
{ key: "callAI-openSideBar", value: "Write to Sidebar" },
{ key: "callVoice-ExternalNumber", value: "Call External Number" }
].map((type) => (
<SelectItem key={type.key} value={type.key}>
{type.value}
{functionalityParameters.map(({ key, display }) => (
<SelectItem key={key} value={key}>
{display}
</SelectItem>
))}
</SelectContent>
Expand Down Expand Up @@ -231,6 +241,6 @@ export default function OptionsPromptFactory() {
)}
</CardContent>
</Card>
</div>
</div >
);
}
32 changes: 32 additions & 0 deletions options/promptFactory/HelpSheetContext.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import {
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
import { ScrollArea } from "~components/ui/scroll-area";
import { chromeContextsParameters } from "./parameters/chromeContextParameters";


export default function HelpSheetContext() {
return (
<SheetContent className="bg-white">
<SheetHeader>
<SheetTitle>Context Explaination</SheetTitle>
<SheetDescription>
<ScrollArea className="h-[100vh] pr-4">
<div className="flex flex-col">
{chromeContextsParameters.map((context) => (
<>
<span className="bg-gray-800 rounded-lg p-2 w-fit text-white font-mono mb-2">{`"${context.key}"`}</span>
<span className="mb-5">{context.description}</span>
</>
))}
</div>
<div className="mb-20"></div>
</ScrollArea>
</SheetDescription>
</SheetHeader>
</SheetContent>
)
}
Loading

0 comments on commit e049466

Please sign in to comment.