Prompt Input

1import React, { useRef, useState } from "react"
2import {
3  Platform,
4  Pressable,
5  Text,
6  TextInput,
7  View,
8  useWindowDimensions,
9} from "react-native"
10import Animated, {
11  FadeIn,
12  FadeOut,
13  LinearTransition,
14  ReduceMotion,
15  ZoomIn,
16  ZoomOut,
17} from "react-native-reanimated"
18import Svg, { Path } from "react-native-svg"
19export interface PromptInputModel {
20  value: string
21  label: string
22  icon?: React.ReactNode
23  disabled?: boolean
24}
25export interface PromptInputAction {
26  value: string
27  label: string
28  description?: string
29  icon?: React.ReactNode
30  disabled?: boolean
31}
32export interface PromptInputProps {
33  value?: string
34  defaultValue?: string
35  onValueChange?: (value: string) => void
36  models?: PromptInputModel[]
37  model?: string
38  defaultModel?: string
39  onModelChange?: (value: string) => void
40  actions?: PromptInputAction[]
41  onAction?: (action: string) => void
42  onSubmit?: (value: string, model?: string) => void | Promise<void>
43  onStop?: () => void
44  loading?: boolean
45  disabled?: boolean
46  placeholder?: string
47  minRows?: number
48  maxRows?: number
49  leadingAction?: React.ReactNode
50  backgroundColor?: string
51  textColor?: string
52  mutedColor?: string
53  accentColor?: string
54  borderColor?: string
55  radius?: number
56  testID?: string
57}
58export function PromptInput({
59  value,
60  defaultValue = "",
61  onValueChange,
62  models = [],
63  model,
64  defaultModel,
65  onModelChange,
66  actions = [],
67  onAction,
68  onSubmit,
69  onStop,
70  loading = false,
71  disabled = false,
72  placeholder = "Ask the agent to do something…",
73  minRows = 2,
74  maxRows = 8,
75  leadingAction,
76  backgroundColor = "#151515",
77  textColor = "#f1f1f1",
78  mutedColor = "#868686",
79  accentColor = "#0285f7",
80  borderColor = "rgba(255,255,255,0.04)",
81  radius = 16,
82  testID,
83}: PromptInputProps) {
84  const [local, setLocal] = useState(defaultValue),
85    [localModel, setLocalModel] = useState(defaultModel ?? models[0]?.value)
86  const [menu, setMenu] = useState<"actions" | "models" | null>(null),
87    [height, setHeight] = useState(minRows * 24),
88    [focused, setFocused] = useState(false),
89    [modelsAbove, setModelsAbove] = useState(false)
90  const modelTrigger = useRef<View>(null)
91  const { height: viewportHeight } = useWindowDimensions()
92  const text = value ?? local,
93    chosen = model ?? localModel,
94    busy = loading
95  const setText = (next: string) => {
96    if (value === undefined) setLocal(next)
97    onValueChange?.(next)
98  }
99  function submit() {
100    if (!text.trim() || busy || disabled) return
101    onSubmit?.(text.trim(), chosen)
102    if (value === undefined) setLocal("")
103  }
104  const entries: PromptInputAction[] = menu === "actions" ? actions : models
105  return (
106    <View
107      testID={testID}
108      style={{
109        width: "100%",
110      }}
111    >
112      {menu && (
113        <Animated.View
114          entering={ZoomIn.springify().stiffness(420).damping(40).mass(0.5).reduceMotion(ReduceMotion.System)}
115          exiting={ZoomOut.duration(100).reduceMotion(ReduceMotion.System)}
116          style={{
117            position: "absolute",
118            bottom: menu === "actions" || modelsAbove ? 48 : -Math.min(entries.length, 5) * 36 - 16,
119            left: menu === "actions" ? 8 : actions.length ? 44 : 8,
120            width: menu === "actions" ? 224 : 208,
121            padding: menu === "actions" ? 6 : 4,
122            zIndex: 2,
123            backgroundColor,
124            borderRadius: 12,
125            borderWidth: 1,
126            borderColor,
127            transformOrigin: menu === "actions" || modelsAbove ? "left bottom" : "left top",
128          }}
129        >
130          {entries.map((entry) => (
131            <Pressable
132              key={entry.value}
133              disabled={entry.disabled}
134              accessibilityRole="button"
135              onPress={() => {
136                if (menu === "models") {
137                  if (model === undefined) setLocalModel(entry.value)
138                  onModelChange?.(entry.value)
139                } else onAction?.(entry.value)
140                setMenu(null)
141              }}
142              style={({ pressed }) => ({
143                paddingHorizontal: menu === "actions" ? 10 : 8,
144                paddingVertical: 8,
145                borderRadius: 8,
146                flexDirection: "row",
147                alignItems: menu === "actions" ? "flex-start" : "center",
148                gap: 10,
149                backgroundColor: pressed ? "#ffffff0a" : "transparent",
150                opacity: entry.disabled ? 0.4 : 1,
151              })}
152            >
153              {entry.icon && <View style={{ width: 20, height: 20, marginTop: menu === "actions" ? 2 : 0, alignItems: "center", justifyContent: "center" }}>{entry.icon}</View>}
154              <View style={{ flex: 1 }}>
155                <Text style={{ color: textColor, fontSize: 14, lineHeight: 20, fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined }}>
156                  {entry.label}
157                </Text>
158                {entry.description && (
159                  <Text style={{ color: mutedColor, fontSize: 12, lineHeight: 16, marginTop: 2, fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined }}>
160                    {entry.description}
161                  </Text>
162                )}
163              </View>
164              {menu === "models" && entry.value === chosen && <Svg width={14} height={14} viewBox="0 0 24 24"><Path d="m20 6-11 11-5-5" fill="none" stroke={textColor} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /></Svg>}
165            </Pressable>
166          ))}
167        </Animated.View>
168      )}
169      <Animated.View
170        layout={LinearTransition.springify()
171          .damping(28)
172          .stiffness(300)
173          .reduceMotion(ReduceMotion.System)}
174        style={{ padding: 8, backgroundColor, borderRadius: radius, borderWidth: 1, borderColor: focused ? "rgba(255,255,255,0.25)" : borderColor, gap: 4, opacity: disabled ? 0.6 : 1 }}
175      >
176        <TextInput
177          accessibilityLabel="Prompt"
178          multiline
179          editable={!disabled}
180          onFocus={() => setFocused(true)}
181          onBlur={() => setFocused(false)}
182          value={text}
183          onChangeText={setText}
184          placeholder={placeholder}
185          placeholderTextColor={mutedColor === "#868686" ? "rgba(134,134,134,0.55)" : mutedColor}
186          onKeyPress={event => {
187            const modifiers = event.nativeEvent as typeof event.nativeEvent & { shiftKey?: boolean; isComposing?: boolean }
188            if (Platform.OS === "web" && modifiers.key === "Enter" && !modifiers.shiftKey && !modifiers.isComposing) { event.preventDefault(); submit() }
189          }}
190          onContentSizeChange={(e) =>
191            setHeight(
192              Math.max(
193                minRows * 24,
194                Math.min(maxRows * 24, e.nativeEvent.contentSize.height)
195              )
196            )
197          }
198          style={{
199            height,
200            fontSize: 14,
201            fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined,
202            lineHeight: 24,
203            color: textColor,
204            textAlignVertical: "top",
205            padding: 0,
206            paddingHorizontal: 8,
207            paddingTop: 6,
208          }}
209        />
210        <View style={{ flexDirection: "row", alignItems: "center", gap: 4, minHeight: 32 }}>
211          {actions.length > 0 && (
212              <Pressable
213                accessibilityLabel="Add attachment or action"
214                accessibilityRole="button"
215                accessibilityState={{ expanded: menu === "actions" }}
216                aria-expanded={menu === "actions"}
217                disabled={disabled || busy}
218                onPress={() => setMenu(menu === "actions" ? null : "actions")}
219                hitSlop={8}
220                style={{ width: 32, height: 32, alignItems: "center", justifyContent: "center" }}
221              >
222                <Svg width={16} height={16} viewBox="0 0 24 24" style={{ transform: [{ rotate: menu === "actions" ? "45deg" : "0deg" }] }}><Path d="M12 5v14M5 12h14" fill="none" stroke={mutedColor} strokeWidth={2} strokeLinecap="round" /></Svg>
223              </Pressable>
224            )}
225          {leadingAction}
226          {models.length > 0 && (
227            <Pressable
228              ref={modelTrigger}
229              accessibilityRole="button"
230              accessibilityLabel="Choose model"
231              accessibilityState={{ expanded: menu === "models" }}
232              aria-expanded={menu === "models"}
233              disabled={disabled || busy}
234              onPress={() => {
235                if (menu === "models") { setMenu(null); return }
236                modelTrigger.current?.measureInWindow((_, y, __, h) => {
237                  const below = viewportHeight - y - h
238                  setModelsAbove(below < Math.min(models.length, 5) * 36 + 24 && y > below)
239                  setMenu("models")
240                })
241              }}
242              style={{
243                flexDirection: "row",
244                gap: 6,
245                alignItems: "center",
246                paddingVertical: 6,
247                paddingHorizontal: 8,
248              }}
249            >
250              {models.find(m => m.value === chosen)?.icon && <View style={{ width: 16, height: 16, alignItems: "center", justifyContent: "center" }}>{models.find(m => m.value === chosen)?.icon}</View>}
251              <Text style={{ color: mutedColor, fontSize: 12, fontFamily: Platform.OS === "web" ? '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif' : undefined }}>
252                {models.find((m) => m.value === chosen)?.label ?? "Model"}
253              </Text>
254              <Svg width={14} height={14} viewBox="0 0 24 24" style={{ transform: [{ rotate: menu === "models" ? "180deg" : "0deg" }] }}><Path d="m6 9 6 6 6-6" fill="none" stroke={mutedColor} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" /></Svg>
255            </Pressable>
256          )}
257          <View style={{ flex: 1 }} />
258          <Pressable
259            disabled={!busy && (!text.trim() || disabled)}
260            accessibilityRole="button"
261            accessibilityLabel={busy ? "Stop response" : "Send prompt"}
262            onPress={busy ? onStop : () => void submit()}
263            style={({ pressed }) => ({
264              width: 32,
265              height: 32,
266              borderRadius: 16,
267              alignItems: "center",
268              justifyContent: "center",
269              backgroundColor: accentColor,
270              opacity: pressed ? 0.7 : !busy && !text.trim() ? 0.4 : 1,
271            })}
272          >
273            <Svg width={16} height={16} viewBox="0 0 24 24">
274              <Path
275                d={busy ? "M7 7h10v10H7z" : "M12 19V5m-6 6 6-6 6 6"}
276                stroke="#fff"
277                strokeWidth={2}
278                strokeLinecap="round"
279                strokeLinejoin="round"
280                fill={busy ? "#fff" : "none"}
281              />
282            </Svg>
283          </Pressable>
284        </View>
285      </Animated.View>
286    </View>
287  )
288}