@cossistant/react 0.0.1

package/primitives/button.d.ts

@@ -0,0 +1,19 @@
+import * as React$1 from "react";
+
+//#region src/primitives/button.d.ts
+type ButtonProps = React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Thin wrapper over a `<button>` that supports `asChild` composition so the
+ * primitives can be slotted into external design systems without losing
+ * semantics.
+ */
+declare const Button: React$1.ForwardRefExoticComponent<React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { Button, ButtonProps };
+//# sourceMappingURL=button.d.ts.map

package/primitives/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","names":[],"sources":["../../src/primitives/button.tsx"],"sourcesContent":[],"mappings":";;;KAGY,WAAA,GAAc,OAAA,CAAM,qBAAqB;;EAAzC,SAAA,CAAA,EAAA,MAAW;CAAA;;;;AAUvB;;AAAmB,cAAN,MAAM,EAAA,OAAA,CAAA,yBAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,iBAAA,CAAA,GAAA;SAAA,CAAA,EAAA,OAAA"}

package/primitives/button.js

@@ -0,0 +1,27 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+
+//#region src/primitives/button.tsx
+/**
+* Thin wrapper over a `<button>` that supports `asChild` composition so the
+* primitives can be slotted into external design systems without losing
+* semantics.
+*/
+const Button = (() => {
+	const Component = React$1.forwardRef(({ className, asChild = false,...props }, ref) => useRenderElement("button", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			type: "button",
+			...props
+		}
+	}));
+	Component.displayName = "Button";
+	return Component;
+})();
+
+//#endregion
+export { Button };
+//# sourceMappingURL=button.js.map

package/primitives/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","names":["React"],"sources":["../../src/primitives/button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Thin wrapper over a `<button>` that supports `asChild` composition so the\n * primitives can be slotted into external design systems without losing\n * semantics.\n */\nexport const Button = (() => {\n\tconst Component = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t\t({ className, asChild = false, ...props }, ref) =>\n\t\t\tuseRenderElement(\n\t\t\t\t\"button\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\ttype: \"button\",\n\t\t\t\t\t\t...props,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t)\n\t);\n\n\tComponent.displayName = \"Button\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;;AAaA,MAAa,gBAAgB;CAC5B,MAAM,YAAYA,QAAM,YACtB,EAAE,WAAW,UAAU,MAAO,GAAG,SAAS,QAC1C,iBACC,UACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,GAAG;GACH;EACD,CACD,CACF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/conversation-timeline.d.ts

@@ -0,0 +1,86 @@
+import { TimelineItem } from "../timeline-item.js";
+import * as React$1 from "react";
+
+//#region src/primitives/conversation-timeline.d.ts
+
+/**
+ * High-level state of the timeline handed to render-prop children so they can show
+ * skeletons, empty states or pagination affordances.
+ */
+type ConversationTimelineRenderProps = {
+  itemCount: number;
+  isLoading?: boolean;
+  hasMore?: boolean;
+  isEmpty: boolean;
+};
+type ConversationTimelineProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: ConversationTimelineRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  items?: TimelineItem[];
+  isLoading?: boolean;
+  hasMore?: boolean;
+  autoScroll?: boolean;
+  onScrollEnd?: () => void;
+  onScrollStart?: () => void;
+};
+/**
+ * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and
+ * pagination callbacks for displaying timeline items (messages, events, etc.).
+ */
+declare const ConversationTimeline: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode | ((props: ConversationTimelineRenderProps) => React$1.ReactNode);
+  asChild?: boolean;
+  className?: string;
+  items?: TimelineItem[];
+  isLoading?: boolean;
+  hasMore?: boolean;
+  autoScroll?: boolean;
+  onScrollEnd?: () => void;
+  onScrollStart?: () => void;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type ConversationTimelineContainerProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Wrapper around the scrollable timeline giving consumers an easy hook to add
+ * padding, backgrounds or transitions without touching the core timeline logic.
+ */
+declare const ConversationTimelineContainer: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type ConversationTimelineLoadingProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Accessible status region for loading more timeline items. Lets host apps render
+ * skeletons or shimmer states without reimplementing ARIA wiring.
+ */
+declare const ConversationTimelineLoading: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+type ConversationTimelineEmptyProps = Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+};
+/**
+ * Placeholder state rendered when no timeline items are present. Uses a polite status
+ * region so screen readers announce the empty state.
+ */
+declare const ConversationTimelineEmpty: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement>, "children"> & {
+  children?: React$1.ReactNode;
+  asChild?: boolean;
+  className?: string;
+} & React$1.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineContainerProps, ConversationTimelineEmpty, ConversationTimelineEmptyProps, ConversationTimelineLoading, ConversationTimelineLoadingProps, ConversationTimelineProps, ConversationTimelineRenderProps };
+//# sourceMappingURL=conversation-timeline.d.ts.map

package/primitives/conversation-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-timeline.d.ts","names":[],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":[],"mappings":"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"}

package/primitives/conversation-timeline.js

