refactor(mobile): redesign chatroom message composer

Author: HMarzban

packages/webapp/components/BottomSheet.tsx

@@ -8,11 +8,11 @@ import ChatContainerMobile from './pages/document/components/chat/ChatContainerM
 import useKeyboardHeight from '@hooks/useKeyboardHeight'
 
 const BottomSheet = () => {
-  const { activeSheet, sheetData, closeSheet } = useSheetStore()
+  const { activeSheet, closeSheet } = useSheetStore()
   const chatRoom = useChatStore((state) => state.chatRoom)
   const closeChatRoom = useChatStore((state) => state.closeChatRoom)
   const destroyChatRoom = useChatStore((state) => state.destroyChatRoom)
-  const containerRef = useRef<HTMLDivElement>(null)
+  const setSheetContainerRef = useSheetStore((state) => state.setSheetContainerRef)
   const { height: keyboardHeight } = useKeyboardHeight()
 
   // Sync chat store with bottom sheet
@@ -47,7 +47,8 @@ const BottomSheet = () => {
       case 'chatroom':
         return {
           id: 'chatroom_sheet',
-          snapPoints: [1, 0.5, 0]
+          detent: 'full-height' as SheetProps['detent'],
+          disableScrollLocking: true
         }
       default:
         return {
@@ -63,6 +64,12 @@ const BottomSheet = () => {
           // Fix the bottom sheet height when keyboard is open
           style: { paddingBottom: keyboardHeight }
         }
+      case 'chatroom':
+        return {
+          style: {
+            paddingBottom: keyboardHeight
+          }
+        }
       default:
         return {}
     }
@@ -84,7 +91,7 @@ const BottomSheet = () => {
       isOpen={!!activeSheet}
       onClose={handleClose}
       {...getSheetProps()}>
-      <Sheet.Container ref={containerRef}>
+      <Sheet.Container ref={setSheetContainerRef}>
         <Sheet.Header />
         <Sheet.Content {...getSheetContentProps()}>{renderContent()}</Sheet.Content>
       </Sheet.Container>

packages/webapp/components/TipTap/toolbar/Icon.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
-import { MdCode, MdFormatColorText, MdOutlineEmojiEmotions } from 'react-icons/md'
+import { MdCode, MdFormatColorText, MdOutlineEmojiEmotions, MdOutlineAdd } from 'react-icons/md'
 import { RiAtLine, RiCodeBlock } from 'react-icons/ri'
-import { IoSend } from 'react-icons/io5'
+import { IoSend, IoCloseOutline as Close } from 'react-icons/io5'
 import {
   Bold,
   Italic,
@@ -45,7 +45,9 @@ const icons: { [key: string]: React.ComponentType<{ size?: number; fill?: string
   MdOutlineEmojiEmotions,
   RiAtLine,
   IoSend,
-  TbBlockquote
+  TbBlockquote,
+  Close,
+  MdOutlineAdd
 }
 
 type TIcon = {

packages/webapp/components/chat/components/ChannelActionBar.tsx

@@ -3,15 +3,94 @@ import JoinBroadcastChannel from './JoinBroadcastChannel'
 import JoinGroupChannel from './JoinGroupChannel'
 import JoinPrivateChannel from './JoinDirectChannel'
 import JoinDirectChannel from './JoinPrivateChannel'
-import { useAuthStore, useChatStore } from '@stores'
+import { useAuthStore, useChatStore, useStore } from '@stores'
 import { useChannel } from '../context/ChannelProvider'
 import SignInToJoinChannel from './SignInToJoinChannel'
 import { TChannelSettings } from '@types'
 import MessageComposer from './MessageComposer/MessageComposer'
+import useKeyboardHeight from '@hooks/useKeyboardHeight'
+import { useMessageComposer } from './MessageComposer/hooks/useMessageComposer'
+
+const MobileToolbar = () => {
+  const { isOpen: isKeyboardOpen } = useKeyboardHeight()
+  const { isToolbarOpen, toggleToolbar } = useMessageComposer()
+
+  if (!isKeyboardOpen) return null
+
+  return (
+    <div className="relative h-10 overflow-hidden">
+      <div
+        className={`absolute inset-0 transition-transform duration-300 ease-in-out ${
+          isToolbarOpen ? 'translate-y-0' : '-translate-y-full'
+        }`}>
+        <MessageComposer.Actions>
+          <MessageComposer.ToggleToolbarButton />
+          <MessageComposer.EmojiButton />
+          <MessageComposer.MentionButton />
+          <MessageComposer.SendButton />
+        </MessageComposer.Actions>
+      </div>
+
+      <div
+        className={`absolute inset-0 transition-transform duration-300 ease-in-out ${
+          isToolbarOpen ? 'translate-y-full' : 'translate-y-0'
+        }`}>
+        <MessageComposer.Toolbar className="bg-base-200 h-full border-b p-2 px-1">
+          <MessageComposer.ToggleToolbarButton
+            iconType="Close"
+            onPress={toggleToolbar}
+            size={22}
+            className="btn-square !bg-gray-200"
+          />
+          <div className="divided m-0 w-0" />
+          <div className="flex snap-x items-center gap-1 overflow-x-scroll overflow-y-hidden">
+            <MessageComposer.BoldButton size={10} className="snap-center" />
+            <MessageComposer.ItalicButton size={10} className="snap-center" />
+            <MessageComposer.StrikethroughButton size={14} className="snap-center" />
+            <div className="divided snap-center" />
+            <MessageComposer.HyperlinkButton size={18} className="snap-center" />
+            <MessageComposer.BulletListButton size={16} className="snap-center" />
+            <MessageComposer.OrderedListButton size={16} className="snap-center" />
+            <div className="divided snap-center" />
+            <MessageComposer.BlockquoteButton size={20} className="snap-center" />
+            <MessageComposer.CodeButton size={20} className="snap-center" />
+            <MessageComposer.CodeBlockButton size={20} className="snap-center" />
+          </div>
+        </MessageComposer.Toolbar>
+      </div>
+    </div>
+  )
+}
 
 const SendMessage = () => {
+  const {
+    settings: {
+      editor: { isMobile }
+    }
+  } = useStore((state) => state)
+
+  if (isMobile)
+    return (
+      <div className="chat_editor_container flex w-full flex-col">
+        <MessageComposer className="rounded-t-md border border-b-0 border-gray-300 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.1)]">
+          <MessageComposer.MobileWrapper>
+            <MessageComposer.Context>
+              <MessageComposer.ReplyContext />
+              <MessageComposer.EditContext />
+              <MessageComposer.CommentContext />
+            </MessageComposer.Context>
+
+            <div className="flex flex-row items-center gap-2 px-2 py-1.5">
+              <MessageComposer.AttachmentButton size={22} className="btn-square bg-gray-200" />
+              <MessageComposer.Input />
+            </div>
+            <MobileToolbar />
+          </MessageComposer.MobileWrapper>
+        </MessageComposer>
+      </div>
+    )
   return (
-    <MessageComposer className="chat_editor_container mb-2 flex w-full flex-col">
+    <MessageComposer className="chat_editor_container m-auto mb-2 flex w-[98%] flex-col">
       <MessageComposer.Context>
         <MessageComposer.ReplyContext />
         <MessageComposer.EditContext />

packages/webapp/components/chat/components/MessageComposer/MessageComposer.tsx

@@ -29,6 +29,7 @@ import { messageInsert } from '../../hooks/listner/helpers'
 
 import {
   Actions,
+  AttachmentButton,
   EmojiButton,
   MentionButton,
   SendButton,
@@ -40,6 +41,7 @@ import { twMerge } from 'tailwind-merge'
 import ReplyContext from './components/Context/ReplyContext'
 import EditContext from './components/Context/EditContext'
 import CommentContext from './components/Context/CommentContext'
+import { MobileWrapper } from './Mobile'
 
 const MessageComposer = ({
   children,
@@ -49,15 +51,15 @@ const MessageComposer = ({
   className?: string
 }) => {
   const { channelId } = useChannel()
+
   const user = useAuthStore((state) => state.profile)
   const setOrUpdateUserPresence = useChatStore((state: any) => state.setOrUpdateUserPresence)
   const usersPresence = useStore((state: any) => state.usersPresence)
   const startThreadMessage = useChatStore((state) => state.startThreadMessage)
   const channels = useChatStore((state) => state.channels)
   const { workspaceId } = useChatStore((state) => state.workspaceSettings)
   const editorRef = useRef<HTMLDivElement | null>(null)
-
-  const [toggleToolbar, setToggleToolbar] = useState(() => toolbarStorage.get())
+  const [isToolbarOpen, setIsToolbarOpen] = useState(() => toolbarStorage.get())
 
   const setEditMsgMemory = useChatStore((state) => state.setEditMessageMemory)
   const setReplyMsgMemory = useChatStore((state) => state.setReplyMessageMemory)
@@ -388,11 +390,6 @@ const MessageComposer = ({
     setAttributes()
   }, [editor])
 
-  // Save toolbar toggle state to localStorage
-  useEffect(() => {
-    toolbarStorage.set(toggleToolbar)
-  }, [toggleToolbar])
-
   // Handle Draft Memory
   useEffect(() => {
     return () => {
@@ -427,6 +424,15 @@ const MessageComposer = ({
     }, 1000)
   }, [editor])
 
+  // Save toolbar toggle state to localStorage
+  useEffect(() => {
+    toolbarStorage.set(isToolbarOpen)
+  }, [isToolbarOpen])
+
+  const toggleToolbar = useCallback(() => {
+    setIsToolbarOpen(!isToolbarOpen)
+  }, [setIsToolbarOpen, isToolbarOpen])
+
   const contextValue = {
     sendMsg,
     sendComment,
@@ -448,8 +454,8 @@ const MessageComposer = ({
     setReplyMsgMemory,
     setCommentMsgMemory,
     contextType,
+    isToolbarOpen,
     toggleToolbar,
-    setToggleToolbar,
     submitMessage,
     editorRef
   }
@@ -490,6 +496,10 @@ MessageComposer.EmojiButton = EmojiButton
 MessageComposer.MentionButton = MentionButton
 MessageComposer.SendButton = SendButton
 MessageComposer.ToggleToolbarButton = ToggleToolbarButton
+MessageComposer.AttachmentButton = AttachmentButton
 
 // Input
 MessageComposer.Input = Input
+
+// Mobile
+MessageComposer.MobileWrapper = MobileWrapper

packages/webapp/components/chat/components/MessageComposer/Mobile/MobileWrapper.tsx

@@ -0,0 +1,39 @@
+import { useSheetStore, useStore } from '@stores'
+import { useEffect } from 'react'
+import useKeyboardHeight from '@hooks/useKeyboardHeight'
+import { applyStyles } from '../helpers/domUtils'
+
+type Props = {
+  children: React.ReactNode
+}
+
+const SHEET_STYLES = {
+  keyboardOpen: {
+    height: '100%',
+    borderRadius: '0'
+  },
+  keyboardClosed: {
+    height: 'calc(100% - env(safe-area-inset-top) - 34px)',
+    borderTopLeftRadius: '8px',
+    borderTopRightRadius: '8px'
+  }
+} as const
+
+export const MobileWrapper = ({ children }: Props) => {
+  const { sheetContainerRef } = useSheetStore()
+  const { isOpen: isKeyboardOpen } = useKeyboardHeight()
+  const {
+    settings: {
+      editor: { isMobile }
+    }
+  } = useStore((state) => state)
+
+  useEffect(() => {
+    if (!sheetContainerRef || !isMobile) return
+
+    const styles = isKeyboardOpen ? SHEET_STYLES.keyboardOpen : SHEET_STYLES.keyboardClosed
+    applyStyles(sheetContainerRef, styles)
+  }, [isMobile, isKeyboardOpen, sheetContainerRef])
+
+  return <div>{children}</div>
+}

packages/webapp/components/chat/components/MessageComposer/Mobile/index.ts

@@ -0,0 +1 @@
+export * from './MobileWrapper'

packages/webapp/components/chat/components/MessageComposer/components/Actions/ActionButtons/AttachmentButton.tsx

@@ -0,0 +1,14 @@
+import Icon from '@components/TipTap/toolbar/Icon'
+import Button from '../../ui/Button'
+
+type Props = {
+  size?: number
+} & React.ComponentProps<typeof Button>
+
+export const AttachmentButton = ({ size = 16, ...props }: Props) => {
+  return (
+    <Button type="attachment" tooltip="Attachment" {...props}>
+      <Icon type="MdOutlineAdd" size={size} />
+    </Button>
+  )
+}

packages/webapp/components/chat/components/MessageComposer/components/Actions/ActionButtons/ToggleToolbarButton.tsx

@@ -1,23 +1,29 @@
 import Button from '../../ui/Button'
 import Icon from '@components/TipTap/toolbar/Icon'
 import { useMessageComposer } from '../../../hooks/useMessageComposer'
-type Props = React.HTMLAttributes<HTMLButtonElement> & {
-  className?: string
+
+interface Props extends React.ComponentProps<typeof Button> {
   size?: number
+  iconType?: string
 }
 
-export const ToggleToolbarButton = ({ className, size = 20, ...props }: Props) => {
-  const { toggleToolbar, setToggleToolbar } = useMessageComposer()
+export const ToggleToolbarButton = ({
+  className,
+  size = 20,
+  iconType = 'MdFormatColorText',
+  ...props
+}: Props) => {
+  const { isToolbarOpen, toggleToolbar } = useMessageComposer()
 
   return (
     <Button
       className={className}
-      onPress={() => setToggleToolbar(!toggleToolbar)}
+      onPress={toggleToolbar}
       tooltip="Toolbar"
       tooltipPosition="tooltip-top"
-      isActive={!toggleToolbar}
+      isActive={!isToolbarOpen}
       {...props}>
-      <Icon type="MdFormatColorText" size={size} />
+      <Icon type={iconType} size={size} />
     </Button>
   )
 }

packages/webapp/components/chat/components/MessageComposer/components/Actions/ActionButtons/index.ts

@@ -2,3 +2,4 @@ export * from './EmojiButton'
 export * from './MentionButton'
 export * from './SendButton'
 export * from './ToggleToolbarButton'
+export * from './AttachmentButton'

packages/webapp/components/chat/components/MessageComposer/components/Input/Input.tsx

@@ -1,8 +1,9 @@
 import { EditorContent } from '@tiptap/react'
 import { useMessageComposer } from '../../hooks/useMessageComposer'
 import { useEffect } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export const Input = () => {
+export const Input = ({ className }: { className?: string }) => {
   const { editorRef, editor, messageDraftMemory } = useMessageComposer()
 
   useEffect(() => {
@@ -11,7 +12,7 @@ export const Input = () => {
     }
   }, [messageDraftMemory, editor])
   return (
-    <div className="flex-1 px-1 py-2 text-base sm:px-2">
+    <div className={twMerge('flex-1 px-1 py-2 text-base sm:px-2', className)}>
       <EditorContent
         ref={editorRef}
         className="max-h-52 w-full overflow-auto"