@repzo/widget-react-native 1.0.9 → 1.2.0

package/src/ui/components/Markdown.tsx

@@ -7,7 +7,7 @@
  * (including bare URLs, linkified the same way the web widget does).
  */
 
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
 import { fontSize, palette, radius, spacing } from '../styles/theme';
@@ -58,6 +58,36 @@ function linkifyPlainText(text: string): string {
   });
 }
 
+/** Host of an absolute web URL, lower-cased and without `www.`; null otherwise. */
+function targetHost(href: string): string | null {
+  const match = /^https?:\/\/(?:[^@/?#\s]*@)?([^/?#:\s]+)/i.exec(href.trim());
+  return match ? match[1]!.toLowerCase().replace(/^www\./, '') : null;
+}
+
+const ADDRESS_LABEL =
+  /^(?:https?:\/\/)?(?:www\.)?((?:[a-z0-9-]+\.)+[a-z]{2,24})(?::\d+)?(?:[/?#]\S*)?$/i;
+
+/**
+ * The text a link shows. Agent and AI replies are remote content, and
+ * `[https://yourbank.com](https://evil.example)` would read as one site while
+ * opening another: when the label itself reads as a web address on a
+ * different host than the target, the real target is shown instead. Ordinary
+ * labels ("Book here", `report.pdf`) are left alone.
+ */
+export function linkLabel(label: string, href: string): string {
+  const text = label.trim();
+  if (!text) return href;
+  const looksLikeScheme = /^(?:[a-z][a-z0-9+.-]*:\/\/|www\.)/i.test(text);
+  const address = ADDRESS_LABEL.exec(text);
+  if (!address && !looksLikeScheme) return label;
+  if (address && !looksLikeScheme && !text.includes('/')) {
+    const extension = address[1]!.split('.').pop()?.toLowerCase() ?? '';
+    if (NON_LINK_EXTENSIONS.has(extension)) return label;
+  }
+  const shown = address ? address[1]!.toLowerCase().replace(/^www\./, '') : null;
+  return shown && shown === targetHost(href) ? label : href;
+}
+
 /** Turn bare URLs into markdown links while leaving code and existing links alone. */
 export function linkifyMarkdown(text: string): string {
   if (!text) return text;
@@ -108,8 +138,8 @@ function InlineMarkdown({ content, color }: { content: string; color: string })
 
         const link = /^!?\[([^\]]*)\]\(([^)]*)\)$/.exec(part);
         if (link) {
-          const label = link[1] || link[2] || '';
           const href = link[2] || '';
+          const label = linkLabel(link[1] || '', href);
           return (
             <Text
               key={key}
@@ -134,7 +164,8 @@ interface MarkdownProps {
 }
 
 export function Markdown({ content, color, linkColor }: MarkdownProps) {
-  const blocks = parseBlocks(linkifyMarkdown(content));
+  // Parsed once per body: a thread re-renders far more often than it changes.
+  const blocks = useMemo(() => parseBlocks(linkifyMarkdown(content)), [content]);
   const effectiveLinkColor = linkColor ?? color;
 
   return (