rapida-react/dist/chunk-3YJ3G4GZ.mjs

An easy to use react client for building generative ai application using Rapida platform.

import {
  cn
} from "./chunk-32YFHJN5.mjs";

// src/components/visualization/agent-multiband-audio-visualizer.tsx
import { useEffect, useState } from "react";
import { jsx } from "react/jsx-runtime";
var AgentMultibandAudioVisualizer = ({
  classNames,
  state,
  barWidth,
  minBarHeight,
  maxBarHeight,
  barColor = "bg-white",
  frequencies
}) => {
  const summedFrequencies = frequencies.map((bandFrequencies) => {
    const sum = bandFrequencies.reduce((a, b) => a + b, 0);
    return Math.sqrt(sum / bandFrequencies.length);
  });
  const [thinkingIndex, setThinkingIndex] = useState(
    Math.floor(summedFrequencies.length / 2)
  );
  const [thinkingDirection, setThinkingDirection] = useState(
    "right"
  );
  useEffect(() => {
    if (state !== "thinking") {
      setThinkingIndex(Math.floor(summedFrequencies.length / 2));
      return;
    }
    const timeout = setTimeout(() => {
      if (thinkingDirection === "right") {
        if (thinkingIndex === summedFrequencies.length - 1) {
          setThinkingDirection("left");
          setThinkingIndex((prev) => prev - 1);
        } else {
          setThinkingIndex((prev) => prev + 1);
        }
      } else {
        if (thinkingIndex === 0) {
          setThinkingDirection("right");
          setThinkingIndex((prev) => prev + 1);
        } else {
          setThinkingIndex((prev) => prev - 1);
        }
      }
    }, 200);
    return () => clearTimeout(timeout);
  }, [state, summedFrequencies.length, thinkingDirection, thinkingIndex]);
  return /* @__PURE__ */ jsx("div", { className: cn(classNames, "flex flex-row items-center"), children: summedFrequencies.map((frequency, index) => {
    const isCenter = index === Math.floor(summedFrequencies.length / 2);
    let transform;
    return /* @__PURE__ */ jsx(
      "div",
      {
        className: cn(
          barColor,
          "rounded-full",
          isCenter && state === "listening" ? "animate-pulse" : ""
        ),
        style: {
          height: minBarHeight + frequency * (maxBarHeight - minBarHeight) + "px",
          width: barWidth + "px",
          transition: "background-color 0.35s ease-out, transform 0.25s ease-out",
          transform
        }
      },
      "frequency-" + index
    );
  }) });
};

export {
  AgentMultibandAudioVisualizer
};
//# sourceMappingURL=chunk-3YJ3G4GZ.mjs.map