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/suggestions/suggestionCard.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import styles from "./suggestions.module.css";
+
+interface SuggestionCardProps {
+	title: string;
+	body: string;
+	link: string;
+	styleClass: string;
+}
+
+export default function SuggestionCard(data: SuggestionCardProps) {
+
+	return (
+		<div className={styles[data.styleClass] + " " + styles.card}>
+			<div className={styles.title}>
+				{data.title}
+			</div>
+			<div className={styles.body}>
+				{data.body}
+			</div>
+			<div>
+				<a
+					href={data.link}
+					target="_blank"
+					rel="noopener noreferrer"
+				>click me
+				</a>
+			</div>
+		</div>
+	);
+}

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

@@ -0,0 +1,40 @@
+div.pink {
+    background-color: #f8d1f8;
+    color: #000000;
+}
+
+div.blue {
+    background-color: #d1f8f8;
+    color: #000000;
+}
+
+div.green {
+    background-color: #d1f8d1;
+    color: #000000;
+}
+
+div.purple {
+    background-color: #f8d1f8;
+    color: #000000;
+}
+
+div.yellow {
+    background-color: #f8f8d1;
+    color: #000000;
+}
+
+div.card {
+    padding: 1rem;
+    margin: 1rem;
+    border: 1px solid #000000;
+    border-radius: 0.5rem;
+}
+
+div.title {
+    font-size: 1.5rem;
+    font-weight: bold;
+}
+
+div.body {
+    font-size: 1rem;
+}