mcp-chat-ui 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -19,13 +19,51 @@ npm install mcp-chat-ui
19
19
 
20
20
  ## Quick Start
21
21
 
22
+ ### For React Projects
23
+
22
24
  Import CSS in App.tsx
23
25
 
24
26
  ```App.tsx
25
27
  import "mcp-chat-ui/styles.css";
28
+ ```
29
+
30
+ ### For Angular Projects
31
+
32
+ **Option 1: Import in global styles.css (Recommended)**
33
+
34
+ Open your `src/styles.css` file and add this import at the top:
26
35
 
36
+ ```css
37
+ @import "mcp-chat-ui/dist/styles.css";
27
38
  ```
28
39
 
40
+ **Option 2: Add to angular.json**
41
+
42
+ If Option 1 doesn't work, add the CSS file to your `angular.json` configuration:
43
+
44
+ ```json
45
+ {
46
+ "projects": {
47
+ "your-app-name": {
48
+ "architect": {
49
+ "build": {
50
+ "options": {
51
+ "styles": [
52
+ "src/styles.css",
53
+ "node_modules/mcp-chat-ui/dist/styles.css"
54
+ ]
55
+ }
56
+ }
57
+ }
58
+ }
59
+ }
60
+ }
61
+ ```
62
+
63
+ **Important:** Do **not** import the CSS in TypeScript/component files for Angular projects. After making changes, restart your Angular dev server (`ng serve`).
64
+
65
+ ### Initialize the SDK
66
+
29
67
  Initialize the SDK (required):
30
68
 
