@chai-ui/react 0.8.0 → 0.10.0

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./useMediaAnalyzer.js";
 // to import from @chai-ui/react.
 export {
   createFalEngine,
+  createFalTranscriber,
   createOpenRouterEngine,
   createMockEngine,
   mockEngine,
@@ -41,6 +42,9 @@ export type {
   MediaKind,
   ModelOption,
   OutputKind,
+  Transcribe,
+  VoiceClip,
+  VoiceInputConfig,
   ParameterOption,
   RegionBox,
   RegionFormat,

package/src/primitives/SearchMenu.tsx

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } fr
 import { MdOutlinedTextField } from "@material/web/textfield/outlined-text-field.js";
 import { MdCheckbox } from "@material/web/checkbox/checkbox.js";
 import { Toggle } from "./Toggle.js";
+import { CheckIcon } from "../icons.js";
 
 const MdOutlinedTextFieldElement = createComponent({
   react: React,
@@ -26,18 +27,6 @@ const MdCheckboxElement = createComponent({
   elementClass: MdCheckbox,
 });
 
-/** MD3 "check" symbol (Figma) — marking the selected row in any option list below. */
-function CheckIcon() {
-  return (
-    <svg viewBox="0 0 18 18" fill="none" aria-hidden="true">
-      <path
-        d="M7.1625 13.5L2.8875 9.225L3.95625 8.15625L7.1625 11.3625L14.0438 4.48125L15.1125 5.55L7.1625 13.5Z"
-        fill="currentColor"
-      />
-    </svg>
-  );
-}
-
 export interface SearchMenuOption {
   id: string;
   /** Shown on the trigger once this option is selected, and used for search-filtering. Keep this the short/canonical name. */

package/src/style.css

@@ -751,6 +751,99 @@
   flex-wrap: wrap;
 }
 
+.chai-composer__controls-end {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-2);
+}
+
+/* Voice input: the mic left of submit. While recording it becomes a stop
+   button (a filled square in a ringed circle) and a waveform replaces the
+   prompt; while transcribing, a spinner. */
+.chai-composer__voice {
+  display: flex;
+  align-items: center;
+}
+
+.chai-composer__voice-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 2px solid transparent;
+  border-radius: var(--chai-radius-full);
+  background: transparent;
+  color: var(--chai-composer-text);
+  cursor: pointer;
+  transition: background-color var(--chai-motion-duration-fast) var(--chai-motion-easing-standard);
+}
+
+.chai-composer__voice-button:hover:not(:disabled) {
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.chai-composer__voice-button svg {
+  width: 24px;
+  height: 24px;
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button {
+  border-color: var(--chai-composer-text);
+  background: var(--chai-composer-hover);
+}
+
+.chai-composer__voice[data-status="recording"] .chai-composer__voice-button svg {
+  width: 18px;
+  height: 18px;
+}
+
+/* Same row height as the prompt it stands in for. */
+.chai-composer__waveform {
+  display: flex;
+  align-items: center;
+  gap: var(--chai-space-3);
+  min-height: var(--chai-type-leading-body-large);
+}
+
+.chai-composer__waveform-bars {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--chai-type-leading-body-large);
+  min-width: 0;
+}
+
+.chai-composer__waveform-bar {
+  width: 2px;
+  border-radius: var(--chai-radius-full);
+  background: var(--chai-composer-text);
+}
+
+.chai-composer__waveform-time {
+  color: var(--chai-composer-text);
+  font-family: var(--chai-type-family-material);
+  font-size: var(--chai-type-size-label-large);
+  font-weight: var(--chai-type-weight-material-medium);
+  font-variant-numeric: tabular-nums;
+}
+
+.chai-composer__voice-spinner {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid var(--chai-color-semantic-control-border-faint);
+  border-top-color: var(--chai-color-semantic-accent);
+  animation: chai-spin var(--chai-motion-duration-steep) linear infinite;
+}
+
 /* Neutral trigger text, not `--md-sys-color-primary` green (account
    holder correction: "don't make dropdown select menu buttons green when
    they don't need to be"). */