@hef2024/llmasaservice-ui 0.22.11 → 0.23.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.22.11",
+  "version": "0.23.1",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIAgentPanel.tsx

@@ -1956,7 +1956,6 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
               toggleCollapse();
             }
           }}
-          title="Click to expand"
         >
           {/* Expand button at top for discoverability */}
           <Tooltip content="Expand Panel" side="left">
@@ -2013,58 +2012,58 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
             const hasActiveConversation = !!activeConvForAgent;
             
             return (
-              <Tooltip key={agent.id} content={agent.name} side="left">
-                <Button
-                  variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
-                  size="icon"
-                  onClick={() => {
-                    // Expand panel in controlled or uncontrolled mode
-                    if (!isControlled) {
-                      setUncontrolledIsCollapsed(false);
+              <Button
+                key={agent.id}
+                variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
+                size="icon"
+                title={agent.name}
+                onClick={() => {
+                  // Expand panel in controlled or uncontrolled mode
+                  if (!isControlled) {
+                    setUncontrolledIsCollapsed(false);
+                  }
+                  onCollapsedChange?.(false);
+                  if (hasActiveConversation && activeConvForAgent) {
+                    // Switch to the existing conversation
+                    setCurrentConversationId(activeConvForAgent.conversationId);
+                    setCurrentAgentId(agent.id);
+                    if (onConversationChange) {
+                      onConversationChange(activeConvForAgent.conversationId);
                     }
-                    onCollapsedChange?.(false);
-                    if (hasActiveConversation && activeConvForAgent) {
-                      // Switch to the existing conversation
-                      setCurrentConversationId(activeConvForAgent.conversationId);
-                      setCurrentAgentId(agent.id);
-                      if (onConversationChange) {
-                        onConversationChange(activeConvForAgent.conversationId);
-                      }
-                    } else {
-                      // Start a new conversation with this agent
-                      const tempId = `new-${Date.now()}`;
-                      setActiveConversations(prev => {
-                        const next = new Map(prev);
-                        next.set(tempId, {
-                          conversationId: tempId,
-                          stableKey: tempId, // Stable key never changes
-                          agentId: agent.id,
-                          history: {},
-                          isLoading: false,
-                          title: 'New conversation',
-                        });
-                        return next;
+                  } else {
+                    // Start a new conversation with this agent
+                    const tempId = `new-${Date.now()}`;
+                    setActiveConversations(prev => {
+                      const next = new Map(prev);
+                      next.set(tempId, {
+                        conversationId: tempId,
+                        stableKey: tempId, // Stable key never changes
+                        agentId: agent.id,
+                        history: {},
+                        isLoading: false,
+                        title: 'New conversation',
                       });
-                      setCurrentConversationId(tempId);
-                      setCurrentAgentId(agent.id);
-                    }
-                  }}
-                  className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
-                >
-                  {agent.avatarUrl ? (
-                    <img
-                      src={agent.avatarUrl}
-                      alt={agent.name}
-                      className="ai-agent-panel__agent-avatar"
-                    />
-                  ) : (
-                    agent.name.charAt(0).toUpperCase()
-                  )}
-                  {hasActiveConversation && (
-                    <span className="ai-agent-panel__agent-active-indicator" />
-                  )}
-                </Button>
-              </Tooltip>
+                      return next;
+                    });
+                    setCurrentConversationId(tempId);
+                    setCurrentAgentId(agent.id);
+                  }
+                }}
+                className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
+              >
+                {agent.avatarUrl ? (
+                  <img
+                    src={agent.avatarUrl}
+                    alt={agent.name}
+                    className="ai-agent-panel__agent-avatar"
+                  />
+                ) : (
+                  agent.name.charAt(0).toUpperCase()
+                )}
+                {hasActiveConversation && (
+                  <span className="ai-agent-panel__agent-active-indicator" />
+                )}
+              </Button>
             );
           })}
 
