From 2ab6fe6f7be11eda6ff8ce4e752a4e21c8e85870 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 12 Feb 2026 17:57:38 -0700
Subject: [PATCH] Add basic chat page with entry

---
 web/src/App.tsx                 |  2 ++
 web/src/hooks/use-navigation.ts | 12 ++++++++++--
 web/src/pages/Chat.tsx          | 29 +++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 web/src/pages/Chat.tsx

diff --git a/web/src/App.tsx b/web/src/App.tsx
index d7a9ec3e9..82ca2b1e0 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -27,6 +27,7 @@ const Settings = lazy(() => import("@/pages/Settings"));
 const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
 const FaceLibrary = lazy(() => import("@/pages/FaceLibrary"));
 const Classification = lazy(() => import("@/pages/ClassificationModel"));
+const Chat = lazy(() => import("@/pages/Chat"));
 const Logs = lazy(() => import("@/pages/Logs"));
 const AccessDenied = lazy(() => import("@/pages/AccessDenied"));
 
@@ -106,6 +107,7 @@ function DefaultAppView() {
               <Route path="/logs" element={<Logs />} />
               <Route path="/faces" element={<FaceLibrary />} />
               <Route path="/classification" element={<Classification />} />
+              <Route path="/chat" element={<Chat />} />
               <Route path="/playground" element={<UIPlayground />} />
             </Route>
             <Route path="/unauthorized" element={<AccessDenied />} />
diff --git a/web/src/hooks/use-navigation.ts b/web/src/hooks/use-navigation.ts
index 860b02e81..e32b28b62 100644
--- a/web/src/hooks/use-navigation.ts
+++ b/web/src/hooks/use-navigation.ts
@@ -6,7 +6,7 @@ import { isDesktop } from "react-device-detect";
 import { FaCompactDisc, FaVideo } from "react-icons/fa";
 import { IoSearch } from "react-icons/io5";
 import { LuConstruction } from "react-icons/lu";
-import { MdCategory, MdVideoLibrary } from "react-icons/md";
+import { MdCategory, MdChat, MdVideoLibrary } from "react-icons/md";
 import { TbFaceId } from "react-icons/tb";
 import useSWR from "swr";
 import { useIsAdmin } from "./use-is-admin";
@@ -18,6 +18,7 @@ export const ID_EXPORT = 4;
 export const ID_PLAYGROUND = 5;
 export const ID_FACE_LIBRARY = 6;
 export const ID_CLASSIFICATION = 7;
+export const ID_CHAT = 8;
 
 export default function useNavigation(
   variant: "primary" | "secondary" = "primary",
@@ -82,7 +83,14 @@ export default function useNavigation(
           url: "/classification",
           enabled: isDesktop && isAdmin,
         },
+        {
+          id: ID_CHAT,
+          variant,
+          icon: MdChat,
+          url: "/chat",
+          enabled: isDesktop && isAdmin && config?.genai?.model !== "none",
+        },
       ] as NavData[],
-    [config?.face_recognition?.enabled, variant, isAdmin],
+    [config?.face_recognition?.enabled, config?.genai?.model, variant, isAdmin],
   );
 }
diff --git a/web/src/pages/Chat.tsx b/web/src/pages/Chat.tsx
new file mode 100644
index 000000000..a642668c6
--- /dev/null
+++ b/web/src/pages/Chat.tsx
@@ -0,0 +1,29 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { FaArrowUpLong } from "react-icons/fa6";
+
+export default function ChatPage() {
+  return (
+    <div className="flex size-full flex-col items-center p-2">
+      <div className="size-full"></div>
+      <ChatEntry />
+    </div>
+  );
+}
+
+function ChatEntry() {
+  return (
+    <div className="flex w-full flex-col items-center justify-center rounded-xl bg-secondary p-2 xl:w-[40%]">
+      <Input
+        className="w-full border-transparent bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent"
+        placeholder="Ask anything..."
+      />
+      <div className="flex w-full flex-row items-center justify-between">
+        <div></div>
+        <Button variant="select" disabled className="size-10 rounded-full">
+          <FaArrowUpLong size="16" />
+        </Button>
+      </div>
+    </div>
+  );
+}