@mvriu5/payload-ai 0.5.10 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/AIInput.js +166 -109
  2. package/dist/components/APIKeyField.js +41 -24
  3. package/dist/components/ActionToast.js +200 -101
  4. package/dist/components/AuditLogList.js +90 -53
  5. package/dist/components/DiffDialog.js +222 -121
  6. package/dist/components/Icons.js +390 -274
  7. package/dist/components/MentionPopover.js +33 -22
  8. package/dist/handlers/chatHandler.js +89 -2
  9. package/dist/index.js +2 -2
  10. package/package.json +40 -9
package/dist/components/AIInput.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useConfig } from "@payloadcms/ui";
3
4
  import { formatAdminURL } from "payload/shared";
4
5
  import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -44,15 +45,25 @@ const getProviderIcon = (provider)=>{
44
45
  };
45
46
  switch(provider){
46
47
  case "claude":
47
- return /*#__PURE__*/ React.createElement(ClaudeIcon, iconProps);
48
+ return /*#__PURE__*/ _jsx(ClaudeIcon, {
49
+ ...iconProps
50
+ });
48
51
  case "google":
49
- return /*#__PURE__*/ React.createElement(GoogleGeminiIcon, iconProps);
52
+ return /*#__PURE__*/ _jsx(GoogleGeminiIcon, {
53
+ ...iconProps
54
+ });
50
55
  case "mistral":
51
- return /*#__PURE__*/ React.createElement(MistralAiIcon, iconProps);
56
+ return /*#__PURE__*/ _jsx(MistralAiIcon, {
57
+ ...iconProps
58
+ });
52
59
  case "openai":
53
- return /*#__PURE__*/ React.createElement(OpenaiIcon, iconProps);
60
+ return /*#__PURE__*/ _jsx(OpenaiIcon, {
61
+ ...iconProps
62
+ });
54
63
  case "openrouter":
55
- return /*#__PURE__*/ React.createElement(OpenrouterIcon, iconProps);
64
+ return /*#__PURE__*/ _jsx(OpenrouterIcon, {
65
+ ...iconProps
66
+ });
56
67
  default:
57
68
  return null;
58
69
  }
@@ -582,109 +593,155 @@ const AIInput = ()=>{
582
593
  setIsApplying(false);
583
594
  }
584
595
  };
