@netlify/spark-ui 1.0.3-alpha.1 → 1.1.1

package/dist/components/preact/Orb/Orb.d.ts

@@ -1,2 +0,0 @@
-declare const Orb: () => import("preact").JSX.Element;
-export default Orb;

package/dist/components/preact/Orb/Orb.js

@@ -1,5 +0,0 @@
-import { u as r } from "../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import '../../../assets/Orb.css';const t = () => /* @__PURE__ */ r("div", { class: "orb" });
-export {
-  t as default
-};

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

@@ -1,162 +0,0 @@
-.chat-container {
-  opacity: 0;
-  animation: appearContainer 350ms ease-in-out forwards;
-  animation-delay: 300ms;
-}
-
-@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: 1rem 1rem;
-  background: var(--neutral-light-100);
-  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: scroll;
-  }
-
-  code[class*='language-'],
-  pre[class*='language-'] {
-    display: block;
-    padding: var(--space-s);
-  }
-}
-
-.user-message {
-  margin-inline-start: auto;
-  background: var(--blue-000);
-}
-
-.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(--neutral-light-100);
-  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(--blue-600);
-  color: var(--neutral-000);
-  transition: filter 300ms ease-out;
-}
-
-.form-submit > svg {
-  width: 1rem;
-  height: auto;
-  aspect-ratio: 1 / 1;
-  border-radius: 1.5px;
-}
-
-.form-submit[disabled] {
-  filter: saturate(0);
-}
-
-.button-back {
-  width: fit-content;
-  background: transparent;
-  position: absolute;
-  padding: 0.6rem 1rem;
-  background: var(--color-bg);
-  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(--neutral-300);
-  color: var(--neutral-800);
-  border-width: 0.5px;
-}
-
-.pulsing {
-  display: block;
-  width: 1rem;
-  height: 1rem;
-  clip-path: circle(40%);
-  background: var(--blue-700);
-  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

@@ -1,123 +0,0 @@
-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" />
-        </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

@@ -1,94 +0,0 @@
-@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

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