mongodb-chatbot-ui/build/es/Message.js

UI React components for the MongoDB Chatbot Framework

import { j as l } from "./jsx-runtime.js";
import { c as be } from "./Transition.js";
import p, { useContext as ve, lazy as ie, useState as C, Fragment as xe, Suspense as R } from "react";
import "./index16.js";
import { m as r, e as g, F as m, b as k, d as oe, j as we, o as se } from "./index2.js";
import "./index10.js";
import "./index4.js";
import { x as ye, D as z } from "./index14.js";
import { D as ke, r as je, M as Me } from "./MessageContent2.js";
import { a as Se, g as Oe } from "./messageLinks.js";
import { useChatbotContext as Ce } from "./useChatbotContext.js";
import { u as Ne } from "./useLinkData.js";
import "react-dom";
import "./has.js";
import "./index15.js";
import "./index5.js";
import "./index17.js";
import "./X.js";
import "./index9.js";
import "./index8.js";
import "./Warning.js";
import "./ChevronDown.js";
import "./index11.js";
import "./index18.js";
import "./index12.js";
import "./index7.js";
import "./index3.js";
import "./utils.js";
import "./ChatbotProvider.js";
import "./LinkDataProvider.js";
function Ee(e) {
  var n = function(t, i) {
    if (typeof t != "object" || !t)
      return t;
    var o = t[Symbol.toPrimitive];
    if (o !== void 0) {
      var s = o.call(t, i);
      if (typeof s != "object")
        return s;
      throw new TypeError("@@toPrimitive must return a primitive value.");
    }
    return String(t);
  }(e, "string");
  return typeof n == "symbol" ? n : n + "";
}
function f(e, n, t) {
  return (n = Ee(n)) in e ? Object.defineProperty(e, n, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[n] = t, e;
}
function j() {
  return j = Object.assign ? Object.assign.bind() : function(e) {
    for (var n = 1; n < arguments.length; n++) {
      var t = arguments[n];
      for (var i in t)
        Object.prototype.hasOwnProperty.call(t, i) && (e[i] = t[i]);
    }
    return e;
  }, j.apply(this, arguments);
}
function me(e, n) {
  if (e == null)
    return {};
  var t, i, o = function(d, c) {
    if (d == null)
      return {};
    var u, b, v = {}, w = Object.keys(d);
    for (b = 0; b < w.length; b++)
      u = w[b], c.indexOf(u) >= 0 || (v[u] = d[u]);
    return v;
  }(e, n);
  if (Object.getOwnPropertySymbols) {
    var s = Object.getOwnPropertySymbols(e);
    for (i = 0; i < s.length; i++)
      t = s[i], n.indexOf(t) >= 0 || Object.prototype.propertyIsEnumerable.call(e, t) && (o[t] = e[t]);
  }
  return o;
}
function a(e, n) {
  return n || (n = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(n) } }));
}
var P, L, $;
r(P || (P = a([`
  width: 100%;
`])));
var F, U;
r(L || (L = a([`
  width: 100%;
  display: grid;
  row-gap: `, `px;
  grid-template-columns: 75px 1fr 75px;
`])), g[3]);
r($ || ($ = a([`
  &:nth-child(even) {
    grid-column: 2 / -1;
  }

  &:nth-child(odd) {
    grid-column: 1 / span 2;
  }
`])));
r(F || (F = a([`
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: `, `px;
`])), g[3]);
r(U || (U = a([`
  grid-column-start: 1;
  grid-column-end: 3;
`])));
var V, B, D, H, T, W, _, I, h = { Small: "small", Default: "default", Large: "large" }, Ae = function(e) {
  var n = e.enableAnimations;
  return r(V || (V = a([`
  width: 100%;
  border-radius: `, `px;
  background-position: 50vw 0;

  `, `
`])), g[150], n && r(B || (B = a([`
    animation: SkeletonShimmer 1.5s infinite linear;

    @keyframes SkeletonShimmer {
      to {
        background-position: 100vw 0;
      }
    }
  `]))));
};
r(D || (D = a([`
  width: 100%;
  border-radius: 6px;
`])));
var Re = f(f(f({}, h.Small, r(H || (H = a([`
    height: `, `px;
  `])), g[400])), h.Default, r(T || (T = a([`
    height: `, `px;
  `])), g[800])), h.Large, r(W || (W = a([`
    height: `, `px;
  `])), g[1200])), ze = f(f({}, k.Dark, r(_ || (_ = a([`
    background: linear-gradient(
        110deg,
        `, ` 35%,
        `, `,
        `, ` 65%
      )
      0 0/ 100vw 100% fixed;
  `])), m.gray.dark2, m.gray.dark1, m.gray.dark2)), k.Light, r(I || (I = a([`
    background: linear-gradient(
        110deg,
        `, ` 35%,
        `, `,
        `, ` 65%
      )
      0 0/ 100vw 100% fixed;
  `])), m.gray.light2, m.gray.light3, m.gray.light2)), Pe = ["enableAnimations", "size", "darkMode", "className"];
