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

package/dist/index.mjs

@@ -1,55 +1,60 @@
 "use client";
 import "./chunk-EFZPSZWO.mjs";
 import "./chunk-MMVDU6DF.mjs";
-import "./chunk-PXEVB7IK.mjs";
+import "./chunk-SC6JRFAJ.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-K7SXHJRT.mjs";
+} from "./chunk-QEZ3YYLO.mjs";
 import {
   CopilotSidebar
-} from "./chunk-MDMNZ6JL.mjs";
-import "./chunk-ZDKVXAL3.mjs";
+} from "./chunk-JU3HNL5N.mjs";
+import "./chunk-FWKHST6I.mjs";
 import "./chunk-TIDV74OE.mjs";
+import "./chunk-UH2UFL5W.mjs";
+import "./chunk-V7W6IM2V.mjs";
+import {
+  CopilotDevConsole
+} from "./chunk-VGPQYMKJ.mjs";
+import "./chunk-Q5V6S67N.mjs";
+import {
+  shouldShowDevConsole
+} from "./chunk-6TCUJ3B7.mjs";
+import "./chunk-KXE2JCUH.mjs";
+import "./chunk-NRA3CFEE.mjs";
+import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-NWE7CLTB.mjs";
-import "./chunk-DSQGQJI4.mjs";
-import "./chunk-24TDU7MY.mjs";
+} from "./chunk-IAHSHPRJ.mjs";
+import "./chunk-MPZAMNCN.mjs";
+import "./chunk-ALWZ35SI.mjs";
 import {
   RenderImageMessage
-} from "./chunk-LUPGADWY.mjs";
-import "./chunk-XFCMZH2H.mjs";
-import "./chunk-RVLCPPEL.mjs";
+} from "./chunk-UKWBNVMQ.mjs";
+import "./chunk-6VUDBDUN.mjs";
+import "./chunk-5INP2EWU.mjs";
 import {
   AssistantMessage
-} from "./chunk-OZXUB3V7.mjs";
+} from "./chunk-XMNTLIK5.mjs";
 import {
   UserMessage
 } from "./chunk-HWMFMBJC.mjs";
-import "./chunk-XZNY26GH.mjs";
+import {
+  Suggestions
+} from "./chunk-QGSPTXOV.mjs";
+import {
+  Suggestion
+} from "./chunk-IMBPSLL4.mjs";
 import "./chunk-PLHTVHUW.mjs";
-import "./chunk-KQ44Z255.mjs";
+import "./chunk-EMIYIMQ6.mjs";
+import "./chunk-CGEAG65D.mjs";
 import "./chunk-YQFVRDNC.mjs";
 import {
   Markdown
-} from "./chunk-ABHUX6T6.mjs";
-import "./chunk-IIRQWGWV.mjs";
-import "./chunk-CGEAG65D.mjs";
+} from "./chunk-YTXEWDNC.mjs";
 import "./chunk-KENCH7RN.mjs";
-import "./chunk-UH2UFL5W.mjs";
-import "./chunk-V7W6IM2V.mjs";
-import {
-  CopilotDevConsole
-} from "./chunk-VGPQYMKJ.mjs";
-import "./chunk-Q5V6S67N.mjs";
-import {
-  shouldShowDevConsole
-} from "./chunk-6TCUJ3B7.mjs";
-import "./chunk-KXE2JCUH.mjs";
-import "./chunk-NRA3CFEE.mjs";
-import "./chunk-BH6PCAAL.mjs";
+import "./chunk-B3D7U7TJ.mjs";
 import {
   useChatContext
 } from "./chunk-IEMQ2SQW.mjs";
