Move agent section to fab (#6597)

frontend/shared/components/ChatFABWindow.tsx

@@ -0,0 +1,45 @@
+import type { CSSProperties, MouseEventHandler, ReactNode } from "react";
+import "@shared/components/ChatFABWindow.css";
+
+export interface ChatFABWindowProps {
+  /** Whether the window is in its expanded/visible state. Controls the CSS transition. */
+  open: boolean;
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+  onDoubleClick?: MouseEventHandler<HTMLDivElement>;
+}
+
+/**
+ * Visual frame for the floating chat panel.
+ *
+ * Renders a card shell (rounded corners, shadow, border) that animates in and
+ * out via CSS transitions. The caller controls open/closed state; this component
+ * owns only the appearance and animation — no drag logic, no context.
+ */
+export function ChatFABWindow({
+  open,
+  children,
+  className,
+  style,
+  onDoubleClick,
+}: ChatFABWindowProps) {
+  const classes = [
+    "chat-fab-window",
+    open ? "chat-fab-window--open" : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div
+      className={classes}
+      style={style}
+      aria-hidden={!open}
+      onDoubleClick={onDoubleClick}
+    >
+      {children}
+    </div>
+  );
+}