Move agent section to fab (#6597)

2026-07-16 11:23:10 +02:00 · 2026-06-10 15:47:47 +01:00
parent da4b84962c
commit 9b877d4f8d
15 changed files with 1149 additions and 0 deletions
@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useState } from "react";
+import { ChatFABWindow } from "@shared/components/ChatFABWindow";
+
+const DEMO_MESSAGES = [
+  {
+    id: 1,
+    role: "user" as const,
+    text: "Merge the three contracts and redact all SSNs",
+  },
+  {
+    id: 2,
+    role: "assistant" as const,
+    text: "I'll merge the PDFs first, then run redaction on the combined document. Starting now…",
+  },
+  { id: 3, role: "user" as const, text: "Great, also add a watermark" },
+];
+
+function MockChat() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        fontFamily: "system-ui, sans-serif",
+      }}
+    >
+      <div
+        style={{
+          padding: "14px 16px 10px",
+          borderBottom: "1px solid var(--color-border, #e3e8ee)",
+          fontSize: 14,
+          fontWeight: 600,
+        }}
+      >
+        Stirling
+      </div>
+      <div
+        style={{
+          flex: 1,
+          overflowY: "auto",
+          padding: "12px 16px",
+          display: "flex",
+          flexDirection: "column",
+          gap: 10,
+        }}
+      >
+        {DEMO_MESSAGES.map((m) => (
+          <div
+            key={m.id}
+            style={{
+              alignSelf: m.role === "user" ? "flex-end" : "flex-start",
+              maxWidth: "80%",
+              background:
+                m.role === "user"
+                  ? "#3b82f6"
+                  : "var(--color-bg-muted, #f3f4f6)",
+              color: m.role === "user" ? "#fff" : "inherit",
+              borderRadius: 10,
+              padding: "8px 12px",
+              fontSize: 13,
+            }}
+          >
+            {m.text}
+          </div>
+        ))}
+      </div>
+      <div
+        style={{
+          padding: "10px 12px 14px",
+          borderTop: "1px solid var(--color-border, #e3e8ee)",
+        }}
+      >
+        <div
+          style={{
+            background: "var(--color-bg-muted, #f3f4f6)",
+            borderRadius: 10,
+            padding: "8px 12px",
+            fontSize: 13,
+            color: "var(--color-text-4, #64748b)",
+          }}
+        >
+          What do you want to do?
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const meta: Meta<typeof ChatFABWindow> = {
+  title: "Editor/ChatFAB/ChatFABWindow",
+  component: ChatFABWindow,
+  parameters: { layout: "centered" },
+  decorators: [
+    (S) => (
+      <div style={{ width: 390, height: 520 }}>
+        <S />
+      </div>
+    ),
+  ],
+  argTypes: {
+    open: { control: "boolean" },
+  },
+};
+export default meta;
+type Story = StoryObj<typeof ChatFABWindow>;
+
+export const Closed: Story = {
+  args: { open: false, children: <MockChat /> },
+};
+
+export const Open: Story = {
+  args: { open: true, children: <MockChat /> },
+};
+
+export const Toggle: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div style={{ width: 390, height: 520, position: "relative" }}>
+        <ChatFABWindow open={open}>
+          <MockChat />
+        </ChatFABWindow>
+        <button
+          type="button"
+          onClick={() => setOpen((v) => !v)}
+          style={{
+            position: "absolute",
+            bottom: -48,
+            right: 0,
+            background: "#3b82f6",
+            color: "#fff",
+            border: "none",
+            borderRadius: 8,
+            padding: "8px 16px",
+            cursor: "pointer",
+          }}
+        >
+          {open ? "Close panel" : "Open panel"}
+        </button>
+      </div>
+    );
+  },
+};