Merge pull request #907 from The-Commit-Company/develop

Release v1.5.5

mobile/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mobile",
   "private": true,
-  "version": "1.5.4",
+  "version": "1.5.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

mobile/src/pages/profile/Profile.tsx

@@ -62,7 +62,7 @@ export const Profile = () => {
                     </IonItem>
                 </IonList>
                 <div className="ion-text-center mt-16">
-                    <Text as='span'><Text as='span' size='6' className='cal-sans'>raven</Text> <Text as='span' color='gray'>v1.5.4</Text></Text>
+                    <Text as='span'><Text as='span' size='6' className='cal-sans'>raven</Text> <Text as='span' color='gray'>v1.5.5</Text></Text>
                     <br />
                     <Text as='span' color='gray'>Made by The Commit Company</Text>
                 </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "raven",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "Messaging Application",
   "main": "index.js",
   "scripts": {

raven-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "raven-app",
   "private": true,
-  "version": "1.5.4",
+  "version": "1.5.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -32,7 +32,7 @@
     "dayjs": "^1.11.10",
     "downshift": "^8.3.1",
     "emoji-picker-element": "^1.21.0",
-    "frappe-react-sdk": "^1.6.0",
+    "frappe-react-sdk": "^1.7.0",
     "highlight.js": "^11.9.0",
     "html-react-parser": "^5.1.8",
     "jotai": "^2.8.0",

raven-app/src/App.tsx

@@ -67,6 +67,9 @@ function App() {
       url={import.meta.env.VITE_FRAPPE_PATH ?? ''}
       socketPort={import.meta.env.VITE_SOCKET_PORT ? import.meta.env.VITE_SOCKET_PORT : undefined}
       //@ts-ignore
+      swrConfig={{
+        provider: localStorageProvider
+      }}
       siteName={getSiteName()}
     >
       <UserProvider>
@@ -84,4 +87,18 @@ function App() {
   )
 }
 
+function localStorageProvider() {
+  // When initializing, we restore the data from `localStorage` into a map.
+  const map = new Map<string, any>(JSON.parse(localStorage.getItem('app-cache') || '[]'))
+
+  // Before unloading the app, we write back all the data into `localStorage`.
+  window.addEventListener('beforeunload', () => {
+    const appCache = JSON.stringify(Array.from(map.entries()))
+    localStorage.setItem('app-cache', appCache)
+  })
+
+  // We still use the map for write & read for performance.
+  return map
+}
+
 export default App

raven-app/src/components/common/UserAvatar.tsx

@@ -1,5 +1,3 @@
-import { useInView } from 'react-intersection-observer'
-import { Skeleton } from './Skeleton'
 import { Avatar, Theme } from '@radix-ui/themes'
 import { AvatarProps } from '@radix-ui/themes/dist/cjs/components/avatar'
 import { BoxProps } from '@radix-ui/themes/dist/cjs/components/box'
@@ -14,34 +12,13 @@ interface UserAvatarProps extends Partial<AvatarProps> {
     isBot?: boolean,
     skeletonSize?: BoxProps['width'] | BoxProps['height'],
 }
-const options = {
-    root: null,
-    rootMargin: "50px",
-    threshold: 0.5,
-    triggerOnce: true
-}
 
 export const getInitials = (name?: string) => {
     if (!name) return ''
     const [firstName, lastName] = name.split(' ')
     return firstName[0] + (lastName?.[0] ?? '')
 }
 
-const radixRadiusToTailwind = (radius: "none" | "small" | "medium" | "large" | "full") => {
-    switch (radius) {
-        case "none":
-            return "rounded-none"
-        case "small":
-            return "rounded-sm"
-        case "medium":
-            return "rounded-md"
-        case "large":
-            return "rounded-lg"
-        case "full":
-            return "rounded-full"
-    }
-}
-
 const getIconSize = (size: AvatarProps['size']) => {
     switch (size) {
         case '1':
@@ -69,14 +46,11 @@ const getIconSize = (size: AvatarProps['size']) => {
 }
 
 export const UserAvatar = ({ src, alt, size = '1', radius = 'medium', isActive, skeletonSize = '5', fallback, isBot, className, ...props }: UserAvatarProps) => {
-    const { ref, inView } = useInView(options)
     const color = useMemo(() => generateAvatarColor(alt), [alt])
-    return <Theme accentColor={color}><span ref={ref} className="relative inline-block">
-        {inView ?
-            <Avatar src={src} alt={alt} loading='lazy' fallback={fallback ?? getInitials(alt)} size={size} radius={radius} className={className} {...props} />
-            :
-            <Skeleton className={radixRadiusToTailwind(radius)} width={skeletonSize} height={skeletonSize} />
-        }
+    return <Theme accentColor={color}><span className="relative inline-block">
+        <Avatar src={src} alt={alt}
+            loading='lazy'
+            fallback={fallback ?? getInitials(alt)} size={size} radius={radius} className={className} {...props} />
         {isActive &&
             <span className={clsx("absolute block translate-x-1/2 translate-y-1/2 transform rounded-full", radius === 'full' ? 'bottom-1 right-1' : 'bottom-0.5 right-0.5')}>
                 <span className="block h-2 w-2 rounded-full border border-slate-2 bg-green-600 shadow-md" />

raven-app/src/components/feature/channels/ChannelList.tsx

@@ -53,7 +53,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
     }, [channels, myProfile, unread_count])
 
     const ref = useRef<HTMLDivElement>(null)
-    const [height, setHeight] = useState(ref?.current?.clientHeight ?? 0)
+    const [height, setHeight] = useState(ref?.current?.clientHeight ?? showData ? filteredChannels.length * (36) - 4 : 0)
 
     useLayoutEffect(() => {
         setHeight(ref.current?.clientHeight ?? 0)
@@ -81,7 +81,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
             <SidebarGroup>
                 <SidebarGroupList
                     style={{
-                        height: showData ? height : 0
+                        height: showData ? height : 0,
                     }}
                 >
                     <div ref={ref} className="flex gap-1 flex-col">

raven-app/src/components/feature/channels/CreateChannelModal.tsx

@@ -94,7 +94,7 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList:
     return <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
         <Dialog.Trigger>
             <IconButton variant='soft' size='1' radius='large' color='gray' aria-label='Create Channel' title='Create Channel'
-                className='group-hover:visible invisible transition-all ease-in-out text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3'>
+                className='group-hover:visible invisible transition-all ease-ease text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3'>
                 <FiPlus size='16' />
                 {/* <BiPlus className='text-gray-10 dark:text-gray-300' /> */}
             </IconButton>

raven-app/src/components/feature/chat-header/ViewChannelDetailsButton.tsx

@@ -1,12 +1,12 @@
 import { ViewChannelDetailsModalContent } from "../channels/ViewChannelDetailsModal"
-import { useContext, useState } from "react"
-import { ActiveUsersContext } from "@/utils/users/ActiveUsersProvider"
+import { useState } from "react"
 import { ChannelListItem } from "@/utils/channel/ChannelListProvider"
 import { ChannelMembers } from "@/utils/channel/ChannelMembersProvider"
 import { Button, Dialog, Tooltip } from "@radix-ui/themes"
 import { UserAvatar } from "@/components/common/UserAvatar"
 import { BiSolidUser } from "react-icons/bi"
 import { clsx } from "clsx"
+import useFetchActiveUsers from "@/hooks/fetchers/useFetchActiveUsers"
 
 interface ViewChannelDetailsButtonProps {
     channelData: ChannelListItem,
@@ -23,7 +23,9 @@ export const ViewChannelDetailsButton = ({ channelData, allowAddMembers, channel
         setOpen(false)
     }
 
-    const activeUsers = useContext(ActiveUsersContext)
+    const { data } = useFetchActiveUsers()
+    const activeUsers = data?.message ?? []
+
     const totalMembers = Object.keys(channelMembers).length
 
     return (

raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx

@@ -457,7 +457,7 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, replyMessage, clearReply
 
 
     return (
-        <Box className='border rounded-radius2 border-gray-300 dark:border-gray-500 dark:bg-gray-3 shadow-md animate-fadein'>
+        <Box className='border rounded-radius2 border-gray-300 dark:border-gray-500 dark:bg-gray-3 shadow-md'>
             <EditorContext.Provider value={{ editor }}>
                 {slotBefore}
                 <EditorContent editor={editor} />

raven-app/src/components/feature/chat/ChatStream/ChatBoxBody.tsx

@@ -1,5 +1,5 @@
 import { Message } from "../../../../../../types/Messaging/Message"
-import { Suspense, lazy, useContext, useMemo, useState } from "react"
+import { useContext, useMemo, useState } from "react"
 import { ArchivedChannelBox } from "../chat-footer/ArchivedChannelBox"
 import { ChannelListItem, DMChannelListItem } from "@/utils/channel/ChannelListProvider"
 import { JoinChannelBox } from "../chat-footer/JoinChannelBox"
@@ -9,13 +9,11 @@ import useFileUpload from "../ChatInput/FileInput/useFileUpload"
 import { CustomFile, FileDrop } from "../../file-upload/FileDrop"
 import { FileListItem } from "../../file-upload/FileListItem"
 import { useSendMessage } from "../ChatInput/useSendMessage"
-import { Loader } from "@/components/common/Loader"
 import { Flex, Box, IconButton } from "@radix-ui/themes"
 import { ReplyMessageBox } from "../ChatMessage/ReplyMessageBox/ReplyMessageBox"
 import { BiX } from "react-icons/bi"
 import ChatStream from "./ChatStream"
-
-const Tiptap = lazy(() => import("../ChatInput/Tiptap"))
+import Tiptap from "../ChatInput/Tiptap"
 
 const COOL_PLACEHOLDERS = [
     "Delivering messages atop dragons 🐉 is available on a chargeable basis.",
@@ -27,7 +25,7 @@ const COOL_PLACEHOLDERS = [
     "Want to know who writes these placeholders? 🤔. No one.",
     "Type a message..."
 ]
-const randomPlaceholder = COOL_PLACEHOLDERS[Math.floor(Math.random() * (COOL_PLACEHOLDERS.length))]
+// const randomPlaceholder = COOL_PLACEHOLDERS[Math.floor(Math.random() * (COOL_PLACEHOLDERS.length))]
 interface ChatBoxBodyProps {
     channelData: ChannelListItem | DMChannelListItem
 }
@@ -95,27 +93,25 @@ export const ChatBoxBody = ({ channelData }: ChatBoxBodyProps) => {
                 />
                 {channelData?.is_archived == 0 && (isUserInChannel || channelData?.type === 'Open')
                     &&
-                    <Suspense fallback={<Flex align='center' justify='center' width='100%' height='9'><Loader /></Flex>}>
-                        <Tiptap
-                            key={channelData.name}
-                            fileProps={{
-                                fileInputRef,
-                                addFile
-                            }}
-                            clearReplyMessage={handleCancelReply}
-                            placeholder={randomPlaceholder}
-                            replyMessage={selectedMessage}
-                            sessionStorageKey={`tiptap-${channelData.name}`}
-                            onMessageSend={sendMessage}
-                            messageSending={loading}
-                            slotBefore={<Flex direction='column' justify='center' hidden={!selectedMessage && !files.length}>
-                                {selectedMessage && <PreviousMessagePreview selectedMessage={selectedMessage} />}
-                                {files && files.length > 0 && <Flex gap='2' width='100%' align='end' px='2' p='2' wrap='wrap'>
-                                    {files.map((f: CustomFile) => <Box className="grow-0" key={f.fileID}><FileListItem file={f} uploadProgress={fileUploadProgress} removeFile={() => removeFile(f.fileID)} /></Box>)}
-                                </Flex>}
+                    <Tiptap
+                        key={channelData.name}
+                        fileProps={{
+                            fileInputRef,
+                            addFile
+                        }}
+                        clearReplyMessage={handleCancelReply}
+                        // placeholder={randomPlaceholder}
+                        replyMessage={selectedMessage}
+                        sessionStorageKey={`tiptap-${channelData.name}`}
+                        onMessageSend={sendMessage}
+                        messageSending={loading}
+                        slotBefore={<Flex direction='column' justify='center' hidden={!selectedMessage && !files.length}>
+                            {selectedMessage && <PreviousMessagePreview selectedMessage={selectedMessage} />}
+                            {files && files.length > 0 && <Flex gap='2' width='100%' align='end' px='2' p='2' wrap='wrap'>
+                                {files.map((f: CustomFile) => <Box className="grow-0" key={f.fileID}><FileListItem file={f} uploadProgress={fileUploadProgress} removeFile={() => removeFile(f.fileID)} /></Box>)}
                             </Flex>}
-                        />
-                    </Suspense>
+                        </Flex>}
+                    />
                 }
                 {channelData && !isLoading && <>
                     {channelData.is_archived == 0 && !isUserInChannel && channelData.type !== 'Open' && !isDM &&

raven-app/src/components/feature/chat/ChatStream/ChatStream.tsx

@@ -119,7 +119,7 @@ const ChatStream = ({ replyToMessage }: Props) => {
             {!isLoading && !hasOlderMessages && <ChannelHistoryFirstMessage channelID={channelID ?? ''} />}
             {isLoading && <ChatStreamLoader />}
             {error && <ErrorBanner error={error} />}
-            <div className={clsx('flex flex-col pb-4 z-50 transition-opacity duration-400 ease-in-out', isLoading ? 'opacity-0' : 'opacity-100')}>
+            <div className={clsx('flex flex-col pb-4 z-50 transition-opacity duration-400 ease-ease-out-cubic', isLoading ? 'opacity-0' : 'opacity-100')}>
                 {messages?.map(message => {
                     if (message.message_type === 'date') {
                         return <DateSeparator key={`date-${message.creation}`} id={`date-${message.creation}`} className='p-2 z-10 relative'>

raven-app/src/components/feature/chat/ChatStream/useChatStream.ts

@@ -92,25 +92,25 @@ const useChatStream = (scrollRef: MutableRefObject<HTMLDivElement | null>) => {
      * Need to scroll down twice because the scrollHeight is not updated immediately after the first scroll
      */
     useLayoutEffect(() => {
-        if (done) {
+        // if (done) {
 
-            setTimeout(() => {
-                scrollRef.current?.scroll({
-                    top: scrollRef.current?.scrollHeight,
-                    // behavior: 'smooth',
-                })
-            }, 50)
+        setTimeout(() => {
+            scrollRef.current?.scroll({
+                top: scrollRef.current?.scrollHeight,
+                // behavior: 'smooth',
+            })
+        }, 50)
 
-            setTimeout(() => {
-                scrollRef.current?.scroll({
-                    top: scrollRef.current?.scrollHeight,
-                    // behavior: 'smooth',
-                })
-            }, 200)
+        setTimeout(() => {
+            scrollRef.current?.scroll({
+                top: scrollRef.current?.scrollHeight,
+                // behavior: 'smooth',
+            })
+        }, 200)
 
 
-            scrollRef.current?.scrollTo(0, scrollRef.current?.scrollHeight)
-        }
+        scrollRef.current?.scrollTo(0, scrollRef.current?.scrollHeight)
+        // }
     }, [done, channelID])
 
 

raven-app/src/components/feature/command-palette/CommandPalette.tsx

@@ -8,9 +8,9 @@ import { useNavigate } from 'react-router-dom'
 import { UserContext } from '../../../utils/auth/UserProvider'
 import { BiSearch, BiX } from 'react-icons/bi'
 import { UserListContext } from '@/utils/users/UserListProvider'
-import { ActiveUsersContext } from '@/utils/users/ActiveUsersProvider'
 import { ModalTypes, useModalManager } from '@/hooks/useModalManager'
 import { Flex, IconButton, Box, Text, Link } from '@radix-ui/themes'
+import useFetchActiveUsers from '@/hooks/fetchers/useFetchActiveUsers'
 
 interface CommandPaletteProps {
     isOpen: boolean,
@@ -37,7 +37,11 @@ export const CommandPalette = ({ isOpen, onClose }: CommandPaletteProps) => {
     const isHome = activePage === ''
     const debouncedText = useDebounce(inputValue, 200)
     const { currentUser } = useContext(UserContext)
-    const activeUsers = useContext(ActiveUsersContext)
+
+    const { data } = useFetchActiveUsers()
+
+    const activeUsers = data?.message ?? []
+
     const { call, reset } = useFrappePostCall<{ message: string }>("raven.api.raven_channel.create_direct_message_channel")
     let navigate = useNavigate()
 

raven-app/src/components/feature/direct-messages/DirectMessageList.tsx

@@ -24,7 +24,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
 
     const ref = useRef<HTMLDivElement>(null)
 
-    const [height, setHeight] = useState(ref?.current?.clientHeight ?? 0)
+    const [height, setHeight] = useState(ref?.current?.clientHeight ?? showData ? (dm_channels.length + extra_users.length) * (34.79) : 0)
 
     useLayoutEffect(() => {
         setHeight(ref.current?.clientHeight ?? 0)
@@ -48,7 +48,7 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
                     style={{
                         height: showData ? height : 0
                     }}>
-                    <div ref={ref} className="flex gap-1 flex-col">
+                    <div ref={ref} className="flex gap-1 flex-col fade-in">
                         <DirectMessageItemList unread_count={unread_count} />
                         {extra_users && extra_users.length ? <ExtraUsersItemList /> : null}
                     </div>

raven-app/src/components/layout/Sidebar/SidebarComp.tsx

@@ -51,7 +51,7 @@ interface SidebarGroupListProps extends FlexProps {
 export const SidebarGroupList = ({ children, ...props }: SidebarGroupListProps) => {
 
     return (
-        <Flex gap='1' direction='column' {...props} className={clsx(`transition-all ease-in-out duration-200 overflow-hidden`, props.className)}>
+        <Flex gap='1' direction='column' {...props} className={clsx(`transition-all ease-ease-out-cubic duration-200 overflow-hidden`, props.className)}>
             {children}
         </Flex>
     )
@@ -147,7 +147,7 @@ export const SidebarViewMoreButton = ({ expanded, onClick, ...props }: SidebarVi
             radius='large'
             onClick={onClick}
             {...props}
-            className={clsx('cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3 invisible group-hover:visible ease-in-out')}
+            className={clsx('cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent hover:bg-gray-3 invisible group-hover:visible ease-ease')}
         >
             {expanded ? <FiChevronDown size='16' /> : <FiChevronRight size='16' />}
         </IconButton>