@envive-ai/react-widgets-v3 0.3.10 → 0.3.11

package/dist/_virtual/rolldown_runtime.cjs

@@ -5,6 +5,7 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || cb((mod = { exports: {} }).exports, mod), mod.exports);
 var __copyProps = (to, from, except, desc) => {
 	if (from && typeof from === "object" || typeof from === "function") {
 		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
@@ -26,4 +27,5 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 
 //#endregion
 
+exports.__commonJSMin = __commonJSMin;
 exports.__toESM = __toESM;

package/dist/debug/GenericSelect.cjs

@@ -0,0 +1,167 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+
+//#region src/debug/GenericSelect.tsx
+const dictionaries = { priority: {
+	p0: { label: "Urgent" },
+	p1: { label: "High" },
+	p2: { label: "Medium" },
+	p3: { label: "Low" },
+	"no priority": { label: "No Priority" }
+} };
+const styles = {
+	button: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.75rem",
+		backgroundColor: "transparent",
+		padding: "0.375rem 0.75rem",
+		borderRadius: "0.375rem",
+		cursor: "pointer",
+		outline: "none",
+		border: "none"
+	},
+	buttonHover: { backgroundColor: "#f9fafb" },
+	dropdown: {
+		position: "absolute",
+		left: "0",
+		zIndex: 10,
+		marginTop: "4px",
+		borderRadius: "8px",
+		width: "125px",
+		backgroundColor: "white",
+		boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		border: "1px solid rgba(0, 0, 0, 0.05)"
+	},
+	dropdownItem: {
+		display: "flex",
+		width: "100%",
+		alignItems: "center",
+		padding: "4px 8px",
+		fontSize: "12px",
+		cursor: "pointer",
+		border: "none",
+		backgroundColor: "transparent",
+		textAlign: "left"
+	},
+	dropdownItemHover: { backgroundColor: "#EBEEF6" },
+	container: {
+		marginLeft: "-1rem",
+		position: "relative"
+	}
+};
+const getBadgeStyles = (variant) => {
+	let backgroundColor;
+	let textColor;
+	switch (variant) {
+		case "p0":
+			backgroundColor = "#940F24";
+			textColor = "#F9E8EA";
+			break;
+		case "p1":
+			backgroundColor = "#F9E8EA";
+			textColor = "#940F24";
+			break;
+		case "p2":
+			backgroundColor = "#FEEBCB";
+			textColor = "#C05621";
+			break;
+		case "p3":
+			backgroundColor = "#E6F6F4";
+			textColor = "#007F6D";
+			break;
+		default:
+			backgroundColor = "#EBEEF6";
+			textColor = "#3C57AA";
+	}
+	return {
+		display: "inline-flex",
+		borderRadius: "4px",
+		backgroundColor,
+		color: textColor,
+		fontSize: "0.875rem",
+		paddingLeft: "0.625rem",
+		paddingRight: "0.625rem",
+		paddingTop: "0.25rem",
+		paddingBottom: "0.25rem"
+	};
+};
+function GenericSelect({ type, selectedKey, onSelect, buttonStyle = {}, menuStyle = {} }) {
+	const [isOpen, setIsOpen] = (0, react.useState)(false);
+	const [isHovering, setIsHovering] = (0, react.useState)(null);
+	const menuRef = (0, react.useRef)(null);
+	const dictionary = dictionaries[type];
+	const renderItem = (key, item) => {
+		const chipItem = item;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			style: getBadgeStyles(key),
+			children: chipItem.label
+		});
+	};
+	react.default.useEffect(() => {
+		const handleClickOutside = (event) => {
+			const isOutside = menuRef.current && !menuRef.current.contains(event.target);
+			const path = event.composedPath ? event.composedPath() : [];
+			const isInPath = menuRef.current && path.includes(menuRef.current);
+			if (isOutside && !isInPath) setIsOpen(false);
+		};
+		document.addEventListener("mouseup", handleClickOutside, true);
+		return () => {
+			document.removeEventListener("mouseup", handleClickOutside, true);
+		};
+	}, [isOpen]);
+	if (!dictionary) {
+		console.error(`Invalid type "${type}".`);
+		return null;
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		style: styles.container,
+		ref: menuRef,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			type: "button",
+			style: {
+				...styles.button,
+				...isHovering === "button" ? styles.buttonHover : {},
+				...buttonStyle
+			},
+			onClick: () => {
+				setIsOpen(!isOpen);
+			},
+			onMouseEnter: () => setIsHovering("button"),
+			onMouseLeave: () => setIsHovering(null),
+			children: dictionary[selectedKey] ? renderItem(selectedKey, dictionary[selectedKey]) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				style: { color: "#6b7280" },
+				children: `Select ${type.charAt(0).toUpperCase() + type.slice(1)}`
+			})
+		}), isOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			style: {
+				...styles.dropdown,
+				...menuStyle
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				style: { padding: "0.25rem 0" },
+				children: Object.entries(dictionary).filter(([key]) => key !== selectedKey).map(([key, item]) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					style: {
+						...styles.dropdownItem,
+						...isHovering === key ? styles.dropdownItemHover : {}
+					},
+					onMouseEnter: () => setIsHovering(key),
+					onMouseLeave: () => setIsHovering(null),
+					onClick: (e) => {
+						e.stopPropagation();
+						if (onSelect) onSelect(key);
+						setIsOpen(false);
+					},
+					children: renderItem(key, item)
+				}, key))
+			})
+		})]
+	});
+}
+
+//#endregion
+exports.GenericSelect = GenericSelect;

