Add a configChanged signal to the model (#68)

Author: brichet

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

@@ -16,18 +16,27 @@ import {
 } from '@mui/material';
 import { Send, Cancel } from '@mui/icons-material';
 import clsx from 'clsx';
-import { AutocompleteCommand, IAutocompletionCommandsProps } from '../types';
+import { IChatModel } from '../model';
 import { IAutocompletionRegistry } from '../registry';
+import { AutocompleteCommand, IAutocompletionCommandsProps } from '../types';
 
 const INPUT_BOX_CLASS = 'jp-chat-input-container';
 const SEND_BUTTON_CLASS = 'jp-chat-send-button';
 const CANCEL_BUTTON_CLASS = 'jp-chat-cancel-button';
 
 export function ChatInput(props: ChatInput.IProps): JSX.Element {
-  const { autocompletionName, autocompletionRegistry, sendWithShiftEnter } =
-    props;
+  const { autocompletionName, autocompletionRegistry, model } = props;
   const autocompletion = useRef<IAutocompletionCommandsProps>();
   const [input, setInput] = useState<string>(props.value || '');
+  const [sendWithShiftEnter, setSendWithShiftEnter] = useState<boolean>(
+    model.config.sendWithShiftEnter ?? false
+  );
+
+  useEffect(() => {
+    model.configChanged.connect((_, config) => {
+      setSendWithShiftEnter(config.sendWithShiftEnter ?? false);
+    });
+  }, [model]);
 
   // The autocomplete commands options.
   const [commandOptions, setCommandOptions] = useState<AutocompleteCommand[]>(
@@ -124,7 +133,7 @@ export function ChatInput(props: ChatInput.IProps): JSX.Element {
   }
 
   // Set the helper text based on whether Shift+Enter is used for sending.
-  const helperText = props.sendWithShiftEnter ? (
+  const helperText = sendWithShiftEnter ? (
     <span>
       Press <b>Shift</b>+<b>Enter</b> to send message
     </span>
@@ -248,6 +257,10 @@ export namespace ChatInput {
    * The properties of the react element.
    */
   export interface IProps {
+    /**
+     * The chat model.
+     */
+    model: IChatModel;
     /**
      * The initial value of the input (default to '')
      */
@@ -260,10 +273,6 @@ export namespace ChatInput {
      * The function to be called to cancel editing.
      */
     onCancel?: () => unknown;
-    /**
-     * Whether using shift+enter to send the message.
-     */
-    sendWithShiftEnter: boolean;
     /**
      * Custom mui/material styles.
      */

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

@@ -74,7 +74,7 @@ export function ChatMessages(props: BaseMessageProps): JSX.Element {
    * Effect: listen to chat messages.
    */
   useEffect(() => {
-    function handleChatEvents(_: IChatModel) {
+    function handleChatEvents() {
       setMessages([...model.messages]);
     }
 
@@ -392,7 +392,7 @@ export function ChatMessage(props: ChatMessageProps): JSX.Element {
           value={message.body}
           onSend={(input: string) => updateMessage(message.id, input)}
           onCancel={() => cancelEdition()}
-          sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+          model={model}
         />
       ) : (
         <RendermimeMarkdown

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

@@ -42,7 +42,7 @@ export function ChatBody(props: Chat.IChatBodyProps): JSX.Element {
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
-        sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
+        model={model}
         autocompletionRegistry={autocompletionRegistry}
       />
     </>

packages/jupyter-chat/src/model.ts

@@ -54,6 +54,11 @@ export interface IChatModel extends IDisposable {
    */
   readonly messagesUpdated: ISignal<IChatModel, void>;
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig>;
+
   /**
    * A signal emitting when unread messages change.
    */
@@ -215,6 +220,9 @@ export class ChatModel implements IChatModel {
 
     this._config = { ...this._config, ...value };
 
+    this._configChanged.emit(this._config);
+
+    // Update the stacked status of the messages and the view.
     if (stackMessagesChanged) {
       if (this._config.stackMessages) {
         this._messages.slice(1).forEach((message, idx) => {
@@ -288,6 +296,13 @@ export class ChatModel implements IChatModel {
     return this._messagesUpdated;
   }
 
+  /**
+   * A signal emitting when the messages list is updated.
+   */
+  get configChanged(): ISignal<IChatModel, IConfig> {
+    return this._configChanged;
+  }
+
   /**
    * A signal emitting when unread messages change.
    */
@@ -468,6 +483,7 @@ export class ChatModel implements IChatModel {
   private _commands?: CommandRegistry;
   private _notificationId: string | null = null;
   private _messagesUpdated = new Signal<IChatModel, void>(this);
+  private _configChanged = new Signal<IChatModel, IConfig>(this);
   private _unreadChanged = new Signal<IChatModel, number[]>(this);
   private _viewportChanged = new Signal<IChatModel, number[]>(this);
 }