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

Release v1.6.5

frontend/package.json

@@ -2,7 +2,7 @@
   "name": "raven-ui",
   "private": true,
   "license": "AGPL-3.0-only",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -11,7 +11,7 @@
     "copy-html-entry": "cp ../raven/public/raven/index.html ../raven/www/raven.html"
   },
   "dependencies": {
-    "@radix-ui/themes": "^3.0.5",
+    "@radix-ui/themes": "^3.1.1",
     "@tiptap/extension-code-block-lowlight": "^2.4.0",
     "@tiptap/extension-highlight": "^2.4.0",
     "@tiptap/extension-image": "^2.4.0",

frontend/src/components/feature/CommandMenu/DMChannelItem.tsx

@@ -4,9 +4,14 @@ import { Command } from "cmdk"
 import { commandMenuOpenAtom } from "./CommandMenu"
 import { useSetAtom } from "jotai"
 import { useNavigate } from "react-router-dom"
+import { useContext } from "react"
+import { UserContext } from "@/utils/auth/UserProvider"
+import { replaceCurrentUserFromDMChannelName } from "@/utils/operations"
+import { Badge, Flex } from "@radix-ui/themes"
 
-const DMChannelItem = ({ channelID, peer_user_id }: { channelID: string, peer_user_id: string }) => {
+const DMChannelItem = ({ channelID, peer_user_id, channelName }: { channelID: string, channelName: string, peer_user_id: string }) => {
 
+    const { currentUser } = useContext(UserContext)
     const user = useGetUser(peer_user_id)
     const navigate = useNavigate()
     const setOpen = useSetAtom(commandMenuOpenAtom)
@@ -16,13 +21,21 @@ const DMChannelItem = ({ channelID, peer_user_id }: { channelID: string, peer_us
         setOpen(false)
     }
 
+    const userName = user?.full_name ?? peer_user_id ?? replaceCurrentUserFromDMChannelName(channelName, currentUser)
+
     return <Command.Item
-        keywords={[user?.full_name ?? peer_user_id]}
-        value={peer_user_id}
+        keywords={[userName]}
+        value={peer_user_id ?? channelID}
         onSelect={onSelect}>
-        <UserAvatar src={user?.user_image} alt={user?.full_name ?? peer_user_id}
-            isBot={user?.type === 'Bot'} />
-        {user?.full_name}
+        <Flex gap='2' align='center' justify={'between'} width='100%'>
+            <Flex gap='2' align='center'>
+                <UserAvatar src={user?.user_image} alt={userName}
+                    isBot={user?.type === 'Bot'} />
+                {userName}
+            </Flex>
+            {user && !user?.enabled && <Badge color='gray' variant="soft">Disabled</Badge>}
+            {!user && <Badge color='gray' variant="soft">Deleted</Badge>}
+        </Flex>
     </Command.Item>
 }
 

frontend/src/components/feature/CommandMenu/UserList.tsx

@@ -9,7 +9,7 @@ import { useNavigate } from 'react-router-dom'
 import { useSetAtom } from 'jotai'
 import { commandMenuOpenAtom } from './CommandMenu'
 import { useFrappePostCall } from 'frappe-react-sdk'
-import { Flex } from '@radix-ui/themes'
+import { Badge, Flex } from '@radix-ui/themes'
 import { Loader } from '@/components/common/Loader'
 import { toast } from 'sonner'
 import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
@@ -24,7 +24,7 @@ const UserList = () => {
 
     return (
         <Command.Group heading="Members">
-            {dm_channels.map((channel) => <DMChannelItem key={channel.name} channelID={channel.name} peer_user_id={channel.peer_user_id} />)}
+            {dm_channels.map((channel) => <DMChannelItem key={channel.name} channelID={channel.name} channelName={channel.channel_name} peer_user_id={channel.peer_user_id} />)}
             {usersWithoutChannels.map((user) => <UserWithoutDMItem key={user.name} userID={user.name} />)}
         </Command.Group>
     )
@@ -63,6 +63,7 @@ const UserWithoutDMItem = ({ userID }: { userID: string }) => {
                 {user?.full_name}
             </Flex>
             {loading ? <Loader /> : null}
+            {!user?.enabled ? <Badge color='gray' variant='soft'>Disabled</Badge> : null}
         </Flex>
     </Command.Item>
 }

frontend/src/components/feature/chat-header/DMChannelHeader.tsx

@@ -3,20 +3,24 @@ import { useIsUserActive } from "@/hooks/useIsUserActive"
 import { DMChannelListItem } from "@/utils/channel/ChannelListProvider"
 import { Badge, Flex, Heading } from "@radix-ui/themes"
 import { UserAvatar } from "@/components/common/UserAvatar"
-import { useMemo } from "react"
+import { useContext, useMemo } from "react"
 import useFetchChannelMembers from "@/hooks/fetchers/useFetchChannelMembers"
 import ChannelHeaderMenu from "./ChannelHeaderMenu"
 import { BiChevronLeft } from "react-icons/bi"
 import { Link } from "react-router-dom"
 import { useGetUser } from "@/hooks/useGetUser"
 import useIsUserOnLeave from "@/hooks/fetchers/useIsUserOnLeave"
+import { UserContext } from "@/utils/auth/UserProvider"
+import { replaceCurrentUserFromDMChannelName } from "@/utils/operations"
 
 interface DMChannelHeaderProps {
     channelData: DMChannelListItem,
 }
 
 export const DMChannelHeader = ({ channelData }: DMChannelHeaderProps) => {
 
+    const { currentUser } = useContext(UserContext)
+
     const { channelMembers } = useFetchChannelMembers(channelData.name)
 
     // There are two people in a DM channel, the user (you) and the peer (the other person)
@@ -43,6 +47,8 @@ export const DMChannelHeader = ({ channelData }: DMChannelHeaderProps) => {
 
     const isUserOnLeave = useIsUserOnLeave(peer)
 
+    const userName = fullName ?? peer ?? replaceCurrentUserFromDMChannelName(channelData.channel_name, currentUser)
+
     return (
         <PageHeader>
             <Flex gap='3' align='center'>
@@ -51,7 +57,7 @@ export const DMChannelHeader = ({ channelData }: DMChannelHeaderProps) => {
                 </Link>
                 <UserAvatar
                     key={peer}
-                    alt={fullName}
+                    alt={userName}
                     src={userImage}
                     isActive={isActive}
                     availabilityStatus={user?.availability_status}
@@ -60,7 +66,9 @@ export const DMChannelHeader = ({ channelData }: DMChannelHeaderProps) => {
                     size='2' />
                 <Heading size='5'>
                     <div className="flex items-center gap-2">
-                        {fullName}
+                        {userName}
+                        {!user && <Badge color='gray' variant='soft'>Deleted</Badge>}
+                        {user?.enabled === 0 && <Badge color='gray' variant='soft'>Disabled</Badge>}
                         {user?.custom_status && <Badge color='gray' className='font-semibold px-1.5 py-0.5'>{user.custom_status}</Badge>}
                         {isUserOnLeave && <Badge color="yellow" variant="surface">On Leave</Badge>}
                         {isBot && <Badge color='gray' className='font-semibold px-1.5 py-0.5'>Bot</Badge>}

frontend/src/components/feature/chat/ChatMessage/MessageActions/QuickActions/EmojiPickerButton.tsx

@@ -1,4 +1,4 @@
-import { lazy, useState, Suspense } from 'react'
+import { lazy, Suspense } from 'react'
 import { Box, Flex, IconButton, Popover, Portal, Tooltip } from '@radix-ui/themes'
 import { DIALOG_CONTENT_CLASS } from '@/utils/layout/dialog'
 import { BiSmile } from 'react-icons/bi'
@@ -8,15 +8,15 @@ import { QUICK_ACTION_BUTTON_CLASS } from './QuickActionButton'
 const EmojiPicker = lazy(() => import('@/components/common/EmojiPicker/EmojiPicker'))
 
 interface EmojiPickerButtonProps {
-    saveReaction: (emoji: string) => void
+    saveReaction: (emoji: string) => void,
+    isOpen: boolean
+    setIsOpen: (open: boolean) => void
 }
 
-export const EmojiPickerButton = ({ saveReaction }: EmojiPickerButtonProps) => {
-
-    const [open, setOpen] = useState(false)
+export const EmojiPickerButton = ({ saveReaction, isOpen, setIsOpen }: EmojiPickerButtonProps) => {
 
     const onClose = () => {
-        setOpen(false)
+        setIsOpen(false)
     }
 
     const onEmojiClick = (emoji: string) => {
@@ -25,7 +25,7 @@ export const EmojiPickerButton = ({ saveReaction }: EmojiPickerButtonProps) => {
     }
 
     return (
-        <Popover.Root open={open} onOpenChange={setOpen}>
+        <Popover.Root open={isOpen} onOpenChange={setIsOpen}>
             <Flex>
                 <Tooltip content='find another reaction'>
                     <Popover.Trigger>

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

@@ -8,10 +8,17 @@ import { EmojiPickerButton } from './EmojiPickerButton'
 import { UserContext } from '@/utils/auth/UserProvider'
 import { AiOutlineEdit } from 'react-icons/ai'
 import { LuForward, LuReply } from 'react-icons/lu'
+import { toast } from 'sonner'
+import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner'
 
 const QUICK_EMOJIS = ['👍', '✅', '👀', '🎉']
 
-export const QuickActions = ({ message, onReply, onEdit, onForward }: MessageContextMenuProps) => {
+
+interface QuickActionsProps extends MessageContextMenuProps {
+    isEmojiPickerOpen: boolean,
+    setIsEmojiPickerOpen: (open: boolean) => void
+}
+export const QuickActions = ({ message, onReply, onEdit, onForward, isEmojiPickerOpen, setIsEmojiPickerOpen }: QuickActionsProps) => {
 
     const { currentUser } = useContext(UserContext)
 
@@ -41,10 +48,13 @@ export const QuickActions = ({ message, onReply, onEdit, onForward }: MessageCon
     }
 
     const onEmojiReact = (emoji: string) => {
-        // TODO: Show error toast
         call.post('raven.api.reactions.react', {
             message_id: message?.name,
             reaction: emoji
+        }).catch((err) => {
+            toast.error("Could not react to message.", {
+                description: getErrorMessage(err)
+            })
         })
     }
 
@@ -77,7 +87,10 @@ export const QuickActions = ({ message, onReply, onEdit, onForward }: MessageCon
                     </QuickActionButton>
                 })}
 
-                <EmojiPickerButton saveReaction={onEmojiReact} />
+                <EmojiPickerButton
+                    isOpen={isEmojiPickerOpen}
+                    setIsOpen={setIsEmojiPickerOpen}
+                    saveReaction={onEmojiReact} />
 
                 {isOwner && message.message_type === 'Text' ? <QuickActionButton
                     onClick={onEdit}

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

@@ -94,6 +94,8 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
         }
     }, [replied_message_details])
 
+    const [isEmojiPickerOpen, setEmojiPickerOpen] = useState(false)
+
     return (
         <Box className='relative'>
             <ContextMenu.Root>
@@ -120,7 +122,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
                             px-1
                             py-2
                             sm:p-2
-                            rounded-md`, isHighlighted ? 'bg-yellow-50 hover:bg-yellow-50 dark:bg-yellow-300/20 dark:hover:bg-yellow-300/20' : !isDesktop && isHovered ? 'bg-gray-2 dark:bg-gray-3' : '')}>
+                            rounded-md`, isHighlighted ? 'bg-yellow-50 hover:bg-yellow-50 dark:bg-yellow-300/20 dark:hover:bg-yellow-300/20' : !isDesktop && isHovered ? 'bg-gray-2 dark:bg-gray-3' : '', isEmojiPickerOpen ? 'bg-gray-2 dark:bg-gray-3' : '')}>
                     <Flex className='gap-2.5 sm:gap-3 items-start'>
                         <MessageLeftElement message={message} user={user} isActive={isActive} />
                         <Flex direction='column' className='gap-0.5' justify='center' width='100%'>
@@ -159,10 +161,12 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
                                 />
                             }
                         </Flex>
-                        {isHoveredDebounced &&
+                        {(isHoveredDebounced || isEmojiPickerOpen) &&
                             <QuickActions
                                 message={message}
                                 onDelete={onDelete}
+                                isEmojiPickerOpen={isEmojiPickerOpen}
+                                setIsEmojiPickerOpen={setEmojiPickerOpen}
                                 onEdit={onEdit}
                                 onReply={onReply}
                                 onForward={onForward}

frontend/src/components/feature/chat/ChatMessage/Renderers/DoctypeLinkRenderer.tsx

@@ -177,7 +177,7 @@ const DoctypeCard = ({ data, doctype, copyLink, openLink }: {
                 <DataList.Root size='2' className="gap-1 pl-0.5">
                     {
                         data && Object.keys(removePreviewFields(data))?.map((item, index) => (
-                            <DataList.Item align='center'>
+                            <DataList.Item align='center' key={item}>
                                 <DataList.Label minWidth="88px" className="font-semibold pr-2">
                                     {item}
                                 </DataList.Label>

frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx

@@ -3,26 +3,12 @@ import { getStatusText } from '@/components/feature/userSettings/AvailabilitySta
 import { useGetUser } from '@/hooks/useGetUser';
 import { useIsUserActive } from '@/hooks/useIsUserActive';
 import { Flex, HoverCard, Link, Text } from '@radix-ui/themes';
-import Mention from '@tiptap/extension-mention'
-import { NodeViewRendererProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { NodeViewRendererProps, NodeViewWrapper } from "@tiptap/react";
 import { BsFillCircleFill } from 'react-icons/bs';
 import { Link as RouterLink } from 'react-router-dom';
 
-export const CustomUserMention = Mention.extend({
-    name: 'userMention',
-    addNodeView() {
-        return ReactNodeViewRenderer(UserMentionRenderer)
-    }
-})
 
-export const CustomChannelMention = Mention.extend({
-    name: 'channelMention',
-    addNodeView() {
-        return ReactNodeViewRenderer(ChannelMentionRenderer)
-    }
-})
-
-const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
+export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
 
     const user = useGetUser(node.attrs.id)
     const isActive = useIsUserActive(node.attrs.id)
@@ -68,14 +54,13 @@ const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
 
 
 
-const ChannelMentionRenderer = ({ node }: NodeViewRendererProps) => {
-
+export const ChannelMentionRenderer = ({ node }: NodeViewRendererProps) => {
 
     return (
         <NodeViewWrapper as={'span'}>
             <Link asChild>
-                <RouterLink to={`/channels/${node.attrs.id}`}>
-                    @{node.attrs.label}
+                <RouterLink to={`/channel/${node.attrs.id}`}>
+                    #{node.attrs.label}
                 </RouterLink>
             </Link>
         </NodeViewWrapper>

frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx

@@ -1,4 +1,4 @@
-import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
+import { EditorContent, EditorContext, ReactNodeViewRenderer, useEditor } from '@tiptap/react'
 import { TextMessage } from '../../../../../../../../types/Messaging/Message'
 import { UserFields } from '@/utils/users/UserListProvider'
 import { BoxProps } from '@radix-ui/themes/dist/cjs/components/box'
@@ -14,13 +14,15 @@ import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
 import { common, createLowlight } from 'lowlight'
 import python from 'highlight.js/lib/languages/python'
 import { CustomBold } from './Bold'
-import { CustomUserMention } from './Mention'
+import { ChannelMentionRenderer, UserMentionRenderer } from './Mention'
 import { CustomLink, LinkPreview } from './Link'
 import { CustomUnderline } from './Underline'
 import { Image } from '@tiptap/extension-image'
 import { clsx } from 'clsx'
 import Italic from '@tiptap/extension-italic';
 import './tiptap-renderer.styles.css'
+import Mention from '@tiptap/extension-mention'
+import { PluginKey } from '@tiptap/pm/state'
 const lowlight = createLowlight(common)
 
 lowlight.register('html', html)
@@ -29,7 +31,7 @@ lowlight.register('js', js)
 lowlight.register('ts', ts)
 lowlight.register('json', json)
 lowlight.register('python', python)
-interface TiptapRendererProps extends BoxProps {
+type TiptapRendererProps = BoxProps & {
   message: TextMessage,
   user?: UserFields,
   showLinkPreview?: boolean,
@@ -91,7 +93,6 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
         lowlight
       }),
       CustomBold,
-      CustomUserMention,
       CustomLink,
       Italic,
       Image.configure({
@@ -100,8 +101,31 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
         },
         inline: true
       }),
-      // TODO: Add channel mention
-      // CustomChannelMention
+      Mention.extend({
+        name: 'userMention',
+        addNodeView() {
+          return ReactNodeViewRenderer(UserMentionRenderer)
+        }
+      }).configure({
+        suggestion: {
+          char: '@',
+          pluginKey: new PluginKey('userMention'),
+        },
+      }),
+      Mention.extend({
+        name: 'channelMention',
+        HTMLAttributes: {
+          class: 'mention',
+        },
+        addNodeView() {
+          return ReactNodeViewRenderer(ChannelMentionRenderer)
+        }
+      }).configure({
+        suggestion: {
+          char: '#',
+          pluginKey: new PluginKey('channelMention'),
+        },
+      }),
     ]
   })
 

frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/tiptap-renderer.styles.css

@@ -2,4 +2,9 @@
     border-left: 3px solid var(--gray-11);
     padding-left: 0.8rem;
     margin: 1rem;
+}
+
+.tiptap-renderer a,
+.tiptap-renderer .mention {
+    color: var(--accent-11);
 }