@hef2024/llmasaservice-ui 0.25.2 → 0.26.0

package/index.ts

@@ -26,6 +26,11 @@ export { AIChatPanel };
 export type {
   AIChatPanelProps,
   AIChatHistoryEntry,
+  ComposerAgentModeControl,
+  CompactContextInput,
+  CompactContextResult,
+  CompactionAction,
+  CompactionTokenUsage,
   ArtifactBlockType,
   PlanningStep,
   PlanningStepStatus,

package/package.json

@@ -1,10 +1,21 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.25.2",
+  "version": "0.26.0",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./package.json": "./package.json"
+  },
   "scripts": {
     "build": "tsup index.ts --format cjs,esm --dts",
     "lint": "tsc",

package/src/AIAgentPanel.css

@@ -109,6 +109,7 @@
   /* Resize Handle */
   --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;
 
   /* Chat Area */
@@ -270,7 +271,7 @@
 
 /* Subtle hint on parent hover to show resize is available */
 .ai-agent-panel:hover .ai-agent-panel__resize-handle {
-  background-color: rgba(100, 100, 100, 0.15);
+  background-color: var(--ai-resize-handle-idle);
 }
 
 /* Position resize handle based on panel position */
@@ -497,6 +498,16 @@
   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);
@@ -1209,6 +1220,10 @@
   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;
 }
@@ -1453,4 +1468,3 @@
     transform: scale(1.1);
   }
 }
-

package/src/AIAgentPanel.tsx

