Dashboard Architecture

Copyexport function DashboardClientLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body
        className={cn(
          Inter.className,
          InterDisplay.variable,
          Roboto.variable,
          Fustat.variable,
          DMMono.variable,
        )}
        suppressHydrationWarning
      >

Copyreturn (
  <html
    lang="en"
    className={cn(
      Fustat.variable,
      InterDisplay.variable,
      Inter.variable,
      Roboto.variable,
      DMMono.variable,
    )}
    suppressHydrationWarning
  >
    <body className="font-fustat" suppressHydrationWarning>

Copy<Provider store={store}>
  <AuthProvider>
    <ThemeProvider
      attribute="class"
      defaultTheme="light"
      enableSystem
      disableTransitionOnChange
    >
      <ClientLayout>{children}</ClientLayout>
      <Toaster />
    </ThemeProvider>
  </AuthProvider>
</Provider>

Copyconst isPublicPage =
  pathname.startsWith("/login") || pathname.startsWith("/setup");
 
useEffect(() => {
  if (!isPublicPage && !isLoading && !user) {
    router.replace("/login");
  }
}, [isLoading, isPublicPage, router, user]);
 
if (isLoading && !isPublicPage) {
  return <AuthLoadingState />;
}
 
if (!isPublicPage && !user) {
  return <AuthLoadingState />;
}

Copyexport const SIDEBAR_WIDTH = 180;
export const COLLAPSED_SIDEBAR_WIDTH = 64;
export const COLLAPSED_SIDEBAR_PADDING = 16;
export const COLLAPSED_SIDEBAR_WIDTH_WITHOUT_PADDING =
  COLLAPSED_SIDEBAR_WIDTH - COLLAPSED_SIDEBAR_PADDING;

Copyconst isSidebarCollapsed = useSelector(
  (state: RootState) => state.layout.isSidebarCollapsed,
);
 
return (
  <>
    <NavWrapper />
    <div
      className="mt-[48px] rounded-tl-lg relative h-[calc(100vh-56px)] bg-surface-default-primary border border-memBorder-primary overflow-hidden transition-all duration-300 ease-in-out font-fustat"
      style={{
        left: `${isSidebarCollapsed ? COLLAPSED_SIDEBAR_WIDTH : SIDEBAR_WIDTH}px`,
        width: `calc(100vw - ${isSidebarCollapsed ? COLLAPSED_SIDEBAR_WIDTH + 8 : SIDEBAR_WIDTH + 8}px)`,
      }}

Copyexport interface AuthUser {
  id: string;
  name: string;
  email: string;
  role: string;
  created_at: string;
}
 
interface AuthContextValue {
  user: AuthUser | null;
  isLoading: boolean;
  isAdmin: boolean;
  login: (email: string, password: string) => Promise<void>;
  register: (name: string, email: string, password: string) => Promise<void>;
  logout: () => Promise<void>;
  refreshUser: () => Promise<void>;
}
 
export const AuthContext = createContext<AuthContextValue>({
  user: null,
  isLoading: true,
  isAdmin: false,
  login: async () => {},
  register: async () => {},
  logout: async () => {},
  refreshUser: async () => {},
});

Copyexport function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<AuthUser | null>(null);
  const [isLoading, setIsLoading] = useState(true);
 
  const loadUser = useCallback(async () => {
    const res = await api.get<AuthUser>(AUTH_ENDPOINTS.ME);
    setUser(res.data);
  }, []);
 
  useEffect(() => {
    let active = true;
    (async () => {
      try {
        const ok = await refreshSession();
        if (ok && active) await loadUser();
      } catch {
        if (active) setUser(null);
      } finally {
        if (active) setIsLoading(false);
      }
    })();
    return () => {
      active = false;
    };
  }, [loadUser]);

Copyconst COOKIE_NAME = "mem0_refresh_token";
 
function shouldUseSecureCookie() {
  const dashboardUrl = process.env.DASHBOARD_URL;
  if (!dashboardUrl) {
    return process.env.NODE_ENV === "production";
  }
 
  try {
    return new URL(dashboardUrl).protocol === "https:";
  } catch {
    return process.env.NODE_ENV === "production";
  }
}
 
const COOKIE_OPTIONS = {
  httpOnly: true,
  secure: shouldUseSecureCookie(),
  sameSite: "lax" as const,
  path: "/",
  maxAge: 30 * 24 * 60 * 60, // 30 days
};

Copyexport function useAuth() {
  return useContext(AuthContext);
}

Copyexport const config = {
  matcher: ["/((?!_next/static|_next/image|favicon.ico|fonts|images|icons).*)"],
};

Copyconst PUBLIC_PATHS = [
  "/_next",
  "/api/auth",
  "/api/health",
  "/fonts",
  "/favicon",
];
 
export async function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;
 
  if (PUBLIC_PATHS.some((p) => pathname.startsWith(p))) {
    return NextResponse.next();
  }

Copyif (pathname === "/" || pathname === "/login" || pathname === "/setup") {
  try {
    const res = await fetch(
      `${getServerApiUrl()}${AUTH_ENDPOINTS.SETUP_STATUS}`,
    );

Copyif (res.ok) {
  const { needsSetup } = await res.json();
 
  if (needsSetup && pathname !== "/setup") {
    return NextResponse.redirect(new URL("/setup", request.url));
  }
  if (!needsSetup && pathname === "/setup") {
    return NextResponse.redirect(new URL("/login", request.url));
  }
}

Copyconst hasRefreshToken = request.cookies.has("mem0_refresh_token");

Copyif (pathname === "/") {
  return NextResponse.redirect(
    new URL(hasRefreshToken ? "/dashboard/requests" : "/login", request.url),
  );
}
 
if (pathname === "/dashboard" || pathname === "/dashboard/") {
  return NextResponse.redirect(new URL("/dashboard/requests", request.url));
}

Copyif (!hasRefreshToken) {
  const loginUrl = new URL("/login", request.url);
  loginUrl.searchParams.set("next", pathname);
  return NextResponse.redirect(loginUrl);
}

Copylet cachedToken: string | null = null;
const LOGIN_PATH = "/login";
 
export const setAccessToken = (token: string | null) => {
  cachedToken = token;
};
 
export const getAccessToken = (): string | null => {
  return cachedToken;
};
 

Copyconst api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
});
 
api.interceptors.request.use(
  async (config) => {
    if (cachedToken) {
      config.headers = config.headers ?? {};
      config.headers.Authorization = `Bearer ${cachedToken}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  },
);

Copyconst handleTokenError = () => {
  cachedToken = null;
};

Copyconst refreshAccessToken = async () => {
  const refreshResponse = await fetch("/api/auth/refresh", {
    method: "POST",
    credentials: "include",
  });
 
  if (!refreshResponse.ok) {
    return null;
  }
 
  const data = await refreshResponse.json();
  setAccessToken(data.access_token);
  return data.access_token as string;
};

Copyapi.interceptors.response.use(
  (response) => response,
  async (error: AxiosError<{ error?: string }>) => {
    if (error.response?.status === 401) {
      handleTokenError();
 
      try {
        const nextToken = await refreshAccessToken();
        if (nextToken && error.config) {
          error.config.headers = error.config.headers ?? {};
          error.config.headers.Authorization = `Bearer ${nextToken}`;
          return api.request(error.config);
        }
      } catch {}
 
      handleTokenError();
      redirectToLogin();
    }

Copyconst redirectToLogin = () => {
  if (typeof window !== "undefined") {
    window.location.href = LOGIN_PATH;
  }
};

Copyconst postStream = async (url: string, data: unknown): Promise<Response> => {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}${url}`, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: cachedToken ? `Bearer ${cachedToken}` : "",
    },
    body: JSON.stringify(data),
  });

Copy  if (response.status === 401) {
    handleTokenError();
    redirectToLogin();
    throw new Error("Unauthorized");
  }
 
  if (!response.ok) {
    const errorData = await response.json().catch(() => ({}));
    throw new Error(errorData.error || "Request failed");
  }
 
  return response;
};

Copyinterface UseApiQueryOptions<T> {
  enabled?: boolean;
  errorToast?: string;
  initialData?: T;
}
 
interface UseApiQueryResult<T> {
  data: T | undefined;
  isLoading: boolean;
  error: string;
  refetch: () => Promise<void>;
}
 
export function useApiQuery<T>(
  fetcher: () => Promise<T>,
  options: UseApiQueryOptions<T> = {},
): UseApiQueryResult<T> {

Copyconst [data, setData] = useState<T | undefined>(initialData);
const [isLoading, setIsLoading] = useState(enabled);
const [error, setError] = useState("");
 
const fetcherRef = useRef(fetcher);
fetcherRef.current = fetcher;
 

Copyconst run = useCallback(async () => {
  setIsLoading(true);
  setError("");
  try {
    setData(await fetcherRef.current());
  } catch (err) {
    const message = getErrorMessage(err, errorToast || "Request failed");
    setError(message);
    if (errorToast) {
      toast({
        title: errorToast,
        description: message,
        variant: "destructive",
      });
    }
  } finally {
    setIsLoading(false);
  }
}, [errorToast]);
 
useEffect(() => {
  if (enabled) void run();
}, [enabled, run]);

Copyinterface UseApiQueryOptions<T> {
  enabled?: boolean;
  errorToast?: string;
  initialData?: T;
}
 
interface UseApiQueryResult<T> {
  data: T | undefined;
  isLoading: boolean;
  error: string;
  refetch: () => Promise<void>;
}
 
export function useApiQuery<T>(
  fetcher: () => Promise<T>,
  options: UseApiQueryOptions<T> = {},
): UseApiQueryResult<T> {

Copyreturn { data, isLoading, error, refetch: run };

Copyimport { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";
 
const store = configureStore({
  reducer: rootReducer,
});
 
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export default store;

Copyimport { combineReducers } from "redux";
import { layoutReducer } from "./reducers/layoutReducer";
 
const rootReducer = combineReducers({
  layout: layoutReducer,
});
 
export default rootReducer;

Copyconst pathname = usePathname();
const isSidebarCollapsed = useSelector(
  (state: RootState) => state.layout.isSidebarCollapsed,
);
const [isCloudOpen, setIsCloudOpen] = React.useState(true);
 

Copy<div className="flex flex-col gap-0">
  {!isSidebarCollapsed && (
    <SidebarGroupLabel className="mb-0">
      ACTIVITY
    </SidebarGroupLabel>
  )}
  {[
    {
      title: "Requests",
      url: "/dashboard/requests",
      icon: Activity,
      active: pathname === "/dashboard/requests",
    },
    {
      title: "Memories",
      url: "/dashboard/memories",
      icon: GalleryVerticalEnd,
      active: pathname === "/dashboard/memories",
    },
    {
      title: "Entities",
      url: "/dashboard/entities",
      icon: Users,
      active: pathname === "/dashboard/entities",
    },
  ].map((item) => (
    <SidebarMenuItem key={item.title}>
      <SidebarMenuButton
        asChild
        collapsed={isSidebarCollapsed}
        active={item.active}
        tooltip={isSidebarCollapsed ? item.title : undefined}
      >
        <Link
          href={item.url}
          className={cn(
            "flex items-center w-full",
            isSidebarCollapsed
              ? "justify-center mx-auto"
              : "gap-1.5",
          )}
        >
          <item.icon className="size-4 shrink-0" />
          {!isSidebarCollapsed && <span>{item.title}</span>}
        </Link>
      </SidebarMenuButton>
    </SidebarMenuItem>
  ))}
</div>
 
{isSidebarCollapsed && (
  <div className="h-[1px] w-full bg-memBorder-primary my-2" />
)}
 
<Collapsible
  open={isCloudOpen}
  onOpenChange={setIsCloudOpen}
  className="flex flex-col gap-0"
>
  {!isSidebarCollapsed && (
    <CollapsibleTrigger asChild>
      <SidebarGroupLabel className="cursor-pointer mb-0">
        CLOUD FEATURES
        <ChevronDown
          className={cn(
            "size-3 transition-transform duration-200",
            isCloudOpen ? "" : "-rotate-90",
          )}
        />
      </SidebarGroupLabel>
    </CollapsibleTrigger>
  )}
  <CollapsibleContent className="flex flex-col gap-0">
    {[
      {
        title: "Categories",
        url: "/dashboard/categories",
        icon: Tags,
      },
      {

Copyexport default function NavWrapper() {
  const dispatch = useDispatch();
  const isSidebarCollapsed = useSelector(
    (state: RootState) => state.layout.isSidebarCollapsed,
  );
  const { user, logout } = useAuth();
 
  const instanceName = process.env.NEXT_PUBLIC_INSTANCE_NAME || "Mem0";
 
  const handleToggle = useCallback(() => {
    dispatch(toggleSidebar());
  }, [dispatch]);
 

Copyconst STEP_TITLES = [
  "Create your admin account",
  "Review provider configuration",
  "Your API key",
  "Tell us your use case",
  "Test your setup",
];

Copyconst loadConfig = async () => {
  try {
    const [configRes, providersRes] = await Promise.all([
      api.get(MEMORY_ENDPOINTS.CONFIGURE),
      api.get<BundledProviders>(MEMORY_ENDPOINTS.CONFIGURE_PROVIDERS),
    ]);

Copyconst llmProv = config?.llm?.provider || "";
const llmMod = config?.llm?.config?.model || "";
const embProv = config?.embedder?.provider || "";
const embMod = config?.embedder?.config?.model || "";
 
setLlmProvider(llmProv);
setLlmModel(llmMod);
setEmbedderProvider(embProv);
setEmbedderModel(embMod);
setInitialLlmProvider(llmProv);
setInitialLlmModel(llmMod);
setInitialEmbedderProvider(embProv);
setInitialEmbedderModel(embMod);
setServerHasLlmKey(!!config?.llm?.config?.api_key);
setProviders(providersRes.data);

Copyconst USE_CASE_PRESETS = [
  "Personal assistant",
  "Coding agent",
  "Customer support",
  "Research",
  "Therapy / journaling",
];