Fix out of band changes

Author: brichet

packages/jupyter-chat/src/components/messages/message.tsx

@@ -70,7 +70,14 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       function messageChanged() {
         setMessage(props.message.content);
       }
+
       props.message.changed.connect(messageChanged);
+
+      // Initialize the message when the message is re-rendered.
+      // FIX ? This seems to be required for outofband change, to get the new value,
+      // even if when an outofband change occurs, all the messages are deleted and
+      // recreated.
+      setMessage(props.message.content);
       return () => {
         props.message.changed.disconnect(messageChanged);
       };

packages/jupyter-chat/src/components/messages/messages.tsx

@@ -163,7 +163,7 @@ export function ChatMessages(): JSX.Element {
               return (
                 // extra div needed to ensure each bubble is on a new line
                 <Box
-                  key={i}
+                  key={message.id}
                   sx={{
                     ...(isCurrentUser && {
                       marginLeft: area === 'main' ? '25%' : '10%',