@arbidocs/react 0.3.173 → 0.3.174
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-PAJGQHFM.js → chunk-QZAXTBVW.js} +487 -11
- package/dist/chunk-QZAXTBVW.js.map +1 -0
- package/dist/{chunk-5DV7FW6T.cjs → chunk-ZYHVJM4V.cjs} +491 -8
- package/dist/chunk-ZYHVJM4V.cjs.map +1 -0
- package/dist/index.cjs +347 -503
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +94 -2
- package/dist/index.d.ts +94 -2
- package/dist/index.js +38 -220
- package/dist/index.js.map +1 -1
- package/dist/ui/index.cjs +115 -107
- package/dist/ui/index.d.cts +216 -154
- package/dist/ui/index.d.ts +216 -154
- package/dist/ui/index.js +1 -1
- package/package.json +3 -3
- package/dist/chunk-5DV7FW6T.cjs.map +0 -1
- package/dist/chunk-PAJGQHFM.js.map +0 -1
|
@@ -2,11 +2,11 @@ import { clsx } from 'clsx';
|
|
|
2
2
|
import { twMerge } from 'tailwind-merge';
|
|
3
3
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
4
4
|
import * as React2 from 'react';
|
|
5
|
-
import React2__default, { createContext, useMemo, useState } from 'react';
|
|
5
|
+
import React2__default, { createContext, useMemo, useContext, useState, useRef, useEffect, useCallback } from 'react';
|
|
6
6
|
import Markdown from 'react-markdown';
|
|
7
7
|
import remarkGfm from 'remark-gfm';
|
|
8
8
|
import rehypeRaw from 'rehype-raw';
|
|
9
|
-
import { Circle, Check, X, ChevronRight, ChevronDown, ChevronUp, Search, Copy } from 'lucide-react';
|
|
9
|
+
import { Circle, Check, X, ChevronRight, ChevronDown, ChevronUp, Search, Loader2, Square, Mic, Copy, Minus, Plus } from 'lucide-react';
|
|
10
10
|
import { createPortal } from 'react-dom';
|
|
11
11
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
12
12
|
import { cva } from 'class-variance-authority';
|
|
@@ -399,6 +399,86 @@ var TooltipContent = React2.forwardRef(
|
|
|
399
399
|
}
|
|
400
400
|
);
|
|
401
401
|
TooltipContent.displayName = "TooltipContent";
|
|
402
|
+
function IconToggle({
|
|
403
|
+
icon: Icon2,
|
|
404
|
+
isActive,
|
|
405
|
+
onToggle,
|
|
406
|
+
colors,
|
|
407
|
+
fillWhenActive = false,
|
|
408
|
+
disabled = false,
|
|
409
|
+
disabledTooltip,
|
|
410
|
+
showLabel = false,
|
|
411
|
+
label,
|
|
412
|
+
tooltipActive,
|
|
413
|
+
tooltipInactive,
|
|
414
|
+
tooltipMixed,
|
|
415
|
+
isMixed = false,
|
|
416
|
+
showTooltip = true,
|
|
417
|
+
"data-testid": dataTestId
|
|
418
|
+
}) {
|
|
419
|
+
const handleClick = (e) => {
|
|
420
|
+
e.stopPropagation();
|
|
421
|
+
onToggle(!isActive);
|
|
422
|
+
};
|
|
423
|
+
const { bg: bgColorClass } = colors;
|
|
424
|
+
const tooltipText = disabled ? disabledTooltip : isMixed ? tooltipMixed : isActive ? tooltipActive : tooltipInactive;
|
|
425
|
+
const { text: textColorClass } = colors;
|
|
426
|
+
const button = /* @__PURE__ */ jsx("div", { className: "inline-flex items-center gap-2", children: /* @__PURE__ */ jsxs(
|
|
427
|
+
"button",
|
|
428
|
+
{
|
|
429
|
+
type: "button",
|
|
430
|
+
onClick: handleClick,
|
|
431
|
+
disabled,
|
|
432
|
+
"data-testid": dataTestId,
|
|
433
|
+
"aria-pressed": isMixed ? "mixed" : isActive,
|
|
434
|
+
className: `
|
|
435
|
+
group/toggle relative inline-flex items-center h-4 w-8 rounded-full
|
|
436
|
+
transition-colors cursor-pointer
|
|
437
|
+
disabled:opacity-50 disabled:cursor-not-allowed
|
|
438
|
+
${isActive ? bgColorClass : isMixed ? "bg-gray-400" : "bg-muted"}
|
|
439
|
+
`,
|
|
440
|
+
children: [
|
|
441
|
+
isActive && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute left-0 w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(Minus, { className: "w-2.5 h-2.5 text-white/70 hidden group-hover/toggle:block" }) }),
|
|
442
|
+
!isActive && !disabled && /* @__PURE__ */ jsx("div", { className: "absolute right-0 w-4 h-4 flex items-center justify-center", children: /* @__PURE__ */ jsx(Plus, { className: "w-2.5 h-2.5 text-muted-foreground hidden group-hover/toggle:block" }) }),
|
|
443
|
+
/* @__PURE__ */ jsx(
|
|
444
|
+
"div",
|
|
445
|
+
{
|
|
446
|
+
className: `
|
|
447
|
+
absolute h-4 w-4 rounded-full bg-white shadow-sm
|
|
448
|
+
flex items-center justify-center
|
|
449
|
+
transition-transform duration-200
|
|
450
|
+
${isActive ? "translate-x-4" : "translate-x-0"}
|
|
451
|
+
`,
|
|
452
|
+
children: /* @__PURE__ */ jsx(
|
|
453
|
+
Icon2,
|
|
454
|
+
{
|
|
455
|
+
className: `w-2.5 h-2.5 ${isActive ? textColorClass : "text-muted-foreground"} ${isActive && fillWhenActive ? "fill-current" : ""}`
|
|
456
|
+
}
|
|
457
|
+
)
|
|
458
|
+
}
|
|
459
|
+
)
|
|
460
|
+
]
|
|
461
|
+
}
|
|
462
|
+
) });
|
|
463
|
+
return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
|
|
464
|
+
showLabel && label && /* @__PURE__ */ jsx("span", { className: "font-semibold text-sm text-primary", children: label }),
|
|
465
|
+
tooltipText && showTooltip ? /* @__PURE__ */ jsxs(Tooltip, { children: [
|
|
466
|
+
/* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, onFocusCapture: (e) => e.stopPropagation(), children: button }),
|
|
467
|
+
/* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { children: tooltipText }) })
|
|
468
|
+
] }) : button
|
|
469
|
+
] });
|
|
470
|
+
}
|
|
471
|
+
var DictateContext = createContext(null);
|
|
472
|
+
function DictateProvider({
|
|
473
|
+
transcribe,
|
|
474
|
+
onError,
|
|
475
|
+
children
|
|
476
|
+
}) {
|
|
477
|
+
return /* @__PURE__ */ jsx(DictateContext.Provider, { value: { transcribe, onError }, children });
|
|
478
|
+
}
|
|
479
|
+
function useDictateContext() {
|
|
480
|
+
return useContext(DictateContext);
|
|
481
|
+
}
|
|
402
482
|
var Avatar = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
|
|
403
483
|
AvatarPrimitive.Root,
|
|
404
484
|
{
|
|
@@ -574,21 +654,379 @@ var CardFooter = React2.forwardRef(
|
|
|
574
654
|
)
|
|
575
655
|
);
|
|
576
656
|
CardFooter.displayName = "CardFooter";
|
|
657
|
+
var LEVEL_UPDATE_INTERVAL_MS = 50;
|
|
658
|
+
function classifyMicError(err) {
|
|
659
|
+
const name = err instanceof DOMException ? err.name : void 0;
|
|
660
|
+
if (name === "NotAllowedError" || name === "SecurityError") {
|
|
661
|
+
return "Microphone access is blocked. Allow microphone permission in your browser settings to use voice input.";
|
|
662
|
+
}
|
|
663
|
+
if (name === "NotFoundError" || name === "DevicesNotFoundError") {
|
|
664
|
+
return "No microphone found on this device.";
|
|
665
|
+
}
|
|
666
|
+
if (!navigator.mediaDevices?.getUserMedia) {
|
|
667
|
+
return "Voice input is not supported in this browser.";
|
|
668
|
+
}
|
|
669
|
+
return "Could not start recording. Please try again.";
|
|
670
|
+
}
|
|
671
|
+
function useAudioRecorder() {
|
|
672
|
+
const [state, setState] = useState("idle");
|
|
673
|
+
const [level, setLevel] = useState(0);
|
|
674
|
+
const [elapsedMs, setElapsedMs] = useState(0);
|
|
675
|
+
const [blob, setBlob] = useState(null);
|
|
676
|
+
const [mimeType, setMimeType] = useState(null);
|
|
677
|
+
const [error, setError] = useState(null);
|
|
678
|
+
const mediaRecorderRef = useRef(null);
|
|
679
|
+
const chunksRef = useRef([]);
|
|
680
|
+
const streamRef = useRef(null);
|
|
681
|
+
const stateRef = useRef("idle");
|
|
682
|
+
stateRef.current = state;
|
|
683
|
+
const segmentStartRef = useRef(0);
|
|
684
|
+
const accumulatedMsRef = useRef(0);
|
|
685
|
+
const audioContextRef = useRef(null);
|
|
686
|
+
const analyserRef = useRef(null);
|
|
687
|
+
const levelRafRef = useRef(null);
|
|
688
|
+
const stopMeter = useCallback(() => {
|
|
689
|
+
if (levelRafRef.current !== null) cancelAnimationFrame(levelRafRef.current);
|
|
690
|
+
levelRafRef.current = null;
|
|
691
|
+
analyserRef.current = null;
|
|
692
|
+
void audioContextRef.current?.close().catch(() => {
|
|
693
|
+
});
|
|
694
|
+
audioContextRef.current = null;
|
|
695
|
+
}, []);
|
|
696
|
+
const startMeter = useCallback((stream) => {
|
|
697
|
+
const audioContext = new AudioContext();
|
|
698
|
+
const source = audioContext.createMediaStreamSource(stream);
|
|
699
|
+
const analyser = audioContext.createAnalyser();
|
|
700
|
+
analyser.fftSize = 256;
|
|
701
|
+
source.connect(analyser);
|
|
702
|
+
audioContextRef.current = audioContext;
|
|
703
|
+
analyserRef.current = analyser;
|
|
704
|
+
const data = new Uint8Array(analyser.frequencyBinCount);
|
|
705
|
+
let lastUpdate = 0;
|
|
706
|
+
const tick = (t) => {
|
|
707
|
+
const active = analyserRef.current;
|
|
708
|
+
if (!active) return;
|
|
709
|
+
if (t - lastUpdate >= LEVEL_UPDATE_INTERVAL_MS) {
|
|
710
|
+
lastUpdate = t;
|
|
711
|
+
active.getByteTimeDomainData(data);
|
|
712
|
+
let sumSquares = 0;
|
|
713
|
+
for (let i = 0; i < data.length; i++) {
|
|
714
|
+
const centered = (data[i] - 128) / 128;
|
|
715
|
+
sumSquares += centered * centered;
|
|
716
|
+
}
|
|
717
|
+
const rms = Math.sqrt(sumSquares / data.length);
|
|
718
|
+
setLevel(Math.sqrt(Math.min(1, rms * 8)));
|
|
719
|
+
setElapsedMs(accumulatedMsRef.current + (t - segmentStartRef.current));
|
|
720
|
+
}
|
|
721
|
+
levelRafRef.current = requestAnimationFrame(tick);
|
|
722
|
+
};
|
|
723
|
+
levelRafRef.current = requestAnimationFrame(tick);
|
|
724
|
+
}, []);
|
|
725
|
+
const stopTracks = useCallback(() => {
|
|
726
|
+
streamRef.current?.getTracks().forEach((t) => t.stop());
|
|
727
|
+
streamRef.current = null;
|
|
728
|
+
}, []);
|
|
729
|
+
useEffect(
|
|
730
|
+
() => () => {
|
|
731
|
+
stopTracks();
|
|
732
|
+
stopMeter();
|
|
733
|
+
},
|
|
734
|
+
[stopTracks, stopMeter]
|
|
735
|
+
);
|
|
736
|
+
const start = useCallback(async () => {
|
|
737
|
+
if (stateRef.current === "recording" || stateRef.current === "paused") return;
|
|
738
|
+
setError(null);
|
|
739
|
+
try {
|
|
740
|
+
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
|
|
741
|
+
streamRef.current = stream;
|
|
742
|
+
const mt = MediaRecorder.isTypeSupported("audio/webm") ? "audio/webm" : "audio/mp4";
|
|
743
|
+
const recorder = new MediaRecorder(stream, { mimeType: mt });
|
|
744
|
+
chunksRef.current = [];
|
|
745
|
+
recorder.ondataavailable = (e) => {
|
|
746
|
+
if (e.data.size > 0) chunksRef.current.push(e.data);
|
|
747
|
+
};
|
|
748
|
+
mediaRecorderRef.current = recorder;
|
|
749
|
+
setMimeType(mt);
|
|
750
|
+
setBlob(null);
|
|
751
|
+
accumulatedMsRef.current = 0;
|
|
752
|
+
segmentStartRef.current = performance.now();
|
|
753
|
+
recorder.start();
|
|
754
|
+
setState("recording");
|
|
755
|
+
startMeter(stream);
|
|
756
|
+
} catch (err) {
|
|
757
|
+
stopTracks();
|
|
758
|
+
setError(classifyMicError(err));
|
|
759
|
+
}
|
|
760
|
+
}, [startMeter, stopTracks]);
|
|
761
|
+
const pause = useCallback(() => {
|
|
762
|
+
const recorder = mediaRecorderRef.current;
|
|
763
|
+
if (!recorder || recorder.state !== "recording") return;
|
|
764
|
+
recorder.pause();
|
|
765
|
+
accumulatedMsRef.current += performance.now() - segmentStartRef.current;
|
|
766
|
+
stopMeter();
|
|
767
|
+
setLevel(0);
|
|
768
|
+
setState("paused");
|
|
769
|
+
}, [stopMeter]);
|
|
770
|
+
const resume = useCallback(() => {
|
|
771
|
+
const recorder = mediaRecorderRef.current;
|
|
772
|
+
if (!recorder || recorder.state !== "paused") return;
|
|
773
|
+
recorder.resume();
|
|
774
|
+
segmentStartRef.current = performance.now();
|
|
775
|
+
setState("recording");
|
|
776
|
+
if (streamRef.current) startMeter(streamRef.current);
|
|
777
|
+
}, [startMeter]);
|
|
778
|
+
const stop = useCallback(() => {
|
|
779
|
+
const recorder = mediaRecorderRef.current;
|
|
780
|
+
if (!recorder || recorder.state === "inactive") return;
|
|
781
|
+
const finalElapsed = recorder.state === "paused" ? accumulatedMsRef.current : accumulatedMsRef.current + (performance.now() - segmentStartRef.current);
|
|
782
|
+
stopMeter();
|
|
783
|
+
recorder.onstop = () => {
|
|
784
|
+
stopTracks();
|
|
785
|
+
const finalBlob = chunksRef.current.length ? new Blob(chunksRef.current, { type: recorder.mimeType }) : null;
|
|
786
|
+
setBlob(finalBlob);
|
|
787
|
+
setElapsedMs(finalElapsed);
|
|
788
|
+
setLevel(0);
|
|
789
|
+
setState("stopped");
|
|
790
|
+
};
|
|
791
|
+
recorder.stop();
|
|
792
|
+
}, [stopMeter, stopTracks]);
|
|
793
|
+
const reset = useCallback(() => {
|
|
794
|
+
setState("idle");
|
|
795
|
+
setBlob(null);
|
|
796
|
+
setElapsedMs(0);
|
|
797
|
+
setLevel(0);
|
|
798
|
+
setMimeType(null);
|
|
799
|
+
setError(null);
|
|
800
|
+
}, []);
|
|
801
|
+
return { state, level, elapsedMs, blob, mimeType, error, start, pause, resume, stop, reset };
|
|
802
|
+
}
|
|
803
|
+
|
|
804
|
+
// src/documents/format-elapsed.ts
|
|
805
|
+
function formatElapsed(ms) {
|
|
806
|
+
const totalSeconds = Math.max(0, Math.floor(ms / 1e3));
|
|
807
|
+
const minutes = Math.floor(totalSeconds / 60);
|
|
808
|
+
const seconds = totalSeconds % 60;
|
|
809
|
+
return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
|
|
810
|
+
}
|
|
811
|
+
var BAR_WEIGHTS = [
|
|
812
|
+
0.25,
|
|
813
|
+
0.32,
|
|
814
|
+
0.48,
|
|
815
|
+
0.62,
|
|
816
|
+
0.82,
|
|
817
|
+
0.56,
|
|
818
|
+
0.92,
|
|
819
|
+
0.72,
|
|
820
|
+
1,
|
|
821
|
+
0.86,
|
|
822
|
+
0.62,
|
|
823
|
+
0.96,
|
|
824
|
+
0.76,
|
|
825
|
+
0.5,
|
|
826
|
+
0.84,
|
|
827
|
+
0.66,
|
|
828
|
+
0.42,
|
|
829
|
+
0.56,
|
|
830
|
+
0.36,
|
|
831
|
+
0.28,
|
|
832
|
+
0.22
|
|
833
|
+
];
|
|
834
|
+
var MIN_BAR_PX = 3;
|
|
835
|
+
var MAX_BAR_PX = 40;
|
|
836
|
+
function MicWaveformIndicator({
|
|
837
|
+
level,
|
|
838
|
+
elapsedMs,
|
|
839
|
+
paused = false
|
|
840
|
+
}) {
|
|
841
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", "data-testid": "mic-waveform-indicator", children: [
|
|
842
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
843
|
+
/* @__PURE__ */ jsxs("span", { className: "relative flex h-2 w-2", children: [
|
|
844
|
+
!paused && /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" }),
|
|
845
|
+
/* @__PURE__ */ jsx(
|
|
846
|
+
"span",
|
|
847
|
+
{
|
|
848
|
+
className: `relative inline-flex h-2 w-2 rounded-full ${paused ? "bg-muted-foreground" : "bg-red-500"}`
|
|
849
|
+
}
|
|
850
|
+
)
|
|
851
|
+
] }),
|
|
852
|
+
/* @__PURE__ */ jsx(
|
|
853
|
+
"span",
|
|
854
|
+
{
|
|
855
|
+
className: `text-xs font-semibold uppercase tracking-wide ${paused ? "text-muted-foreground" : "text-red-500"}`,
|
|
856
|
+
children: paused ? "Paused" : "Rec"
|
|
857
|
+
}
|
|
858
|
+
),
|
|
859
|
+
/* @__PURE__ */ jsx("span", { className: "font-mono text-xs tabular-nums text-muted-foreground", children: formatElapsed(elapsedMs) })
|
|
860
|
+
] }),
|
|
861
|
+
/* @__PURE__ */ jsx("div", { className: "flex h-10 items-end gap-[3px]", "data-testid": "mic-waveform-indicator-bars", children: BAR_WEIGHTS.map((weight, i) => /* @__PURE__ */ jsx(
|
|
862
|
+
"span",
|
|
863
|
+
{
|
|
864
|
+
className: "w-1 rounded-full bg-secondary transition-[height] duration-75 ease-out",
|
|
865
|
+
style: {
|
|
866
|
+
height: Math.min(MAX_BAR_PX, Math.max(MIN_BAR_PX, level * weight * MAX_BAR_PX))
|
|
867
|
+
}
|
|
868
|
+
},
|
|
869
|
+
i
|
|
870
|
+
)) })
|
|
871
|
+
] });
|
|
872
|
+
}
|
|
873
|
+
function MicRecordingOverlay({
|
|
874
|
+
level,
|
|
875
|
+
elapsedMs,
|
|
876
|
+
paused,
|
|
877
|
+
caption = "Keep button pressed while speaking"
|
|
878
|
+
}) {
|
|
879
|
+
if (typeof document === "undefined") return null;
|
|
880
|
+
return createPortal(
|
|
881
|
+
/* @__PURE__ */ jsx(
|
|
882
|
+
"div",
|
|
883
|
+
{
|
|
884
|
+
"aria-hidden": true,
|
|
885
|
+
className: "pointer-events-none fixed inset-0 z-[2147483647] flex items-center justify-center",
|
|
886
|
+
"data-testid": "mic-recording-overlay",
|
|
887
|
+
children: /* @__PURE__ */ jsxs("div", { className: "flex w-72 flex-col items-center gap-3 rounded-2xl bg-background/95 px-6 py-5 shadow-2xl ring-1 ring-border backdrop-blur-sm", children: [
|
|
888
|
+
/* @__PURE__ */ jsx(MicWaveformIndicator, { level, elapsedMs, paused }),
|
|
889
|
+
/* @__PURE__ */ jsx("p", { className: "text-center text-sm font-medium text-muted-foreground", children: caption })
|
|
890
|
+
] })
|
|
891
|
+
}
|
|
892
|
+
),
|
|
893
|
+
document.body
|
|
894
|
+
);
|
|
895
|
+
}
|
|
896
|
+
var HOLD_THRESHOLD_MS = 350;
|
|
897
|
+
function InlineMicButton({
|
|
898
|
+
focused,
|
|
899
|
+
onTranscript,
|
|
900
|
+
onError,
|
|
901
|
+
transcribe,
|
|
902
|
+
className
|
|
903
|
+
}) {
|
|
904
|
+
const recorder = useAudioRecorder();
|
|
905
|
+
const [isTranscribing, setIsTranscribing] = useState(false);
|
|
906
|
+
const [latched, setLatched] = useState(false);
|
|
907
|
+
const pressedAtRef = useRef(0);
|
|
908
|
+
useEffect(() => {
|
|
909
|
+
if (recorder.error) onError?.(recorder.error);
|
|
910
|
+
}, [recorder.error]);
|
|
911
|
+
useEffect(() => {
|
|
912
|
+
if (recorder.state !== "stopped" || !recorder.blob) return;
|
|
913
|
+
const blob = recorder.blob;
|
|
914
|
+
setIsTranscribing(true);
|
|
915
|
+
transcribe(blob).then((text) => {
|
|
916
|
+
if (text.trim()) onTranscript(text.trim());
|
|
917
|
+
}).catch((err) => {
|
|
918
|
+
onError?.(err instanceof Error ? err.message : "Could not transcribe audio.");
|
|
919
|
+
}).finally(() => {
|
|
920
|
+
setIsTranscribing(false);
|
|
921
|
+
setLatched(false);
|
|
922
|
+
recorder.reset();
|
|
923
|
+
});
|
|
924
|
+
}, [recorder.state, recorder.blob]);
|
|
925
|
+
const isRecording = recorder.state === "recording";
|
|
926
|
+
const isBusy = isTranscribing;
|
|
927
|
+
if (!focused && !isRecording && !isBusy) return null;
|
|
928
|
+
const handlePointerDown = (e) => {
|
|
929
|
+
e.preventDefault();
|
|
930
|
+
if (isRecording) return;
|
|
931
|
+
pressedAtRef.current = Date.now();
|
|
932
|
+
void recorder.start();
|
|
933
|
+
};
|
|
934
|
+
const handlePointerUp = () => {
|
|
935
|
+
if (!isRecording) return;
|
|
936
|
+
if (latched) {
|
|
937
|
+
recorder.stop();
|
|
938
|
+
setLatched(false);
|
|
939
|
+
return;
|
|
940
|
+
}
|
|
941
|
+
const held = Date.now() - pressedAtRef.current;
|
|
942
|
+
if (held >= HOLD_THRESHOLD_MS) {
|
|
943
|
+
recorder.stop();
|
|
944
|
+
} else {
|
|
945
|
+
setLatched(true);
|
|
946
|
+
}
|
|
947
|
+
};
|
|
948
|
+
const handlePointerLeave = () => {
|
|
949
|
+
if (isRecording && !latched) recorder.stop();
|
|
950
|
+
};
|
|
951
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
952
|
+
/* @__PURE__ */ jsx(
|
|
953
|
+
"button",
|
|
954
|
+
{
|
|
955
|
+
type: "button",
|
|
956
|
+
onPointerDown: handlePointerDown,
|
|
957
|
+
onPointerUp: handlePointerUp,
|
|
958
|
+
onPointerLeave: handlePointerLeave,
|
|
959
|
+
onPointerCancel: handlePointerLeave,
|
|
960
|
+
disabled: isBusy,
|
|
961
|
+
title: isRecording ? "Release to stop, or tap again if hands-free" : "Hold, or tap to dictate",
|
|
962
|
+
"data-testid": "inline-mic-button",
|
|
963
|
+
className: `inline-flex items-center justify-center rounded-full transition-colors disabled:pointer-events-none ${isRecording ? "h-7 w-7 bg-red-500 text-white shadow-sm hover:bg-red-600" : isBusy ? "h-6 w-6 text-muted-foreground" : "h-6 w-6 text-muted-foreground/50 hover:bg-muted hover:text-muted-foreground"} ${className ?? ""}`,
|
|
964
|
+
children: isBusy ? /* @__PURE__ */ jsx(Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : isRecording ? /* @__PURE__ */ jsx(Square, { className: "h-3 w-3 fill-current" }) : /* @__PURE__ */ jsx(Mic, { className: "h-3.5 w-3.5" })
|
|
965
|
+
}
|
|
966
|
+
),
|
|
967
|
+
isRecording && /* @__PURE__ */ jsx(
|
|
968
|
+
MicRecordingOverlay,
|
|
969
|
+
{
|
|
970
|
+
level: recorder.level,
|
|
971
|
+
elapsedMs: recorder.elapsedMs,
|
|
972
|
+
caption: latched ? "Tap the mic again to stop" : "Release to stop, or keep holding"
|
|
973
|
+
}
|
|
974
|
+
)
|
|
975
|
+
] });
|
|
976
|
+
}
|
|
577
977
|
var Input = React2.forwardRef(
|
|
578
|
-
({ className, type, ...props },
|
|
579
|
-
|
|
978
|
+
({ className, type, dictate, onFocus, onBlur, ...props }, forwardedRef) => {
|
|
979
|
+
const dictateCtx = useDictateContext();
|
|
980
|
+
const [focused, setFocused] = React2.useState(false);
|
|
981
|
+
const innerRef = React2.useRef(null);
|
|
982
|
+
React2.useImperativeHandle(forwardedRef, () => innerRef.current);
|
|
983
|
+
const showDictate = dictate && !!dictateCtx && !props.disabled && !props.readOnly;
|
|
984
|
+
const input = /* @__PURE__ */ jsx(
|
|
580
985
|
"input",
|
|
581
986
|
{
|
|
582
987
|
type,
|
|
583
988
|
"data-slot": "input",
|
|
584
989
|
className: cn(
|
|
585
990
|
"flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
991
|
+
showDictate && "pr-9",
|
|
586
992
|
className
|
|
587
993
|
),
|
|
588
|
-
ref,
|
|
994
|
+
ref: innerRef,
|
|
995
|
+
onFocus: (e) => {
|
|
996
|
+
setFocused(true);
|
|
997
|
+
onFocus?.(e);
|
|
998
|
+
},
|
|
999
|
+
onBlur: (e) => {
|
|
1000
|
+
setFocused(false);
|
|
1001
|
+
onBlur?.(e);
|
|
1002
|
+
},
|
|
589
1003
|
...props
|
|
590
1004
|
}
|
|
591
1005
|
);
|
|
1006
|
+
if (!showDictate) return input;
|
|
1007
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
1008
|
+
input,
|
|
1009
|
+
/* @__PURE__ */ jsx(
|
|
1010
|
+
InlineMicButton,
|
|
1011
|
+
{
|
|
1012
|
+
focused,
|
|
1013
|
+
transcribe: dictateCtx.transcribe,
|
|
1014
|
+
onError: dictateCtx.onError,
|
|
1015
|
+
className: "absolute right-1.5 top-1/2 -translate-y-1/2",
|
|
1016
|
+
onTranscript: (text) => {
|
|
1017
|
+
const el = innerRef.current;
|
|
1018
|
+
if (!el) return;
|
|
1019
|
+
const next = el.value ? `${el.value} ${text}` : text;
|
|
1020
|
+
const setter = Object.getOwnPropertyDescriptor(
|
|
1021
|
+
window.HTMLInputElement.prototype,
|
|
1022
|
+
"value"
|
|
1023
|
+
)?.set;
|
|
1024
|
+
setter?.call(el, next);
|
|
1025
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
1026
|
+
}
|
|
1027
|
+
}
|
|
1028
|
+
)
|
|
1029
|
+
] });
|
|
592
1030
|
}
|
|
593
1031
|
);
|
|
594
1032
|
Input.displayName = "Input";
|
|
@@ -617,18 +1055,56 @@ var Separator = React2.forwardRef(({ className, orientation = "horizontal", deco
|
|
|
617
1055
|
));
|
|
618
1056
|
Separator.displayName = SeparatorPrimitive.Root.displayName;
|
|
619
1057
|
var Textarea = React2.forwardRef(
|
|
620
|
-
({ className, ...props },
|
|
621
|
-
|
|
1058
|
+
({ className, dictate, onFocus, onBlur, ...props }, forwardedRef) => {
|
|
1059
|
+
const dictateCtx = useDictateContext();
|
|
1060
|
+
const [focused, setFocused] = React2.useState(false);
|
|
1061
|
+
const innerRef = React2.useRef(null);
|
|
1062
|
+
React2.useImperativeHandle(forwardedRef, () => innerRef.current);
|
|
1063
|
+
const showDictate = dictate && !!dictateCtx && !props.disabled && !props.readOnly;
|
|
1064
|
+
const textarea = /* @__PURE__ */ jsx(
|
|
622
1065
|
"textarea",
|
|
623
1066
|
{
|
|
624
1067
|
className: cn(
|
|
625
1068
|
"flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground/60 focus-visible:outline-none focus-visible:border-ring/50 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
1069
|
+
showDictate && "pr-9",
|
|
626
1070
|
className
|
|
627
1071
|
),
|
|
628
|
-
ref,
|
|
1072
|
+
ref: innerRef,
|
|
1073
|
+
onFocus: (e) => {
|
|
1074
|
+
setFocused(true);
|
|
1075
|
+
onFocus?.(e);
|
|
1076
|
+
},
|
|
1077
|
+
onBlur: (e) => {
|
|
1078
|
+
setFocused(false);
|
|
1079
|
+
onBlur?.(e);
|
|
1080
|
+
},
|
|
629
1081
|
...props
|
|
630
1082
|
}
|
|
631
1083
|
);
|
|
1084
|
+
if (!showDictate) return textarea;
|
|
1085
|
+
return /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
|
|
1086
|
+
textarea,
|
|
1087
|
+
/* @__PURE__ */ jsx(
|
|
1088
|
+
InlineMicButton,
|
|
1089
|
+
{
|
|
1090
|
+
focused,
|
|
1091
|
+
transcribe: dictateCtx.transcribe,
|
|
1092
|
+
onError: dictateCtx.onError,
|
|
1093
|
+
className: "absolute right-1.5 top-1.5",
|
|
1094
|
+
onTranscript: (text) => {
|
|
1095
|
+
const el = innerRef.current;
|
|
1096
|
+
if (!el) return;
|
|
1097
|
+
const next = el.value ? `${el.value} ${text}` : text;
|
|
1098
|
+
const setter = Object.getOwnPropertyDescriptor(
|
|
1099
|
+
window.HTMLTextAreaElement.prototype,
|
|
1100
|
+
"value"
|
|
1101
|
+
)?.set;
|
|
1102
|
+
setter?.call(el, next);
|
|
1103
|
+
el.dispatchEvent(new Event("input", { bubbles: true }));
|
|
1104
|
+
}
|
|
1105
|
+
}
|
|
1106
|
+
)
|
|
1107
|
+
] });
|
|
632
1108
|
}
|
|
633
1109
|
);
|
|
634
1110
|
Textarea.displayName = "Textarea";
|
|
@@ -1333,6 +1809,6 @@ function AiMarkdown({
|
|
|
1333
1809
|
);
|
|
1334
1810
|
}
|
|
1335
1811
|
|
|
1336
|
-
export { AiMarkdown, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, Input, Label, MarkdownRenderer, MarkdownStreamingContext, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, markdownBaseComponents, splitMarkdownBlocks, toggleVariants };
|
|
1337
|
-
//# sourceMappingURL=chunk-
|
|
1338
|
-
//# sourceMappingURL=chunk-
|
|
1812
|
+
export { AiMarkdown, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DictateProvider, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, IconToggle, InlineMicButton, Input, Label, MarkdownRenderer, MarkdownStreamingContext, MicRecordingOverlay, MicWaveformIndicator, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Slider, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, cardVariants, cn, formatElapsed, markdownBaseComponents, splitMarkdownBlocks, toggleVariants, useAudioRecorder };
|
|
1813
|
+
//# sourceMappingURL=chunk-QZAXTBVW.js.map
|
|
1814
|
+
//# sourceMappingURL=chunk-QZAXTBVW.js.map
|