Add a fact checker feature with updated styling (#835)

- Add an experimental feature used for fact-checking falsifiable statements with customizable models. See attached screenshot for example. Once you input a statement that needs to be fact-checked, Khoj goes on a research spree to verify or refute it.
- Integrate frontend libraries for [Tailwind](https://tailwindcss.com/) and [ShadCN](https://ui.shadcn.com/) for easier UI development. Update corresponding styling for some existing UI components. 
- Add component for model selection 
- Add backend support for sharing arbitrary packets of data that will be consumed by specific front-end views in shareable scenarios

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

@@ -9,6 +9,7 @@ import useSWR from 'swr';
 import { useEffect, useState } from 'react';
 
 import { useAuthenticatedData, UserProfile } from '../common/auth';
+import { Button } from '@/components/ui/button';
 
 
 export interface AgentData {
@@ -27,7 +28,6 @@ async function openChat(slug: string, userData: UserProfile | null) {
     }
 
     const response = await fetch(`/api/chat/sessions?agent_slug=${slug}`, { method: "POST" });
-    // const data = await response.json();
     if (response.status == 200) {
         window.location.href = `/chat`;
     } else if(response.status == 403 || response.status == 401) {
@@ -74,7 +74,7 @@ function AgentModal(props: AgentModalProps) {
                             <h2>{props.data.name}</h2>
                         </div>
                         <div className={styles.agentModalActions}>
-                            <button onClick={() => {
+                            <Button className='bg-transparent hover:bg-yellow-500' onClick={() => {
                                     navigator.clipboard.writeText(`${window.location.host}/agents?agent=${props.data.slug}`);
                                     setCopiedToClipboard(true);
                             }}>
@@ -91,21 +91,23 @@ function AgentModal(props: AgentModalProps) {
                                             width={24}
                                             height={24} />
                                 }
-                            </button>
-                            <button onClick={() => props.setShowModal(false)}>
+                            </Button>
+                            <Button className='bg-transparent hover:bg-yellow-500' onClick={() => {
+                                props.setShowModal(false);
+                                }}>
                                 <Image
                                         src="Close.svg"
                                         alt="Close"
                                         width={24}
                                         height={24} />
-                            </button>
+                            </Button>
                         </div>
                     </div>
                     <p>{props.data.personality}</p>
                     <div className={styles.agentInfo}>
-                        <button onClick={() => openChat(props.data.slug, props.userData)}>
+                        <Button className='bg-yellow-400 hover:bg-yellow-500' onClick={() => openChat(props.data.slug, props.userData)}>
                             Chat
-                        </button>
+                        </Button>
                     </div>
                 </div>
             </div>
@@ -140,19 +142,23 @@ function AgentCard(props: AgentCardProps) {
                 </div>
             </Link>
             <div className={styles.agentInfo}>
-                <button className={styles.infoButton} onClick={() => setShowModal(true)}>
+                <button className={styles.infoButton} onClick={() =>  {
+                        setShowModal(true);
+                    } }>
                     <h2>{props.data.name}</h2>
                 </button>
             </div>
             <div className={styles.agentInfo}>
-                <button onClick={() => openChat(props.data.slug, userData)}>
+                <Button
+                    className='bg-yellow-400 hover:bg-yellow-500'
+                    onClick={() => openChat(props.data.slug, userData)}>
                     <Image
                         src="send.svg"
                         alt="Chat"
                         width={40}
                         height={40}
                     />
-                </button>
+                </Button>
             </div>
             <div className={styles.agentPersonality}>
                 <button className={styles.infoButton} onClick={() => setShowModal(true)}>
@@ -170,7 +176,7 @@ export default function Agents() {
     if (error) {
         return (
             <main className={styles.main}>
-                <div className={styles.titleBar}>
+                <div className={`${styles.titleBar} text-5xl`}>
                     Talk to a Specialized Agent
                 </div>
                 <div className={styles.agentList}>
@@ -183,7 +189,7 @@ export default function Agents() {
     if (!data) {
         return (
             <main className={styles.main}>
-                <div className={styles.titleBar}>
+                <div className={`${styles.titleBar} text-5xl`}>
                     Talk to a Specialized Agent
                 </div>
                 <div className={styles.agentList}>
@@ -195,7 +201,7 @@ export default function Agents() {
 
     return (
         <main className={styles.main}>
-            <div className={styles.titleBar}>
+            <div className={`${styles.titleBar} text-5xl`}>
                 Talk to a Specialized Agent
             </div>
             <div className={styles.agentList}>