translation-chat-sdk 0.1.6 → 0.1.7

package/README.md

@@ -1,26 +1,71 @@
 # Translation Chat SDK (React)
 
-React-first SDK for embedding Translation Studio chat in web apps. Ships ESM/CJS/UMD bundles, types, and a minimal widget.
+React-first SDK for the Translation Studio chat/patch experience. Ships as a Vite-built library (ESM + CJS + UMD) with type-safe hooks, a provider, and a ready-to-use `ChatWidget`.
 
 ## Features
+- React Provider + `useChat` hook, no window listeners.
+- Socket.io transport with token provider + context provider.
+- Patch offer accumulation with callback and state exposure.
+- Simple ChatWidget UI with streaming indicators.
+- Build outputs for npm + CDN (jsDelivr-ready `translation-chat-sdk.umd.js`).
 
-- React Provider + `useChat` hook (no window listeners)
-- Socket.io transport with token provider + context provider
-- Patch offer accumulation with callback and state exposure
-- Simple ChatWidget UI with streaming indicators
-- Build outputs for npm + CDN (jsDelivr-ready UMD)
+## Usage
+```bash
+npm install
+npm run build
+```
 
-## Installation
+Add to a React app:
+```tsx
+import { ChatProvider, ChatWidget } from 'translation-chat-sdk';
+
+<ChatProvider
+  config={{
+    websocketUrl: process.env.NEXT_PUBLIC_WEBSOCKET_URL!,
+    contextProvider: () => ({
+      trans_doc_id: currentDocId,
+      page_num: currentPage,
+      highlighted_region: selection
+    }),
+    tokenProvider: () => fetch('/api/auth/token', { credentials: 'include' })
+      .then(res => res.ok ? res.json() : null)
+      .then(data => data?.access_token ?? null),
+    onPatchOffer: (offer) => console.log('patch ready', offer)
+  }}
+>
+  <ChatWidget />
+</ChatProvider>
+```
+
+## Local linking to `sarvam-studio-frontend`
+1. From this repo: `npm install && npm run build`.
+2. In `sarvam-studio-frontend/package.json`, set `"translation-chat-sdk": "file:../translation-chat-sdk"`.
+3. Run `npm install` in `sarvam-studio-frontend`.
+4. `npm run dev` and import from `translation-chat-sdk`.
+
+## CDN build
+After `npm run build`, publish `dist/translation-chat-sdk.umd.js` to a CDN (e.g., jsDelivr from a git tag). Consumers can `import('https://cdn.../translation-chat-sdk.umd.js')`.
+## Translation Chat SDK (React)
+
+React-first SDK for embedding Translation Studio chat in web apps. Ships ESM/CJS/UMD bundles, types, and a minimal widget.
+
+### Install (local)
 
 ```bash
-npm install translation-chat-sdk
+npm install
+npm run build
 ```
 
-## Usage
+Add to a consumer app (local path):
+
+```bash
+npm install ../translation-chat-sdk
+```
+
+### Usage
 
 ```tsx
 import { ChatProvider, ChatWidget } from 'translation-chat-sdk';
-import 'translation-chat-sdk/style.css'; // Import styles
 
 function App() {
   return (
@@ -29,161 +74,35 @@ function App() {
         websocketUrl: process.env.NEXT_PUBLIC_WEBSOCKET_URL!,
         contextProvider: () => ({
           trans_doc_id: 'doc-123',
-          page_num: 1,
-          highlighted_region: selection // optional
+          page_num: 1
         }),
         tokenProvider: async () => {
           const res = await fetch('/api/auth/token', { credentials: 'include' });
           if (!res.ok) return null;
           const { access_token } = await res.json();
           return access_token;
-        },
-        onPatchOffer: (offer) => {
-          console.log('Patch ready:', offer);
         }
       }}
     >
-      <ChatWidget height="520px" />
+      <ChatWidget height={520} />
     </ChatProvider>
   );
 }
 ```
 
