klas/t6_mem0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make DEMO UI Responsive (#2382)

Browse Source
This commit is contained in:
Saket Aryan
2025-03-15 08:30:28 +05:30
committed by GitHub
parent faf811ee2d
commit 6db87e8d07
6 changed files with 116 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
examples/mem0-demo/app/assistant.tsx
View File

@@ -6,7 +6,7 @@ import { Thread } from "@/components/assistant-ui/thread";
import { ThreadList } from "@/components/assistant-ui/thread-list"; import { ThreadList } from "@/components/assistant-ui/thread-list";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { v4 as uuidv4 } from "uuid"; import { v4 as uuidv4 } from "uuid";
import { Sun, Moon, MessageSquare } from "lucide-react"; import { Sun, Moon, AlignJustify } from "lucide-react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import ThemeAwareLogo from "@/components/mem0/theme-aware-logo"; import ThemeAwareLogo from "@/components/mem0/theme-aware-logo";
import Link from "next/link"; import Link from "next/link";
@@ -63,7 +63,7 @@ export const Assistant = () => {
return ( return (
<AssistantRuntimeProvider runtime={runtime}> <AssistantRuntimeProvider runtime={runtime}>
<div className={`h-dvh bg-[#f8fafc] dark:bg-zinc-900 text-[#1e293b] ${isDarkMode ? "dark" : ""}`}> <div className={`bg-[#f8fafc] dark:bg-zinc-900 text-[#1e293b] ${isDarkMode ? "dark" : ""}`}>
<header className="h-16 border-b border-[#e2e8f0] flex items-center justify-between px-4 sm:px-6 bg-white dark:bg-zinc-900 dark:border-zinc-800 dark:text-white"> <header className="h-16 border-b border-[#e2e8f0] flex items-center justify-between px-4 sm:px-6 bg-white dark:bg-zinc-900 dark:border-zinc-800 dark:text-white">
<div className="flex items-center"> <div className="flex items-center">
<Link href="/" className="flex items-center"> <Link href="/" className="flex items-center">
@@ -71,15 +71,17 @@ export const Assistant = () => {
</Link> </Link>
</div> </div>
<div className="flex items-center"> <Button
<Button
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => setSidebarOpen(true)} onClick={() => setSidebarOpen(true)}
className="text-[#475569] dark:text-zinc-300 md:hidden" className="text-[#475569] dark:text-zinc-300 md:hidden"
> >
<MessageSquare className="w-10 h-10" /> <AlignJustify size={24} className="md:hidden" />
</Button> </Button>
<div className="md:flex items-center hidden">
<button <button
className="p-2 rounded-full hover:bg-[#eef2ff] dark:hover:bg-zinc-800 text-[#475569] dark:text-zinc-300" className="p-2 rounded-full hover:bg-[#eef2ff] dark:hover:bg-zinc-800 text-[#475569] dark:text-zinc-300"
onClick={toggleDarkMode} onClick={toggleDarkMode}
@@ -94,10 +96,9 @@ export const Assistant = () => {
</Link> </Link>
</div> </div>
</header> </header>
<div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-x-0 h-[calc(100dvh-4rem)]">
<div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-x-0 h-[calc(100vh-8rem)] md:h-[calc(100vh-4rem)]">
<ThreadList onResetUserId={resetUserId} isDarkMode={isDarkMode} /> <ThreadList onResetUserId={resetUserId} isDarkMode={isDarkMode} />
<Thread sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} onResetUserId={resetUserId} isDarkMode={isDarkMode} /> <Thread sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} onResetUserId={resetUserId} isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
</div> </div>
</div> </div>
</AssistantRuntimeProvider> </AssistantRuntimeProvider>

119
examples/mem0-demo/components/assistant-ui/thread.tsx
View File

@@ -22,9 +22,12 @@ import {
SendHorizontalIcon, SendHorizontalIcon,
ArchiveIcon, ArchiveIcon,
PlusIcon, PlusIcon,
Sun,
Moon,
SaveIcon,
} from "lucide-react"; } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Dispatch, SetStateAction, useState } from "react"; import { Dispatch, SetStateAction, useState, useRef } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { ScrollArea } from "../ui/scroll-area"; import { ScrollArea } from "../ui/scroll-area";
import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button"; import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
@@ -42,24 +45,29 @@ import {
AlertDialogTitle, AlertDialogTitle,
AlertDialogTrigger, AlertDialogTrigger,
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import GithubButton from "../mem0/github-button";
import Link from "next/link";
interface ThreadProps { interface ThreadProps {
sidebarOpen: boolean; sidebarOpen: boolean;
setSidebarOpen: Dispatch<SetStateAction<boolean>>; setSidebarOpen: Dispatch<SetStateAction<boolean>>;
onResetUserId?: () => void; onResetUserId?: () => void;
isDarkMode: boolean; isDarkMode: boolean;
toggleDarkMode: () => void;
} }
export const Thread: FC<ThreadProps> = ({ export const Thread: FC<ThreadProps> = ({
sidebarOpen, sidebarOpen,
setSidebarOpen, setSidebarOpen,
onResetUserId onResetUserId,
isDarkMode,
toggleDarkMode
}) => { }) => {
const [resetDialogOpen, setResetDialogOpen] = useState(false); const [resetDialogOpen, setResetDialogOpen] = useState(false);
const composerInputRef = useRef<HTMLTextAreaElement>(null);
return ( return (
<ThreadPrimitive.Root <ThreadPrimitive.Root
className="bg-[#f8fafc] dark:bg-zinc-900 box-border h-full flex flex-col overflow-hidden relative" className="bg-[#f8fafc] dark:bg-zinc-900 box-border flex flex-col overflow-hidden relative h-[calc(100dvh-4rem)] pb-4 md:h-full"
style={{ style={{
["--thread-max-width" as string]: "42rem", ["--thread-max-width" as string]: "42rem",
}} }}
@@ -75,13 +83,13 @@ export const Thread: FC<ThreadProps> = ({
{/* Mobile sidebar drawer */} {/* Mobile sidebar drawer */}
<div <div
className={cn( className={cn(
"fixed inset-y-0 left-0 z-40 w-[85%] bg-white dark:bg-zinc-900 transform transition-transform duration-300 ease-in-out md:hidden", "fixed inset-y-0 left-0 z-40 w-[75%] bg-white shadow-lg rounded-r-lg dark:bg-zinc-900 transform transition-transform duration-300 ease-in-out md:hidden",
sidebarOpen ? "translate-x-0" : "-translate-x-full" sidebarOpen ? "translate-x-0" : "-translate-x-full"
)} )}
> >
<div className="h-full flex flex-col"> <div className="h-full flex flex-col">
<div className="flex items-center justify-between border-b dark:text-white border-[#e2e8f0] dark:border-zinc-800 p-4"> <div className="flex items-center justify-between border-b dark:text-white border-[#e2e8f0] dark:border-zinc-800 p-4">
<h2 className="font-medium">Recent Chats</h2> <h2 className="font-medium">Settings</h2>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{onResetUserId && ( {onResetUserId && (
<AlertDialog <AlertDialog
@@ -138,13 +146,44 @@ export const Thread: FC<ThreadProps> = ({
<div className="flex flex-col justify-between items-stretch gap-1.5 h-full dark:text-white"> <div className="flex flex-col justify-between items-stretch gap-1.5 h-full dark:text-white">
<ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5 h-full dark:text-white"> <ThreadListPrimitive.Root className="flex flex-col items-stretch gap-1.5 h-full dark:text-white">
<ThreadListPrimitive.New asChild> <ThreadListPrimitive.New asChild>
<div className="flex items-center flex-col gap-2 w-full">
<Button <Button
className="hover:bg-[#eef2ff] dark:hover:bg-zinc-800 dark:data-[active]:bg-zinc-800 flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start bg-[#4f46e5] text-white dark:bg-[#6366f1]" className="hover:bg-zinc-600 w-full dark:hover:bg-zinc-800 dark:data-[active]:bg-zinc-800 flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start bg-[#4f46e5] text-white dark:bg-[#6366f1]"
variant="default" variant="default"
> >
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
New Thread New Thread
</Button> </Button>
<Button
className="hover:bg-zinc-600 w-full dark:hover:bg-zinc-700 dark:data-[active]:bg-zinc-800 flex items-center justify-start gap-1 rounded-lg px-2.5 py-2 text-start bg-zinc-800 text-white"
onClick={toggleDarkMode}
aria-label="Toggle theme"
>
{isDarkMode ? (
<div className="flex items-center gap-2">
<Sun className="w-6 h-6" />
<span>Toggle Light Mode</span>
</div>
) : (
<div className="flex items-center gap-2">
<Moon className="w-6 h-6" />
<span>Toggle Dark Mode</span>
</div>
)}
</Button>
<GithubButton url="https://github.com/mem0ai/mem0/tree/main/examples" className="w-full rounded-lg h-9 pl-2 text-sm font-semibold bg-zinc-800 dark:border-zinc-800 dark:text-white text-white hover:bg-zinc-900" text="View on Github" />
<Link
href={"https://app.mem0.ai/"}
target="_blank"
className="py-2 px-4 w-full rounded-lg h-9 pl-3 text-sm font-semibold dark:bg-zinc-800 dark:hover:bg-zinc-700 bg-zinc-800 text-white hover:bg-zinc-900 dark:text-white"
>
<span className="flex items-center gap-2">
<SaveIcon className="w-4 h-4" />
Save Memories
</span>
</Link>
</div>
</ThreadListPrimitive.New> </ThreadListPrimitive.New>
<div className="mt-4 mb-2"> <div className="mt-4 mb-2">
<h2 className="text-sm font-medium text-[#475569] dark:text-zinc-300 px-2.5"> <h2 className="text-sm font-medium text-[#475569] dark:text-zinc-300 px-2.5">
@@ -158,9 +197,13 @@ export const Thread: FC<ThreadProps> = ({
</div> </div>
</div> </div>
<ScrollArea className="flex-1"> <ScrollArea className="flex-1 w-full">
<div className="flex h-full flex-col items-center px-4 pt-8 justify-end"> <div className="flex h-full flex-col w-full items-center px-4 pt-8 justify-end">
<ThreadWelcome /> <ThreadWelcome
composerInputRef={
composerInputRef as React.RefObject<HTMLTextAreaElement>
}
/>
<ThreadPrimitive.Messages <ThreadPrimitive.Messages
components={{ components={{
@@ -176,9 +219,13 @@ export const Thread: FC<ThreadProps> = ({
</div> </div>
</ScrollArea> </ScrollArea>
<div className="sticky bottom-0 mt-3 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end rounded-t-lg bg-inherit px-4 pb-4 mx-auto"> <div className="sticky bottom-0 flex w-full max-w-[var(--thread-max-width)] flex-col items-center justify-end rounded-t-lg bg-inherit px-4 md:pb-4 mx-auto">
<ThreadScrollToBottom /> <ThreadScrollToBottom />
<Composer /> <Composer
composerInputRef={
composerInputRef as React.RefObject<HTMLTextAreaElement>
}
/>
</div> </div>
</ThreadPrimitive.Root> </ThreadPrimitive.Root>
); );
@@ -198,57 +245,74 @@ const ThreadScrollToBottom: FC = () => {
); );
}; };
const ThreadWelcome: FC = () => { interface ThreadWelcomeProps {
composerInputRef: React.RefObject<HTMLTextAreaElement>;
}
const ThreadWelcome: FC<ThreadWelcomeProps> = ({ composerInputRef }) => {
return ( return (
<ThreadPrimitive.Empty> <ThreadPrimitive.Empty>
<div className="flex w-full max-w-[var(--thread-max-width)] flex-grow flex-col"> <div className="flex w-full flex-grow flex-col mt-8 md:h-[calc(100vh-15rem)]">
<div className="flex w-full flex-grow flex-col items-center justify-start h-[calc(100vh-23rem)] md:h-[calc(100vh-18rem)]"> <div className="flex w-full flex-grow flex-col items-center justify-start">
<div className="flex flex-col items-center justify-center h-full"> <div className="flex flex-col items-center justify-center h-full">
<div className="text-2xl md:text-4xl font-bold text-[#1e293b] dark:text-white mb-2"> <div className="text-[2rem] leading-[1] tracking-[-0.02em] md:text-4xl font-bold text-[#1e293b] dark:text-white mb-2 text-center md:w-full w-5/6">
Mem0 - ChatGPT with memory Mem0 - ChatGPT with memory
</div> </div>
<p className="text-center text-sm text-[#1e293b] dark:text-white mb-2 w-3/4"> <p className="text-center text-md text-[#1e293b] dark:text-white mb-2 md:w-3/4 w-5/6">
A personalized AI chat app powered by Mem0 that remembers your A personalized AI chat app powered by Mem0 that remembers your
preferences, facts, and memories. preferences, facts, and memories.
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col items-center justify-center"> <div className="flex flex-col items-center justify-center mt-16">
<p className="mt-4 font-medium text-[#1e293b] dark:text-white"> <p className="mt-4 font-medium text-[#1e293b] dark:text-white">
How can I help you today? How can I help you today?
</p> </p>
<ThreadWelcomeSuggestions /> <ThreadWelcomeSuggestions composerInputRef={composerInputRef} />
</div> </div>
</div> </div>
</ThreadPrimitive.Empty> </ThreadPrimitive.Empty>
); );
}; };
const ThreadWelcomeSuggestions: FC = () => { interface ThreadWelcomeSuggestionsProps {
composerInputRef: React.RefObject<HTMLTextAreaElement>;
}
const ThreadWelcomeSuggestions: FC<ThreadWelcomeSuggestionsProps> = ({ composerInputRef }) => {
return ( return (
<div className="mt-3 flex w-full items-stretch justify-center gap-4 dark:text-white"> <div className="mt-3 flex flex-col md:flex-row w-full md:items-stretch justify-center gap-4 dark:text-white items-center">
<ThreadPrimitive.Suggestion <ThreadPrimitive.Suggestion
className="hover:bg-[#eef2ff] dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in" className="hover:bg-[#eef2ff] w-full dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in"
prompt="I like to travel to " prompt="I like to travel to "
method="replace" method="replace"
onClick={() => {
composerInputRef.current?.focus();
}}
> >
<span className="line-clamp-2 text-ellipsis text-sm font-semibold"> <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
Travel Travel
</span> </span>
</ThreadPrimitive.Suggestion> </ThreadPrimitive.Suggestion>
<ThreadPrimitive.Suggestion <ThreadPrimitive.Suggestion
className="hover:bg-[#eef2ff] dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in" className="hover:bg-[#eef2ff] w-full dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in"
prompt="I like to eat " prompt="I like to eat "
method="replace" method="replace"
onClick={() => {
composerInputRef.current?.focus();
}}
> >
<span className="line-clamp-2 text-ellipsis text-sm font-semibold"> <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
Food Food
</span> </span>
</ThreadPrimitive.Suggestion> </ThreadPrimitive.Suggestion>
<ThreadPrimitive.Suggestion <ThreadPrimitive.Suggestion
className="hover:bg-[#eef2ff] dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in" className="hover:bg-[#eef2ff] w-full dark:hover:bg-zinc-800 flex max-w-sm grow basis-0 flex-col items-center justify-center rounded-[2rem] border border-[#e2e8f0] dark:border-zinc-700 p-3 transition-colors ease-in"
prompt="I am working on " prompt="I am working on "
method="replace" method="replace"
onClick={() => {
composerInputRef.current?.focus();
}}
> >
<span className="line-clamp-2 text-ellipsis text-sm font-semibold"> <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
Project details Project details
@@ -258,7 +322,11 @@ const ThreadWelcomeSuggestions: FC = () => {
); );
}; };
const Composer: FC = () => { interface ComposerProps {
composerInputRef: React.RefObject<HTMLTextAreaElement>;
}
const Composer: FC<ComposerProps> = ({ composerInputRef }) => {
return ( return (
<ComposerPrimitive.Root className="focus-within:border-[#4f46e5]/20 dark:focus-within:border-[#6366f1]/20 flex w-full flex-wrap items-end rounded-full border border-[#e2e8f0] dark:border-zinc-700 bg-white dark:bg-zinc-800 px-2.5 shadow-sm transition-colors ease-in"> <ComposerPrimitive.Root className="focus-within:border-[#4f46e5]/20 dark:focus-within:border-[#6366f1]/20 flex w-full flex-wrap items-end rounded-full border border-[#e2e8f0] dark:border-zinc-700 bg-white dark:bg-zinc-800 px-2.5 shadow-sm transition-colors ease-in">
<ComposerPrimitive.Input <ComposerPrimitive.Input
@@ -266,6 +334,7 @@ const Composer: FC = () => {
autoFocus autoFocus
placeholder="Message to Mem0..." placeholder="Message to Mem0..."
className="placeholder:text-zinc-400 dark:placeholder:text-zinc-500 max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed text-[#1e293b] dark:text-zinc-200" className="placeholder:text-zinc-400 dark:placeholder:text-zinc-500 max-h-40 flex-grow resize-none border-none bg-transparent px-2 py-4 text-sm outline-none focus:ring-0 disabled:cursor-not-allowed text-[#1e293b] dark:text-zinc-200"
ref={composerInputRef}
/> />
<ComposerAction /> <ComposerAction />
</ComposerPrimitive.Root> </ComposerPrimitive.Root>

9
examples/mem0-demo/components/mem0/github-button.tsx
View File

@@ -1,18 +1,18 @@
import { cn } from "@/lib/utils";
const GithubButton = ({ url, className, text }: { url: string, className?: string, text?: string }) => {
const GithubButton = ({ url }: { url: string }) => {
return ( return (
<a <a
href={url} href={url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center bg-black text-white rounded-full shadow-lg hover:bg-gray-800 transition border border-gray-700" className={cn("flex items-center bg-black text-white rounded-full shadow-lg hover:bg-gray-800 transition border border-gray-700", className)}
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="white" fill="white"
className="w-6 h-6" className="w-5 h-5 md:w-6 md:h-6"
> >
<path <path
fillRule="evenodd" fillRule="evenodd"
@@ -20,6 +20,7 @@ const GithubButton = ({ url }: { url: string }) => {
clipRule="evenodd" clipRule="evenodd"
/> />
</svg> </svg>
{text && <span className="ml-2">{text}</span>}
</a> </a>
); );
}; };

2
mem0-ts/package.json
View File

@@ -1,6 +1,6 @@
{ {
"name": "mem0ai", "name": "mem0ai",
"version": "2.1.3", "version": "2.1.4",
"description": "The Memory Layer For Your AI Apps", "description": "The Memory Layer For Your AI Apps",
"main": "./dist/index.js", "main": "./dist/index.js",
"module": "./dist/index.mjs", "module": "./dist/index.mjs",

4
mem0-ts/src/client/mem0.ts
View File

@@ -205,6 +205,10 @@ export default class MemoryClient {
if (options.project_name) delete options.project_name; if (options.project_name) delete options.project_name;
} }
if (options.api_version) {
options.version = options.api_version.toString();
}
const payload = this._preparePayload(messages, options); const payload = this._preparePayload(messages, options);
const response = await this._fetchWithErrorHandling( const response = await this._fetchWithErrorHandling(
`${this.host}/v1/memories/`, `${this.host}/v1/memories/`,

2
mem0-ts/src/client/mem0.types.ts
View File

@@ -1,4 +1,6 @@
export interface MemoryOptions { export interface MemoryOptions {
api_version?: API_VERSION | string;
version?: API_VERSION | string;
user_id?: string; user_id?: string;
agent_id?: string; agent_id?: string;
app_id?: string; app_id?: string;