@copilotkit/react-ui 1.51.3-next.5 → 1.51.3-next.7

package/dist/index.mjs

@@ -5,11 +5,11 @@ import "./chunk-SC6JRFAJ.mjs";
 import "./chunk-WB3YULQ4.mjs";
 import {
   CopilotPopup
-} from "./chunk-O4PPO3K3.mjs";
+} from "./chunk-7CMZ7YPQ.mjs";
 import {
   CopilotSidebar
-} from "./chunk-4S4ZEKE6.mjs";
-import "./chunk-HKZL4P3F.mjs";
+} from "./chunk-RKQM2AE5.mjs";
+import "./chunk-OHGUQZJT.mjs";
 import "./chunk-C3GSYRC3.mjs";
 import "./chunk-GDSZGYCE.mjs";
 import "./chunk-V7W6IM2V.mjs";
@@ -26,7 +26,7 @@ import "./chunk-BH6PCAAL.mjs";
 import "./chunk-UFN2VWSR.mjs";
 import {
   CopilotChat
-} from "./chunk-YQOESY4Y.mjs";
+} from "./chunk-PD36EMOZ.mjs";
 import {
   Suggestions
 } from "./chunk-VHKHX7GV.mjs";
@@ -37,12 +37,12 @@ import "./chunk-PLHTVHUW.mjs";
 import "./chunk-3W6J75HS.mjs";
 import "./chunk-ELGRNEAO.mjs";
 import "./chunk-QIOJXTIQ.mjs";
-import "./chunk-UH5GQ7QF.mjs";
-import "./chunk-PKSW6ZMQ.mjs";
-import "./chunk-XEZ5ODJS.mjs";
+import "./chunk-WNX755OE.mjs";
+import "./chunk-F2CDEOFX.mjs";
+import "./chunk-LBR23XXF.mjs";
 import {
   AssistantMessage
-} from "./chunk-SLM2AOHF.mjs";
+} from "./chunk-LYYDXL2G.mjs";
 import {
   ImageRenderer
 } from "./chunk-DBKRAOH7.mjs";
