@brainfish-ai/components 0.35.19 → 0.36.0

package/dist/esm/lib/addUtmParams.js

@@ -0,0 +1,26 @@
+function addUtmParameters(url, options) {
+  if (!url) {
+    return url;
+  }
+  try {
+    const urlObj = new URL(url);
+    if (options.source && urlObj.searchParams.get("utm_source") === null) {
+      urlObj.searchParams.set("utm_source", options.source);
+    }
+    if (options.medium && urlObj.searchParams.get("utm_medium") === null) {
+      urlObj.searchParams.set("utm_medium", options.medium);
+    }
+    if (options.campaign && urlObj.searchParams.get("utm_campaign") === null) {
+      urlObj.searchParams.set("utm_campaign", options.campaign);
+    }
+    return urlObj.toString();
+  } catch {
+    return url;
+  }
+}
+const addPopupWidgetUtm = (url) => addUtmParameters(url, {
+  source: "brainfish",
+  medium: "popup_widget"
+});
+
+export { addPopupWidgetUtm, addUtmParameters };

package/dist/esm/lib/ajvResolver.js

@@ -0,0 +1,60 @@
+import Ajv from 'ajv';
+import ajvErrors from 'ajv-errors';
+import { validateFieldsNatively, toNestErrors } from '@hookform/resolvers';
+import { appendErrors } from 'react-hook-form';
+
+const parseErrorSchema = (ajvErrorList, validateAllFieldCriteria) => {
+  const parsedErrors = {};
+  const reduceError = (error) => {
+    if (error.keyword === "required") {
+      error.instancePath += "/" + error.params.missingProperty;
+    }
+    const path = error.instancePath.substring(1).replace(/\//g, ".");
+    if (!parsedErrors[path]) {
+      parsedErrors[path] = { message: error.message, type: error.keyword };
+    }
+    if (validateAllFieldCriteria) {
+      const { types } = parsedErrors[path];
+      const messages = types && types[error.keyword];
+      parsedErrors[path] = appendErrors(
+        path,
+        validateAllFieldCriteria,
+        parsedErrors,
+        error.keyword,
+        messages ? [].concat(messages, error.message || "") : error.message
+      );
+    }
+  };
+  for (const error of ajvErrorList) {
+    if (error.keyword === "errorMessage") {
+      error.params.errors.forEach((originalError) => {
+        originalError.message = error.message;
+        reduceError(originalError);
+      });
+    } else {
+      reduceError(error);
+    }
+  }
+  return parsedErrors;
+};
+const ajvResolver = (schema, schemaOptions, resolverOptions = {}) => async (values, _context, options) => {
+  const ajv = new Ajv({ allErrors: true, validateSchema: true, ...schemaOptions });
+  ajvErrors(ajv);
+  const validate = ajv.compile({ $async: resolverOptions.mode === "async", ...schema });
+  const valid = validate(values);
+  if (options.shouldUseNativeValidation) {
+    validateFieldsNatively({}, options);
+  }
+  if (valid) {
+    return { values, errors: {} };
+  }
+  return {
+    values: {},
+    errors: toNestErrors(
+      parseErrorSchema(validate.errors, !options.shouldUseNativeValidation && options.criteriaMode === "all"),
+      options
+    )
+  };
+};
+
+export { ajvResolver };

package/dist/esm/lib/api.js

@@ -0,0 +1,240 @@
+import { createId } from '@paralleldrive/cuid2';
+import { makeRequest } from './fetchClient.js';
+import { formatDistance } from './formatDate.js';
+
+const searchRetryConfig = {
+  maxRetries: 3,
+  baseDelay: 300,
+  // Start with 300ms delay
+  shouldRetry: (error) => {
+    if (error instanceof TypeError) {
+      return true;
+    }
+    const apiError = error;
+    return apiError.status ? apiError.status >= 500 || apiError.status === 429 : false;
+  }
+};
+const answerRetryConfig = {
+  maxRetries: 3,
+  baseDelay: 500,
+  // Start with 500ms delay for streaming responses
+  shouldRetry: (error) => {
+    if (error instanceof TypeError) {
+      return true;
+    }
+    const apiError = error;
+    return apiError.status ? apiError.status >= 500 : false;
+  }
+};
+async function searchApi({
+  endpoint,
+  query,
+  collectionId,
+  headers,
+  conversationId,
+  attributes,
+  secretAttributes,
+  allowedRegions,
+  source
+}) {
+  let resolvedCollectionId;
+  if (Array.isArray(collectionId)) {
+    resolvedCollectionId = collectionId.length > 0 ? collectionId : void 0;
+  } else {
+    resolvedCollectionId = collectionId && collectionId !== "all" ? collectionId : void 0;
+  }
+  const payload = await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    retry: searchRetryConfig,
+    body: {
+      query,
+      limit: 5,
+      ...resolvedCollectionId && { collectionId: resolvedCollectionId },
+      ...conversationId && { conversationId },
+      ...attributes && { attributes },
+      ...secretAttributes && { secretAttributes },
+      ...allowedRegions && { allowedRegions },
+      ...source && { source }
+    }
+  });
+  return {
+    results: payload?.data,
+    searchQueryId: payload?.searchQuery?.id,
+    isAgenticResponse: payload?.isAgenticResponse
+  };
+}
+async function fetchAnswerStream({
+  endpoint,
+  headers,
+  body
+}) {
+  return makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    retry: answerRetryConfig,
+    isStream: true,
+    fallback: {
+      emptyResponse: "I apologize, but I couldn't generate an answer for your query. Please try rephrasing your question.",
+      errorResponse: "I encountered an issue while generating the answer. Please try again in a moment."
+    },
+    body
+  });
+}
+function createConversationId() {
+  return createId();
+}
+async function uploadFileToApi({
+  endpoint,
+  conversationId,
+  file,
+  headers
+}) {
+  const formData = new FormData();
+  formData.append("file", file);
+  formData.append("conversationId", conversationId);
+  const response = await fetch(endpoint, {
+    method: "POST",
+    headers,
+    body: formData
+  });
+  if (!response.ok) {
+    throw new Error(`Upload failed with status ${response.status}`);
+  }
+  const json = await response.json();
+  return { publicUrl: json.data.publicUrl };
+}
+async function sendFeedback({
+  endpoint,
+  searchQueryId,
+  response,
+  headers,
+  conversationId
+}) {
+  await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    body: {
+      searchQueryId,
+      response,
+      ...conversationId && { conversationId }
+    }
+  });
+}
+async function sendFeedbackReason({
+  endpoint,
+  searchQueryId,
+  reason,
+  headers
+}) {
+  await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    body: {
+      searchQueryId,
+      reason
+    }
+  });
+}
+async function loadConversation({
+  endpoint,
+  conversationId,
+  headers,
+  signal
+}) {
+  const payload = await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    body: { conversationId },
+    signal
+  });
+  return { data: payload.data };
+}
+async function fetchFollowUpQuestions({
+  endpoint,
+  searchQueryId,
+  headers,
+  conversationId
+}) {
+  const data = await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    body: {
+      searchQueryId,
+      ...conversationId
+    }
+  });
+  return data.questions;
+}
+async function fetchAutocomplete({
+  endpoint,
+  query,
+  collectionId,
+  headers,
+  conversationId,
+  allowedRegions
+}) {
+  const data = await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    retry: searchRetryConfig,
+    body: {
+      query,
+      ...collectionId && collectionId !== "all" && { collectionId },
+      ...conversationId && { conversationId },
+      ...allowedRegions && { allowedRegions }
+    }
+  });
+  return data;
+}
+async function fetchConversationHistory({
+  endpoint,
+  headers,
+  externalUserId
+}) {
+  let url;
+  try {
+    url = new URL(endpoint);
+  } catch {
+    return Promise.reject(new TypeError(`Invalid conversation history endpoint: ${endpoint}`));
+  }
+  if (externalUserId) url.searchParams.set("externalUserId", externalUserId);
+  const payload = await makeRequest(url.toString(), {
+    method: "GET",
+    headers
+  });
+  return payload.data.map((item) => ({
+    conversationId: item.conversationId,
+    title: item.title,
+    status: item.status,
+    timestamp: formatDistance(new Date(item.lastActivityAt ?? item.createdAt)),
+    isHandoff: item.isHandoff ?? false,
+    agentAvatarUrl: item.agentAvatarUrl,
+    subtitle: item.agentName ? `${item.agentName}` : void 0,
+    hasUnread: item.hasUnread ?? false
+  }));
+}
+async function markConversationRead({
+  endpoint,
+  conversationId,
+  headers
+}) {
+  await makeRequest(endpoint, {
+    method: "POST",
+    headers,
+    body: { conversationId }
+  });
+}
+async function markConversationCompleted({
+  endpoint,
+  conversationId,
+  headers
+}) {
+  await makeRequest(endpoint, {
+    method: "PATCH",
+    headers,
+    body: { conversationId }
+  });
+}
+
+export { createConversationId, fetchAnswerStream, fetchAutocomplete, fetchConversationHistory, fetchFollowUpQuestions, loadConversation, markConversationCompleted, markConversationRead, searchApi, sendFeedback, sendFeedbackReason, uploadFileToApi };

