import { jsx } from "react/jsx-runtime";
import { ArrowDown } from "@choiceform/icons-react";
import { observer, use$ as useSelector } from "../../../_vendor/@legendapp/state/react.js";
import { useEventCallback } from "../../../_vendor/usehooks-ts/dist-index.js";
import { ScrollToBottomTv } from "./tv.js";
import { t } from "../../../i18n/index.js";
import { streamingStore$ } from "../../../stores/streaming-store.js";
import { motion } from "../../../_vendor/framer-motion/dist-es-render-components-motion-proxy.js";
const ScrollToBottomButton = observer(function ScrollToBottomButton2(props) {
  const { className, shouldShow, scrollToBottom } = props;
  const isStreaming = useSelector(streamingStore$.isStreaming);
  const handleClick = useEventCallback(() => {
    scrollToBottom();
  });
  if (!shouldShow) {
    return null;
  }
  const scrollToBottomText = t("conversation", "scroll-to-bottom");
  const tv = ScrollToBottomTv({
    isStreaming
  });
  return /* @__PURE__ */ jsx(
    motion.div,
    {
      className: tv.root({ className }),
      initial: { opacity: 0, x: 10, y: isStreaming ? -32 : 0 },
      animate: { opacity: 1, x: 0, y: isStreaming ? -32 : 0 },
      exit: { opacity: 0, x: 10, y: isStreaming ? -32 : 0 },
      transition: { type: "spring", stiffness: 120, damping: 12, mass: 0.8 },
      children: /* @__PURE__ */ jsx(
        "button",
        {
          onClick: handleClick,
          className: tv.button(),
          "aria-label": scrollToBottomText,
          children: /* @__PURE__ */ jsx(ArrowDown, { className: tv.icon() })
        }
      )
    }
  );
});
export {
  ScrollToBottomButton
};
//# sourceMappingURL=scroll-to-bottom-button.js.map
