@simmalugnt-se/payload-editor-assistant 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.3.2
+
+- One control opens and closes the assistant: the text button with a sparkles icon in Admin's
+  header. The narrow rail shown while the panel was collapsed is gone.
+- The panel starts closed, and the browser remembers whether you left it open.
+
 ## 0.3.1
 
 - A greeting or a question no longer fills empty fields: the assistant fills them only when asked.

package/dist/components/EditorAssistantAction.d.ts

@@ -1 +1,2 @@
+/** The one control that opens and closes the assistant panel, in Admin's header. */
 export declare function EditorAssistantAction(): import("react").JSX.Element | null;

package/dist/components/EditorAssistantAction.js

@@ -1,17 +1,23 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, useAuth } from "@payloadcms/ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useAuth, useTranslation } from "@payloadcms/ui";
 import { useAssistantState } from "./assistant-context.js";
+import { COPY, uiLanguage } from "./copy.js";
+/** The one control that opens and closes the assistant panel, in Admin's header. */
 export function EditorAssistantAction() {
     const { user } = useAuth();
-    const { collapsed, setCollapsed, setOpen } = useAssistantState();
+    const { i18n } = useTranslation();
+    const { open, setOpen } = useAssistantState();
     if (!user) {
         return null;
     }
-    return (_jsx(Button, { buttonStyle: "pill", className: "ea-trigger", onClick: (event) => {
+    return (_jsxs("button", { "aria-expanded": open, className: open ? "ea-trigger ea-trigger--open" : "ea-trigger", onClick: (event) => {
             event.preventDefault();
             event.stopPropagation();
-            setOpen(true);
-            setCollapsed(false);
-        }, size: "medium", type: "button", children: collapsed ? "Open assistant" : "Assistant" }));
+            setOpen(!open);
+        }, type: "button", children: [_jsx(SparklesIcon, {}), COPY[uiLanguage(i18n.language)].assistant] }));
+}
+/** A large four-point star with two small ones: the usual sign for AI help. */
+function SparklesIcon() {
+    return (_jsxs("svg", { "aria-hidden": "true", className: "ea-trigger__icon", fill: "currentColor", viewBox: "0 0 20 20", children: [_jsx("path", { d: "M8 2.5l1.3 3.7a4 4 0 0 0 2.5 2.5L15.5 10l-3.7 1.3a4 4 0 0 0-2.5 2.5L8 17.5l-1.3-3.7a4 4 0 0 0-2.5-2.5L.5 10l3.7-1.3a4 4 0 0 0 2.5-2.5L8 2.5z" }), _jsx("path", { d: "M15.5 1l.6 1.6a1.5 1.5 0 0 0 .9.9l1.6.6-1.6.6a1.5 1.5 0 0 0-.9.9l-.6 1.6-.6-1.6a1.5 1.5 0 0 0-.9-.9L12.4 4.1l1.6-.6a1.5 1.5 0 0 0 .9-.9L15.5 1z" }), _jsx("path", { d: "M16 13.5l.4 1.1a1 1 0 0 0 .6.6l1.1.4-1.1.4a1 1 0 0 0-.6.6L16 17.7l-.4-1.1a1 1 0 0 0-.6-.6l-1.1-.4 1.1-.4a1 1 0 0 0 .6-.6l.4-1.1z" })] }));
 }

package/dist/components/EditorAssistantAside.d.ts

@@ -1 +1 @@
-export declare function EditorAssistantAside(): import("react").JSX.Element;
+export declare function EditorAssistantAside(): import("react").JSX.Element | null;

package/dist/components/EditorAssistantAside.js

