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/chatHistory/chatHistory.module.css

@@ -0,0 +1,12 @@
+div.chatHistory {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+div.chatLayout {
+    height: 80vh;
+    overflow-y: auto;
+    /* width: 80%; */
+    margin: 0 auto;
+}

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

@@ -0,0 +1,99 @@
+'use client'
+
+import styles from './chatHistory.module.css';
+import { useRef, useEffect, useState } from 'react';
+
+import ChatMessage, { ChatHistoryData, SingleChatMessage } from '../chatMessage/chatMessage';
+
+import renderMathInElement from 'katex/contrib/auto-render';
+import 'katex/dist/katex.min.css';
+import 'highlight.js/styles/github.css'
+
+interface ChatResponse {
+    status: string;
+    response: ChatHistoryData;
+}
+
+interface ChatHistory {
+    [key: string]: string
+}
+
+interface ChatHistoryProps {
+    conversationId: string;
+    setReferencePanelData: Function;
+    setShowReferencePanel: Function;
+}
+
+
+export default function ChatHistory(props: ChatHistoryProps) {
+    const [data, setData] = useState<ChatHistoryData | null>(null);
+    const [isLoading, setLoading] = useState(true)
+    const ref = useRef<HTMLDivElement>(null);
+    const chatHistoryRef = useRef(null);
+
+
+	useEffect(() => {
+
+        fetch(`/api/chat/history?client=web&conversation_id=${props.conversationId}&n=10`)
+            .then(response => response.json())
+            .then((chatData: ChatResponse) => {
+                setLoading(false);
+                // Render chat options, if any
+                if (chatData) {
+                    setData(chatData.response);
+                }
+            })
+            .catch(err => {
+                console.error(err);
+                return;
+            });
+	}, [props.conversationId]);
+
+
+    useEffect(() => {
+        const observer = new MutationObserver((mutationsList, observer) => {
+            // If the addedNodes property has one or more nodes
+            for(let mutation of mutationsList) {
+                if(mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+                    // Call your function here
+                    renderMathInElement(document.body, {
+                        delimiters: [
+                            { left: '$$', right: '$$', display: true },
+                            { left: '\\[', right: '\\]', display: true },
+                            { left: '$', right: '$', display: false },
+                            { left: '\\(', right: '\\)', display: false },
+                        ],
+                    });
+                }
+            }
+        });
+
+        if (chatHistoryRef.current) {
+            observer.observe(chatHistoryRef.current, { childList: true });
+        }
+
+        // Clean up the observer on component unmount
+        return () => observer.disconnect();
+    }, []);
+
+    if (isLoading) {
+        return <h2>🌀 Loading...</h2>;
+    }
+
+    return (
+        <div className={styles.main + " " + styles.chatLayout}>
+            <div ref={ref}>
+                <div className={styles.chatHistory} ref={chatHistoryRef}>
+                    {(data && data.chat) && data.chat.map((chatMessage, index) => (
+                        <ChatMessage
+                            key={index}
+                            chatMessage={chatMessage}
+                            setReferencePanelData={props.setReferencePanelData}
+                            setShowReferencePanel={props.setShowReferencePanel}
+                        />
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+}