Merge pull request #581 from The-Commit-Company/580-fix-reply-block-l…

…ength

fix: reply block length

raven-app/src/components/feature/chat-header/ViewChannelDetailsButton.tsx

@@ -6,14 +6,16 @@ import { ChannelMembers } from "@/utils/channel/ChannelMembersProvider"
 import { Button, Dialog, Tooltip } from "@radix-ui/themes"
 import { UserAvatar } from "@/components/common/UserAvatar"
 import { BiSolidUser } from "react-icons/bi"
+import { clsx } from "clsx"
 
 interface ViewChannelDetailsButtonProps {
     channelData: ChannelListItem,
     channelMembers: ChannelMembers,
-    updateMembers: () => void
+    updateMembers: () => void,
+    allowAddMembers: boolean
 }
 
-export const ViewChannelDetailsButton = ({ channelData, channelMembers, updateMembers }: ViewChannelDetailsButtonProps) => {
+export const ViewChannelDetailsButton = ({ channelData, allowAddMembers, channelMembers, updateMembers }: ViewChannelDetailsButtonProps) => {
 
     const [open, setOpen] = useState(false)
 
@@ -26,13 +28,21 @@ export const ViewChannelDetailsButton = ({ channelData, channelMembers, updateMe
 
     return (
         <Dialog.Root open={open} onOpenChange={setOpen}>
-            <Tooltip content='view members/ channel details'>
+            <Tooltip content='view members/channel details'>
                 <Dialog.Trigger>
-                    <Button className={'pr-2 pl-1 w-fit rounded-r-none border-r-0'} variant='surface' color='gray'>
+                    <Button className={clsx('pr-2 pl-1 w-fit cursor-pointer', allowAddMembers ? 'rounded-r-none' : '')}
+                        variant='surface'
+                        color='gray'>
                         {Object.keys(channelMembers).length > 0 ? <div className={'flex -space-x-2 rtl:space-x-reverse'}>
                             {Object.entries(channelMembers).map(([name, member], index) => {
                                 if (index < 3)
-                                    return <UserAvatar key={name} src={member.user_image ?? 'undefined'} alt={member.full_name ?? member.name} radius='full' variant='solid' className={`border border-slate-2`} />
+                                    return <UserAvatar
+                                        key={name}
+                                        src={member.user_image ?? undefined}
+                                        alt={member.full_name ?? member.name}
+                                        radius='full'
+                                        // variant='soft'
+                                        className={`border border-slate-2`} />
                             })}
                             {totalMembers > 3 && <div className={'z-10 flex items-center justify-center w-6 h-6 text-[0.65rem] text-black bg-gray-5 dark:bg-gray-8 dark:text-white rounded-full border border-slate-2'}>+ {totalMembers - 3}</div>}
                         </div> : <BiSolidUser />}

raven-app/src/components/feature/chat-header/ViewOrAddMembersButton.tsx

@@ -15,18 +15,21 @@ export const ViewOrAddMembersButton = ({ channelData }: ViewOrAddMembersButtonPr
     const { channelMembers, mutate: updateMembers } = useContext(ChannelMembersContext) as ChannelMembersContextType
     const { currentUser } = useContext(UserContext)
 
+    const allowAddMembers = ['Public', 'Private'].includes(channelData.type) && channelData.is_archived === 0 && channelMembers[currentUser] !== undefined
+
     return (
         <Flex>
             <ViewChannelDetailsButton
                 channelData={channelData}
+                allowAddMembers={allowAddMembers}
                 channelMembers={channelMembers}
                 updateMembers={updateMembers} />
             {/* members can be added to public and private channels only, as open channels are open to everyone */}
-            {(channelData.type === 'Private' || channelData.type === 'Public') && channelMembers[currentUser] && channelData.is_archived === 0 && <AddMembersButton
+            {allowAddMembers && <AddMembersButton
                 channelData={channelData}
                 channelMembers={channelMembers}
                 updateMembers={updateMembers}
-                className="rounded-l-none border-l-0"
+                className="rounded-l-none relative -left-0.5"
                 isIconButton={true} />}
         </Flex>
     )

raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx

@@ -44,6 +44,7 @@ type TiptapEditorProps = {
     slotAfter?: React.ReactNode,
     placeholder?: string,
     sessionStorageKey?: string,
+    clearReplyMessage?: () => void,
     disableSessionStorage?: boolean,
     fileProps?: ToolbarFileProps,
     onMessageSend: (message: string, json: any) => Promise<void>,
@@ -70,7 +71,7 @@ export const ChannelMention = Mention.extend({
             pluginKey: new PluginKey('channelMention'),
         }
     })
-const Tiptap = ({ slotBefore, fileProps, onMessageSend, placeholder = 'Type a message...', messageSending, sessionStorageKey = 'tiptap-editor', disableSessionStorage = false, defaultText = '' }: TiptapEditorProps) => {
+const Tiptap = ({ slotBefore, fileProps, onMessageSend, clearReplyMessage, placeholder = 'Type a message...', messageSending, sessionStorageKey = 'tiptap-editor', disableSessionStorage = false, defaultText = '' }: TiptapEditorProps) => {
 
     const { users } = useContext(UserListContext)
 
@@ -153,6 +154,17 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, placeholder = 'Type a me
 
                     return false;
                 },
+                Backspace: () => {
+                    const isEditorEmpty = this.editor.isEmpty
+
+                    if (isEditorEmpty) {
+                        // Clear the reply message if the editor is empty
+                        clearReplyMessage?.()
+                        return this.editor.commands.clearContent(true)
+                    }
+
+                    return false
+                }
 
                 // 'Shift-Enter': () => {
                 //     /**

raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx

@@ -32,14 +32,20 @@ interface TiptapRendererProps extends BoxProps {
   message: TextMessage,
   user?: UserFields,
   showLinkPreview?: boolean,
-  isScrolling?: boolean
+  isScrolling?: boolean,
+  isTruncated?: boolean
 }
 
-export const TiptapRenderer = ({ message, user, isScrolling = false, showLinkPreview = true, ...props }: TiptapRendererProps) => {
+export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated = false, showLinkPreview = true, ...props }: TiptapRendererProps) => {
 
   const editor = useEditor({
     content: message.text,
     editable: false,
+    editorProps: {
+      attributes: {
+        class: isTruncated ? 'line-clamp-3' : ''
+      }
+    },
     enableCoreExtensions: true,
     extensions: [
       StarterKit.configure({
@@ -80,7 +86,7 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, showLinkPre
   })
 
   return (
-    <Box className={clsx('overflow-x-hidden', props.className)} {...props}>
+    <Box className={clsx('overflow-x-hidden text-ellipsis', props.className)} {...props}>
       <EditorContext.Provider value={{ editor }}>
         <EditorContent
           editor={editor}
@@ -94,8 +100,8 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, showLinkPre
 export const TruncatedTiptapRenderer = ({ message, user, showLinkPreview = false, ...props }: TiptapRendererProps) => {
 
 
-  return <Box className='text-ellipsis overflow-none line-clamp-3'>
-    <TiptapRenderer message={message} user={user} showLinkPreview={showLinkPreview} {...props} />
+  return <Box className='text-ellipsis overflow-hidden line-clamp-3'>
+    <TiptapRenderer message={message} user={user} showLinkPreview={showLinkPreview} isTruncated {...props} />
   </Box>
 
 }

raven-app/src/components/feature/chat/ChatMessage/ReplyMessageBox/ReplyMessageBox.tsx

@@ -22,7 +22,7 @@ export const ReplyMessageBox = ({ message, children, className, ...props }: Repl
 
     const user = useGetUser(message.owner)
     return (
-        <Flex className={clsx('p-2 bg-white border border-gray-5 shadow-sm hover:border-iris-10 dark:bg-gray-1 dark:border-gray-7 dark:hover:border-iris-8 rounded-md', className)} {...props}>
+        <Flex className={clsx('p-2 items-start bg-white border border-gray-5 shadow-sm hover:border-iris-10 dark:bg-gray-1 dark:border-gray-7 dark:hover:border-iris-8 rounded-md', className)} {...props}>
             <Flex gap='1' direction='column' className="border-l-2 pl-2 border-gray-8">
                 <Flex gap='2' align='center'>
                     <Text as='span' size='1' weight='bold'>{user?.full_name ?? message.owner}</Text>

raven-app/src/components/feature/chat/ChatStream/ChatBoxBody.tsx

@@ -93,9 +93,10 @@ export const ChatBoxBody = ({ channelData }: ChatBoxBodyProps) => {
                 message={selectedMessage}>
                 <IconButton
                     color='gray'
+                    size='1'
                     variant="soft"
                     onClick={handleCancelReply}>
-                    <BiX size='24' />
+                    <BiX size='20' />
                 </IconButton>
             </ReplyMessageBox>
         }
@@ -136,6 +137,7 @@ export const ChatBoxBody = ({ channelData }: ChatBoxBodyProps) => {
                                     fileInputRef,
                                     addFile
                                 }}
+                                clearReplyMessage={handleCancelReply}
                                 placeholder={randomPlaceholder}
                                 sessionStorageKey={`tiptap-${channelData.name}`}
                                 onMessageSend={sendMessage}

raven-app/src/components/feature/chat/ChatStream/ChatHistory.tsx

@@ -135,7 +135,7 @@ const RenderItem = ({ index, replyToMessage, updateMessages, block, onReplyMessa
             <DateSeparator><DateMonthYear date={block.data} /></DateSeparator>
         </Box> :
 
-            <Box className="w-full overflow-x--hidden">
+            <Box className="w-full overflow-x-clip overflow-y-visible text-ellipsis">
                 <MessageItem
                     message={block.data}
                     isScrolling={isScrolling}