Create a new input model when editing a message

Author: brichet

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

@@ -27,7 +27,7 @@ const INPUT_BOX_CLASS = 'jp-chat-input-container';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
   const { documentManager, model } = props;
-  const [input, setInput] = useState<string>(props.value || '');
+  const [input, setInput] = useState<string>(model.value || '');
   const inputRef = useRef<HTMLInputElement>();
 
   const chatCommands = useChatCommands(
@@ -168,8 +168,7 @@ ${selection.source}
    * Triggered when cancelling edition.
    */
   function onCancel() {
-    model.value = props.value || '';
-    props.onCancel!();
+    props.onCancel?.();
   }
 
   // Set the helper text based on whether Shift+Enter is used for sending.
@@ -271,10 +270,6 @@ export namespace ChatInput {
      * The chat model.
      */
     model: IInputModel;
-    /**
-     * The initial value of the input (default to '')
-     */
-    value?: string;
     /**
      * The function to be called to send the message.
      */

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

@@ -19,6 +19,7 @@ import React, { useEffect, useState, useRef, forwardRef } from 'react';
 import { ChatInput } from './chat-input';
 import { MarkdownRenderer } from './markdown-renderer';
 import { ScrollContainer } from './scroll-container';
+import { InputModel } from '../input-model';
 import { IChatModel } from '../model';
 import { IChatMessage, IUser } from '../types';
 import { AttachmentPreviewList } from './attachments';
@@ -385,10 +386,18 @@ export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
       <div ref={ref} data-index={props.index}>
         {edit && canEdit ? (
           <ChatInput
-            value={message.body}
             onSend={(input: string) => updateMessage(message.id, input)}
             onCancel={() => cancelEdition()}
-            model={model.input}
+            model={
+              new InputModel({
+                value: message.body,
+                activeCellManager: model.activeCellManager,
+                selectionWatcher: model.selectionWatcher,
+                config: {
+                  sendWithShiftEnter: model.config.sendWithShiftEnter
+                }
+              })
+            }
             hideIncludeSelection={true}
           />
         ) : (

packages/jupyter-chat/src/input-model.ts

@@ -312,6 +312,9 @@ export class InputModel implements IInputModel {
 
 export namespace InputModel {
   export interface IOptions {
+    /**
+     * The initial value of the input.
+     */
     value?: string;
     /**
      * The current cursor index.