@@ -0,0 +1,119 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+
+//#region src/primitives/conversation-timeline.tsx
+/**
+* Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and
+* pagination callbacks for displaying timeline items (messages, events, etc.).
+*/
+const ConversationTimeline = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false, items = [], isLoading = false, hasMore = false, autoScroll = true, onScrollEnd, onScrollStart,...props }, ref) => {
+		const internalRef = React$1.useRef(null);
+		const setRefs = React$1.useCallback((node) => {
+			internalRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		}, [ref]);
+		const isInitialRender = React$1.useRef(true);
+		const previousItemCount = React$1.useRef(items.length);
+		const renderProps = {
+			itemCount: items.length,
+			isLoading,
+			hasMore,
+			isEmpty: items.length === 0
+		};
+		const content = typeof children === "function" ? children(renderProps) : children;
+		React$1.useEffect(() => {
+			if (autoScroll && internalRef.current) {
+				if (items.length > previousItemCount.current || isInitialRender.current) internalRef.current.scrollTop = internalRef.current.scrollHeight;
+				previousItemCount.current = items.length;
+				isInitialRender.current = false;
+			}
+		}, [items.length, autoScroll]);
+		const handleScroll = React$1.useCallback((e) => {
+			const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
+			if (scrollTop === 0 && onScrollStart) onScrollStart();
+			if (scrollTop + clientHeight >= scrollHeight - 10 && onScrollEnd) onScrollEnd();
+		}, [onScrollStart, onScrollEnd]);
+		return useRenderElement("div", {
+			className,
+			asChild
+		}, {
+			ref: setRefs,
+			state: renderProps,
+			props: {
+				role: "log",
+				"aria-label": "Conversation timeline",
+				"aria-live": "polite",
+				"aria-relevant": "additions",
+				onScroll: handleScroll,
+				...props,
+				children: content
+			}
+		});
+	});
+	Component.displayName = "ConversationTimeline";
+	return Component;
+})();
+/**
+* Wrapper around the scrollable timeline giving consumers an easy hook to add
+* padding, backgrounds or transitions without touching the core timeline logic.
+*/
+const ConversationTimelineContainer = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "ConversationTimelineContainer";
+	return Component;
+})();
+/**
+* Accessible status region for loading more timeline items. Lets host apps render
+* skeletons or shimmer states without reimplementing ARIA wiring.
+*/
+const ConversationTimelineLoading = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			role: "status",
+			"aria-label": "Loading timeline items",
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "ConversationTimelineLoading";
+	return Component;
+})();
+/**
+* Placeholder state rendered when no timeline items are present. Uses a polite status
+* region so screen readers announce the empty state.
+*/
+const ConversationTimelineEmpty = (() => {
+	const Component = React$1.forwardRef(({ children, className, asChild = false,...props }, ref) => useRenderElement("div", {
+		className,
+		asChild
+	}, {
+		ref,
+		props: {
+			role: "status",
+			"aria-label": "No timeline items",
+			...props,
+			children
+		}
+	}));
+	Component.displayName = "ConversationTimelineEmpty";
+	return Component;
+})();
+
+//#endregion
+export { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading };
+//# sourceMappingURL=conversation-timeline.js.map

