settled on typings. Now working on ui interaction flow.

This commit is contained in:
Jordan Hewitt 2024-02-24 10:59:26 -08:00
parent 5d7c53dd3c
commit 50bd3eaf5c
10 changed files with 328 additions and 18815 deletions

18733
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -8,6 +8,7 @@
"@material-ui/core": "^4.12.4", "@material-ui/core": "^4.12.4",
"@mui/icons-material": "^5.15.10", "@mui/icons-material": "^5.15.10",
"@mui/material": "^5.15.10", "@mui/material": "^5.15.10",
"@nano-sql/core": "^2.3.7",
"@reduxjs/toolkit": "^2.2.1", "@reduxjs/toolkit": "^2.2.1",
"@testing-library/dom": "^9.3.4", "@testing-library/dom": "^9.3.4",
"@testing-library/jest-dom": "^5.17.0", "@testing-library/jest-dom": "^5.17.0",

View File

@ -20,6 +20,9 @@ dependencies:
'@mui/material': '@mui/material':
specifier: ^5.15.10 specifier: ^5.15.10
version: 5.15.10(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0) version: 5.15.10(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0)
'@nano-sql/core':
specifier: ^2.3.7
version: 2.3.7
'@reduxjs/toolkit': '@reduxjs/toolkit':
specifier: ^2.2.1 specifier: ^2.2.1
version: 2.2.1(react-redux@9.1.0)(react@18.2.0) version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
@ -2494,6 +2497,20 @@ packages:
react-is: 18.2.0 react-is: 18.2.0
dev: false dev: false
/@nano-sql/core@2.3.7:
resolution: {integrity: sha512-B9nniPPRhPf5Hf2cyvy72SNEg4iKQEW6pig9nwrM4DJlmOMZudifOMPBoJuK6JcTaLATIOGRPkclfosNUALnLQ==}
hasBin: true
dependencies:
fast-deep-equal: 2.0.1
levenshtein-edit-distance: 2.0.5
really-small-events: 1.1.0
snap-db: 1.1.6
optionalDependencies:
chalk: 2.4.2
chokidar: 3.6.0
command-line-args: 5.2.1
dev: false
/@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1: /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==} resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
dependencies: dependencies:
@ -3624,6 +3641,13 @@ packages:
dequal: 2.0.3 dequal: 2.0.3
dev: false dev: false
/array-back@3.1.0:
resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
engines: {node: '>=6'}
requiresBuild: true
dev: false
optional: true
/array-buffer-byte-length@1.0.1: /array-buffer-byte-length@1.0.1:
resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
@ -3985,6 +4009,7 @@ packages:
/binary-extensions@2.2.0: /binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'} engines: {node: '>=8'}
requiresBuild: true
dev: false dev: false
/bluebird@3.7.2: /bluebird@3.7.2:
@ -4285,6 +4310,18 @@ packages:
delayed-stream: 1.0.0 delayed-stream: 1.0.0
dev: false dev: false
/command-line-args@5.2.1:
resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
engines: {node: '>=4.0.0'}
requiresBuild: true
dependencies:
array-back: 3.1.0
find-replace: 3.0.0
lodash.camelcase: 4.3.0
typical: 4.0.0
dev: false
optional: true
/commander@2.20.3: /commander@2.20.3:
resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==} resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
dev: false dev: false
@ -5673,6 +5710,10 @@ packages:
- supports-color - supports-color
dev: false dev: false
/fast-deep-equal@2.0.1:
resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
dev: false
/fast-deep-equal@3.1.3: /fast-deep-equal@3.1.3:
resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
dev: false dev: false
@ -5775,6 +5816,15 @@ packages:
pkg-dir: 4.2.0 pkg-dir: 4.2.0
dev: false dev: false
/find-replace@3.0.0:
resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
engines: {node: '>=4.0.0'}
requiresBuild: true
dependencies:
array-back: 3.1.0
dev: false
optional: true
/find-root@1.1.0: /find-root@1.1.0:
resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==} resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
dev: false dev: false
@ -6472,6 +6522,7 @@ packages:
/is-binary-path@2.1.0: /is-binary-path@2.1.0:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'} engines: {node: '>=8'}
requiresBuild: true
dependencies: dependencies:
binary-extensions: 2.2.0 binary-extensions: 2.2.0
dev: false dev: false
@ -7559,6 +7610,11 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: false dev: false
/levenshtein-edit-distance@2.0.5:
resolution: {integrity: sha512-Yuraz7QnMX/JENJU1HA6UtdsbhRzoSFnGpVGVryjQgHtl2s/YmVgmNYkVs5yzVZ9aAvQR9wPBUH3lG755ylxGA==}
hasBin: true
dev: false
/levn@0.3.0: /levn@0.3.0:
resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==} resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
engines: {node: '>= 0.8.0'} engines: {node: '>= 0.8.0'}
@ -7630,6 +7686,12 @@ packages:
p-locate: 5.0.0 p-locate: 5.0.0
dev: false dev: false
/lodash.camelcase@4.3.0:
resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
requiresBuild: true
dev: false
optional: true
/lodash.debounce@4.0.8: /lodash.debounce@4.0.8:
resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
dev: false dev: false
@ -9447,10 +9509,15 @@ packages:
/readdirp@3.6.0: /readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'} engines: {node: '>=8.10.0'}
requiresBuild: true
dependencies: dependencies:
picomatch: 2.3.1 picomatch: 2.3.1
dev: false dev: false
/really-small-events@1.1.0:
resolution: {integrity: sha512-iyh4pULyDYBMecekEYcP3ToJD3ZUdIPfZV9nx1C1lJfMguElkDAZvEMJegy8uE7eIROCuLsqh5r44fVro9nKFg==}
dev: false
/recursive-readdir@2.2.3: /recursive-readdir@2.2.3:
resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==} resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
engines: {node: '>=6.0.0'} engines: {node: '>=6.0.0'}
@ -9962,6 +10029,10 @@ packages:
engines: {node: '>=12'} engines: {node: '>=12'}
dev: false dev: false
/snap-db@1.1.6:
resolution: {integrity: sha512-KxsO5RnY70J48f6poy0qVm2WS8ZbqG0PUVP2fjd7dvlaCMZ/DxtDv5fhhIVwkP2lOmNQ9QsTFfDuCA7N+TF3qg==}
dev: false
/sockjs@0.3.24: /sockjs@0.3.24:
resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==} resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
dependencies: dependencies:
@ -10667,6 +10738,13 @@ packages:
hasBin: true hasBin: true
dev: false dev: false
/typical@4.0.0:
resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
engines: {node: '>=8'}
requiresBuild: true
dev: false
optional: true
/unbox-primitive@1.0.2: /unbox-primitive@1.0.2:
resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
dependencies: dependencies:

