mcp-chat-ui 1.0.3 → 1.0.5

package/README.md

@@ -78,6 +78,7 @@ const initConfig = {
   initializeChat: false,
   showInitPanel: true,
   contextWindow: "ComposeRequest",
+  initializeMessage: "",
 };
 
 Init(initConfig);
@@ -115,19 +116,10 @@ import { FinalizeSession } from "mcp-chat-ui";
 await FinalizeSession({
   domain: "dab.ae",
   token: "Bearer <token>",
+  sessionId: "<session-id>",
 });
 ```
-
-Initialize a session with service/request IDs (one-time per session):
-
-```ts
-import { InitializeChatSession } from "mcp-chat-ui";
-
-await InitializeChatSession({
-  initServiceId: 1001,
-  initRequestStepId: 2001,
-});
-```
+If `sessionId` is omitted, the SDK uses the stored session ID.
 
 ## Service Base URL
 
@@ -141,13 +133,11 @@ await InitializeChatSession({
 - `apiSubscriptionKey` is sent to the login endpoint (or override with `loginSubscriptionKey`).
 - `token` is required in `Init` (use an empty string if you plan to sign in via the
   panel and let it set the token).
-- `initializeChat: true` triggers the init flow on load and calls
-  `initializeChatClients` only (cache setup).
-- `InitializeChatSession` calls `initializeChat` only. Messages are blocked until
-  it runs once per session.
-- The login panel runs `initializeChatClients` followed by `InitializeChatSession`.
-- If `initializeChat` is `false`, call `InitializeChatSession` manually after
-  login (or before rendering the view) to enable messaging.
+- `initializeChat: true` triggers `initializeChat` in `ChatUI` before the chat
+  renders (shows a loading state with retry).
+- The login panel runs `initializeChatClients` followed by `initializeChat`.
+- If `initializeChat` is `false`, the chat waits until the user initializes from
+  the login panel.
 
 ## Login From The UI
 
@@ -179,9 +169,11 @@ Init (global):
 - `showInitPanel` (optional, default `true`)
 - `initializeChat` (required)
 - `contextWindow` (required)
+- `initializeMessage` (optional): initial message passed to `initializeChat`.
 
 ChatUI props (view):
 - `initServiceId`, `initRequestStepId`
+- `contextWindow`, `domain`, `token`, `initializeMessage`
 - `initPresets`: optional `{ requester, provider }` credentials used to prefill the preset buttons.
 - `speechRegion`, `speechKey`
 - `speechLanguage` (transcription)
@@ -191,6 +183,8 @@ ChatUI props (view):
 - `fonts`: `{ base, heading, mono }`.
 - `text`: UI strings (login panel text is fixed and not configurable).
 - `taskCardSize`: `{ width?: number; height?: number }` for task cards in the chat list.
+- `onRequestAdded`: called when `AddRequestToolResult` is a non-empty object.
+- `onRequestProcessed`: called when `ProcessRequestToolResult` is a non-empty object.
 
 ## Theme Tokens
 

package/dist/ChatUI.js

@@ -87,6 +87,11 @@ const formatText = (template, values) => template.replace(/\{(\w+)\}/g, (_, key)
     const value = values[key];
     return value === undefined ? "" : String(value);
 });
+const isNonEmptyObject = (value) => {
+    if (!value || typeof value !== "object" || Array.isArray(value))
+        return false;
+    return Object.keys(value).length > 0;
+};
 function normalizeTheme(theme) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
     return {
@@ -130,7 +135,7 @@ function normalizeTheme(theme) {
     };
 }
 function ChatUI(props) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     const sdkConfig = (0, sdkUtilities_1.GetConfig)();
     const theme = (0, react_1.useMemo)(() => {
         var _a;
@@ -199,7 +204,7 @@ function ChatUI(props) {
     const normalizeServiceBaseUrl = (value) => (value !== null && value !== void 0 ? value : "").trim().replace(/\/+$/, "");
     const [isDab, setIsDab] = (0, react_1.useState)(() => { var _a; return (_a = sdkConfig.isDab) !== null && _a !== void 0 ? _a : false; });
     const defaultDomain = isDab ? chatDefaults_1.DEFAULT_DOMAIN : "";
-    const [domain, setDomain] = (0, react_1.useState)(() => defaultDomain);
+    const [domain, setDomain] = (0, react_1.useState)(() => { var _a; return ((_a = props.domain) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.domain, defaultDomain)).trim(); });
     const [serviceBaseUrl, setServiceBaseUrl] = (0, react_1.useState)(() => {
         var _a;
         return normalizeServiceBaseUrl((_a = sdkConfig.baseUrl) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.serviceBaseUrl, chatDefaults_1.DEFAULT_SERVICE_BASE_URL));
@@ -248,22 +253,41 @@ function ChatUI(props) {
     const speechRegion = (_a = props.speechRegion) !== null && _a !== void 0 ? _a : chatDefaults_1.DEFAULT_SPEECH_REGION;
     const speechKey = (_b = props.speechKey) !== null && _b !== void 0 ? _b : chatDefaults_1.DEFAULT_SPEECH_KEY;
     const initializeChatOnLoad = (_c = sdkConfig.initializeChat) !== null && _c !== void 0 ? _c : false;
-    const initPanelEnabled = (_d = sdkConfig.showInitPanel) !== null && _d !== void 0 ? _d : true;
+    const initializeLanguage = ((_d = sdkConfig.initializeLanguage) !== null && _d !== void 0 ? _d : "").trim() || "ar-JO";
+    const initializeMessage = ((_f = (_e = props.initializeMessage) !== null && _e !== void 0 ? _e : sdkConfig.initializeMessage) !== null && _f !== void 0 ? _f : "")
+        .trim();
+    const initPanelEnabled = (_g = sdkConfig.showInitPanel) !== null && _g !== void 0 ? _g : true;
     // Connection / auth
     const apiBase = chatDefaults_1.DEFAULT_API_BASE;
     const apiKey = chatDefaults_1.DEFAULT_API_KEY;
-    const [authToken, setAuthToken] = (0, react_1.useState)(() => { var _a; return normalizeAuthToken((_a = sdkConfig.token) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, "")); });
+    const [authToken, setAuthToken] = (0, react_1.useState)(() => {
+        var _a, _b;
+        return normalizeAuthToken((_b = (_a = props.token) !== null && _a !== void 0 ? _a : sdkConfig.token) !== null && _b !== void 0 ? _b : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, ""));
+    });
+    const lastStoredAuthTokenRef = (0, react_1.useRef)(normalizeAuthToken(localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, "")));
+    const tokenChangedRef = (0, react_1.useRef)(false);
     const [sessionId, setSessionId] = (0, react_1.useState)(() => localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.sessionId, (0, generateGuid_1.generateGuid)()));
     const [initCompleted, setInitCompleted] = (0, react_1.useState)(() => localStorage_1.ls.get((0, storageKeys_1.getInitCompletedKey)(sessionId), false));
-    (0, react_1.useEffect)(() => localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, authToken), [authToken]);
+    (0, react_1.useEffect)(() => {
+        if (props.token !== undefined) {
+            setAuthToken(normalizeAuthToken(props.token));
+        }
+    }, [props.token]);
+    (0, react_1.useEffect)(() => {
+        const normalized = normalizeAuthToken(authToken);
+        const prevStored = lastStoredAuthTokenRef.current;
+        tokenChangedRef.current = !!normalized && normalized !== prevStored;
+        localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, normalized);
+        lastStoredAuthTokenRef.current = normalized;
+    }, [authToken]);
     (0, react_1.useEffect)(() => localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, sessionId), [sessionId]);
     (0, react_1.useEffect)(() => {
         setInitCompleted(localStorage_1.ls.get((0, storageKeys_1.getInitCompletedKey)(sessionId), false));
     }, [sessionId]);
     // context window selection (used for initializeChat and WS messages)
     const [contextWindow, setContextWindow] = (0, react_1.useState)(() => {
-        var _a;
-        return (_a = sdkConfig.contextWindow) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.contextWindow, chatDefaults_1.DEFAULT_CONTEXT_WINDOW);
+        var _a, _b;
+        return (_b = (_a = props.contextWindow) !== null && _a !== void 0 ? _a : sdkConfig.contextWindow) !== null && _b !== void 0 ? _b : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.contextWindow, chatDefaults_1.DEFAULT_CONTEXT_WINDOW);
     });
     (0, react_1.useEffect)(() => localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.contextWindow, contextWindow), [contextWindow]);
     // Real-time speech language (for transcription)
@@ -311,13 +335,15 @@ function ChatUI(props) {
     const [selectedFiles, setSelectedFiles] = (0, react_1.useState)([]);
     // init panel
     const resolvedInitUsername = localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.initUsername, "");
-    const resolvedInitServiceId = (_e = props.initServiceId) !== null && _e !== void 0 ? _e : "";
-    const resolvedInitRequestStepId = (_f = props.initRequestStepId) !== null && _f !== void 0 ? _f : "";
+    const resolvedInitServiceId = (_h = props.initServiceId) !== null && _h !== void 0 ? _h : "";
+    const resolvedInitRequestStepId = (_j = props.initRequestStepId) !== null && _j !== void 0 ? _j : "";
     const [showInitPanel, setShowInitPanel] = (0, react_1.useState)(false);
-    const [initPreset, setInitPreset] = (0, react_1.useState)((_g = props.initialInitPreset) !== null && _g !== void 0 ? _g : "custom");
+    const [initPreset, setInitPreset] = (0, react_1.useState)((_k = props.initialInitPreset) !== null && _k !== void 0 ? _k : "custom");
     const [initUsername, setInitUsername] = (0, react_1.useState)(resolvedInitUsername);
     const [initPassword, setInitPassword] = (0, react_1.useState)("");
     const [initLoading, setInitLoading] = (0, react_1.useState)(false);
+    const [initGateLoading, setInitGateLoading] = (0, react_1.useState)(false);
+    const [initGateError, setInitGateError] = (0, react_1.useState)(null);
     // Init panel extra fields per new API
     const [initContextWindow, setInitContextWindow] = (0, react_1.useState)(contextWindow);
     const [initServiceId, setInitServiceId] = (0, react_1.useState)(resolvedInitServiceId === undefined || resolvedInitServiceId === null
@@ -326,12 +352,21 @@ function ChatUI(props) {
     const [initRequestStepId, setInitRequestStepId] = (0, react_1.useState)(resolvedInitRequestStepId === undefined || resolvedInitRequestStepId === null
         ? ""
         : String(resolvedInitRequestStepId));
-    // Initializing message was removed from the backend (kept only for chat + speech features).
     (0, react_1.useEffect)(() => localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.initUsername, initUsername), [initUsername]);
     (0, react_1.useEffect)(() => localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.domain, domain), [domain]);
     (0, react_1.useEffect)(() => {
+        if (props.domain !== undefined) {
+            setDomain(props.domain);
+            return;
+        }
         setDomain(isDab ? chatDefaults_1.DEFAULT_DOMAIN : "");
-    }, [isDab]);
+    }, [isDab, props.domain]);
+    (0, react_1.useEffect)(() => {
+        if (props.contextWindow !== undefined) {
+            setContextWindow(props.contextWindow);
+            setInitContextWindow(props.contextWindow);
+        }
+    }, [props.contextWindow]);
     (0, react_1.useEffect)(() => {
         if (props.initServiceId !== undefined) {
             setInitServiceId(String(props.initServiceId));
@@ -511,20 +546,24 @@ function ChatUI(props) {
     const autoInitAttemptedRef = (0, react_1.useRef)(false);
     const autoInitConfigKey = (0, react_1.useMemo)(() => [
         initializeChatOnLoad ? "1" : "0",
+        authToken,
         initUsername,
         initPassword,
         domain,
         initContextWindow,
         initServiceId,
         initRequestStepId,
+        initializeMessage,
     ].join("|"), [
         initializeChatOnLoad,
+        authToken,
         initUsername,
         initPassword,
         domain,
         initContextWindow,
         initServiceId,
         initRequestStepId,
+        initializeMessage,
     ]);
     // TTS state
     const ttsSynthRef = (0, react_1.useRef)(null);
@@ -544,25 +583,58 @@ function ChatUI(props) {
     (0, react_1.useEffect)(() => {
         autoInitAttemptedRef.current = false;
     }, [autoInitConfigKey]);
+    const runAutoInitialize = () => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        setInitGateError(null);
+        setInitGateLoading(true);
+        try {
+            const authHeader = authToken === null || authToken === void 0 ? void 0 : authToken.trim();
+            if (!authHeader) {
+                setInitGateError(text.alerts.initMissingCredentials);
+                return;
+            }
+            const tokenChanged = tokenChangedRef.current;
+            const sessionIdOverride = tokenChanged
+                ? resetLocalStateForNewToken(authHeader)
+                : undefined;
+            yield initializeChatClients(authHeader);
+            if (tokenChanged) {
+                const initResult = yield initializeChatWithParams(authHeader, {
+                    silent: true,
+                    sessionIdOverride,
+                });
+                if (!initResult.ok) {
+                    setInitGateError((_a = initResult.error) !== null && _a !== void 0 ? _a : text.alerts.initFailed);
+                }
+            }
+            else if (!initCompleted) {
+                localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(sessionId), true);
+                setInitCompleted(true);
+            }
+        }
+        finally {
+            setInitGateLoading(false);
+        }
+    });
     (0, react_1.useEffect)(() => {
-        const shouldAutoInit = initializeChatOnLoad;
-        if (!shouldAutoInit || initLoading || initCompleted)
-            return;
-        if (!authToken && (!initUsername.trim() || !initPassword))
+        const shouldAutoInit = initializeChatOnLoad && !!authToken;
+        if (!shouldAutoInit || initLoading)
             return;
         if (autoInitAttemptedRef.current)
             return;
         autoInitAttemptedRef.current = true;
-        void initializeSession({ runInitializeChatClients: true });
+        void runAutoInitialize();
     }, [
         initializeChatOnLoad,
         authToken,
         initLoading,
         initCompleted,
-        initUsername,
-        initPassword,
         autoInitConfigKey,
     ]);
+    const handleInitRetry = () => {
+        autoInitAttemptedRef.current = false;
+        void runAutoInitialize();
+    };
     // auto scroll
     (0, react_1.useEffect)(() => {
         var _a;
@@ -663,6 +735,8 @@ function ChatUI(props) {
         !!apiBase &&
         !!apiKey &&
         !pending, [input, selectedFiles, sessionId, apiBase, apiKey, pending]);
+    const shouldDockComposer = pending || messages.length > 0;
+    const isEmptyState = messages.length === 0 && !pending;
     function autosizeTextarea(el) {
         if (!el)
             return;
@@ -672,7 +746,7 @@ function ChatUI(props) {
     (0, react_1.useEffect)(() => {
         autosizeTextarea(composerRef.current);
     }, [input]);
-    const signatureAlias = (_j = (_h = activeTaskCard === null || activeTaskCard === void 0 ? void 0 : activeTaskCard.MetaData) === null || _h === void 0 ? void 0 : _h.SignatureAttributeAlias) !== null && _j !== void 0 ? _j : null;
+    const signatureAlias = (_m = (_l = activeTaskCard === null || activeTaskCard === void 0 ? void 0 : activeTaskCard.MetaData) === null || _l === void 0 ? void 0 : _l.SignatureAttributeAlias) !== null && _m !== void 0 ? _m : null;
     const visibleTakeActionAttributes = (0, react_1.useMemo)(() => {
         return takeActionAttributes
             .filter((attr) => attr.IsProviderVisible)
@@ -980,7 +1054,7 @@ function ChatUI(props) {
     // send message via HTTP (no streaming)
     function sendMessage() {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a, _b, _c, _d;
             const selectedTask = selectedTaskCard;
             if (selectedTask) {
                 setSelectedTaskCard(null);
@@ -1048,7 +1122,7 @@ function ChatUI(props) {
                         try {
                             details = yield sasRes.text();
                         }
-                        catch (_c) { }
+                        catch (_e) { }
                         throw new Error(formatText(text.errors.sasRequestFailedTemplate, {
                             status: sasRes.status,
                             statusText: sasRes.statusText,
@@ -1105,7 +1179,7 @@ function ChatUI(props) {
                     try {
                         msg = yield chatRes.text();
                     }
-                    catch (_d) { }
+                    catch (_f) { }
                     throw new Error(formatText(text.errors.chatFailedTemplate, {
                         status: chatRes.status,
                         statusText: chatRes.statusText,
@@ -1117,11 +1191,11 @@ function ChatUI(props) {
                 try {
                     raw = yield chatRes.json();
                 }
-                catch (_e) {
+                catch (_g) {
                     try {
                         rawText = yield chatRes.text();
                     }
-                    catch (_f) { }
+                    catch (_h) { }
                 }
                 const assistantText = (typeof (raw === null || raw === void 0 ? void 0 : raw.AIMessage) === "string" && raw.AIMessage) ||
                     (typeof (raw === null || raw === void 0 ? void 0 : raw.AssistantMessage) === "string" && raw.AssistantMessage) ||
@@ -1143,6 +1217,16 @@ function ChatUI(props) {
                     ? raw.Profile.UserSignatures
                     : [];
                 setUserSignatures(signatures);
+                const addRequestResult = raw === null || raw === void 0 ? void 0 : raw.AddRequestToolResult;
+                const processRequestResult = raw === null || raw === void 0 ? void 0 : raw.ProcessRequestToolResult;
+                const hasAddRequest = isNonEmptyObject(addRequestResult);
+                const hasProcessRequest = isNonEmptyObject(processRequestResult);
+                if (hasAddRequest) {
+                    (_c = props.onRequestAdded) === null || _c === void 0 ? void 0 : _c.call(props, addRequestResult);
+                }
+                if (hasProcessRequest) {
+                    (_d = props.onRequestProcessed) === null || _d === void 0 ? void 0 : _d.call(props, processRequestResult);
+                }
                 if (typeof (raw === null || raw === void 0 ? void 0 : raw.ToolResult) !== "undefined" && (raw === null || raw === void 0 ? void 0 : raw.ToolResult) !== null) {
                     setLastToolResult(raw.ToolResult);
                 }
@@ -1569,31 +1653,117 @@ function ChatUI(props) {
             console.warn("Download failed:", e);
         }
     };
+    const getInitChatErrorMessage = (err) => {
+        var _a, _b;
+        const msg = ((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes("Failed to fetch")) || ((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes("Network"))
+            ? text.alerts.initChatNetworkError
+            : (err === null || err === void 0 ? void 0 : err.message) || String(err);
+        return formatText(text.alerts.initChatErrorTemplate, { error: msg });
+    };
+    const resetLocalStateForNewToken = (nextToken) => {
+        const normalized = normalizeAuthToken(nextToken);
+        localStorage_1.ls.removeByPrefix(storageKeys_1.STORAGE_KEYS.messagesPrefix);
+        localStorage_1.ls.removeByPrefix(storageKeys_1.STORAGE_KEYS.initCompletedPrefix);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.serviceBaseUrl);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.apiSubscriptionKey);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.loginSubscriptionKey);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.sessionId);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.authToken);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.contextWindow);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.initUsername);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.domain);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.speechLang);
+        localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.ttsLang);
+        setMessages([]);
+        setInput("");
+        setSelectedFiles([]);
+        setLastToolResult(null);
+        setShowToolOverlay(false);
+        setPending(false);
+        const newSessionId = (0, generateGuid_1.generateGuid)();
+        setSessionId(newSessionId);
+        localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, newSessionId);
+        localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, normalized);
+        localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(newSessionId), false);
+        setInitCompleted(false);
+        lastStoredAuthTokenRef.current = normalized;
+        tokenChangedRef.current = false;
+        return newSessionId;
+    };
     // Initialize session (login), initializeChatClients, and optionally initializeChat
-    function initializeChatWithParams(tokenOverride) {
-        return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+    function initializeChatWithParams(tokenOverride_1) {
+        return __awaiter(this, arguments, void 0, function* (tokenOverride, options = {}) {
+            var _a, _b, _c;
             try {
-                const result = yield (0, sdkUtilities_1.InitializeChatSession)({
-                    initServiceId: initServiceId || undefined,
-                    initRequestStepId: initRequestStepId || undefined,
-                    contextWindow: initContextWindow || contextWindow,
-                    domain,
-                    token: tokenOverride !== null && tokenOverride !== void 0 ? tokenOverride : authToken,
+                const normalizedToken = normalizeAuthToken(tokenOverride !== null && tokenOverride !== void 0 ? tokenOverride : authToken);
+                if (!normalizedToken) {
+                    throw new Error("Auth token is required to initialize chat.");
+                }
+                if (normalizedToken !== authToken) {
+                    setAuthToken(normalizedToken);
+                    localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, normalizedToken);
+                }
+                const activeSessionId = (_a = options.sessionIdOverride) !== null && _a !== void 0 ? _a : sessionId;
+                const existingInit = localStorage_1.ls.get((0, storageKeys_1.getInitCompletedKey)(activeSessionId), false);
+                if (existingInit) {
+                    setInitCompleted(true);
+                    return { ok: true };
+                }
+                const sessionDomain = ((_b = props.domain) !== null && _b !== void 0 ? _b : domain).trim();
+                const resolvedContextWindow = (initContextWindow || contextWindow || chatDefaults_1.DEFAULT_CONTEXT_WINDOW).trim() ||
+                    "ComposeRequest";
+                const payload = {
+                    Domain: sessionDomain,
+                    ContextWindow: resolvedContextWindow,
+                    InitializeLangauge: initializeLanguage,
+                };
+                if (initializeMessage) {
+                    payload.InitializeMessage = initializeMessage;
+                }
+                if (initServiceId && initServiceId.trim() !== "") {
+                    const n = Number(initServiceId);
+                    if (!Number.isNaN(n))
+                        payload.ServiceId = n;
+                }
+                if (initRequestStepId && initRequestStepId.trim() !== "") {
+                    const n = Number(initRequestStepId);
+                    if (!Number.isNaN(n))
+                        payload.RequestStepId = n;
+                }
+                const initRes = yield fetch(new URL("/api/initializeChat", apiBase).toString(), {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        "api-key": apiKey,
+                        Authorization: normalizedToken,
+                    },
+                    credentials: "include",
+                    body: JSON.stringify(payload),
                 });
-                if (result.initialized) {
-                    if (result.sessionId && result.sessionId !== sessionId) {
-                        setSessionId(result.sessionId);
+                if (!initRes.ok) {
+                    let msg = "";
+                    try {
+                        msg = yield initRes.text();
                     }
-                    setInitCompleted(true);
-                    localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(result.sessionId), true);
+                    catch (_d) { }
+                    throw new Error(`initializeChat failed: ${initRes.status} ${initRes.statusText}${msg ? ` - ${msg}` : ""}`);
                 }
+                const initPayload = yield initRes.json().catch(() => ({}));
+                const resolvedSessionId = (_c = initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) !== null && _c !== void 0 ? _c : activeSessionId;
+                if (resolvedSessionId && resolvedSessionId !== sessionId) {
+                    setSessionId(resolvedSessionId);
+                    localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, resolvedSessionId);
+                }
+                localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(resolvedSessionId), true);
+                setInitCompleted(true);
+                return { ok: true, payload: initPayload };
             }
             catch (err) {
-                const msg = ((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes("Failed to fetch")) || ((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes("Network"))
-                    ? text.alerts.initChatNetworkError
-                    : (err === null || err === void 0 ? void 0 : err.message) || String(err);
-                alert(formatText(text.alerts.initChatErrorTemplate, { error: msg }));
+                const formatted = getInitChatErrorMessage(err);
+                if (!options.silent) {
+                    alert(formatted);
+                }
+                return { ok: false, error: formatted };
             }
         });
     }
@@ -1631,36 +1801,50 @@ function ChatUI(props) {
                 return;
             const requestDomain = domain.trim();
             const authFromState = authToken === null || authToken === void 0 ? void 0 : authToken.trim();
+            const storedToken = normalizeAuthToken(localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, ""));
             const hasCredentials = !!initUsername.trim() && !!initPassword;
             const shouldUseLogin = hasCredentials && !authFromState;
+            const shouldAlert = !(options === null || options === void 0 ? void 0 : options.silent);
             if (!serviceBaseUrl) {
-                alert(text.alerts.initMissingBaseUrl);
-                return;
+                if (shouldAlert) {
+                    alert(text.alerts.initMissingBaseUrl);
+                }
+                return { ok: false, error: text.alerts.initMissingBaseUrl };
             }
             if (!apiSubscriptionKey) {
-                alert(text.alerts.initMissingSubscriptionKey);
-                return;
+                if (shouldAlert) {
+                    alert(text.alerts.initMissingSubscriptionKey);
+                }
+                return { ok: false, error: text.alerts.initMissingSubscriptionKey };
             }
             const resolvedLoginSubscriptionKey = loginSubscriptionKey || apiSubscriptionKey;
             if (!hasCredentials && !authFromState) {
-                alert(text.alerts.initMissingCredentials);
-                return;
+                if (shouldAlert) {
+                    alert(text.alerts.initMissingCredentials);
+                }
+                return { ok: false, error: text.alerts.initMissingCredentials };
             }
             if (shouldUseLogin) {
                 const username = initUsername.trim();
                 const password = initPassword;
                 if (!username || !password) {
-                    alert(text.alerts.initMissingCredentials);
-                    return;
+                    if (shouldAlert) {
+                        alert(text.alerts.initMissingCredentials);
+                    }
+                    return { ok: false, error: text.alerts.initMissingCredentials };
                 }
                 if (!initEndpoint) {
-                    alert(text.alerts.initMissingEndpoint);
-                    return;
+                    if (shouldAlert) {
+                        alert(text.alerts.initMissingEndpoint);
+                    }
+                    return { ok: false, error: text.alerts.initMissingEndpoint };
                 }
             }
             setInitLoading(true);
             try {
                 let authHeader = authFromState;
+                let tokenChanged = false;
+                let sessionIdOverride;
                 if (shouldUseLogin) {
                     const res = yield fetch(initEndpoint, {
                         method: "POST",
@@ -1681,34 +1865,65 @@ function ChatUI(props) {
                     }
                     catch (_c) { }
                     if (!res.ok) {
-                        alert(text.alerts.initFailed);
-                        return;
+                        if (shouldAlert) {
+                            alert(text.alerts.initFailed);
+                        }
+                        return { ok: false, error: text.alerts.initFailed };
                     }
                     const access = (_a = payload === null || payload === void 0 ? void 0 : payload.Result) === null || _a === void 0 ? void 0 : _a.Token;
                     if (!access) {
-                        alert(text.alerts.initNoToken);
-                        return;
+                        if (shouldAlert) {
+                            alert(text.alerts.initNoToken);
+                        }
+                        return { ok: false, error: text.alerts.initNoToken };
                     }
                     authHeader = `Bearer ${access}`.trim();
-                    setAuthToken(normalizeAuthToken(authHeader));
-                    localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, authHeader);
+                    const normalized = normalizeAuthToken(authHeader);
+                    setAuthToken(normalized);
                     localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.initUsername, initUsername.trim());
+                    authHeader = normalized;
                 }
                 setContextWindow(initContextWindow || "ComposeRequest");
+                authHeader = normalizeAuthToken(authHeader);
+                tokenChanged =
+                    !!authHeader && (authHeader !== storedToken || tokenChangedRef.current);
+                if (tokenChanged) {
+                    sessionIdOverride = resetLocalStateForNewToken(authHeader);
+                }
+                else if (authHeader) {
+                    localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, authHeader);
+                    lastStoredAuthTokenRef.current = authHeader;
+                    tokenChangedRef.current = false;
+                }
                 if (options === null || options === void 0 ? void 0 : options.runInitializeChatClients) {
                     yield initializeChatClients(authHeader);
                 }
-                if (options === null || options === void 0 ? void 0 : options.runInitializeChat) {
-                    yield initializeChatWithParams(authHeader);
+                if ((options === null || options === void 0 ? void 0 : options.runInitializeChat) && tokenChanged) {
+                    const initResult = yield initializeChatWithParams(authHeader, {
+                        silent: options === null || options === void 0 ? void 0 : options.silent,
+                        sessionIdOverride,
+                    });
+                    if (!initResult.ok) {
+                        return { ok: false, error: initResult.error };
+                    }
+                }
+                else if ((options === null || options === void 0 ? void 0 : options.runInitializeChat) && !tokenChanged && !initCompleted) {
+                    localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(sessionId), true);
+                    setInitCompleted(true);
                 }
                 setShowInitPanel(false);
                 setInitPassword("");
+                return { ok: true };
             }
             catch (err) {
                 const msg = ((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes("Failed to fetch"))
                     ? text.alerts.initNetworkError
                     : (err === null || err === void 0 ? void 0 : err.message) || String(err);
-                alert(formatText(text.alerts.initErrorTemplate, { error: msg }));
+                const formatted = formatText(text.alerts.initErrorTemplate, { error: msg });
+                if (shouldAlert) {
+                    alert(formatted);
+                }
+                return { ok: false, error: formatted };
             }
             finally {
                 setInitLoading(false);
@@ -1743,7 +1958,13 @@ function ChatUI(props) {
             localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(newSessionId), false);
         });
     }
-    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: () => {
+    const shouldGateView = initializeChatOnLoad && !!authToken && !initCompleted;
+    if (shouldGateView) {
+        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)("div", { className: "flex flex-1 items-center justify-center px-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "max-w-md text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: initGateLoading
+                                    ? "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: () => {
                     if (initPanelEnabled) {
                         setShowInitPanel(true);
                     }
@@ -1778,10 +1999,15 @@ function ChatUI(props) {
                     setViewerLoading(true);
                     setViewerUrl(blobUrl);
                     setViewerKey((k) => k + 1);
-                }, takeActionProceedOpen: takeActionProceedOpen, takeActionSubmitting: takeActionSubmitting, takeActionError: takeActionError, onProceedTakeAction: proceedTakeAction, textButtonTheme: textButtonTheme, text: text.documentViewer }), (0, jsx_runtime_1.jsx)(MessageList_1.default, { messages: messages, pending: pending, openOverlay: openOverlay, onOpenTaskCard: openTaskCardModal, onSelectTaskCard: toggleTaskCardSelection, selectedTaskCardId: selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId, isRtl: chatIsRtl, speakingMessageIndex: speakingMessageIndex, onSpeak: speakMessage, onStopSpeak: stopSpeaking, textButtonTheme: textButtonTheme, listEndRef: listEndRef, text: text.emptyState, messageItemText: text.messageItem, taskCardSize: taskCardSize }), (0, jsx_runtime_1.jsx)(Composer_1.default, { fileInputRef: fileInputRef, composerRef: composerRef, selectedTaskCard: selectedTaskCard, selectedFiles: selectedFiles, onClearSelected: clearSelected, onUpload: handleUpload, input: input, onInputChange: (value) => {
-                    setInput(value);
-                    if (composerRef.current) {
-                        autosizeTextarea(composerRef.current);
-                    }
-                }, onInputKeyDown: onKeyDown, onInputFocus: detectKeyboardDirection, inputIsRtl: inputIsRtl, inputLocale: inputLocale, authToken: authToken, sessionId: sessionId, pending: pending, voiceMode: voiceMode, voiceUploading: voiceUploading, waveData: waveData, onToggleVoice: () => (voiceMode ? cancelVoice() : startSpeechRecognition()), onSendMessage: sendMessage, voiceError: voiceError, canSend: canSend, onCancelVoice: cancelVoice, onConfirmVoice: confirmVoice, onAttachClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onClearSelectedTask: () => setSelectedTaskCard(null), text: text.composer, voiceOverlayText: text.voiceOverlay })] }));
+                }, takeActionProceedOpen: takeActionProceedOpen, takeActionSubmitting: takeActionSubmitting, takeActionError: takeActionError, onProceedTakeAction: proceedTakeAction, textButtonTheme: textButtonTheme, text: text.documentViewer }), isEmptyState ? ((0, jsx_runtime_1.jsx)("div", { className: "relative flex flex-1 px-2 py-6 sm:px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "absolute bottom-1/2 left-1/2 w-full max-w-3xl -translate-x-1/2", children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-6 text-center text-[2.43rem] font-semibold leading-tight text-gray-800", children: text.emptyState.title }), (0, jsx_runtime_1.jsx)(Composer_1.default, { fileInputRef: fileInputRef, composerRef: composerRef, selectedTaskCard: selectedTaskCard, selectedFiles: selectedFiles, onClearSelected: clearSelected, onUpload: handleUpload, input: input, onInputChange: (value) => {
+                                setInput(value);
+                                if (composerRef.current) {
+                                    autosizeTextarea(composerRef.current);
+                                }
+                            }, onInputKeyDown: onKeyDown, onInputFocus: detectKeyboardDirection, inputIsRtl: inputIsRtl, inputLocale: inputLocale, authToken: authToken, sessionId: sessionId, pending: pending, voiceMode: voiceMode, voiceUploading: voiceUploading, waveData: waveData, onToggleVoice: () => (voiceMode ? cancelVoice() : startSpeechRecognition()), onSendMessage: sendMessage, voiceError: voiceError, canSend: canSend, onCancelVoice: cancelVoice, onConfirmVoice: confirmVoice, onAttachClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onClearSelectedTask: () => setSelectedTaskCard(null), dockToBottom: false, text: text.composer, voiceOverlayText: text.voiceOverlay })] }) })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(MessageList_1.default, { messages: messages, pending: pending, openOverlay: openOverlay, onOpenTaskCard: openTaskCardModal, onSelectTaskCard: toggleTaskCardSelection, selectedTaskCardId: selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId, isRtl: chatIsRtl, speakingMessageIndex: speakingMessageIndex, onSpeak: speakMessage, onStopSpeak: stopSpeaking, textButtonTheme: textButtonTheme, listEndRef: listEndRef, text: text.emptyState, messageItemText: text.messageItem, taskCardSize: taskCardSize, dockComposer: shouldDockComposer }), (0, jsx_runtime_1.jsx)(Composer_1.default, { fileInputRef: fileInputRef, composerRef: composerRef, selectedTaskCard: selectedTaskCard, selectedFiles: selectedFiles, onClearSelected: clearSelected, onUpload: handleUpload, input: input, onInputChange: (value) => {
+                            setInput(value);
+                            if (composerRef.current) {
+                                autosizeTextarea(composerRef.current);
+                            }
+                        }, onInputKeyDown: onKeyDown, onInputFocus: detectKeyboardDirection, inputIsRtl: inputIsRtl, inputLocale: inputLocale, authToken: authToken, sessionId: sessionId, pending: pending, voiceMode: voiceMode, voiceUploading: voiceUploading, waveData: waveData, onToggleVoice: () => (voiceMode ? cancelVoice() : startSpeechRecognition()), onSendMessage: sendMessage, voiceError: voiceError, canSend: canSend, onCancelVoice: cancelVoice, onConfirmVoice: confirmVoice, onAttachClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, onClearSelectedTask: () => setSelectedTaskCard(null), dockToBottom: shouldDockComposer, text: text.composer, voiceOverlayText: text.voiceOverlay })] }))] }));
 }

package/dist/components/Composer.d.ts

@@ -28,8 +28,9 @@ type ComposerProps = {
     onConfirmVoice: () => void;
     onAttachClick: () => void;
     onClearSelectedTask: () => void;
+    dockToBottom?: boolean;
     text: ChatUITextConfig["composer"];
     voiceOverlayText: ChatUITextConfig["voiceOverlay"];
 };
-export default function Composer({ fileInputRef, composerRef, selectedTaskCard, selectedFiles, onClearSelected, onUpload, input, onInputChange, onInputKeyDown, onInputFocus, inputIsRtl, inputLocale, authToken, sessionId, pending, voiceMode, voiceUploading, waveData, onToggleVoice, onSendMessage, voiceError, canSend, onCancelVoice, onConfirmVoice, onAttachClick, onClearSelectedTask, text, voiceOverlayText, }: ComposerProps): import("react/jsx-runtime").JSX.Element;
+export default function Composer({ fileInputRef, composerRef, selectedTaskCard, selectedFiles, onClearSelected, onUpload, input, onInputChange, onInputKeyDown, onInputFocus, inputIsRtl, inputLocale, authToken, sessionId, pending, voiceMode, voiceUploading, waveData, onToggleVoice, onSendMessage, voiceError, canSend, onCancelVoice, onConfirmVoice, onAttachClick, onClearSelectedTask, dockToBottom, text, voiceOverlayText, }: ComposerProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Composer.js

@@ -8,9 +8,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const lu_1 = require("react-icons/lu");
 const classNames_1 = require("../utils/classNames");
 const VoiceOverlay_1 = __importDefault(require("./VoiceOverlay"));
-function Composer({ fileInputRef, composerRef, selectedTaskCard, selectedFiles, onClearSelected, onUpload, input, onInputChange, onInputKeyDown, onInputFocus, inputIsRtl, inputLocale, authToken, sessionId, pending, voiceMode, voiceUploading, waveData, onToggleVoice, onSendMessage, voiceError, canSend, onCancelVoice, onConfirmVoice, onAttachClick, onClearSelectedTask, text, voiceOverlayText, }) {
+function Composer({ fileInputRef, composerRef, selectedTaskCard, selectedFiles, onClearSelected, onUpload, input, onInputChange, onInputKeyDown, onInputFocus, inputIsRtl, inputLocale, authToken, sessionId, pending, voiceMode, voiceUploading, waveData, onToggleVoice, onSendMessage, voiceError, canSend, onCancelVoice, onConfirmVoice, onAttachClick, onClearSelectedTask, dockToBottom = false, text, voiceOverlayText, }) {
     var _a;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "sticky bottom-0 bg-white/95 px-2 py-4 backdrop-blur sm:px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-3xl", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(VoiceOverlay_1.default, { voiceMode: voiceMode, waveData: waveData, voiceUploading: voiceUploading, onCancel: onCancelVoice, onConfirm: onConfirmVoice, text: voiceOverlayText }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-end gap-2 rounded-full bg-white px-3 py-2 shadow-[0_10px_40px_rgba(0,0,0,0.08)] ring-1 ring-[#252525]/5 sm:flex-nowrap", children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => onUpload(e.target.files) }), (0, jsx_runtime_1.jsx)("button", { onClick: onAttachClick, disabled: !sessionId, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center bg-transparent text-gray-700 transition", !sessionId && "opacity-60"), title: text.attachTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuPlus, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [selectedTaskCard && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700 shadow-sm", children: [(0, jsx_runtime_1.jsxs)("span", { children: [text.selectedTaskPrefix, String((_a = selectedTaskCard.RequestId) !== null && _a !== void 0 ? _a : "")] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-700 text-blue-100 transition hover:bg-blue-800", onClick: onClearSelectedTask, title: text.selectedTaskClearTitle, "aria-label": text.selectedTaskClearTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-3 w-3" }) })] }) })), selectedFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 flex flex-wrap gap-2", children: selectedFiles.map((f, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2 rounded-2xl border bg-white px-3 py-1 text-xs shadow-sm", children: [(0, jsx_runtime_1.jsx)(lu_1.LuPaperclip, { className: "h-3.5 w-3.5" }), " ", f.name, (0, jsx_runtime_1.jsx)("button", { className: "rounded-full p-0.5 hover:bg-gray-100", onClick: () => onClearSelected(i), children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-3.5 w-3.5" }) })] }, i))) })), (0, jsx_runtime_1.jsx)("textarea", { ref: composerRef, value: input, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, rows: 1, disabled: !authToken, dir: inputIsRtl ? "rtl" : "ltr", lang: inputLocale, placeholder: !authToken
+    const containerClass = dockToBottom
+        ? "fixed bottom-0 left-0 right-0 z-20 bg-white/95 px-2 py-4 backdrop-blur sm:px-4"
+        : "relative bg-white/95 px-2 py-4 backdrop-blur sm:px-4";
+    return ((0, jsx_runtime_1.jsx)("div", { className: containerClass, children: (0, jsx_runtime_1.jsx)("div", { className: "mx-auto w-full max-w-3xl", children: (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)(VoiceOverlay_1.default, { voiceMode: voiceMode, waveData: waveData, voiceUploading: voiceUploading, onCancel: onCancelVoice, onConfirm: onConfirmVoice, text: voiceOverlayText }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap items-end gap-2 rounded-full bg-white px-3 py-2 shadow-[0_10px_40px_rgba(0,0,0,0.08)] ring-1 ring-[#252525]/5 sm:flex-nowrap", children: [(0, jsx_runtime_1.jsx)("input", { ref: fileInputRef, type: "file", multiple: true, className: "hidden", onChange: (e) => onUpload(e.target.files) }), (0, jsx_runtime_1.jsx)("button", { onClick: onAttachClick, disabled: !sessionId, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center bg-transparent text-gray-700 transition", !sessionId && "opacity-60"), title: text.attachTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuPlus, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative flex-1", children: [selectedTaskCard && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 flex items-center gap-2", children: (0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2 rounded-full bg-blue-100 px-3 py-1 text-xs font-semibold text-blue-700 shadow-sm", children: [(0, jsx_runtime_1.jsxs)("span", { children: [text.selectedTaskPrefix, String((_a = selectedTaskCard.RequestId) !== null && _a !== void 0 ? _a : "")] }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-700 text-blue-100 transition hover:bg-blue-800", onClick: onClearSelectedTask, title: text.selectedTaskClearTitle, "aria-label": text.selectedTaskClearTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-3 w-3" }) })] }) })), selectedFiles.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-2 flex flex-wrap gap-2", children: selectedFiles.map((f, i) => ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2 rounded-2xl border bg-white px-3 py-1 text-xs shadow-sm", children: [(0, jsx_runtime_1.jsx)(lu_1.LuPaperclip, { className: "h-3.5 w-3.5" }), " ", f.name, (0, jsx_runtime_1.jsx)("button", { className: "rounded-full p-0.5 hover:bg-gray-100", onClick: () => onClearSelected(i), children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-3.5 w-3.5" }) })] }, i))) })), (0, jsx_runtime_1.jsx)("textarea", { ref: composerRef, value: input, onChange: (e) => onInputChange(e.target.value), onFocus: onInputFocus, onKeyDown: onInputKeyDown, rows: 1, disabled: !authToken, dir: inputIsRtl ? "rtl" : "ltr", lang: inputLocale, placeholder: !authToken
                                             ? text.placeholderAuthRequired
                                             : text.placeholderDefault, className: "max-h-80 w-full resize-none bg-transparent px-1 py-1 outline-none", style: {
                                             direction: inputIsRtl ? "rtl" : "ltr",

package/dist/components/MessageList.d.ts

@@ -17,6 +17,7 @@ type MessageListProps = {
     text: ChatUITextConfig["emptyState"];
     messageItemText: ChatUITextConfig["messageItem"];
     taskCardSize: ChatUITaskCardSize;
+    dockComposer?: boolean;
 };
-export default function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, isRtl, speakingMessageIndex, onSpeak, onStopSpeak, textButtonTheme, listEndRef, text, messageItemText, taskCardSize, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
+export default function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, isRtl, speakingMessageIndex, onSpeak, onStopSpeak, textButtonTheme, listEndRef, text, messageItemText, taskCardSize, dockComposer, }: MessageListProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/MessageList.js

@@ -8,8 +8,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const framer_motion_1 = require("framer-motion");
 const MessageItem_1 = __importDefault(require("./MessageItem"));
 const TypingDots_1 = __importDefault(require("./TypingDots"));
-function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, isRtl, speakingMessageIndex, onSpeak, onStopSpeak, textButtonTheme, listEndRef, text, messageItemText, taskCardSize, }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-y-auto px-2 py-6 sm:px-4", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto w-full max-w-3xl", children: [messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 pt-24 text-center text-[2.43rem] font-semibold leading-tight text-gray-800", children: text.title })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-5", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.AnimatePresence, { initial: false, children: [messages.map((m, i) => {
+function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, isRtl, speakingMessageIndex, onSpeak, onStopSpeak, textButtonTheme, listEndRef, text, messageItemText, taskCardSize, dockComposer = false, }) {
+    const listPadding = dockComposer ? "pb-28" : "pb-6";
+    return ((0, jsx_runtime_1.jsx)("div", { className: `flex-1 min-h-0 overflow-y-auto px-2 pt-6 ${listPadding} sm:px-4`, children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto w-full max-w-3xl", children: [messages.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "mb-4 pt-24 text-center text-[2.43rem] font-semibold leading-tight text-gray-800", children: text.title })), (0, jsx_runtime_1.jsx)("div", { className: "space-y-5", children: (0, jsx_runtime_1.jsxs)(framer_motion_1.AnimatePresence, { initial: false, children: [messages.map((m, i) => {
                                 var _a;
                                 const canSpeak = m.role === "Assistant" &&
                                     !!m.content &&

package/dist/config.d.ts

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

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { default as ChatUI } from "./ChatUI";
-export type { ChatMessage, ChatUIProps, Role } from "./models/chat.types";
-export { Init, GetConfig, FinalizeSession, InitializeChatClients, InitializeChatSession, } from "./sdkUtilities";
-export type { InitializeChatClientsOptions, FinalizeSessionOptions, InitializeChatOptions, InitializeChatResult, } from "./sdkUtilities";
+export type { AddRequestToolResult, ChatMessage, ChatUIProps, ProcessRequestToolResult, Role, } from "./models/chat.types";
+export { Init, GetConfig, FinalizeSession, InitializeChatClients, } from "./sdkUtilities";
+export type { InitializeChatClientsOptions, FinalizeSessionOptions, } from "./sdkUtilities";
 export type { ChatUIFontConfig, ChatUIInitPreset, ChatUIInitPresets, ChatUISDKConfig, ChatUITheme, ChatUITaskCardSize, ChatUITextConfig, ChatUITextConfigInput, } from "./config";

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InitializeChatSession = exports.InitializeChatClients = exports.FinalizeSession = exports.GetConfig = exports.Init = exports.ChatUI = void 0;
+exports.InitializeChatClients = exports.FinalizeSession = exports.GetConfig = exports.Init = exports.ChatUI = void 0;
 var ChatUI_1 = require("./ChatUI");
 Object.defineProperty(exports, "ChatUI", { enumerable: true, get: function () { return __importDefault(ChatUI_1).default; } });
 var sdkUtilities_1 = require("./sdkUtilities");
@@ -11,4 +11,3 @@ Object.defineProperty(exports, "Init", { enumerable: true, get: function () { re
 Object.defineProperty(exports, "GetConfig", { enumerable: true, get: function () { return sdkUtilities_1.GetConfig; } });
 Object.defineProperty(exports, "FinalizeSession", { enumerable: true, get: function () { return sdkUtilities_1.FinalizeSession; } });
 Object.defineProperty(exports, "InitializeChatClients", { enumerable: true, get: function () { return sdkUtilities_1.InitializeChatClients; } });
-Object.defineProperty(exports, "InitializeChatSession", { enumerable: true, get: function () { return sdkUtilities_1.InitializeChatSession; } });

package/dist/models/chat.types.d.ts

@@ -9,6 +9,20 @@ export interface ChatMessage {
     }>;
     availableTasksCards?: AvailableTasksCard[];
 }
+export type AddRequestToolResult = {
+    Message?: string;
+    StatusCode?: number;
+    Result?: {
+        RequestGuid?: string;
+        RequestId?: string | number;
+        BatchId?: string | number;
+    };
+};
+export type ProcessRequestToolResult = {
+    Message?: string;
+    StatusCode?: number;
+    Result?: boolean;
+};
 export interface UploadAttachmentItem {
     AttachmentName: string;
     AttachmentSAS: string;
@@ -56,6 +70,10 @@ export interface AvailableTasksCard {
 export type ChatUIProps = {
     initServiceId?: string | number;
     initRequestStepId?: string | number;
+    contextWindow?: string;
+    domain?: string;
+    token?: string;
+    initializeMessage?: string;
     initPresets?: ChatUIInitPresets;
     initialInitPreset?: "requester" | "provider" | "custom";
     speechRegion?: string;
@@ -69,4 +87,6 @@ export type ChatUIProps = {
     fonts?: ChatUIFontConfig;
     text?: ChatUITextConfigInput;
     taskCardSize?: ChatUITaskCardSize;
+    onRequestAdded?: (result: AddRequestToolResult) => void;
+    onRequestProcessed?: (result: ProcessRequestToolResult) => void;
 };

package/dist/sdkUtilities.d.ts

@@ -2,26 +2,14 @@ import { ChatUISDKConfig } from "./config";
 export declare function Init(config: ChatUISDKConfig): void;
 export declare function GetConfig(): ChatUISDKConfig;
 export declare function GetConfigValue<Key extends keyof ChatUISDKConfig>(key: Key): ChatUISDKConfig[Key];
-export type InitializeChatOptions = {
-    initServiceId?: string | number;
-    initRequestStepId?: string | number;
-    contextWindow?: string;
-    domain?: string;
-    token?: string;
-};
 export type InitializeChatClientsOptions = {
     domain?: string;
     token?: string;
 };
-export type InitializeChatResult = {
-    initialized: boolean;
-    sessionId: string;
-    payload?: any;
-};
-export declare function InitializeChatSession(options?: InitializeChatOptions): Promise<InitializeChatResult>;
 export declare function InitializeChatClients(options?: InitializeChatClientsOptions): Promise<boolean>;
 export type FinalizeSessionOptions = {
     token?: string;
     domain?: string;
+    sessionId?: string;
 };
 export declare function FinalizeSession(options?: FinalizeSessionOptions): Promise<boolean>;

package/dist/sdkUtilities.js

@@ -12,12 +12,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Init = Init;
 exports.GetConfig = GetConfig;
 exports.GetConfigValue = GetConfigValue;
-exports.InitializeChatSession = InitializeChatSession;
 exports.InitializeChatClients = InitializeChatClients;
 exports.FinalizeSession = FinalizeSession;
 const config_1 = require("./config");
 const chatDefaults_1 = require("./constants/chatDefaults");
-const generateGuid_1 = require("./utils/generateGuid");
 const localStorage_1 = require("./utils/localStorage");
 const storageKeys_1 = require("./utils/storageKeys");
 const normalizeAuthToken = (value) => {
@@ -53,76 +51,6 @@ function GetConfig() {
 function GetConfigValue(key) {
     return config_1.ChatUISDKConfigStoreInstance.getValue(key);
 }
-function InitializeChatSession() {
-    return __awaiter(this, arguments, void 0, function* (options = {}) {
-        var _a, _b, _c, _d, _e, _f;
-        const config = GetConfig();
-        const apiBase = chatDefaults_1.DEFAULT_API_BASE;
-        const apiKey = chatDefaults_1.DEFAULT_API_KEY;
-        let sessionId = localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.sessionId, "");
-        if (!sessionId) {
-            sessionId = (0, generateGuid_1.generateGuid)();
-            localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, sessionId);
-        }
-        if (!apiBase || !apiKey || !sessionId) {
-            throw new Error("Missing chat API configuration or session ID.");
-        }
-        const existingInit = localStorage_1.ls.get((0, storageKeys_1.getInitCompletedKey)(sessionId), false);
-        if (existingInit) {
-            return { initialized: false, sessionId };
-        }
-        const authToken = normalizeAuthToken((_b = (_a = options.token) !== null && _a !== void 0 ? _a : config.token) !== null && _b !== void 0 ? _b : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, ""));
-        if (!authToken) {
-            throw new Error("Auth token is required to initialize chat.");
-        }
-        localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, authToken);
-        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: initializeLanguage,
-        };
-        if (options.initServiceId !== undefined && options.initServiceId !== null) {
-            const n = Number(options.initServiceId);
-            if (!Number.isNaN(n))
-                bodyPayload.ServiceId = n;
-        }
-        if (options.initRequestStepId !== undefined &&
-            options.initRequestStepId !== null) {
-            const n = Number(options.initRequestStepId);
-            if (!Number.isNaN(n))
-                bodyPayload.RequestStepId = n;
-        }
-        const initRes = yield fetch(new URL("/api/initializeChat", apiBase).toString(), {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-                "api-key": apiKey,
-                Authorization: authToken,
-            },
-            credentials: "include",
-            body: JSON.stringify(bodyPayload),
-        });
-        if (!initRes.ok) {
-            let msg = "";
-            try {
-                msg = yield initRes.text();
-            }
-            catch (_g) { }
-            throw new Error(`initializeChat failed: ${initRes.status} ${initRes.statusText}${msg ? ` - ${msg}` : ""}`);
-        }
-        const initPayload = yield initRes.json().catch(() => ({}));
-        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);
-        }
-        localStorage_1.ls.set((0, storageKeys_1.getInitCompletedKey)(resolvedSessionId), true);
-        return { initialized: true, sessionId: resolvedSessionId, payload: initPayload };
-    });
-}
 function InitializeChatClients() {
     return __awaiter(this, arguments, void 0, function* (options = {}) {
         var _a, _b, _c;
@@ -158,13 +86,14 @@ function InitializeChatClients() {
 }
 function FinalizeSession() {
     return __awaiter(this, arguments, void 0, function* (options = {}) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const config = GetConfig();
         const apiBase = chatDefaults_1.DEFAULT_API_BASE;
         const apiKey = chatDefaults_1.DEFAULT_API_KEY;
-        const sessionId = localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.sessionId, "");
-        const domain = ((_a = options.domain) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.domain, "")).trim();
-        const authToken = normalizeAuthToken((_c = (_b = options.token) !== null && _b !== void 0 ? _b : config.token) !== null && _c !== void 0 ? _c : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, ""));
+        const sessionId = (_a = options.sessionId) !== null && _a !== void 0 ? _a : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.sessionId, "");
+        const defaultDomain = config.isDab ? chatDefaults_1.DEFAULT_DOMAIN : "";
+        const domain = ((_b = options.domain) !== null && _b !== void 0 ? _b : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.domain, defaultDomain)).trim();
+        const authToken = normalizeAuthToken((_d = (_c = options.token) !== null && _c !== void 0 ? _c : config.token) !== null && _d !== void 0 ? _d : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.authToken, ""));
         if (!apiBase || !apiKey || !sessionId)
             return false;
         try {
@@ -176,13 +105,21 @@ function FinalizeSession() {
                     SessionId: sessionId,
                 }),
             });
-            localStorage_1.ls.remove((0, storageKeys_1.getMessagesKey)(sessionId));
-            localStorage_1.ls.remove((0, storageKeys_1.getInitCompletedKey)(sessionId));
-            localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.authToken, "");
-            localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.initUsername, "");
+            localStorage_1.ls.removeByPrefix(storageKeys_1.STORAGE_KEYS.messagesPrefix);
+            localStorage_1.ls.removeByPrefix(storageKeys_1.STORAGE_KEYS.initCompletedPrefix);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.serviceBaseUrl);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.apiSubscriptionKey);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.loginSubscriptionKey);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.authToken);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.sessionId);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.contextWindow);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.initUsername);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.domain);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.speechLang);
+            localStorage_1.ls.remove(storageKeys_1.STORAGE_KEYS.ttsLang);
             return true;
         }
-        catch (_d) {
+        catch (_e) {
             return false;
         }
     });

package/dist/styles.css

@@ -567,12 +567,18 @@ video {
 .bottom-0 {
   bottom: 0px;
 }
+.bottom-1\/2 {
+  bottom: 50%;
+}
 .bottom-2 {
   bottom: 0.5rem;
 }
 .bottom-3 {
   bottom: 0.75rem;
 }
+.left-0 {
+  left: 0px;
+}
 .left-1\/2 {
   left: 50%;
 }
@@ -606,6 +612,9 @@ video {
 .z-10 {
   z-index: 10;
 }
+.z-20 {
+  z-index: 20;
+}
 .z-40 {
   z-index: 40;
 }
@@ -625,6 +634,9 @@ video {
 .mb-4 {
   margin-bottom: 1rem;
 }
+.mb-6 {
+  margin-bottom: 1.5rem;
+}
 .ml-1 {
   margin-left: 0.25rem;
 }
@@ -706,9 +718,15 @@ 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;
 }
@@ -757,6 +775,9 @@ video {
 .max-w-\[85\%\] {
   max-width: 85%;
 }
+.max-w-md {
+  max-width: 28rem;
+}
 .max-w-xl {
   max-width: 36rem;
 }
@@ -766,6 +787,10 @@ video {
 .shrink-0 {
   flex-shrink: 0;
 }
+.-translate-x-1\/2 {
+  --tw-translate-x: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
 .-translate-y-1\/2 {
   --tw-translate-y: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1083,6 +1108,12 @@ video {
 .pb-2 {
   padding-bottom: 0.5rem;
 }
+.pb-28 {
+  padding-bottom: 7rem;
+}
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
 .pl-6 {
   padding-left: 1.5rem;
 }
@@ -1098,6 +1129,9 @@ video {
 .pt-24 {
   padding-top: 6rem;
 }
+.pt-6 {
+  padding-top: 1.5rem;
+}
 .text-left {
   text-align: left;
 }

package/package.json

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