@@ -51,7 +51,7 @@ import {
 } from "./chunk-RYUCX3ZK.mjs";
 import {
   Markdown
-} from "./chunk-XOBQLKUU.mjs";
+} from "./chunk-JZ3RFQQ6.mjs";
 import "./chunk-IK2BPURM.mjs";
 import {
   useChatContext

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.51.3-next.5",
+  "version": "1.51.3-next.7",
   "sideEffects": [
     "**/*.css"
   ],
@@ -47,11 +47,14 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.2.9",
+    "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
-    "streamdown": "^1.6.10",
-    "@copilotkit/react-core": "1.51.3-next.5",
-    "@copilotkit/runtime-client-gql": "1.51.3-next.5",
-    "@copilotkit/shared": "1.51.3-next.5"
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0",
+    "@copilotkit/react-core": "1.51.3-next.7",
+    "@copilotkit/runtime-client-gql": "1.51.3-next.7",
+    "@copilotkit/shared": "1.51.3-next.7"
   },
   "keywords": [
     "copilotkit",

package/src/components/chat/Markdown.tsx

@@ -1,10 +1,11 @@
-import { ComponentProps, FC, memo } from "react";
-import { Streamdown } from "streamdown";
+import { FC, memo } from "react";
+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";
 
-type Options = ComponentProps<typeof Streamdown>;
-
-const defaultComponents: Options["components"] = {
+const defaultComponents: Components = {
   a({ children, ...props }) {
     return (
       <a className="copilotKitMarkdownElement" {...props} target="_blank" rel="noopener noreferrer">
@@ -117,19 +118,27 @@ const defaultComponents: Options["components"] = {
   ),
 };
 
+const MemoizedReactMarkdown: FC<Options> = memo(
+  ReactMarkdown,
+  (prevProps, nextProps) =>
+    prevProps.children === nextProps.children && prevProps.components === nextProps.components,
+);
+
 type MarkdownProps = {
   content: string;
-  components?: Options["components"];
+  components?: Components;
 };
 
 export const Markdown = ({ content, components }: MarkdownProps) => {
   return (
     <div className="copilotKitMarkdown">
-      <Streamdown
+      <MemoizedReactMarkdown
         components={{ ...defaultComponents, ...components }}
+        remarkPlugins={[remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
+        rehypePlugins={[rehypeRaw]}
       >
         {content}
-      </Streamdown>
+      </MemoizedReactMarkdown>
     </div>
   );
 };

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

@@ -51,10 +51,14 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
 
   const LoadingIcon = () => <span>{icons.activityIcon}</span>;
   const content = message?.content || "";
-  const subComponent = message?.generativeUI?.();
+  const subComponent = message?.generativeUI?.() ?? props.subComponent;
+  const subComponentPosition = message?.generativeUIPosition ?? "after";
+  const renderBefore = subComponent && subComponentPosition === "before";
+  const renderAfter = subComponent && subComponentPosition !== "before";
 
   return (
     <>
+      {renderBefore ? <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div> : null}
       {content && (
         <div className="copilotKitMessage copilotKitAssistantMessage">
           {content && <Markdown content={content} components={markdownTagRenderers} />}
@@ -111,7 +115,7 @@ export const AssistantMessage = (props: AssistantMessageProps) => {
           )}
         </div>
       )}
-      <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div>
+      {renderAfter ? <div style={{ marginBottom: "0.5rem" }}>{subComponent}</div> : null}
       {isLoading && <LoadingIcon />}
     </>
   );

package/dist/chunk-SLM2AOHF.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/messages/AssistantMessage.tsx"],"sourcesContent":["import { AssistantMessageProps } from \"../props\";\nimport { useChatContext } from \"../ChatContext\";\nimport { Markdown } from \"../Markdown\";\nimport { useState } from \"react\";\nimport React from \"react\";\n\nexport const AssistantMessage = (props: AssistantMessageProps) => {\n  const { icons, labels } = useChatContext();\n  const {\n    message,\n    isLoading,\n    onRegenerate,\n    onCopy,\n    onThumbsUp,\n    onThumbsDown,\n    isCurrentMessage,\n    feedback,\n    markdownTagRenderers,\n  } = props;\n  const [copied, setCopied] = useState(false);\n\n  const handleCopy = () => {\n    const content = message?.content || \"\";\n    if (content && onCopy) {\n      navigator.clipboard.writeText(content);\n      setCopied(true);\n      onCopy(content);\n      setTimeout(() => setCopied(false), 2000);\n    } else if (content) {\n      navigator.clipboard.writeText(content);\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    }\n  };\n\n  const handleRegenerate = () => {\n    if (onRegenerate) onRegenerate();\n  };\n\n  const handleThumbsUp = () => {\n    if (onThumbsUp && message) {\n      onThumbsUp(message);\n    }\n  };\n\n  const handleThumbsDown = () => {\n    if (onThumbsDown && message) {\n      onThumbsDown(message);\n    }\n  };\n\n  const LoadingIcon = () => <span>{icons.activityIcon}</span>;\n  const content = message?.content || \"\";\n  const subComponent = message?.generativeUI?.();\n\n  return (\n    <>\n      {content && (\n        <div className=\"copilotKitMessage copilotKitAssistantMessage\">\n          {content && <Markdown content={content} components={markdownTagRenderers} />}\n\n          {content && !isLoading && (\n            <div\n              className={`copilotKitMessageControls ${isCurrentMessage ? \"currentMessage\" : \"\"}`}\n            >\n              <button\n                className=\"copilotKitMessageControlButton\"\n                onClick={handleRegenerate}\n                aria-label={labels.regenerateResponse}\n                title={labels.regenerateResponse}\n              >\n                {icons.regenerateIcon}\n              </button>\n              <button\n                className=\"copilotKitMessageControlButton\"\n                onClick={handleCopy}\n                aria-label={labels.copyToClipboard}\n                title={labels.copyToClipboard}\n              >\n                {copied ? (\n                  <span style={{ fontSize: \"10px\", fontWeight: \"bold\" }}>✓</span>\n                ) : (\n                  icons.copyIcon\n                )}\n              </button>\n              {onThumbsUp && (\n                <button\n                  className={`copilotKitMessageControlButton ${\n                    feedback === \"thumbsUp\" ? \"active\" : \"\"\n                  }`}\n                  onClick={handleThumbsUp}\n                  aria-label={labels.thumbsUp}\n                  title={labels.thumbsUp}\n                >\n                  {icons.thumbsUpIcon}\n                </button>\n              )}\n              {onThumbsDown && (\n                <button\n                  className={`copilotKitMessageControlButton ${\n                    feedback === \"thumbsDown\" ? \"active\" : \"\"\n                  }`}\n                  onClick={handleThumbsDown}\n                  aria-label={labels.thumbsDown}\n                  title={labels.thumbsDown}\n                >\n                  {icons.thumbsDownIcon}\n                </button>\n              )}\n            </div>\n          )}\n        </div>\n      )}\n      <div style={{ marginBottom: \"0.5rem\" }}>{subComponent}</div>\n      {isLoading && <LoadingIcon />}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;AAGA,SAAS,gBAAgB;AAgDG,SAKxB,UALwB,KAWhB,YAXgB;AA7CrB,IAAM,mBAAmB,CAAC,UAAiC;AANlE;AAOE,QAAM,EAAE,OAAO,OAAO,IAAI,eAAe;AACzC,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,QAAM,aAAa,MAAM;AACvB,UAAMA,YAAU,mCAAS,YAAW;AACpC,QAAIA,YAAW,QAAQ;AACrB,gBAAU,UAAU,UAAUA,QAAO;AACrC,gBAAU,IAAI;AACd,aAAOA,QAAO;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC,WAAWA,UAAS;AAClB,gBAAU,UAAU,UAAUA,QAAO;AACrC,gBAAU,IAAI;AACd,iBAAW,MAAM,UAAU,KAAK,GAAG,GAAI;AAAA,IACzC;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI;AAAc,mBAAa;AAAA,EACjC;AAEA,QAAM,iBAAiB,MAAM;AAC3B,QAAI,cAAc,SAAS;AACzB,iBAAW,OAAO;AAAA,IACpB;AAAA,EACF;AAEA,QAAM,mBAAmB,MAAM;AAC7B,QAAI,gBAAgB,SAAS;AAC3B,mBAAa,OAAO;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,cAAc,MAAM,oBAAC,UAAM,gBAAM,cAAa;AACpD,QAAM,WAAU,mCAAS,YAAW;AACpC,QAAM,gBAAe,wCAAS,iBAAT;AAErB,SACE,iCACG;AAAA,eACC,qBAAC,SAAI,WAAU,gDACZ;AAAA,iBAAW,oBAAC,YAAS,SAAkB,YAAY,sBAAsB;AAAA,MAEzE,WAAW,CAAC,aACX;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,6BAA6B,mBAAmB,mBAAmB;AAAA,UAE9E;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb,gBAAM;AAAA;AAAA,YACT;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,WAAU;AAAA,gBACV,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb,mBACC,oBAAC,UAAK,OAAO,EAAE,UAAU,QAAQ,YAAY,OAAO,GAAG,oBAAC,IAExD,MAAM;AAAA;AAAA,YAEV;AAAA,YACC,cACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,kCACT,aAAa,aAAa,WAAW;AAAA,gBAEvC,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb,gBAAM;AAAA;AAAA,YACT;AAAA,YAED,gBACC;AAAA,cAAC;AAAA;AAAA,gBACC,WAAW,kCACT,aAAa,eAAe,WAAW;AAAA,gBAEzC,SAAS;AAAA,gBACT,cAAY,OAAO;AAAA,gBACnB,OAAO,OAAO;AAAA,gBAEb,gBAAM;AAAA;AAAA,YACT;AAAA;AAAA;AAAA,MAEJ;AAAA,OAEJ;AAAA,IAEF,oBAAC,SAAI,OAAO,EAAE,cAAc,SAAS,GAAI,wBAAa;AAAA,IACrD,aAAa,oBAAC,eAAY;AAAA,KAC7B;AAEJ;","names":["content"]}

package/dist/chunk-XOBQLKUU.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/chat/Markdown.tsx"],"sourcesContent":["import { ComponentProps, FC, memo } from \"react\";\nimport { Streamdown } from \"streamdown\";\nimport { CodeBlock } from \"./CodeBlock\";\n\ntype Options = ComponentProps<typeof Streamdown>;\n\nconst defaultComponents: Options[\"components\"] = {\n  a({ children, ...props }) {\n    return (\n      <a className=\"copilotKitMarkdownElement\" {...props} target=\"_blank\" rel=\"noopener noreferrer\">\n        {children}\n      </a>\n    );\n  },\n  // @ts-expect-error -- inline\n  code({ children, className, inline, ...props }) {\n    if (Array.isArray(children) && children.length) {\n      if (children[0] == \"▍\") {\n        return (\n          <span\n            style={{\n              animation: \"pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite\",\n              marginTop: \"0.25rem\",\n            }}\n          >\n            ▍\n          </span>\n        );\n      }\n\n      children[0] = (children?.[0] as string).replace(\"`▍`\", \"▍\");\n    }\n\n    const match = /language-(\\w+)/.exec(className || \"\");\n\n    // Detect inline code: if it has a language class or contains newlines, it's likely a code block\n    // Otherwise, treat it as inline code\n    const hasLanguage = match && match[1];\n    const content = String(children);\n    const hasNewlines = content.includes(\"\\n\");\n    const isInline = !hasLanguage && !hasNewlines;\n\n    if (isInline) {\n      return (\n        <code\n          className={`copilotKitMarkdownElement copilotKitInlineCode ${className || \"\"}`}\n          {...props}\n        >\n          {children}\n        </code>\n      );\n    }\n\n    return (\n      <CodeBlock\n        key={Math.random()}\n        language={(match && match[1]) || \"\"}\n        value={String(children).replace(/\\n$/, \"\")}\n        {...props}\n      />\n    );\n  },\n  h1: ({ children, ...props }) => (\n    <h1 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h1>\n  ),\n  h2: ({ children, ...props }) => (\n    <h2 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h2>\n  ),\n  h3: ({ children, ...props }) => (\n    <h3 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h3>\n  ),\n  h4: ({ children, ...props }) => (\n    <h4 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h4>\n  ),\n  h5: ({ children, ...props }) => (\n    <h5 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h5>\n  ),\n  h6: ({ children, ...props }) => (\n    <h6 className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </h6>\n  ),\n  p: ({ children, ...props }) => (\n    <p className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </p>\n  ),\n  pre: ({ children, ...props }) => (\n    <pre className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </pre>\n  ),\n  blockquote: ({ children, ...props }) => (\n    <blockquote className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </blockquote>\n  ),\n  ul: ({ children, ...props }) => (\n    <ul className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </ul>\n  ),\n  li: ({ children, ...props }) => (\n    <li className=\"copilotKitMarkdownElement\" {...props}>\n      {children}\n    </li>\n  ),\n};\n\ntype MarkdownProps = {\n  content: string;\n  components?: Options[\"components\"];\n};\n\nexport const Markdown = ({ content, components }: MarkdownProps) => {\n  return (\n    <div className=\"copilotKitMarkdown\">\n      <Streamdown\n        components={{ ...defaultComponents, ...components }}\n      >\n        {content}\n      </Streamdown>\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}