@brainfish-ai/components 0.18.0 → 0.18.4-alpha.2

package/dist/esm/components/convos.js

@@ -1,24 +1,43 @@
-import React__default, { useState, useEffect } from 'react';
-import { Circle, ArrowSquareOut, ThumbsDown, ThumbsUp, UserCircle, UserFocus } from '@phosphor-icons/react';
+import React__default, { useState, useEffect, useRef } from 'react';
+import { Circle, ArrowSquareOut, ThumbsUp, ThumbsDown, Info, UserCircle, UserFocus } from '@phosphor-icons/react';
 import { Badge } from './ui/badge.js';
-import { F as FormattedMessage } from '../chunks/FormattedMessage.C2OwhDXi.js';
-import { useForm, Controller } from 'react-hook-form';
-import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from './ui/dialog.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 { ButtonGroup } from '../componentns/ui/button-group.js';
 import { Textarea } from './ui/textarea.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from './ui/tooltip.js';
+import { L as Love } from '../chunks/love.o_d3F-ZG.js';
+import { DivButton } from './ui/div-button.js';
 import { ScrollArea } from './ui/scroll-area.js';
-import { Spinner } from './ui/spinner.js';
-import { c as cn } from '../chunks/utils.Cwtlq8dh.js';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from './ui/sheet.js';
 import { G as GeneratingStar } from '../chunks/generating-star.COkD0gHd.js';
 import { Item, ItemHeader, ItemTitle, ItemContent, ItemDescription } from './ui/item.js';
 import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './ui/accordion.js';
-import { Table, TableBody, TableRow, TableCell } from './ui/table.js';
+import { createId } from '@paralleldrive/cuid2';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from './ui/table.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 '../componentns/ui/button-group.js';
+import './ui/calendar.js';
+import './ui/icon.js';
+import './ui/separator.js';
 
-import '../convos.css';function StatusBadge({ ...props }) {
-  return /* @__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" }), props.children));
+function StatusBadge({ className, suffix, children, ...props }) {
+  return /* @__PURE__ */ React__default.createElement("div", { 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));
 }
 
 function AnswerDiagnosticsSection({ messageId }) {
@@ -28,41 +47,43 @@ function AnswerDiagnosticsSection({ messageId }) {
   useEffect(() => {
     void fetchAnswerDiagnostics(messageId).then((diagnostics) => setAnswerDiagnostics(diagnostics)).finally(() => setIsLoading(false));
   }, [fetchAnswerDiagnostics, messageId]);
-  return /* @__PURE__ */ React__default.createElement(
-    ScrollArea,
-    {
-      type: "always",
-      className: "h-[440px] border border-dark-300 rounded-lg",
-      "data-name": "discard-dialog-answer-diagnostic"
-    },
-    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-4 p-4 flex-shrink-0 bg-surface" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-lg font-medium my-0" }, "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: "font-medium" }, "Confidence"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-xs" }, answerDiagnostics.confidence_score)), answerDiagnostics.answer_generation_type && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "font-medium" }, "Answer Type"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-xs" }, 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: "font-medium" }, "Relevance"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-xs" }, answerDiagnostics.query_context_relevance)), answerDiagnostics.context_sufficiency && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React__default.createElement("dt", { className: "font-medium" }, "Context"), /* @__PURE__ */ React__default.createElement("dd", { className: "text-xs" }, 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: "font-medium" }, "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: "font-medium" }, "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(
-      "a",
-      {
-        href: evidence.url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: "flex gap-1 text-sm self-end items-center"
-      },
-      /* @__PURE__ */ React__default.createElement("span", null, "Source"),
-      /* @__PURE__ */ React__default.createElement(ArrowSquareOut, { size: 16 })
-    )))))))
-  );
+  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 })))))))));
 }
 