package/primitives/conversation-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conversation-timeline.js","names":["React","renderProps: ConversationTimelineRenderProps"],"sources":["../../src/primitives/conversation-timeline.tsx"],"sourcesContent":["import type { TimelineItem as TimelineItemType } from \"@cossistant/types/api/timeline-item\";\nimport * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\n/**\n * High-level state of the timeline handed to render-prop children so they can show\n * skeletons, empty states or pagination affordances.\n */\nexport type ConversationTimelineRenderProps = {\n\titemCount: number;\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tisEmpty: boolean;\n};\n\nexport type ConversationTimelineProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?:\n\t\t| React.ReactNode\n\t\t| ((props: ConversationTimelineRenderProps) => React.ReactNode);\n\tasChild?: boolean;\n\tclassName?: string;\n\titems?: TimelineItemType[];\n\tisLoading?: boolean;\n\thasMore?: boolean;\n\tautoScroll?: boolean;\n\tonScrollEnd?: () => void;\n\tonScrollStart?: () => void;\n};\n\n/**\n * Scrollable conversation timeline that wires auto-scroll behaviour, live-region semantics and\n * pagination callbacks for displaying timeline items (messages, events, etc.).\n */\nexport const ConversationTimeline = (() => {\n\tconst Component = React.forwardRef<HTMLDivElement, ConversationTimelineProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tchildren,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\titems = [],\n\t\t\t\tisLoading = false,\n\t\t\t\thasMore = false,\n\t\t\t\tautoScroll = true,\n\t\t\t\tonScrollEnd,\n\t\t\t\tonScrollStart,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst internalRef = React.useRef<HTMLDivElement>(null);\n\t\t\tconst setRefs = React.useCallback(\n\t\t\t\t(node: HTMLDivElement | null) => {\n\t\t\t\t\tinternalRef.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t(ref as React.MutableRefObject<HTMLDivElement | null>).current =\n\t\t\t\t\t\t\tnode;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[ref]\n\t\t\t);\n\n\t\t\tconst isInitialRender = React.useRef(true);\n\t\t\tconst previousItemCount = React.useRef(items.length);\n\n\t\t\tconst renderProps: ConversationTimelineRenderProps = {\n\t\t\t\titemCount: items.length,\n\t\t\t\tisLoading,\n\t\t\t\thasMore,\n\t\t\t\tisEmpty: items.length === 0,\n\t\t\t};\n\n\t\t\tconst content =\n\t\t\t\ttypeof children === \"function\" ? children(renderProps) : children;\n\n\t\t\t// Auto-scroll to bottom when new timeline items are added\n\t\t\tReact.useEffect(() => {\n\t\t\t\tif (autoScroll && internalRef.current) {\n\t\t\t\t\tconst hasNewItems = items.length > previousItemCount.current;\n\n\t\t\t\t\t// Only scroll if there are new items or it's the first render\n\t\t\t\t\tif (hasNewItems || isInitialRender.current) {\n\t\t\t\t\t\tinternalRef.current.scrollTop = internalRef.current.scrollHeight;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Update refs for next render\n\t\t\t\t\tpreviousItemCount.current = items.length;\n\t\t\t\t\tisInitialRender.current = false;\n\t\t\t\t}\n\t\t\t}, [items.length, autoScroll]);\n\n\t\t\t// Handle scroll events for infinite scrolling\n\t\t\tconst handleScroll = React.useCallback(\n\t\t\t\t(e: React.UIEvent<HTMLDivElement>) => {\n\t\t\t\t\tconst element = e.currentTarget;\n\t\t\t\t\tconst { scrollTop, scrollHeight, clientHeight } = element;\n\n\t\t\t\t\t// Check if scrolled to top\n\t\t\t\t\tif (scrollTop === 0 && onScrollStart) {\n\t\t\t\t\t\tonScrollStart();\n\t\t\t\t\t}\n\n\t\t\t\t\t// Check if scrolled to bottom\n\t\t\t\t\tif (scrollTop + clientHeight >= scrollHeight - 10 && onScrollEnd) {\n\t\t\t\t\t\tonScrollEnd();\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\t[onScrollStart, onScrollEnd]\n\t\t\t);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"div\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: setRefs,\n\t\t\t\t\tstate: renderProps,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\trole: \"log\",\n\t\t\t\t\t\t\"aria-label\": \"Conversation timeline\",\n\t\t\t\t\t\t\"aria-live\": \"polite\",\n\t\t\t\t\t\t\"aria-relevant\": \"additions\",\n\t\t\t\t\t\tonScroll: handleScroll,\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tchildren: content,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"ConversationTimeline\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineContainerProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Wrapper around the scrollable timeline giving consumers an easy hook to add\n * padding, backgrounds or transitions without touching the core timeline logic.\n */\nexport const ConversationTimelineContainer = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineContainerProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineContainer\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineLoadingProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Accessible status region for loading more timeline items. Lets host apps render\n * skeletons or shimmer states without reimplementing ARIA wiring.\n */\nexport const ConversationTimelineLoading = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineLoadingProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"Loading timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineLoading\";\n\treturn Component;\n})();\n\nexport type ConversationTimelineEmptyProps = Omit<\n\tReact.HTMLAttributes<HTMLDivElement>,\n\t\"children\"\n> & {\n\tchildren?: React.ReactNode;\n\tasChild?: boolean;\n\tclassName?: string;\n};\n\n/**\n * Placeholder state rendered when no timeline items are present. Uses a polite status\n * region so screen readers announce the empty state.\n */\nexport const ConversationTimelineEmpty = (() => {\n\tconst Component = React.forwardRef<\n\t\tHTMLDivElement,\n\t\tConversationTimelineEmptyProps\n\t>(({ children, className, asChild = false, ...props }, ref) =>\n\t\tuseRenderElement(\n\t\t\t\"div\",\n\t\t\t{\n\t\t\t\tclassName,\n\t\t\t\tasChild,\n\t\t\t},\n\t\t\t{\n\t\t\t\tref,\n\t\t\t\tprops: {\n\t\t\t\t\trole: \"status\",\n\t\t\t\t\t\"aria-label\": \"No timeline items\",\n\t\t\t\t\t...props,\n\t\t\t\t\tchildren,\n\t\t\t\t},\n\t\t\t}\n\t\t)\n\t);\n\n\tComponent.displayName = \"ConversationTimelineEmpty\";\n\treturn Component;\n})();\n"],"mappings":";;;;;;;;AAoCA,MAAa,8BAA8B;CAC1C,MAAM,YAAYA,QAAM,YAEtB,EACC,UACA,WACA,UAAU,OACV,QAAQ,EAAE,EACV,YAAY,OACZ,UAAU,OACV,aAAa,MACb,aACA,cACA,GAAG,SAEJ,QACI;EACJ,MAAM,cAAcA,QAAM,OAAuB,KAAK;EACtD,MAAM,UAAUA,QAAM,aACpB,SAAgC;AAChC,eAAY,UAAU;AACtB,OAAI,OAAO,QAAQ,WAClB,KAAI,KAAK;YACC,IACV,CAAC,IAAsD,UACtD;KAGH,CAAC,IAAI,CACL;EAED,MAAM,kBAAkBA,QAAM,OAAO,KAAK;EAC1C,MAAM,oBAAoBA,QAAM,OAAO,MAAM,OAAO;EAEpD,MAAMC,cAA+C;GACpD,WAAW,MAAM;GACjB;GACA;GACA,SAAS,MAAM,WAAW;GAC1B;EAED,MAAM,UACL,OAAO,aAAa,aAAa,SAAS,YAAY,GAAG;AAG1D,UAAM,gBAAgB;AACrB,OAAI,cAAc,YAAY,SAAS;AAItC,QAHoB,MAAM,SAAS,kBAAkB,WAGlC,gBAAgB,QAClC,aAAY,QAAQ,YAAY,YAAY,QAAQ;AAIrD,sBAAkB,UAAU,MAAM;AAClC,oBAAgB,UAAU;;KAEzB,CAAC,MAAM,QAAQ,WAAW,CAAC;EAG9B,MAAM,eAAeD,QAAM,aACzB,MAAqC;GAErC,MAAM,EAAE,WAAW,cAAc,iBADjB,EAAE;AAIlB,OAAI,cAAc,KAAK,cACtB,gBAAe;AAIhB,OAAI,YAAY,gBAAgB,eAAe,MAAM,YACpD,cAAa;KAGf,CAAC,eAAe,YAAY,CAC5B;AAED,SAAO,iBACN,OACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;GACP,OAAO;IACN,MAAM;IACN,cAAc;IACd,aAAa;IACb,iBAAiB;IACjB,UAAU;IACV,GAAG;IACH,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,uCAAuC;CACnD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,qCAAqC;CACjD,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAeJ,MAAa,mCAAmC;CAC/C,MAAM,YAAYA,QAAM,YAGrB,EAAE,UAAU,WAAW,UAAU,MAAO,GAAG,SAAS,QACtD,iBACC,OACA;EACC;EACA;EACA,EACD;EACC;EACA,OAAO;GACN,MAAM;GACN,cAAc;GACd,GAAG;GACH;GACA;EACD,CACD,CACD;AAED,WAAU,cAAc;AACxB,QAAO;IACJ"}

