@brainfish-ai/components 0.35.19 → 0.36.0

package/dist/esm/components/conversation/ConversationMessageAssistant.js

@@ -0,0 +1,53 @@
+import React__default, { useCallback } from 'react';
+import { Copy } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { RippleStatus } from '../ui/ripple-status.js';
+import { BlockRenderer } from './blocks/index.js';
+import { getConversationStatusLabel } from './status.js';
+import { useConversation } from './ConversationContext.js';
+
+const ConversationMessageAssistant = ({ message, className }) => {
+  const { callbacks } = useConversation();
+  const isStreaming = message.status === "streaming";
+  const isPending = message.status === "pending";
+  const isCompleted = message.status === "completed";
+  const handleCopy = useCallback(() => {
+    const textContent = message.content.filter((b) => b.type === "text").map((b) => b.text).join("\n");
+    callbacks.onCopy?.(message.id, textContent);
+  }, [message, callbacks]);
+  const hasVisibleContent = message.content.some((block) => block.type === "text" && block.text.length > 0);
+  const isError = message.status === "error";
+  const isActive = isStreaming || isPending;
+  const statusLabel = isActive ? getConversationStatusLabel(message) : null;
+  if (!hasVisibleContent && statusLabel) {
+    return /* @__PURE__ */ React__default.createElement(RippleStatus, { text: statusLabel, className });
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-3", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, isError ? /* @__PURE__ */ React__default.createElement(BlockRenderer, { block: { type: "text", text: "Sorry, something went wrong. Please try again." } }) : message.content.map((block, i) => /* @__PURE__ */ React__default.createElement(
+    BlockRenderer,
+    {
+      key: i,
+      block,
+      isStreaming,
+      onCitationClick: callbacks.onCitationClick
+    }
+  ))), statusLabel && /* @__PURE__ */ React__default.createElement(RippleStatus, { text: statusLabel, className: "mt-2" }), isCompleted && /* @__PURE__ */ React__default.createElement("div", { className: "mt-3 flex items-center gap-1" }, /* @__PURE__ */ React__default.createElement(ActionBarButton, { tooltip: "Copy", onClick: handleCopy }, /* @__PURE__ */ React__default.createElement(Copy, { className: "h-4 w-4" })))));
+};
+ConversationMessageAssistant.displayName = "ConversationMessageAssistant";
+const ActionBarButton = ({ children, tooltip, active, onClick }) => {
+  return /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        active && "text-primary"
+      ),
+      onClick
+    },
+    children
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, { side: "bottom" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-xs" }, tooltip)));
+};
+ActionBarButton.displayName = "ActionBarButton";
+
+export { ConversationMessageAssistant };

package/dist/esm/components/conversation/ConversationMessageUser.js

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+import { ContextPillBadge } from './ContextPillBadge.js';
+import { MessageImageThumbnails } from './AttachmentPreviews.js';
+import { mimeTypeToIconType } from './attachmentUtils.js';
+
+function attachmentBlockKey(block) {
+  switch (block.type) {
+    case "file":
+      return `file:${block.attachmentId}`;
+    case "page":
+      return `page:${block.url}`;
+    case "entity":
+      return `entity:${block.entity.type}:${block.entity.id}`;
+  }
+}
+function attachmentBlockToPill(block) {
+  switch (block.type) {
+    case "file":
+      return {
+        id: block.attachmentId,
+        label: block.fileName,
+        iconType: mimeTypeToIconType(block.mimeType)
+      };
+    case "page":
+      return { id: block.url, label: block.title, iconType: "page" };
+    case "entity":
+      return { id: block.entity.id, label: block.entity.title, iconType: block.entity.type };
+  }
+}
+const ConversationMessageUser = ({ message, className }) => {
+  const textBlocks = message.content.filter((b) => b.type === "text");
+  const imageBlocks = message.content.filter(
+    (b) => b.type === "file" && b.mimeType.startsWith("image/")
+  );
+  const otherAttachmentBlocks = message.content.filter((b) => {
+    if (b.type === "text") return false;
+    if (b.type === "file" && b.mimeType.startsWith("image/")) return false;
+    return true;
+  });
+  const paragraphs = textBlocks.map((b) => b.text).join("\n").split(/\n\n+/).filter((p) => p.trim().length > 0);
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex justify-end", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "max-w-[85%] rounded bg-dark-200 px-2 py-2.5 text-foreground flex flex-col gap-3" }, /* @__PURE__ */ React__default.createElement(MessageImageThumbnails, { blocks: imageBlocks }), otherAttachmentBlocks.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap gap-1.5" }, otherAttachmentBlocks.map((block) => /* @__PURE__ */ React__default.createElement(ContextPillBadge, { key: attachmentBlockKey(block), pill: attachmentBlockToPill(block) }))), paragraphs.length > 0 && /* @__PURE__ */ React__default.createElement("div", null, paragraphs.map((paragraph, i) => /* @__PURE__ */ React__default.createElement("p", { key: i, className: "m-0 mb-4 whitespace-pre-wrap last:mb-0" }, paragraph)))));
+};
+ConversationMessageUser.displayName = "ConversationMessageUser";
+
+export { ConversationMessageUser };

