@intlayer/design-system 9.0.0-canary.0 → 9.0.0-canary.2

package/dist/esm/components/MarkdownEditor/generative/useAICompletion.mjs

@@ -0,0 +1,83 @@
+'use client';
+
+import { useCustomQuery } from "../../../api/hooks/ai.mjs";
+import { useCallback, useState } from "react";
+
+//#region src/components/MarkdownEditor/generative/useAICompletion.ts
+/**
+* Builds the system prompt + user message for a given AI option. The prompts
+* intentionally match the Novel reference implementation so behaviour is
+* consistent.
+*/
+const buildPromptParts = (option, prompt, command) => {
+	switch (option) {
+		case "continue": return {
+			system: "You are an AI writing assistant that continues existing text based on context from prior text. Give more weight/priority to the later characters than the beginning ones. Limit your response to no more than 200 characters, but make sure to construct complete sentences. Use Markdown formatting when appropriate.",
+			userContent: prompt
+		};
+		case "improve": return {
+			system: "You are an AI writing assistant that improves existing text. Limit your response to no more than 200 characters, but make sure to construct complete sentences. Use Markdown formatting when appropriate.",
+			userContent: `The existing text is: ${prompt}`
+		};
+		case "shorter": return {
+			system: "You are an AI writing assistant that shortens existing text. Use Markdown formatting when appropriate.",
+			userContent: `The existing text is: ${prompt}`
+		};
+		case "longer": return {
+			system: "You are an AI writing assistant that lengthens existing text. Use Markdown formatting when appropriate.",
+			userContent: `The existing text is: ${prompt}`
+		};
+		case "fix": return {
+			system: "You are an AI writing assistant that fixes grammar and spelling errors in existing text. Limit your response to no more than 200 characters, but make sure to construct complete sentences. Use Markdown formatting when appropriate.",
+			userContent: `The existing text is: ${prompt}`
+		};
+		case "zap": return {
+			system: "You are an AI writing assistant that generates text based on a prompt. You take an input from the user and a command for manipulating the text. Use Markdown formatting when appropriate.",
+			userContent: `For this text: ${prompt}. You have to respect the command: ${command ?? ""}`
+		};
+		default: return {
+			system: "",
+			userContent: prompt
+		};
+	}
+};
+/**
+* Adapter around {@link useCustomQuery} that exposes a Novel-compatible
+* `useCompletion`-style API (`completion` / `complete` / `isLoading`).
+*
+* It routes generative requests through the Intlayer AI backend
+* (`@intlayer/api` → `@intlayer/ai`) instead of the Vercel AI SDK.
+*
+* @param onError - Optional error callback (e.g. to display a toast).
+*/
+const useAICompletion = (onError) => {
+	const { mutateAsync, isPending } = useCustomQuery();
+	const [completion, setCompletion] = useState("");
+	return {
+		completion,
+		complete: useCallback(async (prompt, options) => {
+			const { option, command } = options.body;
+			const { system, userContent } = buildPromptParts(option, prompt, command);
+			try {
+				const text = (await mutateAsync({
+					system,
+					messages: [{
+						role: "user",
+						content: userContent
+					}]
+				}))?.data?.fileContent ?? "";
+				setCompletion(text);
+				return text;
+			} catch (error) {
+				onError?.(error instanceof Error ? error : /* @__PURE__ */ new Error("AI request failed"));
+				return "";
+			}
+		}, [mutateAsync, onError]),
+		isLoading: isPending,
+		reset: useCallback(() => setCompletion(""), [])
+	};
+};
+
+//#endregion
+export { useAICompletion };
+//# sourceMappingURL=useAICompletion.mjs.map

