@farming-labs/astro-theme 0.0.2-beta.23 → 0.0.2-beta.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/astro-theme",
-  "version": "0.0.2-beta.23",
+  "version": "0.0.2-beta.24",
   "description": "Astro UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "keywords": [
     "astro",
@@ -69,8 +69,8 @@
   },
   "dependencies": {
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.23",
-    "@farming-labs/astro": "0.0.2-beta.23"
+    "@farming-labs/astro": "0.0.2-beta.24",
+    "@farming-labs/docs": "0.0.2-beta.24"
   },
   "peerDependencies": {
     "astro": ">=4.0.0"

package/src/components/FloatingAIChat.astro

@@ -263,8 +263,9 @@ const containerStyle = getContainerStyle(floatingStyle, position);
     return result;
   }
 
-  const THINKING_HTML_FM = `<div class="fd-ai-fm-thinking"><span class="fd-ai-fm-thinking-dot"></span><span class="fd-ai-fm-thinking-dot"></span><span class="fd-ai-fm-thinking-dot"></span></div>`;
-  const THINKING_HTML = `<span class="fd-ai-loading"><span class="fd-ai-loading-text">Thinking</span><span class="fd-ai-loading-dots"><span class="fd-ai-loading-dot"></span><span class="fd-ai-loading-dot"></span><span class="fd-ai-loading-dot"></span></span></span>`;
+  function thinkingHtml(label: string) {
+    return `<div class="fd-ai-loader"><span class="fd-ai-loader-shimmer-text">Thinking</span><span class="fd-ai-loader-typing-dots"><span class="fd-ai-loader-typing-dot"></span><span class="fd-ai-loader-typing-dot"></span><span class="fd-ai-loader-typing-dot"></span></span></div>`;
+  }
 
   function initFloatingAI() {
     const cfgEl = document.getElementById('fd-float-config');
@@ -355,12 +356,13 @@ const containerStyle = getContainerStyle(floatingStyle, position);
       if (footerHint) footerHint.style.display = 'none';
       if (clearWrap) clearWrap.style.display = 'flex';
 
-      const thinkingHtml = isFullModal ? THINKING_HTML_FM : THINKING_HTML;
-      messagesEl.innerHTML = messages.map(m => {
+      const thinking = thinkingHtml(aiLabel);
+      messagesEl.innerHTML = messages.map((m, i) => {
         const label = m.role === 'user' ? 'You' : aiLabel;
+        const lastAssistant = isStreaming && i === messages.length - 1 && m.role === 'assistant' && m.content;
         const renderedContent = m.role === 'user'
           ? escapeHtml(m.content)
-          : (m.content ? renderMarkdown(m.content) : thinkingHtml);
+          : (m.content ? `<div${lastAssistant ? ' class="fd-ai-streaming"' : ''}>${renderMarkdown(m.content)}</div>` : thinking);
         const bubbleClass = isFullModal
           ? 'fd-ai-fm-msg-content'
           : (m.role === 'user' ? 'fd-ai-bubble-user' : 'fd-ai-bubble-ai');

package/src/components/SearchDialog.astro

@@ -288,11 +288,13 @@ const suggestedQuestions = config?.ai?.suggestedQuestions ?? [];
         aiMessages.innerHTML = '<div class="fd-ai-empty"><div class="fd-ai-empty-title">Ask anything about the docs</div></div>';
         return;
       }
-      const THINKING = `<span class="fd-ai-loading"><span class="fd-ai-loading-text">Thinking</span><span class="fd-ai-loading-dots"><span class="fd-ai-loading-dot"></span><span class="fd-ai-loading-dot"></span><span class="fd-ai-loading-dot"></span></span></span>`;
-      aiMessages.innerHTML = messages.map(m => {
+      const THINKING = `<div class="fd-ai-loader"><span class="fd-ai-loader-shimmer-text">Thinking</span><span class="fd-ai-loader-typing-dots"><span class="fd-ai-loader-typing-dot"></span><span class="fd-ai-loader-typing-dot"></span><span class="fd-ai-loader-typing-dot"></span></span></div>`;
+      const isLast = (i: number) => i === messages.length - 1;
+      aiMessages.innerHTML = messages.map((m, i) => {
+        const streaming = isStreaming && isLast(i) && m.role === 'assistant' && m.content;
         const renderedContent = m.role === 'user'
           ? escapeHtml(m.content)
-          : (m.content ? renderMarkdown(m.content) : THINKING);
+          : (m.content ? `<div${streaming ? ' class="fd-ai-streaming"' : ''}>${renderMarkdown(m.content)}</div>` : THINKING);
         return `<div class="fd-ai-msg" data-role="${m.role}"><div class="fd-ai-msg-label">${m.role === 'user' ? 'You' : aiLabel}</div><div class="${m.role === 'user' ? 'fd-ai-bubble-user' : 'fd-ai-bubble-ai'}">${renderedContent}</div></div>`;
       }).join('');
       aiMessages.scrollTop = aiMessages.scrollHeight;

package/styles/docs.css

@@ -1329,19 +1329,6 @@ html.dark pre.shiki {
  * AI Chat & Search Dialog — base styles (fd-ai-*)
  * ═══════════════════════════════════════════════════════════════════════ */
 
-@keyframes fd-ai-dot {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
 @keyframes fd-ai-fade-in {
   from {
     opacity: 0;
@@ -1693,6 +1680,12 @@ html.dark pre.shiki {
   line-height: 1.6;
   max-width: 95%;
   word-break: break-word;
+  animation: fd-ai-msg-in 300ms ease-out;
+}
+
+@keyframes fd-ai-msg-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
 .fd-ai-chat-footer {
@@ -1745,36 +1738,70 @@ html.dark pre.shiki {
   color: var(--color-fd-primary-foreground);
 }
 
-.fd-ai-loading {
+.fd-ai-loader {
   display: inline-flex;
-  gap: 6px;
   align-items: center;
+  gap: 6px;
+  animation: fd-ai-loader-in 300ms ease-out;
 }
 
-.fd-ai-loading-text {
-  font-size: 12px;
-  color: var(--color-fd-muted-foreground);
+@keyframes fd-ai-loader-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
 }
 
-.fd-ai-loading-dots {
+.fd-ai-loader-shimmer-text {
+  font-size: 13px;
+  font-weight: 500;
+  background: linear-gradient(to right, var(--color-fd-muted-foreground, #888) 40%, var(--color-fd-foreground, #fff) 60%, var(--color-fd-muted-foreground, #888) 80%);
+  background-size: 200% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: fd-ai-shimmer-text 3s linear infinite;
+}
+
+@keyframes fd-ai-shimmer-text {
+  0% { background-position: 150% center; }
+  100% { background-position: -150% center; }
+}
+
+.fd-ai-loader-typing-dots {
   display: inline-flex;
-  gap: 3px;
   align-items: center;
+  gap: 2px;
 }
 
-.fd-ai-loading-dot {
-  width: 5px;
-  height: 5px;
+.fd-ai-loader-typing-dot {
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
-  background: var(--color-fd-muted-foreground);
-  animation: fd-ai-dot 1.4s infinite ease-in-out both;
+  background: var(--color-fd-primary, #6366f1);
+  animation: fd-ai-typing 1s infinite;
+}
+
+.fd-ai-loader-typing-dot:nth-child(2) { animation-delay: 250ms; }
+.fd-ai-loader-typing-dot:nth-child(3) { animation-delay: 500ms; }
+
+@keyframes fd-ai-typing {
+  0%, 100% { transform: translateY(0); opacity: 0.5; }
+  50% { transform: translateY(-2px); opacity: 1; }
 }
 
-.fd-ai-loading-dot:nth-child(2) {
-  animation-delay: 0.16s;
+.fd-ai-streaming::after {
+  content: "";
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  background: var(--color-fd-primary, #6366f1);
+  margin-left: 2px;
+  vertical-align: text-bottom;
+  animation: fd-ai-cursor-blink 0.8s step-end infinite;
 }
-.fd-ai-loading-dot:nth-child(3) {
-  animation-delay: 0.32s;
+
+@keyframes fd-ai-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
 }
 
 /* ─── Markdown in AI responses ───────────────────────────────── */
@@ -2166,41 +2193,7 @@ html.dark pre.shiki {
   font-size: 12px;
 }
 
-/* ─── Thinking dots ──────────────────────────────────────────── */
-
-.fd-ai-fm-thinking {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.fd-ai-fm-thinking-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 9999px;
-  background: var(--color-fd-primary, #6366f1);
-  animation: fd-ai-fm-bounce 1s infinite ease-in-out;
-}
-
-.fd-ai-fm-thinking-dot:nth-child(2) {
-  animation-delay: 150ms;
-}
-.fd-ai-fm-thinking-dot:nth-child(3) {
-  animation-delay: 300ms;
-}
-
-@keyframes fd-ai-fm-bounce {
-  0%,
-  80%,
-  100% {
-    transform: scale(0.6);
-    opacity: 0.4;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
+/* Full-modal now uses the shared .fd-ai-loader indicator */
 
 /* ─── Bottom input bar ───────────────────────────────────────── */
 

package/styles/pixel-border.css

@@ -477,13 +477,13 @@
   letter-spacing: 0.06em;
 }
 
-.fd-ai-loading-text {
+.fd-ai-loader-shimmer-text {
   text-transform: uppercase;
   letter-spacing: 0.04em;
   font-size: 11px;
 }
 
-.fd-ai-loading-dot {
+.fd-ai-loader-typing-dot {
   border-radius: 0;
   width: 4px;
   height: 4px;
@@ -561,11 +561,7 @@
   font-size: 11px;
 }
 
-.fd-ai-fm-thinking-dot {
-  border-radius: 0;
-  width: 5px;
-  height: 5px;
-}
+/* Full-modal now uses .fd-ai-loader-typing-dot (see above) */
 
 /* ─── Code blocks in AI chat (pixel-border) ──────────────────────── */