kooby 1.0.0

package/dist/esm/index.js

@@ -0,0 +1,881 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { TextArea, ActionButton, InlineAlert, Heading, Text, ProgressCircle, DialogTrigger, Popover } from '@react-spectrum/s2';
+import Copy from '@react-spectrum/s2/icons/Copy';
+import OpenIn from '@react-spectrum/s2/icons/OpenIn';
+import Refresh from '@react-spectrum/s2/icons/Refresh';
+import ThumbDown from '@react-spectrum/s2/icons/ThumbDown';
+import ThumbUp from '@react-spectrum/s2/icons/ThumbUp';
+import Markdown from 'markdown-to-jsx';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+function _callSuper(t, o, e) {
+  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
+}
+function _classCallCheck(a, n) {
+  if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function");
+}
+function _defineProperties(e, r) {
+  for (var t = 0; t < r.length; t++) {
+    var o = r[t];
+    o.enumerable = o.enumerable || false, o.configurable = true, "value" in o && (o.writable = true), Object.defineProperty(e, _toPropertyKey(o.key), o);
+  }
+}
+function _createClass(e, r, t) {
+  return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", {
+    writable: false
+  }), e;
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: true,
+    configurable: true,
+    writable: true
+  }) : e[r] = t, e;
+}
+function _getPrototypeOf(t) {
+  return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) {
+    return t.__proto__ || Object.getPrototypeOf(t);
+  }, _getPrototypeOf(t);
+}
+function _inherits(t, e) {
+  if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
+  t.prototype = Object.create(e && e.prototype, {
+    constructor: {
+      value: t,
+      writable: true,
+      configurable: true
+    }
+  }), Object.defineProperty(t, "prototype", {
+    writable: false
+  }), e && _setPrototypeOf(t, e);
+}
+function _isNativeReflectConstruct() {
+  try {
+    var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
+  } catch (t) {}
+  return (_isNativeReflectConstruct = function () {
+    return !!t;
+  })();
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = true,
+      o = false;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) ; else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = true, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), true).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _possibleConstructorReturn(t, e) {
+  if (e && ("object" == typeof e || "function" == typeof e)) return e;
+  if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined");
+  return _assertThisInitialized(t);
+}
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var ChatManagerBase = /*#__PURE__*/function () {
+  function ChatManagerBase(_ref) {
+    var url = _ref.url,
+      onMessage = _ref.onMessage,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      onError = _ref.onError,
+      authToken = _ref.authToken;
+    _classCallCheck(this, ChatManagerBase);
+    if ((this instanceof ChatManagerBase ? this.constructor : void 0) === ChatManagerBase) {
+      throw new TypeError("Cannot construct ChatManagerBase instances directly");
+    }
+    this.url = url;
+    this.onMessage = onMessage;
+    this.onOpen = onOpen;
+    this.onClose = onClose;
+    this.onError = onError;
+    this.authToken = authToken;
+  }
+
+  // Abstract methods that must be implemented by subclasses
+  return _createClass(ChatManagerBase, [{
+    key: "connect",
+    value: function connect(callback) {
+      throw new Error("connect method must be implemented by subclass");
+    }
+  }, {
+    key: "sendMessage",
+    value: function sendMessage(message) {
+      throw new Error("sendMessage method must be implemented by subclass");
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      throw new Error("disconnect method must be implemented by subclass");
+    }
+  }]);
+}();
+
+var WSChatManager = /*#__PURE__*/function (_ChatManagerBase) {
+  function WSChatManager(_ref) {
+    var _this;
+    var url = _ref.url,
+      onMessage = _ref.onMessage,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      onError = _ref.onError,
+      authToken = _ref.authToken;
+      _ref.agent;
+    _classCallCheck(this, WSChatManager);
+    // Format WebSocket URL with optional token
+    var wsUrl = url;
+    if (authToken) {
+      wsUrl += "?token=".concat(authToken);
+    }
+    _this = _callSuper(this, WSChatManager, [{
+      url: wsUrl,
+      onMessage: onMessage,
+      onOpen: onOpen,
+      onClose: onClose,
+      onError: onError,
+      authToken: authToken
+    }]);
+    _this.socket = null;
+    return _this;
+  }
+  _inherits(WSChatManager, _ChatManagerBase);
+  return _createClass(WSChatManager, [{
+    key: "connect",
+    value: function connect(cb) {
+      var _this2 = this;
+      this.socket = new WebSocket(this.url);
+
+      // Call the on Open and optional callback
+      this.socket.onopen = function () {
+        _this2.onOpen();
+        // Optional callback after connection is established
+        if (cb) cb();
+      };
+      this.socket.onmessage = function (event) {
+        var data = JSON.parse(event.data);
+        _this2.onMessage(data);
+      };
+      this.socket.onclose = this.onClose;
+      this.socket.onerror = this.onError;
+    }
+  }, {
+    key: "sendMessage",
+    value: function sendMessage(message) {
+      if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+        this.socket.send(JSON.stringify(message));
+      } else {
+        console.error("WebSocket is not open");
+      }
+    }
+  }, {
+    key: "disconnect",
+    value: function disconnect() {
+      if (this.socket) {
+        this.socket.close();
+      }
+    }
+  }]);
+}(ChatManagerBase);
+
+var ChatManager = /*#__PURE__*/function () {
+  function ChatManager() {
+    _classCallCheck(this, ChatManager);
+  }
+  return _createClass(ChatManager, null, [{
+    key: "create",
+    value: function create(_ref) {
+      var url = _ref.url,
+        onMessage = _ref.onMessage,
+        onOpen = _ref.onOpen,
+        onClose = _ref.onClose,
+        onError = _ref.onError,
+        authToken = _ref.authToken,
+        agent = _ref.agent;
+      if (url.startsWith("ws://") || url.startsWith("wss://")) {
+        return new WSChatManager({
+          url: url,
+          onMessage: onMessage,
+          onOpen: onOpen,
+          onClose: onClose,
+          onError: onError,
+          authToken: authToken,
+          agent: agent
+        });
+      }
+      throw new Error("Kooby expects a WebSocket URL (ws:// or wss://). Got: ".concat(url));
+    }
+  }]);
+}();
+
+function styleInject(css, ref) {
+  if (ref === void 0) ref = {};
+  var insertAt = ref.insertAt;
+  if (typeof document === 'undefined') {
+    return;
+  }
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".kooby {\n  width: 100%;\n  max-width: 1000px;\n  height: 100%;\n  max-height: 90vh;\n  padding: 30px;\n  padding-top: 50px;\n  border: 1px solid var(--kooby-border, rgba(0, 0, 0, 0.15));\n  border-radius: 10px;\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.08);\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  position: relative;\n  color: #000;\n}\n\n.site--app[data-theme=\"dark\"] .kooby,\n[data-color-scheme=\"dark\"] .kooby {\n  border: none;\n  box-shadow: 0 0 2px rgba(255, 255, 255, 0.12);\n  background-color: var(--kooby-panel-bg, rgba(30, 30, 30, 0.95));\n  color: #fff;\n}\n\n.kooby-focus {\n  width: 100%;\n  max-width: 100%;\n}\n\n.kooby-toolbar {\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 4px;\n  position: absolute;\n  top: 0;\n  right: 0;\n  padding: 5px;\n  box-sizing: border-box;\n}\n\n.kooby-conversation {\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n  flex: 2;\n  overflow: scroll;\n\n  scrollbar-width: none;\n}\n\n.kooby-conversation::-webkit-scrollbar {\n  display: none;\n}\n\n.kooby-text-box {\n  flex: 0 0 auto;\n}\n\n.kooby-message {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.kooby-message-role {\n  min-width: 100px;\n  height: 40px;\n  padding: 10px;\n  border-radius: 5px 0 0 5px;\n  display: flex;\n  align-items: center;\n  /* justify-content: center; */\n}\n\n.kooby-message-role strong {\n  color: #000;\n}\n\n[data-color-scheme=\"dark\"] .kooby-message-role strong {\n  color: #fff;\n}\n\n.kooby-system {\n  background-color: #d3d3d3;\n}\n\n.kooby-assistant {\n  background-color: #d3d3d3;\n}\n\n[data-color-scheme=\"dark\"] .kooby-system,\n[data-color-scheme=\"dark\"] .kooby-assistant {\n  background-color: #3a3a3a;\n}\n\n.kooby-user {\n  background-color: rgb(59, 99, 251);\n}\n\n.kooby-user strong {\n  color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-user strong {\n  color: white;\n}\n\n.kooby-content {\n  padding: 10px;\n  width: 100%;\n  text-align: left;\n  color: #000;\n  margin-top: 10px;\n}\n\n[data-color-scheme=\"dark\"] .kooby-content {\n  color: #fff;\n}\n\n.kooby-content :where(p, li, td, th, span, strong, em, h1, h2, h3, h4, h5, h6) {\n  color: inherit;\n}\n\n.kooby .mermaid {\n  background-color: white;\n  border-radius: 5px;\n  padding: 10px;\n  margin-top: 10px;\n  margin-bottom: 10px;\n}\n\n.kooby-debug {\n  position: fixed;\n  right: 0;\n  top: 0;\n  width: 30vw;\n  height: 100vh;\n  color: #111;\n  overflow-y: auto;\n  z-index: 1000;\n  padding: 30px;\n  background-color: white;\n}\n\n[data-color-scheme=\"dark\"] .kooby-debug {\n  color: #f5f5f5;\n  background-color: var(--kooby-panel-bg, rgba(30, 30, 30));\n}\n\n.kooby-debug pre {\n  white-space: pre-wrap;\n}\n\n.kooby-debug-actions {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: 10px;\n}\n\n.kooby-debug-actions button {\n  font-size: 1rem;\n  padding: 4px 8px;\n  height: auto;\n  min-height: unset;\n}\n\n.kooby-feedback {\n  display: flex;\n  margin-top: 10px;\n  align-items: center;\n  gap: 6px;\n}\n\n.qr-code {\n  width: 200px;\n}\n\n.qr {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  padding-top: 20px;\n  padding-bottom: 20px;\n}\n\n.qr code {\n  font-size: 12px;\n}\n\n.qr-download {\n  width: 200px;\n}\n\n.site--app {\n  min-height: 100vh;\n  color: #000;\n}\n\n[data-color-scheme=\"dark\"] .site--app {\n  color: #fff;\n}\n\n.site--app h1 {\n  color: inherit;\n}\n\n.site--app-main {\n  max-width: 1200px;\n  margin: 0 auto;\n  padding: 16px;\n}\n";
+styleInject(css_248z);
+
+var _excluded = ["debug", "url", "agent", "token", "children", "metadata", "context", "readOnly", "sendHistory", "apiRef", "expanded"];
+var format = function format(value) {
+  if (value) {
+    return value.split("_").map(function (word) {
+      return word.charAt(0).toUpperCase() + word.slice(1);
+    }).join(" ");
+  } else {
+    return "Kooby";
+  }
+};
+
+/* Helper: interactive feedback popover (replaces non-interactive tooltip + form) */
+
+var FeedbackField = function FeedbackField(_ref) {
+  var Icon = _ref.icon,
+    title = _ref.title,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    onCommit = _ref.onCommit;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  return /*#__PURE__*/React.createElement(DialogTrigger, {
+    isOpen: open,
+    onOpenChange: setOpen
+  }, /*#__PURE__*/React.createElement(ActionButton, {
+    isQuiet: true,
+    "aria-label": title
+  }, /*#__PURE__*/React.createElement(Icon, null)), /*#__PURE__*/React.createElement(Popover, {
+    size: "S"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 12
+    }
+  }, /*#__PURE__*/React.createElement(Heading, null, title), /*#__PURE__*/React.createElement(TextArea, {
+    value: value,
+    onChange: onValueChange,
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        onCommit();
+        setOpen(false);
+      }
+    }
+  }))));
+};
+
+/* -------------------- Kooby Context -------------------- */
+
+var KoobyContext = /*#__PURE__*/React.createContext();
+var useKooby = function useKooby() {
+  var context = React.useContext(KoobyContext);
+  if (!context) {
+    throw new Error("useKooby must be used within a KoobyProvider");
+  }
+  return context;
+};
+
+/* -------------------- Kooby Components -------------------- */
+
+var Feedback = function Feedback(_ref2) {
+  var responding = _ref2.responding,
+    message = _ref2.message,
+    index = _ref2.index,
+    conversation = _ref2.conversation,
+    negative = _ref2.negative,
+    positive = _ref2.positive,
+    showFeedbackOnAllMessages = _ref2.showFeedbackOnAllMessages,
+    loading = _ref2.loading;
+  var currentMessage = index === conversation.length - 1;
+  var show = false;
+  if (currentMessage && !responding && message.role === "assistant") {
+    show = true;
+  }
+  if (!currentMessage && showFeedbackOnAllMessages && message.role === "assistant") {
+    show = true;
+  }
+  var copyMessage = function copyMessage() {
+    var messageJson = JSON.stringify(message.content, null, 2);
+    navigator.clipboard.writeText(messageJson);
+  };
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    positiveFeedback = _useState4[0],
+    setPositiveFeedback = _useState4[1];
+  var _useState5 = useState(""),
+    _useState6 = _slicedToArray(_useState5, 2),
+    negativeFeedback = _useState6[0],
+    setNegativeFeedback = _useState6[1];
+  if (loading && currentMessage) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "kooby-feedback",
+      style: {
+        marginTop: "-35px",
+        marginLeft: "-40px"
+      }
+    }, /*#__PURE__*/React.createElement(ProgressCircle, {
+      size: "M",
+      isIndeterminate: true,
+      "aria-label": "Loading",
+      staticColor: "white"
+    }));
+  }
+  if (show) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "kooby-feedback"
+    }, /*#__PURE__*/React.createElement(ActionButton, {
+      isQuiet: true,
+      "aria-label": "Copy message",
+      onPress: copyMessage
+    }, /*#__PURE__*/React.createElement(Copy, null)), positive && /*#__PURE__*/React.createElement(FeedbackField, {
+      icon: ThumbUp,
+      title: positive.label || "Positive Feedback",
+      value: positiveFeedback,
+      onValueChange: setPositiveFeedback,
+      onCommit: function onCommit() {
+        return positive.onSubmit({
+          feedback: positiveFeedback,
+          conversation: conversation,
+          message: message.content
+        });
+      }
+    }), negative && /*#__PURE__*/React.createElement(FeedbackField, {
+      icon: ThumbDown,
+      title: negative.label || "Negative Feedback",
+      value: negativeFeedback,
+      onValueChange: setNegativeFeedback,
+      onCommit: function onCommit() {
+        return negative.onSubmit({
+          feedback: negativeFeedback,
+          conversation: conversation
+        });
+      }
+    }));
+  }
+};
+var Content = function Content(_ref3) {
+  var mdjsx = _ref3.mdjsx,
+    feedback = _ref3.feedback,
+    responding = _ref3.responding,
+    loading = _ref3.loading,
+    index = _ref3.index,
+    message = _ref3.message,
+    conversation = _ref3.conversation,
+    positive = _ref3.positive,
+    negative = _ref3.negative,
+    showFeedbackOnAllMessages = _ref3.showFeedbackOnAllMessages;
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: "100%"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kooby-content"
+  }, /*#__PURE__*/React.createElement(Markdown, {
+    options: mdjsx
+  }, message.content)), feedback && /*#__PURE__*/React.createElement(Feedback, {
+    responding: responding,
+    loading: loading,
+    index: index,
+    message: message,
+    conversation: conversation,
+    positive: positive,
+    negative: negative,
+    showFeedbackOnAllMessages: showFeedbackOnAllMessages
+  }));
+};
+var Conversation = function Conversation(_ref4) {
+  var mdjsx = _ref4.mdjsx,
+    _ref4$feedback = _ref4.feedback,
+    feedback = _ref4$feedback === void 0 ? true : _ref4$feedback,
+    positive = _ref4.positive,
+    negative = _ref4.negative,
+    showFeedbackOnAllMessages = _ref4.showFeedbackOnAllMessages;
+  var _useKooby = useKooby(),
+    conversation = _useKooby.conversation,
+    responding = _useKooby.responding,
+    loading = _useKooby.loading;
+  var conversationEndRef = useRef(null);
+  useEffect(function () {
+    if (conversation.length > 0 && conversation[conversation.length - 1].role != "system") {
+      var _conversationEndRef$c;
+      (_conversationEndRef$c = conversationEndRef.current) === null || _conversationEndRef$c === void 0 || _conversationEndRef$c.scrollIntoView({
+        behavior: "smooth"
+      });
+    }
+  }, [conversation]);
+  var filteredConvo = conversation.filter(function (message) {
+    return message.role !== "system";
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kooby-conversation"
+  }, filteredConvo.map(function (message, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "kooby-message"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "kooby-message-role kooby-".concat(message.role)
+    }, /*#__PURE__*/React.createElement("strong", null, message.role === "assistant" || message.role === "system" ? "Kooby" : message.role.charAt(0).toUpperCase() + message.role.slice(1))), /*#__PURE__*/React.createElement(Content, {
+      mdjsx: mdjsx,
+      feedback: feedback,
+      responding: responding,
+      loading: loading,
+      index: index,
+      message: message,
+      conversation: filteredConvo,
+      positive: positive,
+      negative: negative,
+      showFeedbackOnAllMessages: showFeedbackOnAllMessages
+    }));
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: conversationEndRef
+  }));
+};
+var TextBox = function TextBox() {
+  var _useKooby2 = useKooby(),
+    isConnected = _useKooby2.isConnected,
+    socketManagerRef = _useKooby2.socketManagerRef,
+    setConversation = _useKooby2.setConversation,
+    context = _useKooby2.context,
+    setLoading = _useKooby2.setLoading;
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    input = _useState8[0],
+    setInput = _useState8[1];
+  var handleSend = React.useCallback(function () {
+    if (input.trim()) {
+      if (!isConnected && !socketManagerRef.current) {
+        console.error("WebSocket is not connected");
+        return;
+      }
+      var send = function send() {
+        setConversation(function (prev) {
+          return [].concat(_toConsumableArray(prev), [{
+            role: "user",
+            content: input
+          }]);
+        });
+        try {
+          socketManagerRef.current.sendMessage({
+            input: input
+          });
+          socketManagerRef.current.sendMessage({
+            complete: true
+          });
+          setLoading(true);
+        } catch (error) {
+          console.error("Error sending message:", error);
+        }
+        setInput("");
+      };
+      if (!isConnected) {
+        socketManagerRef.current.connect(function () {
+          send();
+        });
+        return;
+      }
+      send();
+    }
+  }, [input, isConnected, socketManagerRef, setConversation, context]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kooby-text-box"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    id: "prompt",
+    placeholder: "Ask Me Anything!",
+    "aria-label": "Prompt",
+    value: input,
+    onChange: setInput,
+    width: "100%",
+    onKeyDown: function onKeyDown(e) {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        handleSend();
+      }
+    }
+  }));
+};
+var Toolbar = function Toolbar(_ref5) {
+  var children = _ref5.children,
+    _ref5$expandable = _ref5.expandable,
+    expandable = _ref5$expandable === void 0 ? true : _ref5$expandable,
+    _ref5$reset = _ref5.reset,
+    reset = _ref5$reset === void 0 ? true : _ref5$reset;
+  var _useKooby3 = useKooby(),
+    agent = _useKooby3.agent,
+    conversation = _useKooby3.conversation,
+    toggleFocus = _useKooby3.toggleFocus,
+    resetConversation = _useKooby3.resetConversation;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "kooby-toolbar"
+  }, children ? children({
+    agent: agent,
+    conversation: conversation
+  }) : null, reset && /*#__PURE__*/React.createElement(ActionButton, {
+    "aria-label": "Reset",
+    onPress: resetConversation
+  }, /*#__PURE__*/React.createElement(Refresh, null)), expandable && /*#__PURE__*/React.createElement(ActionButton, {
+    "aria-label": "Expand",
+    onPress: toggleFocus
+  }, /*#__PURE__*/React.createElement(OpenIn, null)));
+};
+var ConnectionStatus = function ConnectionStatus() {
+  var _useKooby4 = useKooby(),
+    isConnected = _useKooby4.isConnected;
+  if (!isConnected) {
+    return (
+      /*#__PURE__*/
+      // <div >
+      React.createElement(InlineAlert, {
+        variant: "notice",
+        UNSAFE_style: {
+          marginBottom: "10px"
+        }
+      }, /*#__PURE__*/React.createElement(Heading, null, "Disconnected"), /*#__PURE__*/React.createElement(Text, null, "Please continue talking to reconnect."))
+      // </div>
+    );
+  }
+};
+
+/* -------------------- Kooby Component -------------------- */
+
+var defaultGreetingMessage = function defaultGreetingMessage(agent) {
+  return {
+    role: "assistant",
+    content: "Hello, I'm ".concat(format(agent), "! I'm here to help you with any questions you may have.")
+  };
+};
+var initializeConversation = function initializeConversation(_ref6) {
+  var agent = _ref6.agent,
+    initialConversation = _ref6.initialConversation;
+  if (initialConversation && initialConversation.length > 0) {
+    return initialConversation;
+  }
+  return [defaultGreetingMessage(agent)];
+};
+var Kooby = function Kooby(_ref7) {
+  var debug = _ref7.debug,
+    url = _ref7.url,
+    agent = _ref7.agent,
+    token = _ref7.token,
+    children = _ref7.children,
+    _ref7$metadata = _ref7.metadata,
+    metadata = _ref7$metadata === void 0 ? {} : _ref7$metadata,
+    context = _ref7.context,
+    _ref7$readOnly = _ref7.readOnly,
+    readOnly = _ref7$readOnly === void 0 ? false : _ref7$readOnly;
+    _ref7.sendHistory;
+    var apiRef = _ref7.apiRef,
+    expanded = _ref7.expanded,
+    rest = _objectWithoutProperties(_ref7, _excluded);
+  var _useState9 = useState(false),
+    _useState0 = _slicedToArray(_useState9, 2),
+    focus = _useState0[0],
+    setFocus = _useState0[1];
+  var toggleFocus = function toggleFocus() {
+    return setFocus(function (prev) {
+      return !prev;
+    });
+  };
+  var initialConversation = rest.conversation;
+  var _useState1 = useState(function () {
+      return initializeConversation({
+        agent: agent,
+        initialConversation: initialConversation
+      });
+    }),
+    _useState10 = _slicedToArray(_useState1, 2),
+    conversation = _useState10[0],
+    setConversation = _useState10[1];
+  var conversationRef = useRef();
+  conversationRef.current = conversation;
+  useEffect(function () {
+    setConversation(initializeConversation({
+      agent: agent,
+      initialConversation: initialConversation
+    }));
+  }, [agent, initialConversation]);
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isConnected = _useState12[0],
+    setIsConnected = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray(_useState13, 2),
+    responding = _useState14[0],
+    setResponding = _useState14[1];
+  var _useState15 = useState(false),
+    _useState16 = _slicedToArray(_useState15, 2),
+    loading = _useState16[0],
+    setLoading = _useState16[1];
+  var socketManagerRef = useRef(null);
+  var metadataRef = useRef();
+  metadataRef.current = metadata;
+  useEffect(function () {
+    if (url && !readOnly) {
+      socketManagerRef.current = ChatManager.create({
+        url: url,
+        authToken: token,
+        agent: agent,
+        onMessage: function onMessage(data) {
+          // Example SSE message
+          // {"output":" I","trace_id":"94008937-f598-4be3-8714-5c6a4b4c9a32","span_id":"07b85d19-fb89-4a57-9566-6a9d9fdb0dc7"}
+          // {"type":"complete","trace_id":"94008937-f598-4be3-8714-5c6a4b4c9a32","span_id":"07b85d19-fb89-4a57-9566-6a9d9fdb0dc7"}
+
+          // Check if the incoming data contains an 'output' property
+          if (data.output) {
+            // We are starting to respond
+            setResponding(true);
+            // We are done loading the response
+            setLoading(false);
+            // Update the conversation state using the setConversation function
+            setConversation(function (prev) {
+              // Get the last message in the current conversation
+              var lastMessage = prev[prev.length - 1];
+
+              // Clean the output by removing any prefix like "user_id-<number>: "
+              var cleanOutput = data.output.replace(/^user_id-\d+:\s*/, "");
+
+              // Check if the last message in the conversation is from the assistant
+              if (lastMessage.role === "assistant") {
+                // If the last message is from the assistant, update its content
+                // by appending the cleaned output and replace the last message
+                return [].concat(_toConsumableArray(prev.slice(0, -1)), [// Keep all messages except the last one
+                _objectSpread2(_objectSpread2({}, lastMessage), {}, {
+                  // Copy the last message
+                  content: lastMessage.content + cleanOutput // Append the new content
+                })]);
+              } else {
+                // If the last message is not from the assistant, add a new message
+                // from the assistant with the cleaned output
+                return [].concat(_toConsumableArray(prev), [{
+                  role: "assistant",
+                  content: cleanOutput
+                }]);
+              }
+            });
+          }
+          if (data.complete) {
+            console.log("complete");
+            setResponding(false);
+            setIsConnected(true);
+          }
+        },
+        onOpen: function onOpen() {
+          console.log("Chat Manager Connected", metadataRef.current);
+          setIsConnected(true);
+
+          // Take the current conversation and format it for the chat manager history
+          var history = initialConversation;
+          socketManagerRef.current.sendMessage({
+            handshake: true,
+            history: history,
+            metadata: _objectSpread2({
+              user_agent: navigator.userAgent
+            }, metadataRef.current)
+          });
+        },
+        onClose: function onClose() {
+          console.log("Chat Manager Disconnecting");
+          setIsConnected(false);
+        },
+        onError: function onError() {
+          setIsConnected(false);
+        }
+      });
+      socketManagerRef.current.connect();
+    }
+    return function () {
+      if (url) {
+        console.log("Cleaing up Socket");
+        socketManagerRef.current.disconnect();
+        setIsConnected(false);
+      }
+    };
+  }, [url, agent, token]);
+  useEffect(function () {
+    if (socketManagerRef.current && context) {
+      console.log("Setting context", context);
+      setConversation(function (prev) {
+        return [].concat(_toConsumableArray(prev), [{
+          role: "system",
+          content: context
+        }]);
+      });
+      socketManagerRef.current.sendMessage({
+        context: context
+      });
+    }
+  }, [context]);
+  var resetConversation = function resetConversation() {
+    if (url && !readOnly && socketManagerRef.current) {
+      socketManagerRef.current.sendMessage({
+        reset: true
+      });
+    }
+    setConversation([defaultGreetingMessage(agent)]);
+  };
+  var contextValue = React.useMemo(function () {
+    return {
+      conversation: conversation,
+      setConversation: setConversation,
+      resetConversation: resetConversation,
+      isConnected: isConnected,
+      setIsConnected: setIsConnected,
+      socketManagerRef: socketManagerRef,
+      agent: agent,
+      toggleFocus: toggleFocus,
+      responding: responding,
+      context: context,
+      setLoading: setLoading,
+      loading: loading
+    };
+  }, [conversation, isConnected, agent, responding, context]);
+  if (apiRef) {
+    apiRef.current = {
+      resetConversation: resetConversation
+    };
+  }
+  return /*#__PURE__*/React.createElement(KoobyContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "kooby ".concat(focus || expanded ? "kooby-focus" : "")
+  }, children), debug && /*#__PURE__*/React.createElement("code", {
+    className: "kooby-debug"
+  }, /*#__PURE__*/React.createElement("pre", null, JSON.stringify(conversation, null, 2))));
+};
+Kooby.Content = Content;
+Kooby.Conversation = Conversation;
+Kooby.TextBox = TextBox;
+Kooby.Toolbar = Toolbar;
+Kooby.ConnectionStatus = ConnectionStatus;
+
+export { Kooby };