Merge remote-tracking branch 'upstream/release/3.1.3' into release/3.1.3

.github/workflows/production.yaml

@@ -42,7 +42,7 @@ jobs:
         run: pnpm install
 
       - name: increase version (patch)
-        run: pnpm standard-version --yes
+        run: pnpm standard-version --yes --release-as patch
         if: github.event.inputs.release_as == 'patch'
 
       - name: increase version (minor)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@amityco/ui-kit-open-source",
-  "version": "3.0.0",
+  "version": "3.2.1",
   "engines": {
     "node": ">=16",
     "pnpm": ">=8"
@@ -34,12 +34,12 @@
     "tsc": "tsc"
   },
   "peerDependencies": {
-    "@amityco/ts-sdk": "~6.16.0",
+    "@amityco/ts-sdk": "~6.17.3",
     "react": ">=17.0.2",
     "react-dom": ">=17.0.2"
   },
   "devDependencies": {
-    "@amityco/ts-sdk": "~6.16.0",
+    "@amityco/ts-sdk": "~6.17.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",

readme.md

@@ -1,9 +1,14 @@
+<<<<<<< HEAD
 # Amity Ui-Kit for Web (open-source)
+=======
+# Amity Ui-Kit for Web
+>>>>>>> upstream/release/3.1.3
 
 ## Getting started
 
 ### Installation
 
+<<<<<<< HEAD
 Here are the steps to install ui-kit together with another project.
 
 1. git clone git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git
@@ -16,11 +21,19 @@ Here are the steps to install ui-kit together with another project.
 8. npm link @amityco/ui-kit-open-source --save
 
 ** We need to link react module to react module in destination project so that react is the same instance otherwise we will encounter [issues with react hook](https://medium.com/bbc-product-technology/solving-the-problem-with-npm-link-and-react-hooks-266c832dd019).
+=======
+1. `npm install --save @amityco/ui-kit`
+2. `yarn add @amityco/ui-kit`
+>>>>>>> upstream/release/3.1.3
 
 ### Documentation
 
 Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at **developers@amity.co** for support.
 
 ## Contributing
 
+<<<<<<< HEAD
 See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md)   
+=======
+See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md)
+>>>>>>> upstream/release/3.1.3

src/chat/components/ChatDetails/ChatDetailsControls/styles.tsx

@@ -42,24 +42,25 @@ export const ControlItemState = styled.span`
 export const ControlItemArrowRight = styled(ChevronRight).attrs({ width: 16, height: 12 })`
   width: 16px !important;
   padding-left: 8px;
-  font-size: 12px;
-  color: ${({ theme }) => theme.palette.neutral.shade3};
+  fill: ${({ theme }) => theme.palette.neutral.shade3};
 `;
 
 const controlIconStyle = css`
-  width: 24px !important;
   padding-right: 8px;
-  font-size: 20px;
   text-align: center;
   fill: ${({ theme }) => theme.palette.neutral.main};
 `;
 
-export const MembersIcon = styled(UserRegular).attrs<{
-  icon?: ReactNode;
-}>({ width: 24, height: 20 })`
+export const MembersIcon = styled(UserRegular).attrs<{ icon?: ReactNode }>({
+  width: 24,
+  height: 24,
+})`
   ${controlIconStyle}
 `;
 
-export const GroupSettingIcon = styled(Pencil).attrs({ width: 24, height: 20 })`
+export const GroupSettingIcon = styled(Pencil).attrs<{ icon?: ReactNode }>({
+  width: 24,
+  height: 20,
+})`
   ${controlIconStyle}
 `;

src/chat/components/ChatDetails/ChatDetailsMembers/styles.tsx

@@ -25,10 +25,7 @@ export const MembersReturn = styled.div`
   }
 `;
 
-export const MembersArrowLeft = styled(ChevronLeft).attrs({ width: 18, height: 14 })`
-  width: 18px !important;
-  font-size: 14px;
-`;
+export const MembersArrowLeft = styled(ChevronLeft).attrs({ width: 18, height: 14 })``;
 
 export const MembersReturnTitle = styled.span`
   padding-left: 8px;

src/chat/components/ChatDetails/styles.tsx

@@ -24,8 +24,7 @@ export const ChatDetailsHeader = styled.div`
 `;
 
 export const HeaderCloseIcon = styled(Close).attrs<{ icon?: ReactNode }>({ width: 20, height: 20 })`
-  font-size: 20px;
-  color: ${({ theme }) => theme.palette.neutral.main};
+  fill: ${({ theme }) => theme.palette.neutral.main};
   cursor: pointer;
 `;
 

src/chat/components/ChatHeader/index.tsx

@@ -16,6 +16,7 @@ import {
   MemberCount,
 } from './styles';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
