payload-richtext-tiptap 0.0.45 → 0.0.47

package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js

@@ -2,20 +2,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCompletion } from "ai/react";
 import { ArrowUpCircle, Sparkles } from "lucide-react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
 import Markdown from "react-markdown";
 import TextareaAutosize from "react-textarea-autosize";
 import { useLocale } from "@payloadcms/ui/providers/Locale";
 import { getPrevText } from "../../../lib/utils/index.js";
 import { isRTL } from "../../../lib/utils/isRtl.js";
 import CrazySpinner from "../../ui/crazy-spinner.js";
+import { DropdownButton } from "../../ui/Dropdown/Dropdown.js";
+import { Icon } from "../../ui/Icon.js";
 import { ScrollArea } from "../../ui/scroll-area.js";
 import { Surface } from "../../ui/Surface.js";
 import { Toolbar } from "../../ui/Toolbar.js";
-export const AICommandPanel = ({ editor, onOpenChange, userPrompt, ...restProps })=>{
+import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
+export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange, userPrompt, items, ...restProps }, ref)=>{
     const [inputValue, setInputValue] = useState(userPrompt ?? "");
     const { code } = useLocale();
     const { view } = editor;
+    const scrollContainer = useRef(null);
+    const activeItem = useRef(null);
+    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);
+    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
     const editorNode = view.dom;
     const boundigClient = editorNode.getBoundingClientRect();
     const inputRef = useRef(null);
@@ -90,79 +97,198 @@ export const AICommandPanel = ({ editor, onOpenChange, userPrompt, ...restProps
         completion,
         isLoading
     ]);
