@ctrl-ui/react 0.8.0

package/dist/hooks/use-audio-recorder.js

@@ -0,0 +1,577 @@
+import { useEffect, useEffectEvent, useRef, useState, useSyncExternalStore } from "react";
+//#region src/hooks/use-audio-recorder.ts
+const DEFAULT_LEVEL_COUNT = 28;
+const DEFAULT_BAR_DURATION_MS = 80;
+const MIN_BAR_DURATION_MS = 50;
+const MIME_TYPE_CANDIDATES = ["audio/webm;codecs=opus", "audio/mp4"];
+const CALM_LEVEL = .1;
+const LEVEL_COMPRESSION = 2.2;
+const PEAK_BLEND = .35;
+function preferredAudioMimeType(MediaRecorderImpl) {
+	if (!MediaRecorderImpl?.isTypeSupported) return void 0;
+	return MIME_TYPE_CANDIDATES.find((mimeType) => MediaRecorderImpl.isTypeSupported?.(mimeType));
+}
+const deviceIdRegex = /\(([\da-fA-F]{4}:[\da-fA-F]{4})\)$/;
+function formatAudioInputDeviceLabel(device, fallback = "Microphone") {
+	const label = device.label.trim();
+	const matches = label.match(deviceIdRegex);
+	if (!matches) return label || fallback;
+	const [, id] = matches;
+	return `${label.replace(deviceIdRegex, "").trim() || fallback} (${id})`;
+}
+async function enumerateAudioInputDevices() {
+	if (typeof navigator === "undefined" || !navigator.mediaDevices?.enumerateDevices) throw new Error("Microphone device selection is not available in this browser.");
+	return (await navigator.mediaDevices.enumerateDevices()).filter((device) => device.kind === "audioinput");
+}
+function useAudioInputDevices() {
+	const [devices, setDevices] = useState([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(null);
+	const [hasPermission, setHasPermission] = useState(false);
+	async function refresh() {
+		setLoading(true);
+		setError(null);
+		try {
+			const nextDevices = await enumerateAudioInputDevices();
+			setDevices(nextDevices);
+			if (nextDevices.some((device) => device.label)) setHasPermission(true);
+		} catch (nextError) {
+			setError(asError(nextError));
+		} finally {
+			setLoading(false);
+		}
+	}
+	async function requestPermission() {
+		if (typeof navigator === "undefined" || !navigator.mediaDevices?.getUserMedia) {
+			setError(/* @__PURE__ */ new Error("Microphone device selection is not available in this browser."));
+			return;
+		}
+		setLoading(true);
+		setError(null);
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+			for (const track of stream.getTracks()) track.stop();
+			setHasPermission(true);
+			setDevices(await enumerateAudioInputDevices());
+		} catch (nextError) {
+			setError(microphoneError(nextError));
+		} finally {
+			setLoading(false);
+		}
+	}
+	const refreshFromEffect = useEffectEvent(refresh);
+	useEffect(() => {
+		queueMicrotask(() => void refreshFromEffect());
+	}, []);
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !navigator.mediaDevices?.addEventListener) return;
+		const handleDeviceChange = () => {
+			refreshFromEffect();
+		};
+		navigator.mediaDevices.addEventListener("devicechange", handleDeviceChange);
+		return () => navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
+	}, []);
+	return {
+		devices,
+		loading,
+		error,
+		hasPermission,
+		refresh,
+		requestPermission
+	};
+}
+function browserEnvironment() {
+	const scope = globalThis;
+	return {
+		mediaDevices: typeof navigator !== "undefined" ? navigator.mediaDevices : void 0,
+		MediaRecorder: typeof MediaRecorder !== "undefined" ? MediaRecorder : void 0,
+		AudioContext: typeof AudioContext !== "undefined" ? AudioContext : scope.webkitAudioContext,
+		requestAnimationFrame: typeof requestAnimationFrame !== "undefined" ? (callback) => requestAnimationFrame(callback) : void 0,
+		cancelAnimationFrame: typeof cancelAnimationFrame !== "undefined" ? (handle) => cancelAnimationFrame(handle) : void 0,
+		createObjectURL: typeof URL !== "undefined" ? URL.createObjectURL?.bind(URL) : void 0,
+		revokeObjectURL: typeof URL !== "undefined" ? URL.revokeObjectURL?.bind(URL) : void 0,
+		now: typeof performance !== "undefined" ? () => performance.now() : () => Date.now()
+	};
+}
+function asError(error) {
+	return error instanceof Error ? error : new Error(String(error));
+}
+function microphoneError(error) {
+	const nextError = asError(error);
+	if (nextError.name === "NotAllowedError" || nextError.name === "SecurityError") return /* @__PURE__ */ new Error("Microphone permission was denied.");
+	if (nextError.name === "NotFoundError" || nextError.name === "OverconstrainedError") return /* @__PURE__ */ new Error("Selected microphone is not available.");
+	return nextError;
+}
+function clampLevel(value) {
+	return Math.min(1, Math.max(.06, value));
+}
+function rmsFromSamples(samples, start, end) {
+	let total = 0;
+	let count = 0;
+	for (const sampleValue of samples.subarray(start, end)) {
+		const sample = (sampleValue - 128) / 128;
+		total += sample * sample;
+		count += 1;
+	}
+	return count === 0 ? 0 : Math.sqrt(total / count);
+}
+function nextAudioLevel(samples, calibration) {
+	const wholeSignal = rmsFromSamples(samples, 0, samples.length);
+	calibration.noiseFloor = wholeSignal < calibration.noiseFloor * 1.6 ? calibration.noiseFloor * .96 + wholeSignal * .04 : calibration.noiseFloor;
+	const signal = Math.max(0, wholeSignal - calibration.noiseFloor);
+	const targetGain = Math.min(5, Math.max(1.8, .36 / Math.max(signal, .08)));
+	calibration.gain = calibration.gain * .88 + targetGain * .12;
+	const compressedSignal = 1 - Math.exp(-signal * calibration.gain * LEVEL_COMPRESSION);
+	const target = clampLevel(CALM_LEVEL + compressedSignal * .9);
+	const smoothing = target > calibration.smoothedLevel ? .5 : .14;
+	calibration.smoothedLevel = clampLevel(calibration.smoothedLevel * (1 - smoothing) + target * smoothing);
+	return calibration.smoothedLevel;
+}
+function recordingStateCanCancel(state) {
+	return state === "requesting" || state === "recording" || state === "recorded" || state === "error";
+}
+function audioTrackConstraints(deviceId) {
+	const constraints = {
+		echoCancellation: true,
+		noiseSuppression: true,
+		autoGainControl: true
+	};
+	if (deviceId) constraints.deviceId = { exact: deviceId };
+	return constraints;
+}
+function stopMediaStream(mediaStream) {
+	for (const track of mediaStream.getTracks()) track.stop();
+}
+function createAudioRecorderController(initialOptions = {}, environment) {
+	return environment ? createControllerForEnvironment(initialOptions, environment) : createControllerForEnvironment(initialOptions, browserEnvironment());
+}
+function createControllerForEnvironment(initialOptions, environment) {
+	let options = { ...initialOptions };
+	let snapshot = {
+		state: "idle",
+		durationMs: 0,
+		levels: [],
+		error: null
+	};
+	const listeners = /* @__PURE__ */ new Set();
+	let stream = null;
+	let recorder = null;
+	let chunks = [];
+	let audioContext = null;
+	let audioSource = null;
+	let analyser = null;
+	let audioSamples = null;
+	let animationFrame = null;
+	let startedAt = 0;
+	let selectedMimeType = "";
+	let activeRecording;
+	let stopPromise = null;
+	let resolveStop = null;
+	let discardOnStop = false;
+	let requestId = 0;
+	let destroyed = false;
+	let bucketStartedAt = 0;
+	let bucketLevelTotal = 0;
+	let bucketPeakLevel = 0;
+	let bucketSampleCount = 0;
+	const calibration = {
+		noiseFloor: .018,
+		gain: 4,
+		smoothedLevel: CALM_LEVEL
+	};
+	function emit() {
+		for (const listener of listeners) listener();
+	}
+	function setSnapshot(next) {
+		snapshot = {
+			...snapshot,
+			...next
+		};
+		emit();
+	}
+	function now() {
+		return environment.now?.() ?? Date.now();
+	}
+	function resolvedBarCount() {
+		return Math.max(1, Math.floor(options.barCount ?? DEFAULT_LEVEL_COUNT));
+	}
+	function resolvedBarDurationMs() {
+		return Math.max(MIN_BAR_DURATION_MS, Math.floor(options.barDurationMs ?? DEFAULT_BAR_DURATION_MS));
+	}
+	function resetWaveform(startTime = now()) {
+		calibration.noiseFloor = .018;
+		calibration.gain = 4;
+		calibration.smoothedLevel = CALM_LEVEL;
+		bucketStartedAt = startTime;
+		bucketLevelTotal = 0;
+		bucketPeakLevel = 0;
+		bucketSampleCount = 0;
+		return [];
+	}
+	function clearActiveRecording() {
+		if (activeRecording?.url) environment.revokeObjectURL?.(activeRecording.url);
+		activeRecording = void 0;
+	}
+	function stopLiveInput() {
+		if (animationFrame !== null) {
+			environment.cancelAnimationFrame?.(animationFrame);
+			animationFrame = null;
+		}
+		try {
+			audioSource?.disconnect();
+		} catch {}
+		try {
+			audioContext?.close();
+		} catch {}
+		for (const track of stream?.getTracks() ?? []) track.stop();
+		stream = null;
+		audioContext = null;
+		audioSource = null;
+		analyser = null;
+		audioSamples = null;
+	}
+	function releaseRecorder() {
+		recorder = null;
+		chunks = [];
+		selectedMimeType = "";
+		startedAt = 0;
+	}
+	function resetToIdle() {
+		setSnapshot({
+			state: "idle",
+			durationMs: 0,
+			levels: resetWaveform(),
+			error: null,
+			recording: void 0
+		});
+	}
+	function finishStop(recording) {
+		const done = resolveStop;
+		resolveStop = null;
+		stopPromise = null;
+		done?.(recording);
+	}
+	function finalizeRecording() {
+		const discard = discardOnStop;
+		discardOnStop = false;
+		stopLiveInput();
+		if (discard) {
+			releaseRecorder();
+			resetToIdle();
+			finishStop(null);
+			return;
+		}
+		const stoppedAt = now();
+		const durationMs = Math.max(snapshot.durationMs, stoppedAt - startedAt);
+		const mimeType = recorder?.mimeType || selectedMimeType || "audio/webm";
+		const blob = new Blob(chunks, { type: mimeType });
+		clearActiveRecording();
+		activeRecording = {
+			blob,
+			url: environment.createObjectURL?.(blob) ?? "",
+			durationMs,
+			mimeType: blob.type || mimeType
+		};
+		releaseRecorder();
+		setSnapshot({
+			state: "recorded",
+			durationMs,
+			recording: activeRecording,
+			error: null
+		});
+		finishStop(activeRecording);
+	}
+	function scheduleFrame() {
+		if (!environment.requestAnimationFrame || animationFrame !== null || snapshot.state !== "recording") return;
+		animationFrame = environment.requestAnimationFrame(readFrame);
+	}
+	function readAudioLevel() {
+		if (!analyser || !audioSamples) return CALM_LEVEL;
+		analyser.getByteTimeDomainData(audioSamples);
+		return nextAudioLevel(audioSamples, calibration);
+	}
+	function collectAudioLevel() {
+		const level = readAudioLevel();
+		bucketLevelTotal += level;
+		bucketPeakLevel = Math.max(bucketPeakLevel, level);
+		bucketSampleCount += 1;
+	}
+	function flushLevelBucket(timestamp, force = false) {
+		if (bucketSampleCount === 0) return snapshot.levels;
+		if (!force && timestamp - bucketStartedAt < resolvedBarDurationMs()) return snapshot.levels;
+		const averageLevel = bucketLevelTotal / bucketSampleCount;
+		const level = clampLevel(averageLevel + (bucketPeakLevel - averageLevel) * PEAK_BLEND);
+		const levels = [...snapshot.levels, level].slice(-resolvedBarCount());
+		bucketStartedAt = timestamp;
+		bucketLevelTotal = 0;
+		bucketPeakLevel = 0;
+		bucketSampleCount = 0;
+		return levels;
+	}
+	function readFrame() {
+		animationFrame = null;
+		if (snapshot.state !== "recording") return;
+		const timestamp = now();
+		collectAudioLevel();
+		const levels = flushLevelBucket(timestamp);
+		const durationMs = Math.max(0, timestamp - startedAt);
+		setSnapshot({
+			durationMs,
+			levels
+		});
+		if (options.maxDurationMs && durationMs >= options.maxDurationMs) {
+			stop();
+			return;
+		}
+		scheduleFrame();
+	}
+	function attachAnalyser(nextStream) {
+		if (!environment.AudioContext) return;
+		try {
+			audioContext = new environment.AudioContext();
+			(audioContext.resume?.())?.catch(() => {});
+			audioSource = audioContext.createMediaStreamSource(nextStream);
+			analyser = audioContext.createAnalyser();
+			analyser.fftSize = 1024;
+			analyser.smoothingTimeConstant = .18;
+			audioSamples = new Uint8Array(analyser.fftSize);
+			audioSource.connect(analyser);
+		} catch {
+			audioContext = null;
+			audioSource = null;
+			analyser = null;
+			audioSamples = null;
+		}
+	}
+	function discardStaleStream(nextStream, currentRequest) {
+		if (!destroyed && currentRequest === requestId) return false;
+		stopMediaStream(nextStream);
+		if (currentRequest === requestId) resetToIdle();
+		return true;
+	}
+	function beginRecording(nextStream) {
+		const MediaRecorderImpl = environment.MediaRecorder;
+		if (!MediaRecorderImpl) throw new Error("Microphone recording is not available in this browser.");
+		selectedMimeType = preferredAudioMimeType(MediaRecorderImpl) ?? "";
+		const nextRecorder = new MediaRecorderImpl(nextStream, selectedMimeType ? { mimeType: selectedMimeType } : void 0);
+		chunks = [];
+		nextRecorder.ondataavailable = (event) => {
+			if (event.data.size > 0) chunks.push(event.data);
+		};
+		nextRecorder.onstop = finalizeRecording;
+		stream = nextStream;
+		recorder = nextRecorder;
+		attachAnalyser(nextStream);
+		startedAt = now();
+		resetWaveform(startedAt);
+		nextRecorder.start(Math.min(1e3, Math.max(250, resolvedBarDurationMs())));
+		setSnapshot({
+			state: "recording",
+			durationMs: 0,
+			levels: [],
+			error: null
+		});
+		scheduleFrame();
+	}
+	async function start() {
+		if (options.disabled || snapshot.state === "requesting" || snapshot.state === "recording") return false;
+		clearActiveRecording();
+		requestId += 1;
+		const currentRequest = requestId;
+		setSnapshot({
+			state: "requesting",
+			durationMs: 0,
+			levels: resetWaveform(),
+			error: null,
+			recording: void 0
+		});
+		if (!environment.mediaDevices?.getUserMedia || !environment.MediaRecorder) {
+			setSnapshot({
+				state: "error",
+				error: /* @__PURE__ */ new Error("Microphone recording is not available in this browser.")
+			});
+			return false;
+		}
+		try {
+			const nextStream = await environment.mediaDevices.getUserMedia({ audio: audioTrackConstraints(options.deviceId) });
+			if (discardStaleStream(nextStream, currentRequest)) return false;
+			beginRecording(nextStream);
+			return true;
+		} catch (error) {
+			stopLiveInput();
+			releaseRecorder();
+			setSnapshot({
+				state: "error",
+				error: microphoneError(error),
+				recording: void 0
+			});
+			return false;
+		}
+	}
+	function stop() {
+		if (snapshot.state === "recorded") return Promise.resolve(snapshot.recording ?? null);
+		if (!recorder || recorder.state === "inactive") return Promise.resolve(null);
+		if (stopPromise) return stopPromise;
+		if (snapshot.state === "recording") {
+			const stoppedAt = now();
+			collectAudioLevel();
+			setSnapshot({
+				durationMs: Math.max(snapshot.durationMs, stoppedAt - startedAt),
+				levels: flushLevelBucket(stoppedAt, true)
+			});
+		}
+		discardOnStop = false;
+		stopPromise = new Promise((resolve) => {
+			resolveStop = resolve;
+			recorder?.stop();
+		});
+		return stopPromise;
+	}
+	function cancelInternal(notify) {
+		const shouldNotify = notify && recordingStateCanCancel(snapshot.state);
+		requestId += 1;
+		clearActiveRecording();
+		if (recorder && recorder.state !== "inactive") {
+			discardOnStop = true;
+			if (!stopPromise) stopPromise = new Promise((resolve) => {
+				resolveStop = resolve;
+			});
+			stopLiveInput();
+			recorder.stop();
+		} else {
+			stopLiveInput();
+			releaseRecorder();
+			resetToIdle();
+		}
+		if (shouldNotify) options.onCancel?.();
+	}
+	function cancel() {
+		cancelInternal(true);
+	}
+	async function submit() {
+		if (snapshot.state === "recording") {
+			const recording = await stop();
+			return recording ? submitRecording(recording) : null;
+		}
+		const recording = snapshot.recording;
+		if (snapshot.state !== "recorded" || !recording) return null;
+		return submitRecording(recording);
+	}
+	async function submitRecording(recording) {
+		setSnapshot({
+			state: "submitting",
+			error: null
+		});
+		try {
+			await options.onRecordingComplete?.(recording);
+			setSnapshot({
+				state: "idle",
+				durationMs: 0,
+				levels: resetWaveform(),
+				error: null,
+				recording: void 0
+			});
+			return recording;
+		} catch (error) {
+			setSnapshot({
+				state: "recorded",
+				error: asError(error),
+				recording
+			});
+			return null;
+		}
+	}
+	function destroy() {
+		destroyed = true;
+		cancelInternal(false);
+		clearActiveRecording();
+		listeners.clear();
+	}
+	function setOptions(nextOptions) {
+		const nextBarCount = nextOptions.barCount ?? DEFAULT_LEVEL_COUNT;
+		const currentBarCount = options.barCount ?? DEFAULT_LEVEL_COUNT;
+		options = { ...nextOptions };
+		if (nextBarCount !== currentBarCount && snapshot.state === "idle") setSnapshot({ levels: resetWaveform() });
+		if (options.disabled && (snapshot.state === "requesting" || snapshot.state === "recording")) cancelInternal(false);
+	}
+	function getResult() {
+		const isDisabled = Boolean(options.disabled);
+		return {
+			...snapshot,
+			isDisabled,
+			canStart: !isDisabled && (snapshot.state === "idle" || snapshot.state === "error"),
+			canCancel: recordingStateCanCancel(snapshot.state),
+			canSubmit: snapshot.state === "recording" || snapshot.state === "recorded",
+			start,
+			stop,
+			cancel,
+			submit
+		};
+	}
+	return {
+		getSnapshot: () => snapshot,
+		getResult,
+		setOptions,
+		subscribe(listener) {
+			listeners.add(listener);
+			return () => {
+				listeners.delete(listener);
+			};
+		},
+		isDestroyed: () => destroyed,
+		start,
+		stop,
+		cancel,
+		submit,
+		destroy
+	};
+}
+function useAudioRecorder(options = {}) {
+	const [controller] = useState(() => createAudioRecorderController(options));
+	const snapshot = useSyncExternalStore(controller.subscribe, controller.getSnapshot, controller.getSnapshot);
+	const activeMount = useRef(null);
+	const { onRecordingComplete, onCancel, maxDurationMs, disabled, barCount, barDurationMs, deviceId } = options;
+	useEffect(() => {
+		const mount = Symbol("audio-recorder-mount");
+		activeMount.current = mount;
+		return () => {
+			queueMicrotask(() => {
+				if (activeMount.current === mount) controller.destroy();
+			});
+		};
+	}, [controller]);
+	useEffect(() => {
+		controller.setOptions({
+			onRecordingComplete,
+			onCancel,
+			maxDurationMs,
+			disabled,
+			barCount,
+			barDurationMs,
+			deviceId
+		});
+	}, [
+		controller,
+		onRecordingComplete,
+		onCancel,
+		maxDurationMs,
+		disabled,
+		barCount,
+		barDurationMs,
+		deviceId
+	]);
+	const isDisabled = Boolean(disabled);
+	return {
+		...snapshot,
+		isDisabled,
+		canStart: !isDisabled && (snapshot.state === "idle" || snapshot.state === "error"),
+		canCancel: recordingStateCanCancel(snapshot.state),
+		canSubmit: snapshot.state === "recording" || snapshot.state === "recorded",
+		start: controller.start,
+		stop: controller.stop,
+		cancel: controller.cancel,
+		submit: controller.submit
+	};
+}
+//#endregion
+export { createAudioRecorderController, formatAudioInputDeviceLabel, preferredAudioMimeType, useAudioInputDevices, useAudioRecorder };

