strapi-content-embeddings 0.1.7 → 0.1.9

package/README.md

@@ -11,8 +11,9 @@ A Strapi v5 plugin that creates vector embeddings from your content using OpenAI
 - **Content Manager Integration**: Create embeddings directly from any content type's edit view
 - **Standalone Embeddings**: Create embeddings independent of content types
 - **Multiple Embedding Models**: Support for OpenAI's text-embedding-3-small, text-embedding-3-large, and text-embedding-ada-002
-- **Database Sync**: Sync embeddings from Neon DB to Strapi with cron-compatible endpoints
+- **Database Sync**: Sync embeddings from Neon DB to Strapi via admin UI or API endpoints
 - **Automatic Chunking**: Split large content into multiple embeddings with overlap for context preservation
+- **Content Preprocessing**: Automatically strips HTML and Markdown formatting for cleaner embeddings
 
 ## Requirements
 
@@ -393,6 +394,73 @@ Each chunk embedding includes metadata:
 }
 ```
 
+## Content Preprocessing
+
+The plugin automatically preprocesses content before creating embeddings to improve semantic search quality. This is enabled by default.
+
+### What Gets Cleaned
+
+- **HTML tags**: Stripped while preserving text content
+- **Markdown syntax**: Headers (`#`), bold (`**`), italic (`*`), links, lists, code blocks
+- **Whitespace**: Normalized (multiple spaces/newlines collapsed)
+
+### Why Preprocess?
+
+Raw markdown/HTML formatting adds noise to embeddings without adding semantic meaning:
+
+```
+Input:  "## Features\n- **Fast** search\n- <b>Reliable</b>"
+Output: "Features: Fast search. Reliable"
+```
+
+Both produce the same semantic meaning, but the cleaned version creates better embeddings for search.
+
+### Configuration
+
+Preprocessing is enabled by default. To disable:
+
+```typescript
+// config/plugins.ts
+export default ({ env }) => ({
+  "strapi-content-embeddings": {
+    enabled: true,
+    config: {
+      openAIApiKey: env("OPENAI_API_KEY"),
+      neonConnectionString: env("NEON_CONNECTION_STRING"),
+      preprocessContent: false,  // Disable preprocessing
+    },
+  },
+});
+```
+
+> **Note**: The original content is always preserved in Strapi. Preprocessing only affects the text sent to OpenAI for embedding generation.
+
+## Admin Sync UI
+
+The plugin includes a built-in sync interface accessible from the admin panel. Click the **Sync** button in the Content Embeddings page header.
+
+### Available Operations
+
+| Operation | Description |
+|-----------|-------------|
+| **Check Status** | Compare Neon and Strapi databases, shows counts and differences |
+| **Sync from Neon** | Import embeddings from Neon to Strapi (with preview option) |
+| **Recreate All** | Delete all Neon embeddings and recreate from Strapi data |
+
+### Sync Workflow
+
+1. Click **Sync** button to open the sync modal
+2. View current sync status (Neon vs Strapi counts)
+3. Select **Sync from Neon** operation
+4. Click **Preview Sync** to see what changes would be made
+5. Review the results (Created/Updated/Removed counts)
+6. Click **Apply Changes** to execute the sync
+
+### Sync Options
+
+- **Dry Run**: Preview changes without applying them (enabled by default)
+- **Remove Orphans**: Delete Strapi entries that don't exist in Neon
+
 ## How It Works
 
 1. **Embedding Creation**: When you create an embedding, the content is sent to OpenAI's embedding API to generate a vector representation (1536 or 3072 dimensions depending on the model).
@@ -460,4 +528,3 @@ Configure these in **Settings > Roles** for each admin role.
 ## License
 
 MIT
-# strapi-content-embeddings

package/dist/_chunks/{App-CA5bQnKQ.js → App-ByRBbkZn.js}

@@ -7,7 +7,7 @@ const react = require("react");
 const designSystem = require("@strapi/design-system");
 const icons = require("@strapi/icons");
 const qs = require("qs");
-const index = require("./index-CVCA8dDp.js");
+const index = require("./index-TWbcT-zJ.js");
 const styled = require("styled-components");
 const ReactMarkdown = require("react-markdown");
 const reactIntl = require("react-intl");
