@netlify/spark-ui 1.8.2-alpha.0 → 1.8.3

package/dist/components/preact/AskNetlify/AskNetlify.js

@@ -1,5 +1,5 @@
 import { u as a } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import { C as t, K as r } from "../../../chunks/ChatInterface.BMDJO4i6.js";
+import { C as t, K as r } from "../../../chunks/ChatInterface.BLB99yBP.js";
 import '../../../assets/AskNetlify.css';function n(e) {
   return /* @__PURE__ */ a(
     r,

package/dist/components/preact/AskNetlify/components/ChatInterface.js

@@ -1,6 +1,6 @@
 import "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
 import "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as f } from "../../../../chunks/ChatInterface.BMDJO4i6.js";
+import { C as f } from "../../../../chunks/ChatInterface.BLB99yBP.js";
 import "./QuestionList/questions.js";
 import "./QuestionList/QuestionList.js";
 import "./BackButton.js";

package/dist/components/preact/AskNetlify/components/ChatMessages.d.ts

@@ -1,3 +1,5 @@
-export declare function ChatMessages({ conversation }: {
+import { Ref } from 'preact';
+export declare function ChatMessages({ conversation, lastMessageRef, }: {
     conversation: any[];
+    lastMessageRef: Ref<HTMLDivElement>;
 }): import("preact").JSX.Element;

package/dist/components/preact/AskNetlify/components/ChatMessages.js

@@ -1564,17 +1564,30 @@ f.walkTokens;
 f.parseInline;
 $.parse;
 S.lex;
-function ht({ conversation: n }) {
-  return /* @__PURE__ */ w($e, { children: n.map((e, t) => /* @__PURE__ */ w("div", { class: "n-ask-message", children: [
-    /* @__PURE__ */ w("div", { class: "n-ask-message-right", children: /* @__PURE__ */ w("div", { class: "n-ask-message-bubble n-ask-user-message", children: /* @__PURE__ */ w("p", { children: e.question }) }) }),
-    /* @__PURE__ */ w("div", { class: "n-ask-message-left", children: e.answer ? /* @__PURE__ */ w("div", { class: "n-ask-message-bubble n-ask-bot-message", children: /* @__PURE__ */ w(
-      "div",
-      {
-        class: "n-ask-message-answer prose flow",
-        dangerouslySetInnerHTML: { __html: f.parse(e.answer) }
-      }
-    ) }) : /* @__PURE__ */ w("div", { class: "n-ask-message-loader", children: /* @__PURE__ */ w(Se, { name: "askNetlify" }) }) })
-  ] }, e.id || `qa-${t}`)) });
+function ht({
+  conversation: n,
+  lastMessageRef: e
+}) {
+  return /* @__PURE__ */ w($e, { children: n.map((t, r) => {
+    const s = r === n.length - 1;
+    return /* @__PURE__ */ w("div", { class: "n-ask-message", children: [
+      /* @__PURE__ */ w("div", { class: "n-ask-message-right", children: /* @__PURE__ */ w(
+        "div",
+        {
+          ref: s ? e : null,
+          class: "n-ask-message-bubble n-ask-user-message",
+          children: /* @__PURE__ */ w("p", { children: t.question })
+        }
+      ) }),
+      /* @__PURE__ */ w("div", { class: "n-ask-message-left", children: t.answer ? /* @__PURE__ */ w("div", { class: "n-ask-message-bubble n-ask-bot-message", children: /* @__PURE__ */ w(
+        "div",
+        {
+          class: "n-ask-message-answer prose flow",
+          dangerouslySetInnerHTML: { __html: f.parse(t.answer) }
+        }
+      ) }) : /* @__PURE__ */ w("div", { class: "n-ask-message-loader", children: /* @__PURE__ */ w(Se, { name: "askNetlify" }) }) })
+    ] }, t.id || `qa-${r}`);
+  }) });
 }
 export {
   ht as ChatMessages

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.8.2-alpha.0",
+  "version": "1.8.3",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -68,4 +68,4 @@
     "prettier": "^3.5.3",
     "prettier-plugin-astro": "^0.14.1"
   }
-}
+}

package/packages/components/preact/AskNetlify/components/ChatInterface.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef } from 'preact/hooks';
+import { useState, useRef, useEffect } from 'preact/hooks';
 import { useChat } from '@kapaai/react-sdk';
 import { questions } from './QuestionList/questions';
 import { QuestionList } from './QuestionList/QuestionList';
@@ -11,8 +11,10 @@ interface Props {
 
 export default function ChatInterface({ setModalState }: Props) {
   const [message, setMessage] = useState('');
+  const [newMessageReady, setNewMessageReady] = useState(false);
   const chatRef = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLUListElement>(null);
+  const lastMessageRef = useRef<HTMLDivElement | null>(null);
 
   const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
     useChat();
@@ -27,8 +29,21 @@ export default function ChatInterface({ setModalState }: Props) {
       submitQuery(text.trim());
     }
     if (!id) setMessage('');
+
+    setNewMessageReady(true);
   };
 
+  /*
+   * When a new user message is ready, scroll it into view and reset the flag.
+   * This ensures the most recent message is visible to the user immediately after rendering.
+   */
+  useEffect(() => {
+    if (newMessageReady && lastMessageRef.current) {
+      lastMessageRef.current.scrollIntoView({ behavior: 'smooth' });
+      setNewMessageReady(false);
+    }
+  }, [newMessageReady]);
+
   return (
     <div className="n-ask-chat-container">
       <BackButton onClick={() => setModalState?.({ current: 'search' })} />
@@ -36,7 +51,7 @@ export default function ChatInterface({ setModalState }: Props) {
         {!conversation.length ? (
           <QuestionList onClick={handleSubmit} menuRef={menuRef} />
         ) : (
-          <ChatMessages conversation={conversation} />
+          <ChatMessages conversation={conversation} lastMessageRef={lastMessageRef} />
         )}
       </div>
 

package/packages/components/preact/AskNetlify/components/ChatMessages.tsx

@@ -1,33 +1,46 @@
 import { marked } from 'marked';
 import Icon from '../../Icon';
+import { Ref } from 'preact';
 
-export function ChatMessages({ conversation }: { conversation: any[] }) {
+export function ChatMessages({
+  conversation,
+  lastMessageRef,
+}: {
+  conversation: any[];
+  lastMessageRef: Ref<HTMLDivElement>;
+}) {
   return (
     <>
-      {conversation.map((qa, index) => (
-        <div key={qa.id || `qa-${index}`} class="n-ask-message">
-          <div class="n-ask-message-right">
-            <div class="n-ask-message-bubble n-ask-user-message">
-              <p>{qa.question}</p>
+      {conversation.map((qa, index) => {
+        const isLastMessage = index === conversation.length - 1;
+        return (
+          <div key={qa.id || `qa-${index}`} class="n-ask-message">
+            <div class="n-ask-message-right">
+              <div
+                ref={isLastMessage ? lastMessageRef : null}
+                class="n-ask-message-bubble n-ask-user-message"
+              >
+                <p>{qa.question}</p>
+              </div>
             </div>
-          </div>
 
-          <div class="n-ask-message-left">
-            {qa.answer ? (
-              <div class="n-ask-message-bubble n-ask-bot-message">
-                <div
-                  class="n-ask-message-answer prose flow"
-                  dangerouslySetInnerHTML={{ __html: marked.parse(qa.answer) }}
-                />
-              </div>
-            ) : (
-              <div class="n-ask-message-loader">
-                <Icon name="askNetlify" />
-              </div>
-            )}
+            <div class="n-ask-message-left">
+              {qa.answer ? (
+                <div class="n-ask-message-bubble n-ask-bot-message">
+                  <div
+                    class="n-ask-message-answer prose flow"
+                    dangerouslySetInnerHTML={{ __html: marked.parse(qa.answer) }}
+                  />
+                </div>
+              ) : (
+                <div class="n-ask-message-loader">
+                  <Icon name="askNetlify" />
+                </div>
+              )}
+            </div>
           </div>
-        </div>
-      ))}
+        );
+      })}
     </>
   );
 }