package/dist/esm/components/conversation/ConversationMessages.js

@@ -0,0 +1,50 @@
+import React__default, { useRef, useEffect } from 'react';
+import { ScrollArea } from '../ui/scroll-area.js';
+import { cn } from '../../lib/utils.js';
+import { useConversation } from './ConversationContext.js';
+import { ConversationMessage } from './ConversationMessage.js';
+
+const ConversationMessages = ({
+  className,
+  bottomPadding = 0,
+  onContentBehind,
+  onScrolledFromTop
+}) => {
+  const { messages, reportScrolledFromTop } = useConversation();
+  const handleScrolledFromTop = onScrolledFromTop ?? reportScrolledFromTop;
+  const viewportRef = useRef(null);
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (viewport) {
+      viewport.scrollTop = viewport.scrollHeight;
+    }
+  }, [messages]);
+  useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !handleScrolledFromTop) return;
+    const handleScroll = () => {
+      handleScrolledFromTop(viewport.scrollTop > 0);
+    };
+    viewport.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => viewport.removeEventListener("scroll", handleScroll);
+  }, [handleScrolledFromTop]);
+  useEffect(() => {
+    const sentinel = sentinelRef.current;
+    const viewport = viewportRef.current;
+    if (!sentinel || !viewport || !onContentBehind) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry) onContentBehind(!entry.isIntersecting);
+      },
+      { root: viewport, threshold: 0, rootMargin: `0px 0px -${bottomPadding}px 0px` }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [onContentBehind, bottomPadding]);
+  return /* @__PURE__ */ React__default.createElement(ScrollArea, { ref: viewportRef, className: cn("h-full", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "py-4 px-6 flex flex-col gap-4" }, messages.map((message) => /* @__PURE__ */ React__default.createElement(ConversationMessage, { key: message.id, message })), /* @__PURE__ */ React__default.createElement("div", { ref: sentinelRef, className: "h-px -mt-4" })), /* @__PURE__ */ React__default.createElement("div", { style: { height: bottomPadding + 8 } }));
+};
+ConversationMessages.displayName = "ConversationMessages";
+
+export { ConversationMessages };

package/dist/esm/components/conversation/ConversationStatus.js

@@ -0,0 +1,13 @@
+import React__default from 'react';
+import { SweepText } from '../ui/sweep-text.js';
+
+const ConversationStatus = ({
+  className,
+  children = "Working",
+  variant = "yellowfin"
+}) => {
+  return /* @__PURE__ */ React__default.createElement(SweepText, { className, variant }, children);
+};
+ConversationStatus.displayName = "ConversationStatus";
+
+export { ConversationStatus };

