@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/convos/convo.js

@@ -0,0 +1,142 @@
+import React__default, { useState } from 'react';
+import { StatusBadge } from './status-badge.js';
+import { isUserQuestion, Message } from './message.js';
+import { useConvosContext } from './convos.js';
+import { AttributesDialog } from './attributes-dialog.js';
+import { DivButton } from '../ui/div-button.js';
+import { StreamBadge } from './stream-badge.js';
+import { AccordionItem, AccordionTrigger, AccordionContent } from '../ui/accordion.js';
+import { Item, ItemContent, ItemTitle, ItemDescription } from '../ui/item.js';
+import { cn } from '../../lib/utils.js';
+import { formatDistance } from '../../lib/formatDate.js';
+import '../ui/alert-dialog.js';
+import '../ui/alert.js';
+import '@radix-ui/react-avatar';
+import '../ui/badge.js';
+import '../ui/button-group.js';
+import '../ui/button.js';
+import '../ui/calendar.js';
+import '../ui/card.js';
+import '@radix-ui/react-collapsible';
+import '../ui/command.js';
+import '../ui/dialog.js';
+import '../ui/dropdown-menu.js';
+import '../ui/icon.js';
+import '../ui/input.js';
+import '../ui/label.js';
+import '../ui/popover.js';
+import '../ui/progress.js';
+import '../ui/radio-group.js';
+import 'react-resizable-panels';
+import '../ui/scroll-area.js';
+import '../ui/select.js';
+import '../ui/separator.js';
+import '../ui/sheet.js';
+import '@phosphor-icons/react';
+import '../ui/switch.js';
+import '../ui/tabs.js';
+import '../ui/table.js';
+import '../ui/textarea.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import '../../logos/microsoft-teams-logo.js';
+import '../../logos/slack-logo.js';
+import '../../logos/microsoft-logo.js';
+
+const EnrichedStatusBadge = ({ score, status, statusMessage }) => {
+  return score ? /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(DivButton, { variant: "ghost", size: "sm", className: "p-0 h-[26px]" }, /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: status, suffix: score }, statusMessage))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, "Conversation score: ", score))) : /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: status, suffix: score }, statusMessage);
+};
+function Convo({
+  locale: localeOverride,
+  value: queryId,
+  question,
+  timestamp,
+  location,
+  source,
+  status,
+  statusMessage,
+  hasAttributes,
+  onClick,
+  className,
+  score,
+  ...props
+}) {
+  const { getMessages, isLoading: isLoadingFromContext, locale: contextLocale } = useConvosContext();
+  const [openDialog, setOpenDialog] = useState(null);
+  const [openFeedbackMessageId, setOpenFeedbackMessageId] = useState(null);
+  const handleDialogChange = (dialogType, messageId) => (isOpen) => {
+    if (isOpen) {
+      setOpenDialog(dialogType);
+      if (messageId) setOpenFeedbackMessageId(messageId);
+    } else {
+      setOpenDialog(null);
+      setOpenFeedbackMessageId(null);
+    }
+  };
+  const isAnyDialogOpen = openDialog !== null;
+  const locale = localeOverride || contextLocale;
+  const messages = getMessages(queryId);
+  const isLoading = isLoadingFromContext(queryId);
+  const formattedDateRelative = formatDistance(timestamp, locale);
+  const description = [formattedDateRelative, location].filter(Boolean).join(" • ");
+  const handleAccordionClick = (e) => {
+    if (e.target.closest('[role="dialog"]')) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    onClick?.();
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    AccordionItem,
+    {
+      value: queryId,
+      className: cn(
+        'border border-dark-200 hover:border-dark-300 rounded-lg bg-dark-100 [&[data-state="open"]]:bg-surface [&[data-state="open"]]:border-dark-100',
+        { "shadow-md shadow-dark-300": isAnyDialogOpen },
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(
+      AccordionTrigger,
+      {
+        className: "flex-row-reverse px-4 gap-1 items-center [&[data-state=open]]:px-6",
+        onClick: handleAccordionClick
+      },
+      /* @__PURE__ */ React__default.createElement(Item, { size: "sm", className: "flex-1 p-0 justify-between" }, /* @__PURE__ */ React__default.createElement(ItemContent, { className: "max-w-[400px]" }, /* @__PURE__ */ React__default.createElement(ItemTitle, { className: "text-base text-default" }, question), /* @__PURE__ */ React__default.createElement(ItemDescription, { className: "text-xs text-default flex items-center gap-1" }, description, source && /* @__PURE__ */ React__default.createElement(StreamBadge, { streamName: source.name, dotColor: source.color }))), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-0" }, hasAttributes && /* @__PURE__ */ React__default.createElement(
+        AttributesDialog,
+        {
+          conversationId: queryId,
+          open: openDialog === "attributes",
+          onOpenChange: handleDialogChange("attributes")
+        }
+      ), status && /* @__PURE__ */ React__default.createElement(EnrichedStatusBadge, { score, status, statusMessage })))
+    ),
+    /* @__PURE__ */ React__default.createElement(AccordionContent, { className: "flex flex-col gap-4 text-balance px-5" }, isLoading ? /* @__PURE__ */ React__default.createElement("div", { className: "text-center text-subtle py-4" }, "Loading messages...") : /* @__PURE__ */ React__default.createElement("ul", { className: "list-none space-y-4" }, messages.map((message, idx) => {
+      const userMsg = isUserQuestion(message) ? message : null;
+      const attachments = userMsg?.attachments?.length ? userMsg.attachments : null;
+      if (idx === 0) {
+        return attachments ? /* @__PURE__ */ React__default.createElement(
+          Message,
+          {
+            key: message.id,
+            ...{ ...message, onlyShowAttachments: true },
+            isFeedbackDialogOpen: openDialog === "feedback" && openFeedbackMessageId === message.id,
+            onFeedbackDialogChange: handleDialogChange("feedback", message.id)
+          }
+        ) : null;
+      }
+      return /* @__PURE__ */ React__default.createElement(
+        Message,
+        {
+          key: message.id,
+          ...message,
+          isFeedbackDialogOpen: openDialog === "feedback" && openFeedbackMessageId === message.id,
+          onFeedbackDialogChange: handleDialogChange("feedback", message.id)
+        }
+      );
+    })))
+  );
+}
+
+export { Convo };

