@hef2024/llmasaservice-ui 0.22.11 → 0.23.0

package/package.json

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

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);
+  }
 }