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

UI React components for the MongoDB Assistant

import { jsx as a, jsxs as I } from "react/jsx-runtime";
import { c as l, a as M } from "./emotion-css.esm.js";
import { d as B } from "./index2.js";
import { D as k } from "./index4.js";
import { M as D, d as S, I as F, w as j, b as N } from "./ui-text.js";
import { useState as T } from "react";
import { useChatbotContext as R } from "./useChatbotContext.js";
function G({
  placeholder: c = D(),
  fatalErrorMessage: r = S
}) {
  const {
    openChat: p,
    awaitingReply: d,
    handleSubmit: h,
    conversation: n,
    onSuggestedPromptClick: u
  } = R(), [t, i] = T(!1), [f, x] = T(""), [o, m] = T(""), b = n.error ? r : c, s = o.length === 0 && !n.error;
  return {
    conversation: n,
    inputText: f,
    setInputText: x,
    inputTextError: o,
    inputPlaceholder: b,
    setInputTextError: m,
    canSubmit: s,
    awaitingReply: d,
    openChat: p,
    focused: t,
    setFocused: i,
    handleSubmit: h,
    hasError: o !== "",
    showError: o !== "" && !open,
    onSuggestedPromptClick: u
  };
}
const y = {
  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: c,
  suggestedPrompts: r = [],
  bottomContent: p,
  fatalErrorMessage: d = S,
  placeholder: h,
  darkMode: n
}) {
  const { darkMode: u } = B(n), {
    conversation: t,
    inputText: i,
    inputPlaceholder: f,
    setInputText: x,
    inputTextError: o,
    canSubmit: m,
    awaitingReply: b,
    openChat: s,
    setFocused: g,
    handleSubmit: w,
    hasError: v,
    showError: C,
    onSuggestedPromptClick: E
  } = G({
    fatalErrorMessage: d,
    placeholder: h
  }), _ = (
    // There are suggested prompts defined
    r.length > 0 && // There is no conversation history
    t.messages.length === 0 && // The user has not typed anything
    i.length === 0 && // We're not waiting for the reply to the user's first message
    !b
  );
  return /* @__PURE__ */ a("div", { className: M(y.chatbot_container, c), children: /* @__PURE__ */ I("div", { className: y.chatbot_input, children: [
    /* @__PURE__ */ a(
      F,
      {
        darkMode: u,
        hasError: v ?? !1,
        dropdownProps: {
          usePortal: !1
        },
        textareaProps: {
          value: i,
          onChange: (e) => {
            x(e.target.value);
          },
          placeholder: f
        },
        onMessageSend: async (e) => {
          if (t.messages.length > 0) {
            s();
            return;
          }
          m && await w(e);
        },
        onClick: async () => {
          t.messages.length > 0 && s();
        },
        onFocus: () => {
          g(!0);
        },
        onBlur: () => {
          g(!1);
        },
        children: _ ? /* @__PURE__ */ a(j, { label: "SUGGESTED AI PROMPTS", children: (r == null ? void 0 : r.map((e) => /* @__PURE__ */ a(
          N,
          {
            onClick: async () => {
              E == null || E(e), await w(e);
            },
            children: e
          },
          e
        ))) ?? null }) : void 0
      },
      "inputBarTrigger"
    ),
    /* @__PURE__ */ I("div", { className: y.info_box, children: [
      C ? /* @__PURE__ */ a(k, { children: o }) : null,
      p
    ] })
  ] }) });
}
export {
  J as I,
  G as u
};