package/dist/esm/components/convos/convos.js

@@ -0,0 +1,85 @@
+import React__default from 'react';
+import { Convo } from './convo.js';
+import { Accordion } from '../ui/accordion.js';
+
+const ConvosContext = React__default.createContext(void 0);
+function useConvosContext() {
+  const context = React__default.useContext(ConvosContext);
+  if (context === void 0) {
+    throw new Error("useConvosContext must be used within a ConvosProvider");
+  }
+  return context;
+}
+function ConvosProvider({ children, value }) {
+  return /* @__PURE__ */ React__default.createElement(ConvosContext.Provider, { value }, children);
+}
+function Convos({
+  convos,
+  fetchMessages,
+  fetchAttributes,
+  fetchAnswerDiagnostics,
+  onDiscard,
+  onApprove
+}) {
+  const [messagesMap, setMessagesMap] = React__default.useState({});
+  const [loadingMap, setLoadingMap] = React__default.useState({});
+  const fetchedSetRef = React__default.useRef(/* @__PURE__ */ new Set());
+  const loadingMapRef = React__default.useRef({});
+  const handleFetchMessages = React__default.useCallback(
+    (conversationId) => {
+      if (fetchedSetRef.current.has(conversationId) || loadingMapRef.current[conversationId]) {
+        return;
+      }
+      loadingMapRef.current[conversationId] = true;
+      setLoadingMap((prev) => ({ ...prev, [conversationId]: true }));
+      fetchMessages(conversationId).then((fetchedMessages) => {
+        setMessagesMap((prev) => ({ ...prev, [conversationId]: fetchedMessages }));
+        fetchedSetRef.current.add(conversationId);
+      }).catch(() => {
+      }).finally(() => {
+        delete loadingMapRef.current[conversationId];
+        setLoadingMap((prev) => {
+          const newMap = { ...prev };
+          delete newMap[conversationId];
+          return newMap;
+        });
+      });
+    },
+    [fetchMessages]
+  );
+  const defaultLocale = convos[0]?.locale;
+  const contextValue = React__default.useMemo(
+    () => ({
+      fetchMessages,
+      fetchAttributes,
+      getMessages: (conversationId) => messagesMap[conversationId] || [],
+      isLoading: (conversationId) => loadingMap[conversationId] || false,
+      handleFetchMessages,
+      locale: defaultLocale,
+      fetchAnswerDiagnostics: (messageId) => fetchAnswerDiagnostics(messageId),
+      onDiscard,
+      onApprove
+    }),
+    [
+      fetchMessages,
+      fetchAttributes,
+      messagesMap,
+      loadingMap,
+      handleFetchMessages,
+      defaultLocale,
+      fetchAnswerDiagnostics,
+      onDiscard,
+      onApprove
+    ]
+  );
+  return /* @__PURE__ */ React__default.createElement(ConvosProvider, { value: contextValue }, /* @__PURE__ */ React__default.createElement(Accordion, { type: "single", collapsible: true, className: "w-full space-y-2" }, convos.map((convo) => /* @__PURE__ */ React__default.createElement(
+    Convo,
+    {
+      ...convo,
+      key: convo.value,
+      onClick: () => handleFetchMessages(convo.value)
+    }
+  ))));
+}
+
+export { Convos, ConvosProvider, useConvosContext };

