UI extension for new Corpus feature

ragna/deploy/_ui/api_wrapper.py

@@ -56,6 +56,12 @@ async def auth(self, username, password):
     def update_auth_header(self):
         self.client.headers["Authorization"] = f"Bearer {self.auth_token}"
 
+    async def get_corpus_names(self):
+        return (await self.client.get("/corpuses")).raise_for_status().json()
+
+    async def get_corpus_metadata(self):
+        return (await self.client.get("/corpuses/metadata")).raise_for_status().json()
+
     async def get_chats(self):
         json_data = (await self.client.get("/chats")).raise_for_status().json()
         for chat in json_data:
@@ -81,13 +87,14 @@ def upload_endpoints(self):
         }
 
     async def start_and_prepare(
-        self, name, documents, source_storage, assistant, params
+        self, name, documents, corpus_name, source_storage, assistant, params
     ):
         response = await self.client.post(
             "/chats",
             json={
                 "name": name,
                 "input": documents,
+                "corpus_name": corpus_name,
                 "source_storage": source_storage,
                 "assistant": assistant,
                 "params": params,

ragna/deploy/_ui/central_view.py

@@ -7,6 +7,8 @@
 import param
 from panel.reactive import ReactiveHTML
 
+from ragna.core._metadata_filter import MetadataFilter
+
 from . import styles as ui
 
 
@@ -184,20 +186,49 @@ def on_click_chat_info_wrapper(self, event):
         if self.on_click_chat_info is None:
             return
 
-        pills = "".join(
-            [
-                f"""<div class='chat_document_pill'>{d['name']}</div>"""
-                for d in self.current_chat["metadata"]["documents"]
-            ]
-        )
+        # see _api/schemas.py for `input` type definitions
+        if isinstance(self.current_chat["metadata"]["input"], list):
+            # `Document`s provided as list
+            title = "Uploaded Files"
+
+            pills = "".join(
+                [
+                    f"""<div class='chat_document_pill'>{d['name']}</div>"""
+                    for d in self.current_chat["metadata"]["input"]
+                ]
+            )
+
+            details = f"<div class='details'>{pills}</div><br />\n\n"
+            grid_height = len(self.current_chat["metadata"]["input"]) // 3
+
+        elif isinstance(self.current_chat["metadata"]["input"], dict):
+            # `MetadataFilter`s provided as dict
+            title = "Metadata Filters"
 
-        grid_height = len(self.current_chat["metadata"]["documents"]) // 3
+            metadata_filters_readable = str(
+                MetadataFilter.from_primitive(self.current_chat["metadata"]["input"])
+            ).replace("\n", "<br>")
+
+            details = f"<div class='details details_block' style='display:block;'>{metadata_filters_readable}</div><br />\n\n"
+            grid_height = 1
+
+        elif self.current_chat["metadata"]["input"] is None:
+            title = ""
+
+            details = "<div class='details'>No metadata filters applied.<br /> Using the whole corpus.</div><br />\n\n"
+            grid_height = 1
+
+        else:
+            title = ""
+
+            details = "<div class='details'>Unable to infer the `input` type.<br /> Defaulting to using the whole corpus.</div><br />\n\n"
+            grid_height = 1
 
         markdown = "\n".join(
             [
                 "To change configurations, start a new chat.\n",
-                "**Uploaded Files**",
-                f"<div class='pills_list'>{pills}</div><br />\n\n",
+                f"**{title}**",
+                details,
                 "----",
                 "**Source Storage**",
                 f"""<span>{self.current_chat['metadata']['source_storage']}</span>\n""",
@@ -223,11 +254,15 @@ def on_click_chat_info_wrapper(self, event):
                     # The CSS rule below relies on a variable value, so we can't move it into modifers
                     stylesheets=[
                         ui.css(
-                            ":host(.chat_info_markdown) .pills_list",
+                            ":host(.chat_info_markdown) .details",
                             {
                                 "grid-template": f"repeat({grid_height}, 1fr) / repeat(3, 1fr)",
                             },
-                        )
+                        ),
+                        ui.css(
+                            ":host(.chat_info_markdown) .details_block",
+                            {"display": "block"},
+                        ),
                     ],
                 ),
             ],
@@ -244,7 +279,7 @@ def on_click_source_info_wrapper(self, event, sources):
                 location = f": page(s) {location}"
             source_infos.append(
                 (
-                    f"<b>{rank}. {source['document']['name']}</b> {location}",
+                    f"<b>{rank}. {source['document_name']}</b> {location}",
                     pn.pane.Markdown(source["content"], css_classes=["source-content"]),
                 )
             )

ragna/deploy/_ui/components/file_uploader.py

@@ -5,13 +5,17 @@
 from panel.reactive import ReactiveHTML
 from panel.widgets import Widget
 
+from .. import styles as ui
+
 
 class FileUploader(ReactiveHTML, Widget):  # type: ignore[misc]
     allowed_documents = param.List(default=[])
     allowed_documents_str = param.String(default="")
 
     file_list = param.List(default=[])
 
+    height_upload_container = param.String(default=ui.FILE_CONTAINER_HEIGHT)
+
     custom_js = param.String(default="")
     uploaded_documents_json = param.String(default="")
 
@@ -56,7 +60,7 @@ def perform_upload(self, event=None, after_upload_callback=None):
         self.custom_js = (
             final_callback_js
             + random_id
-            + f"""upload( self.get_upload_files(),  '{self.token}', '{self.informations_endpoint}', final_callback) """
+            + f"""upload( self.get_upload_files(), '{self.token}', '{self.informations_endpoint}', final_callback) """
         )
 
     _child_config = {
@@ -65,73 +69,30 @@ def perform_upload(self, event=None, after_upload_callback=None):
         "allowed_documents_str": "template",
     }
 
+    _stylesheets = [
+        """
+        :host {width: 100%; margin: 0px; padding: 0px;}
+        .fileUploadDropArea {margin-left: 10px; margin-right: 10px; border: 1px dashed var(--accent-color);
+                    border-radius: 5px; height:100%; display:flex; text-align: center; justify-content: center;
+                    align-items: center; flex-direction: column;}
+        .fileUploadDropArea span.bold {font-weight: bold;}
+        .fileUploadDropArea img {padding-bottom:5px;}
+        .fileUploadDropArea.draggedOver {border-width: 3px;}
+        .fileUpload {height: 100% !important; position: absolute; opacity: 0;}
+        .fileListContainer {display:flex; flex-direction: row; flex-wrap: wrap; height: 40px; overflow-y:scroll;
+                    overflow-x:hidden; margin-top: 10px; margin-bottom: 10px; padding-top:5px; padding-left:6px;
+                    padding-bottom:5px;}      
+        .chat_document_pill {background-color: rgb(241,241,241); margin-top:5px; margin-left: 5px; margin-right: 5px;
+                    padding: 5px 15px; border-radius: 10px; color: var(--accent-color); display: inline-table;}
+    """
+    ]
+
     _template = """
+            <!-- fileUploadContainer can't be added to _stylesheets as it needs to be dynamically linked -->
             <style>
-                :host {
-                    width: 100%;
-                    margin: 0px;
-                    padding: 0px;
-                }
-
                 .fileUploadContainer {
-                    height: 130px;
-                }
-
-                .fileUploadDropArea {
-                    margin-left: 10px;
-                    margin-right: 10px;
-                    border: 1px dashed var(--accent-color);
-                    border-radius: 5px;
-                    height:100%;
-                    display:flex;
-                    text-align: center;
-                    justify-content: center;
-                    align-items: center;
-                    flex-direction: column;
-                }
-
-                .fileUploadDropArea span.bold {
-                    font-weight: bold;
-                }
-
-                .fileUploadDropArea img {
-                    padding-bottom:5px;
-                }
-
-                .fileUploadDropArea.draggedOver {
-                    border-width: 3px;
-                }
-
-                .fileUploadDropArea.uploaded {
-                    height: calc(100% - 40px);
-                }
-
-                .fileUpload {
-                    height: 100% !important;
-                    position: absolute;
-                    opacity: 0;
-                }
-
-                .fileListContainer {
-                    display:flex;
-                    flex-direction: row;
-                    height: 44px;
-                    overflow:scroll;
-                    padding-top:14px;
-                    padding-left:6px;
-                }
-
-                .chat_document_pill {
-                    background-color: rgb(241,241,241);
-                    margin-top:0px; 
-                    margin-left: 5px;   
-                    margin-right: 5px;
-                    padding: 5px 15px;
-                    border-radius: 10px;
-                    color: var(--accent-color);
-                    display: inline-table;
-                    }
-
+                    height: ${height_upload_container};
+                }                
             </style>
             <script>
                 var basePath = window.location.pathname