@brainfish-ai/components 0.35.20 → 0.36.0

package/dist/esm/components/chart-radial-stacked.js

@@ -1,3 +1 @@
-import e from"react";import{RadialBarChart as t,PolarRadiusAxis as a,Label as r,RadialBar as n}from"recharts";import{a as c}from"../chunks/trend-value.lSWHqdkm.js";import{f as s}from"../chunks/formatNumber.DhVn228t.js";import{Card as l,CardHeader as m,CardTitle as o,CardContent as i}from"./ui/card.js";import{C as u,a as d,b as f}from"../chunks/chart.D9xvsrKX.js";import{c as x}from"../chunks/utils.DtKoarLP.js";function p({title:p,data:h,chartConfig:E,trend:k,trendValue:y,className:g}){if(!h||0===h.length)return null;const N=Object.values(h[0]).reduce((e,t)=>"number"==typeof t?e+t:e,0),j=s(N),b=Object.entries(h[0]).sort((e,t)=>t[1]-e[1]);/* @__PURE__ */
-return e.createElement(l,{className:x("flex flex-col w-full min-w-60 p-4 shadow-none",g)},/* @__PURE__ */e.createElement(m,{className:"p-0 space-y-0","data-name":"header"},/* @__PURE__ */e.createElement(o,{className:"uppercase font-geist heading-xxxs tracking-normal"},p)),/* @__PURE__ */e.createElement(i,{"data-name":"content",className:"p-0 flex-1 min-h-0"},/* @__PURE__ */e.createElement(u,{config:E,className:"mx-auto aspect-[2/1] w-full max-w-52"},/* @__PURE__ */e.createElement(t,{data:h,endAngle:180,innerRadius:80,outerRadius:120,cy:"100%"},/* @__PURE__ */e.createElement(d,{cursor:!1,content:/* @__PURE__ */e.createElement(f,{hideLabel:!0})}),/* @__PURE__ */e.createElement(a,{tick:!1,tickLine:!1,axisLine:!1},/* @__PURE__ */e.createElement(r,{content:({viewBox:t})=>t&&"cx"in t&&"cy"in t?/* @__PURE__ */e.createElement("text",{x:t.cx,y:t.cy,textAnchor:"middle"},/* @__PURE__ */e.createElement("tspan",{x:t.cx,y:(t.cy||0)-16,className:"fill-foreground text-xl font-geist"},j)):null})),b.map(([t])=>/* @__PURE__ */e.createElement(n,{key:t,dataKey:t,stackId:"a",cornerRadius:4,fill:E[t]?.color||`var(--color-${t})`,className:"stroke-card stroke-2"})))),k&&y&&/* @__PURE__ */e.createElement(c,{variant:"long",trend:k,trendValue:y,className:"mt-4 justify-center"})))}export{p as ChartRadialStacked};
-//# sourceMappingURL=chart-radial-stacked.js.map
+export { ChartRadialStacked } from './chart-radial-stacked/chart-radial-stacked.js';

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { Button } from '../ui/button.js';
+import { ConversationRow } from './HistoryPage.js';
+
+function ActiveConversations({
+  conversations,
+  onSelect,
+  onViewAll,
+  botAvatarUrl
+}) {
+  const active = conversations.filter((c) => c.status === "active" && c.isHandoff).slice(0, 2);
+  if (active.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full p-3 md:p-0", "data-name": "ActiveConversations" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between mb-3" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-base font-medium text-foreground" }, "Continue conversation"), /* @__PURE__ */ React__default.createElement(Button, { type: "button", variant: "ghost", size: "xs", onClick: onViewAll }, "View all")), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2" }, active.map((item) => /* @__PURE__ */ React__default.createElement(ConversationRow, { key: item.conversationId, item, onSelect, botAvatarUrl }))));
+}
+
+export { ActiveConversations };

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

