@smarter.sh/ui-chat 0.3.0 → 0.7.0

package/src/components/SmarterChat/api.js

@@ -1,200 +0,0 @@
-/*-----------------------------------------------------------------------------
- Description: This file contains the function that makes the API request to
- the backend. It is called exclusively from chatApp/Component.jsx
-
- Notes:
-  - The backend API is an AWS API Gateway endpoint that is configured to
-    call an AWS Lambda function. The Lambda function is written in Python
-    and calls the OpenAI API.
-
-  - The backend API is configured to require an API key. The API key is
-    passed in the header of the request. In real terms, the api key is
-    pointless because it is exposed in the client code. However, it is
-    required by the API Gateway configuration.
-
-  - The backend API is configured to allow CORS requests from the client.
-    This is necessary because the client and backend are served from
-    different domains.
-
- Returns: the backend API is configured to return a JSON object that substantially
-    conforms to the following structure for all 200 responses:
-    v0.1.0 - v0.4.0:  ./test/events/openai.response.v0.4.0.json
-    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;
-let debugMode = developerMode;
-const userAgent = "SmarterChat/1.0";
-const applicationJson = "application/json";
-
-function promptRequestBodyFactory(messages, config) {
-  const body = {
-    session_key: config.session_key,
-    messages: messages,
-  };
-  return JSON.stringify(body);
-}
-
-function requestHeadersFactory(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) => {
-      const trimmedCookie = cookie.trim();
-      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;
-  }
-
-  const requestCookies = getRequestCookies(cookies);
-  const csrftoken = getCookie(cookies.csrfCookie, "");
-  const authToken = getCookie(cookies.authTokenCookie, "");
-
-  const requestHeaders = {
-    Accept: applicationJson,
-    "Content-Type": applicationJson,
-    "X-CSRFToken": csrftoken,
-    Origin: window.location.origin,
-    Cookie: requestCookies,
-    Authorization: `Bearer ${authToken}`,
-    "User-Agent": userAgent,
-  };
-  if (debugMode) {
-    console.log("requestHeadersFactory(): requestHeaders", requestHeaders);
-  }
-  return requestHeaders;
-}
-
-function requestInitFactory(headers, body) {
-  return {
-    method: "POST",
-    credentials: "include",
-    mode: "cors",
-    headers: headers,
-    body: body,
-  };
-}
-
-function urlFactory(apiUrl, endpoint, sessionKey) {
-  if (!apiUrl.endsWith("/")) {
-    apiUrl += "/";
-  }
-  endpoint = endpoint || "";
-  let apiConfigUrl = new URL(endpoint, apiUrl);
-  if (sessionKey) {
-    apiConfigUrl.searchParams.append("session_key", sessionKey);
-  }
-  const url = apiConfigUrl.toString();
-  return url;
-}
-
-async function getJsonResponse(url, init, cookies) {
-  try {
-    if (debugMode) {
-      console.log("getJsonResponse(): url: ", url, ", init: ", init, ", cookies: ", cookies);
-    }
-    const response = await fetch(url, init);
-    const contentType = response.headers.get("content-type");
-    if (contentType && contentType.includes(applicationJson)) {
-      const status = await response.status;
-      if (response.ok) {
-        const responseJson = await response.json(); // Convert the ReadableStream to a JSON object
-        const responseJsonData = await responseJson.data; // ditto
-        if (debugMode) {
-          console.log("getJsonResponse(): response: ", responseJson);
-        }
-        return responseJsonData;
-      } else {
-        /*
-          note:
-          - the responseBody object is not available when the status is 504, because
-            these responses are generated exclusively by API Gateway.
-          - the responseBody object is potentially not available when the status is 500
-            depending on whether the 500 response was generated by the Lambda or the API Gateway
-          - the responseBody object is intended to always be available when the status is 400.
-            However, there potentially COULD be a case where the response itself contains message text.
-        */
-        console.error("getJsonResponse(): error: ", status, response.statusText);
-        return response;
-      }
-    } else {
-      const errorText = await response.text();
-      throw new Error(`getJsonResponse() Unexpected response format: ${errorText}`);
-    }
-  } catch (error) {
-    return error;
-  }
-}
-
-export async function fetchPrompt(config, messages, cookies) {
-  debugMode = config.debug_mode || developerMode;
-
-  if (debugMode) {
-    console.log("fetchPrompt(): config", config);
-  }
-  const apiUrl = config.chatbot.url_chatbot;
-  const sessionKey = getCookie(cookies.sessionCookie, "");
-  const url = urlFactory(apiUrl, null, sessionKey);
-  const headers = requestHeadersFactory(cookies);
-  const body = promptRequestBodyFactory(messages, config);
-  const init = requestInitFactory(headers, body);
-  const responseJson = await getJsonResponse(url, init, cookies);
-  if (responseJson && responseJson.body) {
-    if (debugMode) {
-      console.log("fetchPrompt(): parsing responseJson.body ");
-    }
-    const responseBody = await JSON.parse(responseJson.body);
-    return responseBody;
-  }
-  return null;
-}
-
-async function fetchLocalConfig(configFile) {
-  const response = await fetch("../data/" + configFile);
-  const sampleConfig = await response.json();
-  return sampleConfig.data;
-}
-
-export async function fetchConfig(apiUrl, cookies) {
-  /*
-  Fetch the chat configuration from the backend server. This is a POST request with the
-  session key as the payload. The server will return the configuration
-  as a JSON object.
-
-  See class ChatConfigView(View, AccountMixin) in
-  https://github.com/smarter-sh/smarter/blob/main/smarter/smarter/apps/chatapp/views.py
-  Things to note:
-  - The session key is used to identify the user, the chatbot,
-    and the chat history.
-  - The session key is stored in a cookie that is specific to the path. Thus,
-    each chatbot has its own session key.
-  - The CSRF token is stored in a cookie and is managed by Django.
-  - debugMode is a boolean that is also stored in a cookie, managed by Django
-    based on a Waffle switch 'reactapp_debug_mode'
-  */
-  if (developerMode) {
-    return fetchLocalConfig("sample-config.json");
-  }
-  const sessionKey = getCookie(cookies.sessionCookie, "");
-  const headers = requestHeadersFactory(cookies);
-  const body = JSON.stringify({ session_key: sessionKey });
-  const init = requestInitFactory(headers, body);
-  const url = urlFactory(apiUrl, "config/", sessionKey);
-  const newConfig = await getJsonResponse(url, init, cookies);
-  if (newConfig) {
-    setCookie(cookies.sessionCookie, newConfig.session_key);
-    setCookie(cookies.debugCookie, newConfig.debug_mode);
-    debugMode = newConfig.debug_mode || developerMode;
-    return newConfig;
-  }
-  return null;
-}

