From 5f02dd81b0860d0673e723620fa38bc2283eb5f0 Mon Sep 17 00:00:00 2001
From: Aric Lasry <lasry.aric@gmail.com>
Date: Fri, 29 Sep 2023 17:47:06 +0200
Subject: [PATCH] Re-render the conversation component when a new message is
 posted

---
 .../assistant/conversation/Conversation.tsx       | 15 +++++++++++----
 front/hooks/useEventSource.ts                     |  4 ++--
 .../[wId]/assistant/conversations/[cId]/events.ts |  2 +-
 front/pages/w/[wId]/assistant/[cId]/index.tsx     | 11 ++++++++++-
 4 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/front/components/assistant/conversation/Conversation.tsx b/front/components/assistant/conversation/Conversation.tsx
index 4174e78adb30..1a7f6c812b55 100644
--- a/front/components/assistant/conversation/Conversation.tsx
+++ b/front/components/assistant/conversation/Conversation.tsx
@@ -18,9 +18,11 @@ import { WorkspaceType } from "@app/types/user";
 export default function Conversation({
   owner,
   conversationId,
+  lastMessageSentTs,
 }: {
   owner: WorkspaceType;
   conversationId: string;
+  lastMessageSentTs?: number;
 }) {
   const {
     conversation,
@@ -37,8 +39,11 @@ export default function Conversation({
   });
 
   const lastConversationTs = (() => {
-    const allTs = conversation?.content.flat().map((m) => m.created);
-    if (!allTs) {
+    const allTs = conversation?.content.flat().map((m) => m.created) || [];
+    if (lastMessageSentTs) {
+      allTs.push(lastMessageSentTs);
+    }
+    if (allTs.length === 0) {
       return null;
     }
     return Math.max(...allTs);
@@ -55,9 +60,11 @@ export default function Conversation({
       if (!lastConversationTs) {
         return null;
       }
-      if (lastConversationTs + 60 * 1000 * 10 < Date.now()) {
+
+      if (lastConversationTs + 60 * 1000 < Date.now()) {
         console.log(
-          "No need to poll for events if the last message is older than 10 minutes"
+          "No need to poll for events if the last message is older than 10 minutes",
+          lastConversationTs
         );
         return null;
       }
diff --git a/front/hooks/useEventSource.ts b/front/hooks/useEventSource.ts
index fb63aca25308..6eca3c2c4534 100644
--- a/front/hooks/useEventSource.ts
+++ b/front/hooks/useEventSource.ts
@@ -35,10 +35,10 @@ export function useEventSource(
     };
 
     es.onerror = (event) => {
-      console.error('useEventSource.onerror()', event)
+      console.error("useEventSource.onerror()", event);
       errorCount.current += 1;
       if (errorCount.current >= 3) {
-        console.log('too many errors, not reconnecting..')
+        console.log("too many errors, not reconnecting..");
         setIsError(new Error("Too many errors, closing connection."));
         es.close();
         return;
diff --git a/front/pages/api/v1/w/[wId]/assistant/conversations/[cId]/events.ts b/front/pages/api/v1/w/[wId]/assistant/conversations/[cId]/events.ts
index 0e3a30feee13..0a16cd119054 100644
--- a/front/pages/api/v1/w/[wId]/assistant/conversations/[cId]/events.ts
+++ b/front/pages/api/v1/w/[wId]/assistant/conversations/[cId]/events.ts
@@ -56,7 +56,7 @@ async function handler(
       }
       res.write("data: done\n\n");
       // @ts-expect-error - We need it for streaming but it does not exists in the types.
-      res.flush();      
+      res.flush();
 
       res.end();
       return;
diff --git a/front/pages/w/[wId]/assistant/[cId]/index.tsx b/front/pages/w/[wId]/assistant/[cId]/index.tsx
index 332f1eacefd1..6825c9aaed42 100644
--- a/front/pages/w/[wId]/assistant/[cId]/index.tsx
+++ b/front/pages/w/[wId]/assistant/[cId]/index.tsx
@@ -1,5 +1,6 @@
 import { GetServerSideProps, InferGetServerSidePropsType } from "next";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 import Conversation from "@app/components/assistant/conversation/Conversation";
 import { ConversationTitle } from "@app/components/assistant/conversation/ConversationTitle";
@@ -55,6 +56,9 @@ export default function AssistantConversation({
   conversationId,
 }: InferGetServerSidePropsType<typeof getServerSideProps>) {
   const router = useRouter();
+  const [lastMessageSentTs, setLastMessageSentTs] = useState<
+    number | undefined
+  >(undefined);
 
   const handleSubmit = async (input: string, mentions: MentionType[]) => {
     // Create a new user message.
@@ -81,6 +85,7 @@ export default function AssistantConversation({
       window.alert(`Error creating message: ${data.error.message}`);
       return;
     }
+    setLastMessageSentTs(new Date().getTime());
   };
 
   const handdleDeleteConversation = async () => {
@@ -121,7 +126,11 @@ export default function AssistantConversation({
         <AssistantSidebarMenu owner={owner} triggerInputAnimation={null} />
       }
     >
-      <Conversation owner={owner} conversationId={conversationId} />
+      <Conversation
+        owner={owner}
+        conversationId={conversationId}
+        lastMessageSentTs={lastMessageSentTs}
+      />
       <FixedAssistantInputBar owner={owner} onSubmit={handleSubmit} />
     </AppLayout>
   );