add prompt library dialog.

src/components/Operation.tsx

@@ -1,25 +1,19 @@
-import { Badge, Chip, Menu, MenuItem } from "@material-ui/core";
-import Nugget from "./Nugget";
-import React, { Children, Component, ReactNode, ReactPropTypes } from 'react';
-import { Composable } from "./IComposable";
+import { Menu, MenuItem } from "@material-ui/core";
+import React, { Children, ReactNode } from 'react';
 import "./Operation.css";
+import { Op } from "../lib/operator";
+import { randomUUID } from "crypto";
 
-enum Op {
-    JOINED = "joined",
-    AND = "and",
-    SWAPPED = "swaped",
-    SWAP = "swap",
-    BLENDED = "blended",
-    BLEND = "blend",
-}
 
-function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op }) {
+function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op}) {
     const [op, setOp] = React.useState(initialOp);
     const [contextMenu, setContextMenu] = React.useState<{
         mouseX: number;
         mouseY: number;
       } | null>(null);
 
+      const [id, ] = React.useState(randomUUID);
+
       const handleContextMenu = (event: React.MouseEvent) => {
         event.preventDefault();
         setContextMenu(

src/components/PromptArea.css

@@ -0,0 +1,5 @@
+.add-button {
+    position: absolute;
+    right: 10pt;
+    top: 10pt;
+}

src/components/PromptArea.tsx

@@ -1,14 +1,37 @@
-import { Button, ButtonGroup, Chip } from '@material-ui/core';
-import React, { Children, Component, ReactNode } from 'react';
+import { Button } from '@material-ui/core';
+import { Children, ReactNode } from 'react';
 import Nugget from './Nugget';
 import { Operation } from './Operation';
-// import { Composable } from './IComposable';
+import AddIcon from '@mui/icons-material/Add';
+import "./PromptArea.css";
+import { PromptLibrary } from './PromptLibrary';
+import React from 'react';
 
 type Composable = (typeof Nugget) | (typeof Operation);
 
 export default function PromptArea({ children }: { children?: any }) {
+    const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = (value: string) => {
+    setOpen(false);
+    setSelectedValue(value);
+  };
+
     return (
         <div>
+            <Button className="add-button">
+                <AddIcon />
+                <PromptLibrary
+                    open={isPromptLibraryOpen}
+                    onClose={handleClose}
+                    ></PromptLibrary>
+
+            </Button>
+            <div>
             {
                 Children.map(children, child => {
                     return (<div>
@@ -16,6 +39,7 @@ export default function PromptArea({ children }: { children?: any }) {
                     </div>)
                 })
             }
+            </div>
         </div>
     );
 }

src/components/PromptLibrary.tsx

@@ -0,0 +1,43 @@
+import { Dialog, DialogTitle, List, ListItem, ListItemAvatar, Avatar, ListItemText } from "@material-ui/core";
+import { blue } from "@material-ui/core/colors";
+import ListItemButton from "@mui/material/ListItemButton";
+
+export type Category = {
+    id: string,
+    label: string,
+    color?: string,
+}
+
+const categories = [
+    { id: "style", label: "Styles", color: "blue" },
+    { id: "subject", label: "Subjects", color: "black" },
+    { id: "vibes", label: "Vibes", color: "gold" },
+    { id: "mediums", label: "Mediums", color: "black" },
+] as Category[];
+
+export interface SimpleDialogProps {
+    open: boolean;
+    selectedValue: string;
+    onClose: (value: string) => void;
+}
+
+export function PromptLibrary(props: SimpleDialogProps) {
+    const { onClose, selectedValue, open } = props;
+
+    const handleClose = () => {
+        onClose(selectedValue);
+    };
+
+    const handleNuggetClick = (value: string) => {
+        onClose(value);
+    };
+
+    return (
+        <Dialog onClose={handleClose} open={open}>
+            <DialogTitle>Prompt Library</DialogTitle>
+            <div>
+                Prompt Library
+            </div>
+        </Dialog>
+    );
+}