srs-heritage-chatbot 1.0.0

package/src/components/progressCircle.js

@@ -0,0 +1,88 @@
+import React, { useEffect, useRef, useContext } from "react";
+import { View, Animated, StyleSheet, Pressable, Text } from "react-native";
+import { AppContext } from "../contexts/AppContext";
+import { LoadingTips } from "./LoadingTips";
+
+export const ProgressCircle = () => {
+    const { stopGenerating } = useContext(AppContext);
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        const spinAnimation = Animated.loop(
+            Animated.timing(spinValue, {
+                toValue: 1,
+                duration: 1400, 
+                useNativeDriver: true,
+            })
+        );
+        spinAnimation.start();
+
+        return () => spinAnimation.stop(); // Cleanup on unmount
+    }, [spinValue]);
+
+    const spin = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ["0deg", "360deg"],
+    });
+
+    return (
+        <>
+        <Text style={styles.textBeta}>Beta version. AI Assistant is still learning!</Text>
+        <View style={styles.container}>
+            <LoadingTips />
+            <Pressable style={styles.circleContainer} onPress={stopGenerating}>
+                <Animated.View style={[styles.circle, { transform: [{ rotate: spin }] }]} />
+                <View style={styles.stopSquare} />
+            </Pressable>
+        </View>
+        </>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingHorizontal: 6,
+        paddingVertical: 6,
+        backgroundColor: "#f6f6f6",
+        borderTopWidth: 1,
+        borderTopColor: "rgba(0, 0, 0, 0.1)",
+        paddingBottom: 35,
+        paddingTop: 15
+    },
+    circleContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        width: 50,
+        height: 50,
+        marginRight: 20,
+        position: "relative",
+    },
+    circle: {
+        borderWidth: 4,
+        borderColor: "#dddbd9",
+        borderTopColor: "#666666",
+        borderRadius: 50,
+        width: 40,
+        height: 40,
+    },
+    stopSquare: {
+        width: 13,
+        height: 13,
+        backgroundColor: "#666666",
+        position: "absolute",
+        top: "50%",
+        left: "50%",
+        transform: [{ translateX: -6.5 }, { translateY: -6.5 }],
+    },
+    textBeta: {
+        textAlign: 'center', 
+        fontSize: 11,
+        color: '#808080',
+        fontWeight: '400',
+        marginTop: 5,
+        marginBottom: 2
+      },
+});

package/src/components/testing.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { View, Button, StyleSheet, TouchableOpacity, Text } from 'react-native';
+
+export const Testing = ({ onProductCardClick, onAddToCartClick }) => {
+
+  const product = {
+    "part_number": "AEQO177",
+    "inventory_info": {
+      "default_uom": "EA",
+      "is_valid": true,
+      "info_by_uom": {
+        "EA": {
+          "gross_price": 7.83,
+          "net_price": 7.83,
+          "is_on_sale": false,
+          "quantity_available": 0,
+          "discounts": null
+        }
+      }
+    },
+    "product_details": {
+      "product_name": "Aladdin Hayward SPX1600S SuperPump Lid Gasket | O-177-2",
+      "part_number": "AEQO177",
+      "manufacturer_id": "O-177-2",
+      "heritage_link": "https://www.heritagepoolplus.com/aeqo177-aladdin-o-ring-o-177-o-177-2-o-177-2",
+      "image_url": "https://media.heritageplus.com/image/upload/v1668157956/image/AEQO177_0.jpg"
+    }
+  }
+
+  return (
+    <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: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+    paddingHorizontal: 16,
+    borderTopWidth: 1,
+    borderTopColor: '#DDD',
+  },
+  button: {
+    backgroundColor: "#d4d4d4",
+    paddingVertical: 12,
+    paddingHorizontal: 12,
+    borderRadius: 5,
+    alignItems: "center",
+    marginBottom: 10,
+    marginTop: 10,
+  },
+});

package/src/components/voice.js

