From e20e54fdd1c57a7b023fd0e495aa2abbf3d62b6c Mon Sep 17 00:00:00 2001
From: Aidan Kelly <ai.kelly@northeastern.edu>
Date: Tue, 31 Mar 2026 17:29:53 -0400
Subject: [PATCH 1/2] Images adding and viewing fixed

---
 web/src/app/knowledge/page.tsx | 73 ++++++++++++++++++++++++----------
 1 file changed, 51 insertions(+), 22 deletions(-)

diff --git a/web/src/app/knowledge/page.tsx b/web/src/app/knowledge/page.tsx
index 1f74ac80..4eff24b3 100644
--- a/web/src/app/knowledge/page.tsx
+++ b/web/src/app/knowledge/page.tsx
@@ -133,6 +133,15 @@ function KnowledgePage() {
       }),
   });
 
+  const attachmentFileId = openedItemAttachmentQuery.data?.fileId;
+
+  const attachmentUrlQuery = useQuery({
+    queryKey: ["knowledge", "attachment-url", attachmentFileId],
+    enabled: Boolean(attachmentFileId),
+    queryFn: () =>
+      trpcClient.files.getFile.query({ fileId: attachmentFileId ?? "" }),
+  });
+
   const registerFolders = useCallback((folders: FolderRecord[]) => {
     if (folders.length === 0) {
       return;
@@ -492,23 +501,24 @@ function KnowledgePage() {
               ) : openedItem ? (
                 <div className="space-y-4 px-4 pb-4">
                   <div className="space-y-1">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                      Description
-                    </p>
-                    <p className="text-sm">
-                      {openedItem.description?.trim() || "—"}
-                    </p>
-                  </div>
+                    <h1 className="text-2xl font-bold">{openedItem.name}</h1>
 
-                  <div className="space-y-1">
-                    <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-                      Body
-                    </p>
-                    <p className="whitespace-pre-wrap text-sm">
-                      {openedItem.body?.trim() || "—"}
-                    </p>
+                    {openedItem.description?.trim() ? (
+                      <p className="text-sm font-bold">
+                        {openedItem.description.trim()}
+                      </p>
+                    ) : null}
                   </div>
 
+                  {openedItem.body?.trim() ? (
+                    <>
+                      <hr />
+                      <p className="whitespace-pre-wrap text-sm">
+                        {openedItem.body.trim()}
+                      </p>
+                    </>
+                  ) : null}
+
                   <div className="space-y-1">
                     <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
                       Last Modified
@@ -518,6 +528,14 @@ function KnowledgePage() {
                     </p>
                   </div>
 
+                  {attachmentUrlQuery.data?.contentType?.startsWith("image/") ? (
+                    <img
+                      src={attachmentUrlQuery.data.data}
+                      alt={openedItemAttachmentQuery.data?.fileName ?? "Attachment"}
+                      className="max-w-full rounded-md"
+                    />
+                  ) : null}
+
                   <div className="flex items-center justify-between rounded-md border bg-background px-3 py-2">
                     <div className="text-xs text-muted-foreground">
                       {openedItemAttachmentQuery.isLoading
@@ -725,14 +743,25 @@ function KnowledgePage() {
             <p className="text-xs text-muted-foreground">
               Attachment (optional)
             </p>
-            <Input
-              key={newItemAttachmentInputKey}
-              type="file"
-              onChange={(e) =>
-                setNewItemAttachment(e.target.files?.[0] ?? null)
-              }
-              disabled={isBusy}
-            />
+            <label
+              className={cn(
+                "flex h-9 w-full cursor-pointer items-center rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm",
+                isBusy && "cursor-not-allowed opacity-50",
+              )}
+            >
+              <span className={newItemAttachment ? "" : "text-muted-foreground"}>
+                {newItemAttachment ? newItemAttachment.name : "Choose File"}
+              </span>
+              <input
+                key={newItemAttachmentInputKey}
+                type="file"
+                className="hidden"
+                onChange={(e) =>
+                  setNewItemAttachment(e.target.files?.[0] ?? null)
+                }
+                disabled={isBusy}
+              />
+            </label>
           </div>
         </div>
       </Modal>

From 4826ab8f0f37f979cda429933d80d00ed66d3e6e Mon Sep 17 00:00:00 2001
From: Aidan Kelly <ai.kelly@northeastern.edu>
Date: Tue, 7 Apr 2026 13:26:15 -0400
Subject: [PATCH 2/2] linting fix

---
 web/src/app/knowledge/page.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/web/src/app/knowledge/page.tsx b/web/src/app/knowledge/page.tsx
index 4eff24b3..40b41775 100644
--- a/web/src/app/knowledge/page.tsx
+++ b/web/src/app/knowledge/page.tsx
@@ -3,6 +3,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { TRPCClientError } from "@trpc/client";
 import { ChevronRight, FileText, Folder, FolderOpen, Plus } from "lucide-react";
+import Image from "next/image";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Suspense, useCallback, useEffect, useMemo, useState } from "react";
 import { TitleShell } from "@/components/layouts/title-shell";
@@ -528,10 +529,14 @@ function KnowledgePage() {
                     </p>
                   </div>
 
-                  {attachmentUrlQuery.data?.contentType?.startsWith("image/") ? (
-                    <img
+                  {attachmentUrlQuery.data?.contentType?.startsWith(
+                    "image/",
+                  ) ? (
+                    <Image
                       src={attachmentUrlQuery.data.data}
-                      alt={openedItemAttachmentQuery.data?.fileName ?? "Attachment"}
+                      alt={
+                        openedItemAttachmentQuery.data?.fileName ?? "Attachment"
+                      }
                       className="max-w-full rounded-md"
                     />
                   ) : null}
@@ -749,7 +754,9 @@ function KnowledgePage() {
                 isBusy && "cursor-not-allowed opacity-50",
               )}
             >
-              <span className={newItemAttachment ? "" : "text-muted-foreground"}>
+              <span
+                className={newItemAttachment ? "" : "text-muted-foreground"}
+              >
                 {newItemAttachment ? newItemAttachment.name : "Choose File"}
               </span>
               <input