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

@@ -190,7 +190,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
             return (
               // extra div needed to ensure each bubble is on a new line
               <Box
-                key={i}
+                key={message.id}
                 className={clsx(
                   MESSAGE_CLASS,
                   message.stacked ? MESSAGE_STACKED_CLASS : ''