@drawnagency/primitives 0.1.68 → 0.1.70

package/dist/components/chat/ChatPanel.d.ts

@@ -2,6 +2,10 @@ export interface ChatMessage {
     role: "user" | "assistant";
     content: string;
 }
+/** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
+ *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
+ *  through, and model output is untrusted. Exported for tests. */
+export declare function assistantHtml(md: string): string;
 /** Parse our /api/chat SSE frames out of a fetch body. Exported for tests. */
 export declare function streamChat(body: {
     messages: ChatMessage[];
@@ -16,7 +20,7 @@ export declare function streamChat(body: {
     error: string;
     retryAfterMs?: number;
 }>;
-export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot }: {
+export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, variant }: {
     open: boolean;
     onClose: () => void;
     siteName: string;
@@ -25,7 +29,9 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
         label: string;
     }[];
     isEditor?: boolean;
-    /** Set only by the configurator's test panel. */
+    /** Set by the configurator's test panel and the /edit chat FAB. */
     draftChatbot?: unknown;
+    /** Anchors the panel above its launcher: viewer corner FAB vs /edit FAB column. */
+    variant?: "viewer" | "editor";
 }): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ChatPanel.d.ts.map

package/dist/components/chat/ChatPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AAoB5E,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,EAC7F,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAC7B,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAyCjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE;IAC5F,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iDAAiD;IACjD,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,kDAyEA"}
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatPanel.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,WAAW;IAAG,IAAI,EAAE,MAAM,GAAG,WAAW,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE;AA6B5E;;kEAEkE;AAClE,wBAAgB,aAAa,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CAEhD;AAcD,8EAA8E;AAC9E,wBAAsB,UAAU,CAC9B,IAAI,EAAE;IAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAE,EAC7F,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAC7B,OAAO,CAAC;IAAE,EAAE,EAAE,IAAI,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAE,GAAG;IAAE,EAAE,EAAE,KAAK,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAyCjG;AAED,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,EAAE;IAChH,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mEAAmE;IACnE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mFAAmF;IACnF,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B,kDA6HA"}

package/dist/components/chat/ChatWidget.d.ts

@@ -6,6 +6,9 @@ export interface ChatWidgetProps {
         label: string;
     }[];
     isEditor?: boolean;
+    /** Editor-only: chat against the current (unsaved) chatbot config. */
+    draftChatbot?: unknown;
+    variant?: "viewer" | "editor";
 }
-export default function ChatWidget({ siteName, tasks, isEditor }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
+export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, variant }: ChatWidgetProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ChatWidget.d.ts.map

package/dist/components/chat/ChatWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAuBhF"}
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../../src/components/chat/ChatWidget.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,KAAK,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAkB,EAAE,EAAE,eAAe,2CA2ClH"}

