iris-chatbot 5.0.3 → 5.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris-chatbot",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "private": false,
   "description": "One-command installer for the Iris project template.",
   "bin": {

package/template/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "iris",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "iris",
-      "version": "5.0.3",
+      "version": "5.0.4",
       "dependencies": {
         "@anthropic-ai/sdk": "^0.72.1",
         "clsx": "^2.1.1",

package/template/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iris",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "private": true,
   "description": "One-command installer for the Iris project template.",
   "engines": {

package/template/src/app/globals.css

@@ -524,6 +524,12 @@ button:focus-visible {
   text-underline-offset: 2px;
 }
 
+.message-content a.message-content-link-badge {
+  margin: 0 2px;
+  vertical-align: baseline;
+  text-decoration: none;
+}
+
 .source-badge-row {
   margin-top: 10px;
   display: flex;
@@ -531,6 +537,10 @@ button:focus-visible {
   gap: 8px;
 }
 
+.message-content a.source-badge {
+  text-decoration: none;
+}
+
 .source-badge {
   display: inline-flex;
   align-items: center;
@@ -539,18 +549,19 @@ button:focus-visible {
   border-radius: 999px;
   border: 1px solid var(--border);
   background: var(--panel-2);
-  color: var(--text-secondary);
+  color: rgba(255, 255, 255, 0.88);
   text-decoration: none;
   font-size: 12px;
   line-height: 1;
   max-width: 220px;
-  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
+  transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
 }
 
 .source-badge:hover {
   border-color: var(--border-strong);
-  color: var(--text-primary);
+  color: #ffffff;
   background: var(--panel-3);
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
 }
 
 .source-badge-index {
@@ -561,15 +572,46 @@ button:focus-visible {
   height: 16px;
   border-radius: 999px;
   border: 1px solid var(--border-strong);
-  color: var(--text-muted);
+  color: rgba(255, 255, 255, 0.78);
   font-size: 10px;
   font-weight: 700;
+  text-decoration: none;
+}
+
+[data-theme="light"] .source-badge {
+  color: #2d2d2d;
+}
+
+[data-theme="light"] .source-badge:hover {
+  color: #111111;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
+}
+
+[data-theme="light"] .source-badge-index {
+  color: #4a4a4a;
+}
+
+[data-theme="light"] .source-badge:hover .source-badge-index {
+  color: #333333;
 }
 
 .source-badge-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: rgba(255, 255, 255, 0.88);
+}
+
+.source-badge:hover .source-badge-title {
+  color: #ffffff;
+}
+
+[data-theme="light"] .source-badge-title {
+  color: #1a1a1a;
+}
+
+[data-theme="light"] .source-badge:hover .source-badge-title {
+  color: #111111;
 }
 
 .message-content hr {

package/template/src/components/MessageCard.tsx

@@ -14,7 +14,13 @@ import {
   X,
 } from "lucide-react";
 import { memo, useMemo, useState } from "react";
-import type { MessageNode, Thread, ToolApproval, ToolEvent } from "../lib/types";
+import type {
+  ChatCitationSource,
+  MessageNode,
+  Thread,
+  ToolApproval,
+  ToolEvent,
+} from "../lib/types";
 import { splitContentAndSources } from "../lib/utils";
 
 const MAX_VISIBLE_TOOL_ITEMS = 8;
@@ -45,6 +51,11 @@ function MarkdownTable({
   );
 }
 
+/** Remove parentheses that wrap a single markdown link so the badge is not shown inside (). */
+function stripParenthesesAroundLinks(content: string): string {
+  return content.replace(/\s*\(\s*(\[[^\]]*\]\([^)]+\))\s*\)/g, " $1 ");
+}
+
 function normalizeMathDelimiters(content: string) {
   // Convert TeX delimiters to remark-math compatible delimiters.
   return content
@@ -640,6 +651,47 @@ function sourceBadgeLabel(url: string, title?: string): string {
   }
 }
 
+function normUrl(u: string): string {
+  try {
+    const p = new URL(u);
+    return p.origin + p.pathname.replace(/\/$/, "");
+  } catch {
+    return u;
+  }
+}
+
+/** Extract markdown link URLs from content in order of first appearance (deduped by normalized URL). */
+function extractCitationOrderFromContent(content: string): string[] {
+  const ordered: string[] = [];
+  const seen = new Set<string>();
+  const re = /\[([^\]]*)\]\(([^)]+)\)/g;
+  let m;
+  while ((m = re.exec(content)) !== null) {
+    const url = m[2].trim();
+    const n = normUrl(url);
+    if (!seen.has(n)) {
+      seen.add(n);
+      ordered.push(n);
+    }
+  }
+  return ordered;
+}
+
+/** Reorder sources so their order matches first appearance of each URL in the content. */
+function reorderSourcesByCitationOrder(
+  content: string,
+  sources: ChatCitationSource[],
+): ChatCitationSource[] {
+  const order = extractCitationOrderFromContent(content);
+  if (order.length === 0) return sources;
+  const orderIndex = (url: string) => {
+    const n = normUrl(url);
+    const i = order.indexOf(n);
+    return i >= 0 ? i : 1e9;
+  };
+  return [...sources].sort((a, b) => orderIndex(a.url) - orderIndex(b.url));
+}
+
 function getTimelineVisual(event: ToolEvent): {
   chipLabel: string;
   chipClassName: string;
@@ -726,9 +778,16 @@ function MessageCard({
     () => splitContentAndSources(message.content || ""),
     [message.content],
   );
+  const sourcesOrderedByCitation = useMemo(
+    () => reorderSourcesByCitationOrder(messageTextContent, messageSources),
+    [messageTextContent, messageSources],
+  );
   const isStreamingPlaceholder = isAssistant && isStreaming && !messageTextContent;
   const assistantContent = useMemo(
-    () => normalizeMathDelimiters(normalizeMarkdownStructure(messageTextContent)),
+    () =>
+      stripParenthesesAroundLinks(
+        normalizeMathDelimiters(normalizeMarkdownStructure(messageTextContent)),
+      ),
     [messageTextContent],
   );
   const renderedAssistantContent = isStreaming
@@ -825,6 +884,30 @@ function MessageCard({
                 rehypePlugins={[rehypeKatex]}
                 components={{
                   table: ({ children }) => <MarkdownTable>{children}</MarkdownTable>,
+                  a: ({ href, children }) => {
+                    if (!href) return <a>{children}</a>;
+                    const idx = sourcesOrderedByCitation.findIndex((s) =>
+                      normUrl(s.url) === normUrl(href)
+                    );
+                    const matchedSource = idx >= 0 ? sourcesOrderedByCitation[idx] : null;
+                    const rawLabel = sourceBadgeLabel(href, matchedSource?.title);
+                    const label = rawLabel.replace(/^[\s(]+|[\s)]+$/g, "").trim() || rawLabel;
+                    const index = idx >= 0 ? idx + 1 : 0;
+                    return (
+                      <a
+                        className="source-badge message-content-link-badge"
+                        href={href}
+                        target="_blank"
+                        rel="noreferrer noopener"
+                        title={href}
+                      >
+                        {index > 0 ? (
+                          <span className="source-badge-index">{index}</span>
+                        ) : null}
+                        <span className="source-badge-title">{label}</span>
+                      </a>
+                    );
+                  },
                 }}
               >
                 {renderedAssistantContent}
@@ -834,9 +917,9 @@ function MessageCard({
             <p>{messageTextContent}</p>
           )}
 
-          {message.role === "assistant" && !assistantCollapsed && messageSources.length > 0 ? (
+          {message.role === "assistant" && !assistantCollapsed && sourcesOrderedByCitation.length > 0 ? (
             <div className="source-badge-row" aria-label="Sources">
-              {messageSources.map((source, index) => (
+              {sourcesOrderedByCitation.map((source, index) => (
                 <a
                   key={`${source.url}-${index}`}
                   className="source-badge"