@brainfish-ai/components 0.35.20 → 0.36.1

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

@@ -0,0 +1,113 @@
+import React__default, { useState, useEffect } from 'react';
+import { ArrowsVertical } from '@phosphor-icons/react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { cn } from '../../lib/utils.js';
+
+function TimelineNavigation({ questions, activeIndex, onNavigate, offset }) {
+  const [prevActiveIndex, setPrevActiveIndex] = useState(activeIndex);
+  useEffect(() => {
+    setPrevActiveIndex(activeIndex);
+  }, [activeIndex]);
+  const VISIBLE_ITEMS_EACH_SIDE = 2;
+  const totalItems = questions.length;
+  const getVisibleIndexes = () => {
+    const indexes = [];
+    let lastAddedIndex = null;
+    const addIndex = (index) => {
+      if (lastAddedIndex !== null && index - lastAddedIndex > 1) {
+        indexes.push("ellipsis");
+      }
+      indexes.push(index);
+      lastAddedIndex = index;
+    };
+    addIndex(0);
+    for (let i = Math.max(1, activeIndex - VISIBLE_ITEMS_EACH_SIDE); i <= Math.min(totalItems - 2, activeIndex + VISIBLE_ITEMS_EACH_SIDE); i++) {
+      addIndex(i);
+    }
+    if (totalItems > 1) {
+      addIndex(totalItems - 1);
+    }
+    return indexes;
+  };
+  const visibleIndexes = getVisibleIndexes();
+  return /* @__PURE__ */ React__default.createElement(
+    "nav",
+    {
+      "aria-label": "Question timeline navigation",
+      className: "fixed left-4 top-1/2 -translate-y-1/2 z-40 flex flex-col gap-3",
+      style: { ...offset ? { left: `${offset}px` } : {} }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      motion.div,
+      {
+        className: "flex flex-col items-center space-y-3",
+        role: "list",
+        initial: false,
+        animate: { y: 0 },
+        transition: { type: "spring", stiffness: 300, damping: 30 }
+      },
+      /* @__PURE__ */ React__default.createElement(AnimatePresence, null, visibleIndexes.map((indexOrEllipsis, arrayIndex) => {
+        if (indexOrEllipsis === "ellipsis") {
+          return /* @__PURE__ */ React__default.createElement(
+            motion.div,
+            {
+              key: `ellipsis-${arrayIndex}`,
+              className: "h-8 flex items-center justify-center",
+              "aria-hidden": "true",
+              initial: { opacity: 0, y: prevActiveIndex > activeIndex ? -20 : 20 },
+              animate: { opacity: 1, y: 0 },
+              exit: { opacity: 0, y: prevActiveIndex > activeIndex ? 20 : -20 },
+              transition: { duration: 0.2 }
+            },
+            /* @__PURE__ */ React__default.createElement(ArrowsVertical, { className: "size-4 text-foreground" })
+          );
+        }
+        const index = indexOrEllipsis;
+        const question = questions[index];
+        return /* @__PURE__ */ React__default.createElement(
+          motion.div,
+          {
+            key: index,
+            className: "relative group isolate",
+            role: "listitem",
+            initial: { opacity: 0, y: prevActiveIndex > activeIndex ? -20 : 20 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: prevActiveIndex > activeIndex ? 20 : -20 },
+            transition: { duration: 0.2 },
+            layout: true
+          },
+          /* @__PURE__ */ React__default.createElement(TooltipProvider, { delayDuration: 100 }, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+            "button",
+            {
+              onClick: () => onNavigate(index),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  onNavigate(index);
+                }
+              },
+              className: cn(
+                "flex items-center justify-center size-8 rounded-full transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 hover:opacity-90 cursor-pointer ring-primary ",
+                index === activeIndex ? "bg-primary text-primary-foreground" : "bg-stone-300 text-zinc-800"
+              ),
+              "aria-label": `Navigate to question ${index + 1}: ${question}`,
+              "aria-current": index === activeIndex ? "step" : void 0
+            },
+            index + 1
+          )), /* @__PURE__ */ React__default.createElement(
+            TooltipContent,
+            {
+              side: "right",
+              sideOffset: 8,
+              bgColor: "--bfc-card",
+              className: "max-w-[300px] text-card-foreground border-foreground/35"
+            },
+            /* @__PURE__ */ React__default.createElement("p", { className: "break-words leading-relaxed" }, question)
+          )))
+        );
+      }))
+    )
+  );
+}
+
+export { TimelineNavigation };

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

