daxa-ai · rutujaac · Mar 13, 2024
diff --git a/pebblo/app/config/service.py b/pebblo/app/config/service.py
@@ -5,17 +5,32 @@
 from typing import Any
 
 import uvicorn
-from fastapi import FastAPI, Response
+from fastapi import FastAPI, Response, Request
 from fastapi.staticfiles import StaticFiles
+from starlette.responses import RedirectResponse
 
 from pebblo.app.routers.local_ui_routers import local_ui_router_instance
 from pebblo.app.routers.redirection_router import redirect_router_instance
 from pebblo.app.exceptions.exception_handler import exception_handlers
+from starlette.middleware.base import BaseHTTPMiddleware
 
 with redirect_stdout(StringIO()), redirect_stderr(StringIO()):
     from pebblo.app.routers.routers import router_instance
 
 
+class AddTrailingSlashMiddleware(BaseHTTPMiddleware):
+    def __init__(self, app: FastAPI, excluded_extensions: list = None):
+        super().__init__(app)
+        self.excluded_extensions = excluded_extensions or []
+
+    async def dispatch(self, request: Request, call_next):
+        # Check if the request path doesn't end with a trailing slash and the path does not contain any excluded file extensions
+        if  not request.url.path.endswith("/") and not any(request.url.path.endswith(ext) for ext in self.excluded_extensions):
+            url_with_slash = request.url.replace(path=request.url.path + "/")
+            return RedirectResponse(url_with_slash)
+        else:
+            return await call_next(request)
+
 class NoCacheStaticFiles(StaticFiles):
     def __init__(self, *args: Any, **kwargs: Any):
         self.cachecontrol = "max-age=0, no-cache, no-store, , must-revalidate"
@@ -35,10 +50,13 @@ class Service:
     def __init__(self, config_details):
         # Initialise app instance
         self.app = FastAPI(exception_handlers=exception_handlers)
+        # List of file extensions to be excluded from trailing slash redirection
+        EXCLUDED_EXTENSIONS = [".css", ".js", ".png", ]
         # Register the router instance with the main app
         self.app.include_router(router_instance.router)
         self.app.include_router(local_ui_router_instance.router)
         self.app.include_router(redirect_router_instance.router)
+        self.app.add_middleware(AddTrailingSlashMiddleware, excluded_extensions=EXCLUDED_EXTENSIONS)
         # Fetching Details from Config File
         self.config_details = config_details
         self.port = self.config_details.get("daemon", {}).get("port", 8000)
@@ -49,9 +67,16 @@ async def create_main_api_server(self):
         self.app.mount(
             path="/static",
             app=NoCacheStaticFiles(
+                directory=Path(__file__).parent.parent.absolute() / "pebblo-ui/static"
+            ),
+            name="_static",
+        )
+        self.app.mount(
+            path="/",
+            app=StaticFiles(
                 directory=Path(__file__).parent.parent.absolute() / "pebblo-ui"
             ),
-            name="static",
+            name="_app",
         )
 
         # Add config Details to Uvicorn

diff --git a/pebblo/app/pebblo-ui/index.html b/pebblo/app/pebblo-ui/index.html
@@ -10,24 +10,28 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="shortcut icon"
-      href="{{ url_for('static', path='/static/pebblo-favicon.png') }}"
-      type="image/x-icon" />
+      href="{{ url_for('_static', path='/pebblo-favicon.png') }}"
+      type="image/x-icon"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap"
-      rel="stylesheet" />
+      rel="stylesheet"
+    />
     <title>Pebblo</title>
     <link
-      href="{{ url_for('static', path='/static/index.css') }}?v=1.1.0"
-      rel="stylesheet" />
+      href="{{ url_for('_static', path='/index.css') }}?v=1.1.0"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>
   </body>
   <script
     type="module"
     id="main_script"
-    src="{{ url_for('static', path='index.js') }}"
-    data-static="{{ url_for('static', path='') }}"
+    src="{{ url_for('_app', path='index.js') }}"
+    data-static="{{ url_for('_static', path='') }}"
     data-appdata="{{data}}"
-    data-proxy="{{proxy}}"></script>
+    data-proxy="{{proxy}}"
+  ></script>
 </html>
