chore: chat configuration query params (#1957)

Enables the following chat configuration parameters:
- `?disable_chat=true` to completely disable chat in Pronto
- `?channel_type=messaging` to switch to a particular channel type
(`videocall` remains the default)
- `?channel_id=my-channel` to switch to a particular channel id (the
default is the current `call_id`)

Author: oliverlaz

sample-apps/react/react-dogfood/components/ActiveCall.tsx

@@ -20,6 +20,7 @@ import {
 import clsx from 'clsx';
 import { useEffect, useState } from 'react';
 import { StreamChat } from 'stream-chat';
+import { useRouter } from 'next/router';
 
 import { ActiveCallHeader } from './ActiveCallHeader';
 import { CallStatsSidebar, ToggleStatsButton } from './CallStatsWrapper';
@@ -107,6 +108,10 @@ export const ActiveCall = (props: ActiveCallProps) => {
   const showChat = sidebarContent === 'chat';
   const showStats = sidebarContent === 'stats';
   const showClosedCaptions = sidebarContent === 'closed-captions';
+  const router = useRouter();
+  const chatDisabled =
+    router.query['disable_chat'] === 'true' ||
+    process.env.NEXT_PUBLIC_DISABLE_CHAT === 'true';
 
   // FIXME: could be replaced with "notification.message_new" but users would have to be at least members
   // possible fix with "allow to join" permissions in place (expensive?)
@@ -339,35 +344,40 @@ export const ActiveCall = (props: ActiveCallProps) => {
                 setSidebarContent(showParticipants ? null : 'participants');
               }}
             />
-            <NewMessageNotification
-              chatClient={chatClient}
-              channelWatched={channelWatched}
-              disableOnChatOpen={showChat}
-            >
-              <div className="str-chat__chat-button__wrapper">
-                <WithTooltip title={t('Chat')}>
-                  <CompositeButton
-                    active={showChat}
-                    disabled={!chatClient}
-                    onClick={() => {
-                      if (isTourActive && currentTourStep === StepNames.Chat) {
-                        nextTourStep();
-                      }
-                      setSidebarContent(showChat ? null : 'chat');
-                    }}
-                  >
-                    <Icon icon="chat" />
-                  </CompositeButton>
-                </WithTooltip>
-                {!showChat && (
-                  <UnreadCountBadge
-                    channelWatched={channelWatched}
-                    chatClient={chatClient}
-                    channelId={activeCall.id}
-                  />
-                )}
-              </div>
-            </NewMessageNotification>
+            {!chatDisabled && (
+              <NewMessageNotification
+                chatClient={chatClient}
+                channelWatched={channelWatched}
+                disableOnChatOpen={showChat}
+              >
+                <div className="str-chat__chat-button__wrapper">
+                  <WithTooltip title={t('Chat')}>
+                    <CompositeButton
+                      active={showChat}
+                      disabled={!chatClient}
+                      onClick={() => {
+                        if (
+                          isTourActive &&
+                          currentTourStep === StepNames.Chat
+                        ) {
+                          nextTourStep();
+                        }
+                        setSidebarContent(showChat ? null : 'chat');
+                      }}
+                    >
+                      <Icon icon="chat" />
+                    </CompositeButton>
+                  </WithTooltip>
+                  {!showChat && (
+                    <UnreadCountBadge
+                      channelWatched={channelWatched}
+                      chatClient={chatClient}
+                      channelId={activeCall.id}
+                    />
+                  )}
+                </div>
+              </NewMessageNotification>
+            )}
           </div>
         </div>
       </div>

sample-apps/react/react-dogfood/components/ChatUI.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useRouter } from 'next/router';
 import {
   Channel,
   MESSAGE_ACTIONS,
@@ -74,18 +75,22 @@ export const ChatSendButton = ({ sendMessage, ...rest }: SendButtonProps) => {
 
 export const ChatUI = ({
   onClose,
+  channelType = CHANNEL_TYPE,
   channelId,
 }: {
   onClose: () => void;
+  channelType?: string;
   channelId: string;
 }) => {
   const { client, setActiveChannel } = useChatContext();
 
+  const router = useRouter();
   useEffect(() => {
-    const channel = client.channel(CHANNEL_TYPE, channelId);
+    const type = (router.query['channel_type'] as string) || channelType;
+    const channel = client.channel(type, channelId);
 
     setActiveChannel(channel);
-  }, [channelId, client, setActiveChannel]);
+  }, [channelId, channelType, client, router.query, setActiveChannel]);
 
   return (
     <Channel

sample-apps/react/react-dogfood/components/UnreadCountBadge.tsx

@@ -1,5 +1,6 @@
-import { useState, useEffect } from 'react';
-import { StreamChat, Event } from 'stream-chat';
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
+import { Event, StreamChat } from 'stream-chat';
 import { CHANNEL_TYPE } from '.';
 
 // FIXME: unread count 0 on load (even if before refresh was >0)
@@ -13,8 +14,9 @@ export const UnreadCountBadge = ({
   channelWatched: boolean;
 }) => {
   const [unread, setUnread] = useState(0);
-
-  const cid = `${CHANNEL_TYPE}:${channelId}`;
+  const router = useRouter();
+  const channelType = (router.query['channel_type'] as string) || CHANNEL_TYPE;
+  const cid = `${channelType}:${channelId}`;
 
   useEffect(() => {
     if (!client) return;
@@ -32,7 +34,6 @@ export const UnreadCountBadge = ({
 
     const handleEvent = () => {
       const channel = client.activeChannels[cid];
-
       setUnread(channel?.countUnread() ?? 0);
     };
 

sample-apps/react/react-dogfood/components/index.ts

@@ -4,4 +4,8 @@ export * from './MeetingUI';
 export * from './NewMessageNotification';
 export * from './UnreadCountBadge';
 
+/**
+ * Defaults to `videocall`. Make sure to respect the `channel_type`
+ * query parameter if provided.
+ */
 export const CHANNEL_TYPE = 'videocall';

sample-apps/react/react-dogfood/hooks/useChatClient.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import {
   OwnUserResponse,
   StreamChat,
@@ -16,9 +17,11 @@ export const useCreateStreamChatClient = ({
   tokenOrProvider: TokenOrProvider;
 }) => {
   const [chatClient, setChatClient] = useState<StreamChat | null>(null);
-
+  const router = useRouter();
   useEffect(() => {
-    const disableChat = process.env.NEXT_PUBLIC_DISABLE_CHAT === 'true';
+    const disableChat =
+      router.query['disable_chat'] === 'true' ||
+      process.env.NEXT_PUBLIC_DISABLE_CHAT === 'true';
     if (disableChat || !apiKey) return;
 
     const client = new StreamChat(apiKey, {
@@ -42,7 +45,7 @@ export const useCreateStreamChatClient = ({
         });
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [apiKey, userData.id, tokenOrProvider]);
+  }, [apiKey, router.query, userData.id, tokenOrProvider]);
 
   return chatClient;
 };

sample-apps/react/react-dogfood/hooks/useWatchChannel.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+import { useRouter } from 'next/router';
 import type { Event, StreamChat } from 'stream-chat';
 
 import { CHANNEL_TYPE } from '../components';
@@ -13,11 +14,12 @@ export const useWatchChannel = ({
   channelType?: string;
 }) => {
   const [channelWatched, setChannelWatched] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     if (!client) return;
-
-    const channel = client.channel(channelType, channelId);
+    const type = (router.query['channel_type'] as string) || channelType;
+    const channel = client.channel(type, channelId);
     // initiate watching now so we can receive message events
     const watchingPromise = channel.watch();
 
@@ -26,7 +28,7 @@ export const useWatchChannel = ({
         // channel.stopWatching();
       });
     };
-  }, [client, channelId, channelType]);
+  }, [client, channelId, channelType, router.query]);
 
   useEffect(() => {
     if (!client) return;