@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/chat-search/hooks/useAnswerList.js

@@ -0,0 +1,366 @@
+import { createId } from '@paralleldrive/cuid2';
+import { useImmerReducer } from 'use-immer';
+import { isMarkdownTextBlock, isActionInputFormBlock, actionButtonsBlock, actionInputFormBlock, markdownTextBlock } from '../blocks/utils.js';
+
+const AnswersActions = {
+  SET_ANSWERS: "answers/set_answers",
+  CLEAR_ALL: "answers/clear_all",
+  APPEND_NEW_ANSWER: "answers/create_empty_answer",
+  APPEND_BLOCK: "answers/append_block",
+  APPEND_ANSWER_CHUNK: "answers/append_stream_chunk",
+  SET_SEARCH_RESULTS: "answers/update_search_results",
+  SET_FOLLOW_UP_QUESTIONS: "answers/set_follow_up_questions",
+  COMPLETE_ANSWER: "answers/finish_streaming",
+  SET_ANSWER_ERROR: "answers/set_error_state",
+  SET_USER_FEEDBACK: "answers/set_user_feedback",
+  CLEAR_USER_FEEDBACK: "answers/clear_user_feedback",
+  MARK_AS_UNCERTAIN: "answers/mark_as_uncertain",
+  NO_ARTICLES_FOUND: "answers/no_articles_found",
+  // action flow
+  GET_ACTION_INPUTS: "answers/request_action_inputs",
+  INVOKE_ACTION: "answers/invoke_action",
+  ADD_ACTION_BUTTONS: "answers/add_action_buttons",
+  // knowledge group clarification
+  SET_AWAITING_KNOWLEDGE_GROUP: "answers/set_awaiting_knowledge_group",
+  SET_KNOWLEDGE_GROUP_SELECTED: "answers/set_knowledge_group_selected",
+  SET_STATUS_MESSAGE: "answers/set_status_message"
+};
+const setAnswers = ({ answers }) => ({
+  type: AnswersActions.SET_ANSWERS,
+  payload: { answers }
+});
+const clearAll = () => ({
+  type: AnswersActions.CLEAR_ALL
+});
+const appendNewAnswer = ({
+  id,
+  query,
+  attachments
+}) => ({
+  type: AnswersActions.APPEND_NEW_ANSWER,
+  payload: { id, query, attachments }
+});
+const setSearchResults = ({
+  searchQueryId,
+  results,
+  index,
+  state
+}) => ({
+  type: AnswersActions.SET_SEARCH_RESULTS,
+  payload: {
+    searchQueryId,
+    results,
+    index,
+    state
+  }
+});
+const appendAnswerChunk = ({ text, index }) => ({
+  type: AnswersActions.APPEND_ANSWER_CHUNK,
+  payload: {
+    text,
+    index
+  }
+});
+const setAnswerError = ({ error, index }) => ({
+  type: AnswersActions.SET_ANSWER_ERROR,
+  payload: {
+    error,
+    index
+  }
+});
+const setUserFeedback = ({ feedback, index }) => ({
+  type: AnswersActions.SET_USER_FEEDBACK,
+  payload: {
+    feedback,
+    index
+  }
+});
+const clearUserFeedback = ({ index } = {}) => ({
+  type: AnswersActions.CLEAR_USER_FEEDBACK,
+  payload: {
+    index
+  }
+});
+const setFollowUpQuestions = ({ questions, index }) => ({
+  type: AnswersActions.SET_FOLLOW_UP_QUESTIONS,
+  payload: {
+    questions,
+    index
+  }
+});
+const completeAnswer = ({ index } = {}) => ({
+  type: AnswersActions.COMPLETE_ANSWER,
+  payload: {
+    index
+  }
+});
+const markAsUncertain = ({ uncertaintyText, index }) => ({
+  type: AnswersActions.MARK_AS_UNCERTAIN,
+  payload: {
+    uncertaintyText,
+    index
+  }
+});
+const invokeAction = ({ index } = {}) => ({
+  type: AnswersActions.INVOKE_ACTION,
+  payload: {
+    index
+  }
+});
+const noArticlesFound = ({ index } = {}) => ({
+  type: AnswersActions.NO_ARTICLES_FOUND,
+  payload: {
+    index
+  }
+});
+const setAwaitingKnowledgeGroup = ({ index } = {}) => ({
+  type: AnswersActions.SET_AWAITING_KNOWLEDGE_GROUP,
+  payload: {
+    index
+  }
+});
+const setKnowledgeGroupSelected = ({ index } = {}) => ({
+  type: AnswersActions.SET_KNOWLEDGE_GROUP_SELECTED,
+  payload: {
+    index
+  }
+});
+const setStatusMessage = ({ message, index }) => ({
+  type: AnswersActions.SET_STATUS_MESSAGE,
+  payload: {
+    message,
+    index
+  }
+});
+const getActionInputs = ({
+  searchIntentId,
+  actionId,
+  inputs,
+  schema,
+  initialValues,
+  onSubmit,
+  index
+}) => ({
+  type: AnswersActions.GET_ACTION_INPUTS,
+  payload: {
+    searchIntentId,
+    actionId,
+    inputs,
+    schema,
+    initialValues,
+    onSubmit,
+    index
+  }
+});
+const addActionButtons = ({
+  searchIntentId,
+  actions,
+  index
+}) => ({
+  type: AnswersActions.ADD_ACTION_BUTTONS,
+  payload: {
+    searchIntentId,
+    actions,
+    index
+  }
+});
+const getTargetAnswer = (draft, index) => {
+  return draft.at(index ?? -1);
+};
+const getLastTextBlock = (answer) => {
+  const textBlocks = answer.blocks.filter(isMarkdownTextBlock);
+  const lastTextBlock = textBlocks.at(-1);
+  return lastTextBlock;
+};
+const initialState = [];
+const reducer = (draft, action) => {
+  switch (action.type) {
+    // Answer List Management
+    case AnswersActions.SET_ANSWERS: {
+      draft.length = 0;
+      draft.push(...action.payload.answers);
+      return;
+    }
+    case AnswersActions.CLEAR_ALL: {
+      draft.length = 0;
+      return;
+    }
+    // Answer Generation Flow
+    case AnswersActions.APPEND_NEW_ANSWER: {
+      draft.push({
+        id: "pending-" + createId(),
+        state: "fetching-search-results",
+        question: action.payload.query,
+        blocks: [markdownTextBlock()],
+        isUncertain: false,
+        attachments: action.payload.attachments
+      });
+      return;
+    }
+    case AnswersActions.SET_SEARCH_RESULTS: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.searchQueryId = action.payload.searchQueryId;
+        answer.searchResults = action.payload.results;
+        answer.state = action.payload.state || "fetching-stream";
+      }
+      return;
+    }
+    case AnswersActions.APPEND_ANSWER_CHUNK: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      const block = answer && getLastTextBlock(answer);
+      if (answer && !answer.isUncertain && block && isMarkdownTextBlock(block)) {
+        answer.state = "streaming";
+        block.text += action.payload.text;
+        delete answer.statusMessage;
+      }
+      return;
+    }
+    case AnswersActions.SET_ANSWER_ERROR: {
+      const answer = getTargetAnswer(draft, action.payload.index ?? -1);
+      const block = answer && getLastTextBlock(answer);
+      if (block && isMarkdownTextBlock(block)) {
+        block.text = action.payload.error;
+        answer.state = "completed";
+        answer.hasError = true;
+        delete answer.statusMessage;
+      }
+      return;
+    }
+    case AnswersActions.APPEND_BLOCK: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.blocks.push(action.payload.block);
+      }
+      return;
+    }
+    case AnswersActions.COMPLETE_ANSWER: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        const shouldComplete = answer.state === "streaming" || answer.state === "fetching-search-results" || answer.state === "fetching-stream";
+        if (shouldComplete) {
+          answer.state = "completed";
+        }
+        delete answer.statusMessage;
+      }
+      return;
+    }
+    case AnswersActions.MARK_AS_UNCERTAIN: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      const block = answer && getLastTextBlock(answer);
+      if (answer && block && isMarkdownTextBlock(block)) {
+        answer.isUncertain = true;
+        block.text = action.payload.uncertaintyText;
+      }
+      return;
+    }
+    case AnswersActions.SET_USER_FEEDBACK: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.feedback = action.payload.feedback;
+      }
+      return;
+    }
+    case AnswersActions.CLEAR_USER_FEEDBACK: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        delete answer.feedback;
+      }
+      return;
+    }
+    case AnswersActions.GET_ACTION_INPUTS: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.state = "getting-action-inputs";
+        answer.searchIntentId = action.payload.searchIntentId;
+        answer.blocks.push(
+          // @ts-expect-error
+          actionInputFormBlock({
+            actionId: action.payload.actionId,
+            schema: action.payload.schema,
+            initialValues: action.payload.initialValues,
+            onSubmit: action.payload.onSubmit,
+            inputs: action.payload.inputs
+          })
+        );
+      }
+      return;
+    }
+    case AnswersActions.ADD_ACTION_BUTTONS: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.searchIntentId = action.payload.searchIntentId;
+        answer.actions = action.payload.actions.map((action2) => ({
+          ...action2,
+          type: action2.type
+        }));
+        answer.blocks.push(actionButtonsBlock());
+      }
+      return;
+    }
+    case AnswersActions.INVOKE_ACTION: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (!answer) {
+        return;
+      }
+      const blockIndex = answer.blocks.findIndex(isActionInputFormBlock);
+      if (blockIndex !== -1) {
+        answer.state = "fetching-stream";
+        answer.blocks.splice(blockIndex, 1);
+        const block = getLastTextBlock(answer);
+        if (block && isMarkdownTextBlock(block)) {
+          block.text = "";
+        }
+      }
+      delete answer.statusMessage;
+      return;
+    }
+    case AnswersActions.SET_FOLLOW_UP_QUESTIONS: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.followUpQuestions = action.payload.questions;
+      }
+      return;
+    }
+    case AnswersActions.NO_ARTICLES_FOUND: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      const block = answer && getLastTextBlock(answer);
+      if (block && isMarkdownTextBlock(block)) {
+        block.text += "No articles found.";
+      }
+      if (answer) {
+        answer.state = "completed";
+      }
+      return;
+    }
+    case AnswersActions.SET_AWAITING_KNOWLEDGE_GROUP: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.state = "awaiting-knowledge-group";
+      }
+      return;
+    }
+    case AnswersActions.SET_KNOWLEDGE_GROUP_SELECTED: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.state = "fetching-search-results";
+      }
+      return;
+    }
+    case AnswersActions.SET_STATUS_MESSAGE: {
+      const answer = getTargetAnswer(draft, action.payload.index);
+      if (answer) {
+        answer.statusMessage = action.payload.message;
+      }
+      return;
+    }
+    default: {
+      throw new Error(`Answer List Reducer: unknown action type '${action.type}'`);
+    }
+  }
+};
+const useAnswerList = () => {
+  return useImmerReducer(reducer, initialState);
+};
+
+export { AnswersActions, addActionButtons, appendAnswerChunk, appendNewAnswer, clearAll, clearUserFeedback, completeAnswer, getActionInputs, invokeAction, markAsUncertain, noArticlesFound, setAnswerError, setAnswers, setAwaitingKnowledgeGroup, setFollowUpQuestions, setKnowledgeGroupSelected, setSearchResults, setStatusMessage, setUserFeedback, useAnswerList };

