strapi-content-embeddings 0.1.5 → 0.1.7

package/dist/_chunks/{App-Rq72tIgS.js → App-CA5bQnKQ.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-jf6vikTZ.js");
+const index = require("./index-CVCA8dDp.js");
 const styled = require("styled-components");
 const ReactMarkdown = require("react-markdown");
 const reactIntl = require("react-intl");
@@ -104,7 +104,7 @@ function EmbeddingsTable({ data }) {
   const handleRowClick = (documentId) => {
     navigate(`/plugins/${index.PLUGIN_ID}/embeddings/${documentId}`);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 5, rowCount: data.length + 1, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 0, background: "neutral100", children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Table, { colCount: 5, rowCount: data.length + 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(designSystem.Thead, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Tr, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "ID" }) }),
       /* @__PURE__ */ jsxRuntime.jsx(designSystem.Th, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "sigma", children: "Title" }) }),
@@ -468,6 +468,7 @@ function ChatModal() {
     ] }) })
   ] });
 }
+const PAGE_SIZE = 10;
 function debounce(func, wait) {
   let timeout;
   return (...args) => {
@@ -481,16 +482,20 @@ function HomePage() {
   const [embeddings, setEmbeddings] = react.useState(null);
   const [search, setSearch] = react.useState("");
   const [isLoading, setIsLoading] = react.useState(true);
-  const buildQuery = (searchTerm) => qs__default.default.stringify({
+  const [currentPage, setCurrentPage] = react.useState(1);
+  const totalPages = embeddings ? Math.ceil(embeddings.totalCount / PAGE_SIZE) : 0;
+  const buildQuery = (searchTerm, page) => qs__default.default.stringify({
+    page,
+    pageSize: PAGE_SIZE,
     filters: searchTerm ? {
       $or: [{ title: { $containsi: searchTerm } }, { content: { $containsi: searchTerm } }]
     } : void 0
   });
   const fetchData = react.useCallback(
-    async (searchTerm) => {
+    async (searchTerm, page) => {
       setIsLoading(true);
       try {
-        const response = await get(`/${index.PLUGIN_ID}/embeddings/find?${buildQuery(searchTerm)}`);
+        const response = await get(`/${index.PLUGIN_ID}/embeddings/find?${buildQuery(searchTerm, page)}`);
         setEmbeddings(response.data);
       } catch (error) {
         console.error("Failed to fetch embeddings:", error);
@@ -503,8 +508,11 @@ function HomePage() {
   );
   const debouncedFetch = react.useMemo(() => debounce(fetchData, 500), [fetchData]);
   react.useEffect(() => {
-    debouncedFetch(search);
-  }, [search, debouncedFetch]);
+    debouncedFetch(search, currentPage);
+  }, [search, currentPage, debouncedFetch]);
+  react.useEffect(() => {
+    setCurrentPage(1);
+  }, [search]);
   const handleSearchChange = (e) => {
     setSearch(e.target.value);
   };
@@ -538,12 +546,72 @@ function HomePage() {
       '"'
     ] });
   };
+  const shouldShowPagination = embeddings && embeddings.totalCount > 0 && totalPages > 1;
+  const getVisiblePages = () => {
+    const pages = [];
+    const maxVisible = 5;
+    let start = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+    const end = Math.min(totalPages, start + maxVisible - 1);
+    if (end - start + 1 < maxVisible) {
+      start = Math.max(1, end - maxVisible + 1);
+    }
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    return pages;
+  };
+  const renderPagination = () => {
+    if (!shouldShowPagination || !embeddings) {
+      return null;
+    }
+    const startItem = (currentPage - 1) * PAGE_SIZE + 1;
+    const endItem = Math.min(currentPage * PAGE_SIZE, embeddings.totalCount);
+    const visiblePages = getVisiblePages();
+    return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 3, paddingTop: 6, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Pagination, { activePage: currentPage, pageCount: totalPages, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.PreviousLink,
+          {
+            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            disabled: currentPage === 1,
+            children: "Previous"
+          }
+        ),
+        visiblePages.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.PageLink,
+          {
+            number: page,
+            onClick: () => setCurrentPage(page),
+            children: page
+          },
+          page
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          designSystem.NextLink,
+          {
+            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            disabled: currentPage === totalPages,
+            children: "Next"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+        "Showing ",
+        startItem,
+        " to ",
+        endItem,
+        " of ",
+        embeddings.totalCount,
+        " entries"
+      ] })
+    ] });
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       admin.Layouts.Header,
       {
         title: "Content Embeddings",
-        subtitle: `${embeddings?.count || 0} results found`,
+        subtitle: `${embeddings?.totalCount || 0} embeddings total`,
         primaryAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Plus, {}), onClick: handleCreateNew, children: "Create new embedding" })
       }
     ),