@@ -0,0 +1,175 @@
+import React__default, { useState } from 'react';
+import { Check, Copy, CaretDown, ArrowSquareOut } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+import { addPopupWidgetUtm } from '../../lib/addUtmParams.js';
+import { AnswerBlock } from './AnswerBlock.js';
+import { AnswerLoadingStatus } from './AnswerLoadingStatus.js';
+import { AttachmentThumbnails } from './AttachmentThumbnails.js';
+import { KnowledgeGroupSelector } from './KnowledgeGroupSelector.js';
+import { blocksToPlainText } from './blocks/utils.js';
+import AnswerActions from './AnswerActions.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../ui/collapsible.js';
+import { Feedback } from '../feedback/feedback.js';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { cn } from '../../lib/utils.js';
+
+function Answer({
+  index,
+  favicon,
+  blocks = [],
+  question,
+  searchResults,
+  state = "completed",
+  searchQueryId,
+  searchIntentId,
+  hideCitations = false,
+  feedback,
+  onFeedback,
+  disableFeedback = false,
+  textConfig = {},
+  redirectRules,
+  attachments = [],
+  actions,
+  handleActionClick,
+  nextBestActions,
+  isLastAnswer,
+  onFeedbackReasonSubmit,
+  hasError = false,
+  knowledgeSourceGroups,
+  onKnowledgeGroupSelect,
+  statusMessage
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const answer = blocksToPlainText(blocks);
+  const isAwaitingKnowledgeGroup = state === "awaiting-knowledge-group";
+  const isFetching = state === "fetching-search-results" || state === "fetching-stream";
+  const showLoadingStatus = isFetching && (blocks.length === 1 || Boolean(statusMessage));
+  const isFetchingSearchResults = state === "fetching-search-results";
+  const isCompleted = state === "completed";
+  const showError = hasError && isCompleted;
+  const hasContent = blocks.length > 0;
+  const loadingAnswerText = statusMessage ?? textConfig.loadingAnswerText;
+  const loadingText = isFetchingSearchResults ? textConfig.loadingSearchText : loadingAnswerText;
+  const hideBlocksDuringProgress = showLoadingStatus && Boolean(statusMessage);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(answer);
+    } catch (err) {
+      console.warn("Clipboard API failed, using fallback:", err);
+      const textArea = document.createElement("textarea");
+      textArea.value = answer;
+      textArea.style.position = "fixed";
+      textArea.style.opacity = "0";
+      document.body.appendChild(textArea);
+      textArea.focus();
+      textArea.select();
+      try {
+        document.execCommand("copy");
+      } catch (fallbackErr) {
+        console.error("Fallback: Oops, unable to copy", fallbackErr);
+      }
+      document.body.removeChild(textArea);
+    }
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2e3);
+  };
+  const handleFeedback = (response) => {
+    if (onFeedback && searchQueryId) {
+      onFeedback(response);
+    }
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: "rounded-lg relative mx-auto overflow-hidden bg-card border border-primary",
+      "data-name": "SearchResults",
+      "data-index": index
+    },
+    question ? /* @__PURE__ */ React__default.createElement("div", { className: "px-4 pt-4 pb-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-start justify-between gap-2 min-h-9" }, /* @__PURE__ */ React__default.createElement("h2", { className: "leading-normal font-semibold m-0 text-foreground self-center text-lg" }, question)), /* @__PURE__ */ React__default.createElement(
+      AttachmentThumbnails,
+      {
+        items: attachments.map((a, i) => ({ id: `${i}`, src: a.url, url: a.url, alt: a.filename })),
+        size: "xs",
+        className: "mt-2"
+      }
+    )) : null,
+    showLoadingStatus && /* @__PURE__ */ React__default.createElement("div", { className: "px-4 pt-0 pb-2" }, /* @__PURE__ */ React__default.createElement(AnswerLoadingStatus, { text: loadingText ?? "" })),
+    isAwaitingKnowledgeGroup && knowledgeSourceGroups && onKnowledgeGroupSelect ? /* @__PURE__ */ React__default.createElement("div", { className: "answer-container" }, favicon && /* @__PURE__ */ React__default.createElement(
+      "img",
+      {
+        src: favicon,
+        "data-name": "AnswerFavicon",
+        className: "answer-favicon",
+        alt: "",
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React__default.createElement(KnowledgeGroupSelector, { groups: knowledgeSourceGroups, onGroupSelect: onKnowledgeGroupSelect })) : /* @__PURE__ */ React__default.createElement("div", { className: "answer-container" }, favicon && hasContent && isCompleted && /* @__PURE__ */ React__default.createElement(
+      "img",
+      {
+        src: favicon,
+        "data-name": "AnswerFavicon",
+        className: "answer-favicon",
+        alt: "",
+        "aria-hidden": true
+      }
+    ), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col" }, !hideBlocksDuringProgress && blocks?.map((block, i) => /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        key: i,
+        className: cn(
+          "px-6 pt-0 pb-2 border-b last:border-b-0 border-dashed",
+          showError && "text-muted-foreground"
+        ),
+        "data-name": "AnswerBlock"
+      },
+      /* @__PURE__ */ React__default.createElement(AnswerBlock, { block, redirectRules, state })
+    )))),
+    isCompleted && hasContent && !showError && /* @__PURE__ */ React__default.createElement(
+      AnswerActions,
+      {
+        actions,
+        nextBestActions,
+        isLastAnswer,
+        handleActionClick,
+        searchQueryId: searchQueryId || "",
+        searchIntentId,
+        question,
+        answer
+      }
+    ),
+    isCompleted && hasContent && !showError && (question || !disableFeedback) && /* @__PURE__ */ React__default.createElement("div", { className: "p-4 pt-0 flex items-baseline gap-2" }, question ? /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", onClick: () => void handleCopy(), className: "-mt-1 flex-shrink-0" }, isCopied ? /* @__PURE__ */ React__default.createElement(Check, { className: "text-feedback-positive", weight: "bold" }) : /* @__PURE__ */ React__default.createElement(Copy, { className: "text-dark-500", weight: "bold" }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, isCopied ? "Copied!" : "Copy")))) : null, !disableFeedback && /* @__PURE__ */ React__default.createElement(
+      Feedback,
+      {
+        feedback,
+        onFeedback: handleFeedback,
+        textConfig,
+        disabled: disableFeedback,
+        feedbackReasonLength: 500,
+        feedbackReasonPlaceholder: "What could we have done better? Your feedback is valuable to us...",
+        onFeedbackReasonSubmit,
+        feedbackReasonThankYouText: "Thank you for your feedback!"
+      }
+    )),
+    !hideCitations && searchResults && searchResults.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "overflow-hidden bg-card border-dashed border-0 border-t-2" }, /* @__PURE__ */ React__default.createElement(Collapsible, { open: isExpanded, onOpenChange: setIsExpanded, className: "w-full" }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(CollapsibleTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "secondary", className: "w-full justify-between h-11", "data-name": "RelatedSources" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-medium truncate text-base" }, "Sources")), /* @__PURE__ */ React__default.createElement(
+      CaretDown,
+      {
+        className: `size-4 flex-shrink-0 transition-transform duration-200 text-secondary-foreground ${isExpanded ? "rotate-180" : ""}`,
+        weight: "bold"
+      }
+    ), /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Toggle")))), /* @__PURE__ */ React__default.createElement(CollapsibleContent, { className: "divide-y divide-dark-300 overflow-hidden CollapsibleContent" }, searchResults.map((result) => /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        key: result.id,
+        href: addPopupWidgetUtm(result.url),
+        target: "_blank",
+        rel: "noopener noreferrer",
+        className: "flex items-center gap-2 p-3 transition-colors duration-200 hover:bg-accent bg-card text-foreground"
+      },
+      /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow truncate" }, result.title),
+      /* @__PURE__ */ React__default.createElement(ArrowSquareOut, { className: "size-4 flex-shrink-0 text-secondary-foreground", weight: "bold" })
+    )))))
+  );
+}
+
+export { Answer };

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

