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

UI React components for the MongoDB Chatbot Framework

import { j as e } from "./jsx-runtime.js";
import { c as i, a as C } from "./Transition.js";
import { d as M } from "./index2.js";
import { w as B } from "./index4.js";
import { M as F, I as k, t as N, X as R } from "./InputBar.js";
import { d as S } from "./ui-text.js";
import { PoweredByAtlasVectorSearch as P } from "./PoweredByAtlasVectorSearch.js";
import { useState as E } from "react";
import { useChatbotContext as A } from "./useChatbotContext.js";
function D({
  placeholder: c = F(),
  fatalErrorMessage: r = S
}) {
  const {
    openChat: p,
    awaitingReply: d,
    handleSubmit: x,
    conversation: n,
    isExperimental: h
  } = A(), [a, u] = E(!1), [s, f] = E(""), [t, m] = E(""), b = n.error ? r : c, g = t.length === 0 && !n.error;
  return {
    conversation: n,
    isExperimental: h,
    inputText: s,
    setInputText: f,
    inputTextError: t,
    inputPlaceholder: b,
    setInputTextError: m,
    canSubmit: g,
    awaitingReply: d,
    openChat: p,
    focused: a,
    setFocused: u,
    handleSubmit: x,
    hasError: t !== "",
    showError: t !== "" && !open
  };
}
const l = {
  info_box: i`
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-left: 8px;
  `,
  chatbot_container: i`
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    & * {
      box-sizing: border-box;
    }
  }`,
  chatbot_input: i`
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  `,
  powered_by_footer: i`
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 24px;
  `
};
function K({
  className: c,
  suggestedPrompts: r = [],
  bottomContent: p,
  fatalErrorMessage: d = S,
  placeholder: x,
  darkMode: n
}) {
  const { darkMode: h } = M(n), {
    conversation: a,
    isExperimental: u,
    inputText: s,
    inputPlaceholder: f,
    setInputText: t,
    inputTextError: m,
    canSubmit: b,
    awaitingReply: g,
    openChat: w,
    focused: y,
    setFocused: T,
    handleSubmit: j,
    hasError: v,
    showError: I
  } = D({
    fatalErrorMessage: d,
    placeholder: x
  }), _ = (
    // There are suggested prompts defined
    r.length > 0 && // There is no conversation history
    a.messages.length === 0 && // The user has not typed anything
    s.length === 0 && // We're not waiting for the reply to the user's first message
    !g
  );
  return /* @__PURE__ */ e.jsx("div", { className: C(l.chatbot_container, c), children: /* @__PURE__ */ e.jsxs("div", { className: l.chatbot_input, children: [
    /* @__PURE__ */ e.jsx(
      k,
      {
        darkMode: h,
        hasError: v ?? !1,
        badgeText: !y && s.length === 0 && u ? "Experimental" : void 0,
        dropdownProps: {
          usePortal: !1
        },
        dropdownFooterSlot: /* @__PURE__ */ e.jsx("div", { className: l.powered_by_footer, children: /* @__PURE__ */ e.jsx(P, {}) }),
        textareaProps: {
          value: s,
          onChange: (o) => {
            t(o.target.value);
          },
          placeholder: f
        },
        onMessageSend: async (o) => {
          if (a.messages.length > 0) {
            w();
            return;
          }
          b && await j(o);
        },
        onClick: async () => {
          a.messages.length > 0 && w();
        },
        onFocus: () => {
          T(!0);
        },
        onBlur: () => {
          T(!1);
        },
        children: _ ? /* @__PURE__ */ e.jsx(N, { label: "SUGGESTED AI PROMPTS", children: (r == null ? void 0 : r.map((o) => /* @__PURE__ */ e.jsx(
          R,
          {
            onClick: async () => {
              await j(o);
            },
            children: o
          },
          o
        ))) ?? null }) : void 0
      },
      "inputBarTrigger"
    ),
    /* @__PURE__ */ e.jsxs("div", { className: l.info_box, children: [
      I ? /* @__PURE__ */ e.jsx(B, { children: m }) : null,
      p
    ] })
  ] }) });
}
export {
  K as I,
  D as u
};