Rename hooks useAssistant -> useAssistantList

example/assets/js/components/Chat/Chat.tsx

@@ -25,25 +25,17 @@ import Markdown from "react-markdown";
 import {
   ThreadMessagesSchemaOut,
   ThreadSchema,
-  useAssistant,
-  useMessage,
-  useThread,
+  useAssistantList,
+  useMessageList,
+  useThreadList,
 } from "django-ai-assistant-client";
 
 function ChatMessage({
-  threadId,
   message,
   deleteMessage,
 }: {
-  threadId: string;
   message: ThreadMessagesSchemaOut;
-  deleteMessage: ({
-    threadId,
-    messageId,
-  }: {
-    threadId: string;
-    messageId: string;
-  }) => Promise<void>;
+  deleteMessage: ({ messageId }: { messageId: string }) => Promise<void>;
 }) {
   const isUserMessage = message.type === "human";
 
@@ -54,7 +46,7 @@ function ChatMessage({
         color="red"
         size="sm"
         onClick={async () => {
-          await deleteMessage({ threadId, messageId: message.id });
+          await deleteMessage({ messageId: message.id });
         }}
         aria-label="Delete message"
       >
@@ -97,17 +89,14 @@ function ChatMessage({
 }
 
 function ChatMessageList({
-  threadId,
   messages,
   deleteMessage,
 }: {
-  threadId: string;
   messages: ThreadMessagesSchemaOut[];
   deleteMessage: ({
     threadId,
     messageId,
   }: {
-    threadId: string;
     messageId: string;
   }) => Promise<void>;
 }) {
@@ -120,7 +109,6 @@ function ChatMessageList({
       {messages.map((message, index) => (
         <ChatMessage
           key={index}
-          threadId={threadId}
           message={message}
           deleteMessage={deleteMessage}
         />
@@ -133,7 +121,7 @@ export function Chat({ assistantId }: { assistantId: string }) {
   const [activeThread, setActiveThread] = useState<ThreadSchema | null>(null);
   const [inputValue, setInputValue] = useState<string>("");
 
-  const { fetchThreads, threads, createThread, deleteThread } = useThread();
+  const { fetchThreads, threads, createThread, deleteThread } = useThreadList();
   const {
     fetchMessages,
     messages,
@@ -142,7 +130,7 @@ export function Chat({ assistantId }: { assistantId: string }) {
     loadingCreateMessage,
     deleteMessage,
     loadingDeleteMessage,
-  } = useMessage();
+  } = useMessageList({ threadId: activeThread?.id });
 
   const loadingMessages =
     loadingFetchMessages || loadingCreateMessage || loadingDeleteMessage;
@@ -175,17 +163,14 @@ export function Chat({ assistantId }: { assistantId: string }) {
     if (!assistantId) return;
     if (!activeThread) return;
 
-    fetchMessages({
-      threadId: activeThread.id,
-    });
+    fetchMessages();
     scrollToBottom();
   }, [assistantId, activeThread?.id, fetchMessages]);
 
   async function handleCreateMessage() {
     if (!activeThread) return;
 
     await createMessage({
-      threadId: activeThread.id,
       assistantId,
       messageTextValue: inputValue,
     });
@@ -223,7 +208,6 @@ export function Chat({ assistantId }: { assistantId: string }) {
               />
               {isThreadSelected ? (
                 <ChatMessageList
-                  threadId={activeThread.id}
                   messages={messages || []}
                   deleteMessage={deleteMessage}
                 />

frontend/src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from "./useAssistant";
-export * from "./useMessage";
-export * from "./useThread";
+export * from "./useAssistantList";
+export * from "./useMessageList";
+export * from "./useThreadList";

frontend/src/hooks/useAssistant.ts → frontend/src/hooks/useAssistantList.ts

@@ -6,9 +6,9 @@ import {
 } from "../client";
 
 /**
- * React hook to manage the Assistant resource.
+ * React hook to manage the list of Assistants.
  */
-export function useAssistant() {
+export function useAssistantList() {
   const [assistants, setAssistants] = useState<AssistantSchema[] | null>(null);
   const [loadingFetchAssistants, setLoadingFetchAssistants] =
     useState<boolean>(false);

frontend/src/hooks/useMessage.ts → frontend/src/hooks/useMessageList.ts

@@ -7,10 +7,22 @@ import {
   ThreadMessagesSchemaOut,
 } from "../client";
 
+
+function hasNullThreadId(threadId: string | null): threadId is null {
+  if (threadId == null) {
+    console.warn("threadId is null or undefined. Ignoring fetch operation.");
+    return true;
+  }
+  return false;
+}
+
+
 /**
- * React hook to manage the Message resource.
+ * React hook to manage the list, create, and delete of Messages.
+ *
+ * @param threadId The ID of the thread for which to manage messages.
  */
-export function useMessage() {
+export function useMessageList({ threadId }: { threadId: string | null }) {
   const [messages, setMessages] = useState<ThreadMessagesSchemaOut[] | null>(
     null
   );
@@ -23,16 +35,14 @@ export function useMessage() {
 
   /**
    * Fetches a list of messages.
+   * Does nothing if `threadId` of `useMessageList` hook is null.
    *
-   * @param threadId The ID of the thread for which to fetch messages.
-   * @returns A promise that resolves with the fetched list of messages.
+   * @returns - A promise that resolves with the fetched list of messages.
    */
   const fetchMessages = useCallback(
-    async ({
-      threadId,
-    }: {
-      threadId: string;
-    }): Promise<ThreadMessagesSchemaOut[]> => {
+    async (): Promise<ThreadMessagesSchemaOut[] | null> => {
+      if (hasNullThreadId(threadId)) return null;
+
       try {
         setLoadingFetchMessages(true);
         const fetchedMessages = await djangoAiAssistantViewsListThreadMessages({
@@ -44,26 +54,26 @@ export function useMessage() {
         setLoadingFetchMessages(false);
       }
     },
-    []
+    [threadId]
   );
 
   /**
    * Creates a new message in a thread.
+   * Does nothing if `threadId` of `useMessageList` hook is null.
    *
-   * @param threadId The ID of the thread in which to create the message.
    * @param assistantId The ID of the assistant.
    * @param messageTextValue The content of the message.
    */
   const createMessage = useCallback(
     async ({
-      threadId,
       assistantId,
       messageTextValue,
     }: {
-      threadId: string;
       assistantId: string;
       messageTextValue: string;
     }): Promise<void> => {
+      if (hasNullThreadId(threadId)) return;
+
       try {
         setLoadingCreateMessage(true);
         // successful response is 201, None
@@ -74,40 +84,41 @@ export function useMessage() {
             assistant_id: assistantId,
           },
         });
-        await fetchMessages({ threadId });
+        await fetchMessages();
       } finally {
         setLoadingCreateMessage(false);
       }
     },
-    [fetchMessages]
+    [fetchMessages, threadId]
   );
 
   /**
    * Deletes a message in a thread.
+   * Does nothing if `threadId` of `useMessageList` hook is null.
    *
    * @param threadId The ID of the thread in which to delete the message.
    * @param messageId The ID of the message to delete.
    */
   const deleteMessage = useCallback(
     async ({
-      threadId,
       messageId,
     }: {
-      threadId: string;
       messageId: string;
     }): Promise<void> => {
+      if (hasNullThreadId(threadId)) return;
+
       try {
         setLoadingDeleteMessage(true);
         await djangoAiAssistantViewsDeleteThreadMessage({
           threadId,
           messageId,
         });
-        await fetchMessages({ threadId });
+        await fetchMessages();
       } finally {
         setLoadingDeleteMessage(false);
       }
     },
-    [fetchMessages]
+    [fetchMessages, threadId]
   );
 
   return {

frontend/src/hooks/useThread.ts → frontend/src/hooks/useThreadList.ts

@@ -8,9 +8,9 @@ import {
 } from "../client";
 
 /**
- * React hook to manage the Thread resource.
+ * React hook to manage the list, create, and delete of Threads.
  */
-export function useThread() {
+export function useThreadList() {
   const [threads, setThreads] = useState<ThreadSchema[] | null>(null);
   const [loadingFetchThreads, setLoadingFetchThreads] =
     useState<boolean>(false);

frontend/tests/useAssistant.test.ts → frontend/tests/useAssistantList.test.ts

@@ -1,5 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import { useAssistant } from "../src/hooks";
+import { useAssistantList } from "../src/hooks";
 import { djangoAiAssistantViewsListAssistants } from "../src/client";
 
 jest.mock("../src/client", () => ({
@@ -8,13 +8,13 @@ jest.mock("../src/client", () => ({
     .mockImplementation(() => Promise.resolve()),
 }));
 
-describe("useAssistant", () => {
+describe("useAssistantList", () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
   it("should initialize with no assistants and loading false", () => {
-    const { result } = renderHook(() => useAssistant());
+    const { result } = renderHook(() => useAssistantList());
 
     expect(result.current.assistants).toBeNull();
     expect(result.current.loadingFetchAssistants).toBe(false);
@@ -30,7 +30,7 @@ describe("useAssistant", () => {
         mockAssistants
       );
 
-      const { result } = renderHook(() => useAssistant());
+      const { result } = renderHook(() => useAssistantList());
 
       expect(result.current.assistants).toBeNull();
       expect(result.current.loadingFetchAssistants).toBe(false);
@@ -48,7 +48,7 @@ describe("useAssistant", () => {
         new Error("Failed to fetch")
       );
 
-      const { result } = renderHook(() => useAssistant());
+      const { result } = renderHook(() => useAssistantList());
 
       expect(result.current.assistants).toBeNull();
       expect(result.current.loadingFetchAssistants).toBe(false);