@yourgpt/copilot-sdk 2.1.8 → 2.1.9-alpha.0

package/dist/ui/index.js

@@ -1,8 +1,8 @@
-import { useThreadManager } from '../chunk-H3LX6FTP.js';
+import { useThreadManager } from '../chunk-XVKKLLKW.js';
 import { DEFAULT_MCP_UI_SANDBOX, parseMCPUIMessage } from '../chunk-G4SF2PNQ.js';
-import { cn, Loader, TextShimmerLoader } from '../chunk-TXQ37MAO.js';
-export { Loader, cn } from '../chunk-TXQ37MAO.js';
-import { useCopilot } from '../chunk-ISOMZAYN.js';
+import { cn, Markdown } from '../chunk-RPR5GMWF.js';
+export { Markdown, cn } from '../chunk-RPR5GMWF.js';
+import { useCopilot } from '../chunk-RBULQ6EJ.js';
 import { createLocalStorageAdapter, createServerAdapter } from '../chunk-J5D3AZF6.js';
 import '../chunk-EWVQWTNV.js';
 import '../chunk-VNLLW3ZI.js';
@@ -18,11 +18,9 @@ import '../chunk-DABZYCVX.js';
 import '../chunk-MNDGIW47.js';
 import '../chunk-VD74IPKB.js';
 import '../chunk-DGUM43GV.js';
-import * as React19 from 'react';
-import React19__default, { memo, createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useReducer, useEffect } from 'react';
-import { Streamdown } from 'streamdown';
-import { code } from '@streamdown/code';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React19 from 'react';
+import React19__default, { createContext, useState, useRef, useId, useCallback, useMemo, useLayoutEffect, useContext, useReducer, useEffect } from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { StickToBottom as StickToBottom$1, useStickToBottomContext } from 'use-stick-to-bottom';
@@ -33,42 +31,281 @@ import { Globe, ChevronUp, ChevronDown, ExternalLink } from 'lucide-react';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
 import * as ReactDOM from 'react-dom';
 
-var createHeading = (Tag) => {
-  const HeadingComponent = ({
-    children,
-    className: _,
-    ...props
-  }) => /* @__PURE__ */ jsx(Tag, { className: "text-[1em] font-semibold my-2 first:mt-0", ...props, children });
-  HeadingComponent.displayName = Tag.toUpperCase();
-  return HeadingComponent;
-};
-var headingComponents = {
-  h1: createHeading("h1"),
-  h2: createHeading("h2"),
-  h3: createHeading("h3"),
-  h4: createHeading("h4"),
-  h5: createHeading("h5"),
-  h6: createHeading("h6")
-};
-function MarkdownComponent({
-  children,
+function DotsLoader({
   className,
-  isStreaming = false,
-  linkSafety = { enabled: false }
+  size = "md"
 }) {
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
-    Streamdown,
+  const dotSizes = {
+    sm: "h-1 w-1",
+    md: "h-1.5 w-1.5",
+    lg: "h-2 w-2"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
     {
-      plugins: { code },
-      isAnimating: isStreaming,
-      components: headingComponents,
-      linkSafety,
-      children
+      className: cn(
+        "flex items-center translate-y-[-2px] space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary csdk-loader-bounce-dots rounded-full",
+              dotSizes[size]
+            ),
+            style: {
+              animationDelay: `${i * 160}ms`
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
     }
-  ) });
+  );
+}
+function TypingLoader({
+  className,
+  size = "md"
+}) {
+  const dotSizes = {
+    sm: "h-1 w-1",
+    md: "h-1.5 w-1.5",
+    lg: "h-2 w-2"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(3)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary csdk-loader-typing rounded-full",
+              dotSizes[size]
+            ),
+            style: {
+              animationDelay: `${i * 250}ms`
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function WaveLoader({
+  className,
+  size = "md"
+}) {
+  const barWidths = {
+    sm: "w-0.5",
+    md: "w-0.5",
+    lg: "w-1"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  const heights = {
+    sm: ["6px", "9px", "12px", "9px", "6px"],
+    md: ["8px", "12px", "16px", "12px", "8px"],
+    lg: ["10px", "15px", "20px", "15px", "10px"]
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-0.5",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        [...Array(5)].map((_, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-primary csdk-loader-wave rounded-full",
+              barWidths[size]
+            ),
+            style: {
+              animationDelay: `${i * 100}ms`,
+              height: heights[size][i]
+            }
+          },
+          i
+        )),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function TerminalLoader({
+  className,
+  size = "md"
+}) {
+  const cursorSizes = {
+    sm: "h-3 w-1.5",
+    md: "h-4 w-2",
+    lg: "h-5 w-2.5"
+  };
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  const containerSizes = {
+    sm: "h-4",
+    md: "h-5",
+    lg: "h-6"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center space-x-1",
+        containerSizes[size],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: cn("text-primary font-mono", textSizes[size]), children: ">" }),
+        /* @__PURE__ */ jsx("div", { className: cn("bg-primary csdk-loader-blink", cursorSizes[size]) }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading" })
+      ]
+    }
+  );
+}
+function TextBlinkLoader({
+  text = "Thinking",
+  className,
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "csdk-loader-text-blink font-medium",
+        textSizes[size],
+        className
+      ),
+      children: text
+    }
+  );
+}
+function TextShimmerLoader({
+  text = "Thinking",
+  className,
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
+        "bg-[length:200%_auto] bg-clip-text font-medium text-transparent",
+        "csdk-loader-shimmer",
+        textSizes[size],
+        className
+      ),
+      children: text
+    }
+  );
+}
+function TextDotsLoader({
+  className,
+  text = "Thinking",
+  size = "md"
+}) {
+  const textSizes = {
+    sm: "text-xs",
+    md: "text-sm",
+    lg: "text-base"
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("inline-flex items-center", className), children: [
+    /* @__PURE__ */ jsx("span", { className: cn("text-primary font-medium", textSizes[size]), children: text }),
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-primary csdk-loader-loading-dots",
+          style: { animationDelay: "0.2s" },
+          children: "."
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-primary csdk-loader-loading-dots",
+          style: { animationDelay: "0.4s" },
+          children: "."
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "text-primary csdk-loader-loading-dots",
+          style: { animationDelay: "0.6s" },
+          children: "."
+        }
+      )
+    ] })
+  ] });
+}
+function Loader({
+  variant = "typing",
+  size = "md",
+  text,
+  className
+}) {
+  switch (variant) {
+    case "dots":
+      return /* @__PURE__ */ jsx(DotsLoader, { size, className });
+    case "typing":
+      return /* @__PURE__ */ jsx(TypingLoader, { size, className });
+    case "wave":
+      return /* @__PURE__ */ jsx(WaveLoader, { size, className });
+    case "terminal":
+      return /* @__PURE__ */ jsx(TerminalLoader, { size, className });
+    case "text-blink":
+      return /* @__PURE__ */ jsx(TextBlinkLoader, { text, size, className });
+    case "text-shimmer":
+      return /* @__PURE__ */ jsx(TextShimmerLoader, { text, size, className });
+    case "loading-dots":
+      return /* @__PURE__ */ jsx(TextDotsLoader, { text, size, className });
+    default:
+      return /* @__PURE__ */ jsx(TypingLoader, { size, className });
+  }
 }