@@ -0,0 +1,29 @@
+import React__default from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { X } from 'lucide-react';
+
+function ToastContainer({ toasts, onDismiss }) {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "fixed top-4 left-4 right-4 z-50 flex flex-col gap-2 pointer-events-none" }, /* @__PURE__ */ React__default.createElement(AnimatePresence, null, toasts.map((toast) => /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      key: toast.id,
+      initial: { opacity: 0, y: -8 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -8 },
+      transition: { duration: 0.2 },
+      className: "pointer-events-auto flex items-center gap-2 rounded-lg border border-border bg-card px-4 py-3 text-sm text-foreground shadow-lg"
+    },
+    /* @__PURE__ */ React__default.createElement("span", { className: "flex-1" }, toast.message),
+    /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        onClick: () => onDismiss(toast.id),
+        className: "shrink-0 rounded-full p-0.5 hover:bg-muted transition-colors",
+        "aria-label": "Dismiss"
+      },
+      /* @__PURE__ */ React__default.createElement(X, { className: "size-3.5" })
+    )
+  ))));
+}
+
+export { ToastContainer };

package/dist/esm/components/chat-search/blocks/ActionButtons.js

@@ -0,0 +1,5 @@
+function ActionButtonsBlock({ block: _block }) {
+  return null;
+}
+
+export { ActionButtonsBlock };

package/dist/esm/components/chat-search/blocks/ActionInputForm.js

@@ -0,0 +1,154 @@
+import React__default from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { XCircle } from '@phosphor-icons/react';
+import { Button } from '../../ui/button.js';
+import { Input } from '../../ui/input.js';
+import { Label } from '../../ui/label.js';
+import { Textarea } from '../../ui/textarea.js';
+import { SimpleSelect } from '../../select/simpleSelect.js';
+import { cn } from '../../../lib/utils.js';
+import { ajvResolver } from '../../../lib/ajvResolver.js';
+import { DatePicker } from '../../date-picker/date-picker.js';
+
+function patchSchemaForAjvResolver(schema) {
+  const newSchema = structuredClone(schema);
+  newSchema.errorMessage = "This field is required";
+  for (const [key, property] of Object.entries(newSchema.properties ?? {})) {
+    if (newSchema.required?.includes(key) && property.type === "string") {
+      property.minLength = property.minLength || 1;
+      property.errorMessage = property.errorMessage || {
+        minLength: "This field is required"
+      };
+    }
+    if (property.type === "number") {
+      property.errorMessage = property.errorMessage || {
+        type: "Please enter a valid number"
+      };
+    }
+  }
+  return newSchema;
+}
+function ActionInputFormBlock({ block }) {
+  const formSchema = React__default.useMemo(() => {
+    return patchSchemaForAjvResolver(block.schema);
+  }, [block.schema]);
+  const { inputs = [], initialValues, state } = block;
+  const isReady = state === "ready";
+  const isProcessing = state === "processing";
+  const isCompleted = state === "completed";
+  const defaultValues = Object.entries(initialValues).reduce((acc, [key, value]) => {
+    if (typeof value === "string" && value.trim() === "") {
+      return acc;
+    }
+    acc[key] = value;
+    return acc;
+  }, {});
+  const {
+    register,
+    control,
+    handleSubmit,
+    formState: { errors }
+  } = useForm({
+    defaultValues,
+    resolver: ajvResolver(formSchema, {
+      removeAdditional: true
+    })
+  });
+  const onSubmit = (e) => {
+    e.preventDefault();
+    if (block.onSubmit) {
+      void handleSubmit(block.onSubmit)(e);
+    }
+    return false;
+  };
+  const formInputs = inputs.map((input) => {
+    const { name, required, schema: inputSchema, ui } = input;
+    const labelText = `${inputSchema.title ?? name}${required ? "*" : ""}`;
+    const description = inputSchema.description;
+    const error = errors[name];
+    const errorMessage = error?.message;
+    let descriptionText = description ? String(description) : null;
+    if (error) {
+      descriptionText = description ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, description, " - ", /* @__PURE__ */ React__default.createElement("span", { className: "italic" }, errorMessage)) : (
+        // if there is no description, just show the error message
+        errorMessage
+      );
+    }
+    const inputType = ui?.type || "text";
+    const registerOptions = {
+      valueAsNumber: inputType === "number" ? true : void 0
+    };
+    return /* @__PURE__ */ React__default.createElement("div", { key: name, className: "py-2 flex flex-col gap-2" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: name }, labelText), inputType === "datepicker" ? /* @__PURE__ */ React__default.createElement(
+      Controller,
+      {
+        control,
+        name,
+        render: ({ field }) => /* @__PURE__ */ React__default.createElement(
+          DatePicker,
+          {
+            date: field.value && typeof field.value === "string" ? new Date(field.value) : void 0,
+            setDate: (date) => {
+              if (date) {
+                field.onChange(date.toISOString());
+              } else {
+                field.onChange(void 0);
+              }
+            },
+            className: cn("!bg-transparent", { "border-red-600": !!error })
+          }
+        )
+      }
+    ) : inputType === "textarea" ? /* @__PURE__ */ React__default.createElement(
+      Textarea,
+      {
+        disabled: !isReady,
+        rows: 2,
+        maxLength: 1e4,
+        className: cn("!bg-transparent", { "border-red-600": !!error }),
+        ...register(name, registerOptions),
+        "aria-invalid": !!error,
+        "aria-required": required
+      }
+    ) : inputType === "select" ? /* @__PURE__ */ React__default.createElement(
+      Controller,
+      {
+        control,
+        name,
+        render: ({ field }) => /* @__PURE__ */ React__default.createElement(
+          SimpleSelect,
+          {
+            options: inputSchema.oneOf?.map((option) => ({
+              label: option.title,
+              value: option.const
+            })) ?? [],
+            className: cn("!bg-transparent", { "border-red-600": !!error }),
+            value: field.value,
+            onChange: (value) => field.onChange(value)
+          }
+        )
+      }
+    ) : /* @__PURE__ */ React__default.createElement(
+      Input,
+      {
+        type: inputType,
+        disabled: !isReady,
+        className: cn({ "border-red-600": !!error }),
+        ...register(name, registerOptions),
+        "aria-invalid": !!error,
+        "aria-required": required
+      }
+    ), descriptionText && /* @__PURE__ */ React__default.createElement(
+      "span",
+      {
+        className: cn("flex text-sm leading-6 font-medium gap-1.5 items-center", {
+          "text-red-600 dark:text-white": !!error
+        })
+      },
+      error && /* @__PURE__ */ React__default.createElement(XCircle, { weight: "fill", size: 20, className: "inline-block align-middle text-red-600" }),
+      /* @__PURE__ */ React__default.createElement("span", null, descriptionText)
+    ));
+  });
+  return /* @__PURE__ */ React__default.createElement("div", { className: "relative" }, /* @__PURE__ */ React__default.createElement("form", { className: "flex flex-col justify-stretch", onSubmit }, formInputs, /* @__PURE__ */ React__default.createElement("div", { className: "mt-4" }, /* @__PURE__ */ React__default.createElement(Button, { type: "submit", variant: "dark", disabled: !isReady, className: "w-full rounded-s" }, isReady && "Submit", isProcessing && "Processing...", isCompleted && "Completed"))));
+}
+
+export { ActionInputFormBlock, patchSchemaForAjvResolver };

