[fix]: resolve contextual bar rendering and slash command execution

packages/api/src/EmbeddedChatApi.ts

@@ -238,7 +238,15 @@ export default class EmbeddedChatApi {
           }
         }
       );
+      const { userId } = (await this.auth.getCurrentUser()) || {};
       await this.rcClient.subscribeNotifyUser();
+      if (userId) {
+        await this.rcClient.subscribe(
+          "stream-notify-user",
+          `${userId}/uiInteraction`,
+          false
+        );
+      }
       await this.rcClient.onStreamData(
         "stream-notify-user",
         (ddpMessage: any) => {
@@ -1210,24 +1218,41 @@ export default class EmbeddedChatApi {
     params: string;
     tmid?: string;
   }) {
-    const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
-    const response = await fetch(`${this.host}/api/v1/commands.run`, {
-      headers: {
-        "Content-Type": "application/json",
-        "X-Auth-Token": authToken,
-        "X-User-Id": userId,
-      },
-      method: "POST",
-      body: JSON.stringify({
-        command,
-        params,
-        tmid,
-        roomId: this.rid,
-        triggerId: Math.random().toString(32).slice(2, 20),
-      }),
-    });
-    const data = await response.json();
-    return data;
+    const triggerId = Math.random().toString(36).slice(2, 18);
+    const msg = {
+      _id: Math.random().toString(36).slice(2),
+      rid: this.rid,
+      msg: `/${command} ${params}`,
+      ...(tmid && { tmid }),
+    };
+
+    try {
+      const result = await this.rcClient.methodCall(
+        "slashCommand",
+        { cmd: command, params, msg, triggerId }
+      );
+      return result;
+    } catch (e) {
+      console.error("DDP slashCommand failed, falling back to REST API", e);
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(`${this.host}/api/v1/commands.run`, {
+        headers: {
+          "Content-Type": "application/json",
+          "X-Auth-Token": authToken,
+          "X-User-Id": userId,
+        },
+        method: "POST",
+        body: JSON.stringify({
+          command,
+          params,
+          tmid,
+          roomId: this.rid,
+          triggerId,
+        }),
+      });
+      const data = await response.json();
+      return data;
+    }
   }
 
   async getUserStatus(reqUserId: string) {

packages/markups/src/mentions/UserMention.js

@@ -7,9 +7,12 @@ import RCContext from '@embeddedchat/react/src/context/RCInstance';
 import { MarkupInteractionContext } from '../MarkupInteractionContext';
 import useMentionStyles from '../elements/elements.styles';
 
-const UserMention = ({ contents }) => {
-  const { members, username } = useContext(MarkupInteractionContext);
-  const { RCInstance } = useContext(RCContext);
+const UserMentionWithContext = ({
+  contents,
+  members,
+  username,
+  RCInstance,
+}) => {
   const setExclusiveState = useSetExclusiveState();
   const { setShowCurrentUserInfo, setCurrentUser } = useUserStore((state) => ({
     setShowCurrentUserInfo: state.setShowCurrentUserInfo,
@@ -30,6 +33,9 @@ const UserMention = ({ contents }) => {
     if (user === 'all' || user === 'here') {
       return true;
     }
+    if (!members) {
+      return false;
+    }
     let found = false;
     Object.keys(members).forEach((ele) => {
       if (members[ele].username === user) {
@@ -69,6 +75,24 @@ const UserMention = ({ contents }) => {
   );
 };
 
+const UserMention = ({ contents }) => {
+  const markupContext = useContext(MarkupInteractionContext);
+  const rcContext = useContext(RCContext);
+
+  if (!markupContext || !rcContext) {
+    return <>{`@${contents.value}`}</>;
+  }
+
+  return (
+    <UserMentionWithContext
+      contents={contents}
+      members={markupContext.members}
+      username={markupContext.username}
+      RCInstance={rcContext.RCInstance}
+    />
+  );
+};
+
 UserMention.propTypes = {
   contents: PropTypes.any.isRequired,
 };

packages/react/src/hooks/uiKit/useUiKitActionManager.js

@@ -2,6 +2,18 @@ import { useCallback, useContext } from 'react';
 import { Emitter } from '@rocket.chat/emitter';
 import RCContext from '../../context/RCInstance';
 import useUiKitStore from '../../store/uiKitStore';
+import {
+  useMemberStore,
+  useSearchMessageStore,
+  useChannelStore,
+  useThreadsMessageStore,
+  useMentionsStore,
+  usePinnedMessageStore,
+  useStarredMessageStore,
+  useFileStore,
+  useUserStore,
+  useSidebarStore,
+} from '../../store';
 
 const emitter = new Emitter();
 
@@ -20,16 +32,59 @@ const useUiKitActionManager = () => {
     setUiKitContextualBarData: state.setUiKitContextualBarData,
   }));
 
+  const setShowSidebar = useSidebarStore((state) => state.setShowSidebar);
+  const setShowMembers = useMemberStore((state) => state.setShowMembers);
+  const setShowSearch = useSearchMessageStore((state) => state.setShowSearch);
+  const setShowPinned = usePinnedMessageStore((state) => state.setShowPinned);
+  const setShowStarred = useStarredMessageStore(
+    (state) => state.setShowStarred
+  );
+  const setShowAllThreads = useThreadsMessageStore(
+    (state) => state.setShowAllThreads
+  );
+  const setShowAllFiles = useFileStore((state) => state.setShowAllFiles);
+  const setShowMentions = useMentionsStore((state) => state.setShowMentions);
+  const setShowCurrentUserInfo = useUserStore(
+    (state) => state.setShowCurrentUserInfo
+  );
+  const setShowChannelinfo = useChannelStore(
+    (state) => state.setShowChannelinfo
+  );
+
+  const closeSidebarPanels = useCallback(() => {
+    setShowMembers(false);
+    setShowSearch(false);
+    setShowPinned(false);
+    setShowStarred(false);
+    setShowAllThreads(false);
+    setShowAllFiles(false);
+    setShowMentions(false);
+    setShowCurrentUserInfo(false);
+    setShowChannelinfo(false);
+  }, [
+    setShowMembers,
+    setShowSearch,
+    setShowPinned,
+    setShowStarred,
+    setShowAllThreads,
+    setShowAllFiles,
+    setShowMentions,
+    setShowCurrentUserInfo,
+    setShowChannelinfo,
+  ]);
+
   const disposeView = useCallback(() => {
     setUiKitModalOpen(false);
     setUiKitModalData(null);
     setUiKitContextualBarOpen(false);
     setUiKitContextualBarData(null);
+    setShowSidebar(false);
   }, [
     setUiKitModalOpen,
     setUiKitModalData,
     setUiKitContextualBarOpen,
     setUiKitContextualBarData,
+    setShowSidebar,
   ]);
 
   const handleServerInteraction = useCallback(
@@ -40,8 +95,10 @@ const useUiKitActionManager = () => {
           setUiKitModalOpen(true);
           break;
         case 'contextual_bar.open':
+          closeSidebarPanels();
           setUiKitContextualBarData(interaction.view);
           setUiKitContextualBarOpen(true);
+          setShowSidebar(true);
           break;
         case 'modal.update':
         case 'contextual_bar.update': {
@@ -66,6 +123,8 @@ const useUiKitActionManager = () => {
       setUiKitContextualBarOpen,
       setUiKitModalOpen,
       setUiKitModalData,
+      closeSidebarPanels,
+      setShowSidebar,
     ]
   );
 
@@ -112,4 +171,4 @@ const useUiKitActionManager = () => {
   };
 };
 
-export default useUiKitActionManager;
+export default useUiKitActionManager;