@base44/superagent-native 0.0.1

package/src/ConversationChat.tsx

@@ -0,0 +1,245 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+
+import { ConversationComposer } from './ConversationComposer';
+import { ConversationMessageList } from './ConversationMessageList';
+import { TypingIndicator } from './conversationParts';
+import { conversationStyles } from './conversationStyles';
+import { buildAttachmentPrompt, MAX_ATTACHMENTS } from './mediaUtils';
+import type {
+  SuperagentAgent,
+  SuperagentConnector,
+  SuperagentConnectorActionInput,
+  SuperagentCopyMessageInput,
+  SuperagentLiveVoiceInput,
+  SuperagentMarkdownRenderer,
+  SuperagentMediaAttachment,
+  SuperagentMediaPicker,
+  SuperagentMessage,
+  SuperagentReplyTo,
+  SuperagentToolRenderers,
+  SuperagentVoiceInput,
+} from './types';
+import type { useSuperagentConversation } from './useSuperagentConversation';
+
+const MAX_CHAT_WIDTH = 900;
+
+type ConversationState = ReturnType<typeof useSuperagentConversation>;
+
+export function ConversationChat({
+  agent,
+  availableConnectors,
+  conversation,
+  currentUserAvatarUrl,
+  onConnectConnector,
+  onCopyMessage,
+  onImportFromDrive,
+  onPickFiles,
+  onPickPhotos,
+  onStartLiveVoice,
+  onStartVoiceInput,
+  onTakePhoto,
+  renderMarkdown,
+  toolRenderers,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  conversation: ConversationState;
+  currentUserAvatarUrl?: string | null;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onImportFromDrive?: SuperagentMediaPicker;
+  onCopyMessage?: SuperagentCopyMessageInput;
+  onPickFiles?: SuperagentMediaPicker;
+  onPickPhotos?: SuperagentMediaPicker;
+  onStartLiveVoice?: SuperagentLiveVoiceInput;
+  onStartVoiceInput?: SuperagentVoiceInput;
+  onTakePhoto?: SuperagentMediaPicker;
+  renderMarkdown?: SuperagentMarkdownRenderer;
+  toolRenderers?: SuperagentToolRenderers;
+}) {
+  const scrollRef = useRef<ScrollView>(null);
+  const shouldAutoScrollRef = useRef(true);
+  const lastTailMessageIdRef = useRef<string | null>(null);
+  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;
+  const displayedMessages = useMemo(
+    () => (conversation.messages.length > 0 ? conversation.messages : [createWelcomeMessage(agent)]),
+    [agent, conversation.messages],
+  );
+  const tailMessage = displayedMessages[displayedMessages.length - 1];
+  const tailMessageId = tailMessage ? getMessageAutoScrollId(tailMessage, displayedMessages.length - 1) : null;
+  const tailMessageContent = tailMessage?.content ?? '';
+
+  const scrollToBottom = useCallback((animated = true) => {
+    setTimeout(() => scrollRef.current?.scrollToEnd({ animated }), 0);
+  }, []);
+
+  useEffect(() => {
+    if (!tailMessageId) return;
+
+    const tailMessageChanged = lastTailMessageIdRef.current !== tailMessageId;
+    if (tailMessageChanged) {
+      lastTailMessageIdRef.current = tailMessageId;
+      shouldAutoScrollRef.current = true;
+    }
+
+    if (shouldAutoScrollRef.current) {
+      scrollToBottom(tailMessageChanged);
+    }
+  }, [conversation.isSending, scrollToBottom, tailMessageContent, tailMessageId]);
+
+  const pauseAutoScroll = useCallback(() => {
+    shouldAutoScrollRef.current = false;
+  }, []);
+
+  const scrollAfterContentResize = useCallback(() => {
+    if (shouldAutoScrollRef.current) {
+      scrollToBottom(false);
+    }
+  }, [scrollToBottom]);
+
+  const sendMessage = useCallback(async () => {
+    const selectedAttachments = attachments;
+    const selectedReplyTo = replyTo;
+    const content = draft.trim() || buildAttachmentPrompt(selectedAttachments);
+    if ((!content && selectedAttachments.length === 0) || conversation.isSending) return;
+
+    setDraft('');
+    setAttachments([]);
+    setReplyTo(null);
+
+    await conversation.sendMessage(content, {
+      fileUrls: selectedAttachments.map((attachment) => attachment.url),
+      replyTo: selectedReplyTo ?? undefined,
+    });
+  }, [attachments, conversation, draft, replyTo]);
+
+  const addAttachments = useCallback((incoming: SuperagentMediaAttachment[]) => {
+    setAttachments((current) => [...current, ...incoming].slice(0, MAX_ATTACHMENTS));
+  }, []);
+
+  const appendTranscript = useCallback((transcript: string) => {
+    setDraft((current) => (current ? `${current} ${transcript}` : transcript));
+  }, []);
+
+  const replyToMessage = useCallback((message: SuperagentMessage) => {
+    const content = message.content.trim();
+    if (!content) return;
+    setReplyTo({
+      content,
+      messageId: message.id,
+    });
+  }, []);
+
+  return (
+    <>
+      <ScrollView
+        ref={scrollRef}
+        contentContainerStyle={conversationStyles.scrollContent}
+        onContentSizeChange={scrollAfterContentResize}
+        onScrollBeginDrag={pauseAutoScroll}
+        onTouchStart={pauseAutoScroll}
+      >
+        <View style={[conversationStyles.messagesContainer, { maxWidth: MAX_CHAT_WIDTH }]}>
+          <ConversationStates conversation={conversation} />
+          <ConversationMessageList
+            agent={agent}
+            availableConnectors={availableConnectors}
+            conversationId={conversation.conversationId}
+            currentUserAvatarUrl={currentUserAvatarUrl}
+            messages={displayedMessages}
+            onConnectConnector={onConnectConnector}
+            onCopyMessage={onCopyMessage}
+            onDeleteMessage={conversation.deleteMessage}
+            onReplyMessage={replyToMessage}
+            renderMarkdown={renderMarkdown}
+            submitToolCallInput={conversation.submitToolCallInput}
+            toolRenderers={toolRenderers}
+          />
+          {conversation.isSending ? <TypingIndicator /> : null}
+          {conversation.queuedMessages.length > 0 ? (
+            <QueuedMessages messages={conversation.queuedMessages} />
+          ) : null}
+        </View>
+      </ScrollView>
+      <ConversationComposer
+        attachments={attachments}
+        canSend={canSend}
+        context={{ agentId: agent.id, conversationId: conversation.conversationId }}
+        draft={draft}
+        isSending={conversation.isSending}
+        onAddAttachments={addAttachments}
+        onAppendTranscript={appendTranscript}
+        onChangeDraft={setDraft}
+        onClearReply={() => setReplyTo(null)}
+        onImportFromDrive={onImportFromDrive}
+        onPickFiles={onPickFiles}
+        onPickPhotos={onPickPhotos}
+        onRemoveAttachment={(index) => setAttachments((current) => current.filter((_, itemIndex) => itemIndex !== index))}
+        onSend={sendMessage}
+        onStartLiveVoice={onStartLiveVoice}
+        onStartVoiceInput={onStartVoiceInput}
+        onStop={conversation.stop}
+        onTakePhoto={onTakePhoto}
+        replyTo={replyTo}
+      />
+    </>
+  );
+}
+
+function ConversationStates({ conversation }: { conversation: ConversationState }) {
+  return (
+    <>
+      {conversation.hasMoreMessages ? (
+        <Pressable accessibilityRole="button" onPress={conversation.loadPrevious} style={conversationStyles.loadPreviousButton}>
+          <Text style={conversationStyles.loadPreviousText}>Load previous messages</Text>
+        </Pressable>
+      ) : null}
+      {conversation.initError ? <ErrorPanel message={conversation.initError} /> : null}
+      {conversation.isLoading ? <LoadingPanel /> : null}
+    </>
+  );
+}
+
+function LoadingPanel() {
+  return (
+    <View style={conversationStyles.statePanel}>
+      <ActivityIndicator color="#FF5A1F" size="small" />
+      <Text style={conversationStyles.statePanelText}>Loading conversation...</Text>
+    </View>
+  );
+}
+
+function ErrorPanel({ message }: { message: string }) {
+  return (
+    <View style={conversationStyles.errorPanel}>
+      <Text style={conversationStyles.errorPanelTitle}>Something went wrong</Text>
+      <Text style={conversationStyles.errorPanelText}>{message}</Text>
+    </View>
+  );
+}
+
+function QueuedMessages({ messages }: { messages: Array<{ id: string; content: string }> }) {
+  return (
+    <View style={conversationStyles.queuedWrap}>
+      <Text style={conversationStyles.queuedTitle}>Queued ({messages.length})</Text>
+      {messages.map((message) => (
+        <Text key={message.id} style={conversationStyles.queuedMessage} numberOfLines={2}>{message.content}</Text>
+      ))}
+    </View>
+  );
+}
+
+function createWelcomeMessage(agent: SuperagentAgent): SuperagentMessage {
+  return {
+    id: 'welcome',
+    role: 'assistant',
+    content: `Tell ${agent.name || 'your Superagent'} what you want to get done.`,
+  };
+}
+
+function getMessageAutoScrollId(message: SuperagentMessage, index: number) {
+  return message.id ?? `${message.role}-${index}`;
+}

