mongodb-chatbot-ui
Version:
UI React components for the MongoDB Chatbot Framework
394 lines (387 loc) • 14.2 kB
JavaScript
import { p as ae, j as y } from "./jsx-runtime.js";
import { f as ne, _ as te, s as B, b as oe, P as x, c as ie } from "./Transition.js";
import f, { createContext as le, forwardRef as Q, useContext as ce, useState as de, useRef as _ } from "react";
import { _ as pe, W as G, m, Q as b, F as u, b as H, j as A, T as $, v as C, d as J, n as K, $ as ue } from "./index2.js";
import { t as X } from "./index4.js";
import "react-dom";
import "./OpenNewTab.js";
function fe(s, a) {
return s.classList ? !!a && s.classList.contains(a) : (" " + (s.className.baseVal || s.className) + " ").indexOf(" " + a + " ") !== -1;
}
function me(s, a) {
s.classList ? s.classList.add(a) : fe(s, a) || (typeof s.className == "string" ? s.className = s.className + " " + a : s.setAttribute("class", (s.className && s.className.baseVal || "") + " " + a));
}
function T(s, a) {
return s.replace(new RegExp("(^|\\s)" + a + "(?:\\s|$)", "g"), "$1").replace(/\s+/g, " ").replace(/^\s*|\s*$/g, "");
}
function ve(s, a) {
s.classList ? s.classList.remove(a) : typeof s.className == "string" ? s.className = T(s.className, a) : s.setAttribute("class", T(s.className && s.className.baseVal || "", a));
}
var ge = function(a, i) {
return a && i && i.split(" ").forEach(function(e) {
return me(a, e);
});
}, S = function(a, i) {
return a && i && i.split(" ").forEach(function(e) {
return ve(a, e);
});
}, j = /* @__PURE__ */ function(s) {
pe(a, s);
function a() {
for (var e, l = arguments.length, o = new Array(l), c = 0; c < l; c++)
o[c] = arguments[c];
return e = s.call.apply(s, [this].concat(o)) || this, e.appliedClasses = {
appear: {},
enter: {},
exit: {}
}, e.onEnter = function(n, r) {
var t = e.resolveArguments(n, r), d = t[0], p = t[1];
e.removeClasses(d, "exit"), e.addClass(d, p ? "appear" : "enter", "base"), e.props.onEnter && e.props.onEnter(n, r);
}, e.onEntering = function(n, r) {
var t = e.resolveArguments(n, r), d = t[0], p = t[1], g = p ? "appear" : "enter";
e.addClass(d, g, "active"), e.props.onEntering && e.props.onEntering(n, r);
}, e.onEntered = function(n, r) {
var t = e.resolveArguments(n, r), d = t[0], p = t[1], g = p ? "appear" : "enter";
e.removeClasses(d, g), e.addClass(d, g, "done"), e.props.onEntered && e.props.onEntered(n, r);
}, e.onExit = function(n) {
var r = e.resolveArguments(n), t = r[0];
e.removeClasses(t, "appear"), e.removeClasses(t, "enter"), e.addClass(t, "exit", "base"), e.props.onExit && e.props.onExit(n);
}, e.onExiting = function(n) {
var r = e.resolveArguments(n), t = r[0];
e.addClass(t, "exit", "active"), e.props.onExiting && e.props.onExiting(n);
}, e.onExited = function(n) {
var r = e.resolveArguments(n), t = r[0];
e.removeClasses(t, "exit"), e.addClass(t, "exit", "done"), e.props.onExited && e.props.onExited(n);
}, e.resolveArguments = function(n, r) {
return e.props.nodeRef ? [e.props.nodeRef.current, n] : [n, r];
}, e.getClassNames = function(n) {
var r = e.props.classNames, t = typeof r == "string", d = t && r ? r + "-" : "", p = t ? "" + d + n : r[n], g = t ? p + "-active" : r[n + "Active"], E = t ? p + "-done" : r[n + "Done"];
return {
baseClassName: p,
activeClassName: g,
doneClassName: E
};
}, e;
}
var i = a.prototype;
return i.addClass = function(l, o, c) {
var n = this.getClassNames(o)[c + "ClassName"], r = this.getClassNames("enter"), t = r.doneClassName;
o === "appear" && c === "done" && t && (n += " " + t), c === "active" && l && ne(l), n && (this.appliedClasses[o][c] = n, ge(l, n));
}, i.removeClasses = function(l, o) {
var c = this.appliedClasses[o], n = c.base, r = c.active, t = c.done;
this.appliedClasses[o] = {}, n && S(l, n), r && S(l, r), t && S(l, t);
}, i.render = function() {
var l = this.props;
l.classNames;
var o = te(l, ["classNames"]);
return /* @__PURE__ */ f.createElement(B, G({}, o, {
onEnter: this.onEnter,
onEntered: this.onEntered,
onEntering: this.onEntering,
onExit: this.onExit,
onExiting: this.onExiting,
onExited: this.onExited
}));
}, a;
}(f.Component);
j.defaultProps = {
classNames: ""
};
j.propTypes = ae.env.NODE_ENV !== "production" ? G({}, B.propTypes, {
/**
* The animation classNames applied to the component as it appears, enters,
* exits or has finished the transition. A single name can be provided, which
* will be suffixed for each stage, e.g. `classNames="fade"` applies:
*
* - `fade-appear`, `fade-appear-active`, `fade-appear-done`
* - `fade-enter`, `fade-enter-active`, `fade-enter-done`
* - `fade-exit`, `fade-exit-active`, `fade-exit-done`
*
* A few details to note about how these classes are applied:
*
* 1. They are _joined_ with the ones that are already defined on the child
* component, so if you want to add some base styles, you can use
* `className` without worrying that it will be overridden.
*
* 2. If the transition component mounts with `in={false}`, no classes are
* applied yet. You might be expecting `*-exit-done`, but if you think
* about it, a component cannot finish exiting if it hasn't entered yet.
*
* 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This
* allows you to define different behavior for when appearing is done and
* when regular entering is done, using selectors like
* `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply
* an epic entrance animation when element first appears in the DOM using
* [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can
* simply use `fade-enter-done` for defining both cases.
*
* Each individual classNames can also be specified independently like:
*
* ```js
* classNames={{
* appear: 'my-appear',
* appearActive: 'my-active-appear',
* appearDone: 'my-done-appear',
* enter: 'my-enter',
* enterActive: 'my-active-enter',
* enterDone: 'my-done-enter',
* exit: 'my-exit',
* exitActive: 'my-active-exit',
* exitDone: 'my-done-exit',
* }}
* ```
*
* If you want to set these classes using CSS Modules:
*
* ```js
* import styles from './styles.css';
* ```
*
* you might want to use camelCase in your CSS file, that way could simply
* spread them instead of listing them one by one:
*
* ```js
* classNames={{ ...styles }}
* ```
*
* @type {string | {
* appear?: string,
* appearActive?: string,
* appearDone?: string,
* enter?: string,
* enterActive?: string,
* enterDone?: string,
* exit?: string,
* exitActive?: string,
* exitDone?: string,
* }}
*/
classNames: oe,
/**
* A `<Transition>` callback fired immediately after the 'enter' or 'appear' class is
* applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEnter: x.func,
/**
* A `<Transition>` callback fired immediately after the 'enter-active' or
* 'appear-active' class is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntering: x.func,
/**
* A `<Transition>` callback fired immediately after the 'enter' or
* 'appear' classes are **removed** and the `done` class is added to the DOM node.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed.
*
* @type Function(node: HtmlElement, isAppearing: bool)
*/
onEntered: x.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' class is
* applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExit: x.func,
/**
* A `<Transition>` callback fired immediately after the 'exit-active' is applied.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExiting: x.func,
/**
* A `<Transition>` callback fired immediately after the 'exit' classes
* are **removed** and the `exit-done` class is added to the DOM node.
*
* **Note**: when `nodeRef` prop is passed, `node` is not passed
*
* @type Function(node: HtmlElement)
*/
onExited: x.func
}) : {};
const he = j;
function h(s, a, i) {
return (a = function(e) {
var l = function(o, c) {
if (typeof o != "object" || !o)
return o;
var n = o[Symbol.toPrimitive];
if (n !== void 0) {
var r = n.call(o, c);
if (typeof r != "object")
return r;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(o);
}(e, "string");
return typeof l == "symbol" ? l : l + "";
}(a)) in s ? Object.defineProperty(s, a, { value: i, enumerable: !0, configurable: !0, writable: !0 }) : s[a] = i, s;
}
function w() {
return w = Object.assign ? Object.assign.bind() : function(s) {
for (var a = 1; a < arguments.length; a++) {
var i = arguments[a];
for (var e in i)
({}).hasOwnProperty.call(i, e) && (s[e] = i[e]);
}
return s;
}, w.apply(null, arguments);
}
function v(s, a) {
return a || (a = s.slice(0)), Object.freeze(Object.defineProperties(s, { raw: { value: Object.freeze(a) } }));
}
var L, M, R, I, D, V, Y = le({ hasSelectedPrompt: !1 });
function Z(s) {
var a = s.hasSelectedPrompt, i = s.children;
return f.createElement(Y.Provider, { value: { hasSelectedPrompt: a } }, i);
}
Z.displayName = "MessagePromptsProvider";
var z, F, U, W, xe = m(L || (L = v([`
display: block;
padding: `, "px ", `px;
margin-bottom: `, `px;
border: 1px solid `, `;
border-radius: 12px;
transition: all `, `ms ease;
box-shadow: none;
outline: none;
text-align: left;
&:not(:last-of-type) {
margin-bottom: `, `px;
}
&[aria-disabled='false'][aria-pressed='false'] {
cursor: pointer;
}
`])), b[2], b[3], b[2], u.green.dark1, H.slower, b[1]), be = h(h({}, C.Dark, m(M || (M = v([`
background: `, `;
color: `, `;
&[aria-pressed='false'][aria-disabled='false']:hover {
box-shadow: `, `;
}
&[aria-pressed='false'][aria-disabled='false']:focus-visible {
box-shadow: `, `;
}
`])), u.black, u.gray.light2, A.dark.green, $.dark.default)), C.Light, m(R || (R = v([`
background: `, `;
color: `, `;
&[aria-pressed='false'][aria-disabled='false']:hover {
box-shadow: `, `;
}
&[aria-pressed='false'][aria-disabled='false']:focus-visible {
box-shadow: `, `;
}
`])), u.white, u.gray.dark3, A.light.green, $.light.default)), Ce = h(h({}, C.Dark, m(I || (I = v([`
border-color: `, `;
color: `, `;
background: `, `;
`])), u.gray.dark1, u.gray.dark1, u.gray.dark3)), C.Light, m(D || (D = v([`
border-color: `, `;
color: `, `;
`])), u.gray.base, u.gray.base)), Ee = m(V || (V = v([`
box-shadow: 0 0 0 2px `, `;
`])), u.green.dark1), ee = Q(function(s, a) {
var i = s.children, e = s.onClick, l = s.disabled, o = s.selected, c = s.className, n = s.darkMode, r = ce(Y).hasSelectedPrompt, t = J(n).theme, d = l ?? (!o && r);
return f.createElement("button", { className: K(xe, be[t], h(h({}, Ce[t], d), Ee, o), c), onClick: d ? void 0 : e, "aria-disabled": !!d, "aria-pressed": !!o, tabIndex: o || d ? 0 : 1, ref: a }, f.createElement(X, { style: { color: "inherit" } }, i));
});
ee.displayName = "MessagePrompt";
var Ne = m(z || (z = v([`
margin-bottom: `, `px;
transition: opacity `, `ms ease-in;
`])), b[4], H.slower), Pe = m(F || (F = v([`
margin-bottom: `, `px;
`])), b[2]), ye = h(h({}, C.Dark, m(U || (U = v([`
color: `, `;
`])), u.gray.light1)), C.Light, m(W || (W = v([`
color: `, `;
`])), u.gray.dark1)), Se = ["children", "label", "darkMode"], se = Q(function(s, a) {
var i = s.children, e = s.label, l = s.darkMode, o = function(r, t) {
if (r == null)
return {};
var d, p, g = function(N, re) {
if (N == null)
return {};
var O = {};
for (var P in N)
if ({}.hasOwnProperty.call(N, P)) {
if (re.indexOf(P) !== -1)
continue;
O[P] = N[P];
}
return O;
}(r, t);
if (Object.getOwnPropertySymbols) {
var E = Object.getOwnPropertySymbols(r);
for (p = 0; p < E.length; p++)
d = E[p], t.indexOf(d) === -1 && {}.propertyIsEnumerable.call(r, d) && (g[d] = r[d]);
}
return g;
}(s, Se), c = J(l).theme, n = f.Children.toArray(i).some(function(r) {
return ue(r, "MessagePrompt") && r.props.selected;
});
return f.createElement(Z, { hasSelectedPrompt: n }, f.createElement("div", null, e && f.createElement(X, { className: K(Pe, ye[c]) }, e), f.createElement("div", w({ className: Ne, ref: a }, o), i)));
});
se.displayName = "MessagePrompts";
const k = 400, q = {
message_prompts: ie`
margin-left: 70px;
@media screen and (max-width: 804px) {
margin-left: 50px;
}
transition: opacity ${k}ms ease-in;
&-enter {
opacity: 0;
}
&-enter-active {
opacity: 1;
}
&-exit {
opacity: 1;
}
&-exit-active {
opacity: 0;
}
`
}, Te = ({
prompts: s,
onPromptClick: a,
canSubmit: i
}) => {
const [e, l] = de(void 0), o = _(null), c = _(!1), n = (r, t) => {
i(r) && (c.current || (c.current = !0, l(t), setTimeout(() => {
a(r);
}, k)));
};
return /* @__PURE__ */ y.jsx(
he,
{
in: e === void 0,
timeout: k,
nodeRef: o,
classNames: q.message_prompts,
children: /* @__PURE__ */ y.jsx("div", { className: q.message_prompts, ref: o, children: /* @__PURE__ */ y.jsx(se, { label: "Suggested Prompts", children: s.map((r, t) => /* @__PURE__ */ y.jsx(
ee,
{
onClick: () => n(r, t),
selected: t === e,
children: r
},
r
)) }) })
}
);
};
export {
Te as MessagePrompts
};