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

    & * {
      box-sizing: border-box;
    }
  }`,
  chatbot_input: l`
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  `,
  powered_by_footer: l`
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding-right: 24px;
  `
};
function J({
  className: p,
  suggestedPrompts: r = [],
  bottomContent: d,
  fatalErrorMessage: h = j,
  placeholder: u,
  darkMode: n
}) {
  const { darkMode: x } = C(n), {
    conversation: a,
    inputText: s,
    inputPlaceholder: f,
    setInputText: m,
    inputTextError: t,
    canSubmit: b,
    awaitingReply: w,
    openChat: i,
    setFocused: g,
    handleSubmit: y,
    hasError: S,
    showError: v,
    onSuggestedPromptClick: E
  } = D({
    fatalErrorMessage: h,
    placeholder: u
  }), I = (
    // 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
    !w
  );
  return /* @__PURE__ */ e.jsx("div", { className: _(c.chatbot_container, p), children: /* @__PURE__ */ e.jsxs("div", { className: c.chatbot_input, children: [
    /* @__PURE__ */ e.jsx(
      F,
      {
        darkMode: x,
        hasError: S ?? !1,
        dropdownProps: {
          usePortal: !1
        },
        dropdownFooterSlot: /* @__PURE__ */ e.jsx("div", { className: c.powered_by_footer, children: /* @__PURE__ */ e.jsx(R, {}) }),
        textareaProps: {
          value: s,
          onChange: (o) => {
            m(o.target.value);
          },
          placeholder: f
        },
        onMessageSend: async (o) => {
          if (a.messages.length > 0) {
            i();
            return;
          }
          b && await y(o);
        },
        onClick: async () => {
          a.messages.length > 0 && i();
        },
        onFocus: () => {
          g(!0);
        },
        onBlur: () => {
          g(!1);
        },
        children: I ? /* @__PURE__ */ e.jsx(k, { label: "SUGGESTED AI PROMPTS", children: (r == null ? void 0 : r.map((o) => /* @__PURE__ */ e.jsx(
          N,
          {
            onClick: async () => {
              E == null || E(o), await y(o);
            },
            children: o
          },
          o
        ))) ?? null }) : void 0
      },
      "inputBarTrigger"
    ),
    /* @__PURE__ */ e.jsxs("div", { className: c.info_box, children: [
      v ? /* @__PURE__ */ e.jsx(M, { children: t }) : null,
      d
    ] })
  ] }) });
}
export {
  J as I,
  D as u
};