@copilotkit/react-ui/dist/chunk-3W6J75HS.mjs

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

import {
  PoweredByTag
} from "./chunk-ELGRNEAO.mjs";
import {
  Textarea_default
} from "./chunk-QIOJXTIQ.mjs";
import {
  useChatContext
} from "./chunk-IEMQ2SQW.mjs";
import {
  usePushToTalk
} from "./chunk-O72ZB5V3.mjs";

// src/components/chat/Input.tsx
import { useMemo, useRef, useState } from "react";
import { useCopilotContext, useCopilotChatInternal } from "@copilotkit/react-core";
import { jsx, jsxs } from "react/jsx-runtime";
var MAX_NEWLINES = 6;
var Input = ({
  inProgress,
  onSend,
  chatReady = false,
  onStop,
  onUpload,
  hideStopButton = false
}) => {
  var _a;
  const context = useChatContext();
  const copilotContext = useCopilotContext();
  const showPoweredBy = !((_a = copilotContext.copilotApiConfig) == null ? void 0 : _a.publicApiKey);
  const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
  const textareaRef = useRef(null);
  const [isComposing, setIsComposing] = useState(false);
  const handleDivClick = (event) => {
    var _a2;
    const target = event.target;
    if (target.closest("button"))
      return;
    if (target.tagName === "TEXTAREA")
      return;
    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
  };
  const [text, setText] = useState("");
  const send = () => {
    var _a2;
    if (inProgress)
      return;
    onSend(text);
    setText("");
    (_a2 = textareaRef.current) == null ? void 0 : _a2.focus();
  };
  const { pushToTalkState, setPushToTalkState } = usePushToTalk({
    sendFunction: onSend,
    inProgress
  });
  const isInProgress = inProgress || pushToTalkState === "transcribing";
  const { buttonIcon, buttonAlt } = useMemo(() => {
    if (!chatReady)
      return { buttonIcon: context.icons.spinnerIcon, buttonAlt: "Loading" };
    return isInProgress && !hideStopButton && chatReady ? { buttonIcon: context.icons.stopIcon, buttonAlt: "Stop" } : { buttonIcon: context.icons.sendIcon, buttonAlt: "Send" };
  }, [isInProgress, chatReady, hideStopButton, context.icons.stopIcon, context.icons.sendIcon]);
  const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
  const { interrupt } = useCopilotChatInternal();
  const canSend = useMemo(() => {
    return !isInProgress && text.trim().length > 0 && pushToTalkState === "idle" && !interrupt;
  }, [interrupt, isInProgress, text, pushToTalkState]);
  const canStop = useMemo(() => {
    return isInProgress && !hideStopButton;
  }, [isInProgress, hideStopButton]);
  const sendDisabled = !canSend && !canStop;
  return /* @__PURE__ */ jsxs("div", { className: `copilotKitInputContainer ${showPoweredBy ? "poweredByContainer" : ""}`, children: [
    /* @__PURE__ */ jsxs("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
      /* @__PURE__ */ jsx(
        Textarea_default,
        {
          ref: textareaRef,
          placeholder: context.labels.placeholder,
          autoFocus: false,
          maxRows: MAX_NEWLINES,
          value: text,
          onChange: (event) => setText(event.target.value),
          onCompositionStart: () => setIsComposing(true),
          onCompositionEnd: () => setIsComposing(false),
          onKeyDown: (event) => {
            if (event.key === "Enter" && !event.shiftKey && !isComposing) {
              event.preventDefault();
              if (canSend) {
                send();
              }
            }
          }
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "copilotKitInputControls", children: [
        onUpload && /* @__PURE__ */ jsx("button", { onClick: onUpload, className: "copilotKitInputControlButton", children: context.icons.uploadIcon }),
        /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 } }),
        showPushToTalk && /* @__PURE__ */ jsx(
          "button",
          {
            onClick: () => setPushToTalkState(pushToTalkState === "idle" ? "recording" : "transcribing"),
            className: pushToTalkState === "recording" ? "copilotKitInputControlButton copilotKitPushToTalkRecording" : "copilotKitInputControlButton",
            children: context.icons.pushToTalkIcon
          }
        ),
        /* @__PURE__ */ jsx(
          "button",
          {
            disabled: sendDisabled,
            onClick: isInProgress && !hideStopButton ? onStop : send,
            "data-copilotkit-in-progress": inProgress,
            "data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
            className: "copilotKitInputControlButton",
            "aria-label": buttonAlt,
            children: buttonIcon
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ jsx(PoweredByTag, { showPoweredBy })
  ] });
};

export {
  Input
};
//# sourceMappingURL=chunk-3W6J75HS.mjs.map