package/dist/esm/components/chat-search/blocks/MarkdownText.js

@@ -0,0 +1,24 @@
+import React__default from 'react';
+import { useChatSearch } from '../ChatSearchContext.js';
+import { FormattedMessage } from '../../markdown/FormattedMessage.js';
+
+function MarkdownTextBlock({ block, redirectRules, state }) {
+  const { contentTypeEndpoint } = useChatSearch();
+  if (!block.text || block.text.trim() === "") {
+    return null;
+  }
+  const { text } = block;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full" }, /* @__PURE__ */ React__default.createElement("div", { className: "prose prose-sm max-w-none text-foreground" }, /* @__PURE__ */ React__default.createElement(
+    FormattedMessage,
+    {
+      message: {
+        content: text
+      },
+      redirectRules,
+      isStreaming: state === "streaming",
+      contentTypeEndpoint
+    }
+  )));
+}
+
+export { MarkdownTextBlock };

package/dist/esm/components/chat-search/blocks/utils.js

@@ -0,0 +1,36 @@
+import { createId } from '@paralleldrive/cuid2';
+
+const markdownTextBlock = ({ text = "" } = {}) => ({
+  id: createId(),
+  type: "markdown-text",
+  text
+});
+const actionInputFormBlock = ({
+  actionId,
+  initialValues,
+  onSubmit,
+  inputs,
+  schema
+}) => ({
+  id: createId(),
+  type: "action-input-form",
+  state: "ready",
+  actionId,
+  initialValues,
+  onSubmit,
+  inputs,
+  schema
+});
+const actionButtonsBlock = () => ({
+  id: createId(),
+  type: "action-buttons"
+});
+const isMarkdownTextBlock = (block) => {
+  return block.type === "markdown-text";
+};
+const blocksToPlainText = (blocks) => blocks.filter(isMarkdownTextBlock).map((block) => block.text).join("\n\n---\n\n");
+const isActionInputFormBlock = (block) => {
+  return block.type === "action-input-form";
+};
+
+export { actionButtonsBlock, actionInputFormBlock, blocksToPlainText, isActionInputFormBlock, isMarkdownTextBlock, markdownTextBlock };