-    return /*#__PURE__*/ _jsx(Surface, {
-        className: `p-2 min-w-[20rem] flex  flex-col gap-2 `,
-        style: {
-            width: boundigClient?.width
-        },
-        children: /*#__PURE__*/ _jsxs(_Fragment, {
-            children: [
-                hasCompletion && /*#__PURE__*/ _jsx("div", {
-                    className: "flex  w-full",
-                    children: /*#__PURE__*/ _jsx(ScrollArea, {
-                        children: /*#__PURE__*/ _jsx("div", {
-                            className: "prose p-2 px-4 prose-sm",
-                            dir: isRTL(completion) ? "rtl" : "ltr",
-                            children: /*#__PURE__*/ _jsx(Markdown, {
-                                children: completion
-                            })
-                        })
-                    })
-                }),
-                isLoading && /*#__PURE__*/ _jsxs("div", {
-                    className: "flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500",
-                    style: {
-                        width: boundigClient?.width
-                    },
+    // Anytime the groups change, i.e. the user types to narrow it down, we want to
+    // reset the current selection to the first menu item
+    useEffect(()=>{
+        setSelectedGroupIndex(0);
+        setSelectedCommandIndex(0);
+    }, [
+        items
+    ]);
+    const selectItem = useCallback((groupIndex, commandIndex)=>{
+        const command = items[groupIndex].commands[commandIndex];
+        setInputValue(command.action(editor));
+    // props.command(command);
+    }, [
+        items,
+        editor
+    ]);
+    useImperativeHandle(ref, ()=>({
+            onKeyDown: ({ event })=>{
+                if (event.key === "ArrowDown") {
+                    if (!items.length) {
+                        return false;
+                    }
+                    const commands = items[selectedGroupIndex].commands;
+                    let newCommandIndex = selectedCommandIndex + 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (commands.length - 1 < newCommandIndex) {
+                        newCommandIndex = 0;
+                        newGroupIndex = selectedGroupIndex + 1;
+                    }
+                    if (items.length - 1 < newGroupIndex) {
+                        newGroupIndex = 0;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "ArrowUp") {
+                    if (!items.length) {
+                        return false;
+                    }
+                    let newCommandIndex = selectedCommandIndex - 1;
+                    let newGroupIndex = selectedGroupIndex;
+                    if (newCommandIndex < 0) {
+                        newGroupIndex = selectedGroupIndex - 1;
+                        newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;
+                    }
+                    if (newGroupIndex < 0) {
+                        newGroupIndex = items.length - 1;
+                        newCommandIndex = items[newGroupIndex].commands.length - 1;
+                    }
+                    setSelectedCommandIndex(newCommandIndex);
+                    setSelectedGroupIndex(newGroupIndex);
+                    return true;
+                }
+                if (event.key === "Enter") {
+                    if (!items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
+                        return false;
+                    }
+                    selectItem(selectedGroupIndex, selectedCommandIndex);
+                    return true;
+                }
+                return false;
+            }
+        }));
+    useEffect(()=>{
+        if (activeItem.current && scrollContainer.current) {
+            const offsetTop = activeItem.current.offsetTop;
+            const offsetHeight = activeItem.current.offsetHeight;
+            scrollContainer.current.scrollTop = offsetTop - offsetHeight;
+        }
+    }, [
+        selectedCommandIndex,
+        selectedGroupIndex
+    ]);
+    const createCommandClickHandler = useCallback((groupIndex, commandIndex)=>{
+        return ()=>{
+            selectItem(groupIndex, commandIndex);
+        };
+    }, [
+        selectItem
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(Surface, {
+                className: `p-2 min-w-[20rem] flex  flex-col gap-2 w-full`,
+                style: {
+                    width: boundigClient?.width
+                },
+                children: /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        /*#__PURE__*/ _jsx(Sparkles, {
-                            className: "mr-2 h-4 w-4 shrink-0  "
+                        hasCompletion && /*#__PURE__*/ _jsx("div", {
+                            className: "flex  w-full",
+                            children: /*#__PURE__*/ _jsx(ScrollArea, {
+                                className: "h-72 prose p-2 px-4 prose-sm w-full max-w-none",
+                                dir: isRTL(completion) ? "rtl" : "ltr",
+                                children: /*#__PURE__*/ _jsx(Markdown, {
+                                    className: "w-full",
+                                    children: completion
+                                })
+                            })
+                        }),
+                        isLoading && /*#__PURE__*/ _jsxs("div", {
+                            className: "flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500",
+                            style: {
+                                width: boundigClient?.width
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Sparkles, {
+                                    className: "mr-2 h-4 w-4 shrink-0  "
+                                }),
+                                "AI is thinking",
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "ml-2 mt-1",
+                                    children: /*#__PURE__*/ _jsx(CrazySpinner, {})
+                                })
+                            ]
                         }),
-                        "AI is thinking",
-                        /*#__PURE__*/ _jsx("div", {
-                            className: "ml-2 mt-1",
-                            children: /*#__PURE__*/ _jsx(CrazySpinner, {})
+                        !isLoading && /*#__PURE__*/ _jsx(_Fragment, {
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex justify-between items-center ",
+                                children: [
+                                    /*#__PURE__*/ _jsx(Sparkles, {
+                                        className: "mr-2 h-4 w-4 shrink-0 text-blue-500 "
+                                    }),
+                                    /*#__PURE__*/ _jsx(TextareaAutosize, {
+                                        ref: inputRef,
+                                        style: {
+                                            resize: "none"
+                                        },
+                                        className: "w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 ",
+                                        value: inputValue,
+                                        onChange: (e)=>{
+                                            editor.storage.aiCommand.userPrompt = e.target.value;
+                                            setInputValue(e.target.value);
+                                        },
+                                        placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
+                                        autoFocus: true,
+                                        // onFocus={() => {
+                                        //   addAIHighlight(editor)}}
+                                        onKeyDown: (e)=>{
+                                            if (e.key === "Enter") handleClick();
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(Toolbar.Button, {
+                                        // size="icon"
+                                        // className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150"
+                                        onClick: handleClick,
+                                        children: /*#__PURE__*/ _jsx(ArrowUpCircle, {})
+                                    })
+                                ]
+                            })
                         })
                     ]
-                }),
-                !isLoading && /*#__PURE__*/ _jsx(_Fragment, {
-                    children: /*#__PURE__*/ _jsxs("div", {
-                        className: "flex justify-between items-center ",
-                        children: [
-                            /*#__PURE__*/ _jsx(Sparkles, {
-                                className: "mr-2 h-4 w-4 shrink-0 text-blue-500 "
-                            }),
-                            /*#__PURE__*/ _jsx(TextareaAutosize, {
-                                ref: inputRef,
-                                style: {
-                                    resize: "none"
-                                },
-                                className: "w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 ",
-                                value: inputValue,
-                                onChange: (e)=>{
-                                    editor.storage.aiCommand.userPrompt = e.target.value;
-                                    setInputValue(e.target.value);
-                                },
-                                placeholder: hasCompletion ? "Tell AI what to do next" : "Ask AI to edit or generate...",
-                                autoFocus: true,
-                                // onFocus={() => {
-                                //   addAIHighlight(editor)}}
-                                onKeyDown: (e)=>{
-                                    if (e.key === "Enter") handleClick();
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx(Toolbar.Button, {
-                                // size="icon"
-                                // className="absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150"
-                                onClick: handleClick,
-                                children: /*#__PURE__*/ _jsx(ArrowUpCircle, {})
-                            })
-                        ]
-                    })
                 })
-            ]
-        })
+            }),
+            !isLoading && /*#__PURE__*/ _jsx(Surface, {
+                ref: scrollContainer,
+                className: "text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2",
+                children: /*#__PURE__*/ _jsx("div", {
+                    className: "grid grid-cols-1 gap-0.5",
+                    children: hasCompletion ? /*#__PURE__*/ _jsx(AISelectorCommands, {
+                        editor: editor,
+                        messages: completion,
+                        onSelect: (value, options)=>{
+                            console.log("VALUE", value, options);
+                            complete(value, {
+                                body: options
+                            });
+                        }
+                    }) : items.map((group, groupIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                            children: [
+                                /*#__PURE__*/ _jsx("div", {
+                                    className: "text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5",
+                                    children: group.title
+                                }, `${group.title}`),
+                                group.commands.map((command, commandIndex)=>/*#__PURE__*/ _jsxs(DropdownButton, {
+                                        isActive: selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex,
+                                        onClick: createCommandClickHandler(groupIndex, commandIndex),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Icon, {
+                                                icon: command.icon,
+                                                className: "mr-1"
+                                            }),
+                                            command.label
+                                        ]
+                                    }, `${command.label}`))
+                            ]
+                        }, `${group.title}-wrapper`))
+                })
+            })
+        ]
     });
-};
+});
 
 //# sourceMappingURL=AICommandPanel.js.map

