Fix process.env browser compatibility issues

Author: a-pasquale

src/components/QABot.js

@@ -55,7 +55,7 @@ const QABotInternal = React.forwardRef((props, botRef) => {
     accessId
   } = props;
 
-  const finalApiKey = apiKey || process.env.REACT_APP_API_KEY;
+  const finalApiKey = apiKey || ((typeof process !== 'undefined' && process.env) ? process.env.REACT_APP_API_KEY : null);
 
   const [isBotLoggedIn, setIsBotLoggedIn] = useState(isLoggedIn !== undefined ? isLoggedIn : false);
   const sessionIdRef = useRef(getOrCreateSessionId());
@@ -128,12 +128,13 @@ const QABotInternal = React.forwardRef((props, botRef) => {
     feedbackForm,
     setFeedbackForm: updateFeedbackForm,
     formContext,
+    apiKey: finalApiKey,
     userInfo: {
       email: userEmail || null,
       name: userName || null,
       accessId: accessId || null
     }
-  }), [welcomeMessage, isBotLoggedIn, loginUrl, handleQuery, sessionId, currentQueryId, ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, formContext, userEmail, userName, accessId]);
+  }), [welcomeMessage, isBotLoggedIn, loginUrl, handleQuery, sessionId, currentQueryId, ticketForm, feedbackForm, updateTicketForm, updateFeedbackForm, formContext, finalApiKey, userEmail, userName, accessId]);
 
   useUpdateHeader(isBotLoggedIn, containerRef);
   useRingEffect(ringEffect, containerRef);

src/components/ThumbsUpThumbsDown.js

@@ -16,7 +16,7 @@ import { DEFAULT_CONFIG } from '../config/constants';
  * @param {Function} [props.onOpenTicket] - Callback for "Open a ticket for assistance"
  * @returns {JSX.Element} Rendered thumbs up/down component
  */
-const ThumbsUpThumbsDown = ({ sessionId, currentQueryId, className = '', style, onFeedbackChange }) => {
+const ThumbsUpThumbsDown = ({ sessionId, currentQueryId, apiKey, className = '', style, onFeedbackChange }) => {
   const [feedbackGiven, setFeedbackGiven] = React.useState(null); // null, 'positive', 'negative'
   const [hoveredButton, setHoveredButton] = React.useState(null); // 'up', 'down', or null
   const { injectMessage } = useMessages();
@@ -71,8 +71,6 @@ const ThumbsUpThumbsDown = ({ sessionId, currentQueryId, className = '', style,
    * @param {boolean} isPositive - true for thumbs up, false for thumbs down
    */
   const sendFeedback = async (isPositive) => {
-    const apiKey = process.env.REACT_APP_API_KEY;
-
     if (!apiKey || !sessionId) {
       console.warn('Missing apiKey or sessionId for feedback');
       return;

src/config/constants.js

@@ -8,7 +8,7 @@ export const DEFAULT_CONFIG = {
   //API_ENDPOINT: 'https://access-ai.ccs.uky.edu:543/api/query',
 
   // Netlify function URL
-  netlifyBaseUrl: process.env.REACT_APP_NETLIFY_BASE_URL,
+  netlifyBaseUrl: (typeof process !== 'undefined' && process.env) ? process.env.REACT_APP_NETLIFY_BASE_URL : 'https://access-ai.ccs.uky.edu/api/query',
 
   ERRORS: {
     API_UNAVAILABLE: 'Unable to contact the Q&A Bot. Please try again later.',
@@ -43,5 +43,5 @@ export const buildWelcomeMessage = (isLoggedIn, welcomeMessage) => {
 
 export const getApiKey = (providedApiKey) => {
   // Return provided API key if available, otherwise fall back to environment variable
-  return providedApiKey || process.env.REACT_APP_API_KEY;
+  return providedApiKey || ((typeof process !== 'undefined' && process.env) ? process.env.REACT_APP_API_KEY : null);
 };

src/index.js

@@ -109,7 +109,7 @@ function ExampleApp() {
         open={chatOpen}
         onOpenChange={setChatOpen}
         loginUrl="/login"
-        apiKey={process.env.REACT_APP_API_KEY}
+        apiKey={(typeof process !== 'undefined' && process.env) ? process.env.REACT_APP_API_KEY : null}
         welcome="What can I help you with?"
         userEmail={email || undefined}
         userName={name || undefined}

src/utils/create-bot-flow.js

@@ -21,6 +21,7 @@ function createBotFlow({
   // feedbackForm = {},
   // setFeedbackForm = () => {},
   formContext,
+  apiKey,
   userInfo = {}
 }) {
   // Set the current form context for use in flow functions
@@ -39,7 +40,8 @@ function createBotFlow({
     ? createQAFlow({
         fetchAndStreamResponse: handleQuery,
         sessionId,
-        currentQueryId
+        currentQueryId,
+        apiKey
       })
     : {
         go_ahead_and_ask: {

src/utils/flows/qa-flow.js

@@ -10,7 +10,7 @@ import { DEFAULT_CONFIG } from '../../config/constants';
  * @param {string} params.currentQueryId Current query ID
  * @returns {Object} Q&A flow configuration
  */
-export const createQAFlow = ({ fetchAndStreamResponse, sessionId, currentQueryId }) => {
+export const createQAFlow = ({ fetchAndStreamResponse, sessionId, currentQueryId, apiKey }) => {
   return {
     go_ahead_and_ask: {
       message: "Please type your question.",
@@ -31,7 +31,6 @@ export const createQAFlow = ({ fetchAndStreamResponse, sessionId, currentQueryId
       chatDisabled: false,
       function: async (chatState) => {
         if (chatState.userInput === "👍 Yes" || chatState.userInput === "👎 No") {
-          const apiKey = process.env.REACT_APP_API_KEY;
           if (apiKey && sessionId) {
             const isPositive = chatState.userInput === "👍 Yes";
             const headers = {