-function DiscardDialog({
-  id,
+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,
-  className,
-  open: externalOpen,
-  onOpenChange: externalOnOpenChange,
-  ...args
+  onSubmit,
+  onApprove,
+  selectOpenRef,
+  className
 }) {
-  const { onDiscard, onApprove } = useConvosContext();
-  const [isSelectOpen, setIsSelectOpen] = useState(false);
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isOpen = externalOpen ?? internalOpen;
-  const setIsOpen = externalOnOpenChange ?? setInternalOpen;
+  const [isExpanded, setIsExpanded] = useState(discarded ?? false);
+  const [isSelectOpen, setIsSelectOpenState] = useState(false);
+  const formRef = useRef(null);
+  const [showLove, setShowLove] = useState(false);
+  const setIsSelectOpen = (open) => {
+    setIsSelectOpenState(open);
+    if (selectOpenRef) selectOpenRef.current.isOpen = open;
+  };
+  if (selectOpenRef) {
+    selectOpenRef.current.close = () => setIsSelectOpen(false);
+  }
   const {
     control,
     register,
@@ -81,73 +102,158 @@ function DiscardDialog({
       preferredAnswer: discardedMeta?.suggestedAnswer || ""
     });
   }, [discardedMeta, reset]);
-  const onSubmitForm = async (data) => {
-    await onDiscard(id, data.reason, data.preferredAnswer).then(() => setIsOpen(false));
+  useEffect(() => {
+    if (formRef.current) {
+      formRef.current.inert = !isExpanded;
+    }
+  }, [isExpanded]);
+  const handleCancel = () => {
+    setIsExpanded(false);
+    setIsSelectOpen(false);
+    reset();
+  };
+  const handleApprove = () => {
+    setShowLove(true);
+    setTimeout(() => setShowLove(false), 2e3);
+    onApprove();
   };
-  return /* @__PURE__ */ React__default.createElement(ButtonGroup, { className }, /* @__PURE__ */ React__default.createElement(Dialog, { ...args, open: isOpen, onOpenChange: setIsOpen }, /* @__PURE__ */ React__default.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+  const isResolved = discarded !== void 0 && discarded !== null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("space-y-4", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-2 px-4" }, /* @__PURE__ */ React__default.createElement(Love, { doAnimation: showLove }, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
     Button,
     {
       variant: "shadow",
       className: cn(
-        "size-7",
-        discarded ? "bg-destructive text-destructive !opacity-100" : "bg-surface text-dark-800"
+        "size-8 text-default !opacity-100",
+        { "bg-surface": !isResolved },
+        { "bg-dark-300": discarded === true },
+        { "bg-green-600 text-dark-100": discarded === false }
       ),
-      size: "icon"
+      size: "icon",
+      disabled: isResolved,
+      onClick: handleApprove
+    },
+    /* @__PURE__ */ React__default.createElement(ThumbsUp, null)
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("span", null, "Approve the answer")))), /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "shadow",
+      className: cn(
+        "size-8 text-default !opacity-100",
+        { "bg-surface": !isResolved },
+        { "bg-dark-300": discarded === false },
+        { "bg-red-600 text-dark-100": discarded === true }
+      ),
+      size: "icon",
+      disabled: isResolved,
+      onClick: () => setIsExpanded(!isExpanded)
+    },
+    /* @__PURE__ */ React__default.createElement(ThumbsDown, null)
+  )), /* @__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]"
+      )
     },
-    /* @__PURE__ */ React__default.createElement(ThumbsDown, { weight: discarded ? "fill" : "regular" })
-  )), /* @__PURE__ */ React__default.createElement(
-    DialogContent,
+    discarded ? /* @__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(onSubmit),
+        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 = () => onApprove(id);
+  return /* @__PURE__ */ React__default.createElement(Sheet, { modal: false, open: isOpen, onOpenChange: setIsOpen, ...args }, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(SheetTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(DivButton, { variant: "ghost", className: "size-7 [&_svg]:size-6 text-dark-600", size: "icon" }, /* @__PURE__ */ React__default.createElement(Info, null)))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, "Answer information"))), /* @__PURE__ */ React__default.createElement(
+    SheetContent,
     {
-      className: "min-w-[826px] bg-dark-100 pt-0 pb-4",
+      className: "space-y-4 px-0",
       onEscapeKeyDown: (e) => {
-        if (isSelectOpen) {
+        if (selectOpenRef.current.isOpen) {
+          e.preventDefault();
+          selectOpenRef.current.close();
+        }
+      },
+      onInteractOutside: (e) => {
+        if (selectOpenRef.current.isOpen) {
           e.preventDefault();
-          setIsSelectOpen(false);
         }
       }
     },
-    /* @__PURE__ */ React__default.createElement(DialogHeader, { className: "py-6" }, /* @__PURE__ */ React__default.createElement(DialogTitle, { className: "heading-xxl !text-2xl" }, "Answer feedback")),
-    /* @__PURE__ */ React__default.createElement("form", { onSubmit: handleSubmit(onSubmitForm) }, /* @__PURE__ */ React__default.createElement("div", { className: "grid grid-cols-[1fr_2fr] gap-6 pb-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "w-[340px] p-4", "data-name": "discard-dialog-reason" }, /* @__PURE__ */ React__default.createElement("fieldset", { className: "space-y-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "reason", className: "text-sm" }, "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, /* @__PURE__ */ React__default.createElement(SelectItem, { value: "incorrect_answer" /* INCORRECT_ANSWER */ }, "Incorrect answer"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "hallucinated_answer" /* HALLUCINATED_ANSWER */ }, "Hallucinated answer"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "oversharing" /* OVERSHARING */ }, "Oversharing"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "wrong_article_surfaced" /* WRONG_ARTICLE_SURFACED */ }, "Wrong article surfaced"), /* @__PURE__ */ React__default.createElement(SelectItem, { value: "other" /* OTHER */ }, "Other"))
-        )
-      }
-    )), /* @__PURE__ */ React__default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React__default.createElement(Label, { htmlFor: "preferredAnswer", className: "text-base font-normal" }, "Preferred answer"), /* @__PURE__ */ React__default.createElement(
-      Textarea,
+    /* @__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,
       {
-        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")
+        discarded,
+        discardedMeta,
+        onSubmit: onSubmitForm,
+        onApprove: handleApprove,
+        selectOpenRef
       }
-    ), /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-dark-1000 hidden ml-1" }, 'Tell Brainfish why this is the incorrect answer. You can use "@" to reference the right Knowledge Article.')))), /* @__PURE__ */ React__default.createElement(AnswerDiagnosticsSection, { messageId: id })), /* @__PURE__ */ React__default.createElement(DialogFooter, { className: "py-6" }, /* @__PURE__ */ React__default.createElement(DialogClose, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "link", size: "sm", type: "button" }, "Cancel")), /* @__PURE__ */ React__default.createElement(Button, { type: "submit", variant: "shadow", size: "sm", disabled: isSubmitting }, isSubmitting ? "Submitting..." : "Submit")))
-  )), /* @__PURE__ */ React__default.createElement(
-    Button,
-    {
-      variant: "shadow",
-      className: cn("bg-surface size-7 text-dark-800", { "!opacity-100 bg-dark-300": discarded }),
-      size: "icon",
-      disabled: discarded,
-      onClick: () => onApprove(id)
-    },
-    /* @__PURE__ */ React__default.createElement(ThumbsUp, null)
+    ), /* @__PURE__ */ React__default.createElement(AnswerDiagnosticsSection, { messageId: id }))
   ));
 }
 
