@yourgpt/copilot-sdk 2.0.0 → 2.0.2-beta.1

package/dist/ui/index.js

@@ -1,10 +1,24 @@
-import { useCopilot, useThreadManager } from '../chunk-CJ7UWN2Y.js';
-import { createServerAdapter } from '../chunk-JM7PB2LP.js';
+import { useCopilot, useThreadManager } from '../chunk-3YKHVLNP.js';
+import { createServerAdapter } from '../chunk-Z7PHGSJT.js';
+import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
+import '../chunk-4WWWMNUA.js';
+import '../chunk-6BXQFCK3.js';
+import '../chunk-J4OMGO5O.js';
+import '../chunk-XGITAEXU.js';
+import '../chunk-7W7QLZNC.js';
+import '../chunk-CEOMTQTP.js';
+import '../chunk-PPFHA6IL.js';
+import '../chunk-DABZYCVX.js';
+import '../chunk-MNDGIW47.js';
+import '../chunk-VD74IPKB.js';
+import '../chunk-53UGJNHN.js';
+import '../chunk-RQ74USYU.js';
+import '../chunk-DGUM43GV.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as React18 from 'react';
-import React18__default, { memo, createContext, useState, useRef, useId, useCallback, useLayoutEffect, useContext, useEffect } from 'react';
+import * as React20 from 'react';
+import React20__default, { memo, createContext, useState, useRef, useId, useCallback, useLayoutEffect, useContext, useEffect } from 'react';
 import { Streamdown } from 'streamdown';
 import { code } from '@streamdown/code';
 import { Slot } from '@radix-ui/react-slot';
