Add OpenMemory (#2676)

Co-authored-by: Saket Aryan <94069182+whysosaket@users.noreply.github.com> Co-authored-by: Saket Aryan <saketaryan2002@gmail.com>
2025-05-13 08:30:59 -07:00
parent 8d61d73d2f
commit f51b39db91
172 changed files with 17846 additions and 0 deletions
@@ -0,0 +1,88 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { useState, useRef } from "react";
+import { GoPlus } from "react-icons/go";
+import { Loader2 } from "lucide-react";
+import { useMemoriesApi } from "@/hooks/useMemoriesApi";
+import { toast } from "sonner";
+import { Textarea } from "@/components/ui/textarea";
+
+export function CreateMemoryDialog() {
+  const { createMemory, isLoading, fetchMemories } = useMemoriesApi();
+  const [open, setOpen] = useState(false);
+  const textRef = useRef<HTMLTextAreaElement>(null);
+
+  const handleCreateMemory = async (text: string) => {
+    try {
+      await createMemory(text);
+      toast.success("Memory created successfully");
+      // close the dialog
+      setOpen(false);
+      // refetch memories
+      await fetchMemories();
+    } catch (error) {
+      console.error(error);
+      toast.error("Failed to create memory");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          variant="outline"
+          size="sm"
+          className="bg-primary hover:bg-primary/90 text-white"
+        >
+          <GoPlus />
+          Create Memory
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[525px] bg-zinc-900 border-zinc-800">
+        <DialogHeader>
+          <DialogTitle>Create New Memory</DialogTitle>
+          <DialogDescription>
+            Add a new memory to your OpenMemory instance
+          </DialogDescription>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label htmlFor="memory">Memory</Label>
+            <Textarea
+              ref={textRef}
+              id="memory"
+              placeholder="e.g., Lives in San Francisco"
+              className="bg-zinc-950 border-zinc-800 min-h-[150px]"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => setOpen(false)}>
+            Cancel
+          </Button>
+          <Button
+            disabled={isLoading}
+            onClick={() => handleCreateMemory(textRef?.current?.value || "")}
+          >
+            {isLoading ? (
+              <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            ) : (
+              "Save Memory"
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}