@smarter.sh/ui-chat 0.3.0 → 0.7.0

package/src/components/Console/Component.jsx

@@ -1,186 +0,0 @@
-//---------------------------------------------------------------------------------
-//  written by: Lawrence McDaniel
-//              https://lawrencemcdaniel.com
-//
-//  date:       Mar-2023
-//---------------------------------------------------------------------------------
-
-// React stuff
-import React, { useState, useEffect } from "react";
-import ReactJsonView from "@microlink/react-json-view";
-import PropTypes from "prop-types";
-
-// This component
-import ConfigPropTypes from "../../types/propTypes";
-import HelmetHeadStyles from "./HeadStyles";
-import "./Component.css";
-import { MenuItems } from "./enums";
-
-function Console({ config }) {
-  const [consoleText, setConsoleText] = useState();
-  const [chatToolCallHistory, setChatToolCallHistory] = useState();
-  const [chatPluginUsageHistory, setChatPluginUsageHistory] = useState();
-  const [chatbotRequestHistory, setChatbotRequestHistory] = useState();
-
-  const [selectedMenuItem, setSelectedMenuItem] = useState(MenuItems.CHAT_CONFIG);
-
-  // simulated bash shell environment
-  const [podHash, setPodHash] = useState(Math.floor(Math.random() * 0xffffffff).toString(16));
-  const [lastLogin, setLastLogin] = useState(new Date().toString());
-  const [randomIpAddress, setRandomIpAddress] = useState(
-    `192.168.${Math.floor(Math.random() * 256)}.${Math.floor(Math.random() * 256)}`,
-  );
-  const [systemPrompt, setSystemPrompt] = useState(`smarter_user@smarter-${podHash}:~/smarter$`);
-
-  // Lifecycle hooks
-  useEffect(() => {
-    if (config) {
-      if (config?.debug_mode) {
-        console.log("Console() component mounted");
-      }
-
-      setChatToolCallHistory(config.history?.chat_tool_call_history || []);
-      setChatPluginUsageHistory(config.history?.chat_plugin_usage_history || []);
-      setChatbotRequestHistory(config.history?.chatbot_request_history || []);
-
-      const newConsoleText = Array.isArray(config) ? config : [config] || [{}];
-      setConsoleText(newConsoleText);
-      setSelectedMenuItem(MenuItems.CHAT_CONFIG);
-    }
-
-    return () => {
-      if (config?.debug_mode) {
-        console.log("Console() component unmounted");
-      }
-    };
-  }, [config]);
-
-  const ConsoleNavItem = (props) => {
-    // set the console output text based on the selected menu item
-    function consoleNavItemClicked(event, id) {
-      let newData = [{}];
-      switch (id) {
-        case MenuItems.CHAT_CONFIG:
-          newData = Array.isArray(config) ? config : [config] || newData;
-          break;
-        case MenuItems.CHAT_TOOL_CALL_HISTORY:
-          newData = chatToolCallHistory || newData;
-          break;
-        case MenuItems.CHAT_PLUGIN_USAGE_HISTORY:
-          newData = chatPluginUsageHistory || newData;
-          break;
-        case MenuItems.CHATBOT_REQUEST_HISTORY:
-          newData = chatbotRequestHistory || newData;
-          break;
-      }
-      setSelectedMenuItem(id);
-      setConsoleText(newData);
-
-      // set the 'active' menu item
-      requestAnimationFrame(() => {
-        if (id != selectedMenuItem) {
-          document.querySelectorAll(".nav-link").forEach((el) => el.classList.remove("active"));
-        } else {
-          event.target.classList.add("active");
-        }
-      });
-    }
-
-    return (
-      <li className="nav-item my-1">
-        <a
-          id={props.id}
-          className={`btn btn-sm btn-color-gray-600 bg-state-body btn-active-color-gray-800 fw-bolder fw-bold fs-6 fs-lg-base nav-link px-3 px-lg-4 mx-1 ${
-            props.id === selectedMenuItem ? "active" : ""
-          }`}
-          onClick={(event) => consoleNavItemClicked(event, props.id)}
-        >
-          {props.label}
-        </a>
-      </li>
-    );
-  };
-
-  const ConsoleMenu = () => {
-    return (
-      <div
-        id="chatapp_console"
-        className="bg-gray-200 d-flex flex-stack flex-wrap mb-2 p-2 console-nav-items"
-        data-kt-sticky="true"
-        data-kt-sticky-name="sticky-profile-navs"
-        data-kt-sticky-offset="{default: false, lg: '200px'}"
-        data-kt-sticky-width="{target: '#kt_app_content_container'}"
-        data-kt-sticky-left="auto"
-        data-kt-sticky-top="70px"
-        data-kt-sticky-animation="false"
-        data-kt-sticky-zindex={95}
-      >
-        <ul className="nav flex-wrap border-transparent">
-          <ConsoleNavItem label="Config" id={MenuItems.CHAT_CONFIG} />
-          <ConsoleNavItem label="Api Calls" id={MenuItems.CHATBOT_REQUEST_HISTORY} />
-          <ConsoleNavItem label="Tool Calls" id={MenuItems.CHAT_TOOL_CALL_HISTORY} />
-          <ConsoleNavItem label="Plugin Usage" id={MenuItems.CHAT_PLUGIN_USAGE_HISTORY} />
-        </ul>
-      </div>
-    );
-  };
-
-  const ConsoleOutputInitializing = () => {
-    return (
-      <div>
-        <p className="mb-0">
-          Last login: {lastLogin} from {randomIpAddress}
-        </p>
-        <p className="mb-0">{systemPrompt}</p>
-      </div>
-    );
-  };
-
-  const ConsoleScreen = () => {
-    return (
-      <div className="console-output rounded">
-        <div className="console-output-content">
-          <ConsoleOutputInitializing />
-          {Array.isArray(consoleText) && consoleText.length === 1 && JSON.stringify(consoleText[0]) === "{}" ? null : (
-            <>
-              {Array.isArray(consoleText)
-                ? consoleText.map((item, index) => <ReactJsonView key={index} src={item} theme="monokai" />)
-                : null}
-              <p className="mb-0">{systemPrompt}</p>
-            </>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <div className="console">
-      <HelmetHeadStyles />
-      {/*begin::Main*/}
-      <div className="app-main flex-column flex-row-fluid" id="chatapp_console_app_main">
-        {/*begin::Content wrapper*/}
-        <div className="d-flex flex-column flex-column-fluid">
-          {/*begin::Content*/}
-          <div id="chatapp_console_app_content" className="app-content flex-column-fluid p-0 pb-5">
-            {/*begin::Content container*/}
-            <div id="chatapp_console_app_content_container" className="app-container container-lg">
-              <ConsoleMenu />
-              <ConsoleScreen />
-            </div>
-            {/*end::Content container*/}
-          </div>
-          {/*end::Content*/}
-        </div>
-        {/*end::Content wrapper*/}
-      </div>
-      {/*end:::Main*/}
-    </div>
-  );
-}
-
-Console.propTypes = {
-  config: ConfigPropTypes,
-};
-
-export default Console;

package/src/components/Console/HeadStyles.jsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Helmet } from 'react-helmet';
-import { REACT_LOCAL_DEV_MODE } from '../../constants';
-
-// add Keen menu styles when we're in REACT_LOCAL_DEV_MODE
-const HelmetHeadStyles = () => (
-  <>
-    <Helmet>
-    {REACT_LOCAL_DEV_MODE && (
-        <link
-          href="/style.bundle.css"
-          rel="stylesheet"
-          type="text/css"
-        />
-      )}
-    </Helmet>
-  </>
-);
-
-export default HelmetHeadStyles;

package/src/components/Console/enums.js

@@ -1,7 +0,0 @@
-
-export const MenuItems = {
-  CHAT_CONFIG: "chat_config",
-  CHATBOT_REQUEST_HISTORY: "chatbot_request_history",
-  CHAT_TOOL_CALL_HISTORY: "chat_tool_call_history",
-  CHAT_PLUGIN_USAGE_HISTORY: "chat_plugin_usage_history",
-};

package/src/components/Console/index.js

@@ -1,2 +0,0 @@
-export { default as Console } from "./Component";
-export { MenuItems } from "./enums";

package/src/components/ErrorModal/ErrorModal.css

@@ -1,35 +0,0 @@
-.modal {
-  text-align: center;
-  padding: 0;
-}
-
-.modal h2 {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.modal-button {
-  border: none;
-  padding: 10px 20px;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  cursor: pointer;
-}
-
-.modal-container {
-  position: relative;
-}
-
-.modal-icon {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  color: red;
-  border: 4px solid red;
-  border-radius: 50%;
-  padding: 10px;
-}

package/src/components/ErrorModal/ErrorModal.jsx

@@ -1,56 +0,0 @@
-import React from "react";
-import ReactModal from "react-modal";
-import PropTypes from "prop-types";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExclamation } from "@fortawesome/free-solid-svg-icons";
-
-import "./ErrorModal.css";
-
-export function ErrorModal(props) {
-  const ModalStyle = {
-    overlay: {
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      display: "flex",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: 9999, // set a high z-index value
-    },
-    content: {
-      margin: "auto",
-      width: "50%",
-      height: "25%",
-      backgroundColor: "white",
-      zIndex: 10000, // set an even higher z-index value
-    },
-  };
-  return (
-    <ReactModal
-      isOpen={props.isModalOpen}
-      onRequestClose={props.onCloseClick}
-      appElement={document.getElementById("root")} // mcdaniel: pretty sure this is wrong.
-      style={ModalStyle}
-    >
-      <div className="modal-container">
-        <div className="modal">
-          <div className="modal-header">
-            <FontAwesomeIcon icon={faExclamation} className="modal-icon" />
-            <h2>{props.title}</h2>
-            <hr />
-          </div>
-          <p>{String(props.message)}</p>
-          <button className="modal-button" onClick={props.onCloseClick}>
-            Close
-          </button>
-        </div>
-      </div>
-    </ReactModal>
-  );
-}
-
-ErrorModal.propTypes = {
-  isModalOpen: PropTypes.bool.isRequired,
-  onCloseClick: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  message: PropTypes.string.isRequired,
-};

package/src/components/ErrorModal/index.js

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