@camunda/copilot-chat 0.0.0-alpha2

package/LICENSE

@@ -0,0 +1,65 @@
+Camunda License 1.0
+
+The Camunda License (the “License”) sets forth the terms and conditions
+under which Camunda Services GmbH ("the Licensor") grants You a license
+solely to the source code in this repository ("the Software").
+
+Acceptance
+By Using the Software, You agree to all the terms and conditions below.
+If Your Use of the Software does not comply with the terms and conditions
+described in this License, You must purchase a commercial license from the
+Licensor, its affiliated entities, or authorized resellers, or You must
+refrain from Using the Software. If You receive the Software in original or
+modified form from a third party, the terms and conditions outlined in this
+License apply to Your Use of that Software. You should have received a copy
+of this License in this case.
+ 
+Copyright License
+Subject to the terms and conditions of this License, the Licensor hereby grants
+You the non-exclusive, royalty-free, worldwide, non-sublicensable, non-transferable
+right to Use the Software in any way or manner that would otherwise infringe the
+Licensor’s copyright as long and insofar as You Use the Software only and limited
+to the Use in or for the purpose of Using the Software in Non-Production Environment.  
+Each time you distribute or make otherwise publicly available the Software or
+Derivative Works thereof, the recipient automatically receives a license from
+the original Licensor to the respective Software or Derivative Works thereof
+under the terms of this License.
+
+Conditions and Restrictions
+All Use of the Software is explicitly made subject to the following conditions:
+  * You may not move, change, disable, or circumvent the license key functionality
+    in the Software, and You may not remove or obscure any functionality in the
+    Software that is protected by the license key.
+  * If You distribute or make available the Software or any modification or Derivative
+    Works thereof (including compiled versions), You must conspicuously display and
+    attach this License on each original or modified copy of the Software and enable
+    the recipient to obtain the source code if You have distributed a compiled version
+
+
+Patent License
+Patent and trademark rights are not licensed under this Public License.
+
+
+No Liability
+EXCEPT FOR DAMAGES CAUSED BY INTENT OR FRAUDULENTLY CONCEALED DEFECTS, AND EXCEPT FOR
+DAMAGES RESULTING FROM BREACH OF ANY WARRANTY OR GUARANTEE EXPRESSLY GIVEN BY LICENSOR
+IN THIS LICENCE, IN NO EVENT WILL LICENSOR BE LIABLE TO YOU ON ANY LEGAL THEORY FOR ANY
+DAMAGES ARISING OUT OF THIS LICENSE OR THE USE OF THE WORK. ANY MANDATORY STATUTORY
+LIABILITY UNDER APPLICABLE LAW REMAINS UNAFFECTED.
+ 
+No Warranty
+EXCEPT AS EXPRESSLY STATED IN THIS LICENSE OR REQUIRED BY APPLICABLE LAW, THE WORKS ARE
+PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND INCLUDING WITHOUT LIMITATION,
+ANY WARRANTIES REGARDING THE CONTENTS, ACCURACY, OR FITNESS FOR A PARTICULAR PURPOSE.
+
+
+Definitions
+You refer to the individual or entity agreeing to these terms.
+Use means any action concerning the Software that, without permission, would make Youliable
+for infringement under applicable copyright law. Use within the meaning of this License
+includes, but is not limited to, copying, distribution (with or without modification),
+making available to the public, and modifying the Software.
+
+Non-Production Environment means a setting in which the Software is used for development, staging,
+testing, quality assurance, demonstration, or evaluation purposes, and not for any live or
+production systems. 

package/README.md

