@devicai/ui 0.57.0 → 0.58.0

package/dist/cjs/components/ThreadStateTag/ThreadStateTag.js

@@ -6,61 +6,70 @@ var reactDom = require('react-dom');
 var DevicContext = require('../../provider/DevicContext.js');
 var client = require('../../api/client.js');
 var types = require('../../api/types.js');
+var useTranslations = require('../../i18n/useTranslations.js');
 
 /* ── State configuration map ── */
-function getStateConfig(state, subthreadCount) {
+function getStateConfig(t, state, subthreadCount) {
     const configs = {
         [types.AgentThreadState.QUEUED]: {
             color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
-            text: 'Queued', iconType: null,
+            text: t('Queued'), iconType: null,
         },
         [types.AgentThreadState.PROCESSING]: {
             color: 'processing', bgColor: '#e6f4ff', borderColor: '#91caff',
-            text: 'Processing', iconType: 'spinner',
+            text: t('Processing'), iconType: 'spinner',
         },
         [types.AgentThreadState.COMPLETED]: {
             color: 'success', bgColor: '#f6ffed', borderColor: '#b7eb8f',
-            text: 'Completed', iconType: null,
+            text: t('Completed'), iconType: null,
         },
         [types.AgentThreadState.FAILED]: {
             color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
-            text: 'Failed', iconType: null,
+            text: t('Failed'), iconType: null,
         },
         [types.AgentThreadState.TERMINATED]: {
             color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9',
-            text: 'Terminated', iconType: null,
+            text: t('Terminated'), iconType: null,
         },
         [types.AgentThreadState.GUARDRAIL_TRIGGER]: {
             color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
-            text: 'Guardrail Triggered', iconType: 'shield',
+            text: t('Guardrail Triggered'), iconType: 'shield',
         },
         [types.AgentThreadState.PAUSED]: {
             color: 'purple', bgColor: '#f9f0ff', borderColor: '#d3adf7',
-            text: 'Paused', iconType: 'pause',
+            text: t('Paused'), iconType: 'pause',
         },
         [types.AgentThreadState.PAUSED_FOR_APPROVAL]: {
             color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
-            text: 'Waiting for approval', iconType: 'warning',
+            text: t('Waiting for approval'), iconType: 'warning',
         },
         [types.AgentThreadState.APPROVAL_REJECTED]: {
             color: 'error', bgColor: '#fff2f0', borderColor: '#ffa39e',
-            text: 'Approval rejected', iconType: null,
+            text: t('Approval rejected'), iconType: null,
         },
         [types.AgentThreadState.WAITING_FOR_RESPONSE]: {
             color: 'gold', bgColor: '#fffbe6', borderColor: '#ffe58f',
-            text: 'Waiting for response', iconType: 'envelope',
+            text: t('Waiting for response'), iconType: 'envelope',
         },
         [types.AgentThreadState.PAUSED_FOR_RESUME]: {
             color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',
-            text: 'Resume scheduled', iconType: 'clock',
+            text: t('Resume scheduled'), iconType: 'clock',
         },
         [types.AgentThreadState.HANDED_OFF]: {
             color: 'blue', bgColor: '#e6f4ff', borderColor: '#91caff',
-            text: subthreadCount && subthreadCount > 1 ? `Handed off (${subthreadCount})` : 'Handed off',
+            text: subthreadCount && subthreadCount > 1
+                ? t('Handed off ({count})', { count: subthreadCount })
+                : t('Handed off'),
             iconType: 'handoff',
         },
     };
-    return configs[state] || { color: 'default', bgColor: '#fafafa', borderColor: '#d9d9d9', text: 'Unknown', iconType: null };
+    return (configs[state] || {
+        color: 'default',
+        bgColor: '#fafafa',
+        borderColor: '#d9d9d9',
+        text: t('Unknown'),
+        iconType: null,
+    });
 }
 /* ── SVG Icons ── */
 function SpinnerIcon() {
@@ -129,6 +138,7 @@ function Modal({ open, onClose, title, titleIcon, children, footer, }) {
 }
 /* ── Explain Modal with typing effect ── */
 function ExplainModal({ open, onClose, explanation, isLoading, agentName, }) {
+    const t = useTranslations.useTranslations();
     const [displayedText, setDisplayedText] = React.useState('');
     const [fullTextDisplayed, setFullTextDisplayed] = React.useState(false);
     const charIndexRef = React.useRef(0);
@@ -156,28 +166,33 @@ function ExplainModal({ open, onClose, explanation, isLoading, agentName, }) {
         setFullTextDisplayed(false);
         onClose();
     };
-    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: `Thread execution description of "${agentName}"`, titleIcon: jsxRuntime.jsx(LightbulbIcon, {}), children: isLoading ? (jsxRuntime.jsx("div", { className: "devic-state-loading", children: jsxRuntime.jsx("div", { className: "devic-state-loading-spinner" }) })) : (jsxRuntime.jsxs("div", { className: "devic-explain-content", children: [displayedText, !fullTextDisplayed && jsxRuntime.jsx("span", { className: "devic-typing-cursor", children: "|" })] })) }));
+    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: t('Thread execution description of "{agent}"', {
+            agent: agentName,
+        }), titleIcon: jsxRuntime.jsx(LightbulbIcon, {}), children: isLoading ? (jsxRuntime.jsx("div", { className: "devic-state-loading", children: jsxRuntime.jsx("div", { className: "devic-state-loading-spinner" }) })) : (jsxRuntime.jsxs("div", { className: "devic-explain-content", children: [displayedText, !fullTextDisplayed && jsxRuntime.jsx("span", { className: "devic-typing-cursor", children: "|" })] })) }));
 }
 /* ── Approval Modal ── */
 function ApprovalModal({ open, onClose, onApprove, isLoading, pausedReason, }) {
+    const t = useTranslations.useTranslations();
     const [feedback, setFeedback] = React.useState('');
     const handleClose = () => {
         setFeedback('');
         onClose();
     };
-    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: "Review Agent Request", titleIcon: jsxRuntime.jsx(EyeIcon, {}), children: jsxRuntime.jsxs("div", { className: "devic-approval-layout", children: [jsxRuntime.jsxs("div", { className: "devic-approval-request", children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 8, fontSize: 13 }, children: "Agent's request:" }), jsxRuntime.jsx("div", { style: { whiteSpace: 'pre-wrap' }, children: pausedReason || 'Agent is waiting for approval to resume execution.' })] }), jsxRuntime.jsxs("div", { className: "devic-approval-actions", children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 13 }, children: "Your feedback:" }), jsxRuntime.jsx("textarea", { className: "devic-approval-textarea", value: feedback, onChange: (e) => setFeedback(e.target.value), placeholder: "Optional feedback for the agent..." }), jsxRuntime.jsxs("div", { className: "devic-approval-buttons", children: [jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onApprove('rejected', false, feedback), disabled: isLoading, type: "button", children: "Reject and finish" }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: () => onApprove('rejected', true, feedback), disabled: isLoading || !feedback.trim(), type: "button", children: "Continue with feedback" }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-success", onClick: () => onApprove('approved', false), disabled: isLoading, type: "button", children: "Approve" })] })] })] }) }));
+    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: t('Review Agent Request'), titleIcon: jsxRuntime.jsx(EyeIcon, {}), children: jsxRuntime.jsxs("div", { className: "devic-approval-layout", children: [jsxRuntime.jsxs("div", { className: "devic-approval-request", children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 8, fontSize: 13 }, children: t("Agent's request:") }), jsxRuntime.jsx("div", { style: { whiteSpace: 'pre-wrap' }, children: pausedReason ||
+                                t('Agent is waiting for approval to resume execution.') })] }), jsxRuntime.jsxs("div", { className: "devic-approval-actions", children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, fontSize: 13 }, children: t('Your feedback:') }), jsxRuntime.jsx("textarea", { className: "devic-approval-textarea", value: feedback, onChange: (e) => setFeedback(e.target.value), placeholder: t('Optional feedback for the agent...') }), jsxRuntime.jsxs("div", { className: "devic-approval-buttons", children: [jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onApprove('rejected', false, feedback), disabled: isLoading, type: "button", children: t('Reject and finish') }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: () => onApprove('rejected', true, feedback), disabled: isLoading || !feedback.trim(), type: "button", children: t('Continue with feedback') }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-success", onClick: () => onApprove('approved', false), disabled: isLoading, type: "button", children: t('Approve') })] })] })] }) }));
 }
 /* ── Send Message Modal ── */
 function SendMessageModal({ open, onClose, onSend, isLoading, state, }) {
+    const t = useTranslations.useTranslations();
     const [message, setMessage] = React.useState('');
     const handleClose = () => {
         setMessage('');
         onClose();
     };
     const isRunning = state === types.AgentThreadState.PROCESSING || state === types.AgentThreadState.QUEUED;
-    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: "Send message to thread", titleIcon: jsxRuntime.jsx(SendIcon, {}), footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: handleClose, type: "button", children: "Cancel" }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: () => onSend(message), disabled: isLoading || !message.trim(), type: "button", children: "Send" })] }), children: jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("p", { style: { margin: '4px 0 12px', color: '#666', fontSize: 13 }, children: isRunning
-                        ? 'The agent is still running. Your message will be considered on its next turn, right after the current tool response.'
-                        : 'This will add your message and re-queue the thread so the agent runs again with it.' }), jsxRuntime.jsx("textarea", { className: "devic-approval-textarea", value: message, onChange: (e) => setMessage(e.target.value), placeholder: "Type a message to continue the thread...", onKeyDown: (e) => {
+    return (jsxRuntime.jsx(Modal, { open: open, onClose: handleClose, title: t('Send message to thread'), titleIcon: jsxRuntime.jsx(SendIcon, {}), footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: handleClose, type: "button", children: t('Cancel') }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: () => onSend(message), disabled: isLoading || !message.trim(), type: "button", children: t('Send') })] }), children: jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("p", { style: { margin: '4px 0 12px', color: '#666', fontSize: 13 }, children: isRunning
+                        ? t('The agent is still running. Your message will be considered on its next turn, right after the current tool response.')
+                        : t('This will add your message and re-queue the thread so the agent runs again with it.') }), jsxRuntime.jsx("textarea", { className: "devic-approval-textarea", value: message, onChange: (e) => setMessage(e.target.value), placeholder: t('Type a message to continue the thread...'), onKeyDown: (e) => {
                         if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && message.trim()) {
                             e.preventDefault();
                             onSend(message);
@@ -186,15 +201,18 @@ function SendMessageModal({ open, onClose, onSend, isLoading, state, }) {
 }
 /* ── Complete Thread Modal ── */
 function CompleteModal({ open, onClose, onComplete, }) {
+    const t = useTranslations.useTranslations();
     const [completionState, setCompletionState] = React.useState('terminated');
-    return (jsxRuntime.jsx(Modal, { open: open, onClose: onClose, title: "Complete Execution Manually", titleIcon: jsxRuntime.jsx(WrenchIcon, {}), footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: "Cancel" }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onComplete(completionState), type: "button", children: "Complete" })] }), children: jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: "Confirm Manual Completion" }), jsxRuntime.jsx("p", { style: { margin: '4px 0 12px', color: '#666', fontSize: 13 }, children: "You are about to manually complete this agent's execution." }), jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("div", { style: { fontWeight: 500, marginBottom: 6, fontSize: 13 }, children: "Complete as:" }), jsxRuntime.jsxs("select", { className: "devic-completion-select", value: completionState, onChange: (e) => setCompletionState(e.target.value), children: [jsxRuntime.jsx("option", { value: "terminated", children: "Terminated - Finish thread as manually terminated" }), jsxRuntime.jsx("option", { value: "completed", children: "Completed - Finish thread as successfully completed" }), jsxRuntime.jsx("option", { value: "failed", children: "Failed - Finish thread as failed or with errors" })] })] }), jsxRuntime.jsxs("div", { className: "devic-state-warning", children: [jsxRuntime.jsx(InfoIcon, {}), jsxRuntime.jsx("span", { children: "This action will immediately terminate all ongoing processes. The execution cannot be resumed after completion." })] })] }) }));
+    return (jsxRuntime.jsx(Modal, { open: open, onClose: onClose, title: t('Complete Execution Manually'), titleIcon: jsxRuntime.jsx(WrenchIcon, {}), footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: t('Cancel') }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-danger", onClick: () => onComplete(completionState), type: "button", children: t('Complete') })] }), children: jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("div", { style: { fontWeight: 600, marginBottom: 4 }, children: t('Confirm Manual Completion') }), jsxRuntime.jsx("p", { style: { margin: '4px 0 12px', color: '#666', fontSize: 13 }, children: t("You are about to manually complete this agent's execution.") }), jsxRuntime.jsxs("div", { style: { marginBottom: 12 }, children: [jsxRuntime.jsx("div", { style: { fontWeight: 500, marginBottom: 6, fontSize: 13 }, children: t('Complete as:') }), jsxRuntime.jsxs("select", { className: "devic-completion-select", value: completionState, onChange: (e) => setCompletionState(e.target.value), children: [jsxRuntime.jsx("option", { value: "terminated", children: t('Terminated - Finish thread as manually terminated') }), jsxRuntime.jsx("option", { value: "completed", children: t('Completed - Finish thread as successfully completed') }), jsxRuntime.jsx("option", { value: "failed", children: t('Failed - Finish thread as failed or with errors') })] })] }), jsxRuntime.jsxs("div", { className: "devic-state-warning", children: [jsxRuntime.jsx(InfoIcon, {}), jsxRuntime.jsx("span", { children: t('This action will immediately terminate all ongoing processes. The execution cannot be resumed after completion.') })] })] }) }));
 }
 /* ── Confirm Modal (Pause/Resume) ── */
 function ConfirmModal({ open, onClose, onConfirm, title, icon, message, confirmText, }) {
-    return (jsxRuntime.jsx(Modal, { open: open, onClose: onClose, title: title, titleIcon: icon, footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: "Cancel" }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: onConfirm, type: "button", children: confirmText })] }), children: jsxRuntime.jsx("p", { style: { margin: 0, color: '#666', fontSize: 14 }, children: message }) }));
+    const t = useTranslations.useTranslations();
+    return (jsxRuntime.jsx(Modal, { open: open, onClose: onClose, title: title, titleIcon: icon, footer: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("button", { className: "devic-state-btn", onClick: onClose, type: "button", children: t('Cancel') }), jsxRuntime.jsx("button", { className: "devic-state-btn devic-state-btn-primary", onClick: onConfirm, type: "button", children: confirmText })] }), children: jsxRuntime.jsx("p", { style: { margin: 0, color: '#666', fontSize: 14 }, children: message }) }));
 }
 /* ── Main ThreadStateTag ── */
 function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIcon, pausedReason, approvalRejectedMessage, finishReason, onActionComplete, pauseUntil, subthreadCount, showAdminActions = false, apiKey, baseUrl, interactive = true, }) {
+    const t = useTranslations.useTranslations();
     const context = DevicContext.useOptionalDevicContext();
     const resolvedApiKey = apiKey || context?.apiKey;
     const resolvedTenantSession = context?.getTenantSession;
@@ -243,9 +261,9 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         });
     }, [resolvedApiKey, resolvedTenantSession, resolvedBaseUrl]);
     // Config
