@dust-tt/sparkle 0.7.6-rc-3 → 0.7.6

package/dist/esm/styles/allotment.css

@@ -17,28 +17,37 @@
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
+.allotment-module_splitView__L-yRc
+  > .allotment-module_sashContainer__fzwJF
+  > .allotment-module_sash__QA-2t {
   pointer-events: auto;
 }
 
-.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
+.allotment-module_splitView__L-yRc
+  > .allotment-module_splitViewContainer__rQnVa {
   height: 100%;
   position: relative;
   white-space: nowrap;
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc
+  > .allotment-module_splitViewContainer__rQnVa
+  > .allotment-module_splitViewView__MGZ6O {
   overflow: hidden;
   position: absolute;
   white-space: initial;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa
+  > .allotment-module_splitViewContainer__rQnVa
+  > .allotment-module_splitViewView__MGZ6O {
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8
+  > .allotment-module_splitViewContainer__rQnVa
+  > .allotment-module_splitViewView__MGZ6O {
   height: 100%;
 }
 
@@ -129,7 +138,8 @@
   height: var(--sash-size);
 }
 
-.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
+.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx)
+  > .sash-module_orthogonal-drag-handle__Yii2- {
   content: " ";
   height: calc(var(--sash-size) * 2);
   width: calc(var(--sash-size) * 2);
@@ -139,36 +149,48 @@
   position: absolute;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
+    .sash-module_disabled__Hm-wx
+  )
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
+    .sash-module_disabled__Hm-wx
+  )
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   cursor: nwse-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
+    .sash-module_disabled__Hm-wx
+  )
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
+    .sash-module_disabled__Hm-wx
+  )
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   cursor: nesw-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
+  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   left: calc(var(--sash-size) * -0.5);
   top: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
+  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   left: calc(var(--sash-size) * -0.5);
   bottom: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
+  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   top: calc(var(--sash-size) * -0.5);
   left: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
+  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   top: calc(var(--sash-size) * -0.5);
   right: calc(var(--sash-size) * -1);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.7.6-rc-3",
+  "version": "0.7.6",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "npx tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/AssistantCard.tsx

@@ -27,7 +27,7 @@ export const AssistantCardMore = React.forwardRef<
   HTMLButtonElement,
   AssistantCardMore
 >(({ ...props }, ref) => {
-  return <CardActionButton ref={ref} icon={MoreIcon} {...props} />;
+  return <CardActionButton size="mini" ref={ref} icon={MoreIcon} {...props} />;
 });
 AssistantCardMore.displayName = "AssistantCardMore";
 

package/src/components/Button.tsx

