feat: render tool calls

Author: skoob13

apps/mobile/src/components/AIMessage.tsx

@@ -1,30 +1,50 @@
 import { ActivityIndicator, Text, View } from "react-native";
+import type { AssistantToolCall } from "../types/max";
+import { ToolCallMessage } from "./ToolCallMessage";
 
 interface AIMessageProps {
   content: string;
   isLoading?: boolean;
   thinkingText?: string;
+  toolCalls?: AssistantToolCall[];
 }
 
 export function AIMessage({
   content,
   isLoading,
   thinkingText,
+  toolCalls,
 }: AIMessageProps) {
   return (
-    <View className="items-start px-4 py-2">
-      <View className="max-w-[85%] rounded-2xl rounded-bl-md bg-dark-surface px-4 py-3">
-        {isLoading && !content ? (
-          <View className="flex-row items-center gap-2">
-            <ActivityIndicator size="small" color="#a3a3a3" />
-            <Text className="text-base text-dark-text-muted italic">
-              {thinkingText || "Thinking..."}
+    <View className="items-start py-2">
+      {toolCalls && toolCalls.length > 0 && (
+        <View className="mb-1 w-full">
+          {toolCalls.map((tc) => (
+            <ToolCallMessage
+              key={tc.id}
+              toolName={tc.name}
+              status="completed"
+              args={tc.args}
+            />
+          ))}
+        </View>
+      )}
+      {(content || isLoading) && (
+        <View className="mx-4 max-w-[85%] rounded-2xl rounded-bl-md bg-dark-surface px-4 py-3">
+          {isLoading && !content ? (
+            <View className="flex-row items-center gap-2">
+              <ActivityIndicator size="small" color="#a3a3a3" />
+              <Text className="text-base text-dark-text-muted italic">
+                {thinkingText || "Thinking..."}
+              </Text>
+            </View>
+          ) : (
+            <Text className="text-base text-dark-text leading-6">
+              {content}
             </Text>
-          </View>
-        ) : (
-          <Text className="text-base text-dark-text leading-6">{content}</Text>
-        )}
-      </View>
+          )}
+        </View>
+      )}
     </View>
   );
 }

apps/mobile/src/components/MessagesList.tsx

@@ -12,14 +12,12 @@ import {
   isArtifactMessage,
   isAssistantMessage,
   isHumanMessage,
-  isToolCallMessage,
   isVisualizationArtifactContent,
   type ThreadMessage,
 } from "../types/max";
 import { AIMessage } from "./AIMessage";
 import { FailureMessage } from "./FailureMessage";
 import { HumanMessage } from "./HumanMessage";
-import { ToolCallMessage } from "./ToolCallMessage";
 import { VisualizationArtifact } from "./VisualizationArtifact";
 
 interface MessagesListProps {
@@ -33,23 +31,13 @@ function MessageItem({ item }: { item: ThreadMessage }) {
     return <HumanMessage content={item.content} />;
   }
 
-  if (isToolCallMessage(item)) {
-    return (
-      <ToolCallMessage
-        toolName={item.toolName}
-        status={item.status}
-        args={item.args}
-        result={item.result}
-      />
-    );
-  }
-
   if (isAssistantMessage(item)) {
     return (
       <AIMessage
         content={item.content}
         isLoading={item.status === "loading"}
         thinkingText={item.meta?.thinking?.[0]?.thinking}
+        toolCalls={item.tool_calls}
       />
     );
   }

apps/mobile/src/types/max.ts

@@ -47,9 +47,17 @@ export interface HumanMessage extends BaseAssistantMessage {
   content: string;
 }
 
+export interface AssistantToolCall {
+  id: string;
+  name: string;
+  args: Record<string, unknown>;
+  type: "tool_call";
+}
+
 export interface AssistantMessage extends BaseAssistantMessage {
   type: AssistantMessageType.Assistant;
   content: string;
+  tool_calls?: AssistantToolCall[];
   meta?: {
     thinking?: Array<{ type: string; thinking: string }>;
   };