@@ -0,0 +1,105 @@
+# Camunda Copilot Client
+
+React component library for embedding Camunda Copilot chat interface into web applications.
+
+## Installation
+
+```bash
+npm install @camunda/copilot-chat
+```
+
+## Usage
+
+```tsx
+import { CopilotChat } from '@camunda/copilot-chat';
+
+function App() {
+  const handleSendMessage = async (request, options, instance) => {
+    // Handle message sending logic
+    const response = {
+      output: {
+        generic: [
+          {
+            response_type: 'text',
+            text: `You said: "${request.input.text}"`,
+          },
+        ],
+      },
+    };
+
+    await instance.messaging.addMessage(response);
+  };
+
+  return <CopilotChat customSendMessage={handleSendMessage} workareaSelector="body" />;
+}
+```
+
+### Props
+
+- **`customSendMessage`** (required): Function to handle message sending and responses
+- **`workareaSelector`** (optional): CSS selector for the workarea container (default: `"body"`)
+
+### Features
+
+- Bottom-right floating launcher button
+- Sidecar panel that slides in from the right
+- Automatically injected styles (no separate CSS import needed)
+
+## Development
+
+### Prerequisites
+
+- Node.js ≥18.0.0
+- npm ≥9.0.0
+
+### Setup
+
+```bash
+npm install
+```
+
+### Local Development
+
+```bash
+# Run both library build (watch mode) and demo app together
+npm run dev
+
+# Or run individually:
+# Build library in watch mode
+npm run build:watch
+
+# Run demo app (in another terminal)
+npm run demo
+
+# Run tests
+npm test
+
+# Lint
+npm run lint
+```
+
+The demo app runs at `http://localhost:4200`. The `dev` command automatically rebuilds the library when you make changes and hot-reloads the demo app.
+
+## Contributing
+
+```bash
+# 1. Create a feature branch
+git checkout -b '#ticketNumber/my-feature-description'
+
+# 2. Make changes and test with dev mode
+npm run dev
+
+# 3. Run tests
+npm test
+
+# 4. Build to verify
+npm run build
+
+# 5. Commit and push
+git commit -m "feat: my feature"
+git push
+```
+
+## License
+
+Camunda License 1.0 - See [LICENSE](LICENSE) file for details.

package/dist/CopilotChat.d.ts

@@ -0,0 +1,8 @@
+import { ChatCustomElementProps } from '@carbon/ai-chat';
+export interface CopilotChatProps {
+    customSendMessage: NonNullable<ChatCustomElementProps['messaging']>['customSendMessage'];
+    workareaSelector?: string;
+}
+export declare const CopilotChat: ({ customSendMessage, workareaSelector, }: CopilotChatProps) => import("react/jsx-runtime").JSX.Element;
+export default CopilotChat;
+//# sourceMappingURL=CopilotChat.d.ts.map

package/dist/CopilotChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotChat.d.ts","sourceRoot":"","sources":["../src/CopilotChat.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAGlC,OAAO,KAAK,EAAE,sBAAsB,EAAgB,MAAM,iBAAiB,CAAC;AAK5E,MAAM,WAAW,gBAAgB;IAC/B,iBAAiB,EAAE,WAAW,CAC5B,sBAAsB,CAAC,WAAW,CAAC,CACpC,CAAC,mBAAmB,CAAC,CAAC;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAWD,eAAO,MAAM,WAAW,GAAI,0CAGzB,gBAAgB,4CAiDlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/CopilotLauncher.d.ts