@@ -34,15 +34,9 @@ export const BUTTON_VARIANTS = [
 
 export type ButtonVariantType = (typeof BUTTON_VARIANTS)[number];
 
-export const BUTTON_SIZES = ["icon-xs", "icon", "xmini", "mini", "xs", "sm", "md"] as const;
+export const BUTTON_SIZES = ["xmini", "mini", "xs", "sm", "md"] as const;
 export type ButtonSizeType = (typeof BUTTON_SIZES)[number];
 
-// Icon-only button sizes (fixed width, labels hidden)
-export const ICON_ONLY_SIZES = ["icon-xs", "icon"] as const;
-
-// Small button sizes that use xs spinner size
-export const SMALL_BUTTON_SIZES = ["icon-xs", "icon", "xmini", "mini"] as const;
-
 // Define button styling with cva
 const buttonVariants = cva(
   cn(
@@ -147,17 +141,13 @@ const buttonVariants = cva(
         ),
       },
       size: {
-        "icon-xs": "s-h-6 s-w-6 s-label-xs s-gap-1 s-shrink-0",
-        icon: "s-h-7 s-w-7 s-label-xs s-gap-1.5 s-shrink-0",
-        xmini: "s-h-6 s-px-1.5 s-label-xs s-gap-1 s-shrink-0",
-        mini: "s-h-7 s-px-2 s-label-xs s-gap-1.5 s-shrink-0",
+        xmini: "s-h-6 s-w-6 s-label-xs s-gap-1 s-shrink-0",
+        mini: "s-h-7 s-w-7 s-label-xs s-gap-1.5 s-shrink-0",
         xs: "s-h-7 s-px-2.5 s-label-xs s-gap-1.5 s-shrink-0",
         sm: "s-h-9 s-px-3 s-label-sm s-gap-2 s-shrink-0",
         md: "s-h-12 s-px-4 s-py-2 s-label-base s-gap-2.5 s-shrink-0",
       },
       rounded: {
-        "icon-xs": "s-rounded-lg",
-        icon: "s-rounded-lg",
         xmini: "s-rounded-lg",
         mini: "s-rounded-lg",
         xs: "s-rounded-lg",
@@ -177,10 +167,8 @@ const buttonVariants = cva(
 const labelVariants = cva("", {
   variants: {
     size: {
-      "icon-xs": "s-label-xs s-hidden",
-      icon: "s-label-xs s-hidden",
-      xmini: "s-label-xs",
-      mini: "s-label-xs",
+      xmini: "s-label-xs s-hidden",
+      mini: "s-label-xs s-hidden",
       xs: "s-label-xs",
       sm: "s-label-sm",
       md: "s-label-base",
@@ -258,8 +246,6 @@ type IconSizeType = "xs" | "sm" | "md";
 type CounterSizeType = "xs" | "sm" | "md";
 
 export const ICON_SIZE_MAP: Record<ButtonSizeType, IconSizeType> = {
-  "icon-xs": "xs",
-  icon: "sm",
   xmini: "xs",
   mini: "sm",
   xs: "xs",
@@ -268,8 +254,6 @@ export const ICON_SIZE_MAP: Record<ButtonSizeType, IconSizeType> = {
 };
 
 const COUNTER_SIZE_MAP: Record<ButtonSizeType, CounterSizeType> = {
-  "icon-xs": "xs",
-  icon: "xs",
   xmini: "xs",
   mini: "xs",
   xs: "xs",
@@ -289,19 +273,19 @@ type CommonButtonProps = Omit<MetaButtonProps, "children"> &
     isRounded?: boolean;
   };
 
-export type ButtonProps = CommonButtonProps & {
-  size?: ButtonSizeType;
-  icon?: React.ComponentType;
-  label?: string;
-};
-
 export type MiniButtonProps = CommonButtonProps & {
   size: "mini";
   icon: React.ComponentType;
   label?: never;
 };
 
-export type RegularButtonProps = ButtonProps;
+export type RegularButtonProps = CommonButtonProps & {
+  size?: Exclude<ButtonSizeType, "mini">;
+  icon?: React.ComponentType;
+  label?: string;
+};
+
+export type ButtonProps = MiniButtonProps | RegularButtonProps;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
@@ -368,11 +352,12 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           <div
             className={cn(
               "-s-mx-0.5",
-              SMALL_BUTTON_SIZES.includes(size as typeof SMALL_BUTTON_SIZES[number]) && "s-w-5 s-px-0.5"
+              size === "mini" && "s-w-5 s-px-0.5",
+              size === "xmini" && "s-w-5 s-px-0.5"
             )}
           >
             <Spinner
-              size={SMALL_BUTTON_SIZES.includes(size as typeof SMALL_BUTTON_SIZES[number]) ? "xs" : iconSize}
+              size={size === "mini" || size === "xmini" ? "xs" : iconSize}
               variant={(variant && spinnerVariantsMap[variant]) || "gray400"}
             />
           </div>

package/src/components/ButtonGroup.tsx

@@ -4,10 +4,7 @@ import * as React from "react";
 import { cn } from "@sparkle/lib/utils";
 
 import type { ButtonProps, ButtonSizeType, ButtonVariantType } from "./Button";
-import { Button, ICON_ONLY_SIZES } from "./Button";
-
-// Sizes that must be set per-item in ButtonGroup (not at group level)
-const PER_ITEM_SIZES = ["mini", ...ICON_ONLY_SIZES] as const;
+import { Button } from "./Button";
 import type { DropdownMenuItemProps } from "./Dropdown";
 import {
   DropdownMenu,
@@ -95,9 +92,9 @@ export interface ButtonGroupProps
    */
   variant?: ButtonGroupVariantType;
   /**
-   * Size to apply to all buttons in the group. Icon-only buttons and mini must opt-in per item.
+   * Size to apply to all buttons in the group. Mini buttons must opt-in per item.
    */
-  size?: Exclude<ButtonSizeType, "mini" | "icon" | "icon-xs">;
+  size?: Exclude<ButtonSizeType, "mini">;
   /**
    * Whether every button should be disabled.
    */
@@ -171,10 +168,10 @@ const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
       if (item.type === "button") {
         const nextVariant = sanitizeVariant(variant ?? item.props.variant);
         const rawSize = size ?? item.props.size;
-        const nextSize: Exclude<ButtonSizeType, "mini" | "icon" | "icon-xs"> | undefined =
-          PER_ITEM_SIZES.includes(rawSize as typeof PER_ITEM_SIZES[number])
+        const nextSize: Exclude<ButtonSizeType, "mini"> | undefined =
+          rawSize === "mini"
             ? undefined
-            : (rawSize as Exclude<ButtonSizeType, "mini" | "icon" | "icon-xs"> | undefined);
+            : (rawSize as Exclude<ButtonSizeType, "mini"> | undefined);
 
         return (
           <Button

package/src/components/Card.tsx

@@ -225,20 +225,15 @@ const CardActions = React.forwardRef<
 
 CardActions.displayName = "CardActions";
 
-export type CardActionButtonProps = Omit<MiniButtonProps, "size"> & {
-  size?: "icon" | "icon-xs";
-};
-
 export const CardActionButton = React.forwardRef<
   HTMLButtonElement,
-  CardActionButtonProps
->(({ className, variant = "outline", icon = XMarkIcon, size = "icon", ...props }, ref) => {
+  MiniButtonProps
+>(({ className, variant = "outline", icon = XMarkIcon, ...props }, ref) => {
   return (
     <Button
       ref={ref}
       variant={variant}
       icon={icon}
-      size={size}
       className={className}
       {...props}
     />

package/src/components/InteractiveImageGrid.tsx

@@ -5,9 +5,9 @@ import { ImageZoomDialog } from "@sparkle/components/ImageZoomDialog";
 import { cn } from "@sparkle/lib/utils";
 
 const SIZE_CLASSES = {
-  sm: "s-h-24 s-w-24",
-  md: "s-h-48 s-w-48",
-  lg: "s-h-80 s-w-80",
+  sm: "s-relative s-h-24 s-w-24",
+  md: "s-relative s-h-48 s-w-48",
+  lg: "s-relative s-h-80 s-w-80",
 } as const;
 
 type InteractiveImageGridSize = keyof typeof SIZE_CLASSES;
@@ -101,7 +101,7 @@ function InteractiveImageGrid({
                 downloadUrl={image.downloadUrl}
                 isLoading={image.isLoading}
                 onClick={() => setCurrentImageIndex(idx)}
-                variant="embedded"
+                variant="standalone"
                 titlePosition="center"
                 manageZoomDialog={false}
               />

package/src/components/NavigationList.tsx

@@ -167,7 +167,7 @@ const NavigationListItem = React.forwardRef<
             {icon && <Icon visual={icon} size="xs" className="s-m-0.5" />}
             {avatar}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-focus-within/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-focus-within/menu-item:s-pr-8 group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
                 {label}
               </span>
             )}
@@ -179,7 +179,7 @@ const NavigationListItem = React.forwardRef<
                 className={cn(
                   "s-flex-shrink-0 s-translate-x-0.5",
                   moreMenu &&
-                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden"
+                    "group-focus-within/menu-item:s-hidden group-hover/menu-item:s-hidden"
                 )}
               />
             )}
@@ -188,7 +188,7 @@ const NavigationListItem = React.forwardRef<
                 className={cn(
                   "s-heading-xs s-flex s-flex-shrink-0 s-items-center s-justify-center s-rounded-full",
                   moreMenu &&
-                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden",
+                    "group-focus-within/menu-item:s-hidden group-hover/menu-item:s-hidden",
                   getStatusDotColor()
                 )}
               />

package/src/components/VoicePicker.tsx

@@ -0,0 +1,267 @@
+import * as React from "react";
+
+import type { ButtonProps, ButtonSizeType } from "@sparkle/components/Button";
+import { Button } from "@sparkle/components/Button";
+import { MicIcon, SquareIcon } from "@sparkle/icons/app";
+import { cn } from "@sparkle/lib/utils";
+
+const DEFAULT_PRESS_DELAY_MS = 150;
+const VOICE_LEVEL_BASE_HEIGHTS = [
+  22, 33, 18, 64, 98, 56, 6, 34, 76, 46, 12, 22,
+];
+
+export type VoicePickerStatus =
+  | "idle"
+  | "authorizing_microphone"
+  | "recording"
+  | "transcribing";
+
+type VoicePickerInteractionMode = "hold" | "click";
+
+export interface VoicePickerProps {
+  status: VoicePickerStatus;
+  level: number;
+  elapsedSeconds: number;
+  onRecordStart: () => void | Promise<void>;
+  onRecordStop: () => void | Promise<void>;
+  size?: Exclude<ButtonSizeType, "xmini" | "mini">;
+  disabled?: boolean;
+  showStopLabel?: boolean;
+  pressDelayMs?: number;
+  buttonProps?: Omit<
+    ButtonProps,
+    "icon" | "label" | "variant" | "isLoading" | "disabled" | "size"
+  >;
+}
+
+export function VoicePicker({
+  status,
+  level,
+  elapsedSeconds,
+  onRecordStart,
+  onRecordStop,
+  size = "xs",
+  disabled = false,
+  showStopLabel = false,
+  pressDelayMs = DEFAULT_PRESS_DELAY_MS,
+  buttonProps,
+}: VoicePickerProps): React.ReactElement {
+  const [interactionMode, setInteractionMode] =
+    React.useState<VoicePickerInteractionMode>("hold");
+  const pressStartRef = React.useRef<number | null>(null);
+  const pressTimeoutRef = React.useRef<number | null>(null);
+
+  const isRecording = status === "recording";
+  const isTranscribing = status === "transcribing";
+  const isLoading =
+    status === "transcribing" || status === "authorizing_microphone";
+  const shouldShowStop = isRecording && interactionMode === "click";
+
+  function clearPressTimeout(): void {
+    if (pressTimeoutRef.current !== null) {
+      window.clearTimeout(pressTimeoutRef.current);
+      pressTimeoutRef.current = null;
+    }
+  }
+
+  function stopEvent(event: React.SyntheticEvent): void {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
+  async function handlePointerDown(
+    event: React.PointerEvent<HTMLButtonElement>
+  ): Promise<void> {
+    buttonProps?.onPointerDown?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    stopEvent(event);
+
+    if (disabled) {
+      return;
+    }
+
+    pressStartRef.current = Date.now();
+
+    clearPressTimeout();
+    pressTimeoutRef.current = window.setTimeout(async () => {
+      if (pressStartRef.current !== null) {
+        setInteractionMode("hold");
+        if (status === "idle") {
+          await onRecordStart();
+        }
+      }
+    }, pressDelayMs);
+  }
+
+  async function handlePointerUp(
+    event: React.PointerEvent<HTMLButtonElement>
+  ): Promise<void> {
+    buttonProps?.onPointerUp?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    stopEvent(event);
+
+    if (disabled) {
+      return;
+    }
+
+    const start = pressStartRef.current;
+    clearPressTimeout();
+    pressStartRef.current = null;
+
+    const duration =
+      start === null ? Number.POSITIVE_INFINITY : Date.now() - start;
+
+    if (duration < pressDelayMs) {
+      setInteractionMode("click");
+      if (status === "idle") {
+        await onRecordStart();
+        return;
+      }
+      await onRecordStop();
+      return;
+    }
+
+    if (status === "recording") {
+      await onRecordStop();
+    }
+  }
+
+  async function handlePointerLeave(
+    event: React.PointerEvent<HTMLButtonElement>
+  ): Promise<void> {
+    buttonProps?.onPointerLeave?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    stopEvent(event);
+
+    if (disabled || interactionMode !== "hold") {
+      return;
+    }
+    if (status === "recording") {
+      await onRecordStop();
+    }
+  }
+
+  async function handleClick(
+    event: React.MouseEvent<HTMLButtonElement>
+  ): Promise<void> {
+    buttonProps?.onClick?.(event);
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    stopEvent(event);
+
+    if (disabled || interactionMode !== "click") {
+      return;
+    }
+    if (status === "recording") {
+      await onRecordStop();
+    }
+  }
+
+  const icon = shouldShowStop ? SquareIcon : MicIcon;
+  const variant = shouldShowStop ? "highlight" : "ghost-secondary";
+  const label = shouldShowStop && showStopLabel ? "Stop" : undefined;
+  const tooltip = computeTooltip(interactionMode, isRecording, isTranscribing);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "s-duration-600 s-flex s-items-center s-justify-end s-gap-2 s-overflow-hidden s-px-2 s-transition-all s-ease-in-out",
+          isRecording ? "s-opacity-100" : "s-hidden"
+        )}
+      >
+        <div className="s-heading-xs s-font-mono">
+          {formatTime(elapsedSeconds)}
+        </div>
+        <VoiceLevelDisplay level={level} />
+      </div>
+      <Button
+        {...buttonProps}
+        size={size}
+        icon={icon}
+        isLoading={isLoading}
+        variant={variant}
+        tooltip={tooltip}
+        label={label}
+        disabled={disabled}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerLeave={handlePointerLeave}
+        onClick={handleClick}
+      />
+    </>
+  );
+}
+
+interface VoiceLevelDisplayProps {
+  level: number;
+}
+
+function VoiceLevelDisplay({
+  level,
+}: VoiceLevelDisplayProps): React.ReactElement {
+  const clampedLevel = Math.max(0, Math.min(1, level * 1.2));
+  const easedLevel = Math.pow(clampedLevel, 0.8);
+
+  const minHeights = VOICE_LEVEL_BASE_HEIGHTS.map((height) =>
+    Math.max(6, Math.round(height * 0.3))
+  );
+
+  const heights = VOICE_LEVEL_BASE_HEIGHTS.map((height, index) =>
+    Math.max(
+      1,
+      Math.min(
+        100,
+        Math.round(
+          minHeights[index] + (height - minHeights[index]) * easedLevel
+        )
+      )
+    )
+  );
+
+  return (
+    <div className="s-flex s-h-5 s-items-center s-gap-0.5">
+      {heights.map((height, index) => (
+        <div
+          key={index}
+          className="s-min-h-1 s-w-0.5 s-rounded-full s-bg-muted-foreground s-transition-all s-duration-150 s-ease-out"
+          style={{ height: `${height}%` }}
+        />
+      ))}
+    </div>
+  );
+}
+
+function computeTooltip(
+  mode: VoicePickerInteractionMode,
+  isRecording: boolean,
+  isTranscribing: boolean
+): string {
+  if (isTranscribing) {
+    return "Transcribing...";
+  }
+  if (mode === "hold" && isRecording) {
+    return "Release to stop";
+  }
+  if (isRecording) {
+    return "Stop recording";
+  }
+  return "Click, or Press & Hold to record";
+}
+
+function formatTime(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = seconds % 60;
+  return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+}

package/src/components/index.ts

@@ -221,3 +221,5 @@ export {
 export { Tree } from "./Tree";
 export { TypingAnimation } from "./TypingAnimation";
 export { ValueCard } from "./ValueCard";
+export type { VoicePickerProps, VoicePickerStatus } from "./VoicePicker";
+export { VoicePicker } from "./VoicePicker";

package/src/logo/platforms/Ukg.tsx

@@ -0,0 +1,22 @@
+import type { SVGProps } from "react";
+import * as React from "react";
+const SvgUkg = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <path
+      fill="#2CD5C4"
+      d="M6.937 4.467A2.469 2.469 0 1 1 2 4.47a2.469 2.469 0 0 1 4.937-.003ZM22 4.467A2.46 2.46 0 1 1 19.55 2 2.47 2.47 0 0 1 22 4.467Z"
+    />
+    <path
+      fill="#005857"
+      d="M12.02 22c-2.657-.002-5.205-.976-7.084-2.709-1.878-1.733-2.934-4.083-2.934-6.533v-1.466a2.02 2.02 0 0 1 .152-.857c.113-.273.285-.522.504-.733.22-.21.484-.378.776-.492a2.529 2.529 0 0 1 1.845 0c.291.114.555.282.775.492.22.21.391.46.504.733.113.274.165.565.152.857v1.523c0 2.685 1.727 4.874 5.29 4.874 3.314 0 5.288-2.19 5.288-4.874v-1.523c-.018-.295.03-.59.14-.867.111-.278.282-.531.502-.746a2.37 2.37 0 0 1 .78-.502 2.53 2.53 0 0 1 1.864 0c.294.117.56.288.78.502.22.215.391.468.502.745.11.278.158.573.14.868v1.466a8.57 8.57 0 0 1-.746 3.534 9.175 9.175 0 0 1-2.162 3c-.928.858-2.03 1.538-3.245 2.002a10.71 10.71 0 0 1-3.83.701"
+    />
+  </svg>
+);
+export default SvgUkg;

package/src/logo/platforms/index.ts

@@ -59,6 +59,7 @@ export { default as SnowflakeLogo } from "./Snowflake";
 export { default as StripeLogo } from "./Stripe";
 export { default as SupabaseLogo } from "./Supabase";
 export { default as TogetheraiLogo } from "./Togetherai";
+export { default as UkgLogo } from "./Ukg";
 export { default as ValTownLogo } from "./ValTown";
 export { default as VantaLogo } from "./Vanta";
 export { default as ZapierLogo } from "./Zapier";

package/src/logo/src/platforms/UKG.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.9373 4.46699C6.93764 4.95539 6.7931 5.43291 6.52197 5.83914C6.25084 6.24538 5.86531 6.56205 5.41415 6.74911C4.963 6.93617 4.46649 6.9852 3.98746 6.89001C3.50843 6.79481 3.0684 6.55966 2.72305 6.21431C2.3777 5.86896 2.14255 5.42893 2.04735 4.9499C1.95215 4.47087 2.00119 3.97436 2.18824 3.52321C2.3753 3.07205 2.69198 2.68652 3.09821 2.41539C3.50444 2.14426 3.98197 1.99972 4.47037 2.00006C5.1245 2.00052 5.75171 2.26057 6.21425 2.72311C6.67679 3.18565 6.93684 3.81286 6.9373 4.46699Z" fill="#2CD5C4"/>
+<path d="M22 4.46695C21.9986 4.95365 21.8529 5.429 21.5813 5.83287C21.3097 6.23674 20.9245 6.55097 20.4742 6.73581C20.024 6.92064 19.529 6.96777 19.052 6.87124C18.575 6.7747 18.1373 6.53884 17.7944 6.19349C17.4514 5.84815 17.2186 5.40883 17.1254 4.93114C17.0322 4.45345 17.0828 3.95885 17.2708 3.50991C17.4588 3.06098 17.7757 2.6779 18.1814 2.40913C18.5872 2.14036 19.0636 1.99798 19.5503 2.00002C20.2013 2.00545 20.8238 2.26765 21.2825 2.7296C21.7413 3.19156 21.9991 3.81592 22 4.46695Z" fill="#2CD5C4"/>
+<path d="M12.0209 22C9.36334 21.9983 6.8152 21.0239 4.93649 19.291C3.05778 17.5581 2.00221 15.2084 2.00174 12.7583V11.292C1.98955 10.9999 2.04141 10.7086 2.15424 10.4354C2.26706 10.1622 2.43852 9.9129 2.65835 9.70228C2.87818 9.49167 3.14185 9.32412 3.43358 9.20968C3.7253 9.09523 4.03908 9.03624 4.35612 9.03624C4.67316 9.03624 4.98694 9.09523 5.27867 9.20968C5.57039 9.32412 5.83407 9.49167 6.05389 9.70228C6.27372 9.9129 6.44518 10.1622 6.558 10.4354C6.67083 10.7086 6.72269 10.9999 6.7105 11.292V12.8146C6.7105 15.4996 8.43704 17.6895 12 17.6895C15.3136 17.6895 17.2878 15.4996 17.2878 12.8146V11.292C17.2703 10.997 17.3183 10.7018 17.4288 10.4245C17.5392 10.1472 17.7098 9.89355 17.9301 9.67905C18.1505 9.46456 18.4159 9.29372 18.7103 9.17697C19.0046 9.06021 19.3217 9 19.6421 9C19.9626 9 20.2796 9.06021 20.574 9.17697C20.8683 9.29372 21.1338 9.46456 21.3541 9.67905C21.5745 9.89355 21.7451 10.1472 21.8555 10.4245C21.966 10.7018 22.0139 10.997 21.9965 11.292V12.7583C22.0027 13.9702 21.749 15.1713 21.2498 16.2924C20.7507 17.4136 20.0161 18.4327 19.0881 19.2911C18.1602 20.1496 17.0574 20.8304 15.843 21.2945C14.6287 21.7585 13.3268 21.9967 12.0122 21.9952" fill="#005857"/>
+</svg>