@kitn.ai/ui 0.18.2 → 0.20.0

package/src/components/audio-visualizer/variant-wave.tsx

@@ -0,0 +1,125 @@
+import { createEffect, type JSX } from 'solid-js';
+import { ShaderCanvas, hexToRgb, DEFAULT_SHADER_COLOR } from './shader-canvas';
+import { createTween } from '../../primitives/create-tween';
+import { waveTargets } from '../../primitives/visualizer-sequences';
+import { CONTAINER_HEIGHT } from './sizes';
+import type { ShaderVariantProps } from './index';
+import waveShader from './wave.glsl';
+
+// Upstream defaults that aren't exposed as public props anywhere in this
+// component's contract (`ShaderVariantProps` has no `blur`/`colorShift`
+// field, and the dispatcher never forwards either) -- so they stay fixed
+// rather than becoming half-wired knobs nothing can reach.
+const BLUR = 0.5;
+const COLOR_SHIFT = 0.05;
+
+/**
+ * A flowing oscilloscope line.
+ *
+ * Ported from livekit/components-js `agent-audio-visualizer-wave.tsx`
+ * (Apache License 2.0). The shader itself (`wave.glsl.ts`) is copied
+ * verbatim; this wrapper replaces upstream's React component and its
+ * `motion` dependency with Solid signals and `createTween`.
+ */
+export default function WaveVisualizer(props: ShaderVariantProps): JSX.Element {
+  const amplitude = createTween(0);
+  const frequency = createTween(0);
+  const opacity = createTween(1);
+
+  const targets = () => waveTargets(props.state);
+
+  // Reduced motion: land on the target immediately and skip every pulse.
+  const transition = () =>
+    props.frozen ? { duration: 0 } : { duration: 0.2, ease: 'easeOut' as const };
+
+  // Opacity alone: it only follows state/frozen, so a volume tick (nearly
+  // every animation frame while speaking) never restarts the pulse's tween.
+  createEffect(() => {
+    const t = targets();
+    // A pulse is an array target ([from, to], see createTween's ping-pong).
+    // Reduced motion collapses it to its first value so the line holds
+    // still instead of breathing.
+    const fade = Array.isArray(t.opacity) && props.frozen ? t.opacity[0] : t.opacity;
+    opacity.to(fade, props.frozen ? { duration: 0 } : { duration: t.pulseDuration || 0.2 });
+  });
+
+  // Amplitude and frequency share ONE effect -- a single writer -- on
+  // purpose. They used to be split like opacity above: a state effect
+  // tweening toward the base target over 0.2s, plus a separate effect
+  // applying the live-volume override instantly while speaking. Both re-run
+  // on a state flip, and Solid re-runs sibling effects in the order they sit
+  // in the signal's observer list, which REORDERS as effects re-subscribe
+  // over their lifetimes -- so whichever happened to run last won. Under a
+  // loaded main thread the base tween could land AFTER the override,
+  // parking a speaking line at the 0.025 baseline until the next volume
+  // change; with live audio that self-heals within one ~33ms tick, but
+  // static drive (a pinned `bands`/`volume` override, upstream's #1399 prop
+  // mode) never ticks again, so it stalled visibly (measured on the parity
+  // harness, 2/2 under load). This is NOT the benign two-effect shape the
+  // Task 12 review ruled acceptable elsewhere -- that ruling covered
+  // effects with DISJOINT writers; these two wrote the same tweens. One
+  // effect, one writer, ordering can no longer matter. Same effect-race
+  // class as b5795ac's shared() finding.
+  createEffect(() => {
+    if (props.state === 'speaking') {
+      // Live volume drives amplitude and frequency instantly while
+      // speaking, so the line never lags the audio -- and lands at the
+      // override immediately on re-entry, matching upstream's same-commit
+      // effect ordering. `volume` is only tracked in this branch, so
+      // volume ticks do not re-run the state-target path below.
+      const v = props.volume;
+      amplitude.to(0.015 + 0.4 * v, { duration: 0 });
+      frequency.to(20 + 60 * v, { duration: 0 });
+      return;
+    }
+    const t = targets();
+    amplitude.to(t.amplitude, transition());
+    frequency.to(t.frequency, transition());
+  });
+
+  const lineWidth = () => (props.size === 'icon' || props.size === 'sm' ? 2 : 1);
+
+  return (
+    <div
+      data-kai-state={props.state}
+      class={props.class}
+      style={{
+        height: `${CONTAINER_HEIGHT[props.size]}px`,
+        'aspect-ratio': '1',
+        'mask-image':
+          'linear-gradient(90deg, transparent 0%, black 20%, black 80%, transparent 100%)',
+      }}
+    >
+      <ShaderCanvas
+        fragment={waveShader}
+        // Shaders are expensive on phones; mediump halves the cost with no
+        // visible difference on a line this thin.
+        precision={props.size === 'icon' || props.size === 'sm' ? 'mediump' : 'highp'}
+        uniforms={{
+          // uSpeed drives the shader's own time-based phase animation, not a
+          // tween -- so frozen (prefers-reduced-motion) must zero it directly
+          // rather than relying on any tween's instant-landing logic. uAmplitude
+          // and uFrequency stay as their frozen-collapsed values: they shape a
+          // static wave, they do not move it, so the result is a still picture
+          // of the wave rather than a flat line.
+          uSpeed: { type: '1f', value: props.frozen ? 0 : targets().speed },
+          uAmplitude: { type: '1f', value: amplitude.value() },
+          uFrequency: { type: '1f', value: frequency.value() },
+          uMix: { type: '1f', value: opacity.value() },
+          uLineWidth: { type: '1f', value: lineWidth() },
+          uSmoothing: { type: '1f', value: BLUR },
+          uColor: { type: '3fv', value: hexToRgb(props.color ?? DEFAULT_SHADER_COLOR) },
+          uColorShift: { type: '1f', value: COLOR_SHIFT },
+        }}
+        animateWhenNotVisible={props.animateWhenNotVisible}
+        onError={(message) => {
+          console.warn('<kai-audio-visualizer variant="wave">: shader error', message);
+          // A missing WebGL context and a compile/link failure both mean
+          // this shader cannot render at all -- no branching, both fall
+          // back to the dispatcher's bar visualizer.
+          props.onUnavailable();
+        }}
+      />
+    </div>
+  );
+}

