@mvriu5/payload-ai 1.2.0 → 1.4.0

package/dist/components/{AIInput.module.css → ai-input/AIInput.module.css}

@@ -1,15 +1,19 @@
 .chatLayout {
-    align-items: start;
-    display: grid;
-    gap: 16px;
-    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-    margin-bottom: 24px;
-    max-width: 1280px;
+    width: 100%;
+    max-width: none;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 }
 
 .chat {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
     border: 1px solid var(--theme-elevation-150);
     border-radius: 8px;
+    min-height: 0;
+    overflow: hidden;
     padding: 20px;
 }
 
@@ -26,13 +30,6 @@
     margin: 0;
 }
 
-.chatDescription {
-    color: var(--theme-elevation-600);
-    font-size: 13px;
-    line-height: 1.4;
-    margin: 4px 0 0;
-}
-
 .settings {
     align-items: flex-end;
     display: flex;
@@ -87,6 +84,9 @@
 .chatInputRow {
     position: relative;
     width: 100%;
+    flex: 1 1 0;
+    min-height: 0;
+    overflow: hidden;
 }
 
 .chatActionsRow {
@@ -97,17 +97,69 @@
     margin-top: 12px;
 }
 
+.actions {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+}
+
+.fileInput {
+    display: none;
+}
+
+.mediaButton {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    bottom: 8px;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: inline-flex;
+    height: 28px;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: 8px;
+    width: 28px;
+    z-index: 1;
+}
+
+.mediaButton:hover,
+.mediaButton:focus-visible {
+    color: var(--theme-text);
+}
+
+.mediaButton:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
+}
+
+.mediaButton:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+}
+
+.mediaButton svg {
+    height: 16px;
+    width: 16px;
+}
+
 .chatInput {
     background: transparent;
     border: 0;
+    box-sizing: border-box;
     color: var(--theme-text);
-    display: block;
     font: inherit;
-    height: 84px;
+    flex: 1 1 0;
+    height: 100%;
+    min-height: 0;
     overflow-y: auto;
-    padding: 0;
+    overscroll-behavior: contain;
+    padding: 0 32px 32px 0;
     white-space: pre-wrap;
+    word-break: break-word;
     width: 100%;
+    display: block;
 }
 
 .chatInput:focus {
@@ -120,11 +172,16 @@
 }
 
 .chatInputSurface {
+    position: relative;
     background: var(--theme-input-bg);
     border: 1px solid var(--theme-elevation-150);
     box-sizing: border-box;
     border-radius: 4px;
-    height: 108px;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
     overflow: hidden;
     padding: 12px;
     width: 100%;
@@ -134,6 +191,76 @@
     border-color: var(--theme-success-500);
 }
 