-## API
-
-### `<ChatProvider config={...}>`
-
-Wraps your app and provides chat context.
-
-#### Config Options
-
-| Property | Type | Required | Description |
-|----------|------|----------|-------------|
-| `websocketUrl` | `string` | ✅ | WebSocket server URL |
-| `contextProvider` | `() => InstructionContext \| null` | ✅ | Returns current document context |
-| `tokenProvider` | `() => Promise<string \| null>` | ❌ | Async function to get auth token |
-| `onPatchOffer` | `(offer: PatchOfferEventDetail) => void` | ❌ | Callback when patch suggestion is ready |
-| `onPageTranslationResponse` | `(payload) => void` | ❌ | Callback for page translation responses |
-| `onBulkTranslationResponse` | `(payload) => void` | ❌ | Callback for bulk translation responses |
-| `onConnectionChange` | `(state: ConnectionState) => void` | ❌ | Connection state change callback |
-| `reconnectAttempts` | `number` | ❌ | Max reconnection attempts (default: 5) |
-| `reconnectDelayMs` | `number` | ❌ | Delay between reconnects (default: 1500) |
-| `logger` | `Console` | ❌ | Custom logger |
-
-### `<ChatWidget />`
-
-Pre-built chat UI component.
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `title` | `string` | `"AI Assistance"` | Header title |
-| `placeholder` | `string` | `"Ask anything..."` | Input placeholder |
-| `height` | `string` | `"420px"` | Widget height |
-
-### `useChat()`
-
-Hook to access chat state and actions.
-
-```tsx
-const {
-  // State
-  messages,          // ChatMessage[]
-  connection,        // { connected, connecting, error? }
-  latestPatchOffer,  // PatchOfferEventDetail | null
-  isSubmitting,      // boolean
-  
-  // Actions
-  submitInstruction,           // (instruction: string) => Promise<void>
-  submitInstructionWithContext,// (instruction, context) => Promise<void>
-  requestChatHistory,          // () => Promise<void>
-  sendPatchDecision,           // (transDocId, pageNum, instrId, 'accept'|'reject') => Promise<void>
-  requestPageTranslation,      // (transDocId, pageNum) => Promise<boolean>
-  requestBulkTranslation,      // (transDocId, pageList?) => Promise<boolean>
-  cancelBulkTranslation,       // (transDocId) => Promise<boolean>
-  clearMessages,               // () => void
-} = useChat();
-```
-
-## Types
-
-```typescript
-type InstructionContext = {
-  trans_doc_id: string;
-  page_num: number;
-  highlighted_region?: {
-    start_offset: number;
-    end_offset: number;
-    text: string;
-  };
-  selection_id?: string;
-};
-
-type ChatMessage = {
-  id: string;
-  type: 'user' | 'ai-chat' | 'ai-patch' | 'system' | 'loading' | 'error';
-  content: string;
-  timestamp: Date;
-  instructionId?: string;
-  pageNum?: number;
-  patchData?: PatchData;
-  isStreaming?: boolean;
-  contextText?: string;
-};
-
-type PatchOfferEventDetail = {
-  trans_doc_id: string;
-  page_num: number;
-  instruction_id: string;
-  original_text: string;
-  highlighted_region?: { start_offset: number; end_offset: number };
-  new_suggestion: string;
-  is_page_level: boolean;
-  selection_id?: string;
-};
-```
-
-## CDN Usage
+### CDN / jsDelivr
 
-After publishing to npm, use via jsDelivr:
+Build generates `dist/translation-chat-sdk.umd.js`. Publish to npm and load via:
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/translation-chat-sdk/dist/translation-chat-sdk.umd.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/translation-chat-sdk/dist/style.css">
-<script>
-  const { ChatProvider, ChatWidget, useChat } = TranslationChatSDK;
-</script>
 ```
 
-## Local Development
+Globals exposed: `TranslationChatSDK.ChatProvider`, `TranslationChatSDK.ChatWidget`, `TranslationChatSDK.useChat`.
 
-```bash
-# Install dependencies
-npm install
-
-# Run dev server
-npm run dev
-
-# Build library
-npm run build
-
-# Type check
-npm run typecheck
-```
-
-## Local Linking
-
-For development with `sarvam-studio-frontend`:
-
-1. Build the SDK: `npm run build`
-2. In frontend `package.json`: `"translation-chat-sdk": "file:../translation-chat-sdk"`
-3. Run `npm install` in the frontend
-4. Start dev server
-
-**Note**: After rebuilding the SDK, you may need to remove duplicate React from the SDK's node_modules:
-```bash
-rm -rf node_modules/react node_modules/react-dom
-```
+### Scripts
 
-## License
+- `npm run dev` — local playground via Vite
+- `npm run build` — library build (ESM/CJS/UMD + d.ts)
+- `npm run preview` — preview build
 
-MIT

package/dist/components/ChatWidget.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
-import { ChatWidgetHandle } from '../types';
 import '../styles/chat.css';
 type Props = {
     title?: string;
     placeholder?: string;
     height?: string;
 };
-export declare const ChatWidget: React.ForwardRefExoticComponent<Props & React.RefAttributes<ChatWidgetHandle>>;
+export declare function ChatWidget({ title, placeholder, height }: Props): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-export type { ChatSDKConfig, ChatMessage, PatchOfferEventDetail, PageTranslationResponseEventDetail, BulkTranslationResponseEventDetail, ConnectionState, InstructionContext, HighlightedRegion, ChatContextValue, ChatState, ChatActions, ContextProvider, TokenProvider, PatchData, HistoryMessage, SelectedContext, ChatWidgetHandle, } from './types';
+export * from './types';
 export { ChatProvider } from './provider/ChatProvider';
 export { useChat } from './hooks/useChat';
 export { ChatWidget } from './components/ChatWidget';
+export { default as style } from './styles/chat.css?inline';