@smarter.sh/ui-chat 0.0.1

package/src/components/SmarterChat/styles.css

@@ -0,0 +1,148 @@
+.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%;
+}
+
+.SmarterChat {
+  border: 1px solid rgba(255, 87, 51, 0.75);
+  height: 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;
+  color: #333333;
+}
+div.cs-message__html-content a:hover {
+  text-decoration: underline;
+  color: midnightblue;
+}
+
+section.smarter-message .cs-message__html-content {
+  color: brown !important;
+  background-color: blanchedalmond;
+  font-family: "Courier New", Courier, monospace;
+  font-weight: bold;
+  text-align: center;
+}
+
+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;
+}
+
+section.system-message .cs-message__html-content {
+  color: beige !important;
+  background-color: rgb(39, 40, 34);
+  font-family: "Courier New", Courier, monospace;
+  font-weight: bold;
+}
+
+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;
+}
+
+/*-------------- 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

@@ -0,0 +1,158 @@
+import { MessageDirectionEnum, SenderRoleEnum, ValidMessageRolesEnum } from "./enums.js";
+
+export function cookieMetaFactory(cookieName, cookieExpiration) {
+  /*
+  Create a cookie object.
+   */
+  return {
+    name: cookieName,
+    expiration: cookieExpiration,
+  };
+}
+
+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

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

package/src/components/index.js

@@ -0,0 +1,2 @@
+export { default as SmarterChat } from "./SmarterChat";
+export { default as ErrorModal } from "./ErrorModal";