Merge branch 'dev' into feature/link-previews

src/pages/Auth/store/saga.tsx

@@ -300,6 +300,8 @@ const resetGlobalData = (fullReset: boolean) => {
   }
   store.dispatch(inboxActions.resetInbox());
   store.dispatch(cacheActions.resetFeedStates());
+  store.dispatch(cacheActions.resetDiscussionMessagesStates());
+  store.dispatch(cacheActions.resetChatChannelMessagesStates());
   store.dispatch(commonActions.resetCommon());
 };
 

src/pages/common/components/ChatComponent/ChatComponent.tsx

@@ -199,7 +199,10 @@ export default function ChatComponent({
     markChatChannelAsSeen,
     chatUsers,
     fetchChatUsers,
-  } = useChatChannelChatAdapter({ participants: chatChannel?.participants });
+  } = useChatChannelChatAdapter({
+    chatChannelId: chatChannel?.id || "",
+    participants: chatChannel?.participants,
+  });
   const users = chatChannel ? chatUsers : discussionUsers;
   const discussionMessages = chatChannel
     ? chatMessagesData.data
@@ -209,7 +212,9 @@ export default function ChatComponent({
   const areInitialMessagesLoading = isChatChannel
     ? chatMessagesData.loading
     : discussionMessagesData.loading;
-  const areMessagesLoading = discussionMessagesData.isBatchLoading;
+  const areMessagesLoading = chatChannel
+    ? chatMessagesData.isBatchLoading
+    : discussionMessagesData.isBatchLoading;
   const currentFilesPreview = useSelector(selectFilesPreview());
   const chatContentRef = useRef<ChatContentRef>(null);
   const chatWrapperId = useMemo(() => `chat-wrapper-${uuidv4()}`, []);

src/pages/common/components/ChatComponent/components/ChatFilePreview/ChatFilePreview.module.scss

@@ -8,15 +8,14 @@
 }
 
 .wrapper {
-  overflow-x: scroll;
+  overflow-x: auto;
   display: flex;
   width: 100%;
 }
 
 .filePreviewWrapper {
   position: relative;
   margin: 1rem 0.5rem 0;
-  height: 6.25rem;
 }
 
 .filePreview {

src/pages/common/components/ChatComponent/hooks/useChatChannelChatAdapter.ts

@@ -11,6 +11,7 @@ import {
 import { User, UserDiscussionMessage } from "@/shared/models";
 
 interface Options {
+  chatChannelId: string;
   participants?: string[];
 }
 
@@ -30,8 +31,8 @@ interface Return {
 }
 
 export const useChatChannelChatAdapter = (options: Options): Return => {
-  const { participants = [] } = options;
-  const chatMessagesData = useChatMessages();
+  const { chatChannelId, participants = [] } = options;
+  const chatMessagesData = useChatMessages(chatChannelId);
   const { markChatMessageAsSeen } = useMarkChatMessageAsSeen();
   const { markChatChannelAsSeen } = useUpdateChatChannelSeenState();
   const { fetchUsers: fetchDMUsers, data: dmUsers } = useUsersByIds();

src/pages/common/components/CommonTabPanels/components/FeedTab/components/NewDiscussionCreation/NewDiscussionCreation.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from "react";
+import React, { FC, useCallback, useEffect, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { selectUser } from "@/pages/Auth/store/selectors";
 import {
@@ -33,6 +33,7 @@ interface NewDiscussionCreationProps {
   isModalVariant?: boolean;
   edit?: boolean;
   defaultVisibility?: string;
+  onDiscussionIdChange?: () => void;
 }
 
 interface InitialValues {
@@ -52,6 +53,7 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     isModalVariant = false,
     edit,
     defaultVisibility,
+    onDiscussionIdChange,
   } = props;
   const dispatch = useDispatch();
   const discussionCreationData = useSelector(selectDiscussionCreationData);
@@ -132,6 +134,12 @@ const NewDiscussionCreation: FC<NewDiscussionCreationProps> = (props) => {
     [governanceCircles, userCircleIds, userId, common.id, edit],
   );
 
+  useEffect(() => {
+    if (discussionCreationData?.id) {
+      onDiscussionIdChange?.();
+    }
+  }, [discussionCreationData?.id]);
+
   if (
     isModalVariant &&
     typeof commonImage === "string" &&

src/pages/commonFeed/CommonFeed.tsx

@@ -266,6 +266,15 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     [dispatch],
   );
 
+  const scrollToItemsTop = () => {
+    setTimeout(() => {
+      feedLayoutRef?.getItemsContainerEl()?.scrollTo({
+        top: 0,
+        behavior: "smooth",
+      });
+    }, 0);
+  };
+
   const onJoinCommon = checkIsProject(commonData?.common)
     ? canJoinProjectAutomatically
       ? onJoinProjectAutomatically
@@ -476,6 +485,17 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
     };
   }, [updateLastVisitedCommon, commonId]);
 
+  useEffect(() => {
+    if (
+      commonAction &&
+      [CommonAction.NewDiscussion, CommonAction.NewProposal].includes(
+        commonAction,
+      )
+    ) {
+      scrollToItemsTop();
+    }
+  }, [commonAction]);
+
   if (!isDataFetched) {
     const headerEl = renderLoadingHeader ? (
       renderLoadingHeader()
@@ -559,6 +579,7 @@ const CommonFeedComponent: FC<CommonFeedProps> = (props) => {
                 defaultVisibility={
                   commonData.governance.discussions.defaultVisibility
                 }
+                onDiscussionIdChange={scrollToItemsTop}
               />
             )}
             {commonAction === CommonAction.NewProposal && (

src/pages/commonFeed/components/FeedLayout/FeedLayout.tsx

@@ -36,6 +36,8 @@ import {
   FeedLayoutEventEmitter,
 } from "@/pages/commonFeed/components/FeedLayout/events";
 import {
+  AI_PRO_USER,
+  AI_USER,
   InboxItemType,
   LOADER_APPEARANCE_DELAY,
   QueryParamKey,
@@ -331,6 +333,10 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
 
   const handleUserWithCommonClick = useCallback(
     (userId: string, commonId?: string) => {
+      if ([AI_USER.uid, AI_PRO_USER.uid].includes(userId)) {
+        return;
+      }
+
       userForProfile.setUserForProfileData({
         userId,
         commonId,
@@ -458,6 +464,14 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
     setShouldAllowChatAutoOpen(true);
   };
 
+  const getItemsContainerEl = useCallback(() => {
+    const containerEl = isTabletView
+      ? window
+      : document.getElementsByClassName("Pane Pane1")[0];
+
+    return containerEl || null;
+  }, [isTabletView]);
+
   const onDMClick =
     !isTabletView && dmChatChannelItemForProfile ? handleDMClick : undefined;
 
@@ -730,8 +744,9 @@ const FeedLayout: ForwardRefRenderFunction<FeedLayoutRef, FeedLayoutProps> = (
       setExpandedFeedItemId,
       setActiveItem,
       setShouldAllowChatAutoOpen,
+      getItemsContainerEl,
     }),
-    [setActiveItem],
+    [setActiveItem, getItemsContainerEl],
   );
 
   const pageContentStyles = {

src/pages/empty/EmptyPage.tsx

@@ -1,5 +1,19 @@
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
+import { useSelector } from "react-redux";
+import { history } from "@/shared/appConfig";
+import { getInboxPagePath } from "@/shared/utils";
+import { selectUser } from "../Auth/store/selectors";
 
-const EmptyPage: FC = () => null;
+const EmptyPage: FC = () => {
+  const user = useSelector(selectUser());
+
+  useEffect(() => {
+    if (user) {
+      history.push(getInboxPagePath());
+    }
+  }, [user]);
+
+  return null;
+};
 
 export default EmptyPage;

src/shared/components/Chat/ChatMessage/ChatMessage.tsx

@@ -13,6 +13,7 @@ import { Element } from "slate";
 import { useLongPress } from "use-long-press";
 import * as oldCommonActions from "@/pages/OldCommon/store/actions";
 import { ChatService, DiscussionMessageService } from "@/services";
+import botAvatarSrc from "@/shared/assets/images/bot-avatar.svg";
 import { ElementDropdown, UserAvatar } from "@/shared/components";
 import {
   Orientation,
@@ -32,6 +33,7 @@ import {
   Circles,
   DiscussionMessageWithParsedText,
   ParentDiscussionMessage,
+  checkIsBotDiscussionMessage,
 } from "@/shared/models";
 import {
   FilePreview,
@@ -124,6 +126,7 @@ export default function ChatMessage({
   const isUserDiscussionMessage =
     checkIsUserDiscussionMessage(discussionMessage);
   const isSystemMessage = checkIsSystemDiscussionMessage(discussionMessage);
+  const isBotMessage = checkIsBotDiscussionMessage(discussionMessage);
   const userId = user?.uid;
   const discussionMessageUserId = isUserDiscussionMessage
     ? discussionMessage.ownerId
@@ -179,7 +182,7 @@ export default function ChatMessage({
   );
 
   const handleUserClick = () => {
-    if (onUserClick && discussionMessageUserId) {
+    if (onUserClick && discussionMessageUserId && !isBotMessage) {
       onUserClick(discussionMessageUserId);
     }
   };
@@ -433,16 +436,21 @@ export default function ChatMessage({
           })}
         >
           {!isSystemMessage && !isNotCurrentUserMessage && emojiButton}
-          {isNotCurrentUserMessage && isUserDiscussionMessage && (
-            <div className={styles.iconWrapper} onClick={handleUserClick}>
-              <UserAvatar
-                imageContainerClassName={styles.userAvatarContainer}
-                photoURL={discussionMessage.owner?.photoURL}
-                nameForRandomAvatar={discussionMessage.owner?.email}
-                userName={getUserName(discussionMessage.owner)}
-              />
-            </div>
-          )}
+          {isNotCurrentUserMessage &&
+            (isUserDiscussionMessage || isBotMessage) && (
+              <div className={styles.iconWrapper} onClick={handleUserClick}>
+                <UserAvatar
+                  imageContainerClassName={styles.userAvatarContainer}
+                  photoURL={
+                    isBotMessage
+                      ? botAvatarSrc
+                      : discussionMessage.owner?.photoURL
+                  }
+                  nameForRandomAvatar={discussionMessage.owner?.email}
+                  userName={getUserName(discussionMessage.owner)}
+                />
+              </div>
+            )}
           {isEditMode ? (
             <EditMessageInput
               discussionMessage={discussionMessage}
@@ -473,7 +481,7 @@ export default function ChatMessage({
               >
                 {isNotCurrentUserMessage && !isSystemMessage && (
                   <div className={styles.messageName} onClick={handleUserClick}>
-                    {getUserName(discussionMessage.owner)}
+                    {isBotMessage ? "AI" : getUserName(discussionMessage.owner)}
                   </div>
                 )}
                 <ReplyMessage />

src/shared/components/Chat/ChatMessage/components/ReactWithEmoji/ReactWithEmoji.tsx

@@ -18,7 +18,7 @@ import { selectTheme } from "@/shared/store/selectors";
 import { ButtonIcon } from "@/shared/ui-kit";
 import { cacheActions } from "@/store/states";
 import { DMChatMessageReaction } from "../../DMChatMessage";
-import { CompactPicker } from "./components /CompactPicker";
+import { CompactPicker } from "./components/CompactPicker";
 import styles from "./ReactWithEmoji.module.scss";
 
 interface ReactWithEmojiProps {

src/shared/components/Chat/ChatMessage/components/Reactions/Reactions.module.scss

@@ -8,6 +8,7 @@
   padding: 0.3rem 0.5rem;
   box-shadow: 0 0.25rem 0.9375rem var(--drop-shadow);
   color: $c-neutrals-300;
+  width: max-content;
 }
 
 .totalCount {

src/shared/components/Chat/ChatMessage/components/UserMention/UserMention.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from "react";
 import classNames from "classnames";
+import { AI_PRO_USER, AI_USER } from "@/shared/constants";
 import { User } from "@/shared/models";
 import { getUserName } from "@/shared/utils";
 import styles from "../../ChatMessage.module.scss";
@@ -16,7 +17,9 @@ const UserMention: FC<UserMentionProps> = (props) => {
   const { users, userId, displayName, mentionTextClassName, onUserClick } =
     props;
 
-  const user = users.find(({ uid }) => uid === userId);
+  const user = [AI_USER, AI_PRO_USER, ...users].find(
+    ({ uid }) => uid === userId,
+  );
   const withSpace = displayName[displayName.length - 1] === " ";
   const userName = user
     ? `${getUserName(user)}${withSpace ? " " : ""}`

src/shared/constants/aiUser.ts

@@ -0,0 +1,18 @@
+import botAvatarSrc from "@/shared/assets/images/bot-avatar.svg";
+import { Timestamp, User } from "@/shared/models";
+
+export const AI_USER: User = {
+  uid: "ai",
+  firstName: "ai",
+  lastName: "",
+  country: "",
+  photoURL: botAvatarSrc,
+  createdAt: Timestamp.now(),
+  updatedAt: Timestamp.now(),
+};
+
+export const AI_PRO_USER: User = {
+  ...AI_USER,
+  uid: "aipro",
+  firstName: "aipro",
+};

src/shared/constants/discussionMessageOwnerType.ts

@@ -1,4 +1,5 @@
 export enum DiscussionMessageOwnerType {
   User = "user",
   System = "system",
+  Bot = "bot",
 }

src/shared/constants/featureFlags.ts

@@ -1,9 +1,11 @@
 export enum FeatureFlags {
   AdvancedSettings = "AdvancedSettings",
+  AiBot = "AiBot",
+  AiBotPro = "AiBotPro",
 }
 
 export enum FeatureFlagVisibility {
-  ALL = 'ALL',
-  TEAM = 'TEAM',
-  USERS = 'USERS'
-}
+  ALL = "ALL",
+  TEAM = "TEAM",
+  USERS = "USERS",
+}

src/shared/constants/index.tsx

@@ -1,3 +1,4 @@
+export * from "./aiUser";
 export * from "./governance";
 export * from "./authProvider";
 export * from "./commonAction";