New UI

apps/web/package.json

@@ -27,6 +27,7 @@
     "framer-motion": "^11.0.24",
     "lucide-react": "^0.338.0",
     "next": "14.1.0",
+    "novel": "0.1.22",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.2.1",

apps/web/src/app/globals.css

@@ -57,14 +57,65 @@ body {
   padding-bottom: 15dvh;
 }
 
-.chat-answer pre {
-  @apply bg-rgray-3 border-rgray-5 my-5 rounded-md border p-3 text-sm;
+.chat-answer pre  {
+  @apply bg-rgray-3 rounded-md border border-rgray-5 p-3 text-sm my-5;
+}
+
+.novel-editor pre {
+  @apply bg-rgray-3 rounded-md border border-rgray-5 p-4 text-sm text-rgray-11;
 }
 
 .chat-answer h1 {
   @apply text-rgray-11 my-5 text-xl font-medium;
 }
 
 .chat-answer img {
-  @apply my-5 rounded-md font-medium;
+  @apply rounded-md font-medium my-5;
+}
+
+.tippy-box {
+  @apply bg-rgray-3 text-rgray-11 border border-rgray-5 rounded-md py-0;
+}
+
+.tippy-content #slash-command {
+  @apply text-rgray-11 bg-transparent border-none;
+}
+
+#slash-command button {
+  @apply text-rgray-11 py-2;
+}
+
+#slash-command button div:first-child {
+  @apply text-rgray-11 bg-rgray-4 border-rgray-5 ;
+}
+
+#slash-command button.novel-bg-stone-100 {
+  @apply bg-rgray-1;
+}
+
+.novel-editor [data-type=taskList] > li {
+  @apply my-0;
+}
+
+.novel-editor input[type=checkbox] {
+  @apply accent-rgray-4 rounded-md;
+
+  background: var(--gray-4) !important;
+  border: 1px solid var(--gray-10) !important;
+}
+
+.novel-editor .is-editor-empty::before {
+  content: 'Press \'/\' for commands' !important;
+}
+
+.novel-editor h1 {
+  @apply text-2xl;
+}
+
+.novel-editor h2 {
+  @apply text-xl;
+}
+
+.novel-editor h3 {
+  @apply text-lg;
 }

apps/web/src/components/Sidebar/AddMemoryDialog.tsx

@@ -0,0 +1,64 @@
+import { Editor } from "novel";
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { useRef } from "react";
+
+export function AddMemoryPage() {
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Add a web page to memory</DialogTitle>
+        <DialogDescription>
+          This will take you the web page you are trying to add to memory, where
+          the extension will save the page to memory
+        </DialogDescription>
+      </DialogHeader>
+      <Label className="mt-5">URL</Label>
+      <Input
+        placeholder="Enter the URL of the page"
+        type="url"
+        data-modal-autofocus
+        className="bg-rgray-4 mt-2 w-full"
+      />
+      <DialogFooter>
+        <DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Add
+        </DialogClose>
+        <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Cancel
+        </DialogClose>
+      </DialogFooter>
+    </>
+  );
+}
+
+export function NoteAddPage() {
+  return (
+    <>
+      <Input
+        className="w-full border-none p-0 text-xl ring-0 placeholder:text-white/30 focus-visible:ring-0"
+        placeholder="Name of the note"
+        data-modal-autofocus
+      />
+      <Editor
+        disableLocalStorage
+        className="novel-editor bg-rgray-4 border-rgray-7 dark mt-5 max-h-[60vh] min-h-[40vh] w-[50vw] overflow-y-auto rounded-lg border [&>div>div]:p-5"
+      />
+      <DialogFooter>
+        <DialogClose className="bg-rgray-4 hover:bg-rgray-5 focus-visible:bg-rgray-5 focus-visible:ring-rgray-7 rounded-md px-4 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Add
+        </DialogClose>
+        <DialogClose className="hover:bg-rgray-4 focus-visible:bg-rgray-4 focus-visible:ring-rgray-7 rounded-md px-3 py-2 ring-transparent transition focus-visible:outline-none focus-visible:ring-2">
+          Cancel
+        </DialogClose>
+      </DialogFooter>
+    </>
+  );
+}