mcp-chat-ui 1.0.6 → 1.0.8

package/README.md

@@ -1,12 +1,16 @@
 # MCP Chat UI SDK
 
-A React UI SDK that bundles a full chat experience with speech (STT/TTS), file
-uploads, document viewing, and task actions.
+React UI SDK that bundles a full chat experience with:
+- Login/init panel + session management
+- HTTP chat (no streaming/WS)
+- Speech-to-text and text-to-speech (Azure Speech SDK)
+- File uploads (SAS-based)
+- Task cards, take-action workflow, and document preview
 
 ## Requirements
 
-- React 18+ or 19 and React DOM.
-- Node 18+ for build/demo workflows.
+- React 19 (peer dependency) and React DOM.
+- Node 18+ for build workflows.
 
 
 
@@ -19,52 +23,15 @@ npm install mcp-chat-ui
 
 ## Quick Start
 
-### For React Projects
-
-Import CSS in App.tsx
+Import styles once (e.g. in `App.tsx`):
 
 ```App.tsx
 import "mcp-chat-ui/styles.css";
 ```
 
-### For Angular Projects
-
-**Option 1: Import in global styles.css (Recommended)**
-
-Open your `src/styles.css` file and add this import at the top:
-
-```css
-@import "mcp-chat-ui/dist/styles.css";
-```
-
-**Option 2: Add to angular.json**
-
-If Option 1 doesn't work, add the CSS file to your `angular.json` configuration:
-
-```json
-{
-  "projects": {
-    "your-app-name": {
-      "architect": {
-        "build": {
-          "options": {
-            "styles": [
-              "src/styles.css",
-              "node_modules/mcp-chat-ui/dist/styles.css"
-            ]
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-**Important:** Do **not** import the CSS in TypeScript/component files for Angular projects. After making changes, restart your Angular dev server (`ng serve`).
-
 ### Initialize the SDK
 
-Initialize the SDK (required):
+Initialize the SDK before rendering `ChatUI`:
 
 ```ts
 import { Init } from "mcp-chat-ui";
@@ -78,6 +45,7 @@ const initConfig = {
   initializeChat: false,
   showInitPanel: true,
   contextWindow: "ComposeRequest",
+  initializeLanguage: "ar-JO",
   initializeMessage: "",
 };
 
@@ -123,9 +91,11 @@ If `sessionId` is omitted, the SDK uses the stored session ID.
 
 ## Service Base URL
 
-- Provide `baseUrl` and the SDK derives RequestStep, TransactionCatalog, Storage,
-  Signature, and the login endpoint from it.
-- Provide `apiSubscriptionKey` for APIM calls to those services.
+- `baseUrl` drives the RequestStep, TransactionCatalog, Storage, Signature, and
+  login endpoints used by the UI.
+- `apiSubscriptionKey` is sent to those service calls.
+- Chat initialization, chat messaging, and session finalization use the built-in
+  MCP gateway base URL and API key (not `baseUrl`).
 
 ## Initialize (Login) Flow
 
@@ -139,6 +109,21 @@ If `sessionId` is omitted, the SDK uses the stored session ID.
 - If `initializeChat` is `false`, the chat waits until the user initializes from
   the login panel.
 
+## Token & Cache Notes
+
+- Tokens are normalized to the `Bearer <token>` format; if you pass a raw token it will be prefixed automatically.
+- The current auth token is stored in `localStorage` under `chat.authToken`.
+- Supplying a new `token` prop replaces the stored token.
+- When the token changes (detected during init), the SDK resets local state and clears cached data:
+  - `chat.msgs.*` (message history per session)
+  - `chat.initCompleted.*` (per-session init flags)
+  - `chat.serviceBaseUrl`, `chat.apiSubscriptionKey`, `chat.loginSubscriptionKey`
+  - `chat.sessionId`, `chat.authToken`, `chat.contextWindow`, `chat.initUsername`, `chat.domain`
+  - `speech.lang`, `speech.ttsLang`
+  - A new `sessionId` is generated and stored.
+- Logout calls `FinalizeSession` and clears local messages and session state.
+- Calling `FinalizeSession()` directly clears the same local storage keys and prefixes listed above.
+
 ## Login From The UI
 
 The SDK ships a Login panel (enabled by default). Click **Login** in
