@copilotkit/react-ui 1.51.3-next.6 → 1.51.3-next.8

package/package.json

@@ -9,7 +9,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.51.3-next.6",
+  "version": "1.51.3-next.8",
   "sideEffects": [
     "**/*.css"
   ],
@@ -24,6 +24,8 @@
     "./styles.css": "./dist/index.css",
     "./v2/styles.css": "./dist/v2/index.css"
   },
+  "unpkg": "./dist/index.umd.js",
+  "jsdelivr": "./dist/index.umd.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
   "peerDependencies": {
@@ -52,9 +54,9 @@
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
-    "@copilotkit/react-core": "1.51.3-next.6",
-    "@copilotkit/runtime-client-gql": "1.51.3-next.6",
-    "@copilotkit/shared": "1.51.3-next.6"
+    "@copilotkit/react-core": "1.51.3-next.8",
+    "@copilotkit/runtime-client-gql": "1.51.3-next.8",
+    "@copilotkit/shared": "1.51.3-next.8"
   },
   "keywords": [
     "copilotkit",
@@ -69,7 +71,7 @@
     "textarea"
   ],
   "scripts": {
-    "build": "tsup --clean",
+    "build": "tsup --clean && rollup -c rollup.config.mjs",
     "dev": "tsup --watch --no-splitting",
     "test": "jest",
     "check-types": "tsc --noEmit",

package/rollup.config.mjs

@@ -0,0 +1,64 @@
+import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+import json from '@rollup/plugin-json';
+import postcss from 'rollup-plugin-postcss';
+
+function onwarn(warning, warn) {
+  // Ignore circular dependency warnings from node_modules
+  if (warning.code === 'CIRCULAR_DEPENDENCY' && warning.ids?.some(id => id.includes('node_modules'))) return;
+  // Ignore "this" rewritten to "undefined" warnings from node_modules
+  if (warning.code === 'THIS_IS_UNDEFINED' && warning.id?.includes('node_modules')) return;
+  // Ignore TypeScript plugin warnings (module mismatch, tslib, type errors during UMD build)
+  if (warning.code === 'PLUGIN_WARNING' && warning.plugin === 'typescript') return;
+  // Ignore "use client" directive warnings (expected for React Server Components)
+  if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message?.includes('"use client"')) return;
+  warn(warning);
+}
+
+export default {
+  input: 'src/index.tsx',
+  output: {
+    file: 'dist/index.umd.js',
+    format: 'umd',
+    name: 'CopilotKitReactUI',
+    sourcemap: true,
+    inlineDynamicImports: true,
+    globals: {
+      'react': 'React',
+      'react-dom': 'ReactDOM',
+      '@copilotkit/react-core': 'CopilotKitReactCore',
+      '@copilotkit/shared': 'CopilotKitShared',
+      '@copilotkit/runtime-client-gql': 'CopilotKitRuntimeClientGQL',
+    },
+  },
+  external: [
+    'react',
+    'react-dom',
+    '@copilotkit/react-core',
+    '@copilotkit/shared',
+    '@copilotkit/runtime-client-gql',
+  ],
+  onwarn,
+  plugins: [
+    postcss({ inject: true, minimize: true }),
+    resolve({ browser: true }),
+    commonjs(),
+    json(),
+    typescript({
+      tsconfig: './tsconfig.json',
+      declaration: false,
+      declarationMap: false,
+      declarationDir: undefined,
+      compilerOptions: {
+        declaration: false,
+        declarationMap: false,
+        declarationDir: undefined,
+        target: 'ES2017',
+        module: 'ESNext',
+      },
+    }),
+    terser(),
+  ],
+};

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-IHFR6PYG.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"]}