@yourgpt/copilot-sdk 1.2.7 → 1.2.9

package/dist/ui/index.d.cts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { Components } from 'react-markdown';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as use_stick_to_bottom from 'use-stick-to-bottom';
@@ -20,9 +19,9 @@ type MarkdownProps = {
     children: string;
     id?: string;
     className?: string;
-    components?: Partial<Components>;
+    isStreaming?: boolean;
 };
-declare function MarkdownComponent({ children, id, className, components, }: MarkdownProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownComponent({ children, className, isStreaming, }: MarkdownProps): react_jsx_runtime.JSX.Element;
 declare const Markdown: React$1.MemoExoticComponent<typeof MarkdownComponent>;
 
 type CodeBlockProps = {

package/dist/ui/index.d.ts

@@ -1,7 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import React__default from 'react';
-import { Components } from 'react-markdown';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as use_stick_to_bottom from 'use-stick-to-bottom';
@@ -20,9 +19,9 @@ type MarkdownProps = {
     children: string;
     id?: string;
     className?: string;
-    components?: Partial<Components>;
+    isStreaming?: boolean;
 };
-declare function MarkdownComponent({ children, id, className, components, }: MarkdownProps): react_jsx_runtime.JSX.Element;
+declare function MarkdownComponent({ children, className, isStreaming, }: MarkdownProps): react_jsx_runtime.JSX.Element;
 declare const Markdown: React$1.MemoExoticComponent<typeof MarkdownComponent>;
 
 type CodeBlockProps = {

package/dist/ui/index.js

@@ -2,14 +2,11 @@ import { useCopilot, useThreadManager } from '../chunk-EYNSW3NR.js';
 import { createServerAdapter } from '../chunk-CVD3X4MN.js';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import { marked } from 'marked';
-import * as React8 from 'react';
-import React8__default, { memo, createContext, useId, useMemo, useState, useEffect, useRef, useLayoutEffect, useCallback, useContext } from 'react';
-import ReactMarkdown from 'react-markdown';
-import remarkBreaks from 'remark-breaks';
-import remarkGfm from 'remark-gfm';
-import { codeToHtml } from 'shiki';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React7 from 'react';
+import React7__default, { memo, createContext, useState, useRef, useLayoutEffect, useId, useCallback, useContext, useEffect } from 'react';
+import { Streamdown } from 'streamdown';
+import { code } from '@streamdown/code';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
 import { useStickToBottomContext, StickToBottom as StickToBottom$1 } from 'use-stick-to-bottom';
@@ -416,6 +413,15 @@ function Loader({
       return /* @__PURE__ */ jsx(CircularLoader, { size, className });
   }
 }
+function MarkdownComponent({
+  children,
+  className,
+  isStreaming = false
+}) {
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(Streamdown, { plugins: { code }, isAnimating: isStreaming, children }) });
+}
+var Markdown = memo(MarkdownComponent);
+Markdown.displayName = "Markdown";
 function CodeBlock({ children, className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -430,109 +436,6 @@ function CodeBlock({ children, className, ...props }) {
     }
   );
 }
-function CodeBlockCode({
-  code,
-  language = "tsx",
-  theme = "github-light",
-  className,
-  ...props
-}) {
-  const [highlightedHtml, setHighlightedHtml] = useState(null);
-  useEffect(() => {
-    async function highlight() {
-      if (!code) {
-        setHighlightedHtml("<pre><code></code></pre>");
-        return;
-      }
-      const html = await codeToHtml(code, { lang: language, theme });
-      setHighlightedHtml(html);
-    }
-    highlight();
-  }, [code, language, theme]);
-  const classNames = cn(
-    "w-full overflow-x-auto text-[13px] [&>pre]:px-4 [&>pre]:py-4",
-    className
-  );
-  return highlightedHtml ? /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames,
-      dangerouslySetInnerHTML: { __html: highlightedHtml },
-      ...props
-    }
-  ) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children: /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", { children: code }) }) });
-}
-function parseMarkdownIntoBlocks(markdown) {
-  const tokens = marked.lexer(markdown);
-  return tokens.map((token) => token.raw);
-}
-function extractLanguage(className) {
-  if (!className) return "plaintext";
-  const match = className.match(/language-(\w+)/);
-  return match ? match[1] : "plaintext";
-}
-var INITIAL_COMPONENTS = {
-  code: function CodeComponent({ className, children, ...props }) {
-    const isInline = !props.node?.position?.start.line || props.node?.position?.start.line === props.node?.position?.end.line;
-    if (isInline) {
-      return /* @__PURE__ */ jsx(
-        "span",
-        {
-          className: cn(
-            "bg-primary-foreground rounded-sm px-1 font-mono text-sm",
-            className
-          ),
-          ...props,
-          children
-        }
-      );
-    }
-    const language = extractLanguage(className);
-    return /* @__PURE__ */ jsx(CodeBlock, { className, children: /* @__PURE__ */ jsx(CodeBlockCode, { code: children, language }) });
-  },
-  pre: function PreComponent({ children }) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-};
-var MemoizedMarkdownBlock = memo(
-  function MarkdownBlock({
-    content,
-    components = INITIAL_COMPONENTS
-  }) {
-    return /* @__PURE__ */ jsx(
-      ReactMarkdown,
-      {
-        remarkPlugins: [remarkGfm, remarkBreaks],
-        components,
-        children: content
-      }
-    );
-  },
-  function propsAreEqual(prevProps, nextProps) {
-    return prevProps.content === nextProps.content;
-  }
-);
-MemoizedMarkdownBlock.displayName = "MemoizedMarkdownBlock";
-function MarkdownComponent({
-  children,
-  id,
-  className,
-  components = INITIAL_COMPONENTS
-}) {
-  const generatedId = useId();
-  const blockId = id ?? generatedId;
-  const blocks = useMemo(() => parseMarkdownIntoBlocks(children), [children]);
-  return /* @__PURE__ */ jsx("div", { className, children: blocks.map((block, index) => /* @__PURE__ */ jsx(
-    MemoizedMarkdownBlock,
-    {
-      content: block,
-      components
-    },
-    `${blockId}-block-${index}`
-  )) });
-}
-var Markdown = memo(MarkdownComponent);
-Markdown.displayName = "Markdown";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -558,7 +461,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React8.forwardRef(
+var Button = React7.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -799,7 +702,7 @@ function TooltipTrigger({
   disabled,
   ...props
 }) {
-  if (asChild && React8__default.isValidElement(children)) {
+  if (asChild && React7__default.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, render: children, ...props });
   }
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { disabled, ...props, children });
@@ -828,7 +731,7 @@ function TooltipContent({
     }
   ) }) });
 }