package/dist/hooks/use-chat-composer.d.ts

@@ -0,0 +1,56 @@
+import { FormSubmitEvent } from "../control-props.js";
+import { ChatComposerKnobStyle } from "../knob-contracts/chat-composer-knobs.js";
+import { ChatDensity } from "./use-chat-message.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+//#region src/hooks/use-chat-composer.d.ts
+type ChatComposerSubmitPayload = {
+  value: string;
+  clear: () => void;
+  mentions?: MentionItem[];
+};
+type ChatComposerProps = Omit<ComponentProps<"form">, "onSubmit" | "style"> & {
+  children?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onSubmit?: (payload: ChatComposerSubmitPayload) => void | Promise<void>;
+  state?: "idle" | "submitting" | "disabled";
+  density?: ChatDensity;
+  disabled?: boolean;
+  style?: CSSProperties & ChatComposerKnobStyle;
+};
+type MentionItem = {
+  id: string;
+  label: string;
+  kind: string;
+};
+type ComposerKeyEvent = {
+  key: string;
+  shiftKey: boolean;
+  defaultPrevented: boolean;
+  nativeEvent: {
+    isComposing: boolean;
+  };
+  preventDefault: () => void;
+};
+declare function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state, density, disabled, trackSends }: Pick<ChatComposerProps, "value" | "defaultValue" | "onValueChange" | "onSubmit" | "state" | "density" | "disabled"> & {
+  /** Count successful submits — only enabled when something reads counter (send-layer anchor), so idle apps pay no extra state update. */
+  trackSends?: boolean;
+}): {
+  value: string;
+  setValue: (nextValue: string) => void;
+  normalizedValue: string;
+  state: "disabled" | "idle" | "submitting";
+  density: ChatDensity;
+  isCompact: boolean;
+  isDisabled: boolean;
+  canSubmit: boolean;
+  rows: number;
+  sendCount: number;
+  clear: () => void;
+  submit: (extra?: Partial<ChatComposerSubmitPayload>) => void;
+  handleSubmit: (event: FormSubmitEvent) => void;
+  handleKeyDown: (event: ComposerKeyEvent) => void;
+};
+//#endregion
+export { ChatComposerProps, ChatComposerSubmitPayload, MentionItem, useChatComposer };

