Check chatbot server can handle requests before submitting

package.json

@@ -74,6 +74,7 @@
   "dependencies": {
     "@eeacms/volto-matomo": "6.0.0",
     "@microsoft/fetch-event-source": "2.0.1",
+    "dequal": "2.0.3",
     "fast-json-patch": "3.1.1",
     "highlight.js": "11.10.0",
     "luxon": "3.5.0",
@@ -83,6 +84,10 @@
     "react-textarea-autosize": "^8.5.3",
     "rehype-prism-plus": "1.6.0",
     "remark-gfm": "3.0.1",
+    "unist-util-visit": "5.0.0",
     "uuid": "10.0.0"
+  },
+  "peerDependencies": {
+    "@plone/volto": ">18.0.0 < 19.0.0"
   }
 }

src/ChatBlock/AutoResizeTextarea.jsx

@@ -7,12 +7,22 @@ import { SVGIcon } from './utils';
 import SendIcon from './../icons/send.svg';
 
 export default React.forwardRef(function AutoResizeTextarea(props, ref) {
-  const { onSubmit, isStreaming, enableMatomoTracking, persona, ...rest } =
-    props;
+  const {
+    onSubmit,
+    onFocus,
+    onChange = () => {},
+    disableSubmit,
+    enableMatomoTracking,
+    persona,
+    ...rest
+  } = props;
   const [input, setInput] = React.useState('');
 
   const handleSubmit = (e) => {
     e.preventDefault();
+    if (disableSubmit) {
+      return
+    }
     const trimmedInput = input.trim();
     if (trimmedInput) {
       if (enableMatomoTracking) {
@@ -30,8 +40,13 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
   return (
     <>
       <TextareaAutosize
+        aria-describedby="chat-wake-error-message"
         value={input}
-        onChange={(e) => setInput(e.target.value)}
+        onFocus={onFocus}
+        onChange={(e) => {
+          onChange(e);
+          setInput(e.target.value);
+        }}
         onKeyDown={(e) => {
           if (e.key === 'Enter' && !e.shiftKey) {
             handleSubmit(e);
@@ -46,7 +61,7 @@ export default React.forwardRef(function AutoResizeTextarea(props, ref) {
 
       <Button
         className="submit-btn"
-        disabled={isStreaming}
+        disabled={disableSubmit}
         type="submit"
         aria-label="Send"
         onKeyDown={(e) => {

src/ChatBlock/ChatMessageBubble.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import visit from 'unist-util-visit';
+import { visit } from 'unist-util-visit';
 import loadable from '@loadable/component';
 import { Button, Message, MessageContent } from 'semantic-ui-react';
 import { trackEvent } from '@eeacms/volto-matomo/utils';

src/ChatBlock/ChatWindow.jsx

@@ -6,8 +6,8 @@ import { trackEvent } from '@eeacms/volto-matomo/utils';
 import AutoResizeTextarea from './AutoResizeTextarea';
 import { ChatMessageBubble } from './ChatMessageBubble';
 import EmptyState from './EmptyState';
-import { useScrollonStream } from './lib';
-import { useBackendChat } from './useBackendChat';
+import { useScrollonStream } from "./lib";
+import { useBackendChat, ChatState } from './useBackendChat';
 import { SVGIcon } from './utils';
 import PenIcon from './../icons/square-pen.svg';
 
@@ -41,19 +41,23 @@ function ChatWindow({
     enableMatomoTracking,
   } = data;
   const [qualityCheckEnabled, setQualityCheckEnabled] = React.useState(true);
-  const libs = { rehypePrism, remarkGfm }; // rehypePrism, remarkGfm
+  const libs = {rehypePrism, remarkGfm}; // rehypePrism, remarkGfm
+  const abortController = React.useRef(new AbortController());
   const {
     onSubmit,
     messages,
-    isStreaming,
-    isFetchingRelatedQuestions,
+    chatState,
     clearChat,
+    error,
+    wake,
   } = useBackendChat({
     persona,
     qgenAsistantId,
     enableQgen,
+    signal: abortController.current.signal,
   });
   const [showLandingPage, setShowLandingPage] = React.useState(false);
+  const isStreaming = chatState === ChatState.STREAMING;
 
   const textareaRef = React.useRef(null);
   const conversationRef = React.useRef(null);
@@ -151,7 +155,7 @@ function ChatWindow({
                   enableShowTotalFailMessage={enableShowTotalFailMessage}
                   totalFailMessage={totalFailMessage}
                   showToolCalls={showToolCalls}
-                  isFetchingRelatedQuestions={isFetchingRelatedQuestions}
+                  isFetchingRelatedQuestions={chatState === ChatState.FETCHING_RELATED}
                   enableMatomoTracking={enableMatomoTracking}
                   persona={persona}
                 />
@@ -160,25 +164,43 @@ function ChatWindow({
             </div>
           </>
         )}
-        {isStreaming && !isFetchingRelatedQuestions && (
+        {/* TODO: Only show this if it's taking a while to prevent flashing. Could cause WCAG SC 2.3.1 failure. */}
+        {[ChatState.STREAMING, ChatState.SUBMITTING].includes(chatState) && (
           <div className="loader" />
         )}
       </div>
 
       <div className="chat-form">
         <Form>
+          {error ? (
+            <p
+              id="chat-wake-error-message"
+              aria-live="polite"
+              className="ui red basic label form-error-label"
+            >
+              {error}
+            </p>
+          ) : null}
           <div className="textarea-wrapper">
             <AutoResizeTextarea
               maxRows={8}
               minRows={1}
               ref={textareaRef}
               placeholder={
-                messages.length > 0 ? 'Ask follow-up...' : placeholderPrompt
+                messages.length > 0 ? "Ask follow-up..." : placeholderPrompt
               }
-              isStreaming={isStreaming}
+              disableSubmit={[ChatState.STREAMING].includes(
+                chatState,
+              )}
               enableMatomoTracking={enableMatomoTracking}
               persona={persona}
               onSubmit={onSubmit}
+              onFocus={() => {
+                wake(chatState);
+              }}
+              onChange={() => {
+                wake(chatState);
+              }}
             />
           </div>
         </Form>

src/ChatBlock/lib.js

@@ -1,9 +1,68 @@
 import { useRef, useEffect } from 'react';
 
+import config from "@plone/registry";
+
 export const delay = (ms) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
 
+// GET Request to DANSWER_URL/api/health to wake it up before starting.
+//   Will retry 3 times over 90 seconds and throw if no response received or unhealthy status is returned.
+export async function wakeApi() {
+  // let timeout = 15000;
+  // 
+  // function fetchWithRetry(url, retries, abortController) {
+  //   return fetch(url, {
+  //     signal: abortController,
+  //     headers: {
+  //       "Content-Type": "application/json",
+  //     },
+  //   }).catch((error) => {
+  //     if ("connection" in navigator && navigator.connection.saveData === true) {
+  //       throw error;
+  //     }
+  //     if (retries > 0 && error.message !== "Request timed out") {
+  //       // Add 5 seconds to the timeout each retry
+  //       timeout += 5000;
+  //       return fetchWithRetry(url, retries - 1, AbortSignal.timeout(timeout));
+  //     } else {
+  //       throw error;
+  //     }
+  //   });
+  // }
+  let healthResponse = undefined;
+  const healthCheckUrl = config.settings["volto-chatbot"].rewakeUrl;
+  try {
+    healthResponse = await fetch(healthCheckUrl, {
+      signal: AbortSignal.timeout(60000),
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+    // healthResponse = await fetchWithRetry(
+    //   healthCheckUrl,
+    //   3,
+    //   AbortSignal.timeout(timeout),
+    // );
+  } catch (err) {
+    // Timeout reached
+    if (err.name === "TimeoutError") {
+      throw Error("Failed to start a chat session at this time. Please try again later");
+    }
+    // Fetch request cancelled
+    else if (err.name === "AbortError") {
+      throw Error(`Chat session startup cancelled. Reason: ${err.message}`)
+    } else {
+      throw Error(`Unknown Error: type: ${err.name}, message: ${err.message}`)
+    }
+  }
+  if (!healthResponse?.ok) {
+    return false;
+  }
+
+  return true;
+}
+
 export async function createChatSession(personaId, description) {
   const createChatSessionResponse = await fetch(
     '/_da/chat/create-chat-session',
@@ -145,6 +204,11 @@ export function buildLatestMessageChain(messageMap) {
   return finalMessageList; // .concat(additionalMessagesOnMainline);
 }
 
+/**
+ * 
+ * @param {Object} options
+ * @param {AbortSignal} signal
+ */
 export async function* sendMessage({
   message,
   fileDescriptors,
@@ -161,6 +225,7 @@ export async function* sendMessage({
   systemPromptOverride,
   useExistingUserMessage,
   alternateAssistantId,
+  signal,
 }) {
   const documentsAreSelected =
     selectedDocumentIds && selectedDocumentIds.length > 0;
@@ -170,6 +235,7 @@ export async function* sendMessage({
     headers: {
       'Content-Type': 'application/json',
     },
+    signal,
     body: JSON.stringify({
       alternate_assistant_id: alternateAssistantId,
       chat_session_id: chatSessionId,
@@ -310,7 +376,7 @@ export class CurrentMessageFIFO {
   }
 }
 
-export async function fetchRelatedQuestions(message, qgenAsistantId) {
+export async function fetchRelatedQuestions(message, { qgenAsistantId, signal }) {
   const { query, answer } = message;
   const chatSessionId = await createChatSession(qgenAsistantId, `Q: ${query}`);
 
@@ -323,6 +389,7 @@ export async function fetchRelatedQuestions(message, qgenAsistantId) {
     promptId: 0,
     filters: {},
     selectedDocumentIds: [],
+    signal: signal,
   };
   const promise = updateCurrentMessageFIFO(params, {}, () => {});
 
@@ -358,23 +425,19 @@ export async function fetchRelatedQuestions(message, qgenAsistantId) {
   return result;
 }
 
-export async function* updateCurrentMessageFIFO(
-  params,
-  isCancelledRef,
-  setIsCancelled,
-) {
+/**
+ * 
+ * @param {Object} params 
+ * @param {AbortSignal} params.signal 
+ */
+export async function* updateCurrentMessageFIFO(params) {
   const promise = sendMessage(params);
 
   try {
     for await (const packetBunch of promise) {
       for (const packet of packetBunch) {
         yield { packet };
       }
-
-      if (isCancelledRef.current) {
-        setIsCancelled(false);
-        break;
-      }
     }
   } catch (error) {
     yield { error: String(error) };