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

package/src/css/input.css

@@ -0,0 +1,79 @@
+.copilotKitInput {
+  border-top: 1px solid var(--copilot-kit-input-separator-color);
+  padding-left: 2rem;
+  padding-right: 2.5rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  cursor: text;
+  position: relative;
+  border-bottom-left-radius: 0.75rem;
+  border-bottom-right-radius: 0.75rem;
+  background-color: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitInput > button {
+  position: absolute;
+  right: 0.5rem;
+  padding: 0.25rem;
+  cursor: pointer;
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 200ms;
+  transform: scale(1);
+  color: rgba(0, 0, 0, 0.25);
+  -webkit-appearance: button;
+  appearance: button;
+  background-color: transparent;
+  background-image: none;
+  text-transform: none;
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  border: 0;
+  margin: 0;
+  text-indent: 0px;
+  text-shadow: none;
+  display: inline-block;
+  text-align: center;
+}
+
+.copilotKitInput > button:not([disabled]) {
+  color: var(--copilot-kit-input-send-button-color);
+}
+
+.copilotKitInput > button:not([disabled]):hover {
+  transform: scale(1.1);
+}
+
+.copilotKitInput > button[disabled] {
+  color: var(--copilot-kit-input-send-button-disabled-color);
+}
+
+.copilotKitInput > textarea {
+  width: 100%;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  resize: none;
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: text;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-weight: inherit;
+  color: var(--copilot-kit-input-color);
+  border: 0px;
+  background-color: var(--copilot-kit-input-background-color);
+}
+
+.copilotKitInput > textarea::placeholder {
+  color: var(--copilot-kit-input-placeholder-color);
+  opacity: 1;
+}

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,14 @@
+@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";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/dist/chunk-NMT7XT2R.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/sidebar/copilot-sidebar.tsx"],"names":[],"mappings":";;;;;;;;AAoBA,SAAS,iBAAiB;AAVtB,SAIE,KAJF;AAFG,SAAS,eAAe,OAAkC;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,MAEvC;AAAA,4BAAC,2BAAW,MAAO;AAAA,QACnB,oBAAC,eAAY,mBAAmB,MAAM,mBAAmB;AAAA;AAAA;AAAA,EAC3D;AAEJ;AAIA,SAAS,OAAO,OAAkC;AAChD,SACE,qBAAC,SAAI,WAAU,0DACb;AAAA,wBAAC,QAAG,WAAU,mDAAkD,0BAAY;AAAA,IAC5E,oBAAC,SAAI,WAAU,8BACb;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAS,MAAM,MAAM,eAAe,KAAK;AAAA,QAEzC;AAAA,8BAAC,UAAK,WAAU,WAAU,yBAAW;AAAA,UACrC,oBAAC,aAAU,WAAU,WAAU,eAAY,QAAO;AAAA;AAAA;AAAA,IACpD,GACF;AAAA,KACF;AAEJ","sourcesContent":["import React from \"react\";\nimport { CopilotChat } from \"../chat-components/copilot-chat\";\n\nexport interface SidebarProps {\n  setSidebarOpen: (open: boolean) => void;\n  makeSystemMessage?: (contextString: string) => string;\n}\n\nexport function CopilotSidebar(props: SidebarProps): JSX.Element {\n  return (\n    <div\n      className=\"shadow-lg bg-gray-50 flex flex-col border-l-2\"\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      <TopBar {...props} />\n      <CopilotChat makeSystemMessage={props.makeSystemMessage} />\n    </div>\n  );\n}\n\nimport { XMarkIcon } from \"@heroicons/react/24/outline\";\n\nfunction TopBar(props: SidebarProps): JSX.Element {\n  return (\n    <div className=\"py-6 flex bg-gray-50 items-center justify-between px-4\">\n      <h1 className=\"text-base font-semibold leading-6 text-gray-900\">Copilot Chat</h1>\n      <div className=\"ml-3 flex h-7 items-center\">\n        <button\n          type=\"button\"\n          className=\"rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2\"\n          onClick={() => props.setSidebarOpen(false)}\n        >\n          <span className=\"sr-only\">Close panel</span>\n          <XMarkIcon className=\"h-6 w-6\" aria-hidden=\"true\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/chunk-U6NJWGTV.mjs

@@ -1,3 +0,0 @@
-
-//# sourceMappingURL=out.js.map
-//# sourceMappingURL=chunk-U6NJWGTV.mjs.map

package/dist/chunk-WLTEQ2FW.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/sidebar/copilot-sidebar-ui-provider.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,SAA2B,mBAAmB;AAC9C,SAAS,gBAAgB;AAmBnB,mBAkBM,KAjBJ,YADF;AATC,SAAS,yBAAyB,IAAuD;AAAvD,eAAE,WAX3C,IAWyC,IAAe,kBAAf,IAAe,CAAb;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,IAAI;AAEnD,QAAM,gBAAgB,YAAY,MAAM;AACtC,mBAAe,CAAC,SAAS,CAAC,IAAI;AAAA,EAChC,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,sBAAsB,UAAtB,EAA+B,OAAO,EAAE,eAAe,aAAa,cAAc,GACjF,0CACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,UAAU;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,OAAO,cAAc,uBAAuB;AAAA,cAC5C,UAAU;AAAA,cACV,YAAY;AAAA;AAAA,YACd;AAAA,YAEA,8BAAC,UAAM,UAAS;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,WAAW;AAAA,cACX,QAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAO,cAAc,MAAM;AAAA,cAC3B,YAAY;AAAA,YACd;AAAA,YAEA,8BAAC,mBACC;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,mBAAmB,MAAM;AAAA;AAAA,YAC3B,GACF;AAAA;AAAA,QACF;AAAA,QACC,CAAC,eACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,OAAO;AAAA,cACL,UAAU;AAAA,cACV,KAAK;AAAA,cACL,OAAO;AAAA,cACP,WAAW;AAAA,cACX,YAAY;AAAA,YACd;AAAA,YACA,WAAU;AAAA,YACX;AAAA;AAAA,QAED;AAAA;AAAA;AAAA,EAEJ,GACF,GACF;AAEJ","sourcesContent":["import React, { ReactNode, useCallback } from \"react\";\nimport { useState } from \"react\";\nimport { CopilotSidebar } from \"./copilot-sidebar\";\nimport { CopilotSidebarContext } from \"./sidebar-context\";\nimport { TooltipProvider } from \"../chat-components/ui/tooltip\";\n\nexport interface CopilotSidebarUIProviderProps {\n  children: ReactNode;\n  makeSystemMessage?: (contextString: string) => string;\n}\n\nexport function CopilotSidebarUIProvider({ children, ...props }: CopilotSidebarUIProviderProps) {\n  const [sidebarOpen, setSidebarOpen] = useState(true);\n\n  const toggleSidebar = useCallback(() => {\n    setSidebarOpen((prev) => !prev);\n  }, []);\n\n  return (\n    <CopilotSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen, toggleSidebar }}>\n      <>\n        <div\n          style={{\n            height: \"100vh\",\n            width: \"100vw\",\n            position: \"relative\",\n          }}\n        >\n          <div\n            style={{\n              overflowY: \"auto\",\n              overflowX: \"hidden\",\n              height: \"100%\",\n              width: sidebarOpen ? \"calc(100% - 450px)\" : \"100%\",\n              position: \"absolute\",\n              transition: \"width 0.5s ease-in-out\", // New\n            }}\n          >\n            <main>{children}</main>\n          </div>\n          <div\n            style={{\n              overflowY: \"auto\",\n              height: \"100%\",\n              width: \"450px\",\n              position: \"absolute\",\n              right: sidebarOpen ? \"0\" : \"-450px\",\n              transition: \"right 0.5s ease-in-out\",\n            }}\n          >\n            <TooltipProvider>\n              <CopilotSidebar\n                setSidebarOpen={setSidebarOpen}\n                makeSystemMessage={props.makeSystemMessage}\n              />\n            </TooltipProvider>\n          </div>\n          {!sidebarOpen && (\n            <button\n              onClick={toggleSidebar}\n              style={{\n                position: \"absolute\",\n                top: \"5%\",\n                right: \"20px\",\n                transform: \"translateY(-50%)\",\n                transition: \"opacity 0.5s ease-in-out\",\n              }}\n              className=\"bg-slate-100 ring-2 ring-slate-600 font-semibold text-black p-2 rounded-lg shadow-lg\"\n            >\n              Open Copilot\n            </button>\n          )}\n        </div>\n      </>\n    </CopilotSidebarContext.Provider>\n  );\n}\n"]}