@hef2024/llmasaservice-ui 0.25.3 → 0.26.0

package/dist/index.css

@@ -1537,6 +1537,7 @@ button[data-pending=true]::after {
   --ai-loading-spinner: #3b82f6;
   --ai-resize-handle-width: 4px;
   --ai-resize-handle-color: transparent;
+  --ai-resize-handle-idle: rgba(100, 100, 100, 0.15);
   --ai-resize-handle-hover: #3b82f6;
   --ai-chat-bg: #ffffff;
 }
@@ -1664,7 +1665,7 @@ button[data-pending=true]::after {
   background-color: var(--ai-resize-handle-hover);
 }
 .ai-agent-panel:hover .ai-agent-panel__resize-handle {
-  background-color: rgba(100, 100, 100, 0.15);
+  background-color: var(--ai-resize-handle-idle);
 }
 .ai-agent-panel--right .ai-agent-panel__resize-handle {
   order: -1 !important;
@@ -1844,6 +1845,15 @@ button[data-pending=true]::after {
   text-overflow: ellipsis;
   line-height: 1.5;
 }
+.ai-agent-panel__conversation-subtitle {
+  margin-top: 2px;
+  font-size: 11px;
+  line-height: 1.25;
+  color: var(--ai-conversation-meta-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .ai-agent-panel__conversation-preview {
   font-size: 11px;
   color: var(--ai-conversation-preview-color);
@@ -2415,6 +2425,9 @@ button[data-pending=true]::after {
 .ai-agent-panel__conversation--current {
   background-color: rgba(59, 130, 246, 0.08) !important;
 }
+.ai-agent-panel__conversation--just-focused {
+  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.35);
+}
 .ai-agent-panel__conversation--in-active {
   opacity: 0.7;
 }
@@ -3380,6 +3393,212 @@ button[data-pending=true]::after {
 .ai-chat-panel__input-container--dropdown-open {
   border-color: var(--ai-chat-input-focus-border);
 }
+.ai-chat-user-input-popover {
+  position: absolute;
+  bottom: calc(100% + 10px);
+  left: 0;
+  right: 0;
+  z-index: 1002;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 12px;
+  background: var(--ai-chat-input-bg);
+  border: 1px solid var(--ai-chat-input-border);
+  border-radius: 12px;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
+  max-height: min(58vh, 520px);
+  overflow: auto;
+  animation: aiUserInputPopoverSlideUp 0.16s ease-out;
+}
+@keyframes aiUserInputPopoverSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.ai-chat-user-input-popover__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.ai-chat-user-input-popover__header-meta {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.ai-chat-user-input-popover__progress {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid var(--ai-chat-input-border);
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--ai-chat-input-placeholder);
+}
+.ai-chat-user-input-popover__title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--ai-chat-input-text);
+}
+.ai-chat-user-input-popover__instructions {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ai-chat-input-placeholder);
+}
+.ai-chat-user-input-popover__cancel-inline {
+  border: none;
+  background: transparent;
+  color: var(--ai-chat-input-placeholder);
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 2px 4px;
+}
+.ai-chat-user-input-popover__cancel-inline:hover {
+  color: var(--ai-chat-input-text);
+}
+.ai-chat-user-input-popover__questions {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.ai-chat-user-input-popover__question {
+  border: 1px solid var(--ai-chat-suggestion-border, #e5e7eb);
+  border-radius: 10px;
+  padding: 10px;
+  background: var(--ai-chat-suggestion-bg, #f8fafc);
+}
+.ai-chat-user-input-popover__question-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+}
+.ai-chat-user-input-popover__question-index {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(59, 130, 246, 0.12);
+  color: #2563eb;
+  font-size: 11px;
+  font-weight: 700;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ai-chat-user-input-popover__question-title {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: var(--ai-chat-input-placeholder);
+  text-transform: uppercase;
+}
+.ai-chat-user-input-popover__question-text {
+  font-size: 13px;
+  color: var(--ai-chat-input-text);
+  margin-bottom: 8px;
+  line-height: 1.45;
+}
+.ai-chat-user-input-popover__options {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ai-chat-user-input-popover__option {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 7px 8px;
+  border: 1px solid var(--ai-chat-suggestion-border, #e5e7eb);
+  border-radius: 8px;
+  background: var(--ai-chat-input-bg, #fff);
+  cursor: pointer;
+}
+.ai-chat-user-input-popover__option input[type=radio] {
+  margin-top: 2px;
+}
+.ai-chat-user-input-popover__option-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ai-chat-user-input-popover__option-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--ai-chat-input-text);
+}
+.ai-chat-user-input-popover__option-description {
+  font-size: 11px;
+  color: var(--ai-chat-input-placeholder);
+  line-height: 1.4;
+}
+.ai-chat-user-input-popover__writein {
+  width: 100%;
+  margin-top: 8px;
+  min-height: 56px;
+  border: 1px solid var(--ai-chat-input-border);
+  border-radius: 8px;
+  background: var(--ai-chat-input-bg);
+  color: var(--ai-chat-input-text);
+  padding: 8px 10px;
+  resize: vertical;
+  font-family: inherit;
+  font-size: 12px;
+  line-height: 1.45;
+}
+.ai-chat-user-input-popover__writein:focus {
+  outline: none;
+  border-color: var(--ai-chat-input-focus-border);
+  box-shadow: 0 0 0 3px var(--ai-chat-input-focus-ring);
+}
+.ai-chat-user-input-popover__error {
+  font-size: 12px;
+  color: #dc2626;
+}
+.ai-chat-user-input-popover__actions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+.ai-chat-user-input-popover__actions-left,
+.ai-chat-user-input-popover__actions-right {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.ai-chat-user-input-popover__button {
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 7px 10px;
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+.ai-chat-user-input-popover__button--secondary {
+  background: transparent;
+  border-color: var(--ai-chat-input-border);
+  color: var(--ai-chat-input-placeholder);
+}
+.ai-chat-user-input-popover__button--secondary:hover {
+  border-color: var(--ai-chat-input-focus-border);
+  color: var(--ai-chat-input-text);
+}
+.ai-chat-user-input-popover__button--primary {
+  background: #2563eb;
+  color: #fff;
+}
+.ai-chat-user-input-popover__button--primary:hover {
+  background: #1d4ed8;
+}
 .ai-chat-panel__input-container .ai-chat-panel__input {
   border-top: none;
   padding: 8px 8px 4px 8px;
@@ -3495,11 +3714,17 @@ button[data-pending=true]::after {
 .ai-chat-panel__input-footer {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 8px;
   padding: 0 8px 8px 8px;
   flex-shrink: 0;
 }
+.ai-chat-input-footer__left {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
 .ai-chat-panel__input-footer-spacer {
   flex: 1;
 }
@@ -3830,9 +4055,89 @@ button[data-pending=true]::after {
   }
 }
 .ai-chat-context-pill-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.ai-chat-context-pill-anchor {
   position: relative;
   flex-shrink: 0;
 }
+.ai-chat-agent-mode-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  min-height: 30px;
+  padding: 2px 6px;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--ai-chat-footer-text, #6b7280);
+  font-size: 12px;
+  font-family: inherit;
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease,
+    border-color 0.15s ease;
+}
+.ai-chat-agent-mode-trigger:hover {
+  background: var(--ai-button-ghost-hover, rgba(0, 0, 0, 0.04));
+  color: var(--ai-chat-input-text, #1f2937);
+}
+.ai-chat-agent-mode-trigger:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+.ai-chat-agent-mode-trigger--active:disabled {
+  opacity: 1;
+}
+.ai-chat-agent-mode-trigger__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+.ai-chat-agent-mode-trigger__icon .ai-chat-icon-sm {
+  width: 24px;
+  height: 24px;
+}
+.ai-chat-agent-mode-trigger__label {
+  max-width: 0;
+  margin-left: 0;
+  opacity: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-transform: lowercase;
+  font-weight: 500;
+  transition:
+    max-width 0.2s ease,
+    opacity 0.2s ease,
+    margin-left 0.2s ease;
+}
+.ai-chat-agent-mode-trigger--expanded,
+.ai-chat-agent-mode-trigger--active {
+  border-color: var(--ai-chat-input-border, #d1d5db);
+  background: rgba(148, 163, 184, 0.1);
+}
+.ai-chat-agent-mode-trigger--active {
+  border-color: rgba(139, 92, 246, 0.55);
+  background: rgba(139, 92, 246, 0.16);
+  color: #6d28d9;
+  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, 0.24);
+}
+.ai-chat-agent-mode-trigger--active .ai-chat-agent-mode-trigger__icon svg {
+  transform-origin: center;
+}
+.ai-chat-agent-mode-trigger--expanded .ai-chat-agent-mode-trigger__label,
+.ai-chat-agent-mode-trigger--active .ai-chat-agent-mode-trigger__label {
+  max-width: 170px;
+  margin-left: 4px;
+  opacity: 1;
+}
 .ai-chat-context-pill {
   display: flex;
   align-items: center;
@@ -4188,6 +4493,47 @@ button[data-pending=true]::after {
   max-height: 400px;
   overflow-y: auto;
 }
+.dark-theme .ai-chat-user-input-popover {
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42);
+}
+.dark-theme .ai-chat-user-input-popover__question {
+  background: rgba(2, 6, 23, 0.55);
+}
+.dark-theme .ai-chat-user-input-popover__question-index {
+  background: rgba(96, 165, 250, 0.2);
+  color: #93c5fd;
+}
+.dark-theme .ai-chat-user-input-popover__progress {
+  border-color: rgba(148, 163, 184, 0.45);
+  color: rgba(203, 213, 225, 0.9);
+}
+.dark-theme .ai-chat-user-input-popover__option {
+  background: rgba(15, 23, 42, 0.7);
+}
+.dark-theme .ai-chat-user-input-popover__button--primary {
+  background: #3b82f6;
+}
+.dark-theme .ai-chat-user-input-popover__button--primary:hover {
+  background: #2563eb;
+}
+.dark-theme .ai-chat-agent-mode-trigger {
+  color: var(--ai-chat-footer-text, #9ca3af);
+}
+.dark-theme .ai-chat-agent-mode-trigger:hover {
+  background: rgba(156, 163, 175, 0.16);
+  color: var(--ai-chat-input-text, #f9fafb);
+}
+.dark-theme .ai-chat-agent-mode-trigger--expanded,
+.dark-theme .ai-chat-agent-mode-trigger--active {
+  border-color: rgba(148, 163, 184, 0.36);
+  background: rgba(148, 163, 184, 0.18);
+}
+.dark-theme .ai-chat-agent-mode-trigger--active {
+  border-color: rgba(167, 139, 250, 0.7);
+  background: rgba(139, 92, 246, 0.28);
+  color: #c4b5fd;
+  box-shadow: inset 0 0 0 1px rgba(167, 139, 250, 0.35);
+}
 .dark-theme .ai-chat-context-pill {
   background: var(--ai-chat-suggestion-bg, #374151);
 }
@@ -4207,6 +4553,13 @@ button[data-pending=true]::after {
   background: #111827;
 }
 @container chat-panel (max-width: 380px) {
+  .ai-chat-user-input-popover {
+    max-height: min(62vh, 420px);
+    padding: 10px;
+  }
+  .ai-chat-user-input-popover__question {
+    padding: 8px;
+  }
   .ai-chat-context-pill__label {
     font-size: 11px;
   }
@@ -4293,6 +4646,90 @@ button[data-pending=true]::after {
 .dark-theme .ai-chat-error-banner__close:hover {
   background: rgba(252, 165, 165, 0.1);
 }
+.ai-chat-compaction-inline-status {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 16px 4px;
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+}
+.ai-chat-compaction-inline-status::before,
+.ai-chat-compaction-inline-status::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: rgba(100, 116, 139, 0.35);
+}
+.dark-theme .ai-chat-compaction-inline-status {
+  color: #cbd5e1;
+}
+.dark-theme .ai-chat-compaction-inline-status::before,
+.dark-theme .ai-chat-compaction-inline-status::after {
+  background: rgba(148, 163, 184, 0.4);
+}
+.ai-chat-compaction-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 14px;
+  margin: 8px 16px 0;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  animation: slideDown 0.2s ease-out;
+}
+.ai-chat-compaction-banner--info {
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+.ai-chat-compaction-banner--warning {
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+.ai-chat-compaction-banner--success {
+  background: #ecfdf3;
+  border-color: #86efac;
+}
+.ai-chat-compaction-banner__message {
+  color: #0f172a;
+  font-size: 13px;
+  line-height: 1.45;
+}
+.ai-chat-compaction-banner__close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  color: #334155;
+  cursor: pointer;
+  border-radius: 4px;
+  padding: 4px;
+  transition: background-color 0.15s;
+}
+.ai-chat-compaction-banner__close:hover {
+  background: rgba(15, 23, 42, 0.08);
+}
+.dark-theme .ai-chat-compaction-banner--info {
+  background: rgba(30, 64, 175, 0.22);
+  border-color: rgba(96, 165, 250, 0.45);
+}
+.dark-theme .ai-chat-compaction-banner--warning {
+  background: rgba(120, 53, 15, 0.35);
+  border-color: rgba(251, 191, 36, 0.5);
+}
+.dark-theme .ai-chat-compaction-banner--success {
+  background: rgba(20, 83, 45, 0.35);
+  border-color: rgba(74, 222, 128, 0.5);
+}
+.dark-theme .ai-chat-compaction-banner__message,
+.dark-theme .ai-chat-compaction-banner__close {
+  color: #e2e8f0;
+}
+.dark-theme .ai-chat-compaction-banner__close:hover {
+  background: rgba(226, 232, 240, 0.12);
+}
 @keyframes slideDown {
   from {
     opacity: 0;

package/dist/index.d.mts

@@ -173,6 +173,46 @@ interface BeforeSendPayload {
         content: string;
     }[];
 }
+type CompactionAction = 'none' | 'compacted' | 'fallback_window';
+interface CompactionTokenUsage {
+    projectedBefore: number;
+    projectedAfter: number;
+    warnThreshold: number;
+    compactThreshold: number;
+    targetThreshold: number;
+}
+interface CompactContextInput {
+    prompt: string;
+    conversationId: string | null;
+    agentId?: string | null;
+    service?: string | null;
+    messages: {
+        role: string;
+        content: string;
+    }[];
+    data: {
+        key: string;
+        data: string;
+    }[];
+    maxContextTokens: number;
+    totalContextTokens: number;
+    warnRatio: number;
+    compactRatio: number;
+    targetRatio: number;
+    preserveTurns: number;
+    projectedTokens: CompactionTokenUsage;
+}
+interface CompactContextResult {
+    action: CompactionAction;
+    prompt: string;
+    messages: {
+        role: string;
+        content: string;
+    }[];
+    warning?: string | null;
+    tokenUsage?: Partial<CompactionTokenUsage> | null;
+    metadata?: Record<string, unknown> | null;
+}
 type TraceContextMode = 'standard' | 'full';
 interface LocalToolExecutorContext {
     toolName: string;
@@ -269,6 +309,8 @@ interface AIChatPanelProps {
     onToggleSection?: (sectionId: string, enabled: boolean) => void;
     onConversationCreated?: (conversationId: string) => void;
     onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
+    compactContext?: (input: CompactContextInput) => Promise<CompactContextResult> | CompactContextResult;
+    compactionPreserveTurns?: number;
     cssUrl?: string;
     markdownClass?: string;
     width?: string;
@@ -288,6 +330,7 @@ interface AIChatPanelProps {
     customerEmailCaptureMode?: "HIDE" | "OPTIONAL" | "REQUIRED";
     customerEmailCapturePlaceholder?: string;
     toolStatusLabelFormatter?: ToolStatusLabelFormatter;
+    composerAgentModeControl?: ComposerAgentModeControl;
 }
 /**
  * Context section for the context viewer
@@ -300,6 +343,13 @@ interface ContextSection$1 {
     data?: Record<string, unknown>;
     rawData?: string;
 }
+interface ComposerAgentModeControl {
+    active?: boolean;
+    disabled?: boolean;
+    label?: string;
+    title?: string;
+    onActivate?: () => void;
+}
 type ContextDataFormat$1 = 'json' | 'toon' | 'markdown' | 'text';
 declare const _default: React__default.NamedExoticComponent<AIChatPanelProps>;
 
@@ -341,6 +391,19 @@ interface APIConversationSummary {
     agentId?: string;
     messageCount?: number;
 }
+/**
+ * Active conversation state for multi-conversation support
+ */
+interface ActiveConversation {
+    conversationId: string;
+    stableKey: string;
+    agentId: string;
+    history: Record<string, AIChatHistoryEntry>;
+    transcriptLoaded: boolean;
+    isLoading: boolean;
+    title: string;
+    conversationInitialPrompt?: string;
+}
 /**
  * Agent configuration with optional local overrides
  */
@@ -389,6 +452,8 @@ interface AIAgentPanelProps {
     onAgentSwitch?: (fromAgent: string, toAgent: string) => void;
     onConversationChange?: (conversationId: string) => void;
     onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
+    compactContext?: (input: CompactContextInput) => Promise<CompactContextResult> | CompactContextResult;
+    compactionPreserveTurns?: number;
     historyChangedCallback?: (history: Record<string, AIChatHistoryEntry>) => void;
     responseCompleteCallback?: (callId: string, prompt: string, response: string) => void;
     thumbsUpClick?: (callId: string) => void;
@@ -411,6 +476,7 @@ interface AIAgentPanelProps {
     followOnQuestions?: string[];
     followOnPrompt?: string;
     historyListLimit?: number;
+    conversationSubtitleResolver?: (conversationId: string, conversation?: APIConversationSummary | ActiveConversation) => string | null | undefined;
     showConversationHistory?: boolean;
     cssUrl?: string;
     markdownClass?: string;
@@ -435,6 +501,7 @@ interface AIAgentPanelProps {
     traceContextMode?: TraceContextMode;
     autoApproveTools?: boolean | string[];
     toolStatusLabelFormatter?: ToolStatusLabelFormatter;
+    composerAgentModeControl?: ComposerAgentModeControl;
 }
 declare const AIAgentPanel: React__default.ForwardRefExoticComponent<AIAgentPanelProps & React__default.RefAttributes<AIAgentPanelHandle>>;
 
@@ -683,4 +750,4 @@ interface ThinkingBlockProps {
  */
 declare const ThinkingBlock: React__default.FC<ThinkingBlockProps>;
 
-export { AIAgentPanel, type AIAgentPanelProps, type AIChatHistoryEntry, _default as AIChatPanel, type AIChatPanelProps, type APIConversationSummary, type AgentContext, type AgentMetadata, AgentPanel, type AgentPanelProps, type AgentProfile, type ArtifactBlockType, Button, type ButtonProps, ChatPanel, type ChatPanelProps, type ContextDataFormat, type ContextSection, type Conversation, type ConversationGroup, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, Input, type InputProps, type MCPAuthHeaderResolver, type MCPAuthHeaderResolverInput, type MCPAuthPhase, type MCPServer, type ObjectContextSection, type PlanningStep, type PlanningStepStatus, type RawContextSection, type ResponseArtifactBlock, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, ThinkingBlock, type ThinkingBlockProps, type ThinkingBlockType, type ToolCallStatus, type ToolStatusLabelFormatter, type ToolStatusLabelFormatterInput, Tooltip, type TooltipProps, WordFadeIn, type WordFadeInProps, useAgentRegistry, useConversationStore };
+export { AIAgentPanel, type AIAgentPanelProps, type AIChatHistoryEntry, _default as AIChatPanel, type AIChatPanelProps, type APIConversationSummary, type AgentContext, type AgentMetadata, AgentPanel, type AgentPanelProps, type AgentProfile, type ArtifactBlockType, Button, type ButtonProps, ChatPanel, type ChatPanelProps, type CompactContextInput, type CompactContextResult, type CompactionAction, type CompactionTokenUsage, type ComposerAgentModeControl, type ContextDataFormat, type ContextSection, type Conversation, type ConversationGroup, Dialog, DialogFooter, type DialogFooterProps, type DialogProps, Input, type InputProps, type MCPAuthHeaderResolver, type MCPAuthHeaderResolverInput, type MCPAuthPhase, type MCPServer, type ObjectContextSection, type PlanningStep, type PlanningStepStatus, type RawContextSection, type ResponseArtifactBlock, ScrollArea, type ScrollAreaProps, Select, type SelectOption, type SelectProps, ThinkingBlock, type ThinkingBlockProps, type ThinkingBlockType, type ToolCallStatus, type ToolStatusLabelFormatter, type ToolStatusLabelFormatterInput, Tooltip, type TooltipProps, WordFadeIn, type WordFadeInProps, useAgentRegistry, useConversationStore };