propagate user ID

Author: vbarda

frontend/app/components/ChatWindow.tsx

@@ -1,12 +1,6 @@
 "use client";
 
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "react-toastify";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Renderer, marked } from "marked";
@@ -26,6 +20,7 @@ import {
 import { ArrowDownIcon, ArrowUpIcon, SmallCloseIcon } from "@chakra-ui/icons";
 import { Select, Link } from "@chakra-ui/react";
 import { Client } from "@langchain/langgraph-sdk";
+import { v4 as uuidv4 } from "uuid";
 
 import { EmptyState } from "./EmptyState";
 import { ChatMessageBubble } from "./ChatMessageBubble";
@@ -37,6 +32,7 @@ import { useThreadList } from "../hooks/useThreadList";
 import { useThreadMessages } from "../hooks/useThreadMessages";
 import { useLangGraphClient } from "../hooks/useLangGraphClient";
 import { useStreamState } from "../hooks/useStreamState";
+import { useLocalStorage } from "../hooks/useLocalStorage";
 
 const MODEL_TYPES = [
   "openai_gpt_3_5_turbo",
@@ -66,6 +62,19 @@ const getAssistantId = async (client: Client) => {
 export function ChatWindow() {
   const router = useRouter();
   const searchParams = useSearchParams();
+
+  const messageContainerRef = useRef<HTMLDivElement | null>(null);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [llm, setLlm] = useState(
+    searchParams.get("llm") ?? "openai_gpt_3_5_turbo",
+  );
+  const [llmIsLoading, setLlmIsLoading] = useState(true);
+  const [assistantId, setAssistantId] = useState<string>("");
+  const [userId, setUserId] = useLocalStorage("userId", null);
+
+  const client = useLangGraphClient();
+
   const { currentThread } = useThread();
   const {
     threads,
@@ -74,23 +83,13 @@ export function ChatWindow() {
     deleteThread,
     loadMoreThreads,
     areThreadsLoading,
-  } = useThreadList();
+  } = useThreadList(userId);
   const { streamState, startStream, stopStream } = useStreamState();
   const { refreshMessages, messages, setMessages, next } = useThreadMessages(
     currentThread?.thread_id ?? null,
     streamState,
     stopStream,
   );
-  const messageContainerRef = useRef<HTMLDivElement | null>(null);
-  const [input, setInput] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [llm, setLlm] = useState(
-    searchParams.get("llm") ?? "openai_gpt_3_5_turbo",
-  );
-  const [llmIsLoading, setLlmIsLoading] = useState(true);
-  const [assistantId, setAssistantId] = useState<string>("");
-
-  const client = useLangGraphClient();
 
   const setLanggraphInfo = async () => {
     try {
@@ -101,8 +100,16 @@ export function ChatWindow() {
     }
   };
 
+  const setUserInfo = () => {
+    if (userId == null) {
+      const userId = uuidv4();
+      setUserId(userId);
+    }
+  };
+
   useEffect(() => {
     setLlm(searchParams.get("llm") ?? defaultLlmValue);
+    setUserInfo();
     setLanggraphInfo();
     setLlmIsLoading(false);
   }, []);

frontend/app/hooks/useLocalStorage.ts

@@ -0,0 +1,24 @@
+import { useState } from "react";
+
+type StoredValue = string | string[] | Record<string, string> | null;
+
+export function useLocalStorage(key: string, initialValue: StoredValue) {
+  const [storedValue, setStoredValue] = useState(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? JSON.parse(item) : initialValue;
+    } catch (error) {
+      console.log(error);
+      return initialValue;
+    }
+  });
+  const setValue = (value: StoredValue) => {
+    try {
+      setStoredValue(value);
+      window.localStorage.setItem(key, JSON.stringify(value));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return [storedValue, setValue];
+}

frontend/app/hooks/useThreadList.ts

@@ -37,7 +37,7 @@ function threadsReducer(
   }
 }
 
-export function useThreadList(): ThreadListProps {
+export function useThreadList(userId: string): ThreadListProps {
   const [threads, dispatch] = useReducer(threadsReducer, null);
   const [offset, setOffset] = useState(0);
   const [areThreadsLoading, setAreThreadsLoading] = useState(false);
@@ -49,6 +49,9 @@ export function useThreadList(): ThreadListProps {
       const fetchedThreads = await client.threads.search({
         offset,
         limit: PAGE_SIZE,
+        metadata: {
+          userId,
+        },
       });
       if (offset === 0) {
         dispatch({ type: "set", threads: fetchedThreads });
@@ -69,14 +72,14 @@ export function useThreadList(): ThreadListProps {
   }, [areThreadsLoading]);
 
   const createThread = useCallback(async (name: string) => {
-    const saved = await client.threads.create({ metadata: { name } });
+    const saved = await client.threads.create({ metadata: { name, userId } });
     dispatch({ type: "add", threads: [saved] });
     return saved;
   }, []);
 
   const updateThread = useCallback(async (thread_id: string, name: string) => {
     const saved = await client.threads.upsert(thread_id, {
-      metadata: { name },
+      metadata: { name, userId },
     });
     dispatch({ type: "add", threads: [saved] });
     return saved;