improvement(billing): show the Chat plan card above the composer instead of redirecting on send (#9557)

* improvement(billing): show the Chat plan card above the composer instead of redirecting on send

* fix(billing): hold queued Chat sends while the plan is required

* fix(billing): resume held queued sends once Chat is allowed and keep Send now side-effect free

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-notice/chat-plan-notice.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { CHAT_PLAN_REQUIRED_UPGRADE } from '@/lib/billing/chat-plan'
+import { PlanUsageLimitDisplay } from '@/app/workspace/[workspaceId]/home/components/message-content/components/special-tags'
+import { useChatPlanRequired } from '@/app/workspace/[workspaceId]/home/hooks/use-chat-plan-required'
+
+/**
+ * The upgrade card above the composer while the workspace's plan does not include Chat, the same
+ * card run admission writes, so a free payer learns why Chat is held before sending. Render it
+ * beside every `UserInput`, which disables send on the same verdict.
+ */
+export function ChatPlanNotice() {
+  const chatPlanRequired = useChatPlanRequired()
+  if (!chatPlanRequired) return null
+
+  return (
+    <div className='mx-auto mb-2 w-full max-w-chat'>
+      <PlanUsageLimitDisplay data={CHAT_PLAN_REQUIRED_UPGRADE} />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/components/chat-plan-notice/index.ts

@@ -0,0 +1 @@
+export { ChatPlanNotice } from './chat-plan-notice'

apps/sim/app/workspace/[workspaceId]/home/components/index.ts

@@ -1,4 +1,5 @@
 export { ChatMessageAttachments } from './chat-message-attachments'
+export { ChatPlanNotice } from './chat-plan-notice'
 export { ChatSurfaceProvider, useChatSurface } from './chat-surface-context'
 export { ContextMentionIcon } from './context-mention-icon'
 export { CreditsChip } from './credits-chip'

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/index.ts

@@ -27,6 +27,7 @@ export {
   credentialTagHasVisibleCard,
   formatCredentialSubmissionMessage,
   isHttpUrl,
+  PlanUsageLimitDisplay,
   parseCredentialSubmissionMessage,
   parseCredentialSubmissionProgress,
   parseCredentialTagBody,

apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx

@@ -3500,7 +3500,7 @@ interface PlanUsageLimitDisplayProps {
  * The payer's plan limit, or a free plan that does not include Chat: the card links to where
  * the plan or the limit can change, and a workspace's plan to its upgrade page.
  */
-function PlanUsageLimitDisplay({ data }: PlanUsageLimitDisplayProps) {
+export function PlanUsageLimitDisplay({ data }: PlanUsageLimitDisplayProps) {
   const { data: session } = useSession()
   const hostContext = useOptionalWorkspaceHostContext()
   const organizationContext = useOptionalOrganizationContext()

apps/sim/app/workspace/[workspaceId]/home/components/mothership-chat/mothership-chat.tsx

@@ -33,6 +33,7 @@ import { inter } from '@/app/_styles/fonts/inter/inter'
 import { FindBar } from '@/app/workspace/[workspaceId]/components/find-bar'
 import { MessageActions } from '@/app/workspace/[workspaceId]/components/message-actions'
 import { ChatMessageAttachments } from '@/app/workspace/[workspaceId]/home/components/chat-message-attachments'
+import { ChatPlanNotice } from '@/app/workspace/[workspaceId]/home/components/chat-plan-notice'
 import { ChatSurfaceProvider } from '@/app/workspace/[workspaceId]/home/components/chat-surface-context'
 import {
   assistantMessageHasRenderableContent,
@@ -1033,6 +1034,7 @@ export function MothershipChat({
         >
           <div className={styles.footerInner}>
             <ComputerUseActivity />
+            {!isLoading && <ChatPlanNotice />}
             <QueuedMessages
               messageQueue={messageQueue}
               editingQueuedId={editingQueuedId}

apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx

@@ -35,7 +35,7 @@ import { InputToolbar } from '@/app/workspace/[workspaceId]/home/components/user
 import type { ModelSelectorOptions } from '@/app/workspace/[workspaceId]/home/components/user-input/components/model-selector'
 import { usePromptHistory } from '@/app/workspace/[workspaceId]/home/components/user-input/hooks/use-prompt-history'
 import { handleMothershipAddContextEvent } from '@/app/workspace/[workspaceId]/home/components/user-input/mothership-context-event'
-import { useChatPlanGate } from '@/app/workspace/[workspaceId]/home/hooks/use-chat-plan-gate'
+import { useChatPlanRequired } from '@/app/workspace/[workspaceId]/home/hooks/use-chat-plan-required'
 import type {
   ChatMessage,
   FileAttachmentForApi,
@@ -316,10 +316,12 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   }, [editor.contexts])
 
   const hasAdditionalAttachments = Boolean(attachments)
+  const chatPlanRequired = useChatPlanRequired()
   const canSubmit =
     (editor.value.trim().length > 0 || hasFiles || hasAdditionalAttachments) &&
     !isSending &&
-    !hasUploadingFiles
+    !hasUploadingFiles &&
+    !chatPlanRequired
 
   /**
    * Sync the editor when the `defaultValue` prop changes post-mount — e.g.
@@ -508,9 +510,6 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     textareaRef.current?.focus()
   }
 
-  /** Refuses a send the workspace plan excludes here, before `onSubmit`, so the draft survives. */
-  const stopSendWithoutChatPlan = useChatPlanGate()
-
   /** Empties the text, chips, attachments, transcript, and the saved draft in one step. */
   const clearComposer = useCallback(() => {
     history.reset()
@@ -531,7 +530,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
   }, [resetTranscript, history.reset])
 
   const handleSubmit = useCallback(() => {
-    if (stopSendWithoutChatPlan()) return
+    if (chatPlanRequired) return
     const currentFiles = filesRef.current
     const currentEditor = editorRef.current
 
@@ -557,7 +556,7 @@ const UserInputImpl = forwardRef<UserInputHandle, UserInputProps>(function UserI
     )
     if (accepted === false) return
     clearComposer()
-  }, [stopSendWithoutChatPlan, onSubmit, clearComposer])
+  }, [chatPlanRequired, onSubmit, clearComposer])
 
   /**
    * Enter policy for the editor: mirror canSubmit's uploading guard (Enter

apps/sim/app/workspace/[workspaceId]/home/home.tsx

@@ -41,6 +41,7 @@ import { useMarkMothershipChatRead } from '@/hooks/queries/mothership-chats'
 import { useOAuthReturnRouter } from '@/hooks/use-oauth-return'
 import type { ChatContext } from '@/stores/panel'
 import {
+  ChatPlanNotice,
   ChatSurfaceProvider,
   CreditsChip,
   MothershipChat,
@@ -442,6 +443,7 @@ function HomeContent({ chatId, userName, userId }: HomeProps) {
                 What should we get done{firstName ? `, ${firstName}` : ''}?
               </h1>
               <div ref={initialViewInputRef} className='relative w-full max-w-chat'>
+                <ChatPlanNotice />
                 <ChatSurfaceProvider
                   userId={userId}
                   onContextAdd={handleContextAdd}

apps/sim/app/workspace/[workspaceId]/home/hooks/use-chat-plan-gate.ts

@@ -0,0 +1,15 @@
+'use client'
+
+import { useOptionalWorkspaceHostContext } from '@/app/workspace/[workspaceId]/providers/workspace-host-provider'
+
+/**
+ * Whether this workspace's payer may not use Chat, so the composer shows the upgrade card and
+ * holds sends that run admission would refuse.
+ *
+ * The verdict is the host context's `features.chat`, which the server resolves with the same
+ * check admission runs. A surface without a workspace host (an organization conversation), or a
+ * context that predates the flag, is not held here; admission still answers it with the card.
+ */
+export function useChatPlanRequired(): boolean {
+  return useOptionalWorkspaceHostContext()?.features?.chat === false
+}