@@ -558,7 +626,8 @@ function HomePage() {
           startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, {})
         }
       ) }),
-      renderEmbeddingsContent()
+      renderEmbeddingsContent(),
+      renderPagination()
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(ChatModal, {})
   ] });
@@ -748,6 +817,23 @@ const StyledTypography = styled__default.default(designSystem.Typography)`
   display: block;
   margin-bottom: 1rem;
 `;
+const ChunkTab = styled__default.default.div`
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  border-bottom: 2px solid ${({ $isActive }) => $isActive ? "#4945ff" : "transparent"};
+  color: ${({ $isActive }) => $isActive ? "#4945ff" : "inherit"};
+  font-weight: ${({ $isActive }) => $isActive ? "600" : "400"};
+  white-space: nowrap;
+
+  &:hover {
+    color: #4945ff;
+  }
+`;
+const ChunkTabsContainer = styled__default.default(designSystem.Flex)`
+  border-bottom: 1px solid #dcdce4;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+`;
 function Metadata({ data }) {
   const metadata = {
     id: data.documentId,
@@ -804,6 +890,8 @@ function EmbeddingDetails() {
   const { del, get, put } = admin.useFetchClient();
   const { toggleNotification } = admin.useNotification();
   const [data, setData] = react.useState(null);
+  const [chunks, setChunks] = react.useState([]);
+  const [activeChunkIndex, setActiveChunkIndex] = react.useState(0);
   const [isLoading, setIsLoading] = react.useState(true);
   const [isDeleting, setIsDeleting] = react.useState(false);
   const [isEditing, setIsEditing] = react.useState(false);
@@ -811,6 +899,8 @@ function EmbeddingDetails() {
   const [editTitle, setEditTitle] = react.useState("");
   const [editContent, setEditContent] = react.useState("");
   const [editMetadata, setEditMetadata] = react.useState("");
+  const isChunkedDocument = chunks.length > 1;
+  const activeChunk = isChunkedDocument ? chunks[activeChunkIndex] : data;
   react.useEffect(() => {
     async function fetchData() {
       if (!id) return;
@@ -818,9 +908,31 @@ function EmbeddingDetails() {
         const response = await get(`/${index.PLUGIN_ID}/embeddings/find/${id}`);
         const embeddingData = response.data;
         setData(embeddingData);
-        setEditTitle(embeddingData.title || "");
-        setEditContent(embeddingData.content || "");
-        setEditMetadata(embeddingData.metadata ? JSON.stringify(embeddingData.metadata, null, 2) : "");
+        const chunksResponse = await get(`/${index.PLUGIN_ID}/embeddings/related-chunks/${id}`);
+        const relatedChunks = chunksResponse.data?.data || [];
+        if (relatedChunks.length > 1) {
+          const sortedChunks = relatedChunks.sort((a, b) => {
+            const aIndex = a.metadata?.chunkIndex ?? 0;
+            const bIndex = b.metadata?.chunkIndex ?? 0;
+            return aIndex - bIndex;
+          });
+          setChunks(sortedChunks);
+          const currentIndex = sortedChunks.findIndex(
+            (chunk) => chunk.documentId === id
+          );
+          if (currentIndex >= 0) {
+            setActiveChunkIndex(currentIndex);
+          }
+          const firstChunk = sortedChunks[currentIndex >= 0 ? currentIndex : 0];
+          setEditTitle(firstChunk.title || "");
+          setEditContent(firstChunk.content || "");
+          setEditMetadata(firstChunk.metadata ? JSON.stringify(firstChunk.metadata, null, 2) : "");
+        } else {
+          setChunks([embeddingData]);
+          setEditTitle(embeddingData.title || "");
+          setEditContent(embeddingData.content || "");
+          setEditMetadata(embeddingData.metadata ? JSON.stringify(embeddingData.metadata, null, 2) : "");
+        }
       } catch (error) {
         console.error("Failed to fetch embedding:", error);
       } finally {
@@ -829,11 +941,24 @@ function EmbeddingDetails() {
     }
     fetchData();
   }, [id, get]);
+  react.useEffect(() => {
+    if (activeChunk && !isEditing) {
+      setEditTitle(activeChunk.title || "");
+      setEditContent(activeChunk.content || "");
+      setEditMetadata(activeChunk.metadata ? JSON.stringify(activeChunk.metadata, null, 2) : "");
+    }
+  }, [activeChunkIndex, activeChunk, isEditing]);
   const handleDelete = async () => {
-    if (!id || isDeleting) return;
+    if (!activeChunk || isDeleting) return;
     setIsDeleting(true);
     try {
-      await del(`/${index.PLUGIN_ID}/embeddings/delete-embedding/${id}`);
+      if (isChunkedDocument) {
+        for (const chunk of chunks) {
+          await del(`/${index.PLUGIN_ID}/embeddings/delete-embedding/${chunk.documentId}`);
+        }
+      } else {
+        await del(`/${index.PLUGIN_ID}/embeddings/delete-embedding/${activeChunk.documentId}`);
+      }
       navigate(`/plugins/${index.PLUGIN_ID}`);
     } catch (error) {
       console.error("Failed to delete embedding:", error);
@@ -841,18 +966,23 @@ function EmbeddingDetails() {
     }
   };
   const handleStartEdit = () => {
-    if (data) {
-      setEditTitle(data.title || "");
-      setEditContent(data.content || "");
-      setEditMetadata(data.metadata ? JSON.stringify(data.metadata, null, 2) : "");
+    if (activeChunk) {
+      setEditTitle(activeChunk.title || "");
+      setEditContent(activeChunk.content || "");
+      setEditMetadata(activeChunk.metadata ? JSON.stringify(activeChunk.metadata, null, 2) : "");
     }
     setIsEditing(true);
   };
   const handleCancelEdit = () => {
     setIsEditing(false);
+    if (activeChunk) {
+      setEditTitle(activeChunk.title || "");
+      setEditContent(activeChunk.content || "");
+      setEditMetadata(activeChunk.metadata ? JSON.stringify(activeChunk.metadata, null, 2) : "");
+    }
   };
   const handleSave = async () => {
-    if (!id || isSaving) return;
+    if (!activeChunk || isSaving) return;
     let parsedMetadata = null;
     if (editMetadata.trim()) {
       try {
@@ -867,18 +997,26 @@ function EmbeddingDetails() {
     }
     setIsSaving(true);
     try {
-      const response = await put(`/${index.PLUGIN_ID}/embeddings/update-embedding/${id}`, {
+      const response = await put(`/${index.PLUGIN_ID}/embeddings/update-embedding/${activeChunk.documentId}`, {
         data: {
           title: editTitle.trim(),
           content: editContent.trim(),
           metadata: parsedMetadata
         }
       });
-      setData(response.data);
+      const updatedData = response.data;
+      if (isChunkedDocument) {
+        const newChunks = [...chunks];
+        newChunks[activeChunkIndex] = updatedData;
+        setChunks(newChunks);
+      } else {
+        setData(updatedData);
+        setChunks([updatedData]);
+      }
       setIsEditing(false);
       toggleNotification({
         type: "success",
-        message: "Embedding updated successfully"
+        message: "Chunk updated successfully"
       });
     } catch (error) {
       console.error("Failed to update embedding:", error);
@@ -890,6 +1028,20 @@ function EmbeddingDetails() {
       setIsSaving(false);
     }
   };
+  const handleChunkSelect = (index2) => {
+    if (isEditing) {
+      const confirmed = globalThis.confirm("You have unsaved changes. Discard them?");
+      if (!confirmed) return;
+      setIsEditing(false);
+    }
+    setActiveChunkIndex(index2);
+  };
+  const getOriginalTitle = () => {
+    if (isChunkedDocument && chunks[0]?.metadata) {
+      return chunks[0].metadata.originalTitle || chunks[0].title?.replace(/\s*\[Part \d+\/\d+\]$/, "");
+    }
+    return data?.title || "Embedding Details";
+  };
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
@@ -902,7 +1054,7 @@ function EmbeddingDetails() {
       /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { children: "Loading embedding details..." }) }) })
     ] });
   }
-  if (!data) {
+  if (!data || !activeChunk) {
     return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         admin.Layouts.Header,
@@ -914,68 +1066,103 @@ function EmbeddingDetails() {
       /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, textAlign: "center", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: "The requested embedding could not be found." }) }) })
     ] });
   }
