my-project-public

repository

loading code, commits, and activity

repositories

loading repo index

#1	"use client";
#2
#3	import { AssistantRuntimeProvider } from "@assistant-ui/react";
#4	import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
#5	import { Thread } from "@/components/assistant-ui/thread";
#6	import { ThreadList } from "@/components/assistant-ui/thread-list";
#7	import { useEffect, useState } from "react";
#8	import { v4 as uuidv4 } from "uuid";
#9	import { Sun, Moon, AlignJustify } from "lucide-react";
#10	import { Button } from "@/components/ui/button";
#11	import ThemeAwareLogo from "@/components/mem0/theme-aware-logo";
#12	import Link from "next/link";
#13	import GithubButton from "@/components/mem0/github-button";
#14
#15	const useUserId = () => {
#16	const [userId, setUserId] = useState<string>("");
#17
#18	useEffect(() => {
#19	let id = localStorage.getItem("userId");
#20	if (!id) {
#21	id = uuidv4();
#22	localStorage.setItem("userId", id);
#23	}
#24	setUserId(id);
#25	}, []);
#26
#27	const resetUserId = () => {
#28	const newId = uuidv4();
#29	localStorage.setItem("userId", newId);
#30	setUserId(newId);
#31	// Clear all threads from localStorage
#32	const keys = Object.keys(localStorage);
#33	keys.forEach(key => {
#34	if (key.startsWith('thread:')) {
#35	localStorage.removeItem(key);
#36	}
#37	});
#38	// Force reload to clear all states
#39	window.location.reload();
#40	};
#41
#42	return { userId, resetUserId };
#43	};
#44
#45	export const Assistant = () => {
#46	const { userId, resetUserId } = useUserId();
#47	const runtime = useChatRuntime({
#48	api: "/api/chat",
#49	body: { userId },
#50	});
#51
#52	const [isDarkMode, setIsDarkMode] = useState(false);
#53	const [sidebarOpen, setSidebarOpen] = useState(false);
#54
#55	const toggleDarkMode = () => {
#56	setIsDarkMode(!isDarkMode);
#57	if (!isDarkMode) {
#58	document.documentElement.classList.add("dark");
#59	} else {
#60	document.documentElement.classList.remove("dark");
#61	}
#62	};
#63
#64	return (
#65	<AssistantRuntimeProvider runtime={runtime}>
#66	<div className={`bg-[#f8fafc] dark:bg-zinc-900 text-[#1e293b] ${isDarkMode ? "dark" : ""}`}>
#67	<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">
#68	<div className="flex items-center">
#69	<Link href="/" className="flex items-center">
#70	<ThemeAwareLogo width={120} height={40} isDarkMode={isDarkMode} />
#71	</Link>
#72	</div>
#73
#74	<Button
#75	variant="ghost"
#76	size="sm"
#77	onClick={() => setSidebarOpen(true)}
#78	className="text-[#475569] dark:text-zinc-300 md:hidden"
#79	>
#80	<AlignJustify size={24} className="md:hidden" />
#81	</Button>
#82
#83
#84	<div className="md:flex items-center hidden">
#85	<button
#86	className="p-2 rounded-full hover:bg-[#eef2ff] dark:hover:bg-zinc-800 text-[#475569] dark:text-zinc-300"
#87	onClick={toggleDarkMode}
#88	aria-label="Toggle theme"
#89	>
#90	{isDarkMode ? <Sun className="w-6 h-6" /> : <Moon className="w-6 h-6" />}
#91	</button>
#92	<GithubButton url="https://github.com/mem0ai/mem0/tree/main/examples" />
#93
#94	<Link href={"https://app.mem0.ai/"} target="_blank" className="py-1 ml-2 px-4 font-semibold dark:bg-zinc-100 dark:hover:bg-zinc-200 bg-zinc-800 text-white rounded-full hover:bg-zinc-900 dark:text-[#475569]">
#95	Playground
#96	</Link>
#97	</div>
#98	</header>
#99	<div className="grid grid-cols-1 md:grid-cols-[260px_1fr] gap-x-0 h-[calc(100dvh-4rem)]">
#100	<ThreadList onResetUserId={resetUserId} isDarkMode={isDarkMode} />
#101	<Thread sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} onResetUserId={resetUserId} isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
#102	</div>
#103	</div>
#104	</AssistantRuntimeProvider>
#105	);
#106	};
#107

z6Mkq5mY3JWtxoxUobWcfNHm7AkRubgSWEZTkBVqZXJviFZ5/my-project-public