-var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Avatar = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Root,
   {
     ref,
@@ -840,7 +743,7 @@ var Avatar = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarImage = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -849,7 +752,7 @@ var AvatarImage = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AvatarFallback = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -890,12 +793,21 @@ var MessageContent = ({
   const classNames = cn(
     "rounded-lg p-2 bg-secondary prose break-words whitespace-normal max-w-none",
     "text-foreground prose-headings:text-foreground prose-p:text-foreground prose-strong:text-foreground prose-li:text-foreground prose-a:text-foreground prose-ol:text-foreground prose-ul:text-foreground prose-code:text-foreground",
+    // Compact spacing overrides
+    "prose-p:my-1 prose-p:leading-relaxed",
+    "prose-ul:my-1 prose-ol:my-1 prose-li:my-0.5",
+    "prose-headings:my-2 first:prose-headings:mt-0",
+    "prose-pre:my-2 prose-blockquote:my-2",
+    // Normalize headings for chat UI (same size, just bold)
+    "prose-headings:text-[1em] prose-headings:font-semibold",
+    // List styling overrides (fix Streamdown's list-inside)
+    "[&_ul]:list-outside [&_ol]:list-outside [&_ul]:pl-4 [&_ol]:pl-4 [&_li]:pl-0",
     proseSizeMap[size],
     className
   );
   return markdown ? /* @__PURE__ */ jsx(Markdown, { className: classNames, ...props, children }) : /* @__PURE__ */ jsx("div", { className: classNames, ...props, children });
 };
-var Textarea = React8.forwardRef(({ className, ...props }, ref) => {
+var Textarea = React7.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     "textarea",
     {
@@ -1059,7 +971,7 @@ function PromptInputAction({
 }
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
+var HoverCardContent = React7.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(
   HoverCardPrimitive.Content,
   {
     ref,
@@ -1159,11 +1071,11 @@ function SourceContent({
     }
   ) });
 }
-var ReasoningContext = React8.createContext(
+var ReasoningContext = React7.createContext(
   null
 );
 function useReasoningContext() {
-  const context = React8.useContext(ReasoningContext);
+  const context = React7.useContext(ReasoningContext);
   if (!context) {
     throw new Error(
       "Reasoning components must be used within a Reasoning provider"
@@ -1179,11 +1091,11 @@ function Reasoning({
   defaultOpen = false,
   className
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
-  const prevStreamingRef = React8.useRef(isStreaming);
+  const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen);
+  const prevStreamingRef = React7.useRef(isStreaming);
   const isControlled = controlledOpen !== void 0;
   const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
-  const setIsOpen = React8.useCallback(
+  const setIsOpen = React7.useCallback(
     (open) => {
       if (onOpenChange) {
         onOpenChange(open);
@@ -1194,7 +1106,7 @@ function Reasoning({
     },
     [isControlled, onOpenChange]
   );
-  React8.useEffect(() => {
+  React7.useEffect(() => {
     if (isStreaming && !prevStreamingRef.current) {
       setIsOpen(true);
     } else if (!isStreaming && prevStreamingRef.current) {
@@ -1250,9 +1162,9 @@ function ReasoningContent({
   className
 }) {
   const { isOpen } = useReasoningContext();
-  const contentRef = React8.useRef(null);
-  const [height, setHeight] = React8.useState(0);
-  React8.useEffect(() => {
+  const contentRef = React7.useRef(null);
+  const [height, setHeight] = React7.useState(0);
+  React7.useEffect(() => {
     if (contentRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
         for (const entry of entries) {
@@ -1301,11 +1213,11 @@ function SimpleReasoning({
     /* @__PURE__ */ jsx(ReasoningContent, { markdown, children: content })
   ] });
 }
-var CopilotUIContext = React8.createContext(
+var CopilotUIContext = React7.createContext(
   null
 );
 function useCopilotUI() {
-  const context = React8.useContext(CopilotUIContext);
+  const context = React7.useContext(CopilotUIContext);
   if (!context) {
     return {
       debug: false,
@@ -1320,7 +1232,7 @@ function CopilotUIProvider({
   debug = false,
   defaultDebugExpanded = false
 }) {
-  const value = React8.useMemo(
+  const value = React7.useMemo(
     () => ({
       debug,
       defaultDebugExpanded,
@@ -1462,7 +1374,7 @@ function ToolStep({
 }) {
   const { isDebug, defaultDebugExpanded } = useCopilotUI();
   const debug = debugProp ?? isDebug;
-  const [expanded, setExpanded] = React8.useState(
+  const [expanded, setExpanded] = React7.useState(
     defaultExpanded ?? defaultDebugExpanded ?? false
   );
   const displayTitle = getDisplayTitle(step);
@@ -1927,9 +1839,9 @@ function ArrowUpRightIcon({ className }) {
     }
   );
 }
-var ConfirmationContext = React8.createContext(null);
+var ConfirmationContext = React7.createContext(null);
 function useConfirmationContext() {
-  const context = React8.useContext(ConfirmationContext);
+  const context = React7.useContext(ConfirmationContext);
   if (!context) {
     throw new Error(
       "Confirmation components must be used within a Confirmation provider"
@@ -2101,8 +2013,8 @@ function PermissionConfirmation({
   permissionOptions = DEFAULT_PERMISSION_OPTIONS,
   className
 }) {
-  const [selectedPermission, setSelectedPermission] = React8.useState("ask");
-  const [showOptions, setShowOptions] = React8.useState(false);
+  const [selectedPermission, setSelectedPermission] = React7.useState("ask");
+  const [showOptions, setShowOptions] = React7.useState(false);
   const handleApprove = () => {
     onApprove?.(selectedPermission);
   };
@@ -2232,7 +2144,7 @@ function CompactPermissionConfirmation({
   onReject,
   className
 }) {
-  const [rememberChoice, setRememberChoice] = React8.useState(false);
+  const [rememberChoice, setRememberChoice] = React7.useState(false);
   const handleApprove = () => {
     onApprove?.(rememberChoice ? "allow_always" : "ask");
   };
@@ -2775,9 +2687,9 @@ function ModelSelector({
   showCapabilities = true,
   className
 }) {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const containerRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const containerRef = React7.useRef(null);
+  React7.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -2786,7 +2698,7 @@ function ModelSelector({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const selectedModel = React8.useMemo(() => {
+  const selectedModel = React7.useMemo(() => {
     if (!value) return null;
     if (providers) {
       for (const provider of providers) {
@@ -3012,7 +2924,7 @@ function PopoverTrigger({
   className,
   ...props
 }) {
-  if (asChild && React8.isValidElement(children)) {
+  if (asChild && React7.isValidElement(children)) {
     return /* @__PURE__ */ jsx(Popover$1.Trigger, { render: children, className, ...props });
   }
   return /* @__PURE__ */ jsx(Popover$1.Trigger, { className, ...props, children });
@@ -3147,8 +3059,8 @@ function ThreadPicker({
   itemClassName,
   newButtonClassName
 }) {
-  const [isOpen, setIsOpen] = React8.useState(false);
-  const selectedThread = React8.useMemo(() => {
+  const [isOpen, setIsOpen] = React7.useState(false);
+  const selectedThread = React7.useMemo(() => {
     if (!value) return null;
     return threads.find((t) => t.id === value) ?? null;
   }, [value, threads]);
@@ -3354,7 +3266,7 @@ function ThreadCard({
   showDelete = true,
   className
 }) {
-  const [isHovered, setIsHovered] = React8.useState(false);
+  const [isHovered, setIsHovered] = React7.useState(false);
   const handleDelete = (e) => {
     e.stopPropagation();
     onDelete?.();
@@ -3605,7 +3517,7 @@ function DefaultMessage({
 }) {
   const isUser = message.role === "user";
   const isStreaming = isLastMessage && isLoading;
-  const { cleanContent, followUps } = React8.useMemo(() => {
+  const { cleanContent, followUps } = React7.useMemo(() => {
     if (isUser || !message.content) {
       return { cleanContent: message.content, followUps: [] };
     }
@@ -3743,7 +3655,7 @@ function DefaultMessage({
             toolName: exec.name
           };
           const output = toolDef.render(renderProps);
-          return /* @__PURE__ */ jsx(React8.Fragment, { children: output }, exec.id);
+          return /* @__PURE__ */ jsx(React7.Fragment, { children: output }, exec.id);
         }
         return null;
       }) }),
@@ -3779,7 +3691,7 @@ function DefaultMessage({
             approval: approvalCallbacks
           };
           const output = toolDef.render(renderProps);
-          return /* @__PURE__ */ jsx(React8.Fragment, { children: output }, tool.id);
+          return /* @__PURE__ */ jsx(React7.Fragment, { children: output }, tool.id);
         }
         return /* @__PURE__ */ jsx(
           PermissionConfirmation,
@@ -3811,7 +3723,7 @@ function DefaultMessage({
   ] });
 }
 function AttachmentPreview({ attachment }) {
-  const [expanded, setExpanded] = React8.useState(false);
+  const [expanded, setExpanded] = React7.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 }),
@@ -4562,7 +4474,7 @@ function Chat({
                               onSendMessage?.(question);
                             }
                           };
-                          return renderMessage ? /* @__PURE__ */ jsx(React8__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
+                          return renderMessage ? /* @__PURE__ */ jsx(React7__default.Fragment, { children: renderMessage(messageWithExecutions, index) }, message.id) : /* @__PURE__ */ jsx(
                             DefaultMessage,
                             {
                               message: messageWithExecutions,
@@ -5230,7 +5142,7 @@ function CopilotChat(props) {
     footer: classNames.footer
   } : void 0;
   const { threadManager, handleSwitchThread, handleNewThread, isBusy } = threadManagerResult;
-  const handleDeleteThread = React8__default.useCallback(
+  const handleDeleteThread = React7__default.useCallback(
     (threadId) => {
       const isCurrentThread = threadManager.currentThreadId === threadId;
       threadManager.deleteThread(threadId);