fix: use stable initialMessages for useChat (#493)

oaknational · Jan 16, 2025 · 3233c2e · 3233c2e
1 parent 3f32c75
commit 3233c2e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx b/apps/nextjs/src/components/AppComponents/Chat/chat-right-hand-side-lesson.tsx
@@ -24,8 +24,6 @@ const ChatRightHandSideLesson = ({
   demo,
 }: Readonly<ChatRightHandSideLessonProps>) => {
   const { messages } = useLessonChat();
-  console.log({ messages, showLessonMobile });
-  console.log(messages.length);
 
   const chatEndRef = useRef<HTMLDivElement>(null);
 

diff --git a/apps/nextjs/src/components/ContextProviders/ChatProvider.tsx b/apps/nextjs/src/components/ContextProviders/ChatProvider.tsx
@@ -174,6 +174,11 @@ export function ChatProvider({ id, children }: Readonly<ChatProviderProps>) {
   const { invokeActionMessages } = useActionMessages();
 
   /******************* Streaming of all chat starts from messages here *******************/
+  const initialMessages = useMemo(() => {
+    return chat?.messages?.filter((m) =>
+      isValidMessageRole(m.role),
+    ) as Message[];
+  }, [chat?.messages]);
 
   const {
     messages,
@@ -186,9 +191,7 @@ export function ChatProvider({ id, children }: Readonly<ChatProviderProps>) {
     setMessages,
   } = useChat({
     sendExtraMessageFields: true,
-    initialMessages: (chat?.messages ?? []).filter((m) =>
-      isValidMessageRole(m.role),
-    ) as Message[],
+    initialMessages,
     generateId: () => generateMessageId({ role: "user" }),
     id,
     body: {