31
69
  ```ts
package/dist/ChatUI.js CHANGED
@@ -576,6 +576,8 @@ function ChatUI(props) {
576
576
  (0, react_1.useEffect)(() => {
577
577
  if (!apiBase || !apiKey || !sessionId)
578
578
  return;
579
+ if (!authToken || !initCompleted)
580
+ return;
579
581
  const controller = new AbortController();
580
582
  let cancelled = false;
581
583
  (() => __awaiter(this, void 0, void 0, function* () {
@@ -655,7 +657,7 @@ function ChatUI(props) {
655
657
  cancelled = true;
656
658
  controller.abort();
657
659
  };
658
- }, [apiBase, apiKey, authToken, sessionId, domain]);
660
+ }, [apiBase, apiKey, authToken, sessionId, domain, initCompleted]);
659
661
  const canSend = (0, react_1.useMemo)(() => (!!input.trim() || selectedFiles.length > 0 || !!selectedTaskCard) &&
660
662
  !!sessionId &&
661
663
  !!apiBase &&
@@ -979,6 +981,10 @@ function ChatUI(props) {
979
981
  function sendMessage() {
980
982
  return __awaiter(this, void 0, void 0, function* () {
981
983
  var _a, _b;
984
+ const selectedTask = selectedTaskCard;
985
+ if (selectedTask) {
986
+ setSelectedTaskCard(null);
987
+ }
982
988
  if (!sessionId)
983
989
  return;
984
990
  if (!initCompleted) {
@@ -991,7 +997,7 @@ function ChatUI(props) {
991
997
  const promptText = input.trim();
992
998
  const hasText = !!promptText;
993
999
  const hasFiles = selectedFiles.length > 0;
994
- const hasSelectedCard = !!selectedTaskCard;
1000
+ const hasSelectedCard = !!selectedTask;
995
1001
  if (!hasText && !hasFiles && !hasSelectedCard)
996
1002
  return;
997
1003
  const filesToUpload = selectedFiles;
@@ -1000,7 +1006,7 @@ function ChatUI(props) {
1000
1006
  }));
1001
1007
  const selectionLine = hasSelectedCard
1002
1008
  ? formatText(text.composer.selectionLineTemplate, {
1003
- id: String((_a = selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== null && _a !== void 0 ? _a : ""),
1009
+ id: String((_a = selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== null && _a !== void 0 ? _a : ""),
1004
1010
  })
1005
1011
  : "";
1006
1012
  const userContent = selectionLine
@@ -1075,8 +1081,8 @@ function ChatUI(props) {
1075
1081
  SessionId: sessionId,
1076
1082
  UserMessage: userContent,
1077
1083
  };
1078
- if ((selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== undefined && (selectedTaskCard === null || selectedTaskCard === void 0 ? void 0 : selectedTaskCard.RequestId) !== null) {
1079
- payload.RequestId = selectedTaskCard.RequestId;
1084
+ if ((selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== undefined && (selectedTask === null || selectedTask === void 0 ? void 0 : selectedTask.RequestId) !== null) {
1085
+ payload.RequestId = selectedTask.RequestId;
1080
1086
  }
1081
1087
  if (initServiceId && initServiceId.trim() !== "") {
1082
1088
  const n = Number(initServiceId);
@@ -5,15 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.default = Composer;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
- const lucide_react_1 = require("lucide-react");
8
+ const lu_1 = require("react-icons/lu");
9
9
  const classNames_1 = require("../utils/classNames");
10
10
  const VoiceOverlay_1 = __importDefault(require("./VoiceOverlay"));
11
11
  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, }) {
12
12
  var _a;
13
- 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)(lucide_react_1.Plus, { 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)(lucide_react_1.X, { 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)(lucide_react_1.Paperclip, { 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)(lucide_react_1.X, { 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
13
+ 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
14
14
  ? text.placeholderAuthRequired
15
15
  : text.placeholderDefault, className: "max-h-80 w-full resize-none bg-transparent px-1 py-1 outline-none", style: {
16
16
  direction: inputIsRtl ? "rtl" : "ltr",
17
17
  textAlign: inputIsRtl ? "right" : "left",
18
- } })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onToggleVoice, disabled: !authToken || pending, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center rounded-full bg-transparent transition", !authToken || pending ? "opacity-60" : "hover:bg-gray-50"), title: voiceMode ? text.voiceStopTitle : text.voiceStartTitle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Mic, { className: "h-4 w-4 text-gray-700" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onSendMessage, disabled: !canSend, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center rounded-full bg-transparent transition", canSend ? "hover:bg-gray-50" : "opacity-60"), title: text.sendTitle, children: pending ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin text-gray-700" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Send, { className: "h-4 w-4 text-gray-700" })) })] }), voiceError && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 rounded-md bg-red-50 px-3 py-2 text-xs text-red-700", children: voiceError }))] }) }) }));
18
+ } })] }), (0, jsx_runtime_1.jsx)("button", { onClick: onToggleVoice, disabled: !authToken || pending, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center rounded-full bg-transparent transition", !authToken || pending ? "opacity-60" : "hover:bg-gray-50"), title: voiceMode ? text.voiceStopTitle : text.voiceStartTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuMic, { className: "h-4 w-4 text-gray-700" }) }), (0, jsx_runtime_1.jsx)("button", { onClick: onSendMessage, disabled: !canSend, className: (0, classNames_1.classNames)("inline-flex h-9 w-9 items-center justify-center rounded-full bg-transparent transition", canSend ? "hover:bg-gray-50" : "opacity-60"), title: text.sendTitle, children: pending ? ((0, jsx_runtime_1.jsx)(lu_1.LuLoader, { className: "h-4 w-4 animate-spin text-gray-700" })) : ((0, jsx_runtime_1.jsx)(lu_1.LuSend, { className: "h-4 w-4 text-gray-700" })) })] }), voiceError && ((0, jsx_runtime_1.jsx)("div", { className: "mt-2 rounded-md bg-red-50 px-3 py-2 text-xs text-red-700", children: voiceError }))] }) }) }));
19
19
  }
@@ -3,14 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = DocumentViewer;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  const classNames_1 = require("../utils/classNames");
8
8
  function DocumentViewer({ overlayUrl, viewerLoading, viewerUrl, viewerKey, viewerFilename, gdocUrl, blobUrl, viewerError, onClose, onDownload, onIframeLoad, onUseGoogleViewer, onUseDirectViewer, takeActionProceedOpen, takeActionSubmitting, takeActionError, onProceedTakeAction, textButtonTheme, text, }) {
9
9
  return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: overlayUrl && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 bg-[#252525]/50", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.96, opacity: 0 }, transition: {
10
10
  type: "spring",
11
11
  stiffness: 300,
12
12
  damping: 28,
13
- }, className: "relative h-[95vh] w-[50vw] overflow-hidden rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "truncate text-sm font-semibold", children: text.title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { className: (0, classNames_1.classNames)("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition", textButtonTheme), onClick: onDownload, type: "button", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Download, { className: "h-3.5 w-3.5" }), " ", text.downloadButton] }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(95vh-52px)]", children: [viewerLoading && ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center text-sm text-gray-600", children: text.loading })), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-full w-full", children: [viewerUrl && ((0, jsx_runtime_1.jsx)("iframe", { src: viewerUrl, title: viewerFilename || text.iframeTitle, className: viewerLoading
13
+ }, className: "relative h-[95vh] w-[50vw] overflow-hidden rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "truncate text-sm font-semibold", children: text.title }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { className: (0, classNames_1.classNames)("inline-flex items-center gap-1 rounded-md px-2 py-1 text-xs font-medium transition", textButtonTheme), onClick: onDownload, type: "button", children: [(0, jsx_runtime_1.jsx)(lu_1.LuDownload, { className: "h-3.5 w-3.5" }), " ", text.downloadButton] }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-5 w-5" }) })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "h-[calc(95vh-52px)]", children: [viewerLoading && ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full w-full items-center justify-center text-sm text-gray-600", children: text.loading })), (0, jsx_runtime_1.jsxs)("div", { className: "relative h-full w-full", children: [viewerUrl && ((0, jsx_runtime_1.jsx)("iframe", { src: viewerUrl, title: viewerFilename || text.iframeTitle, className: viewerLoading
14
14
  ? "h-full w-full opacity-0"
15
- : "h-full w-full opacity-100", onLoad: onIframeLoad, referrerPolicy: "no-referrer", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups" }, viewerKey)), gdocUrl && blobUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-none absolute right-2 top-2 flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto rounded-md px-2 py-1 text-xs shadow transition", textButtonTheme), onClick: onUseGoogleViewer, children: text.useGoogleViewer }), (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto rounded-md px-2 py-1 text-xs shadow transition", textButtonTheme), onClick: onUseDirectViewer, children: text.useDirectViewer })] }))] }), viewerError && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t bg-amber-50 px-4 py-2 text-xs text-amber-700", children: [viewerError, ". ", text.errorSuffix] }))] }), takeActionProceedOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute bottom-3 left-3 flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: onProceedTakeAction, disabled: takeActionSubmitting, children: takeActionSubmitting ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" })) : (text.proceedButton) }) }), takeActionError && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-3 right-3 max-w-[60%] rounded-xl bg-red-50 px-3 py-2 text-xs text-red-700 shadow", children: takeActionError }))] }))] }) }) })) }));
15
+ : "h-full w-full opacity-100", onLoad: onIframeLoad, referrerPolicy: "no-referrer", sandbox: "allow-scripts allow-same-origin allow-forms allow-popups" }, viewerKey)), gdocUrl && blobUrl && ((0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-none absolute right-2 top-2 flex gap-2", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto rounded-md px-2 py-1 text-xs shadow transition", textButtonTheme), onClick: onUseGoogleViewer, children: text.useGoogleViewer }), (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto rounded-md px-2 py-1 text-xs shadow transition", textButtonTheme), onClick: onUseDirectViewer, children: text.useDirectViewer })] }))] }), viewerError && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t bg-amber-50 px-4 py-2 text-xs text-amber-700", children: [viewerError, ". ", text.errorSuffix] }))] }), takeActionProceedOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "pointer-events-none absolute bottom-3 left-3 flex items-center gap-2", children: (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("pointer-events-auto inline-flex items-center justify-center rounded-xl px-4 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: onProceedTakeAction, disabled: takeActionSubmitting, children: takeActionSubmitting ? ((0, jsx_runtime_1.jsx)(lu_1.LuLoader, { className: "h-4 w-4 animate-spin" })) : (text.proceedButton) }) }), takeActionError && ((0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-3 right-3 max-w-[60%] rounded-xl bg-red-50 px-3 py-2 text-xs text-red-700 shadow", children: takeActionError }))] }))] }) }) })) }));
16
16
  }
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = InitPanel;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  const classNames_1 = require("../utils/classNames");
8
8
  function InitPanel({ show, onClose, requiredConfig, initPreset, setInitPreset, initUsername, setInitUsername, initPassword, setInitPassword, domain, setDomain, initContextWindow, setInitContextWindow, initServiceId, setInitServiceId, initRequestStepId, setInitRequestStepId, sessionId, setSessionId, speechLang, setSpeechLang, ttsLang, setTtsLang, initLoading, onInitialize, textButtonTheme, }) {
9
9
  const presetOptions = [
@@ -16,5 +16,5 @@ function InitPanel({ show, onClose, requiredConfig, initPreset, setInitPreset, i
16
16
  type: "spring",
17
17
  stiffness: 280,
18
18
  damping: 30,
19
- }, className: "absolute right-0 top-0 flex h-full w-full max-w-xl flex-col rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold", children: "Login & initialize chat" }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-50", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto px-6 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-3", children: presetOptions.map((preset) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setInitPreset(preset.id), className: (0, classNames_1.classNames)("flex-1 rounded-full px-3 py-2 text-sm font-medium transition", textButtonTheme, initPreset === preset.id ? null : "opacity-80"), children: preset.label }, preset.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "rounded-2xl border px-4 py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-semibold text-gray-500", children: "Required SDK settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Token" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: token, onChange: (e) => setToken(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Base URL" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: baseUrl, onChange: (e) => setBaseUrl(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "API Subscription Key" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: apiSubscriptionKey, onChange: (e) => setApiSubscriptionKey(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Login Subscription Key" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: loginSubscriptionKey, onChange: (e) => setLoginSubscriptionKey(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Is Dab" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem] text-xs", value: isDab ? "true" : "false", onChange: (e) => setIsDab(e.target.value === "true"), children: [(0, jsx_runtime_1.jsx)("option", { value: "false", children: "false" }), (0, jsx_runtime_1.jsx)("option", { value: "true", children: "true" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Domain" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "domain (e.g. dab.ae)", value: domain, onChange: (e) => setDomain(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Username" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "username", value: initUsername, onChange: (e) => setInitUsername(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Password" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "********", value: initPassword, onChange: (e) => setInitPassword(e.target.value), type: "password" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Context window" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: initContextWindow, onChange: (e) => setInitContextWindow(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "ComposeRequest", children: "ComposeRequest" }), (0, jsx_runtime_1.jsx)("option", { value: "TakeAction", children: "TakeAction" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "ServiceId (optional)" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "e.g. 1001", value: initServiceId, onChange: (e) => setInitServiceId(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "RequestStepId (optional)" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "e.g. 2001", value: initRequestStepId, onChange: (e) => setInitRequestStepId(e.target.value), type: "text" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "mb-1 block text-sm font-medium", children: ["Session ID", " ", (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-400", children: "(will be overridden by initializeChat)" })] }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono", placeholder: "session Id", value: sessionId, onChange: (e) => setSessionId(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Transcription language" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: speechLang, onChange: (e) => setSpeechLang(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "en-US", children: "English (US)" }), (0, jsx_runtime_1.jsx)("option", { value: "ar-JO", children: "Arabic (Jordan)" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "TTS Language" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: ttsLang, onChange: (e) => setTtsLang(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "en-US", children: "English (US)" }), (0, jsx_runtime_1.jsx)("option", { value: "ar-EG", children: "Arabic (EG)" })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-2", children: (0, jsx_runtime_1.jsxs)("button", { onClick: onInitialize, disabled: initLoading, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm shadow-sm transition", textButtonTheme, initLoading ? "opacity-60" : null), children: [initLoading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.LogIn, { className: "h-4 w-4" })), (0, jsx_runtime_1.jsx)("span", { children: initLoading ? "Signing in…" : "Sign in" })] }) })] }) })] }) })) }));
19
+ }, className: "absolute right-0 top-0 flex h-full w-full max-w-xl flex-col rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between border-b px-4 py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold", children: "Login & initialize chat" }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-50", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto px-6 py-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-3", children: presetOptions.map((preset) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setInitPreset(preset.id), className: (0, classNames_1.classNames)("flex-1 rounded-full px-3 py-2 text-sm font-medium transition", textButtonTheme, initPreset === preset.id ? null : "opacity-80"), children: preset.label }, preset.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "rounded-2xl border px-4 py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs font-semibold text-gray-500", children: "Required SDK settings" }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 grid grid-cols-1 gap-3 sm:grid-cols-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Token" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: token, onChange: (e) => setToken(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Base URL" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: baseUrl, onChange: (e) => setBaseUrl(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "API Subscription Key" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: apiSubscriptionKey, onChange: (e) => setApiSubscriptionKey(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { className: "sm:col-span-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Login Subscription Key" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono text-xs", value: loginSubscriptionKey, onChange: (e) => setLoginSubscriptionKey(e.target.value), spellCheck: false })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-xs font-medium", children: "Is Dab" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem] text-xs", value: isDab ? "true" : "false", onChange: (e) => setIsDab(e.target.value === "true"), children: [(0, jsx_runtime_1.jsx)("option", { value: "false", children: "false" }), (0, jsx_runtime_1.jsx)("option", { value: "true", children: "true" })] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Domain" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "domain (e.g. dab.ae)", value: domain, onChange: (e) => setDomain(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Username" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "username", value: initUsername, onChange: (e) => setInitUsername(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Password" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "********", value: initPassword, onChange: (e) => setInitPassword(e.target.value), type: "password" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Context window" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: initContextWindow, onChange: (e) => setInitContextWindow(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "ComposeRequest", children: "ComposeRequest" }), (0, jsx_runtime_1.jsx)("option", { value: "TakeAction", children: "TakeAction" })] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "ServiceId (optional)" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "e.g. 1001", value: initServiceId, onChange: (e) => setInitServiceId(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "RequestStepId (optional)" }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2", placeholder: "e.g. 2001", value: initRequestStepId, onChange: (e) => setInitRequestStepId(e.target.value), type: "text" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "mb-1 block text-sm font-medium", children: ["Session ID", " ", (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-gray-400", children: "(will be overridden by initializeChat)" })] }), (0, jsx_runtime_1.jsx)("input", { className: "w-full rounded-xl border px-3 py-2 font-mono", placeholder: "session Id", value: sessionId, onChange: (e) => setSessionId(e.target.value), type: "text" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "Transcription language" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: speechLang, onChange: (e) => setSpeechLang(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "en-US", children: "English (US)" }), (0, jsx_runtime_1.jsx)("option", { value: "ar-JO", children: "Arabic (Jordan)" })] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: "TTS Language" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem]", value: ttsLang, onChange: (e) => setTtsLang(e.target.value), children: [(0, jsx_runtime_1.jsx)("option", { value: "en-US", children: "English (US)" }), (0, jsx_runtime_1.jsx)("option", { value: "ar-EG", children: "Arabic (EG)" })] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-2", children: (0, jsx_runtime_1.jsxs)("button", { onClick: onInitialize, disabled: initLoading, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm shadow-sm transition", textButtonTheme, initLoading ? "opacity-60" : null), children: [initLoading ? ((0, jsx_runtime_1.jsx)(lu_1.LuLoader, { className: "h-4 w-4 animate-spin" })) : ((0, jsx_runtime_1.jsx)(lu_1.LuLogIn, { className: "h-4 w-4" })), (0, jsx_runtime_1.jsx)("span", { children: initLoading ? "Signing in…" : "Sign in" })] }) })] }) })] }) })) }));
20
20
  }
@@ -6,13 +6,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.default = MessageItem;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const framer_motion_1 = require("framer-motion");
9
- const lucide_react_1 = require("lucide-react");
9
+ const lu_1 = require("react-icons/lu");
10
10
  const FormattedText_1 = __importDefault(require("./FormattedText"));
11
11
  const classNames_1 = require("../utils/classNames");
12
12
  const format_1 = require("../utils/format");
13
13
  function MessageItem({ m, openOverlay, isRtl, onOpenTaskCard, onSelectTaskCard, selectedTaskCardId, canSpeak, isSpeaking, onSpeak, onStopSpeak, textButtonTheme, text, taskCardSize, }) {
14
14
  const isUser = m.role === "User";
15
- const alignRight = isUser;
15
+ const alignRight = isUser || isRtl;
16
16
  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
17
17
  ? "rounded-2xl px-4 py-3 shadow-sm"
18
18
  : "px-1 py-0"), style: Object.assign({ direction: isRtl ? "rtl" : "ltr", textAlign: isRtl ? "right" : "left" }, (isUser
@@ -20,7 +20,7 @@ function MessageItem({ m, openOverlay, isRtl, onOpenTaskCard, onSelectTaskCard,
20
20
  backgroundColor: "var(--chat-user-message-bg)",
21
21
  color: "var(--chat-user-message-text)",
22
22
  }
23
- : {})), 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)(lucide_react_1.Paperclip, { 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) => {
23
+ : {})), 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) => {
24
24
  var _a, _b, _c, _d, _e, _f, _g;
25
25
  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 : "";
26
26
  const preview = String(requestSummary).slice(0, 125);
@@ -46,5 +46,5 @@ function MessageItem({ m, openOverlay, isRtl, onOpenTaskCard, onSelectTaskCard,
46
46
  width: (_f = taskCardSize.width) !== null && _f !== void 0 ? _f : 280,
47
47
  height: taskCardSize.height,
48
48
  }, title: onSelectTaskCard ? text.selectCardTitle : undefined, children: CardInner }, `${String((_g = card === null || card === void 0 ? void 0 : card.RequestId) !== null && _g !== void 0 ? _g : idx)}-${idx}`));
49
- }) }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex items-center justify-between text-[10px] text-gray-500", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, format_1.fmtTime)(m.ts) }), !isUser && canSpeak && onSpeak && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [isSpeaking && onStopSpeak && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onStopSpeak, className: "flex h-8 w-8 items-center justify-center rounded-full bg-[#252525] text-white shadow-sm hover:bg-gray-800", title: text.stopReadingTitle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onSpeak, className: "flex h-8 w-8 items-center justify-center rounded-full bg-transparent text-gray-700 shadow-none transition hover:bg-gray-50", title: text.readMessageTitle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Volume2, { className: "h-4 w-4" }) })] }))] })] }) }));
49
+ }) }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-1 flex items-center justify-between text-[10px] text-gray-500", children: [(0, jsx_runtime_1.jsx)("span", { children: (0, format_1.fmtTime)(m.ts) }), !isUser && canSpeak && onSpeak && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [isSpeaking && onStopSpeak && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onStopSpeak, className: "flex h-8 w-8 items-center justify-center rounded-full bg-[#252525] text-white shadow-sm hover:bg-gray-800", title: text.stopReadingTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-4 w-4" }) })), (0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onSpeak, className: "flex h-8 w-8 items-center justify-center rounded-full bg-transparent text-gray-700 shadow-none transition hover:bg-gray-50", title: text.readMessageTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuVolume2, { className: "h-4 w-4" }) })] }))] })] }) }));
50
50
  }
@@ -15,5 +15,5 @@ function MessageList({ messages, pending, openOverlay, onOpenTaskCard, onSelectT
15
15
  !!m.content &&
16
16
  m.content.trim() !== "";
17
17
  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}`));