package/dist/debug/GenericSelect.js

@@ -0,0 +1,165 @@
+import React, { useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/debug/GenericSelect.tsx
+const dictionaries = { priority: {
+	p0: { label: "Urgent" },
+	p1: { label: "High" },
+	p2: { label: "Medium" },
+	p3: { label: "Low" },
+	"no priority": { label: "No Priority" }
+} };
+const styles = {
+	button: {
+		display: "flex",
+		alignItems: "center",
+		gap: "0.5rem",
+		fontSize: "0.75rem",
+		backgroundColor: "transparent",
+		padding: "0.375rem 0.75rem",
+		borderRadius: "0.375rem",
+		cursor: "pointer",
+		outline: "none",
+		border: "none"
+	},
+	buttonHover: { backgroundColor: "#f9fafb" },
+	dropdown: {
+		position: "absolute",
+		left: "0",
+		zIndex: 10,
+		marginTop: "4px",
+		borderRadius: "8px",
+		width: "125px",
+		backgroundColor: "white",
+		boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
+		border: "1px solid rgba(0, 0, 0, 0.05)"
+	},
+	dropdownItem: {
+		display: "flex",
+		width: "100%",
+		alignItems: "center",
+		padding: "4px 8px",
+		fontSize: "12px",
+		cursor: "pointer",
+		border: "none",
+		backgroundColor: "transparent",
+		textAlign: "left"
+	},
+	dropdownItemHover: { backgroundColor: "#EBEEF6" },
+	container: {
+		marginLeft: "-1rem",
+		position: "relative"
+	}
+};
+const getBadgeStyles = (variant) => {
+	let backgroundColor;
+	let textColor;
+	switch (variant) {
+		case "p0":
+			backgroundColor = "#940F24";
+			textColor = "#F9E8EA";
+			break;
+		case "p1":
+			backgroundColor = "#F9E8EA";
+			textColor = "#940F24";
+			break;
+		case "p2":
+			backgroundColor = "#FEEBCB";
+			textColor = "#C05621";
+			break;
+		case "p3":
+			backgroundColor = "#E6F6F4";
+			textColor = "#007F6D";
+			break;
+		default:
+			backgroundColor = "#EBEEF6";
+			textColor = "#3C57AA";
+	}
+	return {
+		display: "inline-flex",
+		borderRadius: "4px",
+		backgroundColor,
+		color: textColor,
+		fontSize: "0.875rem",
+		paddingLeft: "0.625rem",
+		paddingRight: "0.625rem",
+		paddingTop: "0.25rem",
+		paddingBottom: "0.25rem"
+	};
+};
+function GenericSelect({ type, selectedKey, onSelect, buttonStyle = {}, menuStyle = {} }) {
+	const [isOpen, setIsOpen] = useState(false);
+	const [isHovering, setIsHovering] = useState(null);
+	const menuRef = useRef(null);
+	const dictionary = dictionaries[type];
+	const renderItem = (key, item) => {
+		const chipItem = item;
+		return /* @__PURE__ */ jsx("span", {
+			style: getBadgeStyles(key),
+			children: chipItem.label
+		});
+	};
+	React.useEffect(() => {
+		const handleClickOutside = (event) => {
+			const isOutside = menuRef.current && !menuRef.current.contains(event.target);
+			const path = event.composedPath ? event.composedPath() : [];
+			const isInPath = menuRef.current && path.includes(menuRef.current);
+			if (isOutside && !isInPath) setIsOpen(false);
+		};
+		document.addEventListener("mouseup", handleClickOutside, true);
+		return () => {
+			document.removeEventListener("mouseup", handleClickOutside, true);
+		};
+	}, [isOpen]);
+	if (!dictionary) {
+		console.error(`Invalid type "${type}".`);
+		return null;
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		style: styles.container,
+		ref: menuRef,
+		children: [/* @__PURE__ */ jsx("button", {
+			type: "button",
+			style: {
+				...styles.button,
+				...isHovering === "button" ? styles.buttonHover : {},
+				...buttonStyle
+			},
+			onClick: () => {
+				setIsOpen(!isOpen);
+			},
+			onMouseEnter: () => setIsHovering("button"),
+			onMouseLeave: () => setIsHovering(null),
+			children: dictionary[selectedKey] ? renderItem(selectedKey, dictionary[selectedKey]) : /* @__PURE__ */ jsx("span", {
+				style: { color: "#6b7280" },
+				children: `Select ${type.charAt(0).toUpperCase() + type.slice(1)}`
+			})
+		}), isOpen && /* @__PURE__ */ jsx("div", {
+			style: {
+				...styles.dropdown,
+				...menuStyle
+			},
+			children: /* @__PURE__ */ jsx("div", {
+				style: { padding: "0.25rem 0" },
+				children: Object.entries(dictionary).filter(([key]) => key !== selectedKey).map(([key, item]) => /* @__PURE__ */ jsx("button", {
+					type: "button",
+					style: {
+						...styles.dropdownItem,
+						...isHovering === key ? styles.dropdownItemHover : {}
+					},
+					onMouseEnter: () => setIsHovering(key),
+					onMouseLeave: () => setIsHovering(null),
+					onClick: (e) => {
+						e.stopPropagation();
+						if (onSelect) onSelect(key);
+						setIsOpen(false);
+					},
+					children: renderItem(key, item)
+				}, key))
+			})
+		})]
+	});
+}
+
+//#endregion
+export { GenericSelect };