@@ -468,6 +468,383 @@ function ChatModal() {
     ] }) })
   ] });
 }
+const SYNC_BASE = `/${index.PLUGIN_ID}`;
+const syncApi = {
+  getStatus: async (fetchClient) => {
+    const response = await fetchClient.get(`${SYNC_BASE}/sync/status`);
+    return response.data;
+  },
+  syncFromNeon: async (fetchClient, options) => {
+    const queryString = options ? `?${qs__default.default.stringify(options)}` : "";
+    const response = await fetchClient.post(`${SYNC_BASE}/sync${queryString}`);
+    return response.data;
+  },
+  recreateAll: async (fetchClient) => {
+    const response = await fetchClient.post(`${SYNC_BASE}/recreate`);
+    return response.data;
+  }
+};
+function StatCard({ label, value, subtitle, variant = "default" }) {
+  const bgColors = {
+    default: "neutral100",
+    success: "success100",
+    warning: "warning100",
+    danger: "danger100"
+  };
+  const textColors = {
+    default: "neutral800",
+    success: "success700",
+    warning: "warning700",
+    danger: "danger700"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    designSystem.Box,
+    {
+      padding: 4,
+      background: bgColors[variant],
+      hasRadius: true,
+      borderColor: "neutral200",
+      style: { textAlign: "center", minWidth: "120px" },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", style: { textTransform: "uppercase", fontSize: "11px" }, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "alpha", textColor: textColors[variant], fontWeight: "bold", children: value }) }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: subtitle }) })
+      ]
+    }
+  );
+}
+function SyncModal({ isOpen, onClose, onSyncComplete }) {
+  const fetchClient = admin.useFetchClient();
+  const [operation, setOperation] = react.useState("status");
+  const [removeOrphans, setRemoveOrphans] = react.useState(false);
+  const [dryRun, setDryRun] = react.useState(true);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const [status, setStatus] = react.useState(null);
+  const [syncResult, setSyncResult] = react.useState(null);
+  const [recreateResult, setRecreateResult] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  react.useEffect(() => {
+    if (isOpen) {
+      fetchStatus();
+    }
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (!isOpen) {
+      setSyncResult(null);
+      setRecreateResult(null);
+      setError(null);
+      setOperation("status");
+      setDryRun(true);
+      setRemoveOrphans(false);
+    }
+  }, [isOpen]);
+  const fetchStatus = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const result = await syncApi.getStatus(fetchClient);
+      setStatus(result);
+    } catch (err) {
+      setError(err.message || "Failed to fetch sync status");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleExecute = async () => {
+    setIsLoading(true);
+    setError(null);
+    setSyncResult(null);
+    setRecreateResult(null);
+    try {
+      if (operation === "status") {
+        await fetchStatus();
+      } else if (operation === "sync") {
+        const result = await syncApi.syncFromNeon(fetchClient, { removeOrphans, dryRun });
+        setSyncResult(result);
+        if (!dryRun && onSyncComplete) {
+          onSyncComplete();
+        }
+      } else if (operation === "recreate") {
+        const result = await syncApi.recreateAll(fetchClient);
+        setRecreateResult(result);
+        if (onSyncComplete) {
+          onSyncComplete();
+        }
+      }
+    } catch (err) {
+      setError(err.message || "Operation failed");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const renderStatus = () => {
+    if (!status) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 5, background: "neutral0", shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Database, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Sync Status" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { active: status.inSync, size: "S", children: status.inSync ? "In Sync" : "Out of Sync" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 4, justifyContent: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Neon DB",
+            value: status.neonCount,
+            subtitle: "embeddings"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Strapi DB",
+            value: status.strapiCount,
+            subtitle: "embeddings"
+          }
+        )
+      ] }),
+      !status.inSync && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 3, background: "warning100", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "warning700", children: "Differences Found" }),
+          status.missingInStrapi > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "warning700", children: [
+            "• ",
+            status.missingInStrapi,
+            " embeddings missing in Strapi (will be created)"
+          ] }),
+          status.missingInNeon > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", children: [
+            "• ",
+            status.missingInNeon,
+            " orphaned entries in Strapi (not in Neon)"
+          ] }),
+          status.contentDifferences > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "warning700", children: [
+            "• ",
+            status.contentDifferences,
+            " entries with content differences"
+          ] })
+        ] }) })
+      ] })
+    ] }) });
+  };
+  const renderSyncResult = () => {
+    if (!syncResult) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 5, background: syncResult.success ? "success100" : "danger100", shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: syncResult.dryRun ? "Preview Results" : "Sync Results" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { active: syncResult.success, children: syncResult.success ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Check, { width: 12, height: 12 }),
+          "Success"
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 1, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, { width: 12, height: 12 }),
+          "Failed"
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, justifyContent: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Created",
+            value: syncResult.actions.created,
+            variant: syncResult.actions.created > 0 ? "success" : "default"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Updated",
+            value: syncResult.actions.updated,
+            variant: syncResult.actions.updated > 0 ? "warning" : "default"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Removed",
+            value: syncResult.actions.orphansRemoved,
+            variant: syncResult.actions.orphansRemoved > 0 ? "danger" : "default"
+          }
+        )
+      ] }),
+      syncResult.errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 3, background: "danger100", hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "danger700", children: "Errors" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
+          syncResult.errors.slice(0, 3).map((err, i) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", children: [
+            "• ",
+            err
+          ] }, i)),
+          syncResult.errors.length > 3 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", fontWeight: "bold", children: [
+            "+ ",
+            syncResult.errors.length - 3,
+            " more errors"
+          ] })
+        ] })
+      ] }),
+      syncResult.dryRun && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "default", closeLabel: "Close", children: 'This was a preview. No changes were made. Click "Apply Changes" below to execute the sync.' }) })
+    ] }) });
+  };
+  const renderRecreateResult = () => {
+    if (!recreateResult) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 5, background: recreateResult.success ? "success100" : "danger100", shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Recreate Results" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Badge, { active: recreateResult.success, children: recreateResult.success ? "Success" : "Failed" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 3, justifyContent: "center", wrap: "wrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Processed",
+            value: recreateResult.totalProcessed
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Created",
+            value: recreateResult.created,
+            variant: "success"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          StatCard,
+          {
+            label: "Failed",
+            value: recreateResult.failed,
+            variant: recreateResult.failed > 0 ? "danger" : "default"
+          }
+        )
+      ] }),
+      recreateResult.errors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 3, background: "danger100", hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", textColor: "danger700", children: "Errors" }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: recreateResult.errors.slice(0, 3).map((err, i) => /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "danger600", children: [
+          "• ",
+          err
+        ] }, i)) })
+      ] })
+    ] }) });
+  };
+  const getButtonLabel = () => {
+    if (operation === "status") return "Refresh Status";
+    if (operation === "sync") return dryRun ? "Preview Sync" : "Run Sync";
+    if (operation === "recreate") return "Recreate All";
+    return "Execute";
+  };
+  const handleApplyChanges = async () => {
+    setIsLoading(true);
+    setError(null);
+    setSyncResult(null);
+    try {
+      const result = await syncApi.syncFromNeon(fetchClient, { removeOrphans, dryRun: false });
+      setSyncResult(result);
+      if (onSyncComplete) {
+        onSyncComplete();
+      }
+    } catch (err) {
+      setError(err.message || "Failed to apply changes");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const showApplyButton = syncResult?.dryRun && syncResult?.success;
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: "Database Sync" })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 5, children: [
+      error && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", closeLabel: "Close", onClose: () => setError(null), children: error }),
+      isLoading && !status ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading status..." }) }) : renderStatus(),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 5, background: "neutral0", shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Select Operation" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          designSystem.SingleSelect,
+          {
+            value: operation,
+            onChange: (value) => setOperation(value),
+            disabled: isLoading,
+            size: "M",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "status", children: "Check Status" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "sync", children: "Sync from Neon" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "recreate", children: "Recreate All (Danger)" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: [
+          operation === "status" && "Compare Neon and Strapi databases without making changes.",
+          operation === "sync" && "Import embeddings from Neon DB to Strapi. Use this to restore missing entries.",
+          operation === "recreate" && "Delete all Neon embeddings and recreate them from Strapi data."
+        ] })
+      ] }) }),
+      operation === "sync" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Card, { padding: 5, background: "neutral0", shadow: "tableShadow", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", fontWeight: "bold", children: "Sync Options" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: dryRun,
+              onCheckedChange: (checked) => setDryRun(checked),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: "Dry Run" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Preview changes without applying them" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Checkbox,
+            {
+              checked: removeOrphans,
+              onCheckedChange: (checked) => setRemoveOrphans(checked),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "semiBold", children: "Remove Orphans" }),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "Delete Strapi entries that don't exist in Neon" })
+              ] })
+            }
+          )
+        ] })
+      ] }) }),
+      operation === "recreate" && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Alert, { variant: "danger", closeLabel: "Close", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: 2, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.WarningCircle, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", fontWeight: "bold", children: "Destructive Operation" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: "This will delete ALL embeddings in Neon and recreate them from Strapi data. This operation cannot be undone. Only use if embeddings are corrupted." })
+      ] }) }),
+      syncResult && renderSyncResult(),
+      recreateResult && renderRecreateResult()
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Footer, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", width: "100%", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: "Cancel" }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+        showApplyButton && /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: handleApplyChanges,
+            loading: isLoading,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}),
+            variant: "success",
+            children: "Apply Changes"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.Button,
+          {
+            onClick: handleExecute,
+            loading: isLoading,
+            startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}),
+            variant: operation === "recreate" ? "danger" : "secondary",
+            children: getButtonLabel()
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+}
 const PAGE_SIZE = 10;
 function debounce(func, wait) {
   let timeout;
@@ -483,6 +860,7 @@ function HomePage() {
   const [search, setSearch] = react.useState("");
   const [isLoading, setIsLoading] = react.useState(true);
   const [currentPage, setCurrentPage] = react.useState(1);
+  const [isSyncModalOpen, setIsSyncModalOpen] = react.useState(false);
   const totalPages = embeddings ? Math.ceil(embeddings.totalCount / PAGE_SIZE) : 0;
   const buildQuery = (searchTerm, page) => qs__default.default.stringify({
     page,
@@ -519,18 +897,55 @@ function HomePage() {
   const handleCreateNew = () => {
     navigate(`/plugins/${index.PLUGIN_ID}/embeddings`);
   };
+  const handleSyncComplete = () => {
+    fetchData(search, currentPage);
+  };
+  const headerActions = /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowClockwise, {}), onClick: () => setIsSyncModalOpen(true), children: "Sync" }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: handleCreateNew, children: "Create new embedding" })
+  ] });
   if (isLoading && !embeddings) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Header, { title: "Content Embeddings", subtitle: "Manage your content embeddings" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: "Content Embeddings",
+          subtitle: "Manage your content embeddings",
+          primaryAction: headerActions
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading..." }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {})
+      /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SyncModal,
+        {
+          isOpen: isSyncModalOpen,
+          onClose: () => setIsSyncModalOpen(false),
+          onSyncComplete: handleSyncComplete
+        }
+      )
     ] });
   }
   if (embeddings?.totalCount === 0 && !search) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Header, { title: "Content Embeddings", subtitle: "Manage your content embeddings" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        admin.Layouts.Header,
+        {
+          title: "Content Embeddings",
+          subtitle: "Manage your content embeddings",
+          primaryAction: headerActions
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, {}) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {})
+      /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SyncModal,
+        {
+          isOpen: isSyncModalOpen,
+          onClose: () => setIsSyncModalOpen(false),
+          onSyncComplete: handleSyncComplete
+        }
+      )
     ] });
   }
   const renderEmbeddingsContent = () => {
@@ -612,7 +1027,7 @@ function HomePage() {
       {
         title: "Content Embeddings",
         subtitle: `${embeddings?.totalCount || 0} embeddings total`,
-        primaryAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: handleCreateNew, children: "Create new embedding" })
+        primaryAction: headerActions
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(admin.Layouts.Content, { children: [
@@ -629,7 +1044,15 @@ function HomePage() {
       renderEmbeddingsContent(),
       renderPagination()
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {})
+    /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      SyncModal,
+      {
+        isOpen: isSyncModalOpen,
+        onClose: () => setIsSyncModalOpen(false),
+        onSyncComplete: handleSyncComplete
+      }
+    )
   ] });
 }
 function CreateEmbeddingsForm({