Translation Chat SDK (React)

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).

Usage

npm install
npm run build

Add to a React app:

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)

npm install
npm run build

Add to a consumer app (local path):

npm install ../translation-chat-sdk

Usage

import { ChatProvider, ChatWidget } from 'translation-chat-sdk';

function App() {
  return (
    <ChatProvider
      config={{
        websocketUrl: process.env.NEXT_PUBLIC_WEBSOCKET_URL!,
        contextProvider: () => ({
          trans_doc_id: 'doc-123',
          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;
        }
      }}
    >
      <ChatWidget height={520} />
    </ChatProvider>
  );
}

CDN / jsDelivr

Build generates dist/translation-chat-sdk.umd.js. Publish to npm and load via:

<script src="https://cdn.jsdelivr.net/npm/translation-chat-sdk/dist/translation-chat-sdk.umd.js"></script>

Globals exposed: TranslationChatSDK.ChatProvider, TranslationChatSDK.ChatWidget, TranslationChatSDK.useChat.

Scripts

• npm run dev — local playground via Vite
• npm run build — library build (ESM/CJS/UMD + d.ts)
• npm run preview — preview build