import { cn } from "./index3.js";
import { createSafeContext } from "./index21.js";
import { AIInput } from "./index415.js";
import { AIMessage } from "./index419.js";
import { AIScrollAnchor, AIScrollButton, useScrollToBottom } from "./index420.js";
import { Minimize2 } from "lucide-react";
import * as React from "react";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region src/components/organisms/ai/AIContainer/AIContainer.tsx
var [AIContainerContext, useAIContainerContext] = createSafeContext("AIContainer");
function AIContainerHeader({ children, className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-container-header",
		className: cn("w-full max-w-[850px] px-4 pt-4", className),
		children
	});
}
AIContainerHeader.displayName = "AIContainer.Header";
function AIContainerMessages({ children, renderMessage, messages: messagesProp, emptyContent, showScrollButton = true, showTopFade = true, className }) {
	const { containerRef, anchorRef, isAtBottom, scrollToBottom, messages: contextMessages } = useAIContainerContext();
	const messages = messagesProp ?? contextMessages;
	const hasMessages = messages.length > 0;
	const hasChildren = React.Children.toArray(children).length > 0;
	const fadeMaskStyle = showTopFade ? {
		maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 100%)",
		WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 100%)"
	} : void 0;
	return /* @__PURE__ */ jsx("div", {
		className: cn("flex-1 flex flex-col gap-2 items-center w-full max-w-[850px] py-2 overflow-hidden", className),
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative flex-1 w-full overflow-hidden",
			style: fadeMaskStyle,
			children: [/* @__PURE__ */ jsx("div", {
				ref: containerRef,
				className: "absolute inset-0 overflow-y-auto px-4 pb-20 pt-4 scroll-smooth",
				tabIndex: 0,
				role: "log",
				"aria-label": "Chat messages",
				children: hasChildren || hasMessages ? /* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-8 justify-end min-h-full",
					children: [hasChildren ? children : messages.map((message, index) => renderMessage ? renderMessage(message, index) : /* @__PURE__ */ jsx(AIMessage, { ...message }, message.id)), /* @__PURE__ */ jsx(AIScrollAnchor, { ref: anchorRef })]
				}) : emptyContent
			}), showScrollButton && (hasMessages || hasChildren) && /* @__PURE__ */ jsx(AIScrollButton, {
				visible: !isAtBottom,
				onClick: () => scrollToBottom("smooth"),
				position: "bottom-center",
				variant: "ghost",
				size: "sm",
				className: "absolute z-10"
			})]
		})
	});
}
AIContainerMessages.displayName = "AIContainer.Messages";
function AIContainerFooter({ children, className }) {
	return /* @__PURE__ */ jsx("div", {
		"data-slot": "ai-container-footer",
		className: cn("w-full max-w-[850px] px-4", className),
		children
	});
}
AIContainerFooter.displayName = "AIContainer.Footer";
function AIContainerInput({ before, after, children, inputProps, className }) {
	const ctx = React.useContext(AIContainerContext);
	const wrappedInputProps = React.useMemo(() => {
		if (!inputProps || !ctx) return inputProps;
		const originalOnChange = inputProps.onChange;
		return {
			...inputProps,
			onChange: (value) => {
				ctx.setInputHasText(value.trim().length > 0);
				originalOnChange?.(value);
			}
		};
	}, [inputProps, ctx]);
	const handleFocusCapture = () => ctx?.setInputIsFocused(true);
	const handleBlurCapture = () => ctx?.setInputIsFocused(false);
	return /* @__PURE__ */ jsxs("div", {
		className: cn("w-full max-w-[850px] px-4 pb-4", className),
		onFocusCapture: handleFocusCapture,
		onBlurCapture: handleBlurCapture,
		children: [
			before,
			children ?? /* @__PURE__ */ jsx(AIInput, { ...wrappedInputProps }),
			after
		]
	});
}
AIContainerInput.displayName = "AIContainer.Input";
function AIContainer({ children, messages = [], inputProps, showMinimize = false, onMinimize, emptyContent, showScrollButton = true, scrollThreshold = 100, autoScrollOnNewMessage = true, showTopFade = true, className, messageAreaClassName }) {
	const hasMessages = messages.length > 0;
	const prevMessagesLength = React.useRef(messages.length);
	const isCompoundMode = React.Children.toArray(children).length > 0;
	const [inputHasText, setInputHasText] = React.useState(false);
	const [inputIsFocused, setInputIsFocused] = React.useState(false);
	const { containerRef, anchorRef, isAtBottom, scrollToBottom, triggerAutoScroll } = useScrollToBottom({
		threshold: scrollThreshold,
		autoScroll: autoScrollOnNewMessage
	});
	React.useEffect(() => {
		if (messages.length > prevMessagesLength.current) triggerAutoScroll();
		prevMessagesLength.current = messages.length;
	}, [messages.length, triggerAutoScroll]);
	React.useEffect(() => {
		if (hasMessages) scrollToBottom("instant");
	}, [hasMessages, scrollToBottom]);
	const contextValue = React.useMemo(() => ({
		containerRef,
		anchorRef,
		isAtBottom,
		scrollToBottom,
		messages,
		hasMessages,
		inputHasText,
		inputIsFocused,
		setInputHasText,
		setInputIsFocused
	}), [
		containerRef,
		anchorRef,
		isAtBottom,
		scrollToBottom,
		messages,
		hasMessages,
		inputHasText,
		inputIsFocused
	]);
	const extractChildren = () => {
		let header = null;
		let messagesComponent = null;
		let footer = null;
		let input = null;
		React.Children.forEach(children, (child) => {
			if (!React.isValidElement(child)) return;
			switch (child.type?.displayName) {
				case "AIContainer.Header":
					header = child;
					break;
				case "AIContainer.Messages":
					messagesComponent = child;
					break;
				case "AIContainer.Footer":
					footer = child;
					break;
				case "AIContainer.Input":
					input = child;
					break;
			}
		});
		return {
			header,
			messagesComponent,
			footer,
			input
		};
	};
	const renderLegacyMode = () => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
		className: cn("flex-1 flex flex-col gap-2 items-center w-full max-w-[850px] py-2 overflow-hidden", messageAreaClassName),
		children: /* @__PURE__ */ jsxs("div", {
			className: "relative flex-1 w-full overflow-hidden",
			style: showTopFade ? {
				maskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 100%)",
				WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 10%, black 100%)"
			} : void 0,
			children: [/* @__PURE__ */ jsx("div", {
				ref: containerRef,
				className: "absolute inset-0 overflow-y-auto px-4 pb-20 pt-4 scroll-smooth",
				tabIndex: 0,
				role: "log",
				"aria-label": "Chat messages",
				children: hasMessages ? /* @__PURE__ */ jsxs("div", {
					className: "flex flex-col gap-8 justify-end min-h-full",
					children: [messages.map((message) => /* @__PURE__ */ jsx(AIMessage, { ...message }, message.id)), /* @__PURE__ */ jsx(AIScrollAnchor, { ref: anchorRef })]
				}) : emptyContent
			}), showScrollButton && hasMessages && /* @__PURE__ */ jsx(AIScrollButton, {
				visible: !isAtBottom,
				onClick: () => scrollToBottom("smooth"),
				position: "bottom-center",
				variant: "ghost",
				size: "sm",
				className: "absolute z-10"
			})]
		})
	}), /* @__PURE__ */ jsx("div", {
		className: "w-full max-w-[850px] px-4 pb-4",
		children: /* @__PURE__ */ jsx(AIInput, { ...inputProps })
	})] });
	const renderCompoundMode = () => {
		const { header, messagesComponent, footer, input } = extractChildren();
		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
			header,
			messagesComponent,
			footer,
			input
		] });
	};
	return /* @__PURE__ */ jsx(AIContainerContext.Provider, {
		value: contextValue,
		children: /* @__PURE__ */ jsxs("div", {
			"data-slot": "ai-container",
			className: cn("relative flex flex-col items-center w-full h-full bg-card/60 rounded-3xl overflow-hidden", className),
			children: [isCompoundMode ? renderCompoundMode() : renderLegacyMode(), showMinimize && /* @__PURE__ */ jsx("button", {
				type: "button",
				onClick: onMinimize,
				"aria-label": "Minimize chat",
				className: "absolute bottom-6 end-6 p-1 rounded bg-transparent hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring transition-colors duration-150 ease-out",
				children: /* @__PURE__ */ jsx(Minimize2, { className: "size-4 text-foreground" })
			})]
		})
	});
}
AIContainer.displayName = "AIContainer";
var AIContainerCompound = Object.assign(AIContainer, {
	Header: AIContainerHeader,
	Messages: AIContainerMessages,
	Footer: AIContainerFooter,
	Input: AIContainerInput
});
//#endregion
export { AIContainerCompound, AIContainerContext };

//# sourceMappingURL=index421.js.map