feat: wire up message item

apps/mobile/app/[site_id]/chat/[id]/file-viewer.tsx

@@ -37,7 +37,7 @@ const FileViewer = () => {
   return (
     <>
       <Stack.Screen options={{
-        title: 'Raven',
+        title: 'File Viewer',
         headerShown: showHeader,
         headerTitle: `${uri?.split('/').pop()}`,
         headerRight: () => <ShareButton uri={uri} />

apps/mobile/app/[site_id]/forward-message.tsx

@@ -253,4 +253,4 @@ const ChannelRow = React.memo(({ item, handleChannelSelect, currentUserInfo }: a
     )
 })
 
-export default ForwardMessage
+export default ForwardMessage

apps/mobile/components/common/DIvider.tsx

@@ -0,0 +1,16 @@
+import { View, ViewProps } from "react-native"
+import { useColorScheme } from "@hooks/useColorScheme"
+
+export const Divider = ({ ...props }: ViewProps) => {
+    const { colors } = useColorScheme()
+    return (
+        <View
+            style={{
+                borderBottomWidth: 1,
+                borderBottomColor: colors.grey5,
+                marginHorizontal: 16
+            }}
+            {...props}
+        />
+    )
+}

apps/mobile/components/common/UniversalFileIcon.tsx

@@ -0,0 +1,56 @@
+import { getFileExtension } from "@raven/lib/utils/operations"
+import { SvgProps } from "react-native-svg"
+import FileIcon from "@assets/icons/FileIcon.svg"
+import DocIcon from "@assets/icons/DocIcon.svg"
+import TxtIcon from "@assets/icons/TxtIcon.svg"
+import ImageIcon from "@assets/icons/ImageIcon.svg"
+import ZipIcon from "@assets/icons/ZipIcon.svg"
+import PdfIcon from "@assets/icons/PdfIcon.svg"
+import SheetIcon from "@assets/icons/SheetIcon.svg"
+import SlideIcon from "@assets/icons/SlideIcon.svg"
+import VideoIcon from "@assets/icons/VideoIcon.svg"
+import AudioIcon from "@assets/icons/AudioIcon.svg"
+
+interface FileIconProps extends SvgProps {
+    fileName: string
+}
+
+const UniversalFileIcon = ({ fileName, ...props }: FileIconProps) => {
+
+    const extension = getFileExtension(fileName)
+
+    switch (extension) {
+        case 'pdf':
+            return <PdfIcon {...props} fill={'#E5484D'} />
+        case 'doc':
+        case 'docx':
+            return <DocIcon {...props} fill={'#8EC8F6'} />
+        case 'xls':
+        case 'xlsx':
+        case 'csv':
+            return <SheetIcon {...props} stroke={'#30A46C'} />
+        case 'ppt':
+        case 'pptx':
+        case 'key':
+            return <SlideIcon {...props} fill={'#EC9455'} />
+        case 'txt':
+            return <TxtIcon {...props} fill={'#B8BCBA'} />
+        case 'zip':
+        case 'rar':
+            return <ZipIcon {...props} fill={'#FBE577'} />
+        case 'mp3':
+            return <AudioIcon {...props} stroke={'#D0CDD7'} />
+        case 'mp4':
+        case 'webm':
+            return <VideoIcon {...props} stroke={'#EAACC3'} />
+        case 'jpg':
+        case 'jpeg':
+        case 'png':
+        case 'gif':
+            return <ImageIcon {...props} fill={'#60B3D7'} />
+        default:
+            return <FileIcon {...props} fill={'#B8BCBA'} />
+    }
+}
+
+export default UniversalFileIcon

apps/mobile/components/features/chat-stream/ChatStream.tsx

@@ -93,14 +93,20 @@ const ContentContainerStyles = {
 }
 
 const MessageContentRenderer = ({ item }: { item: MessageDateBlock }) => {
+
+    // TODO: Implement reply message press
+    const onReplyMessagePress = () => {
+        console.log('reply message pressed')
+    }
+
     if (item.message_type === 'date') {
         return <DateSeparator item={item} />
     }
 
     if (item.message_type === 'System') {
         return <SystemMessageBlock item={item} />
     }
-    return <MessageItem message={item} />
+    return <MessageItem message={item} onReplyMessagePress={onReplyMessagePress} />
 }
 
 export default ChatStream

apps/mobile/components/features/chat-stream/MessageItem.tsx

@@ -1,24 +1,44 @@
-import { FileMessage, ImageMessage, PollMessage, TextMessage } from '@raven/types/common/Message'
 import { View } from 'react-native'
-import MessageAvatar from './MessageItemElements/MessageAvatar'
+import { Text } from '@components/nativewindui/Text';
 import { useGetUser } from '@raven/lib/hooks/useGetUser'
-import MessageHeader from './MessageItemElements/MessageHeader'
-import FileMessageRenderer from './MessageItemElements/FileMessageRenderer'
-import MessageTextRenderer from './MessageItemElements/MessageTextRenderer'
 import clsx from 'clsx'
+import ShareForward from '@assets/icons/ShareForward.svg'
+import { useMemo, memo } from 'react';
+import PushPin from '@assets/icons/PushPin.svg'
+import { FileMessage, ImageMessage, PollMessage, TextMessage } from '@raven/types/common/Message'
+import MessageAvatar from '@components/features/chat-stream/MessageItemElements/MessageAvatar'
+import MessageHeader from '@components/features/chat-stream/MessageItemElements/MessageHeader'
+import FileMessageRenderer from '@components/features/chat/ChatMessage/Renderers/FileMessageRenderer'
+import { MessageContentRenderer } from '@components/features/chat-stream/MessageItemElements/MessageContentRenderer'
+import DocTypeLinkRenderer from '@components/features/chat/ChatMessage/Renderers/DocTypeLinkRenderer'
+import { PollMessageBlock } from '@components/features/chat/ChatMessage/Renderers/PollMessage'
+import ReplyMessageBox from '@components/features/chat/ChatMessage/ReplyMessageBox/ReplyMessageBox';
+import { ImageMessageRenderer } from '@components/features/chat/ChatMessage/Renderers/ImageMessage';
 
 type Props = {
-    message: FileMessage | PollMessage | TextMessage | ImageMessage
+    message: FileMessage | PollMessage | TextMessage | ImageMessage,
+    onReplyMessagePress: () => void
 }
 
-const MessageItem = ({ message }: Props) => {
+const MessageItem = memo(({ message, onReplyMessagePress }: Props) => {
+
+    const { linked_message, replied_message_details } = message
 
     const username = message.bot || message.owner
 
     const user = useGetUser(username)
 
     const userFullName = user?.full_name || username
 
+    const replyMessageDetails = useMemo(() => {
+        if (typeof replied_message_details === 'string') {
+            return JSON.parse(replied_message_details)
+        } else {
+            return replied_message_details
+        }
+    }, [replied_message_details])
+
+
     return (
         <View className={clsx('flex-1 flex-row px-2 gap-1', message.is_continuation ? 'pt-0' : 'pt-2')}>
             <MessageAvatar
@@ -29,18 +49,46 @@ const MessageItem = ({ message }: Props) => {
                 botID={message.bot}
                 is_continuation={message.is_continuation}
             />
-            <View className='flex-1 items-start'>
+            <View className='flex-1 items-start gap-1'>
                 <MessageHeader
                     is_continuation={message.is_continuation}
                     userFullName={userFullName}
                     timestamp={message.formattedTime || ''}
                 />
-                {message.message_type === 'File' ? <FileMessageRenderer message={message} /> : null}
-                {message.text ? <MessageTextRenderer text={message.text} /> : null}
+                {message.is_forwarded === 1 &&
+                    <View className='flex-row items-center gap-1'>
+                        <ShareForward fill={'#6b7280'} width={12} height={12} />
+                        <Text className='text-xs text-gray-500 dark:text-gray-400'>
+                            forwarded
+                        </Text>
+                    </View>}
+                {message.is_pinned === 1 &&
+                    <View className='flex-row items-center gap-1'>
+                        <PushPin width={12} height={12} />
+                        <Text className='text-xs text-accent'>Pinned</Text>
+                    </View>}
+
+                {linked_message && replied_message_details && <ReplyMessageBox
+                    className='mb-1'
+                    onPress={onReplyMessagePress}
+                    message={replyMessageDetails}
+                />
+                }
+
+                {message.text ? <MessageContentRenderer message={message} showLinkPreview={!message.hide_link_preview} /> : null}
+                {message.message_type === 'Image' && <ImageMessageRenderer message={message} />}
+                {message.message_type === 'File' && <FileMessageRenderer message={message} />}
+                {message.message_type === 'Poll' && <PollMessageBlock message={message} />}
+
+                {message.link_doctype && message.link_document && <View className={clsx(message.is_continuation ? 'ml-0.5' : '-ml-0.5')}>
+                    <DocTypeLinkRenderer doctype={message.link_doctype} docname={message.link_document} />
+                </View>}
+
+                {message.is_edited === 1 && <Text className='text-xs text-gray-500 dark:text-gray-400'>(edited)</Text>}
                 {/* <Text>{message.text}</Text> */}
             </View>
         </View>
     )
-}
+})
 
 export default MessageItem

apps/mobile/components/features/chat-stream/MessageItemElements/MessageContentRenderer.tsx

@@ -0,0 +1,52 @@
+import { Message } from "@raven/types/common/Message"
+import LinkPreview from "@components/features/chat/ChatMessage/Renderers/LinkPreview"
+import MessageTextRenderer from "@components/features/chat-stream/MessageItemElements/MessageTextRenderer"
+import * as htmlparser2 from 'htmlparser2';
+import { ALLOWED_FILE_EXTENSIONS, getFileExtension } from "@raven/lib/utils/operations";
+
+type MessageContentRendererProps = {
+    message: Message,
+    showLinkPreview: boolean
+}
+
+
+export const MessageContentRenderer = ({ message, showLinkPreview }: MessageContentRendererProps) => {
+
+    const firstLink = extractFirstLink(message.text)
+
+    if (showLinkPreview && firstLink) {
+        return <LinkPreview messageID={message.name} href={firstLink} />
+    }
+    return (
+        <MessageTextRenderer text={message.text} />
+    )
+}
+
+// in message search for first link and extract href to show link preview
+const extractFirstLink = (html: string): string | null => {
+    let firstLink: string | null = null
+
+    const parser = new htmlparser2.Parser({
+        onopentag(name, attributes) {
+            if (!firstLink && name === 'a' && attributes.href) {
+                // Ignore mailto: links and ensure it's an http(s) link and does not end with a file extension
+                const fileExtension = getFileExtension(attributes.href)
+                // if file-extension is one of the allowed file extensions, ignore the link
+                if (fileExtension && ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
+                    return
+                }
+
+                if (!attributes.href.startsWith('mailto:') &&
+                    (attributes.href.startsWith('http://') ||
+                        attributes.href.startsWith('https://'))) {
+                    firstLink = attributes.href
+                }
+            }
+        }
+    })
+
+    parser.write(html)
+    parser.end()
+
+    return firstLink
+}

apps/mobile/components/features/chat-stream/MessageItemElements/MessageHeader.tsx

@@ -9,7 +9,8 @@ type Props = {
 
 const MessageHeader = ({ is_continuation, userFullName, timestamp }: Props) => {
 
-    if (is_continuation) return null
+    if (is_continuation) return <View className='mt-1' />
+
     return (
         <View className='flex-row gap-2 items-baseline pb-1'>
             <Text className='font-medium text-sm'>{userFullName}</Text>

apps/mobile/components/features/chat-stream/MessageItemElements/MessageTextRenderer.tsx

@@ -56,7 +56,7 @@ const TAG_BASE_STYLES: TRenderEngineConfig['tagsStyles'] = {
 const lightThemeTagStyles = {
     'a': {
         color: 'rgb(87, 83, 198)',
-        borderBottomColor: 'rgba(87, 83, 198, 0.8)',
+        borderBottomWidth: 0,
     },
     'blockquote': {
         borderLeftColor: 'rgba(87, 83, 198, 0.5)',
@@ -76,7 +76,7 @@ const lightThemeTagStyles = {
 const darkThemeTagStyles = {
     'a': {
         color: '#B1A9FF',
-        borderBottomColor: '#B1A9FF88',
+        borderBottomWidth: 0,
     },
     'blockquote': {
         borderLeftColor: '#6E6ADE',

apps/mobile/components/features/chat/ChatMessage/MessageActions/MessageActions.tsx

@@ -4,11 +4,14 @@ import { Message } from '@raven/types/common/Message'
 import { Text, Pressable, View } from 'react-native'
 import { ScrollView } from 'react-native-gesture-handler'
 import QuickReactions from './QuickActions/QuickReactions'
+import ReplyIcon from "@assets/icons/ReplyIcon.svg"
 import ForwardIcon from "@assets/icons/ForwardIcon.svg"
 import CopyIcon from "@assets/icons/CopyIcon.svg"
 import BookMarkMinusIcon from "@assets/icons/BookMarkMinusIcon.svg"
 import BookMarkPlusIcon from "@assets/icons/BookMarkPlusIcon.svg"
+import PaperClipIcon from "@assets/icons/PaperClipIcon.svg"
 import TrashIcon from "@assets/icons/TrashIcon.svg"
+import DownloadIcon from "@assets/icons/DownloadIcon.svg"
 import ArrowBackRetractIcon from "@assets/icons/ArrowBackRetractIcon.svg"
 import MessageIcon from "@assets/icons/MessageIcon.svg"
 import { ActivityIndicator } from '@components/nativewindui/ActivityIndicator'