@@ -13,6 +27,7 @@ import { StickToBottom as StickToBottom$1, useStickToBottomContext } from 'use-s
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import { Globe, ChevronUp, ChevronDown, ExternalLink } from 'lucide-react';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
 
 function cn(...inputs) {
@@ -366,7 +381,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React18.forwardRef(
+var Button = React20.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -509,7 +524,7 @@ function ChatContainerRoot({
   return /* @__PURE__ */ jsx(
     StickToBottom,
     {
-      className: cn("flex overflow-y-auto", className),
+      className: cn("min-h-0", className),
       resize: "smooth",
       initial: "instant",
       role: "log",
@@ -607,7 +622,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React18__default.isValidElement(children)) {
+  if (asChild && React20__default.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, ...props, children });
@@ -636,7 +651,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -648,7 +663,7 @@ var Avatar = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -657,7 +672,7 @@ var AvatarImage = React18.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -700,7 +715,7 @@ var MessageContent = ({
   ...props
 }) => {
   const classNames = cn(
-    "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-none leading-relaxed",
+    "csdk-message-content rounded-lg p-2 break-words whitespace-normal max-w-full leading-relaxed overflow-x-auto overflow-y-hidden",
     // Typography - simple Tailwind utilities (no prose)
     "[&_p]:my-1 [&_p]:leading-relaxed",
     "[&_ul]:my-1 [&_ul]:pl-4 [&_ul]:list-disc [&_ul]:list-outside",
@@ -708,14 +723,16 @@ var MessageContent = ({
     "[&_li]:my-0.5 [&_li]:pl-0",
     "[&_pre]:my-2 [&_blockquote]:my-2 [&_blockquote]:pl-3 [&_blockquote]:border-l-2 [&_blockquote]:border-current/30",
     "[&_code]:bg-current/10 [&_code]:px-1 [&_code]:rounded [&_code]:text-[0.9em]",
-    "[&_a]:underline",
+    "[&_a]:underline [&_a]:text-[var(--csdk-link-color)] [&_a]:[overflow-wrap:anywhere]",
+    "[&_button[data-streamdown='link']]:underline [&_button[data-streamdown='link']]:text-[var(--csdk-link-color)] [&_button[data-streamdown='link']]:[overflow-wrap:anywhere] [&_button[data-streamdown='link']]:font-medium",
+    "[&_.text-primary]:text-[var(--csdk-link-color)]",
     "[&_strong]:font-semibold",
     textSizeMap[size],
     className
   );
   return markdown ? /* @__PURE__ */ jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React18.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React20.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -879,14 +896,14 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React18.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React20.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
     align,
     sideOffset,
     className: cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-hover-card-content-transform-origin]",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
     ...props
@@ -922,8 +939,8 @@ function SourceTrigger({
       target: "_blank",
       rel: "noopener noreferrer",
       className: cn(
-        "bg-muted text-muted-foreground hover:bg-muted-foreground/30 hover:text-primary inline-flex h-5 max-w-32 items-center gap-1 overflow-hidden rounded-full py-0 text-xs no-underline transition-colors duration-150",
-        showFavicon ? "pr-2 pl-1" : "px-1",
+        "inline-flex h-7 items-center gap-1.5 rounded-full border border-border/50 bg-background px-2.5 text-xs text-foreground/80 no-underline shadow-sm transition-all duration-150",
+        "hover:bg-muted hover:border-border hover:shadow-md hover:text-foreground",
         className
       ),
       children: [
@@ -933,13 +950,13 @@ function SourceTrigger({
             src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
               href
             )}`,
-            alt: "favicon",
-            width: 14,
-            height: 14,
-            className: "size-3.5 rounded-full"
+            alt: "",
+            width: 16,
+            height: 16,
+            className: "size-4 rounded-full"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "truncate tabular-nums text-center font-normal", children: labelToShow })
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-28 font-medium", children: labelToShow })
       ]
     }
   ) });
@@ -950,40 +967,627 @@ function SourceContent({
   className
 }) {
   const { href, domain } = useSourceContext();
-  return /* @__PURE__ */ jsx(HoverCardContent, { className: cn("w-80 p-0 shadow-xs", className), children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
+    HoverCardContent,
+    {
+      className: cn("w-80 p-0 shadow-lg border border-border/50", className),
+      sideOffset: 8,
+      children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "flex flex-col gap-2.5 p-4 hover:bg-muted/50 transition-colors rounded-lg",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
+                    href
+                  )}`,
+                  alt: "",
+                  className: "size-5 rounded-full",
+                  width: 20,
+                  height: 20
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "text-foreground/70 truncate text-sm", children: domain.replace("www.", "") })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-sm font-semibold text-foreground", children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground line-clamp-3 text-sm leading-relaxed", children: description })
+          ]
+        }
+      )
+    }
+  );
+}
+function SourceGroup({
+  sources,
+  label,
+  maxVisible = 5,
+  showFavicon = true,
+  numbered = false,
+  className
+}) {
+  if (!sources || sources.length === 0) return null;
+  const visibleSources = sources.slice(0, maxVisible);
+  const hiddenCount = sources.length - maxVisible;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-2", className), children: [
+    label && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs font-medium", children: label }),
+    visibleSources.map((source, index) => /* @__PURE__ */ jsxs(Source, { href: source.href, children: [
+      /* @__PURE__ */ jsx(
+        SourceTrigger,
+        {
+          label: numbered ? index + 1 : void 0,
+          showFavicon
+        }
+      ),
+      (source.title || source.description) && /* @__PURE__ */ jsx(
+        SourceContent,
+        {
+          title: source.title || getDomain(source.href),
+          description: source.description || source.href
+        }
+      )
+    ] }, index)),
+    hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs font-medium bg-muted px-2 py-1 rounded-full", children: [
+      "+",
+      hiddenCount,
+      " more"
+    ] })
+  ] });
+}
+function SimpleSource({
+  href,
+  label,
+  showFavicon = false,
+  className
+}) {
+  let domain = "";
+  try {
+    domain = new URL(href).hostname.replace("www.", "");
+  } catch {
+    domain = href;
+  }
+  const displayLabel = label ?? domain;
+  return /* @__PURE__ */ jsxs(
     "a",
     {
       href,
       target: "_blank",
       rel: "noopener noreferrer",
-      className: "flex flex-col gap-2 p-3",
+      className: cn(
+        "bg-muted text-muted-foreground hover:bg-primary/20 hover:text-primary",
+        "inline-flex h-5 items-center gap-1 rounded-full text-xs no-underline transition-colors",
+        showFavicon ? "pr-2 pl-1" : "px-1.5",
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(
-                href
-              )}`,
-              alt: "favicon",
-              className: "size-4 rounded-full",
-              width: 16,
-              height: 16
+        showFavicon && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: `https://www.google.com/s2/favicons?sz=64&domain_url=${encodeURIComponent(href)}`,
+            alt: "",
+            width: 14,
+            height: 14,
+            className: "size-3.5 rounded-full"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate tabular-nums font-normal", children: displayLabel })
+      ]
+    }
+  );
+}
+function getDomain(url) {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+function SearchResults({
+  results,
+  className,
+  variant = "cards",
+  maxResults,
+  showScores = false,
+  showDates = false
+}) {
+  const displayResults = maxResults ? results.slice(0, maxResults) : results;
+  if (displayResults.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: cn("text-muted-foreground text-sm", className), children: "No results found" });
+  }
+  if (variant === "compact") {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsx(SearchResultCompact, { result, index: i + 1 }, i)) });
+  }
+  if (variant === "list") {
+    return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsx(
+      SearchResultList,
+      {
+        result,
+        index: i + 1,
+        showScore: showScores,
+        showDate: showDates
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2", className), children: displayResults.map((result, i) => /* @__PURE__ */ jsx(
+    SearchResultCard,
+    {
+      result,
+      showScore: showScores,
+      showDate: showDates
+    },
+    i
+  )) });
+}
+function SearchResultCard({
+  result,
+  showScore,
+  showDate
+}) {
+  const domain = result.domain || getDomain2(result.url);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: result.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "group block p-3 border rounded-lg hover:bg-muted/50 transition-colors",
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: getFaviconUrl(result.url),
+            alt: "",
+            className: "w-5 h-5 mt-0.5 rounded-sm",
+            width: 20,
+            height: 20
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("h4", { className: "font-medium text-sm group-hover:text-primary truncate", children: result.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground mt-1 line-clamp-2", children: result.content }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mt-1", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/60 truncate", children: domain }),
+            showDate && result.publishedDate && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/60", children: formatDate(result.publishedDate) }),
+            showScore && result.score !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground/60", children: [
+              (result.score * 100).toFixed(0),
+              "% match"
+            ] })
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function SearchResultList({
+  result,
+  index,
+  showScore,
+  showDate
+}) {
+  const domain = result.domain || getDomain2(result.url);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: result.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "group flex items-start gap-2 py-1.5 hover:bg-muted/30 rounded px-1 -mx-1 transition-colors",
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground/60 mt-0.5 w-4 text-right flex-shrink-0", children: [
+          index,
+          "."
+        ] }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: getFaviconUrl(result.url),
+            alt: "",
+            className: "w-4 h-4 mt-0.5 rounded-sm flex-shrink-0",
+            width: 16,
+            height: 16
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm group-hover:text-primary", children: result.title }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground ml-2", children: domain }),
+          showDate && result.publishedDate && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground/60 ml-2", children: formatDate(result.publishedDate) }),
+          showScore && result.score !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground/60 ml-2", children: [
+            "(",
+            (result.score * 100).toFixed(0),
+            "%)"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function SearchResultCompact({ result, index }) {
+  const domain = result.domain || getDomain2(result.url);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: result.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "inline-flex items-center gap-1.5 px-2 py-1 text-xs bg-muted hover:bg-muted/80 rounded-md transition-colors",
+      title: result.title,
+      children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: getFaviconUrl(result.url),
+            alt: "",
+            className: "w-3.5 h-3.5 rounded-sm",
+            width: 14,
+            height: 14
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[120px]", children: domain })
+      ]
+    }
+  );
+}
+function SearchAnswer({ answer, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "p-3 bg-muted/50 rounded-lg border-l-2 border-primary/50",
+        className
+      ),
+      children: /* @__PURE__ */ jsx("p", { className: "text-sm", children: answer })
+    }
+  );
+}
+function SearchResultsWithAnswer({
+  response,
+  className,
+  variant = "cards",
+  showAnswer = true,
+  maxResults
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    showAnswer && response.answer && /* @__PURE__ */ jsx(SearchAnswer, { answer: response.answer }),
+    /* @__PURE__ */ jsx(
+      SearchResults,
+      {
+        results: response.results,
+        variant,
+        maxResults
+      }
+    ),
+    response.searchTime && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+      "Found ",
+      response.results.length,
+      " results in ",
+      response.searchTime,
+      "ms"
+    ] })
+  ] });
+}
+function getDomain2(url) {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+function getFaviconUrl(url) {
+  try {
+    const domain = new URL(url).hostname;
+    return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+  } catch {
+    return "";
+  }
+}
+function formatDate(dateStr) {
+  try {
+    const date = new Date(dateStr);
+    const now = /* @__PURE__ */ new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffDays = Math.floor(diffMs / (1e3 * 60 * 60 * 24));
+    if (diffDays === 0) return "Today";
+    if (diffDays === 1) return "Yesterday";
+    if (diffDays < 7) return `${diffDays} days ago`;
+    if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+    if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+    return `${Math.floor(diffDays / 365)} years ago`;
+  } catch {
+    return dateStr;
+  }
+}
+function CitationBadge({
+  index,
+  url,
+  title,
+  size = "sm",
+  className,
+  onClick
+}) {
+  const sizeClasses = {
+    sm: "text-[10px] min-w-[16px] h-4 px-1",
+    md: "text-xs min-w-[20px] h-5 px-1.5"
+  };
+  const badge = /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center justify-center rounded font-medium",
+        "bg-primary/10 text-primary hover:bg-primary/20",
+        "cursor-pointer transition-colors",
+        sizeClasses[size],
+        className
+      ),
+      title,
+      onClick,
+      children: index
+    }
+  );
+  if (url) {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "inline-flex",
+        children: badge
+      }
+    );
+  }
+  return badge;
+}
+function CitationSuperscript({
+  index,
+  url,
+  title,
+  className
+}) {
+  const sup = /* @__PURE__ */ jsxs(
+    "sup",
+    {
+      className: cn(
+        "text-[10px] text-primary hover:underline cursor-pointer ml-0.5",
+        className
+      ),
+      title,
+      children: [
+        "[",
+        index,
+        "]"
+      ]
+    }
+  );
+  if (url) {
+    return /* @__PURE__ */ jsx("a", { href: url, target: "_blank", rel: "noopener noreferrer", children: sup });
+  }
+  return sup;
+}
+function SourcePill({
+  citation,
+  showIndex = true,
+  className
+}) {
+  const domain = citation.domain || getDomain3(citation.url);
+  const favicon = citation.favicon || getFaviconUrl2(citation.url);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: citation.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      title: citation.title,
+      className: cn(
+        "inline-flex items-center gap-1.5 px-2 py-1 text-xs rounded-full",
+        "bg-muted hover:bg-muted/80 transition-colors",
+        "text-muted-foreground hover:text-foreground",
+        className
+      ),
+      children: [
+        showIndex && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-primary", children: citation.index }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: favicon,
+            alt: "",
+            className: "w-3.5 h-3.5 rounded-sm",
+            width: 14,
+            height: 14,
+            onError: (e) => {
+              e.target.style.display = "none";
             }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "text-primary truncate text-sm", children: domain.replace("www.", "") })
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "truncate max-w-[100px]", children: domain })
+      ]
+    }
+  );
+}
+function SourcesBar({
+  citations,
+  label = "Sources",
+  maxVisible = 5,
+  className
+}) {
+  const visibleCitations = citations.slice(0, maxVisible);
+  const hiddenCount = citations.length - maxVisible;
+  if (citations.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(Globe, { className: "w-3 h-3" }),
+      label
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 overflow-x-auto", children: [
+      visibleCitations.map((citation) => /* @__PURE__ */ jsx(SourcePill, { citation }, citation.index)),
+      hiddenCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground px-2", children: [
+        "+",
+        hiddenCount,
+        " more"
+      ] })
+    ] })
+  ] });
+}
+function SourcesCollapsible({
+  citations,
+  label = "Sources",
+  defaultExpanded = false,
+  className
+}) {
+  const [expanded, setExpanded] = React20.useState(defaultExpanded);
+  if (citations.length === 0) return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("border rounded-lg", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(!expanded),
+        className: "w-full flex items-center justify-between px-3 py-2 text-sm hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2 text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4" }),
+            label,
+            " (",
+            citations.length,
+            ")"
+          ] }),
+          expanded ? /* @__PURE__ */ jsx(ChevronUp, { className: "w-4 h-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 text-muted-foreground" })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx("div", { className: "px-3 pb-3 space-y-2", children: citations.map((citation) => /* @__PURE__ */ jsx(SourceItem, { citation }, citation.index)) })
+  ] });
+}
+function SourceItem({ citation }) {
+  const domain = citation.domain || getDomain3(citation.url);
+  const favicon = citation.favicon || getFaviconUrl2(citation.url);
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: citation.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "flex items-start gap-3 p-2 rounded-md hover:bg-muted/50 transition-colors group",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center w-5 h-5 rounded bg-primary/10 text-primary text-xs font-medium flex-shrink-0", children: citation.index }),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: favicon,
+            alt: "",
+            className: "w-4 h-4 mt-0.5 rounded-sm flex-shrink-0",
+            width: 16,
+            height: 16,
+            onError: (e) => {
+              e.target.style.display = "none";
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-medium group-hover:text-primary truncate", children: citation.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: domain })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "line-clamp-2 text-sm font-medium", children: title }),
-        /* @__PURE__ */ jsx("div", { className: "text-muted-foreground line-clamp-2 text-sm", children: description })
+        /* @__PURE__ */ jsx(ExternalLink, { className: "w-3.5 h-3.5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0" })
       ]
     }
