@camunda/copilot-chat 0.0.0-alpha7 → 0.0.0-alpha9

package/README.md

@@ -1,4 +1,4 @@
-# Camunda Copilot Client
+# @camunda/copilot-chat
 
 React component library for embedding Camunda Copilot chat interface into web applications.
 
@@ -8,97 +8,81 @@ React component library for embedding Camunda Copilot chat interface into web ap
 npm install @camunda/copilot-chat
 ```
 
-## Usage
+**Peer Dependencies:**
+```bash
+npm install react react-dom @carbon/react @carbon/icons-react
+```
+
+## Quick Start
 
 ```tsx
-import { CopilotChat } from '@camunda/copilot-chat';
+import { CopilotChat, useChatStore } from '@camunda/copilot-chat';
+import '@camunda/copilot-chat/style.css';
 
 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);
+  const handleSendMessage = async (message: string) => {
+    const { addAssistantMessage, appendToMessage, updateMessageStatus } = useChatStore.getState();
+    const messageId = `msg-${Date.now()}`;
+    addAssistantMessage(messageId);
+    appendToMessage(messageId, 'Hello!');
+    updateMessageStatus(messageId, 'complete'); // 'pending' | 'streaming' | 'complete' | 'error'
   };
 
-  return <CopilotChat customSendMessage={handleSendMessage} workareaSelector="body" />;
+  return <CopilotChat onSendMessage={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
+## With Agent Adapter (Recommended)
 
-# Run demo app (in another terminal)
-npm run demo
+For full agent orchestration with tool execution:
 
-# Run tests
-npm test
+```tsx
+import { useMemo } from 'react';
+import { CopilotChat, useAgentAdapter } from '@camunda/copilot-chat';
+import '@camunda/copilot-chat/style.css';
 
-# Lint
-npm run lint
+function App() {
+  const transport = useMemo(() => ({
+    subscribe: (id, onEvent) => { /* Subscribe to events */ },
+    unsubscribe: (id) => { /* Cleanup */ },
+    sendMessage: async (payload) => { /* POST to backend */ },
+    sendToolResult: async (payload) => { /* POST tool result */ },
+  }), []);
+
+  const { sendMessage, stopGeneration, resetConversation } = useAgentAdapter({
+    transport,
+    frontendTools: [{ name: 'my_tool', description: '...', parametersSchema: '{}' }],
+    onToolInvoke: async (toolName, args) => { /* Return result */ },
+  });
+
+  return (
+    <CopilotChat
+      onSendMessage={sendMessage}
+      onStopGeneration={stopGeneration}
+      onResetConversation={resetConversation}
+    />
+  );
+}
 ```
 
-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
+## Props
 
-```bash
-# 1. Create a feature branch
-git checkout -b '#ticketNumber/my-feature-description'
-
-# 2. Make changes and test with dev mode
-npm run dev
+| Prop | Type | Required | Description |
+|------|------|----------|-------------|
+| `onSendMessage` | `(message: string) => Promise<void>` | Yes | Called when user sends a message |
+| `onStopGeneration` | `() => void` | No | Called when user clicks stop button |
+| `onResetConversation` | `() => void` | No | Called when user resets the conversation |
+| `workareaSelector` | `string` | No | CSS selector for the main content area |
+| `emptyStateTitle` | `string` | No | Title shown when chat is empty |
+| `emptyStateDescription` | `string` | No | Description shown when chat is empty |
 
-# 3. Run tests
-npm test
+## Documentation
 
-# 4. Build to verify
-npm run build
+See the [docs folder](../../docs) for detailed documentation:
 
-# 5. Commit and push
-git commit -m "feat: my feature"
-git push
-```
+- [Architecture Overview](../../docs/architecture.md)
+- [Integration Guide](../../docs/integration.md)
+- [Writing Adapters](../../docs/adapters.md)
 
 ## License
 

package/dist/CopilotChat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CopilotChat.d.ts","sourceRoot":"","sources":["../src/CopilotChat.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAUlC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,eAAO,MAAM,WAAW,GAAI,6HAQzB,gBAAgB,4CAgFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"CopilotChat.d.ts","sourceRoot":"","sources":["../src/CopilotChat.tsx"],"names":[],"mappings":"AAQA,OAAO,0BAA0B,CAAC;AAYlC,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACnC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IACvC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1C,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,qBAAqB,CAAC,EAAE,MAAM,CAAC;CACzC;AAED,eAAO,MAAM,WAAW,GAAI,6HAQzB,gBAAgB,4CAgFlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/hooks/index.d.ts

@@ -1,2 +1,3 @@
 export { useCopilotSidecar } from './useCopilotSidecar';
+export { useAgentAdapter } from './useAgentAdapter';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/hooks/useAgentAdapter.d.ts

@@ -0,0 +1,3 @@
+import { AgentAdapterConfig, AgentAdapterReturn } from '../types/agentTypes';
+export declare const useAgentAdapter: ({ transport, frontendTools, onToolInvoke, getStatusLabel, }: AgentAdapterConfig) => AgentAdapterReturn;
+//# sourceMappingURL=useAgentAdapter.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAgentAdapter.d.ts","sourceRoot":"","sources":["../../src/hooks/useAgentAdapter.ts"],"names":[],"mappings":"AASA,OAAO,EAGL,KAAK,kBAAkB,EACvB,KAAK,kBAAkB,EACxB,MAAM,qBAAqB,CAAC;AA2D7B,eAAO,MAAM,eAAe,GAAI,6DAK7B,kBAAkB,KAAG,kBAkRvB,CAAC"}

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

@@ -1 +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"}
+{"version":3,"file":"useCopilotSidecar.d.ts","sourceRoot":"","sources":["../../src/hooks/useCopilotSidecar.ts"],"names":[],"mappings":"AAQA,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"}