package/dist/debug/MessageContent.cjs

@@ -0,0 +1,151 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_index = require('../node_modules/react-icons/fa/index.cjs');
+let react_jsx_runtime = require("react/jsx-runtime");
+let __envive_ai_react_hooks_application_models = require("@envive-ai/react-hooks/application/models");
+let classnames = require("classnames");
+classnames = require_rolldown_runtime.__toESM(classnames);
+let __envive_ai_react_toolkit_v3_ReviewCard = require("@envive-ai/react-toolkit-v3/ReviewCard");
+let __envive_ai_react_toolkit_v3_Message = require("@envive-ai/react-toolkit-v3/Message");
+
+//#region src/debug/MessageContent.tsx
+const textContentMessageTypes = new Set([
+	__envive_ai_react_hooks_application_models.MessageType.Text,
+	__envive_ai_react_hooks_application_models.MessageType.QueryTyped,
+	__envive_ai_react_hooks_application_models.MessageType.SuggestionClicked,
+	__envive_ai_react_hooks_application_models.MessageType.CXAgentResponse
+]);
+const containerClassNames = (0, classnames.default)({
+	"envive-tw-flex": true,
+	"envive-tw-flex-col": true,
+	"envive-tw-gap-1": true
+});
+const fontSemiboldClassNames = (0, classnames.default)({ "envive-tw-font-semibold": true });
+const flexItemsClassNames = (0, classnames.default)({
+	"envive-tw-flex": true,
+	"envive-tw-items-center": true
+});
+const gap1ClassNames = (0, classnames.default)({ "envive-tw-gap-1": true });
+const textLinkClassNames = (0, classnames.default)({
+	"envive-tw-text-[--spiffy-colors-text-link]": true,
+	"envive-tw-underline": true
+});
+const textLgClassNames = (0, classnames.default)({ "envive-tw-text-lg": true });
+const iconClassNames = (0, classnames.default)({
+	"envive-tw-w-3": true,
+	"envive-tw-h-3": true
+});
+const MessageContent = ({ message: m }) => {
+	if (textContentMessageTypes.has(m.type)) {
+		if (m.type === __envive_ai_react_hooks_application_models.MessageType.Text) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_Message.Message, { content: m.metadata.content }, m.id);
+		if (m.type === __envive_ai_react_hooks_application_models.MessageType.QueryTyped) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_Message.Message, { content: m.metadata.content }, m.id);
+		if (m.type === __envive_ai_react_hooks_application_models.MessageType.SuggestionClicked) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_Message.Message, { content: m.metadata.suggestionContent }, m.id);
+		if (m.type === __envive_ai_react_hooks_application_models.MessageType.CXAgentResponse) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_Message.Message, { content: m.metadata.message }, m.id);
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_Message.Message, { content: "unknown" }, m.id);
+	}
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Product) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, classnames.default)(flexItemsClassNames, gap1ClassNames, "envive-tw-text-sm"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaTag, { className: iconClassNames }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+			href: m.metadata.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: textLinkClassNames,
+			children: m.metadata.title
+		})]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Review) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__envive_ai_react_toolkit_v3_ReviewCard.ReviewCard, {
+		name: m.metadata?.reviewer ?? "",
+		rating: m.metadata?.stars ?? 0,
+		reviewText: m.metadata?.review ?? ""
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Separator) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "envive-tw-relative envive-tw-flex envive-tw-w-full envive-tw-items-center envive-tw-p-2",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "envive-tw-flex-shrink envive-tw-px-4 envive-tw-text-sm envive-tw-text-gray-500",
+				children: "New Discussion"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" })
+		]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Page) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaFile, { className: iconClassNames }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: (0, classnames.default)(textLgClassNames, fontSemiboldClassNames),
+				children: m.metadata?.title
+			})]
+		}), m.metadata?.url && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaLink, { className: iconClassNames }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				href: m.metadata.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: textLinkClassNames,
+				children: m.metadata.url
+			})]
+		})]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Search) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaSearch, { className: iconClassNames }), " Search"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: m.metadata?.searchTerm })]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Attachment) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaPaperclip, { className: iconClassNames }), " Attachment"]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: m.metadata?.message }),
+			m.metadata?.attachment.map((attachment) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				href: attachment.url ?? "",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: textLinkClassNames,
+				children: attachment.name
+			}) }, attachment.id))
+		]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Form) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaPaperclip, { className: iconClassNames }), " Form Request"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: m.metadata?.formType })]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.ProductSearch) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaPaperclip, { className: iconClassNames }), " Product Search Results"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [
+			m.metadata?.generatedQuery,
+			" - ",
+			m.metadata?.productCount,
+			" results"
+		] })]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.ProductSearchFilter) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaPaperclip, { className: iconClassNames }), " Product Search Filter"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["Filter: ", m.metadata?.filterName] })]
+	});
+	if (m.type === __envive_ai_react_hooks_application_models.MessageType.Order) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, classnames.default)(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.FaPaperclip, { className: iconClassNames }), " Order Information"]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: ["OrderNumber: ", m.metadata?.orderNumber] })]
+	});
+	throw new Error(`Unsupported message type: ${JSON.stringify(m)}`);
+};
+
+//#endregion
+exports.MessageContent = MessageContent;

