From 2620c3b25f66e18b1b8854f6512b2e1f7ccb8700 Mon Sep 17 00:00:00 2001
From: Jun Kim <jun.kim@mixpanel.com>
Date: Tue, 16 Apr 2024 10:38:38 -0400
Subject: [PATCH] change example questions, readonly input and check os

---
 components/Search/Search.tsx | 10 +++++++---
 pages/_document.js           |  8 +++++---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/components/Search/Search.tsx b/components/Search/Search.tsx
index 493f078ed0..a1c3937885 100644
--- a/components/Search/Search.tsx
+++ b/components/Search/Search.tsx
@@ -2,9 +2,12 @@ import style from "./Search.module.scss";
 import clsx from "clsx";
 
 export default function Search() {
+  const isMacOS = () => window.navigator.appVersion.includes(`Mac`);
+  const shortCutPlaceholder = isMacOS ? `(⌘ + K)` : `(ctrl + K)`;
+
   return (
     <>
-      <div className={style.inputContainer}>
+      <div className={clsx("top-nav-search-bar", style.inputContainer)}>
         <svg viewBox="0 0 24 24" focusable="false" className={style.icon}>
           <path
             fill="currentColor"
@@ -12,8 +15,9 @@ export default function Search() {
           ></path>
         </svg>
         <input
-          className={clsx("top-nav-search-bar", style.searchBar)}
-          placeholder={`Search...`}
+          className={clsx(style.searchBar)}
+          readOnly={true}
+          placeholder={`Search ${shortCutPlaceholder}`}
         />
       </div>
     </>
diff --git a/pages/_document.js b/pages/_document.js
index 5a76c89eb0..40c1c0a0b2 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -33,13 +33,15 @@ export default function Document() {
                     src="https://widget.kapa.ai/kapa-widget.bundle.js"
                     data-website-id="099b7303-a981-443f-9ec7-4aebdc466fb4"
                     data-project-name="Mixpanel"
-                    data-search-mode-default="true"
                     data-search-mode-enabled="true"
+                    data-search-mode-default="true"
                     data-project-color="#1D0D3F"
                     data-modal-disclaimer="This is a custom LLM for Mixpanel with access to all developer documentation and API references, blogs, and YouTube content. Please note that answers are generated by AI and may not be fully accurate, so please use your best judgement."
                     data-project-logo="https://avatars.githubusercontent.com/u/63653?s=200&v=4"
-                    data-modal-example-questions='How do I bookmark a report?,What is a custom event?'
-                    data-modal-override-open-class="top-nav-search-bar"
+                    data-modal-example-questions-col-span="6"
+                    data-modal-open-on-command-k="true"
+                    data-modal-example-questions='What is the first event I should track?,How do I migrate off Google Analytics?,How do I calculate time spent?,How do I import Snowflake data?'
+                    data-modal-override-open-class-search="top-nav-search-bar"
                     ></script>
                 {/* Empty script tag as chrome bug fix, see https://stackoverflow.com/a/42969608/943337 */}
                 <script> </script>