[WEB-2103] chore: intercom trigger updates from sidebar and command palette helper actions (#5314)

* chore: handled intercom operations programatically.

* fix: app sidebar improvement

---------

Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>

admin/core/components/admin-sidebar/help-section.tsx

@@ -96,7 +96,7 @@ export const HelpSection: FC = observer(() => {
           leaveTo="transform opacity-0 scale-95"
         >
           <div
-            className={`absolute bottom-2 min-w-[10rem] ${
+            className={`absolute bottom-2 min-w-[10rem] z-[15] ${
               isSidebarCollapsed ? "left-full" : "-left-[75px]"
             } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
             ref={helpOptionsRef}

web/app/[workspaceSlug]/(projects)/sidebar.tsx

@@ -54,10 +54,14 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
       <div
         ref={ref}
         className={cn("size-full flex flex-col flex-1 pt-4 pb-0", {
-          "p-2": sidebarCollapsed,
+          "p-2 pt-4": sidebarCollapsed,
         })}
       >
-        <div className="px-4">
+        <div
+          className={cn("px-2", {
+            "px-4": !sidebarCollapsed,
+          })}
+        >
           <SidebarDropdown />
           <div className="flex-shrink-0 h-4" />
           <SidebarAppSwitcher />
@@ -69,8 +73,8 @@ export const AppSidebar: FC<IAppSidebar> = observer(() => {
           })}
         />
         <div
-          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-4", {
-            "vertical-scrollbar": !sidebarCollapsed,
+          className={cn("overflow-x-hidden scrollbar-sm h-full w-full overflow-y-auto px-2", {
+            "vertical-scrollbar px-4": !sidebarCollapsed,
           })}
         >
           <SidebarUserMenu />

web/core/components/command-palette/actions/help-actions.tsx

@@ -1,19 +1,21 @@
 "use client";
 import { Command } from "cmdk";
+import { observer } from "mobx-react";
 import { FileText, GithubIcon, MessageSquare, Rocket } from "lucide-react";
 // ui
 import { DiscordIcon } from "@plane/ui";
 // hooks
-import { useCommandPalette } from "@/hooks/store";
+import { useCommandPalette, useTransient } from "@/hooks/store";
 
 type Props = {
   closePalette: () => void;
 };
 
-export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
+export const CommandPaletteHelpActions: React.FC<Props> = observer((props) => {
   const { closePalette } = props;
   // hooks
   const { toggleShortcutModal } = useCommandPalette();
+  const { toggleIntercom } = useTransient();
 
   return (
     <Command.Group heading="Help">
@@ -68,9 +70,7 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
       <Command.Item
         onSelect={() => {
           closePalette();
-          if (window) {
-            window.$crisp.push(["do", "chat:show"]);
-          }
+          toggleIntercom(true);
         }}
         className="focus:outline-none"
       >
@@ -81,4 +81,4 @@ export const CommandPaletteHelpActions: React.FC<Props> = (props) => {
       </Command.Item>
     </Command.Group>
   );
-};
+});

web/core/components/workspace/sidebar/help-section.tsx

@@ -10,7 +10,7 @@ import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks
-import { useAppTheme, useCommandPalette, useInstance } from "@/hooks/store";
+import { useAppTheme, useCommandPalette, useInstance, useTransient } from "@/hooks/store";
 import useOutsideClickDetector from "@/hooks/use-outside-click-detector";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 // components
@@ -45,15 +45,14 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
   const { toggleShortcutModal } = useCommandPalette();
   const { isMobile } = usePlatformOS();
   const { config } = useInstance();
+  const { isIntercomToggle, toggleIntercom } = useTransient();
   // states
   const [isNeedHelpOpen, setIsNeedHelpOpen] = useState(false);
   // refs
   const helpOptionsRef = useRef<HTMLDivElement | null>(null);
 
   const handleCrispWindowShow = () => {
-    if (window) {
-      window.$crisp.push(["do", "chat:show"]);
-    }
+    toggleIntercom(!isIntercomToggle);
   };
 
   useOutsideClickDetector(helpOptionsRef, () => setIsNeedHelpOpen(false));
@@ -133,7 +132,7 @@ export const SidebarHelpSection: React.FC<WorkspaceHelpSectionProps> = observer(
             leaveTo="transform opacity-0 scale-95"
           >
             <div
-              className={`absolute bottom-2 min-w-[10rem] ${
+              className={`absolute bottom-2 min-w-[10rem] z-[15] ${
                 isCollapsed ? "left-full" : "-left-[75px]"
               } divide-y divide-custom-border-200 whitespace-nowrap rounded bg-custom-background-100 p-1 shadow-custom-shadow-xs`}
               ref={helpOptionsRef}

web/core/hooks/store/index.ts

@@ -30,3 +30,4 @@ export * from "./use-router-params";
 export * from "./use-webhook";
 export * from "./use-workspace";
 export * from "./user";
+export * from "./use-transient";

web/core/hooks/store/use-transient.ts

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+// mobx store
+import { StoreContext } from "@/lib/store-context";
+// types
+import { ITransientStore } from "@/store/transient.store";
+
+export const useTransient = (): ITransientStore => {
+  const context = useContext(StoreContext);
+  if (context === undefined) throw new Error("useTransient must be used within StoreProvider");
+  return context.transient;
+};

web/core/lib/intercom-provider.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import React, { FC, useEffect } from "react";
-import Intercom from "@intercom/messenger-js-sdk";
+import { Intercom, show, hide, onHide } from "@intercom/messenger-js-sdk";
 import { observer } from "mobx-react";
 // store hooks
-import { useUser, useInstance } from "@/hooks/store";
+import { useUser, useInstance, useTransient } from "@/hooks/store";
 
 export type IntercomProviderProps = {
   children: React.ReactNode;
@@ -15,6 +15,16 @@ const IntercomProvider: FC<IntercomProviderProps> = observer((props) => {
   // hooks
   const { data: user } = useUser();
   const { config } = useInstance();
+  const { isIntercomToggle, toggleIntercom } = useTransient();
+
+  useEffect(() => {
+    if (isIntercomToggle) show();
+    else hide();
+  }, [isIntercomToggle]);
+
+  onHide(() => {
+    toggleIntercom(false);
+  });
 
   useEffect(() => {
     if (user && config?.is_intercom_enabled && config.intercom_app_id) {
@@ -23,9 +33,10 @@ const IntercomProvider: FC<IntercomProviderProps> = observer((props) => {
         user_id: user.id,
         name: `${user.first_name} ${user.last_name}`,
         email: user.email,
+        hide_default_launcher: true,
       });
     }
-  }, [user, config]);
+  }, [user, config, toggleIntercom]);
 
   return <>{children}</>;
 });

web/core/store/root.store.ts

@@ -23,6 +23,7 @@ import { IProjectViewStore, ProjectViewStore } from "./project-view.store";
 import { RouterStore, IRouterStore } from "./router.store";
 import { IStateStore, StateStore } from "./state.store";
 import { ThemeStore, IThemeStore } from "./theme.store";
+import { ITransientStore, TransientStore } from "./transient.store";
 import { IUserStore, UserStore } from "./user";
 import { IWorkspaceRootStore, WorkspaceRootStore } from "./workspace";
 
@@ -54,6 +55,7 @@ export class CoreRootStore {
   multipleSelect: IMultipleSelectStore;
   workspaceNotification: IWorkspaceNotificationStore;
   favorite: IFavoriteStore;
+  transient: ITransientStore;
 
   constructor() {
     this.router = new RouterStore();
@@ -81,6 +83,7 @@ export class CoreRootStore {
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
     this.favorite = new FavoriteStore(this);
+    this.transient = new TransientStore();
   }
 
   resetOnSignOut() {
@@ -110,5 +113,7 @@ export class CoreRootStore {
     this.multipleSelect = new MultipleSelectStore();
     this.projectEstimate = new ProjectEstimateStore(this);
     this.workspaceNotification = new WorkspaceNotificationStore(this);
+    this.favorite = new FavoriteStore(this);
+    this.transient = new TransientStore();
   }
 }

web/core/store/transient.store.ts

@@ -0,0 +1,28 @@
+import { action, observable, makeObservable } from "mobx";
+
+export interface ITransientStore {
+  // observables
+  isIntercomToggle: boolean;
+  // actions
+  toggleIntercom: (intercomToggle: boolean) => void;
+}
+
+export class TransientStore implements ITransientStore {
+  // observables
+  isIntercomToggle: boolean = false;
+
+  constructor() {
+    makeObservable(this, {
+      // observable
+      isIntercomToggle: observable.ref,
+      // action
+      toggleIntercom: action,
+    });
+  }
+
+  /**
+   * @description Toggle the intercom collapsed state
+   * @param { boolean } intercomToggle
+   */
+  toggleIntercom = (intercomToggle: boolean) => (this.isIntercomToggle = intercomToggle);
+}