fix(copilot): persist workflow drafts across navigation

Author: Bill Leoutsakos

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

@@ -764,6 +764,7 @@ export function MothershipChat({
               onCancelEdit={onCancelQueueEdit}
             />
             <UserInput
+              key={draftScopeKey}
               ref={userInputRef}
               onSubmit={onSubmit}
               isSending={isStreamActive}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -117,6 +117,7 @@ export const Panel = memo(function Panel() {
   const router = useRouter()
   const params = useParams()
   const workspaceId = params.workspaceId as string
+  const routeWorkflowId = params.workflowId as string
 
   const posthog = usePostHog()
   const posthogRef = useRef(posthog)
@@ -396,6 +397,7 @@ export const Panel = memo(function Panel() {
       },
     })
   )
+  const copilotDraftScopeKey = `${workspaceId}:workflow-copilot:${routeWorkflowId}`
 
   const handleCopilotNewChat = useCallback(() => {
     if (!activeWorkflowId || !workspaceId) return
@@ -482,7 +484,7 @@ export const Panel = memo(function Panel() {
    * skip the caller's own fallback.
    */
   useEffect(() => {
-    if (!isCopilotTabAvailable) return
+    if (!isCopilotTabAvailable || activeWorkflowId !== routeWorkflowId) return
 
     const handler = (e: Event) => {
       const detail = (e as CustomEvent<MothershipSendMessageDetail>).detail
@@ -495,7 +497,7 @@ export const Panel = memo(function Panel() {
     }
     window.addEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
     return () => window.removeEventListener(MOTHERSHIP_SEND_MESSAGE_EVENT, handler)
-  }, [isCopilotTabAvailable, setActiveTab, copilotSendMessage])
+  }, [isCopilotTabAvailable, activeWorkflowId, routeWorkflowId, setActiveTab, copilotSendMessage])
 
   useEffect(() => {
     if (activeTab !== 'copilot') return
@@ -847,7 +849,7 @@ export const Panel = memo(function Panel() {
 
           {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}
           <div className='flex-1 overflow-hidden pt-3'>
-            {isCopilotTabAvailable && (
+            {isCopilotTabAvailable && activeWorkflowId === routeWorkflowId && (
               <div
                 className={
                   _hasHydrated && activeTab === 'copilot'
@@ -943,6 +945,7 @@ export const Panel = memo(function Panel() {
                   onCancelQueueEdit={copilotCancelQueueEdit}
                   userId={session?.user?.id}
                   chatId={copilotResolvedChatId}
+                  draftScopeKey={copilotDraftScopeKey}
                   layout='copilot-view'
                 />
               </div>