-  ) });
+  );
+}
+function SourcesList({
+  citations,
+  className,
+  compact = false
+}) {
+  if (citations.length === 0) return null;
+  if (compact) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("text-xs text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsx("span", { className: "font-medium", children: "Sources: " }),
+      citations.map((c, i) => /* @__PURE__ */ jsxs(React20.Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href: c.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "hover:text-primary hover:underline",
+            children: [
+              "[",
+              c.index,
+              "]"
+            ]
+          }
+        ),
+        i < citations.length - 1 && " "
+      ] }, c.index))
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), children: citations.map((citation) => /* @__PURE__ */ jsx(SourceItem, { citation }, citation.index)) });
+}
+function MessageWithCitations({
+  children,
+  citations,
+  config = {},
+  className
+}) {
+  const { enabled = true, sourcesPosition = "bottom", maxVisible = 5 } = config;
+  if (!enabled || citations.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsx("div", { children }),
+    sourcesPosition === "bottom" && /* @__PURE__ */ jsx(SourcesBar, { citations, maxVisible }),
+    sourcesPosition === "collapsible" && /* @__PURE__ */ jsx(SourcesCollapsible, { citations })
+  ] });
+}
+function getDomain3(url) {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+function getFaviconUrl2(url) {
+  try {
+    const domain = new URL(url).hostname;
+    return `https://www.google.com/s2/favicons?domain=${domain}&sz=32`;
+  } catch {
+    return "";
+  }
+}
+function annotationsToCitations(annotations) {
+  const seen = /* @__PURE__ */ new Set();
+  const citations = [];
+  for (const annotation of annotations) {
+    if (annotation.type === "url_citation" && annotation.url) {
+      if (!seen.has(annotation.url)) {
+        seen.add(annotation.url);
+        citations.push({
+          index: citations.length + 1,
+          url: annotation.url,
+          title: annotation.title || getDomain3(annotation.url),
+          domain: getDomain3(annotation.url)
+        });
+      }
+    }
+  }
+  return citations;
+}
+function resultsToCitations(results) {
+  return results.map((result, index) => ({
+    index: index + 1,
+    url: result.url,
+    title: result.title,
+    domain: result.domain || getDomain3(result.url)
+  }));
 }
-var ReasoningContext = React18.createContext(
+var ReasoningContext = React20.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React18.useContext(ReasoningContext);
+  const context = React20.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -999,11 +1603,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React18.useState(defaultOpen);
-  const prevStreamingRef = React18.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React20.useState(defaultOpen);
+  const prevStreamingRef = React20.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React18.useCallback(
+  const setIsOpen = React20.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1014,7 +1618,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React18.useEffect(() => {
+  React20.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1070,9 +1674,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React18.useRef(null);
-  const [height, setHeight] = React18.useState(0);
-  React18.useEffect(() => {
+  const contentRef = React20.useRef(null);
+  const [height, setHeight] = React20.useState(0);
+  React20.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1121,11 +1725,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React18.createContext(
+var CopilotUIContext = React20.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React18.useContext(CopilotUIContext);
+  const context = React20.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1140,7 +1744,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React18.useMemo(
+  const value = React20.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1151,6 +1755,7 @@ function CopilotUIProvider({
   return /* @__PURE__ */ jsx(CopilotUIContext.Provider, { value, children });
 }
 function toolNameToTitle(name) {
+  if (!name) return "Tool";
   let result = name.replace(/_/g, " ");
   result = result.replace(/([a-z])([A-Z])/g, "$1 $2");
   return result.charAt(0).toUpperCase() + result.slice(1).toLowerCase();
@@ -1282,7 +1887,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React18.useState(
+  const [expanded, setExpanded] = React20.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -1763,9 +2368,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React18.createContext(null);
+var ConfirmationContext = React20.createContext(null);
 function useConfirmationContext() {
-  const context = React18.useContext(ConfirmationContext);
+  const context = React20.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -1937,8 +2542,8 @@ function PermissionConfirmation({
   permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React18.useState("ask");
-  const [showOptions, setShowOptions] = React18.useState(false);
+  const [selectedPermission, setSelectedPermission] = React20.useState("ask");
+  const [showOptions, setShowOptions] = React20.useState(false);
   const handleApprove = () => {
     onApprove?.(selectedPermission);
   };
@@ -2068,7 +2673,7 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React18.useState(false);
+  const [rememberChoice, setRememberChoice] = React20.useState(false);
   const handleApprove = () => {
     onApprove?.(rememberChoice ? "allow_always" : "ask");
   };
@@ -2611,9 +3216,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React18.useState(false);
-  const containerRef = React18.useRef(null);
-  React18.useEffect(() => {
+  const [isOpen, setIsOpen] = React20.useState(false);
+  const containerRef = React20.useRef(null);
+  React20.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2622,7 +3227,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React18.useMemo(() => {
+  const selectedModel = React20.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -2848,7 +3453,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React18.isValidElement(children)) {
+  if (asChild && React20.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, ...props, children });
@@ -2876,7 +3481,7 @@ function PopoverContent({
     }
   ) }) });
 }
-function formatDate(date) {
+function formatDate2(date) {
   const now = /* @__PURE__ */ new Date();
   const diff = now.getTime() - date.getTime();
   if (diff < 60 * 1e3) {
@@ -2983,8 +3588,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React18.useState(false);
-  const selectedThread = React18.useMemo(() => {
+  const [isOpen, setIsOpen] = React20.useState(false);
+  const selectedThread = React20.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3073,7 +3678,7 @@ function ThreadPicker({
                       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-[11px] text-muted-foreground", children: [
                         thread.preview && /* @__PURE__ */ jsx("span", { className: "truncate max-w-[180px]", children: thread.preview }),
                         thread.preview && thread.updatedAt && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: "\xB7" }),
-                        thread.updatedAt && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: formatDate(thread.updatedAt) })
+                        thread.updatedAt && /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", children: formatDate2(thread.updatedAt) })
                       ] })
                     ]
                   }
@@ -3100,7 +3705,7 @@ function ThreadPicker({
     )
   ] });
 }
-function formatDate2(date) {
+function formatDate3(date) {
   const now = /* @__PURE__ */ new Date();
   const diff = now.getTime() - date.getTime();
   if (diff < 60 * 1e3) {
@@ -3190,7 +3795,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React18.useState(false);
+  const [isHovered, setIsHovered] = React20.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -3245,7 +3850,7 @@ function ThreadCard({
               " messages"
             ] }),
             thread.messageCount !== void 0 && thread.messageCount > 0 && thread.updatedAt && /* @__PURE__ */ jsx("span", { children: "\xB7" }),
-            thread.updatedAt && /* @__PURE__ */ jsx("span", { children: formatDate2(thread.updatedAt) })
+            thread.updatedAt && /* @__PURE__ */ jsx("span", { children: formatDate3(thread.updatedAt) })
           ] })
         ] })
       ] })
@@ -3420,6 +4025,193 @@ function Suggestions({
     index
   )) });
 }
