mcp-chat-ui 1.0.0 → 1.0.1
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/dist/components/Composer.js +3 -3
- package/dist/components/DocumentViewer.js +3 -3
- package/dist/components/InitPanel.js +2 -2
- package/dist/components/MessageItem.js +3 -3
- package/dist/components/TakeActionModal.js +4 -4
- package/dist/components/TaskCardsModal.js +2 -2
- package/dist/components/ToolResultOverlay.js +2 -2
- package/dist/components/TopBar.js +2 -2
- package/dist/components/VoiceOverlay.js +2 -2
- package/package.json +3 -3
|
@@ -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
|
|
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)(
|
|
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)(
|
|
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
|
|
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)(
|
|
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)(
|
|
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
|
|
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)(
|
|
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,7 +6,7 @@ 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
|
|
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");
|
|
@@ -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)(
|
|
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)(
|
|
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
|
}
|
|
@@ -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
|
|
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)(
|
|
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)(
|
|
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)(
|
|
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
|
|
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)(
|
|
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
|
|
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)(
|
|
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
|
|
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)(
|
|
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
|
}
|
|
@@ -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
|
|
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)(
|
|
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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mcp-chat-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.1",
|
|
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
|
-
"
|
|
41
|
-
"
|
|
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",
|