@veracity/vui/dist/chat/chat.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { cs } from "../utils/styles.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { Tag } from "../tag/tag.js";
import { ChatInput } from "./chatInput.js";
import { ChatMessage } from "./chatMessage.js";
import { useEffect, useRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/chat/chat.tsx
/**
* Displays a chat interface with messages and actions.
*/
const Chat = vui((props, ref) => {
	const { className, children, inputStatus = "default", messages, helpText, maxTextareaHeight = 120, processingMessage, suggestions, onNewTopicClick, onSuggestionClick, onSend, onStop, ...rest } = omitThemingProps(props);
	const styles = useStyleConfig("Chat", props);
	const messagesEndRef = useRef(null);
	const scrollDown = () => messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
	useEffect(scrollDown, [messages, children]);
	return /* @__PURE__ */ jsxs(Box, {
		className: cs("vui-chat", className),
		ref,
		...styles.chat,
		h: "100%",
		justifyContent: "space-between",
		...rest,
		children: [/* @__PURE__ */ jsxs(Box, {
			className: cs("vui-chat-messages"),
			...styles?.messages,
			children: [messages?.length ? messages.map((message, key) => /* @__PURE__ */ jsx(ChatMessage, { ...message }, key)) : children, /* @__PURE__ */ jsx("div", { ref: messagesEndRef })]
		}), /* @__PURE__ */ jsxs(Box, {
			column: true,
			children: [!!suggestions?.length && /* @__PURE__ */ jsx(Box, {
				className: cs("vui-chat-suggestions"),
				...styles?.suggestions,
				mb: "24px",
				mt: "8px",
				children: suggestions?.map((suggestion) => /* @__PURE__ */ jsx(Tag, {
					cursor: inputStatus === "default" ? "pointer" : void 0,
					mb: "6px",
					ml: "6px",
					onClick: inputStatus === "default" ? () => onSuggestionClick?.(suggestion) : void 0,
					children: suggestion
				}, suggestion))
			}), /* @__PURE__ */ jsx(ChatInput, {
				helpText,
				maxTextareaHeight,
				onNewTopicClick,
				onSend,
				onStop,
				processingMessage,
				status: inputStatus
			})]
		})]
	});
});
Chat.Message = ChatMessage;
Chat.Input = ChatInput;
Chat.displayName = "Chat";

//#endregion
export { Chat, Chat as default };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=chat.js.map