package/dist/src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor, EditorContent, useEditor } from \"@tiptap/react\";\nimport StarterKit from \"@tiptap/starter-kit\";\n\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AIDraftSelectorCommands from \"../../menus/TextMenu/components/ai-draft-selector-commands.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\n\nexport type AICommandPanelProps = {\n  editor: Editor;\n  userPrompt?: string;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AICommandPanel = ({\n  editor,\n  onOpenChange,\n  userPrompt,\n  ...restProps\n}: AICommandPanelProps) => {\n  const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n  const { code } = useLocale();\n  const { view } = editor;\n\n  const editorNode = view.dom as HTMLElement;\n  const boundigClient = editorNode.getBoundingClientRect();\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\n  // });\n\n  const { completion, complete, isLoading } = useCompletion({\n    // id: \"novel\",\n    api: \"/api/generate\",\n    onResponse: (response) => {\n      if (response.status === 429) {\n        console.log(\"You have reached your request limit for the day.\");\n\n        return;\n      }\n    },\n\n    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion) {\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code, inputValue]);\n\n  useEffect(() => {\n    if (userPrompt) setInputValue(userPrompt);\n  }, [userPrompt]);\n  useEffect(() => {\n    editor.storage.aiCommand.completion = completion;\n    // if (!isLoading && completion) {\n    // const selection = editor.state.selection;\n    // editor\n    //   .chain()\n    //   .focus()\n    //   .insertContentAt(selection.to - 1, completion)\n    //   .insertContentAt(selection.to, \" \")\n    //   .run();\n\n    // }\n  }, [completion, isLoading]);\n\n  return (\n    <Surface\n      className={`p-2 min-w-[20rem] flex  flex-col gap-2 `}\n      style={{\n        width: boundigClient?.width,\n      }}\n    >\n      <>\n        {hasCompletion && (\n          <div className=\"flex  w-full\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div\n            className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n            style={{\n              width: boundigClient?.width,\n            }}\n          >\n            <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n            AI is thinking\n            <div className=\"ml-2 mt-1\">\n              <CrazySpinner />\n            </div>\n          </div>\n        )}\n\n        {!isLoading && (\n          <>\n            <div className=\"flex justify-between items-center \">\n              {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n              <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n              <TextareaAutosize\n                ref={inputRef}\n                style={{ resize: \"none\" }}\n                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n                value={inputValue}\n                onChange={(e) => {\n                  editor.storage.aiCommand.userPrompt = e.target.value;\n\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => {\n                //   addAIHighlight(editor)}}\n\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleClick();\n                }}\n              />\n              <Toolbar.Button\n                // size=\"icon\"\n\n                // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                onClick={handleClick}\n              >\n                <ArrowUpCircle />\n              </Toolbar.Button>\n            </div>\n            {/* {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AIDraftSelectorCommands\n                editor={editor}\n                onSelect={(value) => {\n                  setInputValue(value);\n                  inputRef.current.focus();\n                }}\n              />\n            )} */}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","useCallback","useEffect","useRef","useState","Markdown","TextareaAutosize","useLocale","getPrevText","isRTL","CrazySpinner","ScrollArea","Surface","Toolbar","AICommandPanel","editor","onOpenChange","userPrompt","restProps","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","storage","aiCommand","className","style","width","div","dir","ref","resize","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCompletion } from \"ai/react\";\nimport { ArrowUpCircle, Sparkles } from \"lucide-react\";\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useRef,\n  useState,\n} from \"react\";\nimport Markdown from \"react-markdown\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\n\nimport {\n  Command,\n  Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { DropdownButton } from \"../../ui/Dropdown/Dropdown.js\";\nimport { Icon } from \"../../ui/Icon.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\n\nexport type AICommandPanelProps = {\n  editor: Editor;\n  userPrompt?: string;\n  onOpenChange: (value: boolean) => void;\n  items: Group[];\n};\n\nexport const AICommandPanel = forwardRef(\n  (\n    {\n      editor,\n      onOpenChange,\n      userPrompt,\n      items,\n      ...restProps\n    }: AICommandPanelProps,\n    ref\n  ) => {\n    const [inputValue, setInputValue] = useState(userPrompt ?? \"\");\n    const { code } = useLocale();\n    const { view } = editor;\n    const scrollContainer = useRef<HTMLDivElement>(null);\n    const activeItem = useRef<HTMLButtonElement>(null);\n    const [selectedGroupIndex, setSelectedGroupIndex] = useState(0);\n    const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);\n\n    const editorNode = view.dom as HTMLElement;\n    const boundigClient = editorNode.getBoundingClientRect();\n    const inputRef = useRef<HTMLTextAreaElement>(null);\n\n    // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n    //   // id: \"novel\",\n    //   api: \"/api/assistant\",\n    //   onResponse: (response) => {\n    //     if (response.status === 429) {\n    //       toast.error(\"You have reached your request limit for the day.\");\n    //       return;\n    //     }\n    //   },\n    //   onError: (e) => {\n    //     toast.error(e.message);\n    //   },\n    // });\n\n    const { completion, complete, isLoading } = useCompletion({\n      // id: \"novel\",\n      api: \"/api/generate\",\n      onResponse: (response) => {\n        if (response.status === 429) {\n          console.log(\"You have reached your request limit for the day.\");\n\n          return;\n        }\n      },\n\n      onError: (e) => {\n        console.log(\"ERROR\", e.message);\n      },\n    });\n\n    const hasCompletion = completion.length > 0;\n    const handleClick = useCallback(() => {\n      if (completion) {\n        return complete(completion, {\n          body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n        }).then(() => setInputValue(\"\"));\n      }\n      const text = getPrevText(editor, { chars: 5000 });\n\n      complete(text, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }, [code, inputValue]);\n\n    useEffect(() => {\n      if (userPrompt) setInputValue(userPrompt);\n    }, [userPrompt]);\n    useEffect(() => {\n      editor.storage.aiCommand.completion = completion;\n      // if (!isLoading && completion) {\n      // const selection = editor.state.selection;\n      // editor\n      //   .chain()\n      //   .focus()\n      //   .insertContentAt(selection.to - 1, completion)\n      //   .insertContentAt(selection.to, \" \")\n      //   .run();\n\n      // }\n    }, [completion, isLoading]);\n\n    // Anytime the groups change, i.e. the user types to narrow it down, we want to\n    // reset the current selection to the first menu item\n    useEffect(() => {\n      setSelectedGroupIndex(0);\n      setSelectedCommandIndex(0);\n    }, [items]);\n\n    const selectItem = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        const command = items[groupIndex].commands[commandIndex];\n\n        setInputValue(command.action(editor));\n        // props.command(command);\n      },\n      [items, editor]\n    );\n\n    useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: { event: React.KeyboardEvent }) => {\n        if (event.key === \"ArrowDown\") {\n          if (!items.length) {\n            return false;\n          }\n\n          const commands = items[selectedGroupIndex].commands;\n\n          let newCommandIndex = selectedCommandIndex + 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (commands.length - 1 < newCommandIndex) {\n            newCommandIndex = 0;\n            newGroupIndex = selectedGroupIndex + 1;\n          }\n\n          if (items.length - 1 < newGroupIndex) {\n            newGroupIndex = 0;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"ArrowUp\") {\n          if (!items.length) {\n            return false;\n          }\n\n          let newCommandIndex = selectedCommandIndex - 1;\n          let newGroupIndex = selectedGroupIndex;\n\n          if (newCommandIndex < 0) {\n            newGroupIndex = selectedGroupIndex - 1;\n            newCommandIndex = items[newGroupIndex]?.commands.length - 1 || 0;\n          }\n\n          if (newGroupIndex < 0) {\n            newGroupIndex = items.length - 1;\n            newCommandIndex = items[newGroupIndex].commands.length - 1;\n          }\n\n          setSelectedCommandIndex(newCommandIndex);\n          setSelectedGroupIndex(newGroupIndex);\n\n          return true;\n        }\n\n        if (event.key === \"Enter\") {\n          if (\n            !items.length ||\n            selectedGroupIndex === -1 ||\n            selectedCommandIndex === -1\n          ) {\n            return false;\n          }\n\n          selectItem(selectedGroupIndex, selectedCommandIndex);\n\n          return true;\n        }\n\n        return false;\n      },\n    }));\n\n    useEffect(() => {\n      if (activeItem.current && scrollContainer.current) {\n        const offsetTop = activeItem.current.offsetTop;\n        const offsetHeight = activeItem.current.offsetHeight;\n\n        scrollContainer.current.scrollTop = offsetTop - offsetHeight;\n      }\n    }, [selectedCommandIndex, selectedGroupIndex]);\n\n    const createCommandClickHandler = useCallback(\n      (groupIndex: number, commandIndex: number) => {\n        return () => {\n          selectItem(groupIndex, commandIndex);\n        };\n      },\n      [selectItem]\n    );\n\n    return (\n      <>\n        <Surface\n          className={`p-2 min-w-[20rem] flex  flex-col gap-2 w-full`}\n          style={{\n            width: boundigClient?.width,\n          }}\n        >\n          <>\n            {hasCompletion && (\n              <div className=\"flex  w-full\">\n                <ScrollArea\n                  className=\"h-72 prose p-2 px-4 prose-sm w-full max-w-none\"\n                  dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n                >\n                  <Markdown className=\"w-full\">{completion}</Markdown>\n                </ScrollArea>\n              </div>\n            )}\n\n            {isLoading && (\n              <div\n                className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\"\n                style={{\n                  width: boundigClient?.width,\n                }}\n              >\n                <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n                AI is thinking\n                <div className=\"ml-2 mt-1\">\n                  <CrazySpinner />\n                </div>\n              </div>\n            )}\n\n            {!isLoading && (\n              <>\n                <div className=\"flex justify-between items-center \">\n                  {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n                  <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n                  <TextareaAutosize\n                    ref={inputRef}\n                    style={{ resize: \"none\" }}\n                    className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none outline-none border-0 \"\n                    value={inputValue}\n                    onChange={(e) => {\n                      editor.storage.aiCommand.userPrompt = e.target.value;\n\n                      setInputValue(e.target.value);\n                    }}\n                    placeholder={\n                      hasCompletion\n                        ? \"Tell AI what to do next\"\n                        : \"Ask AI to edit or generate...\"\n                    }\n                    autoFocus\n                    // onFocus={() => {\n                    //   addAIHighlight(editor)}}\n\n                    onKeyDown={(e) => {\n                      if (e.key === \"Enter\") handleClick();\n                    }}\n                  />\n                  <Toolbar.Button\n                    // size=\"icon\"\n\n                    // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                    onClick={handleClick}\n                  >\n                    <ArrowUpCircle />\n                  </Toolbar.Button>\n                </div>\n              </>\n            )}\n          </>\n        </Surface>\n        {!isLoading && (\n          <Surface\n            ref={scrollContainer}\n            className=\"text-black max-h-[min(80vh,24rem)] overflow-auto flex-wrap mb-8 p-2\"\n          >\n            <div className=\"grid grid-cols-1 gap-0.5\">\n              {hasCompletion ? (\n                <AISelectorCommands\n                  editor={editor}\n                  messages={completion}\n                  onSelect={(value, options) => {\n                    console.log(\"VALUE\", value, options);\n                    complete(value, { body: options });\n                  }}\n                />\n              ) : (\n                items.map((group, groupIndex: number) => (\n                  <React.Fragment key={`${group.title}-wrapper`}>\n                    <div\n                      className=\"text-neutral-500 text-[0.65rem] col-[1/-1] mx-2 mt-4 font-semibold tracking-wider select-none uppercase first:mt-0.5\"\n                      key={`${group.title}`}\n                    >\n                      {group.title}\n                    </div>\n                    {group.commands.map(\n                      (command: Command, commandIndex: number) => (\n                        <DropdownButton\n                          key={`${command.label}`}\n                          isActive={\n                            selectedGroupIndex === groupIndex &&\n                            selectedCommandIndex === commandIndex\n                          }\n                          onClick={createCommandClickHandler(\n                            groupIndex,\n                            commandIndex\n                          )}\n                        >\n                          <Icon icon={command.icon} className=\"mr-1\" />\n                          {command.label}\n                        </DropdownButton>\n                      )\n                    )}\n                  </React.Fragment>\n                ))\n              )}\n            </div>\n          </Surface>\n        )}\n      </>\n    );\n  }\n);\n"],"names":["useCompletion","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","getPrevText","isRTL","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","AISelectorCommands","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","storage","aiCommand","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","resize","value","onChange","target","placeholder","autoFocus","Button","onClick","messages","onSelect","options","map","group","Fragment","title","isActive","icon","label"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js

@@ -143,10 +143,12 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                             },
                             completion: completion
                         }) : /*#__PURE__*/ _jsx(AISelectorCommands, {
+                            messages: completion,
                             editor: editor,
-                            onSelect: (value)=>{
-                                setInputValue(value);
-                                inputRef.current.focus();
+                            onSelect: (value, options)=>{
+                                complete(value, {
+                                    body: options
+                                });
                             }
                         })
                     ]

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n  const { view } = editor;\n\n  const editorNode = view.dom as HTMLElement;\n  const boundigClient = editorNode.getBoundingClientRect();\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\n  // });\n\n  const { completion, complete, isLoading } = useCompletion({\n    // id: \"novel\",\n    api: \"/api/generate\",\n    onResponse: (response) => {\n      if (response.status === 429) {\n        console.log(\"You have reached your request limit for the day.\");\n\n        return;\n      }\n    },\n    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion) {\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code, inputValue]);\n\n  return (\n    <Surface\n      className={`p-2 min-w-[20rem] `}\n      style={{\n        width: boundigClient?.width,\n      }}\n    >\n      <>\n        {hasCompletion && (\n          <div className=\"flex  w-full\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\">\n            <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n            AI is thinking\n            <div className=\"ml-2 mt-1\">\n              <CrazySpinner />\n            </div>\n          </div>\n        )}\n\n        {!isLoading && (\n          <>\n            <div className=\"flex justify-between items-center\">\n              {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n              <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n              <TextareaAutosize\n                ref={inputRef}\n                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => {\n                //   addAIHighlight(editor)}}\n\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleClick();\n                }}\n              />\n              <Toolbar.Button\n                // size=\"icon\"\n\n                // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                onClick={handleClick}\n              >\n                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                editor={editor}\n                onSelect={(value) => {\n                  setInputValue(value);\n                  inputRef.current.focus();\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","className","style","width","div","dir","ref","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","onSelect","current"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"sourcesContent":["\"use client\";\n\nimport { useLocale } from \"@payloadcms/ui/providers/Locale\";\nimport { Editor } from \"@tiptap/react\";\nimport { useCompletion } from \"ai/react\";\nimport { ArrowRight, Sparkles } from \"lucide-react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport TextareaAutosize from \"react-textarea-autosize\";\n\nimport Markdown from \"react-markdown\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport { isRTL } from \"../../../lib/utils/isRtl.js\";\nimport AICompletionCommands from \"../../menus/TextMenu/components/ai-completion-command.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.js\";\nimport { Surface } from \"../../ui/Surface.js\";\nimport { Toolbar } from \"../../ui/Toolbar.js\";\nimport CrazySpinner from \"../../ui/crazy-spinner.js\";\nimport { ScrollArea } from \"../../ui/scroll-area.js\";\nexport type AIEditorPanelProps = {\n  editor: Editor;\n  onOpenChange: (value: boolean) => void;\n};\n\nexport const AIEditorPanel = ({ editor, onOpenChange }: AIEditorPanelProps) => {\n  const [inputValue, setInputValue] = useState(\"\");\n  const { code } = useLocale();\n  const { view } = editor;\n\n  const editorNode = view.dom as HTMLElement;\n  const boundigClient = editorNode.getBoundingClientRect();\n  const inputRef = useRef<HTMLTextAreaElement>(null);\n\n  // const { status, messages, input, submitMessage, handleInputChange } = useAssistant({\n  //   // id: \"novel\",\n  //   api: \"/api/assistant\",\n  //   onResponse: (response) => {\n  //     if (response.status === 429) {\n  //       toast.error(\"You have reached your request limit for the day.\");\n  //       return;\n  //     }\n  //   },\n  //   onError: (e) => {\n  //     toast.error(e.message);\n  //   },\n  // });\n\n  const { completion, complete, isLoading } = useCompletion({\n    // id: \"novel\",\n    api: \"/api/generate\",\n    onResponse: (response) => {\n      if (response.status === 429) {\n        console.log(\"You have reached your request limit for the day.\");\n\n        return;\n      }\n    },\n    onError: (e) => {\n      console.log(\"ERROR\", e.message);\n    },\n  });\n\n  const hasCompletion = completion.length > 0;\n  const handleClick = useCallback(() => {\n    if (completion) {\n      return complete(completion, {\n        body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n      }).then(() => setInputValue(\"\"));\n    }\n    const text = getPrevText(editor, { chars: 5000 });\n\n    complete(text, {\n      body: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n    }).then(() => setInputValue(\"\"));\n  }, [code, inputValue]);\n\n  return (\n    <Surface\n      className={`p-2 min-w-[20rem] `}\n      style={{\n        width: boundigClient?.width,\n      }}\n    >\n      <>\n        {hasCompletion && (\n          <div className=\"flex  w-full\">\n            <ScrollArea>\n              <div\n                className=\"prose p-2 px-4 prose-sm\"\n                dir={isRTL(completion) ? \"rtl\" : \"ltr\"}\n              >\n                <Markdown>{completion}</Markdown>\n              </div>\n            </ScrollArea>\n          </div>\n        )}\n\n        {isLoading && (\n          <div className=\"flex h-12 w-full items-center px-4 text-sm font-medium text-muted-foreground text-blue-500\">\n            <Sparkles className=\"mr-2 h-4 w-4 shrink-0  \" />\n            AI is thinking\n            <div className=\"ml-2 mt-1\">\n              <CrazySpinner />\n            </div>\n          </div>\n        )}\n\n        {!isLoading && (\n          <>\n            <div className=\"flex justify-between items-center\">\n              {/* <CommandInput\n                value={inputValue}\n                onValueChange={setInputValue}\n                autoFocus\n                placeholder={\n                  hasCompletion ? 'Tell AI what to do next' : 'Ask AI to edit or generate...'\n                }\n                // onFocus={() => addAIHighlight(editor)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter') handleClick()\n                }}\n              /> */}\n              <Sparkles className=\"mr-2 h-4 w-4 shrink-0 text-blue-500 \" />\n              <TextareaAutosize\n                ref={inputRef}\n                className=\"w-full p-2 text-black bg-white  rounded dark:bg-black dark:text-white focus:outline-none\"\n                value={inputValue}\n                onChange={(e) => {\n                  setInputValue(e.target.value);\n                }}\n                placeholder={\n                  hasCompletion\n                    ? \"Tell AI what to do next\"\n                    : \"Ask AI to edit or generate...\"\n                }\n                autoFocus\n                // onFocus={() => {\n                //   addAIHighlight(editor)}}\n\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\") handleClick();\n                }}\n              />\n              <Toolbar.Button\n                // size=\"icon\"\n\n                // className=\"absolute right-2 top-1/2 h-6 w-6 -translate-y-1/2 rounded-full  bg-zinc-100 hover:bg-zinc-150\"\n                onClick={handleClick}\n              >\n                <ArrowRight />\n              </Toolbar.Button>\n            </div>\n            {hasCompletion ? (\n              <AICompletionCommands\n                editor={editor}\n                onDiscard={() => {\n                  editor.chain().unsetHighlight().focus().run();\n                  onOpenChange(false);\n                }}\n                completion={completion}\n              />\n            ) : (\n              <AISelectorCommands\n                messages={completion}\n                editor={editor}\n                onSelect={(value, options) => {\n                  complete(value, { body: options });\n                }}\n              />\n            )}\n          </>\n        )}\n      </>\n    </Surface>\n  );\n};\n"],"names":["useLocale","useCompletion","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","Markdown","getPrevText","isRTL","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","completion","complete","isLoading","api","onResponse","response","status","console","log","onError","e","message","hasCompletion","length","handleClick","body","option","command","language","then","text","chars","className","style","width","div","dir","ref","value","onChange","target","placeholder","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","unsetHighlight","focus","run","messages","onSelect","options"],"mappings":"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"}

package/dist/src/styles.css

@@ -1813,6 +1813,10 @@ select {
   height: 1.5rem;
 }
 
+.h-72 {
+  height: 18rem;
+}
+
 .h-8 {
   height: 2rem;
 }
@@ -1973,6 +1977,10 @@ select {
   max-width: 4rem;
 }
 
+.max-w-none {
+  max-width: none;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }