@gendive/chatllm 0.6.1 → 0.6.2

package/dist/react/index.js

@@ -1826,6 +1826,8 @@ var INLINE_CODE_REGEX = /`([^`]+)`/g;
 var BOLD_REGEX = /\*\*([^*]+)\*\*/g;
 var ITALIC_REGEX = /(?<!\*)\*([^*]+)\*(?!\*)/g;
 var HR_REGEX = /^---+$/gm;
+var TABLE_ROW_REGEX = /^\|(.+)\|$/;
+var TABLE_SEPARATOR_REGEX = /^\|[\s\-:|]+\|$/;
 var parseSourceLinks = (text) => {
   const links = [];
   let match;
@@ -1899,6 +1901,64 @@ var parseInlineElements = (text, key) => {
   });
   return elements;
 };
+var parseTableAlignment = (separatorRow) => {
+  const cells = separatorRow.split("|").filter((cell) => cell.trim() !== "");
+  return cells.map((cell) => {
+    const trimmed = cell.trim();
+    const hasLeftColon = trimmed.startsWith(":");
+    const hasRightColon = trimmed.endsWith(":");
+    if (hasLeftColon && hasRightColon) return "center";
+    if (hasRightColon) return "right";
+    return "left";
+  });
+};
+var parseTableRow = (row) => {
+  return row.split("|").slice(1, -1).map((cell) => cell.trim());
+};
+var MarkdownTable = ({ data }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    "table",
+    {
+      className: "chatllm-table",
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        margin: "12px 0",
+        fontSize: "14px"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: data.headers.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "th",
+          {
+            style: {
+              border: "1px solid var(--chatllm-border, #e5e7eb)",
+              padding: "10px 12px",
+              textAlign: data.alignments[i] || "left",
+              backgroundColor: "var(--chatllm-bg-secondary, #f9fafb)",
+              fontWeight: 600,
+              color: "var(--chatllm-text, #374151)"
+            },
+            children: parseInlineElements(header, `th-${i}`)
+          },
+          i
+        )) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tbody", { children: data.rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "td",
+          {
+            style: {
+              border: "1px solid var(--chatllm-border, #e5e7eb)",
+              padding: "10px 12px",
+              textAlign: data.alignments[cellIndex] || "left",
+              color: "var(--chatllm-text, #374151)"
+            },
+            children: parseInlineElements(cell, `td-${rowIndex}-${cellIndex}`)
+          },
+          cellIndex
+        )) }, rowIndex)) })
+      ]
+    }
+  );
+};
 var CodeBlock = ({ language, code }) => {
   const [copied, setCopied] = import_react5.default.useState(false);
   const handleCopy = async () => {
@@ -2036,6 +2096,35 @@ var MarkdownRenderer = ({ content, className }) => {
     const lines = processedContent.split("\n");
     let currentList = null;
     let blockquoteLines = [];
+    let tableLines = [];
+    const flushTable = () => {
+      if (tableLines.length >= 2) {
+        const headerLine = tableLines[0];
+        const separatorLine = tableLines[1];
+        const dataLines = tableLines.slice(2);
+        if (TABLE_SEPARATOR_REGEX.test(separatorLine)) {
+          const headers = parseTableRow(headerLine);
+          const alignments = parseTableAlignment(separatorLine);
+          const rows = dataLines.map((line) => parseTableRow(line));
+          elements.push(
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              MarkdownTable,
+              {
+                data: { headers, alignments, rows }
+              },
+              `table-${elements.length}`
+            )
+          );
+        } else {
+          tableLines.forEach((line, i) => {
+            elements.push(
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { style: { margin: "4px 0" }, children: parseInlineElements(line, `p-table-fallback-${i}`) }, `p-table-fallback-${elements.length}-${i}`)
+            );
+          });
+        }
+      }
+      tableLines = [];
+    };
     const flushList = () => {
       if (currentList) {
         if (currentList.type === "ul") {
@@ -2096,6 +2185,14 @@ var MarkdownRenderer = ({ content, className }) => {
         );
         return;
       }
+      if (TABLE_ROW_REGEX.test(line)) {
+        flushList();
+        flushBlockquote();
+        tableLines.push(line);
+        return;
+      } else if (tableLines.length > 0) {
+        flushTable();
+      }
       if (HR_REGEX.test(line)) {
         flushList();
         flushBlockquote();
@@ -2189,6 +2286,7 @@ var MarkdownRenderer = ({ content, className }) => {
     });
     flushList();
     flushBlockquote();
+    flushTable();
     return elements;
   }, [content]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -3917,6 +4015,27 @@ var injectStyles = () => {
       background-color: var(--chatllm-border);
       border-radius: 3px;
     }
+
+    .chatllm-table {
+      width: 100%;
+      border-collapse: collapse;
+      margin: 12px 0;
+    }
+
+    .chatllm-table th,
+    .chatllm-table td {
+      border: 1px solid var(--chatllm-border, #e5e7eb);
+      padding: 10px 12px;
+    }
+
+    .chatllm-table th {
+      background-color: var(--chatllm-bg-secondary, #f9fafb);
+      font-weight: 600;
+    }
+
+    .chatllm-table tr:hover {
+      background-color: var(--chatllm-bg-hover, #f3f4f6);
+    }
   `;
   document.head.appendChild(style);
 };