diff --git a/pebblo/app/pebblo-ui/src/components/header.js b/pebblo/app/pebblo-ui/src/components/header.js
@@ -3,7 +3,7 @@ import { MEDIA_URL } from "../constants/constant.js";
 export function Header() {
   return /*html*/ ` 
   <div id="header" class="relative pt-4 pb-4 pl-6 pr-6">
-    <img class="cursor-pointer" src="${MEDIA_URL}/static/pebblo-icon.png" alt="Pebblo Icon" />
+    <img class="cursor-pointer" src="${MEDIA_URL}/pebblo-icon.png" alt="Pebblo Icon" />
     <div class="mask absolute top-0 h-59 w-full left-0 -z-1"></div>
   </div>`;
 }
diff --git a/pebblo/app/pebblo-ui/src/constants/constant.js b/pebblo/app/pebblo-ui/src/constants/constant.js
@@ -20,7 +20,7 @@ export const NO_FINDINGS_FOR_APP =
 
 export const EMPTY_STATES = {
   ENABLE_PEBBLO_EMPTY_STATE: {
-    image: `${MEDIA_URL}/static/pebblo-image.png`,
+    image: `${MEDIA_URL}/pebblo-image.png`,
     heading: "Enable Pebblo to unlock insights in your Gen-AI apps",
     subHeading:
       "Check out our installation guide or watch the video tutorial to enable Pebblo",
@@ -33,7 +33,7 @@ export const EMPTY_STATES = {
     ],
   },
   NO_FINDINGS_EMPTY_STATE: {
-    image: `${MEDIA_URL}/static/no-findings.png`,
+    image: `${MEDIA_URL}/no-findings.png`,
     heading: "",
     subHeading:
       "We scanned all your documents and didn’t discover any documents with findings",

diff --git a/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js b/pebblo/app/pebblo-ui/src/pages/appDetailsPage.js
@@ -20,42 +20,46 @@ import {
 import { CLICK, LOAD, PATH } from "../constants/enums.js";
 import { GET_FILE } from "../services/get.js";
 import { GET_REPORT } from "../constants/routesConstant.js";
-import { CheckIcon, CopyIcon, DownloadIcon, LoadHistoryIcon } from "../icons/index.js";
-
+import {
+  CheckIcon,
+  CopyIcon,
+  DownloadIcon,
+  LoadHistoryIcon,
+} from "../icons/index.js";
 
 const DialogBody = () => {
   return /*html*/ `
   <div class="load-history-table pt-6 pb-6 pr-6 pl-6 rounded-md">
     ${Table({
-    tableCol: LOAD_HISTORY_TABLE_COL,
-    tableData: LOAD_HISTORY_TABLE_DATA,
-  })}
+      tableCol: LOAD_HISTORY_TABLE_COL,
+      tableData: LOAD_HISTORY_TABLE_DATA,
+    })}
   </div>
   `;
 };
 
 export function AppDetailsPage() {
   window.addEventListener(LOAD, function () {
     const download_icon = document.getElementById("download_report_btn");
-    const copyPath = document.getElementById("copy_path")
+    const copyPath = document.getElementById("copy_path");
     download_icon?.addEventListener(CLICK, function () {
       GET_FILE(`${GET_REPORT}?app_name=${APP_DATA?.name}`);
     });
-    copyPath?.addEventListener('click', onCopyText)
+    copyPath?.addEventListener("click", onCopyText);
   });
 
   function onCopyText() {
     const pathValue = document.getElementById("path_value");
-    const copyIcon = document.getElementById("copy_path")
-    const copyTooltip = document.getElementById("copy_tooltip")
-    copyIcon.innerHTML = CheckIcon({ color: 'success' });
-    copyTooltip.style.visibility = "visible"
+    const copyIcon = document.getElementById("copy_path");
+    const copyTooltip = document.getElementById("copy_tooltip");
+    copyIcon.innerHTML = CheckIcon({ color: "success" });
+    copyTooltip.style.visibility = "visible";
     navigator.clipboard.writeText(pathValue.textContent);
     const setIcon = setTimeout(() => {
       copyIcon.innerHTML = CopyIcon({ color: "grey", class: "cursor-pointer" });
-      copyTooltip.style.visibility = "hidden"
-      clearTimeout(setIcon)
-    }, 2000)
+      copyTooltip.style.visibility = "hidden";
+      clearTimeout(setIcon);
+    }, 2000);
   }
 
   // last updated date
@@ -68,7 +72,7 @@ export function AppDetailsPage() {
       <div class="flex justify-between">
         <div class="flex gap-3">
            <div class="bg-surface-10 pl-2 pr-2 pt-4 pb-4 rounded-lg">
-             <img src="${MEDIA_URL}/static/langchain-icon.png" alt="App icon" />
+             <img src="${MEDIA_URL}/langchain-icon.png" alt="App icon" />
            </div>
            <div class="flex flex-col gap-1 inter surface-10">
              <div class="font-24">${APP_DATA?.name}</div>
@@ -80,55 +84,56 @@ export function AppDetailsPage() {
         </div>
         <div class="flex gap-2 mt-auto h-fit">
           ${Button({
-    variant: "text",
-    btnText: "Download Report",
-    startIcon: DownloadIcon({ color: "primary" }),
-    id: "download_report_btn",
-    color: "primary"
-  })}
+            variant: "text",
+            btnText: "Download Report",
+            startIcon: DownloadIcon({ color: "primary" }),
+            id: "download_report_btn",
+            color: "primary",
+          })}
           <div class="divider mt-2 mb-2"></div>
           ${Button({
-    variant: "text",
-    btnText: "Load History",
-    startIcon: LoadHistoryIcon({ color: "primary" }),
-    id: "load_history_dialog_btn",
-    color: "primary"
-  })}
+            variant: "text",
+            btnText: "Load History",
+            startIcon: LoadHistoryIcon({ color: "primary" }),
+            id: "load_history_dialog_btn",
+            color: "primary",
+          })}
         </div>
       </div>
       ${AccordionDetails({
-    children: /*html*/ `<div class="grid grid-cols-4 row-gap-3 col-gap-3 w-full">
+        children: /*html*/ `<div class="grid grid-cols-4 row-gap-3 col-gap-3 w-full">
            ${APP_DETAILS?.myMap((item) =>
-      KeyValue({
-        key: item.label,
-        value: item?.render ? item.render : item.value,
-        className: item?.label === PATH ? "col-4" : "",
-      })
-    )}
+             KeyValue({
+               key: item.label,
+               value: item?.render ? item.render : item.value,
+               className: item?.label === PATH ? "col-4" : "",
+             })
+           )}
         </div>`,
-    id: "panel-1",
-  })}
+        id: "panel-1",
+      })}
       <div class="divider-horizontal"></div>
       <div class="flex flex-col gap-4 h-full">
         <div class="flex gap-2 surface-10 inter items-center">
            <div class="font-16">Report Summary</div>
-           <div class="font-12">Current Load By ${APP_DATA?.reportSummary.owner
-    }, ${get_Formatted_Date(APP_DATA?.reportSummary.createdAt)} </div>
+           <div class="font-12">Current Load By ${
+             APP_DATA?.reportSummary.owner
+           }, ${get_Formatted_Date(APP_DATA?.reportSummary.createdAt)} </div>
 
         </div>
         ${Tabs(
-      TABS_ARR_FOR_APPLICATION_DETAILS,
-      TAB_PANEL_ARR_FOR_APPLICATION_DETAILS
-    )}
+          TABS_ARR_FOR_APPLICATION_DETAILS,
+          TAB_PANEL_ARR_FOR_APPLICATION_DETAILS
+        )}
       </div>
 
       ${Dialog({
-      title: "Load History",
-      maxWidth: "md",
-      dialogBody: DialogBody(),
-      dialogId: "load_history_dialog",
-      btnId: "load_history_dialog_btn",
-    })}
+        title: "Load History",
+        maxWidth: "md",
+        dialogBody: DialogBody(),
+        dialogId: "load_history_dialog",
+        btnId: "load_history_dialog_btn",
+      })}
    </div>
     `;
 }
diff --git a/pebblo/app/pebblo-ui/src/pages/pageNotFound.js b/pebblo/app/pebblo-ui/src/pages/pageNotFound.js
@@ -5,7 +5,7 @@ import { DASHBOARD_ROUTE } from "../constants/routesConstant.js";
 export const PageNotFound = () => {
   return /*html*/ `
         <div class="inter w-100 h-full flex flex-col gap-6 items-center justify-center">
-            <img src=${`${MEDIA_URL}/static/not-found.png`} alt="page-not-found" height=${180} />
+            <img src=${`${MEDIA_URL}/not-found.png`} alt="page-not-found" height=${180} />
             <div class="flex flex-col items-center font-20">
                 <div>Uh-oh! It seems you've stumbled upon a lost page.</div>
                 <div>Let's help you find your way.</div>