@prexo/ai-chat-sdk
Version:
AI Chat Component with Persistent History
98 lines (97 loc) • 2.49 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import React, { useRef, memo } from "react";
function ChatInputComponent({
input,
status,
handleSubmit,
handleInputChange,
placeholder,
sessionId,
sessionTTL,
isLoading,
history
}) {
const inputRef = useRef(null);
const handleKeyPress = async (e) => {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault();
try {
if (history) {
await history.addMessage({
message: {
id: Date.now().toString(),
role: "user",
content: input
},
sessionId,
sessionTTL
});
}
} catch (err) {
console.error("addMessage error:", err);
}
handleSubmit(e);
}
};
const handleFormSubmit = async (e) => {
e.preventDefault();
try {
if (history) {
await history.addMessage({
message: {
id: Date.now().toString(),
role: "user",
content: input
},
sessionId,
sessionTTL
});
}
} catch (err) {
console.error("addMessage error:", err);
}
handleSubmit(e);
};
return /* @__PURE__ */ jsxs("form", { className: "chat-input", onSubmit: handleFormSubmit, children: [
/* @__PURE__ */ jsxs("div", { className: "input-container", children: [
/* @__PURE__ */ jsx(
"input",
{
ref: inputRef,
type: "text",
value: input,
onChange: handleInputChange,
onKeyPress: handleKeyPress,
placeholder,
disabled: status === "streaming",
className: "message-input"
}
),
/* @__PURE__ */ jsx(
"button",
{
type: "submit",
disabled: status === "streaming" || isLoading,
className: "send-button",
"aria-label": "Send message",
children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" }) })
}
)
] }),
/* @__PURE__ */ jsx(
"a",
{
href: "https://prexoai.xyz",
target: "_blank",
rel: "noopener noreferrer",
className: "chat-input-watermark",
children: "Powered by Prexo Ai"
}
)
] });
}
const ChatInput = memo(ChatInputComponent);
export {
ChatInput
};