package/primitives/index.d.ts

@@ -0,0 +1,20 @@
+import { TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType } from "../support/components/typing-indicator.js";
+import { SupportConfig } from "../support-config.js";
+import { Avatar } from "./avatar/avatar.js";
+import { AvatarFallback } from "./avatar/fallback.js";
+import { AvatarImage } from "./avatar/image.js";
+import { SupportBubble } from "./bubble.js";
+import { Button } from "./button.js";
+import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
+import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
+import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
+import { SupportWindow } from "./window.js";
+
+//#region src/primitives/index.d.ts
+declare namespace index_d_exports {
+  export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window };
+}
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType, SupportWindow as Window, index_d_exports };
+//# sourceMappingURL=index.d.ts.map

package/primitives/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../src/primitives/index.ts"],"sourcesContent":[],"mappings":""}

package/primitives/index.js

@@ -0,0 +1,45 @@
+import { __export } from "../_virtual/rolldown_runtime.js";
+import { SupportConfig } from "../support-config.js";
+import { Avatar } from "./avatar/avatar.js";
+import { AvatarFallback } from "./avatar/fallback.js";
+import { AvatarImage } from "./avatar/image.js";
+import { TypingIndicator } from "../support/components/typing-indicator.js";
+import { SupportBubble } from "./bubble.js";
+import { Button } from "./button.js";
+import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
+import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
+import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
+import { SupportWindow } from "./window.js";
+
+//#region src/primitives/index.ts
+var primitives_exports = /* @__PURE__ */ __export({
+	Avatar: () => Avatar,
+	AvatarFallback: () => AvatarFallback,
+	AvatarImage: () => AvatarImage,
+	Bubble: () => SupportBubble,
+	Button: () => Button,
+	Config: () => SupportConfig,
+	ConversationTimeline: () => ConversationTimeline,
+	ConversationTimelineContainer: () => ConversationTimelineContainer,
+	ConversationTimelineEmpty: () => ConversationTimelineEmpty,
+	ConversationTimelineLoading: () => ConversationTimelineLoading,
+	FileInput: () => FileInput,
+	Input: () => SupportInput,
+	MultimodalInput: () => MultimodalInput,
+	TimelineItem: () => TimelineItem,
+	TimelineItemContent: () => TimelineItemContent,
+	TimelineItemGroup: () => TimelineItemGroup,
+	TimelineItemGroupAvatar: () => TimelineItemGroupAvatar,
+	TimelineItemGroupContent: () => TimelineItemGroupContent,
+	TimelineItemGroupHeader: () => TimelineItemGroupHeader,
+	TimelineItemGroupReadIndicator: () => TimelineItemGroupReadIndicator,
+	TimelineItemGroupSeenIndicator: () => TimelineItemGroupSeenIndicator,
+	TimelineItemTimestamp: () => TimelineItemTimestamp,
+	TypingIndicator: () => TypingIndicator,
+	Window: () => SupportWindow
+});
+
+//#endregion
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window, primitives_exports };
+//# sourceMappingURL=index.js.map