package/dist/hooks/use-chat-composer.js

@@ -0,0 +1,63 @@
+import { useState } from "react";
+//#region src/hooks/use-chat-composer.ts
+function useControllableText({ value, defaultValue = "", onValueChange }) {
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const isControlled = value !== void 0;
+	const currentValue = isControlled ? value : internalValue;
+	function setValue(nextValue) {
+		if (!isControlled) setInternalValue(nextValue);
+		onValueChange?.(nextValue);
+	}
+	return [currentValue, setValue];
+}
+function useChatComposer({ value, defaultValue, onValueChange, onSubmit, state = "idle", density = "comfortable", disabled = false, trackSends = false }) {
+	const [inputValue, setInputValue] = useControllableText({
+		value,
+		defaultValue,
+		onValueChange
+	});
+	const [sendCount, setSendCount] = useState(0);
+	const normalizedValue = inputValue.trim();
+	const isDisabled = disabled || state === "disabled" || state === "submitting";
+	const canSubmit = normalizedValue.length > 0 && !isDisabled;
+	const isCompact = density === "compact";
+	function clear() {
+		setInputValue("");
+	}
+	function submit(extra) {
+		if (!canSubmit) return;
+		if (trackSends) setSendCount((count) => count + 1);
+		Promise.resolve(onSubmit?.({
+			value: normalizedValue,
+			clear,
+			...extra
+		})).catch(reportError);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		submit();
+	}
+	function handleKeyDown(event) {
+		if (event.defaultPrevented || event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+		event.preventDefault();
+		submit();
+	}
+	return {
+		value: inputValue,
+		setValue: setInputValue,
+		normalizedValue,
+		state,
+		density,
+		isCompact,
+		isDisabled,
+		canSubmit,
+		rows: isCompact ? 2 : 4,
+		sendCount,
+		clear,
+		submit,
+		handleSubmit,
+		handleKeyDown
+	};
+}
+//#endregion
+export { useChatComposer };