npm - payload-richtext-tiptap - Versions diffs - 0.0.137 → 0.0.139 - Mend

payload-richtext-tiptap 0.0.137 → 0.0.139

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 (74) hide show

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

@@ -1,24 +1,23 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useAssistant } from '@ai-sdk/react';
-import { ArrowUpCircle, Sparkles } from "lucide-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 i18next from "i18next";
-import { extractMarkdown } from "../../../lib/extract.js";
-import { getPrevText } from "../../../lib/utils/index.js";
-import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.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";
-import { checkJsonCompletion, formatCompletion } from "../AIEditorPanel/utils.js";
+import { ArrowUpCircle, Sparkles } from 'lucide-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 { experimental_useObject as useObject } from '@ai-sdk/react';
+import i18next from 'i18next';
+import { TiptapSchema } from '../../../lib/tiptapSchema.js';
+import AISelectorCommands from '../../menus/TextMenu/components/ai-selector-commands.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';
+import { useExtractMarkdown } from '../AIEditorPanel/markdown.hook.js';
 export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange, userPrompt, items, ...restProps }, ref)=>{
-    const [inputValue, setInputValue] = useState(userPrompt ?? "");
+    const [inputValue, setInputValue] = useState(userPrompt ?? '');
     const { code } = useLocale();
     const { view } = editor;
     const scrollContainer = useRef(null);
@@ -28,49 +27,40 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
     const editorNode = view.dom;
     const boundigClient = editorNode.getBoundingClientRect();
     const inputRef = useRef(null);
-    const { status, messages, append, input, submitMessage, handleInputChange } = useAssistant({
-        api: '/api/generate'
+    const { object, submit, isLoading } = useObject({
+        api: '/api/generate',
+        schema: TiptapSchema
     });
-    const isLoading = status === 'in_progress';
-    const assistantMessages = messages?.filter((message)=>{
-        return message?.role === 'assistant';
-    });
-    const completion = [
-        ...assistantMessages
-    ]?.pop()?.content ?? "";
-    const hasCompletion = completion.length > 0;
+    const { markdown } = useExtractMarkdown(object);
+    const hasCompletion = Boolean(object);
     const handleClick = useCallback(()=>{
-        const editorSelection = editor.state.selection.content().content.toJSON();
-        if (completion) {
-            return append({
-                role: 'user',
-                content: completion
-            }, {
-                data: {
-                    option: "zap",
+        if (object) {
+            submit({
+                prompt: '',
+                body: {
+                    option: 'zap',
                     command: inputValue,
-                    language: code ?? "en"
+                    language: code ?? 'en',
+                    selection: object
                 }
-            }).then(()=>setInputValue(""));
+            });
+            setInputValue('');
+            return;
         }
-        const text = getPrevText(editor, {
-            chars: 5000
-        });
-        append({
-            role: "user",
-            content: text
-        }, {
-            data: {
-                option: "zap",
-                command: (editor.storage.aiCommand.title ? "Context Title:" + editor.storage.aiCommand.title + ";\n" : "") + (editor.storage.aiCommand.language ? "Context language:" + editor.storage.aiCommand.language + ";\n" : "") + inputValue,
-                language: editor.storage.aiCommand.language ?? code ?? "en",
-                selection: editorSelection
+        submit({
+            prompt: '',
+            body: {
+                option: 'zap',
+                command: inputValue,
+                language: code ?? 'en'
             }
-        }).then(()=>setInputValue(""));
+        });
+        setInputValue('');
     }, [
         code,
         inputValue,
-        completion
+        object,
+        submit
     ]);
     useEffect(()=>{
         if (userPrompt) setInputValue(userPrompt);
@@ -78,15 +68,13 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
         userPrompt
     ]);
     useEffect(()=>{
-        if (!isLoading && hasCompletion) {
-            editor.storage.aiCommand.completion = completion;
+        if (hasCompletion) {
+            editor.storage.aiCommand.completion = object;
         }
     }, [
-        completion,
+        object,
         isLoading
     ]);
-    // 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);
@@ -96,14 +84,13 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
     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 (event.key === 'ArrowDown') {
                     if (!items.length) {
                         return false;
                     }
@@ -121,7 +108,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                     setSelectedGroupIndex(newGroupIndex);
                     return true;
                 }
-                if (event.key === "ArrowUp") {
+                if (event.key === 'ArrowUp') {
                     if (!items.length) {
                         return false;
                     }
@@ -139,7 +126,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                     setSelectedGroupIndex(newGroupIndex);
                     return true;
                 }
-                if (event.key === "Enter") {
+                if (event.key === 'Enter') {
                     if (!items.length || selectedGroupIndex === -1 || selectedCommandIndex === -1) {
                         return false;
                     }
@@ -169,22 +156,19 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Surface, {
-                className: `p-2 min-w-[20rem] flex  flex-col gap-2 w-full ${hasCompletion ? "-mt-72" : ""}`,
+                className: `p-2 min-w-[20rem] flex  flex-col gap-2 w-full ${hasCompletion ? '-mt-72' : ''}`,
                 style: {
                     width: boundigClient?.width
                 },
                 children: /*#__PURE__*/ _jsxs(_Fragment, {
                     children: [
-                        hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true) && /*#__PURE__*/ _jsx("div", {
+                        markdown && /*#__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",
+                                className: "prose p-2 px-4 prose-sm",
                                 dir: i18next.dir(),
                                 children: /*#__PURE__*/ _jsx(Markdown, {
-                                    children: checkJsonCompletion(completion) ? extractMarkdown({
-                                        type: 'doc',
-                                        content: formatCompletion(completion)
-                                    }) : completion
+                                    children: markdown
                                 })
                             })
                         }),
@@ -214,7 +198,7 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                                     /*#__PURE__*/ _jsx(TextareaAutosize, {
                                         ref: inputRef,
                                         style: {
-                                            resize: "none"
+                                            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,
@@ -222,17 +206,13 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                                             editor.storage.aiCommand.userPrompt = e.target.value;
                                             setInputValue(e.target.value);
                                         },
-                                        placeholder: hasCompletion ? i18next.t("tellAiPlaceholder") || "Tell AI (Beta) what to do next" : i18next.t("askAiPlaceholder") || "Ask AI (Beta) to edit or generate...",
+                                        placeholder: hasCompletion ? i18next.t('tellAiPlaceholder') || 'Tell AI (Beta) what to do next' : i18next.t('askAiPlaceholder') || 'Ask AI (Beta) to edit or generate...',
                                         autoFocus: true,
-                                        // onFocus={() => {
-                                        //   addAIHighlight(editor)}}
                                         onKeyDown: (e)=>{
-                                            if (e.key === "Enter") handleClick();
+                                            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, {})
                                     })
@@ -249,21 +229,17 @@ export const AICommandPanel = /*#__PURE__*/ forwardRef(({ editor, onOpenChange,
                     className: "grid grid-cols-1 gap-0.5",
                     children: hasCompletion ? /*#__PURE__*/ _jsx(AISelectorCommands, {
                         editor: editor,
-                        messages: completion,
+                        messages: object,
                         onSelect: (value, options)=>{
                             if (options?.option === 'translate') {
-                                append({
-                                    role: 'user',
-                                    content: value
-                                }, {
-                                    data: options
+                                submit({
+                                    prompt: value,
+                                    body: options
                                 });
                             } else {
-                                append({
-                                    role: 'user',
-                                    content: value
-                                }, {
-                                    data: {
+                                submit({
+                                    prompt: value,
+                                    body: {
                                         ...options,
                                         source: code
                                     }

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["\"use client\";\nimport { useAssistant } from '@ai-sdk/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 i18next from \"i18next\";\nimport {\n Command,\n Group,\n} from \"src/fields/TiptapEditor/extensions/AICommand/types.js\";\nimport { extractMarkdown } from \"../../../lib/extract.js\";\nimport { getPrevText } from \"../../../lib/utils/index.js\";\nimport AISelectorCommands from \"../../menus/TextMenu/components/ai-selector-commands.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 { checkJsonCompletion, formatCompletion } from \"../AIEditorPanel/utils.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\n \n const { status, messages, append,input, submitMessage, handleInputChange } =\n useAssistant({ api: '/api/generate' });\n\n\n \n const isLoading = status === 'in_progress'\n const assistantMessages = messages?.filter((message) => {\n return message?.role === 'assistant'\n }) \n const completion = ([...assistantMessages]?.pop())?.content ?? \"\"\n\n const hasCompletion = completion.length > 0;\n const handleClick = useCallback(() => {\n const editorSelection = editor.state.selection.content().content.toJSON()\n\n if (completion) {\n return append({role: 'user', content:completion}, {\n data: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n }).then(() => setInputValue(\"\"));\n }\n const text = getPrevText(editor, { chars: 5000 });\n\n append({role: \"user\",content:text}, {\n data: {\n option: \"zap\",\n command:\n (editor.storage.aiCommand.title\n ? \"Context Title:\" + editor.storage.aiCommand.title + \";\\n\"\n : \"\") +\n (editor.storage.aiCommand.language\n ? \"Context language:\" + editor.storage.aiCommand.language + \";\\n\"\n : \"\") +\n inputValue,\n language: editor.storage.aiCommand.language ?? code ?? \"en\",\n selection: editorSelection\n },\n }).then(() => setInputValue(\"\"));\n }, [code, inputValue, completion]);\n\n useEffect(() => {\n if (userPrompt) setInputValue(userPrompt);\n }, [userPrompt]);\n useEffect(() => {\n if (!isLoading && hasCompletion) {\n editor.storage.aiCommand.completion = completion;\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 ${hasCompletion ? \"-mt-72\" : \"\"\n }`}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {(hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true)) && (\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={i18next.dir()}\n >\n <Markdown>{checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any }) : completion}</Markdown>\n\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 (Beta) 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 <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 ? i18next.t(\"tellAiPlaceholder\") \|\| \"Tell AI (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") \|\| \"Ask AI (Beta) 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 if(options?.option === 'translate'){\n\n append({role: 'user', content:value}, { data: options as any });\n }else{\n append({role: 'user', content:value}, { data: {...options, source: code} as any });\n \n }\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":["useAssistant","ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","i18next","extractMarkdown","getPrevText","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","checkJsonCompletion","formatCompletion","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","status","messages","append","input","submitMessage","handleInputChange","api","isLoading","assistantMessages","filter","message","role","completion","pop","content","hasCompletion","length","handleClick","editorSelection","state","selection","toJSON","data","option","command","language","then","text","chars","storage","aiCommand","title","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","type","resize","value","onChange","e","target","placeholder","t","autoFocus","Button","onClick","onSelect","options","source","map","group","Fragment","isActive","icon","label"],"mappings":"AAAA;;AACA,SAASA,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,aAAa,EAAEC,QAAQ,QAAQ,eAAe;AACvD,OAAOC,SACLC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,mBAAmB,EACnBC,MAAM,EACNC,QAAQ,QACH,QAAQ;AACf,OAAOC,cAAc,iBAAiB;AACtC,OAAOC,sBAAsB,0BAA0B;AAEvD,SAASC,SAAS,QAAQ,kCAAkC;AAG5D,OAAOC,aAAa,UAAU;AAK9B,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,WAAW,QAAQ,8BAA8B;AAC1D,OAAOC,wBAAwB,0DAA0D;AACzF,OAAOC,kBAAkB,4BAA4B;AACrD,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,IAAI,QAAQ,mBAAmB;AACxC,SAASC,UAAU,QAAQ,0BAA0B;AACrD,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,OAAO,QAAQ,sBAAsB;AAC9C,SAASC,mBAAmB,EAAEC,gBAAgB,QAAQ,4BAA4B;AASlF,OAAO,MAAMC,+BAAiBrB,WAC5B,CACE,EACEsB,MAAM,EACNC,YAAY,EACZC,UAAU,EACVC,KAAK,EACL,GAAGC,WACiB,EACtBC;IAEA,MAAM,CAACC,YAAYC,cAAc,GAAGxB,SAASmB,cAAc;IAC3D,MAAM,EAAEM,IAAI,EAAE,GAAGtB;IACjB,MAAM,EAAEuB,IAAI,EAAE,GAAGT;IACjB,MAAMU,kBAAkB5B,OAAuB;IAC/C,MAAM6B,aAAa7B,OAA0B;IAC7C,MAAM,CAAC8B,oBAAoBC,sBAAsB,GAAG9B,SAAS;IAC7D,MAAM,CAAC+B,sBAAsBC,wBAAwB,GAAGhC,SAAS;IAEjE,MAAMiC,aAAaP,KAAKQ,GAAG;IAC3B,MAAMC,gBAAgBF,WAAWG,qBAAqB;IACtD,MAAMC,WAAWtC,OAA4B;IAI/C,MAAM,EAAEuC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAACC,KAAK,EAAEC,aAAa,EAAEC,iBAAiB,EAAE,GAC1EpD,aAAa;QAAEqD,KAAK;IAAgB;IAIpC,MAAMC,YAAYP,WAAW;IAC7B,MAAMQ,oBAAoBP,UAAUQ,OAAO,CAACC;QAC1C,OAAOA,SAASC,SAAS;IAC3B;IACA,MAAMC,aAAa,AAAC;WAAIJ;KAAkB,EAAEK,OAAQC,WAAW;IAE7D,MAAMC,gBAAgBH,WAAWI,MAAM,GAAG;IAC1C,MAAMC,cAAc3D,YAAY;QAC9B,MAAM4D,kBAAkBvC,OAAOwC,KAAK,CAACC,SAAS,CAACN,OAAO,GAAGA,OAAO,CAACO,MAAM;QAEvE,IAAIT,YAAY;YACd,OAAOV,OAAO;gBAACS,MAAM;gBAAQG,SAAQF;YAAU,GAAG;gBAChDU,MAAM;oBAAEC,QAAQ;oBAAOC,SAASvC;oBAAYwC,UAAUtC,QAAQ;gBAAK;YACrE,GAAGuC,IAAI,CAAC,IAAMxC,cAAc;QAC9B;QACA,MAAMyC,OAAO3D,YAAYW,QAAQ;YAAEiD,OAAO;QAAK;QAE/C1B,OAAO;YAACS,MAAM;YAAOG,SAAQa;QAAI,GAAG;YAClCL,MAAM;gBACJC,QAAQ;gBACRC,SACE,AAAC7C,CAAAA,OAAOkD,OAAO,CAACC,SAAS,CAACC,KAAK,GAC3B,mBAAmBpD,OAAOkD,OAAO,CAACC,SAAS,CAACC,KAAK,GAAG,QACpD,EAAC,IACJpD,CAAAA,OAAOkD,OAAO,CAACC,SAAS,CAACL,QAAQ,GAC9B,sBAAsB9C,OAAOkD,OAAO,CAACC,SAAS,CAACL,QAAQ,GAAG,QAC1D,EAAC,IACLxC;gBACFwC,UAAU9C,OAAOkD,OAAO,CAACC,SAAS,CAACL,QAAQ,IAAItC,QAAQ;gBACvDiC,WAAWF;YACb;QACF,GAAGQ,IAAI,CAAC,IAAMxC,cAAc;IAC9B,GAAG;QAACC;QAAMF;QAAY2B;KAAW;IAEjCrD,UAAU;QACR,IAAIsB,YAAYK,cAAcL;IAChC,GAAG;QAACA;KAAW;IACftB,UAAU;QACR,IAAI,CAACgD,aAAaQ,eAAe;YAC/BpC,OAAOkD,OAAO,CAACC,SAAS,CAAClB,UAAU,GAAGA;QACxC;IACF,GAAG;QAACA;QAAYL;KAAU;IAE1B,+EAA+E;IAC/E,qDAAqD;IACrDhD,UAAU;QACRiC,sBAAsB;QACtBE,wBAAwB;IAC1B,GAAG;QAACZ;KAAM;IAEV,MAAMkD,aAAa1E,YACjB,CAAC2E,YAAoBC;QACnB,MAAMV,UAAU1C,KAAK,CAACmD,WAAW,CAACE,QAAQ,CAACD,aAAa;QAExDhD,cAAcsC,QAAQY,MAAM,CAACzD;IAC7B,0BAA0B;IAC5B,GACA;QAACG;QAAOH;KAAO;IAGjBnB,oBAAoBwB,KAAK,IAAO,CAAA;YAC9BqD,WAAW,CAAC,EAAEC,KAAK,EAAkC;gBACnD,IAAIA,MAAMC,GAAG,KAAK,aAAa;oBAC7B,IAAI,CAACzD,MAAMkC,MAAM,EAAE;wBACjB,OAAO;oBACT;oBAEA,MAAMmB,WAAWrD,KAAK,CAACS,mBAAmB,CAAC4C,QAAQ;oBAEnD,IAAIK,kBAAkB/C,uBAAuB;oBAC7C,IAAIgD,gBAAgBlD;oBAEpB,IAAI4C,SAASnB,MAAM,GAAG,IAAIwB,iBAAiB;wBACzCA,kBAAkB;wBAClBC,gBAAgBlD,qBAAqB;oBACvC;oBAEA,IAAIT,MAAMkC,MAAM,GAAG,IAAIyB,eAAe;wBACpCA,gBAAgB;oBAClB;oBAEA/C,wBAAwB8C;oBACxBhD,sBAAsBiD;oBAEtB,OAAO;gBACT;gBAEA,IAAIH,MAAMC,GAAG,KAAK,WAAW;oBAC3B,IAAI,CAACzD,MAAMkC,MAAM,EAAE;wBACjB,OAAO;oBACT;oBAEA,IAAIwB,kBAAkB/C,uBAAuB;oBAC7C,IAAIgD,gBAAgBlD;oBAEpB,IAAIiD,kBAAkB,GAAG;wBACvBC,gBAAgBlD,qBAAqB;wBACrCiD,kBAAkB1D,KAAK,CAAC2D,cAAc,EAAEN,SAASnB,SAAS,KAAK;oBACjE;oBAEA,IAAIyB,gBAAgB,GAAG;wBACrBA,gBAAgB3D,MAAMkC,MAAM,GAAG;wBAC/BwB,kBAAkB1D,KAAK,CAAC2D,cAAc,CAACN,QAAQ,CAACnB,MAAM,GAAG;oBAC3D;oBAEAtB,wBAAwB8C;oBACxBhD,sBAAsBiD;oBAEtB,OAAO;gBACT;gBAEA,IAAIH,MAAMC,GAAG,KAAK,SAAS;oBACzB,IACE,CAACzD,MAAMkC,MAAM,IACbzB,uBAAuB,CAAC,KACxBE,yBAAyB,CAAC,GAC1B;wBACA,OAAO;oBACT;oBAEAuC,WAAWzC,oBAAoBE;oBAE/B,OAAO;gBACT;gBAEA,OAAO;YACT;QACF,CAAA;IAEAlC,UAAU;QACR,IAAI+B,WAAWoD,OAAO,IAAIrD,gBAAgBqD,OAAO,EAAE;YACjD,MAAMC,YAAYrD,WAAWoD,OAAO,CAACC,SAAS;YAC9C,MAAMC,eAAetD,WAAWoD,OAAO,CAACE,YAAY;YAEpDvD,gBAAgBqD,OAAO,CAACG,SAAS,GAAGF,YAAYC;QAClD;IACF,GAAG;QAACnD;QAAsBF;KAAmB;IAE7C,MAAMuD,4BAA4BxF,YAChC,CAAC2E,YAAoBC;QACnB,OAAO;YACLF,WAAWC,YAAYC;QACzB;IACF,GACA;QAACF;KAAW;IAGd,qBACE;;0BACE,KAAC1D;gBACCyE,WAAW,CAAC,8CAA8C,EAAEhC,gBAAgB,WAAW,IACnF;gBACJiC,OAAO;oBACLC,OAAOpD,eAAeoD;gBACxB;0BAEA,cAAA;;wBACIlC,iBAAiBH,YAAYI,SAAS,MAAOxC,CAAAA,oBAAoBoC,cAAc,CAACL,YAAY,IAAG,mBAC/F,KAAC2C;4BAAIH,WAAU;sCACb,cAAA,KAAC1E;gCACC0E,WAAU;gCACVI,KAAKrF,QAAQqF,GAAG;0CAEhB,cAAA,KAACxF;8CAAUa,oBAAoBoC,cAAc7C,gBAAgB;wCAAEqF,MAAM;wCAAOtC,SAASrC,iBAAiBmC;oCAAmB,KAAKA;;;;wBAMnIL,2BACC,MAAC2C;4BACCH,WAAU;4BACVC,OAAO;gCACLC,OAAOpD,eAAeoD;4BACxB;;8CAEA,KAAC9F;oCAAS4F,WAAU;;gCAA4B;8CAEhD,KAACG;oCAAIH,WAAU;8CACb,cAAA,KAAC7E;;;;wBAKN,CAACqC,2BACA;sCACE,cAAA,MAAC2C;gCAAIH,WAAU;;kDACb,KAAC5F;wCAAS4F,WAAU;;kDACpB,KAACnF;wCACCoB,KAAKe;wCACLiD,OAAO;4CAAEK,QAAQ;wCAAO;wCACxBN,WAAU;wCACVO,OAAOrE;wCACPsE,UAAU,CAACC;4CACT7E,OAAOkD,OAAO,CAACC,SAAS,CAACjD,UAAU,GAAG2E,EAAEC,MAAM,CAACH,KAAK;4CAEpDpE,cAAcsE,EAAEC,MAAM,CAACH,KAAK;wCAC9B;wCACAI,aACE3C,gBACIjD,QAAQ6F,CAAC,CAAC,wBAAwB,mCAClC7F,QAAQ6F,CAAC,CAAC,uBAAuB;wCAEvCC,SAAS;wCACT,mBAAmB;wCACnB,6BAA6B;wCAE7BvB,WAAW,CAACmB;4CACV,IAAIA,EAAEjB,GAAG,KAAK,SAAStB;wCACzB;;kDAEF,KAAC1C,QAAQsF,MAAM;wCACb,cAAc;wCAEd,4GAA4G;wCAC5GC,SAAS7C;kDAET,cAAA,KAAC/D;;;;;;;;YAOZ,CAACqD,2BACA,KAACjC;gBACCU,KAAKK;gBACL0D,WAAU;0BAEV,cAAA,KAACG;oBAAIH,WAAU;8BACZhC,8BACC,KAAC9C;wBACCU,QAAQA;wBACRsB,UAAUW;wBACVmD,UAAU,CAACT,OAAOU;4BAChB,IAAGA,SAASzC,WAAW,aAAY;gCAEjCrB,OAAO;oCAACS,MAAM;oCAAQG,SAAQwC;gCAAK,GAAG;oCAAEhC,MAAM0C;gCAAe;4BAC/D,OAAK;gCACH9D,OAAO;oCAACS,MAAM;oCAAQG,SAAQwC;gCAAK,GAAG;oCAAEhC,MAAM;wCAAC,GAAG0C,OAAO;wCAAEC,QAAQ9E;oCAAI;gCAAS;4BAElF;wBACF;yBAGFL,MAAMoF,GAAG,CAAC,CAACC,OAAOlC,2BAChB,MAAC7E,MAAMgH,QAAQ;;8CACb,KAAClB;oCACCH,WAAU;8CAGToB,MAAMpC,KAAK;mCAFP,GAAGoC,MAAMpC,KAAK,EAAE;gCAItBoC,MAAMhC,QAAQ,CAAC+B,GAAG,CACjB,CAAC1C,SAAkBU,6BACjB,MAAC/D;wCAECkG,UACE9E,uBAAuB0C,cACvBxC,yBAAyByC;wCAE3B4B,SAAShB,0BACPb,YACAC;;0DAGF,KAAC9D;gDAAKkG,MAAM9C,QAAQ8C,IAAI;gDAAEvB,WAAU;;4CACnCvB,QAAQ+C,KAAK;;uCAXT,GAAG/C,QAAQ+C,KAAK,EAAE;;2BAVV,GAAGJ,MAAMpC,KAAK,CAAC,QAAQ,CAAC;;;;;AAiC7D,GACA"}
1	+ {"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AICommandPanel/AICommandPanel.tsx"],"sourcesContent":["'use client'\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 { experimental_useObject as useObject } from '@ai-sdk/react'\nimport i18next from 'i18next'\nimport { Command, Group } from '../../../extensions/AICommand/types.js'\nimport { TiptapSchema } from '../../../lib/tiptapSchema.js'\nimport { getPrevText } from '../../../lib/utils/index.js'\nimport AISelectorCommands from '../../menus/TextMenu/components/ai-selector-commands.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 { useExtractMarkdown } from '../AIEditorPanel/markdown.hook.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 ({ editor, onOpenChange, userPrompt, items, ...restProps }: AICommandPanelProps, ref) => {\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 { object, submit, isLoading } = useObject({\n api: '/api/generate',\n schema: TiptapSchema,\n })\n\n const { markdown } = useExtractMarkdown(object)\n\n const hasCompletion = Boolean(object)\n\n const handleClick = useCallback(() => {\n if (object) {\n submit({\n prompt: '',\n body: { option: 'zap', command: inputValue, language: code ?? 'en', selection: object },\n })\n setInputValue('')\n return\n }\n\n submit({\n prompt: '',\n body: { option: 'zap', command: inputValue, language: code ?? 'en' },\n })\n setInputValue('')\n }, [code, inputValue, object, submit])\n\n useEffect(() => {\n if (userPrompt) setInputValue(userPrompt)\n }, [userPrompt])\n useEffect(() => {\n if (hasCompletion) {\n editor.storage.aiCommand.completion = object\n }\n }, [object, isLoading])\n\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 setInputValue(command.action(editor))\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 (!items.length \|\| selectedGroupIndex === -1 \|\| selectedCommandIndex === -1) {\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 hasCompletion ? '-mt-72' : ''\n }`}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {markdown && (\n <div className='flex w-full'>\n <ScrollArea className='prose p-2 px-4 prose-sm' dir={i18next.dir()}>\n <Markdown>{markdown}</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 (Beta) 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 <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 setInputValue(e.target.value)\n }}\n placeholder={\n hasCompletion\n ? i18next.t('tellAiPlaceholder') \|\| 'Tell AI (Beta) what to do next'\n : i18next.t('askAiPlaceholder') \|\| 'Ask AI (Beta) to edit or generate...'\n }\n autoFocus\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleClick()\n }}\n />\n <Toolbar.Button onClick={handleClick}>\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={object}\n onSelect={(value, options) => {\n if (options?.option === 'translate') {\n submit({ prompt: value, body: options })\n } else {\n submit({ prompt: value, body: { ...options, source: code } })\n }\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((command: Command, commandIndex: number) => (\n <DropdownButton\n key={`${command.label}`}\n isActive={\n selectedGroupIndex === groupIndex && selectedCommandIndex === commandIndex\n }\n onClick={createCommandClickHandler(groupIndex, commandIndex)}\n >\n <Icon icon={command.icon} className='mr-1' />\n {command.label}\n </DropdownButton>\n ))}\n </React.Fragment>\n ))\n )}\n </div>\n </Surface>\n )}\n </>\n )\n },\n)\n"],"names":["ArrowUpCircle","Sparkles","React","forwardRef","useCallback","useEffect","useImperativeHandle","useRef","useState","Markdown","TextareaAutosize","useLocale","experimental_useObject","useObject","i18next","TiptapSchema","AISelectorCommands","CrazySpinner","DropdownButton","Icon","ScrollArea","Surface","Toolbar","useExtractMarkdown","AICommandPanel","editor","onOpenChange","userPrompt","items","restProps","ref","inputValue","setInputValue","code","view","scrollContainer","activeItem","selectedGroupIndex","setSelectedGroupIndex","selectedCommandIndex","setSelectedCommandIndex","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","object","submit","isLoading","api","schema","markdown","hasCompletion","Boolean","handleClick","prompt","body","option","command","language","selection","storage","aiCommand","completion","selectItem","groupIndex","commandIndex","commands","action","onKeyDown","event","key","length","newCommandIndex","newGroupIndex","current","offsetTop","offsetHeight","scrollTop","createCommandClickHandler","className","style","width","div","dir","resize","value","onChange","e","target","placeholder","t","autoFocus","Button","onClick","messages","onSelect","options","source","map","group","Fragment","title","isActive","icon","label"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Editor } from "@tiptap/react";
+import { Editor } from '@tiptap/react';
 export type AIEditorPanelProps = {
     editor: Editor;
     onOpenChange: (value: boolean) => void;

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,~~CAAC~~;~~AAkBvC~~,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,~~CAAC~~;~~IACf~~,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,~~CAAC~~;~~CACxC~~,~~CAAC~~;~~AAEF~~,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,~~gCA2HzE~~,CAAA"}
1	+ {"version":3,"file":"AIEditorPanel.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/features/panels/AIEditorPanel/AIEditorPanel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAmBtC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,aAAa,6BAA8B,kBAAkB,gCA8GzE,CAAA"}

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

@@ -1,70 +1,65 @@
-"use client";
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useLocale } from "@payloadcms/ui/providers/Locale";
-import { ArrowRight, Sparkles } from "lucide-react";
-import { useCallback, useRef, useState } from "react";
-import TextareaAutosize from "react-textarea-autosize";
-import { useAssistant } from "@ai-sdk/react";
-import i18next from "i18next";
-import Markdown from "react-markdown";
-import { extractMarkdown } from "../../../lib/extract.js";
-import { getPrevText } from "../../../lib/utils/index.js";
-import AICompletionCommands from "../../menus/TextMenu/components/ai-completion-command.js";
-import AISelectorCommands from "../../menus/TextMenu/components/ai-selector-commands.js";
-import { Surface } from "../../ui/Surface.js";
-import { Toolbar } from "../../ui/Toolbar.js";
-import CrazySpinner from "../../ui/crazy-spinner.js";
-import { ScrollArea } from "../../ui/scroll-area.js";
-import { checkJsonCompletion, formatCompletion } from "./utils.js";
+import { useLocale } from '@payloadcms/ui/providers/Locale';
+import { ArrowRight, Sparkles } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import TextareaAutosize from 'react-textarea-autosize';
+import { experimental_useObject as useObject } from '@ai-sdk/react';
+import i18next from 'i18next';
+import Markdown from 'react-markdown';
+import { TiptapSchema } from '../../../lib/tiptapSchema.js';
+import { getPrevText } from '../../../lib/utils/index.js';
+import AICompletionCommands from '../../menus/TextMenu/components/ai-completion-command.js';
+import AISelectorCommands from '../../menus/TextMenu/components/ai-selector-commands.js';
+import { Surface } from '../../ui/Surface.js';
+import { Toolbar } from '../../ui/Toolbar.js';
+import CrazySpinner from '../../ui/crazy-spinner.js';
+import { ScrollArea } from '../../ui/scroll-area.js';
+import { useExtractMarkdown } from './markdown.hook.js';
 export const AIEditorPanel = ({ editor, onOpenChange })=>{
-    const [inputValue, setInputValue] = useState("");
+    const [inputValue, setInputValue] = useState('');
     const { code } = useLocale();
     const { view } = editor;
     const editorNode = view.dom;
     const boundigClient = editorNode.getBoundingClientRect();
     const inputRef = useRef(null);
-    const { status, messages, append, input, submitMessage, handleInputChange } = useAssistant({
-        api: '/api/generate'
+    const { object, submit, isLoading } = useObject({
+        api: '/api/generate',
+        schema: TiptapSchema
     });
-    const isLoading = status === 'in_progress';
-    const assistantMessages = messages?.filter((message)=>{
-        return message?.role === 'assistant';
-    });
-    const completion = [
-        ...assistantMessages
-    ]?.pop()?.content ?? "";
-    const hasCompletion = completion.length > 0;
+    const hasCompletion = Boolean(object);
     const handleClick = useCallback(()=>{
-        if (completion) {
-            return append({
-                role: 'user',
-                content: completion
-            }, {
-                data: {
-                    option: "zap",
+        if (object) {
+            submit({
+                prompt: object,
+                body: {
+                    option: 'zap',
                     command: inputValue,
-                    language: code ?? "en"
+                    language: code ?? 'en'
                 }
-            }).then(()=>setInputValue(""));
+            });
+            setInputValue('');
+            return;
         }
         const text = getPrevText(editor, {
             chars: 5000
         });
-        append({
-            content: text,
-            role: "user"
-        }, {
-            data: {
-                option: "zap",
+        submit({
+            prompt: text,
+            body: {
+                option: 'zap',
                 command: inputValue,
-                language: code ?? "en"
+                language: code ?? 'en'
             }
-        }).then(()=>setInputValue(""));
+        });
+        setInputValue('');
     }, [
         code,
         inputValue,
-        completion
+        object,
+        submit
     ]);
+    const { markdown } = useExtractMarkdown(object);
     return /*#__PURE__*/ _jsx(Surface, {
         className: `p-2 min-w-[20rem] `,
         style: {
@@ -72,17 +67,14 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
         },
         children: /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
-                hasCompletion && completion?.length > 10 && (checkJsonCompletion(completion) ? !isLoading : true) && /*#__PURE__*/ _jsx("div", {
+                markdown && /*#__PURE__*/ _jsx("div", {
                     className: "flex  w-full",
                     children: /*#__PURE__*/ _jsx(ScrollArea, {
                         children: /*#__PURE__*/ _jsx("div", {
                             className: "prose p-2 px-4 prose-sm",
                             dir: i18next.dir(),
                             children: /*#__PURE__*/ _jsx(Markdown, {
-                                children: checkJsonCompletion(completion) ? extractMarkdown({
-                                    type: 'doc',
-                                    content: formatCompletion(completion)
-                                }) : completion
+                                children: markdown
                             })
                         })
                     })
@@ -115,17 +107,13 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                                     onChange: (e)=>{
                                         setInputValue(e.target.value);
                                     },
-                                    placeholder: hasCompletion ? i18next.t("tellAiPlaceholder") || "Tell AI (Beta) what to do next" : i18next.t("askAiPlaceholder") || "Ask AI (Beta) to edit or generate...",
+                                    placeholder: hasCompletion ? i18next.t('tellAiPlaceholder') || 'Tell AI (Beta) what to do next' : i18next.t('askAiPlaceholder') || 'Ask AI (Beta) to edit or generate...',
                                     autoFocus: true,
-                                    // onFocus={() => {
-                                    //   addAIHighlight(editor)}}
                                     onKeyDown: (e)=>{
-                                        if (e.key === "Enter") handleClick();
+                                        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(ArrowRight, {})
                                 })
@@ -137,16 +125,14 @@ export const AIEditorPanel = ({ editor, onOpenChange })=>{
                                 editor?.chain()?.focus()?.run();
                                 onOpenChange(false);
                             },
-                            completion: completion
+                            completion: object
                         }) : /*#__PURE__*/ _jsx(AISelectorCommands, {
-                            messages: completion,
+                            messages: object,
                             editor: editor,
                             onSelect: (value, options)=>{
-                                append({
-                                    role: "user",
-                                    content: value
-                                }, {
-                                    data: options
+                                submit({
+                                    prompt: value,
+                                    body: options
                                 });
                             }
                         })

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

	@@ -1 +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 { ArrowRight, Sparkles } from \"lucide-react\~~";\~~nimport { useCallback, useRef, useState } from \"react\~~";\~~nimport TextareaAutosize from \"react-textarea-autosize\~~";\~~n\nimport { ~~useAssistant~~ } from \"@ai-sdk/react\~~";\~~nimport i18next from \"i18next\~~";\~~nimport Markdown from \"react-markdown\~~";\~~nimport { extractMarkdown } from \"../../../lib/extract.js\~~";\~~nimport { getPrevText } from \"../../../lib/utils/index.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\~~";\~~nimport { ~~checkJsonCompletion,~~ ~~formatCompletion~~ } from \"./~~utils~~.js\~~";\~~n\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\n const { ~~status~~, ~~messages~~, ~~append,input,~~ ~~submitMessage,~~ ~~handleInputChange~~ ~~} =\n useAssistant~~({ api: '/api/generate' ~~});\~~n~~\n const isLoading = status === 'in_progress'\n const assistantMessages = messages?.filter((message) => {\n~~ ~~return~~ ~~message?.role === 'assistant'\~~n }) \n const ~~completion~~ = (~~[...assistantMessages]?.pop(~~)~~)?.content ??~~ \~~"\"\~~n\n const ~~hasCompletion = completion.length > 0;\n const~~ handleClick = useCallback(() => {\n if (~~completion~~) {\n ~~return append~~({ ~~role~~: ~~'user',content: completion}, {\~~n ~~data~~: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n })~~.then~~(() ~~=> setInputValue(~~\"\~~"));\~~n }\n const text = getPrevText(editor, { chars: 5000 });\n\n ~~append~~({~~content~~:text~~, role: \"user\"}, {\~~n ~~data~~: { option: \"zap\", command: inputValue, language: code ?? \"en\" },\n })~~.then~~(() ~~=> setInputValue(~~\~~"\"));\~~n }, [code, inputValue, ~~completion~~]);\n\n return (\n <Surface\n className={`p-2 min-w-[20rem] `}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {~~(hasCompletion~~ && ~~completion?.length > 10 &&~~ (~~checkJsonCompletion(completion) ? !isLoading : true)) && (~~\n <div className~~=\"~~flex w-full\">\n <ScrollArea>\n <div\n className~~=\"~~prose p-2 px-4 prose-sm~~\"\n~~ dir={i18next.dir()}\n >\n <Markdown>{~~checkJsonCompletion(completion) ? extractMarkdown({ type: 'doc', content: formatCompletion(completion) as any~~ }~~) : 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 (Beta) 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 <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 ? i18next.t(\"tellAiPlaceholder\") \|\| \"Tell AI (Beta) what to do next\"\n : i18next.t(\"askAiPlaceholder\") \|\| \"Ask AI (Beta) 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()?.focus()?.run();\n onOpenChange(false);\n }}\n completion={~~completion~~}\n />\n ) : (\n <AISelectorCommands\n messages={~~completion~~}\n editor={editor}\n onSelect={(value, options) => {\n ~~append~~({~~\n role:~~ ~~\"user\",\n content~~: value~~\n }~~, ~~{ data~~: options as any});\n }}\n />\n )}\n </>\n )}\n </>\n </Surface>\n );\n}\n\n"],"names":["useLocale","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","~~useAssistant~~","i18next","Markdown","~~extractMarkdown~~","getPrevText","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","~~checkJsonCompletion~~","~~formatCompletion","~~AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","~~status~~","~~messages~~","~~append~~","~~input","submitMessage","handleInputChange","~~api","~~isLoading~~","~~assistantMessages~~","~~filter~~","~~message~~","~~role~~","~~completion~~","~~pop","content","hasCompletion","length","handleClick","data","~~option","command","language","~~then~~","~~text~~","~~chars~~","className","style","width","div","dir","~~type","~~ref","value","onChange","e","target","placeholder","t","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","focus","run","onSelect","options"],"mappings":"AAAA;;AAEA,SAASA,SAAS,QAAQ,~~kCAAkC~~;~~AAE5D~~,SAASC,UAAU,EAAEC,QAAQ,QAAQ,~~eAAe~~;~~AACpD~~,SAASC,WAAW,~~EAAEC~~,MAAM,EAAEC,QAAQ,QAAQ,~~QAAQ~~;~~AACtD~~,OAAOC,sBAAsB,~~0BAA0B~~;~~AAEvD~~,SAASC,~~YAAY~~,QAAQ,~~gBAAgB~~;~~AAC7C~~,OAAOC,aAAa,~~UAAU~~;~~AAC9B~~,OAAOC,cAAc,~~iBAAiB~~;~~AACtC~~,SAASC,~~eAAe~~,QAAQ~~,0BAA0B~~;~~AAC1D~~,SAASC,WAAW,QAAQ,~~8BAA8B~~;~~AAC1D~~,OAAOC,0BAA0B,~~2DAA2D~~;~~AAC5F~~,OAAOC,wBAAwB,~~0DAA0D~~;~~AACzF~~,SAASC,OAAO,QAAQ,~~sBAAsB~~;~~AAC9C~~,SAASC,OAAO,QAAQ,~~sBAAsB~~;~~AAC9C~~,OAAOC,kBAAkB,~~4BAA4B~~;~~AACrD~~,SAASC,UAAU,QAAQ,~~0BAA0B~~;~~AACrD~~,SAASC,~~mBAAmB~~,~~EAAEC,gBAAgB,~~QAAQ,~~aAAa~~;~~AAOnE~~,OAAO,MAAMC,gBAAgB,CAAC,EAAEC,MAAM,EAAEC,YAAY,EAAsB;IACxE,MAAM,CAACC,YAAYC,cAAc,GAAGnB,SAAS;IAC7C,MAAM,EAAEoB,IAAI,EAAE,GAAGzB;IACjB,MAAM,EAAE0B,IAAI,EAAE,GAAGL;IAEjB,MAAMM,aAAaD,KAAKE,GAAG;IAC3B,MAAMC,gBAAgBF,WAAWG,qBAAqB;IACtD,MAAMC,WAAW3B,OAA4B;~~IAG7C~~,MAAM,EAAE4B,MAAM,EAAEC,~~QAAQ,EAAEC,~~MAAM,~~EAACC,KAAK,~~EAAEC,~~aAAa~~,~~EAAEC,iBAAiB,~~EAAE,~~GAC1E9B~~,~~aAAa~~;~~QAAE+B~~,KAAK;~~IAAgB;IAEpC~~,~~MAAMC,YAAYP,WAAW~~;~~IAC7B,MAAMQ,oBAAoBP,UAAUQ,OAAO,CAACC~~;~~QAC1C,OAAOA,SAASC,SAAS;IAC3B;~~IACA,~~MAAMC~~,~~aAAa~~,~~AAAC~~;~~WAAIJ;KAAkB~~,~~EAAEK~~,~~OAAQC~~,~~WAAW;IAE/D,MAAMC,gBAAgBH,WAAWI,MAAM,GAAG;IAC1C,MAAMC,cAAc9C,~~YAAY;QAC9B,~~IAAIyC~~,~~YAAY~~;~~YACd~~,~~OAAOV,~~OAAO;~~gBAAES~~,~~MAAM~~;~~gBAAOG~~,~~SAASF;YAAU,GAAG;gBACjDM,~~MAAM;oBAAEC,QAAQ;oBAAOC,~~SAAS7B~~;~~oBAAY8B~~,~~UAAU5B~~,QAAQ;gBAAK;YACrE,~~GAAG6B,IAAI,CAAC,IAAM9B,~~cAAc;~~QAC9B~~;QACA,~~MAAM+B~~,~~OAAO5C~~,~~YAAYU~~,QAAQ;~~YAAEmC~~,OAAO;QAAK;QAE/~~CtB~~,OAAO;~~YAACY~~,~~SAAQS~~;~~YAAMZ~~,MAAM;~~QAAM,GAAG;YACnCO,MAAM;~~gBAAEC,QAAQ;gBAAOC,~~SAAS7B~~;~~gBAAY8B~~,~~UAAU5B~~,QAAQ;YAAK;QACrE,~~GAAG6B,IAAI,CAAC,IAAM9B,~~cAAc;~~IAC9B~~,GAAG;QAACC;QAAMF;~~QAAYqB~~;~~KAAW~~;~~IAEjC~~,qBACE,~~KAAC9B~~;~~QACC2C~~,WAAW,CAAC,kBAAkB,CAAC;QAC/BC,OAAO;YACLC,~~OAAO9B~~,~~eAAe8B~~;QACxB;kBAEA,cAAA;;~~gBACIZ~~,~~iBAAiBH~~,~~YAAYI,SAAS,MAAO9B,CAAAA,oBAAoB0B,cAAc,CAACL,YAAY,IAAG,mBAC/F,KAACqB~~;oBAAIH,WAAU;8BACb,cAAA,~~KAACxC~~;kCACC,cAAA,~~KAAC2C~~;~~4BACCH~~,WAAU;~~4BACVI~~,~~KAAKrD~~,~~QAAQqD~~,GAAG;~~sCAEhB~~,cAAA,~~KAACpD~~;~~0CAAUS,oBAAoB0B,cAAclC,gBAAgB;oCAAEoD,MAAM;oCAAOhB,SAAS3B,iBAAiByB;gCAAmB,KAAKA~~;;;;;~~gBAMrIL~~,2BACC,~~MAACqB~~;oBAAIH,WAAU;;sCACb,~~KAACvD~~;~~4BAASuD~~,WAAU;;wBAA4B;sCAEhD,KAACG;4BAAIH,WAAU;sCACb,cAAA,~~KAACzC~~;;;;gBAKN,~~CAACuB~~,2BACA;;sCACE,~~MAACqB~~;4BAAIH,WAAU;;8CACb,~~KAACvD~~;~~oCAASuD~~,WAAU;;8CACpB,~~KAACnD~~;~~oCACCyD~~,~~KAAKhC~~;~~oCACL0B~~,WAAU;~~oCACVO~~,~~OAAOzC~~;~~oCACP0C~~,UAAU,CAACC;~~wCACT1C~~,~~cAAc0C~~,EAAEC,MAAM,CAACH,KAAK;oCAC9B;oCACAI,aACErB,~~gBACIvC~~,~~QAAQ6D~~,CAAC,CAAC,wBAAwB,~~mCAClC7D~~,~~QAAQ6D~~,CAAC,CAAC,uBAAuB;oCAEvCC,SAAS;~~oCACT~~,~~mBAAmB;oCACnB,6BAA6B;oCAE7BC,~~WAAW,CAACL;wCACV,IAAIA,EAAEM,GAAG,KAAK,SAASvB;oCACzB;;8CAEF,~~KAAClC~~,~~QAAQ0D~~,MAAM;~~oCACb~~,~~cAAc;oCAEd,4GAA4G;oCAC5GC,~~SAASzB;~~8CAET~~,cAAA,~~KAAChD~~;;;;~~wBAGJ8C~~,8BACC,~~KAACnC~~;~~4BACCS~~,QAAQA;~~4BACRsD~~,WAAW;~~gCACTtD~~,~~QAAQuD~~,SAASC,SAASC;~~gCAC1BxD~~,aAAa;4BACf;~~4BACAsB~~,~~YAAYA~~;2CAGd,~~KAAC/B~~;~~4BACCoB~~,~~UAAUW~~;~~4BACVvB~~,QAAQA;~~4BACR0D~~,UAAU,~~CAACf~~,~~OAAOgB~~;~~gCAChB9C~~,OAAO;~~oCACLS~~,~~MAAM~~;~~oCACNG~~,~~SAASkB~~;~~gCACT,GAAG~~;~~oCAAEd,MAAM8B;gCAAc;4BAC7B~~;;;;;;;AAQhB,EAAC"}
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 { ArrowRight, Sparkles } from 'lucide-react'\nimport { useCallback, useEffect, useRef, useState } from 'react'\nimport TextareaAutosize from 'react-textarea-autosize'\n\nimport { experimental_useObject as useObject } from '@ai-sdk/react'\nimport i18next from 'i18next'\nimport Markdown from 'react-markdown'\nimport { extractMarkdown } from '../../../lib/extract.js'\nimport { TiptapSchema } from '../../../lib/tiptapSchema.js'\nimport { getPrevText } from '../../../lib/utils/index.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'\nimport { useExtractMarkdown } from './markdown.hook.js'\n\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 { object, submit, isLoading } = useObject({\n api: '/api/generate',\n schema: TiptapSchema,\n })\n const hasCompletion = Boolean(object)\n\n const handleClick = useCallback(() => {\n if (object) {\n submit({\n prompt: object,\n body: { option: 'zap', command: inputValue, language: code ?? 'en' },\n })\n setInputValue('')\n return\n }\n const text = getPrevText(editor, { chars: 5000 })\n\n submit({\n prompt: text,\n body: { option: 'zap', command: inputValue, language: code ?? 'en' },\n })\n setInputValue('')\n }, [code, inputValue, object, submit])\n\n const { markdown } = useExtractMarkdown(object)\n return (\n <Surface\n className={`p-2 min-w-[20rem] `}\n style={{\n width: boundigClient?.width,\n }}\n >\n <>\n {markdown && (\n <div className='flex w-full'>\n <ScrollArea>\n <div className='prose p-2 px-4 prose-sm' dir={i18next.dir()}>\n <Markdown>{markdown}</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 (Beta) 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 <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 ? i18next.t('tellAiPlaceholder') \|\| 'Tell AI (Beta) what to do next'\n : i18next.t('askAiPlaceholder') \|\| 'Ask AI (Beta) to edit or generate...'\n }\n autoFocus\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleClick()\n }}\n />\n <Toolbar.Button onClick={handleClick}>\n <ArrowRight />\n </Toolbar.Button>\n </div>\n {hasCompletion ? (\n <AICompletionCommands\n editor={editor}\n onDiscard={() => {\n editor?.chain()?.focus()?.run()\n onOpenChange(false)\n }}\n completion={object}\n />\n ) : (\n <AISelectorCommands\n messages={object}\n editor={editor}\n onSelect={(value, options) => {\n submit({ prompt: value, body: options as any })\n }}\n />\n )}\n </>\n )}\n </>\n </Surface>\n )\n}\n"],"names":["useLocale","ArrowRight","Sparkles","useCallback","useRef","useState","TextareaAutosize","experimental_useObject","useObject","i18next","Markdown","TiptapSchema","getPrevText","AICompletionCommands","AISelectorCommands","Surface","Toolbar","CrazySpinner","ScrollArea","useExtractMarkdown","AIEditorPanel","editor","onOpenChange","inputValue","setInputValue","code","view","editorNode","dom","boundigClient","getBoundingClientRect","inputRef","object","submit","isLoading","api","schema","hasCompletion","Boolean","handleClick","prompt","body","option","command","language","text","chars","markdown","className","style","width","div","dir","ref","value","onChange","e","target","placeholder","t","autoFocus","onKeyDown","key","Button","onClick","onDiscard","chain","focus","run","completion","messages","onSelect","options"],"mappings":"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"}

package/dist/src/fields/TiptapEditor/features/panels/AIEditorPanel/EditorPreview.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+import { AdditionalContextType, FetchSiteMetadataType, TiptapProps } from '../../BlockEditor/types.jsx';
+import { openAssetHQType } from '../../../types.js';
+export declare const EditorPreview: ({ handleChange, content, openAssetHQHandler, additionalContext, isEditable, dir, }: TiptapProps & {
+    openAssetHQHandler?: openAssetHQType;
+    additionalContext?: AdditionalContextType;
+    fetchSiteMetadata?: FetchSiteMetadataType;
+    isEditable?: boolean;
+    dir?: "ltr" | "rtl" | "auto";
+}) => import("react").JSX.Element;
+export default EditorPreview;
+//# sourceMappingURL=EditorPreview.d.ts.map