@base44/superagent-native 0.0.1

package/src/ToolCallSummary.tsx

@@ -0,0 +1,599 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
+import { CheckCircle2, ChevronRight, CircleAlert, Clock, Wrench } from 'lucide-react-native';
+
+import { conversationStyles } from './conversationStyles';
+import { ToolApprovalCard } from './ToolApprovalCard';
+import type {
+  SuperagentAgent,
+  SuperagentConnector,
+  SuperagentConnectorActionInput,
+  SuperagentConversation,
+  SuperagentMessage,
+  SuperagentToolCall,
+  SuperagentToolRenderers,
+} from './types';
+
+const HIDDEN_TOOLS = new Set([
+  'browserbase_get_session',
+  'browserbase_stop_session',
+  'browserbase_get_live_urls',
+  'browserbase_reset_context',
+  'browserbase_navigate',
+  'browserbase_click',
+  'browserbase_type',
+  'browserbase_get_content',
+  'write_file',
+  'edit_file',
+  'read_file',
+]);
+
+const FRIENDLY_TOOL_LABELS: Record<string, { active: string; completed: string }> = {
+  anchor_replace: { active: 'Editing code...', completed: 'Edited code' },
+  bash: { active: 'Running commands...', completed: 'Ran commands' },
+  browserbase_screenshot: { active: 'Taking screenshots...', completed: 'Took screenshots' },
+  call_backend_function: { active: 'Calling backend...', completed: 'Called backend' },
+  create_automation: { active: 'Creating automation...', completed: 'Created automation' },
+  create_scheduled_task: { active: 'Creating task...', completed: 'Created task' },
+  delete_entities: { active: 'Deleting data...', completed: 'Deleted data' },
+  delete_file: { active: 'Deleting files...', completed: 'Deleted files' },
+  deploy_backend_functions: { active: 'Deploying backend...', completed: 'Deployed backend' },
+  fetch_website: { active: 'Reading websites...', completed: 'Read websites' },
+  find_replace: { active: 'Editing code...', completed: 'Edited code' },
+  get_connectors_info: { active: 'Checking connectors...', completed: 'Checked connectors' },
+  get_runtime_logs: { active: 'Reading logs...', completed: 'Read logs' },
+  grep: { active: 'Searching files...', completed: 'Searched files' },
+  install_npm_package: { active: 'Installing packages...', completed: 'Installed packages' },
+  list_automations: { active: 'Listing automations...', completed: 'Listed automations' },
+  list_files: { active: 'Browsing files...', completed: 'Browsed files' },
+  list_scheduled_tasks: { active: 'Listing tasks...', completed: 'Listed tasks' },
+  manage_app: { active: 'Publishing pages...', completed: 'Published pages' },
+  request_oauth_authorization: { active: 'Requesting connector access...', completed: 'Requested connector access' },
+  request_secrets: { active: 'Requesting secrets...', completed: 'Requested secrets' },
+  run_skill: { active: 'Running a skill...', completed: 'Ran a skill' },
+  search_base44_docs: { active: 'Checking docs...', completed: 'Checked docs' },
+  search_web: { active: 'Searching the web...', completed: 'Searched the web' },
+  send_message_to_user: { active: 'Sending message...', completed: 'Sent message' },
+  set_app_user_connector: { active: 'Requesting connector credentials...', completed: 'Requested connector credentials' },
+  set_secrets: { active: 'Setting a secret...', completed: 'Set a secret' },
+  setup_slack_connection: { active: 'Connecting Slack...', completed: 'Connected Slack' },
+  setup_telegram_connection: { active: 'Connecting Telegram...', completed: 'Connected Telegram' },
+  suggest_payments_installation: { active: 'Setting up payments...', completed: 'Requested payment setup' },
+  suggest_stripe_installation: { active: 'Setting up Stripe...', completed: 'Requested Stripe setup' },
+  str_replace_based_edit_tool: { active: 'Editing code...', completed: 'Edited code' },
+  test_backend_function: { active: 'Testing backend...', completed: 'Tested backend' },
+  toggle_scheduled_task: { active: 'Toggling task...', completed: 'Toggled task' },
+  update_entities: { active: 'Updating data...', completed: 'Updated data' },
+  update_identity: { active: 'Updating memory...', completed: 'Updated memory' },
+  update_scheduled_task: { active: 'Updating task...', completed: 'Updated task' },
+  web_search: { active: 'Searching the web...', completed: 'Searched the web' },
+};
+
+type SubmitToolCallInput = (
+  toolCallId: string,
+  approve: boolean,
+  extraUserInput?: unknown,
+  originRequestId?: string,
+) => Promise<SuperagentConversation | null>;
+
+export function ToolCallSummary({
+  agent,
+  availableConnectors,
+  conversationId,
+  isLastAssistantMessage,
+  message,
+  onConnectConnector,
+  submitToolCallInput,
+  toolCalls,
+  toolRenderers,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  conversationId: string | null;
+  isLastAssistantMessage: boolean;
+  message: SuperagentMessage;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  submitToolCallInput?: SubmitToolCallInput;
+  toolCalls: SuperagentToolCall[];
+  toolRenderers?: SuperagentToolRenderers;
+}) {
+  const chunks = useMemo(() => createToolChunks(toolCalls, toolRenderers), [toolCalls, toolRenderers]);
+
+  if (chunks.length === 0) return null;
+
+  return (
+    <View style={conversationStyles.toolCallWrap}>
+      {chunks.map((chunk) => {
+        if (chunk.type === 'timeline') {
+          return (
+            <DefaultToolTimeline
+              agent={agent}
+              availableConnectors={availableConnectors}
+              isLastAssistantMessage={isLastAssistantMessage}
+              key={chunk.key}
+              onConnectConnector={onConnectConnector}
+              submitToolCallInput={submitToolCallInput}
+              toolCalls={chunk.toolCalls}
+            />
+          );
+        }
+
+        const Renderer = chunk.Renderer;
+        return (
+          <View key={chunk.key} style={conversationStyles.toolCallSlot}>
+            <View style={conversationStyles.customToolWidget}>
+              <Renderer
+                agent={agent}
+                conversationId={conversationId}
+                message={message}
+                submitToolCallInput={submitToolCallInput}
+                toolCall={chunk.toolCall}
+              />
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+}
+
+function DefaultToolTimeline({
+  agent,
+  availableConnectors,
+  isLastAssistantMessage,
+  onConnectConnector,
+  submitToolCallInput,
+  toolCalls,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  isLastAssistantMessage: boolean;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  submitToolCallInput?: SubmitToolCallInput;
+  toolCalls: SuperagentToolCall[];
+}) {
+  const visibleToolCalls = useMemo(
+    () => toolCalls.flatMap(flattenToolCall).filter((toolCall) => !HIDDEN_TOOLS.has(toolCall.name || '')),
+    [toolCalls],
+  );
+  const hasWaitingTool = visibleToolCalls.some(isApprovalRequest);
+  const isRunning = visibleToolCalls.some(isRunningStatus);
+  const [expanded, setExpanded] = useState(hasWaitingTool);
+  const [openRows, setOpenRows] = useState<Record<string, boolean>>({});
+
+  useEffect(() => {
+    if (hasWaitingTool) setExpanded(true);
+  }, [hasWaitingTool]);
+
+  if (visibleToolCalls.length === 0) return null;
+
+  const label = getCollapsedLabel(visibleToolCalls, isRunning);
+
+  if (isRunning) {
+    return (
+      <View style={conversationStyles.toolCallSlot}>
+        <RunningToolIndicator label={label} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={conversationStyles.toolCallSlot}>
+      <Pressable
+        accessibilityRole="button"
+        onPress={() => setExpanded((current) => !current)}
+        style={conversationStyles.toolTimelineHeader}
+      >
+        <Text style={conversationStyles.toolTimelineHeaderText}>{label}</Text>
+        <ChevronRight
+          color="#8E8E93"
+          size={15}
+          strokeWidth={2.3}
+          style={expanded ? conversationStyles.toolTimelineChevronOpen : conversationStyles.toolTimelineChevron}
+        />
+      </Pressable>
+
+      {expanded ? (
+        <View style={conversationStyles.toolTimelineRows}>
+          {visibleToolCalls.map((toolCall, index) => {
+            const rowKey = getToolCallKey(toolCall, index);
+            const isOpen = Boolean(openRows[rowKey]);
+            return (
+              <ToolTimelineRow
+                agent={agent}
+                availableConnectors={availableConnectors}
+                isLastAssistantMessage={isLastAssistantMessage}
+                isLast={index === visibleToolCalls.length - 1}
+                isOpen={isOpen}
+                key={rowKey}
+                onToggle={() => setOpenRows((current) => ({ ...current, [rowKey]: !current[rowKey] }))}
+                onConnectConnector={onConnectConnector}
+                submitToolCallInput={submitToolCallInput}
+                toolCall={toolCall}
+              />
+            );
+          })}
+          {!hasWaitingTool ? <DoneRow /> : null}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function ToolTimelineRow({
+  agent,
+  availableConnectors,
+  isLastAssistantMessage,
+  isLast,
+  isOpen,
+  onConnectConnector,
+  onToggle,
+  submitToolCallInput,
+  toolCall,
+}: {
+  agent: SuperagentAgent;
+  availableConnectors?: SuperagentConnector[];
+  isLastAssistantMessage: boolean;
+  isLast: boolean;
+  isOpen: boolean;
+  onConnectConnector?: (input: SuperagentConnectorActionInput) => Promise<boolean | void> | boolean | void;
+  onToggle: () => void;
+  submitToolCallInput?: SubmitToolCallInput;
+  toolCall: SuperagentToolCall;
+}) {
+  const preview = getToolPreview(toolCall);
+  const detail = getToolDetail(toolCall);
+  const showsApproval = isApprovalRequest(toolCall);
+  const canOpen = Boolean(detail) && !showsApproval;
+
+  return (
+    <View style={conversationStyles.toolTimelineItem}>
+      <View style={conversationStyles.toolTimelineRow}>
+        <View style={conversationStyles.toolTimelineIconCol}>
+          <ToolStatusIcon status={toolCall.status} />
+          {!isLast ? <View style={conversationStyles.toolTimelineLine} /> : null}
+        </View>
+        <View style={conversationStyles.toolTimelineMeta}>
+          <Pressable
+            accessibilityRole={canOpen ? 'button' : undefined}
+            disabled={!canOpen}
+            onPress={onToggle}
+            style={conversationStyles.toolTimelineRowHeader}
+          >
+            <ChevronRight
+              color="#A1A1AA"
+              size={15}
+              strokeWidth={2.3}
+              style={isOpen ? conversationStyles.toolTimelineChevronOpen : conversationStyles.toolTimelineChevron}
+            />
+            <Text style={conversationStyles.toolTimelineTitle} numberOfLines={1}>{getToolTitle(toolCall)}</Text>
+            {preview ? <Text style={conversationStyles.toolTimelineInline} numberOfLines={1}>{preview}</Text> : null}
+          </Pressable>
+          {shouldShowStatusLine(toolCall, preview) ? (
+            <Text style={conversationStyles.toolTimelineStatus} numberOfLines={1}>{formatStatus(toolCall.status || 'done')}</Text>
+          ) : null}
+        </View>
+      </View>
+
+      <View style={conversationStyles.toolTimelineDetailsSlot}>
+        {showsApproval ? (
+          <ToolApprovalCard
+            agent={agent}
+            availableConnectors={availableConnectors}
+            isLastAssistantMessage={isLastAssistantMessage}
+            onConnectConnector={onConnectConnector}
+            submitToolCallInput={submitToolCallInput}
+            toolCall={toolCall}
+          />
+        ) : null}
+        {!showsApproval && isOpen && detail ? <ToolDetailBox detail={detail} /> : null}
+      </View>
+    </View>
+  );
+}
+
+function ToolDetailBox({ detail }: { detail: string }) {
+  return (
+    <View style={conversationStyles.toolTimelineDetails}>
+      <ScrollView
+        nestedScrollEnabled
+        showsVerticalScrollIndicator
+        style={conversationStyles.toolTimelineDetailVerticalScroll}
+      >
+        <ScrollView
+          horizontal
+          nestedScrollEnabled
+          showsHorizontalScrollIndicator
+          contentContainerStyle={conversationStyles.toolTimelineDetailScrollContent}
+          style={conversationStyles.toolTimelineDetailHorizontalScroll}
+        >
+          <Text style={conversationStyles.toolTimelineDetailText}>{detail}</Text>
+        </ScrollView>
+      </ScrollView>
+    </View>
+  );
+}
+
+function DoneRow() {
+  return (
+    <View style={conversationStyles.toolDoneRow}>
+      <View style={conversationStyles.toolTimelineIconCol}>
+        <View style={conversationStyles.toolCallIcon}>
+          <CheckCircle2 color="#E4E4E7" size={17} strokeWidth={2.3} />
+        </View>
+      </View>
+      <Text style={conversationStyles.toolDoneText}>Done</Text>
+    </View>
+  );
+}
+
+function RunningToolIndicator({ label }: { label: string }) {
+  return (
+    <View style={conversationStyles.toolRunningWrap}>
+      <View style={conversationStyles.toolRunningDots}>
+        <View style={conversationStyles.toolRunningDot} />
+        <View style={conversationStyles.toolRunningDot} />
+        <View style={conversationStyles.toolRunningDot} />
+      </View>
+      <Text style={conversationStyles.toolRunningText}>{label}</Text>
+    </View>
+  );
+}
+
+function ToolStatusIcon({ status }: { status?: string }) {
+  if (isRunningStatus({ status })) {
+    return (
+      <View style={conversationStyles.toolCallIcon}>
+        <ActivityIndicator color="#C9CAF8" size="small" />
+      </View>
+    );
+  }
+
+  if (isErrorStatus({ status })) {
+    return (
+      <View style={conversationStyles.toolCallIcon}>
+        <CircleAlert color="#FCA5A5" size={17} strokeWidth={2.3} />
+      </View>
+    );
+  }
+
+  if (isWaitingStatus({ status })) {
+    return (
+      <View style={conversationStyles.toolCallIcon}>
+        <Clock color="#FDE047" size={17} strokeWidth={2.3} />
+      </View>
+    );
+  }
+
+  if (isSuccessStatus({ status })) {
+    return (
+      <View style={conversationStyles.toolCallIcon}>
+        <CheckCircle2 color="#86EFAC" size={17} strokeWidth={2.3} />
+      </View>
+    );
+  }
+
+  return (
+    <View style={conversationStyles.toolCallIcon}>
+      <Wrench color="#A1A1AA" size={17} strokeWidth={2.3} />
+    </View>
+  );
+}
+
+function createToolChunks(toolCalls: SuperagentToolCall[], toolRenderers?: SuperagentToolRenderers) {
+  const chunks: Array<
+    | { key: string; toolCalls: SuperagentToolCall[]; type: 'timeline' }
+    | { key: string; Renderer: NonNullable<SuperagentToolRenderers>[string]; toolCall: SuperagentToolCall; type: 'custom' }
+  > = [];
+  let timelineBuffer: SuperagentToolCall[] = [];
+  let timelineIndex = 0;
+
+  const flushTimeline = () => {
+    if (timelineBuffer.length === 0) return;
+    chunks.push({
+      key: `timeline-${timelineIndex}`,
+      toolCalls: timelineBuffer,
+      type: 'timeline',
+    });
+    timelineIndex += 1;
+    timelineBuffer = [];
+  };
+
+  toolCalls.forEach((toolCall, index) => {
+    const Renderer = toolRenderers?.[toolCall.name];
+    if (!Renderer) {
+      timelineBuffer.push(toolCall);
+      return;
+    }
+
+    flushTimeline();
+    chunks.push({
+      key: toolCall.id ?? `${toolCall.name}-${index}`,
+      Renderer,
+      toolCall,
+      type: 'custom',
+    });
+  });
+
+  flushTimeline();
+  return chunks;
+}
+
+function flattenToolCall(toolCall: SuperagentToolCall): SuperagentToolCall[] {
+  if (toolCall.grouped && Array.isArray(toolCall.toolCalls)) return toolCall.toolCalls;
+  return [toolCall];
+}
+
+function getCollapsedLabel(toolCalls: SuperagentToolCall[], isRunning: boolean) {
+  if (toolCalls.some(isApprovalRequest)) return 'Waiting for input';
+
+  const firstName = toolCalls[0]?.name || '';
+  if (toolCalls.length > 0 && toolCalls.every((toolCall) => toolCall.name === firstName)) {
+    if (firstName === 'bash') {
+      if (isRunning) return 'Running commands...';
+      return toolCalls.length === 1 ? 'Ran a command' : `Ran ${toolCalls.length} commands`;
+    }
+
+    const label = FRIENDLY_TOOL_LABELS[firstName];
+    if (label) {
+      const base = isRunning ? label.active : label.completed;
+      return !isRunning && toolCalls.length > 1 ? `${base} (${toolCalls.length})` : base;
+    }
+  }
+
+  if (isRunning) return 'Working...';
+  return `${toolCalls.length} ${toolCalls.length === 1 ? 'action' : 'actions'}`;
+}
+
+function getToolTitle(toolCall: SuperagentToolCall) {
+  const label = FRIENDLY_TOOL_LABELS[toolCall.name || ''];
+  if (label) return isRunningStatus(toolCall) ? label.active.replace(/\.\.\.$/, '') : label.completed;
+  return formatToolName(toolCall.name || 'Tool');
+}
+
+function getToolPreview(toolCall: SuperagentToolCall) {
+  const args = getToolArgs(toolCall);
+  const rawArgs = getRawArgs(toolCall);
+
+  if (toolCall.name === 'bash') {
+    const command = getStringArg(args, ['command', 'cmd', 'script']) || (typeof rawArgs === 'string' ? rawArgs : '');
+    return command ? truncateSingleLine(command, 48) : null;
+  }
+
+  if (toolCall.name === 'grep') {
+    const pattern = getStringArg(args, ['pattern', 'query']);
+    const path = getStringArg(args, ['path', 'include']);
+    return truncateSingleLine([pattern, path].filter(Boolean).join(' in '), 48);
+  }
+
+  if (toolCall.name === 'search_web' || toolCall.name === 'web_search') {
+    return truncateSingleLine(getStringArg(args, ['query', 'q']) || '', 48);
+  }
+
+  if (toolCall.name === 'request_oauth_authorization') {
+    return 'waiting for user input / approval';
+  }
+
+  if (toolCall.name === 'get_connectors_info') {
+    return getResultPreview(toolCall.results);
+  }
+
+  return getStringArg(args, ['name', 'title', 'path', 'filename', 'integration_type', 'connector_id']) || null;
+}
+
+function getToolDetail(toolCall: SuperagentToolCall) {
+  const sections: string[] = [];
+  const args = getRawArgs(toolCall);
+  const results = toolCall.results;
+
+  if (args) sections.push(`Input:\n${formatValue(args)}`);
+  if (results) sections.push(`Output:\n${formatValue(results)}`);
+
+  return sections.length > 0 ? sections.join('\n\n') : null;
+}
+
+function getRawArgs(toolCall: SuperagentToolCall) {
+  return toolCall.arguments_string ?? toolCall.arguments ?? null;
+}
+
+function getToolArgs(toolCall: SuperagentToolCall): Record<string, unknown> | string | null {
+  const raw = getRawArgs(toolCall);
+  if (!raw) return null;
+  if (typeof raw !== 'string') return raw as Record<string, unknown>;
+
+  try {
+    const parsed = JSON.parse(raw);
+    return parsed && typeof parsed === 'object' ? parsed as Record<string, unknown> : raw;
+  } catch {
+    return raw;
+  }
+}
+
+function getStringArg(args: Record<string, unknown> | string | null, keys: string[]) {
+  if (!args || typeof args === 'string') return '';
+  for (const key of keys) {
+    const value = args[key];
+    if (typeof value === 'string' && value.trim()) return value.trim();
+  }
+  return '';
+}
+
+function getResultPreview(result: unknown) {
+  if (!result) return null;
+  const value = typeof result === 'string' ? result : formatValue(result);
+  const firstLine = value.split('\n').find((line) => line.trim());
+  return firstLine ? truncateSingleLine(firstLine, 52) : null;
+}
+
+function shouldShowStatusLine(toolCall: SuperagentToolCall, preview: string | null) {
+  if (!toolCall.status) return false;
+  if (toolCall.name === 'bash' || toolCall.name === 'grep') return false;
+  return !preview || isWaitingStatus(toolCall) || isErrorStatus(toolCall);
+}
+
+function isRunningStatus(toolCall: Pick<SuperagentToolCall, 'status'>) {
+  const normalized = normalizeStatus(toolCall.status);
+  return normalized === 'running' || normalized === 'pending';
+}
+
+function isWaitingStatus(toolCall: Pick<SuperagentToolCall, 'status'>) {
+  return normalizeStatus(toolCall.status).includes('waiting');
+}
+
+function isApprovalRequest(toolCall: SuperagentToolCall) {
+  if (isWaitingStatus(toolCall)) return true;
+
+  const resultPreview = getResultPreview(toolCall.results);
+  return Boolean(resultPreview?.toLowerCase().includes('waiting for user input'));
+}
+
+function isErrorStatus(toolCall: Pick<SuperagentToolCall, 'status'>) {
+  const normalized = normalizeStatus(toolCall.status);
+  return normalized.includes('error') || normalized.includes('failed') || normalized.includes('rejected');
+}
+
+function isSuccessStatus(toolCall: Pick<SuperagentToolCall, 'status'>) {
+  const normalized = normalizeStatus(toolCall.status);
+  return normalized.includes('success') || normalized.includes('complete');
+}
+
+function normalizeStatus(status?: string) {
+  return (status || '').toLowerCase();
+}
+
+function formatToolName(name: string) {
+  return name
+    .split('_')
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function formatStatus(status: string) {
+  return status
+    .split('_')
+    .filter(Boolean)
+    .map((part) => part.slice(0, 1).toUpperCase() + part.slice(1))
+    .join(' ');
+}
+
+function formatValue(value: unknown) {
+  if (typeof value === 'string') return value.length > 900 ? `${value.slice(0, 900)}...` : value;
+
+  try {
+    const stringified = JSON.stringify(value, null, 2);
+    return stringified.length > 900 ? `${stringified.slice(0, 900)}...` : stringified;
+  } catch {
+    return String(value);
+  }
+}
+
+function truncateSingleLine(value: string, maxLength: number) {
+  const singleLine = value.replace(/\s+/g, ' ').trim();
+  if (!singleLine) return null;
+  return singleLine.length > maxLength ? `${singleLine.slice(0, maxLength - 3)}...` : singleLine;
+}
+
+function getToolCallKey(toolCall: SuperagentToolCall, index: number) {
+  return toolCall.id ?? `${toolCall.name || 'tool'}-${index}`;
+}

package/src/agentSphereStyles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+
+export const agentSphereStyles = StyleSheet.create({
+  frame: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  builtInFrame: {
+    backgroundColor: '#0A0A0F',
+  },
+  userFrame: {
+    backgroundColor: '#242427',
+    borderColor: '#38383D',
+    borderWidth: 1,
+  },
+  emojiFrame: {
+    backgroundColor: '#151515',
+    borderColor: '#2A2A2A',
+    borderWidth: 1,
+  },
+  image: { height: '100%', width: '100%' },
+  emoji: { color: '#FFFFFF', fontWeight: '800', textAlign: 'center' },
+});