@netlify/spark-ui 1.5.0 → 1.8.0

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

@@ -0,0 +1,282 @@
+/* ----------------------------- */
+/* Layout Containers             */
+/* ----------------------------- */
+.n-ask-chat-container {
+  opacity: 0;
+  animation: appearContainer 120ms ease-in-out forwards;
+  animation-delay: 140ms;
+}
+
+.n-ask-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;
+  gap: var(--space-s);
+}
+
+.n-ask-form {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: var(--n-search-input-height);
+  background-color: var(--search-input-bg-color);
+}
+
+.n-ask-form::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: var(--color-bg-3);
+}
+
+/* ----------------------------- */
+/* Conversation and Message UI  */
+/* ----------------------------- */
+.n-ask-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;
+}
+
+.n-ask-question [data-icon='caretRight'] {
+  opacity: 0;
+  color: var(--color-text-weaker);
+  transform: translateX(-3px);
+  transition: transform 200ms ease-out;
+}
+
+.n-ask-question:hover {
+  background-color: var(--n-search-color-bg-2);
+
+  [data-icon='caretRight'] {
+    opacity: 1;
+    transform: translateX(0px);
+  }
+}
+
+.n-ask-question-list .n-ask-question-list-item {
+  position: relative;
+  width: fit-content;
+  opacity: 0;
+  transform: translateY(10px);
+  animation: fadeInUp 0.5s forwards;
+}
+
+.n-ask-message {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--space-s);
+  margin-block-start: var(--space-2xl);
+}
+
+.n-ask-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);
+  font-size: var(--step-0);
+}
+
+.n-ask-user-message {
+  margin-inline-start: auto;
+  background: var(--search-user-message-color);
+}
+
+/* ----------------------------- */
+/* Form UI                      */
+/* ----------------------------- */
+.n-ask-input {
+  border: none;
+  outline: none;
+  padding-inline: var(--n-search-padding-inline);
+}
+
+.n-ask-form-submit {
+  padding: 0.7rem;
+  margin-inline-end: var(--space-2xs);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: var(--search-submit-btn-bg-color);
+  color: var(--neutral-000);
+  transition: background-color 150ms ease-out;
+}
+
+.n-ask-form-submit > svg {
+  width: 1rem;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  border-radius: 1.5px;
+  transition: opacity 150ms ease-out;
+}
+
+.n-ask-form-submit[disabled] {
+  background: var(--neutral-500);
+}
+
+.n-ask-form-submit[disabled] > * {
+  opacity: 0.5;
+}
+
+/* ----------------------------- */
+/* Buttons                      */
+/* ----------------------------- */
+.n-ask-button-back {
+  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);
+  border-radius: var(--radius-pill);
+  font-size: var(--step--1);
+  color: var(--color-text-1);
+  cursor: pointer;
+}
+
+.n-ask-button-back [data-icon='caretRight'] {
+  color: var(--color-text-weaker);
+  transform: rotate(180deg);
+}
+
+/* ----------------------------- */
+/* 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);
+}
+
+/* ----------------------------- */
+/* Loading Animation             */
+/* ----------------------------- */
+.n-ask-message-loader {
+  width: 2.5rem;
+  height: auto;
+  display: block;
+  color: var(--search-loading-color);
+}
+
+.n-ask-message-loader :where(#ask-netlify-tick-1, #ask-netlify-tick-2, #ask-netlify-tick-3) {
+  opacity: 0;
+  animation: fadeIn 800ms ease-in-out infinite;
+}
+
+.n-ask-message-loader #ask-netlify-tick-1 {
+  animation-delay: 100ms;
+}
+
+.n-ask-message-loader #ask-netlify-tick-2 {
+  animation-delay: 200ms;
+}
+
+.n-ask-message-loader #ask-netlify-tick-3 {
+  animation-delay: 300ms;
+}
+
+.n-ask-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);
+  }
+}
+
+@keyframes askEyeBlink {
+  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);
+  }
+}

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

