@copilotkit/react-ui 1.8.13-next.1 → 1.8.13-next.3

package/dist/index.js

@@ -87,6 +87,8 @@ __export(src_exports, {
   CopilotSidebar: () => CopilotSidebar,
   Markdown: () => Markdown,
   RenderImageMessage: () => RenderImageMessage,
+  RenderSuggestion: () => Suggestion,
+  RenderSuggestionsList: () => Suggestions,
   UserMessage: () => UserMessage,
   shouldShowDevConsole: () => shouldShowDevConsole,
   useChatContext: () => useChatContext,
@@ -1069,7 +1071,8 @@ var Messages = ({
   onRegenerate,
   onCopy,
   onThumbsUp,
-  onThumbsDown
+  onThumbsDown,
+  markdownTagRenderers
 }) => {
   const context = useChatContext();
   const initialMessages = (0, import_react6.useMemo)(
@@ -1108,7 +1111,8 @@ var Messages = ({
               onRegenerate,
               onCopy,
               onThumbsUp,
-              onThumbsDown
+              onThumbsDown,
+              markdownTagRenderers
             },
             index
           );
@@ -1937,31 +1941,17 @@ var highlightStyle = {
 // src/components/chat/Markdown.tsx
 var import_remark_gfm = __toESM(require("remark-gfm"));
 var import_remark_math = __toESM(require("remark-math"));
+var import_rehype_raw = __toESM(require("rehype-raw"));
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var MemoizedReactMarkdown = (0, import_react11.memo)(
-  import_react_markdown.default,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
-);
-var Markdown = ({ content }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MemoizedReactMarkdown, { components, remarkPlugins: [import_remark_gfm.default, import_remark_math.default], children: content }) });
-};
-var components = {
+var defaultComponents = {
   a(_a) {
     var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
-    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-      "a",
-      __spreadProps(__spreadValues({
-        style: { color: "blue", textDecoration: "underline" }
-      }, props), {
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("a", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { target: "_blank", rel: "noopener noreferrer", children }));
   },
+  // @ts-expect-error -- inline
   code(_c) {
     var _d = _c, { children, className, inline } = _d, props = __objRest(_d, ["children", "className", "inline"]);
-    if (children.length) {
+    if (Array.isArray(children) && children.length) {
       if (children[0] == "\u258D") {
         return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
           "span",
@@ -1974,7 +1964,7 @@ var components = {
           }
         );
       }
-      children[0] = children[0].replace("`\u258D`", "\u258D");
+      children[0] = (children == null ? void 0 : children[0]).replace("`\u258D`", "\u258D");
     }
     const match = /language-(\w+)/.exec(className || "");
     if (inline) {
@@ -1988,8 +1978,67 @@ var components = {
       }, props),
       Math.random()
     );
+  },
+  h1: (_e) => {
+    var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h1", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h2: (_g) => {
+    var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h3: (_i) => {
+    var _j = _i, { children } = _j, props = __objRest(_j, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h4: (_k) => {
+    var _l = _k, { children } = _l, props = __objRest(_l, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h4", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h5: (_m) => {
+    var _n = _m, { children } = _n, props = __objRest(_n, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h5", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  h6: (_o) => {
+    var _p = _o, { children } = _p, props = __objRest(_p, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h6", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  p: (_q) => {
+    var _r = _q, { children } = _r, props = __objRest(_r, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  pre: (_s) => {
+    var _t = _s, { children } = _t, props = __objRest(_t, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("pre", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  blockquote: (_u) => {
+    var _v = _u, { children } = _v, props = __objRest(_v, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("blockquote", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  ul: (_w) => {
+    var _x = _w, { children } = _x, props = __objRest(_x, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("ul", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
+  },
+  li: (_y) => {
+    var _z = _y, { children } = _z, props = __objRest(_z, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("li", __spreadProps(__spreadValues({ className: "copilotKitMarkdownElement" }, props), { children }));
   }
 };
+var MemoizedReactMarkdown = (0, import_react11.memo)(
+  import_react_markdown.default,
+  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.components === nextProps.components
+);
+var Markdown = ({ content, components }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "copilotKitMarkdown", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    MemoizedReactMarkdown,
+    {
+      components: __spreadValues(__spreadValues({}, defaultComponents), components),
+      remarkPlugins: [import_remark_gfm.default, import_remark_math.default],
+      rehypePlugins: [import_rehype_raw.default],
+      children: content
+    }
+  ) });
+};
 
 // src/components/chat/messages/AssistantMessage.tsx
 var import_react12 = require("react");
@@ -2004,7 +2053,8 @@ var AssistantMessage = (props) => {
     onCopy,
     onThumbsUp,
     onThumbsDown,
-    isCurrentMessage
+    isCurrentMessage,
+    markdownTagRenderers
   } = props;
   const [copied, setCopied] = (0, import_react12.useState)(false);
   const handleCopy = () => {
@@ -2037,7 +2087,7 @@ var AssistantMessage = (props) => {
   const LoadingIcon = () => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: icons.activityIcon });
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
     (message || isLoading) && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "copilotKitMessage copilotKitAssistantMessage", children: [
-      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Markdown, { content: message || "" }),
+      message && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Markdown, { content: message || "", components: markdownTagRenderers }),
       isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoadingIcon, {}),
       message && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
         "div",
@@ -2110,7 +2160,8 @@ function RenderTextMessage(_a) {
     onRegenerate,
     onCopy,
     onThumbsUp,
-    onThumbsDown
+    onThumbsDown,
+    markdownTagRenderers
   } = props;
   if (message.isTextMessage()) {
     if (message.role === "user") {
@@ -2136,7 +2187,8 @@ function RenderTextMessage(_a) {
           onRegenerate: () => onRegenerate == null ? void 0 : onRegenerate(message.id),
           onCopy,
           onThumbsUp,
-          onThumbsDown
+          onThumbsDown,
+          markdownTagRenderers
         },
         index
       );
@@ -2447,19 +2499,23 @@ function RenderImageMessage(_a) {
   return null;
 }
 
+// src/components/chat/Chat.tsx
+var import_react13 = __toESM(require("react"));
+var import_react_core10 = require("@copilotkit/react-core");
+
 // src/components/chat/Suggestion.tsx
 var import_react_core9 = require("@copilotkit/react-core");
 var import_shared2 = require("@copilotkit/shared");
 var import_runtime_client_gql3 = require("@copilotkit/runtime-client-gql");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-function Suggestion({ title, message, onClick, partial, className }) {
+function Suggestion({ title, onClick, partial, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "button",
     {
       disabled: partial,
       onClick: (e) => {
         e.preventDefault();
-        onClick(message);
+        onClick();
       },
       className: className || (partial ? "suggestion loading" : "suggestion"),
       "data-test-id": "suggestion",
@@ -2538,8 +2594,6 @@ var reloadSuggestions = (context, chatSuggestionConfiguration, setCurrentSuggest
 });
 
 // src/components/chat/Chat.tsx
-var import_react13 = __toESM(require("react"));
-var import_react_core10 = require("@copilotkit/react-core");
 var import_runtime_client_gql4 = require("@copilotkit/runtime-client-gql");
 var import_shared3 = require("@copilotkit/shared");
 var import_react_core11 = require("@copilotkit/react-core");
@@ -2622,8 +2676,24 @@ var ImageUploadQueue = ({
   );
 };
 
-// src/components/chat/Chat.tsx
+// src/components/chat/Suggestions.tsx
 var import_jsx_runtime25 = require("react/jsx-runtime");
+function Suggestions({ suggestions, onSuggestionClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "suggestions", children: suggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    Suggestion,
+    {
+      title: suggestion.title,
+      message: suggestion.message,
+      partial: suggestion.partial,
+      className: suggestion.className,
+      onClick: () => onSuggestionClick(suggestion.message)
+    },
+    index
+  )) });
+}
+
+// src/components/chat/Chat.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function CopilotChat({
   instructions,
   onSubmitMessage,
@@ -2635,12 +2705,14 @@ function CopilotChat({
   onCopy,
   onThumbsUp,
   onThumbsDown,
+  markdownTagRenderers,
   Messages: Messages2 = Messages,
   RenderTextMessage: RenderTextMessage2 = RenderTextMessage,
   RenderActionExecutionMessage: RenderActionExecutionMessage2 = RenderActionExecutionMessage,
   RenderAgentStateMessage: RenderAgentStateMessage2 = RenderAgentStateMessage,
   RenderResultMessage: RenderResultMessage2 = RenderResultMessage,
   RenderImageMessage: RenderImageMessage2 = RenderImageMessage,
+  RenderSuggestionsList = Suggestions,
   Input: Input2 = Input,
   className,
   icons,
@@ -2780,8 +2852,8 @@ function CopilotChat({
   const removeSelectedImage = (index) => {
     setSelectedImages((prev) => prev.filter((_, i) => i !== index));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(WrappedCopilotChat, { icons, labels, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Messages2,
       {
         AssistantMessage: AssistantMessage2,
@@ -2797,22 +2869,19 @@ function CopilotChat({
         onCopy: handleCopy,
         onThumbsUp,
         onThumbsDown,
-        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "suggestions", children: currentSuggestions.map((suggestion, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
-          Suggestion,
+        markdownTagRenderers,
+        children: currentSuggestions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          RenderSuggestionsList,
           {
-            title: suggestion.title,
-            message: suggestion.message,
-            partial: suggestion.partial,
-            className: suggestion.className,
-            onClick: (message) => handleSendMessage(message)
-          },
-          index
-        )) })
+            onSuggestionClick: handleSendMessage,
+            suggestions: currentSuggestions
+          }
+        )
       }
     ),
-    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    imageUploadsEnabled && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ImageUploadQueue, { images: selectedImages, onRemoveImage: removeSelectedImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           type: "file",
@@ -2824,7 +2893,7 @@ function CopilotChat({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       Input2,
       {
         inProgress: isLoading,
@@ -2847,10 +2916,10 @@ function WrappedCopilotChat({
 }) {
   const chatContext = import_react13.default.useContext(ChatContext);
   if (!chatContext) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
-    }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChatContextProvider, { icons, labels, open: true, setOpen: () => {
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: `copilotKitChat ${className != null ? className : ""}`, children }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children });
 }
 var SUGGESTIONS_DEBOUNCE_TIMEOUT = 1e3;
 var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onStopGeneration, onReloadMessages) => {
@@ -3035,55 +3104,85 @@ var useCopilotChatLogic = (makeSystemMessage, onInProgress, onSubmitMessage, onS
 };
 
 // src/components/chat/Modal.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
-var CopilotModal = ({
-  instructions,
-  defaultOpen = false,
-  clickOutsideToClose = true,
-  hitEscapeToClose = true,
-  onSetOpen,
-  onSubmitMessage,
-  onStopGeneration,
-  onReloadMessages,
-  shortcut = "/",
-  icons,
-  labels,
-  makeSystemMessage,
-  onInProgress,
-  Window: Window2 = Window,
-  Button: Button2 = Button,
-  Header: Header2 = Header,
-  Messages: Messages2 = Messages,
-  Input: Input2 = Input,
-  AssistantMessage: AssistantMessage2 = AssistantMessage,
-  UserMessage: UserMessage2 = UserMessage,
-  onThumbsUp,
-  onThumbsDown,
-  onCopy,
-  onRegenerate,
-  className,
-  children
-}) => {
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var CopilotModal = (_a) => {
+  var _b = _a, {
+    instructions,
+    defaultOpen = false,
+    clickOutsideToClose = true,
+    hitEscapeToClose = true,
+    onSetOpen,
+    onSubmitMessage,
+    onStopGeneration,
+    onReloadMessages,
+    shortcut = "/",
+    icons,
+    labels,
+    makeSystemMessage,
+    onInProgress,
+    Window: Window2 = Window,
+    Button: Button2 = Button,
+    Header: Header2 = Header,
+    Messages: Messages2 = Messages,
+    Input: Input2 = Input,
+    AssistantMessage: AssistantMessage2 = AssistantMessage,
+    UserMessage: UserMessage2 = UserMessage,
+    onThumbsUp,
+    onThumbsDown,
+    onCopy,
+    onRegenerate,
+    markdownTagRenderers,
+    className,
+    children
+  } = _b, props = __objRest(_b, [
+    "instructions",
+    "defaultOpen",
+    "clickOutsideToClose",
+    "hitEscapeToClose",
+    "onSetOpen",
+    "onSubmitMessage",
+    "onStopGeneration",
+    "onReloadMessages",
+    "shortcut",
+    "icons",
+    "labels",
+    "makeSystemMessage",
+    "onInProgress",
+    "Window",
+    "Button",
+    "Header",
+    "Messages",
+    "Input",
+    "AssistantMessage",
+    "UserMessage",
+    "onThumbsUp",
+    "onThumbsDown",
+    "onCopy",
+    "onRegenerate",
+    "markdownTagRenderers",
+    "className",
+    "children"
+  ]);
   const [openState, setOpenState] = import_react14.default.useState(defaultOpen);
   const setOpen = (open) => {
     onSetOpen == null ? void 0 : onSetOpen(open);
     setOpenState(open);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(ChatContextProvider, { icons, labels, open: openState, setOpen, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button2, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button2, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         Window2,
         {
           clickOutsideToClose,
           shortcut,
           hitEscapeToClose,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Header2, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Header2, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
               CopilotChat,
-              {
+              __spreadProps(__spreadValues({}, props), {
                 instructions,
                 onSubmitMessage,
                 onStopGeneration,
@@ -3097,8 +3196,9 @@ var CopilotModal = ({
                 onThumbsUp,
                 onThumbsDown,
                 onCopy,
-                onRegenerate
-              }
+                onRegenerate,
+                markdownTagRenderers
+              })
             )
           ]
         }
@@ -3108,17 +3208,17 @@ var CopilotModal = ({
 };
 
 // src/components/chat/Popup.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function CopilotPopup(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup"
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CopilotModal, __spreadProps(__spreadValues({}, props), { children: props.children }));
 }
 
 // src/components/chat/Sidebar.tsx
 var import_react15 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CopilotSidebar(props) {
   props = __spreadProps(__spreadValues({}, props), {
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar"
@@ -3131,7 +3231,7 @@ function CopilotSidebar(props) {
     (_a = props.onSetOpen) == null ? void 0 : _a.call(props, open);
     setExpandedClassName(open ? "sidebarExpanded" : "");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: `copilotKitSidebarContentWrapper ${expandedClassName}`, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CopilotModal, __spreadProps(__spreadValues(__spreadValues({}, props), { onSetOpen }), { children: props.children })) });
 }
 
 // src/hooks/use-copilot-chat-suggestions.tsx
@@ -3170,6 +3270,8 @@ function useCopilotChatSuggestions({
   CopilotSidebar,
   Markdown,
   RenderImageMessage,
+  RenderSuggestion,
+  RenderSuggestionsList,
   UserMessage,
   shouldShowDevConsole,
   useChatContext,