@mvriu5/payload-ai 0.5.6 → 0.5.9

package/dist/components/AIInput.js

@@ -1,12 +1,14 @@
 "use client";
 import { useConfig } from "@payloadcms/ui";
 import { formatAdminURL } from "payload/shared";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { getResolvedAIModelConfig } from "../ai/providerOptions.js";
 import { getSerializableLabel, isInternalCollection } from "../payload/shared.js";
 import { AIActionProposalList } from "./AIActionProposalList.js";
 import styles from "./AIInput.module.css";
 import { CollectionMentionPopover } from "./CollectionMentionPopover.js";
+import { ClaudeIcon, GoogleGeminiIcon, MistralAiIcon, OpenaiIcon, Send } from "./Icons.js";
+import { RecentChangesList } from "./RecentChangesList.js";
 import { useAISettings } from "./hooks/useAISettings.js";
 import { useDocumentMentionSuggestions } from "./hooks/useDocumentMentionSuggestions.js";
 const collectBlockOptions = ({ fields, parent })=>{
@@ -35,6 +37,52 @@ const collectBlockOptions = ({ fields, parent })=>{
     }
     return options;
 };
+const getProviderIcon = (provider)=>{
+    const iconProps = {
+        "aria-hidden": true,
+        className: styles.selectProviderIcon
+    };
+    switch(provider){
+        case "claude":
+            return /*#__PURE__*/ React.createElement(ClaudeIcon, iconProps);
+        case "google":
+            return /*#__PURE__*/ React.createElement(GoogleGeminiIcon, iconProps);
+        case "mistral":
+            return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
+        case "openai":
+            return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
+        default:
+            return null;
+    }
+};
+const parseSSEEvent = (chunk)=>{
+    const lines = chunk.split("\n");
+    let eventName = "";
+    const dataLines = [];
+    for (const line of lines){
+        if (line.startsWith("event:")) {
+            eventName = line.slice(6).trim();
+            continue;
+        }
+        if (line.startsWith("data:")) {
+            dataLines.push(line.slice(5).trim());
+        }
+    }
+    if (!eventName) return null;
+    try {
+        const data = JSON.parse(dataLines.join("\n"));
+        if (eventName !== "text" && eventName !== "proposals" && eventName !== "error" && eventName !== "done") {
+            return null;
+        }
+        return {
+            data,
+            event: eventName
+        };
+    } catch  {
+        return null;
+    }
+};
+const sanitizeResponseText = (value)=>value.replace(/\*\*/g, "");
 export const AIInput = ()=>{
     const { config } = useConfig();
     const editorRef = useRef(null);
@@ -56,9 +104,48 @@ export const AIInput = ()=>{
     const [response, setResponse] = useState("");
     const [error, setError] = useState("");
     const [proposals, setProposals] = useState([]);
+    const [appliedChanges, setAppliedChanges] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
     const [isApplying, setIsApplying] = useState(false);
-    const collections = config.collections.filter((collection)=>!isInternalCollection(collection.slug)).map((collection)=>({
+    const enabledCollectionSlugs = config.admin?.custom?.payloadAiPlugin?.collectionSlugs;
+    const enabledCollectionSlugSet = useMemo(()=>enabledCollectionSlugs ? new Set(enabledCollectionSlugs) : null, [
+        enabledCollectionSlugs
+    ]);
+    const isCollectionMentionEnabled = (slug)=>!enabledCollectionSlugSet || enabledCollectionSlugSet.has(slug);
+    const recentChangesEndpoint = useMemo(()=>formatAdminURL({
+            apiRoute: config.routes.api,
+            path: "/ai-recent-changes"
+        }), [
+        config.routes.api
+    ]);
+    const loadRecentChanges = useCallback(async ()=>{
+        const res = await fetch(recentChangesEndpoint);
+        const result = await res.json().catch(()=>null);
+        if (res.ok && result?.changes) {
+            setAppliedChanges(result.changes);
+        }
+    }, [
+        recentChangesEndpoint
+    ]);
+    useEffect(()=>{
+        void loadRecentChanges().catch(()=>undefined);
+    }, [
+        loadRecentChanges
+    ]);
+    useEffect(()=>{
+        if (isLoading || error || proposals.length > 0 || !response) return;
+        const timeout = window.setTimeout(()=>{
+            setResponse("");
+            clearInput();
+        }, 5000);
+        return ()=>window.clearTimeout(timeout);
+    }, [
+        error,
+        isLoading,
+        proposals.length,
+        response
+    ]);
+    const collections = config.collections.filter((collection)=>!isInternalCollection(collection.slug)).filter((collection)=>isCollectionMentionEnabled(collection.slug)).map((collection)=>({
             label: getSerializableLabel(collection.labels?.singular, collection.slug),
             slug: collection.slug,
             type: "collection"
@@ -69,7 +156,7 @@ export const AIInput = ()=>{
             type: "global"
         })) || [];
     const blocks = [
-        ...config.collections.flatMap((collection)=>collectBlockOptions({
+        ...config.collections.filter((collection)=>isCollectionMentionEnabled(collection.slug)).flatMap((collection)=>collectBlockOptions({
                 fields: collection.fields,
                 parent: collection.slug
             })),
@@ -106,14 +193,6 @@ export const AIInput = ()=>{
         clonedRange.setEnd(range.endContainer, range.endOffset);
         return clonedRange.toString().length;
     };
-    const moveCaretToEnd = (element)=>{
-        const selection = window.getSelection();
-        const range = document.createRange();
-        range.selectNodeContents(element);
-        range.collapse(false);
-        selection?.removeAllRanges();
-        selection?.addRange(range);
-    };
     const getTextNodeAtOffset = (element, offset)=>{
         const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT);
         let currentOffset = 0;
@@ -231,6 +310,9 @@ export const AIInput = ()=>{
         if (!trimmedPrompt) return;
         setIsLoading(true);
         setAppliedProposalIndexes([]);
+        setError("");
+        setProposals([]);
+        setResponse("");
         try {
             const res = await fetch(formatAdminURL({
                 apiRoute: config.routes.api,
@@ -246,15 +328,49 @@ export const AIInput = ()=>{
                 },
                 method: "POST"
             });
-            const result = await res.json();
             if (!res.ok) {
-                setProposals([]);
-                setResponse("");
-                throw new Error(result.error || "AI request failed");
+                const result = await res.json().catch(()=>null);
+                throw new Error(result?.error || "AI request failed");
+            }
+            if (!res.body) {
+                throw new Error("AI response stream is unavailable");
+            }
+            const reader = res.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = "";
+            while(true){
+                const { done, value } = await reader.read();
+                if (done) break;
+                buffer += decoder.decode(value, {
+                    stream: true
+                });
+                const chunks = buffer.split("\n\n");
+                buffer = chunks.pop() || "";
+                for (const chunk of chunks){
+                    const event = parseSSEEvent(chunk);
+                    if (!event) continue;
+                    if (event.event === "text") {
+                        if (event.data.delta) {
+                            setResponse((current)=>current + sanitizeResponseText(event.data.delta || ""));
+                        }
+                        continue;
+                    }
+                    if (event.event === "proposals") {
+                        setProposals(event.data.proposals || []);
+                        continue;
+                    }
+                    if (event.event === "error") {
+                        throw new Error(event.data.error || "AI request failed");
+                    }
+                }
+            }
+            const finalEvent = buffer.trim() ? parseSSEEvent(buffer.trim()) : null;
+            if (finalEvent?.event === "proposals") {
+                setProposals(finalEvent.data.proposals || []);
+            }
+            if (finalEvent?.event === "error") {
+                throw new Error(finalEvent.data.error || "AI request failed");
             }
-            setError("");
-            setResponse(result.text || "");
-            setProposals(result.proposals || []);
         } catch (err) {
             setProposals([]);
             setResponse("");
@@ -289,6 +405,13 @@ export const AIInput = ()=>{
             setError("");
             setProposals([]);
             setResponse("");
+            if (result.change) {
+                setAppliedChanges((current)=>[
+                        result.change,
+                        ...current
+                    ].slice(0, 12));
+            }
+            void loadRecentChanges().catch(()=>undefined);
             clearInput();
         } catch (err) {
             setError(err instanceof Error ? err.message : "Could not apply proposal");
@@ -297,6 +420,8 @@ export const AIInput = ()=>{
         }
     };
     return /*#__PURE__*/ React.createElement("div", {
+        className: styles.chatLayout
+    }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chat
     }, /*#__PURE__*/ React.createElement("div", {
         className: styles.chatHeader
@@ -349,22 +474,28 @@ export const AIInput = ()=>{
         className: styles.setting
     }, /*#__PURE__*/ React.createElement("span", {
         className: styles.settingLabel
-    }, "Model"), /*#__PURE__*/ React.createElement("select", {
+    }, "Model"), /*#__PURE__*/ React.createElement("div", {
+        className: styles.selectWrapper
+    }, getProviderIcon(settingsProvider), /*#__PURE__*/ React.createElement("select", {
         className: styles.select,
         disabled: !settingsProvider,
         onChange: (event)=>setSelectedModel(event.target.value),
         value: selectedModel
-    }, !settingsProvider ? /*#__PURE__*/ React.createElement("option", {
+    }, !settingsProvider && /*#__PURE__*/ React.createElement("option", {
         value: ""
-    }, "Select provider in account settings") : null, settingsProvider ? aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
+    }, "Select provider in account settings"), settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
             key: model.value,
             value: model.value
-        }, model.label)) : null))), /*#__PURE__*/ React.createElement("button", {
+        }, model.label)))))), /*#__PURE__*/ React.createElement("button", {
         className: styles.chatButton,
         disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
         onClick: ()=>void handleSubmit(),
         type: "button"
-    }, isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+    }, /*#__PURE__*/ React.createElement(Send, {
+        width: 14,
+        height: 14
+    }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(AIActionProposalList, {
+        apiRoute: config.routes.api,
         appliedProposalIndexes: appliedProposalIndexes,
         description: response,
         error: error,
@@ -382,5 +513,7 @@ export const AIInput = ()=>{
         },
         onApply: (proposal, _index)=>void handleApplyProposal(proposal),
         proposals: proposals
+    })), /*#__PURE__*/ React.createElement(RecentChangesList, {
+        changes: appliedChanges
     }));
 };

package/dist/components/AIInput.module.css

@@ -1,237 +1,275 @@
+.chatLayout {
+    align-items: stretch;
+    display: grid;
+    gap: 16px;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    margin-bottom: 24px;
+    max-width: 1280px;
+}
+
 .chat {
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: 8px;
-  margin-bottom: 24px;
-  max-width: 920px;
-  padding: 20px;
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 8px;
+    padding: 20px;
 }
 
 .chatHeader {
-  align-items: flex-start;
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 16px;
 }
 
 .chatTitle {
-  font-size: 18px;
-  line-height: 1.3;
-  margin: 0;
+    font-size: 18px;
+    line-height: 1.3;
+    margin: 0;
 }
 
 .chatDescription {
-  color: var(--theme-elevation-600);
-  font-size: 13px;
-  line-height: 1.4;
-  margin: 4px 0 0;
+    color: var(--theme-elevation-600);
+    font-size: 13px;
+    line-height: 1.4;
+    margin: 4px 0 0;
 }
 
 .settings {
-  align-items: flex-end;
-  display: flex;
-  gap: 10px;
+    align-items: flex-end;
+    display: flex;
+    gap: 10px;
 }
 
 .setting {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
 }
 
 .settingLabel {
-  color: var(--theme-elevation-600);
-  font-size: 11px;
-  line-height: 1.2;
+    color: var(--theme-elevation-600);
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+.selectWrapper {
+    align-items: center;
+    display: flex;
+    position: relative;
+}
+
+.selectProviderIcon {
+    color: var(--theme-text);
+    height: 12px;
+    left: 10px;
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
 }
 
 .select {
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: 4px;
-  color: var(--theme-text);
-  font: inherit;
-  min-height: 34px;
-  min-width: 160px;
-  padding: 0 28px 0 10px;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-text);
+    font: inherit;
+    min-height: 24px;
+    min-width: 160px;
+    padding: 0 28px 0 34px;
 }
 
 .select:focus {
-  border-color: var(--theme-success-500);
-  outline: none;
+    border-color: var(--theme-success-500);
+    outline: none;
 }
 
 .chatInputRow {
-  position: relative;
-  width: 100%;
+    position: relative;
+    width: 100%;
 }
 
 .chatActionsRow {
-  align-items: flex-end;
-  display: flex;
-  gap: 12px;
-  justify-content: space-between;
-  margin-top: 12px;
+    align-items: flex-end;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+    margin-top: 12px;
 }
 
 .chatInput {
-  background: transparent;
-  border: 0;
-  color: var(--theme-text);
-  font: inherit;
-  min-height: 84px;
-  padding: 0;
-  white-space: pre-wrap;
-  width: 100%;
+    background: transparent;
+    border: 0;
+    color: var(--theme-text);
+    font: inherit;
+    min-height: 84px;
+    padding: 0;
+    white-space: pre-wrap;
+    width: 100%;
 }
 
 .chatInput:focus {
-  outline: none;
+    outline: none;
 }
 
 .chatInput:empty::before {
-  color: var(--theme-elevation-400);
-  content: attr(data-placeholder);
+    color: var(--theme-elevation-400);
+    content: attr(data-placeholder);
 }
 
 .chatInputSurface {
-  background: var(--theme-input-bg);
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: 4px;
-  padding: 12px;
-  width: 100%;
+    background: var(--theme-input-bg);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    padding: 12px;
+    width: 100%;
 }
 
 .chatInputSurface:focus-within {
-  border-color: var(--theme-success-500);
+    border-color: var(--theme-success-500);
 }
 
 .inlineBadge {
-  margin: 0 2px;
-  vertical-align: middle;
+    margin: 0 2px;
+    vertical-align: middle;
 }
 
 .badge {
-  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: 3px;
-  line-height: 1;
-  min-height: 20px;
-  padding: 0 8px;
-  position: relative;
-  top: -2px;
-  white-space: nowrap;
+    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: 3px;
+    line-height: 1;
+    min-height: 20px;
+    padding: 0 8px;
+    position: relative;
+    top: -2px;
+    white-space: nowrap;
 }
 
 .prefix {
-  color: var(--theme-elevation-500);
+    color: var(--theme-elevation-500);
 }
 
 .name {
-  color: var(--theme-text);
+    color: var(--theme-text);
 }
 
 .collection {
-  background: color-mix(in srgb, #2f7d68 12%, var(--theme-bg));
-  border-color: color-mix(in srgb, #2f7d68 28%, var(--theme-elevation-150));
+    background: color-mix(in srgb, #2f7d68 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #2f7d68 28%, var(--theme-elevation-150));
 }
 
 .global {
-  background: color-mix(in srgb, #8b6f24 12%, var(--theme-bg));
-  border-color: color-mix(in srgb, #8b6f24 28%, var(--theme-elevation-150));
+    background: color-mix(in srgb, #8b6f24 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #8b6f24 28%, var(--theme-elevation-150));
 }
 
 .block {
-  background: color-mix(in srgb, #5a6fa8 12%, var(--theme-bg));
-  border-color: color-mix(in srgb, #5a6fa8 28%, var(--theme-elevation-150));
+    background: color-mix(in srgb, #5a6fa8 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #5a6fa8 28%, var(--theme-elevation-150));
 }
 
 .doc {
-  background: color-mix(in srgb, #7a5c9e 12%, var(--theme-bg));
-  border-color: color-mix(in srgb, #7a5c9e 28%, var(--theme-elevation-150));
+    background: color-mix(in srgb, #7a5c9e 12%, var(--theme-bg));
+    border-color: color-mix(in srgb, #7a5c9e 28%, var(--theme-elevation-150));
 }
 
 .chatButton {
-  background: var(--theme-text);
-  border: 0;
-  border-radius: 4px;
-  color: var(--theme-bg);
-  cursor: pointer;
-  font: inherit;
-  min-height: 40px;
-  padding: 0 18px;
+    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;
+    cursor: not-allowed;
+    opacity: 0.45;
 }
 
 .chatError {
-  color: var(--theme-error-500);
-  font-size: 13px;
-  line-height: 1.4;
-  margin-top: 12px;
+    color: var(--theme-error-500);
+    font-size: 13px;
+    line-height: 1.4;
+    margin-top: 12px;
 }
 
 .debugInfo {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-elevation-150);
-  border-radius: 4px;
-  color: var(--theme-elevation-800);
-  font-size: 12px;
-  line-height: 1.5;
-  margin: 12px 0 0;
-  max-height: 260px;
-  overflow: auto;
-  padding: 12px;
-  white-space: pre-wrap;
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-elevation-800);
+    font-size: 12px;
+    line-height: 1.5;
+    margin: 12px 0 0;
+    max-height: 260px;
+    overflow: auto;
+    padding: 12px;
+    white-space: pre-wrap;
 }
 
 .chatResponse {
-  background: var(--theme-elevation-50);
-  border: 1px solid var(--theme-elevation-100);
-  border-radius: 4px;
-  line-height: 1.5;
-  margin-top: 16px;
-  padding: 12px;
-  white-space: pre-wrap;
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    line-height: 1.5;
+    margin-top: 16px;
+    padding: 12px;
+    white-space: pre-wrap;
 }
 
 @media (max-width: 768px) {
-  .chatHeader {
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .chatInputRow {
-    width: 100%;
-  }
-
-  .chatActionsRow {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .settings {
-    align-items: stretch;
-    width: 100%;
-  }
-
-  .setting {
-    flex: 1;
-  }
-
-  .select {
-    min-width: 0;
-    width: 100%;
-  }
+    .chatLayout {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .chatHeader {
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .chatInputRow {
+        width: 100%;
+    }
+
+    .chatActionsRow {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .settings {
+        align-items: stretch;
+        width: 100%;
+    }
+
+    .setting {
+        flex: 1;
+    }
+
+    .select {
+        min-width: 0;
+        width: 100%;
+    }
+
+    .chatButton {
+        align-self: stretch;
+    }
 
-  .chatButton {
-    align-self: stretch;
-  }
 }