@@ -0,0 +1,64 @@
+import React__default, { useState } from 'react';
+import { NextBestActions } from './NextBestActions.js';
+import { getActionMapping } from './helpers/nextBestActions.js';
+
+const AnswerActions = ({
+  actions,
+  nextBestActions,
+  isLastAnswer,
+  handleActionClick,
+  searchQueryId,
+  searchIntentId,
+  question,
+  answer
+}) => {
+  const hasActions = actions && actions.length > 0;
+  const hasNextBestActions = nextBestActions && isLastAnswer && nextBestActions.length > 0;
+  const [showAnswerActions, setShowAnswerActions] = useState(hasActions || hasNextBestActions);
+  if (!showAnswerActions) {
+    return null;
+  }
+  let mappedActions = [];
+  if (hasActions) {
+    mappedActions = actions.map((action) => {
+      const actionWithIntent = {
+        ...action,
+        searchIntentId
+      };
+      const mapping = getActionMapping(actionWithIntent);
+      return {
+        id: action.id,
+        label: mapping.getLabel(actionWithIntent),
+        type: mapping.type,
+        icon: mapping.icon,
+        value: mapping.getValue(actionWithIntent)
+      };
+    });
+  }
+  if (hasNextBestActions) {
+    const filteredNextBestActions = nextBestActions.filter(
+      (action) => !mappedActions.some((mappedAction) => mappedAction.type === action.type)
+    );
+    mappedActions = mappedActions.concat(filteredNextBestActions);
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "p-4" }, /* @__PURE__ */ React__default.createElement(
+    NextBestActions,
+    {
+      nextBestActions: mappedActions,
+      onActionClick: (action, success) => {
+        if (action) {
+          setShowAnswerActions(false);
+          handleActionClick?.({
+            action,
+            searchQueryId: searchQueryId || "",
+            query: question,
+            answer,
+            success
+          });
+        }
+      }
+    }
+  ));
+};
+
+export { AnswerActions as default };

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { ActionInputFormBlock } from './blocks/ActionInputForm.js';
+import { ActionButtonsBlock } from './blocks/ActionButtons.js';
+import { MarkdownTextBlock } from './blocks/MarkdownText.js';
+
+function AnswerBlock({ block, redirectRules, state }) {
+  switch (block.type) {
+    case "markdown-text":
+      return /* @__PURE__ */ React__default.createElement(MarkdownTextBlock, { block, redirectRules, state });
+    case "action-buttons":
+      return /* @__PURE__ */ React__default.createElement(ActionButtonsBlock, { block });
+    case "action-input-form":
+      return /* @__PURE__ */ React__default.createElement(ActionInputFormBlock, { block });
+    default:
+      return null;
+  }
+}
+
+export { AnswerBlock };

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

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { RippleStatus } from '../ui/ripple-status.js';
+
+function AnswerLoadingStatus({ text, className }) {
+  return /* @__PURE__ */ React__default.createElement(RippleStatus, { text, className });
+}
+
+export { AnswerLoadingStatus };

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