@@ -5,6 +5,9 @@ import AIChatPanel, {
   AIChatHistoryEntry,
   AgentOption,
   BeforeSendPayload,
+  ComposerAgentModeControl,
+  CompactContextInput,
+  CompactContextResult,
   LocalToolExecutor,
   ToolStatusLabelFormatter,
   TraceContextMode,
@@ -136,6 +139,8 @@ export 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;
@@ -166,6 +171,10 @@ export interface AIAgentPanelProps {
 
   // Conversation history settings
   historyListLimit?: number;
+  conversationSubtitleResolver?: (
+    conversationId: string,
+    conversation?: APIConversationSummary | ActiveConversation,
+  ) => string | null | undefined;
 
   // Enable/disable conversation history panel
   showConversationHistory?: boolean;
@@ -191,6 +200,7 @@ export interface AIAgentPanelProps {
   traceContextMode?: TraceContextMode;
   autoApproveTools?: boolean | string[];
   toolStatusLabelFormatter?: ToolStatusLabelFormatter;
+  composerAgentModeControl?: ComposerAgentModeControl;
 }
 
 // Icons
@@ -283,6 +293,10 @@ const normalizeConversationListPayload = (payload: any): APIConversationSummary[
     }
 
     const resolvedConversationId =
+      conv.sessionId ||
+      conv.session_id ||
+      conv.sessionKey ||
+      conv.session_key ||
       conv.conversationId ||
       conv.id ||
       conv.conversation_id ||
@@ -947,6 +961,8 @@ interface ChatPanelWrapperProps {
   // Conversation creation callback
   onConversationCreated: (tempId: string, realId: string) => void;
   onBeforeSend?: (payload: BeforeSendPayload) => Promise<void> | void;
+  compactContext?: (input: CompactContextInput) => Promise<CompactContextResult> | CompactContextResult;
+  compactionPreserveTurns?: number;
   // Per-conversation initial prompt
   conversationInitialPrompt?: string;
   // New props from ChatPanel port
@@ -970,6 +986,7 @@ interface ChatPanelWrapperProps {
   traceContextMode?: TraceContextMode;
   autoApproveTools?: boolean | string[];
   toolStatusLabelFormatter?: ToolStatusLabelFormatter;
+  composerAgentModeControl?: ComposerAgentModeControl;
 }
 
 // Remove React.memo temporarily to debug - ChatPanelWrapper needs to re-render when agentId changes
@@ -1005,6 +1022,8 @@ const ChatPanelWrapper = (({
   onToggleSection,
   onConversationCreated,
   onBeforeSend,
+  compactContext,
+  compactionPreserveTurns,
   conversationInitialPrompt,
   // New props from ChatPanel port
   cssUrl,
@@ -1027,6 +1046,7 @@ const ChatPanelWrapper = (({
   traceContextMode,
   autoApproveTools,
   toolStatusLabelFormatter,
+  composerAgentModeControl,
 }) => {
   const convAgentProfile = getAgent(activeConv.agentId);
   const convAgentMetadata = convAgentProfile?.metadata;
@@ -1150,6 +1170,8 @@ const ChatPanelWrapper = (({
         onToggleSection={onToggleSection}
         onConversationCreated={conversationCreatedCallback}
         onBeforeSend={beforeSendCallback}
+        compactContext={compactContext}
+        compactionPreserveTurns={compactionPreserveTurns}
         cssUrl={cssUrl}
         markdownClass={markdownClass}
         width={width}
@@ -1170,6 +1192,7 @@ const ChatPanelWrapper = (({
         traceContextMode={traceContextMode}
         autoApproveTools={autoApproveTools}
         toolStatusLabelFormatter={toolStatusLabelFormatter}
+        composerAgentModeControl={composerAgentModeControl}
       />
     </div>
   );
@@ -1229,6 +1252,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   onAgentSwitch,
   onConversationChange,
   onBeforeSend,
+  compactContext,
+  compactionPreserveTurns,
   historyChangedCallback,
   responseCompleteCallback,
   thumbsUpClick,
@@ -1244,6 +1269,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   followOnQuestions = [],
   followOnPrompt = '',
   historyListLimit = 50,
+  conversationSubtitleResolver,
   showConversationHistory = true,
   // New props from ChatPanel port
   cssUrl,
@@ -1266,6 +1292,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   traceContextMode = 'standard',
   autoApproveTools,
   toolStatusLabelFormatter,
+  composerAgentModeControl,
 }, ref) => {
   // Dev mode warnings for prop conflicts
   useEffect(() => {
@@ -1465,6 +1492,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     'This Month': false,
     'Older': false,
   });
+  const [recentlyFocusedConversationId, setRecentlyFocusedConversationId] = useState<string | null>(null);
 
   // Context section toggle state (per-conversation disabled sections)
   const [disabledContextSections, setDisabledContextSections] = useState<Map<string, Set<string>>>(new Map());
@@ -2000,11 +2028,14 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
       return;
     }
 
+    if (currentConversationIdRef.current !== targetConversationId) {
+      setCurrentConversationId(targetConversationId);
+    }
+
     const existingActive = activeConversationsRef.current.get(targetConversationId);
     if (
       existingActive &&
-      existingActive.transcriptLoaded &&
-      currentConversationIdRef.current === targetConversationId
+      existingActive.transcriptLoaded
     ) {
       return;
     }
@@ -2196,6 +2227,57 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
     return groupConversationsByTime(filtered, true);
   }, [apiConversations, searchQuery, conversationFirstPrompts]);
 
+  // Ensure the selected conversation is visible in history after controlled route/session changes.
+  useEffect(() => {
+    if (!currentConversationId) {
+      return;
+    }
+
+    const matchingGroup = groupedConversations.find((group) =>
+      group.conversations.some((conversation) => conversation.conversationId === currentConversationId)
+    );
+    if (!matchingGroup) {
+      return;
+    }
+
+    setExpandedSections((prev) => {
+      if (prev[matchingGroup.label]) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [matchingGroup.label]: true,
+      };
+    });
+  }, [currentConversationId, groupedConversations]);
+
+  useEffect(() => {
+    if (!currentConversationId) {
+      return;
+    }
+    setRecentlyFocusedConversationId(currentConversationId);
+    const timer = window.setTimeout(() => {
+      setRecentlyFocusedConversationId((prev) => (prev === currentConversationId ? null : prev));
+    }, 1200);
+    return () => window.clearTimeout(timer);
+  }, [currentConversationId]);
+
+  const conversationRowRefs = useRef<Map<string, HTMLDivElement>>(new Map());
+  useEffect(() => {
+    if (!currentConversationId) {
+      return;
+    }
+    const row = conversationRowRefs.current.get(currentConversationId);
+    if (!row) {
+      return;
+    }
+    row.scrollIntoView({
+      block: 'nearest',
+      inline: 'nearest',
+      behavior: 'smooth',
+    });
+  }, [currentConversationId, expandedSections, groupedConversations]);
+
   // Build effective customer object with required customerId
   const effectiveCustomer = useMemo(() => {
     return {
@@ -2986,14 +3068,28 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
               <div className="ai-agent-panel__group-label">
                 <span>Active ({activeConversationsList.length})</span>
               </div>
-              {activeConversationsList.map((activeConv) => (
+              {activeConversationsList.map((activeConv) => {
+                const subtitle =
+                  conversationSubtitleResolver?.(activeConv.conversationId, activeConv) || '';
+                return (
                 <div
                   key={activeConv.stableKey}
                   className={`ai-agent-panel__conversation ai-agent-panel__conversation--active-item ${
                     currentConversationId === activeConv.conversationId
                       ? 'ai-agent-panel__conversation--current'
                       : ''
+                  } ${
+                    recentlyFocusedConversationId === activeConv.conversationId
+                      ? 'ai-agent-panel__conversation--just-focused'
+                      : ''
                   }`}
+                  ref={(node) => {
+                    if (node) {
+                      conversationRowRefs.current.set(activeConv.conversationId, node);
+                    } else {
+                      conversationRowRefs.current.delete(activeConv.conversationId);
+                    }
+                  }}
                   onClick={() => {
                     commitConversationSelection(activeConv.conversationId, true);
                   }}
@@ -3003,6 +3099,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                       {activeConv.isLoading && <LoadingDotIcon />}
                       <span>{activeConv.title}</span>
                     </div>
+                    {subtitle ? (
+                      <div className="ai-agent-panel__conversation-subtitle">{subtitle}</div>
+                    ) : null}
                   </div>
                   <button
                     className="ai-agent-panel__conversation-close"
@@ -3012,7 +3111,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                     <CloseIcon />
                   </button>
                 </div>
-              ))}
+                );
+              })}
             </div>
           )}
           
@@ -3056,6 +3156,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                   {expandedSections[group.label] && group.conversations.length > 0 && group.conversations.map((conv, convIndex) => {
                     // Check if this conversation is already active
                     const isActive = activeConversations.has(conv.conversationId);
+                    const subtitle = conversationSubtitleResolver?.(conv.conversationId, conv) || '';
                     return (
                       <div
                         key={`${group.label}-${conv.conversationId}-${convIndex}`}
@@ -3063,7 +3164,18 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                           currentConversationId === conv.conversationId
                             ? 'ai-agent-panel__conversation--current'
                             : ''
+                        } ${
+                          recentlyFocusedConversationId === conv.conversationId
+                            ? 'ai-agent-panel__conversation--just-focused'
+                            : ''
                         } ${isActive ? 'ai-agent-panel__conversation--in-active' : ''}`}
+                        ref={(node) => {
+                          if (node) {
+                            conversationRowRefs.current.set(conv.conversationId, node);
+                          } else {
+                            conversationRowRefs.current.delete(conv.conversationId);
+                          }
+                        }}
                         onClick={() => handleConversationSelect(conv)}
                       >
                         <div className="ai-agent-panel__conversation-content">
@@ -3071,6 +3183,9 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                             {isActive && <span className="ai-agent-panel__active-badge">●</span>}
                             {conversationFirstPrompts[conv.conversationId] || conv.title}
                           </div>
+                          {subtitle ? (
+                            <div className="ai-agent-panel__conversation-subtitle">{subtitle}</div>
+                          ) : null}
                         </div>
                       </div>
                     );
@@ -3143,6 +3258,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             onToggleSection={handleContextSectionToggle}
             onConversationCreated={handleConversationCreated}
             onBeforeSend={onBeforeSend}
+            compactContext={compactContext}
+            compactionPreserveTurns={compactionPreserveTurns}
             conversationInitialPrompt={activeConv.conversationInitialPrompt}
             cssUrl={cssUrl}
             markdownClass={markdownClass}
@@ -3164,6 +3281,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
         traceContextMode={traceContextMode}
         autoApproveTools={autoApproveTools}
         toolStatusLabelFormatter={toolStatusLabelFormatter}
+        composerAgentModeControl={composerAgentModeControl}
       />
         ))}