@brainfish-ai/components 0.35.20 → 0.36.1

package/dist/esm/components/chat-search/ChatSearch.js

@@ -0,0 +1,1175 @@
+import React__default, { forwardRef, useCallback, useState, useRef, useEffect, useMemo, useImperativeHandle } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import rehypeRaw from 'rehype-raw';
+import remarkGfm from 'remark-gfm';
+import { Suggestions } from './Suggestions.js';
+import { Answer } from './Answer.js';
+import { FollowUpQuestions } from './FollowUpQuestions.js';
+import { NextBestActions } from './NextBestActions.js';
+import { TimelineNavigation } from './TimelineNavigation.js';
+import { PrimarySearch } from './PrimarySearch.js';
+import { FollowUpSearchBar } from './FollowUpSearchBar.js';
+import { Header } from './Header.js';
+import { defaultTextConfig } from './text-config.js';
+import { ChatSearchProvider, useChatSearch } from './ChatSearchContext.js';
+import { buildConversationContext } from './helpers/buildConversationContext.js';
+import { shouldUseConversationLayout, shouldShowInitialGreeting } from './helpers/initialAiMessage.js';
+import { markdownTextBlock } from './blocks/utils.js';
+import { useConversationHistory } from './hooks/useConversationHistory.js';
+import { ToastContainer } from './ToastContainer.js';
+import { executeClientAction } from './helpers/excuteClientAction.js';
+import { cancelStreamReader } from './helpers/cancelStreamReader.js';
+import { clearAll, setKnowledgeGroupSelected, noArticlesFound, setAnswerError, setUserFeedback, clearUserFeedback, appendNewAnswer, setAwaitingKnowledgeGroup, setSearchResults, setFollowUpQuestions, completeAnswer, setStatusMessage, appendAnswerChunk, markAsUncertain, addActionButtons, getActionInputs, invokeAction } from './hooks/useAnswerList.js';
+import { LoadingConversation } from './LoadingConversation.js';
+import { MemoizedReactMarkdown } from '../markdown/MemoizedReactMarkdown.js';
+import { HistoryPage } from './HistoryPage.js';
+import { ActiveConversations } from './ActiveConversations.js';
+import { ResolvedConversationFooter } from './ResolvedConversationFooter.js';
+import { FeatureFlagProvider, useBooleanFlagValue } from '../../lib/feature-flags.js';
+import { cn, isAnswerUncertain } from '../../lib/utils.js';
+import { useAutocomplete } from '../../lib/hooks.js';
+import { createConversationId, sendFeedbackReason, sendFeedback, searchApi, fetchAnswerStream, fetchFollowUpQuestions } from '../../lib/api.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { MemoizedIcon } from '../ui/icon.js';
+import { Features } from '../../lib/features.js';
+import { useToast } from './hooks/useToast.js';
+import { useFileAttachment } from './hooks/useFileAttachment.js';
+import { useConversationLoader } from './hooks/useConversationLoader.js';
+import { useSubscriptionManager } from './hooks/useSubscriptionManager.js';
+import { useIncludePage } from './hooks/useIncludePage.js';
+import { useScrollManager } from './hooks/useScrollManager.js';
+
+const markdownRemarkPlugins = [remarkGfm];
+const markdownRehypePlugins = [rehypeRaw];
+const markdownComponents = {
+  p: ({ children }) => /* @__PURE__ */ React__default.createElement("span", null, children)
+};
+const ChatSearchComponent = forwardRef(
+  ({
+    suggestions: initialSuggestions = [],
+    collections = [],
+    selectedCollectionId,
+    onCollectionChange,
+    selectedRegion,
+    onRegionChange,
+    apiKey,
+    fetchRegionConfig,
+    searchEndpoint,
+    answerStreamEndpoint,
+    uploadEndpoint,
+    feedbackEndpoint,
+    feedbackReasonEndpoint,
+    loadConversationEndpoint,
+    autocompleteEndpoint,
+    disableFollowUpQuestions = false,
+    enableFileAttachment: enableFileAttachmentProp = false,
+    disableFeedback = false,
+    disclaimer,
+    offset = 0,
+    headers,
+    textConfig = {},
+    followUpQuestionsEndpoint,
+    className,
+    onToggleSizeButtonClick,
+    trackEvent,
+    onCloseWidget,
+    isWidgetMode = true,
+    nextBestActions,
+    bodyActionButtons,
+    onNextBestActionClick,
+    userData,
+    redirectRules,
+    secretAttributes,
+    allowedRegions,
+    style,
+    isSearchWidget = false,
+    isAgentAssist = false,
+    hideCitations = false,
+    conversationInlineSlot,
+    liveHumanAgentChatSlot,
+    botAvatarUrl,
+    favicon,
+    initialAiMessage,
+    reconnectHandoff,
+    resetHandoff,
+    conversationHistoryEndpoint,
+    markConversationReadEndpoint,
+    markConversationCompletedEndpoint,
+    knowledgeSourceGroups
+  }, ref) => {
+    const {
+      answers,
+      answerListDispatch,
+      query,
+      setQuery,
+      followUpQuery,
+      setFollowUpQuery,
+      isSearching,
+      setIsSearching,
+      showResults,
+      setShowResults,
+      activeAnswerIndex,
+      setActiveAnswerIndex,
+      conversationId: currentConversationId,
+      setConversationId: setCurrentConversationId,
+      clearConversationId: clearCurrentConversationId,
+      isLoadingConversation,
+      setShowMobileCloseWidgetButton
+    } = useChatSearch();
+    const mergedTextConfig = { ...defaultTextConfig, ...textConfig };
+    const enableFileAttachmentFlag = useBooleanFlagValue("enableFileAttachment", false);
+    const enableFileAttachment = enableFileAttachmentProp || enableFileAttachmentFlag;
+    const isHistoryTabEnabled = useBooleanFlagValue(Features.HistoryTab, false);
+    const { toasts, showToast, dismissToast } = useToast();
+    const getOrCreateConversationId = useCallback(() => {
+      let conversationId = currentConversationId;
+      if (!conversationId) {
+        conversationId = createConversationId();
+        setCurrentConversationId(conversationId);
+      }
+      return conversationId;
+    }, [currentConversationId, setCurrentConversationId]);
+    const { attachedFiles, isUploading, addFiles, removeFile, clearAttachedFiles, getUploadedAttachments } = useFileAttachment({
+      uploadEndpoint,
+      headers,
+      getConversationId: getOrCreateConversationId,
+      onError: showToast
+    });
+    const [currentCollectionId, setCurrentCollectionId] = useState(selectedCollectionId);
+    const [currentRegion, setCurrentRegion] = useState(selectedRegion);
+    const [showFollowUp, setShowFollowUp] = useState(true);
+    const selectedKnowledgeGroupRef = useRef(null);
+    const pendingSearchRef = useRef(null);
+    const primaryTextareaRef = useRef(null);
+    const answerRefs = useRef([]);
+    const containerRef = useRef(null);
+    const primarySearchRef = useRef(null);
+    const followUpSearchRef = useRef(null);
+    const bottomRef = useRef(null);
+    const currentReaderRef = useRef(null);
+    const { suggestions: autocompleteSuggestions } = useAutocomplete({
+      query,
+      endpoint: autocompleteEndpoint || "",
+      allowedRegions,
+      collectionId: currentCollectionId,
+      headers,
+      conversationId: currentConversationId,
+      delay: 300
+    });
+    const [hideGreeting, setHideGreeting] = useState(() => Boolean(currentConversationId));
+    const hideGreetingForLoadedConversation = useCallback(() => setHideGreeting(true), []);
+    const { loadConversationById } = useConversationLoader({
+      loadConversationEndpoint,
+      headers,
+      reconnectHandoff,
+      onConversationLoaded: hideGreetingForLoadedConversation
+    });
+    useEffect(() => {
+      if (!currentConversationId) setHideGreeting(false);
+    }, [currentConversationId]);
+    useEffect(() => {
+      if (shouldUseConversationLayout(initialAiMessage, currentConversationId, answers.length)) {
+        setShowResults(true);
+      }
+    }, [initialAiMessage, currentConversationId, answers.length, setShowResults]);
+    const greetingBlocks = useMemo(
+      () => initialAiMessage ? [markdownTextBlock({ text: initialAiMessage })] : [],
+      [initialAiMessage]
+    );
+    const showGreeting = shouldShowInitialGreeting(initialAiMessage, hideGreeting);
+    const {
+      showHistory,
+      setShowHistory,
+      conversations,
+      isLoadingHistory,
+      hasUnreadConversations,
+      isViewOnly,
+      setIsViewOnly,
+      handleSelectConversation,
+      completeActiveConversations,
+      refetchConversations
+    } = useConversationHistory({
+      enabled: isHistoryTabEnabled,
+      conversationHistoryEndpoint,
+      markConversationReadEndpoint,
+      markConversationCompletedEndpoint,
+      headers,
+      userData: userData ?? void 0,
+      currentConversationId,
+      loadConversationById,
+      reconnectHandoff,
+      resetHandoff
+    });
+    const { scrollToLastAnswer, scrollToAnswer } = useScrollManager(answerRefs, containerRef, bottomRef);
+    const { subscribeToStateChanges } = useSubscriptionManager();
+    const { includePageEnabled, includePageLoading, includePageDisabled, handleIncludePageToggle, fetchPageContext } = useIncludePage({ isAgentAssist, apiKey: apiKey ?? "unknown", trackEvent });
+    const loadFollowUpQuestions = async (searchQueryId, conversationId) => {
+      if (!followUpQuestionsEndpoint || disableFollowUpQuestions) {
+        return;
+      }
+      try {
+        const questions = await fetchFollowUpQuestions({
+          endpoint: followUpQuestionsEndpoint,
+          searchQueryId,
+          headers,
+          conversationId
+        });
+        return questions;
+      } catch (error) {
+        console.error("Error fetching follow-up questions:", error);
+        return void 0;
+      }
+    };
+    const processAnswerStream = async ({
+      reader,
+      searchQueryId,
+      conversationId,
+      onFirstEvent
+    }) => {
+      currentReaderRef.current = reader;
+      let accumulatedAnswer = "";
+      try {
+        let done = false, isFirstEvent = true, searchIntentId, isUncertain = false, value;
+        while ({ done, value } = await reader.read(), !done) {
+          if (currentReaderRef.current !== reader) {
+            break;
+          }
+          if (isFirstEvent) {
+            isFirstEvent = false;
+            onFirstEvent?.();
+          }
+          const lines = new TextDecoder().decode(value).split(/\n\n/).filter((line) => line.startsWith("data: ")).map((line) => line.replace(/^data: /, "").trim());
+          for (const line of lines) {
+            try {
+              if (line === "[DONE]") {
+                continue;
+              }
+              const event = JSON.parse(line);
+              if (event.type === "status-message") {
+                answerListDispatch(
+                  setStatusMessage({
+                    message: event.message
+                  })
+                );
+              }
+              if (event.type === "answer-text-chunk") {
+                accumulatedAnswer += event.content;
+                answerListDispatch(
+                  appendAnswerChunk({
+                    text: event.content
+                  })
+                );
+                const uncertaintyCheck = isAnswerUncertain(accumulatedAnswer);
+                isUncertain = uncertaintyCheck.uncertain;
+                if (isUncertain) {
+                  const uncertaintyText = mergedTextConfig.uncertaintyFallbackText?.[uncertaintyCheck.language ?? "en"] ?? accumulatedAnswer ?? "I don't know.";
+                  answerListDispatch(markAsUncertain({ uncertaintyText }));
+                }
+              }
+              if (event.type === "answer-error") {
+                answerListDispatch(
+                  setAnswerError({
+                    error: mergedTextConfig.errorText || event.message
+                  })
+                );
+              }
+              if (event.type === "action-buttons") {
+                searchIntentId = event.searchIntentId;
+                answerListDispatch(
+                  addActionButtons({
+                    searchIntentId,
+                    actions: event.actions
+                  })
+                );
+              }
+              if (event.type === "get-action-inputs") {
+                searchIntentId = event.searchIntentId;
+                answerListDispatch(
+                  getActionInputs({
+                    searchIntentId: event.searchIntentId,
+                    inputs: event.inputs,
+                    actionId: event.actionId,
+                    schema: event.schema,
+                    initialValues: event.values,
+                    onSubmit: async (parameters) => {
+                      if (event.actionType === "client_execution") {
+                        const results = await executeClientAction(event.actionKey, parameters);
+                        return generateAnswerForClientAction({
+                          searchQueryId,
+                          conversationId,
+                          searchIntentId: event.searchIntentId,
+                          actionId: event.actionId,
+                          results
+                        });
+                      }
+                      if (event.actionType === "run_workflow") {
+                        answerListDispatch(invokeAction());
+                        answerListDispatch(
+                          setStatusMessage({
+                            message: mergedTextConfig.loadingAnswerText
+                          })
+                        );
+                        return generateAnswerForQuery({
+                          searchQueryId,
+                          conversationId,
+                          parameters
+                        });
+                      }
+                      return generateAnswerForAction({
+                        searchQueryId,
+                        conversationId,
+                        searchIntentId: event.searchIntentId,
+                        actionId: event.actionId,
+                        parameters
+                      });
+                    }
+                  })
+                );
+              }
+              if (event.type === "citations") {
+                answerListDispatch(
+                  setSearchResults({
+                    searchQueryId,
+                    results: event.data,
+                    state: "completed"
+                  })
+                );
+              }
+            } catch {
+              console.warn("Failed to parse answer stream block");
+            }
+          }
+        }
+        return { answer: accumulatedAnswer, searchIntentId, isUncertain };
+      } catch (error) {
+        if (currentReaderRef.current !== reader) {
+          return { answer: "", searchIntentId: void 0, isUncertain: false };
+        }
+        throw error;
+      } finally {
+        if (currentReaderRef.current === reader) {
+          currentReaderRef.current = null;
+          reader.releaseLock();
+        }
+      }
+    };
+    const generateAnswerForQuery = async ({
+      searchQueryId,
+      conversationId,
+      context,
+      attachments,
+      parameters
+    }) => {
+      try {
+        const followUpQuestions = loadFollowUpQuestions(searchQueryId);
+        const response = await fetchAnswerStream({
+          endpoint: answerStreamEndpoint,
+          headers,
+          body: {
+            type: "generate-for-query",
+            conversationId,
+            searchQueryId,
+            profileId: userData?.userId,
+            ...context && { context },
+            ...attachments?.length && { attachments },
+            ...parameters && { parameters }
+          }
+        });
+        const reader = response.body?.getReader();
+        if (!reader) return;
+        const { answer, searchIntentId, isUncertain } = await processAnswerStream({
+          reader,
+          searchQueryId,
+          conversationId,
+          onFirstEvent: () => {
+            trackEvent?.("First Streamed Answer Chunk Received", { conversationId, searchQueryId });
+          }
+        });
+        if (!answer) return;
+        void followUpQuestions.then((questions) => {
+          if (questions && questions.length > 0 && !searchIntentId) {
+            answerListDispatch(setFollowUpQuestions({ questions }));
+          }
+        });
+        if (isUncertain) {
+          trackEvent?.("Answer Not Found", { conversationId, searchQueryId });
+        } else {
+          trackEvent?.("Answer Found", { conversationId, searchQueryId });
+        }
+      } catch (e) {
+        console.error("Error generating answer for query:", e);
+        answerListDispatch(
+          setAnswerError({
+            error: mergedTextConfig.errorText || "Sorry, we were unable to process the request right now. Please try again in a moment."
+          })
+        );
+      } finally {
+        answerListDispatch(completeAnswer());
+      }
+    };
+    const generateAnswerForAction = async ({
+      searchQueryId,
+      searchIntentId,
+      conversationId,
+      actionId,
+      parameters
+    }) => {
+      answerListDispatch(invokeAction());
+      try {
+        const response = await fetchAnswerStream({
+          endpoint: answerStreamEndpoint,
+          headers,
+          body: {
+            type: "invoke-action",
+            conversationId,
+            searchQueryId,
+            searchIntentId,
+            actionId,
+            parameters,
+            profileId: userData?.userId
+          }
+        });
+        const reader = response.body?.getReader();
+        if (!reader) return;
+        await processAnswerStream({
+          reader,
+          searchQueryId
+        });
+      } catch (e) {
+        console.error("Error generating answer for action:", e);
+        answerListDispatch(
+          setAnswerError({
+            error: mergedTextConfig.errorText || "Sorry, we were unable to process the request right now. Please try again in a moment."
+          })
+        );
+      } finally {
+        answerListDispatch(completeAnswer());
+        setIsSearching(false);
+      }
+    };
+    const generateAnswerForClientAction = async ({
+      searchQueryId,
+      searchIntentId,
+      conversationId,
+      actionId,
+      results
+    }) => {
+      answerListDispatch(invokeAction());
+      try {
+        const response = await fetchAnswerStream({
+          endpoint: answerStreamEndpoint,
+          headers,
+          body: {
+            type: "client-execution-result",
+            conversationId,
+            searchQueryId,
+            searchIntentId,
+            actionId,
+            results,
+            profileId: userData?.userId
+          }
+        });
+        const reader = response.body?.getReader();
+        if (!reader) return;
+        await processAnswerStream({
+          reader,
+          searchQueryId
+        });
+      } catch (e) {
+        console.error("Error generating answer for action:", e);
+        answerListDispatch(
+          setAnswerError({
+            error: mergedTextConfig.errorText || "Sorry, we were unable to process the request right now. Please try again in a moment."
+          })
+        );
+      } finally {
+        answerListDispatch(completeAnswer());
+        setIsSearching(false);
+      }
+    };
+    const handleSearchApiCall = async ({
+      searchQuery,
+      conversationId,
+      attributes,
+      secretAttributes: secretAttributes2,
+      allowedRegions: allowedRegions2,
+      knowledgeGroupCollectionIds
+    }) => {
+      const collectionId = knowledgeGroupCollectionIds ?? currentCollectionId;
+      const searchResponse = await searchApi({
+        endpoint: searchEndpoint,
+        query: searchQuery,
+        collectionId,
+        headers,
+        conversationId,
+        attributes,
+        secretAttributes: secretAttributes2,
+        allowedRegions: allowedRegions2,
+        source: isAgentAssist ? "agent_assist" : void 0
+      });
+      if (searchResponse.results.length === 0 && !searchResponse.isAgenticResponse) {
+        trackEvent?.("No Articles Found", { conversationId, searchQuery });
+        return;
+      }
+      answerListDispatch(
+        setSearchResults({
+          searchQueryId: searchResponse.searchQueryId,
+          results: searchResponse.results
+        })
+      );
+      return searchResponse.searchQueryId;
+    };
+    const performSearch = async ({ searchQuery = query.trim(), event }) => {
+      if (!searchQuery) return;
+      const conversationId = currentConversationId || createConversationId();
+      setCurrentConversationId(conversationId);
+      const fileAttachments = getUploadedAttachments();
+      clearAttachedFiles();
+      setIsSearching(true);
+      setShowResults(true);
+      setActiveAnswerIndex(answers.length);
+      scrollToLastAnswer();
+      answerListDispatch(
+        appendNewAnswer({
+          query: searchQuery,
+          attachments: fileAttachments
+        })
+      );
+      await Promise.resolve();
+      followUpSearchRef.current?.focus();
+      const pageContext = await fetchPageContext(conversationId, searchQuery);
+      const needsGroupSelection = knowledgeSourceGroups && knowledgeSourceGroups.length > 0 && !selectedKnowledgeGroupRef.current;
+      if (needsGroupSelection) {
+        pendingSearchRef.current = {
+          searchQuery,
+          conversationId,
+          attributes: { ...userData },
+          secretAttributes,
+          allowedRegions,
+          pageContext: pageContext ?? void 0,
+          fileAttachments: fileAttachments.length > 0 ? fileAttachments : void 0
+        };
+        answerListDispatch(setAwaitingKnowledgeGroup());
+        setIsSearching(false);
+        return;
+      }
+      try {
+        const attributes = { ...userData };
+        const knowledgeGroupCollectionIds = selectedKnowledgeGroupRef.current?.collectionIds;
+        const searchQueryId = await handleSearchApiCall({
+          searchQuery,
+          conversationId,
+          attributes,
+          secretAttributes,
+          allowedRegions,
+          knowledgeGroupCollectionIds
+        });
+        if (searchQueryId) {
+          event && trackEvent?.(event.name, {
+            conversationId,
+            searchQuery,
+            searchQueryId,
+            ...event.metaData
+          });
+          await generateAnswerForQuery({
+            searchQueryId,
+            conversationId,
+            context: pageContext,
+            attachments: fileAttachments.length > 0 ? fileAttachments : void 0
+          });
+        } else {
+          answerListDispatch(noArticlesFound());
+        }
+      } catch (error) {
+        console.error("Error generating answer:", error);
+        event && trackEvent?.(`${event.name} - Search Error`, {
+          conversationId,
+          searchQuery,
+          ...event.metaData
+        });
+        answerListDispatch(
+          setAnswerError({
+            error: mergedTextConfig.errorText || "Sorry, we were unable to process the request right now. Please try again in a moment."
+          })
+        );
+      } finally {
+        setIsSearching(false);
+      }
+    };
+    const handleKnowledgeGroupSelect = async (group) => {
+      selectedKnowledgeGroupRef.current = group;
+      const pending = pendingSearchRef.current;
+      if (!pending) return;
+      pendingSearchRef.current = null;
+      answerListDispatch(setKnowledgeGroupSelected());
+      setIsSearching(true);
+      try {
+        const searchQueryId = await handleSearchApiCall({
+          searchQuery: pending.searchQuery,
+          conversationId: pending.conversationId,
+          attributes: pending.attributes,
+          secretAttributes: pending.secretAttributes,
+          allowedRegions: pending.allowedRegions,
+          knowledgeGroupCollectionIds: group.collectionIds
+        });
+        if (searchQueryId) {
+          trackEvent?.("Knowledge Group Selected", {
+            conversationId: pending.conversationId,
+            searchQuery: pending.searchQuery,
+            searchQueryId,
+            knowledgeGroupId: group.id,
+            knowledgeGroupName: group.name
+          });
+          await generateAnswerForQuery({
+            searchQueryId,
+            conversationId: pending.conversationId,
+            context: pending.pageContext,
+            attachments: pending.fileAttachments
+          });
+        } else {
+          answerListDispatch(noArticlesFound());
+        }
+      } catch (error) {
+        console.error("Error generating answer after group selection:", error);
+        answerListDispatch(
+          setAnswerError({
+            error: mergedTextConfig.errorText || "Sorry, we were unable to process the request right now. Please try again in a moment."
+          })
+        );
+      } finally {
+        setIsSearching(false);
+      }
+    };
+    const createNewThread = (firstQuery) => {
+      completeActiveConversations();
+      setIsViewOnly(false);
+      resetHandoff?.();
+      if (currentReaderRef.current) {
+        const reader = currentReaderRef.current;
+        currentReaderRef.current = null;
+        cancelStreamReader(reader);
+      }
+      setIsSearching(false);
+      setQuery("");
+      setFollowUpQuery("");
+      setShowResults(false);
+      answerListDispatch(clearAll());
+      setActiveAnswerIndex(0);
+      clearAttachedFiles();
+      clearCurrentConversationId();
+      selectedKnowledgeGroupRef.current = null;
+      pendingSearchRef.current = null;
+      trackEvent?.("New Thread Created", { oldConversationId: currentConversationId });
+      if (primaryTextareaRef.current) {
+        primaryTextareaRef.current.style.height = "auto";
+      }
+      if (firstQuery) {
+        setQuery(firstQuery);
+        void performSearch({ searchQuery: firstQuery, event: { name: "New Thread Created with Query" } });
+      }
+    };
+    const navigateHome = () => {
+      setIsViewOnly(false);
+      resetHandoff?.();
+      if (currentReaderRef.current) {
+        const reader = currentReaderRef.current;
+        currentReaderRef.current = null;
+        cancelStreamReader(reader);
+      }
+      setIsSearching(false);
+      setQuery("");
+      setFollowUpQuery("");
+      setShowResults(false);
+      answerListDispatch(clearAll());
+      setActiveAnswerIndex(0);
+      clearAttachedFiles();
+      clearCurrentConversationId();
+      selectedKnowledgeGroupRef.current = null;
+      pendingSearchRef.current = null;
+      if (primaryTextareaRef.current) {
+        primaryTextareaRef.current.style.height = "auto";
+      }
+      refetchConversations();
+    };
+    useImperativeHandle(ref, () => ({
+      createNewThread,
+      showFollowUpThread: (show) => {
+        setShowFollowUp(show);
+      },
+      subscribeToStateChanges,
+      focusSearchField: () => primarySearchRef.current?.focus() || followUpSearchRef.current?.focus(),
+      showCloseButton: (showButton = true) => {
+        setShowMobileCloseWidgetButton(showButton);
+      },
+      loadConversation: loadConversationById
+    }));
+    useEffect(() => {
+      setCurrentCollectionId(selectedCollectionId);
+    }, [selectedCollectionId]);
+    useEffect(() => {
+      setCurrentRegion(selectedRegion);
+    }, [selectedRegion]);
+    const adjustTextareaHeight = (textarea) => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    const handlePrimarySearch = async (searchQuery = query.trim()) => {
+      await performSearch({ searchQuery, event: { name: "Primary Field Search Submitted" } });
+    };
+    const handleFeedback = async (response, searchQueryId, answerIndex) => {
+      if (!feedbackEndpoint) return;
+      answerListDispatch(
+        setUserFeedback({
+          feedback: response,
+          index: answerIndex
+        })
+      );
+      try {
+        await sendFeedback({
+          endpoint: feedbackEndpoint,
+          searchQueryId,
+          response,
+          headers,
+          conversationId: currentConversationId
+        });
+        trackEvent?.(response === "accept" ? "Answer Accepted" : "Answer Rejected", {
+          conversationId: currentConversationId,
+          searchQueryId
+        });
+      } catch (error) {
+        console.error("Error sending feedback:", error);
+        answerListDispatch(
+          clearUserFeedback({
+            index: answerIndex
+          })
+        );
+      }
+    };
+    const handleFeedbackReasonSubmit = async (reason, searchQueryId) => {
+      if (!feedbackReasonEndpoint) return;
+      try {
+        await sendFeedbackReason({
+          endpoint: feedbackReasonEndpoint,
+          searchQueryId,
+          reason,
+          headers
+        });
+      } catch (error) {
+        console.error("Error sending feedback reason:", error);
+      }
+    };
+    const handleFollowUpSearch = async (customQuery) => {
+      const queryToUse = customQuery !== void 0 ? customQuery : followUpQuery;
+      if (queryToUse.trim()) {
+        resetHandoff?.();
+        setQuery(queryToUse);
+        setFollowUpQuery("");
+        await performSearch({ searchQuery: queryToUse, event: { name: "Follow-up Search Field Submitted" } });
+      }
+    };
+    const handleSuggestedQuestionClick = (suggestion) => {
+      if (suggestion.conversationId) {
+        trackEvent?.("Recent Conversation Clicked", {
+          conversationId: currentConversationId,
+          question: suggestion.question
+        });
+        loadConversationById(suggestion.conversationId);
+        return;
+      }
+      void performSearch({ searchQuery: suggestion.question, event: { name: "Suggested Question Clicked" } });
+    };
+    const handleAutocompleteSuggestionClick = (suggestion) => {
+      void performSearch({ searchQuery: suggestion.question, event: { name: "Autocomplete Suggestion Clicked" } });
+    };
+    const handleCollectionChange = (collectionId) => {
+      setCurrentCollectionId(collectionId);
+      onCollectionChange?.(collectionId);
+    };
+    const handleRegionChange = (regionId) => {
+      setCurrentRegion(regionId);
+      onRegionChange?.(regionId);
+      trackEvent?.("Region Changed", { region: regionId, conversationId: currentConversationId });
+    };
+    useEffect(() => {
+      const handleUrlChange = () => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const urlConversationId = urlParams.get("conversation");
+        if (!urlConversationId) {
+          setQuery("");
+          setFollowUpQuery("");
+          setShowResults(false);
+          answerListDispatch(clearAll());
+          setActiveAnswerIndex(0);
+          clearAttachedFiles();
+          clearCurrentConversationId();
+          if (primaryTextareaRef.current) {
+            primaryTextareaRef.current.style.height = "auto";
+          }
+        }
+      };
+      window.addEventListener("popstate", handleUrlChange);
+      return () => window.removeEventListener("popstate", handleUrlChange);
+    }, []);
+    const handleFollowUpQuestionClick = (question) => {
+      trackEvent?.("Follow-up Question Clicked", { conversationId: currentConversationId, question });
+      void performSearch({ searchQuery: question, event: { name: "Follow-up Question Clicked" } });
+    };
+    const handleNextBestActionClick = ({ action, searchQueryId, query: query2, answer }) => {
+      trackEvent?.("Next Best Action Clicked", {
+        conversationId: currentConversationId,
+        searchQueryId,
+        action: action.label
+      });
+      const conversation = buildConversationContext(answers, currentConversationId);
+      onNextBestActionClick?.({ action, searchQueryId, query: query2, answer, conversation });
+    };
+    useEffect(() => {
+      const container = containerRef.current;
+      if (!container || !isSearchWidget) return;
+      let lastSentHeight = 0;
+      let rafId = null;
+      const calculateTotalHeight = () => {
+        const innerContent2 = container.firstElementChild;
+        const contentHeight = innerContent2?.scrollHeight ?? container.scrollHeight;
+        const footerHeight = document.querySelector('[data-name="BrandFooter"]')?.clientHeight ?? 0;
+        const headerHeight = document.querySelector('[data-name="Header"]')?.clientHeight ?? 0;
+        const followUpHeight = showResults && showFollowUp ? 70 : 0;
+        const chatSearchHeight = document.querySelector('[data-name="ChatSearch"]')?.clientHeight ?? 0;
+        const verticalPadding = 32;
+        const totalHeight = contentHeight + footerHeight + followUpHeight + headerHeight + verticalPadding;
+        if (!showResults) {
+          return totalHeight;
+        }
+        return Math.max(totalHeight, chatSearchHeight);
+      };
+      const sendResize = () => {
+        const totalHeight = calculateTotalHeight();
+        if (totalHeight > 0 && totalHeight !== lastSentHeight) {
+          lastSentHeight = totalHeight;
+          window.parent.postMessage(
+            {
+              type: "RESIZE_IFRAME",
+              height: totalHeight,
+              widgetKey: apiKey
+            },
+            "*"
+          );
+        }
+      };
+      const handleResize = () => {
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        rafId = requestAnimationFrame(() => {
+          sendResize();
+          rafId = null;
+        });
+      };
+      const timeoutId = setTimeout(sendResize, 100);
+      const resizeObserver = new ResizeObserver(handleResize);
+      const innerContent = container.firstElementChild;
+      if (innerContent) {
+        resizeObserver.observe(innerContent);
+      }
+      resizeObserver.observe(container);
+      return () => {
+        clearTimeout(timeoutId);
+        if (rafId !== null) {
+          cancelAnimationFrame(rafId);
+        }
+        resizeObserver.disconnect();
+      };
+    }, [isSearchWidget, apiKey, showResults, showFollowUp]);
+    return /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: cn(
+          "w-full relative h-dvh flex flex-col justify-between @container",
+          "md:h-auto md:p-4 md:bg-dark-100",
+          className
+        ),
+        "data-name": "ChatSearch",
+        style
+      },
+      /* @__PURE__ */ React__default.createElement(ToastContainer, { toasts, onDismiss: dismissToast }),
+      (isWidgetMode || !showResults) && /* @__PURE__ */ React__default.createElement(
+        Header,
+        {
+          showHistoryButton: isHistoryTabEnabled,
+          isSearchWidget,
+          "data-name": "Header",
+          headerText: mergedTextConfig.headerText,
+          onToggleSizeButtonClick: () => {
+            onToggleSizeButtonClick?.();
+          },
+          onBackButtonClick: () => void navigateHome(),
+          onCloseWidgetClick: () => onCloseWidget?.(),
+          showHistory,
+          hasUnreadConversations,
+          onHistoryButtonClick: () => setShowHistory(true),
+          onHistoryBackClick: () => setShowHistory(false),
+          className: cn("@3xl:mb-4", {
+            "!block": showResults && isSearchWidget
+          })
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        ScrollArea,
+        {
+          className: "w-full relative h-auto flex-grow [&>[data-radix-scroll-area-viewport]>div:first-child]:!block",
+          ref: containerRef
+        },
+        /* @__PURE__ */ React__default.createElement(AnimatePresence, null, showHistory ? /* @__PURE__ */ React__default.createElement(
+          HistoryPage,
+          {
+            conversations,
+            isLoading: isLoadingHistory,
+            onSelectConversation: handleSelectConversation,
+            botAvatarUrl
+          }
+        ) : isLoadingConversation ? /* @__PURE__ */ React__default.createElement(LoadingConversation, null) : !showResults ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          motion.div,
+          {
+            key: "search",
+            initial: { opacity: 0, y: 20 },
+            animate: { opacity: 1, y: 0 },
+            transition: { duration: 0.5 },
+            className: "w-full md:space-y-4"
+          },
+          /* @__PURE__ */ React__default.createElement(
+            "div",
+            {
+              className: cn(
+                "pb-4",
+                isSearchWidget ? "bg-transparent p-3 md:p-0" : "px-3 bg-primary md:p-0 md:bg-transparent"
+              )
+            },
+            /* @__PURE__ */ React__default.createElement(
+              motion.div,
+              {
+                initial: { opacity: 0, y: 20 },
+                animate: { opacity: 1, y: 0 },
+                transition: { duration: 0.5, delay: 0.4 }
+              },
+              /* @__PURE__ */ React__default.createElement(
+                PrimarySearch,
+                {
+                  ref: primarySearchRef,
+                  query,
+                  onQueryChange: (value) => {
+                    setQuery(value);
+                    if (primaryTextareaRef.current) {
+                      adjustTextareaHeight(primaryTextareaRef.current);
+                    }
+                  },
+                  onSearch: () => void handlePrimarySearch(),
+                  textConfig: mergedTextConfig,
+                  collections,
+                  currentCollectionId,
+                  onCollectionChange: handleCollectionChange,
+                  allowedRegions,
+                  currentRegion,
+                  onRegionChange: handleRegionChange,
+                  apiKey,
+                  fetchRegionConfig,
+                  enableFileAttachment,
+                  attachedFiles,
+                  isUploading,
+                  onAddFiles: addFiles,
+                  onRemoveFile: removeFile,
+                  isSearching,
+                  autocompleteSuggestions,
+                  onAutocompleteSuggestionSelect: handleAutocompleteSuggestionClick,
+                  isAgentAssist,
+                  includePageEnabled,
+                  includePageLoading,
+                  includePageDisabled,
+                  onIncludePageToggle: handleIncludePageToggle
+                }
+              )
+            )
+          ),
+          isHistoryTabEnabled && /* @__PURE__ */ React__default.createElement(
+            ActiveConversations,
+            {
+              conversations,
+              onSelect: handleSelectConversation,
+              onViewAll: () => setShowHistory(true),
+              botAvatarUrl
+            }
+          ),
+          /* @__PURE__ */ React__default.createElement(
+            Suggestions,
+            {
+              suggestions: initialSuggestions,
+              onQuestionClick: handleSuggestedQuestionClick,
+              title: mergedTextConfig.suggestionsTitle
+            }
+          ),
+          isWidgetMode && bodyActionButtons && bodyActionButtons.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "mt-4 mb-4 px-3 @3xl:px-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React__default.createElement(
+            NextBestActions,
+            {
+              nextBestActions: bodyActionButtons || [],
+              onActionClick: (action) => handleNextBestActionClick({
+                action,
+                searchQueryId: "",
+                query: "",
+                answer: ""
+              })
+            }
+          )))
+        )) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+          motion.div,
+          {
+            key: "results",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            transition: { duration: 0.5 },
+            className: "w-full max-w-[100vw] space-y-4 p-3 md:p-0"
+          },
+          showGreeting && /* @__PURE__ */ React__default.createElement(
+            motion.div,
+            {
+              key: "initial-ai-message",
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.5 },
+              className: "space-y-4 last:!mb-8 mt-6"
+            },
+            /* @__PURE__ */ React__default.createElement(
+              Answer,
+              {
+                index: -1,
+                favicon,
+                blocks: greetingBlocks,
+                question: "",
+                state: "completed",
+                hideCitations: true,
+                disableFeedback: true,
+                textConfig: mergedTextConfig
+              }
+            )
+          ),
+          answers.map((answer, i) => /* @__PURE__ */ React__default.createElement(
+            motion.div,
+            {
+              key: i,
+              ref: (el) => answerRefs.current[i] = el,
+              initial: { opacity: 0, y: 20 },
+              animate: { opacity: 1, y: 0 },
+              transition: { duration: 0.5, delay: i * 0.1 },
+              className: "space-y-4 last:!mb-8"
+            },
+            /* @__PURE__ */ React__default.createElement(
+              Answer,
+              {
+                index: i,
+                favicon,
+                blocks: answer.blocks,
+                question: answer.question,
+                attachments: answer.attachments,
+                state: answer.state,
+                searchResults: answer.searchResults,
+                searchQueryId: answer.searchQueryId,
+                searchIntentId: answer.searchIntentId,
+                hideCitations,
+                feedback: answer.feedback,
+                onFeedback: (response) => void handleFeedback(response, answer.searchQueryId, i),
+                disableFeedback,
+                textConfig: mergedTextConfig,
+                redirectRules,
+                nextBestActions,
+                actions: answer.actions,
+                handleActionClick: handleNextBestActionClick,
+                isLastAnswer: i === answers.length - 1,
+                onFeedbackReasonSubmit: (reason) => void handleFeedbackReasonSubmit(reason, answer.searchQueryId),
+                hasError: answer.hasError,
+                statusMessage: answer.statusMessage,
+                knowledgeSourceGroups,
+                onKnowledgeGroupSelect: (group) => void handleKnowledgeGroupSelect(group)
+              }
+            ),
+            i === answers.length - 1 && !disableFollowUpQuestions && answer.followUpQuestions && answer.state === "completed" && !answer.hasError && /* @__PURE__ */ React__default.createElement(
+              FollowUpQuestions,
+              {
+                questions: answer.followUpQuestions,
+                onQuestionClick: handleFollowUpQuestionClick
+              }
+            )
+          ))
+        ))),
+        showResults && answers.length > 1 && /* @__PURE__ */ React__default.createElement("div", { className: "hidden lg:block" }, /* @__PURE__ */ React__default.createElement(
+          TimelineNavigation,
+          {
+            questions: answers.map((a) => a.question),
+            activeIndex: activeAnswerIndex,
+            onNavigate: (index) => {
+              setActiveAnswerIndex(index);
+              scrollToAnswer(index);
+            },
+            offset
+          }
+        )),
+        disclaimer && isWidgetMode && !(showResults && showFollowUp) && /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            "data-name": "disclaimer",
+            className: cn(
+              "mt-2 px-3 @3xl:px-0 text-xs text-dark-500 flex items-center gap-1 justify-center text-center w-full md:static md:mt-4 md:text-left md:flex md:gap-4 leading-5",
+              isSearchWidget ? "static mb-2 md:text-left [&>svg]:flex-shrink-0" : "absolute bottom-12"
+            )
+          },
+          /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: "Info", className: "size-4" }),
+          /* @__PURE__ */ React__default.createElement(
+            MemoizedReactMarkdown,
+            {
+              className: "[&_a]:underline [&_a:hover]:no-underline",
+              remarkPlugins: markdownRemarkPlugins,
+              rehypePlugins: markdownRehypePlugins,
+              components: markdownComponents
+            },
+            disclaimer
+          )
+        ),
+        conversationInlineSlot != null && showResults && !showHistory && /* @__PURE__ */ React__default.createElement("div", { className: "-mt-6 w-full max-w-[100vw] px-3 pb-0 pt-0 text-foreground md:px-0" }, conversationInlineSlot),
+        /* @__PURE__ */ React__default.createElement("div", { ref: bottomRef })
+      ),
+      showResults && showFollowUp && !isViewOnly && !liveHumanAgentChatSlot && !showHistory && (() => {
+        const isAwaitingGroup = answers.some((a) => a.state === "awaiting-knowledge-group");
+        return /* @__PURE__ */ React__default.createElement(
+          FollowUpSearchBar,
+          {
+            ref: followUpSearchRef,
+            initialQuery: followUpQuery,
+            onQueryChange: setFollowUpQuery,
+            isSearching,
+            handleFollowUpSearch,
+            textConfig: mergedTextConfig,
+            enableFileAttachment,
+            attachedFiles,
+            isUploading,
+            onAddFiles: addFiles,
+            onRemoveFile: removeFile,
+            disabled: isAwaitingGroup
+          }
+        );
+      })(),
+      showResults && isViewOnly && !showHistory && /* @__PURE__ */ React__default.createElement(ResolvedConversationFooter, { onStartNewConversation: () => createNewThread() }),
+      !showHistory && !isViewOnly && liveHumanAgentChatSlot
+    );
+  }
+);
+ChatSearchComponent.displayName = "ChatSearch";
+const ChatSearch = forwardRef(({ featureFlags, ...props }, ref) => /* @__PURE__ */ React__default.createElement(FeatureFlagProvider, { flags: featureFlags }, /* @__PURE__ */ React__default.createElement(
+  ChatSearchProvider,
+  {
+    searchPath: props.searchPath,
+    contentTypeEndpoint: props.contentTypeEndpoint,
+    widgetKey: props.apiKey
+  },
+  /* @__PURE__ */ React__default.createElement(ChatSearchComponent, { ...props, ref })
+)));
+ChatSearch.displayName = "ChatSearch";
+
+export { ChatSearch as default };