Add mem0 as a service integration

2025-03-18 01:02:49 -07:00
parent f3b50bc3c4
commit 7ad36eeaf4
44 changed files with 7041 additions and 0 deletions
--- a/examples/personalized-voice-agent/client/react/src/components/StaticMemoryPanel.tsx
+++ b/examples/personalized-voice-agent/client/react/src/components/StaticMemoryPanel.tsx
@@ -0,0 +1,134 @@
+import React, { useState, useEffect, useCallback } from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ScrollArea } from "./ui/scroll-area"
+import { Memory, CaretRight } from "@phosphor-icons/react"
+import { cn } from "@/lib/utils"
+import { Button } from "./ui/button"
+import { MemoryCard } from "./MemoryCard"
+import { memoryRefreshTrigger } from "./DebugDisplay"
+
+interface MemoryItem {
+  id: string  // Kept for React key prop
+  content: string
+  createdAt: string
+  categories: string[]
+}
+
+const fetchMemories = async () => {
+  const response = await fetch("http://localhost:7860/memories")
+  const data = await response.json()
+  return data
+}
+
+const MemorySkeleton = () => (
+  <div className="animate-pulse space-y-4">
+    <div className="flex items-start space-x-4">
+      <div className="h-10 w-10 rounded-full bg-neutral-200 dark:bg-neutral-800" />
+      <div className="space-y-3 flex-1">
+        <div className="h-4 w-1/4 bg-neutral-200 dark:bg-neutral-800 rounded" />
+        <div className="space-y-2">
+          <div className="h-4 w-full bg-neutral-200 dark:bg-neutral-800 rounded" />
+          <div className="h-4 w-5/6 bg-neutral-200 dark:bg-neutral-800 rounded" />
+        </div>
+      </div>
+    </div>
+  </div>
+)
+
+export default function StaticMemoryPanel() {
+  const [isCollapsed, setIsCollapsed] = useState(false)
+  const [memories, setMemories] = useState<MemoryItem[]>([])
+  const [isInitialLoading, setIsInitialLoading] = useState(true)
+  const [localRefreshTrigger, setLocalRefreshTrigger] = useState(0)
+
+  const fetchEffectMemories = useCallback(async () => {
+    // Only set loading if this is the initial fetch (no memories)
+    if (memories.length === 0) {
+      setIsInitialLoading(true)
+    }
+    
+    try {
+      const memories = await fetchMemories()
+      if (memories) {
+        setMemories(memories as unknown as MemoryItem[])
+      } else {
+        setMemories([])
+        console.log("No memories found")
+      }
+    } catch (error) {
+      console.error("Error fetching memories:", error)
+      setMemories([])
+    } finally {
+      setIsInitialLoading(false)
+    }
+  }, [memories.length])
+
+  useEffect(() => {
+    fetchEffectMemories()
+  }, [fetchEffectMemories, localRefreshTrigger])
+
+  useEffect(() => {
+    const handleRefresh = (value: number) => {
+      setLocalRefreshTrigger(value);
+    };
+    
+    memoryRefreshTrigger.subscribers.add(handleRefresh);
+    return () => {
+      memoryRefreshTrigger.subscribers.delete(handleRefresh);
+    };
+  }, []);
+
+  return (
+    <Card className="w-full overflow-hidden border border-neutral-200 dark:border-neutral-800 bg-zinc-50 dark:bg-neutral-900">
+      <CardHeader className="p-4 pb-2 flex flex-row items-center justify-between space-y-0 border-b border-neutral-200 dark:border-neutral-800">
+        <div className="flex items-center gap-3">
+          <div className={cn("h-8 w-8 rounded-full flex items-center justify-center bg-violet-100 dark:bg-violet-900/30")}>
+            <Memory className="h-4 w-4 text-violet-500" weight="duotone" />
+          </div>
+          <div className="flex flex-col">
+            <CardTitle className="text-base font-medium text-neutral-900 dark:text-neutral-100">
+              Memories ({memories.length})
+            </CardTitle>
+          </div>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="h-8 w-8"
+        >
+          <CaretRight
+            className={cn(
+              "h-4 w-4 text-neutral-500 transition-transform",
+              isCollapsed ? "" : "rotate-90"
+            )}
+          />
+        </Button>
+      </CardHeader>
+      <div className={cn(
+        "transition-all duration-300 ease-in-out",
+        isCollapsed ? "h-0" : "h-[calc(100vh-218px)]"
+      )}>
+        {!isCollapsed && (
+          <ScrollArea className="h-full">
+            <CardContent className="py-4">
+              <div className="space-y-6">
+                {isInitialLoading && memories.length === 0 ? (
+                  <>
+                    <MemorySkeleton />
+                    <MemorySkeleton />
+                    <MemorySkeleton />
+                  </>
+                ) : (
+                  memories.map((memory) => (
+                    <MemoryCard key={memory.id} memory={memory} />
+                  ))
+                )}
+              </div>
+            </CardContent>
+          </ScrollArea>
+        )}
+      </div>
+    </Card>
+  )
+}