@@ -182,23 +288,18 @@ var Feedback = /* @__PURE__ */ ((Feedback2) => {
   Feedback2["Negative"] = "negative";
   return Feedback2;
 })(Feedback || {});
-function Message({
-  id,
-  type,
-  role,
-  content,
-  relatedArticles,
-  feedback,
-  timestamp,
-  locale: localeOverride,
-  discarded,
-  discardedMeta
-}) {
+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 } = props;
   const { locale: contextLocale } = useConvosContext();
   const locale = localeOverride || contextLocale;
   const formattedDate = formatDate(timestamp, locale);
-  if (role === "ai") {
-    return /* @__PURE__ */ React__default.createElement("li", { className: "relative before-line after-line" }, /* @__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")), /* @__PURE__ */ React__default.createElement(
+  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", {
@@ -206,16 +307,7 @@ function Message({
           "pt-6 pb-0": relatedArticles?.length
         })
       },
-      /* @__PURE__ */ React__default.createElement(
-        DiscardDialog,
-        {
-          id,
-          discarded,
-          discardedMeta,
-          className: "absolute -top-4 right-5"
-        }
-      ),
-      /* @__PURE__ */ React__default.createElement("div", { className: "message-content-wrapper" }, /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content } }), /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp float-right mt-2" }, formattedDate)),
+      /* @__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-end mt-2 items-center" }, /* @__PURE__ */ React__default.createElement(FeedbackDialog, { id, discarded, discardedMeta }), 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("span", { className: "message-timestamp" }, formattedDate))),
       !!relatedArticles?.length && /* @__PURE__ */ React__default.createElement(Accordion, { type: "single", collapsible: true, className: "p-0 custom-dashed-border-t-dark-300" }, /* @__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: "message-meta" }, /* @__PURE__ */ React__default.createElement(Badge, { variant: "warning" }, Math.round(article.score * 100), "%"), /* @__PURE__ */ React__default.createElement(
         "a",
         {
@@ -229,50 +321,46 @@ function Message({
       )))))))
     )));
   }
