@base44/superagent-native 0.0.1

package/src/conversationParts.tsx

@@ -0,0 +1,307 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
+import { ChevronLeft, MoreHorizontal, Share2, Sparkles } from 'lucide-react-native';
+
+import { AgentSphereIcon } from './AgentSphereIcon';
+import { conversationStyles } from './conversationStyles';
+import { getEditorTabLabel } from './editorTabs';
+import { MarkdownText } from './MarkdownText';
+import { showMessageActions } from './MessageActionBar';
+import { getFileName, getMessageFiles, getMessageToolCalls, getReplyTo } from './messageUtils';
+import { ToolCallSummary } from './ToolCallSummary';
+import type {
+  SuperagentAgent,
+  SuperagentConnector,
+  SuperagentConnectorActionInput,
+  SuperagentConversation,
+  SuperagentCopyMessageInput,
+  SuperagentEditorTab,
+  SuperagentMarkdownRenderer,
+  SuperagentMessage,
+  SuperagentToolRenderers,
+} from './types';
+
+export function ConversationHeader({
+  activeTab,
+  agent,
+  onBack,
+  onOpenMenu,
+  onOpenShare,
+  onRenameRequest,
+}: {
+  activeTab: SuperagentEditorTab;
+  agent: SuperagentAgent;
+  onBack: () => void;
+  onOpenMenu: () => void;
+  onOpenShare?: () => void;
+  onRenameRequest?: () => void;
+}) {
+  const subtitle = activeTab === 'chat' ? agent.description || 'Superagent' : getEditorTabLabel(activeTab);
+
+  return (
+    <View style={conversationStyles.header}>
+      <Pressable accessibilityLabel="Back" accessibilityRole="button" onPress={onBack} style={conversationStyles.headerIconButton}>
+        <ChevronLeft color="#F4F4F5" size={34} strokeWidth={2.1} />
+      </Pressable>
+      <Pressable
+        accessibilityHint="Long press to rename this Superagent"
+        accessibilityLabel="Superagent name"
+        accessibilityRole="button"
+        delayLongPress={320}
+        disabled={!onRenameRequest}
+        onLongPress={onRenameRequest}
+        style={conversationStyles.headerTitleWrap}
+      >
+        <AgentSphereIcon agent={agent} size="header" />
+        <View style={conversationStyles.headerTitleTextWrap}>
+          <Text numberOfLines={1} style={conversationStyles.headerTitle}>{agent.name || 'Superagent'}</Text>
+          <Text numberOfLines={1} style={conversationStyles.headerSubtitle}>{subtitle}</Text>
+        </View>
+      </Pressable>
+      <View style={conversationStyles.headerActions}>
+        {onOpenShare ? (
+          <Pressable accessibilityLabel="Share Superagent chat" accessibilityRole="button" onPress={onOpenShare} style={conversationStyles.headerShareButton}>
+            <Share2 color="#F4F4F5" size={22} strokeWidth={2.4} />
+          </Pressable>
+        ) : null}
+        <Pressable accessibilityLabel="Open Superagent menu" accessibilityRole="button" onPress={onOpenMenu} style={conversationStyles.headerMenuButton}>
+          <MoreHorizontal color="#F4F4F5" size={28} strokeWidth={2.4} />
+        </Pressable>
+      </View>
+    </View>
+  );
+}
+
+export function MessageBubble({
+  agent,
+  availableConnectors,
+  conversationId,
+  currentUserAvatarUrl,
+  isLastAssistantMessage,
+  message,
+  onConnectConnector,
+  onCopyMessage,
+  onDeleteMessage,
+  onReplyMessage,
+  renderMarkdown,
+  showAvatar,
+  showTimestamp,
+  submitToolCallInput,
+  toolRenderers,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  conversationId: string | null;
+  currentUserAvatarUrl?: string | null;
+  isLastAssistantMessage: boolean;
+  message: SuperagentMessage;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onCopyMessage?: SuperagentCopyMessageInput;
+  onDeleteMessage?: (messageId: string) => Promise<boolean> | boolean;
+  onReplyMessage?: (message: SuperagentMessage) => void;
+  renderMarkdown?: SuperagentMarkdownRenderer;
+  showAvatar: boolean;
+  showTimestamp: boolean;
+  submitToolCallInput?: (
+    toolCallId: string,
+    approve: boolean,
+    extraUserInput?: unknown,
+    originRequestId?: string,
+  ) => Promise<SuperagentConversation | null>;
+  toolRenderers?: SuperagentToolRenderers;
+}) {
+  const isUser = message.role === 'user';
+  const files = getMessageFiles(message);
+  const replyTo = getReplyTo(message);
+  const toolCalls = getMessageToolCalls(message);
+  const senderName = isUser ? 'You' : agent.name || 'Superagent';
+  const usesScrollableMarkdown = hasScrollableMarkdown(message.content);
+  const bubbleStyle = [
+    conversationStyles.messageBubble,
+    isUser ? conversationStyles.userBubble : conversationStyles.assistantBubble,
+    !showTimestamp && (isUser ? conversationStyles.userBubbleStacked : conversationStyles.assistantBubbleStacked),
+  ];
+  const openMessageActions = () => showMessageActions({
+    message,
+    onCopyMessage,
+    onDeleteMessage,
+    onReplyMessage,
+  });
+  const bubbleContent = (
+    <>
+      {replyTo ? <ReplyQuote content={replyTo.content} /> : null}
+      {message.content ? (
+        <MarkdownText
+          content={message.content}
+          isUser={isUser}
+          message={message}
+          onLongPress={usesScrollableMarkdown ? openMessageActions : undefined}
+          renderMarkdown={renderMarkdown}
+        />
+      ) : null}
+      {files.length > 0 ? <FileChips files={files} /> : null}
+      {toolCalls.length > 0 ? (
+        <ToolCallSummary
+          agent={agent}
+          availableConnectors={availableConnectors}
+          conversationId={conversationId}
+          isLastAssistantMessage={isLastAssistantMessage}
+          message={message}
+          onConnectConnector={onConnectConnector}
+          submitToolCallInput={submitToolCallInput}
+          toolCalls={toolCalls}
+          toolRenderers={toolRenderers}
+        />
+      ) : null}
+      {showTimestamp && message.createdAt ? (
+        <Text style={conversationStyles.messageTime}>{formatTime(message.createdAt)}</Text>
+      ) : null}
+    </>
+  );
+
+  return (
+    <View style={[
+      conversationStyles.messageGroup,
+      isUser ? conversationStyles.userMessageGroup : conversationStyles.assistantMessageGroup,
+      showAvatar && conversationStyles.messageGroupWithAvatar,
+    ]}>
+      {showAvatar ? (
+        <View style={[
+          conversationStyles.identityRow,
+          isUser ? conversationStyles.userIdentityRow : conversationStyles.assistantIdentityRow,
+        ]}>
+          <AgentSphereIcon agent={agent} isUser={isUser} userAvatarUrl={isUser ? currentUserAvatarUrl : undefined} />
+          <Text numberOfLines={1} style={[
+            conversationStyles.identityName,
+            isUser ? conversationStyles.userIdentityName : conversationStyles.assistantIdentityName,
+          ]}>
+            {senderName}
+          </Text>
+        </View>
+      ) : null}
+      <View style={[
+        conversationStyles.messageBubbleWrap,
+        usesScrollableMarkdown && conversationStyles.scrollableMessageBubbleWrap,
+        isUser ? conversationStyles.userMessageBubbleWrap : conversationStyles.assistantMessageBubbleWrap,
+      ]}>
+        {usesScrollableMarkdown ? (
+          <View style={bubbleStyle}>
+            {bubbleContent}
+          </View>
+        ) : (
+          <Pressable
+            accessibilityRole="button"
+            delayLongPress={280}
+            onLongPress={openMessageActions}
+            style={bubbleStyle}
+          >
+            {bubbleContent}
+          </Pressable>
+        )}
+      </View>
+    </View>
+  );
+}
+
+function hasScrollableMarkdown(content?: string) {
+  if (!content) return false;
+  if (/```/.test(content)) return true;
+
+  const lines = content.replace(/\r\n/g, '\n').split('\n');
+  return lines.some((line, index) => (
+    line.includes('|') &&
+    Boolean(lines[index + 1]?.match(/^\s*\|?\s*:?-{3,}:?\s*(?:\|\s*:?-{3,}:?\s*)+\|?\s*$/))
+  ));
+}
+
+function ReplyQuote({ content }: { content: string }) {
+  return (
+    <View style={conversationStyles.replyQuote}>
+      <Text style={conversationStyles.replyQuoteText} numberOfLines={2}>{content}</Text>
+    </View>
+  );
+}
+
+function FileChips({ files }: { files: string[] }) {
+  return (
+    <View style={conversationStyles.fileChipsWrap}>
+      {files.map((file) => (
+        <View key={file} style={conversationStyles.fileChip}>
+          <Text style={conversationStyles.fileChipText} numberOfLines={1}>{getFileName(file)}</Text>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+export function TypingIndicator() {
+  const spin = useRef(new Animated.Value(0)).current;
+  const pulse = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    const animation = Animated.parallel([
+      Animated.loop(
+        Animated.timing(spin, {
+          duration: 1600,
+          easing: Easing.linear,
+          toValue: 1,
+          useNativeDriver: true,
+        }),
+      ),
+      Animated.loop(
+        Animated.sequence([
+          Animated.timing(pulse, {
+            duration: 620,
+            easing: Easing.out(Easing.quad),
+            toValue: 1,
+            useNativeDriver: true,
+          }),
+          Animated.timing(pulse, {
+            duration: 620,
+            easing: Easing.in(Easing.quad),
+            toValue: 0,
+            useNativeDriver: true,
+          }),
+        ]),
+      ),
+    ]);
+
+    animation.start();
+    return () => animation.stop();
+  }, [pulse, spin]);
+
+  const rotate = spin.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+  const scale = pulse.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.94, 1.08],
+  });
+  const opacity = pulse.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.72, 1],
+  });
+
+  return (
+    <View style={conversationStyles.typingWrap}>
+      <Animated.View style={[
+        conversationStyles.thinkingIcon,
+        { opacity, transform: [{ rotate }, { scale }] },
+      ]}>
+        <Sparkles color="#FF8A4C" size={16} strokeWidth={2.3} />
+      </Animated.View>
+      <Text style={[conversationStyles.typingText, conversationStyles.typingTextWrap]}>Thinking</Text>
+    </View>
+  );
+}
+
+function formatTime(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+
+  return date.toLocaleTimeString([], {
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}

package/src/conversationRuntime.ts

@@ -0,0 +1,171 @@
+import type { Dispatch, SetStateAction } from 'react';
+
+import { AUTO_GREET_MESSAGE, nextMessageId } from './constants';
+import type { SuperagentMessage, SuperagentNativeClient, SuperagentReplyTo } from './types';
+
+export function normalizeMessages(messages: SuperagentMessage[]) {
+  return messages.map((message) => ({
+    ...message,
+    content: normalizeContent(message.content),
+    createdAt: getMessageCursor(message),
+  }));
+}
+
+export function mergeMessage(messages: SuperagentMessage[], nextMessage: SuperagentMessage) {
+  const normalized = normalizeMessages([{
+    ...nextMessage,
+    created_at: nextMessage.created_at ?? Date.now(),
+  }])[0];
+
+  if (!normalized.id) return [...messages, normalized];
+
+  const existingIndex = messages.findIndex((message) => message.id === normalized.id);
+  if (existingIndex < 0) return [...messages, normalized];
+
+  return messages.map((message, index) => (index === existingIndex ? normalized : message));
+}
+
+export function isVisibleMessage(message: SuperagentMessage, index: number) {
+  if (message.hidden) return false;
+  if (message.role === 'system') return false;
+  return !(index === 0 && message.role === 'user' && message.content === AUTO_GREET_MESSAGE);
+}
+
+export function createUserMessage(content: string, options: { fileUrls?: string[]; replyTo?: SuperagentReplyTo } = {}): SuperagentMessage {
+  const fileUrls = options.fileUrls?.filter(Boolean) ?? [];
+  const replyTo = options.replyTo;
+
+  return {
+    id: nextMessageId(),
+    role: 'user',
+    content,
+    createdAt: new Date().toISOString(),
+    ...(fileUrls.length > 0 ? { fileUrls, file_urls: fileUrls } : {}),
+    ...(replyTo ? {
+      additional_message_params: { reply_to: { content: replyTo.content, message_id: replyTo.messageId } },
+      replyTo,
+    } : {}),
+  };
+}
+
+export function createErrorMessage(error: unknown): SuperagentMessage {
+  return {
+    id: nextMessageId(),
+    role: 'assistant',
+    content: error instanceof Error ? error.message : 'Something went wrong. Please try again.',
+    createdAt: new Date().toISOString(),
+  };
+}
+
+export function isQueuedResponse(response: unknown) {
+  return Boolean(
+    response &&
+    typeof response === 'object' &&
+    'queued' in response &&
+    (response as { queued?: unknown }).queued,
+  );
+}
+
+export function countAssistantResponses(messages: SuperagentMessage[]) {
+  return messages.filter((message) => (
+    message.role === 'assistant' &&
+    !message.hidden &&
+    normalizeContent(message.content).trim().length > 0
+  )).length;
+}
+
+export function hasNewAssistantResponse(messages: SuperagentMessage[], assistantCountBefore: number) {
+  return countAssistantResponses(messages) > assistantCountBefore;
+}
+
+export async function refreshConversation(
+  apiClient: SuperagentNativeClient,
+  conversationId: string,
+  setMessages: (messages: SuperagentMessage[]) => void,
+) {
+  const refreshed = await apiClient.getConversation(conversationId);
+  const normalizedMessages = normalizeMessages(refreshed.messages ?? []);
+  setMessages(normalizedMessages);
+  return normalizedMessages;
+}
+
+export async function sendWithFallback(
+  agentId: string,
+  content: string,
+  fileUrls: string[],
+  replyTo: SuperagentReplyTo | undefined,
+  onSendMessage: (params: { agentId: string; fileUrls?: string[]; message: string; replyTo?: SuperagentReplyTo }) =>
+    Promise<SuperagentMessage | SuperagentMessage[] | void> | SuperagentMessage | SuperagentMessage[] | void,
+  setMessages: Dispatch<SetStateAction<SuperagentMessage[]>>,
+  setIsSending: (value: boolean) => void,
+): Promise<boolean> {
+  try {
+    const response = await onSendMessage({ agentId, fileUrls, message: content, replyTo });
+    const responseMessages = Array.isArray(response) ? response : response ? [response] : [];
+    setMessages((current) => [...current, ...responseMessages]);
+    return responseMessages.some((message) => message.role === 'assistant');
+  } catch (error) {
+    const errorMessage = createErrorMessage(error);
+    setMessages((current) => [...current, errorMessage]);
+    return false;
+  } finally {
+    setIsSending(false);
+  }
+}
+
+export function pollConversation(
+  apiClient: SuperagentNativeClient,
+  conversationId: string,
+  setMessages: (messages: SuperagentMessage[]) => void,
+  setIsSending: (value: boolean) => void,
+  assistantCountBefore: number,
+  onComplete?: () => Promise<void> | void,
+  onAgentMessageDone?: () => Promise<void> | void,
+) {
+  let attempts = 0;
+  const interval = setInterval(async () => {
+    attempts += 1;
+    let shouldStop = attempts >= 10;
+    let foundAssistantResponse = false;
+
+    try {
+      const refreshedMessages = await refreshConversation(apiClient, conversationId, setMessages);
+      foundAssistantResponse = hasNewAssistantResponse(refreshedMessages, assistantCountBefore);
+      shouldStop = shouldStop || foundAssistantResponse;
+    } finally {
+      if (shouldStop) {
+        clearInterval(interval);
+        setIsSending(false);
+        if (foundAssistantResponse) onAgentMessageDone?.();
+        onComplete?.();
+      }
+    }
+  }, 2000);
+}
+
+export function getMessageCursor(message?: SuperagentMessage) {
+  if (!message) return undefined;
+
+  return normalizeDate(
+    message.createdAt ??
+    message.metadata?.created_date ??
+    message.created_at,
+  );
+}
+
+function normalizeDate(value: number | string | Date | undefined) {
+  if (!value) return undefined;
+  const date = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date.toISOString();
+}
+
+function normalizeContent(content: unknown) {
+  if (typeof content === 'string') return content;
+  if (content == null) return '';
+
+  try {
+    return JSON.stringify(content, null, 2);
+  } catch {
+    return String(content);
+  }
+}