package/dist/esm/components/MarkdownEditor/generative/useAICompletion.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAICompletion.mjs","names":[],"sources":["../../../../../src/components/MarkdownEditor/generative/useAICompletion.ts"],"sourcesContent":["'use client';\n\nimport { useCustomQuery } from '@api/index';\nimport { useCallback, useState } from 'react';\n\n/**\n * The kind of transformation the AI should apply to the provided text.\n * Mirrors the options exposed by the Novel generative menu.\n */\nexport type AICompletionOption =\n  | 'continue'\n  | 'improve'\n  | 'shorter'\n  | 'longer'\n  | 'fix'\n  | 'zap';\n\nexport type CompleteOptions = {\n  body: {\n    option: AICompletionOption;\n    /** Free-form instruction, only used by the `zap` option. */\n    command?: string;\n  };\n};\n\ntype PromptParts = {\n  system: string;\n  userContent: string;\n};\n\n/**\n * Builds the system prompt + user message for a given AI option. The prompts\n * intentionally match the Novel reference implementation so behaviour is\n * consistent.\n */\nconst buildPromptParts = (\n  option: AICompletionOption,\n  prompt: string,\n  command?: string\n): PromptParts => {\n  switch (option) {\n    case 'continue':\n      return {\n        system:\n          'You are an AI writing assistant that continues existing text based on context from prior text. ' +\n          'Give more weight/priority to the later characters than the beginning ones. ' +\n          'Limit your response to no more than 200 characters, but make sure to construct complete sentences. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: prompt,\n      };\n    case 'improve':\n      return {\n        system:\n          'You are an AI writing assistant that improves existing text. ' +\n          'Limit your response to no more than 200 characters, but make sure to construct complete sentences. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: `The existing text is: ${prompt}`,\n      };\n    case 'shorter':\n      return {\n        system:\n          'You are an AI writing assistant that shortens existing text. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: `The existing text is: ${prompt}`,\n      };\n    case 'longer':\n      return {\n        system:\n          'You are an AI writing assistant that lengthens existing text. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: `The existing text is: ${prompt}`,\n      };\n    case 'fix':\n      return {\n        system:\n          'You are an AI writing assistant that fixes grammar and spelling errors in existing text. ' +\n          'Limit your response to no more than 200 characters, but make sure to construct complete sentences. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: `The existing text is: ${prompt}`,\n      };\n    case 'zap':\n      return {\n        system:\n          'You are an AI writing assistant that generates text based on a prompt. ' +\n          'You take an input from the user and a command for manipulating the text. ' +\n          'Use Markdown formatting when appropriate.',\n        userContent: `For this text: ${prompt}. You have to respect the command: ${command ?? ''}`,\n      };\n    default:\n      return { system: '', userContent: prompt };\n  }\n};\n\n/**\n * Adapter around {@link useCustomQuery} that exposes a Novel-compatible\n * `useCompletion`-style API (`completion` / `complete` / `isLoading`).\n *\n * It routes generative requests through the Intlayer AI backend\n * (`@intlayer/api` → `@intlayer/ai`) instead of the Vercel AI SDK.\n *\n * @param onError - Optional error callback (e.g. to display a toast).\n */\nexport const useAICompletion = (onError?: (error: Error) => void) => {\n  const { mutateAsync, isPending } = useCustomQuery();\n  const [completion, setCompletion] = useState('');\n\n  const complete = useCallback(\n    async (prompt: string, options: CompleteOptions): Promise<string> => {\n      const { option, command } = options.body;\n      const { system, userContent } = buildPromptParts(option, prompt, command);\n\n      try {\n        const result = await mutateAsync({\n          system,\n          messages: [{ role: 'user', content: userContent }],\n        });\n\n        const text = result?.data?.fileContent ?? '';\n        setCompletion(text);\n        return text;\n      } catch (error) {\n        onError?.(\n          error instanceof Error ? error : new Error('AI request failed')\n        );\n        return '';\n      }\n    },\n    [mutateAsync, onError]\n  );\n\n  const reset = useCallback(() => setCompletion(''), []);\n\n  return { completion, complete, isLoading: isPending, reset };\n};\n"],"mappings":";;;;;;;;;;;AAmCA,MAAM,oBACJ,QACA,QACA,YACgB;AAChB,SAAQ,QAAR;EACE,KAAK,WACH,QAAO;GACL,QACE;GAIF,aAAa;GACd;EACH,KAAK,UACH,QAAO;GACL,QACE;GAGF,aAAa,yBAAyB;GACvC;EACH,KAAK,UACH,QAAO;GACL,QACE;GAEF,aAAa,yBAAyB;GACvC;EACH,KAAK,SACH,QAAO;GACL,QACE;GAEF,aAAa,yBAAyB;GACvC;EACH,KAAK,MACH,QAAO;GACL,QACE;GAGF,aAAa,yBAAyB;GACvC;EACH,KAAK,MACH,QAAO;GACL,QACE;GAGF,aAAa,kBAAkB,OAAO,qCAAqC,WAAW;GACvF;EACH,QACE,QAAO;GAAE,QAAQ;GAAI,aAAa;GAAQ;;;;;;;;;;;;AAahD,MAAa,mBAAmB,YAAqC;CACnE,MAAM,EAAE,aAAa,cAAc,gBAAgB;CACnD,MAAM,CAAC,YAAY,iBAAiB,SAAS,GAAG;AA4BhD,QAAO;EAAE;EAAY,UA1BJ,YACf,OAAO,QAAgB,YAA8C;GACnE,MAAM,EAAE,QAAQ,YAAY,QAAQ;GACpC,MAAM,EAAE,QAAQ,gBAAgB,iBAAiB,QAAQ,QAAQ,QAAQ;AAEzE,OAAI;IAMF,MAAM,QAAO,MALQ,YAAY;KAC/B;KACA,UAAU,CAAC;MAAE,MAAM;MAAQ,SAAS;MAAa,CAAC;KACnD,CAAC,GAEmB,MAAM,eAAe;AAC1C,kBAAc,KAAK;AACnB,WAAO;YACA,OAAO;AACd,cACE,iBAAiB,QAAQ,wBAAQ,IAAI,MAAM,oBAAoB,CAChE;AACD,WAAO;;KAGX,CAAC,aAAa,QAAQ,CAKK;EAAE,WAAW;EAAW,OAFvC,kBAAkB,cAAc,GAAG,EAAE,EAAE,CAEK;EAAE"}

package/dist/esm/components/MarkdownEditor/imageUpload.mjs

@@ -0,0 +1,47 @@
+import { createImageUpload } from "./novel/plugins/upload-images.mjs";
+
+//#region src/components/MarkdownEditor/imageUpload.ts
+/**
+* Reads a file as a base64 data URL. Used as the default, backend-less image
+* handler so the editor works out of the box.
+*/
+const fileToBase64 = (file) => new Promise((resolve, reject) => {
+	const reader = new FileReader();
+	reader.onload = () => resolve(reader.result);
+	reader.onerror = () => reject(reader.error ?? /* @__PURE__ */ new Error("Read failed"));
+	reader.readAsDataURL(file);
+});
+/**
+* Preloads an image URL so the swap from placeholder to final image is seamless.
+*/
+const preloadImage = (url) => new Promise((resolve) => {
+	const image = new Image();
+	image.src = url;
+	image.onload = () => resolve(url);
+	image.onerror = () => resolve(url);
+});
+/**
+* Builds the Novel `UploadFn` used by the editor's paste / drop handlers and the
+* "Image" slash command. Falls back to inline base64 embedding when no custom
+* uploader is provided.
+*/
+const createEditorUploadFn = ({ uploadImage, onError, maxSizeMb = 20 } = {}) => createImageUpload({
+	onUpload: async (file) => {
+		return preloadImage(uploadImage ? await uploadImage(file) : await fileToBase64(file));
+	},
+	validateFn: (file) => {
+		if (!file.type.includes("image/")) {
+			onError?.(/* @__PURE__ */ new Error("File type not supported."));
+			return false;
+		}
+		if (file.size / 1024 / 1024 > maxSizeMb) {
+			onError?.(/* @__PURE__ */ new Error(`File size too big (max ${maxSizeMb}MB).`));
+			return false;
+		}
+		return true;
+	}
+});
+
+//#endregion
+export { createEditorUploadFn };
+//# sourceMappingURL=imageUpload.mjs.map

package/dist/esm/components/MarkdownEditor/imageUpload.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageUpload.mjs","names":[],"sources":["../../../../src/components/MarkdownEditor/imageUpload.ts"],"sourcesContent":["import { createImageUpload, type UploadFn } from './novel';\n\n/**\n * Uploads an image file and resolves to the URL that should be embedded in the\n * document. Provided by the consumer (e.g. wired to the asset backend).\n */\nexport type UploadImageFn = (file: File) => Promise<string>;\n\n/**\n * Reads a file as a base64 data URL. Used as the default, backend-less image\n * handler so the editor works out of the box.\n */\nconst fileToBase64 = (file: File): Promise<string> =>\n  new Promise((resolve, reject) => {\n    const reader = new FileReader();\n    reader.onload = () => resolve(reader.result as string);\n    reader.onerror = () => reject(reader.error ?? new Error('Read failed'));\n    reader.readAsDataURL(file);\n  });\n\n/**\n * Preloads an image URL so the swap from placeholder to final image is seamless.\n */\nconst preloadImage = (url: string): Promise<string> =>\n  new Promise((resolve) => {\n    const image = new Image();\n    image.src = url;\n    image.onload = () => resolve(url);\n    image.onerror = () => resolve(url);\n  });\n\nexport type CreateEditorUploadFnOptions = {\n  /**\n   * Custom uploader. When omitted, images are embedded inline as base64 data\n   * URLs (no backend required).\n   */\n  uploadImage?: UploadImageFn;\n  /** Called when validation fails (wrong type / too large). */\n  onError?: (error: Error) => void;\n  /** Maximum allowed file size in megabytes. Defaults to `20`. */\n  maxSizeMb?: number;\n};\n\n/**\n * Builds the Novel `UploadFn` used by the editor's paste / drop handlers and the\n * \"Image\" slash command. Falls back to inline base64 embedding when no custom\n * uploader is provided.\n */\nexport const createEditorUploadFn = ({\n  uploadImage,\n  onError,\n  maxSizeMb = 20,\n}: CreateEditorUploadFnOptions = {}): UploadFn =>\n  createImageUpload({\n    onUpload: async (file) => {\n      const url = uploadImage\n        ? await uploadImage(file)\n        : await fileToBase64(file);\n\n      return preloadImage(url);\n    },\n    validateFn: (file) => {\n      if (!file.type.includes('image/')) {\n        onError?.(new Error('File type not supported.'));\n        return false;\n      }\n\n      if (file.size / 1024 / 1024 > maxSizeMb) {\n        onError?.(new Error(`File size too big (max ${maxSizeMb}MB).`));\n        return false;\n      }\n\n      return true;\n    },\n  });\n"],"mappings":";;;;;;;AAYA,MAAM,gBAAgB,SACpB,IAAI,SAAS,SAAS,WAAW;CAC/B,MAAM,SAAS,IAAI,YAAY;AAC/B,QAAO,eAAe,QAAQ,OAAO,OAAiB;AACtD,QAAO,gBAAgB,OAAO,OAAO,yBAAS,IAAI,MAAM,cAAc,CAAC;AACvE,QAAO,cAAc,KAAK;EAC1B;;;;AAKJ,MAAM,gBAAgB,QACpB,IAAI,SAAS,YAAY;CACvB,MAAM,QAAQ,IAAI,OAAO;AACzB,OAAM,MAAM;AACZ,OAAM,eAAe,QAAQ,IAAI;AACjC,OAAM,gBAAgB,QAAQ,IAAI;EAClC;;;;;;AAmBJ,MAAa,wBAAwB,EACnC,aACA,SACA,YAAY,OACmB,EAAE,KACjC,kBAAkB;CAChB,UAAU,OAAO,SAAS;AAKxB,SAAO,aAJK,cACR,MAAM,YAAY,KAAK,GACvB,MAAM,aAAa,KAAK,CAEJ;;CAE1B,aAAa,SAAS;AACpB,MAAI,CAAC,KAAK,KAAK,SAAS,SAAS,EAAE;AACjC,6BAAU,IAAI,MAAM,2BAA2B,CAAC;AAChD,UAAO;;AAGT,MAAI,KAAK,OAAO,OAAO,OAAO,WAAW;AACvC,6BAAU,IAAI,MAAM,0BAA0B,UAAU,MAAM,CAAC;AAC/D,UAAO;;AAGT,SAAO;;CAEV,CAAC"}

package/dist/esm/components/MarkdownEditor/index.mjs

@@ -0,0 +1,4 @@
+import { createEditorUploadFn } from "./imageUpload.mjs";
+import { MarkdownEditor } from "./MarkdownEditor.mjs";
+
+export { MarkdownEditor, createEditorUploadFn };