-var Markdown = memo(MarkdownComponent);
-Markdown.displayName = "Markdown";
 function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -1432,9 +1669,9 @@ function ReasoningContent({
   const [height, setHeight] = React19.useState(0);
   React19.useEffect(() => {
     if (contentRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        for (const entry of entries) {
-          setHeight(entry.contentRect.height);
+      const resizeObserver = new ResizeObserver(() => {
+        if (contentRef.current) {
+          setHeight(contentRef.current.offsetHeight);
         }
       });
       resizeObserver.observe(contentRef.current);
@@ -1455,7 +1692,7 @@ function ReasoningContent({
         {
           ref: contentRef,
           className: cn(
-            "mt-1 pl-3 border-l-2 border-muted-foreground/20",
+            "mt-1 pl-3 pb-2 border-l-2 border-muted-foreground/20",
             "text-xs text-muted-foreground",
             className
           ),
@@ -7137,68 +7374,88 @@ function CopilotChatBase(props) {
       const toolCallIds = new Set(
         m.toolCalls.map((tc) => tc.id)
       );
-      const liveExecutions = toolExecutions.filter(
-        (exec) => toolCallIds.has(exec.id)
-      );
-      if (liveExecutions.length > 0) {
-        messageToolExecutions = liveExecutions.map(
-          (exec) => {
-            if (!exec.result && toolResultsMap.has(exec.id)) {
-              const resultContent = toolResultsMap.get(exec.id);
-              try {
-                return { ...exec, result: JSON.parse(resultContent) };
-              } catch {
-                return {
-                  ...exec,
-                  result: { success: false, message: resultContent }
-                };
+      const isLastMsg = m.id === [...messages].reverse().find((msg) => msg.role === "assistant")?.id;
+      const savedMeta = m.metadata?.toolExecutions;
+      if (!isLastMsg && savedMeta && savedMeta.length > 0) {
+        messageToolExecutions = savedMeta;
+      } else {
+        const liveExecutions = isLastMsg ? toolExecutions.filter(
+          (exec) => toolCallIds.has(exec.id)
+        ) : [];
+        if (liveExecutions.length > 0) {
+          messageToolExecutions = liveExecutions.map(
+            (exec) => {
+              if (!exec.result && toolResultsMap.has(exec.id)) {
+                const resultContent = toolResultsMap.get(exec.id);
+                try {
+                  return { ...exec, result: JSON.parse(resultContent) };
+                } catch {
+                  return {
+                    ...exec,
+                    result: { success: false, message: resultContent }
+                  };
+                }
               }
+              return exec;
             }
-            return exec;
-          }
-        );
-      } else {
-        const toolCallsHidden = m.metadata?.toolCallsHidden;
-        messageToolExecutions = m.toolCalls.map(
-          (tc) => {
-            const resultContent = toolResultsMap.get(tc.id);
-            let result = void 0;
-            if (resultContent) {
+          );
+        } else {
+          const toolCallsHidden = m.metadata?.toolCallsHidden;
+          messageToolExecutions = m.toolCalls.map(
+            (tc) => {
+              const resultContent = toolResultsMap.get(tc.id);
+              let result = void 0;
+              if (resultContent) {
+                try {
+                  result = JSON.parse(resultContent);
+                } catch {
+                  result = { success: false, message: resultContent };
+                }
+              }
+              let args = {};
               try {
-                result = JSON.parse(resultContent);
+                args = JSON.parse(tc.function.arguments || "{}");
               } catch {
-                result = { success: false, message: resultContent };
               }
+              let hidden = toolCallsHidden?.[tc.id];
+              if (hidden === void 0) {
+                const toolDef = registeredTools?.find(
+                  (t) => t.name === tc.function.name
+                );
+                hidden = toolDef?.hidden;
+              }
+              return {
+                id: tc.id,
+                name: tc.function.name,
+                args,
+                status: result ? "completed" : "pending",
+                result,
+                timestamp: m.createdAt instanceof Date ? m.createdAt.getTime() : Date.now(),
+                hidden
+              };
             }
-            let args = {};
-            try {
-              args = JSON.parse(tc.function.arguments || "{}");
-            } catch {
-            }
-            let hidden = toolCallsHidden?.[tc.id];
-            if (hidden === void 0) {
-              const toolDef = registeredTools?.find(
-                (t) => t.name === tc.function.name
-              );
-              hidden = toolDef?.hidden;
-            }
-            return {
-              id: tc.id,
-              name: tc.function.name,
-              args,
-              status: result ? "completed" : "pending",
-              result,
-              timestamp: m.createdAt instanceof Date ? m.createdAt.getTime() : Date.now(),
-              hidden
-            };
-          }
-        );
+          );
+        }
       }
     }
     const savedExecutions = m.metadata?.toolExecutions;
     if (savedExecutions && savedExecutions.length > 0 && !messageToolExecutions) {
       messageToolExecutions = savedExecutions;
     }
+    const isLastAssistant = m.id === [...messages].reverse().find((msg) => msg.role === "assistant")?.id;
+    if (isLastAssistant && !messageToolExecutions && m.role === "assistant" && isLoading && toolExecutions.length > 0) {
+      const allMatchedIds = new Set(
+        messages.filter((msg) => msg.toolCalls).flatMap(
+          (msg) => (msg.toolCalls || []).map((tc) => tc.id)
+        )
+      );
+      const unmatchedExecutions = toolExecutions.filter(
+        (exec) => !allMatchedIds.has(exec.id) && (exec.status === "executing" || exec.status === "pending" || exec.approvalStatus === "required")
+      );
+      if (unmatchedExecutions.length > 0) {
+        messageToolExecutions = unmatchedExecutions;
+      }
+    }
     const visibleToolExecutions = messageToolExecutions?.filter(
       (exec) => !exec.hidden
     );
@@ -7219,6 +7476,7 @@ function CopilotChatBase(props) {
       _hasOnlyHiddenTools: messageToolExecutions && messageToolExecutions.length > 0 && (!visibleToolExecutions || visibleToolExecutions.length === 0)
     };
   }).filter((m) => {
+    if (!m) return false;
     if (m.role === "assistant" && !m.content && m._hasOnlyHiddenTools) {
       return false;
     }
@@ -7938,6 +8196,6 @@ var ChatPrimitives = {
   Loader
 };
 
-export { AlertTriangleIcon, AttachmentStrip, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, 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, DropZoneOverlay, FeedbackBar, FollowUpQuestions, InlineToolSteps, 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, parseFollowUps, resultsToCitations, useAttachments, useChatContainer, useCopilotChatContext, useCopilotUI };
+export { AlertTriangleIcon, AttachmentStrip, BotIcon, BranchNavigator, Button, CapabilityBadge, CapabilityList, Chat, ChatContainerContent, ChatContainerRoot, ChatContainerScrollAnchor, ChatPrimitives, 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, DropZoneOverlay, FeedbackBar, FollowUpQuestions, InlineToolSteps, Loader, MCPUIFrame, MCPUIFrameList, 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, parseFollowUps, resultsToCitations, useAttachments, useChatContainer, useCopilotChatContext, useCopilotUI };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map