package/dist/esm/components/conversation/ConversationSuggestions.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+import { useConversation } from './ConversationContext.js';
+
+const ConversationSuggestions = ({ items, className }) => {
+  const { callbacks } = useConversation();
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex flex-wrap justify-end gap-2 px-2 py-2", className) }, items.map((suggestion) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      key: suggestion.id,
+      type: "button",
+      className: "rounded-full border border-border px-4 py-2 text-sm text-foreground hover:bg-muted transition-colors",
+      onClick: () => callbacks.onSuggestionClick?.(suggestion)
+    },
+    suggestion.text
+  )));
+};
+ConversationSuggestions.displayName = "ConversationSuggestions";
+
+export { ConversationSuggestions };

package/dist/esm/components/conversation/attachmentUtils.js

@@ -0,0 +1,9 @@
+function mimeTypeToIconType(mimeType) {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType === "application/pdf") return "pdf";
+  if (mimeType === "application/msword" || mimeType.includes("wordprocessingml")) return "doc";
+  return "file";
+}
+
+export { mimeTypeToIconType };

package/dist/esm/components/conversation/blocks/CitationBlock.js

@@ -0,0 +1,21 @@
+import React__default from 'react';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../../ui/tooltip.js';
+import { Button } from '../../ui/button.js';
+
+const CitationBlock = ({ citations, onCitationClick }) => {
+  return /* @__PURE__ */ React__default.createElement("span", { className: "inline-flex flex-wrap gap-1" }, citations.map((citation) => /* @__PURE__ */ React__default.createElement(CitationBadge, { key: citation.id, citation, onClick: onCitationClick })));
+};
+const CitationBadge = ({ citation, onClick }) => {
+  return /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      size: "xs",
+      variant: "ghost",
+      className: "size-5 text-xs text-muted-foreground",
+      onClick: () => onClick?.(citation)
+    },
+    citation.index
+  )), /* @__PURE__ */ React__default.createElement(TooltipContent, { side: "top", className: "max-w-xs" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm font-medium" }, citation.title), /* @__PURE__ */ React__default.createElement("p", { className: "text-xs truncate" }, citation.url)));
+};
+
+export { CitationBlock };

package/dist/esm/components/conversation/blocks/TextBlock.js

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { FormattedMessage } from '../../markdown/FormattedMessage.js';
+
+const TextBlockComponent = ({ block, isStreaming }) => {
+  return /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content: block.text }, isStreaming });
+};
+
+export { TextBlockComponent };

package/dist/esm/components/conversation/blocks/index.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+import { TextBlockComponent } from './TextBlock.js';
+import { CitationBlock } from './CitationBlock.js';
+
+const BlockRenderer = ({ block, isStreaming, onCitationClick }) => {
+  if (block.type === "text") {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(TextBlockComponent, { block, isStreaming }), block.citations && block.citations.length > 0 && /* @__PURE__ */ React__default.createElement(CitationBlock, { citations: block.citations, onCitationClick }));
+  }
+  return null;
+};
+
+export { BlockRenderer, CitationBlock, TextBlockComponent };

package/dist/esm/components/conversation/status.js

@@ -0,0 +1,34 @@
+const DEFAULT_STATUS = "Working";
+const TOOL_LABELS = {
+  keyword_search: "Searching knowledge base",
+  get_document: "Reading document",
+  create_document: "Creating document",
+  update_document: "Updating document"
+};
+function labelForToolUse(block) {
+  const key = block.name.replace(/([a-z])([A-Z])/g, "$1_$2").replace(/[\s-]+/g, "_").toLowerCase();
+  return TOOL_LABELS[key] ?? DEFAULT_STATUS;
+}
+function getConversationStatusLabel(message) {
+  const blocks = message.content;
+  if (blocks.length === 0) {
+    return DEFAULT_STATUS;
+  }
+  const latest = blocks[blocks.length - 1];
+  switch (latest.type) {
+    case "tool_use":
+      return labelForToolUse(latest);
+    case "tool_result": {
+      const origin = blocks.findLast((b) => b.type === "tool_use" && b.id === latest.toolUseId);
+      return origin ? labelForToolUse(origin) : DEFAULT_STATUS;
+    }
+    case "thinking":
+      return "Thinking";
+    case "text":
+      return latest.text.length > 0 ? null : DEFAULT_STATUS;
+    default:
+      return DEFAULT_STATUS;
+  }
+}
+
+export { getConversationStatusLabel };

