|
| 1 | +import { |
| 2 | + ArrowsClockwise, |
| 3 | + Brain, |
| 4 | + CaretRight, |
| 5 | + FileText, |
| 6 | + Globe, |
| 7 | + type IconProps, |
| 8 | + MagnifyingGlass, |
| 9 | + PencilSimple, |
| 10 | + Terminal, |
| 11 | + Trash, |
| 12 | + Wrench, |
| 13 | +} from "phosphor-react-native"; |
1 | 14 | import { useState } from "react"; |
2 | 15 | import { ActivityIndicator, Pressable, Text, View } from "react-native"; |
3 | 16 |
|
4 | 17 | type ToolStatus = "pending" | "running" | "completed" | "error"; |
| 18 | +type ToolKind = |
| 19 | + | "read" |
| 20 | + | "edit" |
| 21 | + | "delete" |
| 22 | + | "move" |
| 23 | + | "search" |
| 24 | + | "execute" |
| 25 | + | "think" |
| 26 | + | "fetch" |
| 27 | + | "switch_mode" |
| 28 | + | "other"; |
| 29 | + |
| 30 | +type PhosphorIcon = React.ComponentType<IconProps>; |
| 31 | + |
| 32 | +const kindIcons: Record<ToolKind, PhosphorIcon> = { |
| 33 | + read: FileText, |
| 34 | + edit: PencilSimple, |
| 35 | + delete: Trash, |
| 36 | + move: FileText, |
| 37 | + search: MagnifyingGlass, |
| 38 | + execute: Terminal, |
| 39 | + think: Brain, |
| 40 | + fetch: Globe, |
| 41 | + switch_mode: ArrowsClockwise, |
| 42 | + other: Wrench, |
| 43 | +}; |
5 | 44 |
|
6 | 45 | interface ToolCallMessageProps { |
7 | 46 | toolName: string; |
| 47 | + kind?: ToolKind; |
8 | 48 | status: ToolStatus; |
9 | 49 | args?: Record<string, unknown>; |
10 | 50 | result?: unknown; |
11 | 51 | } |
12 | 52 |
|
13 | | -// Icon components using text/emoji (simple approach for RN) |
14 | | -function ToolIcon({ status }: { status: ToolStatus }) { |
15 | | - if (status === "pending" || status === "running") { |
16 | | - return <ActivityIndicator size={12} color="#a3a3a3" />; |
| 53 | +function formatToolTitle( |
| 54 | + toolName: string, |
| 55 | + args?: Record<string, unknown>, |
| 56 | +): string { |
| 57 | + if (!args) return toolName; |
| 58 | + |
| 59 | + // Format common tool patterns like the desktop app |
| 60 | + if (toolName.toLowerCase() === "grep" && args.pattern) { |
| 61 | + return `grep "${args.pattern}"`; |
| 62 | + } |
| 63 | + if (toolName.toLowerCase() === "read_file" && args.target_file) { |
| 64 | + return "Read File"; |
| 65 | + } |
| 66 | + if (toolName.toLowerCase() === "write" && args.file_path) { |
| 67 | + return "Write File"; |
| 68 | + } |
| 69 | + if (toolName.toLowerCase() === "search_replace") { |
| 70 | + return "Search Replace"; |
17 | 71 | } |
18 | | - return <Text className="text-dark-text-muted text-xs">⚙️</Text>; |
19 | | -} |
20 | 72 |
|
21 | | -function CaretIcon({ isOpen }: { isOpen: boolean }) { |
22 | | - return ( |
23 | | - <Text |
24 | | - className="text-dark-text-muted text-xs" |
25 | | - style={{ transform: [{ rotate: isOpen ? "90deg" : "0deg" }] }} |
26 | | - > |
27 | | - ▶ |
28 | | - </Text> |
29 | | - ); |
| 73 | + return toolName; |
30 | 74 | } |
31 | 75 |
|
32 | 76 | export function ToolCallMessage({ |
33 | 77 | toolName, |
| 78 | + kind, |
34 | 79 | status, |
35 | 80 | args, |
36 | 81 | result, |
37 | 82 | }: ToolCallMessageProps) { |
38 | 83 | const [isOpen, setIsOpen] = useState(false); |
39 | 84 |
|
| 85 | + const isLoading = status === "pending" || status === "running"; |
40 | 86 | const isFailed = status === "error"; |
41 | 87 | const hasDetails = args || result !== undefined; |
| 88 | + const displayTitle = formatToolTitle(toolName, args); |
| 89 | + const KindIcon = kind ? kindIcons[kind] : Wrench; |
42 | 90 |
|
43 | 91 | return ( |
44 | | - <View className="px-4 py-1"> |
| 92 | + <View className="px-4 py-0.5"> |
45 | 93 | <Pressable |
46 | 94 | onPress={() => hasDetails && setIsOpen(!isOpen)} |
47 | | - className="flex-row items-center gap-2 rounded-lg bg-dark-surface/50 px-3 py-2" |
48 | | - style={{ opacity: hasDetails ? 1 : 0.7 }} |
| 95 | + className="flex-row items-center gap-2" |
| 96 | + disabled={!hasDetails} |
49 | 97 | > |
50 | | - <CaretIcon isOpen={isOpen} /> |
51 | | - <ToolIcon status={status} /> |
52 | | - <Text className="font-mono text-dark-text-muted text-sm"> |
53 | | - {toolName} |
| 98 | + {/* Caret */} |
| 99 | + <CaretRight |
| 100 | + size={12} |
| 101 | + color="#6e6e6b" |
| 102 | + style={{ transform: [{ rotate: isOpen ? "90deg" : "0deg" }] }} |
| 103 | + /> |
| 104 | + |
| 105 | + {/* Status indicator */} |
| 106 | + {isLoading ? ( |
| 107 | + <ActivityIndicator size={12} color="#6e6e6b" /> |
| 108 | + ) : ( |
| 109 | + <KindIcon size={12} color="#6e6e6b" /> |
| 110 | + )} |
| 111 | + |
| 112 | + {/* Tool name */} |
| 113 | + <Text |
| 114 | + className="font-mono text-[13px] text-neutral-200" |
| 115 | + numberOfLines={1} |
| 116 | + > |
| 117 | + {displayTitle} |
54 | 118 | </Text> |
55 | | - {isFailed && <Text className="text-red-400 text-xs">(Failed)</Text>} |
| 119 | + |
| 120 | + {/* Failed indicator */} |
| 121 | + {isFailed && ( |
| 122 | + <Text className="font-mono text-[13px] text-neutral-500"> |
| 123 | + (Failed) |
| 124 | + </Text> |
| 125 | + )} |
56 | 126 | </Pressable> |
57 | 127 |
|
| 128 | + {/* Expanded content */} |
58 | 129 | {isOpen && hasDetails && ( |
59 | | - <View className="mt-1 ml-6 overflow-hidden rounded-lg bg-dark-surface p-3"> |
| 130 | + <View className="mt-2 ml-4"> |
60 | 131 | {args && ( |
61 | 132 | <View className="mb-2"> |
62 | | - <Text className="mb-1 font-medium text-dark-text-muted text-xs"> |
| 133 | + <Text className="mb-1 font-mono text-[13px] text-neutral-400"> |
63 | 134 | Arguments |
64 | 135 | </Text> |
65 | | - <Text className="font-mono text-dark-text text-xs"> |
66 | | - {JSON.stringify(args, null, 2)} |
67 | | - </Text> |
| 136 | + <View className="bg-amber-500/20 p-2"> |
| 137 | + <Text className="font-mono text-[13px] text-amber-100"> |
| 138 | + {JSON.stringify(args, null, 2)} |
| 139 | + </Text> |
| 140 | + </View> |
68 | 141 | </View> |
69 | 142 | )} |
70 | 143 | {result !== undefined && ( |
71 | 144 | <View> |
72 | | - <Text className="mb-1 font-medium text-dark-text-muted text-xs"> |
| 145 | + <Text className="mb-1 font-mono text-[13px] text-neutral-400"> |
73 | 146 | Result |
74 | 147 | </Text> |
75 | | - <Text |
76 | | - className="font-mono text-dark-text text-xs" |
77 | | - numberOfLines={10} |
78 | | - > |
79 | | - {typeof result === "string" |
80 | | - ? result |
81 | | - : JSON.stringify(result, null, 2)} |
82 | | - </Text> |
| 148 | + <View className="bg-neutral-800/50 p-2"> |
| 149 | + <Text |
| 150 | + className="font-mono text-[13px] text-neutral-300" |
| 151 | + numberOfLines={10} |
| 152 | + > |
| 153 | + {typeof result === "string" |
| 154 | + ? result |
| 155 | + : JSON.stringify(result, null, 2)} |
| 156 | + </Text> |
| 157 | + </View> |
83 | 158 | </View> |
84 | 159 | )} |
85 | 160 | </View> |
|
0 commit comments