@netlify/spark-ui 1.12.0-alpha.0 → 1.12.0-alpha.2

package/dist/components/preact/AskNetlify/components/ChatInterface.js

@@ -1,10 +0,0 @@
-import "../../../../chunks/jsxRuntime.module.Bzuv3cXw.js";
-import "../../../../chunks/hooks.module.DGkdD5n9.js";
-import { C as f } from "../../../../chunks/ChatInterface.EQAPs01R.js";
-import "./QuestionList/questions.js";
-import "./QuestionList/QuestionList.js";
-import "./BackButton.js";
-import "./ChatMessages.js";
-export {
-  f as default
-};

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

@@ -1,94 +0,0 @@
-import { useState, useRef, useEffect } from 'preact/hooks';
-import { useChat } from '@kapaai/react-sdk';
-import { questions } from './QuestionList/questions';
-import { QuestionList } from './QuestionList/QuestionList';
-import { BackButton } from './BackButton';
-import { ChatMessages } from './ChatMessages';
-
-interface Props {
-  setModalState?: (e: { current: string }) => void;
-}
-
-export default function ChatInterface({ setModalState }: Props) {
-  const [message, setMessage] = useState('');
-  const [newMessageReady, setNewMessageReady] = useState(false);
-  const chatRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLUListElement>(null);
-  const lastMessageRef = useRef<HTMLDivElement | null>(null);
-
-  const { conversation, submitQuery, isGeneratingAnswer, isPreparingAnswer, stopGeneration } =
-    useChat();
-
-  const handleSubmit = (e: Event | preact.JSX.TargetedMouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    const target = e.target as HTMLButtonElement;
-    const id = target?.getAttribute('data-question-id');
-    const text = id ? questions[id] : message;
-
-    if (text.trim()) {
-      submitQuery(text.trim());
-    }
-    if (!id) setMessage('');
-
-    setNewMessageReady(true);
-  };
-
-  /*
-   * When a new user message is ready, scroll it into view and reset the flag.
-   * This ensures the most recent message is visible to the user immediately after rendering.
-   */
-  useEffect(() => {
-    if (newMessageReady && lastMessageRef.current) {
-      lastMessageRef.current.scrollIntoView({ behavior: 'smooth' });
-      setNewMessageReady(false);
-    }
-  }, [newMessageReady]);
-
-  return (
-    <div className="n-ask-chat-container">
-      <BackButton onClick={() => setModalState?.({ current: 'search' })} />
-      <div ref={chatRef} className="n-ask-conversation n-search-window">
-        {!conversation.length ? (
-          <QuestionList onClick={handleSubmit} menuRef={menuRef} />
-        ) : (
-          <ChatMessages conversation={conversation} lastMessageRef={lastMessageRef} />
-        )}
-      </div>
-
-      <form onSubmit={handleSubmit} className="n-ask-form n-search-input-wrapper">
-        <input
-          className="n-ask-input n-search-input"
-          type="text"
-          value={message}
-          onInput={e => setMessage(e.currentTarget.value)}
-          placeholder="Ask a question..."
-          disabled={isPreparingAnswer || isGeneratingAnswer}
-        />
-
-        {isGeneratingAnswer ? (
-          <button
-            type="button"
-            className="n-ask-form-submit"
-            onClick={stopGeneration}
-            aria-label="Stop generation"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="var(--neutral-100)">
-              <rect x="0" y="0" width="16" height="16" />
-            </svg>
-          </button>
-        ) : (
-          <button
-            type="submit"
-            className="n-ask-form-submit"
-            disabled={!message.trim() || isPreparingAnswer}
-            aria-label="Send message"
-          >
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="var(--neutral-100)">
-              <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>
-  );
-}