585
- return /*#__PURE__*/ React.createElement("div", {
586
- className: styles.chatLayout
587
- }, /*#__PURE__*/ React.createElement("div", {
588
- className: styles.chat
589
- }, /*#__PURE__*/ React.createElement("div", {
590
- className: styles.chatHeader
591
- }, /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.createElement("h2", {
592
- className: styles.chatTitle
593
- }, "AI Assistant"), /*#__PURE__*/ React.createElement("p", {
594
- className: styles.chatDescription
595
- }, "Ask AI to draft, improve, or analyze content."))), /*#__PURE__*/ React.createElement("div", {
596
- className: styles.chatInputRow
597
- }, /*#__PURE__*/ React.createElement("div", {
598
- className: styles.chatInputSurface
599
- }, /*#__PURE__*/ React.createElement("div", {
600
- className: styles.chatInput,
601
- contentEditable: true,
602
- "data-placeholder": "Ask AI...",
603
- onInput: (event)=>{
604
- const value = event.currentTarget.innerText;
605
- setPrompt(value);
606
- if (!value.trim()) {
607
- setMentions([]);
608
- }
609
- updateMentionState(getTextBeforeCaret(event.currentTarget));
610
- },
611
- onKeyDown: (event)=>{
612
- if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
613
- const firstOption = mentionPopoverRef.current?.querySelector("button");
614
- if (firstOption) {
615
- event.preventDefault();
616
- firstOption.focus();
617
- return;
618
- }
619
- }
620
- if (event.key === "Enter" && !event.shiftKey) {
621
- event.preventDefault();
622
- void handleSubmit();
623
- }
624
- },
625
- ref: editorRef,
626
- role: "textbox",
627
- suppressContentEditableWarning: true
628
- })), mentionRange && /*#__PURE__*/ React.createElement(MentionPopover, {
629
- containerRef: mentionPopoverRef,
630
- onSelect: insertMention,
631
- style: mentionPopoverPosition ? {
632
- left: `${mentionPopoverPosition.left}px`,
633
- top: `${mentionPopoverPosition.top}px`
634
- } : undefined,
635
- suggestions: mentionSuggestions
636
- })), /*#__PURE__*/ React.createElement("div", {
637
- className: styles.chatActionsRow
638
- }, /*#__PURE__*/ React.createElement("div", {
639
- className: styles.settings
640
- }, /*#__PURE__*/ React.createElement("label", {
641
- className: styles.setting
642
- }, /*#__PURE__*/ React.createElement("span", {
643
- className: styles.settingLabel
644
- }, "Model"), /*#__PURE__*/ React.createElement("div", {
645
- className: styles.selectWrapper
646
- }, getProviderIcon(settingsProvider), /*#__PURE__*/ React.createElement("select", {
647
- className: styles.select,
648
- disabled: !settingsProvider,
649
- onChange: (event)=>setSelectedModel(event.target.value),
650
- value: selectedModel
651
- }, !settingsProvider && /*#__PURE__*/ React.createElement("option", {
652
- value: ""
653
- }, "Select provider in account settings"), settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ React.createElement("option", {
654
- key: model.value,
655
- value: model.value
656
- }, model.label)))))), /*#__PURE__*/ React.createElement("button", {
657
- className: styles.chatButton,
658
- disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
659
- onClick: ()=>void handleSubmit(),
660
- type: "button"
661
- }, /*#__PURE__*/ React.createElement(Send, {
662
- width: 14,
663
- height: 14
664
- }), isLoading ? "Sending..." : "Send")), /*#__PURE__*/ React.createElement(ActionToast, {
665
- apiRoute: config.routes.api,
666
- appliedProposalIndexes: appliedProposalIndexes,
667
- description: response,
668
- error: error,
669
- getViewURL: getProposalViewURL,
670
- isApplying: isApplying,
671
- onDismiss: ()=>{
672
- setAppliedProposalIndexes([]);
673
- setError("");
674
- setProposals([]);
675
- setResponse("");
676
- setTokenUsage(null);
677
- clearInput();
678
- },
679
- onDismissError: ()=>{
680
- setError("");
681
- },
682
- onApply: (proposal, _index)=>void handleApplyProposal(proposal),
683
- proposals: proposals,
684
- tokenUsage: tokenUsage
685
- })), /*#__PURE__*/ React.createElement(RecentChangesList, {
686
- allChangesURL: allChangesURL,
687
- changes: appliedChanges
688
- }));
596
+ return /*#__PURE__*/ _jsxs("div", {
597
+ className: styles.chatLayout,
598
+ children: [
599
+ /*#__PURE__*/ _jsxs("div", {
600
+ className: styles.chat,
601
+ children: [
602
+ /*#__PURE__*/ _jsx("div", {
603
+ className: styles.chatHeader,
604
+ children: /*#__PURE__*/ _jsxs("div", {
605
+ children: [
606
+ /*#__PURE__*/ _jsx("h2", {
607
+ className: styles.chatTitle,
608
+ children: "AI Assistant"
609
+ }),
610
+ /*#__PURE__*/ _jsx("p", {
611
+ className: styles.chatDescription,
612
+ children: "Ask AI to draft, improve, or analyze content."
613
+ })
614
+ ]
615
+ })
616
+ }),
617
+ /*#__PURE__*/ _jsxs("div", {
618
+ className: styles.chatInputRow,
619
+ children: [
620
+ /*#__PURE__*/ _jsx("div", {
621
+ className: styles.chatInputSurface,
622
+ children: /*#__PURE__*/ _jsx("div", {
623
+ className: styles.chatInput,
624
+ contentEditable: true,
625
+ "data-placeholder": "Ask AI...",
626
+ onInput: (event)=>{
627
+ const value = event.currentTarget.innerText;
628
+ setPrompt(value);
629
+ if (!value.trim()) {
630
+ setMentions([]);
631
+ }
632
+ updateMentionState(getTextBeforeCaret(event.currentTarget));
633
+ },
634
+ onKeyDown: (event)=>{
635
+ if (event.key === "ArrowDown" && mentionRange && mentionSuggestions.length > 0) {
636
+ const firstOption = mentionPopoverRef.current?.querySelector("button");
637
+ if (firstOption) {
638
+ event.preventDefault();
639
+ firstOption.focus();
640
+ return;
641
+ }
642
+ }
643
+ if (event.key === "Enter" && !event.shiftKey) {
644
+ event.preventDefault();
645
+ void handleSubmit();
646
+ }
647
+ },
648
+ ref: editorRef,
649
+ role: "textbox",
650
+ suppressContentEditableWarning: true
651
+ })
652
+ }),
653
+ mentionRange && /*#__PURE__*/ _jsx(MentionPopover, {
654
+ containerRef: mentionPopoverRef,
655
+ onSelect: insertMention,
656
+ style: mentionPopoverPosition ? {
657
+ left: `${mentionPopoverPosition.left}px`,
658
+ top: `${mentionPopoverPosition.top}px`
659
+ } : undefined,
660
+ suggestions: mentionSuggestions
661
+ })
662
+ ]
663
+ }),
664
+ /*#__PURE__*/ _jsxs("div", {
665
+ className: styles.chatActionsRow,
666
+ children: [
667
+ /*#__PURE__*/ _jsx("div", {
668
+ className: styles.settings,
669
+ children: /*#__PURE__*/ _jsxs("label", {
670
+ className: styles.setting,
671
+ children: [
672
+ /*#__PURE__*/ _jsx("span", {
673
+ className: styles.settingLabel,
674
+ children: "Model"
675
+ }),
676
+ /*#__PURE__*/ _jsxs("div", {
677
+ className: styles.selectWrapper,
678
+ children: [
679
+ getProviderIcon(settingsProvider),
680
+ /*#__PURE__*/ _jsxs("select", {
681
+ className: styles.select,
682
+ disabled: !settingsProvider,
683
+ onChange: (event)=>setSelectedModel(event.target.value),
684
+ value: selectedModel,
685
+ children: [
686
+ !settingsProvider && /*#__PURE__*/ _jsx("option", {
687
+ value: "",
688
+ children: "Select provider in account settings"
689
+ }),
690
+ settingsProvider && aiModelConfig.providers[settingsProvider].map((model)=>/*#__PURE__*/ _jsx("option", {
691
+ value: model.value,
692
+ children: model.label
693
+ }, model.value))
694
+ ]
695
+ })
696
+ ]
697
+ })
698
+ ]
699
+ })
700
+ }),
701
+ /*#__PURE__*/ _jsxs("button", {
702
+ className: styles.chatButton,
703
+ disabled: !prompt.trim() || !settingsProvider || !selectedModel || isLoading,
704
+ onClick: ()=>void handleSubmit(),
705
+ type: "button",
706
+ children: [
707
+ /*#__PURE__*/ _jsx(Send, {
708
+ width: 14,
709
+ height: 14
710
+ }),
711
+ isLoading ? "Sending..." : "Send"
712
+ ]
713
+ })
714
+ ]
715
+ }),
716
+ /*#__PURE__*/ _jsx(ActionToast, {
717
+ apiRoute: config.routes.api,
718
+ appliedProposalIndexes: appliedProposalIndexes,
719
+ description: response,
720
+ error: error,
721
+ getViewURL: getProposalViewURL,
722
+ isApplying: isApplying,
723
+ onDismiss: ()=>{
724
+ setAppliedProposalIndexes([]);
725
+ setError("");
726
+ setProposals([]);
727
+ setResponse("");
728
+ setTokenUsage(null);
729
+ clearInput();
730
+ },
731
+ onDismissError: ()=>{
732
+ setError("");
733
+ },
734
+ onApply: (proposal, _index)=>void handleApplyProposal(proposal),
735
+ proposals: proposals,
736
+ tokenUsage: tokenUsage
737
+ })
738
+ ]
739
+ }),
740
+ /*#__PURE__*/ _jsx(RecentChangesList, {
741
+ allChangesURL: allChangesURL,
742
+ changes: appliedChanges
743
+ })
744
+ ]
745
+ });
689
746
  };
