Add our first view via Next.js for Agents (#817)

Initialize our migration to use Next.js for front-end views via Agents. This includes setup for getting authenticated users, reading in available agents, setting up a pop-up modal when you're clicking on an agent, and allowing users to start new conversations with agents.

Best attempt at an in-place migration, though there are some noticeable differences.

Also adds view for chat that are not being used, but in experimental phase.

src/interface/web/app/components/navMenu/navMenu.module.css

@@ -0,0 +1,96 @@
+menu.menu a {
+    color: var(--main-text-color);
+    text-decoration: none;
+    font-size: medium;
+    font-weight: normal;
+    padding: 0 4px;
+    border-radius: 4px;
+    display: flex;
+    justify-self: center;
+    margin: 0;
+    align-items: center;
+    gap: 4px;
+}
+
+menu.menu a.selected {
+    background-color: var(--primary-hover);
+}
+
+menu.menu a:hover {
+    background-color: var(--primary-hover);
+}
+
+menu.menu {
+    display: flex;
+    justify-content: space-around;
+    padding: 0;
+    margin: 0;
+}
+
+div.titleBar {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    padding: 16px 0;
+    margin: auto;
+}
+
+div.titleBar menu {
+    padding: 0;
+    margin: 0;
+    border-radius: 0.5rem;
+    display: grid;
+    grid-auto-flow: column;
+    gap: 32px;
+}
+
+div.settingsMenuProfile img {
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    margin: 0;
+}
+
+div.settingsMenu {
+    color: var(--main-text-color);
+    padding: 0 4px;
+    border-radius: 4px;
+    display: flex;
+    justify-self: center;
+    margin: 0;
+    align-items: center;
+}
+
+div.settingsMenu:hover {
+    background-color: var(--primary-hover);
+    cursor: pointer;
+}
+
+div.settingsMenuOptions {
+    display: block;
+    grid-auto-flow: row;
+    position: absolute;
+    background-color: var(--background-color);
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    top: 64px;
+    text-align: left;
+    padding: 8px;
+    border-radius: 8px;
+}
+
+div.settingsMenuOptions a {
+    padding: 4px;
+}
+
+div.settingsMenuUsername {
+    font-weight: bold;
+}
+
+@media screen and (max-width: 600px) {
+    menu.menu span {
+        display: none;
+    }
+
+    div.settingsMenuOptions {
+        right: 4px;
+    }
+}

src/interface/web/app/components/navMenu/navMenu.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import styles from './navMenu.module.css';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useAuthenticatedData, UserProfile } from '@/app/common/auth';
+import { useState } from 'react';
+
+
+interface NavMenuProps {
+    selected: string;
+}
+
+function SettingsMenu(props: UserProfile) {
+    const [showSettings, setShowSettings] = useState(false);
+
+    return (
+        <div className={styles.settingsMenu}>
+            <div className={styles.settingsMenuProfile} onClick={() => setShowSettings(!showSettings)}>
+                <Image
+                    src={props.photo || "/agents.svg"}
+                    alt={props.username}
+                    width={50}
+                    height={50}
+                />
+            </div>
+            {showSettings && (
+                <div className={styles.settingsMenuOptions}>
+                    <div className={styles.settingsMenuUsername}>{props.username}</div>
+                    <Link href="/config">
+                        Settings
+                    </Link>
+                    <Link href="https://github.com/khoj-ai/khoj">
+                        Github
+                    </Link>
+                    <Link href="https://docs.khoj.dev">
+                        Help
+                    </Link>
+                    <Link href="/auth/logout">
+                        Logout
+                    </Link>
+                </div>
+            )}
+        </div>
+    );
+}
+export default function NavMenu(props: NavMenuProps) {
+
+    let userData = useAuthenticatedData();
+    return (
+        <div className={styles.titleBar}>
+            <Link href="/">
+                <Image
+                    src="/khoj-logo.svg"
+                    alt="Khoj Logo"
+                    className={styles.logo}
+                    width={100}
+                    height={50}
+                    priority
+                />
+            </Link>
+            <menu className={styles.menu}>
+                <a className={props.selected === "Chat" ? styles.selected : ""} href = '/chat'>
+                    <Image
+                        src="/chat.svg"
+                        alt="Chat Logo"
+                        className={styles.lgoo}
+                        width={24}
+                        height={24}
+                        priority
+                    />
+                    <span>
+                        Chat
+                    </span>
+                </a>
+                <a className={props.selected === "Agents" ? styles.selected : ""} href='/agents'>
+                    <Image
+                        src="/agents.svg"
+                        alt="Agent Logo"
+                        className={styles.lgoo}
+                        width={24}
+                        height={24}
+                        priority
+                    />
+                    <span>
+                        Agents
+                    </span>
+                </a>
+                <a className={props.selected === "Automations" ? styles.selected : ""} href = '/automations'>
+                    <Image
+                        src="/automation.svg"
+                        alt="Automation Logo"
+                        className={styles.lgoo}
+                        width={24}
+                        height={24}
+                        priority
+                    />
+                    <span>
+                        Automations
+                    </span>
+                </a>
+                {userData && <SettingsMenu {...userData} />}
+            </menu>
+        </div>
+    )
+}