@liminalcash/nim-chat 0.1.0

package/README.md

@@ -0,0 +1,160 @@
+# @becomeliminal/nim-chat
+
+A React chat widget that connects to any nim SDK backend (Go, Python, etc).
+
+## Installation
+
+```bash
+npm install @becomeliminal/nim-chat
+```
+
+## Quick Start
+
+```tsx
+import { NimChat } from '@becomeliminal/nim-chat';
+import '@becomeliminal/nim-chat/styles.css';
+
+function App() {
+  return (
+    <NimChat
+      wsUrl="ws://localhost:8080/ws"
+      title="Nim"
+      position="bottom-right"
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `wsUrl` | `string` | **required** | WebSocket URL to connect to |
+| `title` | `string` | `"Nim"` | Header title in the chat panel |
+| `position` | `"bottom-right" \| "bottom-left"` | `"bottom-right"` | Widget position |
+| `defaultOpen` | `boolean` | `false` | Whether the panel starts open |
+
+## WebSocket Protocol
+
+The widget implements the nim SDK WebSocket protocol:
+
+### Client → Server
+
+| Type | Fields | Description |
+|------|--------|-------------|
+| `new_conversation` | - | Start a new conversation |
+| `resume_conversation` | `conversationId` | Resume existing conversation |
+| `message` | `content` | Send a user message |
+| `confirm` | `actionId` | Approve a pending action |
+| `cancel` | `actionId` | Cancel a pending action |
+
+### Server → Client
+
+| Type | Fields | Description |
+|------|--------|-------------|
+| `conversation_started` | `conversationId` | New conversation created |
+| `conversation_resumed` | `conversationId`, `messages[]` | Conversation restored |
+| `text_chunk` | `content` | Streaming text chunk |
+| `text` | `content` | Complete message |
+| `confirm_request` | `actionId`, `tool`, `summary`, `expiresAt` | Action requires approval |
+| `complete` | `tokenUsage?` | Turn completed |
+| `error` | `content` | Error occurred |
+
+## Advanced Usage
+
+### Custom Implementation
+
+You can use individual components and the hook for custom implementations:
+
+```tsx
+import {
+  ChatPanel,
+  ChatMessage,
+  ChatInput,
+  ConfirmationCard,
+  ThinkingIndicator,
+  useNimWebSocket,
+} from '@becomeliminal/nim-chat';
+import '@becomeliminal/nim-chat/styles.css';
+
+function CustomChat() {
+  const {
+    messages,
+    isStreaming,
+    connectionState,
+    confirmationRequest,
+    sendMessage,
+    confirmAction,
+    cancelAction,
+  } = useNimWebSocket({
+    wsUrl: 'ws://localhost:8080/ws',
+    onError: (error) => console.error(error),
+  });
+
+  // Build your own UI...
+}
+```
+
+### Theme Tokens
+
+Access design tokens for consistent styling:
+
+```tsx
+import { theme, colors, typography, spacing } from '@becomeliminal/nim-chat';
+
+// colors.orange = '#FF6D00'
+// colors.cream = '#F1EDE7'
+// etc.
+```
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start dev server with example
+npm run dev
+
+# Build for production
+npm run build
+
+# Type check
+npm run typecheck
+```
+
+## Testing with nim-go-sdk
+
+1. Start the nim-go-sdk example server:
+   ```bash
+   cd /path/to/nim-go-sdk/examples/basic
+   ANTHROPIC_API_KEY=your-key go run main.go
+   ```
+
+2. Run the nim-chat example:
+   ```bash
+   cd nim-chat
+   npm run dev
+   ```
+
+3. Open http://localhost:5173 and test:
+   - Click bubble → panel opens
+   - Send message → streaming response
+   - Trigger tool → confirmation card appears
+   - Approve/cancel → action executes or cancels
+   - Refresh → conversation resumes from localStorage
+
+## Design System
+
+Based on the Liminal mobile app design:
+
+- **Orange** `#FF6D00` - Primary, user bubbles, CTAs
+- **Cream** `#F1EDE7` - Background, assistant bubbles
+- **Blue** `#9BC1F3` - Focus states, interactive elements
+- **Black** `#231F18` - Primary text
+- **Brown** `#492610` - Secondary text
+- **Green** `#188A31` - Success, approval
+
+## License
+
+MIT

package/dist/NimChat.d.ts