@@ -0,0 +1,22 @@
+import { KapaProvider } from '@kapaai/react-sdk';
+import ChatInterface from './components/ChatInterface';
+import './AskNetlify.css';
+
+interface AskNetlifyProps {
+  setModalState?: (state?: { current: string }) => void;
+}
+
+export default function AskNetlify(props: AskNetlifyProps) {
+  return (
+    <KapaProvider
+      integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
+      callbacks={{
+        askAI: {
+          onQuerySubmit: data => console.log('Question asked:', data.question),
+        },
+      }}
+    >
+      <ChatInterface {...props} />
+    </KapaProvider>
+  );
+}

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

@@ -0,0 +1,19 @@
+import Icon from '../../Icon';
+
+interface BackButtonProps {
+  onClick: () => void;
+}
+
+export function BackButton({ onClick }: BackButtonProps) {
+  return (
+    <button
+      class="n-ask-button-back button"
+      data-button-variant="outline"
+      onClick={onClick}
+      aria-label="Return to search"
+    >
+      <Icon name="caretRight" />
+      Search
+    </button>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { useState, useRef } from 'preact/hooks';
+import { useChat } from '@kapaai/react-sdk';
+import { questions } from './QuestionList/questions';
+import { QuestionList } from './QuestionList/QuestionList';
+import { BackButton } from './BackButton';
+import { ChatMessages } from './ChatMessages';
+
+interface Props {
+  setModalState?: (state?: { current: string }) => void;
+}
+
+export default function ChatInterface({ setModalState }: Props) {
+  const [message, setMessage] = useState('');
+  const chatRef = useRef<HTMLDivElement>(null);
+  const menuRef = useRef<HTMLUListElement>(null);
+
+  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
+    useChat();
+
+  const handleSubmit = (e: Event | preact.JSX.TargetedMouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    const target = e.target as HTMLButtonElement;
+    const id = target?.getAttribute('data-question-id');
+    const text = id ? questions[id] : message;
+
+    if (text.trim()) {
+      submitQuery(text.trim());
+    }
+    if (!id) setMessage('');
+  };
+
+  return (
+    <div className="n-ask-chat-container">
+      <BackButton onClick={() => setModalState?.({ current: 'search' })} />
+      <div ref={chatRef} className="n-ask-conversation n-search-window">
+        {!conversation.length ? (
+          <QuestionList onClick={handleSubmit} menuRef={menuRef} />
+        ) : (
+          <ChatMessages conversation={conversation} />
+        )}
+      </div>
+
+      <form onSubmit={handleSubmit} className="n-ask-form n-search-input-wrapper">
+        <input
+          className="n-ask-input n-search-input"
+          type="text"
+          value={message}
+          onInput={e => setMessage(e.currentTarget.value)}
+          placeholder="Ask a question..."
+          disabled={isGeneratingAnswer}
+        />
+
+        {isGeneratingAnswer ? (
+          <button
+            type="button"
+            className="n-ask-form-submit"
+            onClick={stopGeneration}
+            aria-label="Stop generation"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor">
+              <rect x="0" y="0" width="16" height="16" />
+            </svg>
+          </button>
+        ) : (
+          <button
+            type="submit"
+            className="n-ask-form-submit"
+            disabled={!message.trim() || isPreparingAnswer}
+            aria-label="Send message"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
+              <path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z" />
+            </svg>
+          </button>
+        )}
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,33 @@
+import { marked } from 'marked';
+import Icon from '../../Icon';
+
+export function ChatMessages({ conversation }: { conversation: any[] }) {
+  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>
+            </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>
+        </div>
+      ))}
+    </>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { questions } from './questions';
+import Icon from '../../../Icon';
+
+export function QuestionList({
+  onClick,
+  menuRef,
+}: {
+  onClick: (e: Event) => void;
+  menuRef: preact.RefObject<HTMLUListElement>;
+}) {
+  return (
+    <ul ref={menuRef} class="n-ask-question-list" role="list">
+      {Object.entries(questions).map(([id, question], index) => (
+        <li
+          key={id}
+          class="n-ask-question-list-item"
+          style={{ animationDelay: `${0.1 * (index + 1)}s` }}
+        >
+          <button class="n-ask-question" onClick={onClick} data-question-id={id}>
+            {question}
+            <Icon name="caretRight" />
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}

package/packages/components/preact/AskNetlify/components/QuestionList/questions.ts

@@ -0,0 +1,10 @@
+export 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?',
+};