@hef2024/llmasaservice-ui 0.22.11 → 0.23.1

package/src/ChatPanel.css

@@ -927,8 +927,8 @@
   color: #999;
 }
 
-/* Reasoning and Searching Sections */
-.reasoning-section, .searching-section {
+/* Reasoning, Searching, and Thinking Sections */
+.reasoning-section, .searching-section, .thinking-section.thinking-section {
   margin: 1rem 0;
   padding: 0.75rem;
   border-radius: var(--border-radius);
@@ -946,6 +946,12 @@
   background-color: var(--searching-background-color, #f0fff0);
 }
 
+/* Thinking type (Claude-style extended thinking) - purple/violet theme */
+.thinking-section.thinking-section {
+  border-left-color: var(--thinking-border-color, #8b5cf6);
+  background-color: var(--thinking-background-color, #f5f3ff);
+}
+
 .reasoning-header, .searching-header {
   font-weight: 600;
   font-size: 0.9rem;
@@ -962,7 +968,7 @@
   font-style: italic;
 }
 
-/* Dark theme support for reasoning/searching */
+/* Dark theme support for reasoning/searching/thinking */
 .dark-theme .reasoning-section {
   background-color: var(--reasoning-background-color-dark, #1a1a2e);
   border-left-color: var(--reasoning-border-color-dark, #4a9eff);
@@ -973,6 +979,11 @@
   border-left-color: var(--searching-border-color-dark, #4ade80);
 }
 
+.dark-theme .thinking-section.thinking-section {
+  background-color: var(--thinking-background-color-dark, #1e1a2e);
+  border-left-color: var(--thinking-border-color-dark, #a78bfa);
+}
+
 .dark-theme .reasoning-header,
 .dark-theme .searching-header,
 .dark-theme .reasoning-content,
@@ -1201,4 +1212,369 @@ button[data-pending="true"]::after {
     opacity: 1;
     transform: translateY(0);
   }
+}
+
+/* ============================================================================
+   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: var(--border-radius, 8px);
+  overflow: hidden;
+  background-color: var(--input-background-color, #f9fafb);
+  border: 1px solid var(--input-border-color, #e5e7eb);
+  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(--title-text-color));
+  flex-shrink: 0;
+}
+
+/* Title */
+.thinking-block__title {
+  font-weight: 600;
+  font-size: 13px;
+  color: var(--thinking-block-text, var(--title-text-color));
+}
+
+/* Chevron (collapse indicator) */
+.thinking-block__chevron {
+  width: 16px;
+  height: 16px;
+  color: var(--thinking-block-text, var(--title-text-color));
+  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(--title-text-color));
+  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: var(--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(--thinking-block-accent, #8b5cf6);
+  animation: iconSpin 2s linear infinite;
+}
+
+.thinking-in-progress__text {
+  color: var(--text-color, #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(--thinking-block-accent, #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(--text-color, #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(--input-text-color));
+  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);
+  }
 }