return source content from the REST API (#264)

Co-authored-by: Pierre-Olivier Simonard <[email protected]>

Author: pmeier

ragna/deploy/_api/database.py

@@ -113,6 +113,8 @@ def _orm_to_schema_chat(chat: orm.Chat) -> schemas.Chat:
                     id=source.id,
                     document=_orm_to_schema_document(source.document),
                     location=source.location,
+                    content=source.content,
+                    num_tokens=source.num_tokens,
                 )
                 for source in message.sources
             ],
@@ -170,6 +172,8 @@ def _schema_to_orm_source(session: Session, source: schemas.Source) -> orm.Sourc
             id=source.id,
             document_id=source.document.id,
             location=source.location,
+            content=source.content,
+            num_tokens=source.num_tokens,
         )
         session.add(orm_source)
         session.commit()

ragna/deploy/_api/orm.py

@@ -84,6 +84,8 @@ class Source(Base):
     document = relationship("Document", back_populates="sources")
 
     location = Column(types.String)
+    content = Column(types.String)
+    num_tokens = Column(types.Integer)
 
     messages = relationship(
         "Message",

ragna/deploy/_api/schemas.py

@@ -37,13 +37,17 @@ class Source(BaseModel):
     id: str
     document: Document
     location: str
+    content: str
+    num_tokens: int
 
     @classmethod
     def from_core(cls, source: ragna.core.Source) -> Source:
         return cls(
             id=source.id,
             document=Document.from_core(source.document),
             location=source.location,
+            content=source.content,
+            num_tokens=source.num_tokens,
         )
 
 

ragna/deploy/_ui/app.py

@@ -31,6 +31,7 @@
 class App(param.Parameterized):
     def __init__(self, *, url, api_url, origins):
         super().__init__()
+        ui.apply_design_modifiers()
         self.url = url
         self.api_url = api_url
         self.origins = origins

ragna/deploy/_ui/central_view.py

@@ -324,25 +324,32 @@ def on_click_source_info_wrapper(self, event, sources):
         if self.on_click_chat_info is None:
             return
 
-        markdown = [
-            "This response was generated using the following data from the uploaded files: <br />"
-        ]
+        source_infos = []
         for rank, source in enumerate(sources, 1):
             location = source["location"]
             if location:
-                location = f": {location}"
-            markdown.append(f"{rank}. **{source['document']['name']}**{location}")
-            markdown.append("----")
+                location = f": page(s) {location}"
+            source_infos.append(
+                (
+                    f"<b>{rank}. {source['document']['name']}</b> {location}",
+                    pn.pane.Markdown(source["content"], css_classes=["source-content"]),
+                )
+            )
 
         self.on_click_chat_info(
             event,
             "Source Info",
             [
                 pn.pane.Markdown(
-                    "\n".join(markdown),
+                    "This response was generated using the following data from the uploaded files: <br />",
                     dedent=True,
                     stylesheets=[""" hr { width: 94%; height:1px;  }  """],
                 ),
+                pn.layout.Accordion(
+                    *source_infos,
+                    header_background="transparent",
+                    stylesheets=ui.stylesheets((":host", {"width": "100%"})),
+                ),
             ],
         )
 

ragna/deploy/_ui/right_sidebar.py

@@ -64,7 +64,7 @@ def __panel__(self):
                                         height:100%;
                                         min-width: unset;
                                         width: 0px;
-                                        overflow:hidden;
+                                        overflow:auto;
 
                                         margin-left: min(15px, 2%);
                                         border-left: 1px solid #EEEEEE;
@@ -83,6 +83,7 @@ def __panel__(self):
 
                                 :host(.visible_sidebar) {
                                         animation: 0.25s ease-in forwards show_right_sidebar;
+                                        background-color: white;
                                 }
 
                                 @keyframes show_right_sidebar {

ragna/deploy/_ui/styles.py

@@ -10,6 +10,112 @@ def divider():
     return pn.layout.Divider(styles={"padding": "0em 1em"})
 
 
+def apply_design_modifiers():
+    apply_design_modifiers_source_accordion()
+    # add here calls to other design modifiers,
+    #   group them per UI component
+
+
+def apply_design_modifiers_source_accordion():
+    pn.theme.fast.Fast.modifiers[pn.layout.Accordion] = {
+        "stylesheets": [
+            """ :host { 
+                                    height: 100%
+                                    }
+                           """
+        ]
+    }
+
+    pn.theme.fast.Fast.modifiers[pn.layout.Card] = {
+        "stylesheets": [
+            """ 
+
+                        /* Define some variables */
+                        :host {
+                            --ragna-accordion-header-height: 50px;
+                        } 
+
+                        /* Resets some existing styles */
+                        :host(.accordion) { 
+                            margin-left: 0px;
+                            margin-top: 0px;
+                            outline: none;
+                        }
+                        
+                        /* Styles the button itself */
+                        button.accordion-header { 
+                            background-color: white !important;
+                            height: var(--ragna-accordion-header-height);
+                            padding-top: 0px;
+                            padding-bottom: 0px;
+                            outline:0px;
+                            margin-left: 15px;
+                            margin-right: 15px;
+                            width: calc(100% - 30px);
+                            border-bottom: 2px solid #D9D9D9;
+                        
+                        }
+                        
+                        button.accordion-header div.card-button {
+                            font-size: 11px;
+                            padding-top: 5px;
+                            margin-left: 0px;
+                            margin-right: 10px;
+                        }
+                        
+                        div.card-header-row {
+                            height: var(--ragna-accordion-header-height);
+                            background-color: unset !important;
+                        }
+
+                        /* styles the content of the sources content (the expanding areas of the Accordion) */
+                        div.bk-panel-models-markup-HTML.markdown {
+                            margin-left: 15px;
+                            margin-right: 15px;
+                            margin-top:0px;
+                        }
+
+                    """
+        ]
+    }
+
+    pn.theme.fast.Fast.modifiers[pn.pane.HTML] = {
+        "stylesheets": [
+            """ :host(.card-title) {
+                                height: var(--ragna-accordion-header-height);
+                                margin: 0px;
+                            }
+                        
+                            :host(.card-title) div {
+                                height: var(--ragna-accordion-header-height);
+                                
+                                display:flex;
+                                flex-direction:row;
+                                align-items:center;
+                            }
+                        
+
+                            :host(.card-title) h3 {
+                                font-weight: normal;
+                            }
+                        """
+        ]
+    }
+
+    pn.theme.fast.Fast.modifiers[pn.pane.Markdown] = {
+        "stylesheets": [
+            """  /* Styles the content of the sources content (the expanding areas of the Accordion).
+                            This fixes a small margin-top that is added by default and that leads to overflowing content 
+                            in some cases.
+                            */
+                            :host(.source-content) p:nth-of-type(1)  {
+                                margin-top: 0px;
+                            }
+                        """
+        ]
+    }
+
+
 """
 CSS constants
 """