@@ -0,0 +1,45 @@
+import React__default from 'react';
+import { X } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+
+const sizeConfig = {
+  xs: { container: "size-12", spinner: "size-3", close: "top-0.5 right-0.5 p-0.5", closeIcon: "size-2" },
+  sm: { container: "size-16", spinner: "size-4", close: "top-0.5 right-0.5 p-0.5", closeIcon: "size-2.5" },
+  md: { container: "size-20", spinner: "size-5", close: "top-1 right-1 p-1", closeIcon: "size-3" }
+};
+function AttachmentThumbnails({ items, size = "sm", onRemove, className }) {
+  if (items.length === 0) return null;
+  const config = sizeConfig[size];
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-2 overflow-x-auto", className) }, items.map((item) => /* @__PURE__ */ React__default.createElement("div", { key: item.id, className: cn("relative group rounded-lg overflow-hidden flex-shrink-0", config.container) }, /* @__PURE__ */ React__default.createElement(
+    "a",
+    {
+      href: item.url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: cn(!item.url && "pointer-events-none")
+    },
+    /* @__PURE__ */ React__default.createElement("img", { src: item.src, alt: item.alt || "Attachment", className: "w-full h-full object-cover" })
+  ), item.status === "uploading" && /* @__PURE__ */ React__default.createElement("div", { className: "absolute inset-0 flex items-center justify-center bg-black/40" }, /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "animate-spin rounded-full border-[2.5px] border-black/30 border-t-white",
+        config.spinner
+      )
+    }
+  )), onRemove && /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      onClick: () => onRemove(item.id),
+      className: cn(
+        "absolute rounded-full opacity-0",
+        "group-hover:opacity-100 transition-opacity duration-200",
+        "hover:bg-black/70 bg-black/50",
+        config.close
+      )
+    },
+    /* @__PURE__ */ React__default.createElement(X, { className: cn("text-white", config.closeIcon), "aria-label": "Remove attachment" })
+  ))));
+}
+
+export { AttachmentThumbnails };