package/dist/esm/components/chat-search/helpers/buildConversationContext.js

@@ -0,0 +1,11 @@
+import { blocksToPlainText } from '../blocks/utils.js';
+
+const buildConversationContext = (answers, conversationId) => ({
+  conversationId,
+  messages: answers.map((a) => ({
+    question: a.question,
+    answer: blocksToPlainText(a.blocks)
+  }))
+});
+
+export { buildConversationContext };

package/dist/esm/components/chat-search/helpers/cancelStreamReader.js

@@ -0,0 +1,21 @@
+function cancelStreamReader(reader) {
+  try {
+    void reader.cancel().catch((error) => {
+      console.warn("Error cancelling stream reader:", error);
+    });
+    try {
+      reader.releaseLock();
+    } catch (releaseError) {
+      console.warn("Error releasing stream reader lock:", releaseError);
+    }
+  } catch (error) {
+    console.warn("Error cancelling stream reader:", error);
+    try {
+      reader.releaseLock();
+    } catch (releaseError) {
+      console.warn("Error releasing stream reader lock:", releaseError);
+    }
+  }
+}
+
+export { cancelStreamReader };

package/dist/esm/components/chat-search/helpers/excuteClientAction.js

@@ -0,0 +1,32 @@
+const clientExecutionEventType = "CLIENT_EXECUTION";
+const clientExecutionResultEventType = "CLIENT_EXECUTION_RESULT";
+const executeClientAction = (key, inputs) => {
+  return new Promise((resolve) => {
+    const messageId = crypto.randomUUID();
+    const handleResponse = (event) => {
+      if (event.data.messageId === messageId && event.data.type === clientExecutionResultEventType) {
+        window.removeEventListener("message", handleResponse);
+        resolve(event.data.result);
+      }
+    };
+    window.addEventListener("message", handleResponse);
+    window.parent.postMessage(
+      {
+        type: clientExecutionEventType,
+        messageId,
+        actionKey: key,
+        inputs
+      },
+      "*"
+    );
+    setTimeout(() => {
+      window.removeEventListener("message", handleResponse);
+      resolve({
+        success: false,
+        reason: `Client Action handler with key ${key} timed out`
+      });
+    }, 5e3);
+  });
+};
+
+export { executeClientAction };

package/dist/esm/components/chat-search/helpers/initialAiMessage.js

@@ -0,0 +1,4 @@
+const shouldShowInitialGreeting = (message, isLoadedConversation) => Boolean(message) && !isLoadedConversation;
+const shouldUseConversationLayout = (message, conversationId, answerCount) => Boolean(message) && !conversationId && answerCount === 0;
+
+export { shouldShowInitialGreeting, shouldUseConversationLayout };

package/dist/esm/components/chat-search/helpers/nextBestActions.js