+  const headerTitle = isEditing ? `Edit: ${activeChunk.title}` : isChunkedDocument ? getOriginalTitle() : data.title || "Embedding Details";
+  const headerSubtitle = isChunkedDocument ? `Chunked Document (${chunks.length} parts)` : `Embedding ID: ${data.embeddingId || "N/A"}`;
   return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Main, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       admin.Layouts.Header,
       {
-        title: isEditing ? "Edit Embedding" : data.title || "Embedding Details",
-        subtitle: `Embedding ID: ${data.embeddingId || "N/A"}`,
+        title: headerTitle,
+        subtitle: headerSubtitle,
         primaryAction: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
           /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Cross, {}), onClick: handleCancelEdit, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}), onClick: handleSave, loading: isSaving, children: isSaving ? "Saving..." : "Save" })
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Check, {}), onClick: handleSave, loading: isSaving, children: isSaving ? "Saving..." : "Save Chunk" })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}), onClick: handleStartEdit, children: "Edit" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}), onClick: handleStartEdit, children: [
+            "Edit ",
+            isChunkedDocument ? "Chunk" : ""
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx(ConfirmDeleteEmbedding, { onConfirm: handleDelete, isLoading: isDeleting })
         ] }),
         navigationAction: /* @__PURE__ */ jsxRuntime.jsx(BackLink, { to: `/plugins/${index.PLUGIN_ID}` })
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 8, children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Title" }),
+    /* @__PURE__ */ jsxRuntime.jsx(admin.Layouts.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 8, children: [
+      isChunkedDocument && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { background: "neutral0", padding: 4, hasRadius: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "beta", children: "Document Chunks" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Badge, { children: [
+            chunks.length,
+            " parts"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ChunkTabsContainer, { gap: 0, children: chunks.map((chunk, index2) => /* @__PURE__ */ jsxRuntime.jsxs(
+          ChunkTab,
+          {
+            $isActive: index2 === activeChunkIndex,
+            onClick: () => handleChunkSelect(index2),
+            children: [
+              "Part ",
+              index2 + 1,
+              index2 === activeChunkIndex && isEditing && " (editing)"
+            ]
+          },
+          chunk.documentId
+        )) })
+      ] }) }),
+      isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Title" }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              designSystem.TextInput,
+              {
+                value: editTitle,
+                onChange: (e) => setEditTitle(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Content" }),
+              /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Changes to content will regenerate the embedding vector" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              index.MarkdownEditor,
+              {
+                content: editContent,
+                onChange: setEditContent,
+                height: 300
+              }
+            )
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Metadata (JSON)" }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Optional custom metadata" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            designSystem.TextInput,
+            designSystem.Textarea,
             {
-              value: editTitle,
-              onChange: (e) => setEditTitle(e.target.value)
+              value: editMetadata,
+              onChange: (e) => setEditMetadata(e.target.value),
+              placeholder: '{"key": "value"}'
             }
           )
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { marginBottom: 4, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Content" }),
-            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Changes to content will regenerate the embedding vector" })
+        ] }) }) }) }) })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(StyledTypography, { variant: "beta", style: { margin: 0 }, children: isChunkedDocument ? `Part ${activeChunkIndex + 1} Content` : "Embedding Content" }),
+            isChunkedDocument && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
+              activeChunk.content?.length || 0,
+              " characters"
+            ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            index.MarkdownEditor,
-            {
-              content: editContent,
-              onChange: setEditContent,
-              height: 300
-            }
-          )
-        ] })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { marginBottom: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Metadata (JSON)" }),
-        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, { children: "Optional custom metadata" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          designSystem.Textarea,
-          {
-            value: editMetadata,
-            onChange: (e) => setEditMetadata(e.target.value),
-            placeholder: '{"key": "value"}'
-          }
-        )
-      ] }) }) }) }) })
-    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Grid.Root, { gap: 6, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(StyledTypography, { variant: "beta", children: "Embedding Content" }),
-        data.content ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: data.content }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: "No content" })
-      ] }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(Metadata, { data }) }) })
-    ] }) }) })
+          activeChunk.content ? /* @__PURE__ */ jsxRuntime.jsx(Markdown, { children: activeChunk.content }) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral600", children: "No content" })
+        ] }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxRuntime.jsx(Metadata, { data: activeChunk }) }) })
+      ] })
+    ] }) })
   ] });
 }
 const App = () => {
@@ -987,4 +1174,3 @@ const App = () => {
   ] });
 };
 exports.App = App;
-//# sourceMappingURL=App-Rq72tIgS.js.map

package/dist/_chunks/en-B4KWt_jN.js

@@ -2,4 +2,3 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const en = {};
 exports.default = en;
-//# sourceMappingURL=en-B4KWt_jN.js.map

package/dist/_chunks/en-Byx4XI2L.mjs

@@ -2,4 +2,3 @@ const en = {};
 export {
   en as default
 };
-//# sourceMappingURL=en-Byx4XI2L.mjs.map