@lettuceai/crisp 1.3.0 → 1.4.0

package/dist/components/Composer.d.ts

@@ -10,6 +10,8 @@ export interface ComposerMic {
     transcribing?: boolean;
     elapsedMs: number;
     analyser: AnalyserNode | null;
+    /** The input level from 0 to 1, for a recorder that has no `analyser` in the page. */
+    level?: number;
     onStart: () => void;
     onStop: () => void;
     onCancel: () => void;
@@ -42,8 +44,9 @@ export interface ComposerProps {
 }
 export declare function Composer({ value, onChange, onSend, onStop, onContinue, onSendAsSystem, onAttach, attachments, onRemoveAttachment, mic, sending, disabled, placeholder, enterSends, notice, topSlot, className, }: ComposerProps): import("react").JSX.Element;
 /** Live waveform while recording. Same sampling as the app; drawn in tokens. */
-export declare function RecordingWave({ elapsedMs, analyser, frozen }: {
+export declare function RecordingWave({ elapsedMs, analyser, level, frozen }: {
     elapsedMs: number;
     analyser: AnalyserNode | null;
+    level?: number;
     frozen?: boolean;
 }): import("react").JSX.Element;

package/dist/index.js

@@ -3172,6 +3172,7 @@ function hr({ value: e, onChange: t, onSend: n, onStop: r, onContinue: i, onSend
 						w && u ? /* @__PURE__ */ U(_r, {
 							elapsedMs: u.elapsedMs,
 							analyser: u.analyser,
+							level: u.level,
 							frozen: u.transcribing
 						}) : /* @__PURE__ */ U("textarea", {
 							ref: S,
@@ -3254,72 +3255,72 @@ function gr(e) {
 	let t = Math.max(0, Math.floor(e / 1e3));
 	return `${Math.floor(t / 60)}:${String(t % 60).padStart(2, "0")}`;
 }
-function _r({ elapsedMs: e, analyser: t, frozen: n = !1 }) {
-	let { strings: r } = q(), i = p(null), a = p(null), o = p([]), s = p(null), [c, u] = m({
+function _r({ elapsedMs: e, analyser: t, level: n, frozen: r = !1 }) {
+	let { strings: i } = q(), a = p(null), o = p(null), s = p([]), c = p(null), [u, d] = m({
 		w: 0,
 		h: 0
-	});
-	return l(() => {
-		let e = i.current;
+	}), f = p(n);
+	return f.current = n, l(() => {
+		let e = a.current;
 		if (!e) return;
 		let t = () => {
 			let t = e.getBoundingClientRect();
-			u({
+			d({
 				w: Math.floor(t.width),
 				h: Math.floor(t.height)
 			});
 		}, n = new ResizeObserver(t);
 		return n.observe(e), t(), () => n.disconnect();
 	}, []), l(() => {
-		o.current = [], s.current = t ? new Uint8Array(new ArrayBuffer(t.fftSize)) : null;
+		s.current = [], c.current = t ? new Uint8Array(new ArrayBuffer(t.fftSize)) : null;
 	}, [t]), l(() => {
-		let e = a.current;
-		if (!e || c.w <= 0) return;
-		let r = window.devicePixelRatio || 1, i = c.h || 20;
-		e.width = Math.floor(c.w * r), e.height = Math.floor(i * r);
-		let l = e.getContext("2d");
-		if (!l) return;
-		l.scale(r, r);
-		let u = getComputedStyle(e).color, d = Math.ceil(c.w / 4) + 4, f = 0, p = 0, m = (e) => {
-			if (!n && t && s.current && e - f >= 50) {
-				t.getByteTimeDomainData(s.current);
+		let e = o.current;
+		if (!e || u.w <= 0) return;
+		let n = window.devicePixelRatio || 1, i = u.h || 20;
+		e.width = Math.floor(u.w * n), e.height = Math.floor(i * n);
+		let a = e.getContext("2d");
+		if (!a) return;
+		a.scale(n, n);
+		let l = getComputedStyle(e).color, d = Math.ceil(u.w / 4) + 4, p = 0, m = 0, h = (e) => {
+			if (!r && t && c.current && e - p >= 50) {
+				t.getByteTimeDomainData(c.current);
 				let n = 0;
-				for (let e of s.current) {
+				for (let e of c.current) {
 					let t = (e - 128) / 128;
 					n += t * t;
 				}
-				let r = Math.sqrt(n / s.current.length);
-				o.current.push(Math.min(1, (r * 18) ** .5)), o.current.length > d && o.current.splice(0, o.current.length - d), f = e;
+				let r = Math.sqrt(n / c.current.length);
+				s.current.push(Math.min(1, (r * 18) ** .5)), s.current.length > d && s.current.splice(0, s.current.length - d), p = e;
+			} else !r && !t && f.current !== void 0 && e - p >= 50 && (s.current.push(Math.min(1, Math.max(0, f.current ** .5))), s.current.length > d && s.current.splice(0, s.current.length - d), p = e);
+			a.clearRect(0, 0, u.w, i);
+			let n = s.current;
+			for (let e = Math.max(0, n.length - d); e < n.length; e++) {
+				let t = n.length - 1 - e, r = u.w - 2 - t * 4;
+				if (r + 2 < 0) break;
+				let o = Math.max(3, n[e] * (i - 2));
+				a.globalAlpha = .95 - t / Math.max(1, d - 1) * .35, a.fillStyle = l, a.fillRect(r, i / 2 - o / 2, 2, o);
 			}
-			l.clearRect(0, 0, c.w, i);
-			let r = o.current;
-			for (let e = Math.max(0, r.length - d); e < r.length; e++) {
-				let t = r.length - 1 - e, n = c.w - 2 - t * 4;
-				if (n + 2 < 0) break;
-				let a = Math.max(3, r[e] * (i - 2));
-				l.globalAlpha = .95 - t / Math.max(1, d - 1) * .35, l.fillStyle = u, l.fillRect(n, i / 2 - a / 2, 2, a);
-			}
-			p = window.requestAnimationFrame(m);
+			m = window.requestAnimationFrame(h);
 		};
-		return p = window.requestAnimationFrame(m), () => window.cancelAnimationFrame(p);
+		return m = window.requestAnimationFrame(h), () => window.cancelAnimationFrame(m);
 	}, [
 		t,
-		c.w,
-		c.h,
-		n
+		u.w,
+		u.h,
+		r
 	]), /* @__PURE__ */ W("div", {
 		className: "flex min-h-[var(--composer-row)] min-w-0 flex-1 items-center gap-2.5 px-2",
 		role: "status",
 		"aria-live": "polite",
-		"aria-label": n ? r.composerTranscribing : r.composerRecording(gr(e)),
+		"aria-label": r ? i.composerTranscribing : i.composerRecording(gr(e)),
 		children: [
 			/* @__PURE__ */ W("span", {
 				className: "relative flex h-2 w-2 shrink-0",
 				"aria-hidden": "true",
-				children: [!n && /* @__PURE__ */ U("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-danger opacity-60" }), /* @__PURE__ */ U("span", { className: G("relative inline-flex h-2 w-2 rounded-full", n ? "bg-fg-3" : "bg-danger") })]
+				children: [!r && /* @__PURE__ */ U("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-danger opacity-60" }), /* @__PURE__ */ U("span", { className: G("relative inline-flex h-2 w-2 rounded-full", r ? "bg-fg-3" : "bg-danger") })]
 			}),
 			/* @__PURE__ */ W("div", {
-				ref: i,
+				ref: a,
 				className: "relative h-5 min-w-0 flex-1 overflow-hidden text-fg",
 				style: {
 					maskImage: "linear-gradient(to right, transparent, black 40px)",
@@ -3329,9 +3330,9 @@ function _r({ elapsedMs: e, analyser: t, frozen: n = !1 }) {
 					"aria-hidden": "true",
 					className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-line-2"
 				}), /* @__PURE__ */ U("canvas", {
-					ref: a,
+					ref: o,
 					className: "relative block h-full w-full",
-					style: { width: c.w || void 0 }
+					style: { width: u.w || void 0 }
 				})]
 			}),
 			/* @__PURE__ */ U("span", {
@@ -3483,10 +3484,10 @@ function Tr({ open: e, onClose: t, title: n, description: r, leftAction: i, righ
 				})
 			}),
 			/* @__PURE__ */ W("div", {
-				className: G("flex items-start gap-2 px-4", I ? "pb-3 pt-1.5" : "py-4"),
+				className: G("flex items-center gap-2 px-4", I ? "pb-3 pt-1.5" : "py-4"),
 				children: [
 					i && /* @__PURE__ */ U("div", {
-						className: "shrink-0 pt-0.5",
+						className: "shrink-0",
 						children: i
 					}),
 					/* @__PURE__ */ W("div", {