From aab7a8cef34f8d4187bdf05cc8a8c373d0fa1847 Mon Sep 17 00:00:00 2001
From: Nikhil Kothari <nik.kothari22@live.com>
Date: Wed, 9 Oct 2024 23:50:02 +0530
Subject: [PATCH 1/2] feat: clicking user mentions takes user to DM channel

---
 .../Renderers/TiptapRenderer/Mention.tsx      | 42 +++++++++++++++++--
 1 file changed, 38 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx b/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
index c4faa2f02..a498dd40d 100644
--- a/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
+++ b/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
@@ -2,10 +2,15 @@ import { UserAvatar } from '@/components/common/UserAvatar';
 import { getStatusText } from '@/components/feature/userSettings/AvailabilityStatus/SetUserAvailabilityMenu';
 import { useGetUser } from '@/hooks/useGetUser';
 import { useIsUserActive } from '@/hooks/useIsUserActive';
-import { Flex, HoverCard, Link, Text } from '@radix-ui/themes';
+import { Badge, Flex, HoverCard, Link, Text } from '@radix-ui/themes';
 import { NodeViewRendererProps, NodeViewWrapper } from "@tiptap/react";
+import { FrappeConfig, FrappeContext } from 'frappe-react-sdk';
 import { BsFillCircleFill } from 'react-icons/bs';
-import { Link as RouterLink } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Link as RouterLink, useNavigate } from 'react-router-dom';
+import { useContext } from 'react';
+import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner';
+import useIsUserOnLeave from '@/hooks/fetchers/useIsUserOnLeave';
 
 
 export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
@@ -16,11 +21,39 @@ export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
     const availabilityStatus = user?.availability_status
     const customStatus = user?.custom_status
 
+    const { call } = useContext(FrappeContext) as FrappeConfig
+
+    const navigate = useNavigate()
+
+    const onClick = () => {
+        if (user) {
+            call.post('raven.api.raven_channel.create_direct_message_channel', {
+                user_id: user?.name
+            }).then((res) => {
+                navigate(`/channel/${res?.message}`)
+            }).catch(err => {
+                toast.error('Could not create a DM channel', {
+                    description: getErrorMessage(err)
+                })
+            })
+        }
+
+    }
+
+    const OnLeaveBadge = ({ userID }: { userID: string }) => {
+        const isOnLeave = useIsUserOnLeave(userID)
+        if (isOnLeave) {
+            return <Badge color="yellow" variant="surface">On Leave</Badge>
+        }
+        return null
+    }
+
+
     return (
         <NodeViewWrapper as={'span'}>
             <HoverCard.Root>
                 <HoverCard.Trigger>
-                    <Link size='2'>
+                    <Link size='2' onClick={onClick} className='cursor-pointer'>
                         @{user?.full_name ?? node.attrs.label}
                     </Link>
                 </HoverCard.Trigger>
@@ -40,7 +73,8 @@ export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
                                     <Text className='text-gray-10' size='1'>Online</Text>
                                 </Flex>}
                             </Flex>
-                            {customStatus ? <Text className='text-gray-11' size='1'>{customStatus}</Text> : user && <Text className='text-gray-11' size='1'>{user?.name}</Text>}
+                            {user && <OnLeaveBadge userID={user.name} />}
+                            {customStatus ? <Text className='text-gray-11' size='2'>{customStatus}</Text> : user && <Text className='text-gray-11' size='1'>{user?.name}</Text>}
                         </Flex>
                     </Flex>
                 </HoverCard.Content>

From 9e8e480ff650e463686e0df86208e907af8db691 Mon Sep 17 00:00:00 2001
From: Nikhil Kothari <nik.kothari22@live.com>
Date: Wed, 9 Oct 2024 23:53:03 +0530
Subject: [PATCH 2/2] chore: added leave badge to main user hover card

---
 frontend/src/components/common/UserLeaveBadge.tsx    | 12 ++++++++++++
 .../feature/chat/ChatMessage/MessageItem.tsx         |  2 ++
 .../ChatMessage/Renderers/TiptapRenderer/Mention.tsx |  9 +--------
 3 files changed, 15 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/components/common/UserLeaveBadge.tsx

diff --git a/frontend/src/components/common/UserLeaveBadge.tsx b/frontend/src/components/common/UserLeaveBadge.tsx
new file mode 100644
index 000000000..209113eff
--- /dev/null
+++ b/frontend/src/components/common/UserLeaveBadge.tsx
@@ -0,0 +1,12 @@
+import useIsUserOnLeave from "@/hooks/fetchers/useIsUserOnLeave"
+import { Badge } from "@radix-ui/themes"
+
+const OnLeaveBadge = ({ userID }: { userID: string }) => {
+    const isOnLeave = useIsUserOnLeave(userID)
+    if (isOnLeave) {
+        return <Badge color="yellow" variant="surface">On Leave</Badge>
+    }
+    return null
+}
+
+export default OnLeaveBadge
\ No newline at end of file
diff --git a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx
index 9f7e9832e..93e7f5364 100644
--- a/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx
+++ b/frontend/src/components/feature/chat/ChatMessage/MessageItem.tsx
@@ -25,6 +25,7 @@ import { useDoubleTap } from 'use-double-tap'
 import useOutsideClick from '@/hooks/useOutsideClick'
 import { getStatusText } from '../../userSettings/AvailabilityStatus/SetUserAvailabilityMenu'
 import { ThreadMessage } from './Renderers/ThreadMessage'
+import OnLeaveBadge from '@/components/common/UserLeaveBadge'
 
 interface MessageBlockProps {
     message: Message,
@@ -325,6 +326,7 @@ export const UserHoverCard = memo(({ user, userID, isActive }: UserProps) => {
                             <Text className='text-gray-10' size='1'>Online</Text>
                         </Flex>}
                     </Flex>
+                    {user && !isBot && <OnLeaveBadge userID={user.name} />}
                     {customStatus ? <Text className='text-gray-11' size='1'>{customStatus}</Text> : user && !isBot && <Text className='text-gray-11' size='1'>{user?.name}</Text>}
                 </Flex>
             </Flex>
diff --git a/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx b/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
index a498dd40d..0f96d727f 100644
--- a/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
+++ b/frontend/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Mention.tsx
@@ -11,6 +11,7 @@ import { Link as RouterLink, useNavigate } from 'react-router-dom';
 import { useContext } from 'react';
 import { getErrorMessage } from '@/components/layout/AlertBanner/ErrorBanner';
 import useIsUserOnLeave from '@/hooks/fetchers/useIsUserOnLeave';
+import OnLeaveBadge from '@/components/common/UserLeaveBadge';
 
 
 export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
@@ -40,14 +41,6 @@ export const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
 
     }
 
-    const OnLeaveBadge = ({ userID }: { userID: string }) => {
-        const isOnLeave = useIsUserOnLeave(userID)
-        if (isOnLeave) {
-            return <Badge color="yellow" variant="surface">On Leave</Badge>
-        }
-        return null
-    }
-
 
     return (
         <NodeViewWrapper as={'span'}>