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

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

package/packages/components/preact/Icon/index.tsx

@@ -27,27 +27,22 @@ const AskNetlify: FunctionComponent = () => {
   return (
     <>
       <path
-        id="ask-netlify-tick-3"
         d="M9.26465 1.02094L9.31322 0.921348L10.0528 0.666687L10.1524 0.715259L10.5563 1.9638L10.2999 2.4895L10.195 2.52628L9.6685 2.26948L9.26465 1.02094Z"
         fill="currentColor"
       />
       <path
-        id="ask-netlify-tick-1"
         d="M15.5915 3.11667L15.6942 3.15818L15.9999 3.8782L15.9584 3.98093L14.741 4.4709L14.1987 4.25179L14.1547 4.14977L14.3742 3.60663L15.5915 3.11667Z"
         fill="currentColor"
       />
       <path
-        id="ask-netlify-tick-2"
         d="M12.8306 0.944052L12.9353 0.907978L13.6384 1.25087L13.6744 1.35564L12.9408 2.91375L12.3877 3.10417L12.2876 3.05604L12.0969 2.50216L12.8306 0.944052Z"
         fill="currentColor"
       />
       <path
-        id="ask-netlify-eye-left"
         d="M5.60625 10.7823C5.60625 11.421 5.09138 11.9387 4.45625 11.9387C3.82112 11.9387 3.30625 11.421 3.30625 10.7823C3.30625 10.1436 3.82112 9.62585 4.45625 9.62585C5.09138 9.62585 5.60625 10.1436 5.60625 10.7823Z"
         fill="currentColor"
       />
       <path
-        id="ask-netlify-eye-right"
         d="M10.8777 11.9387C11.5129 11.9387 12.0277 11.421 12.0277 10.7823C12.0277 10.1436 11.5129 9.62585 10.8777 9.62585C10.2426 9.62585 9.72774 10.1436 9.72774 10.7823C9.72774 11.421 10.2426 11.9387 10.8777 11.9387Z"
         fill="currentColor"
       />
@@ -61,22 +56,6 @@ const AskNetlify: FunctionComponent = () => {
         d="M7.86997 4.00002C11.9918 4.00002 15.3333 6.70814 15.3333 10.853C15.3333 13.3274 13.3386 15.3334 10.878 15.3334H0V10.853C0 6.70814 3.34157 4.00002 7.46336 4.00002H7.86997ZM0.990302 10.5245C0.990302 8.69571 2.51537 7.15558 4.33747 7.15558C5.71877 7.15558 6.90206 7.9938 7.41504 9.19232C7.41751 9.1981 7.42291 9.20918 7.42291 9.20918H7.91072C7.91072 9.20918 7.91612 9.1981 7.91859 9.19232C8.43157 7.9938 9.61486 7.15558 10.9962 7.15558C12.8183 7.15558 14.3433 8.69571 14.3433 10.5245C14.3433 12.2311 12.9812 13.8499 11.447 13.8845H4.15184C2.38987 13.7867 0.990302 12.323 0.990302 10.5245Z"
         fill="currentColor"
       />
-      <rect
-        id="ask-netlify-eyelid-left"
-        x="3"
-        y="7.3"
-        width="3"
-        height="2"
-        fill="var(--search-bg-color, currentColor)"
-      />
-      <rect
-        id="ask-netlify-eyelid-right"
-        x="9.7"
-        y="7.3"
-        width="3"
-        height="2"
-        fill="var(--search-bg-color, currentColor)"
-      />
     </>
   );
 };

package/packages/components/preact/SearchModal/components/SearchHeading/SearchHeading.css

@@ -1,7 +1,7 @@
 .n-search-heading {
   --n-search-heading-weight: var(--font-weight-semibold, 400);
   --n-search-heading-size: var(--font-size-text-xs, 13px);
-  --n-search-heading-color: var(--color-text-weak, #757575);
+  --n-search-heading-color: var(--color-text-weaker, #757575);
 
   font-size: var(--n-search-heading-size);
   font-weight: var(--n-search-heading-weight);

package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css

@@ -31,11 +31,6 @@
   & .n-search-link-icon [data-icon='caretRight'] {
     opacity: 1;
   }
-
-  & .n-search-link-icon :where(#ask-netlify-eyelid-left, #ask-netlify-eyelid-right) {
-    animation: askEyeBlink 4s infinite;
-    animation-delay: 500ms;
-  }
 }
 
 .n-search-link-title {
@@ -64,7 +59,7 @@
   display: flex;
   width: var(--n-search-icon-size);
   height: var(--n-search-icon-size);
-  color: var(--n-search-color-icon);
+  color: var(--n-search-color-text-secondary);
 }
 
 .n-search-link-icon [data-icon='caretRight'] {

package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css

@@ -6,8 +6,7 @@
 .n-search-modal {
   --n-search-padding-inline: var(--space-s);
   --n-search-color-text: var(--color-text-1, currentColor);
-  --n-search-color-text-secondary: var(--color-text-weak, currentColor);
-  --n-search-color-icon: var(--color-text-weak);
+  --n-search-color-text-secondary: var(--color-text-weaker, currentColor);
   --n-search-color-bg: var(--search-bg-color);
   --n-search-color-bg-2: var(--color-bg-3);
   --n-search-color-border: var(--color-bg-3);
@@ -16,7 +15,7 @@
   --n-search-text-highlight: var(--search-highlight-color);
   --n-search-input-height: 50px;
   --n-search-footer-height: 40px;
-  --n-search-container-height: min(50dvh, 26.5rem);
+  --n-search-container-height: 400px;
 }
 
 .n-search-modal {
@@ -28,6 +27,21 @@
   background: var(--n-search-color-bg);
 }
 
+.n-search-modal::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: blue;
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  transform-origin: center;
+  transform: scale(0);
+  border-radius: var(--radius-m);
+  transition: transform 300ms ease-in-out;
+}
+
 .n-search-modal-ask {
   --n-search-max-w: 800px;
 }
@@ -36,6 +50,7 @@
   --mark-bg: var(--n-search-text-highlight);
   display: grid;
   width: min(var(--n-search-max-w), 100%);
+  /* min-height: 530px; */
   background-color: var(--n-search-color-bg);
   border-radius: var(--n-search-border-radius);
   overflow: hidden;
@@ -51,6 +66,7 @@
 }
 
 .n-search-input-wrapper {
+  /* all: unset; */
   position: relative;
   display: flex;
   width: 100%;
@@ -61,7 +77,7 @@
   position: relative;
   display: inline-flex;
   box-sizing: border-box;
-  background: transparent;
+  background: var(--n-search-color-bg);
   inline-size: 100%;
   padding-block: 0.75rem;
   padding-inline: var(--n-search-padding-inline);