mongodb-chatbot-ui
Version:
UI React components for the MongoDB Chatbot Framework
375 lines (363 loc) • 13.1 kB
JavaScript
import f, { forwardRef as Sn } from "react";
import { k as D, F as e, T as jn, m as l, v as w, b as En, z as Mn, a2 as B, ab as Nn, ah as zn, d as S, n as E, ag as Gn, Q as u, U as Dn } from "./index2.js";
import { t as Cn } from "./index4.js";
import { _ as Un } from "./index10.js";
function N(n, r, o) {
return (r = function(a) {
var i = function(t, c) {
if (typeof t != "object" || !t)
return t;
var b = t[Symbol.toPrimitive];
if (b !== void 0) {
var s = b.call(t, c);
if (typeof s != "object")
return s;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(t);
}(a, "string");
return typeof i == "symbol" ? i : i + "";
}(r)) in n ? Object.defineProperty(n, r, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : n[r] = o, n;
}
function z() {
return z = Object.assign ? Object.assign.bind() : function(n) {
for (var r = 1; r < arguments.length; r++) {
var o = arguments[r];
for (var a in o)
({}).hasOwnProperty.call(o, a) && (n[a] = o[a]);
}
return n;
}, z.apply(null, arguments);
}
function j(n, r) {
return r || (r = n.slice(0)), Object.freeze(Object.defineProperties(n, { raw: { value: Object.freeze(r) } }));
}
var T, _, A, R, W, F = "0 4px 10px -4px ".concat(D(0.7, e.black)), I = "0 4px 20px -4px ".concat(D(0.8, e.black)), Q = jn.light.default, V = "0 4px 20px -4px #01121A", H = "0 4px 20px -4px ".concat(D(0.3, "#000000")), Z = jn.dark.default, q = N(N({}, w.Light, { containerStyle: l(T || (T = j([`
border: 1px solid `, `;
box-shadow: `, `;
background-color: `, `;
color: `, `;
`])), e.gray.light2, F, e.white, e.gray.dark3), clickableStyle: l(_ || (_ = j([`
cursor: pointer;
&:focus {
outline: none;
box-shadow: `, ", ", `;
}
&:hover,
&:active {
border: 1px solid `, `;
box-shadow: `, `;
&:focus {
box-shadow: `, ", ", `;
}
}
`])), Q, F, e.gray.light2, I, Q, I) }), w.Dark, { containerStyle: l(A || (A = j([`
border: 1px solid `, `;
box-shadow: `, `;
background-color: `, `;
color: `, `;
`])), e.gray.dark2, V, e.black, e.white), clickableStyle: l(R || (R = j([`
cursor: pointer;
&:focus {
outline: none;
box-shadow: `, ", ", `;
}
&:hover {
box-shadow: `, `;
&:focus {
box-shadow: `, ", ", `;
}
}
`])), V, Z, H, H, Z) }), Bn = l(W || (W = j([`
position: relative;
transition: `, `ms ease-in-out;
transition-property: border, box-shadow;
border-radius: 24px;
font-family: `, `;
font-size: `, `px;
line-height: `, `px;
padding: 24px;
min-height: 68px; // 48px + 20px (padding + line-height)
`])), En.default, Mn.default, B.body1.fontSize, B.body1.lineHeight), J = { None: "none", Clickable: "clickable" }, Tn = ["as", "className", "contentStyle", "darkMode"], Pn = Nn(function(n, r) {
var o = n.as, a = o === void 0 ? "div" : o, i = n.className, t = n.contentStyle, c = n.darkMode, b = function(h, y) {
if (h == null)
return {};
var k, v, P = function(m, L) {
if (m == null)
return {};
var $ = {};
for (var x in m)
if ({}.hasOwnProperty.call(m, x)) {
if (L.indexOf(x) !== -1)
continue;
$[x] = m[x];
}
return $;
}(h, y);
if (Object.getOwnPropertySymbols) {
var O = Object.getOwnPropertySymbols(h);
for (v = 0; v < O.length; v++)
k = O[v], y.indexOf(k) === -1 && {}.propertyIsEnumerable.call(h, k) && (P[k] = h[k]);
}
return P;
}(n, Tn), s = zn(a, b, "div").Component;
t === void 0 && ("onClick" in b && b.onClick !== void 0 || "href" in b && b.href) && (t = J.Clickable);
var p = S(c).theme;
return f.createElement(s, z({ ref: r, className: E(Bn, q[p].containerStyle, N({}, q[p].clickableStyle, t === J.Clickable), i) }, b));
});
Pn.displayName = "Card";
function d(n, r, o) {
return (r = function(a) {
var i = function(t, c) {
if (typeof t != "object" || !t)
return t;
var b = t[Symbol.toPrimitive];
if (b !== void 0) {
var s = b.call(t, c);
if (typeof s != "object")
return s;
throw new TypeError("@@toPrimitive must return a primitive value.");
}
return String(t);
}(a, "string");
return typeof i == "symbol" ? i : i + "";
}(r)) in n ? Object.defineProperty(n, r, { value: o, enumerable: !0, configurable: !0, writable: !0 }) : n[r] = o, n;
}
function C() {
return C = Object.assign ? Object.assign.bind() : function(n) {
for (var r = 1; r < arguments.length; r++) {
var o = arguments[r];
for (var a in o)
({}).hasOwnProperty.call(o, a) && (n[a] = o[a]);
}
return n;
}, C.apply(null, arguments);
}
function K(n, r) {
var o = Object.keys(n);
if (Object.getOwnPropertySymbols) {
var a = Object.getOwnPropertySymbols(n);
r && (a = a.filter(function(i) {
return Object.getOwnPropertyDescriptor(n, i).enumerable;
})), o.push.apply(o, a);
}
return o;
}
function M(n) {
for (var r = 1; r < arguments.length; r++) {
var o = arguments[r] != null ? arguments[r] : {};
r % 2 ? K(Object(o), !0).forEach(function(a) {
d(n, a, o[a]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(n, Object.getOwnPropertyDescriptors(o)) : K(Object(o)).forEach(function(a) {
Object.defineProperty(n, a, Object.getOwnPropertyDescriptor(o, a));
});
}
return n;
}
function G(n, r) {
if (n == null)
return {};
var o, a, i = function(c, b) {
if (c == null)
return {};
var s = {};
for (var p in c)
if ({}.hasOwnProperty.call(c, p)) {
if (b.indexOf(p) !== -1)
continue;
s[p] = c[p];
}
return s;
}(n, r);
if (Object.getOwnPropertySymbols) {
var t = Object.getOwnPropertySymbols(n);
for (a = 0; a < t.length; a++)
o = t[a], r.indexOf(o) === -1 && {}.propertyIsEnumerable.call(n, o) && (i[o] = n[o]);
}
return i;
}
function g(n, r) {
return r || (r = n.slice(0)), Object.freeze(Object.defineProperties(n, { raw: { value: Object.freeze(r) } }));
}
var X, Y, nn, en, rn, on, an, tn, ln, cn, dn, gn, bn, pn, un, sn, fn, hn, U = Gn("lg-chat-rich-link"), _n = l(X || (X = g([`
box-shadow: none;
padding: `, `px;
border-radius: `, `px;
text-decoration: none;
min-height: `, `px;
min-width: 100px;
& .`, ` {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
`])), u[200], u[200], u[900], U), An = d(d({}, w.Dark, l(Y || (Y = g([`
background-color: `, `;
&:hover {
box-shadow: 0 0 0 3px `, `;
}
`])), e.gray.dark4, e.gray.dark2)), w.Light, l(nn || (nn = g([`
background-color: `, `;
&:hover {
box-shadow: 0 0 0 3px `, `;
}
`])), e.gray.light3, e.gray.light2)), Rn = l(en || (en = g([`
// Extra padding to make room for the absolutely positioned badge
// We have to account for the badge as well as "fake padding" from the "bottom" and "left" attributes.
// 1. "fake padding" below the badge (spacing[200])
// 2. badge height (18)
// 3. "fake padding" on top of the badge (spacing[200])
padding-bottom: calc(`, "px + 18px + ", `px);
`])), u[200], u[200]), Wn = function(n) {
return l(rn || (rn = g([`
background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)),
url(`, `);
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
border-radius: `, `px;
min-height: `, `px;
& .`, ` {
color: `, `;
}
`])), n, u[200], u[900], U, e.white);
}, yn = "gray", kn = "blue", vn = "green", mn = "purple", xn = "red", wn = "yellow", Fn = l(on || (on = g([`
display: inline-flex;
gap: `, `px;
align-items: center;
border-radius: `, `px;
padding: 0px `, `px;
position: absolute;
bottom: `, `px;
left: `, `px;
`])), u[150], u[100], u[150], u[200], u[200]), In = d(d({}, w.Dark, d(d(d(d(d(d({}, yn, l(an || (an = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.gray.dark1, e.gray.light3, e.gray.light3)), kn, l(tn || (tn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.blue.dark3, e.blue.light2, e.blue.light2)), vn, l(ln || (ln = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.green.dark3, e.green.light2, e.green.light2)), xn, l(cn || (cn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.red.dark3, e.red.light2, e.red.light2)), mn, l(dn || (dn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.purple.dark3, e.purple.light2, e.purple.light2)), wn, l(gn || (gn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.yellow.dark3, e.yellow.light2, e.yellow.light2))), w.Light, d(d(d(d(d(d({}, yn, l(bn || (bn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.gray.light2, e.gray.dark1, e.black)), kn, l(pn || (pn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.blue.light3, e.blue.dark2, e.blue.dark1)), vn, l(un || (un = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.green.light3, e.green.dark2, e.green.dark3)), xn, l(sn || (sn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.red.light3, e.red.dark2, e.red.dark3)), mn, l(fn || (fn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.purple.light3, e.purple.dark2, e.purple.dark3)), wn, l(hn || (hn = g([`
background-color: `, `;
& svg {
color: `, `;
}
& p {
color: `, `;
}
`])), e.yellow.light3, e.yellow.dark2, e.yellow.dark3))), Qn = function(n) {
var r = n.darkMode, o = n.glyph, a = n.color, i = a === void 0 ? "gray" : a, t = n.label, c = S(r).theme;
return f.createElement("div", { className: E(Fn, In[c][i]) }, o ? f.createElement(Un, { glyph: o }) : null, f.createElement(Cn, null, t));
}, Ln = { Article: { badgeColor: "green", badgeLabel: "Article", badgeGlyph: "Note" }, Blog: { badgeColor: "green", badgeLabel: "Blog", badgeGlyph: "SMS" }, Book: { badgeColor: "yellow", badgeLabel: "Book", badgeGlyph: "University" }, Code: { badgeColor: "gray", badgeLabel: "Code", badgeGlyph: "CodeBlock" }, Docs: { badgeColor: "blue", badgeLabel: "Docs", badgeGlyph: "Note" }, Learn: { badgeColor: "red", badgeLabel: "Learn", badgeGlyph: "Cap" }, Video: { badgeColor: "red", badgeLabel: "Video", badgeGlyph: "Play" }, Website: { badgeColor: "purple", badgeLabel: "Website", badgeGlyph: "Laptop" } }, Vn = Object.keys(Ln);
function re(n) {
return Vn.includes(n);
}
var On, Hn = ["darkMode", "onLinkClick"], Zn = ["children", "imageUrl", "badgeGlyph", "badgeLabel", "badgeColor", "href"], $n = Sn(function(n, r) {
var o, a = n.darkMode, i = n.onLinkClick, t = G(n, Hn), c = S(a), b = c.darkMode, s = c.theme, p = M(M({ badgeGlyph: void 0, badgeLabel: void 0, badgeColor: void 0 }, "variant" in t && t.variant !== void 0 ? Ln[t.variant] : {}), t), h = p.children, y = p.imageUrl, k = p.badgeGlyph, v = p.badgeLabel, P = p.badgeColor, O = p.href, m = G(p, Zn), L = v !== void 0, $ = ((o = y == null ? void 0 : y.length) !== null && o !== void 0 ? o : -1) > 0, x = O ? M({ as: "a", href: O, ref: r, target: "_blank" }, m) : {};
return f.createElement(Pn, C({ darkMode: b, className: E(_n, An[s], d(d({}, Rn, L), Wn(y ?? ""), $)) }, x, { onClick: function() {
return i == null ? void 0 : i(t);
} }), f.createElement(Cn, { className: U, darkMode: b }, h), L ? f.createElement(Qn, { darkMode: b, color: P, label: v, glyph: k }) : null);
});
$n.displayName = "RichLink";
var qn = l(On || (On = g([`
display: grid;
gap: `, `px;
grid-template-columns: repeat(2, 1fr);
@container (min-width: 360px) {
grid-template-columns: repeat(3, 1fr);
}
`])), u[200]), Jn = ["links", "darkMode", "onLinkClick"];
function Kn(n) {
var r = n.links, o = n.darkMode, a = n.onLinkClick, i = G(n, Jn), t = S(o).darkMode;
return f.createElement(Dn, { darkMode: t }, f.createElement("div", C({ className: E(qn) }, i), r.map(function(c) {
return f.createElement($n, C({ key: c.href, onClick: function() {
return a == null ? void 0 : a(c);
} }, c));
})));
}
Kn.displayName = "RichLinksArea";
export {
re as $,
Kn as t
};