package/dist/esm/lib/countSuggestions.js

@@ -0,0 +1,21 @@
+function countSuggestionsInRoot(root) {
+  const adjacentPairs = root.querySelectorAll("del + ins");
+  const standaloneIns = root.querySelectorAll("ins:not(del + ins)");
+  const allDel = root.querySelectorAll("del");
+  const standaloneDel = Array.from(allDel).filter((del) => del.nextElementSibling?.tagName !== "INS");
+  return adjacentPairs.length + standaloneIns.length + standaloneDel.length;
+}
+const countSuggestions = (htmlString) => {
+  if (!htmlString || typeof DOMParser === "undefined") {
+    return 0;
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(htmlString, "text/html");
+  return countSuggestionsInRoot(doc);
+};
+const countSuggestionsInElement = (element) => {
+  if (!element) return 0;
+  return countSuggestionsInRoot(element);
+};
+
+export { countSuggestions, countSuggestionsInElement };

package/dist/esm/lib/feature-flags.js

@@ -0,0 +1,21 @@
+import React__default, { useContext, createContext } from 'react';
+
+const EMPTY_FEATURE_FLAGS = {};
+const FeatureFlagContext = createContext(void 0);
+function FeatureFlagProvider({ children, flags }) {
+  return /* @__PURE__ */ React__default.createElement(FeatureFlagContext.Provider, { value: flags ?? EMPTY_FEATURE_FLAGS }, children);
+}
+function useBooleanFlagValue(flagKey, defaultValue) {
+  const flags = useContext(FeatureFlagContext);
+  if (!flags) {
+    console.warn(`useBooleanFlagValue("${flagKey}") used outside of FeatureFlagProvider. Returning default value.`);
+    return defaultValue;
+  }
+  const value = flags[flagKey];
+  if (value === void 0) {
+    return defaultValue;
+  }
+  return Boolean(value);
+}
+
+export { FeatureFlagProvider, useBooleanFlagValue };

package/dist/esm/lib/features.js

@@ -0,0 +1,5 @@
+const Features = {
+  HistoryTab: "enableHistoryTab"
+};
+
+export { Features };

package/dist/esm/lib/fetchClient.js

@@ -0,0 +1,77 @@
+const defaultRetryOptions = {
+  maxRetries: 3,
+  baseDelay: 1e3,
+  shouldRetry: (error) => {
+    if (error instanceof TypeError) {
+      return true;
+    }
+    const apiError = error;
+    return apiError.status ? apiError.status >= 500 : false;
+  }
+};
+const defaultFallbackConfig = {
+  emptyResponse: "I apologize, but I couldn't generate an answer at this time. Please try again.",
+  errorResponse: "I encountered an error while processing your request. Please try again."
+};
+let globalRetryOptions = { ...defaultRetryOptions };
+let globalFallbackConfig = { ...defaultFallbackConfig };
+async function delay(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+async function makeRequest(url, config = {}) {
+  const { retry = {}, headers = {}, body, isStream = false, fallback = {}, ...fetchConfig } = config;
+  const retryOptions = {
+    ...globalRetryOptions,
+    ...retry
+  };
+  const fallbackOptions = {
+    ...globalFallbackConfig,
+    ...fallback
+  };
+  let attempt = 1;
+  while (true) {
+    try {
+      const response = await fetch(url, {
+        ...fetchConfig,
+        headers: {
+          "Content-Type": "application/json",
+          ...headers
+        },
+        body: body ? JSON.stringify(body) : void 0
+      });
+      if (response.ok) {
+        if (isStream) {
+          if (!response.ok) {
+            throw new Error("Failed to fetch answer");
+          }
+          return response;
+        }
+        const data = await response.json();
+        if (!data || typeof data === "object" && Object.keys(data).length === 0) {
+          const emptyError = new Error(fallbackOptions.emptyResponse);
+          emptyError.name = "EmptyResponseError";
+          throw emptyError;
+        }
+        return data;
+      }
+      const error = new Error(fallbackOptions.errorResponse);
+      error.status = response.status;
+      error.data = await response.json().catch(() => void 0);
+      throw error;
+    } catch (error) {
+      const shouldAttemptRetry = await Promise.resolve(retryOptions.shouldRetry(error, attempt));
+      if (attempt >= retryOptions.maxRetries || !shouldAttemptRetry) {
+        if (error instanceof Error && error.name === "EmptyResponseError") {
+          return { message: error.message };
+        }
+        throw error;
+      }
+      console.warn(`Request failed, attempt ${attempt} of ${retryOptions.maxRetries}. Retrying...`);
+      const jitter = Math.random() * 0.3 + 0.85;
+      await delay(retryOptions.baseDelay * Math.pow(2, attempt - 1) * jitter);
+      attempt++;
+    }
+  }
+}
+
+export { makeRequest };

package/dist/esm/lib/formatDate.js

@@ -0,0 +1,40 @@
+import { intlFormatDistance } from 'date-fns/intlFormatDistance';
+
+function getLocale(locale) {
+  const defaultLocale = "en-US";
+  if (!locale) {
+    if (typeof navigator !== "undefined") {
+      locale = navigator.language;
+    } else {
+      locale = defaultLocale;
+    }
+  }
+  return locale;
+}
+function formatDistance(timestamp, localeParam) {
+  const locale = getLocale(localeParam);
+  return intlFormatDistance(timestamp, /* @__PURE__ */ new Date(), { locale, style: "short" });
+}
+function formatDate(date, localeParam) {
+  const locale = getLocale(localeParam);
+  return date.toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+function formatChartTick(value, locale = "en-US") {
+  if (typeof value === "string") return value;
+  if (!(value instanceof Date)) return "";
+  return value.toLocaleDateString(locale, { month: "short", day: "numeric" });
+}
+function formatChartLabel(value, locale = "en-US") {
+  if (typeof value === "string") return value;
+  if (!(value instanceof Date)) return "";
+  return value.toLocaleDateString(locale, { month: "long", day: "numeric", year: "numeric" });
+}
+
+export { formatChartLabel, formatChartTick, formatDate, formatDistance };

package/dist/esm/lib/formatNumber.js

@@ -0,0 +1,9 @@
+const formatNumber = (number, options = {
+  maximumFractionDigits: 1,
+  notation: "compact"
+}) => {
+  const region = Intl.DateTimeFormat().resolvedOptions().locale;
+  return Intl.NumberFormat(region, options).format(number);
+};
+
+export { formatNumber };

package/dist/esm/lib/getContentType.js

@@ -0,0 +1,36 @@
+async function getContentType(attachmentId, contentTypeEndpoint, signal) {
+  try {
+    if (!contentTypeEndpoint) {
+      return "unknown";
+    }
+    const response = await fetch(`${contentTypeEndpoint}?id=${attachmentId}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      signal
+    }).then((res) => res.json());
+    if (!response.ok) {
+      return "unknown";
+    }
+    const contentType = response.contentType;
+    if (contentType?.startsWith("image/")) {
+      return "image";
+    }
+    if (contentType?.startsWith("video/")) {
+      return "video";
+    }
+    if (contentType?.startsWith("audio/")) {
+      return "audio";
+    }
+    if (contentType?.startsWith("application/pdf")) {
+      return "pdf";
+    }
+    return "unknown";
+  } catch (error) {
+    console.error("Error getting content type:", error);
+    return "unknown";
+  }
+}
+
+export { getContentType };

package/dist/esm/lib/hooks.js

@@ -0,0 +1,80 @@
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { fetchAutocomplete } from './api.js';
+
+function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+}
+function useAutocomplete({
+  query,
+  endpoint,
+  allowedRegions,
+  collectionId,
+  headers,
+  conversationId,
+  delay = 300
+}) {
+  const [suggestions, setSuggestions] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState();
+  const debouncedQuery = useDebounce(query, delay);
+  const fetchSuggestions = useCallback(async () => {
+    if (!debouncedQuery.trim()) {
+      setSuggestions([]);
+      return;
+    }
+    setIsLoading(true);
+    setError(void 0);
+    try {
+      const payload = await fetchAutocomplete({
+        endpoint,
+        query: debouncedQuery,
+        collectionId,
+        headers,
+        conversationId,
+        allowedRegions
+      });
+      if (payload?.response?.results) {
+        const lowerCaseQuery = debouncedQuery.toLowerCase();
+        const sortedSuggestions = payload.response.results.sort((a, b) => {
+          const aStartsWithQuery = a.question.toLowerCase().startsWith(lowerCaseQuery);
+          const bStartsWithQuery = b.question.toLowerCase().startsWith(lowerCaseQuery);
+          if (aStartsWithQuery && !bStartsWithQuery) return -1;
+          if (!aStartsWithQuery && bStartsWithQuery) return 1;
+          return 0;
+        });
+        setSuggestions(sortedSuggestions);
+      } else {
+        setSuggestions([]);
+      }
+    } catch (err) {
+      console.error("Error fetching autocomplete suggestions:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch suggestions");
+      setSuggestions([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [debouncedQuery, endpoint, collectionId, headers, conversationId, allowedRegions]);
+  useEffect(() => {
+    void fetchSuggestions();
+  }, [fetchSuggestions]);
+  return { suggestions, isLoading, error };
+}
+function useSubstringFilter() {
+  return useMemo(
+    () => ({
+      contains: (text, substring) => text.toLowerCase().includes(substring.toLowerCase())
+    }),
+    []
+  );
+}
+
+export { useAutocomplete, useDebounce, useSubstringFilter };

package/dist/esm/lib/pluralise.js

@@ -0,0 +1,6 @@
+function pluralise(count, singular, plural = `${singular}s`) {
+  const word = count === 1 ? singular : plural;
+  return `${count} ${word}`;
+}
+
+export { pluralise };

package/dist/esm/lib/sortAttributeKeys.js

@@ -0,0 +1,13 @@
+function sortAttributeKeys(attributes) {
+  const PRIORITY_KEYS = ["id", "name", "email", "phone"];
+  if (attributes.length === 0) {
+    return [];
+  }
+  const priority = (key) => {
+    const idx = PRIORITY_KEYS.indexOf(key);
+    return idx === -1 ? Infinity : idx;
+  };
+  return Object.keys(attributes[0]).sort((a, b) => priority(a) - priority(b));
+}
+
+export { sortAttributeKeys };

package/dist/esm/lib/styles.js

@@ -0,0 +1,3 @@
+const brandShadowEffect = "shadow-brand hover:shadow-none !transition-shadow duration-300 ease-in-out active:shadow-brand-active dark:shadow-brand-dark dark:hover:shadow-none dark:active:shadow-brand-dark-active";
+
+export { brandShadowEffect };

package/dist/esm/lib/useChartDateFormatters.js

@@ -0,0 +1,10 @@
+import { useCallback } from 'react';
+import { formatChartTick, formatChartLabel } from './formatDate.js';
+
+function useChartDateFormatters(locale) {
+  const tickFormatter = useCallback((value) => formatChartTick(value, locale ?? "en-US"), [locale]);
+  const formatXLabel = useCallback((label) => formatChartLabel(label, locale ?? "en-US"), [locale]);
+  return { tickFormatter, formatXLabel };
+}
+
+export { useChartDateFormatters };