@@ -2105,7 +2104,6 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
                 toggleHistoryCollapse();
               }
             }}
-            title="Click to expand history"
           >
             {/* Expand button at top for discoverability */}
             <Tooltip content="Expand History" side={sidebarPosition === 'left' ? 'right' : 'left'}>
@@ -2140,53 +2138,53 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
               const hasActiveConversation = !!activeConvForAgent;
               
               return (
-                <Tooltip key={agent.id} content={agent.name} side={sidebarPosition === 'left' ? 'right' : 'left'}>
-                  <Button
-                    variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
-                    size="icon"
-                    onClick={() => {
-                      if (hasActiveConversation && activeConvForAgent) {
-                        // Switch to the existing conversation
-                        setCurrentConversationId(activeConvForAgent.conversationId);
-                        setCurrentAgentId(agent.id);
-                        if (onConversationChange) {
-                          onConversationChange(activeConvForAgent.conversationId);
-                        }
-                      } else {
-                        // Start a new conversation with this agent
-                        const tempId = `new-${Date.now()}`;
-                        setActiveConversations(prev => {
-                          const next = new Map(prev);
-                          next.set(tempId, {
-                            conversationId: tempId,
-                            stableKey: tempId, // Stable key never changes
-                            agentId: agent.id,
-                            history: {},
-                            isLoading: false,
-                            title: 'New conversation',
-                          });
-                          return next;
-                        });
-                        setCurrentConversationId(tempId);
-                        setCurrentAgentId(agent.id);
+                <Button
+                  key={agent.id}
+                  variant={agent.id === currentAgentId ? 'secondary' : 'ghost'}
+                  size="icon"
+                  title={agent.name}
+                  onClick={() => {
+                    if (hasActiveConversation && activeConvForAgent) {
+                      // Switch to the existing conversation
+                      setCurrentConversationId(activeConvForAgent.conversationId);
+                      setCurrentAgentId(agent.id);
+                      if (onConversationChange) {
+                        onConversationChange(activeConvForAgent.conversationId);
                       }
-                    }}
-                    className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
-                  >
-                    {agent.avatarUrl ? (
-                      <img
-                        src={agent.avatarUrl}
-                        alt={agent.name}
-                        className="ai-agent-panel__agent-avatar"
-                      />
-                    ) : (
-                      agent.name.charAt(0).toUpperCase()
-                    )}
-                    {hasActiveConversation && (
-                      <span className="ai-agent-panel__agent-active-indicator" />
-                    )}
-                  </Button>
-                </Tooltip>
+                    } else {
+                      // Start a new conversation with this agent
+                      const tempId = `new-${Date.now()}`;
+                      setActiveConversations(prev => {
+                        const next = new Map(prev);
+                        next.set(tempId, {
+                          conversationId: tempId,
+                          stableKey: tempId, // Stable key never changes
+                          agentId: agent.id,
+                          history: {},
+                          isLoading: false,
+                          title: 'New conversation',
+                        });
+                        return next;
+                      });
+                      setCurrentConversationId(tempId);
+                      setCurrentAgentId(agent.id);
+                    }
+                  }}
+                  className={`ai-agent-panel__agent-icon ${hasActiveConversation ? 'ai-agent-panel__agent-icon--active' : ''}`}
+                >
+                  {agent.avatarUrl ? (
+                    <img
+                      src={agent.avatarUrl}
+                      alt={agent.name}
+                      className="ai-agent-panel__agent-avatar"
+                    />
+                  ) : (
+                    agent.name.charAt(0).toUpperCase()
+                  )}
+                  {hasActiveConversation && (
+                    <span className="ai-agent-panel__agent-active-indicator" />
+                  )}
+                </Button>
               );
             })}
             

package/src/AIChatPanel.css