690
747
  export default AIInput;
package/dist/components/APIKeyField.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
3
  import { useField } from "@payloadcms/ui";
3
4
  const getFieldClassName = ({ className, isReadOnly, showError })=>[
4
5
  "field-type",
@@ -14,33 +15,49 @@ const APIKeyField = ({ field, inputRef, path, readOnly })=>{
14
15
  const fieldID = `field-${path.replace(/\./g, "__")}`;
15
16
  const isReadOnly = readOnly || disabled || field.admin?.disabled;
16
17
  const handleChange = (event)=>setValue(event.target.value);
17
- return /*#__PURE__*/ React.createElement("div", {
18
+ return /*#__PURE__*/ _jsxs("div", {
18
19
  className: getFieldClassName({
19
20
  className: field.admin?.className,
20
21
  isReadOnly,
21
22
  showError
22
- })
23
- }, /*#__PURE__*/ React.createElement("label", {
24
- className: "field-label",
25
- htmlFor: fieldID
26
- }, field?.label?.toString(), field.required ? /*#__PURE__*/ React.createElement("span", {
27
- className: "required"
28
- }, "*") : null), /*#__PURE__*/ React.createElement("div", {
29
- className: "field-type__wrap"
30
- }, showError && errorMessage ? /*#__PURE__*/ React.createElement("div", {
31
- className: "field-error"
32
- }, errorMessage) : null, /*#__PURE__*/ React.createElement("input", {
33
- autoComplete: "new-password",
34
- disabled: isReadOnly,
35
- id: fieldID,
36
- name: path,
37
- onChange: handleChange,
38
- placeholder: field.admin?.placeholder?.toString(),
39
- ref: inputRef,
40
- type: "password",
41
- value: value || ""
42
- }), /*#__PURE__*/ React.createElement("div", {
43
- className: "field-description"
44
- }, field.admin?.description?.toString())));
23
+ }),
24
+ children: [
25
+ /*#__PURE__*/ _jsxs("label", {
26
+ className: "field-label",
27
+ htmlFor: fieldID,
28
+ children: [
29
+ field?.label?.toString(),
30
+ field.required ? /*#__PURE__*/ _jsx("span", {
31
+ className: "required",
32
+ children: "*"
33
+ }) : null
34
+ ]
35
+ }),
36
+ /*#__PURE__*/ _jsxs("div", {
37
+ className: "field-type__wrap",
38
+ children: [
39
+ showError && errorMessage ? /*#__PURE__*/ _jsx("div", {
40
+ className: "field-error",
41
+ children: errorMessage
42
+ }) : null,
43
+ /*#__PURE__*/ _jsx("input", {
44
+ autoComplete: "new-password",
45
+ disabled: isReadOnly,
46
+ id: fieldID,
47
+ name: path,
48
+ onChange: handleChange,
49
+ placeholder: field.admin?.placeholder?.toString(),
50
+ ref: inputRef,
51
+ type: "password",
52
+ value: value || ""
53
+ }),
54
+ /*#__PURE__*/ _jsx("div", {
55
+ className: "field-description",
56
+ children: field.admin?.description?.toString()
57
+ })
58
+ ]
59
+ })
60
+ ]
61
+ });
45
62
  };
46
63
  export default APIKeyField;