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

UI React components for the MongoDB Chatbot Framework

import { j as e } from "./jsx-runtime.js";
import { a as I, c as d } from "./Transition.js";
import { d as j } from "./index2.js";
import { t as C, y as k } from "./index4.js";
import { q as v } from "./index13.js";
import { c as w } from "./index5.js";
import { useMemo as S, Suspense as B } from "react";
import { L as T } from "./index18.js";
import { I as E, C as N, M as R } from "./InputBar.js";
import { d as P } from "./ui-text.js";
import { useChatbotContext as y } from "./useChatbotContext.js";
import { u as D } from "./HotkeyContext.js";
import { ChatMessageFeed as F } from "./ChatMessageFeed.js";
import "react-dom";
import "./OpenNewTab.js";
import "./index14.js";
import "./index15.js";
import "./index10.js";
import "./index6.js";
import "./X.js";
import "./index8.js";
import "./index9.js";
import "./Warning.js";
import "./index7.js";
import "./index11.js";
import "./index12.js";
import "./ChatbotProvider.js";
import "./index17.js";
import "./index3.js";
function H(t) {
  const { message: o = "Something went wrong" } = t, { darkMode: a } = j();
  return /* @__PURE__ */ e.jsxs(T, { darkMode: t.darkMode ?? a, variant: "danger", children: [
    o,
    /* @__PURE__ */ e.jsx("br", {}),
    "Reload the page to start a new conversation."
  ] });
}
function he(t) {
  const { darkMode: o } = j(t.darkMode), {
    className: a,
    disclaimer: l,
    disclaimerHeading: x,
    fatalErrorMessage: n,
    initialMessageText: i,
    initialMessageReferences: r,
    initialMessageSuggestedPrompts: m,
    inputBarId: h = "chatbot-input-bar",
    inputBottomText: c,
    messageBottomContent: s,
    windowTitle: p
  } = t, { chatbotName: g } = y(), u = S(() => i ? {
    id: crypto.randomUUID(),
    role: "assistant",
    content: i,
    createdAt: (/* @__PURE__ */ new Date()).toLocaleTimeString(),
    suggestedPrompts: m,
    references: r
  } : null, [
    i,
    r,
    m
  ]);
  return /* @__PURE__ */ e.jsx(w, { children: /* @__PURE__ */ e.jsxs(
    v,
    {
      className: I(d`border-radius: 24px;`, a),
      title: p ?? g ?? "",
      darkMode: o,
      children: [
        /* @__PURE__ */ e.jsx(B, { fallback: null, children: /* @__PURE__ */ e.jsx(
          F,
          {
            darkMode: o,
            disclaimer: l,
            disclaimerHeading: x,
            initialMessage: u,
            messageBottomContent: s
          }
        ) }),
        /* @__PURE__ */ e.jsx(
          L,
          {
            id: h,
            fatalErrorMessage: n,
            darkMode: o,
            bottomText: c,
            placeholder: t.inputBarPlaceholder
          }
        )
      ]
    }
  ) });
}
function L({
  darkMode: t,
  fatalErrorMessage: o = P,
  id: a = "chatbot-input-bar",
  bottomText: l,
  placeholder: x = R()
}) {
  var M;
  const { darkMode: n } = j(t), {
    awaitingReply: i,
    conversation: r,
    handleSubmit: m,
    inputBarRef: h,
    inputText: c,
    inputTextError: s,
    maxInputCharacters: p,
    setInputText: g
  } = y(), u = s !== "", b = D();
  return /* @__PURE__ */ e.jsxs(
    "div",
    {
      className: d`
        position: relative;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 1rem;
        padding-left: 32px;
        padding-right: 32px;
        padding-top: 0.5rem;
        padding-bottom: 1rem;
      `,
      children: [
        r.error ? /* @__PURE__ */ e.jsx(H, { darkMode: n, message: r.error }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
          /* @__PURE__ */ e.jsx(
            E,
            {
              hasError: u,
              shouldRenderGradient: !s,
              darkMode: n,
              ref: h,
              disabled: !!((M = r.error) != null && M.length),
              disableSend: u || i,
              shouldRenderHotkeyIndicator: b.hotkey !== null,
              onMessageSend: (f) => {
                s.length === 0 && !r.error && m(f);
              },
              textareaProps: {
                id: a,
                value: c,
                onChange: (f) => {
                  g(f.target.value);
                },
                placeholder: r.error ? o : x
              }
            }
          ),
          /* @__PURE__ */ e.jsxs(
            "div",
            {
              className: d`
              display: flex;
              justify-content: space-between;
            `,
              children: [
                l ? /* @__PURE__ */ e.jsx(
                  C,
                  {
                    baseFontSize: 13,
                    className: d`
                  text-align: center;
                `,
                    children: l
                  }
                ) : null,
                p ? /* @__PURE__ */ e.jsx(
                  N,
                  {
                    darkMode: n,
                    current: c.length,
                    max: p
                  }
                ) : null
              ]
            }
          )
        ] }),
        /* @__PURE__ */ e.jsx(A, { conversation: r })
      ]
    }
  );
}
function A({ conversation: t }) {
  return {}.VITE_QA === "true" ? /* @__PURE__ */ e.jsx(
    "div",
    {
      className: d`
      display: flex;
      flex-direction: row;
      justify-content: center;
    `,
      children: /* @__PURE__ */ e.jsxs(C, { children: [
        "Conversation ID: ",
        /* @__PURE__ */ e.jsx(k, { children: t.conversationId })
      ] })
    }
  ) : null;
}
export {
  he as ChatWindow
};