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

package/src/css/messages.css

@@ -0,0 +1,57 @@
+.copilotKitMessages {
+  overflow-y: scroll;
+  flex: 1;
+  padding: 1rem 2rem;
+  padding-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--copilot-kit-messages-background-color);
+}
+
+.copilotKitMessages::-webkit-scrollbar {
+  width: 9px;
+}
+
+.copilotKitMessages::-webkit-scrollbar-thumb {
+  background-color: var(--copilot-kit-scrollbar-color);
+  border-radius: 10rem;
+  border: 2px solid var(--copilot-kit-messages-background-color);
+}
+
+.copilotKitMessages::-webkit-scrollbar-track-piece:start {
+  background: transparent;
+}
+
+.copilotKitMessages::-webkit-scrollbar-track-piece:end {
+  background: transparent;
+}
+
+.copilotKitMessage {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  overflow-wrap: break-word;
+  max-width: 80%;
+  margin-bottom: 0.5rem;
+}
+
+.copilotKitMessage.copilotKitUserMessage {
+  background: var(--copilot-kit-message-user-background-color);
+  color: var(--copilot-kit-message-user-color);
+  margin-left: auto;
+}
+
+.copilotKitMessage.copilotKitAssistantMessage {
+  background: var(--copilot-kit-message-assistant-background-color);
+  color: var(--copilot-kit-message-assistant-color);
+  margin-right: auto;
+}
+
+.copilotKitMessage.copilotKitUserMessage + .copilotKitMessage.copilotKitAssistantMessage {
+  margin-top: 1.5rem;
+}
+
+.copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
+  margin-top: 1.5rem;
+}

package/src/css/popup.css

@@ -0,0 +1,22 @@
+.copilotKitPopup {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+}
+
+.copilotKitPopup svg {
+  display: inline-block;
+  vertical-align: middle;
+}

package/src/css/response.css

@@ -0,0 +1,29 @@
+.copilotKitResponseButton {
+  background-color: var(--copilot-kit-response-button-background-color);
+  border: 1px solid var(--copilot-kit-response-button-border-color);
+  border-radius: 4px;
+  color: var(--copilot-kit-response-button-color);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  height: 32px;
+  line-height: 30px;
+  margin: 0;
+  padding: 0 16px;
+  text-align: center;
+  text-decoration: none;
+  text-transform: none;
+  white-space: nowrap;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -44px;
+}
+
+.copilotKitResponseButton:hover {
+  filter: brightness(95%);
+}
+
+.copilotKitResponseButton > span {
+  margin-right: 0.5rem;
+}

package/src/css/sidebar.css

@@ -0,0 +1,34 @@
+.copilotKitSidebar {
+  position: fixed;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 30;
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+  touch-action: manipulation;
+}
+
+.copilotKitSidebar svg {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.copilotKitSidebarContentWrapper {
+  overflow: visible;
+  margin-right: 0px;
+  transition: margin-right 0.3s ease;
+}
+
+@media (min-width: 640px) {
+  .copilotKitSidebarContentWrapper.sidebarExpanded {
+    margin-right: 24rem;
+  }
+}

package/src/css/window.css

@@ -0,0 +1,58 @@
+.copilotKitWindow {
+  position: fixed;
+  inset: 0px;
+  transform-origin: bottom;
+  border-color: rgb(229 231 235);
+  background-color: rgb(255 255 255);
+  border-radius: 0.75rem;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
+  flex-direction: column;
+  transition: opacity 100ms ease-out, transform 200ms ease-out;
+  opacity: 0;
+  transform: scale(0.95) translateY(20px);
+  display: flex;
+  pointer-events: none;
+}
+
+.copilotKitSidebar .copilotKitWindow {
+  border-radius: 0;
+  opacity: 1;
+  transform: translateX(100%);
+}
+
+.copilotKitWindow.open {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+  pointer-events: auto;
+}
+
+.copilotKitSidebar .copilotKitWindow.open {
+  transform: translateX(0);
+}
+
+@media (min-width: 640px) {
+  .copilotKitWindow {
+    transform-origin: bottom right;
+    bottom: 5rem;
+    right: 1rem;
+    top: auto;
+    left: auto;
+    border-width: 0px;
+    margin-bottom: 1rem;
+    width: 24rem;
+    height: 600px;
+    min-height: 200px;
+    max-height: calc(100% - 6rem);
+  }
+
+  .copilotKitSidebar .copilotKitWindow {
+    bottom: 0;
+    right: 0;
+    top: auto;
+    left: auto;
+    width: 28rem;
+    min-height: 100%;
+    margin-bottom: 0;
+    max-height: none;
+  }
+}

package/src/styles.css

@@ -1,3 +1,15 @@
+@import "./css/colors.css";
+@import "./css/popup.css";
+@import "./css/sidebar.css";
+@import "./css/button.css";
+@import "./css/header.css";
+@import "./css/input.css";
+@import "./css/messages.css";
+@import "./css/window.css";
+@import "./css/animations.css";
+@import "./css/response.css";
+@import "./css/markdown.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

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: [