import { j as jsxRuntimeExports } from "./jsx-runtime.CXYVdt5g.js";
import { a as tx } from "./twind.B1qQmF_s.js";
import "react";
import "./index.bXWE_wTx.js";
import { a$ as GenIcon, v as useGenerationState, bU as TbSend2 } from "./use-editor.CurXdZnZ.js";
import { f as IoIosAttach } from "./index.DjU2S5E8.js";
import { o } from "./Editor.C1P5MYi_.js";
function BiStopCircle(props) {
  return GenIcon({ "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" }, "child": [] }, { "tag": "path", "attr": { "d": "M9 9h6v6H9z" }, "child": [] }] })(props);
}
function ChatBox({
  input,
  setInput,
  onSubmit,
  status,
  disabled,
  stop,
  messages,
  showWebSearch = false,
  onWebSearchToggle,
  ref
}) {
  const generationState = useGenerationState();
  const WEB_SEARCH_ENABLED = false;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "form",
    {
      onSubmit,
      className: tx(
        "flex flex-col flex-1 min-h-[150px] max-h-[150px] gap-1.5 p-2 justify-center mt-2",
        "bg-upstart-100 border-t border-upstart-300 relative",
        generationState.isReady === false && "rounded-lg"
      ),
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsx(
          "textarea",
          {
            ref,
            onChange: (e) => setInput(e.target.value),
            value: input,
            autoFocus: true,
            onKeyDown: (e) => {
              if (e.key === "Enter" && !e.shiftKey) onSubmit(e);
            },
            disabled,
            name: "prompt",
            spellCheck: false,
            autoComplete: "off",
            autoCorrect: "off",
            placeholder: messages.some((m) => m.role === "user") ? void 0 : "Add a section just below the navbar containing a paragraph with a short description of the site.",
            className: tx(
              "form-textarea ",
              generationState.isReady === false ? "!text-fluid-sm" : "text-sm",
              "h-full w-full rounded scrollbar-thin p-2 !pb-9 border-upstart-300 shadow-inner focus:(!outline-0 !ring-upstart-500 !border-upstart-500)",
              disabled ? "!bg-gray-200" : "!bg-white"
            )
          }
        ),
        /* @__PURE__ */ jsxRuntimeExports.jsxs(
          "div",
          {
            className: tx(
              "flex justify-between items-center h-9 text-gray-500 absolute left-[9px] right-[9px] rounded bottom-2.5 px-2 z-50 ",
              disabled ? "bg-gray-200" : "bg-white"
            ),
            children: [
              /* @__PURE__ */ jsxRuntimeExports.jsx(
                "button",
                {
                  disabled,
                  type: "button",
                  className: tx("hover:bg-upstart-200 p-1 rounded inline-flex text-sm gap-1"),
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(IoIosAttach, { className: "h-5 w-5" })
                }
              ),
              generationState.isReady && WEB_SEARCH_ENABLED,
              status === "submitted" || status === "streaming" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
                o,
                {
                  type: "button",
                  size: "1",
                  className: tx("flex items-center justify-center gap-0.5"),
                  onClick: stop,
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(BiStopCircle, { className: "text-lg" })
                }
              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
                o,
                {
                  type: "submit",
                  size: "1",
                  className: tx("flex items-center gap-0.5"),
                  disabled: disabled || input.trim().length === 0,
                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(TbSend2, { className: "text-lg" })
                }
              )
            ]
          }
        )
      ]
    }
  );
}
export {
  ChatBox as default
};
//# sourceMappingURL=ChatBox.vPGvv47x.js.map