package/dist/esm/components/convos/discard-form.js

@@ -0,0 +1,187 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { useForm, Controller } from 'react-hook-form';
+import { CheckCircle, XCircle } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '../ui/select.js';
+import { Label } from '../ui/label.js';
+import { Textarea } from '../ui/textarea.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { cn } from '../../lib/utils.js';
+
+var DiscardReason = /* @__PURE__ */ ((DiscardReason2) => {
+  DiscardReason2["INCORRECT_ANSWER"] = "incorrect_answer";
+  DiscardReason2["HALLUCINATED_ANSWER"] = "hallucinated_answer";
+  DiscardReason2["OVERSHARING"] = "oversharing";
+  DiscardReason2["WRONG_ARTICLE_SURFACED"] = "wrong_article_surfaced";
+  DiscardReason2["OTHER"] = "other";
+  return DiscardReason2;
+})(DiscardReason || {});
+const DiscardReasonLabels = {
+  ["incorrect_answer" /* INCORRECT_ANSWER */]: "Incorrect answer",
+  ["hallucinated_answer" /* HALLUCINATED_ANSWER */]: "Hallucinated answer",
+  ["oversharing" /* OVERSHARING */]: "Oversharing",
+  ["wrong_article_surfaced" /* WRONG_ARTICLE_SURFACED */]: "Wrong article surfaced",
+  ["other" /* OTHER */]: "Other"
+};
+function DiscardForm({
+  discarded,
+  discardedMeta,
+  onSubmit,
+  onApprove,
+  selectOpenRef,
+  className
+}) {
+  const [isExpanded, setIsExpanded] = useState(discarded ?? false);
+  const [isSelectOpen, setIsSelectOpenState] = useState(false);
+  const [isDiscarded, setIsDiscarded] = useState(discarded);
+  const formRef = useRef(null);
+  useEffect(() => {
+    setIsDiscarded(discarded);
+    if (discarded) setIsExpanded(true);
+  }, [discarded]);
+  const setIsSelectOpen = (open) => {
+    setIsSelectOpenState(open);
+    if (selectOpenRef) selectOpenRef.current.isOpen = open;
+  };
+  useEffect(() => {
+    if (selectOpenRef) {
+      selectOpenRef.current.close = () => setIsSelectOpen(false);
+    }
+  }, [selectOpenRef]);
+  const {
+    control,
+    register,
+    handleSubmit,
+    reset,
+    formState: { isSubmitting }
+  } = useForm({
+    defaultValues: {
+      reason: discardedMeta?.reason,
+      preferredAnswer: discardedMeta?.suggestedAnswer || ""
+    }
+  });
+  useEffect(() => {
+    reset({
+      reason: discardedMeta?.reason,
+      preferredAnswer: discardedMeta?.suggestedAnswer || ""
+    });
+  }, [discardedMeta, reset]);
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.inert = !isExpanded;
+    }
+  }, [isExpanded]);
+  const handleCancel = () => {
+    setIsExpanded(false);
+    setIsSelectOpen(false);
+    reset();
+  };
+  const handleApprove = async () => {
+    try {
+      await onApprove();
+      setIsDiscarded(false);
+      setIsExpanded(false);
+      setIsSelectOpen(false);
+    } catch (error) {
+      console.error("Failed to approve:", error);
+    }
+  };
+  const handleDiscard = async (data) => {
+    try {
+      await onSubmit(data);
+      setIsDiscarded(true);
+      setIsSelectOpen(false);
+    } catch (error) {
+      console.error("Failed to discard:", error);
+    }
+  };
+  const isResolved = isDiscarded !== void 0 && isDiscarded !== null;
+  const showApproveButton = !isResolved || isDiscarded === false;
+  const showDiscardButton = !isResolved || isDiscarded === true;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("space-y-4", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2 px-4" }, showApproveButton && /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "surface",
+      elevation: "shadow",
+      size: "sm",
+      className: cn("text-default !opacity-100", { "bg-green-600 text-dark-100": isDiscarded === false }),
+      disabled: isResolved,
+      onClick: handleApprove
+    },
+    /* @__PURE__ */ React__default.createElement(CheckCircle, null),
+    " ",
+    isDiscarded === false ? "Approved" : "Approve"
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("span", null, "Approve the answer"))), showDiscardButton && /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "surface",
+      elevation: "shadow",
+      size: "sm",
+      className: cn("text-default !opacity-100", { "bg-red-600 text-dark-100": isDiscarded === true }),
+      disabled: isResolved,
+      onClick: () => setIsExpanded(!isExpanded)
+    },
+    /* @__PURE__ */ React__default.createElement(XCircle, null),
+    isDiscarded === true ? "Discarded" : "Discard"
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("span", null, "Discard the answer")))), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "grid transition-[grid-template-rows] duration-300 ease-in-out",
+        isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      )
+    },
+    isDiscarded ? /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: cn("overflow-hidden min-h-0 px-4 bg-dark-200 space-y-4", isExpanded ? "py-4 mb-4" : "py-0"),
+        "data-name": "discard-dialog-reason"
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "reason", className: "text-sm" }, "Reason"), /* @__PURE__ */ React__default.createElement("span", { className: "text-sm block" }, discardedMeta?.reason && DiscardReasonLabels[discardedMeta.reason])),
+      /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "preferredAnswer", className: "text-sm" }, "Preferred answer"), /* @__PURE__ */ React__default.createElement("span", { className: "text-sm block" }, discardedMeta?.suggestedAnswer))
+    ) : /* @__PURE__ */ React__default.createElement(
+      "form",
+      {
+        ref: formRef,
+        onSubmit: handleSubmit(handleDiscard),
+        className: cn(
+          "overflow-hidden min-h-0 px-4 bg-dark-200 transition-all duration-300 ease-in-out",
+          isExpanded ? "py-4 mb-4" : "py-0"
+        )
+      },
+      /* @__PURE__ */ React__default.createElement("fieldset", { className: "space-y-4", "data-name": "discard-dialog-reason" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "reason", className: "heading-xs" }, "Reason"), /* @__PURE__ */ React__default.createElement(
+        Controller,
+        {
+          control,
+          name: "reason",
+          rules: { required: true },
+          render: ({ field }) => /* @__PURE__ */ React__default.createElement(
+            Select,
+            {
+              value: field.value,
+              onValueChange: field.onChange,
+              open: isSelectOpen,
+              onOpenChange: setIsSelectOpen,
+              required: true
+            },
+            /* @__PURE__ */ React__default.createElement(SelectTrigger, { className: "border-dark-300 bg-surface" }, /* @__PURE__ */ React__default.createElement(SelectValue, { placeholder: "Select a reason" })),
+            /* @__PURE__ */ React__default.createElement(SelectContent, null, Object.values(DiscardReason).map((reason) => /* @__PURE__ */ React__default.createElement(SelectItem, { key: reason, value: reason }, DiscardReasonLabels[reason])))
+          )
+        }
+      ), /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-subtle ml-1 hidden" }, "Give your ambient agent a descriptive name that reflects its purpose. This agent will learn from your content to provide personalized assistance.")), /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "preferredAnswer", className: "heading-xs" }, "Preferred answer"), /* @__PURE__ */ React__default.createElement(
+        Textarea,
+        {
+          id: "preferredAnswer",
+          required: true,
+          minLength: 10,
+          placeholder: "Explain what you'd like Brainfish to do next time in this case....",
+          rows: 4,
+          className: "h-52 resize-none bg-surface",
+          ...register("preferredAnswer")
+        }
+      ), /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-subtle ml-1 hidden" }, "Tell Brainfish why this is the incorrect answer.")), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2 !mb-1 justify-end mr-1" }, /* @__PURE__ */ React__default.createElement(Button, { variant: "link", size: "sm", type: "button", onClick: handleCancel }, "Cancel"), /* @__PURE__ */ React__default.createElement(Button, { type: "submit", variant: "default", elevation: "shadow", size: "sm", disabled: isSubmitting }, isSubmitting ? "Submitting..." : "Submit")))
+    )
+  ));
+}
+
+export { DiscardForm, DiscardReason, DiscardReasonLabels };