@@ -71,6 +76,8 @@ export {
   CopilotSidebar,
   Markdown,
   RenderImageMessage,
+  Suggestion as RenderSuggestion,
+  Suggestions as RenderSuggestionsList,
   UserMessage,
   shouldShowDevConsole,
   useChatContext,

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { CopilotKitCSSProperties } from './css.js';
+export { CopilotChatSuggestion } from './suggestions.js';
 import 'react';

package/dist/types/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export type { CopilotKitCSSProperties } from \"./css\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}
+{"version":3,"sources":["../../src/types/index.ts"],"sourcesContent":["export type { CopilotKitCSSProperties } from \"./css\";\nexport type { CopilotChatSuggestion } from \"./suggestions\";\n"],"mappings":";;;;;;;;;;;;;;;;AAAA;AAAA;","names":[]}

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.8.13-next.1",
+  "version": "1.8.13-next.3",
   "sideEffects": [
     "**/*.css"
   ],
@@ -40,19 +40,20 @@
     "ts-jest": "^29.1.1",
     "tsup": "^6.7.0",
     "typescript": "^5.2.3",
-    "eslint-config-custom": "1.4.6",
     "tailwind-config": "1.4.6",
-    "tsconfig": "1.4.6"
+    "tsconfig": "1.4.6",
+    "eslint-config-custom": "1.4.6"
   },
   "dependencies": {
     "@headlessui/react": "^2.1.3",
-    "react-markdown": "^8.0.7",
-    "react-syntax-highlighter": "^15.5.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
-    "@copilotkit/react-core": "1.8.13-next.1",
-    "@copilotkit/runtime-client-gql": "1.8.13-next.1",
-    "@copilotkit/shared": "1.8.13-next.1"
+    "react-markdown": "^10.1.0",
+    "react-syntax-highlighter": "^15.6.1",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "@copilotkit/react-core": "1.8.13-next.3",
+    "@copilotkit/runtime-client-gql": "1.8.13-next.3",
+    "@copilotkit/shared": "1.8.13-next.3"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Chat.tsx

@@ -60,7 +60,6 @@ import { RenderAgentStateMessage as DefaultRenderAgentStateMessage } from "./mes
 import { RenderImageMessage as DefaultRenderImageMessage } from "./messages/RenderImageMessage";
 import { AssistantMessage as DefaultAssistantMessage } from "./messages/AssistantMessage";
 import { UserMessage as DefaultUserMessage } from "./messages/UserMessage";
-import { Suggestion } from "./Suggestion";
 import React, { useEffect, useRef, useState } from "react";
 import {
   SystemMessageFunction,
@@ -74,14 +73,17 @@ import { Message, Role, TextMessage, ImageMessage } from "@copilotkit/runtime-cl
 import { randomId } from "@copilotkit/shared";
 import {
   AssistantMessageProps,
+  ComponentsMap,
   InputProps,
   MessagesProps,
   RenderMessageProps,
+  RenderSuggestionsListProps,
   UserMessageProps,
 } from "./props";
 
 import { HintFunction, runAgent, stopAgent } from "@copilotkit/react-core";
 import { ImageUploadQueue } from "./ImageUploadQueue";
+import { Suggestions as DefaultRenderSuggestionsList } from "./Suggestions";
 
 /**
  * Props for CopilotChat component.
@@ -137,6 +139,12 @@ export interface CopilotChatProps {
    */
   onThumbsDown?: (message: string) => void;
 
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
+
   /**
    * Icons can be used to set custom icons for the chat window.
    */
@@ -206,6 +214,11 @@ export interface CopilotChatProps {
    */
   RenderImageMessage?: React.ComponentType<RenderMessageProps>;
 
+  /**
+   * A custom suggestions list component to use instead of the default.
+   */
+  RenderSuggestionsList?: React.ComponentType<RenderSuggestionsListProps>;
+
   /**
    * A custom Input component to use instead of the default.
    */
@@ -291,12 +304,14 @@ export function CopilotChat({
   onCopy,
   onThumbsUp,
   onThumbsDown,
+  markdownTagRenderers,
   Messages = DefaultMessages,
   RenderTextMessage = DefaultRenderTextMessage,
   RenderActionExecutionMessage = DefaultRenderActionExecutionMessage,
   RenderAgentStateMessage = DefaultRenderAgentStateMessage,
   RenderResultMessage = DefaultRenderResultMessage,
   RenderImageMessage = DefaultRenderImageMessage,
+  RenderSuggestionsList = DefaultRenderSuggestionsList,
   Input = DefaultInput,
   className,
   icons,
@@ -482,20 +497,13 @@ export function CopilotChat({
         onCopy={handleCopy}
         onThumbsUp={onThumbsUp}
         onThumbsDown={onThumbsDown}
+        markdownTagRenderers={markdownTagRenderers}
       >
         {currentSuggestions.length > 0 && (
-          <div className="suggestions">
-            {currentSuggestions.map((suggestion, index) => (
-              <Suggestion
-                key={index}
-                title={suggestion.title}
-                message={suggestion.message}
-                partial={suggestion.partial}
-                className={suggestion.className}
-                onClick={(message) => handleSendMessage(message)}
-              />
-            ))}
-          </div>
+          <RenderSuggestionsList
+            onSuggestionClick={handleSendMessage}
+            suggestions={currentSuggestions}
+          />
         )}
       </Messages>
 

package/src/components/chat/Markdown.tsx

@@ -3,42 +3,19 @@ import ReactMarkdown, { Options, Components } from "react-markdown";
 import { CodeBlock } from "./CodeBlock";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
+import rehypeRaw from "rehype-raw";
 
-const MemoizedReactMarkdown: FC<Options> = memo(
-  ReactMarkdown,
-  (prevProps, nextProps) =>
-    prevProps.children === nextProps.children && prevProps.className === nextProps.className,
-);
-
-type MarkdownProps = {
-  content: string;
-};
-
-export const Markdown = ({ content }: MarkdownProps) => {
-  return (
-    <div className="copilotKitMarkdown">
-      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>
-        {content}
-      </MemoizedReactMarkdown>
-    </div>
-  );
-};
-
-const components: Components = {
+const defaultComponents: Components = {
   a({ children, ...props }) {
     return (
-      <a
-        style={{ color: "blue", textDecoration: "underline" }}
-        {...props}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a className="copilotKitMarkdownElement" {...props} target="_blank" rel="noopener noreferrer">
         {children}
       </a>
     );
   },
+  // @ts-expect-error -- inline
   code({ children, className, inline, ...props }) {
-    if (children.length) {
+    if (Array.isArray(children) && children.length) {
       if (children[0] == "▍") {
         return (
           <span
@@ -52,7 +29,7 @@ const components: Components = {
         );
       }
 
-      children[0] = (children[0] as string).replace("`▍`", "▍");
+      children[0] = (children?.[0] as string).replace("`▍`", "▍");
     }
 
     const match = /language-(\w+)/.exec(className || "");
@@ -74,4 +51,84 @@ const components: Components = {
       />
     );
   },
+  h1: ({ children, ...props }) => (
+    <h1 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h1>
+  ),
+  h2: ({ children, ...props }) => (
+    <h2 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h2>
+  ),
+  h3: ({ children, ...props }) => (
+    <h3 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h3>
+  ),
+  h4: ({ children, ...props }) => (
+    <h4 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h4>
+  ),
+  h5: ({ children, ...props }) => (
+    <h5 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h5>
+  ),
+  h6: ({ children, ...props }) => (
+    <h6 className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </h6>
+  ),
+  p: ({ children, ...props }) => (
+    <p className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </p>
+  ),
+  pre: ({ children, ...props }) => (
+    <pre className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </pre>
+  ),
+  blockquote: ({ children, ...props }) => (
+    <blockquote className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </blockquote>
+  ),
+  ul: ({ children, ...props }) => (
+    <ul className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </ul>
+  ),
+  li: ({ children, ...props }) => (
+    <li className="copilotKitMarkdownElement" {...props}>
+      {children}
+    </li>
+  ),
+};
+
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.components === nextProps.components,
+);
+
+type MarkdownProps = {
+  content: string;
+  components?: Components;
+};
+
+export const Markdown = ({ content, components }: MarkdownProps) => {
+  return (
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown
+        components={{ ...defaultComponents, ...components }}
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeRaw]}
+      >
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
+  );
 };

package/src/components/chat/Messages.tsx

@@ -19,6 +19,7 @@ export const Messages = ({
   onCopy,
   onThumbsUp,
   onThumbsDown,
+  markdownTagRenderers,
 }: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
@@ -67,6 +68,7 @@ export const Messages = ({
                 onCopy={onCopy}
                 onThumbsUp={onThumbsUp}
                 onThumbsDown={onThumbsDown}
+                markdownTagRenderers={markdownTagRenderers}
               />
             );
           } else if (message.isActionExecutionMessage()) {

package/src/components/chat/Modal.tsx

@@ -82,8 +82,10 @@ export const CopilotModal = ({
   onThumbsDown,
   onCopy,
   onRegenerate,
+  markdownTagRenderers,
   className,
   children,
+  ...props
 }: CopilotModalProps) => {
   const [openState, setOpenState] = React.useState(defaultOpen);
 
@@ -104,6 +106,7 @@ export const CopilotModal = ({
         >
           <Header />
           <CopilotChat
+            {...props}
             instructions={instructions}
             onSubmitMessage={onSubmitMessage}
             onStopGeneration={onStopGeneration}
@@ -118,6 +121,7 @@ export const CopilotModal = ({
             onThumbsDown={onThumbsDown}
             onCopy={onCopy}
             onRegenerate={onRegenerate}
+            markdownTagRenderers={markdownTagRenderers}
           />
         </Window>
       </div>

package/src/components/chat/Suggestion.tsx

@@ -4,19 +4,26 @@ import {
   CopilotChatSuggestionConfiguration,
   CopilotMessagesContextParams,
 } from "@copilotkit/react-core";
-import { SuggestionsProps } from "./props";
 import { SmallSpinnerIcon } from "./Icons";
 import { CopilotChatSuggestion } from "../../types/suggestions";
 import { actionParametersToJsonSchema } from "@copilotkit/shared";
 import { CopilotRequestType } from "@copilotkit/runtime-client-gql";
 
-export function Suggestion({ title, message, onClick, partial, className }: SuggestionsProps) {
+interface SuggestionsProps {
+  title: string;
+  message: string;
+  partial?: boolean;
+  className?: string;
+  onClick: () => void;
+}
+
+export function Suggestion({ title, onClick, partial, className }: SuggestionsProps) {
   return (
     <button
       disabled={partial}
       onClick={(e) => {
         e.preventDefault();
-        onClick(message);
+        onClick();
       }}
       className={className || (partial ? "suggestion loading" : "suggestion")}
       data-test-id="suggestion"

package/src/components/chat/Suggestions.tsx

@@ -0,0 +1,20 @@
+import { Suggestion } from "./Suggestion";
+import React from "react";
+import { RenderSuggestionsListProps } from "./props";
+
+export function Suggestions({ suggestions, onSuggestionClick }: RenderSuggestionsListProps) {
+  return (
+    <div className="suggestions">
+      {suggestions.map((suggestion, index) => (
+        <Suggestion
+          key={index}
+          title={suggestion.title}
+          message={suggestion.message}
+          partial={suggestion.partial}
+          className={suggestion.className}
+          onClick={() => onSuggestionClick(suggestion.message)}
+        />
+      ))}
+    </div>
+  );
+}

package/src/components/chat/index.tsx

@@ -7,3 +7,5 @@ export { AssistantMessage } from "./messages/AssistantMessage";
 export { UserMessage } from "./messages/UserMessage";
 export { useChatContext } from "./ChatContext";
 export { RenderImageMessage } from "./messages/RenderImageMessage";
+export { Suggestions as RenderSuggestionsList } from "./Suggestions";
+export { Suggestion as RenderSuggestion } from "./Suggestion";

package/src/components/chat/messages/AssistantMessage.tsx

@@ -14,6 +14,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     onThumbsUp,
     onThumbsDown,
     isCurrentMessage,
+    markdownTagRenderers,
   } = props;
   const [copied, setCopied] = useState(false);
 
@@ -54,7 +55,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
     <>
       {(message || isLoading) && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
-          {message && <Markdown content={message || ""} />}
+          {message && <Markdown content={message || ""} components={markdownTagRenderers} />}
           {isLoading && <LoadingIcon />}
 
           {message && !isLoading && (

package/src/components/chat/messages/RenderTextMessage.tsx

@@ -16,6 +16,7 @@ export function RenderTextMessage({
     onCopy,
     onThumbsUp,
     onThumbsDown,
+    markdownTagRenderers,
   } = props;
 
   if (message.isTextMessage()) {
@@ -42,6 +43,7 @@ export function RenderTextMessage({
           onCopy={onCopy}
           onThumbsUp={onThumbsUp}
           onThumbsDown={onThumbsDown}
+          markdownTagRenderers={markdownTagRenderers}
         />
       );
     }

package/src/components/chat/props.ts

@@ -1,4 +1,6 @@
 import { Message } from "@copilotkit/runtime-client-gql";
+import { CopilotChatSuggestion } from "../../types/suggestions";
+import { ReactNode } from "react";
 
 export interface ButtonProps {}
 
@@ -19,6 +21,10 @@ export interface SuggestionsProps {
   onClick: (message: string) => void;
 }
 
+export type ComponentsMap<T extends Record<string, object> = Record<string, object>> = {
+  [K in keyof T]: React.FC<{ children?: ReactNode } & T[K]>;
+};
+
 export interface MessagesProps {
   messages: Message[];
   inProgress: boolean;
@@ -50,6 +56,12 @@ export interface MessagesProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface Renderer {
@@ -115,6 +127,12 @@ export interface AssistantMessageProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface RenderMessageProps {
@@ -145,6 +163,12 @@ export interface RenderMessageProps {
    * Callback function for thumbs down feedback
    */
   onThumbsDown?: (message: string) => void;
+
+  /**
+   * A list of markdown components to render in assistant message.
+   * Useful when you want to render custom elements in the message (e.g a reference tag element)
+   */
+  markdownTagRenderers?: ComponentsMap;
 }
 
 export interface InputProps {
@@ -154,3 +178,8 @@ export interface InputProps {
   onStop?: () => void;
   onUpload?: () => void;
 }
+
+export interface RenderSuggestionsListProps {
+  suggestions: CopilotChatSuggestion[];
+  onSuggestionClick: (message: string) => void;
+}