feat: add option to hide link preview

The-Commit-Company · Apr 12, 2024 · f811d3c · f811d3c
1 parent d3cb771
commit f811d3c
Show file tree

Hide file tree

Showing 10 changed files with 303 additions and 246 deletions.
diff --git a/mobile/src/types/RavenMessaging/RavenMessage.ts b/mobile/src/types/RavenMessaging/RavenMessage.ts
@@ -26,7 +26,7 @@ export interface RavenMessage{
 	/**	Replied Message Details : JSON	*/
 	replied_message_details?: any
 	/**	Message Type : Select	*/
-	message_type?: "Text" | "Image" | "File"
+	message_type?: "Text" | "Image" | "File" | "Poll"
 	/**	Content : Long Text	*/
 	content?: string
 	/**	File : Attach	*/
@@ -49,8 +49,12 @@ export interface RavenMessage{
 	is_edited?: 0 | 1
 	/**	Mentions : Table - Raven Mention	*/
 	mentions?: RavenMention[]
+	/**	Poll ID : Link - Raven Poll	*/
+	poll_id?: string
 	/**	Is Bot Message : Check	*/
 	is_bot_message?: 0 | 1
 	/**	Bot : Link - Raven User	*/
 	bot?: string
+	/**	Hide link preview : Check	*/
+	hide_link_preview?: 0 | 1
 }
diff --git a/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx b/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx
@@ -242,7 +242,7 @@ export const MessageContent = ({ message, user, ...props }: MessageContentProps)
         {message.text ? <TiptapRenderer message={{
             ...message,
             message_type: 'Text'
-        }} user={user} /> : null}
+        }} user={user} showLinkPreview={message.hide_link_preview ? false : true} /> : null}
         {message.message_type === 'Image' && <ImageMessageBlock message={message} user={user} />}
         {message.message_type === 'File' && <FileMessageBlock message={message} user={user} />}
         {message.message_type === 'Poll' && <PollMessageBlock message={message} user={user} />}

diff --git a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Link.tsx b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/Link.tsx
@@ -1,9 +1,9 @@
-import { Skeleton } from '@/components/common/Skeleton';
-import { Box, Flex, Text } from '@radix-ui/themes';
+import { Box, Flex, IconButton, Text, Tooltip } from '@radix-ui/themes';
 import TiptapLink from '@tiptap/extension-link'
 import { mergeAttributes, useCurrentEditor } from "@tiptap/react";
-import { useFrappeGetCall } from 'frappe-react-sdk';
+import { useFrappeGetCall, useFrappePostCall } from 'frappe-react-sdk';
 import { memo, useMemo } from 'react';