18
- }), pending && (0, jsx_runtime_1.jsx)(TypingDots_1.default, {}, "typing")] }) }), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef })] }) }));
18
+ }), pending && (0, jsx_runtime_1.jsx)(TypingDots_1.default, { alignRight: isRtl }, "typing")] }) }), (0, jsx_runtime_1.jsx)("div", { ref: listEndRef })] }) }));
19
19
  }
@@ -3,10 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = TakeActionModal;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  const classNames_1 = require("../utils/classNames");
8
8
  function TakeActionModal({ open, activeTaskCard, takeActionStep, takeActionChoice, takeActionComments, takeActionSubmitting, takeActionError, visibleAttributes, signatureAlias, userSignatures, onBack, onClose, onChoiceChange, onCommentsChange, onStepChange, onSubmit, onUpdateAttribute, getSignatureLabel, textButtonTheme, text, }) {
9
- return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && activeTaskCard && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 bg-[#252525]/40", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0, y: 8 }, animate: { scale: 1, opacity: 1, y: 0 }, exit: { scale: 0.96, opacity: 0, y: 8 }, transition: { type: "spring", stiffness: 320, damping: 28 }, className: "flex h-[70vh] w-[90vw] flex-col rounded-2xl bg-white shadow-2xl sm:h-[60vh] sm:w-[70vw] md:h-[55vh] md:w-[60vw] lg:h-[50vh] lg:w-[44vw]", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onBack, type: "button", "aria-label": text.backAriaLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, type: "button", "aria-label": text.closeAriaLabel, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-auto px-4 py-3", children: [takeActionStep === 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: text.actionTypeLabel }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem] text-sm focus:outline-none", value: takeActionChoice, onChange: (e) => onChoiceChange(e.target.value), disabled: takeActionSubmitting, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: text.selectActionPlaceholder }), (0, jsx_runtime_1.jsx)("option", { value: "Approve", children: text.approveOption }), (0, jsx_runtime_1.jsx)("option", { value: "Reject", children: text.rejectOption })] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: text.commentsLabel }), (0, jsx_runtime_1.jsx)("textarea", { className: "min-h-[110px] w-full resize-none rounded-xl border px-3 py-2 text-sm focus:outline-none", placeholder: text.commentsPlaceholder, value: takeActionComments, onChange: (e) => onCommentsChange(e.target.value), disabled: takeActionSubmitting })] })] })), takeActionStep === 2 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [visibleAttributes.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: text.noEditableAttributes })), visibleAttributes.map((attr) => {
9
+ return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && activeTaskCard && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 bg-[#252525]/40", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0, y: 8 }, animate: { scale: 1, opacity: 1, y: 0 }, exit: { scale: 0.96, opacity: 0, y: 8 }, transition: { type: "spring", stiffness: 320, damping: 28 }, className: "flex h-[70vh] w-[90vw] flex-col rounded-2xl bg-white shadow-2xl sm:h-[60vh] sm:w-[70vw] md:h-[55vh] md:w-[60vw] lg:h-[50vh] lg:w-[44vw]", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onBack, type: "button", "aria-label": text.backAriaLabel, children: (0, jsx_runtime_1.jsx)(lu_1.LuArrowLeft, { className: "h-5 w-5" }) }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, type: "button", "aria-label": text.closeAriaLabel, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 overflow-auto px-4 py-3", children: [takeActionStep === 1 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: text.actionTypeLabel }), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem] text-sm focus:outline-none", value: takeActionChoice, onChange: (e) => onChoiceChange(e.target.value), disabled: takeActionSubmitting, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: text.selectActionPlaceholder }), (0, jsx_runtime_1.jsx)("option", { value: "Approve", children: text.approveOption }), (0, jsx_runtime_1.jsx)("option", { value: "Reject", children: text.rejectOption })] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("label", { className: "mb-1 block text-sm font-medium", children: text.commentsLabel }), (0, jsx_runtime_1.jsx)("textarea", { className: "min-h-[110px] w-full resize-none rounded-xl border px-3 py-2 text-sm focus:outline-none", placeholder: text.commentsPlaceholder, value: takeActionComments, onChange: (e) => onCommentsChange(e.target.value), disabled: takeActionSubmitting })] })] })), takeActionStep === 2 && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [visibleAttributes.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "text-sm text-gray-600", children: text.noEditableAttributes })), visibleAttributes.map((attr) => {
10
10
  const isSignature = signatureAlias && attr.Alias === signatureAlias;
11
11
  const value = attr.Value === null || attr.Value === undefined
12
12
  ? ""
@@ -21,6 +21,6 @@ function TakeActionModal({ open, activeTaskCard, takeActionStep, takeActionChoic
21
21
  const showOptionsSelect = effectiveOptions.length > 0;
22
22
  return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("label", { className: "mb-1 block text-sm font-medium", children: [attr.Name, attr.IsRequired ? " *" : ""] }), showOptionsSelect ? ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsxs)("select", { className: "w-full appearance-none rounded-xl border px-3 py-2 pr-[2.25rem] text-sm focus:outline-none", value: value, onChange: (e) => onUpdateAttribute(attr, e.target.value), disabled: disabled, children: [(0, jsx_runtime_1.jsx)("option", { value: "", children: isSignature
23
23
  ? text.selectSignaturePlaceholder
24
- : text.selectOptionPlaceholder }), effectiveOptions.map((sig) => ((0, jsx_runtime_1.jsx)("option", { value: sig.interactorSignatureId, children: getSignatureLabel(sig) }, sig.interactorSignatureId)))] }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })) : ((0, jsx_runtime_1.jsx)("input", { className: (0, classNames_1.classNames)("w-full rounded-xl border px-3 py-2 text-sm focus:outline-none", disabled ? "bg-gray-50 text-gray-500" : "bg-white"), value: value, onChange: (e) => onUpdateAttribute(attr, e.target.value), disabled: disabled, placeholder: isSignature ? text.signaturePlaceholder : undefined }))] }, `${attr.AttributeTypeId}-${attr.Alias}`));
25
- })] }))] }), takeActionError && ((0, jsx_runtime_1.jsx)("div", { className: "border-t bg-red-50 px-4 py-2 text-xs text-red-700", children: takeActionError })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition", textButtonTheme), type: "button", onClick: onClose, disabled: takeActionSubmitting, children: text.cancelButton }), takeActionStep === 2 ? ((0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: onSubmit, disabled: takeActionSubmitting || !takeActionChoice, children: takeActionSubmitting ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin" })) : (text.submitButton) })) : ((0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: () => onStepChange(2), disabled: !takeActionChoice || takeActionSubmitting, children: text.nextButton }))] })] }) }) })) }));
24
+ : text.selectOptionPlaceholder }), effectiveOptions.map((sig) => ((0, jsx_runtime_1.jsx)("option", { value: sig.interactorSignatureId, children: getSignatureLabel(sig) }, sig.interactorSignatureId)))] }), (0, jsx_runtime_1.jsx)(lu_1.LuChevronDown, { className: "pointer-events-none absolute right-[0.9rem] top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" })] })) : ((0, jsx_runtime_1.jsx)("input", { className: (0, classNames_1.classNames)("w-full rounded-xl border px-3 py-2 text-sm focus:outline-none", disabled ? "bg-gray-50 text-gray-500" : "bg-white"), value: value, onChange: (e) => onUpdateAttribute(attr, e.target.value), disabled: disabled, placeholder: isSignature ? text.signaturePlaceholder : undefined }))] }, `${attr.AttributeTypeId}-${attr.Alias}`));
25
+ })] }))] }), takeActionError && ((0, jsx_runtime_1.jsx)("div", { className: "border-t bg-red-50 px-4 py-2 text-xs text-red-700", children: takeActionError })), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition", textButtonTheme), type: "button", onClick: onClose, disabled: takeActionSubmitting, children: text.cancelButton }), takeActionStep === 2 ? ((0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: onSubmit, disabled: takeActionSubmitting || !takeActionChoice, children: takeActionSubmitting ? ((0, jsx_runtime_1.jsx)(lu_1.LuLoader, { className: "h-4 w-4 animate-spin" })) : (text.submitButton) })) : ((0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: () => onStepChange(2), disabled: !takeActionChoice || takeActionSubmitting, children: text.nextButton }))] })] }) }) })) }));
26
26
  }