@@ -0,0 +1,8 @@
+import { ChatInstance } from '@carbon/ai-chat';
+interface CopilotLauncherProps {
+    instance: ChatInstance | null;
+    isOpen: boolean;
+}
+export declare const CopilotLauncher: ({ instance, isOpen }: CopilotLauncherProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CopilotLauncher.d.ts.map

package/dist/components/CopilotLauncher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopilotLauncher.d.ts","sourceRoot":"","sources":["../../src/components/CopilotLauncher.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAIpD,UAAU,oBAAoB;IAC5B,QAAQ,EAAE,YAAY,GAAG,IAAI,CAAC;IAC9B,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,GAAI,sBAAsB,oBAAoB,4CA2BzE,CAAC"}

package/dist/hooks/useCopilotSidecar.d.ts

@@ -0,0 +1,6 @@
+import { SidecarLayoutConfig } from '../layout/SidecarLayoutManager';
+export interface UseCopilotSidecarOptions extends SidecarLayoutConfig {
+    enabled: boolean;
+}
+export declare const useCopilotSidecar: ({ enabled, width, zIndex, workareaSelector, responsiveBreakpoint, }: UseCopilotSidecarOptions) => void;
+//# sourceMappingURL=useCopilotSidecar.d.ts.map

package/dist/hooks/useCopilotSidecar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCopilotSidecar.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopilotSidecar.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,mBAAmB,EACpB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,wBAAyB,SAAQ,mBAAmB;IACnE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,iBAAiB,GAAI,qEAM/B,wBAAwB,SAe1B,CAAC"}

package/dist/index.css

@@ -0,0 +1,135 @@
+:root {
+  --copilot-chat-sidecar-width: 416px;
+  --copilot-chat-panel-z-index: 9999;
+  --copilot-chat-transition: 160ms cubic-bezier(0.2, 0, 0, 1);
+}
+
+body[data-copilot-chat-layout='sidecar'],
+[data-copilot-chat-host] {
+  margin-inline-end: var(--copilot-chat-sidecar-width);
+  transition: margin-inline-end var(--copilot-chat-transition);
+  box-sizing: border-box;
+}
+
+body[data-copilot-chat-layout='bottom-sheet'] {
+  margin-inline-end: 0;
+}
+
+.copilot-chat-panel {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-end: 0;
+  inline-size: var(--copilot-chat-sidecar-width);
+  max-inline-size: clamp(320px, var(--copilot-chat-sidecar-width), 512px);
+  block-size: 100vh;
+  z-index: var(--copilot-chat-panel-z-index);
+  opacity: 0;
+  pointer-events: none;
+  transform: translateX(100%);
+  transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1),
+    transform 160ms cubic-bezier(0.2, 0, 0, 1);
+  --copilot-brand-color: #8a3ffc;
+  --copilot-brand-color-hover: #7a34e4;
+  --copilot-brand-color-active: #5c24aa;
+  --copilot-brand-color-ghost: rgba(138, 63, 252, 0.12);
+  --copilot-brand-color-ghost-strong: rgba(138, 63, 252, 0.2);
+  --copilot-brand-color-muted: #6c2ed8;
+  --cds-interactive: var(--copilot-brand-color);
+  --cds-button-primary: var(--copilot-brand-color);
+  --cds-button-primary-hover: var(--copilot-brand-color-hover);
+  --cds-button-primary-active: var(--copilot-brand-color-active);
+  --cds-button-tertiary: var(--copilot-brand-color);
+  --cds-button-tertiary-hover: var(--copilot-brand-color-hover);
+  --cds-button-tertiary-active: var(--copilot-brand-color-active);
+  --cds-link-primary: var(--copilot-brand-color);
+  --cds-link-primary-hover: var(--copilot-brand-color-hover);
+  --cds-link-secondary: var(--copilot-brand-color);
+  --cds-link-visited: var(--copilot-brand-color-muted);
+  --cds-chat-avatar-user: var(--copilot-brand-color);
+  --cds-chat-button: var(--copilot-brand-color);
+  --cds-chat-button-hover: var(--copilot-brand-color-ghost);
+  --cds-chat-button-selected: var(--copilot-brand-color-ghost-strong);
+  --cds-chat-button-text-hover: var(--copilot-brand-color-hover);
+  --cds-chat-button-text-selected: var(--copilot-brand-color);
+  --cds-aichat-launcher-color-background: var(--copilot-brand-color);
+  --cds-aichat-launcher-color-background-hover: var(
+    --copilot-brand-color-hover
+  );
+  --cds-aichat-launcher-color-background-active: var(
+    --copilot-brand-color-active
+  );
+  --cds-aichat-launcher-color-avatar: #fff;
+  --cds-aichat-launcher-expanded-message-color-background: var(
+    --copilot-brand-color
+  );
+  --cds-aichat-launcher-expanded-message-color-background-hover: var(
+    --copilot-brand-color-hover
+  );
+  --cds-aichat-launcher-expanded-message-color-background-active: var(
+    --copilot-brand-color-active
+  );
+}
+
+.copilot-chat-panel--open {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateX(0);
+  background-color: var(--cds-layer, #fff);
+  border-inline-start: 1px solid var(--cds-border-subtle, rgba(0, 0, 0, 0.12));
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);
+}
+
+body[data-copilot-chat-layout='bottom-sheet'] .copilot-chat-panel {
+  inset-inline: 0;
+  inset-block-start: auto;
+  inset-block-end: 0;
+  block-size: min(70vh, 520px);
+  inline-size: 100%;
+  border-inline-start: none;
+  border-block-start: 1px solid var(--cds-border-subtle, rgba(0, 0, 0, 0.12));
+}
+._launcher_qra98_1 {
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  z-index: 10000;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: #8a3ffc;
+  border: none;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+}
+
+._launcher_qra98_1:hover {
+  background-color: #7a34e4;
+}
+
+._launcher_qra98_1:active {
+  background-color: #5c24aa;
+}
+
+._launcher_qra98_1:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+._launcher--hidden_qra98_32 {
+  opacity: 0;
+  pointer-events: none;
+}
+
+._icon_qra98_37 {
+  inline-size: 28px;
+  block-size: 28px;
+}
+
+body[data-copilot-chat-layout='bottom-sheet'] ._launcher_qra98_1 {
+  inset-inline-end: 16px;
+  inset-block-end: 16px;
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CopilotChat } from './CopilotChat';
+export type { CopilotChatProps } from './CopilotChat';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,0BAA0B,CAAC;AAElC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -0,0 +1,301 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useLayoutEffect, useCallback, useState, useEffect } from "react";
+import { ViewType, ChatCustomElement, CornersType } from "@carbon/ai-chat";
+const BODY_ATTRIBUTE = "data-copilot-chat-layout";
+const HOST_ATTRIBUTE = "data-copilot-chat-host";
+const WIDTH_VAR = "--copilot-chat-sidecar-width";
+const Z_INDEX_VAR = "--copilot-chat-panel-z-index";
+const layoutState = {
+  activeCount: 0,
+  rootSnapshot: null,
+  hostRegistry: /* @__PURE__ */ new Map(),
+  mediaWatcher: null,
+  mode: "sidecar",
+  activeWidth: 416
+};
+const isDomAvailable = () => typeof document !== "undefined" && typeof window !== "undefined";
+const resolveHosts = (workareaSelector) => {
+  if (!isDomAvailable()) {
+    return [];
+  }
+  if (workareaSelector) {
+    const elements = document.querySelectorAll(workareaSelector);
+    const htmlElements = Array.from(elements).filter(
+      (element) => element instanceof HTMLElement
+    );
+    if (htmlElements.length > 0) {
+      return htmlElements;
+    }
+    return [document.body];
+  }
+  return [document.body];
+};
+const applyRootVariables = (width, zIndex) => {
+  if (!isDomAvailable()) {
+    return;
+  }
+  const root = document.documentElement;
+  if (!layoutState.rootSnapshot) {
+    layoutState.rootSnapshot = {
+      width: root.style.getPropertyValue(WIDTH_VAR),
+      zIndex: root.style.getPropertyValue(Z_INDEX_VAR)
+    };
+  }
+  layoutState.activeWidth = width;
+  root.style.setProperty(WIDTH_VAR, `${width}px`);
+  root.style.setProperty(Z_INDEX_VAR, `${zIndex}`);
+  syncHostAppearance(layoutState.mode);
+};
+const restoreRootVariables = () => {
+  if (!isDomAvailable() || !layoutState.rootSnapshot) {
+    return;
+  }
+  const root = document.documentElement;
+  const { width, zIndex } = layoutState.rootSnapshot;
+  if (width) {
+    root.style.setProperty(WIDTH_VAR, width);
+  } else {
+    root.style.removeProperty(WIDTH_VAR);
+  }
+  if (zIndex) {
+    root.style.setProperty(Z_INDEX_VAR, zIndex);
+  } else {
+    root.style.removeProperty(Z_INDEX_VAR);
+  }
+  layoutState.rootSnapshot = null;
+  layoutState.activeWidth = 416;
+};
+const updateHostAppearance = (host, mode) => {
+  host.setAttribute(HOST_ATTRIBUTE, mode);
+};
+const syncHostAppearance = (mode) => {
+  layoutState.hostRegistry.forEach(
+    (_entry, host) => updateHostAppearance(host, mode)
+  );
+};
+const attachHost = (host) => {
+  const entry = layoutState.hostRegistry.get(host) ?? {
+    count: 0
+  };
+  layoutState.hostRegistry.set(host, {
+    count: entry.count + 1
+  });
+  updateHostAppearance(host, layoutState.mode);
+  return () => {
+    const currentEntry = layoutState.hostRegistry.get(host);
+    if (!currentEntry) {
+      return;
+    }
+    const nextCount = currentEntry.count - 1;
+    if (nextCount <= 0) {
+      host.removeAttribute(HOST_ATTRIBUTE);
+      layoutState.hostRegistry.delete(host);
+      return;
+    }
+    layoutState.hostRegistry.set(host, {
+      count: nextCount
+    });
+  };
+};
+const setBodyMode = (mode) => {
+  if (!isDomAvailable()) {
+    return;
+  }
+  layoutState.mode = mode;
+  document.body.setAttribute(BODY_ATTRIBUTE, mode);
+  syncHostAppearance(mode);
+};
+const clearBodyMode = () => {
+  if (!isDomAvailable()) {
+    return;
+  }
+  document.body.removeAttribute(BODY_ATTRIBUTE);
+  layoutState.mode = "sidecar";
+};
+const watchBreakpoint = (breakpoint) => {
+  if (!isDomAvailable() || typeof window.matchMedia !== "function") {
+    setBodyMode("sidecar");
+    return () => void 0;
+  }
+  const query = window.matchMedia(`(max-width: ${breakpoint}px)`);
+  const applyMode = (matches) => {
+    setBodyMode(matches ? "bottom-sheet" : "sidecar");
+  };
+  applyMode(query.matches);
+  const listener = (event) => applyMode(event.matches);
+  query.addEventListener("change", listener);
+  return () => query.removeEventListener("change", listener);
+};
+const ensureMediaWatcher = (breakpoint) => {
+  if (!isDomAvailable()) {
+    return;
+  }
+  if (layoutState.mediaWatcher && layoutState.mediaWatcher.breakpoint === breakpoint) {
+    return;
+  }
+  layoutState.mediaWatcher?.dispose();
+  const dispose = watchBreakpoint(breakpoint);
+  layoutState.mediaWatcher = { breakpoint, dispose };
+};
+const teardownMediaWatcher = () => {
+  layoutState.mediaWatcher?.dispose();
+  layoutState.mediaWatcher = null;
+  clearBodyMode();
+};
+const attachSidecarLayout = ({
+  width,
+  zIndex,
+  workareaSelector,
+  responsiveBreakpoint
+}) => {
+  if (!isDomAvailable()) {
+    return () => void 0;
+  }
+  const hosts = resolveHosts(workareaSelector);
+  applyRootVariables(width, zIndex);
+  ensureMediaWatcher(responsiveBreakpoint);
+  const detachHosts = hosts.map((host) => attachHost(host));
+  layoutState.activeCount += 1;
+  return () => {
+    detachHosts.forEach((detach) => detach());
+    layoutState.activeCount = Math.max(layoutState.activeCount - 1, 0);
+    if (layoutState.activeCount === 0) {
+      teardownMediaWatcher();
+      restoreRootVariables();
+    }
+  };
+};
+const useCopilotSidecar = ({
+  enabled,
+  width,
+  zIndex,
+  workareaSelector,
+  responsiveBreakpoint
+}) => {
+  useLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    const detach = attachSidecarLayout({
+      width,
+      zIndex,
+      workareaSelector,
+      responsiveBreakpoint
+    });
+    return () => detach();
+  }, [enabled, width, zIndex, workareaSelector, responsiveBreakpoint]);
+};
+const CopilotLauncherIcon = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='48'%20height='48'%20viewBox='0%200%2048%2048'%20fill='none'%3e%3ccircle%20cx='24'%20cy='24'%20r='24'%20fill='%238A3FFC'%20/%3e%3cg%20transform='translate(7%209)%20scale(2)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M9.7219%205.2691C8.6668%204.2126%207.7435%202.4757%207.0638%201.00772C7.0445%201.00316%207.0206%201%206.9941%201C6.9675%201%206.9436%201.00316%206.9243%201.00773C6.2447%202.4757%205.322%204.2122%204.2662%205.2687C3.2106%206.325%201.47501%207.2485%200.00802994%207.9287C0.00328994%207.9483%200%207.9728%200%208C0%208.0271%200.00324982%208.0515%200.00793982%208.071C1.47467%208.751%203.2101%209.6743%204.2659%2010.7311C5.322%2011.7875%206.2448%2013.5244%206.9245%2014.9923C6.9437%2014.9969%206.9675%2015%206.994%2015C7.0205%2015%207.0444%2014.9968%207.0636%2014.9923C7.7433%2013.5244%208.666%2011.7877%209.7215%2010.7315M9.7215%2010.7315C10.773%209.6791%2012.4531%208.7468%2013.8721%208.0577C13.8756%208.0415%2013.878%208.0217%2013.878%207.9998C13.878%207.9779%2013.8756%207.9582%2013.8721%207.942C12.4537%207.2529%2010.7734%206.3207%209.7219%205.2691'%20fill='white'%20/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M15.4808%201.52468C15.104%201.14737%2014.7742%200.52704%2014.5315%200.00275993C14.5246%200.00112993%2014.5161%200%2014.5066%200C14.4971%200%2014.4885%200.00112993%2014.4817%200.00275993C14.2389%200.52705%2013.9094%201.14721%2013.5323%201.52455C13.1553%201.9018%2012.5355%202.2316%2012.0116%202.4745C12.0099%202.4815%2012.0087%202.4903%2012.0087%202.5C12.0087%202.5097%2012.0099%202.5184%2012.0115%202.5254C12.5354%202.7682%2013.1552%203.098%2013.5322%203.4754C13.9094%203.8527%2014.239%204.473%2014.4817%204.9972C14.4886%204.9989%2014.4971%205%2014.5066%205C14.516%205%2014.5246%204.9989%2014.5314%204.9972C14.7742%204.473%2015.1037%203.8528%2015.4806%203.4755M15.4806%203.4755C15.8562%203.0997%2016.4562%202.7667%2016.963%202.5206C16.9643%202.5148%2016.9651%202.5078%2016.9651%202.4999C16.9651%202.4921%2016.9643%202.4851%2016.963%202.4793C16.4565%202.2332%2015.8563%201.90026%2015.4808%201.52468'%20fill='white'%20/%3e%3c/g%3e%3c/svg%3e";
+const launcher = "_launcher_qra98_1";
+const icon = "_icon_qra98_37";
+const styles = {
+  launcher,
+  "launcher--hidden": "_launcher--hidden_qra98_32",
+  icon
+};
+const CopilotLauncher = ({ instance, isOpen }) => {
+  const handleClick = useCallback(() => {
+    if (!instance) return;
+    const state = instance.getState();
+    instance.changeView(
+      state.viewState.mainWindow ? ViewType.LAUNCHER : ViewType.MAIN_WINDOW
+    );
+  }, [instance]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `${styles.launcher} ${isOpen ? styles["launcher--hidden"] : ""}`,
+      onClick: handleClick,
+      disabled: !instance,
+      "aria-label": "Toggle Copilot",
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: CopilotLauncherIcon,
+          alt: "",
+          "aria-hidden": "true",
+          className: styles.icon
+        }
+      )
+    }
+  );
+};
+const __vite_glob_0_0 = "._launcher_qra98_1 {\n  position: fixed;\n  bottom: 24px;\n  right: 24px;\n  z-index: 10000;\n  width: 56px;\n  height: 56px;\n  border-radius: 50%;\n  background-color: #8a3ffc;\n  border: none;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;\n}\n\n._launcher_qra98_1:hover {\n  background-color: #7a34e4;\n}\n\n._launcher_qra98_1:active {\n  background-color: #5c24aa;\n}\n\n._launcher_qra98_1:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n._launcher--hidden_qra98_32 {\n  opacity: 0;\n  pointer-events: none;\n}\n\n._icon_qra98_37 {\n  inline-size: 28px;\n  block-size: 28px;\n}\n\nbody[data-copilot-chat-layout='bottom-sheet'] ._launcher_qra98_1 {\n  inset-inline-end: 16px;\n  inset-block-end: 16px;\n}\n";
+const baseStyles = ":root {\n  --copilot-chat-sidecar-width: 416px;\n  --copilot-chat-panel-z-index: 9999;\n  --copilot-chat-transition: 160ms cubic-bezier(0.2, 0, 0, 1);\n}\n\nbody[data-copilot-chat-layout='sidecar'],\n[data-copilot-chat-host] {\n  margin-inline-end: var(--copilot-chat-sidecar-width);\n  transition: margin-inline-end var(--copilot-chat-transition);\n  box-sizing: border-box;\n}\n\nbody[data-copilot-chat-layout='bottom-sheet'] {\n  margin-inline-end: 0;\n}\n\n.copilot-chat-panel {\n  position: fixed;\n  inset-block: 0;\n  inset-inline-end: 0;\n  inline-size: var(--copilot-chat-sidecar-width);\n  max-inline-size: clamp(320px, var(--copilot-chat-sidecar-width), 512px);\n  block-size: 100vh;\n  z-index: var(--copilot-chat-panel-z-index);\n  opacity: 0;\n  pointer-events: none;\n  transform: translateX(100%);\n  transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1),\n    transform 160ms cubic-bezier(0.2, 0, 0, 1);\n  --copilot-brand-color: #8a3ffc;\n  --copilot-brand-color-hover: #7a34e4;\n  --copilot-brand-color-active: #5c24aa;\n  --copilot-brand-color-ghost: rgba(138, 63, 252, 0.12);\n  --copilot-brand-color-ghost-strong: rgba(138, 63, 252, 0.2);\n  --copilot-brand-color-muted: #6c2ed8;\n  --cds-interactive: var(--copilot-brand-color);\n  --cds-button-primary: var(--copilot-brand-color);\n  --cds-button-primary-hover: var(--copilot-brand-color-hover);\n  --cds-button-primary-active: var(--copilot-brand-color-active);\n  --cds-button-tertiary: var(--copilot-brand-color);\n  --cds-button-tertiary-hover: var(--copilot-brand-color-hover);\n  --cds-button-tertiary-active: var(--copilot-brand-color-active);\n  --cds-link-primary: var(--copilot-brand-color);\n  --cds-link-primary-hover: var(--copilot-brand-color-hover);\n  --cds-link-secondary: var(--copilot-brand-color);\n  --cds-link-visited: var(--copilot-brand-color-muted);\n  --cds-chat-avatar-user: var(--copilot-brand-color);\n  --cds-chat-button: var(--copilot-brand-color);\n  --cds-chat-button-hover: var(--copilot-brand-color-ghost);\n  --cds-chat-button-selected: var(--copilot-brand-color-ghost-strong);\n  --cds-chat-button-text-hover: var(--copilot-brand-color-hover);\n  --cds-chat-button-text-selected: var(--copilot-brand-color);\n  --cds-aichat-launcher-color-background: var(--copilot-brand-color);\n  --cds-aichat-launcher-color-background-hover: var(\n    --copilot-brand-color-hover\n  );\n  --cds-aichat-launcher-color-background-active: var(\n    --copilot-brand-color-active\n  );\n  --cds-aichat-launcher-color-avatar: #fff;\n  --cds-aichat-launcher-expanded-message-color-background: var(\n    --copilot-brand-color\n  );\n  --cds-aichat-launcher-expanded-message-color-background-hover: var(\n    --copilot-brand-color-hover\n  );\n  --cds-aichat-launcher-expanded-message-color-background-active: var(\n    --copilot-brand-color-active\n  );\n}\n\n.copilot-chat-panel--open {\n  opacity: 1;\n  pointer-events: auto;\n  transform: translateX(0);\n  background-color: var(--cds-layer, #fff);\n  border-inline-start: 1px solid var(--cds-border-subtle, rgba(0, 0, 0, 0.12));\n  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.08);\n}\n\nbody[data-copilot-chat-layout='bottom-sheet'] .copilot-chat-panel {\n  inset-inline: 0;\n  inset-block-start: auto;\n  inset-block-end: 0;\n  block-size: min(70vh, 520px);\n  inline-size: 100%;\n  border-inline-start: none;\n  border-block-start: 1px solid var(--cds-border-subtle, rgba(0, 0, 0, 0.12));\n}\n";
+const STYLE_ID = "copilot-chat-sidecar-styles";
+const cssModuleInlineMap = /* @__PURE__ */ Object.assign({
+  "../components/CopilotLauncher.module.css": __vite_glob_0_0
+});
+const combinedStyles = [baseStyles, ...Object.values(cssModuleInlineMap)].join(
+  "\n"
+);
+const ensureSidecarStyles = () => {
+  if (typeof document === "undefined") {
+    return;
+  }
+  const existingStyle = document.getElementById(STYLE_ID);
+  if (existingStyle) {
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = combinedStyles;
+  document.head.appendChild(style);
+};
+const headerConfig = {
+  name: "Copilot",
+  showAiLabel: false
+};
+const launcherConfig = {
+  isOn: false
+};
+const CopilotChat = ({
+  customSendMessage,
+  workareaSelector
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [instance, setInstance] = useState(null);
+  useEffect(() => {
+    ensureSidecarStyles();
+  }, []);
+  useCopilotSidecar({
+    enabled: isOpen,
+    width: 416,
+    zIndex: 12,
+    workareaSelector,
+    responsiveBreakpoint: 960
+  });
+  const handleViewChange = useCallback(
+    (event) => {
+      setIsOpen(event.newViewState.mainWindow);
+    },
+    []
+  );
+  const handleAfterRender = useCallback((instance2) => {
+    setInstance(instance2);
+  }, []);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(CopilotLauncher, { instance, isOpen }),
+    /* @__PURE__ */ jsx(
+      ChatCustomElement,
+      {
+        className: `copilot-chat-panel ${isOpen ? "copilot-chat-panel--open" : ""}`,
+        aiEnabled: false,
+        assistantName: "Copilot",
+        layout: {
+          corners: CornersType.SQUARE
+        },
+        openChatByDefault: false,
+        onViewChange: handleViewChange,
+        onAfterRender: handleAfterRender,
+        header: headerConfig,
+        launcher: launcherConfig,
+        messaging: { customSendMessage }
+      }
+    )
+  ] });
+};
+export {
+  CopilotChat
+};

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+declare const jsx: (type: React.ElementType, props: Record<string, unknown> | null | undefined, key?: React.Key) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const jsxs: (type: React.ElementType, props: Record<string, unknown> | null | undefined, key?: React.Key) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const jsxDEV: (type: React.ElementType, props: Record<string, unknown> | null | undefined, key?: React.Key, _isStaticChildren?: boolean, _source?: unknown, _self?: unknown) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare const Fragment: React.ExoticComponent<React.FragmentProps>;
+export { jsx, jsxs, jsxDEV, Fragment };
+//# sourceMappingURL=jsx-runtime.d.ts.map