-    const config = getStateConfig(state, subthreadCount);
+    const config = getStateConfig(t, state, subthreadCount);
     if (!state) {
-        return jsxRuntime.jsx("span", { className: "devic-state-tag", "data-color": "default", children: "Unknown" });
+        return (jsxRuntime.jsx("span", { className: "devic-state-tag", "data-color": "default", children: t('Unknown') }));
     }
     // Icon
     const renderIcon = () => {
@@ -260,26 +278,31 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
     const getTooltipContent = () => {
         switch (state) {
             case types.AgentThreadState.PAUSED_FOR_APPROVAL:
-                return 'Agent is waiting for approval to resume execution';
+                return t('Agent is waiting for approval to resume execution');
             case types.AgentThreadState.PAUSED_FOR_RESUME:
                 if (pauseUntil) {
                     const timeDiff = new Date(pauseUntil).getTime() - Date.now();
                     const hours = Math.floor(timeDiff / 3600000);
                     const minutes = Math.floor(timeDiff / 60000);
-                    const timeStr = hours > 0 ? `${hours} hours` : `${minutes} minutes`;
-                    return `Agent paused, will resume at ${new Date(pauseUntil).toLocaleString()} (${timeStr})`;
+                    const timeStr = hours > 0
+                        ? t('{count} hours', { count: hours })
+                        : t('{count} minutes', { count: minutes });
+                    return t('Agent paused, will resume at {when} ({in})', {
+                        when: new Date(pauseUntil).toLocaleString(),
+                        in: timeStr,
+                    });
                 }
-                return 'Agent paused, will resume at a scheduled time';
+                return t('Agent paused, will resume at a scheduled time');
             case types.AgentThreadState.WAITING_FOR_RESPONSE:
-                return pausedReason || 'Agent is waiting for response';
+                return pausedReason || t('Agent is waiting for response');
             case types.AgentThreadState.COMPLETED:
             case types.AgentThreadState.FAILED:
             case types.AgentThreadState.TERMINATED:
-                return finishReason || 'Manually finished thread';
+                return finishReason || t('Manually finished thread');
             case types.AgentThreadState.APPROVAL_REJECTED:
-                return approvalRejectedMessage || 'Approval was rejected';
+                return approvalRejectedMessage || t('Approval was rejected');
             case types.AgentThreadState.GUARDRAIL_TRIGGER:
-                return 'Agent execution paused due to guardrail trigger';
+                return t('Agent execution paused due to guardrail trigger');
             default:
                 return null;
         }
@@ -292,7 +315,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         setThreadExplanation(null);
         const client = getClient();
         if (!client) {
-            setThreadExplanation('API key not configured.');
+            setThreadExplanation(t('API key not configured.'));
             setIsLoadingExplanation(false);
             return;
         }
@@ -301,7 +324,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
             setThreadExplanation(explanation);
         }
         catch {
-            setThreadExplanation('Could not obtain the thread explanation.');
+            setThreadExplanation(t('Could not obtain the thread explanation.'));
         }
         finally {
             setIsLoadingExplanation(false);
@@ -397,7 +420,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         dropdownItems.push({
             key: 'complete',
             icon: jsxRuntime.jsx(WrenchIcon, {}),
-            label: 'Complete manually',
+            label: t('Complete manually'),
             onClick: () => { setDropdownOpen(false); setCompleteModalOpen(true); },
         });
     }
@@ -405,7 +428,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         dropdownItems.push({
             key: 'pause',
             icon: jsxRuntime.jsx(PauseIcon, {}),
-            label: 'Pause',
+            label: t('Pause'),
             onClick: () => { setDropdownOpen(false); setPauseModalOpen(true); },
         });
     }
