refactor(message-composer): rewrite composer from scratch

Author: HMarzban

packages/webapp/api/messages/sendMessage.ts

@@ -1,14 +1,12 @@
 import { supabaseClient } from '@utils/supabase'
-import { Database } from '@types'
-
-type TMessage = Database['public']['Tables']['messages']['Row']
+import { Database, TMsgRow, TSendMsgeArgs } from '@types'
 
 export const sendMessage = async (
-  content: TMessage['content'],
-  channel_id: TMessage['channel_id'],
-  user_id: TMessage['user_id'],
-  html: TMessage['html'],
-  reply_to_message_id: TMessage['reply_to_message_id']
+  content: TMsgRow['content'],
+  channel_id: TMsgRow['channel_id'],
+  user_id: TMsgRow['user_id'],
+  html: TMsgRow['html'],
+  reply_to_message_id: TMsgRow['reply_to_message_id']
 ) =>
   await supabaseClient
     .from('messages')
@@ -20,15 +18,15 @@ export const sendMessage = async (
       reply_to_message_id
     })
     .select()
-    .returns<TMessage[]>()
+    .returns<TMsgRow[]>()
     .throwOnError()
 
 export const sendThreadMessage = async (
-  content: TMessage['content'],
-  channel_id: TMessage['channel_id'],
-  user_id: TMessage['user_id'],
-  html: TMessage['html'],
-  thread_id: TMessage['thread_id']
+  content: TMsgRow['content'],
+  channel_id: TMsgRow['channel_id'],
+  user_id: TMsgRow['user_id'],
+  html: TMsgRow['html'],
+  thread_id: TMsgRow['thread_id']
 ) =>
   await supabaseClient
     .from('messages')
@@ -40,5 +38,5 @@ export const sendThreadMessage = async (
       thread_id
     })
     .select()
-    .returns<TMessage[]>()
+    .returns<TMsgRow[]>()
     .throwOnError()

packages/webapp/api/rpc/createThreadMessage.ts

@@ -3,7 +3,7 @@ import { Database } from '@types'
 
 type TCreateDirectMsgArg = Database['public']['Functions']['create_thread_message']['Args']
 
-export const create_thread_message = async (arg: TCreateDirectMsgArg) =>
+export const createThreadMessage = async (arg: TCreateDirectMsgArg) =>
   await supabaseClient.rpc('create_thread_message', {
     p_content: arg.p_content,
     p_html: arg.p_html,

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

@@ -1,4 +1,7 @@
 import React from 'react'
+import { MdCode, MdFormatColorText, MdOutlineEmojiEmotions } from 'react-icons/md'
+import { RiAtLine, RiCodeBlock } from 'react-icons/ri'
+import { IoSend } from 'react-icons/io5'
 import {
   Bold,
   Italic,
@@ -17,6 +20,7 @@ import {
   Printer,
   Filter
 } from '@icons'
+import { TbBlockquote } from 'react-icons/tb'
 
 const icons: { [key: string]: React.ComponentType<{ size?: number; fill?: string }> } = {
   Bold,
@@ -34,7 +38,14 @@ const icons: { [key: string]: React.ComponentType<{ size?: number; fill?: string
   Undo,
   Redo,
   Printer,
-  Filter
+  Filter,
+  MdCode,
+  RiCodeBlock,
+  MdFormatColorText,
+  MdOutlineEmojiEmotions,
+  RiAtLine,
+  IoSend,
+  TbBlockquote
 }
 
 type TIcon = {

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

@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import SendMessage from './send-message/SendMessage'
 import JoinBroadcastChannel from './JoinBroadcastChannel'
 import JoinGroupChannel from './JoinGroupChannel'
 import JoinPrivateChannel from './JoinDirectChannel'
@@ -8,6 +7,43 @@ import { useAuthStore, useChatStore } from '@stores'
 import { useChannel } from '../context/ChannelProvider'
 import SignInToJoinChannel from './SignInToJoinChannel'
 import { TChannelSettings } from '@types'
+import MessageComposer from './MessageComposer/MessageComposer'
+
+const SendMessage = () => {
+  return (
+    <MessageComposer className="chat_editor_container mb-2 flex w-full flex-col">
+      <MessageComposer.Context>
+        <MessageComposer.ReplyContext />
+        <MessageComposer.EditContext />
+        <MessageComposer.CommentContext />
+      </MessageComposer.Context>
+      <div className="rounded-md border border-gray-300 bg-transparent shadow-md">
+        <MessageComposer.Toolbar className="bg-base-300/60 h-10 rounded-t-md border-b p-2 px-1">
+          <MessageComposer.BoldButton size={10} />
+          <MessageComposer.ItalicButton size={10} />
+          <MessageComposer.StrikethroughButton size={14} />
+          <div className="divided" />
+          <MessageComposer.HyperlinkButton size={18} />
+          <MessageComposer.BulletListButton size={16} />
+          <MessageComposer.OrderedListButton size={16} />
+          <div className="divided" />
+          <MessageComposer.BlockquoteButton size={20} />
+          <MessageComposer.CodeButton size={20} />
+          <MessageComposer.CodeBlockButton size={20} />
+        </MessageComposer.Toolbar>
+
+        <MessageComposer.Input />
+
+        <MessageComposer.Actions>
+          <MessageComposer.ToggleToolbarButton />
+          <MessageComposer.EmojiButton />
+          <MessageComposer.MentionButton />
+          <MessageComposer.SendButton />
+        </MessageComposer.Actions>
+      </div>
+    </MessageComposer>
+  )
+}
 
 export const ChannelActionBar = () => {
   const { channelId } = useChannel()