@aptly-sdk/hq 0.0.1

package/dist/index.js

@@ -0,0 +1,1195 @@
+import './global.css';
+import require$$0, { useState, useEffect, createContext, useRef, useContext, useCallback, useMemo, Activity } from 'react';
+import Brook from '@aptly-sdk/brook';
+import { BrookProvider as BrookProvider$1, useStream } from '@aptly-sdk/brook/react';
+
+function getProject(apiKey) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations/project`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      }
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+var project = {};
+var context = null;
+var contextListeners = new Set();
+async function init({
+  apiKey
+}) {
+  const data = await getProject(apiKey);
+  if (data) data.apiKey = apiKey;
+  project = data;
+  return project;
+}
+var client = {
+  init,
+  getProject: () => project,
+  getContext: () => context,
+  setContext: nextContext => {
+    context = nextContext;
+    contextListeners.forEach(listener => listener(context));
+  },
+  subscribeToContext: listener => {
+    contextListeners.add(listener);
+    return () => {
+      contextListeners.delete(listener);
+    };
+  }
+};
+
+var jsxRuntime = {exports: {}};
+
+var reactJsxRuntime_production = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_production;
+
+function requireReactJsxRuntime_production () {
+	if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+	hasRequiredReactJsxRuntime_production = 1;
+	var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	  REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+	function jsxProd(type, config, maybeKey) {
+	  var key = null;
+	  void 0 !== maybeKey && (key = "" + maybeKey);
+	  void 0 !== config.key && (key = "" + config.key);
+	  if ("key" in config) {
+	    maybeKey = {};
+	    for (var propName in config)
+	      "key" !== propName && (maybeKey[propName] = config[propName]);
+	  } else maybeKey = config;
+	  config = maybeKey.ref;
+	  return {
+	    $$typeof: REACT_ELEMENT_TYPE,
+	    type: type,
+	    key: key,
+	    ref: void 0 !== config ? config : null,
+	    props: maybeKey
+	  };
+	}
+	reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+	reactJsxRuntime_production.jsx = jsxProd;
+	reactJsxRuntime_production.jsxs = jsxProd;
+	return reactJsxRuntime_production;
+}
+
+var reactJsxRuntime_development = {};
+
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var hasRequiredReactJsxRuntime_development;
+
+function requireReactJsxRuntime_development () {
+	if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+	hasRequiredReactJsxRuntime_development = 1;
+	"production" !== process.env.NODE_ENV &&
+	  (function () {
+	    function getComponentNameFromType(type) {
+	      if (null == type) return null;
+	      if ("function" === typeof type)
+	        return type.$$typeof === REACT_CLIENT_REFERENCE
+	          ? null
+	          : type.displayName || type.name || null;
+	      if ("string" === typeof type) return type;
+	      switch (type) {
+	        case REACT_FRAGMENT_TYPE:
+	          return "Fragment";
+	        case REACT_PROFILER_TYPE:
+	          return "Profiler";
+	        case REACT_STRICT_MODE_TYPE:
+	          return "StrictMode";
+	        case REACT_SUSPENSE_TYPE:
+	          return "Suspense";
+	        case REACT_SUSPENSE_LIST_TYPE:
+	          return "SuspenseList";
+	        case REACT_ACTIVITY_TYPE:
+	          return "Activity";
+	      }
+	      if ("object" === typeof type)
+	        switch (
+	          ("number" === typeof type.tag &&
+	            console.error(
+	              "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+	            ),
+	          type.$$typeof)
+	        ) {
+	          case REACT_PORTAL_TYPE:
+	            return "Portal";
+	          case REACT_CONTEXT_TYPE:
+	            return type.displayName || "Context";
+	          case REACT_CONSUMER_TYPE:
+	            return (type._context.displayName || "Context") + ".Consumer";
+	          case REACT_FORWARD_REF_TYPE:
+	            var innerType = type.render;
+	            type = type.displayName;
+	            type ||
+	              ((type = innerType.displayName || innerType.name || ""),
+	              (type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef"));
+	            return type;
+	          case REACT_MEMO_TYPE:
+	            return (
+	              (innerType = type.displayName || null),
+	              null !== innerType
+	                ? innerType
+	                : getComponentNameFromType(type.type) || "Memo"
+	            );
+	          case REACT_LAZY_TYPE:
+	            innerType = type._payload;
+	            type = type._init;
+	            try {
+	              return getComponentNameFromType(type(innerType));
+	            } catch (x) {}
+	        }
+	      return null;
+	    }
+	    function testStringCoercion(value) {
+	      return "" + value;
+	    }
+	    function checkKeyStringCoercion(value) {
+	      try {
+	        testStringCoercion(value);
+	        var JSCompiler_inline_result = !1;
+	      } catch (e) {
+	        JSCompiler_inline_result = true;
+	      }
+	      if (JSCompiler_inline_result) {
+	        JSCompiler_inline_result = console;
+	        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+	        var JSCompiler_inline_result$jscomp$0 =
+	          ("function" === typeof Symbol &&
+	            Symbol.toStringTag &&
+	            value[Symbol.toStringTag]) ||
+	          value.constructor.name ||
+	          "Object";
+	        JSCompiler_temp_const.call(
+	          JSCompiler_inline_result,
+	          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+	          JSCompiler_inline_result$jscomp$0
+	        );
+	        return testStringCoercion(value);
+	      }
+	    }
+	    function getTaskName(type) {
+	      if (type === REACT_FRAGMENT_TYPE) return "<>";
+	      if (
+	        "object" === typeof type &&
+	        null !== type &&
+	        type.$$typeof === REACT_LAZY_TYPE
+	      )
+	        return "<...>";
+	      try {
+	        var name = getComponentNameFromType(type);
+	        return name ? "<" + name + ">" : "<...>";
+	      } catch (x) {
+	        return "<...>";
+	      }
+	    }
+	    function getOwner() {
+	      var dispatcher = ReactSharedInternals.A;
+	      return null === dispatcher ? null : dispatcher.getOwner();
+	    }
+	    function UnknownOwner() {
+	      return Error("react-stack-top-frame");
+	    }
+	    function hasValidKey(config) {
+	      if (hasOwnProperty.call(config, "key")) {
+	        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+	        if (getter && getter.isReactWarning) return false;
+	      }
+	      return void 0 !== config.key;
+	    }
+	    function defineKeyPropWarningGetter(props, displayName) {
+	      function warnAboutAccessingKey() {
+	        specialPropKeyWarningShown ||
+	          ((specialPropKeyWarningShown = true),
+	          console.error(
+	            "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+	            displayName
+	          ));
+	      }
+	      warnAboutAccessingKey.isReactWarning = true;
+	      Object.defineProperty(props, "key", {
+	        get: warnAboutAccessingKey,
+	        configurable: true
+	      });
+	    }
+	    function elementRefGetterWithDeprecationWarning() {
+	      var componentName = getComponentNameFromType(this.type);
+	      didWarnAboutElementRef[componentName] ||
+	        ((didWarnAboutElementRef[componentName] = true),
+	        console.error(
+	          "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+	        ));
+	      componentName = this.props.ref;
+	      return void 0 !== componentName ? componentName : null;
+	    }
+	    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+	      var refProp = props.ref;
+	      type = {
+	        $$typeof: REACT_ELEMENT_TYPE,
+	        type: type,
+	        key: key,
+	        props: props,
+	        _owner: owner
+	      };
+	      null !== (void 0 !== refProp ? refProp : null)
+	        ? Object.defineProperty(type, "ref", {
+	            enumerable: false,
+	            get: elementRefGetterWithDeprecationWarning
+	          })
+	        : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+	      type._store = {};
+	      Object.defineProperty(type._store, "validated", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: 0
+	      });
+	      Object.defineProperty(type, "_debugInfo", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: null
+	      });
+	      Object.defineProperty(type, "_debugStack", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugStack
+	      });
+	      Object.defineProperty(type, "_debugTask", {
+	        configurable: false,
+	        enumerable: false,
+	        writable: true,
+	        value: debugTask
+	      });
+	      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+	      return type;
+	    }
+	    function jsxDEVImpl(
+	      type,
+	      config,
+	      maybeKey,
+	      isStaticChildren,
+	      debugStack,
+	      debugTask
+	    ) {
+	      var children = config.children;
+	      if (void 0 !== children)
+	        if (isStaticChildren)
+	          if (isArrayImpl(children)) {
+	            for (
+	              isStaticChildren = 0;
+	              isStaticChildren < children.length;
+	              isStaticChildren++
+	            )
+	              validateChildKeys(children[isStaticChildren]);
+	            Object.freeze && Object.freeze(children);
+	          } else
+	            console.error(
+	              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+	            );
+	        else validateChildKeys(children);
+	      if (hasOwnProperty.call(config, "key")) {
+	        children = getComponentNameFromType(type);
+	        var keys = Object.keys(config).filter(function (k) {
+	          return "key" !== k;
+	        });
+	        isStaticChildren =
+	          0 < keys.length
+	            ? "{key: someKey, " + keys.join(": ..., ") + ": ...}"
+	            : "{key: someKey}";
+	        didWarnAboutKeySpread[children + isStaticChildren] ||
+	          ((keys =
+	            0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}"),
+	          console.error(
+	            'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+	            isStaticChildren,
+	            children,
+	            keys,
+	            children
+	          ),
+	          (didWarnAboutKeySpread[children + isStaticChildren] = true));
+	      }
+	      children = null;
+	      void 0 !== maybeKey &&
+	        (checkKeyStringCoercion(maybeKey), (children = "" + maybeKey));
+	      hasValidKey(config) &&
+	        (checkKeyStringCoercion(config.key), (children = "" + config.key));
+	      if ("key" in config) {
+	        maybeKey = {};
+	        for (var propName in config)
+	          "key" !== propName && (maybeKey[propName] = config[propName]);
+	      } else maybeKey = config;
+	      children &&
+	        defineKeyPropWarningGetter(
+	          maybeKey,
+	          "function" === typeof type
+	            ? type.displayName || type.name || "Unknown"
+	            : type
+	        );
+	      return ReactElement(
+	        type,
+	        children,
+	        maybeKey,
+	        getOwner(),
+	        debugStack,
+	        debugTask
+	      );
+	    }
+	    function validateChildKeys(node) {
+	      isValidElement(node)
+	        ? node._store && (node._store.validated = 1)
+	        : "object" === typeof node &&
+	          null !== node &&
+	          node.$$typeof === REACT_LAZY_TYPE &&
+	          ("fulfilled" === node._payload.status
+	            ? isValidElement(node._payload.value) &&
+	              node._payload.value._store &&
+	              (node._payload.value._store.validated = 1)
+	            : node._store && (node._store.validated = 1));
+	    }
+	    function isValidElement(object) {
+	      return (
+	        "object" === typeof object &&
+	        null !== object &&
+	        object.$$typeof === REACT_ELEMENT_TYPE
+	      );
+	    }
+	    var React = require$$0,
+	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
+	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
+	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
+	      REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"),
+	      REACT_PROFILER_TYPE = Symbol.for("react.profiler"),
+	      REACT_CONSUMER_TYPE = Symbol.for("react.consumer"),
+	      REACT_CONTEXT_TYPE = Symbol.for("react.context"),
+	      REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"),
+	      REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"),
+	      REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"),
+	      REACT_MEMO_TYPE = Symbol.for("react.memo"),
+	      REACT_LAZY_TYPE = Symbol.for("react.lazy"),
+	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
+	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
+	      ReactSharedInternals =
+	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	      hasOwnProperty = Object.prototype.hasOwnProperty,
+	      isArrayImpl = Array.isArray,
+	      createTask = console.createTask
+	        ? console.createTask
+	        : function () {
+	            return null;
+	          };
+	    React = {
+	      react_stack_bottom_frame: function (callStackForError) {
+	        return callStackForError();
+	      }
+	    };
+	    var specialPropKeyWarningShown;
+	    var didWarnAboutElementRef = {};
+	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+	      React,
+	      UnknownOwner
+	    )();
+	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+	    var didWarnAboutKeySpread = {};
+	    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+	    reactJsxRuntime_development.jsx = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        false,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	    reactJsxRuntime_development.jsxs = function (type, config, maybeKey) {
+	      var trackActualOwner =
+	        1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+	      return jsxDEVImpl(
+	        type,
+	        config,
+	        maybeKey,
+	        true,
+	        trackActualOwner
+	          ? Error("react-stack-top-frame")
+	          : unknownOwnerDebugStack,
+	        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+	      );
+	    };
+	  })();
+	return reactJsxRuntime_development;
+}
+
+var hasRequiredJsxRuntime;
+
+function requireJsxRuntime () {
+	if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+	hasRequiredJsxRuntime = 1;
+
+	if (process.env.NODE_ENV === 'production') {
+	  jsxRuntime.exports = requireReactJsxRuntime_production();
+	} else {
+	  jsxRuntime.exports = requireReactJsxRuntime_development();
+	}
+	return jsxRuntime.exports;
+}
+
+var jsxRuntimeExports = requireJsxRuntime();
+
+const BrookProvider = ({
+  children,
+  apiKey
+}) => {
+  const config = {
+    apiKey: apiKey || "apiKey",
+    // todo: remove these on prod
+    verbose: true,
+    host: "ws://localhost:8787"
+  };
+  const [client, setClient] = useState(new Brook(config));
+  useEffect(() => {
+    client.cleanup();
+    if (apiKey) {
+      const brook = new Brook(config);
+      setClient(brook);
+      return () => {
+        brook.cleanup();
+      };
+    }
+  }, [apiKey]);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(BrookProvider$1, {
+    config: client,
+    children: children
+  });
+};
+
+const HQProviderContext = /*#__PURE__*/createContext({});
+function HQProvider({
+  children,
+  apiKey
+}) {
+  const [project, setProject] = useState(null);
+  const [context, setContext] = useState(client.getContext());
+  useEffect(() => {
+    client.init({
+      apiKey
+    }).then(p => setProject(p));
+  }, [apiKey]);
+  useEffect(() => {
+    const unsubscribe = client.subscribeToContext(nextContext => {
+      setContext(nextContext);
+    });
+    return unsubscribe;
+  }, []);
+  return /*#__PURE__*/jsxRuntimeExports.jsx(HQProviderContext.Provider, {
+    value: {
+      project,
+      context
+    },
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(BrookProvider, {
+      apiKey: project?.apiKey,
+      children: children
+    })
+  });
+}
+
+function useOnMount(callback) {
+  const ref = useRef({
+    called: false,
+    mounted: false
+  });
+  if (ref.current.called || ref.current.mounted) return;
+  if (ref.current.called === false && ref.current.mounted === false) {
+    callback();
+    ref.current.called = true;
+  }
+  if (ref.current.mounted === false) ref.current.mounted = true;
+}
+
+function startConversation(apiKey, payload) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: payload
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+function useHQ() {
+  const ctx = useContext(HQProviderContext);
+  return ctx;
+}
+
+function useProject() {
+  const hq = useHQ();
+  return hq.project;
+}
+
+const useConversation$1 = () => {
+  const project = useProject();
+  const [conversation, setConversation] = useState(null);
+  useOnMount(() => {
+    const cache = localStorage.getItem("conversation");
+    if (cache) setConversation(JSON.parse(cache));
+  });
+  const start = useCallback(async function start(values) {
+    const response = await startConversation(project.apiKey, values);
+
+    // attach initial message to the conversation, to use later when useMessage is ready to send the initial message
+    response.initialMessage = values?.message;
+    if (response) {
+      setConversation(response);
+      localStorage.setItem("conversation", JSON.stringify({
+        id: response.id,
+        context: {
+          id: response?.context?.id
+        }
+      }));
+    }
+  }, [project]);
+  const close = useCallback(() => {
+    // todo: update status in BE
+    setConversation(null);
+    localStorage.removeItem("conversation");
+  }, [project]);
+  return {
+    start,
+    data: conversation,
+    close
+  };
+};
+
+function getMessages(apiKey, conversationsId) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations/messages?conversationsId=${conversationsId}`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      }
+    }).then(res => res.json()).then(res => resolve(res || [])).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve([]);
+    });
+  });
+}
+
+function sendMessage({
+  message,
+  conversationId,
+  senderId,
+  senderName
+}) {
+  return new Promise(resolve => {
+    const project = client.getProject();
+    if (!project.apiKey) return null;
+    fetch(`https://connect.aptly.cloud/hq/conversations/message`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": project.apiKey
+      },
+      method: "POST",
+      body: JSON.stringify({
+        message,
+        conversationId,
+        senderId,
+        senderName
+      })
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+function generateRandomString(length) {
+  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+  let result = '';
+  const randomArray = new Uint8Array(length);
+  crypto.getRandomValues(randomArray);
+  randomArray.forEach(number => {
+    result += chars[number % chars.length];
+  });
+  return result;
+}
+
+function useMessages(conversation) {
+  const conversationId = conversation?.id;
+  const lookupRef = useRef({});
+  const initialMessageLookUpRef = useRef(new Set()); // set of conversation ids that already sent initial message
+
+  const project = useProject();
+  const [messages, setMessages] = useState([]);
+  const getAll = useCallback(() => {
+    if (!conversationId) return;
+    return new Promise(resolve => {
+      lookupRef.current[conversationId] = new Set();
+      handleGetMessages(project?.apiKey, conversationId) //
+      .then(m => {
+        setMessages(m);
+        lookupRef.current[conversationId].add(m.id);
+        resolve(m);
+      }).finally(resolve);
+    });
+  }, [conversationId]);
+  useEffect(() => {
+    if (conversationId) {
+      // get all message
+      getAll().then(() => {
+        if (!initialMessageLookUpRef.current.has(conversation.id)) {
+          if (conversation.initialMessage) {
+            handleSend(conversation.initialMessage).then(() => {
+              initialMessageLookUpRef.current.add(conversation.id);
+            });
+          }
+        }
+      });
+    }
+  }, [conversationId]);
+  useStream(`messages.${conversationId}`, incoming => {
+    if (!lookupRef.current[conversationId].has(incoming.id)) {
+      if (incoming.sender_id !== conversation.context.id) {
+        setMessages(m => [...m, incoming]);
+        lookupRef.current[conversationId].add(incoming.id);
+      }
+    }
+  });
+  async function handleSend(message) {
+    if (!message) return;
+    const temporaryId = generateRandomString(12);
+    let messageData = {
+      _id: temporaryId,
+      message,
+      conversation_id: conversation?.id,
+      sender_id: conversation?.context?.id,
+      status: "pending",
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      sender_name: conversation?.context?.name
+    };
+    setMessages(m => [...m, messageData]);
+    const response = await sendMessage({
+      message,
+      conversationId,
+      senderId: conversation?.context?.id,
+      senderName: conversation?.context?.name
+    });
+    if (response.id) {
+      const newMessage = {
+        ...messageData
+      };
+      newMessage.id = response.id;
+      newMessage.status = response.status;
+      newMessage.updated_at = response.updated_at;
+      newMessage.sender_name = response.sender_name;
+      setMessages(prev => [...prev].map(m => {
+        if (m._id === temporaryId) {
+          return newMessage;
+        }
+        return m;
+      }));
+      lookupRef.current[conversationId].add(response.id);
+    }
+  }
+  return {
+    data: messages,
+    messages,
+    send: handleSend
+  };
+}
+async function handleGetMessages(apiKey, conversationsId) {
+  const messages = await getMessages(apiKey, conversationsId);
+  return messages;
+}
+
+function Wrapper(props) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx(HQProvider, {
+    apiKey: props.apiKey,
+    children: /*#__PURE__*/jsxRuntimeExports.jsx(HQWidget, {
+      ...props
+    })
+  });
+}
+function HQWidget({
+  className,
+  position,
+  children,
+  ClosedIcon,
+  OpenedIcon
+}) {
+  const project = useProject();
+  const valuesRef = useRef({});
+  const [values, setValues] = useState({});
+  const conversation = useConversation$1();
+  const message = useMessages(conversation.data);
+  const [isOpened, setIsOpened] = useState(false);
+  const [showCloseConfirmation, setShowCloseConfirmation] = useState(false);
+  const handleOnChange = useCallback((event, field) => {
+    const incomingValue = event.target?.value;
+    setValues(prev => ({
+      ...prev,
+      [field?.name]: incomingValue
+    }));
+    valuesRef.current[field?.name] = incomingValue;
+  }, []);
+  const handleStartConversation = useCallback(async event => {
+    event?.preventDefault();
+    const messageInput = document.getElementById("startMessageInputEl");
+    const messageValue = messageInput?.value;
+    valuesRef.current.message = messageValue;
+    await conversation.start(valuesRef.current);
+    setValues({});
+    valuesRef.current = {};
+    messageInput.value = "";
+  }, [project]);
+  async function handleSendMessage(messageString) {
+    const input = document.getElementById("messageInputEl");
+    let messageValue = input.value;
+    if (typeof messageString === "string") messageValue = messageString;
+    input.disable = true;
+    await message.send(messageValue);
+    input.disable = false;
+    input.value = "";
+  }
+  function handleClickClose() {
+    setShowCloseConfirmation(true);
+  }
+  const fields = project?.metadata?.fields || [];
+  const WidgetIcon = useMemo(() => {
+    let icon = () => null;
+    if (isOpened) icon = OpenedIcon || DefaultOpenedIcon;else icon = ClosedIcon || DefaultClosedIcon;
+    return icon;
+  }, [isOpened, ClosedIcon, OpenedIcon]);
+  return /*#__PURE__*/jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
+    children: [children, project && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      className: `aptly-hq-widget ${className || ""}`,
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx(Activity, {
+        mode: isOpened ? "visible" : "hidden",
+        children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+          className: "shadow widget-container",
+          children: [/*#__PURE__*/jsxRuntimeExports.jsxs(Activity, {
+            mode: !conversation.data ? "visible" : "hidden",
+            children: [/*#__PURE__*/jsxRuntimeExports.jsx(Header, {
+              onClose: () => setIsOpened(p => !p)
+            }), /*#__PURE__*/jsxRuntimeExports.jsxs("section", {
+              className: "widget-form-container",
+              children: [/*#__PURE__*/jsxRuntimeExports.jsxs("form", {
+                id: "widgetForm",
+                className: "widget-form",
+                onSubmit: handleStartConversation,
+                children: [fields?.map(field => /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                  children: [/*#__PURE__*/jsxRuntimeExports.jsx("label", {
+                    children: field.label
+                  }), /*#__PURE__*/jsxRuntimeExports.jsx("input", {
+                    required: field?.required,
+                    type: field.type,
+                    placeholder: field?.placeholder,
+                    value: values?.[field.name] || "",
+                    onChange: e => handleOnChange(e, field)
+                  })]
+                }, `field-${field.name}`)), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                  className: "flex flex-col",
+                  children: [/*#__PURE__*/jsxRuntimeExports.jsx("label", {
+                    children: "Message"
+                  }), /*#__PURE__*/jsxRuntimeExports.jsx("textarea", {
+                    maxLength: 1000,
+                    rows: 4,
+                    id: "startMessageInputEl",
+                    required: true,
+                    placeholder: project?.metadata?.settings?.messagePlaceholder
+                  })]
+                })]
+              }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                form: "widgetForm",
+                className: "widget-start-button",
+                type: "submit",
+                children: project?.metadata?.settings?.startLabel || "Start"
+              })]
+            })]
+          }), /*#__PURE__*/jsxRuntimeExports.jsx(Activity, {
+            mode: !!conversation.data ? "visible" : "hidden",
+            children: /*#__PURE__*/jsxRuntimeExports.jsxs("section", {
+              className: "widget-message-area-container",
+              children: [/*#__PURE__*/jsxRuntimeExports.jsx(Header, {
+                onClose: () => setIsOpened(p => !p)
+              }), /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+                className: "widget-message-area",
+                children: message.messages?.map(m => {
+                  const pendingStyle = {
+                    opacity: m.status === "pending" ? 0.5 : 1
+                  };
+                  return /*#__PURE__*/jsxRuntimeExports.jsx(Message, {
+                    style: pendingStyle,
+                    isOwnersMessage: m.sender_id === conversation?.data?.context?.id,
+                    children: m.message
+                  }, m._id || m.id);
+                })
+              }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                className: "widget-message-area-action",
+                children: [/*#__PURE__*/jsxRuntimeExports.jsx("textarea", {
+                  id: "messageInputEl",
+                  className: "field-sizing-content",
+                  placeholder: project?.metadata?.settings?.messagePlaceholder
+                }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                  onClick: handleSendMessage,
+                  children: /*#__PURE__*/jsxRuntimeExports.jsx(SendIcon, {})
+                })]
+              }), /*#__PURE__*/jsxRuntimeExports.jsxs("footer", {
+                className: "widget-footer",
+                children: [!showCloseConfirmation && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                  onClick: handleClickClose,
+                  children: project?.metadata?.settings?.closeLabel || "Close"
+                }), showCloseConfirmation && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+                  children: ["Are you sure?", " ", /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                    onClick: () => {
+                      conversation.close();
+                      setShowCloseConfirmation(false);
+                    },
+                    children: /*#__PURE__*/jsxRuntimeExports.jsx("code", {
+                      children: "Yes (Y)"
+                    })
+                  }), /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+                    className: "inline-block px-2",
+                    children: "|"
+                  }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+                    onClick: () => setShowCloseConfirmation(false),
+                    children: /*#__PURE__*/jsxRuntimeExports.jsx("code", {
+                      children: "No (N)"
+                    })
+                  })]
+                })]
+              })]
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+        onClick: () => setIsOpened(p => !p),
+        children: /*#__PURE__*/jsxRuntimeExports.jsx(WidgetIcon, {})
+      })]
+    })]
+  });
+}
+function Message({
+  children,
+  style = {},
+  isOwnersMessage
+}) {
+  return /*#__PURE__*/jsxRuntimeExports.jsx("li", {
+    style: style,
+    className: `widget-message ${isOwnersMessage ? "widget-owner-message" : "widget-agent-message"}`.trim(),
+    children: /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+      children: children
+    })
+  });
+}
+function Header({
+  onClose
+}) {
+  const project = useProject();
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("header", {
+    className: "widget-header",
+    children: [/*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
+        children: /*#__PURE__*/jsxRuntimeExports.jsx("strong", {
+          children: project.name
+        })
+      }), /*#__PURE__*/jsxRuntimeExports.jsx("small", {
+        children: project.description || "-"
+      })]
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("button", {
+      onClick: onClose,
+      children: /*#__PURE__*/jsxRuntimeExports.jsx(CloseIcon, {})
+    })]
+  });
+}
+function DefaultClosedIcon() {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("span", {
+    className: "default-closed-icon",
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("svg", {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 240 240",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+        d: "M240.808 240.808H122.123C56.6994 240.808 3.45695 187.562 3.45695 122.122C3.45695 56.7031 56.6994 3.45697 122.124 3.45697C187.566 3.45697 240.808 56.7031 240.808 122.122V240.808Z",
+        fill: "#fff"
+      })
+    }), "Chat with us"]
+  });
+}
+function DefaultOpenedIcon() {
+  return /*#__PURE__*/jsxRuntimeExports.jsx("span", {
+    className: "default-opened-icon",
+    children: /*#__PURE__*/jsxRuntimeExports.jsx("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1.5em",
+      height: "1.5em",
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      focusable: "false",
+      "aria-label": "close",
+      "data-category": "application",
+      style: {
+        fontSize: "1em",
+        color: "#fff"
+      },
+      children: /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+        d: "m2.784 2.089.069.058 5.146 5.147 5.146-5.147a.5.5 0 0 1 .765.638l-.058.069L8.705 8l5.147 5.146a.5.5 0 0 1-.638.765l-.069-.058-5.146-5.147-5.146 5.147a.5.5 0 0 1-.765-.638l.058-.069L7.293 8 2.146 2.854a.5.5 0 0 1 .638-.765"
+      })
+    })
+  });
+}
+function CloseIcon() {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M18 6l-12 12"
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M6 6l12 12"
+    })]
+  });
+}
+function SendIcon() {
+  return /*#__PURE__*/jsxRuntimeExports.jsxs("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [/*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M4.698 4.034l16.302 7.966l-16.302 7.966a.503 .503 0 0 1 -.546 -.124a.555 .555 0 0 1 -.12 -.568l2.468 -7.274l-2.468 -7.274a.555 .555 0 0 1 .12 -.568a.503 .503 0 0 1 .546 -.124z"
+    }), /*#__PURE__*/jsxRuntimeExports.jsx("path", {
+      d: "M6.5 12h14.5"
+    })]
+  });
+}
+
+function setContext$1(apiKey, payload) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations/context`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify(payload)
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+async function setContext(payload) {
+  const project = client.getProject();
+  if (!project?.apiKey) return null;
+  const response = await setContext$1(project.apiKey, payload);
+  if (response) client.setContext(response);
+  return response;
+}
+
+function getConversations(apiKey) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      }
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+function useConversations(_filters = {}) {
+  const project = useProject();
+  const {
+    context
+  } = useHQ();
+  const [conversations, setConversations] = useState([]);
+  const refresh = useCallback(() => {
+    if (!project?.apiKey) return null;
+    if (!context) return null;
+    return getConversations(project.apiKey).then(res => {
+      if (Array.isArray(res)) setConversations(res);
+      return res;
+    });
+  }, [project?.apiKey, context]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    conversations,
+    data: conversations,
+    refresh
+  };
+}
+
+function getConversation(apiKey, conversationsId) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations?conversationsId=${conversationsId}`, {
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      }
+    }).then(res => res.json()).then(res => {
+      if (Array.isArray(res)) {
+        resolve(res[0] || null);
+        return;
+      }
+      resolve(res);
+    }).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+function updateConversation(apiKey, payload) {
+  return new Promise(resolve => {
+    fetch(`https://connect.aptly.cloud/hq/conversations`, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify(payload)
+    }).then(res => res.json()).then(res => resolve(res)).catch(e => {
+      console.log("Error fetching data.", e);
+      resolve(null);
+    });
+  });
+}
+
+function useConversation(conversationId) {
+  const project = useProject();
+  const {
+    context
+  } = useHQ();
+  const [messages, setMessages] = useState([]);
+  const [conversation, setConversation] = useState(null);
+  const refresh = useCallback(() => {
+    if (!project?.apiKey) return null;
+    if (!context) return null;
+    if (!conversationId) return null;
+    return Promise.all([getConversation(project.apiKey, conversationId), getMessages(project.apiKey, conversationId)]).then(([conversationRes, messagesRes]) => {
+      if (conversationRes) setConversation(conversationRes);
+      if (Array.isArray(messagesRes)) setMessages(messagesRes);
+      return {
+        conversation: conversationRes,
+        messages: messagesRes
+      };
+    });
+  }, [project?.apiKey, context, conversationId]);
+  const send = useCallback(message => {
+    if (!project?.apiKey) return null;
+    if (!context) return null;
+    if (!conversationId) return null;
+    if (!message) return null;
+    return sendMessage({
+      message,
+      conversationId,
+      senderId: context.id,
+      senderName: context.name
+    }).then(res => {
+      refresh();
+      return res;
+    });
+  }, [project?.apiKey, context, conversationId, refresh]);
+  const updateConversation$1 = useCallback((payload = {}) => {
+    if (!project?.apiKey) return null;
+    if (!context) return null;
+    if (!conversationId) return null;
+    const {
+      status,
+      ...rest
+    } = payload || {};
+    let metadata = undefined;
+    if (Object.keys(rest).length > 0) {
+      metadata = {
+        ...rest
+      };
+    }
+    const body = {
+      conversationId,
+      status,
+      metadata
+    };
+    return updateConversation(project.apiKey, body).then(res => {
+      if (res) setConversation(res);
+      refresh();
+      return res;
+    });
+  }, [project?.apiKey, context, conversationId, refresh]);
+  const closeConversation = useCallback(() => {
+    return updateConversation$1({
+      status: "closed"
+    });
+  }, [updateConversation$1]);
+  useEffect(() => {
+    refresh();
+  }, [refresh]);
+  return {
+    conversation,
+    messages,
+    data: messages,
+    sendMessage: send,
+    send,
+    updateConversation: updateConversation$1,
+    closeConversation,
+    refresh
+  };
+}
+
+export { HQProvider, Wrapper as HQWidget, setContext, useConversation, useConversations };