package/dist/jsx-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jsx-runtime.d.ts","sourceRoot":"","sources":["../src/jsx-runtime.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,QAAA,MAAM,GAAG,GACP,MAAM,KAAK,CAAC,WAAW,EACvB,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,MAAM,KAAK,CAAC,GAAG,uEACa,CAAC;AAE/B,QAAA,MAAM,IAAI,SALF,KAAK,CAAC,WAAW,SAChB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,QAC3C,KAAK,CAAC,GAAG,uEAGD,CAAC;AAEjB,QAAA,MAAM,MAAM,GACV,MAAM,KAAK,CAAC,WAAW,EACvB,OAAO,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,EACjD,MAAM,KAAK,CAAC,GAAG,EACf,oBAAoB,OAAO,EAC3B,UAAU,OAAO,EACjB,QAAQ,OAAO,uEACa,CAAC;AAE/B,QAAA,MAAM,QAAQ,4CAAiB,CAAC;AAEhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/layout/SidecarLayoutManager.d.ts

@@ -0,0 +1,8 @@
+export interface SidecarLayoutConfig {
+    width: number;
+    zIndex: number;
+    workareaSelector?: string;
+    responsiveBreakpoint: number;
+}
+export declare const attachSidecarLayout: ({ width, zIndex, workareaSelector, responsiveBreakpoint, }: SidecarLayoutConfig) => () => void;
+//# sourceMappingURL=SidecarLayoutManager.d.ts.map

