@netlify/spark-ui 1.4.5 → 1.5.0-alpha.0

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

@@ -0,0 +1,168 @@
+.chat-container {
+  opacity: 0;
+  animation: appearContainer 120ms ease-in-out forwards;
+  animation-delay: 140ms;
+}
+
+@keyframes appearContainer {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.conversation {
+  height: calc(var(--n-search-container-height) + var(--n-search-footer-height));
+  padding: var(--n-search-padding-inline);
+  scroll-behavior: smooth;
+  overflow-y: auto;
+  display: grid;
+  align-items: flex-end;
+  gap: var(--space-s);
+}
+
+.message {
+  display: grid;
+  gap: var(--space-s);
+}
+
+.message-bubble {
+  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;
+  }
+
+  code {
+    overflow-x: auto;
+  }
+
+  code[class*='language-'],
+  pre[class*='language-'] {
+    display: block;
+    padding: var(--space-s);
+  }
+}
+
+.user-message {
+  margin-inline-start: auto;
+  background: var(--search-user-message-color);
+}
+
+.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;
+  padding-inline: var(--n-search-padding-inline);
+}
+
+.form-submit {
+  border: none;
+  padding: 0.7rem;
+  border-radius: var(--radius-pill);
+  margin-inline-end: var(--space-2xs);
+  border: none;
+  background: var(--color-link);
+  color: var(--neutral-000);
+  transition: background-color 150ms ease-out;
+}
+
+.form-submit > svg {
+  width: 1rem;
+  height: auto;
+  aspect-ratio: 1 / 1;
+  border-radius: 1.5px;
+  transition: opacity 150ms ease-out;
+}
+
+.form-submit[disabled] {
+  background: var(--neutral-500);
+
+  & > * {
+    opacity: 0.5;
+  }
+}
+
+.button-back {
+  width: fit-content;
+  background: transparent;
+  position: absolute;
+  z-index: 1;
+  padding: 0.5rem 1rem;
+  background: var(--search-back-btn-bg-color);
+  margin: 1rem;
+  border: 2px solid var(--color-bg-3);
+  border-radius: var(--radius-pill);
+  font-size: var(--step--1);
+  border: 1px solid;
+  cursor: pointer;
+  border-color: var(--color-bg-3);
+  color: var(--color-text-1);
+  border-width: 0.5px;
+}
+
+.pulsing {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  clip-path: circle(40%);
+  background: var(--search-loading-color);
+  animation: pulsing 2.5s infinite ease-in-out;
+}
+
+@keyframes pulsing {
+  0%,
+  100% {
+    transform: scale(0.9);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}

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

@@ -0,0 +1,126 @@
+import { useState, useRef, useEffect } from 'preact/hooks';
+import { marked } from 'marked';
+import { KapaProvider, useChat } from '@kapaai/react-sdk';
+
+import './AskNetlify.css';
+
+function AskNetlify(props) {
+  return (
+    <KapaProvider
+      integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
+      callbacks={{
+        askAI: {
+          onQuerySubmit: data => console.log('Question asked:', data.question),
+        },
+      }}
+    >
+      <ChatInterface {...props} />
+    </KapaProvider>
+  );
+}
+
+function ChatInterface({ setModalState }) {
+  const [message, setMessage] = useState('');
+  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
+    useChat();
+
+  const chatRef = useRef(null);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+    if (message.trim()) {
+      submitQuery(message);
+      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({ current: 'search' })}
+        aria-label={'Return to search'}
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+          <path
+            d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"
+            fill="currentColor"
+          />
+        </svg>
+        Search
+      </button>
+      <div ref={chatRef} className="conversation n-search-window">
+        {conversation.map((qa, index) => (
+          <div key={qa.id || `qa-${index}`} className="message">
+            <div className="message-right">
+              <div className="message-bubble user-message">
+                <p>{qa.question}</p>
+              </div>
+            </div>
+
+            <div className="message-left">
+              {qa.answer ? (
+                <div className="message-bubble bot-message">
+                  <div
+                    className="message-answer prose flow"
+                    dangerouslySetInnerHTML={{
+                      __html: marked.parse(qa.answer),
+                    }}
+                  />
+                </div>
+              ) : (
+                <span class="pulsing"></span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <form onSubmit={handleSubmit} className="form-wrapper n-search-input-wrapper">
+        <input
+          type="text"
+          className="form-input n-search-input"
+          value={message}
+          onChange={e => setMessage(e.target.value)}
+          placeholder="Ask a question..."
+          disabled={isGeneratingAnswer}
+        />
+        {/* <button type="submit" className="form-submit" disabled={isGeneratingAnswer}>
+          Send
+        </button> */}
+
+        {isGeneratingAnswer ? (
+          <button
+            type="button"
+            className="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="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>
+  );
+}
+
+export default AskNetlify;

package/packages/components/preact/Orb/Orb.css

@@ -0,0 +1,94 @@
+@property --angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+:root {
+  --bg: oklch(12.9% 0.042 264.695);
+  --c1: oklch(44.4% 0.177 26.899);
+  --c2: oklch(85.2% 0.199 91.936);
+  --c3: oklch(58.8% 0.158 241.966);
+}
+
+.orb {
+  display: grid;
+  grid-template-areas: 'stack';
+  inline-size: min(80vmin, 100%);
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: 50%;
+
+  &::before,
+  &::after {
+    content: '';
+    display: block;
+    grid-area: stack;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    transform: translateZ(0);
+  }
+
+  &::before {
+    background:
+      conic-gradient(
+        from calc(var(--angle) * 2) at 25% 70%,
+        var(--c3),
+        transparent 20% 80%,
+        var(--c3)
+      ),
+      conic-gradient(
+        from calc(var(--angle) * 2) at 45% 75%,
+        var(--c2),
+        transparent 30% 60%,
+        var(--c2)
+      ),
+      conic-gradient(
+        from calc(var(--angle) * -3) at 80% 20%,
+        var(--c1),
+        transparent 40% 60%,
+        var(--c1)
+      ),
+      conic-gradient(
+        from calc(var(--angle) * 2) at 15% 5%,
+        var(--c2),
+        transparent 10% 90%,
+        var(--c2)
+      ),
+      conic-gradient(
+        from calc(var(--angle) * 1) at 20% 80%,
+        var(--c1),
+        transparent 10% 90%,
+        var(--c1)
+      ),
+      conic-gradient(
+        from calc(var(--angle) * -2) at 85% 10%,
+        var(--c3),
+        transparent 20% 80%,
+        var(--c3)
+      );
+    box-shadow: inset var(--bg) 0 0 5vmin 1vmin;
+    filter: blur(3vmin) contrast(5);
+    animation: rotate 20s linear infinite;
+  }
+
+  &::after {
+    --dot: 1.5px;
+    background-image: radial-gradient(
+      circle at center,
+      var(--bg) var(--dot),
+      transparent var(--dot)
+    );
+    background-size: calc(var(--dot) * 2) calc(var(--dot) * 2);
+    mask-image: radial-gradient(black 25%, transparent 75%);
+    backdrop-filter: blur(8vmin) contrast(10);
+    mix-blend-mode: overlay;
+  }
+}
+
+@keyframes rotate {
+  to {
+    --angle: 360deg;
+  }
+}

package/packages/components/preact/Orb/Orb.tsx

@@ -0,0 +1,7 @@
+import './Orb.css';
+
+const Orb = () => {
+  return <div class="orb"></div>;
+};
+
+export default Orb;

package/packages/components/preact/SearchModal/components/SearchInput.tsx

@@ -6,20 +6,22 @@ interface Props {
   setSearchTerm: (term: string) => void;
   placeholder?: string;
   initialValue?: string;
+  isGeneratingAnswer?: boolean;
+  isPreparingAnswer?: boolean;
 }
 
 const SearchInput = (props: Props) => {
   const [value, setValue] = useState<string>('');
 
-    const { reset, run } = useTimeout((query: string) => {
-      props.setSearchTerm(query);
-    }, 300);
-    
-    const handleInput = (e: InputEvent) => {
+  const { reset, run } = useTimeout((query: string) => {
+    props.setSearchTerm(query);
+  }, 300);
+
+  const handleInput = (e: InputEvent) => {
     const target = e.target as HTMLInputElement;
     setValue(target.value);
-    reset()
-    run(target.value)
+    reset();
+    run(target.value);
   };
 
   useEffect(() => {

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

@@ -1,6 +1,7 @@
 .n-search-link {
   --n-search-icon-size: 1em;
-  all: unset;
+  /* all: unset; */
+  box-sizing: border-box;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -11,6 +12,10 @@
   font-weight: var(--font-weight-regular);
   text-decoration: none;
   cursor: pointer;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
 }
 
 .n-search-link-body {
@@ -30,7 +35,7 @@
 
 .n-search-link-title {
   font-weight: var(--font-weight-medium);
-  color: var(--color-text);
+  color: var(--color-text-1);
   line-height: 1.5;
 }
 

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

@@ -4,20 +4,40 @@ import './SearchLink.css';
 
 import Icon from '../../../Icon';
 
-const SearchLink = ({ icon, label, url, excerpt, resource }: SearchLinkProps) => {
-  const { handleClick } = useSearchLogger()
-  
+const SearchLink = ({
+  as: Component = 'a',
+  icon,
+  label,
+  url,
+  excerpt,
+  resource,
+  onClick,
+}: SearchLinkProps) => {
+  const { handleClick: log } = useSearchLogger();
+
   return (
-    <a className="n-search-link" href={url} onClick={handleClick}>
+    <Component
+      className="n-search-link"
+      href={url}
+      onClick={(e: Event) => {
+        onClick && onClick();
+        log(e);
+      }}
+    >
       {icon && (
         <span className="n-search-link-icon">
           <Icon name={icon} />
         </span>
       )}
       <div className="n-search-link-body">
-        
         <p className="n-search-link-title">
-        <span className="n-search-link-label">{label}</span> {resource && <span className="n-search-link-badge" data-resource={resource}>{resource}</span>}</p>
+          <span className="n-search-link-label">{label}</span>{' '}
+          {resource && (
+            <span className="n-search-link-badge" data-resource={resource}>
+              {resource}
+            </span>
+          )}
+        </p>
         {excerpt && (
           <p className="n-search-link-excerpt" dangerouslySetInnerHTML={{ __html: excerpt }} />
         )}
@@ -25,7 +45,7 @@ const SearchLink = ({ icon, label, url, excerpt, resource }: SearchLinkProps) =>
       <div className="n-search-link-icon">
         <Icon name="caretRight" />
       </div>
-    </a>
+    </Component>
   );
 };
 

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

@@ -4,15 +4,18 @@
 
 /* Root Variables */
 .n-search-modal {
-  --n-search-padding-inline: 0.5em;
-  --n-search-color-text: var(--color-text, currentColor);
+  --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-bg: var(--search-bg-color);
-  --n-search-color-bg-2: var(--color-bg-2);
+  --n-search-color-bg-2: var(--color-bg-3);
   --n-search-color-border: var(--color-bg-3);
-  --n-search-border-radius: 8px;
+  --n-search-border-radius: 1.3rem;
   --n-search-max-w: 600px;
   --n-search-text-highlight: var(--search-highlight-color);
+  --n-search-input-height: 50px;
+  --n-search-footer-height: 40px;
+  --n-search-container-height: 400px;
 }
 
 .n-search-modal {
@@ -21,13 +24,33 @@
   border-radius: var(--n-search-border-radius);
   width: min(var(--n-search-max-w), 100%);
   margin: auto;
+  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;
 }
 
 .n-search-container {
   --mark-bg: var(--n-search-text-highlight);
   display: grid;
   width: min(var(--n-search-max-w), 100%);
-  min-height: 470px;
+  /* min-height: 530px; */
   background-color: var(--n-search-color-bg);
   border-radius: var(--n-search-border-radius);
   overflow: hidden;
@@ -43,13 +66,15 @@
 }
 
 .n-search-input-wrapper {
-  all: unset;
+  /* all: unset; */
+  position: relative;
   display: flex;
   width: 100%;
-  border-bottom: 1px solid var(--n-search-color-border);
+  height: var(--n-search-input-height);
 }
 
 .n-search-input {
+  position: relative;
   display: inline-flex;
   box-sizing: border-box;
   background: var(--n-search-color-bg);
@@ -60,7 +85,19 @@
   border: none;
   outline: none;
   font-size: 1rem;
-  color: var(--color-text);
+  color: var(--color-text-1);
+}
+
+.n-search-input-wrapper::after,
+.n-search-footer::after {
+  content: '';
+  display: block;
+  width: 200%;
+  height: 1px;
+  background: var(--n-search-color-border);
+  position: absolute;
+  bottom: 0;
+  left: 0;
 }
 
 .n-search-input::placeholder {
@@ -69,7 +106,7 @@
 
 .n-search-label {
   display: flex;
-  padding-inline: var(--n-search-padding-inline);
+  padding-inline-start: var(--n-search-padding-inline);
   align-items: center;
 }
 
@@ -92,7 +129,7 @@
 
 /* Search Results */
 .n-search-window {
-  height: 400px;
+  height: var(--n-search-container-height);
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
@@ -100,6 +137,12 @@
   background: var(--n-search-color-bg);
 }
 
+.n-results-list,
+ul[role='list'] {
+  list-style: none;
+  padding: 0;
+}
+
 .n-results-list-item {
   border-bottom: 1px solid var(--color-bg-3);
 }
@@ -109,11 +152,15 @@
 
 /* Footer */
 .n-search-footer {
-  border-top: 1px solid var(--n-search-color-border);
-  padding: var(--space-2xs) var(--space-s);
-  background: var(--color-bg-2);
+  position: relative;
   display: flex;
   gap: var(--space-m);
+  padding: var(--space-2xs) var(--space-s);
+  height: var(--n-search-footer-height);
+}
+
+.n-search-footer::after {
+  top: 0;
 }
 
 .n-search-footer-tip {
@@ -128,7 +175,8 @@
 .n-search-modal {
   transition:
     display 0.2s allow-discrete,
-    overlay 0.2s allow-discrete;
+    overlay 0.2s allow-discrete,
+    width 0.15s ease-in-out;
   animation: closeSearch 0.2s forwards;
 }
 
@@ -136,28 +184,43 @@
   animation: openSearch 0.2s forwards;
 }
 
+.n-search-modal[data-state='search'] > * {
+  opacity: 0;
+  animation: appearContainer 120ms ease-in-out forwards;
+  animation-delay: 140ms;
+}
+
+@keyframes appearContainer {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
 @keyframes openSearch {
   from {
     opacity: 0;
-    transform: translateY(20px) scale(0.9);
+    transform: scale(0.9);
   }
   to {
     opacity: 1;
-    transform: translateY(0px) scale(1);
+    transform: scale(1);
   }
 }
 
 @keyframes closeSearch {
   from {
     opacity: 1;
-    transform: translateY(0px) scale(1);
+    transform: scale(1);
   }
   50% {
     opacity: 0.3;
   }
   to {
     opacity: 0;
-    transform: translateY(20px) scale(0.9);
+    transform: scale(0.9);
   }
 }