-  return /* @__PURE__ */ React__default.createElement("li", null, /* @__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" }, type === "question" /* QUESTION */ && /* @__PURE__ */ React__default.createElement("div", { className: "message-header" }, /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content } }), /* @__PURE__ */ React__default.createElement("span", { className: "message-timestamp" }, formattedDate)), type === "feedback" /* 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)), type === "action" /* ACTION */ && /* @__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"))))));
+  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 groupAttributesByKey(attributes) {
-  return attributes.reduce(
-    (acc, attr) => {
-      Object.entries(attr).forEach(([key, value]) => {
-        if (!acc[key]) {
-          acc[key] = [];
-        }
-        acc[key].push(value);
-      });
-      return acc;
-    },
-    {}
-  );
+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, ...args }) {
   const [attributes, setAttributes] = useState();
+  const [sortedAttributesKeys, setSortedAttributesKeys] = useState();
   const { fetchAttributes } = useConvosContext();
   useEffect(() => {
-    void fetchAttributes(conversationId).then((attrs) => setAttributes(attrs)).catch(() => {
+    void fetchAttributes(conversationId).then((attrs) => {
+      setAttributes(attrs);
+      setSortedAttributesKeys(sortAttributeKeys(attrs));
+    }).catch(() => {
     });
   }, [fetchAttributes, conversationId]);
   if (!attributes?.length) {
     return null;
   }
-  const groupedAttributes = groupAttributesByKey(attributes);
-  return /* @__PURE__ */ React__default.createElement(Dialog, { ...args }, /* @__PURE__ */ React__default.createElement(DialogTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
-    Button,
+  return /* @__PURE__ */ React__default.createElement(Sheet, { modal: false, ...args }, /* @__PURE__ */ React__default.createElement(SheetTrigger, { asChild: true, onClick: (e) => e.stopPropagation(), onKeyUp: (e) => e.stopPropagation() }, /* @__PURE__ */ React__default.createElement(
+    DivButton,
     {
       variant: "ghost",
-      className: cn("size-7"),
       size: "icon",
-      onClick: (e) => {
-        e.stopPropagation();
-      },
-      onKeyUp: (e) => {
-        e.stopPropagation();
-      }
+      className: "size-7 [&_svg]:size-6 text-subtlest",
+      "aria-label": "Open Custom attributes dialog"
     },
-    /* @__PURE__ */ React__default.createElement(UserFocus, { size: 16 })
-  )), /* @__PURE__ */ React__default.createElement(DialogContent, { className: "min-w-[826px] bg-dark-100 pt-0 pb-4" }, /* @__PURE__ */ React__default.createElement(DialogHeader, { className: "py-6" }, /* @__PURE__ */ React__default.createElement(DialogTitle, { className: "heading-xxl !text-2xl" }, "Custom attributes")), /* @__PURE__ */ React__default.createElement("div", { className: "pb-4" }, /* @__PURE__ */ React__default.createElement(Table, { className: "bg-surface" }, /* @__PURE__ */ React__default.createElement(TableBody, { className: "space-y-1" }, Object.entries(groupedAttributes).map(([key, values]) => /* @__PURE__ */ React__default.createElement(TableRow, { key, className: "border-none" }, /* @__PURE__ */ React__default.createElement(TableCell, { className: "capitalize font-bold" }, key), values.map((value, index) => /* @__PURE__ */ React__default.createElement(TableCell, { key: `${key}-${index}` }, value)))))))));
+    /* @__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])))))))));
 }
 
 function Convo({
@@ -287,6 +375,7 @@ function Convo({
   hasAttributes,
   onClick,
   className,
+  score,
   ...props
 }) {
   const { getMessages, isLoading: isLoadingFromContext, locale: contextLocale } = useConvosContext();
@@ -303,7 +392,29 @@ function Convo({
     }
     onClick?.();
   };
-  return /* @__PURE__ */ React__default.createElement(AccordionItem, { value: queryId, className: cn("border-none rounded-lg bg-surface", className), ...props }, /* @__PURE__ */ React__default.createElement(AccordionTrigger, { className: "flex-row-reverse px-4 gap-1 items-center", onClick: handleAccordionClick }, /* @__PURE__ */ React__default.createElement(Item, { size: "sm", className: "flex-1 p-0" }, /* @__PURE__ */ React__default.createElement(ItemContent, null, /* @__PURE__ */ React__default.createElement(ItemTitle, { className: "text-base text-default" }, question), /* @__PURE__ */ React__default.createElement(ItemDescription, { className: "text-xs text-default" }, description)), /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: status }, statusMessage), hasAttributes && /* @__PURE__ */ React__default.createElement(AttributesDialog, { conversationId: queryId }))), /* @__PURE__ */ React__default.createElement(AccordionContent, { className: "flex flex-col gap-4 text-balance px-3" }, 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 })))));
+  const EnrichedStatusBadge = ({ score: score2 }) => {
+    return score2 ? /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, null, /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: status, suffix: score2 }, statusMessage)), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, "Conversation score: ", score2))) : /* @__PURE__ */ React__default.createElement(StatusBadge, { variant: status, suffix: score2 }, statusMessage);
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    AccordionItem,
+    {
+      value: queryId,
+      className: cn(
+        'border-none rounded-lg bg-dark-100 [&[data-state="open"]]:bg-surface hover:bg-surface [&[data-state=open]]:shadow-md [&[data-state=open]]:shadow-dark-300',
+        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" }, description)), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-0" }, hasAttributes && /* @__PURE__ */ React__default.createElement(AttributesDialog, { conversationId: queryId }), status && /* @__PURE__ */ React__default.createElement(EnrichedStatusBadge, { score })))
+    ),
+    /* @__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 }))))
+  );
 }
 
 const ConvosContext = React__default.createContext(void 0);
@@ -379,20 +490,12 @@ function Convos({
   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,
-      value: convo.value,
-      question: convo.question,
-      timestamp: convo.timestamp,
-      location: convo.location,
-      source: convo.source,
-      status: convo.status,
-      statusMessage: convo.statusMessage,
-      hasAttributes: convo.hasAttributes,
-      locale: convo.locale,
       onClick: () => handleFetchMessages(convo.value)
     }
   ))));
 }
 
-export { Convo, Convos, ConvosProvider, Feedback, Message, MessageType, StatusBadge, useConvosContext };
+export { Convo, Convos, ConvosProvider, Feedback, Message, MessageType, StatusBadge, isAIAnswer, isAction, isFeedback, isUserQuestion, useConvosContext };
 //# sourceMappingURL=convos.js.map