fix: correct UI for archived channels and display channel topic (#905)

* fix: correct UI for archived channels and display channel topic

* add appropriate border color to archived box

Author: SinghaAnirban005

packages/api/src/EmbeddedChatApi.ts

@@ -485,6 +485,41 @@ export default class EmbeddedChatApi {
     }
   }
 
+  async getRoomInfo() {
+    try {
+      const { userId, authToken } = (await this.auth.getCurrentUser()) || {};
+      const response = await fetch(
+        `${this.host}/api/v1/method.call/rooms%3Aget`,
+        {
+          body: JSON.stringify({
+            message: JSON.stringify({
+              msg: "method",
+              id: null,
+              method: "rooms/get",
+              params: [],
+            }),
+          }),
+          headers: {
+            "Content-Type": "application/json",
+            "X-Auth-Token": authToken,
+            "X-User-Id": userId,
+          },
+          method: "POST",
+        }
+      );
+
+      const result = await response.json();
+
+      if (result.success && result.message) {
+        const parsedMessage = JSON.parse(result.message);
+        return parsedMessage;
+      }
+      return null;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
   async permissionInfo() {
     try {
       const { userId, authToken } = (await this.auth.getCurrentUser()) || {};

packages/react/src/store/channelStore.js

@@ -4,11 +4,14 @@ const useChannelStore = create((set) => ({
   showChannelinfo: false,
   isChannelPrivate: false,
   isChannelReadOnly: false,
+  isChannelArchived: false,
   isRoomTeam: false,
   setShowChannelinfo: (showChannelinfo) => set(() => ({ showChannelinfo })),
   channelInfo: {},
   setChannelInfo: (channelInfo) => set(() => ({ channelInfo })),
   setIsChannelPrivate: (isChannelPrivate) => set(() => ({ isChannelPrivate })),
+  setIsChannelArchived: (isChannelArchived) =>
+    set(() => ({ isChannelArchived })),
   setIsRoomTeam: (isRoomTeam) => set(() => ({ isRoomTeam })),
   setIsChannelReadOnly: (isChannelReadOnly) =>
     set(() => ({ isChannelReadOnly })),

packages/react/src/views/ChatHeader/ChatHeader.js

@@ -73,6 +73,9 @@ const ChatHeader = ({
   const setIsChannelPrivate = useChannelStore(
     (state) => state.setIsChannelPrivate
   );
+  const setIsChannelArchived = useChannelStore(
+    (state) => state.setIsChannelArchived
+  );
   const isRoomTeam = useChannelStore((state) => state.isRoomTeam);
   const setIsRoomTeam = useChannelStore((state) => state.setIsRoomTeam);
   const setIsChannelReadOnly = useChannelStore(
@@ -130,7 +133,6 @@ const ChatHeader = ({
   };
   const setCanSendMsg = useUserStore((state) => state.setCanSendMsg);
   const authenticatedUserId = useUserStore((state) => state.userId);
-
   const handleLogout = useCallback(async () => {
     try {
       await RCInstance.logout();
@@ -190,6 +192,14 @@ const ChatHeader = ({
           message: "Channel doesn't exist. Logging out.",
         });
         await RCInstance.logout();
+      } else if (
+        'errorType' in res &&
+        res.errorType === 'error-room-archived'
+      ) {
+        setIsChannelArchived(true);
+        const roomInfo = await RCInstance.getRoomInfo();
+        const roomData = roomInfo.result[roomInfo.result.length - 1];
+        setChannelInfo(roomData);
       } else if ('errorType' in res && res.errorType === 'Not Allowed') {
         dispatchToastMessage({
           type: 'error',
@@ -369,9 +379,9 @@ const ChatHeader = ({
                   <Avatar
                     size="36px"
                     style={{ marginRight: '6px' }}
-                    url={getChannelAvatarURL(channelInfo.name)}
+                    url={getChannelAvatarURL(channelInfo.name || channelName)}
                   />
-                  <Box>
+                  <Box css={styles.channelInfoContainer}>
                     <Box
                       css={styles.channelName}
                       onClick={() => setExclusiveState(setShowChannelinfo)}

packages/react/src/views/ChatHeader/ChatHeader.styles.js

@@ -32,8 +32,17 @@ const getChatHeaderStyles = ({ theme, mode }) => {
       box-shadow: ${theme.shadows[1]};
     `,
 
+    channelInfoContainer: css`
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+    `,
+
     channelDescription: css`
       ${rowCentreAlign}
+      flex: 1;
+      min-width: 0;
       gap: 0.5rem;
     `,
 
@@ -50,7 +59,13 @@ const getChatHeaderStyles = ({ theme, mode }) => {
     `,
     channelTopic: css`
       opacity: 0.8rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+      word-break: break-word;
+      overflow: hidden;
       font-size: 1rem;
+      text-overflow: ellipsis;
     `,
   };
   return styles;

packages/react/src/views/ChatInput/ChatInput.js

@@ -74,13 +74,17 @@ const ChatInput = ({ scrollToBottom }) => {
     name: state.name,
   }));
 
-  const { isChannelPrivate, isChannelReadOnly, channelInfo } = useChannelStore(
-    (state) => ({
-      isChannelPrivate: state.isChannelPrivate,
-      isChannelReadOnly: state.isChannelReadOnly,
-      channelInfo: state.channelInfo,
-    })
-  );
+  const {
+    isChannelPrivate,
+    isChannelReadOnly,
+    channelInfo,
+    isChannelArchived,
+  } = useChannelStore((state) => ({
+    isChannelPrivate: state.isChannelPrivate,
+    isChannelReadOnly: state.isChannelReadOnly,
+    channelInfo: state.channelInfo,
+    isChannelArchived: state.isChannelArchived,
+  }));
 
   const { members, setMembersHandler } = useMemberStore((state) => ({
     members: state.members,
@@ -540,15 +544,27 @@ const ChatInput = ({ scrollToBottom }) => {
           <Input
             textArea
             rows={1}
-            disabled={!isUserAuthenticated || !canSendMsg || isRecordingMessage}
+            disabled={
+              !isUserAuthenticated ||
+              !canSendMsg ||
+              isRecordingMessage ||
+              isChannelArchived
+            }
             placeholder={
-              isUserAuthenticated && canSendMsg
-                ? `Message ${channelInfo.name ? `#${channelInfo.name}` : ''}`
-                : isUserAuthenticated
-                ? 'This room is read only'
+              isUserAuthenticated
+                ? isChannelArchived
+                  ? 'Room archived'
+                  : canSendMsg
+                  ? `Message #${channelInfo.name}`
+                  : 'This room is read only'
                 : 'Sign in to chat'
             }
-            css={styles.textInput}
+            css={css`
+              ${styles.textInput}
+              ${isChannelArchived &&
+              isUserAuthenticated &&
+              `text-align: center;`}
+            `}
             onChange={onTextChange}
             onBlur={() => {
               sendTypingStop();
@@ -566,22 +582,24 @@ const ChatInput = ({ scrollToBottom }) => {
             `}
           >
             {isUserAuthenticated ? (
-              <ActionButton
-                ghost
-                size="large"
-                onClick={() => sendMessage()}
-                type="primary"
-                disabled={disableButton || isRecordingMessage}
-                icon="send"
-              />
+              !isChannelArchived ? (
+                <ActionButton
+                  ghost
+                  size="large"
+                  onClick={() => sendMessage()}
+                  type="primary"
+                  disabled={disableButton || isRecordingMessage}
+                  icon="send"
+                />
+              ) : null
             ) : (
               <Button onClick={onJoin} type="primary" disabled={isLoginIn}>
                 {isLoginIn ? <Throbber /> : 'JOIN'}
               </Button>
             )}
           </Box>
         </Box>
-        {isUserAuthenticated && (
+        {isUserAuthenticated && !isChannelArchived && (
           <ChatInputFormattingToolbar
             messageRef={messageRef}
             inputRef={inputRef}

packages/react/src/views/RoomInformation/RoomInformation.js

@@ -7,15 +7,15 @@ import {
   Popup,
   useComponentOverrides,
   Icon,
+  useTheme,
 } from '@embeddedchat/ui-elements';
 import RCContext from '../../context/RCInstance';
 import { useChannelStore } from '../../store';
 import getRoomInformationStyles from './RoomInformation.styles';
 import useSetExclusiveState from '../../hooks/useSetExclusiveState';
 
 const Roominfo = () => {
-  const { RCInstance } = useContext(RCContext);
-  const styles = getRoomInformationStyles();
+  const { RCInstance, ECOptions } = useContext(RCContext);
   const channelInfo = useChannelStore((state) => state.channelInfo);
   const isChannelPrivate = useChannelStore((state) => state.isChannelPrivate);
   const isRoomTeam = useChannelStore((state) => state.isRoomTeam);
@@ -26,8 +26,10 @@ const Roominfo = () => {
     const host = RCInstance.getHost();
     return `${host}/avatar/${channelname}`;
   };
-
+  const { channelName } = ECOptions ?? {};
   const ViewComponent = viewType === 'Popup' ? Popup : Sidebar;
+  const { theme, mode } = useTheme();
+  const styles = getRoomInformationStyles(theme, mode);
 
   return (
     <ViewComponent
@@ -55,9 +57,24 @@ const Roominfo = () => {
             justify-content: center;
           `}
         >
-          <Avatar size="100%" url={getChannelAvatarURL(channelInfo.name)} />
+          <Avatar
+            size="100%"
+            url={getChannelAvatarURL(channelInfo.name || channelName)}
+          />
         </Box>
         <Box css={styles.infoContainer}>
+          <Box css={styles.archivedRoomInfo}>
+            <Icon
+              name="report"
+              size="1.25rem"
+              fill={
+                mode === 'light'
+                  ? theme.colors.warning
+                  : theme.colors.warningForeground
+              }
+            />
+            <Box css={styles.archivedText}>Room Archived</Box>
+          </Box>
           <Box css={styles.infoHeader}>
             <Icon
               name={
@@ -69,26 +86,26 @@ const Roominfo = () => {
                 margin-right: 0.5rem;
               `}
             />
-            {channelInfo.name}
+            {channelInfo.name || channelName}
           </Box>
           {channelInfo.description && (
             <>
               <Box css={styles.infoHeader}>Description</Box>
               <Box css={styles.info}>{channelInfo.description}</Box>
             </>
           )}
-          {channelInfo.topic && (
-            <>
-              <Box css={styles.infoHeader}>Topic</Box>
-              <Box css={styles.info}>{channelInfo.topic}</Box>
-            </>
-          )}
           {channelInfo.announcement && (
             <>
               <Box css={styles.infoHeader}>Announcement</Box>
               <Box css={styles.info}>{channelInfo.announcement}</Box>
             </>
           )}
+          {channelInfo.topic && (
+            <>
+              <Box css={styles.infoHeader}>Topic</Box>
+              <Box css={styles.info}>{channelInfo.topic}</Box>
+            </>
+          )}
         </Box>
       </Box>
     </ViewComponent>

packages/react/src/views/RoomInformation/RoomInformation.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';
 
-const getRoomInformationStyles = () => {
+const getRoomInformationStyles = (theme, mode) => {
   const styles = {
     infoContainer: css`
       margin: 16px;
@@ -19,6 +19,22 @@ const getRoomInformationStyles = () => {
       opacity: 0.7;
       font-size: 0.9rem;
     `,
+
+    archivedRoomInfo: css`
+      display: flex;
+      border: 1px solid
+        ${mode === 'light'
+          ? theme.colors.warning
+          : theme.colors.warningForeground};
+      border-radius: ${theme.radius};
+      padding: 0.75rem 1rem;
+      width: 100%;
+      gap: 0.75rem;
+      margin-bottom: 1rem;
+    `,
+    archivedText: css`
+      font-size: 1rem;
+    `,
   };
 
   return styles;