View File

@ -0,0 +1,27 @@
import { Composable } from "./IComposable";
import { LibraryItem as LibItem } from "../lib/prompt";
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
import { Button } from "@material-ui/core";
export interface StyleProps {
item: LibItem
onAddItem: (item: LibItem) => void;
}
export function LibraryItem(props: StyleProps) {
const { item, onAddItem } = props
return (
<div>
<Button onClick={() => onAddItem(item)}>
<AddCircleOutlineOutlinedIcon/>
</Button>
<span>
{
item.name ? (
<div className={`catetory-${item.category}`}>{item.name} - {item.prompt}</div>
) : (<div>{item.prompt}</div>)
}
</span>
</div>
) as Composable;
};

View File

@ -2,6 +2,7 @@ import { Button, ButtonGroup, Chip, Divider } from '@material-ui/core';
import React, { Component, useState } from 'react'; import React, { Component, useState } from 'react';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp';
import {Composable} from "./IComposable"
import "./Nugget.css"; import "./Nugget.css";
@ -23,5 +24,5 @@ export default function Nugget({ text, initialScore }: { text: string, initialSc
</ButtonGroup> </ButtonGroup>
</span> </span>
</div> </div>
); ) as Composable;
} }

View File

@ -3,6 +3,7 @@ import React, { Children, ReactNode } from 'react';
import "./Operation.css"; import "./Operation.css";
import { Op } from "../lib/operator"; import { Op } from "../lib/operator";
import { randomUUID } from "crypto"; import { randomUUID } from "crypto";
import { Composable } from "./IComposable";
function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op }) { function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op }) {
@ -65,7 +66,7 @@ function Operation({ children, initialOp }: { children: ReactNode[], initialOp:
})} })}
</Menu> </Menu>
</div> </div>
); ) as Composable;
} }
export { Operation, Op }; export { Operation, Op };

View File

