mcp-chat-ui 1.0.1 → 1.0.2

package/README.md

@@ -19,13 +19,51 @@ npm install mcp-chat-ui
 
 ## Quick Start
 
+### For React Projects
+
 Import CSS 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):
 
 ```ts

package/dist/ChatUI.js

@@ -576,6 +576,8 @@ function ChatUI(props) {
     (0, react_1.useEffect)(() => {
         if (!apiBase || !apiKey || !sessionId)
             return;
+        if (!authToken || !initCompleted)
+            return;
         const controller = new AbortController();
         let cancelled = false;
         (() => __awaiter(this, void 0, void 0, function* () {
@@ -655,7 +657,7 @@ function ChatUI(props) {
             cancelled = true;
             controller.abort();
         };
-    }, [apiBase, apiKey, authToken, sessionId, domain]);
+    }, [apiBase, apiKey, authToken, sessionId, domain, initCompleted]);
     const canSend = (0, react_1.useMemo)(() => (!!input.trim() || selectedFiles.length > 0 || !!selectedTaskCard) &&
         !!sessionId &&
         !!apiBase &&
@@ -979,6 +981,10 @@ function ChatUI(props) {
     function sendMessage() {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
+            const selectedTask = selectedTaskCard;
+            if (selectedTask) {
+                setSelectedTaskCard(null);
+            }
             if (!sessionId)
                 return;
             if (!initCompleted) {
@@ -991,7 +997,7 @@ function ChatUI(props) {
             const promptText = input.trim();
             const hasText = !!promptText;
             const hasFiles = selectedFiles.length > 0;
-            const hasSelectedCard = !!selectedTaskCard;
+            const hasSelectedCard = !!selectedTask;
             if (!hasText && !hasFiles && !hasSelectedCard)
                 return;
             const filesToUpload = selectedFiles;
@@ -1000,7 +1006,7 @@ function ChatUI(props) {
             }));
             const selectionLine = hasSelectedCard
                 ? formatText(text.composer.selectionLineTemplate, {
-                    id: String((_a = selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== null && _a !== void 0 ? _a : ""),
+                    id: String((_a = selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== null && _a !== void 0 ? _a : ""),
                 })
                 : "";
             const userContent = selectionLine
@@ -1075,8 +1081,8 @@ function ChatUI(props) {
                     SessionId: sessionId,
                     UserMessage: userContent,
                 };
-                if ((selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== undefined && (selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== null) {
-                    payload.RequestId = selectedTaskCard.RequestId;
+                if ((selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== undefined && (selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== null) {
+                    payload.RequestId = selectedTask.RequestId;
                 }
                 if (initServiceId && initServiceId.trim() !== "") {
                     const n = Number(initServiceId);

package/dist/components/MessageItem.js

@@ -12,7 +12,7 @@ const classNames_1 = require("../utils/classNames");
 const format_1 = require("../utils/format");
 function MessageItem({ m, openOverlay, isRtl, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, canSpeak, isSpeaking, onSpeak, onStopSpeak, textButtonTheme, text, taskCardSize, }) {
     const isUser = m.role === "User";
-    const alignRight = isUser;
+    const alignRight = isUser || isRtl;
     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

package/dist/components/MessageList.js

@@ -15,5 +15,5 @@ function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectT
                                     !!m.content &&
                                     m.content.trim() !== "";
                                 return ((0, jsx_runtime_1.jsx)(MessageItem_1.default, { m: m, openOverlay: openOverlay, onOpenTaskCard: onOpenTaskCard, onSelectTaskCard: onSelectTaskCard, selectedTaskCardId: selectedTaskCardId, isRtl: isRtl, canSpeak: canSpeak, isSpeaking: canSpeak && speakingMessageIndex === i, onSpeak: canSpeak ? () => onSpeak(m.content, i) : undefined, onStopSpeak: canSpeak ? onStopSpeak : undefined, textButtonTheme: textButtonTheme, text: messageItemText, taskCardSize: taskCardSize }, `${(_a = m.ts) !== null && _a !== void 0 ? _a : i}-${i}`));
-                            }), pending && (0, jsx_runtime_1.jsx)(TypingDots_1.default, {}, "typing")] }) }), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef })] }) }));
+                            }), pending && (0, jsx_runtime_1.jsx)(TypingDots_1.default, { alignRight: isRtl }, "typing")] }) }), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef })] }) }));
 }

package/dist/components/TypingDots.d.ts

@@ -1 +1,5 @@
-export default function TypingDots(): import("react/jsx-runtime").JSX.Element;
+type TypingDotsProps = {
+    alignRight?: boolean;
+};
+export default function TypingDots({ alignRight }: TypingDotsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TypingDots.js

@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = TypingDots;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const framer_motion_1 = require("framer-motion");
-function TypingDots() {
-    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: "flex w-full justify-start", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-[1rem] leading-7 text-gray-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:0ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-1 inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:150ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-1 inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:300ms]" })] }) }));
+function TypingDots({ alignRight }) {
+    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: `flex w-full ${alignRight ? "justify-end" : "justify-start"}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "text-[1rem] leading-7 text-gray-900", children: [(0, jsx_runtime_1.jsx)("span", { className: "inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:0ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-1 inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:150ms]" }), (0, jsx_runtime_1.jsx)("span", { className: "ml-1 inline-block h-1.5 w-1.5 animate-bounce rounded-full bg-gray-400 [animation-delay:300ms]" })] }) }));
 }