package/src/components/audio-visualizer/wave.glsl.ts

@@ -0,0 +1,130 @@
+/**
+ * Oscilloscope wave fragment shader.
+ *
+ * Copied verbatim from livekit/components-js
+ * `packages/shadcn/components/agents-ui/agent-audio-visualizer-wave.tsx`
+ * (Apache License 2.0). Unmodified apart from being extracted to its own
+ * module: no GLSL lines were added, removed, or reformatted. The source
+ * contained no `uniform ...;` declarations to strip -- `uFrequency`,
+ * `uSpeed`, `uAmplitude`, `uLineWidth`, `uSmoothing`, `uColor`,
+ * `uColorShift`, and `uMix` are all bound by the caller (see uses of
+ * `ShaderCanvas` below), which is what declares them.
+ *
+ * Uniforms are declared by ShaderCanvas. Do not declare them here.
+ */
+export default `
+const float TAU = 6.28318530718;
+
+// Noise for dithering
+vec2 randFibo(vec2 p) {
+  p = fract(p * vec2(443.897, 441.423));
+  p += dot(p, p.yx + 19.19);
+  return fract((p.xx + p.yx) * p.xy);
+}
+
+// Luma for alpha
+float luma(vec3 color) {
+  return dot(color, vec3(0.299, 0.587, 0.114));
+}
+
+// RGB to HSV
+vec3 rgb2hsv(vec3 c) {
+  vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
+  vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g));
+  vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r));
+  float d = q.x - min(q.w, q.y);
+  float e = 1.0e-10;
+  return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x);
+}
+
+// HSV to RGB
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+// Bell curve function for attenuation from center with rounded top
+float bellCurve(float distanceFromCenter, float maxDistance) {
+  float normalizedDistance = distanceFromCenter / maxDistance;
+  // Use cosine with high power for smooth rounded top
+  return pow(cos(normalizedDistance * (3.14159265359 / 4.0)), 16.0);
+}
+
+// Calculate the sine wave
+float oscilloscopeWave(float x, float centerX, float time) {
+  float relativeX = x - centerX;
+  float maxDistance = centerX;
+  float distanceFromCenter = abs(relativeX);
+
+  // Apply bell curve for amplitude attenuation
+  float bell = bellCurve(distanceFromCenter, maxDistance);
+
+  // Calculate wave with uniforms and bell curve attenuation
+  float wave = sin(relativeX * uFrequency + time * uSpeed) * uAmplitude * bell;
+
+  return wave;
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = fragCoord / iResolution.xy;
+  vec2 pos = uv - 0.5;
+
+  // Calculate center and positions
+  float centerX = 0.5;
+  float centerY = 0.5;
+  float x = uv.x;
+  float y = uv.y;
+
+  // Convert line width from pixels to UV space
+  // Use the average of width and height to handle aspect ratio
+  float pixelSize = 2.0 / (iResolution.x + iResolution.y);
+  float lineWidthUV = uLineWidth * pixelSize;
+  float smoothingUV = uSmoothing * pixelSize;
+
+  // Find minimum distance to the wave by sampling nearby points
+  // This gives us consistent line width without high-frequency artifacts
+  const int NUM_SAMPLES = 50; // Must be const for GLSL loop
+  float minDist = 1000.0;
+  float sampleRange = 0.02; // Range to search for closest point
+
+  for(int i = 0; i < NUM_SAMPLES; i++) {
+    float offset = (float(i) / float(NUM_SAMPLES - 1) - 0.5) * sampleRange;
+    float sampleX = x + offset;
+    float waveY = centerY + oscilloscopeWave(sampleX, centerX, iTime);
+
+    // Calculate distance from current pixel to this point on the wave
+    vec2 wavePoint = vec2(sampleX, waveY);
+    vec2 currentPoint = vec2(x, y);
+    float dist = distance(currentPoint, wavePoint);
+
+    minDist = min(minDist, dist);
+  }
+
+  // Solid line with smooth edges using minimum distance
+  float line = smoothstep(lineWidthUV + smoothingUV, lineWidthUV - smoothingUV, minDist);
+
+  vec3 color = uColor;
+  if(abs(uColorShift) > 0.01) {
+    // Keep the center 50% at base color, then ramp shift across outer 25% on each side.
+    float centerBandHalfWidth = 0.2;
+    float edgeBandWidth = 0.5;
+    float distanceFromCenter = abs(x - centerX);
+    float edgeFactor = clamp((distanceFromCenter - centerBandHalfWidth) / edgeBandWidth, 0.0, 1.0);
+    vec3 hsv = rgb2hsv(color);
+    // Hue shift is zero in the center band and strongest at far edges.
+    hsv.x = fract(hsv.x + edgeFactor * uColorShift * 0.3);
+    color = hsv2rgb(hsv);
+  }
+
+  // Apply line intensity
+  color *= line;
+
+  // Add dithering for smoother gradients
+  // color += (randFibo(fragCoord).x - 0.5) / 255.0;
+
+  // Calculate alpha based on line intensity
+  float alpha = line * uMix;
+
+  fragColor = vec4(color * uMix, alpha);
+}`;