@@ -0,0 +1,97 @@
+import { ActionType, NextBestActionType } from '../types.js';
+import { preChatFormForWidget } from './preChatFormForWidget.js';
+
+const getActionMapping = (action) => {
+  const actionMapping = {
+    [ActionType.CallPhone]: {
+      type: NextBestActionType.Phone,
+      icon: "Phone",
+      getValue: (a) => a.action?.options?.phoneNumber || a.id,
+      getLabel: (a) => a.action?.options?.title || a.type
+    },
+    [ActionType.SendEmail]: {
+      type: NextBestActionType.Email,
+      icon: "EnvelopeSimple",
+      getValue: (a) => a.action?.options?.to || a.id,
+      getLabel: (a) => a.action?.options?.title || a.type
+    },
+    [ActionType.OpenUrl]: {
+      type: NextBestActionType.Link,
+      icon: "Link",
+      getValue: (a) => a.action?.options?.url || a.id,
+      getLabel: (a) => a.action?.options?.title || a.type
+    },
+    [ActionType.RunCallback]: {
+      type: NextBestActionType.Callback,
+      icon: "Sparkle",
+      getValue: (a) => {
+        return JSON.stringify({
+          actionId: a.id,
+          searchIntentId: a.searchIntentId
+        });
+      },
+      getLabel: (a) => a.action?.options?.title || "Run Action"
+    },
+    [ActionType.LaunchZendeskChat]: {
+      type: NextBestActionType.ZendeskChat,
+      icon: "ChatCircleDots",
+      getValue: (a) => a.action?.options?.embedKey || a.id,
+      getLabel: (a) => a.action?.options?.title || "Chat with us"
+    },
+    [ActionType.LaunchZendeskMessenger]: {
+      type: NextBestActionType.ZendeskMessenger,
+      icon: "ChatCircleDots",
+      getValue: (a) => a.action?.options?.embedKey || a.id,
+      getLabel: (a) => a.action?.options?.title || "Chat with us"
+    },
+    [ActionType.LaunchIntercomChat]: {
+      type: NextBestActionType.IntercomChat,
+      icon: "ChatCircleDots",
+      getValue: (a) => a.action?.options?.appId || a.id,
+      getLabel: (a) => a.action?.options?.title || "Chat with us"
+    },
+    [ActionType.LaunchFreshdesk]: {
+      type: NextBestActionType.Freshdesk,
+      icon: "ChatCircleDots",
+      getValue: (a) => a.action?.options?.token || a.id,
+      getLabel: (a) => a.action?.options?.title || "Chat with us"
+    },
+    [ActionType.LaunchSupportTicketForm]: {
+      type: NextBestActionType.Link,
+      icon: "Notepad",
+      getValue: (a) => a.action?.options?.formUrl || a.id,
+      getLabel: (a) => a.action?.options?.title || "Submit a ticket"
+    },
+    [ActionType.LaunchZendeskSunshineChat]: {
+      type: NextBestActionType.ZendeskSunshineChat,
+      icon: "CalendarBlank",
+      getValue: (a) => {
+        return JSON.stringify({
+          actionId: a.id,
+          enableSupportTicket: Boolean(a.action?.options?.enableSupportTicket),
+          preChatForm: preChatFormForWidget(a.action?.options?.preChatForm)
+        });
+      },
+      getLabel: (a) => a.action?.options?.title || "Speak to an expert"
+    },
+    [ActionType.LaunchWebhookHandoff]: {
+      type: NextBestActionType.WebhookHandoff,
+      icon: "CalendarBlank",
+      getValue: (a) => {
+        return JSON.stringify({
+          actionId: a.id
+        });
+      },
+      getLabel: (a) => a.action?.options?.title || "Talk to a human"
+    }
+  };
+  const mapping = actionMapping[action.type] || {
+    type: NextBestActionType.Link,
+    icon: "Link",
+    getValue: (a) => a.action?.options?.url || a.id,
+    getLabel: (a) => a.action?.options?.title || a.type
+  };
+  return mapping;
+};
+
+export { getActionMapping };

package/dist/esm/components/chat-search/helpers/preChatFormForWidget.js

@@ -0,0 +1,20 @@
+const FIELD_TYPES = ["text", "textarea", "email"];
+function preChatFormForWidget(value) {
+  if (!Array.isArray(value)) return [];
+  const fields = [];
+  for (const item of value) {
+    if (fields.length === 50) break;
+    if (!item || typeof item.id !== "string") continue;
+    if (!FIELD_TYPES.includes(item.type)) continue;
+    if (fields.some((field) => field.id === item.id)) continue;
+    fields.push({
+      id: item.id,
+      label: typeof item.label === "string" && item.label && item.label !== item.id ? item.label : "",
+      type: item.type,
+      ...typeof item.helpText === "string" && item.helpText ? { helpText: item.helpText } : {}
+    });
+  }
+  return fields;
+}
+
+export { preChatFormForWidget };

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

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+import { cssVar, getLuminance } from 'polished';
+import { useDarkMode } from './useDarkMode.js';
+
+const useAccessibleColor = (primaryColorVar, primaryForegroundVar) => {
+  const [foregroundColor, setForegroundColor] = useState(`var(${primaryForegroundVar})`);
+  const isDarkMode = useDarkMode();
+  useEffect(() => {
+    const primaryColor = cssVar(primaryColorVar);
+    const primaryForeground = cssVar(primaryForegroundVar);
+    if (primaryColor && primaryForeground) {
+      const luminance = getLuminance(primaryColor.toString());
+      if (luminance <= 0.5) {
+        setForegroundColor(isDarkMode ? `var(--bfc-ring)` : `var(${primaryColorVar})`);
+      } else {
+        setForegroundColor(isDarkMode ? `var(${primaryColorVar})` : `var(${primaryForegroundVar})`);
+      }
+    }
+  }, [primaryColorVar, primaryForegroundVar, isDarkMode]);
+  return foregroundColor;
+};
+
+export { useAccessibleColor };