package/dist/esm/components/chat-search/hooks/useConversationHistory.js

@@ -0,0 +1,128 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { fetchConversationHistory, markConversationRead, markConversationCompleted } from '../../../lib/api.js';
+
+function useConversationHistory({
+  enabled = false,
+  conversationHistoryEndpoint,
+  markConversationReadEndpoint,
+  markConversationCompletedEndpoint,
+  headers,
+  userData,
+  currentConversationId,
+  loadConversationById,
+  reconnectHandoff,
+  resetHandoff
+}) {
+  const [showHistory, setShowHistory] = useState(false);
+  const [conversations, setConversations] = useState([]);
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const [isViewOnly, setIsViewOnly] = useState(false);
+  const pendingCompletionIdRef = useRef(null);
+  const headersRef = useRef(headers);
+  headersRef.current = headers;
+  const hasUnreadConversations = conversations.some((c) => c.hasUnread);
+  const externalUserId = userData?.userId;
+  const fingerprint = headers?.["x-bf-fingerprint"];
+  const hasUserIdentity = !!(externalUserId || fingerprint);
+  useEffect(() => {
+    if (!enabled || !conversationHistoryEndpoint || !hasUserIdentity) return;
+    let cancelled = false;
+    fetchConversationHistory({
+      endpoint: conversationHistoryEndpoint,
+      headers: headersRef.current,
+      externalUserId
+    }).then((data) => {
+      if (!cancelled) setConversations(data);
+    }).catch(() => {
+      if (!cancelled) setConversations([]);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [conversationHistoryEndpoint, hasUserIdentity, externalUserId, fingerprint]);
+  useEffect(() => {
+    if (!enabled || !showHistory || !conversationHistoryEndpoint || !hasUserIdentity) return;
+    let cancelled = false;
+    setIsLoadingHistory(true);
+    fetchConversationHistory({
+      endpoint: conversationHistoryEndpoint,
+      headers: headersRef.current,
+      externalUserId
+    }).then((data) => {
+      if (!cancelled) setConversations(data);
+    }).catch(() => {
+      if (!cancelled) setConversations([]);
+    }).finally(() => {
+      if (!cancelled) setIsLoadingHistory(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, showHistory, conversationHistoryEndpoint, hasUserIdentity, externalUserId, fingerprint]);
+  const handleSelectConversation = useCallback(
+    ({ conversationId, isHandoff, isCompleted }) => {
+      if (currentConversationId && !isViewOnly) {
+        pendingCompletionIdRef.current = currentConversationId;
+      }
+      loadConversationById(conversationId);
+      setIsViewOnly(isCompleted);
+      if (isHandoff || isCompleted) {
+        reconnectHandoff?.(conversationId);
+      } else {
+        resetHandoff?.();
+      }
+      if (markConversationReadEndpoint) {
+        markConversationRead({
+          endpoint: markConversationReadEndpoint,
+          conversationId,
+          headers: headersRef.current
+        }).catch(() => {
+        });
+      }
+      setShowHistory(false);
+    },
+    [enabled, currentConversationId, isViewOnly, loadConversationById, reconnectHandoff, resetHandoff, markConversationReadEndpoint]
+  );
+  const refetchConversations = useCallback(() => {
+    if (!enabled || !conversationHistoryEndpoint || !hasUserIdentity) return;
+    fetchConversationHistory({
+      endpoint: conversationHistoryEndpoint,
+      headers: headersRef.current,
+      externalUserId
+    }).then((data) => setConversations(data)).catch(() => {
+    });
+  }, [enabled, conversationHistoryEndpoint, hasUserIdentity, externalUserId]);
+  const completeActiveConversations = useCallback(() => {
+    if (!markConversationCompletedEndpoint) return;
+    const alreadyLoadedActiveIds = conversations.filter((c) => c.status === "active").map((c) => c.conversationId);
+    const idsToComplete = new Set(
+      [pendingCompletionIdRef.current, !isViewOnly ? currentConversationId : null, ...alreadyLoadedActiveIds].filter(
+        (id) => !!id
+      )
+    );
+    setConversations((prev) => prev.map((c) => idsToComplete.has(c.conversationId) ? { ...c, status: "completed" } : c));
+    idsToComplete.forEach((id) => {
+      markConversationCompleted({
+        endpoint: markConversationCompletedEndpoint,
+        conversationId: id,
+        headers: headersRef.current
+      }).catch(() => {
+      });
+    });
+    pendingCompletionIdRef.current = null;
+  }, [markConversationCompletedEndpoint, currentConversationId, isViewOnly, conversations]);
+  return {
+    showHistory,
+    setShowHistory,
+    conversations,
+    isLoadingHistory,
+    hasUnreadConversations,
+    isViewOnly,
+    setIsViewOnly,
+    handleSelectConversation,
+    completeActiveConversations,
+    refetchConversations
+  };
+}
+
+export { useConversationHistory };

package/dist/esm/components/chat-search/hooks/useConversationId.js

@@ -0,0 +1,41 @@
+import { useState, useCallback } from 'react';
+import { useSearchParam } from 'react-use';
+
+const CONVERSATION_PARAM = "conversation";
+const useConversationId = (searchPath, widgetKey) => {
+  const conversationId = useSearchParam(CONVERSATION_PARAM);
+  const [_conversationId, _setConversationId] = useState(conversationId ?? void 0);
+  const setConversationId = useCallback(
+    (id) => {
+      const url = new URL(window.location.href);
+      if (searchPath) {
+        url.pathname = searchPath;
+      }
+      if (id) {
+        url.searchParams.set(CONVERSATION_PARAM, id);
+      } else {
+        url.searchParams.delete(CONVERSATION_PARAM);
+      }
+      const newUrl = url.toString();
+      window.history.replaceState({ ...window.history.state, newUrl, url: newUrl }, "", newUrl);
+      _setConversationId(id);
+      if (typeof window !== "undefined" && window.parent !== window) {
+        window.parent.postMessage({ type: "CONVERSATION_CHANGED", conversationId: id, widgetKey }, "*");
+      }
+    },
+    [searchPath, widgetKey]
+  );
+  const clearConversationId = useCallback(() => {
+    const url = new URL(window.location.href);
+    url.searchParams.delete(CONVERSATION_PARAM);
+    const newUrl = url.toString();
+    window.history.replaceState({ ...window.history.state, newUrl, url: newUrl }, "", newUrl);
+    _setConversationId(void 0);
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage({ type: "CONVERSATION_CHANGED", conversationId: "", widgetKey }, "*");
+    }
+  }, [widgetKey]);
+  return { conversationId: _conversationId, setConversationId, clearConversationId };
+};
+
+export { useConversationId };

package/dist/esm/components/chat-search/hooks/useConversationLoader.js

@@ -0,0 +1,99 @@
+import { useRef, useCallback } from 'react';
+import { useEffectOnce } from 'react-use';
+import { useChatSearch } from '../ChatSearchContext.js';
+import { setAnswers, clearAll } from './useAnswerList.js';
+import { markdownTextBlock } from '../blocks/utils.js';
+import { isAnswerUncertain } from '../../../lib/utils.js';
+import { loadConversation } from '../../../lib/api.js';
+
+const useConversationLoader = ({
+  loadConversationEndpoint,
+  headers,
+  reconnectHandoff,
+  onConversationLoaded
+}) => {
+  const { setIsLoadingConversation, setShowResults, answerListDispatch, answers, conversationId, setConversationId, setLoadError } = useChatSearch();
+  const answersRef = useRef(answers);
+  answersRef.current = answers;
+  const conversationIdRef = useRef(conversationId);
+  conversationIdRef.current = conversationId;
+  const activeLoadRef = useRef(null);
+  const loadConversationById = useCallback(
+    (id) => {
+      if (id === conversationIdRef.current && answersRef.current.length > 0) {
+        return;
+      }
+      onConversationLoaded?.();
+      setConversationId(id);
+      setShowResults(true);
+      if (!loadConversationEndpoint) {
+        return;
+      }
+      activeLoadRef.current?.abort("Superseded by a newer conversation load");
+      setIsLoadingConversation(true);
+      setLoadError("");
+      const controller = new AbortController();
+      activeLoadRef.current = controller;
+      loadConversation({
+        endpoint: loadConversationEndpoint,
+        conversationId: id,
+        headers,
+        signal: controller.signal
+      }).then(({ data }) => {
+        const answers2 = data.map((query) => {
+          const answerText = query.answer ?? "";
+          return {
+            id: query.searchQueryId,
+            state: "completed",
+            question: query.question,
+            isUncertain: isAnswerUncertain(answerText).uncertain,
+            searchQueryId: query.searchQueryId,
+            searchIntentId: query.searchIntentId,
+            blocks: answerText ? answerText.split("---").map(
+              (text) => markdownTextBlock({
+                text: text.trim()
+              })
+            ) : []
+          };
+        });
+        answerListDispatch(setAnswers({ answers: answers2 }));
+        setShowResults(true);
+      }).catch((error) => {
+        if (controller.signal.aborted || error instanceof Error && error.name === "AbortError") {
+          return;
+        }
+        console.error("Error loading conversation:", error);
+        answerListDispatch(clearAll());
+        setShowResults(true);
+      }).finally(() => {
+        if (activeLoadRef.current === controller) {
+          activeLoadRef.current = null;
+          setIsLoadingConversation(false);
+        }
+      });
+      return () => controller.abort("Conversation loader aborted");
+    },
+    [
+      loadConversationEndpoint,
+      setIsLoadingConversation,
+      setShowResults,
+      headers,
+      answerListDispatch,
+      setConversationId,
+      setLoadError,
+      onConversationLoaded
+    ]
+  );
+  useEffectOnce(() => {
+    let cancel;
+    if (conversationId) {
+      console.log("loading conversation", conversationId);
+      cancel = loadConversationById(conversationId);
+      reconnectHandoff?.(conversationId);
+    }
+    return () => cancel?.();
+  });
+  return { loadConversationById };
+};
+
+export { useConversationLoader };

package/dist/esm/components/chat-search/hooks/useDarkMode.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+const useDarkMode = () => {
+  const [isDarkMode, setIsDarkMode] = useState(() => document.documentElement.classList.contains("dark"));
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      setIsDarkMode(document.documentElement.classList.contains("dark"));
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return isDarkMode;
+};
+
+export { useDarkMode };