@mvriu5/payload-ai 0.5.8 → 0.5.10

package/dist/components/DiffDialog.module.css

@@ -0,0 +1,333 @@
+.dialogOverlay {
+    align-items: center;
+    background: rgba(0, 0, 0, 0.42);
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    overflow: auto;
+    padding: 24px;
+    position: fixed;
+    z-index: 1100;
+}
+
+.dialog {
+    background: var(--theme-bg);
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 6px;
+    box-shadow: 0 20px 64px rgba(0, 0, 0, 0.26);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    max-height: min(760px, calc(100vh - 48px));
+    max-width: min(1120px, calc(100vw - 48px));
+    min-height: 0;
+    overflow: hidden;
+    padding: 16px;
+    width: 100%;
+}
+
+.dialogContent {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 0;
+    overflow: auto;
+}
+
+.dialogHeader {
+    align-items: flex-start;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+}
+
+.dialogTitle {
+    color: var(--theme-text);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.4;
+}
+
+.meta {
+    color: var(--theme-elevation-600);
+    font-size: 12px;
+    line-height: 1.4;
+    margin-top: 2px;
+}
+
+.detailSection {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.detailGrid {
+    column-gap: 12px;
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+    row-gap: 4px;
+}
+
+.detailLabel {
+    color: var(--theme-elevation-600);
+    font-size: 11px;
+    line-height: 1.2;
+}
+
+.detailValue {
+    color: var(--theme-text);
+    font-size: 12px;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.detailTextBlock {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.detailText {
+    background: var(--theme-elevation-50);
+    border: 1px solid var(--theme-elevation-100);
+    border-radius: 4px;
+    color: var(--theme-text);
+    font-family: inherit;
+    font-size: 12px;
+    line-height: 1.5;
+    margin: 0;
+    max-height: 140px;
+    overflow: auto;
+    padding: 8px 10px;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+.closeButton {
+    align-items: center;
+    background: transparent;
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 4px;
+    color: var(--theme-text);
+    cursor: pointer;
+    display: inline-flex;
+    flex: 0 0 auto;
+    font: inherit;
+    height: 24px;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0;
+    text-decoration: none;
+    width: 24px;
+}
+
+.closeButton svg {
+    height: 12px;
+    width: 12px;
+}
+
+.diffShell {
+    border: 1px solid var(--theme-elevation-150);
+    border-radius: 0;
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
+.diffSection {
+    display: flex;
+    flex: 0 0 calc(100% - 1px);
+    flex-direction: column;
+    gap: 6px;
+    min-height: calc(100% - 1px);
+}
+
+.diffSectionLabel {
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.3;
+}
+
+.diffHeaderGrid {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-width: 100%;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+
+.diffPaneHeader {
+    background: var(--theme-elevation-50);
+    border-bottom: 1px solid var(--theme-elevation-150);
+    color: var(--theme-elevation-700);
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 1.4;
+    min-width: 0;
+    overflow: hidden;
+    padding: 8px 10px;
+}
+
+.diffPaneHeader + .diffPaneHeader {
+    border-left: 1px solid var(--theme-elevation-150);
+}
+
+.diffScroll {
+    background: var(--theme-elevation-50);
+    color: var(--theme-text);
+    flex: 1 1 auto;
+    font-size: 12px;
+    line-height: 1.5;
+    min-height: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.diffRows {
+    display: grid;
+    font-family: monospace;
+    min-width: 100%;
+    padding: 0;
+}
+
+.diffRow {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    min-width: 100%;
+}
+
+.diffLine {
+    display: block;
+    min-height: 18px;
+    min-width: 0;
+    overflow: hidden;
+    padding: 0;
+    text-overflow: clip;
+    white-space: pre;
+}
+
+.diffPathBadge {
+    background: rgba(255, 255, 255, 0.08);
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 3px;
+    color: var(--theme-elevation-700);
+    display: block;
+    font-family: monospace;
+    font-size: 11px;
+    line-height: 18px;
+    margin: 2px 6px 1px;
+    max-width: calc(100% - 12px);
+    overflow: hidden;
+    padding: 0 6px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.diffLineContent {
+    display: inline-block;
+    min-width: var(--diff-line-width);
+    transform: translateX(var(--diff-line-offset));
+}
+
+.diffLine + .diffLine {
+    box-shadow: inset 1px 0 0 var(--theme-elevation-150);
+}
+
+.diffLineAdded {
+    background: rgba(39, 132, 90, 0.28);
+    border-left: 3px solid rgba(39, 132, 90, 0.92);
+}
+
+.diffLineRemoved {
+    background: rgba(160, 26, 26, 0.28);
+    border-left: 3px solid rgba(136, 18, 18, 0.96);
+}
+
+.diffLinePlaceholder {
+    background: var(--theme-elevation-50);
+}
+
+.diffCollapsedRow {
+    align-items: center;
+    background: var(--theme-elevation-100);
+    border: 0;
+    border-bottom: 1px solid var(--theme-elevation-150);
+    border-top: 1px solid var(--theme-elevation-150);
+    color: var(--theme-elevation-600);
+    cursor: pointer;
+    display: flex;
+    font: inherit;
+    font-family: monospace;
+    font-size: 12px;
+    gap: 8px;
+    grid-column: 1 / -1;
+    justify-content: center;
+    line-height: 24px;
+    min-height: 24px;
+    padding: 0 10px;
+}
+
+.diffCollapsedRow:hover {
+    background: var(--theme-elevation-150);
+}
+
+.diffCollapsedPath {
+    color: var(--theme-elevation-500);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.horizontalScroll {
+    flex: 0 0 auto;
+    height: 16px;
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.horizontalScrollSpacer {
+    height: 1px;
+    min-width: 100%;
+    width: calc(50% + var(--diff-line-width));
+}
+
+@media (max-width: 768px) {
+    .dialogOverlay {
+        padding: 12px;
+    }
+
+    .dialog {
+        max-height: calc(100vh - 24px);
+        max-width: calc(100vw - 24px);
+    }
+
+    .dialogHeader {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .detailGrid {
+        grid-template-columns: minmax(0, 1fr);
+    }
+
+    .closeButton {
+        align-self: flex-end;
+    }
+
+    .diffScroll {
+        min-height: 0;
+    }
+
+}

package/dist/components/Icons.d.ts

@@ -3,3 +3,12 @@ export declare function MistralAiIcon(props: SVGProps<SVGSVGElement>): import("r
 export declare function OpenaiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function ClaudeIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
 export declare function GoogleGeminiIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function OpenrouterIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function FileDiff(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Send(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Apply(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Reject(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Collection(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Document(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Global(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function Block(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/components/Icons.js

@@ -51,6 +51,8 @@ export function OpenaiIcon(props) {
     return /*#__PURE__*/ React.createElement("svg", {
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 256 260",
+        fill: "currentColor",
+        stroke: "currentColor",
         ...props
     }, /*#__PURE__*/ React.createElement("path", {
         d: "M239.184 106.203a64.72 64.72 0 0 0-5.576-53.103C219.452 28.459 191 15.784 163.213 21.74A65.586 65.586 0 0 0 52.096 45.22a64.72 64.72 0 0 0-43.23 31.36c-14.31 24.602-11.061 55.634 8.033 76.74a64.67 64.67 0 0 0 5.525 53.102c14.174 24.65 42.644 37.324 70.446 31.36a64.72 64.72 0 0 0 48.754 21.744c28.481.025 53.714-18.361 62.414-45.481a64.77 64.77 0 0 0 43.229-31.36c14.137-24.558 10.875-55.423-8.083-76.483m-97.56 136.338a48.4 48.4 0 0 1-31.105-11.255l1.535-.87l51.67-29.825a8.6 8.6 0 0 0 4.247-7.367v-72.85l21.845 12.636c.218.111.37.32.409.563v60.367c-.056 26.818-21.783 48.545-48.601 48.601M37.158 197.93a48.35 48.35 0 0 1-5.781-32.589l1.534.921l51.722 29.826a8.34 8.34 0 0 0 8.441 0l63.181-36.425v25.221a.87.87 0 0 1-.358.665l-52.335 30.184c-23.257 13.398-52.97 5.431-66.404-17.803M23.549 85.38a48.5 48.5 0 0 1 25.58-21.333v61.39a8.29 8.29 0 0 0 4.195 7.316l62.874 36.272l-21.845 12.636a.82.82 0 0 1-.767 0L41.353 151.53c-23.211-13.454-31.171-43.144-17.804-66.405zm179.466 41.695l-63.08-36.63L161.73 77.86a.82.82 0 0 1 .768 0l52.233 30.184a48.6 48.6 0 0 1-7.316 87.635v-61.391a8.54 8.54 0 0 0-4.4-7.213m21.742-32.69l-1.535-.922l-51.619-30.081a8.39 8.39 0 0 0-8.492 0L99.98 99.808V74.587a.72.72 0 0 1 .307-.665l52.233-30.133a48.652 48.652 0 0 1 72.236 50.391zM88.061 139.097l-21.845-12.585a.87.87 0 0 1-.41-.614V65.685a48.652 48.652 0 0 1 79.757-37.346l-1.535.87l-51.67 29.825a8.6 8.6 0 0 0-4.246 7.367zm11.868-25.58L128.067 97.3l28.188 16.218v32.434l-28.086 16.218l-28.188-16.218z"
@@ -177,3 +179,194 @@ export function GoogleGeminiIcon(props) {
         d: "M348.374 72.76c-2.846-18.788-17.592-33.533-36.38-36.38c18.788-2.847 33.534-17.593 36.38-36.38c2.847 18.787 17.593 33.533 36.38 36.38c-18.787 2.847-33.533 17.592-36.38 36.38"
     }));
 }
+export function OpenrouterIcon(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "512",
+        height: "512",
+        viewBox: "0 0 512 512",
+        fill: "currentColor",
+        stroke: "currentColor",
+        ...props
+    }, /*#__PURE__*/ React.createElement("g", {
+        clipPath: "url(#clip0_205_3)"
+    }, /*#__PURE__*/ React.createElement("path", {
+        d: "M3 248.945C18 248.945 76 236 106 219C136 202 136 202 198 158C276.497 102.293 332 120.945 423 120.945",
+        strokeWidth: "90"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M511 121.5L357.25 210.268L357.25 32.7324L511 121.5Z"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M0 249C15 249 73 261.945 103 278.945C133 295.945 133 295.945 195 339.945C273.497 395.652 329 377 420 377",
+        strokeWidth: "90"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M508 376.445L354.25 287.678L354.25 465.213L508 376.445Z"
+    })));
+}
+export function FileDiff(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M14 3v4a1 1 0 0 0 1 1h4"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M12 10l0 4"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 12l4 0"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 17l4 0"
+    }));
+}
+export function Send(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M10 14l11 -11"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
+    }));
+}
+export function Apply(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M5 12l5 5l10 -10"
+    }));
+}
+export function Reject(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M18 6l-12 12"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M6 6l12 12"
+    }));
+}
+export function Collection(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "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"
+    }));
+}
+export function Document(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M14 3v4a1 1 0 0 0 1 1h4"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2"
+    }));
+}
+export function Global(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M3.6 9h16.8"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M3.6 15h16.8"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M11.5 3a17 17 0 0 0 0 18"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M12.5 3a17 17 0 0 1 0 18"
+    }));
+}
+export function Block(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 2,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        stroke: "none",
+        d: "M0 0h24v24H0z",
+        fill: "none"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M14 4a1 1 0 0 1 1 -1h5a1 1 0 0 1 1 1v5a1 1 0 0 1 -1 1h-5a1 1 0 0 1 -1 -1l0 -5"
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M3 14h12a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h3a2 2 0 0 1 2 2v12"
+    }));
+}

