@gendive/chatllm 0.6.1 → 0.6.3

package/dist/react/index.mjs

@@ -1770,13 +1770,16 @@ var LinkChip = ({
 
 // src/react/components/MarkdownRenderer.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-var LINK_REGEX = /\[([^\]]+)\]\(([^)]+)\)/g;
+var IMAGE_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+var LINK_REGEX = /(?<!!)\[([^\]]+)\]\(([^)]+)\)/g;
 var SOURCE_LINKS_REGEX = /(\*{0,2}출처:?\*{0,2}\s*)?((?:\[`?[^\]]+`?\]\([^)]+\)\s*)+)/gi;
 var CODE_BLOCK_REGEX = /```(\w*)\n?([\s\S]*?)```/g;
 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;
@@ -1796,8 +1799,9 @@ var parseInlineElements = (text, key) => {
   currentText = currentText.replace(INLINE_CODE_REGEX, "\xA7CODE\xA7$1\xA7/CODE\xA7");
   currentText = currentText.replace(BOLD_REGEX, "\xA7BOLD\xA7$1\xA7/BOLD\xA7");
   currentText = currentText.replace(ITALIC_REGEX, "\xA7ITALIC\xA7$1\xA7/ITALIC\xA7");
+  currentText = currentText.replace(IMAGE_REGEX, "\xA7IMAGE\xA7$1\xA7URL\xA7$2\xA7/IMAGE\xA7");
   currentText = currentText.replace(LINK_REGEX, "\xA7LINK\xA7$1\xA7URL\xA7$2\xA7/LINK\xA7");
-  const parts = currentText.split(/(§CODE§.*?§\/CODE§|§BOLD§.*?§\/BOLD§|§ITALIC§.*?§\/ITALIC§|§LINK§.*?§\/LINK§)/);
+  const parts = currentText.split(/(§CODE§.*?§\/CODE§|§BOLD§.*?§\/BOLD§|§ITALIC§.*?§\/ITALIC§|§IMAGE§.*?§\/IMAGE§|§LINK§.*?§\/LINK§)/);
   parts.forEach((part, index) => {
     if (part.startsWith("\xA7CODE\xA7")) {
       const content = part.replace("\xA7CODE\xA7", "").replace("\xA7/CODE\xA7", "");
@@ -1824,6 +1828,28 @@ var parseInlineElements = (text, key) => {
     } else if (part.startsWith("\xA7ITALIC\xA7")) {
       const content = part.replace("\xA7ITALIC\xA7", "").replace("\xA7/ITALIC\xA7", "");
       elements.push(/* @__PURE__ */ jsx6("em", { children: content }, `${key}-italic-${index}`));
+    } else if (part.startsWith("\xA7IMAGE\xA7")) {
+      const match = part.match(/§IMAGE§(.*)§URL§(.+?)§\/IMAGE§/);
+      if (match) {
+        elements.push(
+          /* @__PURE__ */ jsx6(
+            "img",
+            {
+              src: match[2],
+              alt: match[1] || "",
+              className: "chatllm-image",
+              style: {
+                maxWidth: "100%",
+                borderRadius: "8px",
+                margin: "8px 0",
+                display: "block"
+              },
+              loading: "lazy"
+            },
+            `${key}-image-${index}`
+          )
+        );
+      }
     } else if (part.startsWith("\xA7LINK\xA7")) {
       const match = part.match(/§LINK§(.+?)§URL§(.+?)§\/LINK§/);
       if (match) {
@@ -1850,6 +1876,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__ */ jsxs5(
+    "table",
+    {
+      className: "chatllm-table",
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        margin: "12px 0",
+        fontSize: "14px"
+      },
+      children: [
+        /* @__PURE__ */ jsx6("thead", { children: /* @__PURE__ */ jsx6("tr", { children: data.headers.map((header, i) => /* @__PURE__ */ jsx6(
+          "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__ */ jsx6("tbody", { children: data.rows.map((row, rowIndex) => /* @__PURE__ */ jsx6("tr", { children: row.map((cell, cellIndex) => /* @__PURE__ */ jsx6(
+          "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] = React4.useState(false);
   const handleCopy = async () => {
@@ -1987,6 +2071,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__ */ jsx6(
+              MarkdownTable,
+              {
+                data: { headers, alignments, rows }
+              },
+              `table-${elements.length}`
+            )
+          );
+        } else {
+          tableLines.forEach((line, i) => {
+            elements.push(
+              /* @__PURE__ */ jsx6("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") {
@@ -2047,6 +2160,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();
@@ -2140,6 +2261,7 @@ var MarkdownRenderer = ({ content, className }) => {
     });
     flushList();
     flushBlockquote();
+    flushTable();
     return elements;
   }, [content]);
   return /* @__PURE__ */ jsx6(
@@ -3868,6 +3990,39 @@ 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);
+    }
+
+    .chatllm-image {
+      max-width: 100%;
+      border-radius: 8px;
+      margin: 8px 0;
+      display: block;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .chatllm-image:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    }
   `;
   document.head.appendChild(style);
 };