@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = TaskCardsModal;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  const classNames_1 = require("../utils/classNames");
8
8
  function TaskCardsModal({ open, card, onClose, onTakeAction, onShowDocument, textButtonTheme, text, }) {
9
9
  var _a, _b, _c, _d, _e, _f;
10
- return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && card && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 bg-[#252525]/40", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0, y: 8 }, animate: { scale: 1, opacity: 1, y: 0 }, exit: { scale: 0.96, opacity: 0, y: 8 }, transition: { type: "spring", stiffness: 320, damping: 28 }, className: "flex h-[80vh] w-[90vw] flex-col rounded-2xl bg-white shadow-2xl sm:h-[75vh] sm:w-[70vw] md:h-[65vh] md:w-[60vw] lg:h-[44vh] lg:w-[44vw]", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "truncate text-sm font-semibold", children: text.modalTitle }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, type: "button", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto px-4 py-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-900", children: (_b = (_a = card === null || card === void 0 ? void 0 : card.Details) === null || _a === void 0 ? void 0 : _a.RequestSummary) !== null && _b !== void 0 ? _b : "" }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-900", children: (_d = (_c = card === null || card === void 0 ? void 0 : card.Details) === null || _c === void 0 ? void 0 : _c.TaskSummary) !== null && _d !== void 0 ? _d : "" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: () => onTakeAction(card), children: text.takeActionButton }), (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition", textButtonTheme, !((_e = card === null || card === void 0 ? void 0 : card.Details) === null || _e === void 0 ? void 0 : _e.DocumentUrl) && "cursor-not-allowed opacity-50"), type: "button", disabled: !((_f = card === null || card === void 0 ? void 0 : card.Details) === null || _f === void 0 ? void 0 : _f.DocumentUrl), onClick: () => {
10
+ return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: open && card && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-50 bg-[#252525]/40", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0, y: 8 }, animate: { scale: 1, opacity: 1, y: 0 }, exit: { scale: 0.96, opacity: 0, y: 8 }, transition: { type: "spring", stiffness: 320, damping: 28 }, className: "flex h-[80vh] w-[90vw] flex-col rounded-2xl bg-white shadow-2xl sm:h-[75vh] sm:w-[70vw] md:h-[65vh] md:w-[60vw] lg:h-[44vh] lg:w-[44vw]", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "truncate text-sm font-semibold", children: text.modalTitle }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-100", onClick: onClose, type: "button", "aria-label": "Close", children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 overflow-auto px-4 py-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-900", children: (_b = (_a = card === null || card === void 0 ? void 0 : card.Details) === null || _a === void 0 ? void 0 : _a.RequestSummary) !== null && _b !== void 0 ? _b : "" }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { className: "whitespace-pre-wrap break-words text-sm leading-6 text-gray-900", children: (_d = (_c = card === null || card === void 0 ? void 0 : card.Details) === null || _c === void 0 ? void 0 : _c.TaskSummary) !== null && _d !== void 0 ? _d : "" }) })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-end gap-2 px-4 py-3", children: [(0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium shadow-sm transition", textButtonTheme), type: "button", onClick: () => onTakeAction(card), children: text.takeActionButton }), (0, jsx_runtime_1.jsx)("button", { className: (0, classNames_1.classNames)("inline-flex items-center justify-center rounded-xl px-3 py-2 text-sm font-medium transition", textButtonTheme, !((_e = card === null || card === void 0 ? void 0 : card.Details) === null || _e === void 0 ? void 0 : _e.DocumentUrl) && "cursor-not-allowed opacity-50"), type: "button", disabled: !((_f = card === null || card === void 0 ? void 0 : card.Details) === null || _f === void 0 ? void 0 : _f.DocumentUrl), onClick: () => {
11
11
  var _a;
12
12
  const url = (_a = card === null || card === void 0 ? void 0 : card.Details) === null || _a === void 0 ? void 0 : _a.DocumentUrl;
13
13
  if (!url)
@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = ToolResultOverlay;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  const format_1 = require("../utils/format");
8
8
  function ToolResultOverlay({ show, onClose, lastToolResult, text, }) {
9
9
  return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: show && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 z-40 bg-[#252525]/40", onClick: onClose, children: (0, jsx_runtime_1.jsx)("div", { className: "absolute left-1/2 top-1/2", style: { transform: "translate(-50%, -50%)" }, children: (0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { scale: 0.96, opacity: 0 }, animate: { scale: 1, opacity: 1 }, exit: { scale: 0.96, opacity: 0 }, transition: {
10
10
  type: "spring",
11
11
  stiffness: 300,
12
12
  damping: 28,
13
- }, className: "h-[80vh] w-[80vw] overflow-hidden rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold", children: text.title }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-50", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[calc(80vh-52px)] overflow-auto p-4", children: (0, jsx_runtime_1.jsx)("pre", { className: "whitespace-pre-wrap break-words text-sm leading-6", children: (0, format_1.safeStringify)(lastToolResult) }) })] }) }) })) }));
13
+ }, className: "h-[80vh] w-[80vw] overflow-hidden rounded-2xl bg-white shadow-2xl", onClick: (e) => e.stopPropagation(), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-4 py-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "font-semibold", children: text.title }), (0, jsx_runtime_1.jsx)("button", { className: "rounded-lg p-1 hover:bg-gray-50", onClick: onClose, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-5 w-5" }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[calc(80vh-52px)] overflow-auto p-4", children: (0, jsx_runtime_1.jsx)("pre", { className: "whitespace-pre-wrap break-words text-sm leading-6", children: (0, format_1.safeStringify)(lastToolResult) }) })] }) }) })) }));
14
14
  }
