react-native-srschat 0.1.58 → 0.1.60

package/lib/typescript/components/welcomeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"welcomeInput.d.ts","sourceRoot":"","sources":["../../../src/components/welcomeInput.js"],"names":[],"mappings":"AAgBO;;;sBA+CN;kBA/D8D,OAAO"}
+{"version":3,"file":"welcomeInput.d.ts","sourceRoot":"","sources":["../../../src/components/welcomeInput.js"],"names":[],"mappings":"AAgBO;;;sBAwEN;kBAxF8D,OAAO"}

package/lib/typescript/layout/window.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAeO;;sBAiLN;kBAhM8D,OAAO"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/layout/window.js"],"names":[],"mappings":"AAeO;;sBAuLN;kBAtM8D,OAAO"}

package/lib/typescript/utils/audioRecorder.d.ts

@@ -1,5 +1,5 @@
 export function setPermissionStatusHandlers(getter: any, setter: any): void;
-export function initVoice(onResult: any): Promise<boolean>;
+export function initVoice(onResult: any, onPartialResult?: null): Promise<boolean>;
 export function startRecording(): Promise<boolean>;
 export function stopRecording(): Promise<void>;
 export function cancelRecording(): Promise<void>;

package/lib/typescript/utils/audioRecorder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"audioRecorder.d.ts","sourceRoot":"","sources":["../../../src/utils/audioRecorder.js"],"names":[],"mappings":"AAqBA,4EAGC;AAGD,2DA4GC;AA+ED,mDAyBC;AAED,+CAoCC;AAED,iDASC;AAED,2DA2BC;AAiDD,iDAMC;AAED,gCAgBC"}
+{"version":3,"file":"audioRecorder.d.ts","sourceRoot":"","sources":["../../../src/utils/audioRecorder.js"],"names":[],"mappings":"AAwBA,4EAGC;AAGD,mFAkJC;AA4FD,mDA4BC;AAED,+CA2EC;AAED,iDASC;AAED,2DA2BC;AAiDD,iDAMC;AAED,gCAgBC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-srschat",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "private": false,
   "description": "A modern, sophisticated chat interface for React Native",
   "main": "lib/commonjs/index",

package/src/components/input.js

@@ -16,6 +16,7 @@ import { VoiceButton } from './voice';
 
 export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
   const { handleSend, input, setInput, showModal, data } = useContext(AppContext);
+  const inputRef = useRef(null);
   
   const handleKeyPress = ({ nativeEvent }) => {
     if (nativeEvent.key === 'return' && !nativeEvent.shiftKey) {
@@ -33,10 +34,11 @@ export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
 
   return (
     <>
-    <Text style={styles.textBeta}>Beta version. AI Assistant is still learning!</Text>
+    <Text style={styles.textBeta} allowFontScaling={false}>Beta version. AI Assistant is still learning!</Text>
     <View style={styles.inputWrapper}>
         <View style={styles.inputContainer}>
         <TextInput
+            ref={inputRef}
             style={styles.input}
             value={input}
             onChangeText={setInput}
@@ -47,9 +49,32 @@ export const ChatInput = ({ onProductCardClick, onAddToCartClick }) => {
             enablesReturnKeyAutomatically={true}
             onKeyPress={handleKeyPress}
             onSubmitEditing={onSubmitEditing}
+            selection={undefined}
             blurOnSubmit={false}
         />
-        <VoiceButton/>
+        <VoiceButton setInput={(text) => {
+          setInput(text);
+          // Auto-scroll to end
+          if (inputRef.current) {
+            // For iOS and Android, blur and refocus to ensure scroll
+            inputRef.current.blur();
+            setTimeout(() => {
+              if (inputRef.current) {
+                inputRef.current.focus();
+                // Set selection to end - Android sometimes needs a slight delay
+                if (Platform.OS === 'android') {
+                  setTimeout(() => {
+                    if (inputRef.current) {
+                      inputRef.current.setSelection(text.length, text.length);
+                    }
+                  }, 10);
+                } else {
+                  inputRef.current.setSelection(text.length, text.length);
+                }
+              }
+            }, 50);
+          }
+        }}/>
         <TouchableOpacity style={styles.sendButton} onPress={() => handleSend(input)} >
             <Ionicons name="paper-plane-outline" size={24} color='#8E8E93' />
         </TouchableOpacity>
@@ -107,6 +132,8 @@ const styles = StyleSheet.create({
     color: '#808080',
     fontWeight: '400',
     marginTop: 5,
-    marginBottom: 2
+    marginBottom: 2,
+    textBreakStrategy: "simple",
+    lineHeight: 16,
   },
 });

package/src/components/productCard.js

@@ -352,11 +352,11 @@ export const ProductCard = ({ prod, onFocusQuantityInput, messageId }) => {
             <View style={styles.priceContainer}>
                 {isOnSale ? (
                 <>
-                    <Text style={styles.originalPrice}>${Number(grossPrice).toFixed(2)}</Text>
-                    <Text style={styles.salePrice}>${Number(netPrice).toFixed(2)}</Text>
+                    <Text style={styles.originalPrice} allowFontScaling={false}>${Number(grossPrice).toFixed(2)}</Text>
+                    <Text style={styles.salePrice} allowFontScaling={false}>${Number(netPrice).toFixed(2)}</Text>
                 </>
                 ) : (
-                <Text style={styles.price}>${Number(grossPrice).toFixed(2)}</Text>
+                <Text style={styles.price} allowFontScaling={false}>${Number(grossPrice).toFixed(2)}</Text>
                 )}
                 <Text style={styles.perUnit}> / {selectedUom}</Text>
             </View>              
@@ -520,24 +520,39 @@ const styles = StyleSheet.create({
   price: {
     fontSize: 14,
     fontWeight: "bold",
+    color: "#161616",
     textAlign: "center",
+    textBreakStrategy: "simple",
+    alignSelf: "stretch",
+    lineHeight: 20,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
   priceContainer: {
     flexDirection: "row",
     alignItems: "center",
-    flexWrap: "wrap",
+    flexWrap: "nowrap",
     justifyContent: "center",
+    paddingHorizontal: 2,
   },
   originalPrice: {
     fontSize: 14,
     textDecorationLine: "line-through",
     color: "gray",
     marginRight: 5,
+    textBreakStrategy: "simple",
+    lineHeight: 20,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
   salePrice: {
     fontSize: 16,
     fontWeight: "bold",
     color: "red",
+    textBreakStrategy: "simple",
+    lineHeight: 22,
+    includeFontPadding: false,
+    textAlignVertical: 'center',
   },
   perUnit: {
     fontSize: 12,

package/src/components/testing.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { View, Button, StyleSheet, TouchableOpacity, Text, ScrollView } from 'react-native';
-import { ProductCard } from './productCard';
+import { View, Button, StyleSheet, TouchableOpacity, Text } from 'react-native';
 
 export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
 
@@ -15,8 +14,7 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
           "net_price": 7.83,
           "is_on_sale": false,
           "quantity_available": 0,
-          "discounts": null,
-          "min_pack_qty": 1.5
+          "discounts": null
         }
       }
     },
@@ -30,52 +28,25 @@ export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
   }
 
   return (
-    <ScrollView style={styles.container}>
-      <Text style={styles.title}>Test Product Card</Text>
-      
-      {/* Display the actual product card */}
-      <View style={styles.productCardContainer}>
-        <ProductCard 
-          prod={product}
-          onFocusQuantityInput={(partNumber) => console.log('Focus on:', partNumber)}
-          messageId="test-message-123"
-        />
-      </View>
-      
-      {/* Test buttons */}
-      <View style={styles.buttonContainer}>
-        <TouchableOpacity style={styles.button} onPress={() => onProductCardClick(product)}>
-            <Text style={styles.buttonText}>Product Card Click</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={() => onAddToCartClick({"quantity":1,"product":product})}>
-            <Text style={styles.buttonText}>Add to Cart</Text>
-        </TouchableOpacity>
-      </View>
-    </ScrollView>
+    <View style={styles.container}>
+      <TouchableOpacity style={styles.button} onPress={() => onProductCardClick(product)}>
+          <Text style={styles.buttonText}>Product Card Click</Text>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.button} onPress={() => onAddToCartClick({"quantity":1,"product":product})}>
+          <Text style={styles.buttonText}>Add to Cart</Text>
+      </TouchableOpacity>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    backgroundColor: '#f6f6f6',
-    borderTopWidth: 1,
-    borderTopColor: '#DDD',
-  },
-  title: {
-    fontSize: 18,
-    fontWeight: 'bold',
-    textAlign: 'center',
-    padding: 16,
-  },
-  productCardContainer: {
-    paddingHorizontal: 16,
-  },
-  buttonContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'space-evenly',
     paddingHorizontal: 16,
-    paddingVertical: 20,
+    borderTopWidth: 1,
+    borderTopColor: '#DDD',
   },
   button: {
     backgroundColor: "#d4d4d4",
@@ -83,9 +54,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12,
     borderRadius: 5,
     alignItems: "center",
-  },
-  buttonText: {
-    fontSize: 14,
-    fontWeight: 'bold',
+    marginBottom: 10,
+    marginTop: 10,
   },
 });

package/src/components/voice.js

@@ -19,7 +19,7 @@ import { AppContext } from '../contexts/AppContext';
 
 const PERMISSION_STORAGE_KEY = '@voice_permission_status';
 
-export const VoiceButton = () => {
+export const VoiceButton = ({ setInput }) => {
   const { handleVoiceSend } = useContext(AppContext);
   const [isListening, setIsListening] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -48,23 +48,42 @@ export const VoiceButton = () => {
         setHasPermission(permissionResult);
         
         if (permissionResult) {
-          const initialized = await initVoice((result, error) => {
-            if (error) {
-              // Don't show alert for permission errors since we handle that elsewhere
-              if (!error.includes('permission')) {
-                Alert.alert('Error', error);
+          const initialized = await initVoice(
+            // Final result callback - just update input, don't send
+            (result, error) => {
+              console.log('Voice final result:', result, 'Error:', error);
+              if (error) {
+                // Don't show alert for permission errors since we handle that elsewhere
+                if (!error.includes('permission')) {
+                  Alert.alert('Error', error);
+                }
+                setIsListening(false);
+                setLoading(false);
+                return;
+              }
+              if (result) {
+                if (setInput) {
+                  // Just update the input field, don't send
+                  setInput(result);
+                } else {
+                  console.warn('VoiceButton: setInput prop is not provided');
+                }
               }
+              // Always reset states when the recognition ends
               setIsListening(false);
               setLoading(false);
-              return;
-            }
-            if (result) {
-              handleVoiceSend(null, result);
+            },
+            // Partial result callback for live transcription
+            (partialResult) => {
+              if (partialResult) {
+                if (setInput) {
+                  setInput(partialResult);
+                } else {
+                  console.warn('VoiceButton: setInput prop is not provided for partial results');
+                }
+              }
             }
-            // Always reset states when the recognition ends
-            setIsListening(false);
-            setLoading(false);
-          });
+          );
 
           if (!initialized) {
             // Only show this alert once per session

package/src/components/welcomeInput.js

@@ -17,6 +17,7 @@ import { VoiceButton } from './voice';
 export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
 
   const { data, handleSend, input, setInput, showModal, theme } = useContext(AppContext);
+  const inputRef = useRef(null);
 
   const handleKeyPress = ({ nativeEvent }) => {
     if (nativeEvent.key === 'return' && !nativeEvent.shiftKey) {
@@ -35,6 +36,7 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
   return (
         <View style={styles.inputContainer}>
         <TextInput
+            ref={inputRef}
             style={styles.input}
             value={input}
             onChangeText={setInput}
@@ -45,9 +47,32 @@ export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
             enablesReturnKeyAutomatically={true}
             onKeyPress={handleKeyPress}
             onSubmitEditing={onSubmitEditing}
+            selection={undefined}
             // blurOnSubmit={false}
         />
-        <VoiceButton/>
+        <VoiceButton setInput={(text) => {
+          setInput(text);
+          // Auto-scroll to end
+          if (inputRef.current) {
+            // For iOS and Android, blur and refocus to ensure scroll
+            inputRef.current.blur();
+            setTimeout(() => {
+              if (inputRef.current) {
+                inputRef.current.focus();
+                // Set selection to end - Android sometimes needs a slight delay
+                if (Platform.OS === 'android') {
+                  setTimeout(() => {
+                    if (inputRef.current) {
+                      inputRef.current.setSelection(text.length, text.length);
+                    }
+                  }, 10);
+                } else {
+                  inputRef.current.setSelection(text.length, text.length);
+                }
+              }
+            }, 50);
+          }
+        }}/>
         <TouchableOpacity
             style={styles.sendButton}
             onPress={() => handleSend(input)}

package/src/layout/window.js

@@ -104,11 +104,13 @@ export const ChatWindow = ({ panHandlers }) => {
       >
         {messages.map((msg, i) => (
           
-          <View key={i} style={styles.messageWrapper}>
+          <View key={msg.id || msg.message_id || i} style={styles.messageWrapper}>
             {msg.type !== "middle" && (
                 <View style={[ styles.messageBubble, msg.type === "user" ? styles.userMessage : styles.aiMessage,]}>
-                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
-                    {msg.text && typeof msg.text === 'string' ? msg.text : (msg.text?.toString() || '')}
+
+                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22, includeFontPadding: false, textAlignVertical: 'center' }}}> 
+                    {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
+
                   </Markdown>
                   {(msg.type == 'ai' && i != 0 && msg.message_id ) && 
                     <Feedback message={msg} messageId={msg.message_id}/>
@@ -118,10 +120,14 @@ export const ChatWindow = ({ panHandlers }) => {
 
             {msg.type == "middle" && (
               <View style={[styles.middleMessageBubble, styles.middleMessage]}>
-                <Ionicons name="sparkles-outline" size={16} style={{marginRight: 10, marginTop: 10}}/>
+                <Text style={{marginRight: 10, marginTop: 10}} allowFontScaling={false}>
+                  <Ionicons name="sparkles-outline" size={16} color="#161616"/>
+                </Text>
                 <View style={styles.middleMessageText}>
-                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22 }}}> 
-                  {msg.text && typeof msg.text === 'string' ? msg.text : (msg.text?.toString() || '')}
+
+                  <Markdown style={{ body: { color: msg.type === "user" ? "#ffffff" : "#161616",fontSize: 16, lineHeight: 22, includeFontPadding: false, textAlignVertical: 'center' }}}> 
+                  {typeof msg.text === 'string' ? msg.text : String(msg.text || '')}
+
                   </Markdown>
                 </View>
               </View>
@@ -238,6 +244,8 @@ const styles = StyleSheet.create({
     color: "#004687",
     fontSize: 13,
     textAlign: "left",
+    includeFontPadding: false,
+    textAlignVertical: "center",
   },
   ghostMessageContainer: {
     alignSelf: 'flex-start',
@@ -297,6 +305,8 @@ const styles = StyleSheet.create({
       color: 'white', 
       fontSize: 16,
       marginRight: 8, 
+      includeFontPadding: false,
+      textAlignVertical: "center",
   },
   middleMessageBubble:{
     padding: 6,