@@ -9,7 +9,7 @@ import { useAssistantState, } from "./assistant-context.js";
 import { COPY, uiLanguage } from "./copy.js";
 import { KEEP_SELECTION_ATTR } from "./selection-dom.js";
 export function EditorAssistantAside() {
-    const { collapsed, setCollapsed, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, selection, setSelection, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
+    const { open, setOpen, status, messages, shortcuts, collections, bridge, formAdapter, pendingApproval, selection, setSelection, resetConversation, setStatus, setMessages, setPendingApproval, stop, setAbortController, } = useAssistantState();
     const { config, getEntityConfig } = useConfig();
     const router = useRouter();
     const locale = useLocale();
@@ -334,10 +334,11 @@ export function EditorAssistantAside() {
             void send(draft);
         }
     };
-    if (collapsed) {
-        return (_jsx("aside", { className: "ea-aside ea-aside--collapsed", "aria-label": copy.assistant, children: _jsxs("button", { className: "ea-aside__rail", type: "button", onClick: () => setCollapsed(false), children: [_jsx(ChevronIcon, { direction: "left" }), _jsx("span", { children: copy.assistant })] }) }));
+    // Closed: nothing is shown. The component stays mounted, so an applied preview survives.
+    if (!open) {
+        return null;
     }
-    return (_jsxs("aside", { className: "ea-aside", "aria-label": copy.assistant, [KEEP_SELECTION_ATTR]: "", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsxs("div", { className: "ea-aside__title", children: [_jsx("h2", { children: copy.assistant }), bridge ? _jsx("p", { className: "ea-aside__context", children: contextLine(bridge, config) }) : null] }), (messages.length > 0 || pendingApproval) && !pendingApproval?.applied ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => resetConversation(), size: "medium", children: copy.newChat })) : null, _jsx(Button, { "aria-label": copy.collapseLabel, buttonStyle: "icon-label", className: "ea-aside__collapse", icon: _jsx(ChevronIcon, { direction: "right" }), margin: false, onClick: () => setCollapsed(true), tooltip: copy.collapse })] }), _jsxs("div", { className: "ea-aside__body", children: [_jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config, copy) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.text, message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
+    return (_jsxs("aside", { className: "ea-aside", "aria-label": copy.assistant, [KEEP_SELECTION_ATTR]: "", children: [_jsxs("div", { className: "ea-aside__head", children: [_jsxs("div", { className: "ea-aside__title", children: [_jsx("h2", { children: copy.assistant }), bridge ? _jsx("p", { className: "ea-aside__context", children: contextLine(bridge, config) }) : null] }), (messages.length > 0 || pendingApproval) && !pendingApproval?.applied ? (_jsx(Button, { buttonStyle: "subtle", margin: false, onClick: () => resetConversation(), size: "medium", children: copy.newChat })) : null, _jsx(Button, { "aria-label": copy.collapseLabel, buttonStyle: "icon-label", className: "ea-aside__collapse", icon: _jsx(ChevronIcon, { direction: "right" }), margin: false, onClick: () => setOpen(false), tooltip: copy.collapse })] }), _jsxs("div", { className: "ea-aside__body", children: [_jsxs("div", { className: "ea-messages", ref: threadRef, onScroll: onThreadScroll, children: [messages.length === 0 ? (_jsx("div", { className: "ea-msg ea-msg--assistant", children: introText(view, bridge, collections, config, copy) })) : null, messages.map((message) => (_jsxs("div", { className: `ea-msg ea-msg--${message.role}`, children: [message.text, message.candidates?.length ? (_jsx("div", { className: "ea-actions", children: message.candidates.map((candidate) => (_jsx(Button, { buttonStyle: "pill", margin: false, onClick: () => {
                                                 router.push(candidate.href);
                                             }, size: "small", children: candidate.label }, candidate.href))) })) : null] }, message.id))), status === "streaming" ? (_jsxs("div", { className: "ea-msg ea-msg--working", children: [_jsxs("span", { className: "ea-dots", "aria-hidden": "true", children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }), _jsx("span", { children: copy.working })] })) : null] }), pendingApproval ? (_jsxs("div", { className: "ea-approval", children: [_jsx("h3", { children: pendingApproval.title }), pendingApproval.applied ? (_jsx("p", { className: "ea-approval__hint", children: autosave ? copy.previewHintAutosave : copy.previewHint })) : null, _jsx("ul", { className: "ea-approval__diff", children: pendingApproval.summary.split("\n").map((line, index) => line.startsWith("  ") ? (
                                 // biome-ignore lint/suspicious/noArrayIndexKey: lines are static for one approval

package/dist/components/EditorAssistantProvider.js

@@ -10,6 +10,6 @@ export function EditorAssistantProvider({ children, shortcuts = [], collections
     return (_jsx(AssistantStateProvider, { shortcuts: shortcuts, collections: collections, children: user ? _jsx(EditorAssistantShell, { children: children }) : children }));
 }
 function EditorAssistantShell({ children }) {
-    const { collapsed } = useAssistantState();
-    return (_jsxs("div", { className: collapsed ? "ea-root ea-root--collapsed" : "ea-root", children: [_jsx("div", { className: "ea-main", children: children }), _jsx(EditorAssistantAside, {}), _jsx(ChangedFieldsHighlight, {})] }));
+    const { open } = useAssistantState();
+    return (_jsxs("div", { className: open ? "ea-root" : "ea-root ea-root--closed", children: [_jsx("div", { className: "ea-main", children: children }), _jsx(EditorAssistantAside, {}), _jsx(ChangedFieldsHighlight, {})] }));
 }

package/dist/components/assistant-context.d.ts

@@ -46,8 +46,8 @@ export type AssistantMessage = {
     }>;
 };
 type AssistantContextValue = {
+    /** Whether the panel is shown. Closed at first; the browser remembers the choice. */
     open: boolean;
-    collapsed: boolean;
     status: AssistantChromeStatus;
     messages: AssistantMessage[];
     shortcuts: AssistantShortcut[];
@@ -59,7 +59,6 @@ type AssistantContextValue = {
     /** What the editor last clicked or focused in the open form. */
     selection: DomSelection | null;
     setOpen: (open: boolean) => void;
-    setCollapsed: (collapsed: boolean) => void;
     setBridge: (bridge: DocumentBridgeSnapshot | null) => void;
     setFormAdapter: (adapter: FormAdapter | null) => void;
     setPendingApproval: (pending: PendingApproval | null) => void;

package/dist/components/assistant-context.js

@@ -1,10 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
 const AssistantContext = createContext(null);
 export function AssistantStateProvider({ children, shortcuts, collections, }) {
-    const [open, setOpen] = useState(true);
-    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpenState] = useState(false);
     const [status, setStatus] = useState("idle");
     const [messages, setMessages] = useState([]);
     const [bridge, setBridge] = useState(null);
@@ -12,6 +11,15 @@ export function AssistantStateProvider({ children, shortcuts, collections, }) {
     const [pendingApproval, setPendingApproval] = useState(null);
     const [abortController, setAbortController] = useState(null);
     const [selection, setSelection] = useState(null);
+    // Read after mount, so the server render (closed) and the first client render agree.
+    useEffect(() => {
+        if (readStoredOpen())
+            setOpenState(true);
+    }, []);
+    const setOpen = useCallback((next) => {
+        setOpenState(next);
+        storeOpen(next);
+    }, []);
     const stop = useCallback(() => {
         abortController?.abort();
         setAbortController(null);
@@ -26,7 +34,6 @@ export function AssistantStateProvider({ children, shortcuts, collections, }) {
     }, [abortController]);
     const value = useMemo(() => ({
         open,
-        collapsed,
         status,
         messages,
         shortcuts,
@@ -36,7 +43,6 @@ export function AssistantStateProvider({ children, shortcuts, collections, }) {
         pendingApproval,
         selection,
         setOpen,
-        setCollapsed,
         setBridge,
         setFormAdapter,
         setPendingApproval,
@@ -49,7 +55,6 @@ export function AssistantStateProvider({ children, shortcuts, collections, }) {
         setAbortController,
     }), [
         open,
-        collapsed,
         status,
         messages,
         shortcuts,
@@ -58,6 +63,7 @@ export function AssistantStateProvider({ children, shortcuts, collections, }) {
         formAdapter,
         pendingApproval,
         selection,
+        setOpen,
         resetConversation,
         stop,
         abortController,
@@ -71,3 +77,21 @@ export function useAssistantState() {
     }
     return value;
 }
+const OPEN_KEY = "payload-editor-assistant:open";
+/** Storage can be unavailable (private windows, blocked site data); the panel then starts closed. */
+function readStoredOpen() {
+    try {
+        return window.localStorage.getItem(OPEN_KEY) === "true";
+    }
+    catch {
+        return false;
+    }
+}
+function storeOpen(open) {
+    try {
+        window.localStorage.setItem(OPEN_KEY, String(open));
+    }
+    catch {
+        // Not remembered; nothing else depends on it.
+    }
+}

package/dist/styles/assistant.css

@@ -8,10 +8,6 @@
   overflow: hidden;
 }
 
-.ea-root--collapsed {
-  --ea-aside-width: 48px;
-}
-
 html:has(.ea-root),
 html:has(.ea-root) body {
   height: 100%;
@@ -54,34 +50,6 @@ html[data-theme="dark"] .ea-aside {
   --ea-accent-tint: rgba(96, 165, 250, 0.14);
 }
 
-.ea-aside--collapsed {
-  border-inline-start-color: var(--theme-elevation-100);
-}
-
-.ea-aside__rail {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc(var(--base) * 0.5);
-  width: 100%;
-  height: 100%;
-  padding: calc(var(--base) * 0.8) 0;
-  border: 0;
-  background: transparent;
-  color: var(--theme-elevation-500);
-  font: inherit;
-  cursor: pointer;
-}
-
-.ea-aside__rail span {
-  writing-mode: vertical-rl;
-}
-
-.ea-aside__rail:hover {
-  color: var(--theme-text);
-  background: var(--theme-elevation-50);
-}
-
 .ea-aside__head {
   display: flex;
   align-items: center;
@@ -386,8 +354,41 @@ html[data-theme="dark"] .ea-aside {
   gap: calc(var(--base) * 0.4);
 }
 
+/* Header control: text with an icon, like Admin's other header links rather than a button. */
 .ea-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   margin-inline: 8px;
+  padding: 6px 4px;
+  border: 0;
+  border-radius: var(--style-radius-s, 3px);
+  background: none;
+  color: var(--theme-elevation-800);
+  font: inherit;
+  font-size: 14px;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.ea-trigger:hover,
+.ea-trigger--open {
+  color: var(--theme-text);
+}
+
+.ea-trigger:focus-visible {
+  outline: 2px solid var(--ea-accent, #2563eb);
+  outline-offset: 2px;
+}
+
+.ea-trigger__icon {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+.ea-trigger--open .ea-trigger__icon {
+  color: var(--ea-accent, #2563eb);
 }
 
 .ea-stop-icon {
@@ -397,3 +398,7 @@ html[data-theme="dark"] .ea-aside {
   border-radius: 2px;
   background: currentColor;
 }
+
+html[data-theme="dark"] .ea-trigger--open .ea-trigger__icon {
+  color: #60a5fa;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simmalugnt-se/payload-editor-assistant",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Context-aware editor assistant plugin for Payload Admin",
   "keywords": [
     "payload",