Merge branch 'main' of https://github.com/dappforce/grillchat into de…

…ploy/offchain-posting

codegen-squid.ts

@@ -6,7 +6,10 @@ if (!squidUrl) throw new Error('Codegen error: Squid URL not set')
 const config: CodegenConfig = {
   overwrite: true,
   schema: squidUrl,
-  documents: 'src/services/subsocial/**/*.ts',
+  documents: [
+    'src/services/subsocial/**/*.ts',
+    '!src/services/subsocial/datahub/**/*.ts',
+  ],
   generates: {
     'src/services/subsocial/squid/generated.ts': {
       plugins: [

src/components/BadgeManager.tsx

@@ -1,4 +1,4 @@
-import { lastReadTimeLocalForage } from '@/components/chats/hooks/useLastReadMessageId'
+import { lastReadTimeLocalForage } from '@/components/chats/hooks/useLastReadMessageTimeFromStorage'
 import useWrapInRef from '@/hooks/useWrapInRef'
 import { followedIdsStorage, useMyMainAddress } from '@/stores/my-account'
 import { getSquidUrl } from '@/utils/env/client'

src/components/auth/common/polkadot-connect/PolkadotConnectWalletContent.tsx

@@ -1,5 +1,6 @@
 import SubwalletIcon from '@/assets/icons/subwallet.png'
 import Button from '@/components/Button'
+import PopOver from '@/components/floating/PopOver'
 import MenuList, { MenuListProps } from '@/components/MenuList'
 import { ACCOUNT_SECRET_KEY_URL_PARAMS } from '@/pages/account'
 import { useSendEvent } from '@/stores/analytics'
@@ -52,15 +53,25 @@ export default function PolkadotConnectWalletContent({
             {wallet.title}
           </span>
           {!wallet.installed && (
-            <Button
-              size='circle'
-              variant='primaryOutline'
-              href={wallet.installUrl}
-              target='_blank'
-              rel='noopener noreferrer'
+            <PopOver
+              panelSize='sm'
+              triggerOnHover
+              placement='top'
+              yOffset={8}
+              trigger={
+                <Button
+                  size='circle'
+                  variant='primaryOutline'
+                  href={wallet.installUrl}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <FiDownload />
+                </Button>
+              }
             >
-              <FiDownload />
-            </Button>
+              <p>Install this extension</p>
+            </PopOver>
           )}
         </div>
       ),

src/components/chats/ChatList/ChatItemContainer.tsx

@@ -1,8 +1,10 @@
 import useIsMessageBlocked from '@/hooks/useIsMessageBlocked'
 import usePrevious from '@/hooks/usePrevious'
+import { getPostQuery } from '@/services/api/query'
 import { useMessageData } from '@/stores/message'
 import { useMyAccount } from '@/stores/my-account'
 import { cx } from '@/utils/class-names'
+import { useQueryClient } from '@tanstack/react-query'
 import { ComponentProps, forwardRef, useEffect } from 'react'
 import { useInView } from 'react-intersection-observer'
 import ChatItem, { ChatItemProps } from '../ChatItem'
@@ -69,6 +71,7 @@ function ChatItemContainer(
 }
 
 function UnreadMessageChecker({ messageId }: { messageId: string }) {
+  const client = useQueryClient()
   const { ref, inView } = useInView({
     onChange: (inView) => {
       if (inView) handleInView()
@@ -80,22 +83,15 @@ function UnreadMessageChecker({ messageId }: { messageId: string }) {
   const prevCount = usePrevious(unreadMessage.count)
 
   const handleInView = (isAfterScroll?: boolean) => {
-    if (!unreadMessage.lastId || !unreadMessage.count) return
-    const prevLastId = unreadMessage.lastId.startsWith('0x')
-      ? undefined
-      : Number(unreadMessage.lastId)
-    const currentMessageId = messageId.startsWith('0x')
-      ? undefined
-      : Number(messageId)
-    if (
-      isAfterScroll ||
-      !prevLastId ||
-      !currentMessageId ||
-      prevLastId < currentMessageId
-    ) {
+    if (!unreadMessage.count) return
+    const messageTime =
+      getPostQuery.getQueryData(client, messageId)?.struct.createdAtTime ??
+      Date.now()
+    const lastTime = unreadMessage.lastMessageTime
+    if (isAfterScroll || messageTime > lastTime) {
       setUnreadMessage((prev) => ({
-        count: Math.max(prev.count - 1, 0),
-        lastId: Math.max(prevLastId ?? 0, currentMessageId ?? 0).toString(),
+        count: prev.count - 1,
+        lastMessageTime: messageTime,
       }))
     }
   }

src/components/chats/ChatList/ChatItemWithMenu.tsx

@@ -1,5 +1,5 @@
 import { PostData } from '@subsocial/api/types'
-import { Fragment, memo } from 'react'
+import { memo } from 'react'
 import ChatItemMenus from '../ChatItem/ChatItemMenus'
 import { getMessageElementId } from '../utils'
 import ChatItemContainer from './ChatItemContainer'
@@ -10,25 +10,18 @@ const MemoizedChatItemContainer = memo(ChatItemContainer)
 export type ChatItemWithMenuProps = {
   chatItemClassName?: string
   message: PostData | null | undefined
-  isBottomMessage: boolean
   chatId: string
   hubId: string
-  lastReadId: string | null | undefined
   scrollToMessage: ScrollToMessage
 }
 export function ChatItemWithMenu({
   message,
-  isBottomMessage,
   chatItemClassName,
   chatId,
   hubId,
-  lastReadId,
   scrollToMessage,
 }: ChatItemWithMenuProps) {
-  const isLastReadMessage = lastReadId === message?.id
-  const showLastUnreadMessageNotice = isLastReadMessage && !isBottomMessage
-
-  const chatElement = message ? (
+  return message ? (
     <ChatItemMenus
       chatId={chatId}
       messageId={message.id}
@@ -60,16 +53,6 @@ export function ChatItemWithMenu({
       }}
     </ChatItemMenus>
   ) : null
-  if (!showLastUnreadMessageNotice) return chatElement
-
-  return (
-    <Fragment>
-      <div className='my-2 w-full rounded-md bg-background-light py-0.5 text-center text-sm'>
-        Unread messages
-      </div>
-      {chatElement}
-    </Fragment>
-  )
 }
 const MemoizedChatItemWithMenu = memo(ChatItemWithMenu)
 export default MemoizedChatItemWithMenu

src/components/chats/ChatList/ChatList.tsx

@@ -11,6 +11,7 @@ import { sendMessageToParentWindow } from '@/utils/window'
 import {
   ComponentProps,
   createContext,
+  Fragment,
   RefObject,
   useContext,
   useEffect,
@@ -28,7 +29,7 @@ import ChatListEventManager from './ChatListEventManager'
 import ChatListSupportingContent from './ChatListSupportingContent'
 import ChatLoading from './ChatLoading'
 import ChatTopNotice from './ChatTopNotice'
-import useFocusedLastMessageId from './hooks/useFocusedLastMessageId'
+import useLastFocusedMessageTime from './hooks/useLastFocusedMessageId'
 import useLoadMoreIfNoScroll from './hooks/useLoadMoreIfNoScroll'
 import useScrollToMessage from './hooks/useScrollToMessage'
 import PinnedMessage from './PinnedMessage'
@@ -72,7 +73,6 @@ function ChatListContent({
 }: ChatListProps) {
   const sendEvent = useSendEvent()
   const { enableBackButton } = useConfigContext()
-  const lastReadId = useFocusedLastMessageId(chatId)
 
   const scrollableContainerId = useId()
 
@@ -94,6 +94,10 @@ function ChatListContent({
     chatId,
     isPausedLoadMore,
   })
+  const lastFocusedTime = useLastFocusedMessageTime(
+    chatId,
+    currentPageMessageIds[0] ?? ''
+  )
 
   useEffect(() => {
     sendMessageToParentWindow('totalMessage', (totalDataCount ?? 0).toString())
@@ -155,6 +159,7 @@ function ChatListContent({
   const Component = asContainer ? Container<'div'> : 'div'
 
   const isAllMessagesLoaded = renderedMessageIds.length === totalDataCount
+  let alreadyRenderLastReadMessage = false
 
   return (
     <ChatListContext.Provider value={scrollContainerRef}>
@@ -213,18 +218,38 @@ function ChatListContent({
             >
               {renderedMessageQueries.map(({ data: message }, index) => {
                 // bottom message is the first element, because the flex direction is reversed
+                if (!message) return null
+
                 const isBottomMessage = index === 0
+                const isMessageRead =
+                  lastFocusedTime >= message.struct.createdAtTime
+                // Only show the unread message notice for first message that is marked as read
+                const currentAlreadyRenderLastReadMessage =
+                  alreadyRenderLastReadMessage
+                if (isMessageRead) {
+                  alreadyRenderLastReadMessage = true
+                }
+
+                const shouldRenderUnreadMessageNotice =
+                  !isBottomMessage &&
+                  !currentAlreadyRenderLastReadMessage &&
+                  isMessageRead
+
                 return (
-                  <MemoizedChatItemWithMenu
-                    key={message?.id ?? index}
-                    chatItemClassName='mt-2'
-                    chatId={chatId}
-                    hubId={hubId}
-                    isBottomMessage={isBottomMessage}
-                    message={message}
-                    scrollToMessage={scrollToMessage}
-                    lastReadId={lastReadId}
-                  />
+                  <Fragment key={message?.id ?? index}>
+                    {shouldRenderUnreadMessageNotice && (
+                      <div className='mb-2 mt-4 w-full rounded-md bg-background-light py-0.5 text-center text-sm'>
+                        Unread messages
+                      </div>
+                    )}
+                    <MemoizedChatItemWithMenu
+                      chatItemClassName='mt-2'
+                      chatId={chatId}
+                      hubId={hubId}
+                      message={message}
+                      scrollToMessage={scrollToMessage}
+                    />
+                  </Fragment>
                 )
               })}
             </InfiniteScroll>
@@ -234,9 +259,8 @@ function ChatListContent({
         <ChatListSupportingContent
           chatId={chatId}
           hubId={hubId}
-          renderedMessageLength={renderedMessageIds.length}
           isLoadingIds={isLoading}
-          messageIds={currentPageMessageIds}
+          renderedMessageIds={renderedMessageIds}
           scrollContainerRef={scrollContainerRef}
           scrollToMessage={scrollToMessage}
           asContainer={asContainer}