strapi-content-embeddings 0.1.4 → 0.1.6

package/dist/_chunks/{App-4UwemHRe.mjs → App-C5NFY1UT.mjs}

@@ -2,10 +2,10 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useFetchClient, Layouts, useNotification, Page } from "@strapi/strapi/admin";
 import { Link, useNavigate, NavLink, useParams, Routes, Route } from "react-router-dom";
 import { useRef, useState, useEffect, useCallback, useMemo } from "react";
-import { EmptyStateLayout, Button, Tr, Box, Table, Thead, Th, Typography, VisuallyHidden, Tbody, Td, Flex, IconButton, Modal, TextInput, Link as Link$1, Accordion, Main, Loader, Field, Textarea, Grid, Dialog } from "@strapi/design-system";
+import { EmptyStateLayout, Button, Tr, Box, Table, Thead, Th, Typography, VisuallyHidden, Tbody, Td, Flex, IconButton, Modal, TextInput, Link as Link$1, Accordion, Main, Loader, Pagination, PreviousLink, PageLink, NextLink, Field, Textarea, Badge, Grid, Dialog } from "@strapi/design-system";
 import { Plus, ArrowRight, Search, ArrowLeft, Cross, Check, Pencil, Trash } from "@strapi/icons";
 import qs from "qs";
-import { P as PLUGIN_ID, R as RobotIcon, M as MarkdownEditor } from "./index-BWSiu_nE.mjs";
+import { P as PLUGIN_ID, R as RobotIcon, M as MarkdownEditor } from "./index-CIpGvEcJ.mjs";
 import styled from "styled-components";
 import ReactMarkdown from "react-markdown";
 import { useIntl } from "react-intl";
@@ -98,7 +98,7 @@ function EmbeddingsTable({ data }) {
   const handleRowClick = (documentId) => {
     navigate(`/plugins/${PLUGIN_ID}/embeddings/${documentId}`);
   };
-  return /* @__PURE__ */ jsx(Box, { padding: 8, background: "neutral100", children: /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: data.length + 1, children: [
+  return /* @__PURE__ */ jsx(Box, { padding: 0, background: "neutral100", children: /* @__PURE__ */ jsxs(Table, { colCount: 5, rowCount: data.length + 1, children: [
     /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
       /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "ID" }) }),
       /* @__PURE__ */ jsx(Th, { children: /* @__PURE__ */ jsx(Typography, { variant: "sigma", children: "Title" }) }),
@@ -462,6 +462,7 @@ function ChatModal() {
     ] }) })
   ] });
 }
