@base44/superagent-native 0.0.1 → 0.0.3

package/src/ChannelsPanel.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo, useState } from 'react';
-import { ActivityIndicator, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { createThemedStyles, themedColor } from './theme';
+import { ActivityIndicator, Pressable, Text, TextInput, View } from 'react-native';
 import {
   CheckCircle2,
   Copy,
@@ -60,9 +61,10 @@ export function ChannelsPanel({
 }) {
   const imessage = channelStatus?.imessage;
   const telegram = channelStatus?.telegram;
-  const line = channelStatus?.line;
   const whatsapp = channelStatus?.whatsapp;
-  const supportedCount = 4;
+  // LINE is hidden for now — its connection status isn't wired on native yet
+  // (no runtime status route), so it would always show as disconnected.
+  const supportedCount = 3;
 
   return (
     <View style={editorShellStyles.settingsStack}>
@@ -73,7 +75,7 @@ export function ChannelsPanel({
             <Text style={editorShellStyles.panelSubtitle}>Messaging surfaces this agent can use.</Text>
           </View>
           <View style={channelStyles.headerActions}>
-            {isLoading ? <ActivityIndicator color="#FF5A1F" size="small" /> : null}
+            {isLoading ? <ActivityIndicator color={themedColor('#FF5A1F')} size="small" /> : null}
             {onRefreshChannels ? (
               <Pressable
                 accessibilityLabel="Refresh channels"
@@ -86,7 +88,7 @@ export function ChannelsPanel({
                   pressed && styles.pressed,
                 ]}
               >
-                <RefreshCw color="#F4F4F5" size={17} strokeWidth={2.4} />
+                <RefreshCw color={themedColor('#F4F4F5')} size={17} strokeWidth={2.4} />
               </Pressable>
             ) : null}
             <Text style={editorShellStyles.countBadge}>{supportedCount}</Text>
@@ -96,9 +98,11 @@ export function ChannelsPanel({
         <View style={channelStyles.stack}>
           <WhatsAppChannel
             agentId={agent.id}
+            connected={!!whatsapp?.connected}
             isBusy={connectingChannelId === 'whatsapp'}
             isReady={!!whatsapp?.connectUrl}
             onOpenWhatsApp={onOpenWhatsApp}
+            userHandle={whatsapp?.userHandle ?? null}
           />
           <IMessageChannel
             agentId={agent.id}
@@ -117,14 +121,8 @@ export function ChannelsPanel({
             onSetupTelegram={onSetupTelegram}
             telegram={telegram}
           />
-          <LineChannel
-            agentId={agent.id}
-            isBusy={connectingChannelId === 'line'}
-            line={line}
-            onGenerateLineCode={onGenerateLineCode}
-            onOpenLine={onOpenLine}
-            onShareLineCode={onShareLineCode}
-          />
+          {/* LINE hidden for now — real connection status isn't wired on native
+              yet (no runtime status route). Re-add <LineChannel/> once it is. */}
         </View>
       </View>
     </View>
@@ -133,32 +131,54 @@ export function ChannelsPanel({
 
 function WhatsAppChannel({
   agentId,
+  connected,
   isBusy,
   isReady,
   onOpenWhatsApp,
+  userHandle,
 }: {
   agentId: string;
+  connected: boolean;
   isBusy: boolean;
   isReady: boolean;
   onOpenWhatsApp?: SuperagentHomeScreenProps['onOpenWhatsApp'];
+  userHandle?: string | null;
 }) {
+  // The handler builds the connect URL on press, so don't gate on a preloaded
+  // connectUrl — it's missing before status loads / after a failed refresh even
+  // though pressing the button would work.
+  const openButton = (
+    <ChannelButton
+      disabled={!onOpenWhatsApp || isBusy}
+      icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
+      isBusy={isBusy}
+      label="Open WhatsApp"
+      onPress={() => onOpenWhatsApp?.({ agentId })}
+    />
+  );
+
   return (
     <ChannelCard
       accent="#25D366"
-      body="Open WhatsApp with the generated activation message for this Superagent."
-      icon={<MessageCircle color="#111111" size={20} strokeWidth={2.45} />}
-      status={isReady ? 'Setup link ready' : 'Needs auth token'}
+      body={connected
+        ? 'Connected and active via WhatsApp.'
+        : 'Open WhatsApp with the generated activation message for this Superagent.'}
+      icon={<MessageCircle color={themedColor('#111111')} size={20} strokeWidth={2.45} />}
+      status={connected ? 'Active' : isReady ? 'Setup link ready' : 'Tap to open setup'}
       title="WhatsApp"
     >
-      <View style={channelStyles.actionRow}>
-        <ChannelButton
-          disabled={!isReady || !onOpenWhatsApp || isBusy}
-          icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
-          isBusy={isBusy}
-          label="Open WhatsApp"
-          onPress={() => onOpenWhatsApp?.({ agentId })}
-        />
-      </View>
+      {connected ? (
+        <View style={channelStyles.connectedBox}>
+          <View style={channelStyles.connectedTitleRow}>
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
+            <Text style={channelStyles.connectedTitle}>WhatsApp connection</Text>
+          </View>
+          {userHandle ? <Text style={channelStyles.connectedBody}>From: {userHandle}</Text> : null}
+          <View style={channelStyles.actionRow}>{openButton}</View>
+        </View>
+      ) : (
+        <View style={channelStyles.actionRow}>{openButton}</View>
+      )}
     </ChannelCard>
   );
 }
@@ -211,7 +231,7 @@ function IMessageChannel({
       {imessage?.connected ? (
         <View style={channelStyles.connectedBox}>
           <View style={channelStyles.connectedTitleRow}>
-            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
             <Text style={channelStyles.connectedTitle}>iMessage connection</Text>
           </View>
           {phoneNumber ? <Text style={channelStyles.connectedBody}>Number: {phoneNumber}</Text> : null}
@@ -219,7 +239,7 @@ function IMessageChannel({
             <ChannelButton
               danger
               disabled={!onDisconnectIMessage || isBusy}
-              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              icon={<Unplug color={themedColor('#FCA5A5')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Disconnect"
               onPress={() => onDisconnectIMessage?.({ agentId })}
@@ -250,14 +270,14 @@ function IMessageChannel({
               <>
                 <ChannelButton
                   disabled={!onOpenIMessage || isBusy}
-                  icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                  icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
                   label="Open Messages"
                   onPress={() => onOpenIMessage?.({ agentId, ...activation })}
                 />
                 <ChannelButton
                   secondary
                   disabled={!onShareIMessageCode}
-                  icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+                  icon={<Copy color={themedColor('#F4F4F5')} size={15} strokeWidth={2.4} />}
                   label="Share code"
                   onPress={() => onShareIMessageCode?.({ agentId, ...activation })}
                 />
@@ -316,14 +336,14 @@ function TelegramChannel({
       {telegram?.connected ? (
         <View style={channelStyles.connectedBox}>
           <View style={channelStyles.connectedTitleRow}>
-            <CheckCircle2 color="#34D399" size={17} strokeWidth={2.4} />
+            <CheckCircle2 color={themedColor('#34D399')} size={17} strokeWidth={2.4} />
             <Text style={channelStyles.connectedTitle}>{botTitle}</Text>
           </View>
           {telegram.botUsername ? <Text style={channelStyles.connectedBody}>@{telegram.botUsername}</Text> : null}
           <View style={channelStyles.actionRow}>
             {telegram.botLink ? (
               <ChannelButton
-                icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+                icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
                 label="Open bot"
                 onPress={() => onOpenTelegram?.({ agentId, url: telegram.botLink || '' })}
               />
@@ -331,7 +351,7 @@ function TelegramChannel({
             <ChannelButton
               danger
               disabled={!onDisconnectTelegram || isBusy}
-              icon={<Unplug color="#FCA5A5" size={15} strokeWidth={2.4} />}
+              icon={<Unplug color={themedColor('#FCA5A5')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Disconnect"
               onPress={() => onDisconnectTelegram?.({ agentId })}
@@ -354,7 +374,7 @@ function TelegramChannel({
               }
             }}
             placeholder="123456789:AA..."
-            placeholderTextColor="#71717A"
+            placeholderTextColor={themedColor('#71717A')}
             style={channelStyles.tokenInput}
             value={tokenText}
           />
@@ -362,7 +382,7 @@ function TelegramChannel({
           <View style={channelStyles.actionRow}>
             <ChannelButton
               disabled={!onSetupTelegram || isBusy}
-              icon={<CheckCircle2 color="#111111" size={15} strokeWidth={2.4} />}
+              icon={<CheckCircle2 color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
               isBusy={isBusy}
               label="Connect bot"
               onPress={setupTelegram}
@@ -405,13 +425,13 @@ function LineChannel({
           <Text selectable style={channelStyles.activationCode}>{activation.code}</Text>
           <View style={channelStyles.actionRow}>
             <ChannelButton
-              icon={<ExternalLink color="#111111" size={15} strokeWidth={2.4} />}
+              icon={<ExternalLink color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
               label="Open LINE"
               onPress={() => onOpenLine?.({ agentId, url: activation.addFriendUrl })}
             />
             <ChannelButton
               secondary
-              icon={<Copy color="#F4F4F5" size={15} strokeWidth={2.4} />}
+              icon={<Copy color={themedColor('#F4F4F5')} size={15} strokeWidth={2.4} />}
               label="Share code"
               onPress={() => onShareLineCode?.({ agentId, ...activation })}
             />
@@ -421,7 +441,7 @@ function LineChannel({
         <View style={channelStyles.actionRow}>
           <ChannelButton
             disabled={!onGenerateLineCode || isBusy}
-            icon={<RefreshCw color="#111111" size={15} strokeWidth={2.4} />}
+            icon={<RefreshCw color={themedColor('#111111')} size={15} strokeWidth={2.4} />}
             isBusy={isBusy}
             label="Generate code"
             onPress={() => onGenerateLineCode?.({ agentId })}
@@ -496,7 +516,7 @@ function ChannelButton({
         pressed && styles.pressed,
       ]}
     >
-      {isBusy ? <ActivityIndicator color={danger || secondary ? '#F4F4F5' : '#111111'} size="small" /> : icon}
+      {isBusy ? <ActivityIndicator color={danger || secondary ? themedColor('#F4F4F5') : themedColor('#111111')} size="small" /> : icon}
       <Text style={[
         channelStyles.buttonText,
         secondary && channelStyles.buttonTextSecondary,
@@ -515,7 +535,7 @@ function extractTelegramToken(value: string) {
   return TELEGRAM_TOKEN_SEARCH.exec(trimmed)?.[0] ?? null;
 }
 
-const channelStyles = StyleSheet.create({
+const channelStyles = createThemedStyles({
   actionRow: {
     flexDirection: 'row',
     flexWrap: 'wrap',

package/src/ConversationChat.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { themedColor } from './theme';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 
 import { ConversationComposer } from './ConversationComposer';
@@ -46,7 +47,7 @@ export function ConversationChat({
   availableConnectors?: SuperagentConnector[];
   conversation: ConversationState;
   currentUserAvatarUrl?: string | null;
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onImportFromDrive?: SuperagentMediaPicker;
   onCopyMessage?: SuperagentCopyMessageInput;
   onPickFiles?: SuperagentMediaPicker;
@@ -63,10 +64,23 @@ export function ConversationChat({
   const [draft, setDraft] = useState('');
   const [attachments, setAttachments] = useState<SuperagentMediaAttachment[]>([]);
   const [replyTo, setReplyTo] = useState<SuperagentReplyTo | null>(null);
-  const canSend = (draft.trim().length > 0 || attachments.length > 0) && !conversation.isSending;
+  // Conversation failed to initialize (apiClient path): no conversation id to send
+  // against, so block sends rather than clear the composer and drop the text.
+  const conversationUnavailable = Boolean(conversation.initError && !conversation.conversationId);
+  const canSend = (draft.trim().length > 0 || attachments.length > 0)
+    && !conversation.isSending
+    && !conversation.isLoading
+    && !conversationUnavailable;
   const displayedMessages = useMemo(
-    () => (conversation.messages.length > 0 ? conversation.messages : [createWelcomeMessage(agent)]),
-    [agent, conversation.messages],
+    () => {
+      if (conversation.messages.length > 0) return conversation.messages;
+      // While the real conversation is still loading, don't fabricate a welcome
+      // bubble — it would render next to the loading panel as if the agent already
+      // sent an intro.
+      if (conversation.isLoading) return [];
+      return [createWelcomeMessage(agent)];
+    },
+    [agent, conversation.messages, conversation.isLoading],
   );
   const tailMessage = displayedMessages[displayedMessages.length - 1];
   const tailMessageId = tailMessage ? getMessageAutoScrollId(tailMessage, displayedMessages.length - 1) : null;
@@ -103,18 +117,29 @@ export function ConversationChat({
   const sendMessage = useCallback(async () => {
     const selectedAttachments = attachments;
     const selectedReplyTo = replyTo;
+    const selectedDraft = draft;
     const content = draft.trim() || buildAttachmentPrompt(selectedAttachments);
-    if ((!content && selectedAttachments.length === 0) || conversation.isSending) return;
+    // Don't send (and clear the composer) until the conversation is ready — while
+    // it's still loading or failed to init the hook can't reach the server and
+    // would drop the text.
+    if ((!content && selectedAttachments.length === 0) || conversation.isSending || conversation.isLoading || conversationUnavailable) return;
 
     setDraft('');
     setAttachments([]);
     setReplyTo(null);
 
-    await conversation.sendMessage(content, {
+    const delivered = await conversation.sendMessage(content, {
       fileUrls: selectedAttachments.map((attachment) => attachment.url),
       replyTo: selectedReplyTo ?? undefined,
     });
-  }, [attachments, conversation, draft, replyTo]);
+    if (!delivered) {
+      // The send failed before reaching the conversation — restore what the user
+      // had typed (unless they've already started a new draft in the meantime).
+      setDraft((current) => current || selectedDraft);
+      setAttachments((current) => (current.length > 0 ? current : selectedAttachments));
+      setReplyTo((current) => current ?? selectedReplyTo);
+    }
+  }, [attachments, conversation, conversationUnavailable, draft, replyTo]);
 
   const addAttachments = useCallback((incoming: SuperagentMediaAttachment[]) => {
     setAttachments((current) => [...current, ...incoming].slice(0, MAX_ATTACHMENTS));
@@ -125,7 +150,7 @@ export function ConversationChat({
   }, []);
 
   const replyToMessage = useCallback((message: SuperagentMessage) => {
-    const content = message.content.trim();
+    const content = message.content?.trim();
     if (!content) return;
     setReplyTo({
       content,
@@ -133,6 +158,18 @@ export function ConversationChat({
     });
   }, []);
 
+  const composerContext = useMemo(
+    () => ({ agentId: agent.id, conversationId: conversation.conversationId }),
+    [agent.id, conversation.conversationId],
+  );
+
+  const clearReply = useCallback(() => setReplyTo(null), []);
+
+  const removeAttachment = useCallback(
+    (index: number) => setAttachments((current) => current.filter((_, itemIndex) => itemIndex !== index)),
+    [],
+  );
+
   return (
     <>
       <ScrollView
@@ -167,17 +204,17 @@ export function ConversationChat({
       <ConversationComposer
         attachments={attachments}
         canSend={canSend}
-        context={{ agentId: agent.id, conversationId: conversation.conversationId }}
+        context={composerContext}
         draft={draft}
         isSending={conversation.isSending}
         onAddAttachments={addAttachments}
         onAppendTranscript={appendTranscript}
         onChangeDraft={setDraft}
-        onClearReply={() => setReplyTo(null)}
+        onClearReply={clearReply}
         onImportFromDrive={onImportFromDrive}
         onPickFiles={onPickFiles}
         onPickPhotos={onPickPhotos}
-        onRemoveAttachment={(index) => setAttachments((current) => current.filter((_, itemIndex) => itemIndex !== index))}
+        onRemoveAttachment={removeAttachment}
         onSend={sendMessage}
         onStartLiveVoice={onStartLiveVoice}
         onStartVoiceInput={onStartVoiceInput}
@@ -206,7 +243,7 @@ function ConversationStates({ conversation }: { conversation: ConversationState
 function LoadingPanel() {
   return (
     <View style={conversationStyles.statePanel}>
-      <ActivityIndicator color="#FF5A1F" size="small" />
+      <ActivityIndicator color={themedColor('#FF5A1F')} size="small" />
       <Text style={conversationStyles.statePanelText}>Loading conversation...</Text>
     </View>
   );

package/src/ConversationComposer.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import { themedColor } from './theme';
 import { Alert, Pressable, Text, TextInput, View } from 'react-native';
 import {
   AudioLines,
@@ -174,7 +175,7 @@ export function ConversationComposer({
           onChangeText={onChangeDraft}
           onFocus={() => setIsAttachmentMenuOpen(false)}
           placeholder="Ask Superagent"
-          placeholderTextColor="#A1A1AA"
+          placeholderTextColor={themedColor('#A1A1AA')}
           style={composerStyles.input}
           textAlignVertical="top"
           value={draft}
@@ -185,7 +186,8 @@ export function ConversationComposer({
           isLiveVoiceActive={liveVoiceState === 'processing'}
           isVoiceInputActive={voiceState === 'processing'}
           onSend={onSend}
-          onStartLiveVoice={onStartLiveVoice ? startLiveVoice : onStartVoiceInput ? startVoiceInput : undefined}
+          onStartVoice={context.conversationId ? (onStartLiveVoice ? startLiveVoice : onStartVoiceInput ? startVoiceInput : undefined) : undefined}
+          voiceMode={context.conversationId ? (onStartLiveVoice ? 'live' : onStartVoiceInput ? 'input' : null) : null}
           onStop={onStop}
           isSending={isSending}
         />
@@ -266,7 +268,7 @@ function AttachmentMenuItem({
       ]}
     >
       <View style={composerStyles.attachmentMenuIcon}>
-        <Icon color={disabled ? '#8E8E93' : '#F4F4F5'} size={22} strokeWidth={2.2} />
+        <Icon color={disabled ? themedColor('#8E8E93') : themedColor('#F4F4F5')} size={22} strokeWidth={2.2} />
       </View>
       <Text style={[composerStyles.attachmentMenuItemText, disabled && composerStyles.attachmentMenuItemTextDisabled]}>
         {label}
@@ -281,7 +283,7 @@ function ReplyPreview({ onClear, replyTo }: { onClear: () => void; replyTo: Supe
       <View style={composerStyles.replyPreviewMarker} />
       <Text numberOfLines={2} style={composerStyles.replyPreviewText}>{replyTo.content}</Text>
       <Pressable accessibilityLabel="Clear reply" accessibilityRole="button" onPress={onClear} style={composerStyles.replyPreviewClose}>
-        <X color="#F4F4F5" size={16} strokeWidth={2.6} />
+        <X color={themedColor('#F4F4F5')} size={16} strokeWidth={2.6} />
       </Pressable>
     </View>
   );
@@ -321,7 +323,8 @@ function ComposerActionButton({
   isSending,
   isVoiceInputActive,
   onSend,
-  onStartLiveVoice,
+  onStartVoice,
+  voiceMode,
   onStop,
 }: {
   canSend: boolean;
@@ -330,28 +333,31 @@ function ComposerActionButton({
   isSending: boolean;
   isVoiceInputActive: boolean;
   onSend: () => void;
-  onStartLiveVoice?: () => void;
+  onStartVoice?: () => void;
+  voiceMode: 'live' | 'input' | null;
   onStop: () => void;
 }) {
   if (isSending) {
     return (
       <Pressable accessibilityLabel="Stop Superagent" accessibilityRole="button" onPress={onStop} style={composerStyles.stopButton}>
-        <Square color="#111111" fill="#111111" size={17} strokeWidth={2.2} />
+        <Square color={themedColor('#111111')} fill={themedColor('#111111')} size={17} strokeWidth={2.2} />
       </Pressable>
     );
   }
 
   if (isDraftEmpty) {
-    const disabled = !onStartLiveVoice;
+    const disabled = !onStartVoice;
+    const isActive = voiceMode === 'live' ? isLiveVoiceActive : isVoiceInputActive;
+    const label = voiceMode === 'input' ? 'Start voice input' : 'Start Live Voice';
     return (
-      <Pressable accessibilityLabel="Start Live Voice" accessibilityRole="button" disabled={disabled} onPress={onStartLiveVoice} style={({ pressed }) => [
+      <Pressable accessibilityLabel={label} accessibilityRole="button" disabled={disabled} onPress={onStartVoice} style={({ pressed }) => [
         composerStyles.sendButton,
         composerStyles.liveActionButton,
-        (isLiveVoiceActive || isVoiceInputActive) && composerStyles.activeButton,
+        isActive && composerStyles.activeButton,
         disabled && composerStyles.sendButtonDisabled,
         pressed && styles.pressed,
       ]}>
-        <AudioLines color={disabled ? '#8E8E93' : '#F4F4F5'} size={21} strokeWidth={2.4} />
+        <AudioLines color={disabled ? themedColor('#8E8E93') : themedColor('#F4F4F5')} size={21} strokeWidth={2.4} />
       </Pressable>
     );
   }
@@ -362,7 +368,7 @@ function ComposerActionButton({
       !canSend && composerStyles.sendButtonDisabled,
       pressed && styles.pressed,
     ]}>
-      <Send color={canSend ? '#111111' : '#8E8E93'} size={19} strokeWidth={2.6} />
+      <Send color={canSend ? themedColor('#111111') : themedColor('#8E8E93')} size={19} strokeWidth={2.6} />
     </Pressable>
   );
 }

package/src/ConversationMessageList.tsx

@@ -34,7 +34,7 @@ export function ConversationMessageList({
   conversationId: string | null;
   currentUserAvatarUrl?: string | null;
   messages: SuperagentMessage[];
-  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | string | void> | boolean | string | void;
   onCopyMessage?: SuperagentCopyMessageInput;
   onDeleteMessage?: (messageId: string) => Promise<boolean> | boolean;
   onReplyMessage?: (message: SuperagentMessage) => void;

package/src/ConversationScreen.tsx

@@ -26,11 +26,13 @@ export function ConversationScreen({
   connectedConnectors,
   connectingConnectorId,
   currentUserAvatarUrl,
+  currentUserId,
   fileLoadError,
   fileLoadFailed,
   filePaths,
   isLoadingAgentSettings,
   isLoadingAutomations,
+  isLoadingChannels,
   isLoadingCollaborators,
   isLoadingConnectors,
   isLoadingFiles,
@@ -101,6 +103,7 @@ export function ConversationScreen({
   connectedConnectors: SuperagentHomeScreenProps['connectedConnectors'];
   connectingConnectorId: SuperagentHomeScreenProps['connectingConnectorId'];
   currentUserAvatarUrl: SuperagentHomeScreenProps['currentUserAvatarUrl'];
+  currentUserId: SuperagentHomeScreenProps['currentUserId'];
   fileLoadError: SuperagentHomeScreenProps['fileLoadError'];
   fileLoadFailed: SuperagentHomeScreenProps['fileLoadFailed'];
   filePaths: SuperagentHomeScreenProps['filePaths'];
@@ -177,6 +180,7 @@ export function ConversationScreen({
   const conversation = useSuperagentConversation({
     agentId: agent.id,
     apiClient,
+    currentUserId,
     fallbackMessages: messages,
     fallbackSending: isSending,
     onAgentMessageDone,
@@ -246,6 +250,7 @@ export function ConversationScreen({
           fileLoadFailed={fileLoadFailed}
           filePaths={filePaths}
           isLoadingAgentSettings={isLoadingAgentSettings}
+          isLoadingChannels={isLoadingChannels}
           isLoadingCollaborators={isLoadingCollaborators}
           isLoadingFiles={isLoadingFiles}
           isLoadingAutomations={isLoadingAutomations}