@@ -0,0 +1,4 @@
+import { NimChatProps } from './types';
+
+export declare function NimChat({ wsUrl, apiUrl, title, position, defaultOpen, }: NimChatProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NimChat.d.ts.map

package/dist/NimChat.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NimChat.d.ts","sourceRoot":"","sources":["../src/NimChat.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,MAAmC,EACnC,KAAa,EACb,QAAyB,EACzB,WAAmB,GACpB,EAAE,YAAY,2CAqId"}

package/dist/components/ChatInput.d.ts

@@ -0,0 +1,8 @@
+interface ChatInputProps {
+    onSend: (message: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+}
+export declare function ChatInput({ onSend, disabled, placeholder, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatInput.d.ts","sourceRoot":"","sources":["../../src/components/ChatInput.tsx"],"names":[],"mappings":"AAEA,UAAU,cAAc;IACtB,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,QAAgB,EAChB,WAAiC,GAClC,EAAE,cAAc,2CA6EhB"}

package/dist/components/ChatMessage.d.ts

@@ -0,0 +1,8 @@
+import { Message } from '../types';
+
+interface ChatMessageProps {
+    message: Message;
+}
+export declare function ChatMessage({ message }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatMessage.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessage.d.ts","sourceRoot":"","sources":["../../src/components/ChatMessage.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AAExC,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAmCxD"}

package/dist/components/ChatPanel.d.ts

@@ -0,0 +1,17 @@
+import { Message, ConfirmationRequest, ConnectionState } from '../types';
+
+interface ChatPanelProps {
+    title: string;
+    messages: Message[];
+    isStreaming: boolean;
+    connectionState: ConnectionState;
+    confirmationRequest: ConfirmationRequest | null;
+    onSendMessage: (content: string) => void;
+    onConfirm: (actionId: string) => void;
+    onCancel: (actionId: string) => void;
+    onClose: () => void;
+    onLogout?: () => void;
+}
+export declare function ChatPanel({ title, messages, isStreaming, connectionState, confirmationRequest, onSendMessage, onConfirm, onCancel, onClose, onLogout, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ChatPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatPanel.d.ts","sourceRoot":"","sources":["../../src/components/ChatPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9E,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;IACjC,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,WAAW,EACX,eAAe,EACf,mBAAmB,EACnB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,EAAE,cAAc,2CAkIhB"}

package/dist/components/ConfirmationCard.d.ts

@@ -0,0 +1,10 @@
+import { ConfirmationRequest } from '../types';
+
+interface ConfirmationCardProps {
+    request: ConfirmationRequest;
+    onConfirm: (actionId: string) => void;
+    onCancel: (actionId: string) => void;
+}
+export declare function ConfirmationCard({ request, onConfirm, onCancel }: ConfirmationCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ConfirmationCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConfirmationCard.d.ts","sourceRoot":"","sources":["../../src/components/ConfirmationCard.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAEpD,UAAU,qBAAqB;IAC7B,OAAO,EAAE,mBAAmB,CAAC;IAC7B,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC;AAED,wBAAgB,gBAAgB,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,qBAAqB,2CAsGvF"}

package/dist/components/LoginPanel.d.ts

@@ -0,0 +1,7 @@
+interface LoginPanelProps {
+    onLoginSuccess: (jwt: string, userId: string) => void;
+    apiUrl?: string;
+}
+export declare function LoginPanel({ onLoginSuccess, apiUrl }: LoginPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=LoginPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LoginPanel.d.ts","sourceRoot":"","sources":["../../src/components/LoginPanel.tsx"],"names":[],"mappings":"AAEA,UAAU,eAAe;IACvB,cAAc,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,cAAc,EAAE,MAAmC,EAAE,EAAE,eAAe,2CA8JlG"}

package/dist/components/ThinkingIndicator.d.ts

@@ -0,0 +1,2 @@
+export declare function ThinkingIndicator(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ThinkingIndicator.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThinkingIndicator.d.ts","sourceRoot":"","sources":["../../src/components/ThinkingIndicator.tsx"],"names":[],"mappings":"AAAA,wBAAgB,iBAAiB,4CAQhC"}

package/dist/hooks/useNimWebSocket.d.ts

@@ -0,0 +1,20 @@
+import { Message, ConfirmationRequest, ConnectionState } from '../types';
+
+interface UseNimWebSocketOptions {
+    wsUrl: string;
+    jwt: string | null;
+    onError?: (error: string) => void;
+}
+interface UseNimWebSocketReturn {
+    messages: Message[];
+    isStreaming: boolean;
+    connectionState: ConnectionState;
+    confirmationRequest: ConfirmationRequest | null;
+    sendMessage: (content: string) => void;
+    confirmAction: (actionId: string) => void;
+    cancelAction: (actionId: string) => void;
+    reconnect: () => void;
+}
+export declare function useNimWebSocket({ wsUrl, jwt, onError, }: UseNimWebSocketOptions): UseNimWebSocketReturn;
+export {};
+//# sourceMappingURL=useNimWebSocket.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNimWebSocket.d.ts","sourceRoot":"","sources":["../../src/hooks/useNimWebSocket.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,OAAO,EAGP,mBAAmB,EACnB,eAAe,EAChB,MAAM,UAAU,CAAC;AAIlB,UAAU,sBAAsB;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC;AAED,UAAU,qBAAqB;IAC7B,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,eAAe,CAAC;IACjC,mBAAmB,EAAE,mBAAmB,GAAG,IAAI,CAAC;IAChD,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,eAAe,CAAC,EAC9B,KAAK,EACL,GAAG,EACH,OAAO,GACR,EAAE,sBAAsB,GAAG,qBAAqB,CAyUhD"}