@netlify/spark-ui 0.0.46 → 0.0.47-alpha

package/packages/components/preact/ChatApp/ChatApp.tsx

@@ -0,0 +1,237 @@
+import { useState, useRef, useEffect } from 'preact/hooks';
+import * as marked from 'marked';
+import { KapaProvider, useChat } from '@kapaai/react-sdk';
+
+import './ChatApp.css';
+
+function ChatApp() {
+  return (
+    <KapaProvider
+      integrationId="3c0789a6-c6a8-4fbc-b0cc-235f9e4a6351"
+      callbacks={{
+        askAI: {
+          onQuerySubmit: (data) => console.log('Question asked:', data.question),
+        },
+      }}
+    >
+      <ChatInterface />
+    </KapaProvider>
+  );
+}
+
+// Main App Component
+const ChatInterface = () => {
+  const [inputMessage, setInputMessage] = useState('');
+  const [feedbackStates, setFeedbackStates] = useState({});
+  const [showCommentId, setShowCommentId] = useState(null);
+  const chatRef = useRef(null);
+  const {
+    conversation,
+    submitQuery,
+    isGeneratingAnswer,
+    isPreparingAnswer,
+    resetConversation,
+    stopGeneration,
+    addFeedback,
+    error,
+  } = useChat();
+
+  // Configure marked options for better code highlighting
+  useEffect(() => {
+    marked.setOptions({
+      breaks: true,
+      gfm: true,
+      headerIds: false,
+    });
+  }, []);
+
+  const handleSubmit = (e) => {
+    if (e) e.preventDefault();
+    if (inputMessage.trim() && !isGeneratingAnswer && !isPreparingAnswer) {
+      submitQuery(inputMessage);
+      setInputMessage('');
+    }
+  };
+
+  const handleClearThread = () => {
+    resetConversation();
+    setFeedbackStates({});
+    setShowCommentId(null);
+  };
+
+  const handleCopyText = (text) => {
+    navigator.clipboard.writeText(text);
+
+    // Show a temporary copied message
+    const target = event.currentTarget;
+    const buttons = document.querySelectorAll('.copy-active');
+    buttons.forEach((button) => {
+      button.classList.remove('copy-active');
+      const textEl = button.querySelector('.copy-text');
+      if (textEl) textEl.textContent = '';
+    });
+
+    // Now set the current button to show "Copied!"
+    target.classList.add('copy-active');
+    const textEl = target.querySelector('.copy-text');
+    if (textEl) textEl.textContent = 'Copied!';
+
+    setTimeout(() => {
+      target.classList.remove('copy-active');
+      if (textEl) textEl.textContent = '';
+    }, 2000);
+  };
+
+  const handleFeedback = (qaId, reaction) => {
+    addFeedback(qaId, reaction);
+
+    // Update local feedback state
+    setFeedbackStates((prev) => ({
+      ...prev,
+      [qaId]: reaction,
+    }));
+
+    // Close comment form if it's open
+    if (showCommentId === qaId) {
+      setShowCommentId(null);
+    }
+  };
+
+  const toggleComment = (qaId) => {
+    setShowCommentId(showCommentId === qaId ? null : qaId);
+  };
+
+  // Scroll to bottom when new messages arrive
+  useEffect(() => {
+    const el = chatRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [conversation]);
+
+  return (
+    <div className="chatbot-container">
+      <div className="chatbot-wrapper">
+        {/* Header */}
+        <header className="header">
+          <div className="header-left">
+            <h1 className="header-title">AI Chatbot</h1>
+          </div>
+          <button className="new-chat-button" aria-label="New chat" onClick={handleClearThread}>
+            New Chat
+          </button>
+        </header>
+
+        {/* Chat Container */}
+        <div ref={chatRef} className="chat-container">
+          {error && (
+            <div className="error-message">
+              <p className="error-title">Error</p>
+              <p>{error}</p>
+            </div>
+          )}
+
+          {conversation.length > 0 && (
+            <div className="clear-thread-button-container">
+              <button className="clear-thread-button" aria-label="Clear thread" onClick={handleClearThread}>
+                Clear thread
+              </button>
+            </div>
+          )}
+
+          {/* Messages */}
+          <div className="messages-container">
+            {conversation.length === 0 ? (
+              <div className="no-conversation-message">
+                <p>Ask a question to start a conversation!</p>
+              </div>
+            ) : (
+              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">
+                    <div className="message-bubble bot-message">
+                      <div
+                        className="message-answer"
+                        dangerouslySetInnerHTML={{
+                          __html: qa.answer
+                            ? marked.parse(qa.answer)
+                            : '<p class="text-gray-500">Generating answer...</p>',
+                        }}
+                      />
+
+                      {/* Only show feedback controls when answer is completed (not during generation) */}
+                      {qa.isFeedbackSubmissionEnabled && (
+                        <div className="feedback-controls">
+                          <div className="feedback-buttons">
+                            <button
+                              className={`feedback-button upvote ${
+                                feedbackStates[qa.id] === 'upvote' ? 'upvoted' : ''
+                              }`}
+                              aria-label="Upvote"
+                              onClick={() => qa.id && handleFeedback(qa.id, 'upvote')}
+                            ></button>
+                            <button
+                              className={`feedback-button downvote ${
+                                feedbackStates[qa.id] === 'downvote' ? 'downvoted' : ''
+                              }`}
+                              aria-label="Downvote"
+                              onClick={() => qa.id && handleFeedback(qa.id, 'downvote')}
+                            ></button>
+                            <button
+                              className="feedback-button copy"
+                              onClick={(event) => handleCopyText(qa.answer)}
+                              aria-label="Copy message"
+                            >
+                              <span className="copy-text"></span>
+                            </button>
+                          </div>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+            {/* <div ref={chatRef} /> */}
+          </div>
+        </div>
+
+        {/* Input Area */}
+        <div className="input-area">
+          <form onSubmit={handleSubmit} className="input-form">
+            <div className="input-field">
+              <input
+                type="text"
+                placeholder="Type your message..."
+                className="input"
+                value={inputMessage}
+                onChange={(e) => setInputMessage(e.target.value)}
+                disabled={isGeneratingAnswer || isPreparingAnswer}
+              />
+            </div>
+            {isGeneratingAnswer ? (
+              <button type="button" className="stop-button" onClick={stopGeneration} aria-label="Stop generation">
+                <svg xmlns="http://www.w3.org/2000/svg" className="stop-icon" viewBox="0 0 20 20" fill="currentColor">
+                  <rect x="6" y="6" width="8" height="8" />
+                </svg>
+              </button>
+            ) : (
+              <button
+                type="submit"
+                className="send-button"
+                disabled={!inputMessage.trim() || isPreparingAnswer}
+                aria-label="Send message"
+              ></button>
+            )}
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ChatApp;

package/packages/components/preact/index.ts

@@ -4,6 +4,7 @@ export { default as Icon } from './Icon';
 export { default as SearchLink } from './SearchModal/components/SearchLink/SearchLink';
 export { default as SearchHeading } from './SearchModal/components/SearchHeading/SearchHeading';
 export { default as SearchToggle } from './SearchModal/components/SearchToggle/SearchToggle';
+export { default as ChatApp } from "./ChatApp/ChatApp"
 export { SearchModal } from './SearchModal';
 
 export { type IconName } from './Icon';

package/packages/global.d.ts

@@ -0,0 +1,5 @@
+// Define Astro components module to avoid TypeScript errors
+declare module 'astro:components' {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const Code: any;
+} 

package/packages/styles/code-block.css

@@ -0,0 +1,249 @@
+.code-block {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  border: 1px solid var(--neutral-700);
+  border-radius: 6px;
+  font-size: 0.9em;
+  line-height: 1.5;
+  background-color: var(--neutral-800);
+}
+
+/* Title */
+.code-block-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-s);
+  padding-block: var(--space-2xs);
+  padding-inline: var(--space-s);
+  border-bottom: 1px solid var(--neutral-700);
+  font-size: 0.9em;
+  color: var(--neutral-200);
+}
+
+.code-block-title .code-language {
+  padding: 0.1em 0.5em;
+  border-radius: 2px;
+  background-color: var(--neutral-700);
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.code-block-title .code-title {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-weight: 500;
+}
+
+/* Code */
+.code-block .code-block-content {
+  position: relative;
+  overflow: auto;
+  margin: 0
+}
+
+.code-block pre {
+  border: 0;
+  border-radius: 6px;
+  padding-block: var(--space-m);
+  padding-inline: var(--space-s);
+  margin: 0
+}
+
+.code-block .code-block-content:not(:only-child) pre {
+  border-radius: 0 0 6px 6px;
+}
+
+.code-block pre:focus-visible {
+  outline-offset: -2px;
+}
+
+.code-block :where(pre, code) {
+  font-family: var(--font-monospace, monospace);
+}
+
+/* Copy button */
+.code-block .copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  margin: 0;
+  border: 1px solid var(--neutral-700);
+  border-radius: 4px;
+  background-color: var(--neutral-800);
+  color: var(--neutral-400);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.code-block .copy-button:hover,
+.code-block .copy-button:focus {
+  background-color: var(--neutral-900);
+  color: var(--neutral-200);
+  outline: none;
+}
+
+.code-block .copy-button svg {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+  color: inherit;
+  fill: currentColor;
+}
+
+.code-block .copy-button .copy-icon {
+  display: block;
+}
+
+.code-block .copy-button .check-icon {
+  display: none;
+}
+
+/* Copy button tooltip */
+.code-block .copy-button::before,
+.code-block .copy-button::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 0.2s ease, visibility 0s 0.2s ease;
+}
+
+.code-block .copy-button::before {
+  content: attr(data-tooltip);
+  right: calc(100% + 10px);
+  padding: 0.15em 0.5em;
+  border-radius: 2px;
+  background-color: var(--color-brand-alt);
+  color: var(--neutral-800);
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
+.code-block .copy-button::after {
+  content: '';
+  right: calc(100%);
+  border: 5px solid transparent;
+  border-left-color: var(--color-brand-alt);
+}
+
+.code-block .copy-button:hover::before,
+.code-block .copy-button:hover::after,
+.code-block .copy-button:focus::before,
+.code-block .copy-button:focus::after,
+.code-block .copy-button.copied::before,
+.code-block .copy-button.copied::after,
+.code-block .copy-button.error::before,
+.code-block .copy-button.error::after {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.2s ease;
+}
+
+.code-block .copy-button.copied .copy-icon {
+  display: none;
+}
+
+.code-block .copy-button.copied .check-icon {
+  display: block;
+}
+
+.code-block .copy-button.error::before {
+  background-color: var(--red-500);
+}
+
+.code-block .copy-button.error::after {
+  border-left-color: var(--red-500);
+}
+
+/* Frame styling */
+.code-block.terminal-frame {
+  background-color: #1e1e1e;
+}
+
+.code-block.terminal-frame::before {
+  position: relative;
+  display: block;
+  content: '';
+  height: 1.6rem;
+  background-color: var(--neutral-800);
+  border-bottom: 1px solid var(--neutral-700);
+}
+
+.code-block.terminal-frame::after {
+  position: absolute;
+  top: 0.5rem;
+  left: 1rem;
+  width: 0.6rem;
+  height: 0.6rem;
+  content: '';
+  border-radius: 50%;
+  background-color: var(--neutral-600);
+  box-shadow: 1.25rem 0 0 var(--neutral-600), 2.5rem 0 0 var(--neutral-600);
+}
+
+/* Line highlighting styles */
+.code-block [data-highlighted-line],
+.code-block .line.focused,
+.code-block .line:has(.focus),
+.code-block .line:has(.highlighted),
+.code-block pre.has-focused .line.focused {
+  background-color: color-mix(in srgb, var(--neutral-000) 10%, transparent);
+  display: inline-block;
+  width: 100%;
+}
+
+.code-block [data-deleted-line],
+.code-block .line.diff.remove,
+.code-block .line:has(.diff.remove),
+.code-block .line:has(.deleted),
+.code-block .line:has(.diff-remove) {
+  background-color: color-mix(in srgb, var(--red-500) 30%, transparent);
+  text-decoration: line-through;
+  text-decoration-color: var(--neutral-400);
+  opacity: 0.7;
+}
+
+.code-block [data-inserted-line],
+.code-block .line.diff.add,
+.code-block .line:has(.diff.add),
+.code-block .line:has(.inserted),
+.code-block .line:has(.diff-add) {
+  background-color: color-mix(in srgb, var(--green-500) 30%, transparent);
+}
+
+/* Line numbers styling */
+.code-block.with-line-numbers pre {
+  padding-left: var(--space-xl);
+  counter-reset: line;
+}
+
+.code-block.with-line-numbers code>span {
+  position: relative;
+}
+
+.code-block.with-line-numbers code>span::before {
+  position: absolute;
+  left: -2.5rem;
+  width: 2rem;
+  padding-right: var(--space-2xs);
+  border-right: 1px solid var(--neutral-700);
+  counter-increment: line;
+  content: counter(line);
+  user-select: none;
+  color: var(--neutral-500);
+  font-size: 0.9em;
+  line-height: 1.75;
+  text-align: right;
+}

package/dist/chunks/compat.module.DT16W4Wr.js

@@ -1,175 +0,0 @@
-import { Component as f, options as a, createElement as d, Fragment as h, toChildArray as v } from "preact";
-import "./hooks.module.CNV9mxng.js";
-function C(e, t) {
-  for (var r in t) e[r] = t[r];
-  return e;
-}
-function m(e, t) {
-  for (var r in e) if (r !== "__source" && !(r in t)) return !0;
-  for (var o in t) if (o !== "__source" && e[o] !== t[o]) return !0;
-  return !1;
-}
-function y(e, t) {
-  this.props = e, this.context = t;
-}
-(y.prototype = new f()).isPureReactComponent = !0, y.prototype.shouldComponentUpdate = function(e, t) {
-  return m(this.props, e) || m(this.state, t);
-};
-var b = a.__b;
-a.__b = function(e) {
-  e.type && e.type.__f && e.ref && (e.props.ref = e.ref, e.ref = null), b && b(e);
-};
-var x = typeof Symbol < "u" && Symbol.for && Symbol.for("react.forward_ref") || 3911;
-function z(e) {
-  function t(r) {
-    var o = C({}, r);
-    return delete o.ref, e(o, r.ref || null);
-  }
-  return t.$$typeof = x, t.render = t, t.prototype.isReactComponent = t.__f = !0, t.displayName = "ForwardRef(" + (e.displayName || e.name) + ")", t;
-}
-var U = a.__e;
-a.__e = function(e, t, r, o) {
-  if (e.then) {
-    for (var n, l = t; l = l.__; ) if ((n = l.__c) && n.__c) return t.__e == null && (t.__e = r.__e, t.__k = r.__k), n.__c(e, t);
-  }
-  U(e, t, r, o);
-};
-var g = a.unmount;
-function N(e, t, r) {
-  return e && (e.__c && e.__c.__H && (e.__c.__H.__.forEach(function(o) {
-    typeof o.__c == "function" && o.__c();
-  }), e.__c.__H = null), (e = C({}, e)).__c != null && (e.__c.__P === r && (e.__c.__P = t), e.__c.__e = !0, e.__c = null), e.__k = e.__k && e.__k.map(function(o) {
-    return N(o, t, r);
-  })), e;
-}
-function E(e, t, r) {
-  return e && r && (e.__v = null, e.__k = e.__k && e.__k.map(function(o) {
-    return E(o, t, r);
-  }), e.__c && e.__c.__P === t && (e.__e && r.appendChild(e.__e), e.__c.__e = !0, e.__c.__P = r)), e;
-}
-function p() {
-  this.__u = 0, this.o = null, this.__b = null;
-}
-function R(e) {
-  var t = e.__.__c;
-  return t && t.__a && t.__a(e);
-}
-function s() {
-  this.i = null, this.l = null;
-}
-a.unmount = function(e) {
-  var t = e.__c;
-  t && t.__R && t.__R(), t && 32 & e.__u && (e.type = null), g && g(e);
-}, (p.prototype = new f()).__c = function(e, t) {
-  var r = t.__c, o = this;
-  o.o == null && (o.o = []), o.o.push(r);
-  var n = R(o.__v), l = !1, _ = function() {
-    l || (l = !0, r.__R = null, n ? n(i) : i());
-  };
-  r.__R = _;
-  var i = function() {
-    if (!--o.__u) {
-      if (o.state.__a) {
-        var u = o.state.__a;
-        o.__v.__k[0] = E(u, u.__c.__P, u.__c.__O);
-      }
-      var c;
-      for (o.setState({ __a: o.__b = null }); c = o.o.pop(); ) c.forceUpdate();
-    }
-  };
-  o.__u++ || 32 & t.__u || o.setState({ __a: o.__b = o.__v.__k[0] }), e.then(_, _);
-}, p.prototype.componentWillUnmount = function() {
-  this.o = [];
-}, p.prototype.render = function(e, t) {
-  if (this.__b) {
-    if (this.__v.__k) {
-      var r = document.createElement("div"), o = this.__v.__k[0].__c;
-      this.__v.__k[0] = N(this.__b, r, o.__O = o.__P);
-    }
-    this.__b = null;
-  }
-  var n = t.__a && d(h, null, e.fallback);
-  return n && (n.__u &= -33), [d(h, null, t.__a ? null : e.children), n];
-};
-var k = function(e, t, r) {
-  if (++r[1] === r[0] && e.l.delete(t), e.props.revealOrder && (e.props.revealOrder[0] !== "t" || !e.l.size)) for (r = e.i; r; ) {
-    for (; r.length > 3; ) r.pop()();
-    if (r[1] < r[0]) break;
-    e.i = r = r[2];
-  }
-};
-(s.prototype = new f()).__a = function(e) {
-  var t = this, r = R(t.__v), o = t.l.get(e);
-  return o[0]++, function(n) {
-    var l = function() {
-      t.props.revealOrder ? (o.push(n), k(t, e, o)) : n();
-    };
-    r ? r(l) : l();
-  };
-}, s.prototype.render = function(e) {
-  this.i = null, this.l = /* @__PURE__ */ new Map();
-  var t = v(e.children);
-  e.revealOrder && e.revealOrder[0] === "b" && t.reverse();
-  for (var r = t.length; r--; ) this.l.set(t[r], this.i = [1, 0, this.i]);
-  return e.children;
-}, s.prototype.componentDidUpdate = s.prototype.componentDidMount = function() {
-  var e = this;
-  this.l.forEach(function(t, r) {
-    k(e, r, t);
-  });
-};
-var A = typeof Symbol < "u" && Symbol.for && Symbol.for("react.element") || 60103, V = /^(?:accent|alignment|arabic|baseline|cap|clip(?!PathU)|color|dominant|fill|flood|font|glyph(?!R)|horiz|image(!S)|letter|lighting|marker(?!H|W|U)|overline|paint|pointer|shape|stop|strikethrough|stroke|text(?!L)|transform|underline|unicode|units|v|vector|vert|word|writing|x(?!C))[A-Z]/, W = /^on(Ani|Tra|Tou|BeforeInp|Compo)/, H = /[A-Z0-9]/g, $ = typeof document < "u", j = function(e) {
-  return (typeof Symbol < "u" && typeof Symbol() == "symbol" ? /fil|che|rad/ : /fil|che|ra/).test(e);
-};
-f.prototype.isReactComponent = {}, ["componentWillMount", "componentWillReceiveProps", "componentWillUpdate"].forEach(function(e) {
-  Object.defineProperty(f.prototype, e, { configurable: !0, get: function() {
-    return this["UNSAFE_" + e];
-  }, set: function(t) {
-    Object.defineProperty(this, e, { configurable: !0, writable: !0, value: t });
-  } });
-});
-var P = a.event;
-function D() {
-}
-function F() {
-  return this.cancelBubble;
-}
-function B() {
-  return this.defaultPrevented;
-}
-a.event = function(e) {
-  return P && (e = P(e)), e.persist = D, e.isPropagationStopped = F, e.isDefaultPrevented = B, e.nativeEvent = e;
-};
-var L = { enumerable: !1, configurable: !0, get: function() {
-  return this.class;
-} }, O = a.vnode;
-a.vnode = function(e) {
-  typeof e.type == "string" && function(t) {
-    var r = t.props, o = t.type, n = {}, l = o.indexOf("-") === -1;
-    for (var _ in r) {
-      var i = r[_];
-      if (!(_ === "value" && "defaultValue" in r && i == null || $ && _ === "children" && o === "noscript" || _ === "class" || _ === "className")) {
-        var u = _.toLowerCase();
-        _ === "defaultValue" && "value" in r && r.value == null ? _ = "value" : _ === "download" && i === !0 ? i = "" : u === "translate" && i === "no" ? i = !1 : u[0] === "o" && u[1] === "n" ? u === "ondoubleclick" ? _ = "ondblclick" : u !== "onchange" || o !== "input" && o !== "textarea" || j(r.type) ? u === "onfocus" ? _ = "onfocusin" : u === "onblur" ? _ = "onfocusout" : W.test(_) && (_ = u) : u = _ = "oninput" : l && V.test(_) ? _ = _.replace(H, "-$&").toLowerCase() : i === null && (i = void 0), u === "oninput" && n[_ = u] && (_ = "oninputCapture"), n[_] = i;
-      }
-    }
-    o == "select" && n.multiple && Array.isArray(n.value) && (n.value = v(r.children).forEach(function(c) {
-      c.props.selected = n.value.indexOf(c.props.value) != -1;
-    })), o == "select" && n.defaultValue != null && (n.value = v(r.children).forEach(function(c) {
-      c.props.selected = n.multiple ? n.defaultValue.indexOf(c.props.value) != -1 : n.defaultValue == c.props.value;
-    })), r.class && !r.className ? (n.class = r.class, Object.defineProperty(n, "className", L)) : (r.className && !r.class || r.class && r.className) && (n.class = n.className = r.className), t.props = n;
-  }(e), e.$$typeof = A, O && O(e);
-};
-var S = a.__r;
-a.__r = function(e) {
-  S && S(e), e.__c;
-};
-var w = a.diffed;
-a.diffed = function(e) {
-  w && w(e);
-  var t = e.props, r = e.__e;
-  r != null && e.type === "textarea" && "value" in t && t.value !== r.value && (r.value = t.value == null ? "" : t.value);
-};
-export {
-  z as D
-};