package/dist/debug/MessageContent.js

@@ -0,0 +1,149 @@
+import { FaFile, FaLink, FaPaperclip, FaSearch, FaTag } from "../node_modules/react-icons/fa/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageType } from "@envive-ai/react-hooks/application/models";
+import classNames from "classnames";
+import { ReviewCard } from "@envive-ai/react-toolkit-v3/ReviewCard";
+import { Message } from "@envive-ai/react-toolkit-v3/Message";
+
+//#region src/debug/MessageContent.tsx
+const textContentMessageTypes = new Set([
+	MessageType.Text,
+	MessageType.QueryTyped,
+	MessageType.SuggestionClicked,
+	MessageType.CXAgentResponse
+]);
+const containerClassNames = classNames({
+	"envive-tw-flex": true,
+	"envive-tw-flex-col": true,
+	"envive-tw-gap-1": true
+});
+const fontSemiboldClassNames = classNames({ "envive-tw-font-semibold": true });
+const flexItemsClassNames = classNames({
+	"envive-tw-flex": true,
+	"envive-tw-items-center": true
+});
+const gap1ClassNames = classNames({ "envive-tw-gap-1": true });
+const textLinkClassNames = classNames({
+	"envive-tw-text-[--spiffy-colors-text-link]": true,
+	"envive-tw-underline": true
+});
+const textLgClassNames = classNames({ "envive-tw-text-lg": true });
+const iconClassNames = classNames({
+	"envive-tw-w-3": true,
+	"envive-tw-h-3": true
+});
+const MessageContent = ({ message: m }) => {
+	if (textContentMessageTypes.has(m.type)) {
+		if (m.type === MessageType.Text) return /* @__PURE__ */ jsx(Message, { content: m.metadata.content }, m.id);
+		if (m.type === MessageType.QueryTyped) return /* @__PURE__ */ jsx(Message, { content: m.metadata.content }, m.id);
+		if (m.type === MessageType.SuggestionClicked) return /* @__PURE__ */ jsx(Message, { content: m.metadata.suggestionContent }, m.id);
+		if (m.type === MessageType.CXAgentResponse) return /* @__PURE__ */ jsx(Message, { content: m.metadata.message }, m.id);
+		return /* @__PURE__ */ jsx(Message, { content: "unknown" }, m.id);
+	}
+	if (m.type === MessageType.Product) return /* @__PURE__ */ jsxs("div", {
+		className: classNames(flexItemsClassNames, gap1ClassNames, "envive-tw-text-sm"),
+		children: [/* @__PURE__ */ jsx(FaTag, { className: iconClassNames }), /* @__PURE__ */ jsx("a", {
+			href: m.metadata.url,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: textLinkClassNames,
+			children: m.metadata.title
+		})]
+	});
+	if (m.type === MessageType.Review) return /* @__PURE__ */ jsx(ReviewCard, {
+		name: m.metadata?.reviewer ?? "",
+		rating: m.metadata?.stars ?? 0,
+		reviewText: m.metadata?.review ?? ""
+	});
+	if (m.type === MessageType.Separator) return /* @__PURE__ */ jsxs("div", {
+		className: "envive-tw-relative envive-tw-flex envive-tw-w-full envive-tw-items-center envive-tw-p-2",
+		children: [
+			/* @__PURE__ */ jsx("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" }),
+			/* @__PURE__ */ jsx("span", {
+				className: "envive-tw-flex-shrink envive-tw-px-4 envive-tw-text-sm envive-tw-text-gray-500",
+				children: "New Discussion"
+			}),
+			/* @__PURE__ */ jsx("div", { className: "envive-tw-flex-grow envive-tw-border-t envive-tw-border-gray-500" })
+		]
+	});
+	if (m.type === MessageType.Page) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaFile, { className: iconClassNames }), /* @__PURE__ */ jsx("span", {
+				className: classNames(textLgClassNames, fontSemiboldClassNames),
+				children: m.metadata?.title
+			})]
+		}), m.metadata?.url && /* @__PURE__ */ jsxs("div", {
+			className: classNames(flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaLink, { className: iconClassNames }), /* @__PURE__ */ jsx("a", {
+				href: m.metadata.url,
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: textLinkClassNames,
+				children: m.metadata.url
+			})]
+		})]
+	});
+	if (m.type === MessageType.Search) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaSearch, { className: iconClassNames }), " Search"]
+		}), /* @__PURE__ */ jsx("div", { children: m.metadata?.searchTerm })]
+	});
+	if (m.type === MessageType.Attachment) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+				children: [/* @__PURE__ */ jsx(FaPaperclip, { className: iconClassNames }), " Attachment"]
+			}),
+			/* @__PURE__ */ jsx("div", { children: m.metadata?.message }),
+			m.metadata?.attachment.map((attachment) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("a", {
+				href: attachment.url ?? "",
+				target: "_blank",
+				rel: "noopener noreferrer",
+				className: textLinkClassNames,
+				children: attachment.name
+			}) }, attachment.id))
+		]
+	});
+	if (m.type === MessageType.Form) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaPaperclip, { className: iconClassNames }), " Form Request"]
+		}), /* @__PURE__ */ jsx("div", { children: m.metadata?.formType })]
+	});
+	if (m.type === MessageType.ProductSearch) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaPaperclip, { className: iconClassNames }), " Product Search Results"]
+		}), /* @__PURE__ */ jsxs("div", { children: [
+			m.metadata?.generatedQuery,
+			" - ",
+			m.metadata?.productCount,
+			" results"
+		] })]
+	});
+	if (m.type === MessageType.ProductSearchFilter) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaPaperclip, { className: iconClassNames }), " Product Search Filter"]
+		}), /* @__PURE__ */ jsxs("div", { children: ["Filter: ", m.metadata?.filterName] })]
+	});
+	if (m.type === MessageType.Order) return /* @__PURE__ */ jsxs("div", {
+		className: containerClassNames,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classNames(fontSemiboldClassNames, flexItemsClassNames, gap1ClassNames),
+			children: [/* @__PURE__ */ jsx(FaPaperclip, { className: iconClassNames }), " Order Information"]
+		}), /* @__PURE__ */ jsxs("div", { children: ["OrderNumber: ", m.metadata?.orderNumber] })]
+	});
+	throw new Error(`Unsupported message type: ${JSON.stringify(m)}`);
+};
+
+//#endregion
+export { MessageContent };