Move agent section to fab (#6597)

frontend/shared/components/ChatFABButton.tsx

@@ -0,0 +1,66 @@
+import type { ButtonHTMLAttributes } from "react";
+import "@shared/components/ChatFABButton.css";
+
+export interface ChatFABButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Shows a green pulse dot to indicate the agent is actively working. */
+  isLoading?: boolean;
+  /** Shows a green tick badge to indicate an unread result is waiting. */
+  showTick?: boolean;
+}
+
+export function ChatFABButton({
+  isLoading = false,
+  showTick = false,
+  className,
+  ...rest
+}: ChatFABButtonProps) {
+  const classes = [
+    "chat-fab-btn",
+    isLoading ? "chat-fab-btn--loading" : "",
+    showTick ? "chat-fab-btn--tick" : "",
+    className ?? "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <button type="button" className={classes} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={28}
+        height={28}
+        viewBox="0 0 192 192"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          d="M68.48 102.4 L184.73 6.45 L184.73 96.05 L68.48 192 Z"
+          opacity="0.7"
+        />
+        <path d="M7.26 95.83 L123.37 0 L123.37 89.5 L7.26 185.33 Z" />
+      </svg>
+      {isLoading && !showTick && (
+        <span className="chat-fab-btn__pulse" aria-hidden="true" />
+      )}
+      {showTick && (
+        <span className="chat-fab-btn__tick" aria-hidden="true">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width={10}
+            height={10}
+            viewBox="0 0 10 10"
+            fill="none"
+          >
+            <path
+              d="M2 5l2 2 4-4"
+              stroke="#fff"
+              strokeWidth={1.6}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </span>
+      )}
+    </button>
+  );
+}