@copilotkit/react-ui
Version:
<div align="center"> <a href="https://copilotkit.ai" target="_blank"> <img src="https://github.com/copilotkit/copilotkit/raw/main/assets/banner.png" alt="CopilotKit Logo"> </a>
106 lines (104 loc) • 3.89 kB
JavaScript
import {
Textarea_default
} from "./chunk-YQFVRDNC.mjs";
import {
useChatContext
} from "./chunk-UN2E3HCK.mjs";
import {
usePushToTalk
} from "./chunk-S5MBUNGN.mjs";
// src/components/chat/Input.tsx
import { useEffect, useRef, useState } from "react";
import { useCopilotContext } from "@copilotkit/react-core";
import { jsx, jsxs } from "react/jsx-runtime";
var Input = ({ inProgress, onSend, isVisible = false, onStop }) => {
const context = useChatContext();
const copilotContext = useCopilotContext();
const pushToTalkConfigured = copilotContext.copilotApiConfig.textToSpeechUrl !== void 0 && copilotContext.copilotApiConfig.transcribeAudioUrl !== void 0;
const textareaRef = useRef(null);
const handleDivClick = (event) => {
var _a;
const target = event.target;
if (target.closest("button"))
return;
if (target.tagName === "TEXTAREA")
return;
(_a = textareaRef.current) == null ? void 0 : _a.focus();
};
const [text, setText] = useState("");
const send = () => {
var _a;
if (inProgress)
return;
onSend(text);
setText("");
(_a = textareaRef.current) == null ? void 0 : _a.focus();
};
useEffect(() => {
var _a;
if (isVisible) {
(_a = textareaRef.current) == null ? void 0 : _a.focus();
}
}, [isVisible]);
const { pushToTalkState, setPushToTalkState } = usePushToTalk({
sendFunction: onSend,
inProgress
});
const isInProgress = inProgress || pushToTalkState === "transcribing";
const buttonIcon = isInProgress ? context.icons.stopIcon : context.icons.sendIcon;
const showPushToTalk = pushToTalkConfigured && (pushToTalkState === "idle" || pushToTalkState === "recording") && !inProgress;
const canSend = () => {
var _a;
const interruptEvent = (_a = copilotContext.langGraphInterruptAction) == null ? void 0 : _a.event;
const interruptInProgress = (interruptEvent == null ? void 0 : interruptEvent.name) === "LangGraphInterruptEvent" && !(interruptEvent == null ? void 0 : interruptEvent.response);
return (isInProgress || !isInProgress && text.trim().length > 0) && pushToTalkState === "idle" && !interruptInProgress;
};
const sendDisabled = !canSend();
return /* @__PURE__ */ jsx("div", { className: "copilotKitInputContainer", children: /* @__PURE__ */ jsxs("div", { className: "copilotKitInput", onClick: handleDivClick, children: [
/* @__PURE__ */ jsx(
Textarea_default,
{
ref: textareaRef,
placeholder: context.labels.placeholder,
autoFocus: true,
maxRows: 5,
value: text,
onChange: (event) => setText(event.target.value),
onKeyDown: (event) => {
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault();
if (canSend()) {
send();
}
}
}
}
),
/* @__PURE__ */ jsxs("div", { className: "copilotKitInputControls", children: [
/* @__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 ? onStop : send,
"data-copilotkit-in-progress": inProgress,
"data-test-id": inProgress ? "copilot-chat-request-in-progress" : "copilot-chat-ready",
className: "copilotKitInputControlButton",
children: buttonIcon
}
)
] })
] }) });
};
export {
Input
};
//# sourceMappingURL=chunk-QJKMOGWN.mjs.map