+const PAGE_SIZE = 10;
 function debounce(func, wait) {
   let timeout;
   return (...args) => {
@@ -475,21 +476,20 @@ function HomePage() {
   const [embeddings, setEmbeddings] = useState(null);
   const [search, setSearch] = useState("");
   const [isLoading, setIsLoading] = useState(true);
-  const buildQuery = (searchTerm) => qs.stringify({
+  const [currentPage, setCurrentPage] = useState(1);
+  const totalPages = embeddings ? Math.ceil(embeddings.totalCount / PAGE_SIZE) : 0;
+  const buildQuery = (searchTerm, page) => qs.stringify({
+    page,
+    pageSize: PAGE_SIZE,
     filters: searchTerm ? {
-      $or: [
-        { title: { $containsi: searchTerm } },
-        { content: { $containsi: searchTerm } }
-      ]
+      $or: [{ title: { $containsi: searchTerm } }, { content: { $containsi: searchTerm } }]
     } : void 0
   });
   const fetchData = useCallback(
-    async (searchTerm) => {
+    async (searchTerm, page) => {
       setIsLoading(true);
       try {
-        const response = await get(
-          `/${PLUGIN_ID}/embeddings/find?${buildQuery(searchTerm)}`
-        );
+        const response = await get(`/${PLUGIN_ID}/embeddings/find?${buildQuery(searchTerm, page)}`);
         setEmbeddings(response.data);
       } catch (error) {
         console.error("Failed to fetch embeddings:", error);
@@ -500,13 +500,13 @@ function HomePage() {
     },
     [get]
   );
-  const debouncedFetch = useMemo(
-    () => debounce(fetchData, 500),
-    [fetchData]
-  );
+  const debouncedFetch = useMemo(() => debounce(fetchData, 500), [fetchData]);
+  useEffect(() => {
+    debouncedFetch(search, currentPage);
+  }, [search, currentPage, debouncedFetch]);
   useEffect(() => {
-    debouncedFetch(search);
-  }, [search, debouncedFetch]);
+    setCurrentPage(1);
+  }, [search]);
   const handleSearchChange = (e) => {
     setSearch(e.target.value);
   };
@@ -515,36 +515,97 @@ function HomePage() {
   };
   if (isLoading && !embeddings) {
     return /* @__PURE__ */ jsxs(Main, { children: [
-      /* @__PURE__ */ jsx(
-        Layouts.Header,
-        {
-          title: "Content Embeddings",
-          subtitle: "Manage your content embeddings"
-        }
-      ),
+      /* @__PURE__ */ jsx(Layouts.Header, { title: "Content Embeddings", subtitle: "Manage your content embeddings" }),
       /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }) }),
       /* @__PURE__ */ jsx(ChatModal, {})
     ] });
   }
   if (embeddings?.totalCount === 0 && !search) {
     return /* @__PURE__ */ jsxs(Main, { children: [
-      /* @__PURE__ */ jsx(
-        Layouts.Header,
-        {
-          title: "Content Embeddings",
-          subtitle: "Manage your content embeddings"
-        }
-      ),
+      /* @__PURE__ */ jsx(Layouts.Header, { title: "Content Embeddings", subtitle: "Manage your content embeddings" }),
       /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(EmptyState, {}) }),
       /* @__PURE__ */ jsx(ChatModal, {})
     ] });
   }
+  const renderEmbeddingsContent = () => {
+    if (isLoading) {
+      return /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) });
+    }
+    if (embeddings?.data && embeddings.data.length > 0) {
+      return /* @__PURE__ */ jsx(EmbeddingsTable, { data: embeddings.data });
+    }
+    return /* @__PURE__ */ jsxs(Box, { padding: 8, textAlign: "center", children: [
+      'No embeddings found matching "',
+      search,
+      '"'
+    ] });
+  };
+  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__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 3, paddingTop: 6, children: [
+      /* @__PURE__ */ jsxs(Pagination, { activePage: currentPage, pageCount: totalPages, children: [
+        /* @__PURE__ */ jsx(
+          PreviousLink,
+          {
+            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            disabled: currentPage === 1,
+            children: "Previous"
+          }
+        ),
+        visiblePages.map((page) => /* @__PURE__ */ jsx(
+          PageLink,
+          {
+            number: page,
+            onClick: () => setCurrentPage(page),
+            children: page
+          },
+          page
+        )),
+        /* @__PURE__ */ jsx(
+          NextLink,
+          {
+            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            disabled: currentPage === totalPages,
+            children: "Next"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+        "Showing ",
+        startItem,
+        " to ",
+        endItem,
+        " of ",
+        embeddings.totalCount,
+        " entries"
+      ] })
+    ] });
+  };
   return /* @__PURE__ */ jsxs(Main, { children: [
     /* @__PURE__ */ jsx(
       Layouts.Header,
       {
         title: "Content Embeddings",
-        subtitle: `${embeddings?.count || 0} results found`,
+        subtitle: `${embeddings?.totalCount || 0} embeddings total`,
         primaryAction: /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Plus, {}), onClick: handleCreateNew, children: "Create new embedding" })
       }
     ),
@@ -559,11 +620,8 @@ function HomePage() {
           startAction: /* @__PURE__ */ jsx(Search, {})
         }
       ) }),
-      isLoading ? /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading..." }) }) : embeddings?.data && embeddings.data.length > 0 ? /* @__PURE__ */ jsx(EmbeddingsTable, { data: embeddings.data }) : /* @__PURE__ */ jsxs(Box, { padding: 8, textAlign: "center", children: [
-        'No embeddings found matching "',
-        search,
-        '"'
-      ] })
+      renderEmbeddingsContent(),
+      renderPagination()
     ] }),
     /* @__PURE__ */ jsx(ChatModal, {})
   ] });
