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

Release v2.0.5

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "raven-ui",
   "private": true,
   "license": "AGPL-3.0-only",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/components/feature/channel-groups/UnreadList.tsx

@@ -101,7 +101,6 @@ const UnreadSectionActions = ({ channelIDs }: { channelIDs: string[] }) => {
 
     const { mutate } = useSWRConfig()
 
-    const [isOpen, setIsOpen] = useState(false)
     const { call } = useFrappePostCall('raven.api.raven_channel.mark_all_messages_as_read')
     const handleMarkAllAsRead = () => {
         call({
@@ -151,27 +150,18 @@ const UnreadSectionActions = ({ channelIDs }: { channelIDs: string[] }) => {
         }).catch(() => {
             toast.error('Failed to mark all messages as read')
         })
-        setIsOpen(false)
     }
 
     return (
-        <DropdownMenu.Root onOpenChange={(open) => setIsOpen(open)}>
+        <DropdownMenu.Root>
             <DropdownMenu.Trigger>
                 <IconButton
                     aria-label={__("Options")}
                     title={__("Options")}
                     variant="soft"
                     size="1"
                     radius="large"
-                    className={clsx(
-                        'cursor-pointer transition-all text-gray-10 dark:text-gray-300 bg-transparent',
-                        'sm:hover:bg-gray-3',
-                        {
-                            'sm:invisible sm:group-hover:visible': !isOpen,
-                            'sm:visible': isOpen, // Ensure it's visible when the dropdown is open
-                        },
-                        'ease-ease',
-                        'outline-none'
+                    className={clsx('transition-all ease-ease text-gray-10 bg-transparent hover:bg-gray-3 hover:text-gray-12'
                     )}>
                     <BiDotsVerticalRounded />
                 </IconButton>

frontend/src/components/feature/channels/ChannelList.tsx

@@ -1,9 +1,9 @@
 import { SidebarGroup, SidebarGroupItem, SidebarGroupLabel, SidebarGroupList, SidebarItem } from "../../layout/Sidebar/SidebarComp"
 import { SidebarBadge, SidebarViewMoreButton } from "../../layout/Sidebar/SidebarComp"
 import { CreateChannelButton } from "./CreateChannelModal"
-import { useContext, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from "react"
 import { ChannelIcon } from "@/utils/layout/channelIcon"
-import { ContextMenu, Flex, Text } from "@radix-ui/themes"
+import { ContextMenu, DropdownMenu, Flex, IconButton, Text } from "@radix-ui/themes"
 import { useLocation, useParams } from "react-router-dom"
 import { useStickyState } from "@/hooks/useStickyState"
 import useCurrentRavenUser from "@/hooks/useCurrentRavenUser"
@@ -12,6 +12,10 @@ import { FrappeConfig, FrappeContext } from "frappe-react-sdk"
 import { RavenUser } from "@/types/Raven/RavenUser"
 import { __ } from "@/utils/translations"
 import { ChannelWithUnreadCount } from "@/components/layout/Sidebar/useGetChannelUnreadCounts"
+import { useAtom } from "jotai"
+import { showOnlyMyChannelsAtom } from "@/components/layout/Sidebar/SidebarBody"
+import clsx from "clsx"
+import { BiDotsVerticalRounded } from "react-icons/bi"
 
 interface ChannelListProps {
     channels: ChannelWithUnreadCount[]
@@ -48,6 +52,7 @@ export const ChannelList = ({ channels }: ChannelListProps) => {
                     </Flex>
                     <Flex align='center' gap='1'>
                         <CreateChannelButton />
+                        <ChannelListActions />
                         <SidebarViewMoreButton onClick={toggle} expanded={showData} />
                     </Flex>
                 </Flex>
@@ -157,4 +162,38 @@ const PinButton = ({ channelID }: { channelID: string }) => {
         {__("Pin")}
     </ContextMenu.Item>
 
+}
+
+const ChannelListActions = () => {
+
+    const [showOnlyMyChannels, setShowOnlyMyChannels] = useAtom(showOnlyMyChannelsAtom)
+
+    const showAllChannels = useCallback(() => {
+        setShowOnlyMyChannels(false)
+    }, [setShowOnlyMyChannels])
+
+    const hideNonMemberChannels = useCallback(() => {
+        setShowOnlyMyChannels(true)
+    }, [setShowOnlyMyChannels])
+
+    return (
+        <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+                <IconButton
+                    aria-label={__("Options")}
+                    title={__("Options")}
+                    variant="soft"
+                    size="1"
+                    radius="large"
+                    className={clsx('transition-all ease-ease text-gray-10 bg-transparent hover:bg-gray-3 hover:text-gray-12'
+                    )}>
+                    <BiDotsVerticalRounded />
+                </IconButton>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+                {showOnlyMyChannels ? <DropdownMenu.Item onClick={showAllChannels}>Show All Channels</DropdownMenu.Item> :
+                    <DropdownMenu.Item onClick={hideNonMemberChannels}>Show Only My Channels</DropdownMenu.Item>}
+            </DropdownMenu.Content>
+        </DropdownMenu.Root>
+    )
 }

frontend/src/components/feature/chat/ChatInput/EmojiSuggestion.tsx

@@ -31,7 +31,7 @@ async function search(value: string, maxResults: number = 10): Promise<EmojiType
     return results
 }
 
-function getTopFavoriteEmojis(maxResults: number = 10): EmojiType[] {
+export function getTopFavoriteEmojis(maxResults: number = 10): EmojiType[] {
 
     // ID's of emojis
 

frontend/src/components/feature/chat/ChatInput/FileInput/useFileUpload.ts

@@ -2,6 +2,9 @@ import { CustomFile } from '@/components/feature/file-upload/FileDrop'
 import { useContext, useRef, useState } from 'react'
 import { Message } from '../../../../../../../types/Messaging/Message'
 import { FrappeConfig, FrappeContext } from 'frappe-react-sdk'
+import { RavenMessage } from '@/types/RavenMessaging/RavenMessage'
+import { toast } from 'sonner'
+import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 
 
 export const fileExt = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF']
@@ -43,10 +46,10 @@ export default function useFileUpload(channelID: string, selectedMessage?: Messa
     })
   }
 
-  const uploadFiles = async () => {
+  const uploadFiles = async (): Promise<RavenMessage[]> => {
     const newFiles = [...filesStateRef.current]
     if (newFiles.length > 0) {
-      const promises = newFiles.map(async (f: CustomFile) => {
+      const promises: Promise<RavenMessage | null>[] = newFiles.map(async (f: CustomFile) => {
         return file.uploadFile(f,
           {
             isPrivate: true,
@@ -69,7 +72,7 @@ export default function useFileUpload(channelID: string, selectedMessage?: Messa
             }))
           },
           'raven.api.upload_file.upload_file_with_message')
-          .then(() => {
+          .then((res: { data: { message: RavenMessage } }) => {
             setFiles(files => files.filter(file => file.fileID !== f.fileID))
             setFileUploadProgress(p => ({
               ...p,
@@ -78,24 +81,33 @@ export default function useFileUpload(channelID: string, selectedMessage?: Messa
                 isComplete: true,
               },
             }))
+            return res.data.message
           })
-          .catch(() => {
+          .catch((e) => {
             setFileUploadProgress(p => {
               const newProgress = { ...p }
               delete newProgress[f.fileID]
               return newProgress
             })
+
+            toast.error("There was an error uploading the file " + f.name, {
+              description: getErrorMessage(e)
+            })
+
+            return null
           })
       })
 
       return Promise.all(promises)
-        .then(() => {
+        .then((res) => {
           setFiles([])
+          return res.filter((file) => file !== null)
         }).catch((e) => {
           console.error(e)
+          return []
         })
     } else {
-      return Promise.resolve()
+      return Promise.resolve([])
     }
   }
 

frontend/src/components/feature/chat/ChatInput/Tiptap.tsx

@@ -1,7 +1,7 @@
 import { BubbleMenu, EditorContent, EditorContext, Extension, ReactRenderer, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline'
-import React, { Suspense, lazy, useContext, useEffect, useMemo, useRef } from 'react'
+import React, { Suspense, forwardRef, lazy, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react'
 import { TextFormattingMenu } from './TextFormattingMenu'
 import Highlight from '@tiptap/extension-highlight'
 import Link from '@tiptap/extension-link'
@@ -26,7 +26,7 @@ import json from 'highlight.js/lib/languages/json'
 import python from 'highlight.js/lib/languages/python'
 import { Plugin } from 'prosemirror-state'
 import { Box, Flex, IconButton } from '@radix-ui/themes'
-import { useSessionStickyState } from '@/hooks/useStickyState'
+import { useStickyState } from '@/hooks/useStickyState'
 import { Message } from '../../../../../../types/Messaging/Message'
 import Image from '@tiptap/extension-image'
 import { EmojiSuggestion } from './EmojiSuggestion'
@@ -66,6 +66,7 @@ type TiptapEditorProps = {
     channelMembers?: ChannelMembers,
     channelID?: string,
     onUserType?: () => void,
+    onUpArrow?: () => void,
 }
 
 export const UserMention = Mention.extend({
@@ -92,7 +93,7 @@ export interface MemberSuggestions extends UserFields {
     is_member: boolean
 }
 
-const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, channelMembers, onUserType, channelID, replyMessage, clearReplyMessage, placeholder = 'Type a message...', messageSending, sessionStorageKey = 'tiptap-editor', disableSessionStorage = false, defaultText = '' }: TiptapEditorProps) => {
+const Tiptap = forwardRef(({ isEdit, slotBefore, fileProps, onMessageSend, onUpArrow, channelMembers, onUserType, channelID, replyMessage, clearReplyMessage, placeholder = 'Type a message...', messageSending, sessionStorageKey = 'tiptap-editor', disableSessionStorage = false, defaultText = '' }: TiptapEditorProps, ref) => {
 
     const { enabledUsers } = useContext(UserListContext)
 
@@ -221,6 +222,13 @@ const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, channelMembers,
                         () => commands.splitBlock(),
                     ]);
                 },
+                'ArrowUp': () => {
+                    // If the editor is empty, call the onUpArrow function
+                    if (this.editor.isEmpty) {
+                        onUpArrow?.()
+                    }
+                    return false
+                }
             };
         },
         addProseMirrorPlugins() {
@@ -477,7 +485,7 @@ const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, channelMembers,
         TimestampRenderer
     ]
 
-    const [content, setContent] = useSessionStickyState(defaultText, sessionStorageKey, disableSessionStorage)
+    const [content, setContent] = useStickyState(defaultText, sessionStorageKey, disableSessionStorage)
 
     const editor = useEditor({
         extensions,
@@ -506,6 +514,12 @@ const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, channelMembers,
         }
     }, [replyMessage, editor, isMobile, isEdit])
 
+    useImperativeHandle(ref, () => ({
+        focusEditor: () => {
+            editor?.chain().focus().run()
+        }
+    }))
+
 
     if (isMobile) {
         return <Box className={clsx('pt-2 pb-8 w-full bg-white dark:bg-gray-2 z-50 border-t border-t-gray-3 dark:border-t-gray-3',
@@ -565,6 +579,6 @@ const Tiptap = ({ isEdit, slotBefore, fileProps, onMessageSend, channelMembers,
 
 
 
-}
+})
 
 export default Tiptap

frontend/src/components/feature/chat/ChatInput/useSendMessage.ts

@@ -1,9 +1,10 @@
 import { useFrappePostCall } from 'frappe-react-sdk'
 import { Message } from '../../../../../../types/Messaging/Message'
+import { RavenMessage } from '@/types/RavenMessaging/RavenMessage'
 
-export const useSendMessage = (channelID: string, noOfFiles: number, uploadFiles: () => Promise<void>, handleCancelReply: VoidFunction, selectedMessage?: Message | null) => {
+export const useSendMessage = (channelID: string, noOfFiles: number, uploadFiles: () => Promise<RavenMessage[]>, onMessageSent: (messages: RavenMessage[]) => void, selectedMessage?: Message | null) => {
 
-    const { call, loading } = useFrappePostCall('raven.api.raven_message.send_message')
+    const { call, loading } = useFrappePostCall<{ message: RavenMessage }>('raven.api.raven_message.send_message')
 
     const sendMessage = async (content: string, json?: any): Promise<void> => {
 
@@ -16,15 +17,15 @@ export const useSendMessage = (channelID: string, noOfFiles: number, uploadFiles
                 is_reply: selectedMessage ? 1 : 0,
                 linked_message: selectedMessage ? selectedMessage.name : null
             })
-                .then(() => handleCancelReply())
+                .then((res) => onMessageSent([res.message]))
                 .then(() => uploadFiles())
-                .then(() => {
-                    handleCancelReply()
+                .then((res) => {
+                    onMessageSent(res)
                 })
         } else if (noOfFiles > 0) {
             return uploadFiles()
-                .then(() => {
-                    handleCancelReply()
+                .then((res) => {
+                    onMessageSent(res)
                 })
         } else {
             return Promise.resolve()

frontend/src/components/feature/chat/ChatMessage/ActionModals/EditMessageModal.tsx

@@ -1,7 +1,7 @@
 import { useFrappeUpdateDoc } from "frappe-react-sdk"
 import { Suspense, lazy, useEffect } from "react"
 import { ErrorBanner } from "../../../../layout/AlertBanner/ErrorBanner"
-import { IconButton, Dialog, Flex, Text } from "@radix-ui/themes"
+import { IconButton, Dialog, Flex, Text, VisuallyHidden } from "@radix-ui/themes"
 import { BiX } from "react-icons/bi"
 import { Loader } from "@/components/common/Loader"
 import { TextMessage } from "../../../../../../../types/Messaging/Message"
@@ -34,6 +34,9 @@ export const EditMessageModal = ({ onClose, message }: EditMessageModalProps) =>
         <>
             <Flex justify={'between'}>
                 <Dialog.Title>Edit Message</Dialog.Title>
+                <VisuallyHidden>
+                    <Dialog.Description>Type in the new message text</Dialog.Description>
+                </VisuallyHidden>
                 <Dialog.Close disabled={updatingDoc} className="invisible sm:visible">
                     <IconButton size='1' variant="soft" color="gray">
                         <BiX size='18' />

frontend/src/components/feature/chat/ChatMessage/ActionModals/ForwardMessageModal.tsx

@@ -1,4 +1,4 @@
-import { Flex, Dialog, IconButton, Box, Button } from "@radix-ui/themes"
+import { Flex, Dialog, IconButton, Box, Button, VisuallyHidden } from "@radix-ui/themes"
 import { Suspense } from "react"
 import { BiX } from "react-icons/bi"
 import { Message } from "../../../../../../../types/Messaging/Message"
@@ -61,6 +61,9 @@ const ForwardMessageModal = ({ onClose, message }: ForwardMessageModalProps) =>
             <form onSubmit={handleSubmit(onSubmit)}>
                 <Flex justify={'between'}>
                     <Dialog.Title>Forward Message</Dialog.Title>
+                    <VisuallyHidden>
+                        <Dialog.Description>Forward message to a user or channel</Dialog.Description>
+                    </VisuallyHidden>
                     <Dialog.Close onClick={handleClose}>
                         <IconButton size='1' variant="soft" color="gray">
                             <BiX size='18' />

frontend/src/components/feature/chat/ChatMessage/LeftRightLayout/LeftRightLayout.tsx

@@ -127,7 +127,7 @@ export const LeftRightLayout = ({ message, user, isActive, isHighlighted, onRepl
 
                                 {message_reactions?.length &&
                                     <MessageReactions
-                                        messageID={name}
+                                        message={message}
                                         message_reactions={message_reactions}
                                     />
                                 }

frontend/src/components/feature/chat/ChatMessage/MessageActions/AttachFileToDocument.tsx

@@ -11,13 +11,14 @@ type Props = {
     file: string
 }
 
-export const useAttachFileToDocument = () => {
+export const useAttachFileToDocument = (onModalClose?: VoidFunction) => {
 
     const [message, setMessage] = useState<null | Message>(null)
 
     const onClose = useCallback(() => {
         setMessage(null)
-    }, [])
+        onModalClose?.()
+    }, [onModalClose])
 
     return {
         message,

frontend/src/components/feature/chat/ChatMessage/MessageActions/DeleteMessage.tsx

@@ -4,13 +4,14 @@ import { AlertDialog } from "@radix-ui/themes"
 import { DIALOG_CONTENT_CLASS } from "@/utils/layout/dialog"
 import { DeleteMessageModal } from "@/components/feature/chat/ChatMessage/ActionModals/DeleteMessageModal"
 
-export const useDeleteMessage = () => {
+export const useDeleteMessage = (onModalClose?: VoidFunction) => {
 
     const [message, setMessage] = useState<null | Message>(null)
 
     const onClose = useCallback(() => {
         setMessage(null)
-    }, [])
+        onModalClose?.()
+    }, [onModalClose])
 
     return {
         message,