package/dist/layout/SidecarLayoutManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidecarLayoutManager.d.ts","sourceRoot":"","sources":["../../src/layout/SidecarLayoutManager.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,CAAC;AAInC,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,MAAM,CAAC;CAC9B;AAsMD,eAAO,MAAM,mBAAmB,GAAI,4DAKjC,mBAAmB,eAqBrB,CAAC"}

package/dist/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@camunda/copilot-chat",
+  "version": "0.0.0-alpha1",
+  "description": "Camunda Copilot Client Library - React components and utilities for Camunda Platform 8",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/camunda/camunda-copilot-client.git",
+    "directory": "packages/copilot-chat"
+  },
+  "keywords": [
+    "camunda",
+    "copilot",
+    "react",
+    "typescript",
+    "camunda-platform-8",
+    "workflow",
+    "automation"
+  ],
+  "author": "Camunda Services GmbH",
+  "license": "LicenseRef-Camunda-1.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "dependencies": {
+    "@carbon/ai-chat": "^1.2.0",
+    "@carbon/react": "1.95.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0"
+  }
+}

package/dist/styles/ensureSidecarStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const ensureSidecarStyles: () => void;
+//# sourceMappingURL=ensureSidecarStyles.d.ts.map

package/dist/styles/ensureSidecarStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ensureSidecarStyles.d.ts","sourceRoot":"","sources":["../../src/styles/ensureSidecarStyles.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,mBAAmB,YAc/B,CAAC"}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@camunda/copilot-chat",
+  "version": "0.0.0-alpha2",
+  "description": "Camunda Copilot Client Library - React components and utilities for Camunda Platform 8",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/camunda/camunda-copilot-client.git",
+    "directory": "packages/copilot-chat"
+  },
+  "keywords": [
+    "camunda",
+    "copilot",
+    "react",
+    "typescript",
+    "camunda-platform-8",
+    "workflow",
+    "automation"
+  ],
+  "author": "Camunda Services GmbH",
+  "license": "LicenseRef-Camunda-1.0",
+  "engines": {
+    "node": ">=18.0.0",
+    "npm": ">=9.0.0"
+  },
+  "dependencies": {
+    "@carbon/ai-chat": "^1.2.0",
+    "@carbon/react": "1.95.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0 <20.0.0",
+    "react-dom": ">=18.0.0 <20.0.0"
+  }
+}