feat: require login before sending messages, allow typing in composer

Author: HMarzban

packages/webapp/components/TipTap/extentions/plugins/headingButtonsPlugin.ts

@@ -7,7 +7,7 @@ import * as PubSub from 'pubsub-js'
 import { copyToClipboard } from '../helper'
 import { CHAT_OPEN } from '@services/eventsHub'
 import { ChatLeftSVG, ArrowDownSVG } from '@icons'
-import { db } from '../../../../db'
+import { db } from '@db/headingCrinckleDB'
 
 // Plugin-specific types
 interface HeadingBlock {

packages/webapp/components/chatroom/ChatroomContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useEffect, useCallback } from 'react'
+import React, { createContext, useContext, useState, useEffect, useCallback, useMemo } from 'react'
 import {
   ChatroomContextValue,
   ChatroomProps,
@@ -7,6 +7,7 @@ import {
 } from './types/chatroom.types'
 import { useChannelInitialData, useMessageSubscription } from '@components/chatroom/hooks'
 import { Modal, ModalContent } from '@components/ui/Dialog'
+import { useChatStore } from '@stores'
 
 const ChatroomContext = createContext<ChatroomContextValue | null>(null)
 
@@ -23,9 +24,8 @@ export const ChatroomProvider: React.FC<{
   variant: keyof ChatroomVariant
   children: React.ReactNode
 }> = ({ channelId, variant, children }) => {
-  const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
-
+  const { isReadyToDisplayMessages } = useChatStore((state) => state.chatRoom)
   // Dialog state
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [dialogContent, setDialogContent] = useState<React.ReactNode>(null)
@@ -53,16 +53,20 @@ export const ChatroomProvider: React.FC<{
     setDialogConfig({})
   }, [])
 
+  const initLoadMessages = useMemo(() => {
+    return !isDbSubscriptionReady || !isChannelDataLoaded || !isReadyToDisplayMessages
+  }, [isDbSubscriptionReady, isChannelDataLoaded, isReadyToDisplayMessages])
+
   const value: ChatroomContextValue = {
     channelId,
     variant,
-    isLoading,
     error,
     isChannelDataLoaded,
     isDbSubscriptionReady,
     openDialog,
     closeDialog,
-    isDialogOpen
+    isDialogOpen,
+    initLoadMessages
   }
 
   return (

packages/webapp/components/chatroom/components/ChannelComposer/ChannelComposer.tsx

@@ -55,20 +55,14 @@ const AccessControl = () => {
 
   const channels = useChatStore((state: any) => state.channels)
 
-  // Early returns for special cases
-  if (!user) {
-    return <ChannelComposer.SignInPrompt />
-  }
-
-  if (!channelId) {
-    return null
-  }
+  if (!channelId) return null
 
   // Thread channels always allow messaging (no permission checks needed)
   if (
     (channels.has(channelId) && channels.get(channelId).type === 'THREAD') ||
     !channelInfo ||
-    channelInfo.type === 'THREAD'
+    channelInfo.type === 'THREAD' ||
+    !user
   ) {
     return <MsgComposer.Editor />
   }

packages/webapp/components/chatroom/components/MessageComposer/MessageComposer.tsx

@@ -6,6 +6,8 @@ import { MessageComposerContext } from './context/MessageComposerContext'
 import { useAuthStore, useChatStore, useStore } from '@stores'
 import { TChannelSettings } from '@types'
 import { toolbarStorage } from './helpers/toolbarStorage'
+import { getComposerState, clearComposerState, ComposerState } from '@db/messageComposerDB'
+import { SignInDialog } from '@components/ui/dialogs'
 
 import { EditorContent } from '@tiptap/react'
 import {
@@ -58,10 +60,11 @@ const MessageComposer = ({
   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 { workspaceId } = useStore((state) => state.settings)
   const editorRef = useRef<HTMLDivElement | null>(null)
   const [isToolbarOpen, setIsToolbarOpen] = useState(() => toolbarStorage.get())
   const setOrUpdateChatRoom = useChatStore((state) => state.setOrUpdateChatRoom)
+  const openDialog = useStore((state) => state.openDialog)
 
   const setEditMsgMemory = useChatStore((state) => state.setEditMessageMemory)
   const setReplyMsgMemory = useChatStore((state) => state.setReplyMessageMemory)
@@ -89,7 +92,9 @@ const MessageComposer = ({
 
   const { editor, text, html, isEmojiOnly } = useTiptapEditor({
     loading,
-    onSubmit: () => submitRef.current?.()
+    onSubmit: () => submitRef.current?.(),
+    workspaceId,
+    channelId
   })
 
   const chatChannels = useChatStore((state) => state.workspaceSettings.channels)
@@ -117,6 +122,20 @@ const MessageComposer = ({
     users.forEach((user) => user && setOrUpdateUserPresence(user.id, user))
   }, [replyMessageMemory, editMessageMemory, usersPresence, setOrUpdateUserPresence])
 
+  // Load persisted draft from IndexedDB on mount or channel change
+  useEffect(() => {
+    if (!editor || !workspaceId || !channelId) return
+
+    // Don't load draft if we're editing/replying/commenting
+    if (editMessageMemory || replyMessageMemory || commentMessageMemory) return
+
+    getComposerState(workspaceId, channelId).then((draft: ComposerState | null) => {
+      if (draft?.html) {
+        editor.chain().setContent(draft.html).focus('end').run()
+      }
+    })
+  }, [editor, workspaceId, channelId, editMessageMemory, replyMessageMemory, commentMessageMemory])
+
   // set the editor content if it is a reply message
   useEffect(() => {
     if (!editor || !editMessageMemory || editMessageMemory.channel_id !== channelId) return
@@ -130,6 +149,8 @@ const MessageComposer = ({
   // Validation helpers
   const validateSubmission = useCallback(() => {
     if (!editor || !user) return { isValid: false, error: 'Editor or user not available' }
+    const html = editor?.getHTML()
+    const text = editor?.getText()
 
     const isContentEmpty =
       !html || !text || html.replace(/<[^>]*>/g, '').trim() === '' || text.trim() === ''
@@ -138,10 +159,14 @@ const MessageComposer = ({
     if (loading) return { isValid: false, error: 'Already loading' }
 
     return { isValid: true }
-  }, [editor, user, html, text, loading])
+  }, [editor, user, loading])
 
   // Content preparation
   const prepareContent = useCallback(() => {
+    const html = editor?.getHTML()
+    const text = editor?.getText()
+    if (!html || !text) return { sanitizedHtml: '', sanitizedText: '', chunks: [] }
+
     const { sanitizedHtml, sanitizedText } = sanitizeMessageContent(html, text)
 
     if (!sanitizedHtml || !sanitizedText) {
@@ -153,7 +178,7 @@ const MessageComposer = ({
       sanitizedText,
       chunks: chunkHtmlContent(sanitizedHtml, 3000)
     }
-  }, [html, text])
+  }, [editor])
 
   // Message type handlers
   const handleThreadMessage = useCallback(
@@ -292,13 +317,21 @@ const MessageComposer = ({
       text: null,
       html: null
     })
-    // document.dispatchEvent(new CustomEvent('messages:container:scroll:down'))
+
+    // Clear IndexedDB draft
+    if (workspaceId && channelId) {
+      clearComposerState(workspaceId, channelId)
+    }
+
+    // Clear editor content
+    editor?.chain().clearContent(true).focus('start').run()
   }, [
     editor,
     replyMessageMemory,
     editMessageMemory,
     commentMessageMemory,
     channelId,
+    workspaceId,
     setReplyMsgMemory,
     setEditMsgMemory,
     setCommentMsgMemory,
@@ -325,23 +358,38 @@ const MessageComposer = ({
     []
   )
 
+  const openSignInModalHandler = useCallback(() => {
+    // append search query to the URL, for when they back to the page they will be redirected to the channel
+    const url = new URL(window.location.href)
+    url.searchParams.set('open_heading_chat', channelId)
+    window.history.pushState({}, '', url.href)
+
+    openDialog(<SignInDialog />, { size: 'sm', dismissible: true })
+  }, [openDialog])
+
   // Main submit function - now clean and focused
   const submitMessage = useCallback(
     async (e?: any) => {
       e?.preventDefault()
       editor?.view.focus()
 
+      // 0. check if user is signed in
+      if (!user) {
+        openSignInModalHandler()
+        return
+      }
+
       // 1. Validate
       const validation = validateSubmission()
       if (!validation.isValid) return
 
       try {
         // 2. Prepare content
         const { sanitizedHtml, sanitizedText, chunks } = prepareContent()
-        const { htmlChunks, textChunks } = chunks
+        const { htmlChunks, textChunks } = chunks as { htmlChunks: string[]; textChunks: string[] }
 
-        // 3. Update user presence
-        updateUserPresence()
+        // 3. Update user presence // TODO: review this part, we do not need it anymore
+        // updateUserPresence()
 
         // 4. Send message(s)
         if (htmlChunks.length === 0) {
@@ -357,6 +405,7 @@ const MessageComposer = ({
       }
     },
     [
+      user,
       editor,
       validateSubmission,
       prepareContent,
@@ -372,21 +421,6 @@ const MessageComposer = ({
     submitRef.current = () => submitMessage()
   }, [submitMessage])
 
-  // Handle Draft Memory
-  useEffect(() => {
-    return () => {
-      // Save draft before unmounting
-      const html = editor?.getHTML()
-      const text = editor?.getText()
-      if (html && text) {
-        setMsgDraftMemory(channelId, {
-          text: text,
-          html: html
-        })
-      }
-    }
-  }, [editor, channelId, setMsgDraftMemory])
-
   useEffect(() => {
     const setAttributes = () => {
       const firstChild = editorRef.current?.firstChild as HTMLElement | null
@@ -429,7 +463,7 @@ const MessageComposer = ({
     replyMessageMemory,
     editMessageMemory,
     commentMessageMemory,
-    messageDraftMemory,
+    messageDraftMemory: messageDraftMemory ?? null,
     setEditMsgMemory,
     setReplyMsgMemory,
     setCommentMsgMemory,

packages/webapp/components/chatroom/components/MessageComposer/hooks/useTiptapEditor.ts

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react'
 import { useEditor, Editor } from '@tiptap/react'
 import { TextSelection } from 'prosemirror-state'
+import { setComposerStateDebounced } from '@db/messageComposerDB'
 
 // Code and Syntax Highlighting
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
@@ -45,10 +46,14 @@ import { isOnlyEmoji } from '@utils/emojis'
 
 export const useTiptapEditor = ({
   loading,
-  onSubmit
+  onSubmit,
+  workspaceId,
+  channelId
 }: {
   loading: boolean
   onSubmit: () => void
+  workspaceId?: string
+  channelId: string
 }) => {
   const [html, setHtml] = useState('')
   const [text, setText] = useState('')
@@ -97,10 +102,17 @@ export const useTiptapEditor = ({
       ],
       onUpdate: ({ editor }) => {
         const text = editor?.getText()
-        setHtml(editor?.getHTML())
-        setText(editor?.getText())
+        const html = editor?.getHTML()
+
+        setHtml(html)
+        setText(text)
         setIsEmojiOnly(isOnlyEmoji(text))
         if (text.length) handleTypingIndicator(TypingIndicatorType.StartTyping)
+
+        // Persist draft to IndexedDB with debouncing (500ms)
+        if (workspaceId && channelId && text && html) {
+          setComposerStateDebounced(workspaceId, channelId, { text, html })
+        }
       },
       onBlur: () => {
         if (text.length) handleTypingIndicator(TypingIndicatorType.StopTyping)

packages/webapp/components/chatroom/components/MessageFeed/MessageFeedContext.tsx

@@ -7,6 +7,7 @@ import {
   useHighlightMessage
 } from '@components/chatroom/hooks'
 import type { Virtualizer } from '@tanstack/react-virtual'
+import { useChatStore } from '@stores'
 
 interface MessageFeedContextValue {
   isLoadingMore: boolean

packages/webapp/components/chatroom/components/MessageFeed/components/OverLayers/MessageFeedLoading.tsx

@@ -1,25 +1,18 @@
 import { useChatroomContext } from '@components/chatroom/ChatroomContext'
-import { useMemo } from 'react'
-import { useChatStore } from '@stores'
 
 interface Props {
   children: React.ReactNode
 }
 
 // Overlayer for loading state of the message feed
 export const MessageFeedLoading = ({ children }: Props) => {
-  const { isDbSubscriptionReady, isChannelDataLoaded } = useChatroomContext()
-  const { isReadyToDisplayMessages } = useChatStore((state) => state.chatRoom)
-
-  const loading = useMemo(() => {
-    return !isDbSubscriptionReady || !isChannelDataLoaded || !isReadyToDisplayMessages
-  }, [isDbSubscriptionReady, isChannelDataLoaded, isReadyToDisplayMessages])
+  const { initLoadMessages } = useChatroomContext()
 
   return (
     <>
       <div
         className="bg-base-100 absolute z-50 flex size-full items-center justify-center"
-        style={{ display: loading ? 'flex' : 'none' }}>
+        style={{ display: initLoadMessages ? 'flex' : 'none' }}>
         <div className="flex w-full items-center justify-center">
           <span className="loading loading-spinner text-primary"></span>
         </div>