package/src/ConversationComposer.tsx

@@ -0,0 +1,368 @@
+import React, { useCallback, useState } from 'react';
+import { Alert, Pressable, Text, TextInput, View } from 'react-native';
+import {
+  AudioLines,
+  Camera,
+  FileText,
+  Image as ImageIcon,
+  Paperclip,
+  Plus,
+  Send,
+  Square,
+  X,
+  type LucideIcon,
+} from 'lucide-react-native';
+
+import { AttachmentPreviewStrip } from './AttachmentPreviewStrip';
+import { composerStyles } from './composerStyles';
+import { MAX_ATTACHMENTS, normalizeMediaAttachments } from './mediaUtils';
+import { showNativeActionSheet } from './nativeActionSheet';
+import { styles } from './styles';
+import type {
+  SuperagentLiveVoiceInput,
+  SuperagentMediaActionContext,
+  SuperagentMediaAttachment,
+  SuperagentMediaPicker,
+  SuperagentReplyTo,
+  SuperagentVoiceInput,
+} from './types';
+
+const MAX_CHAT_WIDTH = 900;
+
+type VoiceState = 'idle' | 'processing';
+type AttachmentAction = {
+  label: string;
+  picker: SuperagentMediaPicker;
+};
+
+export function ConversationComposer({
+  attachments,
+  canSend,
+  context,
+  draft,
+  isSending,
+  onAddAttachments,
+  onAppendTranscript,
+  onChangeDraft,
+  onClearReply,
+  onImportFromDrive,
+  onPickFiles,
+  onPickPhotos,
+  onRemoveAttachment,
+  onSend,
+  onStartLiveVoice,
+  onStartVoiceInput,
+  onStop,
+  onTakePhoto,
+  replyTo,
+}: {
+  attachments: SuperagentMediaAttachment[];
+  canSend: boolean;
+  context: SuperagentMediaActionContext;
+  draft: string;
+  isSending: boolean;
+  onAddAttachments: (attachments: SuperagentMediaAttachment[]) => void;
+  onAppendTranscript: (transcript: string) => void;
+  onChangeDraft: (value: string) => void;
+  onClearReply: () => void;
+  onImportFromDrive?: SuperagentMediaPicker;
+  onPickFiles?: SuperagentMediaPicker;
+  onPickPhotos?: SuperagentMediaPicker;
+  onRemoveAttachment: (index: number) => void;
+  onSend: () => void;
+  onStartLiveVoice?: SuperagentLiveVoiceInput;
+  onStartVoiceInput?: SuperagentVoiceInput;
+  onStop: () => void;
+  onTakePhoto?: SuperagentMediaPicker;
+  replyTo: SuperagentReplyTo | null;
+}) {
+  const [voiceState, setVoiceState] = useState<VoiceState>('idle');
+  const [liveVoiceState, setLiveVoiceState] = useState<VoiceState>('idle');
+  const [mediaError, setMediaError] = useState<string | null>(null);
+  const [isAttachmentMenuOpen, setIsAttachmentMenuOpen] = useState(false);
+
+  const addFromPicker = useCallback(async (picker: SuperagentMediaPicker | undefined) => {
+    if (!picker || attachments.length >= MAX_ATTACHMENTS) return;
+    setIsAttachmentMenuOpen(false);
+    setMediaError(null);
+    try {
+      const next = normalizeMediaAttachments(await picker(context));
+      if (next.length === 0) return;
+      onAddAttachments(next.slice(0, MAX_ATTACHMENTS - attachments.length));
+    } catch (error) {
+      setMediaError(error instanceof Error ? error.message : 'Failed to attach media');
+    }
+  }, [attachments.length, context, onAddAttachments]);
+
+  const startVoiceInput = useCallback(async () => {
+    if (!onStartVoiceInput || voiceState !== 'idle') return;
+    setMediaError(null);
+    setVoiceState('processing');
+    try {
+      const transcript = (await onStartVoiceInput(context))?.trim();
+      if (transcript) onAppendTranscript(transcript);
+      else setMediaError('No speech detected. Please try again.');
+    } catch (error) {
+      setMediaError(error instanceof Error ? error.message : 'Failed to transcribe audio');
+    } finally {
+      setVoiceState('idle');
+    }
+  }, [context, onAppendTranscript, onStartVoiceInput, voiceState]);
+
+  const startLiveVoice = useCallback(async () => {
+    if (!onStartLiveVoice || liveVoiceState !== 'idle') return;
+    setMediaError(null);
+    setLiveVoiceState('processing');
+    try {
+      await onStartLiveVoice(context);
+    } catch (error) {
+      Alert.alert(
+        'Live Voice unavailable',
+        error instanceof Error ? error.message : 'Failed to start Live Voice',
+      );
+    } finally {
+      setLiveVoiceState('idle');
+    }
+  }, [context, liveVoiceState, onStartLiveVoice]);
+
+  const canAttach = Boolean(onImportFromDrive || onPickFiles || onPickPhotos || onTakePhoto) && attachments.length < MAX_ATTACHMENTS;
+  const isDraftEmpty = draft.trim().length === 0 && attachments.length === 0;
+  const openAttachmentOptions = useCallback(() => {
+    if (!canAttach) return;
+    const actions: AttachmentAction[] = [
+      onPickFiles ? { label: 'Files', picker: onPickFiles } : null,
+      onTakePhoto ? { label: 'Camera', picker: onTakePhoto } : null,
+      onPickPhotos ? { label: 'Photos', picker: onPickPhotos } : null,
+      onImportFromDrive ? { label: 'Google Drive', picker: onImportFromDrive } : null,
+    ].filter((action): action is AttachmentAction => Boolean(action));
+
+    if (showNativeActionSheet('Add attachment', actions.map((action) => ({
+      label: action.label,
+      onPress: () => addFromPicker(action.picker),
+    })))) {
+      setIsAttachmentMenuOpen(false);
+      return;
+    }
+
+    setIsAttachmentMenuOpen((current) => !current);
+  }, [addFromPicker, canAttach, onImportFromDrive, onPickFiles, onPickPhotos, onTakePhoto]);
+
+  return (
+    <View style={composerStyles.wrap}>
+      {mediaError ? <Text style={composerStyles.errorText}>{mediaError}</Text> : null}
+      {replyTo ? <ReplyPreview replyTo={replyTo} onClear={onClearReply} /> : null}
+      <AttachmentPreviewStrip attachments={attachments} onRemove={onRemoveAttachment} />
+      <View style={[composerStyles.shell, { maxWidth: MAX_CHAT_WIDTH }]}>
+        {isAttachmentMenuOpen ? (
+          <AttachmentMenu
+            canAttach={canAttach}
+            onImportFromDrive={onImportFromDrive ? () => addFromPicker(onImportFromDrive) : undefined}
+            onPickFiles={onPickFiles ? () => addFromPicker(onPickFiles) : undefined}
+            onPickPhotos={onPickPhotos ? () => addFromPicker(onPickPhotos) : undefined}
+            onTakePhoto={onTakePhoto ? () => addFromPicker(onTakePhoto) : undefined}
+          />
+        ) : null}
+        <ToolButton
+          Icon={Plus}
+          active={isAttachmentMenuOpen}
+          disabled={!canAttach}
+          label="Add attachment"
+          onPress={openAttachmentOptions}
+        />
+        <TextInput
+          multiline
+          onChangeText={onChangeDraft}
+          onFocus={() => setIsAttachmentMenuOpen(false)}
+          placeholder="Ask Superagent"
+          placeholderTextColor="#A1A1AA"
+          style={composerStyles.input}
+          textAlignVertical="top"
+          value={draft}
+        />
+        <ComposerActionButton
+          canSend={canSend}
+          isDraftEmpty={isDraftEmpty}
+          isLiveVoiceActive={liveVoiceState === 'processing'}
+          isVoiceInputActive={voiceState === 'processing'}
+          onSend={onSend}
+          onStartLiveVoice={onStartLiveVoice ? startLiveVoice : onStartVoiceInput ? startVoiceInput : undefined}
+          onStop={onStop}
+          isSending={isSending}
+        />
+      </View>
+    </View>
+  );
+}
+
+function AttachmentMenu({
+  canAttach,
+  onImportFromDrive,
+  onPickFiles,
+  onPickPhotos,
+  onTakePhoto,
+}: {
+  canAttach: boolean;
+  onImportFromDrive?: () => void;
+  onPickFiles?: () => void;
+  onPickPhotos?: () => void;
+  onTakePhoto?: () => void;
+}) {
+  return (
+    <View style={composerStyles.attachmentMenu}>
+      <AttachmentMenuItem
+        Icon={Paperclip}
+        disabled={!canAttach || !onPickFiles}
+        label="Files"
+        onPress={onPickFiles}
+      />
+      <AttachmentMenuItem
+        Icon={Camera}
+        disabled={!canAttach || !onTakePhoto}
+        label="Camera"
+        onPress={onTakePhoto}
+      />
+      <AttachmentMenuItem
+        Icon={ImageIcon}
+        disabled={!canAttach || !onPickPhotos}
+        label="Photos"
+        onPress={onPickPhotos}
+      />
+      {onImportFromDrive ? (
+        <>
+          <Text style={composerStyles.attachmentMenuSectionLabel}>Plugins</Text>
+          <AttachmentMenuItem
+            Icon={FileText}
+            disabled={!canAttach}
+            label="Google Drive"
+            onPress={onImportFromDrive}
+          />
+        </>
+      ) : null}
+    </View>
+  );
+}
+
+function AttachmentMenuItem({
+  Icon,
+  disabled,
+  label,
+  onPress,
+}: {
+  Icon: LucideIcon;
+  disabled?: boolean;
+  label: string;
+  onPress?: () => void;
+}) {
+  return (
+    <Pressable
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      style={({ pressed }) => [
+        composerStyles.attachmentMenuItem,
+        disabled && composerStyles.disabledButton,
+        pressed && styles.pressed,
+      ]}
+    >
+      <View style={composerStyles.attachmentMenuIcon}>
+        <Icon color={disabled ? '#8E8E93' : '#F4F4F5'} size={22} strokeWidth={2.2} />
+      </View>
+      <Text style={[composerStyles.attachmentMenuItemText, disabled && composerStyles.attachmentMenuItemTextDisabled]}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+function ReplyPreview({ onClear, replyTo }: { onClear: () => void; replyTo: SuperagentReplyTo }) {
+  return (
+    <View style={composerStyles.replyPreview}>
+      <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} />
+      </Pressable>
+    </View>
+  );
+}
+
+function ToolButton({
+  Icon,
+  active,
+  disabled,
+  label,
+  onPress,
+}: {
+  Icon: LucideIcon;
+  active?: boolean;
+  disabled?: boolean;
+  label: string;
+  onPress: () => void;
+}) {
+  const iconColor = disabled ? '#8E8E93' : '#F4F4F5';
+
+  return (
+    <Pressable accessibilityLabel={label} accessibilityRole="button" disabled={disabled} onPress={onPress} style={({ pressed }) => [
+      composerStyles.iconButton,
+      active && composerStyles.activeButton,
+      disabled && composerStyles.disabledButton,
+      pressed && styles.pressed,
+    ]}>
+      <Icon color={iconColor} size={21} strokeWidth={2.4} />
+    </Pressable>
+  );
+}
+
+function ComposerActionButton({
+  canSend,
+  isDraftEmpty,
+  isLiveVoiceActive,
+  isSending,
+  isVoiceInputActive,
+  onSend,
+  onStartLiveVoice,
+  onStop,
+}: {
+  canSend: boolean;
+  isDraftEmpty: boolean;
+  isLiveVoiceActive: boolean;
+  isSending: boolean;
+  isVoiceInputActive: boolean;
+  onSend: () => void;
+  onStartLiveVoice?: () => void;
+  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} />
+      </Pressable>
+    );
+  }
+
+  if (isDraftEmpty) {
+    const disabled = !onStartLiveVoice;
+    return (
+      <Pressable accessibilityLabel="Start Live Voice" accessibilityRole="button" disabled={disabled} onPress={onStartLiveVoice} style={({ pressed }) => [
+        composerStyles.sendButton,
+        composerStyles.liveActionButton,
+        (isLiveVoiceActive || isVoiceInputActive) && composerStyles.activeButton,
+        disabled && composerStyles.sendButtonDisabled,
+        pressed && styles.pressed,
+      ]}>
+        <AudioLines color={disabled ? '#8E8E93' : '#F4F4F5'} size={21} strokeWidth={2.4} />
+      </Pressable>
+    );
+  }
+
+  return (
+    <Pressable accessibilityLabel="Send message" accessibilityRole="button" disabled={!canSend} onPress={onSend} style={({ pressed }) => [
+      composerStyles.sendButton,
+      !canSend && composerStyles.sendButtonDisabled,
+      pressed && styles.pressed,
+    ]}>
+      <Send color={canSend ? '#111111' : '#8E8E93'} size={19} strokeWidth={2.6} />
+    </Pressable>
+  );
+}