package/primitives/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/primitives/index.ts"],"sourcesContent":["export * from \"./index.parts\";\n"],"mappings":""}

package/primitives/index.parts.d.ts

@@ -0,0 +1,13 @@
+import { TypingIndicator, TypingIndicatorProps, TypingParticipant, TypingParticipantType } from "../support/components/typing-indicator.js";
+import { SupportConfig } from "../support-config.js";
+import { Avatar } from "./avatar/avatar.js";
+import { AvatarFallback } from "./avatar/fallback.js";
+import { AvatarImage } from "./avatar/image.js";
+import { SupportBubble } from "./bubble.js";
+import { Button } from "./button.js";
+import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
+import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
+import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
+import { SupportWindow } from "./window.js";
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, type TypingIndicatorProps, type TypingParticipant, type TypingParticipantType, SupportWindow as Window };

package/primitives/index.parts.js

@@ -0,0 +1,14 @@
+import { SupportConfig } from "../support-config.js";
+import { Avatar } from "./avatar/avatar.js";
+import { AvatarFallback } from "./avatar/fallback.js";
+import { AvatarImage } from "./avatar/image.js";
+import { TypingIndicator } from "../support/components/typing-indicator.js";
+import { SupportBubble } from "./bubble.js";
+import { Button } from "./button.js";
+import { ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading } from "./conversation-timeline.js";
+import { FileInput, MultimodalInput, SupportInput } from "./multimodal-input.js";
+import { TimelineItem, TimelineItemContent, TimelineItemTimestamp } from "./timeline-item.js";
+import { TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator } from "./timeline-item-group.js";
+import { SupportWindow } from "./window.js";
+
+export { Avatar, AvatarFallback, AvatarImage, SupportBubble as Bubble, Button, SupportConfig as Config, ConversationTimeline, ConversationTimelineContainer, ConversationTimelineEmpty, ConversationTimelineLoading, FileInput, SupportInput as Input, MultimodalInput, TimelineItem, TimelineItemContent, TimelineItemGroup, TimelineItemGroupAvatar, TimelineItemGroupContent, TimelineItemGroupHeader, TimelineItemGroupReadIndicator, TimelineItemGroupSeenIndicator, TimelineItemTimestamp, TypingIndicator, SupportWindow as Window };

package/primitives/multimodal-input.d.ts

@@ -0,0 +1,53 @@
+import * as React$1 from "react";
+
+//#region src/primitives/multimodal-input.d.ts
+type MultimodalInputProps = Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  onFileSelect?: (files: File[]) => void;
+  asChild?: boolean;
+  className?: string;
+  error?: Error | null;
+  disabled?: boolean;
+};
+/**
+ * Textarea tailored for support conversations. Handles keyboard submit,
+ * clipboard uploads and auto-resizing while remaining composable via
+ * `asChild`.
+ */
+declare const MultimodalInput: React$1.ForwardRefExoticComponent<Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  onFileSelect?: (files: File[]) => void;
+  asChild?: boolean;
+  className?: string;
+  error?: Error | null;
+  disabled?: boolean;
+} & React$1.RefAttributes<HTMLTextAreaElement>>;
+type FileInputProps = React$1.InputHTMLAttributes<HTMLInputElement> & {
+  onFileSelect?: (files: File[]) => void;
+  asChild?: boolean;
+};
+/**
+ * Hidden file selector that feeds uploads back into the multimodal input when
+ * chat UIs want an explicit attachment button.
+ */
+declare const FileInput: React$1.ForwardRefExoticComponent<React$1.InputHTMLAttributes<HTMLInputElement> & {
+  onFileSelect?: (files: File[]) => void;
+  asChild?: boolean;
+} & React$1.RefAttributes<HTMLInputElement>>;
+declare const SupportInput: React$1.ForwardRefExoticComponent<Omit<React$1.TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  onFileSelect?: (files: File[]) => void;
+  asChild?: boolean;
+  className?: string;
+  error?: Error | null;
+  disabled?: boolean;
+} & React$1.RefAttributes<HTMLTextAreaElement>>;
+//#endregion
+export { FileInput, FileInputProps, MultimodalInput, MultimodalInputProps, SupportInput };
+//# sourceMappingURL=multimodal-input.d.ts.map