package/dist/components/shell/EditorShell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAyEjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,GAC/B,EAAE,KAAK,2CAm7BP"}
+{"version":3,"file":"EditorShell.d.ts","sourceRoot":"","sources":["../../../src/components/shell/EditorShell.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA0EjD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQxD,UAAU,KAAK;IACb,OAAO,EAAE,MAAM,CAAC;IAIhB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,QAAQ,EAAE,CAAC;IACtB,YAAY,EAAE;QACZ,KAAK,EAAE,OAAO,CAAC;QACf,aAAa,EAAE,OAAO,CAAC;QACvB,YAAY,EAAE,OAAO,CAAC;QACtB,cAAc,EAAE,OAAO,CAAC;QACxB,kBAAkB,EAAE,OAAO,CAAC;QAC5B,cAAc,EAAE,OAAO,CAAC;KACzB,CAAC;IACF,WAAW,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,OAAO,GAAG,QAAQ,CAAA;KAAE,GAAG,IAAI,CAAC;IAIhE,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,OAAO,EACP,YAAY,EACZ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,YAAY,EACZ,WAAW,EACX,sBAA8B,GAC/B,EAAE,KAAK,2CAi8BP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drawnagency/primitives",
-  "version": "0.1.68",
+  "version": "0.1.70",
   "type": "module",
   "exports": {
     "./package.json": "./package.json",
@@ -106,6 +106,7 @@
     "dompurify": "^3.2.6",
     "jose": "^6.2.2",
     "lucide-react": "^1.7.0",
+    "marked": "^18.0.5",
     "tailwind-merge": "^3.5.0",
     "zod": "^4.3.6"
   },

package/src/components/chat/ChatPanel.tsx

@@ -1,10 +1,21 @@
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState, type MouseEvent } from "react";
+import { marked } from "marked";
 import { cn } from "../../lib/cn";
+import { ensureSanitizer, sanitizeHtml } from "../../lib/sanitize";
 
 export interface ChatMessage { role: "user" | "assistant"; content: string }
 
 const SESSION_KEY = "bp-chat-session";
 
+// Astro's trailingSlash: "ignore" means the viewer can be on "/brand/" while
+// grounding links say "/brand#voice-tone" — the pathnames are equivalent
+// but not literally equal. Per the HTML spec, same-document fragment
+// navigation requires URL equality *excluding* the fragment, so a literal
+// mismatch (e.g. "/brand/" vs "/brand") can't rely on native navigation —
+// this helper only detects that "equivalent but not equal" case so we can
+// handle it ourselves. "/" stays "/" rather than collapsing to "".
+const normalizePathname = (p: string): string => p.replace(/\/+$/, "") || "/";
+
 function sessionId(): string {
   let id = window.localStorage.getItem(SESSION_KEY);
   if (!id) {
@@ -21,6 +32,25 @@ const ERROR_COPY: Record<string, string> = {
   upstream_error: "Something went wrong — please try again.",
 };
 
+/** Assistant markdown → sanitized HTML. Callers MUST gate on the sanitizer
+ *  having loaded (`mdReady`) — before then sanitizeHtml passes raw HTML
+ *  through, and model output is untrusted. Exported for tests. */
+export function assistantHtml(md: string): string {
+  return sanitizeHtml(marked.parse(md, { async: false, gfm: true, breaks: true }) as string);
+}
+
+// Tailwind preflight makes h1–h6 inherit size/weight, so headings only need
+// weight + spacing to clamp to the bubble's text scale.
+const MD_STYLES =
+  "[&_p:not(:first-child)]:mt-2 [&_ul]:mt-1 [&_ul]:list-disc [&_ul]:pl-4 " +
+  "[&_ol]:mt-1 [&_ol]:list-decimal [&_ol]:pl-4 [&_li:not(:first-child)]:mt-1 " +
+  "[&_a]:underline [&_a]:underline-offset-2 " +
+  "[&_code]:rounded [&_code]:bg-base-200 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.8em] " +
+  "[&_pre]:mt-2 [&_pre]:overflow-x-auto [&_pre]:rounded [&_pre]:bg-base-200 [&_pre]:p-2 " +
+  "[&_h1]:mt-2 [&_h1]:font-semibold [&_h2]:mt-2 [&_h2]:font-semibold " +
+  "[&_h3]:mt-2 [&_h3]:font-semibold [&_h4]:mt-2 [&_h4]:font-semibold " +
+  "[&_blockquote]:mt-2 [&_blockquote]:border-l-2 [&_blockquote]:border-base-200 [&_blockquote]:pl-2";
+
 /** Parse our /api/chat SSE frames out of a fetch body. Exported for tests. */
 export async function streamChat(
   body: { messages: ChatMessage[]; sessionId: string; taskId?: string; draftChatbot?: unknown },
@@ -68,14 +98,16 @@ export async function streamChat(
   }
 }
 
-export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot }: {
+export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, draftChatbot, variant = "viewer" }: {
   open: boolean;
   onClose: () => void;
   siteName: string;
   tasks: { id: string; label: string }[];
   isEditor?: boolean;
-  /** Set only by the configurator's test panel. */
+  /** Set by the configurator's test panel and the /edit chat FAB. */
   draftChatbot?: unknown;
+  /** Anchors the panel above its launcher: viewer corner FAB vs /edit FAB column. */
+  variant?: "viewer" | "editor";
 }) {
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [taskId, setTaskId] = useState<string>("");
@@ -84,6 +116,46 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
   const [notice, setNotice] = useState<string | null>(null);
   const streamingRef = useRef("");
 
+  const [mdReady, setMdReady] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    // Failure just leaves mdReady false forever (plain-text messages) — never
+    // let it surface as an unhandled rejection.
+    void ensureSanitizer().then(() => { if (alive) setMdReady(true); }).catch(() => {});
+    return () => { alive = false; };
+  }, []);
+
+  function onMessagesClick(e: MouseEvent<HTMLDivElement>) {
+    const link = (e.target as HTMLElement).closest("a");
+    if (!link || !link.getAttribute("href")) return;
+    const url = new URL(link.href, window.location.href);
+    // Native navigation is only safe when there's a hash to scroll to — the
+    // grounding emits hashless same-pathname links (e.g. "/") for content
+    // before the first heading, and letting those navigate natively would
+    // full-reload the page, unmounting the panel and wiping chat history.
+    const sameOriginWithHash = variant !== "editor" && url.origin === window.location.origin && url.hash !== "";
+    if (sameOriginWithHash) {
+      if (url.pathname === window.location.pathname) {
+        return; // literally same document: native hash navigation, panel stays open
+      }
+      if (normalizePathname(url.pathname) === normalizePathname(window.location.pathname)) {
+        // Equivalent pathnames (trailing-slash only difference) but NOT
+        // literally equal — per spec, same-document fragment navigation
+        // requires URL equality excluding the fragment, so the browser would
+        // treat a literal mismatch as a full cross-document navigation,
+        // unmounting the panel and wiping chat history. Perform the fragment
+        // navigation ourselves on the current (already-correct) URL instead.
+        e.preventDefault();
+        window.location.hash = url.hash;
+        return;
+      }
+    }
+    // Cross-page (or same-page but hashless, or any /edit click): new tab so
+    // chat history / unsaved editor state survive.
+    e.preventDefault();
+    window.open(url.href, "_blank", "noopener");
+  }
+
   async function send() {
     const text = input.trim();
     if (!text || busy) return;
@@ -114,7 +186,11 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
 
   return (
     <div role="dialog" aria-label={`Chat with ${siteName}`}
-      className="fixed bottom-20 right-4 z-40 flex h-[28rem] w-80 flex-col rounded-lg border border-base-200 bg-base shadow-xl">
+      className={cn(
+        "fixed z-40 flex h-[28rem] w-80 flex-col rounded-lg border border-base-200 bg-base shadow-xl",
+        variant === "editor" ? "bottom-40 right-4 lg:right-auto fab-container-right" : "bottom-20 right-4",
+      )}>
+
       <div className="flex items-center justify-between gap-2 border-b border-base-200 px-3 py-2">
         <span className="text-sm font-medium text-base-contrast">{siteName} assistant</span>
         {tasks.length > 0 && (
@@ -126,13 +202,21 @@ export default function ChatPanel({ open, onClose, siteName, tasks, isEditor, dr
         )}
         <button type="button" aria-label="Close chat" onClick={onClose} className="text-base-contrast-light hover:text-base-contrast">×</button>
       </div>
-      <div className="flex-1 space-y-2 overflow-y-auto p-3">
-        {messages.map((m, i) => (
-          <div key={i} className={cn("max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-2 text-sm",
-            m.role === "user" ? "ml-auto bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast")}>
-            {m.content || (busy && i === messages.length - 1 ? "…" : m.content)}
-          </div>
-        ))}
+      <div className="flex-1 space-y-2 overflow-y-auto p-3" onClick={onMessagesClick}>
+        {messages.map((m, i) =>
+          m.role === "assistant" && mdReady && m.content ? (
+            <div
+              key={i}
+              className={cn("max-w-[85%] rounded-lg bg-base-accent px-3 py-2 text-sm text-base-contrast", MD_STYLES)}
+              dangerouslySetInnerHTML={{ __html: assistantHtml(m.content) }}
+            />
+          ) : (
+            <div key={i} className={cn("max-w-[85%] whitespace-pre-wrap rounded-lg px-3 py-2 text-sm",
+              m.role === "user" ? "ml-auto bg-primary text-primary-contrast" : "bg-base-accent text-base-contrast")}>
+              {m.content || (busy && i === messages.length - 1 ? "…" : m.content)}
+            </div>
+          ),
+        )}
         {notice && <p className="text-xs text-base-contrast-light">{notice}</p>}
       </div>
       <form className="flex gap-2 border-t border-base-200 p-2" onSubmit={(e) => { e.preventDefault(); void send(); }}>

package/src/components/chat/ChatWidget.tsx

@@ -1,7 +1,14 @@
-// Viewer-facing chat launcher. Renders ONLY the floating button until first
-// open; the panel (and its code) loads lazily so viewers who never click pay
-// almost nothing. Browser-safe: no node imports, no process.env.
+// Chat launcher FAB. Renders ONLY the floating button until first open; the
+// panel (and its code) loads lazily so viewers who never click pay almost
+// nothing. Browser-safe: no node imports, no process.env.
+//
+// Two placements:
+// - "viewer" (default): bottom-right corner of viewer pages.
+// - "editor": BOTTOM of the /edit route's FAB column (edit-mode toggle at
+//   bottom-16, bug report at bottom-28 above it), aligned to the content edge
+//   via fab-container-right like its neighbors.
 import { lazy, Suspense, useState } from "react";
+import { cn } from "../../lib/cn";
 
 const ChatPanel = lazy(() => import("./ChatPanel"));
 
@@ -10,9 +17,12 @@ export interface ChatWidgetProps {
   /** Already audience-filtered server-side — never pass unfiltered config tasks. */
   tasks: { id: string; label: string }[];
   isEditor?: boolean;
+  /** Editor-only: chat against the current (unsaved) chatbot config. */
+  draftChatbot?: unknown;
+  variant?: "viewer" | "editor";
 }
 
-export default function ChatWidget({ siteName, tasks, isEditor }: ChatWidgetProps) {
+export default function ChatWidget({ siteName, tasks, isEditor, draftChatbot, variant = "viewer" }: ChatWidgetProps) {
   const [open, setOpen] = useState(false);
   const [everOpened, setEverOpened] = useState(false);
 
@@ -20,17 +30,37 @@ export default function ChatWidget({ siteName, tasks, isEditor }: ChatWidgetProp
     <>
       <button
         type="button"
-        aria-label={`Chat with ${siteName}`}
+        aria-label={open ? "Collapse chat" : `Chat with ${siteName}`}
+        aria-expanded={open}
         onClick={() => { setOpen((o) => !o); setEverOpened(true); }}
-        className="fixed bottom-4 right-4 z-40 flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity"
+        className={cn(
+          "fixed z-40 flex items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity",
+          variant === "editor"
+            ? "bottom-4 right-4 lg:right-auto h-10 w-10 fab-container-right"
+            : "bottom-4 right-4 h-12 w-12",
+        )}
       >
-        <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-          <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
-        </svg>
+        {open ? (
+          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="m6 9 6 6 6-6" />
+          </svg>
+        ) : (
+          <svg xmlns="http://www.w3.org/2000/svg" className={variant === "editor" ? "h-5 w-5" : "h-6 w-6"} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" />
+          </svg>
+        )}
       </button>
       {everOpened && (
         <Suspense fallback={null}>
-          <ChatPanel open={open} onClose={() => setOpen(false)} siteName={siteName} tasks={tasks} isEditor={isEditor} />
+          <ChatPanel
+            open={open}
+            onClose={() => setOpen(false)}
+            siteName={siteName}
+            tasks={tasks}
+            isEditor={isEditor}
+            draftChatbot={draftChatbot}
+            variant={variant}
+          />
         </Suspense>
       )}
     </>

package/src/components/shell/BugReportFAB.tsx

@@ -190,7 +190,7 @@ export function BugReportFAB() {
           type="button"
           onClick={handleOpen}
           aria-label="Report a bug"
-          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+          className="cursor-pointer fixed bottom-28 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
         >
           {/* Bug / beetle SVG icon */}
           <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">

package/src/components/shell/EditorShell.tsx

@@ -20,6 +20,7 @@ import { EditorModalProvider, useEditorModal } from "./EditorModalContext";
 import { EditorModal } from "./EditorModal";
 import { SiteSettingsModal } from "./SiteSettingsModal";
 import { ChatbotConfigModal } from "./ChatbotConfigModal";
+import ChatWidget from "../chat/ChatWidget";
 import { MediaLibraryModal } from "./MediaLibraryModal";
 import { MediaLibraryContext } from "./MediaLibraryContext";
 import { ProcessingIndicator } from "./ProcessingIndicator";
@@ -902,6 +903,20 @@ export default function EditorShell({
               the button would always 401 — hide it there. */}
           {!capabilities.passwordOnly && <BugReportFAB />}
 
+          {/* Editor chat FAB: chat while editing, against the DRAFT chatbot
+              config (tasks + prompt reflect unsaved changes; grounding is
+              published content). Gated only on the platform switch — editors
+              may chat before the widget is enabled for viewers. */}
+          {chatbotPlatformEnabled && siteConfig && (
+            <ChatWidget
+              siteName={siteConfig.siteName}
+              tasks={siteConfig.chatbot.tasks.map((t) => ({ id: t.id, label: t.label }))}
+              isEditor
+              draftChatbot={siteConfig.chatbot}
+              variant="editor"
+            />
+          )}
+
           {rejectedUploads.length > 0 && (
             <div className="sticky top-2 z-30 mx-auto w-full max-w-3xl px-4">
               <UploadRejectionAlert
@@ -1681,7 +1696,7 @@ function EditorToolbar({
       {!historyState && (
         <button
           onClick={toggleEditMode}
-          className="cursor-pointer fixed bottom-4 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
+          className="cursor-pointer fixed bottom-16 right-4 lg:right-auto z-50 flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-contrast shadow-lg hover:opacity-90 transition-opacity fab-container-right"
           aria-label={isEditMode ? "Switch to view mode" : "Switch to edit mode"}
         >
           {isEditMode ? (