introduce stream compose flow

2026-03-18 14:52:22 -07:00
parent 092d142a56
commit d316ba1e09
14 changed files with 616 additions and 340 deletions
@@ -0,0 +1,64 @@
+import { Video, Mic } from "lucide-react";
+import { useComposeStore } from "@/stores/compose-store";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+interface ControlsIndicatorProps {
+  type: "reply" | "new";
+}
+export default function ControlsIndicator({ type }: ControlsIndicatorProps) {
+  const recordingMode = useComposeStore((s) => s.recordingMode);
+  const setRecordingMode = useComposeStore((s) => s.setRecordingMode);
+
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <Button
+        onClick={() =>
+          setRecordingMode(recordingMode === "video" ? "audio" : "video")
+        }
+        title={
+          recordingMode === "video"
+            ? "Switch to audio-only"
+            : "Switch to video"
+        }
+        variant="secondary"
+        className={cn(
+          "text-xs",
+          "text-muted-foreground hover:text-white/90",
+        )}
+      >
+        {recordingMode === "video" ? (
+          <>
+            <Video className="h-3.5 w-3.5" />
+            <p>Video</p>
+          </>
+        ) : (
+          <>
+            <Mic className="h-3.5 w-3.5" />
+            <span>Audio</span>
+          </>
+        )}
+      </Button>
+      <div className="text-muted-foreground">
+        Hold{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          `
+        </kbd>{" "}
+        to {type === "reply" ? "reply " : "start "}
+        · Press{" "}
+        <kbd
+          className={cn(
+            "bg-muted rounded px-1.5 py-0.5 font-mono",
+          )}
+        >
+          T
+        </kbd>{" "}
+        for text
+      </div>
+    </div>
+  );
+}