@@ -0,0 +1,228 @@
+// VoiceButton.js
+
+import React, { useState, useContext, useEffect } from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  Alert,
+  Linking,
+  Platform,
+} from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import useAsyncStorage from '../hooks/useAsyncStorage';
+
+import {
+  startRecording,
+  stopRecording,
+  cancelRecording,
+  requestAudioPermission,
+  cleanup,
+  initVoice,
+  resetStoredPermission,
+  setPermissionStatusHandlers,
+} from '../utils/audioRecorder';
+import { AppContext } from '../contexts/AppContext';
+
+const PERMISSION_STORAGE_KEY = '@voice_permission_status';
+
+export const VoiceButton = ({ setInput }) => {
+  const { handleVoiceSend, isListening, setIsListening } =
+    useContext(AppContext);
+  const [loading, setLoading] = useState(false);
+  const [permissionChecked, setPermissionChecked] = useState(false);
+  const [hasPermission, setHasPermission] = useState(null);
+
+  // Use your custom AsyncStorage hook
+  const [permissionStatus, setPermissionStatus] = useAsyncStorage(
+    PERMISSION_STORAGE_KEY,
+    null,
+  );
+
+  useEffect(() => {
+    // Register our permission handlers
+    setPermissionStatusHandlers(() => permissionStatus, setPermissionStatus);
+
+    const setupVoice = async () => {
+      try {
+        // Check stored permission first
+        if (permissionStatus === 'denied') {
+          // We already know permission was denied, don't show alert again
+          setHasPermission(false);
+          setPermissionChecked(true);
+          return;
+        }
+
+        // Only request permission if not already denied
+        const permissionResult = await requestAudioPermission();
+        setHasPermission(permissionResult);
+
+        if (permissionResult) {
+          const initialized = await initVoice(
+            // Final result callback
+            (result, error) => {
+              console.log('Voice final result:', result, 'Error:', error);
+
+              // Always reset states when the recognition ends
+              setIsListening(false);
+              setLoading(false);
+
+              if (error) {
+                // Don't show alert for permission errors since we handle that elsewhere
+                if (!error.includes('permission')) {
+                  Alert.alert('Error', error);
+                }
+                return;
+              }
+
+              if (result) {
+                if (setInput) {
+                  // For live transcription mode: just update input, don't auto-send
+                  setInput(result);
+                } else {
+                  // For original mode: send the message automatically
+                  handleVoiceSend(null, result);
+                }
+              }
+            },
+            // Partial result callback for live transcription
+            setInput
+              ? partialResult => {
+                  if (partialResult) {
+                    setInput(partialResult);
+                  }
+                }
+              : null,
+          );
+
+          if (!initialized) {
+            // Only show this alert once per session
+            if (!permissionChecked) {
+              Alert.alert(
+                'Error',
+                'Speech recognition is not available on this device',
+              );
+            }
+          }
+        }
+      } catch (error) {
+        console.error('Error in setupVoice:', error);
+      } finally {
+        setPermissionChecked(true);
+      }
+    };
+
+    if (!permissionChecked) {
+      setupVoice();
+    }
+
+    return () => {
+      // Optional: only if the entire feature is being removed from the app
+      // cleanup();
+    };
+  }, [permissionStatus, permissionChecked]);
+
+  const toggleRecording = async () => {
+    try {
+      if (!isListening) {
+        // If we already know we don't have permission, show a better message
+        if (hasPermission === false) {
+          Alert.alert(
+            'Permission Required',
+            'Voice recognition requires microphone permission. Would you like to update your settings?',
+            [
+              {
+                text: 'Cancel',
+                style: 'cancel',
+              },
+              {
+                text: 'Settings',
+                onPress: () => {
+                  // Reset stored permission so we can check again
+                  setPermissionStatus(null);
+                  // Open device settings
+                  openAppSettings();
+                  // Reset our permission check
+                  setPermissionChecked(false);
+                },
+              },
+            ],
+          );
+          return;
+        }
+
+        setLoading(true);
+        const checkPermission = await requestAudioPermission();
+        if (!checkPermission) {
+          setHasPermission(false);
+          setLoading(false);
+          return;
+        }
+
+        const started = await startRecording();
+        if (started) {
+          setIsListening(true);
+        } else {
+          // Only show error if not permission related
+          Alert.alert('Error', 'Failed to start voice recognition');
+        }
+      } else {
+        setLoading(true);
+        setIsListening(false);
+        await stopRecording();
+      }
+    } catch (error) {
+      console.error('Error in toggleRecording:', error);
+      Alert.alert(
+        'Error',
+        'An error occurred while managing voice recognition',
+      );
+      setIsListening(false);
+      // Don't call cleanup here - let the natural session cleanup handle it
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const openAppSettings = async () => {
+    try {
+      if (Platform.OS === 'ios') {
+        // For iOS
+        await Linking.openURL('app-settings://');
+      } else {
+        // For Android
+        await Linking.openSettings();
+      }
+    } catch (error) {
+      console.error('Cannot open settings', error);
+      Alert.alert(
+        'Error',
+        'Unable to open settings. Please open settings manually.',
+      );
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={styles.button}
+      onPress={toggleRecording}
+      disabled={loading}>
+      {loading ? (
+        <ActivityIndicator size="small" color="#8E8E93" />
+      ) : (
+        <Ionicons
+          name={isListening ? 'stop-circle' : 'mic-outline'}
+          size={24}
+          color="#161616"
+        />
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/components/welcomeButton.js

@@ -0,0 +1,161 @@
+// WelcomeButton.js
+import React, { useState, useContext } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+const landscapeQuestions = [
+  { text: 'What are the hours of my current branch?' },
+  { text: 'Do you have part # RBLESPLXME2 in stock?' },
+  { text: 'How do I install the seal on B82456?' },
+  { text: 'Where can I find my POs?' },
+  { text: '¿Puedes ayudarme en español?' },
+];
+
+const poolQuestions = [
+  { text: 'What are the hours of my current branch?' },
+  { text: 'Do you have part # JNDDEV48 in stock?' },
+  { text: 'Do you carry Hayward super pumps?' },
+  { text: 'Which grid assembly goes with the Hayward DE4820 filter?' },
+  { text: '¿Puedes ayudarme en español?' },
+];
+
+const ButtonComponent = () => {
+  const {
+    toggleLanguage,
+    getCurrentTranslations,
+    handleButtonClick,
+    theme,
+    data,
+  } = useContext(AppContext);
+  const isPool = data?.brand_version === 'pool';
+  const suggestedQuestions = isPool ? poolQuestions : landscapeQuestions;
+
+  const [suggestedQuestionsFromCategory, setSuggestedQuestionsFromCategory] =
+    useState([]);
+
+  const translations = getCurrentTranslations();
+
+  const starterCategories = [
+    {
+      key: 'products',
+      text: 'Products',
+      relatedQuestions: translations.followUpQuestions.products,
+    },
+    {
+      key: 'orders',
+      text: 'Orders',
+      relatedQuestions: translations.followUpQuestions.orders,
+    },
+    {
+      key: 'invoices',
+      text: 'Invoices',
+      relatedQuestions: translations.followUpQuestions.invoices,
+    },
+    {
+      key: 'branchInfo',
+      text: 'Branch Information',
+      relatedQuestions: translations.followUpQuestions.branchInfo,
+    },
+    {
+      key: 'spanish',
+      text: 'Ayuda es Español',
+      relatedQuestions: [],
+    },
+    {
+      key: 'reset',
+      text: '',
+      relatedQuestions: [],
+    },
+  ];
+
+  const handleCategoryPick = item => {
+    console.log(item);
+
+    if (item.key === 'spanish') {
+      console.log('switching to spanish');
+      toggleLanguage();
+    } else if (item.key === 'reset') {
+      setSuggestedQuestionsFromCategory(item.relatedQuestions);
+    } else {
+      setSuggestedQuestionsFromCategory(item.relatedQuestions);
+    }
+  };
+
+  return (
+    <View style={styles.buttonContainer}>
+      {suggestedQuestionsFromCategory.length !== 0 ? (
+        <View>
+          <TouchableOpacity
+            onPress={() =>
+              setSuggestedQuestionsFromCategory(
+                starterCategories[starterCategories.length - 1]
+                  .relatedQuestions,
+              )
+            }>
+            <Ionicons
+              name="arrow-back-outline"
+              size={16}
+              color="#367CB6"
+              style={{ marginBottom: 10 }}
+            />
+          </TouchableOpacity>
+          {suggestedQuestionsFromCategory.map((item, index) => (
+            <TouchableOpacity
+              key={index}
+              style={[styles.button, { borderColor: '#004687' }]}
+              onPress={() => handleButtonClick(item)}>
+              <Text style={[styles.buttonTextQuestion, { color: '#004687' }]}>
+                {item}
+              </Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      ) : (
+        starterCategories.map((item, index) => {
+          if (item.key === 'reset') {
+            return null;
+          } else {
+            return (
+              <TouchableOpacity
+                key={index}
+                style={[styles.button, { borderColor: '#004687' }]}
+                onPress={() => handleCategoryPick(item)}>
+                <Text style={[styles.buttonText, { color: '#004687' }]}>
+                  {item.text}
+                </Text>
+              </TouchableOpacity>
+            );
+          }
+        })
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  buttonContainer: {},
+  button: {
+    backgroundColor: 'white',
+    borderColor: '#004687',
+    borderWidth: 1,
+    borderRadius: 18,
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    marginBottom: 10,
+  },
+  buttonText: {
+    color: '#004687',
+    fontSize: 13,
+    fontWeight: '400',
+    textAlign: 'center',
+  },
+  buttonTextQuestion: {
+    color: '#004687',
+    fontSize: 13,
+    fontWeight: '400',
+    textAlign: 'left',
+  },
+});
+
+export default ButtonComponent;

package/src/components/welcomeInput.js

@@ -0,0 +1,133 @@
+import React, { useState, useEffect, useContext, useRef } from 'react';
+import {
+  Text,
+  StyleSheet,
+  View,
+  TextInput,
+  TouchableOpacity,
+  Platform,
+  KeyboardAvoidingView,
+  Keyboard,
+} from 'react-native';
+import { Header } from '../components/header';
+import { AppContext } from '../contexts/AppContext';
+import Ionicons from 'react-native-vector-icons/Ionicons';
+import { VoiceButton } from './voice';
+
+export const WelcomeInput = ({ onProductCardClick, onAddToCartClick }) => {
+  const { data, handleSend, input, setInput, showModal, theme, isListening } =
+    useContext(AppContext);
+  const inputRef = useRef(null);
+
+  const handleKeyPress = ({ nativeEvent }) => {
+    if (nativeEvent.key === 'return' && !nativeEvent.shiftKey) {
+      nativeEvent.preventDefault && nativeEvent.preventDefault();
+      handleSend(input);
+      return;
+    }
+  };
+
+  const onSubmitEditing = () => {
+    if (input.trim()) {
+      handleSend(input);
+    }
+  };
+
+  return (
+    <View style={styles.ringContainer}>
+      <View style={styles.inputContainer}>
+        <TextInput
+          ref={inputRef}
+          style={styles.input}
+          value={input}
+          onChangeText={setInput}
+          placeholder={isListening && !input ? 'Listening...' : 'Ask away...'}
+          placeholderTextColor="#999"
+          editable={!isListening}
+          caretHidden={isListening}
+          showSoftInputOnFocus={!isListening}
+          multiline={false}
+          returnKeyType="send"
+          enablesReturnKeyAutomatically={true}
+          onKeyPress={handleKeyPress}
+          onSubmitEditing={onSubmitEditing}
+          selection={undefined}
+          // blurOnSubmit={false}
+        />
+        <VoiceButton
+          setInput={text => {
+            setInput(text);
+            if (!isListening && inputRef.current) {
+              if (Platform.OS === 'android') {
+                setTimeout(() => {
+                  if (inputRef.current) {
+                    inputRef.current.setSelection(text.length, text.length);
+                  }
+                }, 10);
+              } else {
+                inputRef.current.setSelection(text.length, text.length);
+              }
+            }
+          }}
+        />
+        <TouchableOpacity
+          style={styles.sendButton}
+          onPress={() => handleSend(input)}
+          disabled={!input.trim()}>
+          <Ionicons
+            name="paper-plane-outline"
+            size={24}
+            color={input.trim() ? theme.primaryColor : '#161616'}
+          />
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  ringContainer: {
+    paddingHorizontal: 0.5,
+    paddingVertical: 0.5,
+    borderRadius: 18,
+    borderWidth: 3,
+    borderColor: '#FFFFFF', // Or your theme color
+    backgroundColor: '#FFFFFF',
+  },
+  inputContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 3,
+    borderColor: '#dadada',
+    borderWidth: 1,
+    borderRadius: 14,
+  },
+  input: {
+    flex: 1,
+    fontSize: 16,
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    color: '#000000',
+  },
+  inputButton: {
+    padding: 6,
+  },
+  sendButton: {
+    padding: 6,
+    marginLeft: 'auto',
+  },
+  disabledButton: {
+    opacity: 0.7,
+  },
+});