norman-le · Oct 1, 2026 · Oct 1, 2026 · Oct 2, 2026 · Oct 2, 2026 · Oct 2, 2026
diff --git a/samples/conversational-agent-app/src/components/ChatArea.tsx b/samples/conversational-agent-app/src/components/ChatArea.tsx
@@ -4,13 +4,16 @@
 
 import { useState, useRef, useEffect, useCallback } from 'react'
 import { useConversationalAgent } from '../context/ConversationalAgentContext'
+import type { AvailableConnectionsResponse } from '@uipath/uipath-typescript/conversational-agent'
 import { MessageBubble } from './MessageBubble'
 import { WelcomeScreen } from './WelcomeScreen'
 import { ChatInput } from './ChatInput'
+import { ConnectionReadinessCard, type ConnectorReadiness } from './ConnectionReadinessCard'
 import { Spinner } from './Spinner'
 
 export function ChatArea() {
   const {
+    conversationalAgent,
     messages,
     currentConversation,
     selectedAgent,
@@ -23,10 +26,65 @@ export function ChatArea() {
     resolveInterrupt,
   } = useConversationalAgent()
 
+  const [connectionReadiness, setConnectionReadiness] = useState<ConnectorReadiness[] | null>(null)
+
   const [pendingMessage, setPendingMessage] = useState<string | null>(null)
   const [isLoadingMore, setIsLoadingMore] = useState(false)
   const messagesEndRef = useRef<HTMLDivElement>(null)
 
+  // Fetch connection readiness when agent changes
+  useEffect(() => {
+    if (!conversationalAgent || !selectedAgent) {
+      setConnectionReadiness(null)
+      return
+    }
+    let cancelled = false
+
+    const mapItems = (items: AvailableConnectionsResponse) => {
+      if (cancelled) return
+      if (items.length === 0) { setConnectionReadiness(null); return }
+      const readiness: ConnectorReadiness[] = items.map(item => ({
+        connectorKey: item.connectorKey,
+        connectorName: item.connectorName ?? item.connectorKey,
+        connectorImage: item.connectorImage,
+        isConfigurable: item.isConfigurable !== false,
+        currentConnectionId: item.currentConnectionId,
+        currentConnectionName: item.currentConnectionName,
+        currentConnectionState: (item.connections?.find(c => c.id === item.currentConnectionId)?.state as ConnectorReadiness['currentConnectionState'])
+          ?? (item.currentConnectionId ? 'Expired' : undefined),
+        connectionsUrl: item.connectionsUrl,
+      }))
+      const hasUnresolved = readiness.some(
+        c => c.isConfigurable && (!c.currentConnectionId || c.currentConnectionState !== 'Enabled'),
+      )
+      setConnectionReadiness(hasUnresolved ? readiness : null)
+    }
+
+    // Initial fetch, then sequential re-fetch after delay to pick up auto-bind results
+    let timerRef: ReturnType<typeof setTimeout> | undefined
+    conversationalAgent
+      .getAvailableConnections(selectedAgent.id, selectedAgent.folderId)
+      .then((items) => {
+        mapItems(items)
+        if (cancelled) return
+        return new Promise<void>((resolve) => {
+          timerRef = setTimeout(resolve, 1500)
+        })
+      })
+      .then(() => {
+        if (cancelled) return
+        return conversationalAgent
+          .getAvailableConnections(selectedAgent.id, selectedAgent.folderId)
+          .then(mapItems)
+      })
+      .catch((error) => {
+        console.warn('Failed to fetch connection readiness:', error)
+        if (!cancelled) setConnectionReadiness(null)
+      })
+
+    return () => { cancelled = true; if (timerRef) clearTimeout(timerRef) }
+  }, [conversationalAgent, selectedAgent])
+
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {
     messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
@@ -47,6 +105,7 @@ export function ChatArea() {
   }, [selectedAgent, createConversation])
 
   const handleSubmit = useCallback(async (content: string, attachments: File[]) => {
+    setConnectionReadiness(null)
     await sendMessage(content, attachments)
   }, [sendMessage])
 
@@ -90,6 +149,18 @@ export function ChatArea() {
         </div>
       </div>
 
+      {/* Connection readiness card */}
+      {connectionReadiness && conversationalAgent && selectedAgent && (
+        <ConnectionReadinessCard
+          connectors={connectionReadiness}
+          conversationalAgent={conversationalAgent}
+          agentId={selectedAgent.id}
+          folderId={selectedAgent.folderId}
+          onAllConnected={() => setConnectionReadiness(null)}
+          defaultCollapsed={messages.length > 0}
+        />
+      )}
+
       {/* Messages */}
       <div className="flex-1 overflow-y-auto">
         {messages.length === 0 ? (