@smarter.sh/ui-chat 0.0.1

package/src/components/SmarterChat/SmarterChat.jsx

@@ -0,0 +1,419 @@
+//---------------------------------------------------------------------------------
+//  written by: Lawrence McDaniel
+//              https://lawrencemcdaniel.com
+//
+//  date:       Mar-2024
+//---------------------------------------------------------------------------------
+
+// React stuff
+import React, { useRef, useState, useEffect } from "react";
+
+// see: https://www.npmjs.com/package/styled-components
+import styled from "styled-components";
+
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle, faTimesCircle, faRocket } from "@fortawesome/free-solid-svg-icons";
+
+// Chat UI stuff
+import "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
+import {
+  MainContainer,
+  ChatContainer,
+  MessageList,
+  Message,
+  MessageInput,
+  TypingIndicator,
+  ConversationHeader,
+  InfoButton,
+  AddUserButton,
+} from "@chatscope/chat-ui-kit-react";
+
+// this repo
+import { ErrorModal } from "../ErrorModal/ErrorModal.jsx";
+
+// This component
+import "./styles.css";
+import { MessageDirectionEnum, SenderRoleEnum } from "./enums.js";
+import { setCookie, fetchConfig, fetchPrompt } from "./api.js";
+import { cookieMetaFactory, messageFactory, chatMessages2RequestMessages, chatInit } from "./utils.jsx";
+import { ErrorBoundary } from "./ErrorBoundary.jsx";
+
+export const ContainerLayout = styled.div`
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+`;
+
+export const ContentLayout = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+`;
+
+export const ComponentLayout = styled.div`
+  flex-basis: 100%;
+  margin: 0;
+  padding: 5px;
+  height: 100%;
+  @media (max-width: 992px) {
+    flex-basis: 100%;
+  }
+`;
+
+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
+// Api, and rendering the chat UI.
+function SmarterChat({
+  apiUrl,
+  apiKey,
+  toggleMetadata,
+  csrfCookieName,
+  debugCookieName,
+  debugCookieExpiration,
+  sessionCookieName,
+  sessionCookieExpiration,
+}) {
+  const csrfCookie = cookieMetaFactory(csrfCookieName, null); // we read this but never set it.
+  const sessionCookie = cookieMetaFactory(sessionCookieName, sessionCookieExpiration);
+  const debugCookie = cookieMetaFactory(debugCookieName, debugCookieExpiration);
+  const cookies = {
+    csrfCookie: csrfCookie,
+    sessionCookie: sessionCookie,
+    debugCookie: debugCookie,
+  };
+
+  const [configApiUrl, setConfigApiUrl] = useState(apiUrl);
+  const [showMetadata, setShowMetadata] = useState(toggleMetadata);
+
+  const [config, setConfig] = useState({});
+  const [placeholderText, setPlaceholderText] = useState("");
+  const [assistantName, setAssistantName] = useState("");
+  const [infoUrl, setInfoUrl] = useState("");
+  const [fileAttachButton, setFileAttachButton] = useState(false);
+  const [isValid, setIsValid] = useState(false);
+  const [isDeployed, setIsDeployed] = useState(false);
+  const [debugMode, setDebugMode] = useState(DEBUG_MODE);
+  const [messages, setMessages] = useState([]);
+  const [title, setTitle] = useState("");
+  const [info, setInfo] = useState("");
+
+  // future use
+  // const [backgroundImageUrl, setBackgroundImageUrl] = useState('');
+  // const [sandboxMode, setSandboxMode] = useState(false);
+
+  // component internal state
+  const [isTyping, setIsTyping] = useState(false);
+  const fileInputRef = useRef(null);
+
+  const refetchConfig = async () => {
+    const newConfig = await fetchConfig(configApiUrl, cookies);
+
+    if (newConfig?.debug_mode) {
+      console.log("fetchAndSetConfig()...");
+      console.log("fetchAndSetConfig() config:", newConfig);
+    }
+
+    setConfig(newConfig);
+    return newConfig;
+  };
+
+  const fetchAndSetConfig = async () => {
+    try {
+      const newConfig = await refetchConfig();
+
+      console.log("fetchAndSetConfig() config:", newConfig);
+
+      setPlaceholderText(newConfig.chatbot.app_placeholder);
+      setConfigApiUrl(newConfig.chatbot.url_chatbot);
+      setAssistantName(newConfig.chatbot.app_assistant);
+      setInfoUrl(newConfig.chatbot.app_info_url);
+      setFileAttachButton(newConfig.chatbot.app_file_attachment);
+      setIsValid(newConfig.meta_data.is_valid);
+      setIsDeployed(newConfig.meta_data.is_deployed);
+      setDebugMode(newConfig.debug_mode);
+
+      // wrap up the rest of the initialization
+      const newHistory = newConfig.history?.chat_history || [];
+      const newThread = chatInit(
+        newConfig.chatbot.app_welcome_message,
+        newConfig.chatbot.default_system_role,
+        newConfig.chatbot.app_example_prompts,
+        newConfig.session_key,
+        newHistory,
+        "BACKEND_CHAT_MOST_RECENT_RESPONSE",
+      );
+      setMessages(newThread);
+
+      const newTitle = `${newConfig.chatbot.app_name} v${newConfig.chatbot.version || "1.0.0"}`;
+      setTitle(newTitle);
+      let newInfo = `${newConfig.chatbot.provider} ${newConfig.chatbot.default_model}`;
+      if (newConfig.plugins.meta_data.total_plugins > 0) {
+        newInfo += ` with ${newConfig.plugins.meta_data.total_plugins} additional plugins`;
+      }
+      setInfo(newInfo);
+
+      if (newConfig?.debug_mode) {
+        console.log("fetchAndSetConfig() done!");
+      }
+    } catch (error) {
+      console.error("Failed to fetch config:", error);
+    }
+  };
+
+  // Lifecycle hooks
+  useEffect(() => {
+    if (debugMode) {
+      console.log("ChatApp() component mounted");
+    }
+
+    fetchAndSetConfig();
+
+    return () => {
+      if (debugMode) {
+        console.log("ChatApp() component unmounted");
+      }
+    };
+  }, []);
+
+  // Error modal state management
+  function openErrorModal(title, msg) {
+    setIsModalOpen(true);
+    setmodalTitle(title);
+    setmodalMessage(msg);
+  }
+
+  function closeChatModal() {
+    setIsModalOpen(false);
+  }
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [modalMessage, setmodalMessage] = useState("");
+  const [modalTitle, setmodalTitle] = useState("");
+
+  const handleInfoButtonClick = () => {
+    const newValue = !showMetadata;
+    setShowMetadata(newValue);
+    if (debugMode) {
+      console.log("showMetadata:", newValue);
+    }
+    const newMessages = messages.map((message) => {
+      if (message.message === null) {
+        return { ...message, display: false };
+      }
+      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
+        return { ...message, display: true };
+      }
+    });
+    setMessages(newMessages);
+  };
+
+  const handleAddUserButtonClick = () => {
+    setCookie(cookies.sessionCookie, "");
+    fetchAndSetConfig();
+  };
+
+  async function handleApiRequest(input_text, base64_encode = false) {
+    // Api request handler. This function is indirectly called by UI event handlers
+    // inside this module. It asynchronously sends the user's input to the
+    // backend Api using the fetch() function. The response from the Api is
+    // then used to update the chat message thread and the UI via React state.
+    const newMessage = messageFactory({}, input_text, MessageDirectionEnum.OUTGOING, SenderRoleEnum.USER);
+    if (base64_encode) {
+      console.error("base64 encoding not implemented yet.");
+    }
+
+    setMessages((prevMessages) => {
+      const updatedMessages = [...prevMessages, newMessage];
+      setIsTyping(true);
+
+      (async () => {
+        try {
+          if (debugMode) {
+            console.log("handleApiRequest() messages:", updatedMessages);
+          }
+          const msgs = chatMessages2RequestMessages(updatedMessages);
+          const response = await fetchPrompt(config, msgs, cookies);
+
+          if (response) {
+            const responseMessages = response.smarter.messages
+              .filter((message) => message.content !== null)
+              .map((message) => {
+                return messageFactory(message, message.content, MessageDirectionEnum.INCOMING, message.role);
+              });
+            setMessages((prevMessages) => [...prevMessages, ...responseMessages]);
+            setIsTyping(false);
+            refetchConfig();
+          }
+        } catch (error) {
+          setIsTyping(false);
+          console.error("Api error: ", error);
+          openErrorModal("Api error", error.message);
+        }
+      })();
+
+      return updatedMessages;
+    });
+  }
+
+  // file upload event handlers
+  const handleAttachClick = async () => {
+    fileInputRef.current.click();
+  };
+  function handleFileChange(event) {
+    const file = event.target.files[0];
+    const reader = new FileReader();
+
+    reader.onload = (event) => {
+      const fileContent = event.target.result;
+      handleApiRequest(fileContent, true);
+    };
+    reader.readAsText(file);
+  }
+
+  // send button event handler
+  const handleSend = (input_text) => {
+    // remove any HTML tags from the input_text. Pasting text into the
+    // input box (from any source) tends to result in HTML span tags being included
+    // in the input_text. This is a problem because the Api doesn't know how to
+    // handle HTML tags. So we remove them here.
+    const sanitized_input_text = input_text.replace(/<[^>]+>/g, "");
+
+    // check if the sanitized input text is empty or only contains whitespace
+    if (!sanitized_input_text.trim()) {
+      return;
+    }
+    handleApiRequest(sanitized_input_text, false);
+  };
+
+  // Creates a fancier title for the chat app which includes
+  // fontawesome icons for validation and deployment status.
+  function AppTitle({ title, isValid, isDeployed }) {
+    return (
+      <div>
+        {title}&nbsp;
+        {isValid ? (
+          <FontAwesomeIcon icon={faCheckCircle} style={{ color: "green" }} />
+        ) : (
+          <FontAwesomeIcon icon={faTimesCircle} style={{ color: "red" }} />
+        )}
+        {isDeployed ? (
+          <>
+            &nbsp;
+            <FontAwesomeIcon icon={faRocket} style={{ color: "orange" }} />
+          </>
+        ) : null}
+      </div>
+    );
+  }
+
+  function SmarterMessage({ i, message }) {
+    let messageClassNames = "";
+    if (message.sender === "smarter") {
+      messageClassNames = "smarter-message";
+    } else if (["tool", "system"].includes(message.sender)) {
+      messageClassNames = "system-message";
+    }
+    return <Message key={i} model={message} className={messageClassNames} />;
+  }
+
+  // UI widget styles
+  // note that most styling is intended to be created in Component.css
+  // these are outlying cases where inline styles are required in order to override the default styles
+  const fullWidthStyle = {
+    width: "100%",
+  };
+  const transparentBackgroundStyle = {
+    backgroundColor: "rgba(0,0,0,0.10)",
+    color: "lightgray",
+  };
+  const mainContainerStyle = {
+    // backgroundImage:
+    //   "linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, .75)), apiUrl('" +
+    //   background_image_url +
+    //   "')",
+    // backgroundSize: "cover",
+    // backgroundPosition: "center",
+    width: "100%",
+    height: "100%",
+  };
+  const chatContainerStyle = {
+    ...fullWidthStyle,
+    ...transparentBackgroundStyle,
+  };
+
+  // render the chat app
+  return (
+    <div id="smarter_chat_component_container" className="SmarterChat">
+      <ContainerLayout>
+        <ContentLayout>
+          <ComponentLayout>
+            <div className="chat-app">
+              <MainContainer style={mainContainerStyle}>
+                <ErrorBoundary>
+                  <ErrorModal
+                    isModalOpen={isModalOpen}
+                    title={modalTitle}
+                    message={modalMessage}
+                    onCloseClick={closeChatModal}
+                  />
+                </ErrorBoundary>
+                <ChatContainer style={chatContainerStyle}>
+                  <ConversationHeader>
+                    <ConversationHeader.Content
+                      userName={<AppTitle title={title} isValid={isValid} isDeployed={isDeployed} />}
+                      info={info}
+                    />
+                    <ConversationHeader.Actions>
+                      <AddUserButton onClick={handleAddUserButtonClick} title="Start a new chat" />
+                      {toggleMetadata && <InfoButton onClick={handleInfoButtonClick} title="Toggle system meta data" />}
+                    </ConversationHeader.Actions>
+                  </ConversationHeader>
+                  <MessageList
+                    style={transparentBackgroundStyle}
+                    scrollBehavior="auto"
+                    typingIndicator={isTyping ? <TypingIndicator content={assistantName + " is typing"} /> : null}
+                  >
+                    {messages
+                      .filter((message) => message.display)
+                      .map((message, i) => {
+                        return <SmarterMessage i={i} message={message} />;
+                      })}
+                  </MessageList>
+                  <MessageInput
+                    placeholder={placeholderText}
+                    onSend={handleSend}
+                    onAttachClick={handleAttachClick}
+                    attachButton={fileAttachButton}
+                    fancyScroll={false}
+                  />
+                </ChatContainer>
+                <input
+                  type="file"
+                  accept=".py"
+                  title="Select a Python file"
+                  ref={fileInputRef}
+                  style={{ display: "none" }}
+                  onChange={handleFileChange}
+                />
+              </MainContainer>
+            </div>
+          </ComponentLayout>
+        </ContentLayout>
+      </ContainerLayout>
+    </div>
+  );
+}
+
+export default SmarterChat;

package/src/components/SmarterChat/api.js

@@ -0,0 +1,233 @@
+/*-----------------------------------------------------------------------------
+ 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
+-----------------------------------------------------------------------------*/
+
+// Set to true to enable local development mode,
+// which will simulate the server-side API calls.
+const developerMode = false;
+const userAgent = "SmarterChat/1.0";
+const applicationJson = "application/json";
+
+function getCookie(cookie, defaultValue = null) {
+  let cookieValue = null;
+  if (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));
+        if (developerMode) {
+          console.log("getCookie(): found ", cookieValue, "for cookie", cookie.name);
+        }
+        break;
+      }
+    }
+  }
+  if (developerMode && !cookieValue) {
+    console.warn("getCookie(): no value found for", cookie.name);
+  }
+  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 = {
+    session_key: config.session_key,
+    messages: messages,
+  };
+  return JSON.stringify(body);
+}
+
+function requestHeadersFactory(cookies) {
+  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("; ");
+    return selectedCookies;
+  }
+
+  const requestCookies = getRequestCookies(cookies);
+  const csrftoken = getCookie(cookies.csrfCookie, "");
+  const authToken = null; // FIX NOTE: add me.
+
+  return {
+    Accept: applicationJson,
+    "Content-Type": applicationJson,
+    "X-CSRFToken": csrftoken,
+    Origin: window.location.origin,
+    Cookie: requestCookies,
+    Authorization: `Bearer ${authToken}`,
+    "User-Agent": userAgent,
+  };
+}
+
+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) {
+  const debugMode = getCookie(cookies.debugCookie) === "true";
+  try {
+    if (debugMode || developerMode) {
+      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 || developerMode) {
+          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) {
+  console.log("fetchPrompt(): config", config);
+  const apiUrl = config.meta_data.url;
+  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) {
+    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);
+    return newConfig;
+  }
+  return null;
+}

package/src/components/SmarterChat/enums.js

@@ -0,0 +1,17 @@
+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

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