Make most major changes for an updated chat UI (#843)

- Updated references panel
- Use subtle coloring for chat cards
- Chat streaming with train of thought
- Side panel with limited sessions, expandable
- Manage conversation file filters easily from the side panel
- Updated nav menu, easily go to agents/automations/profile
- Upload data from the chat UI (on click attachment icon)
- Slash command pop-up menu, scrollable and selectable
- Dark mode-enabled
- Mostly mobile friendly

src/interface/web/app/factchecker/page.tsx

@@ -140,6 +140,7 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
     const [initialResponse, setInitialResponse] = useState("");
     const [isLoading, setIsLoading] = useState(true);
     const verificationStatement = `${props.message}. Use this link for reference: ${props.additionalLink}`;
+    const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     useEffect(() => {
         if (props.prefilledResponse) {
@@ -149,6 +150,12 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
             verifyStatement(verificationStatement, props.conversationId, setIsLoading, setInitialResponse, () => {});
         }
 
+        setIsMobileWidth(window.innerWidth < 768);
+
+        window.addEventListener('resize', () => {
+            setIsMobileWidth(window.innerWidth < 768);
+        })
+
     }, [verificationStatement, props.conversationId, props.prefilledResponse]);
 
     useEffect(() => {
@@ -170,13 +177,12 @@ function ReferenceVerification(props: ReferenceVerificationProps) {
                 {
                     automationId: "",
                     by: "AI",
-                    intent: {},
                     message: initialResponse,
                     context: [],
                     created: (new Date()).toISOString(),
-                    onlineContext: {}
-                }
-            } setReferencePanelData={() => {}} setShowReferencePanel={() => {}} />
+                    onlineContext: {},
+                }}
+                isMobileWidth={isMobileWidth} />
         </div>
     )
 }
@@ -236,6 +242,7 @@ export default function FactChecker() {
     const [initialReferences, setInitialReferences] = useState<ResponseWithReferences>();
     const [childReferences, setChildReferences] = useState<SupplementReferences[]>();
     const [modelUsed, setModelUsed] = useState<Model>();
+    const [isMobileWidth, setIsMobileWidth] = useState(false);
 
     const [conversationID, setConversationID] = useState("");
     const [runId, setRunId] = useState("");
@@ -251,6 +258,15 @@ export default function FactChecker() {
         setChildReferences(newReferences);
     }
 
+    useEffect(() => {
+        setIsMobileWidth(window.innerWidth < 768);
+
+        window.addEventListener('resize', () => {
+            setIsMobileWidth(window.innerWidth < 768);
+        })
+
+    }, []);
+
     let userData = useAuthenticatedData();
 
     function storeData() {
@@ -390,6 +406,7 @@ export default function FactChecker() {
 
         const seenLinks = new Set();
 
+
         // Any links that are present in webpages should not be searched again
         Object.entries(initialReferences.online || {}).map(([key, onlineData], index) => {
             const webpages = onlineData?.webpages || [];
@@ -536,13 +553,12 @@ export default function FactChecker() {
                                 {
                                     automationId: "",
                                     by: "AI",
-                                    intent: {},
                                     message: initialResponse,
                                     context: [],
                                     created: (new Date()).toISOString(),
                                     onlineContext: {}
                                 }
-                            } setReferencePanelData={() => {}} setShowReferencePanel={() => {}} />
+                            } isMobileWidth={isMobileWidth} />
 
                         </div>
                     </CardContent>