+function MCPUIFrame({
+  resource,
+  onIntent,
+  onError,
+  onLoad,
+  className,
+  style,
+  sandbox = DEFAULT_MCP_UI_SANDBOX,
+  showLoading = true,
+  testId
+}) {
+  const iframeRef = React20.useRef(null);
+  const [isLoading, setIsLoading] = React20.useState(true);
+  const [error, setError] = React20.useState(null);
+  React20.useEffect(() => {
+    const handleMessage = (event) => {
+      if (event.source !== iframeRef.current?.contentWindow) {
+        return;
+      }
+      const intent = parseMCPUIMessage(event.data);
+      if (intent && onIntent) {
+        onIntent(intent);
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [onIntent]);
+  const handleLoad = React20.useCallback(() => {
+    setIsLoading(false);
+    onLoad?.();
+  }, [onLoad]);
+  const handleError = React20.useCallback(() => {
+    const err = new Error("Failed to load MCP UI content");
+    setError(err);
+    setIsLoading(false);
+    onError?.(err);
+  }, [onError]);
+  const { srcDoc, src } = React20.useMemo(() => {
+    if (resource.mimeType === "text/html") {
+      let content = resource.content || "";
+      if (resource.blob && !resource.content) {
+        try {
+          content = atob(resource.blob);
+        } catch {
+          setError(new Error("Failed to decode MCP UI blob content"));
+        }
+      }
+      const wrappedContent = `
+        <!DOCTYPE html>
+        <html>
+          <head>
+            <meta charset="utf-8">
+            <meta name="viewport" content="width=device-width, initial-scale=1">
+            <style>
+              *, *::before, *::after { box-sizing: border-box; }
+              body { margin: 0; padding: 8px; font-family: system-ui, -apple-system, sans-serif; }
+            </style>
+          </head>
+          <body>
+            ${content}
+            <script>
+              // Helper for sending intents to parent
+              window.mcpUI = {
+                sendIntent: function(intent) {
+                  window.parent.postMessage({ source: 'mcp-ui', intent: intent }, '*');
+                },
+                callTool: function(name, args) {
+                  this.sendIntent({ type: 'tool', name: name, arguments: args });
+                },
+                sendAction: function(action, data) {
+                  this.sendIntent({ type: 'intent', action: action, data: data });
+                },
+                prompt: function(text) {
+                  this.sendIntent({ type: 'prompt', text: text });
+                },
+                notify: function(message, level) {
+                  this.sendIntent({ type: 'notify', message: message, level: level || 'info' });
+                },
+                openLink: function(url, newTab) {
+                  this.sendIntent({ type: 'link', url: url, newTab: newTab !== false });
+                }
+              };
+            </script>
+          </body>
+        </html>
+      `;
+      return { srcDoc: wrappedContent, src: void 0 };
+    }
+    if (resource.mimeType === "text/uri-list") {
+      return { srcDoc: void 0, src: resource.content };
+    }
+    return { srcDoc: void 0, src: resource.content };
+  }, [resource]);
+  const frameStyle = {
+    width: resource.metadata?.width || "100%",
+    minHeight: resource.metadata?.height || "200px",
+    ...style
+  };
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-lg border border-destructive/50 bg-destructive/10 p-4 text-sm text-destructive",
+          className
+        ),
+        style: frameStyle,
+        "data-testid": testId ? `${testId}-error` : void 0,
+        children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              className: "size-4",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Failed to load interactive content" })
+        ] })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative overflow-hidden rounded-lg border", className),
+      "data-testid": testId,
+      children: [
+        resource.metadata?.title && /* @__PURE__ */ jsx("div", { className: "border-b bg-muted/50 px-3 py-1.5 text-xs font-medium text-muted-foreground", children: resource.metadata.title }),
+        showLoading && isLoading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsx(Loader, { variant: "dots", size: "md" }) }),
+        /* @__PURE__ */ jsx(
+          "iframe",
+          {
+            ref: iframeRef,
+            srcDoc,
+            src,
+            sandbox,
+            onLoad: handleLoad,
+            onError: handleError,
+            className: "block w-full border-0",
+            style: frameStyle,
+            title: resource.metadata?.title || "MCP UI Content",
+            "data-testid": testId ? `${testId}-iframe` : void 0
+          }
+        )
+      ]
+    }
+  );
+}
+function MCPUIFrameList({
+  resources,
+  onIntent,
+  onError,
+  className,
+  frameClassName,
+  gap = "md"
+}) {
+  if (!resources || resources.length === 0) {
+    return null;
+  }
+  const gapClasses = {
+    sm: "space-y-1",
+    md: "space-y-2",
+    lg: "space-y-4"
+  };
+  return /* @__PURE__ */ jsx("div", { className: cn(gapClasses[gap], className), children: resources.map((resource, index) => /* @__PURE__ */ jsx(
+    MCPUIFrame,
+    {
+      resource,
+      onIntent: (intent) => onIntent?.(intent, index),
+      onError: (error) => onError?.(error, index),
+      className: frameClassName,
+      testId: `mcp-ui-frame-${index}`
+    },
+    `${resource.uri}-${index}`
+  )) });
+}
 function DefaultMessage({
   message,
   userAvatar,
@@ -3439,17 +4231,74 @@ function DefaultMessage({
   showFollowUps = true,
   onFollowUpClick,
   followUpClassName,
-  followUpButtonClassName
+  followUpButtonClassName,
+  citations = { enabled: true }
 }) {
   const isUser = message.role === "user";
   const isStreaming = isLastMessage && isLoading;
-  const { cleanContent, followUps } = React18.useMemo(() => {
+  const { cleanContent: contentWithoutFollowUps, followUps } = React20.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
     return parseFollowUps(message.content);
   }, [message.content, isUser]);
+  const cleanContent = React20.useMemo(() => {
+    if (!contentWithoutFollowUps) return contentWithoutFollowUps;
+    return contentWithoutFollowUps.replace(/\n*\*{0,2}Sources:?\*{0,2}\s*(\[.+?\]\(.+?\)[,\s]*)+$/gi, "").trim();
+  }, [contentWithoutFollowUps]);
   const shouldShowFollowUps = showFollowUps && !isUser && isLastMessage && !isLoading && followUps.length > 0 && onFollowUpClick;
+  const sources = React20.useMemo(() => {
+    if (isUser || !citations.enabled) return [];
+    const extractedSources = [];
+    const addSource = (url, title, description) => {
+      if (url && !extractedSources.find((s) => s.href === url)) {
+        extractedSources.push({
+          href: url,
+          title: title || getDomainFromUrl(url),
+          description
+        });
+      }
+    };
+    const nativeCitations = message.metadata?.citations;
+    if (nativeCitations && Array.isArray(nativeCitations)) {
+      nativeCitations.forEach((citation) => {
+        addSource(citation.url, citation.title, citation.citedText);
+      });
+    }
+    message.toolExecutions?.forEach((exec) => {
+      if (exec.name === "web_search" && exec.status === "completed" && exec.result) {
+        const result = exec.result;
+        const dataObj = result.data;
+        if (dataObj?.results && Array.isArray(dataObj.results)) {
+          dataObj.results.forEach((r) => {
+            addSource(r.url, r.title, r.content);
+          });
+        }
+        if (result.results && Array.isArray(result.results)) {
+          result.results.forEach((r) => {
+            addSource(r.url, r.title, r.content);
+          });
+        }
+        if (dataObj && !dataObj.results && dataObj.query) {
+          const response = dataObj;
+          if (response.results && Array.isArray(response.results)) {
+            response.results.forEach((r) => {
+              addSource(r.url, r.title, r.content);
+            });
+          }
+        }
+      }
+    });
+    return extractedSources;
+  }, [message.metadata, message.toolExecutions, isUser, citations.enabled]);
+  function getDomainFromUrl(url) {
+    try {
+      return new URL(url).hostname.replace("www.", "");
+    } catch {
+      return url;
+    }
+  }
+  const shouldShowSources = citations.enabled && sources.length > 0;
   if (isUser) {
     const hasAttachments = message.attachments && message.attachments.length > 0;
     return /* @__PURE__ */ jsxs(
@@ -3460,7 +4309,7 @@ function DefaultMessage({
           showUserAvatar ? "justify-end" : "justify-end"
         ),
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%]", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end max-w-[80%] min-w-0", children: [
             message.content && /* @__PURE__ */ jsx(
               MessageContent,
               {
@@ -3506,7 +4355,8 @@ function DefaultMessage({
   const toolsWithoutCustomRender = completedTools?.filter(
     (exec) => !hasCustomRender(exec.name)
   );
-  const toolSteps = toolsWithoutCustomRender?.map((exec) => ({
+  const hasNativeCitations = !!message.metadata?.citations?.length;
+  const toolSteps = toolsWithoutCustomRender?.filter((exec) => !(exec.name === "web_search" && hasNativeCitations)).map((exec) => ({
     id: exec.id,
     name: exec.name,
     args: exec.args,
@@ -3592,11 +4442,23 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, exec.id);
+              return /* @__PURE__ */ jsx(React20.Fragment, { children: output }, exec.id);
             }
             return null;
           }) }),
           toolSteps && toolSteps.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 rounded-lg bg-muted/50 px-3 py-2", children: /* @__PURE__ */ jsx(ToolSteps, { steps: toolSteps }) }),
+          message.toolExecutions?.map((exec) => {
+            const uiResources = exec.result?._uiResources;
+            if (!uiResources || uiResources.length === 0) return null;
+            return /* @__PURE__ */ jsx(
+              MCPUIFrameList,
+              {
+                resources: uiResources,
+                className: "mt-2"
+              },
+              `${exec.id}-ui`
+            );
+          }),
           pendingApprovalTools && pendingApprovalTools.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-2", children: pendingApprovalTools.map((tool) => {
             const approvalCallbacks = {
               onApprove: (extraData) => onApproveToolExecution?.(tool.id, extraData),
@@ -3630,7 +4492,7 @@ function DefaultMessage({
               const output = toolDef.render(
                 renderProps
               );
-              return /* @__PURE__ */ jsx(React18.Fragment, { children: output }, tool.id);
+              return /* @__PURE__ */ jsx(React20.Fragment, { children: output }, tool.id);
             }
             return /* @__PURE__ */ jsx(
               PermissionConfirmation,
@@ -3653,6 +4515,17 @@ function DefaultMessage({
             );
           }) }),
           message.attachments && message.attachments.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: message.attachments.map((attachment, index) => /* @__PURE__ */ jsx(AttachmentPreview, { attachment }, index)) }),
+          shouldShowSources && /* @__PURE__ */ jsx(
+            SourceGroup,
+            {
+              sources,
+              label: citations.label,
+              showFavicon: citations.showFavicon ?? true,
+              numbered: citations.numbered ?? false,
+              maxVisible: citations.maxVisible ?? 6,
+              className: cn("mt-2", citations.className)
+            }
+          ),
           shouldShowFollowUps && /* @__PURE__ */ jsx(
             FollowUpQuestions,
             {
@@ -3668,7 +4541,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React18.useState(false);
+  const [expanded, setExpanded] = React20.useState(false);
   if (attachment.type !== "image") {
     return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-muted/50 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: attachment.type }),
@@ -4126,10 +4999,10 @@ function ChatView({ children, className }) {
 ChatView.displayName = "ChatView";
 function chatViewHasOnlyLayoutChildren(chatViewElement) {
   if (!chatViewElement?.props?.children) return false;
-  const childArray = React18__default.Children.toArray(chatViewElement.props.children);
+  const childArray = React20__default.Children.toArray(chatViewElement.props.children);
   if (childArray.length === 0) return false;
   return childArray.every(
-    (child) => React18__default.isValidElement(child) && (child.type === Header || child.type === Footer)
+    (child) => React20__default.isValidElement(child) && (child.type === Header || child.type === Footer)
   );
 }
 function Header({ children, className }) {
@@ -4267,18 +5140,18 @@ function ThreadPickerCompound(props) {
   );
 }
 function hasCompoundChild(children, ...components) {
-  return React18__default.Children.toArray(children).some(
-    (child) => React18__default.isValidElement(child) && components.includes(child.type)
+  return React20__default.Children.toArray(children).some(
+    (child) => React20__default.isValidElement(child) && components.includes(child.type)
   );
 }
 function findCompoundChild(children, component) {
-  return React18__default.Children.toArray(children).find(
-    (child) => React18__default.isValidElement(child) && child.type === component
+  return React20__default.Children.toArray(children).find(
+    (child) => React20__default.isValidElement(child) && child.type === component
   );
 }
 function filterCompoundChildren(children, ...components) {
-  return React18__default.Children.toArray(children).filter(
-    (child) => React18__default.isValidElement(child) && components.includes(child.type)
+  return React20__default.Children.toArray(children).filter(
+    (child) => React20__default.isValidElement(child) && components.includes(child.type)
   );
 }
 var DEFAULT_MAX_FILE_SIZE2 = 5 * 1024 * 1024;
@@ -4358,6 +5231,8 @@ function ChatComponent({
   showFollowUps = true,
   followUpClassName,
   followUpButtonClassName,
+  // Citations/Sources
+  citations,
   // Custom rendering
   renderMessage,
   renderInput,
@@ -4545,7 +5420,7 @@ function ChatComponent({
     },
     [onSendMessage]
   );
-  const contextValue = React18__default.useMemo(
+  const contextValue = React20__default.useMemo(
     () => ({
       view,
       send,
@@ -4661,7 +5536,7 @@ function ChatComponent({
                             onSendMessage?.(question);
                           }
                         };
-                        return renderMessage ? /* @__PURE__ */ jsx(React18__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                        return renderMessage ? /* @__PURE__ */ jsx(React20__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
                           DefaultMessage,
                           {
                             message: messageWithExecutions,
@@ -4682,7 +5557,8 @@ function ChatComponent({
                             showFollowUps,
                             onFollowUpClick: handleFollowUpClick,
                             followUpClassName,
-                            followUpButtonClassName
+                            followUpButtonClassName,
+                            citations: citations === false ? { enabled: false } : citations
                           },
                           message.id
                         );
@@ -4861,6 +5737,7 @@ function ToolExecutionMessage({
   onApprove,
   onReject,
   toolRenderers,
+  onUIIntent,
   className
 }) {
   if (!executions || executions.length === 0) return null;
@@ -4972,7 +5849,23 @@ function ToolExecutionMessage({
           tool.id
         );
       }) }),
-      toolSteps.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-3 py-2.5 shadow-sm", children: /* @__PURE__ */ jsx(ToolSteps, { steps: toolSteps }) })
+      toolSteps.length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card px-3 py-2.5 shadow-sm", children: /* @__PURE__ */ jsx(ToolSteps, { steps: toolSteps }) }),
+      otherExecutions.map((exec) => {
+        const uiResources = exec.result?._uiResources;
+        if (!uiResources || uiResources.length === 0) return null;
+        return /* @__PURE__ */ jsx(
+          MCPUIFrameList,
+          {
+            resources: uiResources,
+            onIntent: (intent) => onUIIntent?.(intent, {
+              toolName: exec.name,
+              toolCallId: exec.id
+            }),
+            className: "mt-2"
+          },
+          `${exec.id}-ui`
+        );
+      })
     ] })
   ] });
 }
@@ -5017,7 +5910,9 @@ function useInternalThreadManager(config = {}) {
       created_at: m.createdAt,
       tool_calls: m.toolCalls,
       tool_call_id: m.toolCallId,
+      // Preserve full metadata including citations, toolExecutions, etc.
       metadata: {
+        ...m.metadata,
         attachments: m.attachments,
         thinking: m.thinking
       }
@@ -5064,6 +5959,9 @@ function useInternalThreadManager(config = {}) {
     });
   }, [clearCurrentThread, setMessages, onThreadChange]);
   useEffect(() => {
+    if (!adapter) {
+      return;
+    }
     if (hasInitializedRef.current || !currentThread) {
       return;
     }
@@ -5077,7 +5975,10 @@ function useInternalThreadManager(config = {}) {
         createdAt: m.created_at ?? /* @__PURE__ */ new Date(),
         toolCalls: m.tool_calls,
         toolCallId: m.tool_call_id,
-        attachments: m.metadata?.attachments
+        attachments: m.metadata?.attachments,
+        thinking: m.metadata?.thinking,
+        // Preserve full metadata including citations, toolExecutions, etc.
+        metadata: m.metadata
       }));
       lastSavedSnapshotRef.current = getMessageSnapshot(uiMessages);
       savingToThreadRef.current = currentThread.id;
@@ -5090,8 +5991,11 @@ function useInternalThreadManager(config = {}) {
     requestAnimationFrame(() => {
       isLoadingMessagesRef.current = false;
     });
-  }, [currentThread, setMessages, getMessageSnapshot, onThreadChange]);
+  }, [adapter, currentThread, setMessages, getMessageSnapshot, onThreadChange]);
   useEffect(() => {
+    if (!adapter) {
+      return;
+    }
     if (isLoadingMessagesRef.current) {
       return;
     }
@@ -5121,6 +6025,7 @@ function useInternalThreadManager(config = {}) {
     updateCurrentThread({ messages: coreMessages });
     lastSavedSnapshotRef.current = currentSnapshot;
   }, [
+    adapter,
     messages,
     currentThreadId,
     status,
@@ -5296,7 +6201,9 @@ function CopilotChatBase(props) {
       // Include tool_calls for assistant messages
       tool_calls: m.toolCalls,
       // Attach matched tool executions to assistant messages
-      toolExecutions: messageToolExecutions
+      toolExecutions: messageToolExecutions,
+      // Include metadata (citations from native web search, etc.)
+      metadata: m.metadata
     };
   });
   const suggestions = visibleMessages.length === 0 && chatProps.suggestions?.length ? chatProps.suggestions : [];
@@ -5332,7 +6239,7 @@ function CopilotChatBase(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React18__default.useCallback(
+  const handleDeleteThread = React20__default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);
@@ -5457,6 +6364,6 @@ function PoweredBy({ className, showLogo = true }) {
   );
 }
 
-export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, Source, SourceContent, SourceTrigger, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, cn, parseFollowUps, useChatContainer, useCopilotChatContext, useCopilotUI };
+export { AlertTriangleIcon, BotIcon, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatWelcome, CheckIcon, ChevronDownIcon2 as ChevronDownIcon, ChevronLeftIcon, ChevronUpIcon, CitationBadge, CitationSuperscript, CloseIcon, CodeBlock, CompactPermissionConfirmation, Confirmation, ConfirmationActions, ConfirmationApproved, ConfirmationMessage, ConfirmationPending, ConfirmationRejected, ConnectedChat, CopilotChat, CopilotUIProvider, CopyIcon, DEFAULT_PERMISSION_OPTIONS, DevLogger, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, Markdown, MessageAvatar, MessageContent, Message as MessagePrimitive, MessageWithCitations, ModelSelector, PermissionConfirmation, PoweredBy, PromptInput, PromptInputAction, PromptInputActions, PromptInputTextarea, Reasoning, ReasoningContent, ReasoningTrigger, RefreshIcon, ScrollButton, SearchAnswer, SearchResults, SearchResultsWithAnswer, SendIcon, SimpleConfirmation, SimpleModelSelector, SimpleReasoning, SimpleSource, Source, SourceContent, SourceGroup, SourcePill, SourceTrigger, SourcesBar, SourcesCollapsible, SourcesList, StopIcon, ThreadCard, ThreadList, ThreadPicker, ThumbsDownIcon2 as ThumbsDownIcon, ThumbsUpIcon2 as ThumbsUpIcon, ToolExecutionMessage, ToolStep, ToolSteps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UserIcon, XIcon2 as XIcon, annotationsToCitations, cn, parseFollowUps, resultsToCitations, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map