@@ -626,7 +684,7 @@ function BackLink({ to }) {
   }
   return /* @__PURE__ */ jsx(Link$1, { tag: NavLink, to: "..", relative: "path", startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), children: "Go back" });
 }
-const MAX_CONTENT_LENGTH = 4e3;
+const CHUNK_SIZE = 4e3;
 function CreateEmbeddings() {
   const { formatMessage } = useIntl();
   const navigate = useNavigate();
@@ -636,8 +694,10 @@ function CreateEmbeddings() {
   const [content, setContent] = useState("");
   const [metadata, setMetadata] = useState("");
   const [error, setError] = useState(null);
-  const isValid = title.trim() && content.trim() && content.length <= MAX_CONTENT_LENGTH;
+  const isValid = title.trim() && content.trim();
   const contentLength = content.length;
+  const willChunk = contentLength > CHUNK_SIZE;
+  const estimatedChunks = willChunk ? Math.ceil(contentLength / (CHUNK_SIZE - 200)) : 1;
   function parseMetadata() {
     if (!metadata.trim()) return null;
     try {
@@ -650,7 +710,7 @@ function CreateEmbeddings() {
     e.preventDefault();
     e.stopPropagation();
     if (!isValid) {
-      setError("Please provide a title and content (max 4000 characters)");
+      setError("Please provide a title and content");
       return;
     }
     if (metadata.trim()) {
@@ -685,12 +745,18 @@ function CreateEmbeddings() {
           id: "CreateEmbeddings.header.title",
           defaultMessage: "Create Embedding"
         }),
-        subtitle: formatMessage(
+        subtitle: willChunk ? formatMessage(
+          {
+            id: "CreateEmbeddings.header.subtitle.chunked",
+            defaultMessage: "Content: {length} characters (will create ~{chunks} embeddings)"
+          },
+          { length: contentLength, chunks: estimatedChunks }
+        ) : formatMessage(
           {
             id: "CreateEmbeddings.header.subtitle",
-            defaultMessage: "Content: {length}/{max} characters"
+            defaultMessage: "Content: {length} characters"
           },
-          { length: contentLength, max: MAX_CONTENT_LENGTH }
+          { length: contentLength }
         ),
         primaryAction: /* @__PURE__ */ jsx(
           Button,
@@ -745,6 +811,23 @@ const StyledTypography = styled(Typography)`
   display: block;
   margin-bottom: 1rem;
 `;
+const ChunkTab = styled.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(Flex)`
+  border-bottom: 1px solid #dcdce4;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+`;
 function Metadata({ data }) {
   const metadata = {
     id: data.documentId,
@@ -801,6 +884,8 @@ function EmbeddingDetails() {
   const { del, get, put } = useFetchClient();
   const { toggleNotification } = useNotification();
   const [data, setData] = useState(null);
+  const [chunks, setChunks] = useState([]);
+  const [activeChunkIndex, setActiveChunkIndex] = useState(0);
   const [isLoading, setIsLoading] = useState(true);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -808,6 +893,8 @@ function EmbeddingDetails() {
   const [editTitle, setEditTitle] = useState("");
   const [editContent, setEditContent] = useState("");
   const [editMetadata, setEditMetadata] = useState("");
+  const isChunkedDocument = chunks.length > 1;
+  const activeChunk = isChunkedDocument ? chunks[activeChunkIndex] : data;
   useEffect(() => {
     async function fetchData() {
       if (!id) return;
@@ -815,9 +902,31 @@ function EmbeddingDetails() {
         const response = await get(`/${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(`/${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 {
@@ -826,11 +935,24 @@ function EmbeddingDetails() {
     }
     fetchData();
   }, [id, get]);
+  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(`/${PLUGIN_ID}/embeddings/delete-embedding/${id}`);
+      if (isChunkedDocument) {
+        for (const chunk of chunks) {
+          await del(`/${PLUGIN_ID}/embeddings/delete-embedding/${chunk.documentId}`);
+        }
+      } else {
+        await del(`/${PLUGIN_ID}/embeddings/delete-embedding/${activeChunk.documentId}`);
+      }
       navigate(`/plugins/${PLUGIN_ID}`);
     } catch (error) {
       console.error("Failed to delete embedding:", error);
@@ -838,18 +960,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 {
@@ -864,18 +991,26 @@ function EmbeddingDetails() {
     }
     setIsSaving(true);
     try {
-      const response = await put(`/${PLUGIN_ID}/embeddings/update-embedding/${id}`, {
+      const response = await put(`/${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);
@@ -887,6 +1022,20 @@ function EmbeddingDetails() {
       setIsSaving(false);
     }
   };
+  const handleChunkSelect = (index) => {
+    if (isEditing) {
+      const confirmed = globalThis.confirm("You have unsaved changes. Discard them?");
+      if (!confirmed) return;
+      setIsEditing(false);
+    }
+    setActiveChunkIndex(index);
+  };
+  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__ */ jsxs(Main, { children: [
       /* @__PURE__ */ jsx(
@@ -899,7 +1048,7 @@ function EmbeddingDetails() {
       /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Flex, { justifyContent: "center", padding: 8, children: /* @__PURE__ */ jsx(Loader, { children: "Loading embedding details..." }) }) })
     ] });
   }
-  if (!data) {
+  if (!data || !activeChunk) {
     return /* @__PURE__ */ jsxs(Main, { children: [
       /* @__PURE__ */ jsx(
         Layouts.Header,
@@ -911,68 +1060,103 @@ function EmbeddingDetails() {
       /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Box, { padding: 8, textAlign: "center", children: /* @__PURE__ */ jsx(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__ */ jsxs(Main, { children: [
     /* @__PURE__ */ jsx(
       Layouts.Header,
       {
-        title: isEditing ? "Edit Embedding" : data.title || "Embedding Details",
-        subtitle: `Embedding ID: ${data.embeddingId || "N/A"}`,
+        title: headerTitle,
+        subtitle: headerSubtitle,
         primaryAction: isEditing ? /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
           /* @__PURE__ */ jsx(Button, { variant: "tertiary", startIcon: /* @__PURE__ */ jsx(Cross, {}), onClick: handleCancelEdit, children: "Cancel" }),
-          /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Check, {}), onClick: handleSave, loading: isSaving, children: isSaving ? "Saving..." : "Save" })
+          /* @__PURE__ */ jsx(Button, { startIcon: /* @__PURE__ */ jsx(Check, {}), onClick: handleSave, loading: isSaving, children: isSaving ? "Saving..." : "Save Chunk" })
         ] }) : /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-          /* @__PURE__ */ jsx(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Pencil, {}), onClick: handleStartEdit, children: "Edit" }),
+          /* @__PURE__ */ jsxs(Button, { variant: "secondary", startIcon: /* @__PURE__ */ jsx(Pencil, {}), onClick: handleStartEdit, children: [
+            "Edit ",
+            isChunkedDocument ? "Chunk" : ""
+          ] }),
           /* @__PURE__ */ jsx(ConfirmDeleteEmbedding, { onConfirm: handleDelete, isLoading: isDeleting })
         ] }),
         navigationAction: /* @__PURE__ */ jsx(BackLink, { to: `/plugins/${PLUGIN_ID}` })
       }
     ),
-    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsx(Box, { padding: 8, children: isEditing ? /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
-      /* @__PURE__ */ jsx(Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
-        /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-          /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+    /* @__PURE__ */ jsx(Layouts.Content, { children: /* @__PURE__ */ jsxs(Box, { padding: 8, children: [
+      isChunkedDocument && /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Box, { background: "neutral0", padding: 4, hasRadius: true, children: [
+        /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "beta", children: "Document Chunks" }),
+          /* @__PURE__ */ jsxs(Badge, { children: [
+            chunks.length,
+            " parts"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ChunkTabsContainer, { gap: 0, children: chunks.map((chunk, index) => /* @__PURE__ */ jsxs(
+          ChunkTab,
+          {
+            $isActive: index === activeChunkIndex,
+            onClick: () => handleChunkSelect(index),
+            children: [
+              "Part ",
+              index + 1,
+              index === activeChunkIndex && isEditing && " (editing)"
+            ]
+          },
+          chunk.documentId
+        )) })
+      ] }) }),
+      isEditing ? /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
+          /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+            /* @__PURE__ */ jsx(Field.Label, { children: "Title" }),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                value: editTitle,
+                onChange: (e) => setEditTitle(e.target.value)
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
+            /* @__PURE__ */ jsxs(Field.Root, { children: [
+              /* @__PURE__ */ jsx(Field.Label, { children: "Content" }),
+              /* @__PURE__ */ jsx(Field.Hint, { children: "Changes to content will regenerate the embedding vector" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              MarkdownEditor,
+              {
+                content: editContent,
+                onChange: setEditContent,
+                height: 300
+              }
+            )
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
+          /* @__PURE__ */ jsx(Field.Label, { children: "Metadata (JSON)" }),
+          /* @__PURE__ */ jsx(Field.Hint, { children: "Optional custom metadata" }),
           /* @__PURE__ */ jsx(
-            TextInput,
+            Textarea,
             {
-              value: editTitle,
-              onChange: (e) => setEditTitle(e.target.value)
+              value: editMetadata,
+              onChange: (e) => setEditMetadata(e.target.value),
+              placeholder: '{"key": "value"}'
             }
           )
-        ] }) }),
-        /* @__PURE__ */ jsxs(Box, { marginBottom: 4, children: [
-          /* @__PURE__ */ jsxs(Field.Root, { children: [
-            /* @__PURE__ */ jsx(Field.Label, { children: "Content" }),
-            /* @__PURE__ */ jsx(Field.Hint, { children: "Changes to content will regenerate the embedding vector" })
+        ] }) }) }) }) })
+      ] }) : /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
+        /* @__PURE__ */ jsx(Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
+          /* @__PURE__ */ jsxs(Flex, { justifyContent: "space-between", alignItems: "center", marginBottom: 3, children: [
+            /* @__PURE__ */ jsx(StyledTypography, { variant: "beta", style: { margin: 0 }, children: isChunkedDocument ? `Part ${activeChunkIndex + 1} Content` : "Embedding Content" }),
+            isChunkedDocument && /* @__PURE__ */ jsxs(Typography, { variant: "pi", textColor: "neutral600", children: [
+              activeChunk.content?.length || 0,
+              " characters"
+            ] })
           ] }),
-          /* @__PURE__ */ jsx(
-            MarkdownEditor,
-            {
-              content: editContent,
-              onChange: setEditContent,
-              height: 300
-            }
-          )
-        ] })
-      ] }) }) }),
-      /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsx(Box, { padding: 4, background: "neutral0", hasRadius: true, children: /* @__PURE__ */ jsx(Box, { marginBottom: 4, children: /* @__PURE__ */ jsxs(Field.Root, { children: [
-        /* @__PURE__ */ jsx(Field.Label, { children: "Metadata (JSON)" }),
-        /* @__PURE__ */ jsx(Field.Hint, { children: "Optional custom metadata" }),
-        /* @__PURE__ */ jsx(
-          Textarea,
-          {
-            value: editMetadata,
-            onChange: (e) => setEditMetadata(e.target.value),
-            placeholder: '{"key": "value"}'
-          }
-        )
-      ] }) }) }) }) })
-    ] }) : /* @__PURE__ */ jsxs(Grid.Root, { gap: 6, children: [
-      /* @__PURE__ */ jsx(Grid.Item, { col: 8, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsxs(Box, { padding: 4, background: "neutral0", hasRadius: true, children: [
-        /* @__PURE__ */ jsx(StyledTypography, { variant: "beta", children: "Embedding Content" }),
-        data.content ? /* @__PURE__ */ jsx(Markdown, { children: data.content }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No content" })
-      ] }) }) }),
-      /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsx(Metadata, { data }) }) })
-    ] }) }) })
+          activeChunk.content ? /* @__PURE__ */ jsx(Markdown, { children: activeChunk.content }) : /* @__PURE__ */ jsx(Typography, { textColor: "neutral600", children: "No content" })
+        ] }) }) }),
+        /* @__PURE__ */ jsx(Grid.Item, { col: 4, s: 12, children: /* @__PURE__ */ jsx(Box, { background: "neutral100", padding: 1, hasRadius: true, children: /* @__PURE__ */ jsx(Metadata, { data: activeChunk }) }) })
+      ] })
+    ] }) })
   ] });
 }
 const App = () => {