WIP new chat modal view

ragna/ui/api_wrapper.py

@@ -3,18 +3,20 @@
 
 import emoji
 
-import requests
+# import requests
+import httpx
 
 
 # The goal is this class is to provide ready-to-use functions to interact with the API
 class ApiWrapper:
     def __init__(self, api_url, user):
         self.api_url = api_url
         self.user = user
+        self.client = httpx.Client()
 
     def get_chats(self):
         # Make a GET request to the API endpoint
-        response = requests.get(self.api_url + "/chats?user=" + self.user)
+        response = self.client.get(f"{self.api_url}/chats", params={"user": self.user})
 
         if response.status_code == 200:
             json_data = response.json()
@@ -38,20 +40,23 @@ def get_chats(self):
             )
 
     def answer(self, chat_id, prompt):
-        requests.post(
+        self.client.post(
             f"{self.api_url}/chats/{chat_id}/start",
             params={"user": self.user},
         )
-        raw_result = requests.post(
+        raw_result = self.client.post(
             f"{self.api_url}/chats/{chat_id}/answer",
             params={"user": self.user, "prompt": prompt},
         )
 
         return raw_result.json()["message"]["content"]
 
-    def get_components(self):
-        response = requests.get(self.api_url + "/components?user=" + self.user)
-        return response.json()
+    async def get_components_async(self):
+        async with httpx.AsyncClient() as async_client:
+            response = await async_client.get(
+                self.api_url + "/components?user=" + self.user
+            )
+            return response.json()
 
     def replace_emoji_shortcodes_with_emoji(self, markdown_string):
         # Define a regular expression pattern to find emoji shortcodes

ragna/ui/central_view.py

@@ -2,7 +2,7 @@
 import param
 
 
-pn.widgets.ChatEntry._stylesheets = pn.widgets.ChatEntry._stylesheets + [
+chat_entry_stylesheets = [
     """ :host .right, :host .center, :host .chat-entry {
                             width:100% !important;
                     }
@@ -29,7 +29,25 @@
                         border: 1px solid rgb(234, 234, 234);
                     }
                 """,
+    """
+                    :host .avatar {
+                        margin-top:0px;
+                    }
+                """,
 ]
+pn.widgets.ChatEntry._stylesheets = (
+    pn.widgets.ChatEntry._stylesheets + chat_entry_stylesheets
+)
+
+
+def chat_entry_value_renderer(txt, role):
+    return pn.pane.Markdown(
+        txt,
+        css_classes=["chat-entry-user" if role == "user" else "chat-entry-ragna"],
+        stylesheets=[
+            " \n                    table {\n                        margin-top:10px;\n                        margin-bottom:10px;\n                        \n                    }\n                "
+        ],
+    )
 
 
 def build_chat_entry(role, txt, timestamp=None):
@@ -38,23 +56,7 @@ def build_chat_entry(role, txt, timestamp=None):
         # user="User" if m["role"] == "user" else "Ragna (Chat GPT 3.5)",
         # actually looking better with empty user name than show_user=False
         # show_user=False,
-        renderers=[
-            lambda txt: pn.pane.Markdown(
-                txt,
-                css_classes=[
-                    "chat-entry-user" if role == "user" else "chat-entry-ragna"
-                ],
-                stylesheets=[
-                    """ 
-                    table {
-                        margin-top:10px;
-                        margin-bottom:10px;
-                        
-                    }
-                """
-                ],
-            )
-        ],
+        renderers=[lambda txt: chat_entry_value_renderer(txt, role=role)],
         css_classes=[
             "chat-entry",
             "chat-entry-user" if role == "user" else "chat-entry-ragna",

ragna/ui/js.py

@@ -6,7 +6,8 @@
 document.getElementById("pn-Modal").style.setProperty(
     "--dialog-height",
     "{MODAL_MIN_HEIGHT}ex",
-      "important")
+      "important");
+
 """
 
 TOGGLE_CARD = f"""

ragna/ui/main_page.py

@@ -5,10 +5,7 @@
 
 import ragna.ui.styles as ui
 from ragna.ui.central_view import CentralView
-
-from ragna.ui.chat_config import ChatConfig
 from ragna.ui.left_sidebar import LeftSidebar
-
 from ragna.ui.modal import ModalConfiguration
 from ragna.ui.right_sidebar import RightSidebar
 
@@ -20,21 +17,24 @@ def __init__(self, api_wrapper):
         super().__init__()
         self.api_wrapper = api_wrapper
 
+        self.modal = None
         self.central_view = None
         self.left_sidebar = None
         self.right_sidebar = None
 
     # Modal and callbacks
     def open_modal(self, template):
-        self.modal = ModalConfiguration(
-            chat_configs=[],  # self.chat_configs,
-            start_button_callback=lambda event, template=template: self.on_click_start_conv_button(
-                event, template
-            ),
-            cancel_button_callback=lambda event, template=template: self.on_click_cancel_button(
-                event, template
-            ),
-        )
+        if self.modal is None:
+            self.modal = ModalConfiguration(
+                api_wrapper=self.api_wrapper,
+                start_button_callback=lambda event, template=template: self.on_click_start_conv_button(
+                    event, template
+                ),
+                cancel_button_callback=lambda event, template=template: self.on_click_cancel_button(
+                    event, template
+                ),
+            )
+
         template.modal.objects[0].objects = [self.modal]
         template.open_modal()
 
@@ -66,17 +66,6 @@ def page(self):
             on_error=lambda x: print(f"error sync on {x}"),
         )
 
-        # TODO : retrieve this from the API
-        print(self.api_wrapper.get_components())
-        self.chat_configs = [
-            ChatConfig(
-                # components=self.components,
-                source_storage_names=["source", "source2"],
-                llm_names=["gpt"],
-                extra={"some config": "value", "other_config": 42},
-            )
-        ]
-
         template = pn.template.FastListTemplate(
             # We need to set a title to have it appearing on the browser's tab
             # but it means we need to hide it from the header bar

ragna/ui/modal.py

@@ -4,6 +4,7 @@
 import param
 
 import ragna.ui.js as js
+import ragna.ui.styles as ui
 
 
 def get_default_chat_name(timezone_offset=None):
@@ -15,14 +16,18 @@ def get_default_chat_name(timezone_offset=None):
 
 
 class ModalConfiguration(pn.viewable.Viewer):
-    chat_configs = param.List()
     chat_name = param.String()
     start_button_callback = param.Callable()
     cancel_button_callback = param.Callable()
     #
+    source_storage_name = param.Selector()
+    assistant_name = param.Selector()
 
-    def __init__(self, **params):
+    def __init__(self, api_wrapper, **params):
         super().__init__(chat_name=get_default_chat_name(), **params)
+
+        self.api_wrapper = api_wrapper
+
         # TODO: sort out documents within this class
 
         self.document_uploader = pn.widgets.FileInput(
@@ -62,14 +67,37 @@ def __init__(self, **params):
 
         self.got_timezone = False
 
+    async def model_section(self):
+        components = await self.api_wrapper.get_components_async()
+
+        self.param.assistant_name.objects = components["assistants"]
+        self.param.source_storage_name.objects = components["source_storages"]
+
+        if len(components["assistants"]) > 0:
+            self.assistant_name = components["assistants"][0]
+
+        if len(components["source_storages"]) > 0:
+            self.source_storage_name = components["source_storages"][0]
+
+        return pn.Row(
+            pn.Column(
+                pn.pane.HTML("<b>Model</b>"),
+                pn.widgets.Select.from_param(self.param.assistant_name, name=""),
+            ),
+            pn.Column(
+                pn.pane.HTML("<b>Source storage</b>"),
+                pn.widgets.Select.from_param(self.param.source_storage_name, name=""),
+            ),
+        )
+
     def __panel__(self):
         def divider():
             return pn.layout.Divider(styles={"padding": "0em 2em 0em 2em"})
 
         return pn.Column(
             pn.pane.HTML(
                 f"""<h2>Start a new chat</h2>
-                         Setup the configurations for your new chat.<br />
+                         Let's set up the configurations for your new chat !<br />
                          <script>{js.MODAL_HACK}</script>
                          """,
             ),
@@ -84,12 +112,12 @@ def divider():
                 show_name=False,
             ),
             divider(),
-            *self.chat_configs,
+            self.model_section,
             divider(),
             self.upload_files_label,
             self.upload_row,
             pn.Row(self.cancel_button, self.start_chat_button),
-            min_width=800,
+            min_width=ui.MODAL_WIDTH,
             sizing_mode="stretch_both",
             height_policy="max",
         )

ragna/ui/styles.py

@@ -13,6 +13,7 @@
 # set modal height (in x heights)
 MODAL_MIN_HEIGHT = 70
 MODAL_MAX_HEIGHT = 300
+MODAL_WIDTH = 800
 
 
 APP_RAW = """
@@ -46,4 +47,17 @@
 div#content {
     height: calc(100vh);
 }
+
+/* Fix the size of the modal */
+#pn-Modal {
+    --dialog-width: 800px !important;
+    --dialog-height:500px !important; 
+}
+
+/* Hide the default close button of the modal */
+.pn-modal-close {
+    display: none !important;
+}
+
+
 """