@ -18,9 +18,13 @@ export default function PromptArea({ children }: { children?: any }) {
const handleClose = (value: string) => { const handleClose = (value: string) => {
setOpen(false); setOpen(false);
setSelectedValue(value); // setSelectedValue(value);
}; };
const handleComposableClicked = (composable : Composable) => {
setSelectedComposable(composable);
}
return ( return (
<div> <div>
<Button className="add-button"> <Button className="add-button">

View File

@ -1,42 +1,36 @@
import { Dialog, DialogTitle, List, ListItem, ListItemAvatar, Avatar, ListItemText } from "@material-ui/core"; import { Dialog, DialogTitle } from "@material-ui/core";
import { blue } from "@material-ui/core/colors"; import { Composable } from "./IComposable";
import ListItemButton from "@mui/material/ListItemButton"; import { Library as PromptLibraryType, LibraryItem as LibItemType } from "../lib/prompt";
import { LibraryItem } from "./LibraryItem";
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 { export interface SimpleDialogProps {
open: boolean; open: boolean;
selectedValue: string; onClose: (composable: Composable) => void,
onClose: (value: string) => void; library: PromptLibraryType,
onAddItem : (item : LibItemType) => void,
} }
export function PromptLibrary(props: SimpleDialogProps) { export function PromptLibrary(props: SimpleDialogProps) {
const { onClose, selectedValue, open } = props; const { onClose, library, open, onAddItem } = props;
const handleClose = () => { const handleClose = () => {
onClose(selectedValue); // onClose(selectedValue);
}; };
const handleNuggetClick = (value: string) => { const handleNuggetClick = (composable : Composable) => {
onClose(value); onClose(composable);
}; };
const handleOnAddItem = (item : LibItemType) => {
}
return ( return (
<Dialog onClose={handleClose} open={open}> <Dialog onClose={handleClose} open={open}>
<DialogTitle>Prompt Library</DialogTitle> <DialogTitle>Prompt Library</DialogTitle>
<div> <div>
Prompt Library {
library.map(item => <LibraryItem item={item} onAddItem={handleOnAddItem} />)
}
</div> </div>
</Dialog> </Dialog>
); );

113
src/lib/prompt.ts Normal file
View File

@ -0,0 +1,113 @@
import { nSQL } from "@nano-sql/core";
import { Op } from "./operator";
import { RocksDB } from "@nano-sql/adapter-rocksdb";
import tables from "./schema.json";
import { uuid } from "@nano-sql/core/lib/utilities";
type Id = string;
type IdAble = {
id: Id,
}
export enum Category {
subject = "subject",
style = "style",
vibes = "vibes",
medium = "medium",
}
export type LibraryItem = {
id: Id,
name?: string,
prompt: string,
category: Category,
}
export type Library = Array<LibraryItem>;
export type Nugget = IdAble & {
item: LibraryItem,
score: number,
}
export type Operation = IdAble & {
op: Op,
items: Array<Nugget>
}
export type PromptItem = Operation | Nugget
export type PromptArea = Array<PromptItem>;
export async function getDb() {
return new Promise((resolve, reject) => {
// typical setup
nSQL().createDatabase({
id: "my_db", // can be anything that's a string
mode: new RocksDB(),
tables: [
{
"name": "library_item",
"model": {
"id:uuid": { "pk": true },
"name:string": {},
"prompt:string": { notNull: true },
"category:string": { notNull: true, }
}
},
{
"name": "nugget",
"model": {
"id:uuid": { "pk": true },
"library_item:uuid": {},
"score:number": {}
}
},
{
"name": "operation",
"model": {
"id:uuid": { pk: true },
"op:string": {},
"items:array": {}
}
},
{
"name": "library",
"model": {
"item:uuid": {},
}
},
{
"name": "prompt_area",
"model": {
"type:string": {notNull: true},
"item:obj": {notNull: true},
}
}
],
version: 1, // current schema/database version
onVersionUpdate: (prevVersion) => { // migrate versions
return new Promise((res, rej) => {
switch (prevVersion) {
case 1:
// migrate v1 to v2
res(2);
break;
case 2:
// migrate v2 to v3
res(3);
break;
}
});
}
}).then((db) => {
resolve(db)
}).catch((err) => {
reject(err);
})
});
}

27
src/lib/schema.json Normal file
View File

@ -0,0 +1,27 @@
[
{
"name": "library_item",
"model": {
"id:uuid": {"pk": true},
"name:string": {},
"prompt:string": {},
"type:string": {}
}
},
{
"name": "nugget",
"model": {
"id:uuid": {"pk": true},
"library_item:uuid": {},
"score:number": {}
}
},
{
"name": "operation",
"model": {
"id:uuid": {"pk": true},
"op:string": {},
"items:array": {}
}
}
]