@netlify/spark-ui 1.5.0-alpha.14 → 1.5.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@netlify/spark-ui",
   "description": "Assets, design tokens, components, and utilities",
-  "version": "1.5.0-alpha.14",
+  "version": "1.5.0-alpha.2",
   "type": "module",
   "main": "dist/components/preact/index.js",
   "types": "dist/components/preact/index.d.ts",
@@ -25,7 +25,6 @@
   "exports": {
     "./preact": "./dist/components/preact/index.js",
     "./assets/*.css": "./dist/assets/*.css",
-    "./assets/icons/*.svg": "./packages/assets/icons/*.svg",
     "./logos/*.svg": "./packages/assets/logos/*.svg",
     "./styles/*.css": "./packages/styles/*.css",
     "./components": "./packages/components/index.ts",
@@ -34,7 +33,7 @@
     "./analytics": "./packages/analytics/index.ts"
   },
   "dependencies": {
-    "@kapaai/react-sdk": "^0.1.3",
+    "@kapaai/react-sdk": "^0.1.2",
     "@preact/preset-vite": "^2.10.1",
     "@shikijs/transformers": "^3.3.0",
     "glob": "^11.0.1",

package/packages/components/preact/AskNetlify/AskNetlify.css

@@ -1,78 +1,38 @@
-/* ----------------------------- */
-/* Layout Containers             */
-/* ----------------------------- */
 .chat-container {
   opacity: 0;
   animation: appearContainer 120ms ease-in-out forwards;
   animation-delay: 140ms;
 }
 
+@keyframes appearContainer {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 .conversation {
-  display: grid;
-  align-items: flex-end;
   height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
   padding: var(--n-search-padding-inline);
-  overflow-y: auto;
   scroll-behavior: smooth;
+  overflow-y: auto;
+  display: grid;
+  align-items: flex-end;
   gap: var(--space-s);
 }
 
-.form-wrapper {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: var(--n-search-input-height);
-  background-color: var(--search-input-bg-color);
-}
-
-.form-wrapper::after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: var(--color-bg-3);
-}
-
-/* ----------------------------- */
-/* Conversation and Message UI  */
-/* ----------------------------- */
 .question {
   border: none;
-  border-radius: var(--radius-pill);
-  transform: translateX(-0.75rem);
   color: var(--color-text-1);
-  font-size: var(--step--1);
   font-weight: var(--font-weight-regular);
-  text-align: left;
-  text-wrap: pretty;
-  display: flex;
-  align-items: center;
-  gap: var(--space-2xs);
-  transition: background-color 200ms ease-out;
-}
-
-.question [data-icon='caretRight'] {
-  opacity: 0;
-  color: var(--color-text-weaker);
-  transform: translateX(-3px);
-  transition: transform 200ms ease-out;
-}
-
-.question:hover {
-  background-color: var(--search-back-btn-bg-color);
-
-  [data-icon='caretRight'] {
-    opacity: 1;
-    transform: translateX(0px);
-  }
+  font-size: var(--step--1);
+  border-radius: var(--radius-pill);
+  transform: translateX(-0.75rem);
 }
 
 .question-list li {
-  position: relative;
-  width: fit-content;
   opacity: 0;
   transform: translateY(10px);
   animation: fadeInUp 0.5s forwards;
@@ -81,37 +41,99 @@
 .question-list li:nth-child(1) {
   animation-delay: 0.5s;
 }
+
 .question-list li:nth-child(2) {
   animation-delay: 0.3s;
 }
+
 .question-list li:nth-child(3) {
   animation-delay: 0.1s;
 }
 
+@keyframes fadeInUp {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .message {
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
   gap: var(--space-s);
-  margin-block-start: var(--space-2xl);
 }
 
 .message-bubble {
-  width: fit-content;
-  max-width: 85%;
   padding: var(--space-xs) var(--space-s);
   background: var(--search-answer-message-color);
   border-radius: var(--radius-l);
+  width: fit-content;
+  max-width: 85%;
   font-size: var(--step-0);
 }
 
+.prose {
+  font-size: var(--step--0);
+
+  > * + * {
+    margin-top: var(--flow-space, var(--space-xs));
+  }
+
+  h1,
+  h2,
+  h3 {
+    font-size: var(--step-1);
+  }
+
+  h4,
+  h5,
+  h6 {
+    font-size: var(--step-0);
+  }
+
+  pre {
+    background: var(--neutral-light-700);
+    border-radius: var(--radius-m);
+    max-width: 100%;
+    box-sizing: border-box;
+    padding: var(--space-s);
+    color: var(--color-text-inverse);
+    overflow-x: auto;
+  }
+
+  code {
+    overflow-x: auto;
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    display: block;
+    font-size: var(--font-size-text-xs);
+  }
+}
+
 .user-message {
   margin-inline-start: auto;
   background: var(--search-user-message-color);
 }
 
-/* ----------------------------- */
-/* Form UI                      */
-/* ----------------------------- */
+.form-wrapper {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--n-search-input-height);
+}
+
+.form-wrapper::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background: var(--color-bg-3);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .form-input {
   border: none;
   outline: none;
@@ -119,11 +141,12 @@
 }
 
 .form-submit {
+  border: none;
   padding: 0.7rem;
+  border-radius: var(--radius-pill);
   margin-inline-end: var(--space-2xs);
   border: none;
-  border-radius: var(--radius-pill);
-  background: var(--search-submit-btn-bg-color);
+  background: var(--color-link);
   color: var(--neutral-000);
   transition: background-color 150ms ease-out;
 }
@@ -138,150 +161,45 @@
 
 .form-submit[disabled] {
   background: var(--neutral-500);
-}
 
-.form-submit[disabled] > * {
-  opacity: 0.5;
+  & > * {
+    opacity: 0.5;
+  }
 }
 
-/* ----------------------------- */
-/* Buttons                      */
-/* ----------------------------- */
 .button-back {
+  width: fit-content;
+  background: transparent;
   position: absolute;
   z-index: 1;
-  width: fit-content;
-  margin: 1rem;
   padding: 0.5rem 1rem;
   background: var(--search-back-btn-bg-color);
-  border: 0.5px solid var(--color-bg-3);
+  margin: 1rem;
+  border: 2px solid var(--color-bg-3);
   border-radius: var(--radius-pill);
   font-size: var(--step--1);
-  color: var(--color-text-1);
+  border: 1px solid;
   cursor: pointer;
+  border-color: var(--color-bg-3);
+  color: var(--color-text-1);
+  border-width: 0.5px;
 }
 
-/* ----------------------------- */
-/* Typography & Prose           */
-/* ----------------------------- */
-.prose {
-  font-size: var(--step--0);
-}
-
-.prose > * + * {
-  margin-top: var(--flow-space, var(--space-s));
-}
-
-.prose :where(ol, ul, li) > * + * {
-  margin-top: var(--flow-space, var(--space-3xs));
-}
-
-.prose h1,
-.prose h2,
-.prose h3 {
-  font-size: var(--step-1);
-  font-weight: var(--font-weight-bold);
-}
-
-.prose h4,
-.prose h5,
-.prose h6 {
-  font-size: var(--step-0);
-  font-weight: var(--font-weight-bold);
-}
-
-.prose pre {
-  max-width: 100%;
-  padding: var(--space-s);
-  background: var(--neutral-light-700);
-  border-radius: var(--radius-m);
-  box-sizing: border-box;
-  color: var(--neutral-100);
-  overflow-x: auto;
-}
-
-.prose code {
-  overflow-x: auto;
-}
-
-.prose code[class*='language-'],
-.prose pre[class*='language-'] {
-  display: block;
-  font-size: var(--font-size-text-xs);
-}
-
-/* ----------------------------- */
-/* Loaders and SVG Effects      */
-/* ----------------------------- */
-.message-loader {
-  width: 2.5rem;
-  height: auto;
+.pulsing {
   display: block;
-  color: var(--search-loading-color);
-}
-
-.message-loader :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
-  opacity: 0;
-  animation: fadeIn 800ms ease-in-out infinite;
-}
-
-.message-loader #ask-netlify-tick-1 {
-  animation-delay: 100ms;
-}
-
-.message-loader #ask-netlify-tick-2 {
-  animation-delay: 200ms;
-}
-
-.message-loader #ask-netlify-tick-3 {
-  animation-delay: 300ms;
-}
-
-.message-loader :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
-  transform-origin: top center;
-  transform: scaleY(1.035);
-  animation: askEyeBlink 4s infinite;
-  animation-delay: 1s;
-}
-
-/* ----------------------------- */
-/* Animations and Keyframes     */
-/* ----------------------------- */
-@keyframes fadeIn {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeInUp {
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  width: 1rem;
+  height: 1rem;
+  clip-path: circle(40%);
+  background: var(--search-loading-color);
+  animation: pulsing 2.5s infinite ease-in-out;
 }
 
-@keyframes askEyeBlink {
+@keyframes pulsing {
   0%,
-  5% {
-    transform: scaleY(1.035);
-  }
-  6%,
-  10% {
-    transform: scaleY(1.3);
-  }
-  11%,
-  15% {
-    transform: scaleY(1.035);
-  }
-  16%,
-  20% {
-    transform: scaleY(1.3);
-  }
-  21%,
   100% {
-    transform: scaleY(1.035);
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.05);
   }
 }

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

@@ -1,15 +1,10 @@
 import { useState, useRef, useEffect } from 'preact/hooks';
 import { marked } from 'marked';
 import { KapaProvider, useChat } from '@kapaai/react-sdk';
-import Icon from '../Icon';
 
 import './AskNetlify.css';
 
-interface AskNetlifyProps {
-  setModalState?: (state?: { current: string }) => void;
-}
-
-function AskNetlify(props: AskNetlifyProps) {
+function AskNetlify(props) {
   return (
     <KapaProvider
       integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
@@ -24,48 +19,49 @@ function AskNetlify(props: AskNetlifyProps) {
   );
 }
 
-function ChatInterface({ setModalState }: AskNetlifyProps) {
+function ChatInterface({ setModalState }) {
   const [message, setMessage] = useState('');
   const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
     useChat();
 
-  const chatRef = useRef<HTMLDivElement>(null);
-  const indicatorRef = useRef<HTMLSpanElement>(null);
-  const menuRef = useRef<HTMLUListElement>(null);
-
-  const questions: Record<string, string> = {
-    'a69747ed-505b-4e98-8535-fd357c327516': 'How do I deploy an app to Netlify using AI?',
-    'e477f4dd-7159-4c31-8a18-4dfc7e84d927': 'How does Netlify simplify my CI/CD pipeline?',
-    '39229ddb-9000-4e83-bbf8-54f1c1e55ed4':
-      'How does Netlify help improve my site’s Core Web Vitals?',
-    '5c41b3c2-4c90-4cf7-9f24-f0d0b8f0f759':
-      'What are the benefits of using Netlify with a headless CMS?',
-    '0270de6c-387e-401f-b24c-6ae1166db477':
-      'What are the benefits of hosting on Netlify’s edge network?',
+  const chatRef = useRef(null);
+
+  const QandAMap = {
+    '487cda5f-e852-4223-85dd-d18ab58dc7a9': "Why can't I add my domain to Netlify DNS?",
+    'd133a822-dbe1-4870-8a94-212c5841f194': 'Why is my website not loading?',
+    'e477f4dd-7159-4c31-8a18-4dfc7e84d927': 'How do I set up environment variables?',
   };
 
-  const handleSubmit = (e: Event) => {
+  const handleSubmit = e => {
     e.preventDefault();
 
-    const input = e.target as HTMLInputElement;
-    const questionId = input?.getAttribute('data-id');
-    const question = questionId ? questions[questionId] : message;
+    const id = e.target.getAttribute('data-id');
 
-    if (question.trim()) {
-      submitQuery(question.trim());
+    if (id) {
+      const question = QandAMap[id];
+      if (question.trim()) {
+        submitQuery(question.trim());
+      }
+      setMessage('');
     }
 
     if (message.trim()) {
+      submitQuery(message.trim());
       setMessage('');
     }
   };
 
+  useEffect(() => {
+    const el = chatRef.current as HTMLElement | null;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [conversation]);
+
   return (
     <div className="chat-container">
       <button
         class="button button-back"
         data-button-variant="outline"
-        onClick={() => setModalState && setModalState({ current: 'search' })}
+        onClick={() => setModalState({ current: 'search' })}
         aria-label={'Return to search'}
       >
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
@@ -78,27 +74,14 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
       </button>
       <div ref={chatRef} className="conversation n-search-window">
         {!conversation.length && (
-          <ul ref={menuRef} class="question-list" role="list">
-            {Object.entries(questions).map(([id, question]) => (
+          <ul class="question-list" role="list">
+            {Object.entries(QandAMap).map(([id, question]) => (
               <li>
                 <button class="question" onClick={handleSubmit} data-id={id}>
                   {question}
-                  <Icon name="caretRight" />
                 </button>
               </li>
             ))}
-
-            <span
-              ref={indicatorRef}
-              style={{
-                position: 'absolute',
-                background: 'rgba(0, 0, 0, 0.1)',
-                borderRadius: '4px',
-                transition: 'all 200ms ease',
-                pointerEvents: 'none',
-                zIndex: -1,
-              }}
-            />
           </ul>
         )}
 
@@ -121,9 +104,7 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
                   />
                 </div>
               ) : (
-                <div class="message-loader">
-                  <Icon name="askNetlify" />
-                </div>
+                <span class="pulsing"></span>
               )}
             </div>
           </div>
@@ -139,6 +120,9 @@ function ChatInterface({ setModalState }: AskNetlifyProps) {
           placeholder="Ask a question..."
           disabled={isGeneratingAnswer}
         />
+        {/* <button type="submit" className="form-submit" disabled={isGeneratingAnswer}>
+          Send
+        </button> */}
 
         {isGeneratingAnswer ? (
           <button