@terreno/ui 0.6.0 → 0.7.0

package/src/GPTChat.tsx

@@ -103,6 +103,7 @@ export interface GPTChatProps {
   onSubmit: (prompt: string) => void;
   onUpdateTitle?: (id: string, title: string) => void;
   selectedModel?: string;
+  suggestedPrompts?: string[];
   systemMemory?: string;
   testID?: string;
 }
@@ -706,6 +707,7 @@ export const GPTChat = ({
   onSubmit,
   onUpdateTitle,
   selectedModel,
+  suggestedPrompts,
   systemMemory,
   testID,
 }: GPTChatProps): React.ReactElement => {
@@ -730,7 +732,7 @@ export const GPTChat = ({
     setInputValue("");
   }, [inputValue, isStreaming, onSubmit]);
 
-  // On web, intercept Enter key in the chat input to submit (Shift+Enter for newline)
+  // On web: Enter sends, Cmd+Enter inserts a new line
   const handleSubmitRef = useRef(handleSubmit);
   handleSubmitRef.current = handleSubmit;
   useEffect(() => {
@@ -738,7 +740,7 @@ export const GPTChat = ({
       return;
     }
     const handler = (e: KeyboardEvent) => {
-      if (e.key !== "Enter" || e.shiftKey) {
+      if (e.key !== "Enter") {
         return;
       }
       const target = e.target as HTMLElement | null;
@@ -746,6 +748,10 @@ export const GPTChat = ({
       if (testId !== "gpt-input") {
         return;
       }
+      if (e.metaKey || e.shiftKey) {
+        // Cmd+Enter or Shift+Enter: allow default (new line)
+        return;
+      }
       e.preventDefault();
       handleSubmitRef.current();
     };
@@ -830,6 +836,16 @@ export const GPTChat = ({
     setEditingTitle("");
   }, [editingHistoryId, editingTitle, onUpdateTitle]);
 
+  const handleSuggestedPrompt = useCallback(
+    (prompt: string) => {
+      if (isStreaming) {
+        return;
+      }
+      onSubmit(prompt);
+    },
+    [isStreaming, onSubmit]
+  );
+
   const handleOpenApiKeyModal = useCallback(() => {
     setApiKeyDraft(geminiApiKey ?? "");
     setIsApiKeyModalVisible(true);
@@ -917,6 +933,28 @@ export const GPTChat = ({
         <Box flex="grow" marginBottom={3} onLayout={handleViewportLayout}>
           <Box flex="grow" gap={3} onScroll={handleScroll} scroll={true} scrollRef={scrollViewRef}>
             <Box gap={3} onLayout={handleContentLayout}>
+              {currentMessages.length === 0 && suggestedPrompts && suggestedPrompts.length > 0 && (
+                <Box alignItems="center" gap={2} paddingY={4}>
+                  <Text color="secondaryDark" size="sm">
+                    Try asking...
+                  </Text>
+                  <Box direction="row" gap={2} wrap={true}>
+                    {suggestedPrompts.map((prompt) => (
+                      <Box
+                        accessibilityHint="Send this suggested prompt"
+                        accessibilityLabel={prompt}
+                        border="default"
+                        key={prompt}
+                        onClick={() => handleSuggestedPrompt(prompt)}
+                        padding={2}
+                        rounding="lg"
+                      >
+                        <Text size="sm">{prompt}</Text>
+                      </Box>
+                    ))}
+                  </Box>
+                </Box>
+              )}
               {currentMessages.map((message, index) => {
                 // Tool call/result messages
                 if (message.role === "tool-call" && message.toolCall) {

package/src/Page.tsx

@@ -8,6 +8,7 @@ import {ErrorBoundary} from "./ErrorBoundary";
 import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
+import {Text} from "./Text";
 
 export class Page extends React.Component<PageProps, {}> {
   actionSheetRef: React.RefObject<any> = React.createRef();
@@ -74,15 +75,25 @@ export class Page extends React.Component<PageProps, {}> {
           width="100%"
         >
           {this.renderHeader()}
-          {this.props.loading === true && <Spinner />}
-          {/* <KeyboardAccessoryNavigation
-          avoidKeyboard
-          doneButton={true}
-          nextButton={true}
-          previousButton={true}
-        /> */}
-
-          {this.props.children}
+          {this.props.loading ? (
+            <Box
+              alignItems="center"
+              direction="column"
+              display="flex"
+              flex="grow"
+              justifyContent="center"
+              marginTop={8}
+            >
+              <Spinner />
+              {Boolean(this.props.loadingText) && (
+                <Box marginTop={2}>
+                  <Text color="secondaryDark">{this.props.loadingText}</Text>
+                </Box>
+              )}
+            </Box>
+          ) : (
+            this.props.children
+          )}
         </Box>
         {Boolean(this.props.footer) && (
           <Box

package/src/ScrollView.tsx

@@ -1,2 +1,3 @@
 import {ScrollView} from "react-native";
+
 export {ScrollView};

package/src/TextField.tsx

@@ -78,6 +78,7 @@ export const TextField: FC<TextFieldProps> = ({
   onEnter,
   onSubmitEditing,
   testID,
+  id,
 }) => {
   const {theme} = useTheme();
 
@@ -167,6 +168,7 @@ export const TextField: FC<TextFieldProps> = ({
           enterKeyHint={returnKeyType}
           keyboardType={keyboardType as KeyboardTypeOptions}
           multiline={multiline}
+          nativeID={id}
           numberOfLines={rows || 4}
           onBlur={() => {
             if (disabled) return;

package/src/__snapshots__/AddressField.test.tsx.snap

@@ -41,6 +41,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": undefined,
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -144,6 +145,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "address2",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -247,6 +249,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "city",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -1129,6 +1132,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "zipcode",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],

package/src/__snapshots__/CustomSelectField.test.tsx.snap

@@ -1590,6 +1590,7 @@ exports[`CustomSelectField renders with custom value (not in options) 1`] = `
                     "enterKeyHint": undefined,
                     "keyboardType": "default",
                     "multiline": undefined,
+                    "nativeID": "customOptions",
                     "numberOfLines": 1,
                     "onBlur": [Function],
                     "onChangeText": [Function],

package/src/__snapshots__/EmailField.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`EmailField renders correctly with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`EmailField renders with icon 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/Field.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`Field renders text field by default 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`Field renders text field with type text 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -180,6 +182,7 @@ exports[`Field renders password field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -259,6 +262,7 @@ exports[`Field renders email field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -338,6 +342,7 @@ exports[`Field renders url field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "url",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -417,6 +422,7 @@ exports[`Field renders number field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -496,6 +502,7 @@ exports[`Field renders textarea field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -3275,6 +3282,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": undefined,
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -3378,6 +3386,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "address2",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -3481,6 +3490,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "city",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -4363,6 +4373,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "zipcode",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -4452,6 +4463,7 @@ exports[`Field renders phoneNumber field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/MobileAddressAutoComplete.test.tsx.snap

@@ -72,6 +72,7 @@ exports[`MobileAddressAutocomplete renders TextField fallback without Google API
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": "address1",
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/NumberField.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`NumberField renders correctly with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/Page.test.tsx.snap

@@ -937,27 +937,22 @@ exports[`Page renders loading state 1`] = `
               "children": [
                 {
                   "$$typeof": Symbol(react.test.json),
-                  "children": [
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        "Content",
-                      ],
-                      "props": {
-                        "numberOfLines": 0,
-                        "selectable": undefined,
-                        "style": {
-                          "color": "#1C1C1C",
-                          "fontFamily": "text-regular",
-                          "fontSize": 14,
-                          "textAlign": "left",
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "Text",
+                  "children": null,
+                  "props": {
+                    "onPointerEnter": [Function: AsyncFunction],
+                    "onPointerLeave": [Function: AsyncFunction],
+                    "style": {
+                      "alignItems": "center",
+                      "display": "flex",
+                      "flex": undefined,
+                      "flexDirection": "column",
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "justifyContent": "center",
+                      "marginTop": 48,
                     },
-                  ],
-                  "props": {},
+                    "testID": undefined,
+                  },
                   "type": "View",
                 },
               ],

package/src/__snapshots__/PhoneNumberField.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`PhoneNumberField renders correctly with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`PhoneNumberField formats phone number as user types 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -180,6 +182,7 @@ exports[`PhoneNumberField renders with icon 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -268,6 +271,7 @@ exports[`PhoneNumberField uses US as default country code 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -347,6 +351,7 @@ exports[`PhoneNumberField accepts custom country code 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/TapToEdit.test.tsx.snap

@@ -462,6 +462,7 @@ exports[`TapToEdit shows editing mode when isEditing is true 1`] = `
                     "enterKeyHint": undefined,
                     "keyboardType": "default",
                     "multiline": undefined,
+                    "nativeID": undefined,
                     "numberOfLines": 1,
                     "onBlur": [Function],
                     "onChangeText": [Function],

package/src/__snapshots__/TextArea.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`TextArea snapshots should match snapshot with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -116,6 +117,7 @@ exports[`TextArea snapshots should match snapshot with all props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 5,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -236,6 +238,7 @@ exports[`TextArea snapshots should match snapshot when disabled 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -369,6 +372,7 @@ exports[`TextArea snapshots should match snapshot with error state 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -463,6 +467,7 @@ exports[`TextArea snapshots should match snapshot with multiline content 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 4,
             "onBlur": [Function],
             "onChangeText": [class Function],

package/src/__snapshots__/TextField.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`TextField snapshots should match snapshot with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -155,6 +156,7 @@ exports[`TextField snapshots should match snapshot with all props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": false,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -284,6 +286,7 @@ exports[`TextField snapshots should match snapshot when disabled 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -378,6 +381,7 @@ exports[`TextField snapshots should match snapshot with multiline 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 3,
             "onBlur": [Function],
             "onChangeText": [class Function],
@@ -511,6 +515,7 @@ exports[`TextField snapshots should match snapshot with error state 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [class Function],

package/src/__snapshots__/UnifiedAddressAutoComplete.test.tsx.snap

@@ -37,6 +37,7 @@ exports[`UnifiedAddressAutoCompleteField renders correctly without Google API ke
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -131,6 +132,7 @@ exports[`UnifiedAddressAutoCompleteField renders with input value 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -225,6 +227,7 @@ exports[`UnifiedAddressAutoCompleteField renders disabled state 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -319,6 +322,7 @@ exports[`UnifiedAddressAutoCompleteField renders with invalid Google API key (fa
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/__snapshots__/WebAddressAutocomplete.test.tsx.snap

@@ -22,6 +22,7 @@ exports[`WebAddressAutocomplete renders correctly without Google API key 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`WebAddressAutocomplete renders with input value 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -180,6 +182,7 @@ exports[`WebAddressAutocomplete renders disabled state 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

package/src/login/LoginScreen.tsx

@@ -91,6 +91,7 @@ export const LoginScreen: FC<LoginScreenProps> = ({
             <TextField
               autoComplete={field.autoComplete}
               disabled={loading}
+              id={`${testID}-${field.name}-input`}
               key={field.name}
               onChange={(value: string) => handleFieldChange(field.name, value)}
               placeholder={field.placeholder ?? field.label}

package/src/login/__snapshots__/LoginScreen.test.tsx.snap

@@ -85,6 +85,7 @@ exports[`LoginScreen renders correctly with all props 1`] = `
                                     "enterKeyHint": undefined,
                                     "keyboardType": "email-address",
                                     "multiline": undefined,
+                                    "nativeID": "login-screen-email-input",
                                     "numberOfLines": 1,
                                     "onBlur": [Function],
                                     "onChangeText": [Function],
@@ -176,6 +177,7 @@ exports[`LoginScreen renders correctly with all props 1`] = `
                                     "enterKeyHint": undefined,
                                     "keyboardType": "default",
                                     "multiline": undefined,
+                                    "nativeID": "login-screen-password-input",
                                     "numberOfLines": 1,
                                     "onBlur": [Function],
                                     "onChangeText": [Function],

package/src/signUp/SignUpScreen.tsx

@@ -108,6 +108,7 @@ export const SignUpScreen: FC<SignUpScreenProps> = ({
             <TextField
               autoComplete={field.autoComplete}
               disabled={loading}
+              id={`${testID}-${field.name}-input`}
               key={field.name}
               onChange={(value: string) => handleFieldChange(field.name, value)}
               placeholder={field.placeholder ?? field.label}

package/src/signUp/__snapshots__/SignUpScreen.test.tsx.snap

@@ -85,6 +85,7 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                     "enterKeyHint": undefined,
                                     "keyboardType": "default",
                                     "multiline": undefined,
+                                    "nativeID": "signup-screen-name-input",
                                     "numberOfLines": 1,
                                     "onBlur": [Function],
                                     "onChangeText": [Function],
@@ -176,6 +177,7 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                     "enterKeyHint": undefined,
                                     "keyboardType": "email-address",
                                     "multiline": undefined,
+                                    "nativeID": "signup-screen-email-input",
                                     "numberOfLines": 1,
                                     "onBlur": [Function],
                                     "onChangeText": [Function],
@@ -267,6 +269,7 @@ exports[`SignUpScreen renders correctly with all props 1`] = `
                                     "enterKeyHint": undefined,
                                     "keyboardType": "default",
                                     "multiline": undefined,
+                                    "nativeID": "signup-screen-password-input",
                                     "numberOfLines": 1,
                                     "onBlur": [Function],
                                     "onChangeText": [Function],