@netlify/spark-ui 0.0.47-alpha → 0.0.47

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

@@ -1,142 +0,0 @@
-/* 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

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