Fix welcome modal

web/src/app/admin/bot/SlackBotConfigCreationForm.tsx

@@ -41,7 +41,6 @@ export const SlackBotCreationForm = ({
   existingSlackBotConfig?: SlackBotConfig;
 }) => {
   const isUpdate = existingSlackBotConfig !== undefined;
-  console.log(existingSlackBotConfig);
   const { popup, setPopup } = usePopup();
   const router = useRouter();
 
@@ -209,8 +208,8 @@ export const SlackBotCreationForm = ({
                   <Text className="mt-2">
                     <b>NOTE:</b> whichever tab you are when you submit the form
                     will be the one that is used. For example, if you are on the
-                    &quot;Personas&quot; tab, then the Persona will be used, even if you
+                    &quot;Personas&quot; tab, then the Persona will be used,
-                    have Document Sets selected.
+                    even if you have Document Sets selected.
                   </Text>
                 </div>
 

web/src/app/admin/bot/[id]/page.tsx

@@ -7,12 +7,13 @@ import { DocumentSet, SlackBotConfig } from "@/lib/types";
 import { Text } from "@tremor/react";
 import { BackButton } from "@/components/BackButton";
 import { Persona } from "../../personas/interfaces";
+import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 
 async function Page({ params }: { params: { id: string } }) {
   const tasks = [
-    fetchSS("/manage/admin/slack-bot/config", undefined, true),
+    fetchSS("/manage/admin/slack-bot/config"),
-    fetchSS("/manage/document-set", undefined, true),
+    fetchSS("/manage/document-set"),
-    fetchSS("/persona", undefined, true),
+    fetchSS("/persona"),
   ];
 
   const [slackBotsResponse, documentSetsResponse, personasResponse] =
@@ -62,6 +63,8 @@ async function Page({ params }: { params: { id: string } }) {
 
   return (
     <div className="container mx-auto dark">
+      <InstantSSRAutoRefresh />
+
       <BackButton />
       <AdminPageTitle
         icon={<CPUIcon size={32} />}

web/src/app/admin/bot/page.tsx

@@ -23,6 +23,7 @@ import {
 } from "@tremor/react";
 import { FiArrowUpRight, FiChevronDown, FiChevronUp } from "react-icons/fi";
 import Link from "next/link";
+import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 
 const numToDisplay = 50;
 
@@ -285,6 +286,7 @@ const Page = () => {
         icon={<CPUIcon size={32} />}
         title="Slack Bot Configuration"
       />
+      <InstantSSRAutoRefresh />
 
       <Main />
     </div>

web/src/app/page.tsx

@@ -11,6 +11,7 @@ import { SearchType } from "@/lib/search/interfaces";
 import { Persona } from "./admin/personas/interfaces";
 import { WelcomeModal } from "@/components/WelcomeModal";
 import { unstable_noStore as noStore } from "next/cache";
+import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 
 export default async function Home() {
   // Disable caching so we always get the up to date connector / document set / persona info
@@ -85,6 +86,7 @@ export default async function Home() {
         <HealthCheckBanner />
       </div>
       <ApiKeyModal />
+      <InstantSSRAutoRefresh />
       {connectors.length === 0 && connectorsResponse?.ok && <WelcomeModal />}
       <div className="px-24 pt-10 flex flex-col items-center min-h-screen bg-gray-900 text-gray-100">
         <div className="w-full">

web/src/components/SSRAutoRefresh.tsx

@@ -13,7 +13,17 @@ export function SSRAutoRefresh({ refreshFreq = 5 }: { refreshFreq?: number }) {
     }, refreshFreq * 1000);
 
     return () => clearInterval(interval);
-  });
+  }, []);
+
+  return <></>;
+}
+
+export function InstantSSRAutoRefresh() {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.refresh();
+  }, []);
 
   return <></>;
 }

web/src/components/WelcomeModal.tsx

@@ -3,8 +3,6 @@
 import { Button } from "@tremor/react";
 import { Modal } from "./Modal";
 import Link from "next/link";
-import { useState } from "react";
-import { FiX } from "react-icons/fi";
 
 export function WelcomeModal() {
   return (
@@ -29,9 +27,9 @@ export function WelcomeModal() {
         </div>
 
         <div className="flex mt-3 dark">
-          <Button className="mx-auto">
+          <Link href="/admin/add-connector" className="mx-auto">
-            <Link href="/admin/add-connector">Setup your first connector!</Link>
+            <Button>Setup your first connector!</Button>
-          </Button>
+          </Link>
         </div>
       </div>
     </Modal>

web/src/lib/utilsSS.ts

@@ -8,11 +8,7 @@ export function buildUrl(path: string) {
   return `${INTERNAL_URL}/${path}`;
 }
 
-export function fetchSS(
+export function fetchSS(url: string, options?: RequestInit) {
-  url: string,
-  options?: RequestInit,
-  addRandomTimestamp: boolean = false
-) {
   const init = options || {
     credentials: "include",
     cache: "no-store",
@@ -23,12 +19,5 @@ export function fetchSS(
         .join("; "),
     },
   };
-
-  // add a random timestamp to force NextJS to refetch rather than
-  // used cached data
-  if (addRandomTimestamp) {
-    const timestamp = Date.now();
-    url = `${url}?u=${timestamp}`;
-  }
   return fetch(buildUrl(url), init);
 }