@copilotkit/react-ui 0.15.0-alpha.1 → 0.15.0-alpha.2

package/src/components/chat/Markdown.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { FC, memo } from "react";
 import ReactMarkdown, { Options, Components } from "react-markdown";
 import { CodeBlock } from "./CodeBlock";
@@ -15,26 +14,33 @@ type MarkdownProps = {
   content: string;
 };
 
-export const Markdown: React.FC<MarkdownProps> = ({ content }) => {
+export const Markdown = ({ content }: MarkdownProps) => {
   return (
-    <MemoizedReactMarkdown
-      className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0 text-sm"
-      components={components}
-      remarkPlugins={[remarkGfm, remarkMath]}
-    >
-      {content}
-    </MemoizedReactMarkdown>
+    <div className="copilotKitMarkdown">
+      <MemoizedReactMarkdown components={components} remarkPlugins={[remarkGfm, remarkMath]}>
+        {content}
+      </MemoizedReactMarkdown>
+    </div>
   );
 };
 
 const components: Components = {
   p({ children }) {
-    return <p className="mb-2 last:mb-0">{children}</p>;
+    return <p>{children}</p>;
   },
   code({ children, className, inline, ...props }) {
     if (children.length) {
       if (children[0] == "▍") {
-        return <span className="mt-1 animate-pulse cursor-default">▍</span>;
+        return (
+          <span
+            style={{
+              animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+              marginTop: "0.25rem",
+            }}
+          >
+            ▍
+          </span>
+        );
       }
 
       children[0] = (children[0] as string).replace("`▍`", "▍");

package/src/components/chat/Messages.tsx

@@ -2,10 +2,10 @@ import React, { useEffect, useMemo } from "react";
 import { MessagesProps } from "./props";
 import { useChatContext } from "./ChatContext";
 import { nanoid } from "nanoid";
-import { Message } from "@copilotkit/react-core";
+import { Message } from "@copilotkit/shared";
 import { Markdown } from "./Markdown";
 
-export const Messages: React.FC<MessagesProps> = ({ messages, inProgress }) => {
+export const Messages = ({ messages, inProgress }: MessagesProps) => {
   const context = useChatContext();
   const initialMessages = useMemo(
     () => makeInitialMessages(context.labels.initial),

package/src/components/chat/Popup.tsx

@@ -1,10 +1,9 @@
-import React from "react";
-import { CopilotKitChat, CopilotKitChatProps } from "./Chat";
+import { CopilotChat, CopilotChatProps } from "./Chat";
 
-export const CopilotKitPopup: React.FC<CopilotKitChatProps> = (props) => {
+export const CopilotPopup = (props: CopilotChatProps) => {
   props = {
     ...props,
     className: props.className ? props.className + " copilotKitPopup" : "copilotKitPopup",
   };
-  return <CopilotKitChat {...props} />;
+  return <CopilotChat {...props} />;
 };

package/src/components/chat/Response.tsx

@@ -1,8 +1,7 @@
-import React from "react";
 import { useChatContext } from "./ChatContext";
 import { ResponseButtonProps } from "./props";
 
-export const ResponseButton: React.FC<ResponseButtonProps> = ({ onClick, inProgress }) => {
+export const ResponseButton = ({ onClick, inProgress }: ResponseButtonProps) => {
   const context = useChatContext();
   return (
     <button onClick={onClick} className="copilotKitResponseButton">

package/src/components/chat/Sidebar.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from "react";
-import { CopilotKitChat, CopilotKitChatProps } from "./Chat";
+import { CopilotChat, CopilotChatProps } from "./Chat";
 
-interface CopilotKitSidebarProps extends CopilotKitChatProps {
+interface CopilotSidebarProps extends CopilotChatProps {
   children?: React.ReactNode;
 }
 
-export const CopilotKitSidebar: React.FC<CopilotKitSidebarProps> = (props) => {
+export const CopilotSidebar = (props: CopilotSidebarProps) => {
   props = {
     ...props,
     className: props.className ? props.className + " copilotKitSidebar" : "copilotKitSidebar",
@@ -22,7 +22,7 @@ export const CopilotKitSidebar: React.FC<CopilotKitSidebarProps> = (props) => {
   return (
     <div className={`copilotKitSidebarContentWrapper ${expandedClassName}`}>
       {props.children}
-      <CopilotKitChat {...props} {...{ onSetOpen }} />
+      <CopilotChat {...props} {...{ onSetOpen }} />
     </div>
   );
 };

package/src/components/chat/index.tsx

@@ -1,3 +1,3 @@
 export * from "./props";
-export { CopilotKitPopup } from "./Popup";
-export { CopilotKitSidebar } from "./Sidebar";
+export { CopilotPopup } from "./Popup";
+export { CopilotSidebar } from "./Sidebar";

package/src/components/chat/props.ts

@@ -1,4 +1,4 @@
-import { Message } from "@copilotkit/react-core";
+import { Message } from "@copilotkit/shared";
 
 export interface ButtonProps {
   open: boolean;

package/src/components/index.ts

@@ -1,9 +1 @@
-export { CopilotChat } from "./chat-components/copilot-chat";
-export { Tooltip, TooltipProvider } from "./chat-components/ui/tooltip";
-
-export { CopilotSidebarUIProvider } from "./sidebar/copilot-sidebar-ui-provider";
-export { CopilotSidebar } from "./sidebar/copilot-sidebar";
-export { CopilotSidebarContext } from "./sidebar/sidebar-context";
-export type { CopilotSidebarContextType } from "./sidebar/sidebar-context";
-
 export * from "./chat";

package/src/css/animations.css

@@ -27,3 +27,9 @@
     transform: rotate(360deg);
   }
 }
+
+@keyframes copilotKitPulseAnimation {
+  50% {
+    opacity: 0.5;
+  }
+}

package/src/css/markdown.css

@@ -0,0 +1,123 @@
+.copilotKitMarkdown h1,
+.copilotKitMarkdown h2,
+.copilotKitMarkdown h3,
+.copilotKitMarkdown h4,
+.copilotKitMarkdown h5,
+.copilotKitMarkdown h6 {
+  font-weight: bold;
+  line-height: 1.2;
+  margin-bottom: 1rem;
+}
+
+.copilotKitMarkdown h1 {
+  font-size: 1.5em;
+}
+
+.copilotKitMarkdown h2 {
+  font-size: 1.25em;
+  font-weight: 600;
+}
+
+.copilotKitMarkdown h3 {
+  font-size: 1.1em;
+}
+
+.copilotKitMarkdown h4 {
+  font-size: 1em;
+}
+
+.copilotKitMarkdown h5 {
+  font-size: 0.9em;
+}
+
+.copilotKitMarkdown h6 {
+  font-size: 0.8em;
+}
+
+.copilotKitMarkdown p {
+  margin-bottom: 1.25em;
+}
+
+.copilotKitMarkdown pre {
+  margin-bottom: 1.25em;
+}
+
+.copilotKitMarkdown blockquote {
+  border-color: rgb(142, 142, 160);
+  border-left-width: 2px;
+  border-left-style: solid;
+  line-height: 1.2;
+  padding-left: 10px;
+}
+
+.copilotKitMarkdown blockquote p {
+  padding: 0.7em 0;
+}
+
+.copilotKitMarkdown ul {
+  list-style-type: disc;
+  padding-left: 20px;
+  overflow: visible;
+}
+
+.copilotKitMarkdown li {
+  list-style-type: inherit;
+  list-style-position: outside;
+  margin-left: 0;
+  padding-left: 0;
+  position: relative;
+  overflow: visible;
+}
+
+.copilotKitCodeBlock {
+  position: relative;
+  width: 100%;
+  background-color: rgb(9 9 11);
+  border-radius: 0.375rem;
+}
+
+.copilotKitCodeBlockToolbar {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgb(39 39 42);
+  padding-left: 1rem;
+  padding-top: 0.09rem;
+  padding-bottom: 0.09rem;
+  color: rgb(228, 228, 228);
+  border-top-left-radius: 0.375rem;
+  border-top-right-radius: 0.375rem;
+  font-family: sans-serif;
+}
+
+.copilotKitCodeBlockToolbarLanguage {
+  font-size: 0.75rem;
+  line-height: 1rem;
+  text-transform: lowercase;
+}
+
+.copilotKitCodeBlockToolbarButtons {
+  display: flex;
+  align-items: center;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+.copilotKitCodeBlockToolbarButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  height: 2.5rem;
+  width: 2.5rem;
+  padding: 3px;
+  margin: 2px;
+}
+
+.copilotKitCodeBlockToolbarButton:hover {
+  background-color: rgb(55, 55, 58);
+}

package/src/styles.css

@@ -8,6 +8,7 @@
 @import "./css/window.css";
 @import "./css/animations.css";
 @import "./css/response.css";
+@import "./css/markdown.css";
 
 @tailwind base;
 @tailwind components;

package/src/types/types.ts

@@ -1,4 +1,4 @@
-import { type Message } from "@copilotkit/react-core";
+import { type Message } from "@copilotkit/shared";
 
 export interface Chat extends Record<string, any> {
   id: string;

package/tsup.config.ts

@@ -2,10 +2,9 @@ import { defineConfig, Options } from "tsup";
 
 export default defineConfig((options: Options) => ({
   entry: ["src/**/*.{ts,tsx}"],
-  format: ["esm"],
+  format: ["esm", "cjs"],
   dts: true,
   minify: false,
-  clean: true,
   external: ["react"],
   sourcemap: true,
   exclude: [