@@ -413,7 +436,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         dropdownItems.push({
             key: 'resume',
             icon: jsxRuntime.jsx(PlayIcon, {}),
-            label: 'Resume',
+            label: t('Resume'),
             onClick: () => { setDropdownOpen(false); setResumeModalOpen(true); },
         });
     }
@@ -421,7 +444,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         dropdownItems.push({
             key: 'review',
             icon: jsxRuntime.jsx(EyeIcon, {}),
-            label: 'Review',
+            label: t('Review'),
             onClick: () => { setDropdownOpen(false); setReviewModalOpen(true); },
         });
     }
@@ -429,14 +452,14 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
         dropdownItems.push({
             key: 'send_message',
             icon: jsxRuntime.jsx(SendIcon, {}),
-            label: 'Send message...',
+            label: t('Send message...'),
             onClick: () => { setDropdownOpen(false); setSendMessageModalOpen(true); },
         });
     }
     dropdownItems.push({
         key: 'explain',
         icon: jsxRuntime.jsx(LightbulbIcon, {}),
-        label: 'Explain thread...',
+        label: t('Explain thread...'),
         onClick: handleExplain,
     });
     const canInteract = interactive && threadId;
@@ -466,7 +489,7 @@ function ThreadStateTag({ state, threadId, agentName, showIcon = true, customIco
                         }
                         setShowTooltip(true);
                     }