package/primitives/multimodal-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multimodal-input.d.ts","names":[],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":[],"mappings":";;;KAGY,oBAAA,GAAuB,KAClC,OAAA,CAAM,uBAAuB;;EADlB,QAAA,EAAA,CAAA,KAAA,EAAA,MAAoB,EAAA,GAAA,IAAA;EAAA,QAAA,CAAA,EAAA,GAAA,GAAA,IAAA;cACF,CAAA,EAAA,CAAA,KAAA,EAMN,IANM,EAAA,EAAA,GAAA,IAAA;SAA7B,CAAA,EAAA,OAAM;WAD4B,CAAA,EAAA,MAAA;OAOX,CAAA,EAGf,KAHe,GAAA,IAAA;UAGf,CAAA,EAAA,OAAA;CAAK;AASd;;;;;AAZwB,cAYX,eAZW,EAYI,OAAA,CAAA,yBAZJ,CAYI,IAZJ,CAYI,OAAA,CAAA,sBAZJ,CAYI,mBAZJ,CAAA,EAAA,OAAA,GAAA,UAAA,CAAA,GAAA;OAGf,EAAA,MAAA;;;cASmB,CAAA,EAAA,CAAA,KAAA,EAZJ,IAYI,EAAA,EAAA,GAAA,IAAA;EAAA,OAAA,CAAA,EAAA,OAAA;EA4GhB,SAAA,CAAA,EAAA,MAAc;EAAA,KAAA,CAAA,EArHjB,KAqHiB,GAAA,IAAA;UAA6B,CAAA,EAAA,OAAA;yBAApB,oBAAA,CAAA,CAAA;AACX,KADZ,cAAA,GAAiB,OAAA,CAAM,mBACX,CAD+B,gBAC/B,CAAA,GAAA;EAAI,YAAA,CAAA,EAAA,CAAA,KAAA,EAAJ,IAAI,EAAA,EAAA,GAAA,IAAA;EAQf,OAAA,CAAA,EAAA,OAkCT;CAAA;;;;;cAlCS,WAAS,OAAA,CAAA,0BAAA,OAAA,CAAA,oBAAA;cAAA,CAAA,EAAA,CAAA,KAAA,EARE,IAQF,EAAA,EAAA,GAAA,IAAA;EAAA,OAAA,CAAA,EAAA,OAAA;AAqCtB,CAAA,wBAA2C,iBAAA,CAAA,CAAA;AAAA,cAA9B,YAA8B,EAAlB,OAAA,CAAA,yBAAkB,CAAlB,IAAkB,CAAlB,OAAA,CAAA,sBAAkB,CAAlB,mBAAkB,CAAA,EAAA,OAAA,GAAA,UAAA,CAAA,GAAA;OAAlB,EAAA,MAAA;UAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;UAAA,CAAA,EAAA,GAAA,GAAA,IAAA;cAtKD,CAAA,EAAA,CAAA,KAAA,EAAA,IAAA,EAAA,EAAA,GAAA,IAAA;SAGf,CAAA,EAAA,OAAA;;UAAA;UAmKgB,CAAA,EAAA,OAAA;CAAA,wBAAA,oBAAA,CAAA,CAAA"}

package/primitives/multimodal-input.js

@@ -0,0 +1,106 @@
+import { useRenderElement } from "../utils/use-render-element.js";
+import * as React$1 from "react";
+
+//#region src/primitives/multimodal-input.tsx
+/**
+* Textarea tailored for support conversations. Handles keyboard submit,
+* clipboard uploads and auto-resizing while remaining composable via
+* `asChild`.
+*/
+const MultimodalInput = (() => {
+	const Component = React$1.forwardRef(({ value, onChange, onSubmit, onFileSelect, className, asChild = false, error, disabled,...props }, ref) => {
+		const innerRef = React$1.useRef(null);
+		React$1.useImperativeHandle(ref, () => innerRef.current);
+		const handleChange = (e) => {
+			onChange(e.target.value);
+		};
+		const handleKeyDown = (e) => {
+			if (e.key === "Enter" && !e.shiftKey) {
+				e.preventDefault();
+				onSubmit?.();
+			}
+			props.onKeyDown?.(e);
+		};
+		const handlePaste = (e) => {
+			const items = Array.from(e.clipboardData.items);
+			const files = [];
+			for (const item of items) if (item.kind === "file") {
+				const file = item.getAsFile();
+				if (file) files.push(file);
+			}
+			if (files.length > 0 && onFileSelect) {
+				e.preventDefault();
+				onFileSelect(files);
+			}
+			props.onPaste?.(e);
+		};
+		React$1.useLayoutEffect(() => {
+			const el = innerRef.current;
+			if (!el) return;
+			el.style.height = "auto";
+			const originalOverflow = el.style.overflow;
+			el.style.overflow = "hidden";
+			el.style.height = `${el.scrollHeight}px`;
+			el.style.overflow = originalOverflow;
+		}, [value]);
+		return useRenderElement("textarea", {
+			className,
+			asChild
+		}, {
+			ref: innerRef,
+			props: {
+				...props,
+				value,
+				rows: 1,
+				onChange: handleChange,
+				onKeyDown: handleKeyDown,
+				onPaste: handlePaste,
+				disabled,
+				"aria-invalid": error ? "true" : void 0,
+				"aria-describedby": error ? "multimodal-input-error" : void 0,
+				style: {
+					...props.style,
+					minHeight: "1.5rem",
+					overflow: "hidden"
+				}
+			}
+		});
+	});
+	Component.displayName = "MultimodalInput";
+	return Component;
+})();
+/**
+* Hidden file selector that feeds uploads back into the multimodal input when
+* chat UIs want an explicit attachment button.
+*/
+const FileInput = (() => {
+	const Component = React$1.forwardRef(({ onFileSelect, asChild = false, className,...props }, ref) => {
+		const handleChange = (e) => {
+			const files = Array.from(e.target.files || []);
+			if (files.length > 0 && onFileSelect) {
+				onFileSelect(files);
+				e.target.value = "";
+			}
+			props.onChange?.(e);
+		};
+		return useRenderElement("input", {
+			className,
+			asChild
+		}, {
+			ref,
+			props: {
+				...props,
+				type: "file",
+				multiple: true,
+				onChange: handleChange
+			}
+		});
+	});
+	Component.displayName = "FileInput";
+	return Component;
+})();
+const SupportInput = MultimodalInput;
+
+//#endregion
+export { FileInput, MultimodalInput, SupportInput };
+//# sourceMappingURL=multimodal-input.js.map