package/dist/esm/components/conversation/welcome.js

@@ -0,0 +1,50 @@
+const CONVERSATION_USED_STORAGE_KEY = "brainfish-conversation-used";
+const WELCOME_MESSAGE_ID = "welcome";
+const FIRST_VISIT_WELCOME_TEXT = "G’day! I'm Ask Brainfish. I answer questions about your product and business with citations, draft new articles from notes, files, videos, or our chat, and edit existing ones for review. Consider me your business’ SME, and co-pilot to be more affective in the Brainfish platform.\n\nHow can I help today?";
+const RETURNING_WELCOME_TEXT = "Hello! How can I help today?";
+function hasUsedConversationBefore() {
+  try {
+    return localStorage.getItem(CONVERSATION_USED_STORAGE_KEY) === "true";
+  } catch {
+    return false;
+  }
+}
+function markConversationAsUsed() {
+  try {
+    localStorage.setItem(CONVERSATION_USED_STORAGE_KEY, "true");
+  } catch {
+  }
+}
+function getWelcomeText(isFirstVisit) {
+  return isFirstVisit ? FIRST_VISIT_WELCOME_TEXT : RETURNING_WELCOME_TEXT;
+}
+const WELCOME_STREAM_CHUNK_SIZE = 3;
+const WELCOME_STREAM_INTERVAL_MS = 30;
+function buildStreamingMessage(id, text, charIndex) {
+  const chunk = text.slice(0, charIndex);
+  const done = charIndex >= text.length;
+  return {
+    id,
+    role: "ai",
+    content: chunk ? [{ type: "text", text: chunk }] : [],
+    status: done ? "completed" : "streaming"
+  };
+}
+function createWelcomeMessageAt(text, charIndex) {
+  return buildStreamingMessage(WELCOME_MESSAGE_ID, text, charIndex);
+}
+function streamTextAsMessage(id, text, onUpdate, startCharIndex = WELCOME_STREAM_CHUNK_SIZE) {
+  let charIndex = startCharIndex;
+  const interval = setInterval(() => {
+    charIndex += WELCOME_STREAM_CHUNK_SIZE;
+    const done = charIndex >= text.length;
+    onUpdate(buildStreamingMessage(id, text, done ? text.length : charIndex));
+    if (done) clearInterval(interval);
+  }, WELCOME_STREAM_INTERVAL_MS);
+  return () => clearInterval(interval);
+}
+function streamWelcomeText(text, onUpdate) {
+  return streamTextAsMessage(WELCOME_MESSAGE_ID, text, onUpdate);
+}
+
+export { CONVERSATION_USED_STORAGE_KEY, WELCOME_MESSAGE_ID, WELCOME_STREAM_CHUNK_SIZE, WELCOME_STREAM_INTERVAL_MS, createWelcomeMessageAt, getWelcomeText, hasUsedConversationBefore, markConversationAsUsed, streamTextAsMessage, streamWelcomeText };

package/dist/esm/components/conversation.js

@@ -1,2 +1,11 @@
-export{C as ContextPillBadge,a as Conversation,b as ConversationActions,c as ConversationInput,d as ConversationMessageAssistant,e as ConversationMessageUser,f as ConversationMessages,g as ConversationProvider,h as ConversationStatus,i as ConversationSuggestions,j as getConversationStatusLabel,u as useConversation}from"../chunks/Conversation.CfhUJm_Q.js";
-//# sourceMappingURL=conversation.js.map
+export { Conversation } from './conversation/Conversation.js';
+export { ConversationMessages } from './conversation/ConversationMessages.js';
+export { ConversationMessageAssistant } from './conversation/ConversationMessageAssistant.js';
+export { ConversationMessageUser } from './conversation/ConversationMessageUser.js';
+export { ConversationInput } from './conversation/ConversationInput.js';
+export { ConversationSuggestions } from './conversation/ConversationSuggestions.js';
+export { ConversationActions } from './conversation/ConversationActions.js';
+export { ConversationStatus } from './conversation/ConversationStatus.js';
+export { getConversationStatusLabel } from './conversation/status.js';
+export { ContextPillBadge } from './conversation/ContextPillBadge.js';
+export { ConversationProvider, useConversation } from './conversation/ConversationContext.js';