@@ -2352,4 +2352,369 @@
 
 .dark-theme .ai-chat-email-edit-button:hover {
   background-color: #374151;
+}
+
+/* ============================================================================
+   Streaming Thinking Blocks - New Collapsible Design
+============================================================================ */
+
+/* Word Fade-In Animation */
+.word-fade-in {
+  animation: wordFadeIn 150ms ease-out forwards;
+}
+
+@keyframes wordFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Streaming Text Chunk Animation - for text appearing as it streams */
+.streaming-text-chunk {
+  animation: streamingFadeIn var(--fade-duration, 400ms) ease-out forwards;
+}
+
+@keyframes streamingFadeIn {
+  0% {
+    opacity: 0;
+    background-color: rgba(99, 102, 241, 0.2);
+    border-radius: 2px;
+  }
+  30% {
+    opacity: 0.8;
+    background-color: rgba(99, 102, 241, 0.15);
+  }
+  100% {
+    opacity: 1;
+    background-color: transparent;
+  }
+}
+
+/* Dark theme streaming highlight */
+.dark-theme .streaming-text-chunk {
+  animation: streamingFadeInDark var(--fade-duration, 400ms) ease-out forwards;
+}
+
+@keyframes streamingFadeInDark {
+  0% {
+    opacity: 0;
+    background-color: rgba(129, 140, 248, 0.25);
+    border-radius: 2px;
+  }
+  30% {
+    opacity: 0.8;
+    background-color: rgba(129, 140, 248, 0.15);
+  }
+  100% {
+    opacity: 1;
+    background-color: transparent;
+  }
+}
+
+/* Thinking Block Container */
+.thinking-block {
+  margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+  background-color: var(--ai-chat-thinking-bg);
+  border: 1px solid var(--ai-chat-thinking-border);
+  transition: all 0.2s ease-out;
+}
+
+/* Type-specific themes */
+.thinking-block--thinking {
+  --thinking-block-accent: #8b5cf6;
+  --thinking-block-bg: #f5f3ff;
+  --thinking-block-text: #5b21b6;
+  background-color: var(--thinking-block-bg);
+  border-color: var(--thinking-block-accent);
+}
+
+.thinking-block--reasoning {
+  --thinking-block-accent: #3b82f6;
+  --thinking-block-bg: #eff6ff;
+  --thinking-block-text: #1d4ed8;
+  background-color: var(--thinking-block-bg);
+  border-color: var(--thinking-block-accent);
+}
+
+.thinking-block--searching {
+  --thinking-block-accent: #22c55e;
+  --thinking-block-bg: #f0fdf4;
+  --thinking-block-text: #166534;
+  background-color: var(--thinking-block-bg);
+  border-color: var(--thinking-block-accent);
+}
+
+/* Dark theme type-specific */
+.dark-theme .thinking-block--thinking {
+  --thinking-block-bg: #1e1b2e;
+  --thinking-block-accent: #a78bfa;
+  --thinking-block-text: #c4b5fd;
+}
+
+.dark-theme .thinking-block--reasoning {
+  --thinking-block-bg: #0c1929;
+  --thinking-block-accent: #60a5fa;
+  --thinking-block-text: #93c5fd;
+}
+
+.dark-theme .thinking-block--searching {
+  --thinking-block-bg: #052e16;
+  --thinking-block-accent: #4ade80;
+  --thinking-block-text: #86efac;
+}
+
+/* Header (clickable toggle) */
+.thinking-block__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: left;
+  transition: background-color 0.15s;
+}
+
+.thinking-block__header:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.dark-theme .thinking-block__header:hover {
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.thinking-block__header-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Icon */
+.thinking-block__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
+  flex-shrink: 0;
+}
+
+/* Title */
+.thinking-block__title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+}
+
+/* Chevron (collapse indicator) */
+.thinking-block__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+  opacity: 0.6;
+  transition: transform 0.2s ease-out;
+  flex-shrink: 0;
+}
+
+.thinking-block__chevron--collapsed {
+  transform: rotate(-90deg);
+}
+
+/* Streaming Indicator (three pulsing dots) */
+.thinking-block__streaming-indicator {
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  margin-left: 4px;
+}
+
+.thinking-block__streaming-dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
+  animation: streamingDotPulse 1.4s ease-in-out infinite;
+}
+
+.thinking-block__streaming-dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.thinking-block__streaming-dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.thinking-block__streaming-dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes streamingDotPulse {
+  0%, 60%, 100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  30% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Blinking cursor for streaming content */
+.thinking-block__cursor {
+  display: inline;
+  color: var(--thinking-block-accent, var(--ai-chat-thinking-icon));
+  animation: cursorBlink 0.8s step-end infinite;
+  font-weight: bold;
+  margin-left: 1px;
+}
+
+@keyframes cursorBlink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}
+
+/* Thinking In Progress Indicator - shown during pauses between blocks */
+.thinking-in-progress {
+  padding: 12px 16px;
+  margin: 8px 0;
+  background: linear-gradient(135deg, 
+    rgba(139, 92, 246, 0.08) 0%, 
+    rgba(99, 102, 241, 0.08) 100%
+  );
+  border: 1px solid rgba(139, 92, 246, 0.2);
+  border-radius: 8px;
+  animation: thinkingPulse 2s ease-in-out infinite;
+}
+
+.thinking-in-progress__content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.thinking-in-progress__icon {
+  width: 16px;
+  height: 16px;
+  color: var(--ai-chat-thinking-icon, #8b5cf6);
+  animation: iconSpin 2s linear infinite;
+}
+
+.thinking-in-progress__text {
+  color: var(--ai-chat-text, #374151);
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.thinking-in-progress__dots {
+  display: flex;
+  gap: 3px;
+  margin-left: 2px;
+}
+
+.thinking-in-progress__dot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--ai-chat-thinking-icon, #8b5cf6);
+  animation: dotPulse 1.4s ease-in-out infinite;
+}
+
+.thinking-in-progress__dot:nth-child(1) { animation-delay: 0s; }
+.thinking-in-progress__dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-in-progress__dot:nth-child(3) { animation-delay: 0.4s; }
+
+@keyframes thinkingPulse {
+  0%, 100% { 
+    opacity: 1;
+    border-color: rgba(139, 92, 246, 0.2);
+  }
+  50% { 
+    opacity: 0.85;
+    border-color: rgba(139, 92, 246, 0.4);
+  }
+}
+
+@keyframes iconSpin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+@keyframes dotPulse {
+  0%, 60%, 100% { 
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  30% { 
+    opacity: 1;
+    transform: scale(1.1);
+  }
+}
+
+/* Dark theme */
+.dark-theme .thinking-in-progress {
+  background: linear-gradient(135deg, 
+    rgba(139, 92, 246, 0.12) 0%, 
+    rgba(99, 102, 241, 0.12) 100%
+  );
+  border-color: rgba(139, 92, 246, 0.3);
+}
+
+.dark-theme .thinking-in-progress__text {
+  color: var(--ai-chat-text, #e5e7eb);
+}
+
+/* Content Wrapper (for collapse animation) */
+.thinking-block__content-wrapper {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.thinking-block--collapsed .thinking-block__content-wrapper {
+  grid-template-rows: 0fr;
+}
+
+/* Content */
+.thinking-block__content {
+  overflow: hidden;
+  padding: 0 12px 12px 12px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--thinking-block-text, var(--ai-chat-thinking-text));
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.thinking-block--collapsed .thinking-block__content {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* Streaming state - subtle left border glow */
+.thinking-block:not(.thinking-block--collapsed) {
+  border-left-width: 3px;
+}
+
+/* Animation when block first appears */
+.thinking-block {
+  animation: thinkingBlockAppear 0.2s ease-out;
+}
+
+@keyframes thinkingBlockAppear {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }