@smarter.sh/ui-chat 0.2.7 → 0.2.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smarter.sh/ui-chat",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "chatbot React.js component for the https://smarter.sh no-code, plugin based AI platform",
   "homepage": "https://smarter.sh",
   "main": "dist/smarter-chat-library.umd.js",

package/src/components/Console/Component.jsx

@@ -36,7 +36,7 @@ function Console({ config }) {
   // Lifecycle hooks
   useEffect(() => {
     if (config) {
-      if (config.debug_mode) {
+      if (config?.debug_mode) {
         console.log('Console() component mounted');
       }
 

package/src/components/SmarterChat/Component.jsx

@@ -35,12 +35,11 @@ import { Console } from "../Console/index.js";
 import "./styles.css";
 import { ContainerLayout, ContentLayout, WorkbenchLayout, ChatAppLayout, ConsoleLayout } from "./Layout.js";
 import { MessageDirectionEnum, SenderRoleEnum } from "./enums.js";
-import { setCookie, fetchConfig, fetchPrompt } from "./api.js";
+import { fetchConfig, fetchPrompt } from "./api.js";
+import { setCookie } from "../shared/cookie.js"
 import { cookieMetaFactory, messageFactory, chatMessages2RequestMessages, chatInit } from "./utils.jsx";
 import { ErrorBoundary } from "./ErrorBoundary.jsx";
 
-const DEBUG_MODE = false;
-
 // The main chat component. This is the top-level component that
 // is exported and used in the index.js file. It is responsible for
 // managing the chat message thread, sending messages to the backend
@@ -50,6 +49,7 @@ function SmarterChat({
   apiKey, // NOT USED. TO DELETE.
   toggleMetadata, // show/hide toggle button to show/hide the chat thread metadata
   csrfCookieName = "csrftoken", // the Django CSRF cookie.
+  csrftoken, // the Django CSRF token. Passed from the Django template in the Smarter web console workbench.
   debugCookieName, // the Smarter chat debug cookie. Set here.
   debugCookieExpiration, // the Smarter chat debug cookie. Set here.
   sessionCookieName = "session_key", // the Smarter chat session cookie. Set here, where the user creates a new chat session.
@@ -74,7 +74,7 @@ function SmarterChat({
   const [isValid, setIsValid] = useState(false);
   const [isDeployed, setIsDeployed] = useState(false);
 
-  const [debugMode, setDebugMode] = useState(DEBUG_MODE);
+  const [debugMode, setDebugMode] = useState(false);
   const [messages, setMessages] = useState([]);
 
   // future use
@@ -89,10 +89,10 @@ function SmarterChat({
   const fileInputRef = useRef(null);
 
   // cookie management
-  const csrfCookie = cookieMetaFactory(csrfCookieName, null, cookieDomain); // we read this but never set it.
-  const authTokenCookie = cookieMetaFactory(authSessionCookieName, null, cookieDomain); // we read this but never set it.
-  const sessionCookie = cookieMetaFactory(sessionCookieName, sessionCookieExpiration, cookieDomain);
-  const debugCookie = cookieMetaFactory(debugCookieName, debugCookieExpiration, cookieDomain);
+  const csrfCookie = cookieMetaFactory(csrfCookieName, null, cookieDomain, csrftoken); // we read this but never set it.
+  const authTokenCookie = cookieMetaFactory(authSessionCookieName, null, cookieDomain, null); // we read this but never set it.
+  const sessionCookie = cookieMetaFactory(sessionCookieName, sessionCookieExpiration, cookieDomain, null);
+  const debugCookie = cookieMetaFactory(debugCookieName, debugCookieExpiration, cookieDomain, null);
   const cookies = {
     authTokenCookie: authTokenCookie, // the Django session cookie. Set when the user logs in to the Smarter web console app.
     // typically this is not required for the chat app when running inside the
@@ -105,10 +105,11 @@ function SmarterChat({
 
   const refetchConfig = async () => {
     const newConfig = await fetchConfig(configApiUrl, cookies);
+    setDebugMode(newConfig?.debug_mode);
+    setCookie(cookies.debugCookie, debugMode);
 
-    if (newConfig?.debug_mode) {
-      console.log("fetchAndSetConfig()...");
-      console.log("fetchAndSetConfig() config:", newConfig);
+    if (debugMode) {
+      console.log("refetchConfig() config:", newConfig);
     }
 
     PropTypes.checkPropTypes(ConfigPropTypes, newConfig, "prop", "SmarterChat");
@@ -120,7 +121,9 @@ function SmarterChat({
     try {
       const newConfig = await refetchConfig();
 
-      console.log("fetchAndSetConfig() config:", newConfig);
+      if (debugMode) {
+        console.log("fetchAndSetConfig() config:", newConfig);
+      }
 
       setPlaceholderText(newConfig.chatbot.app_placeholder);
       setConfigApiUrl(newConfig.chatbot.url_chatbot);
@@ -153,7 +156,7 @@ function SmarterChat({
       setIsReady(true);
       setIsTyping(false);
 
-      if (newConfig?.debug_mode) {
+      if (debugMode) {
         console.log("fetchAndSetConfig() done!");
       }
     } catch (error) {
@@ -199,9 +202,6 @@ function SmarterChat({
       }
       if (["smarter", "system", "tool"].includes(message.sender)) {
         // toggle backend messages
-        if (debugMode) {
-          //console.log("toggle message:", message);
-        }
         return { ...message, display: newValue };
       } else {
         // always show user and assistant messages

package/src/components/SmarterChat/api.js

@@ -22,62 +22,15 @@
     v0.5.0:       ./test/events/langchain.response.v0.5.0.json
 -----------------------------------------------------------------------------*/
 
+import { getCookie, setCookie } from "../shared/cookie";
+
 // Set to true to enable local development mode,
 // which will simulate the server-side API calls.
 const developerMode = false;
+const debugMode = getCookie(cookies.debugCookie) === "true" || developerMode;
 const userAgent = "SmarterChat/1.0";
 const applicationJson = "application/json";
 
-function getCookie(cookie, defaultValue = null) {
-  console.log("getCookie(): cookie", cookie);
-  let cookieValue = null;
-  const expectedDomain = cookie.domain;
-
-  // Check if the cookie is set for the expected domain. example: alpha.platform.smarter.sh
-  if (window.location.hostname === expectedDomain && document.cookie && document.cookie !== "") {
-    const cookies = document.cookie.split(";");
-    for (let i = 0; i < cookies.length; i++) {
-      const thisCookie = cookies[i].trim();
-      if (thisCookie.substring(0, cookie.name.length + 1) === cookie.name + "=") {
-        cookieValue = decodeURIComponent(thisCookie.substring(cookie.name.length + 1));
-        console.log("getCookie(): ", cookie.domain, cookie.name, cookieValue);
-        break;
-      }
-    }
-  }
-
-  return cookieValue || defaultValue;
-}
-
-export function setCookie(cookie, value) {
-  const currentPath = window.location.pathname;
-  if (value) {
-    const expirationDate = new Date();
-    expirationDate.setTime(expirationDate.getTime() + cookie.expiration);
-    const expires = expirationDate.toUTCString();
-    const cookieData = `${cookie.name}=${value}; path=${currentPath}; SameSite=Lax; expires=${expires}`;
-    document.cookie = cookieData;
-    if (developerMode) {
-      console.log(
-        "setCookie(): ",
-        cookieData,
-        "now: ",
-        new Date().toUTCString(),
-        "expiration: ",
-        expirationDate.toUTCString(),
-      );
-    }
-  } else {
-    // Unset the cookie by setting its expiration date to the past
-    const expirationDate = new Date(0);
-    const expires = expirationDate.toUTCString();
-    const cookieData = `${cookie.name}=; path=${currentPath}; SameSite=Lax; expires=${expires}`;
-    document.cookie = cookieData;
-    if (developerMode) {
-      console.log("setCookie(): Unsetting cookie", cookieData);
-    }
-  }
-}
 
 function promptRequestBodyFactory(messages, config) {
   const body = {
@@ -88,7 +41,9 @@ function promptRequestBodyFactory(messages, config) {
 }
 
 function requestHeadersFactory(cookies) {
-  console.log("requestHeadersFactory(): cookies", cookies);
+  if (debugMode) {
+    console.log("requestHeadersFactory(): cookies", cookies);
+  }
   function getRequestCookies(cookies) {
     // Ensure that csrftoken is not included in the Cookie header.
     const cookiesArray = document.cookie.split(";").filter((cookie) => {
@@ -96,6 +51,8 @@ function requestHeadersFactory(cookies) {
       return !trimmedCookie.startsWith(`${cookies.csrfCookie.name}=`);
     });
     const selectedCookies = cookiesArray.join("; ");
+
+    // example return value: "_ga=GA1.1.1244182935.1742308279;  _ga_SK81M5HQYS=GS1.1.1742316653.3.1.1742320251.0.0.0"
     return selectedCookies;
   }
 
@@ -112,7 +69,9 @@ function requestHeadersFactory(cookies) {
     Authorization: `Bearer ${authToken}`,
     "User-Agent": userAgent,
   };
-  console.log("requestHeadersFactory(): requestHeaders", requestHeaders);
+  if (debugMode) {
+    console.log("requestHeadersFactory(): requestHeaders", requestHeaders);
+  }
   return requestHeaders;
 }
 
@@ -140,9 +99,9 @@ function urlFactory(apiUrl, endpoint, sessionKey) {
 }
 
 async function getJsonResponse(url, init, cookies) {
-  const debugMode = getCookie(cookies.debugCookie) === "true";
+
   try {
-    if (debugMode || developerMode) {
+    if (debugMode) {
       console.log("getJsonResponse(): url: ", url, ", init: ", init, ", cookies: ", cookies);
     }
     const response = await fetch(url, init);
@@ -152,7 +111,7 @@ async function getJsonResponse(url, init, cookies) {
       if (response.ok) {
         const responseJson = await response.json(); // Convert the ReadableStream to a JSON object
         const responseJsonData = await responseJson.data; // ditto
-        if (debugMode || developerMode) {
+        if (debugMode) {
           console.log("getJsonResponse(): response: ", responseJson);
         }
         return responseJsonData;
@@ -179,7 +138,9 @@ async function getJsonResponse(url, init, cookies) {
 }
 
 export async function fetchPrompt(config, messages, cookies) {
-  console.log("fetchPrompt(): config", config);
+  if (debugMode) {
+    console.log("fetchPrompt(): config", config);
+  }
   const apiUrl = config.chatbot.url_chatbot;
   const sessionKey = getCookie(cookies.sessionCookie, "");
   const url = urlFactory(apiUrl, null, sessionKey);
@@ -188,7 +149,9 @@ export async function fetchPrompt(config, messages, cookies) {
   const init = requestInitFactory(headers, body);
   const responseJson = await getJsonResponse(url, init, cookies);
   if (responseJson && responseJson.body) {
-    console.log("fetchPrompt(): parsing responseJson.body ");
+    if (debugMode) {
+      console.log("fetchPrompt(): parsing responseJson.body ");
+    }
     const responseBody = await JSON.parse(responseJson.body);
     return responseBody;
   }

package/src/components/SmarterChat/utils.jsx

@@ -1,6 +1,6 @@
 import { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./enums.js";
 
-export function cookieMetaFactory(cookieName, cookieExpiration, cookieDomain) {
+export function cookieMetaFactory(cookieName, cookieExpiration, cookieDomain, cookieValue = null) {
   /*
   Create a cookie object.
    */
@@ -8,6 +8,7 @@ export function cookieMetaFactory(cookieName, cookieExpiration, cookieDomain) {
     name: cookieName,
     expiration: cookieExpiration,
     domain: cookieDomain,
+    value: cookieValue,
   };
 }
 

package/src/components/shared/cookie.js

@@ -0,0 +1,39 @@
+/*-----------------------------------------------------------------------------
+ Description: cookie management functions for the SmarterChat application.
+-----------------------------------------------------------------------------*/
+export function getCookie(cookie, defaultValue = null) {
+  if (cookie.value !== null) {
+    return cookie.value;
+  }
+  let cookieValue = null;
+
+  if (window.location.hostname.endsWith(cookie.domain) && document.cookie && document.cookie !== "") {
+    const cookies = document.cookie.split(";").map((cookie) => cookie.trim());
+    for (let i = 0; i < cookies.length; i++) {
+      const thisCookie = cookies[i];
+      if (thisCookie.startsWith(`${cookie.name}=`)) {
+        cookieValue = decodeURIComponent(thisCookie.substring(cookie.name.length + 1));
+        break;
+      }
+    }
+  }
+
+  return cookieValue || defaultValue;
+}
+
+export function setCookie(cookie, value) {
+  const currentPath = window.location.pathname;
+  if (value) {
+    const expirationDate = new Date();
+    expirationDate.setTime(expirationDate.getTime() + cookie.expiration);
+    const expires = expirationDate.toUTCString();
+    const cookieData = `${cookie.name}=${value}; path=${currentPath}; SameSite=Lax; expires=${expires}`;
+    document.cookie = cookieData;
+  } else {
+    // Unset the cookie by setting its expiration date to the past
+    const expirationDate = new Date(0);
+    const expires = expirationDate.toUTCString();
+    const cookieData = `${cookie.name}=; path=${currentPath}; SameSite=Lax; expires=${expires}`;
+    document.cookie = cookieData;
+  }
+}