Add Office preview support for Word and PowerPoint files

Home.py

@@ -76,7 +76,7 @@ step_cards = [
     (
         "02",
         "Browse the material",
-        "Open notes and PDFs in the hub and preview them without leaving the app.",
+        "Open notes, Word docs, and slides in the hub and preview them without leaving the app.",
     ),
     (
         "03",

README.md

@@ -32,10 +32,10 @@ Plexi is a free web app that gives Collage students easy access to study materia
 
 ### Study Material Hub
 
-Browse and download notes, slides, and other materials organized by **semester → subject → type**. PDFs open right in the browser — no extra apps needed.
+Browse and download notes, slides, and other materials organized by **semester → subject → type**. PDFs, Word documents, and PowerPoint files open right in the browser — no extra apps needed.
 
 - Filter by semester, subject, and file type
-- In-Build PDF Viewer
+- Inline preview for PDF, DOC, DOCX, PPT, and PPTX
 - Download any file with one click
 
 ### Plexi Assistant

pages/Study_Material_Hub.py

@@ -1,6 +1,8 @@
 from html import escape
+from urllib.parse import quote
 
 import streamlit as st
+import streamlit.components.v1 as components
 from streamlit_pdf_viewer import pdf_viewer
 from utils import (
     APP_ICON_PATH,
@@ -20,25 +22,29 @@ st.set_page_config(
 )
 inject_theme()
 
+OFFICE_PREVIEW_MIMES = {
+    "application/msword",
+    "application/vnd.ms-powerpoint",
+    "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+    "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+}
+
 
 def display_pdf(file_content):
     """Display PDF using streamlit-pdf-viewer."""
     pdf_viewer(file_content, width="100%", height=700)
 
 
-def display_ppt(file_content, filename):
-    """Show PPT download button when inline preview is unavailable."""
-    st.info("PowerPoint files cannot be previewed inline yet. Use the download button.")
-    st.download_button(
-        label="Download PPT",
-        data=file_content,
-        file_name=filename,
-        mime="application/vnd.openxmlformats-officedocument.presentationml.presentation",
-        use_container_width=True,
-        type="primary",
+def display_office_document(download_url, filename):
+    """Display Word and PowerPoint files using Office Web Viewer."""
+    encoded_url = quote(download_url, safe="")
+    preview_url = f"https://view.officeapps.live.com/op/embed.aspx?src={encoded_url}"
+    components.iframe(preview_url, width=None, height=700, scrolling=True)
+    st.caption(
+        f"Inline preview for `{filename}` is powered by Office Web Viewer. "
+        "If it does not load, use the download button."
     )
 
-
 try:
     manifest = get_manifest()
 except Exception as err:
@@ -62,15 +68,16 @@ with st.container():
         "Material hub",
         "Browse the catalog without losing context",
         (
-            "Move from semester to file in a single flow, preview PDFs in place, and "
-            "download the exact asset you want from the shared materials repository."
+            "Move from semester to file in a single flow, preview supported files in "
+            "place, and download the exact asset you want from the shared materials "
+            "repository."
         ),
         badges=[
             f"{catalog_summary['semester_count']} semesters"
             if catalog_summary
             else None,
             f"{catalog_summary['file_count']} files" if catalog_summary else None,
-            "Inline PDF preview",
+            "Inline document preview",
         ],
     )
 
@@ -182,11 +189,10 @@ with preview_col:
 
     if file_mime == "application/pdf":
         display_pdf(file_content)
-    elif file_mime in [
-        "application/vnd.ms-powerpoint",
-        "application/vnd.openxmlformats-officedocument.presentationml.presentation",
-    ]:
-        display_ppt(file_content, selected_file_obj["name"])
+    elif file_mime in OFFICE_PREVIEW_MIMES:
+        display_office_document(
+            selected_file_obj["download_url"], selected_file_obj["name"]
+        )
     else:
         st.info(
             "Preview is not available for this file type. Download it to inspect the content."