package/src/components/SmarterChat/enums.js

@@ -1,17 +0,0 @@
-export const MessageDirectionEnum = {
-  INCOMING: "incoming",
-  OUTGOING: "outgoing",
-};
-export const SenderRoleEnum = {
-  SYSTEM: "system",
-  ASSISTANT: "assistant",
-  USER: "user",
-  TOOL: "tool",
-  SMARTER: "smarter",
-};
-export const ValidMessageRolesEnum = [
-  SenderRoleEnum.SYSTEM,
-  SenderRoleEnum.ASSISTANT,
-  SenderRoleEnum.USER,
-  SenderRoleEnum.TOOL,
-];

package/src/components/SmarterChat/index.js

@@ -1,3 +0,0 @@
-import SmarterChat from "./Component";
-export * from "./Component";
-export default SmarterChat;

package/src/components/SmarterChat/styles.css

@@ -1,152 +0,0 @@
-.SmarterChat {
-  border: 1px solid rgba(255, 87, 51, 0.75);
-  height: 100%;
-  overflow-x: auto;
-}
-
-.SmarterChat a {
-  text-decoration: inherit;
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-.app-title {
-  text-align: center;
-  background-color: rgba(255, 87, 51, 0.75);
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  color: whitesmoke;
-}
-
-h5 {
-  color: whitesmoke;
-  margin-left: 10px;
-  margin-bottom: 0;
-}
-.app-logo {
-  width: 75px;
-  margin: 0 auto;
-  display: block;
-}
-
-.container {
-  display: flex;
-}
-
-.chat-app {
-  position: relative;
-  height: 100%;
-  width: 100%;
-}
-
-.cs-message-separator::before,
-.cs-message-separator::after {
-  background-color: lightgray !important;
-}
-
-.cs-conversation-header {
-  text-align: center;
-}
-
-div.cs-message__html-content a {
-  text-decoration: underline !important;
-  filter: invert(1) contrast(2);
-}
-div.cs-message__html-content a:hover {
-  text-decoration: underline;
-  color: orange;
-}
-
-section.smarter-message .cs-message__content {
-  color: brown !important;
-  background-color: blanchedalmond;
-  border: 1px solid brown;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-
-  font-family: "Courier New", Courier, monospace;
-  font-weight: bold;
-  text-align: left;
-}
-
-section.smarter-error-message .cs-message__content {
-  position: relative;
-  color: black !important;
-  background-color: #f5f5f5;
-  border: 3px solid crimson;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  font-family: "Courier New", Courier, monospace;
-  text-align: left;
-}
-
-section.system-message .cs-message__content {
-  color: beige !important;
-  background-color: rgb(39, 40, 34);
-  border: 1px solid brown;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  border-radius: 10px;
-  font-family: "Courier New", Courier, monospace;
-  font-weight: bold;
-}
-
-/*-------------- Responsive Styling -----------------------
-
-xs = Extra small <576px. Max container width None (auto)
-sm = Small ≥576px. Max container width 540px.
-md = Medium ≥768px. Max container width 720px.
-lg = Large ≥992px. Max container width 960px.
-xl = Extra large ≥1200px. Max container width 1140px.
-
-*/
-
-/********** Extra large devices only **********/
-@media (min-width: 1200px) {
-}
-
-/********** Large devices only **********/
-@media (min-width: 992px) and (max-width: 1199px) {
-}
-
-/********** Medium devices only **********/
-@media (min-width: 768px) and (max-width: 991px) {
-}
-
-/********** Small devices only **********/
-@media (min-width: 576) and (max-width: 767px) {
-}
-
-/********** Extra small devices only **********/
-@media (min-width: 480px) and (max-width: 575px) {
-}
-/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
-@media (max-width: 479px) {
-}
-
-/*  ------------ MCDANIEL ------------------ */
-@media (max-width: 991px) {
-  .hide-medium {
-    display: none;
-    width: 0 !important;
-    height: 0 !important;
-  }
-}
-
-@media (max-width: 767px) {
-  .hide-small {
-    display: none;
-    width: 0 !important;
-    height: 0 !important;
-  }
-}

package/src/components/SmarterChat/utils.jsx

@@ -1,148 +0,0 @@
-import { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./enums.js";
-
-export function chatRestoreFromBackend(chat_history, last_response) {
-  /*
-  Rebuild the message thread from the most recently persisted chat history.
-  */
-  try {
-    const messages = (chat_history ? chat_history : [])
-      .map((chat) => {
-        if (chat.role === SenderRoleEnum.USER) {
-          return messageFactory(chat, chat.content, MessageDirectionEnum.OUTGOING, chat.role);
-        } else if (chat.role === SenderRoleEnum.SYSTEM) {
-          return messageFactory(chat, chat.content, MessageDirectionEnum.INCOMING, chat.role);
-        } else if (chat.role === SenderRoleEnum.ASSISTANT) {
-          return messageFactory(chat, chat.content, MessageDirectionEnum.INCOMING, chat.role);
-        } else if (chat.role === SenderRoleEnum.SMARTER) {
-          return messageFactory(chat, chat.content, MessageDirectionEnum.INCOMING, chat.role);
-        } else if (chat.role === SenderRoleEnum.TOOL) {
-          return messageFactory(chat, chat.content, MessageDirectionEnum.INCOMING, chat.role);
-        }
-        console.error(`chatRestoreFromBackend() Invalid role received: ${chat.role}`);
-      })
-      .filter((message) => message && typeof message === "object" && !Array.isArray(message));
-
-    if (last_response?.choices?.[0]?.message?.content) {
-      const last_message = last_response.choices[0].message;
-      const last_message_content = last_message.content;
-      messages.push(
-        messageFactory(last_message, last_message_content, MessageDirectionEnum.INCOMING, SenderRoleEnum.ASSISTANT),
-      );
-    }
-
-    return messages;
-  } catch (error) {
-    console.error(`chatRestoreFromBackend() Error occurred while restoring chat from backend: ${error}`);
-    return []; // return an empty array in case of error
-  }
-}
-
-const examplePrompts = (prompts) => {
-  /*
-  If we have no chat history, and the Application configuration includes
-  example prompts, we can display them to the user to help them get started.
-  */
-  if (prompts.length == 0) {
-    return "";
-  } else
-    return (
-      "Some example prompts to get you started:\r\n\r\n" +
-      prompts
-        .map((prompt) => {
-          return prompt + "\r\n";
-        })
-        .join("")
-    );
-};
-
-export function chatIntro(welcome_message, system_role, example_prompts) {
-  /*
-  Generate the initial message thread for the chat window. This includes the
-  welcome message, and any example prompts that are configured in the
-  Application settings.
-   */
-  let messages = [messageFactory({}, system_role, MessageDirectionEnum.INCOMING, SenderRoleEnum.SYSTEM)];
-  messages.push(messageFactory({}, welcome_message, MessageDirectionEnum.INCOMING, SenderRoleEnum.ASSISTANT));
-
-  const examples = examplePrompts(example_prompts);
-  if (examples) {
-    messages.push(messageFactory({}, examples, MessageDirectionEnum.INCOMING, SenderRoleEnum.ASSISTANT));
-  }
-
-  return messages;
-}
-
-export function convertMarkdownLinksToHTML(message) {
-  /*
-  Convert markdown links to HTML links.
-   */
-  if (typeof message !== "string") {
-    console.error(`convertMarkdownLinksToHTML() Expected a string but received ${typeof message}`);
-    console.error("convertMarkdownLinksToHTML() broke here", message);
-    return message; // or return a default value
-  }
-
-  const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
-  return message.replace(markdownLinkRegex, '<a href="$2">$1</a>');
-}
-
-export function messageFactory(originalMessage, content, direction, sender) {
-  /*
-  Create a new message object.
-   */
-  const display = typeof content === "string" && content !== null;
-  const converted_content = display ? convertMarkdownLinksToHTML(content) : content;
-  const retVal = {
-    message: converted_content,
-    direction: direction,
-    sender: sender,
-    sentTime: new Date().toLocaleString(),
-    display: display,
-  };
-  if (originalMessage) {
-    retVal.originalMessage = originalMessage;
-  } else {
-    retVal.originalMessage = retVal;
-  }
-  return retVal;
-}
-
-function requestMessageFactory(message) {
-  let retVal = message.originalMessage || {};
-  retVal.role = message.originalMessage && message.originalMessage.role ? message.originalMessage.role : message.sender;
-  retVal.content =
-    message.originalMessage && message.originalMessage.message ? message.originalMessage.message : message.message;
-  return retVal;
-}
-
-export function chatMessages2RequestMessages(messages) {
-  /*
-  Transform the chat message thread into a list of request messages for the
-  backend API.
-  */
-  return (
-    messages
-      // filter out smarter messages
-      .filter((message) => ValidMessageRolesEnum.includes(message.sender))
-      .map((message, index) => {
-        return requestMessageFactory(message);
-      })
-  );
-}
-
-export function chatInit(welcome_message, system_role, example_prompts, chat_id, chat_history, last_response) {
-  /*
-  Initialize the chat message thread. This function is called when the chat
-  window is first opened, or when the chat window is restored from the
-  backend.
-   */
-
-  let messages = [];
-  messages = chatRestoreFromBackend(chat_history, last_response);
-
-  if (messages.length === 0) {
-    messages = chatIntro(welcome_message, system_role, example_prompts);
-  }
-
-  return messages;
-}

package/src/components/enums.js

@@ -1 +0,0 @@
-export { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./SmarterChat/enums";

package/src/components/index.js

@@ -1,3 +0,0 @@
-export { default as SmarterChat } from "./SmarterChat";
-export { Console, MenuItems } from "./Console";
-export { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./enums";

package/src/components/shared/cookie.js

@@ -1,51 +0,0 @@
-/*-----------------------------------------------------------------------------
- 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;
-  }
-}
-
-export function cookieMetaFactory(cookieName, cookieExpiration, cookieDomain, cookieValue = null) {
-  /*
-  Create a cookie object.
-   */
-  return {
-    name: cookieName,
-    expiration: cookieExpiration,
-    domain: cookieDomain,
-    value: cookieValue,
-  };
-}

package/src/constants.js

@@ -1,2 +0,0 @@
-
-export const REACT_LOCAL_DEV_MODE = false;

package/src/index.js

@@ -1,4 +0,0 @@
-
-export { SmarterChat, Console, MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum, MenuItems } from "./components";
-export { ConfigPropTypes } from "./types";
-export { default as version } from "./version";

package/src/types/index.js

@@ -1,2 +0,0 @@
-import ConfigPropTypes from "./propTypes";
-export { ConfigPropTypes };