strapi-content-embeddings 0.2.0 → 0.2.2

package/dist/admin/index.mjs

@@ -1,6 +1,753 @@
-import { i } from "../_chunks/index-ifqYByO5.mjs";
-import "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from "react";
+import { Box, Typography, Loader, Button, Modal, Field, TextInput, SingleSelect, SingleSelectOption, Flex } from "@strapi/design-system";
+import { useNavigate } from "react-router-dom";
+import styled, { createGlobalStyle } from "styled-components";
+import qs from "qs";
+import { useFetchClient, useNotification, unstable_useContentManagerContext } from "@strapi/strapi/admin";
+import { Eye, Plus } from "@strapi/icons";
+import { MDXEditor, headingsPlugin, listsPlugin, quotePlugin, thematicBreakPlugin, linkPlugin, linkDialogPlugin, markdownShortcutPlugin, toolbarPlugin, UndoRedo, Separator, BlockTypeSelect, BoldItalicUnderlineToggles, CreateLink, ListsToggle } from "@mdxeditor/editor";
+const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
+  const v = glob[path];
+  if (v) {
+    return typeof v === "function" ? v() : Promise.resolve(v);
+  }
+  return new Promise((_, reject) => {
+    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
+      reject.bind(
+        null,
+        new Error(
+          "Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
+        )
+      )
+    );
+  });
+};
+const PLUGIN_ID = "strapi-content-embeddings";
+const getTranslation = (id) => `${PLUGIN_ID}.${id}`;
+const Initializer = ({ setPlugin }) => {
+  const ref = useRef(setPlugin);
+  useEffect(() => {
+    ref.current(PLUGIN_ID);
+  }, []);
+  return null;
+};
+const MDXEditorStyles = createGlobalStyle`
+  /* MDXEditor CSS Variables */
+  :root {
+    --mdx-spacing-0_5: 0.125rem;
+    --mdx-spacing-1: 0.25rem;
+    --mdx-spacing-1_5: 0.375rem;
+    --mdx-spacing-2: 0.5rem;
+    --mdx-spacing-3: 0.75rem;
+    --mdx-spacing-4: 1rem;
+    --mdx-spacing-36: 9rem;
+    --mdx-radius-base: 0.25rem;
+    --mdx-radius-medium: 0.375rem;
+    --mdx-text-sm: 0.875rem;
+    --mdx-baseBg: #f6f6f9;
+    --mdx-baseBgActive: #e8e8ec;
+    --mdx-basePageBg: #ffffff;
+    --mdx-baseBorder: #dcdce4;
+    --mdx-baseBorderHover: #b9bbc6;
+    --mdx-baseBase: #e0e1e6;
+    --mdx-baseTextContrast: #1c2024;
+    --mdx-accentText: #4945ff;
+  }
+
+  /* Toolbar Root - critical for horizontal layout */
+  [class*="_toolbarRoot"] {
+    z-index: 2;
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    gap: var(--mdx-spacing-1);
+    border-radius: var(--mdx-radius-medium);
+    padding: var(--mdx-spacing-1_5);
+    align-items: center !important;
+    overflow-x: auto;
+    position: sticky;
+    top: 0;
+    background-color: var(--mdx-baseBg) !important;
+    border-bottom: 1px solid var(--mdx-baseBorder);
+    width: 100%;
+  }
+
+  [class*="_toolbarRoot"] div[role='separator'] {
+    margin: var(--mdx-spacing-2) var(--mdx-spacing-1);
+    border-left: 1px solid var(--mdx-baseBorder);
+    border-right: 1px solid var(--mdx-baseBase);
+    height: var(--mdx-spacing-4);
+  }
+
+  [class*="_toolbarRoot"] svg {
+    color: var(--mdx-baseTextContrast);
+    display: block;
+  }
+
+  /* Toolbar button groups */
+  [class*="_toolbarGroupOfGroups"] {
+    display: flex;
+    margin: 0 var(--mdx-spacing-1);
+  }
+
+  [class*="_toolbarToggleSingleGroup"] {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  /* Toolbar buttons and toggle items */
+  [class*="_toolbarToggleItem"],
+  [class*="_toolbarButton"] {
+    border: 0;
+    background-color: transparent;
+    font-size: inherit;
+    appearance: none;
+    box-sizing: border-box;
+    cursor: pointer;
+    padding: var(--mdx-spacing-0_5);
+    border-radius: var(--mdx-radius-base);
+  }
+
+  [class*="_toolbarToggleItem"]:hover,
+  [class*="_toolbarButton"]:hover {
+    background-color: var(--mdx-baseBgActive);
+  }
+
+  [class*="_toolbarToggleItem"][data-state='on'],
+  [class*="_toolbarButton"][data-state='on'],
+  [class*="_toolbarToggleItem"]:active,
+  [class*="_toolbarButton"]:active {
+    color: var(--mdx-baseTextContrast);
+    background-color: var(--mdx-baseBgActive);
+  }
+
+  /* Block type select dropdown */
+  [class*="_toolbarNodeKindSelectTrigger"],
+  [class*="_selectTrigger"] {
+    border: 0;
+    display: flex;
+    color: inherit;
+    align-items: center;
+    width: var(--mdx-spacing-36);
+    padding: var(--mdx-spacing-0_5) var(--mdx-spacing-1);
+    padding-inline-start: var(--mdx-spacing-2);
+    border-radius: var(--mdx-radius-medium);
+    white-space: nowrap;
+    font-size: var(--mdx-text-sm);
+    background-color: var(--mdx-basePageBg);
+    margin: 0 var(--mdx-spacing-1);
+    cursor: pointer;
+  }
+
+  /* Dropdown containers */
+  [class*="_toolbarNodeKindSelectContainer"],
+  [class*="_selectContainer"] {
+    filter: drop-shadow(0 2px 2px rgb(0 0 0 / 0.2));
+    z-index: 100;
+    width: var(--mdx-spacing-36);
+    border-radius: var(--mdx-radius-base);
+    background-color: var(--mdx-basePageBg);
+    font-size: var(--mdx-text-sm);
+  }
+
+  /* Select items */
+  [class*="_toolbarNodeKindSelectItem"],
+  [class*="_selectItem"] {
+    cursor: pointer;
+    display: flex;
+    padding: var(--mdx-spacing-2);
+  }
+
+  [class*="_toolbarNodeKindSelectItem"][data-highlighted],
+  [class*="_selectItem"][data-highlighted],
+  [class*="_toolbarNodeKindSelectItem"][data-state='checked'],
+  [class*="_selectItem"][data-state='checked'] {
+    background-color: var(--mdx-baseBg);
+    outline: none;
+  }
+
+  /* Dropdown arrow */
+  [class*="_selectDropdownArrow"] {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+
+  /* Content editable area */
+  [class*="_contentEditable"] {
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--mdx-baseTextContrast);
+    padding: var(--mdx-spacing-3);
+    min-height: 200px;
+    outline: none;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    font-size: 14px;
+    line-height: 1.6;
+  }
+
+  [class*="_contentEditable"]:focus {
+    outline: none;
+  }
+
+  /* Placeholder positioning - ensure it's at the top */
+  [class*="_contentEditable"] {
+    position: relative;
+  }
+
+  [class*="_contentEditable"][data-placeholder]::before {
+    position: absolute;
+    top: var(--mdx-spacing-3);
+    left: var(--mdx-spacing-3);
+    color: #a5a5ba;
+    pointer-events: none;
+  }
+
+  /* MDXEditor/Lexical placeholder styles */
+  [class*="_placeholder"],
+  [class*="ContentEditable__placeholder"],
+  [class*="editor-placeholder"] {
+    position: absolute !important;
+    top: var(--mdx-spacing-3) !important;
+    left: var(--mdx-spacing-3) !important;
+    color: #a5a5ba;
+    pointer-events: none;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+    display: inline-block;
+  }
+
+  /* Editor root wrapper needs relative positioning for placeholder */
+  [class*="_rootContentEditableWrapper"],
+  [class*="_editorWrapper"] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Heading styles */
+  [class*="_contentEditable"] h1 {
+    font-size: 1.75rem;
+    font-weight: 600;
+    margin: 0 0 1rem;
+  }
+
+  [class*="_contentEditable"] h2 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 1rem 0 0.75rem;
+  }
+
+  [class*="_contentEditable"] h3 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin: 1rem 0 0.5rem;
+  }
+
+  /* Paragraph and list styles */
+  [class*="_contentEditable"] p {
+    margin: 0 0 1rem;
+  }
+
+  [class*="_contentEditable"] ul,
+  [class*="_contentEditable"] ol {
+    margin: 0 0 1rem;
+    padding-left: 1.5rem;
+  }
+
+  [class*="_contentEditable"] li {
+    margin: 0.25rem 0;
+  }
+
+  /* Code styles */
+  [class*="_contentEditable"] code {
+    background: #f0f0f5;
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-family: "Monaco", "Menlo", monospace;
+    font-size: 0.9em;
+  }
+
+  [class*="_contentEditable"] pre {
+    background: #2d2d2d;
+    color: #f8f8f2;
+    padding: 1rem;
+    border-radius: 4px;
+    overflow-x: auto;
+    margin: 0 0 1rem;
+  }
+
+  [class*="_contentEditable"] pre code {
+    background: none;
+    padding: 0;
+  }
+
+  /* Blockquote */
+  [class*="_contentEditable"] blockquote {
+    border-left: 3px solid #dcdce4;
+    margin: 0 0 1rem;
+    padding-left: 1rem;
+    color: #666;
+  }
+
+  /* Links */
+  [class*="_contentEditable"] a {
+    color: #4945ff;
+    text-decoration: underline;
+  }
+
+  /* Horizontal rule */
+  [class*="_contentEditable"] hr {
+    border: none;
+    border-top: 1px solid #dcdce4;
+    margin: 1.5rem 0;
+  }
+
+  /* Editor root */
+  [class*="_editorRoot"] {
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+    color: var(--mdx-baseTextContrast);
+    background: var(--mdx-basePageBg);
+  }
+
+  /* Link dialog */
+  [class*="_linkDialogPopoverContent"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--mdx-spacing-2);
+    padding: var(--mdx-spacing-3);
+    background-color: var(--mdx-basePageBg);
+    border-radius: var(--mdx-radius-medium);
+    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+    z-index: 100;
+  }
+
+  [class*="_linkDialogInputWrapper"] {
+    display: flex;
+    gap: var(--mdx-spacing-1);
+  }
+
+  [class*="_linkDialogInputWrapper"] input {
+    flex: 1;
+    padding: var(--mdx-spacing-1) var(--mdx-spacing-2);
+    border: 1px solid var(--mdx-baseBorder);
+    border-radius: var(--mdx-radius-base);
+    font-size: var(--mdx-text-sm);
+  }
+
+  [class*="_linkDialogInputWrapper"] button {
+    padding: var(--mdx-spacing-1) var(--mdx-spacing-2);
+    background-color: var(--mdx-accentText);
+    color: white;
+    border: none;
+    border-radius: var(--mdx-radius-base);
+    cursor: pointer;
+  }
+
+  /* Popover positioning */
+  [data-radix-popper-content-wrapper] {
+    z-index: 100 !important;
+  }
+`;
+const EditorWrapper = styled(Box)`
+  border: 1px solid ${({ $isFocused }) => $isFocused ? "#4945ff" : "#dcdce4"};
+  border-radius: 4px;
+  overflow: hidden;
+  background: #fff;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  box-shadow: ${({ $isFocused }) => $isFocused ? "0 0 0 2px rgba(73, 69, 255, 0.2)" : "none"};
+`;
+function ToolbarContents() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(UndoRedo, {}),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(BlockTypeSelect, {}),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(BoldItalicUnderlineToggles, {}),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(CreateLink, {}),
+    /* @__PURE__ */ jsx(Separator, {}),
+    /* @__PURE__ */ jsx(ListsToggle, {})
+  ] });
+}
+function MarkdownEditor({ content, onChange, height = 300 }) {
+  const [isFocused, setIsFocused] = useState(false);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(MDXEditorStyles, {}),
+    /* @__PURE__ */ jsx(
+      EditorWrapper,
+      {
+        $isFocused: isFocused,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        children: /* @__PURE__ */ jsx("div", { style: { minHeight: `${height}px` }, children: /* @__PURE__ */ jsx(
+          MDXEditor,
+          {
+            markdown: content,
+            onChange,
+            placeholder: "Write your content here...",
+            plugins: [
+              headingsPlugin(),
+              listsPlugin(),
+              quotePlugin(),
+              thematicBreakPlugin(),
+              linkPlugin(),
+              linkDialogPlugin(),
+              markdownShortcutPlugin(),
+              toolbarPlugin({
+                toolbarContents: ToolbarContents
+              })
+            ]
+          }
+        ) })
+      }
+    )
+  ] });
+}
+styled(Typography)`
+  display: block;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+`;
+const CHUNK_SIZE = 4e3;
+function EmbeddingsModal() {
+  const { post, get } = useFetchClient();
+  const { toggleNotification } = useNotification();
+  const navigate = useNavigate();
+  const context = unstable_useContentManagerContext();
+  const { form, id, slug, collectionType } = context;
+  const modifiedValues = form?.values || {};
+  const [isVisible, setIsVisible] = useState(false);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [fieldName, setFieldName] = useState("");
+  const [availableFields, setAvailableFields] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isCheckingExisting, setIsCheckingExisting] = useState(true);
+  const [existingEmbedding, setExistingEmbedding] = useState(null);
+  useEffect(() => {
+    async function checkExistingEmbedding() {
+      if (!id || !slug) {
+        setIsCheckingExisting(false);
+        return;
+      }
+      try {
+        const query = qs.stringify({
+          filters: {
+            metadata: { $containsi: id }
+          }
+        });
+        const response = await get(`/${PLUGIN_ID}/embeddings/find?${query}`);
+        const embeddings = response.data?.data || response.data || [];
+        if (Array.isArray(embeddings) && embeddings.length > 0) {
+          setExistingEmbedding({
+            documentId: embeddings[0].documentId,
+            title: embeddings[0].title,
+            content: embeddings[0].content
+          });
+        }
+      } catch (error) {
+        console.error("Failed to check for existing embedding:", error);
+      } finally {
+        setIsCheckingExisting(false);
+      }
+    }
+    checkExistingEmbedding();
+  }, [id, slug, get]);
+  const extractTextFromField = useCallback((value, depth = 0) => {
+    if (!value || depth > 5) return "";
+    if (typeof value === "string") {
+      return value.trim();
+    }
+    if (Array.isArray(value)) {
+      const texts = [];
+      for (const item of value) {
+        if (item && typeof item === "object" && item.__component) {
+          for (const [key, fieldValue] of Object.entries(item)) {
+            if (key === "__component" || key === "id") continue;
+            const extracted = extractTextFromField(fieldValue, depth + 1);
+            if (extracted) texts.push(extracted);
+          }
+        } else if (item && item.children) {
+          const blockText = item.children.map((child) => child.text || "").join("");
+          if (blockText) texts.push(blockText);
+        } else if (item && typeof item === "object") {
+          const extracted = extractTextFromField(item, depth + 1);
+          if (extracted) texts.push(extracted);
+        }
+      }
+      return texts.join("\n\n").trim();
+    }
+    if (typeof value === "object") {
+      const texts = [];
+      for (const [key, fieldValue] of Object.entries(value)) {
+        if (["id", "__component", "documentId", "createdAt", "updatedAt"].includes(key)) continue;
+        const extracted = extractTextFromField(fieldValue, depth + 1);
+        if (extracted) texts.push(extracted);
+      }
+      return texts.join("\n\n").trim();
+    }
+    return "";
+  }, []);
+  const isDynamicZone = (value) => {
+    return Array.isArray(value) && value.length > 0 && value[0]?.__component;
+  };
+  const detectTextFields = useCallback(() => {
+    if (!modifiedValues) return [];
+    const fields = [];
+    for (const [name, value] of Object.entries(modifiedValues)) {
+      if (["id", "documentId", "createdAt", "updatedAt", "publishedAt", "locale", "localizations"].includes(name)) {
+        continue;
+      }
+      const textValue = extractTextFromField(value);
+      if (textValue && textValue.length > 0) {
+        let label = name.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+        if (isDynamicZone(value)) {
+          const componentCount = value.length;
+          label += ` (${componentCount} component${componentCount > 1 ? "s" : ""})`;
+        }
+        fields.push({
+          name,
+          label,
+          value: textValue,
+          charCount: textValue.length
+        });
+      }
+    }
+    fields.sort((a, b) => b.charCount - a.charCount);
+    return fields;
+  }, [modifiedValues, extractTextFromField]);
+  useEffect(() => {
+    const fields = detectTextFields();
+    setAvailableFields(fields);
+    if (fields.length > 0 && !fieldName) {
+      setFieldName(fields[0].name);
+      setContent(fields[0].value);
+    }
+  }, [detectTextFields, fieldName]);
+  const handleFieldChange = (selectedFieldName) => {
+    setFieldName(selectedFieldName);
+    const selectedField = availableFields.find((f) => f.name === selectedFieldName);
+    if (selectedField) {
+      setContent(selectedField.value);
+    }
+  };
+  const contentLength = content.length;
+  const willChunk = contentLength > CHUNK_SIZE;
+  const estimatedChunks = willChunk ? Math.ceil(contentLength / (CHUNK_SIZE - 200)) : 1;
+  const isSaved = !!id;
+  function generateMetadata() {
+    return {
+      source: "content-manager",
+      collectionType: slug || collectionType || "unknown",
+      fieldName: fieldName || "content",
+      documentId: id,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+  }
+  const isValid = title.trim() && content.trim();
+  function handleOpenCreate() {
+    setTitle("");
+    const fields = detectTextFields();
+    setAvailableFields(fields);
+    if (fields.length > 0) {
+      setFieldName(fields[0].name);
+      setContent(fields[0].value);
+    }
+    setIsVisible(true);
+  }
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!title.trim()) {
+      toggleNotification({
+        type: "warning",
+        message: "Embeddings title is required"
+      });
+      return;
+    }
+    if (!content.trim()) {
+      toggleNotification({
+        type: "warning",
+        message: "Embeddings content is required"
+      });
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const contentToEmbed = content.trim();
+      const shouldChunk = contentToEmbed.length > CHUNK_SIZE;
+      const chunks = shouldChunk ? Math.ceil(contentToEmbed.length / CHUNK_SIZE) : 1;
+      if (shouldChunk) {
+        console.log(`Creating chunked embedding: ${contentToEmbed.length} chars (~${chunks} parts)`);
+      }
+      const result = await post(`/${PLUGIN_ID}/embeddings/create-embedding`, {
+        data: {
+          title: title.trim(),
+          content: contentToEmbed,
+          collectionType: slug || collectionType,
+          fieldName,
+          metadata: generateMetadata(),
+          autoChunk: shouldChunk
+        }
+      });
+      const responseData = result?.data || result;
+      if (responseData?.documentId) {
+        setExistingEmbedding({
+          documentId: responseData.documentId,
+          title: responseData.title,
+          content: responseData.content
+        });
+      }
+      setIsVisible(false);
+      const message = shouldChunk ? `Embedding created and chunked into ${chunks} parts` : "Embedding created successfully";
+      toggleNotification({ type: "success", message });
+    } catch (error) {
+      console.error("Failed to create embedding:", error);
+      toggleNotification({
+        type: "danger",
+        message: error.message || "Failed to create embedding"
+      });
+    } finally {
+      setIsLoading(false);
+    }
+  }
+  function handleViewEmbedding() {
+    if (existingEmbedding?.documentId) {
+      navigate(`/plugins/${PLUGIN_ID}/embeddings/${existingEmbedding.documentId}`);
+    }
+  }
+  if (!form || !id) {
+    return null;
+  }
+  if (isCheckingExisting) {
+    return /* @__PURE__ */ jsx(Box, { paddingTop: 2, children: /* @__PURE__ */ jsx(Loader, { small: true, children: "Checking embeddings..." }) });
+  }
+  const submitButtonText = isLoading ? "Creating..." : "Create Embedding";
+  return /* @__PURE__ */ jsxs(Box, { paddingTop: 2, children: [
+    existingEmbedding ? /* @__PURE__ */ jsx(Button, { onClick: handleViewEmbedding, startIcon: /* @__PURE__ */ jsx(Eye, {}), fullWidth: true, children: "View Embedding" }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleOpenCreate,
+        startIcon: /* @__PURE__ */ jsx(Plus, {}),
+        disabled: !isSaved,
+        fullWidth: true,
+        children: "Create Embedding"
+      }
+    ),
+    !isSaved && !existingEmbedding && /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", style: { display: "block", marginTop: "0.5rem" }, children: "Save content first to create embedding" }),
+    /* @__PURE__ */ jsx(Modal.Root, { open: isVisible, onOpenChange: setIsVisible, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+      /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: "Create Embedding from Content" }) }),
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              placeholder: "Enter embedding title",
+              value: title,
+              onChange: (e) => setTitle(e.target.value)
+            }
+          )
+        ] }) }),
+        availableFields.length > 0 && /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+          /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Source Field" }),
+            /* @__PURE__ */ jsx(Field.Hint, { children: "Select which field to use for the embedding content" })
+          ] }),
+          /* @__PURE__ */ jsx(
+            SingleSelect,
+            {
+              value: fieldName,
+              onChange: (value) => handleFieldChange(value),
+              placeholder: "Select a field",
+              children: availableFields.map((field) => /* @__PURE__ */ jsxs(SingleSelectOption, { value: field.name, children: [
+                field.label,
+                " (",
+                field.charCount.toLocaleString(),
+                " chars)"
+              ] }, field.name))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Field.Root, { children: /* @__PURE__ */ jsx(Field.Label, { children: "Content Preview" }) }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+              contentLength.toLocaleString(),
+              " characters",
+              willChunk && /* @__PURE__ */ jsxs(Typography, { textColor: "primary600", children: [
+                " (~",
+                estimatedChunks,
+                " chunks)"
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            MarkdownEditor,
+            {
+              content,
+              onChange: setContent,
+              height: 200
+            }
+          )
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+        /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: "Cancel" }) }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: handleSubmit,
+            disabled: isLoading || !isValid,
+            loading: isLoading,
+            children: submitButtonText
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+function EmbeddingsWidget() {
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(EmbeddingsModal, {}) });
+}
+const index = {
+  register(app) {
+    app.registerPlugin({
+      id: PLUGIN_ID,
+      initializer: Initializer,
+      isReady: false,
+      name: PLUGIN_ID
+    });
+  },
+  bootstrap(app) {
+    app.getPlugin("content-manager").injectComponent("editView", "right-links", {
+      name: "open-ai-embeddings",
+      Component: () => /* @__PURE__ */ jsx(EmbeddingsWidget, {})
+    });
+  },
+  async registerTrads(app) {
+    const { locales } = app;
+    const importedTranslations = await Promise.all(
+      locales.map((locale) => {
+        return __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("../_chunks/en-Byx4XI2L.mjs") }), `./translations/${locale}.json`, 3).then(({ default: data }) => {
+          return {
+            data: getTranslation(data),
+            locale
+          };
+        }).catch(() => {
+          return {
+            data: {},
+            locale
+          };
+        });
+      })
+    );
+    return importedTranslations;
+  }
+};
 export {
-  i as default
+  index as default
 };
-//# sourceMappingURL=index.mjs.map