+import { BiX } from 'react-icons/bi';
 
 export const CustomLink = TiptapLink.extend({
     renderHTML({ HTMLAttributes }) {
@@ -19,7 +19,6 @@ export const CustomLink = TiptapLink.extend({
     protocols: ['mailto', 'https', 'http'],
     openOnClick: false,
 })
-
 export type LinkPreviewDetails = {
     title: string,
     description: string,
@@ -29,7 +28,7 @@ export type LinkPreviewDetails = {
     site_name: string
 }
 
-export const LinkPreview = memo(({ isScrolling }: { isScrolling?: boolean }) => {
+export const LinkPreview = memo(({ messageID }: { messageID: string }) => {
 
     const { editor } = useCurrentEditor()
 
@@ -78,50 +77,75 @@ export const LinkPreview = memo(({ isScrolling }: { isScrolling?: boolean }) =>
     // const href = editor?.getAttributes('link').href
 
 
-    const { data, isLoading } = useFrappeGetCall<{ message: LinkPreviewDetails[] }>('raven.api.preview_links.get_preview_link', {
+    const { data } = useFrappeGetCall<{ message: LinkPreviewDetails[] }>('raven.api.preview_links.get_preview_link', {
         urls: JSON.stringify([href])
-    }, href ? undefined : null, {
+    }, href ? `link_preview_${href}` : null, {
         revalidateIfStale: false,
         revalidateOnFocus: false,
         revalidateOnReconnect: false,
         shouldRetryOnError: false,
     })
 
+    const { call } = useFrappePostCall('raven.api.preview_links.hide_link_preview')
+
+    const hidePreviewLink = () => {
+        call({
+            message_id: messageID
+        })
+    }
+
     if (!href) return null
 
     const linkPreview = data?.message?.[0]
 
-    return <a href={href} target='_blank'>
-        <Flex direction='column' gap='2' py='2'>
-            {linkPreview ? linkPreview.site_name && linkPreview.description ? <Flex gap='4'>
-                {(linkPreview.absolute_image || linkPreview.image) &&
-                    <Box className='relative min-w-[18rem] min-h-[9rem] w-72 h-36'>
+    return <Flex direction='column' gap='2' py='2'>
+        {linkPreview ? linkPreview.site_name && linkPreview.description ? <Flex gap='4'>
+            {(linkPreview.absolute_image || linkPreview.image) &&
+                <a href={href} target='_blank'>
+                    <Box className='relative min-w-64 min-h-32 w-64 h-32'>
                         {/* Absolute positioned skeleton loader */}
-                        <Box className='absolute top-0 z-0 left-0 w-72 h-36' >
-                            <Box className='animate-pulse bg-gray-3 z-0 w-72 h-36 dark:bg-gray-5 rounded-md'>
+                        <Box className='absolute top-0 z-0 left-0 w-64 h-32' >
+                            <Box className='animate-pulse bg-gray-3 z-0 w-64 h-32 dark:bg-gray-5 rounded-md'>
 
                             </Box>
                         </Box>
-
                         <img
                             width='100%'
-                            className='absolute object-cover min-w-[18rem] min-h-[9rem] w-72 h-36 rounded-md z-50 top-0 left-0'
+                            className='absolute object-cover min-w-64 min-h-32 w-64 h-32 rounded-md z-50 top-0 left-0'
                             src={linkPreview.absolute_image || linkPreview.image}
                             alt={linkPreview.title} />
-
                     </Box>
-                }
-                <Flex direction='column' gap='1' py='1' className='w-84'>
-                    <Flex gap='1' direction='column'>
-                        <Text as='span' weight='bold' size='5' className='cal-sans'>{linkPreview.title}</Text>
-                        <Text as='span' color='gray' size='2' weight='medium'>{linkPreview.site_name}</Text>
+                </a>
+            }
+            <Flex className='group'>
+                <a href={href} target='_blank'>
+
+                    <Flex direction='column' gap='1' py='1' className='w-84'>
+                        <Flex gap='1' direction='column'>
+                            <Text as='span' weight='bold' size='3'>{linkPreview.title}</Text>
+                            <Text as='span' color='gray' size='2' weight='medium'>{linkPreview.site_name}</Text>
+                        </Flex>
+                        <Text as='p' size='2' className='whitespace-break-spaces'>{linkPreview.description}</Text>
                     </Flex>
-                    <Text as='p' size='2' className='whitespace-break-spaces'>{linkPreview.description}</Text>
-                </Flex>
-            </Flex> : null :
-
-                null}
-        </Flex>
-    </a>
+                </a>
+                <div className='group-hover:visible invisible'>
+                    <Tooltip content='Hide link preview'>
+                        <IconButton size='1'
+                            color='gray'
+                            className='cursor-pointer'
+                            aria-label='Hide link preview'
+                            variant='soft'
+                            onClick={hidePreviewLink}
+                        >
+                            <BiX size='20' />
+                        </IconButton>
+                    </Tooltip>
+                </div>
+            </Flex>
+        </Flex> : null :
+
+            null
+        }
+    </Flex >
 
 })
diff --git a/...n-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx b/...n-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx
@@ -44,7 +44,7 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
     editable: false,
     editorProps: {
       attributes: {
-        class: isTruncated ? 'tiptap-renderer line-clamp-3' : 'tiptap-renderer' 
+        class: isTruncated ? 'tiptap-renderer line-clamp-3' : 'tiptap-renderer'
       }
     },
     enableCoreExtensions: true,
@@ -97,7 +97,7 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
           contentEditable={false}
           editor={editor}
           readOnly />
-        {showLinkPreview && <LinkPreview isScrolling={isScrolling} />}
+        {showLinkPreview && <LinkPreview messageID={message.name} />}
       </EditorContext.Provider>
     </Box>
   )

diff --git a/raven-app/src/types/RavenMessaging/RavenMessage.ts b/raven-app/src/types/RavenMessaging/RavenMessage.ts
@@ -26,7 +26,7 @@ export interface RavenMessage{
 	/**	Replied Message Details : JSON	*/
 	replied_message_details?: any
 	/**	Message Type : Select	*/
-	message_type?: "Text" | "Image" | "File"
+	message_type?: "Text" | "Image" | "File" | "Poll"
 	/**	Content : Long Text	*/
 	content?: string
 	/**	File : Attach	*/
@@ -49,8 +49,12 @@ export interface RavenMessage{
 	is_edited?: 0 | 1
 	/**	Mentions : Table - Raven Mention	*/
 	mentions?: RavenMention[]
+	/**	Poll ID : Link - Raven Poll	*/
+	poll_id?: string
 	/**	Is Bot Message : Check	*/
 	is_bot_message?: 0 | 1
 	/**	Bot : Link - Raven User	*/
 	bot?: string
+	/**	Hide link preview : Check	*/
+	hide_link_preview?: 0 | 1
 }
diff --git a/raven/api/chat_stream.py b/raven/api/chat_stream.py
@@ -51,6 +51,7 @@ def get_messages(channel_id: str, limit: int = 20, base_message: str | None = No
 			message.poll_id,
 			message.is_bot_message,
 			message.bot,
+			message.hide_link_preview,
 		)
 		.where(message.channel_id == channel_id)
 		.orderby(message.creation, order=Order.desc)
@@ -155,6 +156,7 @@ def fetch_older_messages(
 			message.poll_id,
 			message.is_bot_message,
 			message.bot,
+			message.hide_link_preview,
 		)
 		.where(message.channel_id == channel_id)
 		.where(
@@ -263,6 +265,7 @@ def fetch_newer_messages(
 			message.poll_id,
 			message.is_bot_message,
 			message.bot,
+			message.hide_link_preview,
 		)
 		.where(message.channel_id == channel_id)
 		.where(condition)

diff --git a/raven/api/preview_links.py b/raven/api/preview_links.py
@@ -58,3 +58,14 @@ def get_preview_link(urls):
 			message_links.append(data)
 
 	return message_links
+
+
+@frappe.whitelist(methods=["POST"])
+def hide_link_preview(message_id: str):
+	"""
+	Remove the preview from the message
+	"""
+	message = frappe.get_doc("Raven Message", message_id)
+	message.flags.ignore_permissions = True
+	message.hide_link_preview = 1
+	message.save()