@terreno/ui 0.6.0 → 0.7.1

package/src/AiSuggestionBox.tsx

@@ -0,0 +1,233 @@
+import {type FC, useCallback, useEffect, useState} from "react";
+import {Pressable, View} from "react-native";
+
+import type {AiSuggestionProps} from "./Common";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+export interface AiSuggestionBoxProps extends AiSuggestionProps {
+  testID?: string;
+}
+
+export const AiSuggestionBox: FC<AiSuggestionBoxProps> = ({
+  status,
+  text,
+  onAdd,
+  onHide,
+  onShow,
+  onFeedback,
+  feedback,
+  notStartedText = "AI note will be generated once the session ends.",
+  generatingText = "AI note generation in progress...",
+  testID,
+}) => {
+  const {theme} = useTheme();
+  const [expanded, setExpanded] = useState(true);
+
+  // Re-expand when a new suggestion arrives or is added
+  useEffect(() => {
+    if (status === "ready" || status === "added") {
+      setExpanded(true);
+    }
+  }, [status]);
+
+  const isAdded = status === "added";
+
+  const backgroundColor = isAdded
+    ? theme.surface.successLight
+    : status === "not-started"
+      ? theme.primitives.neutral050
+      : theme.primitives.primary000;
+
+  const borderColor = isAdded
+    ? "#9BE7B2"
+    : status === "not-started"
+      ? theme.surface.secondaryLight
+      : theme.primitives.primary100;
+
+  const containerStyle = {
+    backgroundColor,
+    borderColor,
+    borderRadius: 8,
+    borderWidth: 1,
+    gap: 8,
+    padding: 8,
+    width: "100%" as const,
+  };
+
+  const headingText =
+    status === "not-started"
+      ? notStartedText
+      : status === "generating"
+        ? generatingText
+        : isAdded
+          ? "AI-generated note added!"
+          : expanded
+            ? "AI-generated note"
+            : "AI-generated note (hidden)";
+
+  const handleHide = useCallback(() => {
+    setExpanded(false);
+    onHide?.();
+  }, [onHide]);
+
+  const handleShow = useCallback(() => {
+    setExpanded(true);
+    onShow?.();
+  }, [onShow]);
+
+  const handleThumbsUp = useCallback(() => {
+    if (!onFeedback) {
+      return;
+    }
+    onFeedback(feedback === "like" ? null : "like");
+  }, [onFeedback, feedback]);
+
+  const handleThumbsDown = useCallback(() => {
+    if (!onFeedback) {
+      return;
+    }
+    onFeedback(feedback === "dislike" ? null : "dislike");
+  }, [onFeedback, feedback]);
+
+  const renderFeedback = () => (
+    <View
+      style={{alignItems: "center", flexDirection: "row"}}
+      testID={testID ? `${testID}-feedback` : undefined}
+    >
+      <Pressable
+        accessibilityLabel="Thumbs up"
+        accessibilityRole="button"
+        onPress={handleThumbsUp}
+        style={{alignItems: "center", height: 24, justifyContent: "center", width: 24}}
+        testID={testID ? `${testID}-thumbs-up` : undefined}
+      >
+        <Icon
+          color={feedback === "like" ? "secondaryDark" : "secondaryLight"}
+          iconName="thumbs-up"
+          size="xs"
+          type={feedback === "like" ? "solid" : "regular"}
+        />
+      </Pressable>
+      <Pressable
+        accessibilityLabel="Thumbs down"
+        accessibilityRole="button"
+        onPress={handleThumbsDown}
+        style={{alignItems: "center", height: 24, justifyContent: "center", width: 24}}
+        testID={testID ? `${testID}-thumbs-down` : undefined}
+      >
+        <Icon
+          color={feedback === "dislike" ? "secondaryDark" : "secondaryLight"}
+          iconName="thumbs-down"
+          size="xs"
+          type={feedback === "dislike" ? "solid" : "regular"}
+        />
+      </Pressable>
+    </View>
+  );
+
+  if (status === "not-started" || status === "generating") {
+    return (
+      <View style={containerStyle} testID={testID}>
+        <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+          <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+          <View style={{flex: 1}}>
+            <Text color="secondaryDark" size="sm">
+              {headingText}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  if (!expanded) {
+    return (
+      <View style={{...containerStyle, flexDirection: "column"}} testID={testID}>
+        <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+          <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+          <View style={{flex: 1}}>
+            <Text color="secondaryDark" size="sm">
+              {headingText}
+            </Text>
+          </View>
+          <View style={{alignItems: "center", flexDirection: "row", gap: 4}}>
+            <Pressable
+              accessibilityLabel="Show suggestion"
+              accessibilityRole="button"
+              onPress={handleShow}
+              style={{height: 28, justifyContent: "center", paddingHorizontal: 16}}
+              testID={testID ? `${testID}-show` : undefined}
+            >
+              <Text bold color="secondaryDark" size="sm">
+                Show
+              </Text>
+            </Pressable>
+            {renderFeedback()}
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={{...containerStyle, alignItems: "flex-end"}} testID={testID}>
+      <View style={{alignItems: "center", flexDirection: "row", gap: 4, width: "100%"}}>
+        <Icon color="secondaryDark" iconName="wand-magic-sparkles" size="xs" />
+        <View style={{flex: 1}}>
+          <Text color="secondaryDark" size="sm">
+            {headingText}
+          </Text>
+        </View>
+        {renderFeedback()}
+      </View>
+
+      {Boolean(text) && (
+        <View style={{paddingBottom: 4, width: "100%"}}>
+          <Text size="md">{text}</Text>
+        </View>
+      )}
+
+      <View
+        style={{
+          alignItems: "center",
+          flexDirection: "row",
+          gap: 8,
+          justifyContent: "flex-end",
+          width: "100%",
+        }}
+      >
+        <Pressable
+          accessibilityLabel="Hide suggestion"
+          accessibilityRole="button"
+          onPress={handleHide}
+          style={{height: 28, justifyContent: "center", paddingHorizontal: 16}}
+          testID={testID ? `${testID}-hide` : undefined}
+        >
+          <Text bold color="secondaryDark" size="sm">
+            Hide
+          </Text>
+        </Pressable>
+        <Pressable
+          accessibilityLabel="Add to note"
+          accessibilityRole="button"
+          onPress={onAdd}
+          style={{
+            alignItems: "center",
+            backgroundColor: theme.surface.secondaryDark,
+            borderRadius: 360,
+            height: 28,
+            justifyContent: "center",
+            paddingHorizontal: 16,
+          }}
+          testID={testID ? `${testID}-add` : undefined}
+        >
+          <Text bold color="inverted" size="sm">
+            Add to note
+          </Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+};

package/src/Common.ts

@@ -630,6 +630,18 @@ export interface ErrorTextProps {
   errorText?: string;
 }
 
+export interface AiSuggestionProps {
+  status: "not-started" | "generating" | "ready" | "added";
+  text?: string;
+  onAdd?: () => void;
+  onHide?: () => void;
+  onShow?: () => void;
+  onFeedback?: (feedback: "like" | "dislike" | null) => void;
+  feedback?: "like" | "dislike" | null;
+  notStartedText?: string;
+  generatingText?: string;
+}
+
 export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTextProps {
   type?: "email" | "password" | "phoneNumber" | "search" | "text" | "url";
 
@@ -642,6 +654,8 @@ export interface TextFieldProps extends BaseFieldProps, HelperTextProps, ErrorTe
 
   inputRef?: any;
   trimOnBlur?: boolean;
+
+  aiSuggestion?: AiSuggestionProps;
 }
 
 export interface TextAreaProps extends Omit<TextFieldProps, "multiline" | "type"> {}
@@ -1904,6 +1918,7 @@ export interface PageProps {
   navigation?: any;
   scroll?: boolean;
   loading?: boolean;
+  loadingText?: string;
   display?: "flex" | "none" | "block" | "inlineBlock";
   title?: string;
   backButton?: boolean;

package/src/CommonIconTypes.ts

@@ -466,7 +466,7 @@ export type FontAwesome6BrandNames =
   | "yammer"
   | "yandex-international"
   | "yandex"
-  | "yarn"
+  | "bun"
   | "yelp"
   | "yoast"
   | "youtube"

package/src/FlatList.tsx

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

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

@@ -10,6 +10,7 @@ import {
   View,
 } from "react-native";
 
+import {AiSuggestionBox} from "./AiSuggestionBox";
 import type {TextFieldProps, TextStyleWithOutline} from "./Common";
 import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
 import {Icon} from "./Icon";
@@ -78,6 +79,8 @@ export const TextField: FC<TextFieldProps> = ({
   onEnter,
   onSubmitEditing,
   testID,
+  id,
+  aiSuggestion,
 }) => {
   const {theme} = useTheme();
 
@@ -146,86 +149,102 @@ export const TextField: FC<TextFieldProps> = ({
       {Boolean(errorText) && <FieldError text={errorText!} />}
       <View
         style={{
-          alignItems: "center",
           backgroundColor: disabled ? theme.surface.neutralLight : theme.surface.base,
           borderColor,
           borderRadius: 4,
           borderWidth: focused ? 3 : 1,
-          flexDirection: "row",
+          flexDirection: "column",
+          gap: aiSuggestion ? 10 : 0,
           overflow: "hidden",
           paddingHorizontal: focused ? 10 : 12,
           paddingVertical: focused ? 6 : 8,
         }}
       >
-        <TextInput
-          accessibilityHint="Enter text here"
-          accessibilityState={{disabled}}
-          aria-label="Text input field"
-          autoCapitalize={type === "text" ? "sentences" : "none"}
-          autoCorrect={shouldAutocorrect}
-          blurOnSubmit={blurOnSubmit}
-          enterKeyHint={returnKeyType}
-          keyboardType={keyboardType as KeyboardTypeOptions}
-          multiline={multiline}
-          numberOfLines={rows || 4}
-          onBlur={() => {
-            if (disabled) return;
-            let finalValue = value ?? "";
+        {Boolean(aiSuggestion) && (
+          <AiSuggestionBox
+            testID={testID ? `${testID}-ai-suggestion` : undefined}
+            {...aiSuggestion!}
+          />
+        )}
+        <View
+          style={{
+            alignItems: "center",
+            flexDirection: "row",
+          }}
+        >
+          <TextInput
+            accessibilityHint="Enter text here"
+            accessibilityState={{disabled}}
+            aria-label="Text input field"
+            autoCapitalize={type === "text" ? "sentences" : "none"}
+            autoCorrect={shouldAutocorrect}
+            blurOnSubmit={blurOnSubmit}
+            enterKeyHint={returnKeyType}
+            keyboardType={keyboardType as KeyboardTypeOptions}
+            multiline={multiline}
+            nativeID={id}
+            numberOfLines={rows || 4}
+            onBlur={() => {
+              if (disabled) {
+                return;
+              }
+              let finalValue = value ?? "";
 
-            if (trimOnBlur && value) {
-              finalValue = finalValue.trim();
-              if (finalValue !== value) {
-                onChange(finalValue);
+              if (trimOnBlur && value) {
+                finalValue = finalValue.trim();
+                if (finalValue !== value) {
+                  onChange(finalValue);
+                }
               }
-            }
-            if (onBlur) {
-              onBlur(finalValue);
-            }
-            setFocused(false);
-          }}
-          onChangeText={onChange}
-          onContentSizeChange={(event) => {
-            if (!grow) {
-              return;
-            }
-            setHeight(event.nativeEvent.contentSize.height);
-          }}
-          onFocus={() => {
-            if (!disabled) {
-              setFocused(true);
-            }
-            if (onFocus) {
-              onFocus();
-            }
-          }}
-          onSubmitEditing={() => {
-            if (onEnter) {
-              onEnter();
-            }
-            if (onSubmitEditing) {
-              onSubmitEditing();
-            }
-          }}
-          placeholder={placeholder}
-          placeholderTextColor={theme.text.secondaryLight}
-          readOnly={disabled}
-          ref={(ref) => {
-            if (inputRef) {
-              inputRef(ref);
-            }
-          }}
-          secureTextEntry={type === "password"}
-          style={defaultTextInputStyles}
-          testID={testID}
-          textContentType={textContentType}
-          underlineColorAndroid="transparent"
-          value={value}
-        />
-        {Boolean(iconName) && (
-          <Pressable aria-role="button" onPress={onIconClick}>
-            <Icon iconName={iconName!} size="md" />
-          </Pressable>
-        )}
+              if (onBlur) {
+                onBlur(finalValue);
+              }
+              setFocused(false);
+            }}
+            onChangeText={onChange}
+            onContentSizeChange={(event) => {
+              if (!grow) {
+                return;
+              }
+              setHeight(event.nativeEvent.contentSize.height);
+            }}
+            onFocus={() => {
+              if (!disabled) {
+                setFocused(true);
+              }
+              if (onFocus) {
+                onFocus();
+              }
+            }}
+            onSubmitEditing={() => {
+              if (onEnter) {
+                onEnter();
+              }
+              if (onSubmitEditing) {
+                onSubmitEditing();
+              }
+            }}
+            placeholder={placeholder}
+            placeholderTextColor={theme.text.secondaryLight}
+            readOnly={disabled}
+            ref={(ref) => {
+              if (inputRef) {
+                inputRef(ref);
+              }
+            }}
+            secureTextEntry={type === "password"}
+            style={defaultTextInputStyles}
+            testID={testID}
+            textContentType={textContentType}
+            underlineColorAndroid="transparent"
+            value={value}
+          />
+          {Boolean(iconName) && (
+            <Pressable aria-role="button" onPress={onIconClick}>
+              <Icon iconName={iconName!} size="md" />
+            </Pressable>
+          )}
+        </View>
       </View>
       {Boolean(helperText) && <FieldHelperText text={helperText!} />}
       {/* {type === "numberRange" && value && (