From e73f8cec47125559ec0a9ba5fd1e97f1af24d392 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Tue, 21 Jul 2026 18:50:57 -0500
Subject: [PATCH] feat: merge Ask Salem and the feedback bubble into one shared
 launcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The docs site floated two separate widgets: the Ask Salem pill
(bottom-left) and the OpenCoven Feedback bubble (bottom-right, mounted
by an inline layout script). They now share a single bottom-left
launcher pill with an Ask Salem segment and a Feedback segment.

- lib/feedback-widget.ts: lazy loader for the feedback SDK. Queues
  init({ launcher: false, placement: 'left' }) on the window.Quackback
  command stub before injecting sdk.js, so the SDK never mounts its own
  bubble; exposes open/close/on helpers and a portal fallback if the
  script cannot load. (The previous layout snippet queued commands on
  an OpenCovenFeedback global the served bundle never reads — the old
  bubble only appeared via the SDK's auto-init fallback.)
- components/ask-salem.tsx: split-pill launcher (role=group) with
  mutual exclusion between the chat panel and the feedback panel,
  SDK open/close events mirrored into local state, Escape handling for
  both, a feedback shortcut in the chat panel header, and the /docs
  sidebar lift dropped while the feedback panel occupies that corner.
- app/layout.tsx: drop the eager feedback Script tag; the SDK now loads
  on first use of the Feedback segment.
- components/widget-identify.tsx: removed (unused; identify() remains
  documented in the feedback-widget reference for apps that embed the
  widget themselves).
- docs: note the shared launcher in ask-salem.mdx and the custom-
  launcher pattern this site uses in feedback-widget.mdx.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 app/layout.tsx                             |  11 +--
 components/ask-salem.module.css            |  58 +++++++----
 components/ask-salem.tsx                   | 110 ++++++++++++++++++---
 components/widget-identify.tsx             |  33 -------
 content/docs/reference/ask-salem.mdx       |   2 +
 content/docs/reference/feedback-widget.mdx |   2 +
 lib/feedback-widget.ts                     | 102 +++++++++++++++++++
 7 files changed, 246 insertions(+), 72 deletions(-)
 delete mode 100644 components/widget-identify.tsx
 create mode 100644 lib/feedback-widget.ts

diff --git a/app/layout.tsx b/app/layout.tsx
index ab61737..165986b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,7 +4,6 @@ import 'fumadocs-ui/style.css';
 import 'fumadocs-ui/components/image-zoom2.css';
 import { Inter } from 'next/font/google';
 import type { ReactNode } from 'react';
-import Script from 'next/script';
 import { Analytics } from '@vercel/analytics/next';
 import { SpeedInsights } from '@vercel/speed-insights/next';
 import { CovenSearchDialog } from '@/components/search-dialog';
@@ -72,18 +71,12 @@ export default function Layout({ children }: { children: ReactNode }) {
           }}
         >
           {children}
+          {/* Shared launcher: Ask Salem chat + OpenCoven Feedback panel.
+              The feedback SDK is lazy-loaded on first use (lib/feedback-widget). */}
           <AskSalem />
         </RootProvider>
         <Analytics />
         <SpeedInsights />
-        {/* OpenCoven Feedback widget — loads anonymously; identify() called per-page when user is known */}
-        <Script
-          id="opencoven-feedback"
-          strategy="afterInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `(function(w,d){if(w.OpenCovenFeedback)return;w.OpenCovenFeedback=function(){(w.OpenCovenFeedback.q=w.OpenCovenFeedback.q||[]).push(arguments)};var s=d.createElement('script');s.async=true;s.src='https://feedback.opencoven.ai/api/widget/sdk.js';d.head.appendChild(s)})(window,document);OpenCovenFeedback('init');`,
-          }}
-        />
       </body>
     </html>
   );