package/dist/esm/components/convos/empty-convos.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { GeneratingStar } from '../generating-star/generating-star.js';
+
+const EmptyConvos = ({ children }) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col items-center justify-center h-full w-full mt-40 gap-2" }, /* @__PURE__ */ React__default.createElement(GeneratingStar, { className: "size-8", variant: "disabled" }), /* @__PURE__ */ React__default.createElement("div", { className: "text-subtlest text-sm w-96 text-center leading-5" }, children));
+};
+
+export { EmptyConvos };

package/dist/esm/components/convos/feedback-dialog.js

@@ -0,0 +1,61 @@
+import React__default, { useState, useRef } from 'react';
+import { ListMagnifyingGlass } from '@phosphor-icons/react';
+import { AnswerDiagnosticsSection } from './answer-diagnostics.js';
+import { useConvosContext } from './convos.js';
+import { DiscardForm } from './discard-form.js';
+export { DiscardReason } from './discard-form.js';
+import { DivButton } from '../ui/div-button.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../ui/sheet.js';
+
+function FeedbackDialog({
+  id,
+  discarded,
+  discardedMeta,
+  open: externalOpen,
+  onOpenChange: externalOnOpenChange,
+  ...args
+}) {
+  const { onDiscard, onApprove } = useConvosContext();
+  const [internalOpen, setInternalOpen] = useState(false);
+  const selectOpenRef = useRef({ isOpen: false, close: () => {
+  } });
+  const isOpen = externalOpen ?? internalOpen;
+  const setIsOpen = externalOnOpenChange ?? setInternalOpen;
+  const onSubmitForm = async (data) => {
+    await onDiscard(id, data.reason, data.preferredAnswer).then(() => setIsOpen(false));
+  };
+  const handleApprove = async () => {
+    await onApprove(id);
+  };
+  return /* @__PURE__ */ React__default.createElement(Sheet, { modal: false, open: isOpen, onOpenChange: setIsOpen, ...args }, /* @__PURE__ */ React__default.createElement(SheetTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(DivButton, { variant: "shadowSurface", size: "sm", "aria-label": "Inspect answer information" }, /* @__PURE__ */ React__default.createElement(ListMagnifyingGlass, { className: "text-dark-600" }), " Inspect")), /* @__PURE__ */ React__default.createElement(
+    SheetContent,
+    {
+      className: "space-y-4 px-0",
+      onEscapeKeyDown: (e) => {
+        if (selectOpenRef.current.isOpen) {
+          e.preventDefault();
+          selectOpenRef.current.close();
+        }
+      },
+      onInteractOutside: (e) => {
+        if (selectOpenRef.current.isOpen) {
+          e.preventDefault();
+        }
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(SheetHeader, { className: "px-4" }, /* @__PURE__ */ React__default.createElement(SheetTitle, { className: "heading-sm m-0" }, "Answer information"), /* @__PURE__ */ React__default.createElement(SheetDescription, { className: "sr-only" }, "Shows answer diagnostics and allows you to provide feedback.")),
+    /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "h-[calc(100vh-4rem)] pb-4" }, /* @__PURE__ */ React__default.createElement(
+      DiscardForm,
+      {
+        discarded,
+        discardedMeta,
+        onSubmit: onSubmitForm,
+        onApprove: handleApprove,
+        selectOpenRef
+      }
+    ), /* @__PURE__ */ React__default.createElement(AnswerDiagnosticsSection, { messageId: id }))
+  ));
+}
+
+export { FeedbackDialog };