fix conditional useEffect

jupyterlab · Jun 18, 2024 · fe372eb · fe372eb
1 parent 428e961
commit fe372eb
Showing 1 changed file with 24 additions and 16 deletions.
diff --git a/packages/jupyter-ai/src/components/pending-messages.tsx b/packages/jupyter-ai/src/components/pending-messages.tsx
@@ -43,32 +43,40 @@ function PendingMessageElement(props: PendingMessageElementProps): JSX.Element {
 export function PendingMessages(
   props: PendingMessagesProps
 ): JSX.Element | null {
-  if (props.messages.length === 0) {
-    return null;
-  }
-
   const [timestamp, setTimestamp] = useState<string>('');
-  const lastMessage = props.messages[props.messages.length - 1];
-  const agentMessage: AiService.AgentChatMessage = {
-    type: 'agent',
-    id: lastMessage.id,
-    time: lastMessage.time,
-    body: '',
-    reply_to: '',
-    persona: lastMessage.persona
-  };
+  const [agentMessage, setAgentMessage] =
+    useState<AiService.AgentChatMessage | null>(null);
 
   useEffect(() => {
+    if (props.messages.length === 0) {
+      setAgentMessage(null);
+      setTimestamp('');
+      return;
+    }
+    const lastMessage = props.messages[props.messages.length - 1];
+    setAgentMessage({
+      type: 'agent',
+      id: lastMessage.id,
+      time: lastMessage.time,
+      body: '',
+      reply_to: '',
+      persona: lastMessage.persona
+    });
+
     // timestamp format copied from ChatMessage
-    const newTimestamp = new Date(agentMessage.time * 1000).toLocaleTimeString(
+    const newTimestamp = new Date(lastMessage.time * 1000).toLocaleTimeString(
       [],
       {
         hour: 'numeric',
         minute: '2-digit'
       }
     );
     setTimestamp(newTimestamp);
-  }, [agentMessage]);
+  }, [props.messages]);
+
+  if (!agentMessage) {
+    return null;
+  }
 
   return (
     <Box
@@ -95,7 +103,7 @@ export function PendingMessages(
             }
           }}
         >
-          {props.messages.map((message) => (
+          {props.messages.map(message => (
             <PendingMessageElement
               key={message.id}
               text={message.body}