@usecrow/ui 0.1.0

package/README.md

@@ -0,0 +1,202 @@
+# @usecrow/ui
+
+React components for [Crow](https://usecrow.ai) AI agents. Includes floating widget and copilot sidebar components built on top of `@usecrow/client`.
+
+## Installation
+
+```bash
+npm install @usecrow/client @usecrow/ui
+```
+
+## Quick Start
+
+### Floating Widget
+
+Add a floating chat bubble to any React app:
+
+```tsx
+import { CrowWidget } from '@usecrow/ui';
+import '@usecrow/ui/styles.css';
+
+function App() {
+  return (
+    <>
+      <YourApp />
+      <CrowWidget 
+        productId="YOUR_PRODUCT_ID" 
+        apiUrl="https://api.usecrow.org"
+        agentName="Support Bot"
+      />
+    </>
+  );
+}
+```
+
+### Copilot Sidebar
+
+Add a sidebar chat panel:
+
+```tsx
+import { CrowProvider, CrowCopilot } from '@usecrow/ui';
+import '@usecrow/ui/styles.css';
+
+function App() {
+  return (
+    <CrowProvider productId="YOUR_PRODUCT_ID" apiUrl="https://api.usecrow.org">
+      <div className="flex h-screen">
+        <main className="flex-1">
+          <YourApp />
+        </main>
+        <CrowCopilot position="right" width={400} />
+      </div>
+    </CrowProvider>
+  );
+}
+```
+
+## Components
+
+### `<CrowWidget />`
+
+Floating bottom-right chat bubble. Can work standalone or within `CrowProvider`.
+
+```tsx
+<CrowWidget
+  productId="YOUR_PRODUCT_ID"
+  apiUrl="https://api.usecrow.org"
+  agentName="Assistant"
+  defaultCollapsed={true}
+  tools={{
+    addToCart: async ({ productId }) => ({ status: 'success' })
+  }}
+  onIdentify={(identify) => {
+    // Call identify() with JWT when user logs in
+    identify({ token: 'jwt-from-backend', name: 'John' });
+  }}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `productId` | `string` | Required | Your Crow product ID |
+| `apiUrl` | `string` | `https://api.usecrow.org` | API URL |
+| `agentName` | `string` | `"Assistant"` | Name shown in header |
+| `defaultCollapsed` | `boolean` | `true` | Initial collapsed state |
+| `tools` | `ToolHandlers` | - | Client-side tool handlers |
+| `onIdentify` | `function` | - | Callback to handle user identification |
+| `className` | `string` | - | Custom CSS class |
+| `zIndex` | `number` | `999999` | Z-index for widget |
+
+### `<CrowCopilot />`
+
+Sidebar chat panel. Best used with `CrowProvider` to share state.
+
+```tsx
+<CrowCopilot
+  title="Copilot"
+  position="right"
+  width={400}
+  showClose={true}
+  onClose={() => setShowCopilot(false)}
+/>
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `productId` | `string` | - | Product ID (if not using Provider) |
+| `apiUrl` | `string` | - | API URL (if not using Provider) |
+| `title` | `string` | `"Copilot"` | Header title |
+| `position` | `'left' \| 'right'` | `'right'` | Sidebar position |
+| `width` | `number \| string` | `400` | Sidebar width |
+| `showClose` | `boolean` | `false` | Show close button |
+| `onClose` | `function` | - | Close button callback |
+| `tools` | `ToolHandlers` | - | Client-side tool handlers |
+
+### `<CrowProvider />`
+
+Context provider for sharing a single `CrowClient` instance:
+
+```tsx
+<CrowProvider productId="..." apiUrl="...">
+  <YourApp />
+  <CrowCopilot />
+</CrowProvider>
+```
+
+## Hooks
+
+### `useCrowClient()`
+
+Access the `CrowClient` from context:
+
+```tsx
+import { useCrowClient } from '@usecrow/ui';
+
+function MyComponent() {
+  const client = useCrowClient();
+  
+  const handleLogin = () => {
+    client.identify({ token: 'jwt', name: 'John' });
+  };
+}
+```
+
+### `useChat()`
+
+React hook for chat state:
+
+```tsx
+import { useChat, useCrowClient } from '@usecrow/ui';
+
+function CustomChat() {
+  const client = useCrowClient();
+  const { messages, isLoading, sendMessage, stop } = useChat({ client });
+  
+  return (
+    <div>
+      {messages.map(msg => <div key={msg.id}>{msg.content}</div>)}
+      <button onClick={() => sendMessage('Hello!')}>Send</button>
+    </div>
+  );
+}
+```
+
+## Building Custom UIs
+
+Export individual components for building custom interfaces:
+
+```tsx
+import {
+  MessageList,
+  MessageBubble,
+  PromptInput,
+  ChatBubble,
+  WidgetHeader,
+} from '@usecrow/ui';
+```
+
+## Styling
+
+Import the default styles:
+
+```tsx
+import '@usecrow/ui/styles.css';
+```
+
+All classes are prefixed with `crow-` to avoid conflicts. Customize with CSS variables:
+
+```css
+:root {
+  --crow-primary: #6366f1;
+  --crow-primary-dark: #4f46e5;
+}
+```
+
+## License
+
+MIT
+