package/dist/esm/components/convos/answer-diagnostics.js

@@ -0,0 +1,17 @@
+import React__default, { useState, useEffect } from 'react';
+import { ArrowSquareOut } from '@phosphor-icons/react';
+import { Spinner } from '../ui/spinner.js';
+import { useConvosContext } from './convos.js';
+import { Button } from '../ui/button.js';
+
+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 })))))))));
+}
+
+export { AnswerDiagnosticsSection };

package/dist/esm/components/convos/attributes-dialog.css

@@ -0,0 +1,51 @@
+/* Force table to not be like tables anymore */
+[data-test-id="attributes-table"],
+[data-test-id="attributes-table"] thead,
+[data-test-id="attributes-table"] tbody,
+[data-test-id="attributes-table"] th,
+[data-test-id="attributes-table"] tr {
+  display: block;
+}
+
+[data-test-id="attributes-table"] td {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+/* Hide table headers (but not display: none;, for accessibility) */
+[data-test-id="attributes-table"] thead tr {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+}
+
+[data-test-id="attributes-table"] tr:nth-child(even) {
+  background-color: var(--bfc-v2-color-mono-200, #F5F5F5);
+}
+
+[data-test-id="attributes-table"] td {
+  /* Behave  like a "row" */
+  border-bottom-width: 1px;
+  border-bottom-color: var(--bfc-v2-color-mono-300, #E5E5E5);
+  position: relative;
+  white-space: normal;
+  text-align: left;
+}
+
+[data-test-id="attributes-table"] td:before {
+  /* Now like a table header */
+  /* @apply absolute; */
+  /* Top/left values mimic padding */
+  top: 0.5rem;
+  left: 0.5rem;
+  white-space: nowrap;
+  padding-right: 0.5rem;
+  text-align: left;
+  font-weight: 700;
+}
+
+/*
+Label the data
+*/
+[data-test-id="attributes-table"] td:before { content: attr(data-title); }

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

@@ -0,0 +1,70 @@
+import React__default, { useState, useEffect } from 'react';
+import { UserFocus } from '@phosphor-icons/react';
+import { createId } from '@paralleldrive/cuid2';
+import { useConvosContext } from './convos.js';
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from '../ui/table.js';
+import { ScrollArea } from '../ui/scroll-area.js';
+import '@radix-ui/react-accordion';
+import 'clsx';
+import 'tailwind-merge';
+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 { DivButton } from '../ui/div-button.js';
+import '../ui/dropdown-menu.js';
+import '../ui/icon.js';
+import '../ui/input.js';
+import '../ui/item.js';
+import '../ui/label.js';
+import '../ui/popover.js';
+import '../ui/progress.js';
+import '../ui/radio-group.js';
+import 'react-resizable-panels';
+import '../ui/select.js';
+import '../ui/separator.js';
+import { Sheet, SheetTrigger, SheetContent, SheetHeader, SheetTitle, SheetDescription } from '../ui/sheet.js';
+import '../ui/switch.js';
+import '../ui/tabs.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';
+import { sortAttributeKeys } from '../../lib/sortAttributeKeys.js';
+import './attributes-dialog.css';/* empty css                      */
+
+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(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",
+      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(TooltipContent, null, "Customer attributes")), /* @__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 }, typeof record[key] === "boolean" ? String(record[key]) : record[key])))))))));
+}
+
+export { AttributesDialog };

package/dist/esm/components/convos/confidence-badge.js

@@ -0,0 +1,17 @@
+import React__default from 'react';
+import { Badge } from '../ui/badge.js';
+
+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");
+  }
+};
+
+export { ConfidenceBadge };