@@ -158,9 +143,29 @@ To auto-initialize on load:
 Init({ ...initConfig, initializeChat: true });
 ```
 
-## Configuration Reference
+## API Reference
 
-Init (global):
+### Methods
+
+```ts
+import {
+  Init,
+  GetConfig,
+  InitializeChatClients,
+  FinalizeSession,
+} from "mcp-chat-ui";
+```
+
+- `Init(config)` (required): stores SDK config; must be called before rendering `ChatUI`.
+- `GetConfig()`: returns the last config passed to `Init`.
+- `InitializeChatClients(options?)`: runs `/api/initializeChatClients` against the
+  built-in MCP gateway. Options: `{ domain?, token? }`.
+- `FinalizeSession(options?)`: calls `/api/deleteSessionContext` against the
+  built-in MCP gateway and clears SDK local storage. Options: `{ domain?, token?, sessionId? }`.
+
+### Configuration
+
+Init config (`ChatUISDKConfig`):
 - `baseUrl` (required): base URL for RequestStep/TransactionCatalog/Storage/Signature/login.
 - `apiSubscriptionKey` (required): subscription key for the base URL.
 - `loginSubscriptionKey` (required): login endpoint subscription key.
@@ -169,16 +174,18 @@ Init (global):
 - `showInitPanel` (optional, default `true`)
 - `initializeChat` (required)
 - `contextWindow` (required)
+- `initializeLanguage` (optional): locale sent to `initializeChat` (defaults to `ar-JO`).
 - `initializeMessage` (optional): initial message passed to `initializeChat`.
 
-ChatUI props (view):
+ChatUI props (`ChatUIProps`):
 - `initServiceId`, `initRequestStepId`
 - `contextWindow`, `domain`, `token`, `initializeMessage`
 - `initPresets`: optional `{ requester, provider }` credentials used to prefill the preset buttons.
+- `initialInitPreset`: `"requester" | "provider" | "custom"` (default `custom`).
 - `speechRegion`, `speechKey`
-- `speechLanguage` (transcription)
-- `ttsLanguage`
-- `ttsVoiceMap`
+- `speechLanguage` or `speechLang` (transcription)
+- `ttsLanguage` or `ttsLang`
+- `ttsVoiceMap`: map of locale to Azure voice name.
 - `theme`: see tokens below.
 - `fonts`: `{ base, heading, mono }`.
 - `text`: UI strings (login panel text is fixed and not configurable).
@@ -344,13 +351,22 @@ Errors:
 - `errors.takeActionMissingSignature`
 - `errors.takeActionNoDocument`
 
-## Demo App (repo only)
+## Text Direction (LTR/RTL)
 
-```bash
-cd demo
-npm install
-npm run dev
-```
+Chat layout direction is derived from language settings:
+
+- **Chat layout direction** (message alignment, list layout) is based on the
+  transcription language. Set `speechLanguage` or `speechLang` to an RTL locale
+  (for example `ar`, `he`, `fa`, `ur`, `ps`, `dv`, `ku`, `ug`, `yi`) to render the
+  chat in RTL.
+- **Composer input direction** is auto-detected per input:
+  - Uses the first strong RTL/LTR character you type.
+  - Falls back to keyboard layout detection when available (`navigator.keyboard.getLayoutMap()`).
+  - Falls back to the browser locale (`navigator.language`) if no direction is detected.
+
+There is no explicit prop to force RTL/LTR; use `speechLanguage`/`speechLang` for
+chat layout direction and type an RTL character (or switch keyboard/layout) to
+flip the composer input direction.
 
 ## Build
 

package/dist/ChatUI.js

@@ -1964,7 +1964,7 @@ function ChatUI(props) {
                                     ? "Initializing chat..."
                                     : initGateError || "Initializing chat..." }), !initGateLoading && initGateError && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: `mt-4 inline-flex items-center justify-center rounded-full px-4 py-2 text-sm font-medium ${textButtonTheme}`, onClick: handleInitRetry, children: "Retry" }))] }) })] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "chatui-root flex min-h-screen min-h-[100dvh] w-full flex-col", style: themeVars, children: [(0, jsx_runtime_1.jsx)("style", { children: chatDefaults_1.CHATUI_THEME_CSS }), (0, jsx_runtime_1.jsx)(TopBar_1.default, { sessionId: sessionId, authToken: authToken, onClearChat: clearChat, onLogout: doLogout, onInitOpen: () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "chatui-root flex h-full w-full flex-col", style: themeVars, children: [(0, jsx_runtime_1.jsx)("style", { children: chatDefaults_1.CHATUI_THEME_CSS }), (0, jsx_runtime_1.jsx)(TopBar_1.default, { sessionId: sessionId, authToken: authToken, onClearChat: clearChat, onLogout: doLogout, onInitOpen: () => {
                     if (initPanelEnabled) {
                         setShowInitPanel(true);
                     }

package/dist/components/MessageItem.js

@@ -10,17 +10,21 @@ const lu_1 = require("react-icons/lu");
 const FormattedText_1 = __importDefault(require("./FormattedText"));
 const classNames_1 = require("../utils/classNames");
 const format_1 = require("../utils/format");
+const textDirection_1 = require("../utils/textDirection");
 function MessageItem({ m, openOverlay, isRtl, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, canSpeak, isSpeaking, onSpeak, onStopSpeak, textButtonTheme, text, taskCardSize, }) {
+    var _a, _b;
     const isUser = m.role === "User";
-    const alignRight = isUser || isRtl;
+    const messageDirection = (_b = (0, textDirection_1.getTextDirection)((_a = m.content) !== null && _a !== void 0 ? _a : "")) !== null && _b !== void 0 ? _b : (isRtl ? "rtl" : "ltr");
+    const isMessageRtl = messageDirection === "rtl";
+    const alignRight = isUser || isMessageRtl;
     return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 6 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -6 }, transition: { duration: 0.18 }, className: (0, classNames_1.classNames)("flex w-full", alignRight ? "justify-end" : "justify-start"), children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)("max-w-[85%]", isUser ? "" : "w-full"), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classNames_1.classNames)(isUser
                         ? "rounded-2xl px-4 py-3 shadow-sm"
-                        : "px-1 py-0"), style: Object.assign({ direction: isRtl ? "rtl" : "ltr", textAlign: isRtl ? "right" : "left" }, (isUser
+                        : "px-1 py-0"), style: Object.assign({ direction: messageDirection, textAlign: isMessageRtl ? "right" : "left" }, (isUser
                         ? {
                             backgroundColor: "var(--chat-user-message-bg)",
                             color: "var(--chat-user-message-text)",
                         }
-                        : {})), children: [m.attachments && m.attachments.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)("mb-2 flex flex-wrap gap-2", isRtl ? "justify-end" : "justify-start"), children: m.attachments.map((att, idx) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-white/70 px-3 py-1 text-xs text-gray-800", children: [(0, jsx_runtime_1.jsx)(lu_1.LuPaperclip, { className: "h-3 w-3" }), " ", att.name] }, idx))) })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: (0, jsx_runtime_1.jsx)(FormattedText_1.default, { text: m.content, onOpen: openOverlay, isRtl: isRtl, buttonClassName: textButtonTheme, linkButtonLabel: text.linkButtonLabel }) }), !isUser && m.availableTasksCards && m.availableTasksCards.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("div", { className: "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2", children: m.availableTasksCards.map((card, idx) => {
+                        : {})), children: [m.attachments && m.attachments.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: (0, classNames_1.classNames)("mb-2 flex flex-wrap gap-2", isMessageRtl ? "justify-end" : "justify-start"), children: m.attachments.map((att, idx) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-white/70 px-3 py-1 text-xs text-gray-800", children: [(0, jsx_runtime_1.jsx)(lu_1.LuPaperclip, { className: "h-3 w-3" }), " ", att.name] }, idx))) })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: (0, jsx_runtime_1.jsx)(FormattedText_1.default, { text: m.content, onOpen: openOverlay, isRtl: isRtl, buttonClassName: textButtonTheme, linkButtonLabel: text.linkButtonLabel }) }), !isUser && m.availableTasksCards && m.availableTasksCards.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3", children: (0, jsx_runtime_1.jsx)("div", { className: "flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2", children: m.availableTasksCards.map((card, idx) => {
                                     var _a, _b, _c, _d, _e, _f, _g;
                                     const requestSummary = (_b = (_a = card === null || card === void 0 ? void 0 : card.Details) === null || _a === void 0 ? void 0 : _a.RequestSummary) !== null && _b !== void 0 ? _b : "";
                                     const preview = String(requestSummary).slice(0, 125);

package/dist/styles.css

@@ -709,15 +709,9 @@ video {
 .min-h-0 {
   min-height: 0px;
 }
-.min-h-\[100dvh\] {
-  min-height: 100dvh;
-}
 .min-h-\[110px\] {
   min-height: 110px;
 }
-.min-h-screen {
-  min-height: 100vh;
-}
 .w-1\.5 {
   width: 0.375rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-chat-ui",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "React Chat UI SDK with speech, file upload, and task actions.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",