function y(e) {
  var n = e.enableAnimations, t = n === void 0 || n, i = e.size, o = i === void 0 ? h.Default : i, s = e.darkMode, d = e.className, c = me(e, Pe), u = oe(s).theme;
  return p.createElement("div", j({ className: se(Ae({ enableAnimations: t }), Re[o], ze[u], d), "aria-hidden": !0 }, c));
}
y.displayName = "Skeleton";
var q, G, J, K, Q;
r(q || (q = a([`
  width: 100%;
  padding: 0;
  margin: 0;
`])));
var X, Y, Z, ee, ne, te, re, Le = r(G || (G = a([`
  width: 100%;
`]))), $e = r(J || (J = a([`
  width: 250px;
  margin-bottom: 20px;
`]))), ae = r(K || (K = a([`
  margin-bottom: `, `px;
`])), g[3]), Fe = r(Q || (Q = a([`
  width: 350px;
`]))), Ue = ["darkMode", "enableAnimations", "withHeader", "className"];
function de(e) {
  var n = e.darkMode, t = e.enableAnimations, i = e.withHeader, o = i !== void 0 && i, s = e.className, d = me(e, Ue), c = oe(n).darkMode;
  return p.createElement(we, { darkMode: c }, p.createElement("div", j({}, d, { className: se(Le, s), "aria-busy": !0 }), o && p.createElement(y, { enableAnimations: t, className: $e, "data-testid": "lg-paragraph-skeleton-header" }), p.createElement(y, { enableAnimations: t, size: h.Small, className: ae }), p.createElement(y, { enableAnimations: t, size: h.Small, className: ae }), p.createElement(y, { enableAnimations: t, size: h.Small, className: Fe })));
}
de.displayName = "ParagraphSkeleton";
r(X || (X = a([`
  width: 100%;
  table-layout: fixed;
`])));
r(Y || (Y = a([`
  padding: 10px 40px 10px 8px;
`])));
f(f({}, k.Dark, r(Z || (Z = a([`
    background-color: `, `;
    box-shadow: 0 3px `, `;
  `])), m.black, m.gray.dark2)), k.Light, r(ee || (ee = a([`
    background-color: `, `;
    box-shadow: 0 3px `, `;
  `])), m.white, m.gray.light2));
r(ne || (ne = a([`
  margin-top: 2px; // the td doesn't start exactly at the bottom of the box-shadow
`])));
r(te || (te = a([`
  text-align: left;
`])));
r(re || (re = a([`
  font-weight: 600;
`])));
function Ve() {
  return ve(Se);
}
const Be = ie(async () => ({
  default: (await import("./MessageRating.js")).MessageRatingWithFeedbackComment
})), De = ie(async () => ({
  default: (await import("./MessagePrompts.js")).MessagePrompts
})), He = () => /* @__PURE__ */ l.jsx(
  de,
  {
    className: be`
        width: 100%;
        min-width: 120px;

        & > div {
          width: 100%;
        }
      `
  }
);
function Te(e, n) {
  return {
    isSender: e.role === "user",
    senderName: e.role === "user" ? n == null ? void 0 : n.name : "Mongo",
    avatarVariant: e.role === "user" ? z.User : z.Mongo
  };
}
const wn = ({
  messageData: e,
  suggestedPrompts: n = [],
  showSuggestedPrompts: t = !0,
  canSubmitSuggestedPrompt: i = () => !0,
  onSuggestedPromptClick: o,
  isLoading: s,
  showRating: d,
  conversation: c
}) => {
  var A;
  const { maxCommentCharacters: u } = Ce(), b = Ve(), v = Te(e, b), [w, N] = C("none"), [le, M] = C(), [E, ce] = C(void 0);
  async function ue(x) {
    if (x)
      try {
        await c.commentMessage(e.id, x), N("submitted"), ce(e.rating ? "liked" : "disliked"), M(void 0);
      } catch {
        M(
          "Oops, there was an issue submitting the response to the server. Please try again."
        );
      }
  }
  function pe() {
    N("abandoned");
  }
  const S = (A = e.metadata) == null ? void 0 : A.verifiedAnswer, ge = S ? {
    verifier: "MongoDB Staff",
    verifiedAt: new Date(S.updated ?? S.created)
  } : void 0, { tck: fe } = Ne(), he = Oe(e, { tck: fe });
  return /* @__PURE__ */ l.jsxs(xe, { children: [
    /* @__PURE__ */ l.jsxs(
      ke,
      {
        baseFontSize: 16,
        isSender: v.isSender,
        avatar: /* @__PURE__ */ l.jsx(ye, { variant: v.avatarVariant, name: v.senderName }),
        sourceType: s ? void 0 : je.Markdown,
        messageBody: e.content,
        verified: ge,
        links: he,
        componentOverrides: { MessageContent: Me },
        children: [
          s ? /* @__PURE__ */ l.jsx(He, {}) : null,
          /* @__PURE__ */ l.jsx(R, { fallback: null, children: d ? /* @__PURE__ */ l.jsx(
            Be,
            {
              submit: ue,
              abandon: pe,
              status: w,
              errorMessage: le,
              clearErrorMessage: () => M(void 0),
              maxCommentCharacterCount: u,
              messageRatingProps: {
                value: e.rating === void 0 ? void 0 : e.rating ? "liked" : "disliked",
                description: "How was the response?",
                hideThumbsUp: E === "disliked",
                hideThumbsDown: E === "liked",
                onChange: async (x) => {
                  const O = x.target.value;
                  O && w !== "submitted" && await c.rateMessage(
                    e.id,
                    O === "liked"
                  );
                }
              }
            }
          ) : null })
        ]
      }
    ),
    /* @__PURE__ */ l.jsx(R, { fallback: null, children: t && /* @__PURE__ */ l.jsx(
      De,
      {
        prompts: n,
        onPromptClick: (x) => o == null ? void 0 : o(x),
        canSubmit: i
      }
    ) })
  ] }, e.id);
};
export {
  wn as Message
};