package/dist/config.d.ts

@@ -168,6 +168,7 @@ export type ChatUISDKConfig = {
     showInitPanel?: boolean;
     initializeChat: boolean;
     contextWindow: string;
+    initializeLanguage?: string;
 };
 declare class SDKConfigStore {
     private settings;

package/dist/sdkUtilities.js

@@ -55,7 +55,7 @@ function GetConfigValue(key) {
 }
 function InitializeChatSession() {
     return __awaiter(this, arguments, void 0, function* (options = {}) {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d, _e, _f;
         const config = GetConfig();
         const apiBase = chatDefaults_1.DEFAULT_API_BASE;
         const apiKey = chatDefaults_1.DEFAULT_API_KEY;
@@ -79,10 +79,11 @@ function InitializeChatSession() {
         const defaultDomain = config.isDab ? chatDefaults_1.DEFAULT_DOMAIN : "";
         const domain = ((_c = options.domain) !== null && _c !== void 0 ? _c : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.domain, defaultDomain)).trim();
         const contextWindow = (_d = options.contextWindow) !== null && _d !== void 0 ? _d : config.contextWindow;
+        const initializeLanguage = ((_e = config.initializeLanguage) !== null && _e !== void 0 ? _e : "").trim() || "ar-JO";
         const bodyPayload = {
             Domain: domain,
             ContextWindow: contextWindow || "ComposeRequest",
-            InitializeLangauge: "ar-JO",
+            InitializeLangauge: initializeLanguage,
         };
         if (options.initServiceId !== undefined && options.initServiceId !== null) {
             const n = Number(options.initServiceId);
@@ -110,11 +111,11 @@ function InitializeChatSession() {
             try {
                 msg = yield initRes.text();
             }
-            catch (_f) { }
+            catch (_g) { }
             throw new Error(`initializeChat failed: ${initRes.status} ${initRes.statusText}${msg ? ` - ${msg}` : ""}`);
         }
         const initPayload = yield initRes.json().catch(() => ({}));
-        const resolvedSessionId = (_e = initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) !== null && _e !== void 0 ? _e : sessionId;
+        const resolvedSessionId = (_f = initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) !== null && _f !== void 0 ? _f : sessionId;
         if (initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) {
             localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, initPayload.SessionId);
         }

package/package.json

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