[Demo] Replace Kapa.ai with Streamlit app using Cortex.

components/layouts/globalTemplate.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Header from "../navigation/header";
-import ChatSticky from "../navigation/chatSticky";
+import Assistant from "../utilities/assistant";
 
 import styles from "./globalTemplate.module.css";
 
@@ -26,7 +26,7 @@ const Layout = ({ children }) => {
       <div className={isSticky ? styles.stickyPageWrapper : undefined}>
         {children}
       </div>
-      <ChatSticky />
+      <Assistant />
     </main>
   );
 };

components/navigation/footer.js

@@ -182,7 +182,7 @@ const Footer = ({ setIsTelemetryModalVisible }) => {
         <div className={styles.Copyright}>
           <span>&copy; {new Date().getFullYear()} Snowflake Inc.</span>
           <button
-            className="hover:opacity-80 ml-2"
+            className={styles.CookiePolicy}
             onClick={() => setIsTelemetryModalVisible(true)}
           >
             Cookie policy

components/navigation/footer.module.css

@@ -1,5 +1,7 @@
 .Container {
   @apply col-span-full lg:col-start-2 lg:col-end-5;
+  /* Avoid overlap with AI button */
+  @apply pb-16;
 }
 
 .InnerContainer {
@@ -67,3 +69,8 @@
   @apply text-base tracking-tight leading-7 mt-2;
   @apply text-gray-60 !important;
 }
+
+.CookiePolicy {
+  @apply ml-2 cursor-pointer;
+  @apply hover:opacity-80 hover:underline;
+}

components/utilities/Modal.js

@@ -0,0 +1,47 @@
+import classNames from "classnames";
+
+import styles from "./Modal.module.css";
+import { useCallback } from "react";
+
+export default function Modal({
+  title,
+  closeDialog,
+  shimClassName,
+  modalClassName,
+  contentClassName,
+  children,
+}) {
+  const dontHide = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+
+  return (
+    <div
+      className={classNames(styles.Shim, shimClassName)}
+      onClick={closeDialog}
+    >
+      <dialog
+        className={classNames(styles.Modal, modalClassName)}
+        onClick={dontHide}
+      >
+        <header className={styles.Header}>
+          <h3 className={styles.Title}>{title}</h3>
+
+          <button className={styles.CloseButton} onClick={closeDialog}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 -960 960 960"
+              className="mt-2 w-8 h-8 hover:bg-gray-30 rounded"
+            >
+              <path d="m253.897-229.795-24.102-24.102L455.897-480 229.795-706.103l24.102-24.102L480-504.103l226.103-226.102 24.102 24.102L504.103-480l226.102 226.103-24.102 24.102L480-455.897 253.897-229.795Z" />
+            </svg>
+          </button>
+        </header>
+
+        <section className={classNames(styles.Content, contentClassName)}>
+          {children}
+        </section>
+      </dialog>
+    </div>
+  );
+}

components/utilities/Modal.module.css

@@ -0,0 +1,29 @@
+.Shim {
+  @apply fixed inset-0 z-40;
+  @apply bg-gray-90 bg-opacity-90;
+  @apply flex items-center justify-center;
+}
+
+.Modal {
+  @apply relative;
+  @apply bg-white sm:rounded-xl;
+  @apply p-8 md:p-12;
+  @apply overscroll-none;
+  @apply h-full sm:max-h-[90vh];
+  @apply w-full sm:max-w-4xl;
+  @apply flex flex-col;
+  @apply gap-4;
+}
+
+.Header {
+  @apply flex flex-row w-full items-center z-10;
+}
+
+.Content {
+  @apply overflow-y-auto;
+  @apply flex-1;
+}
+
+.Title {
+  @apply flex-1;
+}

components/utilities/assistant.js

@@ -0,0 +1,40 @@
+import React, { useState, useCallback, useEffect } from "react";
+import styles from "./assistant.module.css";
+
+import Modal from "./Modal";
+
+const Assistant = () => {
+  const [assistantVisible, setAssistantVisible] = useState(false);
+
+  const showAssistant = useCallback(() => {
+    setAssistantVisible(true);
+  }, []);
+
+  const hideAssistant = useCallback(() => {
+    setAssistantVisible(false);
+  }, []);
+
+  return (
+    <>
+      <div className={styles.AskButtonContainer}>
+        <button className={styles.AskButton} onClick={showAssistant}>
+          <i className={styles.AskIcon}>forum</i> Ask AI
+        </button>
+      </div>
+
+      {assistantVisible && (
+        <Modal
+          closeDialog={hideAssistant}
+          contentClassName={styles.IframeWrapper}
+        >
+          <iframe
+            className={styles.Iframe}
+            src="https://st-assistant.streamlit.app/~/+/?embed=true"
+          ></iframe>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default Assistant;

components/utilities/kapa.module.css → components/utilities/assistant.module.css

@@ -24,6 +24,7 @@
 
 .AskButtonContainer {
   @apply flex justify-end;
+  @apply fixed bottom-4 right-4 sm:bottom-12 sm:right-12 z-20;
 }
 
 .AskButton {
@@ -53,14 +54,13 @@
   @apply text-gray-100 !important;
 }
 
-.Tooltip {
-  @apply hidden absolute top-20 right-[4.5rem] h-8 px-2 pt-0.5 rounded-md bg-gray-20;
+.IframeWrapper {
+  @apply flex-1;
+  @apply flex;
+  @apply -mx-8 -mb-8 sm:-mx-12 sm:-mt-12 sm:-mb-4 sm:z-0;
 }
 
-.Tooltip p {
-  @apply text-gray-70;
-}
-
-:global(.dark) .Tooltip {
-  @apply bg-gray-90;
+.Iframe {
+  @apply flex-1;
+  @apply p-0;
 }

components/utilities/cookieSettingsModal.js

@@ -3,71 +3,57 @@ import classNames from "classnames";
 import content from "../../content/cookie-settings.md";
 
 import styles from "./cookieSettingsModal.module.css";
+import Modal from "./Modal";
+import { useCallback } from "react";
 
 export default function CookieSettingsModal({
   setIsTelemetryModalVisible,
   declineTelemetryAndCloseBanner,
   allowTelemetryAndCloseBanner,
 }) {
+  const closeDialog = useCallback(() => {
+    setIsTelemetryModalVisible(false);
+  }, []);
+
   return (
-    <div className="fixed w-full h-full z-40 bg-gray-90 bg-opacity-90 top-0 flex items-center justify-center">
-      <div
+    <Modal
+      title="Cookie settings"
+      closeDialog={closeDialog}
+      modalClassName={styles.Container}
+    >
+      <div dangerouslySetInnerHTML={{ __html: content.html }} />
+      <button
+        className={classNames(
+          "mt-4 md:mt-8",
+          "py-2 px-3",
+          "text-gray-90",
+          "border-gray-90 border",
+          "rounded",
+          "hover:bg-gray-90",
+          "hover:text-white",
+          "active:bg-gray-90",
+          "active:text-white",
+        )}
+        onClick={declineTelemetryAndCloseBanner}
+      >
+        Reject all
+      </button>
+      <button
         className={classNames(
-          styles.Container,
-          "relative",
-          "bg-white rounded-xl",
-          "p-8 md:p-12",
-          "w-full max-w-4xl",
-          "overscroll-none overflow-y-auto",
-          "max-h-screen",
+          "mt-4 md:mt-8 ml-4",
+          "py-2 px-3",
+          "text-gray-90",
+          "border-gray-90 border",
+          "rounded",
+          "hover:bg-gray-90",
+          "hover:text-white",
+          "active:bg-gray-90",
+          "active:text-white",
         )}
+        onClick={allowTelemetryAndCloseBanner}
       >
-        <button
-          className="absolute right-4 top-4 md:right-11 md:top-11 fill-gray-70"
-          onClick={() => setIsTelemetryModalVisible(false)}
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 -960 960 960"
-            className="mt-2 w-8 h-8 hover:bg-gray-30 rounded"
-          >
-            <path d="m253.897-229.795-24.102-24.102L455.897-480 229.795-706.103l24.102-24.102L480-504.103l226.103-226.102 24.102 24.102L504.103-480l226.102 226.103-24.102 24.102L480-455.897 253.897-229.795Z" />
-          </svg>
-        </button>
-        <div dangerouslySetInnerHTML={{ __html: content.html }} />
-        <button
-          className={classNames(
-            "mt-4 md:mt-8",
-            "py-2 px-3",
-            "text-gray-90",
-            "border-gray-90 border",
-            "rounded",
-            "hover:bg-gray-90",
-            "hover:text-white",
-            "active:bg-gray-90",
-            "active:text-white",
-          )}
-          onClick={declineTelemetryAndCloseBanner}
-        >
-          Reject all
-        </button>
-        <button
-          className={classNames(
-            "mt-4 md:mt-8 ml-4",
-            "py-2 px-3",
-            "text-gray-90",
-            "border-gray-90 border",
-            "rounded",
-            "hover:bg-gray-90",
-            "hover:text-white",
-            "active:bg-gray-90",
-            "active:text-white",
-          )}
-          onClick={allowTelemetryAndCloseBanner}
-        >
-          Accept all
-        </button>
-      </div>
-    </div>
+        Accept all
+      </button>
+    </Modal>
   );
 }

components/utilities/cookieSettingsModal.module.css

@@ -2,6 +2,10 @@
   @apply text-gray-90 grid grid-cols-1 gap-4 text-base leading-loose;
 }
 
+.Content {
+  @apply overflow-y-auto;
+}
+
 .Container h1,
 .Container h2,
 .Container h3,