@@ -2,8 +2,8 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = TopBar;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
- const lucide_react_1 = require("lucide-react");
5
+ const lu_1 = require("react-icons/lu");
6
6
  const classNames_1 = require("../utils/classNames");
7
7
  function TopBar({ sessionId, authToken, onClearChat, onLogout, onInitOpen, textButtonTheme, showInitButton = true, text, }) {
8
- return ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-0 z-10 bg-white/95 backdrop-blur", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-3xl flex-wrap items-center justify-between gap-2 px-2 py-3 sm:px-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-gray-500", children: [text.sessionLabel, " ", (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-xs", children: sessionId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: onClearChat, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.clearTitle, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { className: "h-4 w-4" }), " ", text.clearButton] }), showInitButton && authToken ? ((0, jsx_runtime_1.jsxs)("button", { onClick: onLogout, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.logoutTitle, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { className: "h-4 w-4" }), " ", text.logoutButton] })) : showInitButton ? ((0, jsx_runtime_1.jsxs)("button", { onClick: onInitOpen, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.loginTitle, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogIn, { className: "h-4 w-4" }), " ", text.loginButton] })) : null] })] }) }));
8
+ return ((0, jsx_runtime_1.jsx)("div", { className: "sticky top-0 z-10 bg-white/95 backdrop-blur", children: (0, jsx_runtime_1.jsxs)("div", { className: "mx-auto flex w-full max-w-3xl flex-wrap items-center justify-between gap-2 px-2 py-3 sm:px-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-sm text-gray-500", children: [text.sessionLabel, " ", (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-xs", children: sessionId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: onClearChat, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.clearTitle, children: [(0, jsx_runtime_1.jsx)(lu_1.LuTrash2, { className: "h-4 w-4" }), " ", text.clearButton] }), showInitButton && authToken ? ((0, jsx_runtime_1.jsxs)("button", { onClick: onLogout, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.logoutTitle, children: [(0, jsx_runtime_1.jsx)(lu_1.LuLogOut, { className: "h-4 w-4" }), " ", text.logoutButton] })) : showInitButton ? ((0, jsx_runtime_1.jsxs)("button", { onClick: onInitOpen, className: (0, classNames_1.classNames)("inline-flex items-center gap-2 rounded-xl px-3 py-1.5 text-sm shadow-sm transition", textButtonTheme), title: text.loginTitle, children: [(0, jsx_runtime_1.jsx)(lu_1.LuLogIn, { className: "h-4 w-4" }), " ", text.loginButton] })) : null] })] }) }));
9
9
  }
@@ -1 +1,5 @@
1
- export default function TypingDots(): import("react/jsx-runtime").JSX.Element;
1
+ type TypingDotsProps = {
2
+ alignRight?: boolean;
3
+ };
4
+ export default function TypingDots({ alignRight }: TypingDotsProps): import("react/jsx-runtime").JSX.Element;
5
+ export {};
@@ -3,6 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = TypingDots;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- function TypingDots() {
7
- 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]" })] }) }));
6
+ function TypingDots({ alignRight }) {
7
+ 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]" })] }) }));
8
8
  }
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.default = VoiceOverlay;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
5
  const framer_motion_1 = require("framer-motion");
6
- const lucide_react_1 = require("lucide-react");
6
+ const lu_1 = require("react-icons/lu");
7
7
  function VoiceOverlay({ voiceMode, waveData, voiceUploading, onCancel, onConfirm, text, }) {
8
- return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: voiceMode && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, className: "flex w-full justify-center pb-2", style: { transformOrigin: "center" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-[70%] items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCancel, disabled: voiceUploading, className: "inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50", title: text.cancelTitle, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-[70%] items-center justify-center gap-[3px] overflow-hidden", children: waveData.map((h, i) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3px] rounded-full bg-gray-900/80 transition-[height] duration-80", style: { height: `${h}px` } }, i))) }), (0, jsx_runtime_1.jsx)("button", { onClick: onConfirm, disabled: voiceUploading, className: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-white hover:bg-[#252525]", title: text.confirmTitle, children: voiceUploading ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "h-4 w-4 animate-spin text-white" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "h-4 w-4" })) })] }) })) }));
8
+ return ((0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { children: voiceMode && ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -8 }, className: "flex w-full justify-center pb-2", style: { transformOrigin: "center" }, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex w-[70%] items-center justify-center gap-1.5", children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCancel, disabled: voiceUploading, className: "inline-flex h-8 w-8 items-center justify-center rounded-full border border-gray-200 text-gray-700 hover:bg-gray-50", title: text.cancelTitle, children: (0, jsx_runtime_1.jsx)(lu_1.LuX, { className: "h-4 w-4" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex w-[70%] items-center justify-center gap-[3px] overflow-hidden", children: waveData.map((h, i) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3px] rounded-full bg-gray-900/80 transition-[height] duration-80", style: { height: `${h}px` } }, i))) }), (0, jsx_runtime_1.jsx)("button", { onClick: onConfirm, disabled: voiceUploading, className: "inline-flex h-8 w-8 items-center justify-center rounded-full bg-gray-900 text-white hover:bg-[#252525]", title: text.confirmTitle, children: voiceUploading ? ((0, jsx_runtime_1.jsx)(lu_1.LuLoader, { className: "h-4 w-4 animate-spin text-white" })) : ((0, jsx_runtime_1.jsx)(lu_1.LuCheck, { className: "h-4 w-4" })) })] }) })) }));
9
9
  }
package/dist/config.d.ts CHANGED
@@ -168,6 +168,7 @@ export type ChatUISDKConfig = {
168
168
  showInitPanel?: boolean;
169
169
  initializeChat: boolean;
170
170
  contextWindow: string;
171
+ initializeLanguage?: string;
171
172
  };
172
173
  declare class SDKConfigStore {
173
174
  private settings;
@@ -55,7 +55,7 @@ function GetConfigValue(key) {
55
55
  }
56
56
  function InitializeChatSession() {
57
57
  return __awaiter(this, arguments, void 0, function* (options = {}) {
58
- var _a, _b, _c, _d, _e;
58
+ var _a, _b, _c, _d, _e, _f;
59
59
  const config = GetConfig();
60
60
  const apiBase = chatDefaults_1.DEFAULT_API_BASE;
61
61
  const apiKey = chatDefaults_1.DEFAULT_API_KEY;
@@ -79,10 +79,11 @@ function InitializeChatSession() {
79
79
  const defaultDomain = config.isDab ? chatDefaults_1.DEFAULT_DOMAIN : "";
80
80
  const domain = ((_c = options.domain) !== null && _c !== void 0 ? _c : localStorage_1.ls.get(storageKeys_1.STORAGE_KEYS.domain, defaultDomain)).trim();
81
81
  const contextWindow = (_d = options.contextWindow) !== null && _d !== void 0 ? _d : config.contextWindow;
82
+ const initializeLanguage = ((_e = config.initializeLanguage) !== null && _e !== void 0 ? _e : "").trim() || "ar-JO";
82
83
  const bodyPayload = {
83
84
  Domain: domain,
84
85
  ContextWindow: contextWindow || "ComposeRequest",
85
- InitializeLangauge: "ar-JO",
86
+ InitializeLangauge: initializeLanguage,
86
87
  };
87
88
  if (options.initServiceId !== undefined && options.initServiceId !== null) {
88
89
  const n = Number(options.initServiceId);
@@ -110,11 +111,11 @@ function InitializeChatSession() {
110
111
  try {
111
112
  msg = yield initRes.text();
112
113
  }
113
- catch (_f) { }
114
+ catch (_g) { }
114
115
  throw new Error(`initializeChat failed: ${initRes.status} ${initRes.statusText}${msg ? ` - ${msg}` : ""}`);
115
116
  }
116
117
  const initPayload = yield initRes.json().catch(() => ({}));
117
- const resolvedSessionId = (_e = initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) !== null && _e !== void 0 ? _e : sessionId;
118
+ const resolvedSessionId = (_f = initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) !== null && _f !== void 0 ? _f : sessionId;
118
119
  if (initPayload === null || initPayload === void 0 ? void 0 : initPayload.SessionId) {
119
120
  localStorage_1.ls.set(storageKeys_1.STORAGE_KEYS.sessionId, initPayload.SessionId);
120
121
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mcp-chat-ui",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "description": "React Chat UI SDK with speech, file upload, and task actions.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -37,8 +37,8 @@
37
37
  "dependencies": {
38
38
  "classnames": "^2.5.1",
39
39
  "framer-motion": "^12.23.22",
40
- "lucide-react": "^0.544.0",
41
- "microsoft-cognitiveservices-speech-sdk": "^1.47.0"
40
+ "microsoft-cognitiveservices-speech-sdk": "^1.47.0",
41
+ "react-icons": "^5.5.0"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@types/react": "^19.1.13",