package/primitives/multimodal-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"multimodal-input.js","names":["React","files: File[]"],"sources":["../../src/primitives/multimodal-input.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { useRenderElement } from \"../utils/use-render-element\";\n\nexport type MultimodalInputProps = Omit<\n\tReact.TextareaHTMLAttributes<HTMLTextAreaElement>,\n\t\"value\" | \"onChange\"\n> & {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tonSubmit?: () => void;\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n\tclassName?: string;\n\terror?: Error | null;\n\tdisabled?: boolean;\n};\n\n/**\n * Textarea tailored for support conversations. Handles keyboard submit,\n * clipboard uploads and auto-resizing while remaining composable via\n * `asChild`.\n */\nexport const MultimodalInput = (() => {\n\tconst Component = React.forwardRef<HTMLTextAreaElement, MultimodalInputProps>(\n\t\t(\n\t\t\t{\n\t\t\t\tvalue,\n\t\t\t\tonChange,\n\t\t\t\tonSubmit,\n\t\t\t\tonFileSelect,\n\t\t\t\tclassName,\n\t\t\t\tasChild = false,\n\t\t\t\terror,\n\t\t\t\tdisabled,\n\t\t\t\t...props\n\t\t\t},\n\t\t\tref\n\t\t) => {\n\t\t\tconst innerRef = React.useRef<HTMLTextAreaElement | null>(null);\n\n\t\t\tReact.useImperativeHandle(\n\t\t\t\tref,\n\t\t\t\t() => innerRef.current as HTMLTextAreaElement\n\t\t\t);\n\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n\t\t\t\tonChange(e.target.value);\n\t\t\t};\n\n\t\t\tconst handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tif (e.key === \"Enter\" && !e.shiftKey) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonSubmit?.();\n\t\t\t\t}\n\t\t\t\tprops.onKeyDown?.(e);\n\t\t\t};\n\n\t\t\t// Handle paste events for images\n\t\t\tconst handlePaste = (e: React.ClipboardEvent<HTMLTextAreaElement>) => {\n\t\t\t\tconst items = Array.from(e.clipboardData.items);\n\t\t\t\tconst files: File[] = [];\n\n\t\t\t\tfor (const item of items) {\n\t\t\t\t\tif (item.kind === \"file\") {\n\t\t\t\t\t\tconst file = item.getAsFile();\n\t\t\t\t\t\tif (file) {\n\t\t\t\t\t\t\tfiles.push(file);\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\te.preventDefault();\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t}\n\n\t\t\t\tprops.onPaste?.(e);\n\t\t\t};\n\n\t\t\t// Auto-resize\n\t\t\tReact.useLayoutEffect(() => {\n\t\t\t\tconst el = innerRef.current;\n\t\t\t\tif (!el) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Reset height to auto to get the correct scrollHeight\n\t\t\t\tel.style.height = \"auto\";\n\t\t\t\t// Ensure overflow is visible during measurement\n\t\t\t\tconst originalOverflow = el.style.overflow;\n\t\t\t\tel.style.overflow = \"hidden\";\n\t\t\t\t// Set the new height\n\t\t\t\tel.style.height = `${el.scrollHeight}px`;\n\t\t\t\t// Restore original overflow\n\t\t\t\tel.style.overflow = originalOverflow;\n\t\t\t}, [value]);\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"textarea\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref: innerRef,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\tvalue,\n\t\t\t\t\t\trows: 1,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t\tonKeyDown: handleKeyDown,\n\t\t\t\t\t\tonPaste: handlePaste,\n\t\t\t\t\t\tdisabled,\n\t\t\t\t\t\t\"aria-invalid\": error ? \"true\" : undefined,\n\t\t\t\t\t\t\"aria-describedby\": error ? \"multimodal-input-error\" : undefined,\n\t\t\t\t\t\tstyle: {\n\t\t\t\t\t\t\t...props.style,\n\t\t\t\t\t\t\tminHeight: \"1.5rem\",\n\t\t\t\t\t\t\toverflow: \"hidden\",\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"MultimodalInput\";\n\treturn Component;\n})();\n\n// File input component for multimodal input\nexport type FileInputProps = React.InputHTMLAttributes<HTMLInputElement> & {\n\tonFileSelect?: (files: File[]) => void;\n\tasChild?: boolean;\n};\n\n/**\n * Hidden file selector that feeds uploads back into the multimodal input when\n * chat UIs want an explicit attachment button.\n */\nexport const FileInput = (() => {\n\tconst Component = React.forwardRef<HTMLInputElement, FileInputProps>(\n\t\t({ onFileSelect, asChild = false, className, ...props }, ref) => {\n\t\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\t\tconst files = Array.from(e.target.files || []);\n\t\t\t\tif (files.length > 0 && onFileSelect) {\n\t\t\t\t\tonFileSelect(files);\n\t\t\t\t\t// Reset input to allow selecting the same file again\n\t\t\t\t\te.target.value = \"\";\n\t\t\t\t}\n\t\t\t\tprops.onChange?.(e);\n\t\t\t};\n\n\t\t\treturn useRenderElement(\n\t\t\t\t\"input\",\n\t\t\t\t{\n\t\t\t\t\tclassName,\n\t\t\t\t\tasChild,\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tref,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\t...props,\n\t\t\t\t\t\ttype: \"file\",\n\t\t\t\t\t\tmultiple: true,\n\t\t\t\t\t\tonChange: handleChange,\n\t\t\t\t\t},\n\t\t\t\t}\n\t\t\t);\n\t\t}\n\t);\n\n\tComponent.displayName = \"FileInput\";\n\treturn Component;\n})();\n\n// Export the old name for backward compatibility\nexport const SupportInput = MultimodalInput;\n"],"mappings":";;;;;;;;;AAsBA,MAAa,yBAAyB;CACrC,MAAM,YAAYA,QAAM,YAEtB,EACC,OACA,UACA,UACA,cACA,WACA,UAAU,OACV,OACA,SACA,GAAG,SAEJ,QACI;EACJ,MAAM,WAAWA,QAAM,OAAmC,KAAK;AAE/D,UAAM,oBACL,WACM,SAAS,QACf;EAED,MAAM,gBAAgB,MAA8C;AACnE,YAAS,EAAE,OAAO,MAAM;;EAGzB,MAAM,iBAAiB,MAAgD;AACtE,OAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACrC,MAAE,gBAAgB;AAClB,gBAAY;;AAEb,SAAM,YAAY,EAAE;;EAIrB,MAAM,eAAe,MAAiD;GACrE,MAAM,QAAQ,MAAM,KAAK,EAAE,cAAc,MAAM;GAC/C,MAAMC,QAAgB,EAAE;AAExB,QAAK,MAAM,QAAQ,MAClB,KAAI,KAAK,SAAS,QAAQ;IACzB,MAAM,OAAO,KAAK,WAAW;AAC7B,QAAI,KACH,OAAM,KAAK,KAAK;;AAKnB,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,MAAE,gBAAgB;AAClB,iBAAa,MAAM;;AAGpB,SAAM,UAAU,EAAE;;AAInB,UAAM,sBAAsB;GAC3B,MAAM,KAAK,SAAS;AACpB,OAAI,CAAC,GACJ;AAGD,MAAG,MAAM,SAAS;GAElB,MAAM,mBAAmB,GAAG,MAAM;AAClC,MAAG,MAAM,WAAW;AAEpB,MAAG,MAAM,SAAS,GAAG,GAAG,aAAa;AAErC,MAAG,MAAM,WAAW;KAClB,CAAC,MAAM,CAAC;AAEX,SAAO,iBACN,YACA;GACC;GACA;GACA,EACD;GACC,KAAK;GACL,OAAO;IACN,GAAG;IACH;IACA,MAAM;IACN,UAAU;IACV,WAAW;IACX,SAAS;IACT;IACA,gBAAgB,QAAQ,SAAS;IACjC,oBAAoB,QAAQ,2BAA2B;IACvD,OAAO;KACN,GAAG,MAAM;KACT,WAAW;KACX,UAAU;KACV;IACD;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;;;;;AAYJ,MAAa,mBAAmB;CAC/B,MAAM,YAAYD,QAAM,YACtB,EAAE,cAAc,UAAU,OAAO,UAAW,GAAG,SAAS,QAAQ;EAChE,MAAM,gBAAgB,MAA2C;GAChE,MAAM,QAAQ,MAAM,KAAK,EAAE,OAAO,SAAS,EAAE,CAAC;AAC9C,OAAI,MAAM,SAAS,KAAK,cAAc;AACrC,iBAAa,MAAM;AAEnB,MAAE,OAAO,QAAQ;;AAElB,SAAM,WAAW,EAAE;;AAGpB,SAAO,iBACN,SACA;GACC;GACA;GACA,EACD;GACC;GACA,OAAO;IACN,GAAG;IACH,MAAM;IACN,UAAU;IACV,UAAU;IACV;GACD,CACD;GAEF;AAED,WAAU,cAAc;AACxB,QAAO;IACJ;AAGJ,MAAa,eAAe"}