WIP using onModalClose

Author: samejr

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -23,7 +23,8 @@ import { Popover, PopoverContent, PopoverSideMenuTrigger } from "../primitives/P
 import { StepNumber } from "../primitives/StepNumber";
 import { MenuCount, SideMenuItem } from "./SideMenuItem";
 import { Shortcuts } from "../Shortcuts";
-export function HelpAndFeedback() {
+
+export function HelpAndFeedback({ disableShortcut = false }: { disableShortcut?: boolean }) {
   const [isHelpMenuOpen, setHelpMenuOpen] = useState(false);
   const currentPlan = useCurrentPlan();
 
@@ -33,6 +34,7 @@ export function HelpAndFeedback() {
         isOpen={isHelpMenuOpen}
         shortcut={{ key: "h", enabledOnInputElements: false }}
         className="grow pr-2"
+        disabled={disableShortcut}
       >
         <div className="flex items-center gap-1.5">
           <QuestionMarkCircleIcon className="size-4 text-success" />

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -547,6 +547,7 @@ function SelectorDivider() {
 }
 
 function HelpAndAI() {
+  const [isKapaOpen, setIsKapaOpen] = useState(false);
   const features = useFeatures();
   const kapa = useKapa();
 
@@ -555,10 +556,16 @@ function HelpAndAI() {
 
     loadScriptIfNotExists(kapa.websiteId);
 
+    // Define the handler function
+    const handleModalClose = () => {
+      setIsKapaOpen(false);
+    };
+
     const kapaInterval = setInterval(() => {
       if (typeof window.Kapa === "function") {
         clearInterval(kapaInterval);
         window.Kapa("render");
+        window.Kapa("onModalClose", handleModalClose);
       }
     }, 100);
 
@@ -573,7 +580,7 @@ function HelpAndAI() {
 
   return (
     <>
-      <HelpAndFeedback />
+      <HelpAndFeedback disableShortcut={isKapaOpen} />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -587,6 +594,7 @@ function HelpAndAI() {
                 onClick={() => {
                   if (typeof window.Kapa === "function") {
                     window.Kapa("open");
+                    setIsKapaOpen(true);
                   }
                 }}
               >

apps/webapp/app/root.tsx

@@ -28,7 +28,7 @@ import { useTypedMatchesData } from "./hooks/useTypedMatchData";
 
 declare global {
   interface Window {
-    Kapa: (command: string, options?: { onRender?: () => void }) => void;
+    Kapa: (command: string, options?: (() => void) | { onRender?: () => void }) => void;
   }
 }