From 8afcf83b8228c084d212ef169cffcaa4af33d3ab Mon Sep 17 00:00:00 2001
From: Nicolas Brichet <nicolas.brichet@quantstack.net>
Date: Mon, 18 Mar 2024 21:32:16 +0100
Subject: [PATCH] Add getter for the model from the widget, and export the chat
 icon

---
 src/components/chat.tsx      | 24 ++++++++++++------------
 src/index.ts                 |  1 +
 src/widgets/chat-sidebar.tsx |  2 +-
 src/widgets/chat-widget.tsx  | 13 ++++++++++---
 4 files changed, 24 insertions(+), 16 deletions(-)

diff --git a/src/components/chat.tsx b/src/components/chat.tsx
index 42a7ff6..b929a9e 100644
--- a/src/components/chat.tsx
+++ b/src/components/chat.tsx
@@ -14,12 +14,12 @@ import { IChatMessage, IMessage } from '../types';
 import { IThemeManager } from '@jupyterlab/apputils';
 
 type ChatBodyProps = {
-  chatModel: IChatModel;
+  model: IChatModel;
   rmRegistry: IRenderMimeRegistry;
 };
 
 function ChatBody({
-  chatModel,
+  model,
   rmRegistry: renderMimeRegistry
 }: ChatBodyProps): JSX.Element {
   const [messages, setMessages] = useState<IChatMessage[]>([]);
@@ -30,17 +30,17 @@ function ChatBody({
    */
   useEffect(() => {
     async function fetchHistory() {
-      if (!chatModel.getHistory) {
+      if (!model.getHistory) {
         return;
       }
-      chatModel
+      model
         .getHistory()
         .then(history => setMessages(history.messages))
         .catch(e => console.error(e));
     }
 
     fetchHistory();
-  }, [chatModel]);
+  }, [model]);
 
   /**
    * Effect: listen to chat messages
@@ -55,11 +55,11 @@ function ChatBody({
       }
     }
 
-    chatModel.incomingMessage.connect(handleChatEvents);
+    model.incomingMessage.connect(handleChatEvents);
     return function cleanup() {
-      chatModel.incomingMessage.disconnect(handleChatEvents);
+      model.incomingMessage.disconnect(handleChatEvents);
     };
-  }, [chatModel]);
+  }, [model]);
 
   // no need to append to messageGroups imperatively here. all of that is
   // handled by the listeners registered in the effect hooks above.
@@ -67,7 +67,7 @@ function ChatBody({
     setInput('');
 
     // send message to backend
-    chatModel.addMessage({ body: input });
+    model.addMessage({ body: input });
   };
 
   return (
@@ -86,7 +86,7 @@ function ChatBody({
           paddingBottom: 0,
           borderTop: '1px solid var(--jp-border-color1)'
         }}
-        sendWithShiftEnter={chatModel.config.sendWithShiftEnter ?? false}
+        sendWithShiftEnter={model.config.sendWithShiftEnter ?? false}
       />
     </>
   );
@@ -130,7 +130,7 @@ export function Chat(props: Chat.IOptions): JSX.Element {
         </Box>
         {/* body */}
         {view === Chat.ChatView.Chat && (
-          <ChatBody chatModel={props.chatModel} rmRegistry={props.rmRegistry} />
+          <ChatBody model={props.model} rmRegistry={props.rmRegistry} />
         )}
         {view === Chat.ChatView.Settings && props.settingsPanel && (
           <props.settingsPanel />
@@ -151,7 +151,7 @@ export namespace Chat {
     /**
      * The chat model.
      */
-    chatModel: IChatModel;
+    model: IChatModel;
     /**
      * The theme manager.
      */
diff --git a/src/index.ts b/src/index.ts
index 84630cf..36fb47d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,5 @@
 export * from './handlers/websocket-handler';
+export * from './icons';
 export * from './model';
 export * from './types';
 export * from './widgets/chat-error';
diff --git a/src/widgets/chat-sidebar.tsx b/src/widgets/chat-sidebar.tsx
index 17e7b0c..ac4ad4f 100644
--- a/src/widgets/chat-sidebar.tsx
+++ b/src/widgets/chat-sidebar.tsx
@@ -13,7 +13,7 @@ export function buildChatSidebar(
 ): ReactWidget {
   const ChatWidget = ReactWidget.create(
     <Chat
-      chatModel={chatModel}
+      model={chatModel}
       themeManager={themeManager}
       rmRegistry={rmRegistry}
     />
diff --git a/src/widgets/chat-widget.tsx b/src/widgets/chat-widget.tsx
index 859aee1..755662a 100644
--- a/src/widgets/chat-widget.tsx
+++ b/src/widgets/chat-widget.tsx
@@ -14,22 +14,29 @@ export class ChatWidget extends ReactWidget {
     this.title.icon = chatIcon;
     this.title.caption = 'Jupyter Chat'; // TODO: i18n
 
-    this._chatModel = options.chatModel;
+    this._model = options.model;
     this._themeManager = options.themeManager;
     this._rmRegistry = options.rmRegistry;
   }
 
+  /**
+   * Gte the model of the widget.
+   */
+  get model(): IChatModel {
+    return this._model;
+  }
+
   render() {
     return (
       <Chat
-        chatModel={this._chatModel}
+        model={this._model}
         themeManager={this._themeManager}
         rmRegistry={this._rmRegistry}
       />
     );
   }
 
-  private _chatModel: IChatModel;
+  private readonly _model: IChatModel;
   private _themeManager: IThemeManager | null;
   private _rmRegistry: IRenderMimeRegistry;
 }