@brainfish-ai/components 0.18.4-alpha.6 → 0.18.4

package/dist/esm/components/convos.js

@@ -0,0 +1,602 @@
+import React__default, { useState, useEffect, useRef } from 'react';
+import { intlFormatDistance } from 'date-fns';
+import { Circle, ArrowSquareOut, CheckCircle, XCircle, ListMagnifyingGlass, UserCircle, UserFocus } from '@phosphor-icons/react';
+import { Badge } from './ui/badge.js';
+import { c as cn } from '../chunks/utils.Cwtlq8dh.js';
+import { F as FormattedMessage } from '../chunks/FormattedMessage.ieoe4jPf.js';
+import { Spinner } from './ui/spinner.js';
+import { Button } from './ui/button.js';
+import { useForm, Controller } from 'react-hook-form';
+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 { DivButton } from './ui/div-button.js';
+import { ScrollArea } from './ui/scroll-area.js';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './ui/sheet.js';
+import { G as GeneratingStar } from '../chunks/generating-star.CozjECmM.js';
+import { Item, ItemHeader, ItemTitle, ItemContent, ItemDescription } from './ui/item.js';
+import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion.js';
+import { createId } from '@paralleldrive/cuid2';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './ui/table.js';
+import { d as dark } from '../chunks/dark.Cl9Z44CU.js';
+import '../global.css';import '../convos.css';/* empty css                        */
+import '@radix-ui/react-collapsible';
+import './ui/dropdown-menu.js';
+import './ui/switch.js';
+import './ui/input.js';
+import './ui/popover.js';
+import './ui/command.js';
+import './ui/dialog.js';
+import './ui/card.js';
+import './ui/progress.js';
+import './ui/alert-dialog.js';
+import './ui/alert.js';
+import './ui/button-group.js';
+import './ui/calendar.js';
+import './ui/icon.js';
+import './ui/separator.js';
+
+const StatusBadge = React__default.forwardRef(({ className, suffix, children, ...props }, ref) => {
+  return /* @__PURE__ */ React__default.createElement("div", { ref, className: cn("flex items-center gap-1 rounded-md p-1", suffix && "bg-dark-300", className) }, /* @__PURE__ */ React__default.createElement(Badge, { ...props }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React__default.createElement(Circle, { weight: "fill", size: 8, className: "!size-2" }), children)), suffix && /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-default" }, suffix));
+});
+StatusBadge.displayName = "StatusBadge";
+
+function AnswerDiagnosticsSection({ messageId }) {
+  const { fetchAnswerDiagnostics } = useConvosContext();
+  const [answerDiagnostics, setAnswerDiagnostics] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  useEffect(() => {
+    void fetchAnswerDiagnostics(messageId).then((diagnostics) => setAnswerDiagnostics(diagnostics)).finally(() => setIsLoading(false));
+  }, [fetchAnswerDiagnostics, messageId]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-4 px-4 flex-shrink-0 bg-surface", "data-name": "discard-dialog-answer-diagnostic" }, isLoading ? /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center h-full" }, /* @__PURE__ */ React__default.createElement(Spinner, null)) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, answerDiagnostics && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("dl", { className: "grid grid-cols-[1fr_2fr] grid-rows-2 gap-5" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "heading-xs" }, "Confidence"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-sm" }, answerDiagnostics.confidence_score)), answerDiagnostics.answer_generation_type && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "heading-xs" }, "Answer Type"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-sm" }, answerDiagnostics.answer_generation_type)), answerDiagnostics.query_context_relevance && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "heading-xs" }, "Relevance"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-sm" }, answerDiagnostics.query_context_relevance)), answerDiagnostics.context_sufficiency && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "heading-xs" }, "Context"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-sm" }, answerDiagnostics.context_sufficiency))), answerDiagnostics.confidence_justification && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2", "data-name": "diagnostic-justification" }, /* @__PURE__ */ React__default.createElement("span", { className: "heading-xs" }, "Justification"), /* @__PURE__ */ React__default.createElement("p", { className: "text-sm my-0" }, answerDiagnostics.confidence_justification)), answerDiagnostics.evidence_from_context && answerDiagnostics.evidence_from_context.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2", "data-name": "diagnostic-evidence" }, /* @__PURE__ */ React__default.createElement("span", { className: "heading-xs" }, "Evidence (from Knowledge Base)"), answerDiagnostics.evidence_from_context.map((evidence, index) => /* @__PURE__ */ React__default.createElement("div", { key: index, className: "flex flex-col gap-1" }, evidence.supporting_quote && /* @__PURE__ */ React__default.createElement("p", { className: "text-sm my-0" }, evidence.supporting_quote), evidence.url && /* @__PURE__ */ React__default.createElement(Button, { variant: "link", size: "sm", className: "flex gap-1 text-sm self-end items-center", asChild: true }, /* @__PURE__ */ React__default.createElement("a", { href: evidence.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React__default.createElement("span", null, "Source"), /* @__PURE__ */ React__default.createElement(ArrowSquareOut, { size: 16 })))))))));
+}
+
+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: "shadowSurface",
+      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: "shadowSurface",
+      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: "shadow", size: "sm", disabled: isSubmitting }, isSubmitting ? "Submitting..." : "Submit")))
+    )
+  ));
+}
+
+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 }))
+  ));
+}
+
+const ConfidenceBadge = ({ score }) => {
+  const formattedScore = `${score}%`;
+  if (!score || score > 100) {
+    return /* @__PURE__ */ React__default.createElement(Badge, { variant: "disabled" }, "N/A");
+  } else if (score >= 80) {
+    return /* @__PURE__ */ React__default.createElement(Badge, { variant: "success" }, formattedScore);
+  } else if (score >= 40 && score < 80) {
+    return /* @__PURE__ */ React__default.createElement(Badge, { variant: "warning" }, formattedScore);
+  } else {
+    return /* @__PURE__ */ React__default.createElement(Badge, { variant: "disabled" }, "N/A");
+  }
+};
+
+function formatDate(date, locale) {
+  const defaultLocale = "en-US";
+  if (!locale) {
+    if (typeof navigator !== "undefined") {
+      locale = navigator.language;
+    } else {
+      locale = defaultLocale;
+    }
+  }
+  return date.toLocaleDateString(locale, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true
+  });
+}
+
+var MessageType = /* @__PURE__ */ ((MessageType2) => {
+  MessageType2["ACTION"] = "action";
+  MessageType2["FEEDBACK"] = "feedback";
+  MessageType2["QUESTION"] = "question";
+  MessageType2["ANSWER"] = "answer";
+  return MessageType2;
+})(MessageType || {});
+var Feedback = /* @__PURE__ */ ((Feedback2) => {
+  Feedback2["Positive"] = "positive";
+  Feedback2["Negative"] = "negative";
+  return Feedback2;
+})(Feedback || {});
+const isAIAnswer = (msg) => msg.type === "answer" /* ANSWER */;
+const isUserQuestion = (msg) => msg.type === "question" /* QUESTION */;
+const isFeedback = (msg) => msg.type === "feedback" /* FEEDBACK */;
+const isAction = (msg) => msg.type === "action" /* ACTION */;
+function Message(props) {
+  const { id, content, timestamp, locale: localeOverride, isFeedbackDialogOpen, onFeedbackDialogChange } = props;
+  const { locale: contextLocale } = useConvosContext();
+  const locale = localeOverride || contextLocale;
+  const formattedDate = formatDate(timestamp, locale);
+  if (isAIAnswer(props)) {
+    const { relatedArticles, discarded, discardedMeta, confidenceScore } = props;
+    return /* @__PURE__ */ React__default.createElement("li", { className: "relative before-line after-line list-none" }, /* @__PURE__ */ React__default.createElement(Item, { className: "message-item" }, /* @__PURE__ */ React__default.createElement(ItemHeader, { className: "justify-start gap-0" }, /* @__PURE__ */ React__default.createElement(GeneratingStar, { variant: "gradient", className: "relative -left-[6px]" }), /* @__PURE__ */ React__default.createElement(ItemTitle, { className: "text-xs font-bold" }, `Generated answer ${discarded ? "(Discarded)" : ""}`)), /* @__PURE__ */ React__default.createElement(
+      ItemContent,
+      {
+        className: cn("message-ai-content", {
+          "py-6": !relatedArticles?.length,
+          "pt-6 pb-0": relatedArticles?.length
+        })
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "message-content-wrapper" }, /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content } }), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2 justify-between mt-2 items-center" }, /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp" }, formattedDate), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, confidenceScore && /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(DivButton, { variant: "outline", size: "sm", className: "text-xs p-1 h-auto" }, confidenceScore)), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, "Answer score: ", confidenceScore))), /* @__PURE__ */ React__default.createElement(
+        FeedbackDialog,
+        {
+          id,
+          discarded,
+          discardedMeta,
+          open: isFeedbackDialogOpen,
+          onOpenChange: onFeedbackDialogChange
+        }
+      )))),
+      !!relatedArticles?.length && /* @__PURE__ */ React__default.createElement(Accordion, { type: "single", collapsible: true, className: "p-0 custom-dashed-border-t-dark-300 w-full" }, /* @__PURE__ */ React__default.createElement(AccordionItem, { value: "related-articles" }, /* @__PURE__ */ React__default.createElement(AccordionTrigger, { className: "px-6" }, "Related articles"), /* @__PURE__ */ React__default.createElement(AccordionContent, null, /* @__PURE__ */ React__default.createElement("ul", { className: "message-article-list" }, relatedArticles.map((article) => /* @__PURE__ */ React__default.createElement(
+        "li",
+        {
+          key: article.id,
+          className: "grid gap-2 grid-cols-[auto_1fr] items-center justify-items-start"
+        },
+        /* @__PURE__ */ React__default.createElement(ConfidenceBadge, { score: Math.round(article.score * 100) }),
+        /* @__PURE__ */ React__default.createElement(
+          Button,
+          {
+            variant: "link",
+            size: "xs",
+            asChild: true,
+            className: "flex items-center gap-2 min-w-0 !justify-start w-full"
+          },
+          /* @__PURE__ */ React__default.createElement("a", { href: article.url, target: "_blank", rel: "noopener noreferrer" }, /* @__PURE__ */ React__default.createElement("span", { className: "truncate" }, article.title), /* @__PURE__ */ React__default.createElement(ArrowSquareOut, { className: "size-4 flex-shrink-0", weight: "regular" }))
+        )
+      ))))))
+    )));
+  }
+  const feedback = isFeedback(props) ? props.feedback : null;
+  return /* @__PURE__ */ React__default.createElement("li", { className: "relative list-none before-line--user after-line--user" }, /* @__PURE__ */ React__default.createElement(Item, { className: "message-item" }, /* @__PURE__ */ React__default.createElement(ItemHeader, { className: "basis-0" }, /* @__PURE__ */ React__default.createElement(UserCircle, { weight: "fill", size: 24 })), /* @__PURE__ */ React__default.createElement(ItemContent, { className: "message-user-content" }, isUserQuestion(props) && /* @__PURE__ */ React__default.createElement("div", { className: "message-header" }, /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content } }), /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp" }, formattedDate)), isFeedback(props) && feedback && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "message-header" }, /* @__PURE__ */ React__default.createElement("div", { className: "message-feedback-text" }, feedback === "positive" /* Positive */ ? "Upvoted as helpful" : "Downvoted as not helpful"), /* @__PURE__ */ React__default.createElement("div", { className: "message-meta" }, /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp-simple" }, formattedDate), /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: feedback === "positive" /* Positive */ ? "success" : "destructive" }, feedback === "positive" /* Positive */ ? "Answered" : "Unable to help"))), content && /* @__PURE__ */ React__default.createElement("div", { className: "text-base" }, content)), isAction(props) && /* @__PURE__ */ React__default.createElement("div", { className: "message-header" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-subtle text-sm italic" }, content), /* @__PURE__ */ React__default.createElement("div", { className: "message-meta" }, /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp-simple" }, formattedDate), /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: "warning" }, "Action"))))));
+}
+
+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));
+}
+
+function AttributesDialog({ conversationId, open, onOpenChange, ...args }) {
+  const [attributes, setAttributes] = useState();
+  const [sortedAttributesKeys, setSortedAttributesKeys] = useState();
+  const { fetchAttributes } = useConvosContext();
+  useEffect(() => {
+    void fetchAttributes(conversationId).then((attrs) => {
+      setAttributes(attrs);
+      setSortedAttributesKeys(sortAttributeKeys(attrs));
+    }).catch(() => {
+    });
+  }, [fetchAttributes, conversationId]);
+  if (!attributes?.length) {
+    return null;
+  }
+  return /* @__PURE__ */ React__default.createElement(Sheet, { modal: false, open, onOpenChange, ...args }, /* @__PURE__ */ React__default.createElement(SheetTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(
+    DivButton,
+    {
+      variant: "ghost",
+      size: "icon",
+      className: "size-7 [&_svg]:size-6 text-dark-900",
+      "aria-label": "Open Custom attributes dialog"
+    },
+    /* @__PURE__ */ React__default.createElement(UserFocus, { size: 24 })
+  )), /* @__PURE__ */ React__default.createElement(SheetContent, { className: "space-y-4" }, /* @__PURE__ */ React__default.createElement(SheetHeader, null, /* @__PURE__ */ React__default.createElement(SheetTitle, { className: "heading-sm m-0" }, "Custom attributes"), /* @__PURE__ */ React__default.createElement(SheetDescription, { className: "sr-only" }, "Custom attributes are used to store additional information about the conversation.")), sortedAttributesKeys && /* @__PURE__ */ React__default.createElement(ScrollArea, { className: "h-[calc(100vh-8rem)]" }, " ", /* @__PURE__ */ React__default.createElement(Table, { className: "bg-surface", "data-test-id": "attributes-table" }, /* @__PURE__ */ React__default.createElement(TableHeader, null, /* @__PURE__ */ React__default.createElement(TableRow, null, sortedAttributesKeys.map((key) => /* @__PURE__ */ React__default.createElement(TableHead, { key, className: "capitalize font-bold" }, key)))), /* @__PURE__ */ React__default.createElement(TableBody, null, attributes.map((record) => /* @__PURE__ */ React__default.createElement(TableRow, { key: record?.id ?? createId(), className: "border-none" }, sortedAttributesKeys.map((key) => /* @__PURE__ */ React__default.createElement(TableCell, { key, "data-title": key }, record[key])))))))));
+}
+
+const StreamBadge = React__default.forwardRef(
+  ({ className, streamName, dotColor = "transparent", ...props }, ref) => {
+    return /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        ref,
+        role: "button",
+        className: cn("flex items-center gap-1 rounded-full p-0", className),
+        tabIndex: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Badge, { ...props, className: "bg-surface rounded-full border border-dark-300 text-subtle" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React__default.createElement(
+        Circle,
+        {
+          size: 8,
+          weight: "bold",
+          className: "!size-2 rounded-full",
+          style: { backgroundColor: dotColor },
+          color: dotColor === "transparent" ? dark[300] : "transparent"
+        }
+      ), /* @__PURE__ */ React__default.createElement("span", { className: "max-w-32 truncate inline-block" }, streamName)))
+    )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, streamName));
+  }
+);
+StreamBadge.displayName = "StreamBadge";
+
+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 = intlFormatDistance(timestamp, /* @__PURE__ */ new Date(), { locale, style: "short" });
+  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-300',
+        { "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.slice(1).map((message) => /* @__PURE__ */ React__default.createElement(
+      Message,
+      {
+        key: message.id,
+        ...message,
+        isFeedbackDialogOpen: openDialog === "feedback" && openFeedbackMessageId === message.id,
+        onFeedbackDialogChange: handleDialogChange("feedback", message.id)
+      }
+    ))))
+  );
+}
+
+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 { Convo, Convos, ConvosProvider, Feedback, Message, MessageType, StatusBadge, isAIAnswer, isAction, isFeedback, isUserQuestion, useConvosContext };
+//# sourceMappingURL=convos.js.map