+.attachmentTray {
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    flex-wrap: wrap;
+    gap: 6px;
+    min-height: 22px;
+    padding-right: 32px;
+}
+
+.attachmentPill {
+    align-items: center;
+    background: var(--theme-elevation-100);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 999px;
+    color: var(--theme-text);
+    display: inline-flex;
+    font-size: 11px;
+    gap: 4px;
+    line-height: 1.2;
+    max-width: min(240px, 100%);
+    min-height: 24px;
+    min-width: 0;
+    padding: 2px 5px 3px 8px;
+}
+
+.attachmentName {
+    display: block;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.attachmentRemove {
+    align-items: center;
+    background: transparent;
+    border: 0;
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    font-size: 10px;
+    height: 14px;
+    justify-content: center;
+    line-height: 1;
+    padding: 0;
+    width: 14px;
+}
+
+.attachmentRemove:hover,
+.attachmentRemove:focus-visible {
+    color: #fff;
+}
+
+.attachmentRemove:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+}
+
+.attachmentRemove:disabled:hover {
+    color: var(--theme-elevation-600);
+}
+
+.attachmentRemove:focus-visible {
+    outline: 1px solid currentColor;
+    outline-offset: 1px;
+}
+
 .inlineBadge {
     margin: 0 2px;
     vertical-align: middle;
@@ -198,31 +325,6 @@
     border-color: color-mix(in srgb, #2f5da8 28%, var(--theme-elevation-150));
 }
 
-.chatButton {
-    align-items: center;
-    background: var(--theme-text);
-    border: 0;
-    border-radius: 4px;
-    color: var(--theme-bg);
-    cursor: pointer;
-    display: inline-flex;
-    font: inherit;
-    gap: 6px;
-    justify-content: center;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 14px;
-}
-
-.chatButton svg {
-    flex: 0 0 auto;
-}
-
-.chatButton:disabled {
-    cursor: not-allowed;
-    opacity: 0.45;
-}
-
 .chatError {
     color: var(--theme-error-500);
     font-size: 13px;
@@ -278,6 +380,10 @@
         flex-direction: column;
     }
 
+    .actions {
+        justify-content: flex-end;
+    }
+
     .settings {
         align-items: stretch;
         width: 100%;
@@ -292,7 +398,7 @@
         width: 100%;
     }
 
-    .chatButton {
-        align-self: stretch;
+    .attachmentPill {
+        max-width: 100%;
     }
 }

package/dist/components/ai-input/badge.d.ts

@@ -0,0 +1,14 @@
+import { MentionOption } from "../mention-popover/MentionPopover.js";
+export declare const createBadgePrefix: (suggestion: MentionOption, styles: {
+    [key: string]: string;
+}) => HTMLSpanElement;
+export declare const getTextNodeAtOffset: (element: HTMLElement, offset: number) => {
+    node: Node;
+    offset: number;
+};
+export declare const replaceTextRangeWithBadge: ({ badge, editor, end, start }: {
+    badge: HTMLSpanElement;
+    editor: HTMLElement;
+    end: number;
+    start: number;
+}) => void;

package/dist/components/ai-input/badge.js

@@ -0,0 +1,85 @@
+const appendSvgPath = (svg, d)=>{
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttribute("d", d);
+    svg.append(path);
+};
+const createBadgeIcon = (type, styles)=>{
+    if (type === "locale") return null;
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("class", styles.badgeIcon);
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    if (type === "collection") {
+        appendSvgPath(svg, "M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2");
+    }
+    if (type === "doc") {
+        appendSvgPath(svg, "M14 3v4a1 1 0 0 0 1 1h4");
+        appendSvgPath(svg, "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2");
+    }
+    if (type === "global") {
+        appendSvgPath(svg, "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0");
+        appendSvgPath(svg, "M3.6 9h16.8");
+        appendSvgPath(svg, "M3.6 15h16.8");
+        appendSvgPath(svg, "M11.5 3a17 17 0 0 0 0 18");
+        appendSvgPath(svg, "M12.5 3a17 17 0 0 1 0 18");
+    }
+    return svg;
+};
+export const createBadgePrefix = (suggestion, styles)=>{
+    const prefix = document.createElement("span");
+    const icon = createBadgeIcon(suggestion.type, styles);
+    prefix.className = styles.prefix;
+    if (icon) {
+        prefix.append(icon);
+    }
+    if (suggestion.type === "doc") {
+        prefix.append(document.createTextNode(`${suggestion.collection || "document"}:`));
+    } else if (suggestion.type === "locale") {
+        prefix.textContent = "locale:";
+    }
+    return prefix;
+};
+export const getTextNodeAtOffset = (element, offset)=>{
+    const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
+    let currentOffset = 0;
+    let node = walker.nextNode();
+    while(node){
+        const nextOffset = currentOffset + (node.textContent?.length || 0);
+        if (offset <= nextOffset) {
+            return {
+                node,
+                offset: offset - currentOffset
+            };
+        }
+        currentOffset = nextOffset;
+        node = walker.nextNode();
+    }
+    const textNode = document.createTextNode("");
+    element.append(textNode);
+    return {
+        node: textNode,
+        offset: 0
+    };
+};
+export const replaceTextRangeWithBadge = ({ badge, editor, end, start })=>{
+    const startPosition = getTextNodeAtOffset(editor, start);
+    const endPosition = getTextNodeAtOffset(editor, end);
+    const range = document.createRange();
+    const trailingSpace = document.createTextNode(" ");
+    range.setStart(startPosition.node, startPosition.offset);
+    range.setEnd(endPosition.node, endPosition.offset);
+    range.deleteContents();
+    range.insertNode(trailingSpace);
+    range.insertNode(badge);
+    const selection = window.getSelection();
+    const caretRange = document.createRange();
+    caretRange.setStartAfter(trailingSpace);
+    caretRange.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(caretRange);
+};

package/dist/components/{AuditLogList.d.ts → audit-log-list/AuditLogList.d.ts}

@@ -1,5 +1,5 @@
-import type { ActionProposal } from "./ActionToast.js";
-import { type ProposalDiff } from "./DiffDialog.js";
+import type { ActionProposal } from "../action-toast/ActionToast.js";
+import { type ProposalDiff } from "../diff-dialog/DiffDialog.js";
 export type AppliedChange = {
     action?: ActionProposal["action"] | null;
     additions: number;
@@ -19,14 +19,10 @@ export type AppliedChange = {
     userLabel?: string | null;
     url?: string | null;
 };
-type AuditLogListProps = {
-    allChangesURL?: string;
-    changes: AppliedChange[];
-};
 export type ActiveDiff = {
     change: AppliedChange | null;
     diff: ProposalDiff;
     proposal: ActionProposal;
 };
-export declare const RecentChangesList: ({ allChangesURL, changes }: AuditLogListProps) => import("react").JSX.Element;
-export {};
+declare const AuditLogList: () => import("react").JSX.Element;
+export default AuditLogList;

package/dist/components/{AuditLogList.js → audit-log-list/AuditLogList.js}

@@ -1,8 +1,10 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { ExternalLinkIcon } from "@payloadcms/ui";
-import { DiffDialog } from "./DiffDialog.js";
+import { useEffect, useState } from "react";
+import { Button, ExternalLinkIcon, useConfig } from "@payloadcms/ui";
+import { DiffDialog } from "../diff-dialog/DiffDialog.js";
 import styles from "./AuditLogList.module.css";
+import { useAuditLog } from "../hooks/useAuditLog.js";
 const getChangeProposal = (change)=>({
         action: change.action || "update",
         collection: change.collection || undefined,
@@ -10,8 +12,31 @@ const getChangeProposal = (change)=>({
         label: change.title,
         slug: change.slug || undefined
     });
-export const RecentChangesList = ({ allChangesURL, changes })=>{
+const fallbackConfig = {
+    routes: {
+        admin: "/admin",
+        api: "/api"
+    }
+};
+const AuditLogList = ()=>{
+    const payloadConfigContext = useConfig();
+    const config = payloadConfigContext?.config ?? fallbackConfig;
+    const { loadRecentChanges, allChangesURL, appliedChanges: changes } = useAuditLog({
+        adminRoute: config.routes.admin,
+        apiRoute: config.routes.api
+    });
     const [activeDiff, setActiveDiff] = useState(null);
+    useEffect(()=>{
+        const refresh = ()=>{
+            void loadRecentChanges().catch(()=>undefined);
+        };
+        window.addEventListener("payload-ai:audit-log-updated", refresh);
+        return ()=>{
+            window.removeEventListener("payload-ai:audit-log-updated", refresh);
+        };
+    }, [
+        loadRecentChanges
+    ]);
     return /*#__PURE__*/ _jsxs("aside", {
         className: styles.recentChanges,
         children: [
@@ -22,9 +47,15 @@ export const RecentChangesList = ({ allChangesURL, changes })=>{
                         className: styles.title,
                         children: "Recent changes"
                     }),
-                    allChangesURL && /*#__PURE__*/ _jsx("a", {
-                        className: styles.headerGhostButton,
-                        href: allChangesURL,
+                    allChangesURL && /*#__PURE__*/ _jsx(Button, {
+                        url: allChangesURL,
+                        el: "anchor",
+                        "aria-label": "View all",
+                        margin: false,
+                        buttonStyle: "tab",
+                        size: "small",
+                        disabled: !changes || changes.length <= 0,
+                        newTab: true,
                         children: "View all"
                     })
                 ]
@@ -34,22 +65,25 @@ export const RecentChangesList = ({ allChangesURL, changes })=>{
                 children: changes.length === 0 ? /*#__PURE__*/ _jsx("div", {
                     className: styles.empty,
                     children: "No changes yet."
-                }) : changes.slice(0, 10).map((change, index)=>/*#__PURE__*/ _jsxs("div", {
+                }) : changes.slice(0, 8).map((change, index)=>/*#__PURE__*/ _jsxs("div", {
                         className: styles.item,
                         children: [
                             /*#__PURE__*/ _jsxs("div", {
                                 className: styles.titleRow,
                                 children: [
+                                    change.url && /*#__PURE__*/ _jsx(Button, {
+                                        url: change.url,
+                                        el: "anchor",
+                                        buttonStyle: "tab",
+                                        size: "small",
+                                        "aria-label": "Open change",
+                                        newTab: true,
+                                        margin: false,
+                                        children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
+                                    }),
                                     /*#__PURE__*/ _jsx("div", {
                                         className: styles.itemTitle,
                                         children: change.title
-                                    }),
-                                    change.url && /*#__PURE__*/ _jsx("a", {
-                                        className: styles.ghostButton,
-                                        href: change.url,
-                                        rel: "noreferrer noopener",
-                                        target: "_blank",
-                                        children: /*#__PURE__*/ _jsx(ExternalLinkIcon, {})
                                     })
                                 ]
                             }),
@@ -72,12 +106,13 @@ export const RecentChangesList = ({ allChangesURL, changes })=>{
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ _jsx("button", {
-                                className: styles.button,
+                            /*#__PURE__*/ _jsx(Button, {
+                                buttonStyle: "tab",
+                                size: "small",
+                                "aria-label": "Open review",
+                                margin: false,
                                 onClick: ()=>{
-                                    if (change.before === undefined || change.after === undefined) {
-                                        return;
-                                    }
+                                    if (change.before === undefined || change.after === undefined) return;
                                     setActiveDiff({
                                         change,
                                         diff: {
@@ -87,7 +122,6 @@ export const RecentChangesList = ({ allChangesURL, changes })=>{
                                         proposal: getChangeProposal(change)
                                     });
                                 },
-                                type: "button",
                                 children: "Review"
                             })
                         ]
@@ -102,3 +136,4 @@ export const RecentChangesList = ({ allChangesURL, changes })=>{
         ]
     });
 };
+export default AuditLogList;

package/dist/components/{AuditLogList.module.css → audit-log-list/AuditLogList.module.css}

@@ -1,4 +1,6 @@
 .recentChanges {
+    width: 100%;
+    max-width: none;
     border: 1px solid var(--theme-elevation-150);
     border-radius: 8px;
     display: flex;
@@ -16,19 +18,6 @@
     margin-bottom: 10px;
 }
 
-.headerGhostButton {
-    color: var(--theme-elevation-500);
-    flex: 0 0 auto;
-    font-size: 12px;
-    line-height: 24px;
-    min-height: 24px;
-    text-decoration: none;
-}
-
-.headerGhostButton:hover {
-    text-decoration: underline;
-}
-
 .title {
     font-size: 14px;
     line-height: 1.3;
@@ -39,8 +28,8 @@
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: 8px;
-    max-height: 260px;
+    gap: 4px;
+    max-height: 300px;
     min-height: 0;
     overflow: auto;
     padding-right: 2px;
@@ -54,12 +43,15 @@
 
 .item {
     align-items: center;
-    border: 1px solid var(--theme-elevation-100);
-    border-radius: 4px;
+    border-bottom: 1px solid var(--theme-elevation-100);
     display: grid;
     gap: 8px;
+    padding: 0px 0px 4px 0px;
     grid-template-columns: minmax(0, 1fr) auto auto;
-    padding: 4px 4px 4px 8px;
+}
+
+.item:last-child {
+    border-bottom: none;
 }
 
 .titleRow {
@@ -73,7 +65,7 @@
     color: var(--theme-text);
     flex: 0 1 auto;
     font-size: 12px;
-    font-weight: 600;
+    font-weight: 400;
     line-height: 1.4;
     min-width: 0;
     overflow: hidden;
@@ -104,49 +96,3 @@
     background: rgba(160, 26, 26, 0.16);
     color: #a01a1a;
 }
-
-.button {
-    align-items: center;
-    background: var(--theme-elevation-0);
-    border: 1px solid var(--theme-elevation-150);
-    border-radius: 4px;
-    color: var(--theme-text);
-    cursor: pointer;
-    display: inline-flex;
-    font-size: 12px;
-    gap: 6px;
-    justify-content: center;
-    line-height: 24px;
-    min-height: 24px;
-    padding: 0 10px;
-    text-align: center;
-    text-decoration: none;
-}
-
-.button:disabled {
-    color: var(--theme-elevation-400);
-    cursor: not-allowed;
-}
-
-.button svg {
-    color: var(--theme-elevation-500);
-    flex: 0 0 auto;
-}
-
-.ghostButton {
-    color: var(--theme-elevation-500);
-    flex: 0 0 auto;
-    font-size: 12px;
-    line-height: 18px;
-    text-decoration: none;
-}
-
-.ghostButton:hover {
-    text-decoration: underline;
-}
-
-@media (max-width: 768px) {
-    .list {
-        max-height: 220px;
-    }
-}

package/dist/components/dashboard/Dashboard.d.ts

@@ -0,0 +1,2 @@
+declare const Dashboard: () => import("react").JSX.Element;
+export default Dashboard;

package/dist/components/dashboard/Dashboard.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import AIInput from "../ai-input/AIInput.js";
+import AuditLogList from "../audit-log-list/AuditLogList.js";
+import styles from "./Dashboard.module.css";
+const Dashboard = ()=>{
+    return /*#__PURE__*/ _jsxs("div", {
+        className: styles.dashboard,
+        children: [
+            /*#__PURE__*/ _jsx(AIInput, {
+                isDashboard: true
+            }),
+            /*#__PURE__*/ _jsx(AuditLogList, {})
+        ]
+    });
+};
+export default Dashboard;

package/dist/components/dashboard/Dashboard.module.css

@@ -0,0 +1,13 @@
+.dashboard {
+    display: flex;
+    flex-direction: row;
+    gap: 16px;
+    align-items: flex-start;
+}
+
+@media (max-width: 600px) {
+    .dashboard {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}

package/dist/components/{DiffDialog.d.ts → diff-dialog/DiffDialog.d.ts}

@@ -1,5 +1,5 @@
-import type { ActionProposal } from "./ActionToast.js";
-import type { AppliedChange } from "./AuditLogList.js";
+import type { ActionProposal } from "../action-toast/ActionToast.js";
+import type { AppliedChange } from "../audit-log-list/AuditLogList.js";
 export type ProposalDiff = {
     after: unknown;
     before: unknown;