package/dist/components/MentionPopover.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+import type { RefObject } from "react";
+export type MentionOption = {
+    collection?: string;
+    id?: string;
+    isDefault?: boolean;
+    label: string;
+    parent?: string;
+    slug: string;
+    type: "block" | "collection" | "doc" | "global" | "locale";
+};
+type MentionPopoverProps = {
+    containerRef?: RefObject<HTMLDivElement | null>;
+    suggestions: MentionOption[];
+    onSelect: (suggestion: MentionOption) => void;
+    style?: CSSProperties;
+};
+export declare const MentionPopover: ({ containerRef, onSelect, style, suggestions }: MentionPopoverProps) => import("react").JSX.Element | null;
+export {};

package/dist/components/{CollectionMentionPopover.js → MentionPopover.js}

@@ -1,11 +1,11 @@
-import styles from "./CollectionMentionPopover.module.css";
+import styles from "./MentionPopover.module.css";
 const suggestionGroups = [
     {
         label: "Collections",
         type: "collection"
     },
     {
-        label: "Collection items",
+        label: "Documents",
         type: "doc"
     },
     {
@@ -15,21 +15,27 @@ const suggestionGroups = [
     {
         label: "Blocks",
         type: "block"
+    },
+    {
+        label: "Locales",
+        type: "locale"
     }
 ];
 const getSuggestionTitle = (suggestion)=>{
     if (suggestion.type === "collection") return `@${suggestion.slug}`;
     if (suggestion.type === "global") return `@${suggestion.slug}`;
     if (suggestion.type === "block") return `@${suggestion.slug}`;
+    if (suggestion.type === "locale") return `@${suggestion.slug}`;
     return suggestion.label;
 };
 const getSuggestionLabel = (suggestion)=>{
     if (suggestion.type === "collection") return suggestion.label;
     if (suggestion.type === "global") return "global";
     if (suggestion.type === "block") return `${suggestion.parent} block`;
+    if (suggestion.type === "locale") return suggestion.isDefault ? "default locale" : "locale";
     return `${suggestion.collection} item`;
 };
-export const CollectionMentionPopover = ({ containerRef, onSelect, suggestions })=>{
+export const MentionPopover = ({ containerRef, onSelect, style, suggestions })=>{
     if (suggestions.length === 0) return null;
     const onKeyDown = (event, suggestion)=>{
         if (event.key === "Enter" || event.key === " ") {
@@ -53,7 +59,8 @@ export const CollectionMentionPopover = ({ containerRef, onSelect, suggestions }
     };
     return /*#__PURE__*/ React.createElement("div", {
         className: styles.popover,
-        ref: containerRef
+        ref: containerRef,
+        style: style
     }, suggestionGroups.map((group)=>{
         const groupSuggestions = suggestions.filter((s)=>s.type === group.type);
         if (groupSuggestions.length === 0) return null;

package/dist/components/{CollectionMentionPopover.module.css → MentionPopover.module.css}

@@ -3,14 +3,12 @@
     border: 1px solid var(--theme-elevation-150);
     border-radius: 6px;
     box-shadow: 0 8px 24px rgb(0 0 0 / 12%);
-    left: 0;
     max-height: 220px;
     max-width: calc(100% - 96px);
     min-width: 260px;
     overflow: auto;
     padding: 6px;
     position: absolute;
-    top: calc(100% + 6px);
     z-index: 10;
 }
 

package/dist/components/hooks/useAISettings.d.ts

@@ -1,10 +1,12 @@
 import { type AIProvider } from "../../ai/providerOptions.js";
-export declare const useAISettings: ({ adminUserSlug, apiRoute, defaultModels, }: {
+interface UseAISettingsOptions {
     adminUserSlug?: string;
     apiRoute: string;
     defaultModels: Record<AIProvider, string>;
-}) => {
+}
+export declare const useAISettings: ({ adminUserSlug, apiRoute, defaultModels }: UseAISettingsOptions) => {
     selectedModel: string;
-    setSelectedModel: import("react").Dispatch<import("react").SetStateAction<string>>;
-    settingsProvider: "claude" | "google" | "mistral" | "openai" | null;
+    setSelectedModel: (model: string) => void;
+    settingsProvider: "claude" | "google" | "mistral" | "openai" | "openrouter" | null;
 };
+export {};

package/dist/components/hooks/useAISettings.js

@@ -2,10 +2,25 @@
 import { formatAdminURL } from "payload/shared";
 import { useEffect, useState } from "react";
 import { isAIProvider } from "../../ai/providerOptions.js";
-import { isAbortError } from "./utils.js";
+import { isAbortError } from "../../payload/shared.js";
+const getStoredModelKey = (provider)=>`payload-ai:selected-model:${provider}`;
+const getStoredModel = (provider)=>{
+    if (typeof window === "undefined") return null;
+    return window.localStorage.getItem(getStoredModelKey(provider));
+};
+const storeModel = (provider, model)=>{
+    if (typeof window === "undefined") return;
+    window.localStorage.setItem(getStoredModelKey(provider), model);
+};
 export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
     const [settingsProvider, setSettingsProvider] = useState(null);
     const [selectedModel, setSelectedModel] = useState("");
+    const setStoredSelectedModel = (model)=>{
+        setSelectedModel(model);
+        if (settingsProvider && model) {
+            storeModel(settingsProvider, model);
+        }
+    };
     useEffect(()=>{
         if (!adminUserSlug) {
             setSettingsProvider(null);
@@ -34,7 +49,7 @@ export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
                     return;
                 }
                 setSettingsProvider(provider);
-                setSelectedModel(defaultModels[provider]);
+                setSelectedModel(getStoredModel(provider) || defaultModels[provider]);
             } catch (err) {
                 if (isAbortError(err)) return;
                 setSettingsProvider(null);
@@ -50,7 +65,7 @@ export const useAISettings = ({ adminUserSlug, apiRoute, defaultModels })=>{
     ]);
     return {
         selectedModel,
-        setSelectedModel,
+        setSelectedModel: setStoredSelectedModel,
         settingsProvider
     };
 };