diff --git a/components/ask-salem.module.css b/components/ask-salem.module.css
index 130dcef..c036a6e 100644
--- a/components/ask-salem.module.css
+++ b/components/ask-salem.module.css
@@ -1,39 +1,61 @@
-.launcher {
+.launcherGroup {
   position: fixed;
   bottom: 16px;
   left: 16px;
   z-index: 60;
   display: inline-flex;
-  align-items: center;
-  gap: 0.45rem;
-  padding: 0.6rem 1rem;
+  align-items: stretch;
   border: 1px solid var(--color-fd-border);
   border-radius: 999px;
   background: var(--color-fd-background);
   color: var(--color-fd-foreground);
-  font-size: 0.82rem;
-  font-weight: 600;
-  cursor: pointer;
   box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
-  transition: border-color 0.15s ease, transform 0.15s ease;
+  overflow: hidden;
+  transition: border-color 0.15s ease;
 }
 
 /* On viewports where the docs sidebar shows, clear its footer row
    (search shortcut + theme toggle) instead of covering it. Applied only on
-   /docs routes via .overSidebar. */
+   /docs routes via .overSidebar — and dropped while the feedback panel is
+   open, since that panel sits at bottom: 88px in the same corner. */
 @media (min-width: 768px) {
-  .launcher {
+  .launcherGroup {
     left: 24px;
   }
 
-  .launcher.overSidebar {
+  .launcherGroup.overSidebar {
     bottom: 78px;
   }
 }
 
-.launcher:hover {
+.launcherGroup:hover {
   border-color: var(--coven-violet);
-  transform: translateY(-1px);
+}
+
+.launcherSegment {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.6rem 0.9rem;
+  border: none;
+  background: transparent;
+  color: var(--color-fd-foreground);
+  font-size: 0.82rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.launcherSegment:hover,
+.launcherSegment.launcherSegmentActive {
+  background: color-mix(in srgb, var(--coven-violet) 10%, transparent);
+}
+
+.launcherDivider {
+  width: 1px;
+  align-self: stretch;
+  flex-shrink: 0;
+  background: var(--color-fd-border);
 }
 
 .panel {
@@ -61,11 +83,6 @@
     width: auto;
     max-height: calc(100dvh - 16px);
   }
-
-  /* Keep the footer clear of the feedback launcher pinned bottom-right. */
-  .footer {
-    padding-right: 64px;
-  }
 }
 
 .header {
@@ -107,6 +124,7 @@
   margin-top: 1px;
 }
 
+.headerAction,
 .headerClose {
   display: inline-flex;
   align-items: center;
@@ -120,6 +138,7 @@
   cursor: pointer;
 }
 
+.headerAction:hover,
 .headerClose:hover {
   background: var(--color-fd-accent);
   color: var(--color-fd-foreground);
@@ -268,7 +287,8 @@
     animation: none;
   }
 
-  .launcher {
+  .launcherGroup,
+  .launcherSegment {
     transition: none;
   }
 }
diff --git a/components/ask-salem.tsx b/components/ask-salem.tsx
index c48f880..fd9c3fa 100644
--- a/components/ask-salem.tsx
+++ b/components/ask-salem.tsx
@@ -12,6 +12,12 @@
 // admin password upstream, so every question here is sent standalone (the
 // conversation log is client-side only). Answers are rendered from a minimal
 // markdown subset using React elements — never innerHTML.
+//
+// The launcher is shared with the OpenCoven Feedback widget: one pill,
+// bottom-left, with an "Ask Salem" segment (this chat panel) and a
+// "Feedback" segment (the feedback panel from feedback.opencoven.ai,
+// mounted with its own launcher disabled — see lib/feedback-widget). The
+// two panels are mutually exclusive.
 
 import {
   useCallback,
@@ -27,6 +33,12 @@ import {
   CLIENT_MARKER_HEADER,
   CLIENT_MARKER_VALUE,
 } from '@/lib/ask-salem-guards';
+import {
+  FEEDBACK_PORTAL,
+  closeFeedback,
+  onFeedbackEvent,
+  openFeedback,
+} from '@/lib/feedback-widget';
 import s from './ask-salem.module.css';
 
 const PRODUCTION_ORIGIN = 'https://docs.opencoven.ai';
@@ -160,6 +172,7 @@ function parseRetryAfterSec(res: Response): number {
 
 export function AskSalem() {
   const [open, setOpen] = useState(false);
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
   const pathname = usePathname();
   // Docs pages pin a sidebar footer bottom-left; lift the launcher above it.
   const overSidebar = pathname?.startsWith('/docs') ?? false;
@@ -198,14 +211,49 @@ export function AskSalem() {
   }, [log]);
 
   const close = useCallback(() => setOpen(false), []);
+
+  // The feedback panel is closable from inside its own iframe (close button,
+  // mobile backdrop), so mirror the SDK's open/close events into local state.
   useEffect(() => {
-    if (!open) return;
+    const offOpen = onFeedbackEvent('open', () => setFeedbackOpen(true));
+    const offClose = onFeedbackEvent('close', () => setFeedbackOpen(false));
+    return () => {
+      offOpen();
+      offClose();
+    };
+  }, []);
+
+  const openSalem = useCallback(() => {
+    closeFeedback();
+    setFeedbackOpen(false);
+    setOpen(true);
+  }, []);
+
+  const showFeedback = useCallback(() => {
+    setOpen(false);
+    setFeedbackOpen(true);
+    openFeedback().catch(() => {
+      // SDK blocked or unreachable — fall back to the public portal.
+      setFeedbackOpen(false);
+      window.open(FEEDBACK_PORTAL, '_blank', 'noopener,noreferrer');
+    });
+  }, []);
+
+  const hideFeedback = useCallback(() => {
+    closeFeedback();
+    setFeedbackOpen(false);
+  }, []);
+
+  useEffect(() => {
+    if (!open && !feedbackOpen) return;
     const onKey = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') close();
+      if (event.key !== 'Escape') return;
+      if (open) close();
+      if (feedbackOpen) hideFeedback();
     };
     window.addEventListener('keydown', onKey);
     return () => window.removeEventListener('keydown', onKey);
-  }, [open, close]);
+  }, [open, feedbackOpen, close, hideFeedback]);
 
   const appendAssistant = useCallback((content: string) => {
     setLog((turns) => {
@@ -311,16 +359,47 @@ export function AskSalem() {
   const blocked = streaming || cooldownSec > 0;
 
   if (!open) {
+    // The feedback panel sits at bottom: 88px in this corner, so while it is
+    // open the sidebar lift is dropped to keep the launcher clear of it.
+    const lifted = overSidebar && !feedbackOpen;
     return (
-      <button
-        type="button"
-        className={overSidebar ? `${s.launcher} ${s.overSidebar}` : s.launcher}
-        onClick={() => setOpen(true)}
-        aria-label="Ask Salem, the OpenCoven documentation assistant"
+      <div
+        className={lifted ? `${s.launcherGroup} ${s.overSidebar}` : s.launcherGroup}
+        role="group"
+        aria-label="Documentation assistant and feedback"
       >
-        <Icon icon="ph:moon-stars-duotone" width={16} color="var(--coven-violet)" aria-hidden="true" />
-        Ask Salem
-      </button>
+        <button
+          type="button"
+          className={s.launcherSegment}
+          onClick={openSalem}
+          aria-label="Ask Salem, the OpenCoven documentation assistant"
+        >
+          <Icon icon="ph:moon-stars-duotone" width={16} color="var(--coven-violet)" aria-hidden="true" />
+          Ask Salem
+        </button>
+        <span className={s.launcherDivider} aria-hidden="true" />
+        <button
+          type="button"
+          className={
+            feedbackOpen
+              ? `${s.launcherSegment} ${s.launcherSegmentActive}`
+              : s.launcherSegment
+          }
+          onClick={feedbackOpen ? hideFeedback : showFeedback}
+          aria-expanded={feedbackOpen}
+          aria-label={
+            feedbackOpen ? 'Close feedback panel' : 'Open feedback panel'
+          }
+        >
+          <Icon
+            icon={feedbackOpen ? 'ph:x-bold' : 'ph:chat-circle-dots-duotone'}
+            width={16}
+            color="var(--coven-violet)"
+            aria-hidden="true"
+          />
+          Feedback
+        </button>
+      </div>
     );
   }
 
@@ -338,6 +417,15 @@ export function AskSalem() {
           <div className={s.headerTitle}>Ask Salem</div>
           <div className={s.headerSub}>Searches these docs · answers may be imperfect</div>
         </div>
+        <button
+          type="button"
+          className={s.headerAction}
+          onClick={showFeedback}
+          aria-label="Switch to the feedback panel"
+          title="Send feedback"
+        >
+          <Icon icon="ph:chat-circle-dots-duotone" width={15} aria-hidden="true" />
+        </button>
         <button
           type="button"
           className={s.headerClose}
diff --git a/components/widget-identify.tsx b/components/widget-identify.tsx
deleted file mode 100644
index 944e946..0000000
--- a/components/widget-identify.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-interface WidgetUser {
-  id: string;
-  email?: string;
-  name?: string;
-}
-
-declare global {
-  interface Window {
-    OpenCovenFeedback?: (event: string, data?: WidgetUser) => void;
-  }
-}
-
-/**
- * Calls OpenCovenFeedback("identify") once a user is known.
- * Drop this anywhere in the tree after auth resolves.
- * Safe to render for anonymous users — does nothing when user is null/undefined.
- */
-export function WidgetIdentify({ user }: { user: WidgetUser | null | undefined }) {
-  useEffect(() => {
-    if (!user) return;
-    window.OpenCovenFeedback?.('identify', {
-      id: user.id,
-      email: user.email,
-      name: user.name,
-    });
-  }, [user]);
-
-  return null;
-}
diff --git a/content/docs/reference/ask-salem.mdx b/content/docs/reference/ask-salem.mdx
index c677d27..1815dda 100644
--- a/content/docs/reference/ask-salem.mdx
+++ b/content/docs/reference/ask-salem.mdx
@@ -10,6 +10,8 @@ read_when:
 
 Every page on this site includes **Ask Salem**, a floating assistant backed by [salem.opencoven.ai](https://salem.opencoven.ai) — a retrieval service that indexes this documentation and answers questions with linked sources. No account or token is required.
 
+Salem shares its launcher with the site's [feedback widget](/docs/reference/feedback-widget): one pill, bottom-left, with an **Ask Salem** segment that opens the chat panel and a **Feedback** segment that opens the OpenCoven Feedback panel. The two panels are mutually exclusive, and the feedback SDK is loaded lazily the first time the Feedback segment is used.
+
 ## Transport paths
 
 The widget picks its transport by origin:
diff --git a/content/docs/reference/feedback-widget.mdx b/content/docs/reference/feedback-widget.mdx
index ce21554..7604755 100644
--- a/content/docs/reference/feedback-widget.mdx
+++ b/content/docs/reference/feedback-widget.mdx
@@ -71,6 +71,8 @@ OpenCovenFeedback('logout')
 
 To restrict the widget so only your own users can submit feedback, use the SSO token shape and call `init` with `launcher: false`. Then mount the launcher yourself once identity resolves.
 
+> `launcher: false` is also the hook for replacing the floating bubble with your own UI: call `open`/`close` from any element you control. This docs site does exactly that — its bottom-left launcher is shared with the [Ask Salem assistant](/docs/reference/ask-salem), and the Feedback segment drives the widget through `init({ launcher: false, placement: 'left' })` plus `open`.
+
 ```ts
 // 1. Load without showing the launcher
 OpenCovenFeedback('init', { launcher: false })
diff --git a/lib/feedback-widget.ts b/lib/feedback-widget.ts
new file mode 100644
index 0000000..5dc8368
--- /dev/null
+++ b/lib/feedback-widget.ts
@@ -0,0 +1,102 @@
+'use client';
+
+// Client-side loader for the OpenCoven Feedback widget (Quackback SDK).
+//
+// The docs site mounts the widget with `launcher: false` and opens it from
+// the shared floating launcher in components/ask-salem.tsx instead of the
+// SDK's own bottom-right bubble. The SDK script is injected lazily on first
+// use; commands issued before it loads are queued on the `window.Quackback`
+// stub and replayed in order when the bundle executes. Queueing `init` first
+// also suppresses the bundle's auto-init, which would otherwise mount the
+// default floating launcher.
+
+const SDK_SRC = 'https://feedback.opencoven.ai/api/widget/sdk.js';
+const SCRIPT_ID = 'opencoven-feedback-sdk';
+
+/** Public feedback portal — fallback destination if the SDK cannot load. */
+export const FEEDBACK_PORTAL = 'https://feedback.opencoven.ai';
+
+type QuackbackFn = ((...args: unknown[]) => unknown) & { q?: unknown[][] };
+
+declare global {
+  interface Window {
+    Quackback?: QuackbackFn;
+  }
+}
+
+let loadPromise: Promise<void> | null = null;
+
+/** Returns the live SDK entry point, installing the command-queue stub if needed. */
+function quackback(): QuackbackFn {
+  if (!window.Quackback) {
+    const stub: QuackbackFn = (...args: unknown[]) => {
+      (stub.q = stub.q ?? []).push(args);
+    };
+    window.Quackback = stub;
+  }
+  return window.Quackback;
+}
+
+/**
+ * Injects the SDK script once and initializes the widget without its own
+ * launcher, panel anchored bottom-left next to the shared launcher. Resolves
+ * when the script has loaded; rejects if it fails (offline, content
+ * blockers), letting callers fall back to FEEDBACK_PORTAL.
+ */
+export function ensureFeedbackWidget(): Promise<void> {
+  if (typeof window === 'undefined') {
+    return Promise.reject(new Error('Feedback widget is client-side only'));
+  }
+  if (loadPromise) return loadPromise;
+  quackback()('init', { launcher: false, placement: 'left' });
+  loadPromise = new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.id = SCRIPT_ID;
+    script.async = true;
+    script.src = SDK_SRC;
+    script.onload = () => resolve();
+    script.onerror = () => {
+      script.remove();
+      loadPromise = null;
+      reject(new Error('Feedback widget SDK failed to load'));
+    };
+    document.head.appendChild(script);
+  });
+  return loadPromise;
+}
+
+/**
+ * Opens the feedback panel, loading the SDK on first use. The `open` command
+ * is dispatched immediately (queued until the SDK is ready), so the panel
+ * appears as soon as the script loads. Rejects if the SDK cannot load.
+ */
+export function openFeedback(): Promise<void> {
+  const ready = ensureFeedbackWidget();
+  window.Quackback?.('open');
+  return ready;
+}
+
+/** Closes the feedback panel if the SDK is present. No-op otherwise. */
+export function closeFeedback(): void {
+  if (typeof window === 'undefined') return;
+  window.Quackback?.('close');
+}
+
+/**
+ * Subscribes to an SDK event ('open', 'close', 'ready', …). Returns an
+ * unsubscribe function. Safe to call before the SDK has loaded — the
+ * subscription is queued and replayed.
+ */
+export function onFeedbackEvent(
+  name: string,
+  callback: (payload: unknown) => void,
+): () => void {
+  if (typeof window === 'undefined') return () => {};
+  const result = quackback()('on', name, callback);
+  return () => {
+    // The live SDK returns an unsubscribe function; the pre-load stub does
+    // not, so fall back to an 'off' command (queued in order after 'on').
+    if (typeof result === 'function') result();
+    else window.Quackback?.('off', name, callback);
+  };
+}