-                }, onMouseLeave: () => setShowTooltip(false), children: [renderIcon(), config.text, canInteract && (jsxRuntime.jsx("span", { className: "devic-state-tag-caret", children: jsxRuntime.jsx(CaretDownIcon, {}) }))] }), showTooltip && tooltipContent && !dropdownOpen && reactDom.createPortal(jsxRuntime.jsx("div", { className: "devic-state-tooltip-portal", style: tooltipStyle, children: tooltipContent }), document.body), dropdownOpen && canInteract && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: "devic-state-dropdown-portal", style: dropdownStyle, children: dropdownItems.map((item) => (jsxRuntime.jsxs("button", { className: "devic-state-dropdown-item", onClick: (e) => { e.stopPropagation(); item.onClick(); }, type: "button", children: [jsxRuntime.jsx("span", { className: "devic-state-dropdown-item-icon", children: item.icon }), item.label] }, item.key))) }), document.body), jsxRuntime.jsx(ExplainModal, { open: explainModalOpen, onClose: () => setExplainModalOpen(false), explanation: threadExplanation, isLoading: isLoadingExplanation, agentName: agentName }), jsxRuntime.jsx(CompleteModal, { open: completeModalOpen, onClose: () => setCompleteModalOpen(false), onComplete: handleComplete }), jsxRuntime.jsx(ConfirmModal, { open: pauseModalOpen, onClose: () => setPauseModalOpen(false), onConfirm: handlePause, title: "Pause Thread", icon: jsxRuntime.jsx(PauseIcon, {}), message: "You are about to pause this queued thread. It can be resumed later.", confirmText: "Pause" }), jsxRuntime.jsx(ConfirmModal, { open: resumeModalOpen, onClose: () => setResumeModalOpen(false), onConfirm: handleResume, title: "Resume Thread", icon: jsxRuntime.jsx(PlayIcon, {}), message: "You are about to resume this thread. It will go back to the queue and be processed when possible.", confirmText: "Resume" }), jsxRuntime.jsx(ApprovalModal, { open: reviewModalOpen, onClose: () => setReviewModalOpen(false), onApprove: handleApproval, isLoading: isLoadingApproval, pausedReason: pausedReason }), jsxRuntime.jsx(SendMessageModal, { open: sendMessageModalOpen, onClose: () => setSendMessageModalOpen(false), onSend: handleSendMessage, isLoading: isSendingMessage, state: state })] }));
+                }, onMouseLeave: () => setShowTooltip(false), children: [renderIcon(), config.text, canInteract && (jsxRuntime.jsx("span", { className: "devic-state-tag-caret", children: jsxRuntime.jsx(CaretDownIcon, {}) }))] }), showTooltip && tooltipContent && !dropdownOpen && reactDom.createPortal(jsxRuntime.jsx("div", { className: "devic-state-tooltip-portal", style: tooltipStyle, children: tooltipContent }), document.body), dropdownOpen && canInteract && reactDom.createPortal(jsxRuntime.jsx("div", { ref: dropdownRef, className: "devic-state-dropdown-portal", style: dropdownStyle, children: dropdownItems.map((item) => (jsxRuntime.jsxs("button", { className: "devic-state-dropdown-item", onClick: (e) => { e.stopPropagation(); item.onClick(); }, type: "button", children: [jsxRuntime.jsx("span", { className: "devic-state-dropdown-item-icon", children: item.icon }), item.label] }, item.key))) }), document.body), jsxRuntime.jsx(ExplainModal, { open: explainModalOpen, onClose: () => setExplainModalOpen(false), explanation: threadExplanation, isLoading: isLoadingExplanation, agentName: agentName }), jsxRuntime.jsx(CompleteModal, { open: completeModalOpen, onClose: () => setCompleteModalOpen(false), onComplete: handleComplete }), jsxRuntime.jsx(ConfirmModal, { open: pauseModalOpen, onClose: () => setPauseModalOpen(false), onConfirm: handlePause, title: t('Pause Thread'), icon: jsxRuntime.jsx(PauseIcon, {}), message: t('You are about to pause this queued thread. It can be resumed later.'), confirmText: t('Pause') }), jsxRuntime.jsx(ConfirmModal, { open: resumeModalOpen, onClose: () => setResumeModalOpen(false), onConfirm: handleResume, title: t('Resume Thread'), icon: jsxRuntime.jsx(PlayIcon, {}), message: t('You are about to resume this thread. It will go back to the queue and be processed when possible.'), confirmText: t('Resume') }), jsxRuntime.jsx(ApprovalModal, { open: reviewModalOpen, onClose: () => setReviewModalOpen(false), onApprove: handleApproval, isLoading: isLoadingApproval, pausedReason: pausedReason }), jsxRuntime.jsx(SendMessageModal, { open: sendMessageModalOpen, onClose: () => setSendMessageModalOpen(false), onSend: handleSendMessage, isLoading: isSendingMessage, state: state })] }));
 }
 
 exports.ThreadStateTag = ThreadStateTag;