+import useChannel from '~/chat/hooks/useChannel';
 
 type ChatHeaderProps = {
   channelId: string;
@@ -24,21 +25,7 @@ type ChatHeaderProps = {
 };
 
 const ChatHeader = ({ channelId, onChatDetailsClick, shouldShowChatDetails }: ChatHeaderProps) => {
-  const [channel, setChannel] = useState<Amity.Channel | null>(null);
-  const unsubscribeChannel = useRef<() => void>(() => {});
-  useEffect(() => {
-    async function run() {
-      const unsubscribe = await ChannelRepository.getChannel(channelId, (response) => {
-        setChannel(response.data);
-      });
-      unsubscribeChannel.current = unsubscribe;
-    }
-    run();
-
-    return () => {
-      unsubscribeChannel.current();
-    };
-  }, [channelId]);
+  const channel = useChannel(channelId);
   const { chatName, chatAvatar } = useChatInfo({ channel });
 
   return (

src/chat/components/ChatHeader/styles.tsx

@@ -1,17 +1,14 @@
 import styled from 'styled-components';
-import { FontAwesomeIcon as FaIcon } from '@fortawesome/react-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { ReactNode } from 'react';
+import { BarsIcon } from "~/icons";
 
-export const DetailsIcon = styled(FaIcon).attrs<{ icon?: ReactNode }>({
-  icon: faBars,
-  width: 16,
-  height: 16,
+export const DetailsIcon = styled(BarsIcon).attrs<{ icon?: ReactNode }>({
+  width: 24,
+  height: 24,
 })`
-  font-size: 16px;
-  cursor: pointer;
-  fill: ${({ theme }) => theme.palette.neutral.main};
-  align-self: center;
+    cursor: pointer;
+    fill: ${({ theme }) => theme.palette.neutral.main};
+    align-self: center;
 `;
 
 export const ChatHeaderContainer = styled.div`

src/chat/components/ChatItem/index.tsx

@@ -6,6 +6,8 @@ import useChatInfo from '~/chat/hooks/useChatInfo';
 
 import { ChatItemLeft, Title, Avatar, ChatItemContainer, UnreadCount } from './styles';
 import { useCustomComponent } from '~/core/providers/CustomComponentsProvider';
+import useChannelSubscription from '~/social/hooks/useChannelSubscription';
+import useChannel from '~/chat/hooks/useChannel';
 
 function getNormalizedUnreadCount(channelUnreadCount: number) {
   // Within this range the unread counter will show an actuall number
@@ -24,16 +26,22 @@ function getNormalizedUnreadCount(channelUnreadCount: number) {
 }
 
 interface ChatItemProps {
-  channel?: Amity.Channel;
+  channelId: string;
   isSelected: boolean;
   onSelect: ({ channelId, type }: { channelId: string; type: string }) => void;
 }
 
-const ChatItem = ({ channel, isSelected, onSelect }: ChatItemProps) => {
-  const { chatName, chatAvatar } = useChatInfo({ channel: channel || null });
+const ChatItem = ({ channelId, isSelected, onSelect }: ChatItemProps) => {
+  const channel = useChannel(channelId);
+  const { chatName, chatAvatar } = useChatInfo({ channel });
 
   const normalizedUnreadCount = getNormalizedUnreadCount(channel?.unreadCount || 0);
 
+  useChannelSubscription({
+    channelId: channel?.channelId,
+    shouldSubscribe: () => !!channel?.channelId,
+  });
+
   return (
     <ChatItemContainer
       data-qa-anchor="chat-item"

src/chat/components/Message/styles.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 import UiKitAvatar from '~/core/components/Avatar';
 
-import { Close, EllipsisV, Save, Trash } from '~/icons';
+import { Close, EllipsisV, Save, TrashIcon } from '~/icons';
 
 export const EditingContainer = styled.div`
   display: flex;
@@ -24,7 +24,7 @@ export const SaveIcon = styled(Save)<{ icon?: ReactNode }>`
   cursor: pointer;
 `;
 
-export const DeleteIcon = styled(Trash)`
+export const DeleteIcon = styled(TrashIcon)`
   opacity: 0.7;
   padding: 0 10px;
   cursor: pointer;
@@ -36,11 +36,8 @@ export const CloseIcon = styled(Close)<{ icon?: ReactNode }>`
   cursor: pointer;
 `;
 
-export const MessageOptionsIcon = styled(EllipsisV).attrs<{
-  icon?: ReactNode;
-}>({ width: 11, height: 11 })`
+export const MessageOptionsIcon = styled(EllipsisV).attrs<{ icon?: ReactNode }>({ width: 11, height: 11 })`
   opacity: 0.5;
-  font-size: 11px;
   margin: 0 5px;
   cursor: pointer;
 `;

src/chat/components/MessageComposeBar/styles.tsx

@@ -6,31 +6,31 @@ export const SendMessageIcon = styled(SendMessage).attrs<{ icon?: ReactNode }>({
   width: 28,
   height: 28,
 })`
-  font-size: 28px;
   cursor: pointer;
   margin-left: 12px;
   margin-right: 8px;
-  color: #0f86fe;
+  fill: #0f86fe;
 `;
 
 export const ImageMessageIcon = styled(ImageAttachment).attrs<{ icon?: ReactNode }>({
   width: 18,
   height: 18,
 })`
-  font-size: 18px;
   cursor: pointer;
   margin-right: 20px;
-  color: ${({ theme }) => theme.palette.neutral.main};
+  fill: ${({ theme }) => theme.palette.neutral.main};
 `;
 
-export const FileMessageIcon = styled(FileAttachment).attrs<{ icon?: ReactNode }>({
+export const FileMessageIcon = styled(FileAttachment).attrs<{
+  disabled?: boolean;
+  icon?: ReactNode;
+}>({
   width: 18,
   height: 18,
 })`
-  font-size: 18px;
   margin-right: 12px;
   cursor: pointer;
-  color: ${({ theme }) => theme.palette.neutral.main};
+  fill: ${({ theme }) => theme.palette.neutral.main};
 `;
 
 export const MessageComposeBarContainer = styled.div`

src/chat/components/MessageList/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 import InfiniteScroll from 'react-infinite-scroll-component';
 
 import MessageComponent from '~/chat/components/Message';
@@ -46,28 +46,29 @@ interface MessageListProps {
 const MessageList = ({ channelId }: MessageListProps) => {
   const { client } = useSDK();
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const { messages, hasMore, loadMore } = useMessagesCollection(channelId);
+  const { messages, hasMore, loadMore, isLoading } = useMessagesCollection({
+    subChannelId: channelId,
+    sortBy: 'segmentDesc',
+    limit: 20,
+  });
 
   useChannelSubscription({
     channelId,
   });
 
-  useEffect(() => {
-    const element = containerRef.current;
-    if (element) {
-      element.scrollIntoView(false);
-    }
-  }, [messages, containerRef]);
-
   return (
     <InfiniteScrollContainer ref={containerRef}>
       {containerRef.current ? (
         <InfiniteScroll
+          scrollableTarget={containerRef.current}
+          scrollThreshold={0.7}
           hasMore={hasMore}
           next={loadMore}
-          loader={<span key={0}>Loading...</span>}
+          loader={isLoading ? <span key={0}>Loading...</span> : null}
           inverse={true}
           dataLength={messages.length}
+          style={{ display: 'flex', flexDirection: 'column-reverse' }}
+          height={containerRef.current.clientHeight}
         >
           <MessageListContainer ref={containerRef} data-qa-anchor="message-list">
             {messages.map((message, i) => {

src/chat/components/RecentChat/index.tsx

@@ -57,12 +57,13 @@ const RecentChat = ({
             next={loadMore}
             loader={hasMore && <span key={0}>Loading...</span>}
             dataLength={channels.length}
+            height={containerRef.current.clientHeight}
           >
             {Array.isArray(channels) &&
               channels.map((channel) => (
                 <ChatItem
                   key={channel.channelId}
-                  channel={channel}
+                  channelId={channel.channelId}
                   isSelected={selectedChannelId === channel.channelId}
                   onSelect={(data) => {
                     onChannelSelect?.(data);

src/chat/components/RecentChat/styles.tsx

@@ -2,12 +2,8 @@ import { ReactNode } from 'react';
 import styled from 'styled-components';
 import { CreateChat } from '~/icons';
 
-export const CreateNewChatIcon = styled(CreateChat).attrs<{ icon?: ReactNode }>({
-  width: 24,
-  height: 18,
-})`
+export const CreateNewChatIcon = styled(CreateChat).attrs<{ icon?: ReactNode }>({ width: 24, height: 18 })`
   width: 24px !important;
-  font-size: 18px;
   cursor: pointer;
 `;
 

src/chat/components/UserAvatar/index.tsx

@@ -24,6 +24,8 @@ const UserAvatar = ({
   const [backgroundImage, setBackgroundImage] = useState<string | null>(null);
 
   useEffect(() => {
+    setAvatar(null);
+    setBackgroundImage(null);
     const getAvatarProps = async () => {
       if (avatarUrl) {
         setAvatar(avatarUrl);

src/chat/hooks/collections/useMessagesCollection.ts

@@ -2,14 +2,13 @@ import { MessageRepository } from '@amityco/ts-sdk';
 
 import useLiveCollection from '~/core/hooks/useLiveCollection';
 
-export default function useMessagesCollection(channelId: string) {
+type UseMessagesCollectionParams = Parameters<typeof MessageRepository.getMessages>[0];
+
+export default function useMessagesCollection(params: UseMessagesCollectionParams) {
   const { items, ...rest } = useLiveCollection({
     fetcher: MessageRepository.getMessages,
-    params: {
-      subChannelId: channelId,
-      sortBy: 'segmentDesc',
-    },
-    shouldCall: () => !!channelId,
+    params,
+    shouldCall: () => !!params.subChannelId,
   });
 
   return {

src/chat/hooks/useChatInfo.ts

@@ -89,6 +89,7 @@ function useChatInfo({ channel }: { channel: Amity.Channel | null }) {
 
   useEffect(() => {
     async function run() {
+      setChatAvatar(null);
       const url = await getChatAvatar(
         channel,
         { avatarUrl: otherUser?.avatarCustomUrl || otherUserAvatarUrl },