@netlify/spark-ui 0.0.46-alpha.4 → 0.0.47-alpha

package/packages/components/preact/ChatApp/ChatApp.css

@@ -0,0 +1,142 @@
+/* styles.css */
+
+/* Main container */
+.chatbot-container {
+  display: flex;
+  padding: 3rem;
+  height: 100vh;
+  background-color: #f7fafc;
+}
+
+.chatbot-wrapper {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 1024px;
+  margin: 0 auto;
+  background-color: white;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* Header */
+.header {
+  background-color: #2d3748;
+  color: white;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+}
+
+.header-title {
+  font-weight: bold;
+  font-size: 1.25rem;
+}
+
+.new-chat-button {
+  display: flex;
+  align-items: center;
+  background-color: #4a5568;
+  border-radius: 0.375rem;
+  padding: 0.25rem 0.75rem;
+  font-size: 0.875rem;
+}
+
+.icon {
+  margin-right: 0.25rem;
+}
+
+/* Chat container */
+.chat-container {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+/* Error message */
+.error-message {
+  background-color: #fed7d7;
+  border: 1px solid #fbd5d5;
+  color: #9b2c2c;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  margin-bottom: 1rem;
+}
+
+.error-title {
+  font-weight: bold;
+}
+
+/* Message bubbles */
+.message {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1rem;
+}
+
+.message-right {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.message-bubble {
+  padding: 1rem;
+  border-radius: 0.5rem;
+  max-width: 75%;
+}
+
+.user-message {
+  background-color: #4299e1;
+  color: white;
+}
+
+.bot-message {
+  background-color: #edf2f7;
+  color: #2d3748;
+}
+
+/* Input area */
+.input-area {
+  border-top: 1px solid #e2e8f0;
+  padding: 1rem;
+}
+
+.input-form {
+  display: flex;
+  align-items: center;
+}
+
+.input-field {
+  flex: 1;
+  background-color: #edf2f7;
+  border-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+}
+
+.input {
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.stop-button,
+.send-button {
+  margin-left: 0.5rem;
+  background-color: #3182ce;
+  border-radius: 9999px;
+  padding: 0.5rem;
+  color: white;
+}
+
+.stop-icon {
+  width: 1rem;
+  height: 1rem;
+}

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/SearchModal/hooks/useSearchLogger.ts

@@ -1,4 +1,4 @@
-import type { SearchState } from '../types/search.types';
+import type { SearchState, SearchGTMObjectProps } from '../types/search.types';
 import { useEffect, useRef, useCallback } from 'preact/hooks';
 import Analytics from '../../../../analytics/analytics';
 
@@ -6,9 +6,9 @@ import Analytics from '../../../../analytics/analytics';
  * Custom hook that logs search-related events for analytics.
  *
  * This hook tracks the following search events:
- * - `spark_search:query_changed`: Logs when the search query changes.
- * - `spark_search:no_results`: Logs when no results are found for a search.
- * - `spark_search:result_clicked`: Logs when a search result is clicked.
+ * - `search:new_query`: Logs when the search query changes.
+ * - `search:no_results`: Logs when no results are found for a search.
+ * - `search:result_selected`: Logs when a search result is clicked.
  *
  * It uses an instance of `Analytics` to track these events. The hook listens to changes in the `searchTerm` and `results` properties from the provided `SearchState`.
  *
@@ -18,7 +18,7 @@ import Analytics from '../../../../analytics/analytics';
  * @param {boolean} [debug=false] - Flag to enable debug mode. If true, additional debug information will be sent with the event payloads.
  * 
  * @returns {Object} - An object with the following function:
- *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `spark_search:result_clicked` events with the clicked result's title and URL.
+ *   - `handleClick`: A callback function that should be attached to search result click events. It tracks `search:result_selected` events with the clicked result's title and URL.
  *
  * @example
  * const { handleClick } = useSearchLogger(searchState);
@@ -31,16 +31,16 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
   const ref = useRef<Analytics>(new Analytics());
   const analytics = ref.current;
 
+  const enableDebugger = (o: SearchGTMObjectProps) => o.debug_mode = true
+
   // Log search query
   useEffect(() => {
     if (!state?.searchTerm) return;
     const payload = { query: state?.searchTerm };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
 
-    analytics.track('spark_search:query_changed', payload);
+    analytics.track('search:new_query', payload);
   }, [state?.searchTerm]);
 
   // Log zero‑hit searches
@@ -49,12 +49,10 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
 
     const payload = { query: state?.searchTerm };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
 
     if (state?.searchTerm && state.results.length === 0) {
-      analytics.track('spark_search:no_results', payload);
+      analytics.track('search:no_results', payload);
     }
   }, [state?.results]);
 
@@ -64,17 +62,16 @@ export function useSearchLogger(state?: SearchState, debug?: boolean) {
     if (!anchor) return;
 
     const label = anchor.querySelector('.n-search-link-label')?.innerHTML;
-    const url = anchor.getAttribute('href');
+    const url = anchor.getAttribute('href') || undefined;
     const payload = {
       resultTitle: label,
       resultUrl: url,
     };
 
-    if (debug) {
-      payload.debug_mode = true;
-    }
+    if (debug) enableDebugger(payload)
+
 
-    analytics.track('spark_search:result_clicked', payload);
+    analytics.track('search:result_selected', payload);
   }, []);
 
   return {

package/packages/components/preact/SearchModal/types/search.types.tsx

@@ -27,3 +27,10 @@ export interface SearchState {
   results: SearchLinkProps[];
   isLoading: boolean;
 }
+
+export interface SearchGTMObjectProps {
+  resultTitle?: string;
+  resultUrl?: string;
+  query?: string;
+  debug_mode?: boolean;
+}

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;
+}