fix(agent): validate UI envelopes

2026-07-14 11:01:07 +08:00
parent 1c85d938a6
commit ed60a13f12
6 changed files with 276 additions and 31 deletions
@@ -0,0 +1,118 @@
+"use client";
+
+import type { ComponentProps } from "react";
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/shared/ui/button";
+
+export type SuggestionsProps = ComponentProps<"div">;
+
+const SCROLL_EASING = 0.28;
+const SCROLL_END_THRESHOLD = 0.5;
+
+export const Suggestions = ({ className, children, ...props }: SuggestionsProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+
+    let animationFrameId: number | null = null;
+    let targetScrollLeft = element.scrollLeft;
+
+    const animateScroll = () => {
+      const distance = targetScrollLeft - element.scrollLeft;
+      if (Math.abs(distance) <= SCROLL_END_THRESHOLD) {
+        element.scrollLeft = targetScrollLeft;
+        animationFrameId = null;
+        return;
+      }
+
+      element.scrollLeft += distance * SCROLL_EASING;
+      animationFrameId = window.requestAnimationFrame(animateScroll);
+    };
+
+    const handleWheel = (event: globalThis.WheelEvent) => {
+      const maxScrollLeft = element.scrollWidth - element.clientWidth;
+      const rawDelta = Math.abs(event.deltaY) >= Math.abs(event.deltaX) ? event.deltaY : event.deltaX;
+      const delta =
+        event.deltaMode === 1
+          ? rawDelta * 16
+          : event.deltaMode === 2
+            ? rawDelta * element.clientWidth
+            : rawDelta;
+      const canScroll = delta > 0 ? element.scrollLeft < maxScrollLeft : element.scrollLeft > 0;
+
+      if (maxScrollLeft <= 0 || delta === 0 || !canScroll) {
+        return;
+      }
+
+      event.preventDefault();
+      targetScrollLeft = Math.min(maxScrollLeft, Math.max(0, targetScrollLeft + delta));
+
+      if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+        element.scrollLeft = targetScrollLeft;
+        return;
+      }
+
+      if (animationFrameId === null) {
+        animationFrameId = window.requestAnimationFrame(animateScroll);
+      }
+    };
+
+    element.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      element.removeEventListener("wheel", handleWheel);
+      if (animationFrameId !== null) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn(
+        "flex w-full flex-nowrap items-center gap-2 overflow-x-auto overscroll-x-contain pb-0.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export type SuggestionProps = Omit<ComponentProps<typeof Button>, "onClick"> & {
+  suggestion: string;
+  onClick?: (suggestion: string) => void;
+};
+
+export const Suggestion = ({
+  suggestion,
+  onClick,
+  className,
+  variant = "outline",
+  size = "sm",
+  children,
+  ...props
+}: SuggestionProps) => {
+  const handleClick = useCallback(() => {
+    onClick?.(suggestion);
+  }, [onClick, suggestion]);
+
+  return (
+    <Button
+      className={cn("shrink-0 cursor-pointer rounded-full px-3.5", className)}
+      onClick={handleClick}
+      size={size}
+      type="button"
+      variant={variant}
+      {...props}
+    >
+      {children || suggestion}
+    </Button>
+  );
+};