@gendive/chatllm 0.6.2 → 0.6.3

package/dist/react/index.mjs

@@ -1770,7 +1770,8 @@ 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;
@@ -1798,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", "");
@@ -1826,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) {
@@ -3987,6 +4011,18 @@ var injectStyles = () => {
     .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);
 };