@brainfish-ai/components 0.25.2 → 0.25.4

package/dist/esm/chunks/{Conversation.BEDav4lr.js → Conversation.BriXFYqU.js}

@@ -1,8 +1,8 @@
-import React__default, { useMemo, useContext, createContext, useCallback, useRef, useEffect, useLayoutEffect, useState, Suspense, forwardRef, Component, createElement, useImperativeHandle } from 'react';
+import React__default, { useRef, useLayoutEffect, useMemo, useContext, createContext, useCallback, useEffect, useState, Suspense, forwardRef, Component, createElement, useImperativeHandle } from 'react';
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '../components/ui/tooltip.js';
 import { c as cn } from './utils.Cwtlq8dh.js';
 import { ScrollArea } from '../components/ui/scroll-area.js';
-import { Sparkle, ThumbsUp, ThumbsDown, Copy, DotsThreeVertical, X as X$1, Plus, CaretRight, Stop, ArrowUp } from '@phosphor-icons/react';
+import { ThumbsUp, ThumbsDown, Copy, DotsThreeVertical, X as X$1, Plus, CaretRight, Stop, ArrowUp } from '@phosphor-icons/react';
 import { F as FormattedMessage } from './FormattedMessage.CRbM-hF6.js';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator } from '../components/ui/dropdown-menu.js';
 import { Popover, PopoverTrigger, PopoverContent } from '../components/ui/popover.js';
@@ -18,6 +18,9 @@ import { CodeNode, CodeHighlightNode, $isCodeNode } from '@lexical/code';
 import { L as Logo } from './logo.D5BMN6Db.js';
 
 const ConversationContext = createContext(null);
+const defaultCallbacks = {
+  onCopy: (_messageId, content) => void navigator.clipboard.writeText(content)
+};
 function useConversation() {
   const ctx = useContext(ConversationContext);
   if (!ctx) {
@@ -27,16 +30,37 @@ function useConversation() {
 }
 function ConversationProvider({ messages, callbacks, children }) {
   const isStreaming = messages.some((m) => m.status === "streaming");
-  const value = useMemo(() => ({ messages, callbacks, isStreaming }), [messages, callbacks, isStreaming]);
+  const callbacksRef = useRef({ ...defaultCallbacks, ...callbacks });
+  useLayoutEffect(() => {
+    callbacksRef.current = { ...defaultCallbacks, ...callbacks };
+  });
+  const stableCallbacks = useMemo(
+    () => ({
+      onSend: (...args) => callbacksRef.current.onSend?.(...args),
+      onStop: (...args) => callbacksRef.current.onStop?.(...args),
+      onSuggestionClick: (...args) => callbacksRef.current.onSuggestionClick?.(...args),
+      onActionClick: (...args) => callbacksRef.current.onActionClick?.(...args),
+      onFeedback: (...args) => callbacksRef.current.onFeedback?.(...args),
+      onCitationClick: (...args) => callbacksRef.current.onCitationClick?.(...args),
+      onAttachmentAction: (...args) => callbacksRef.current.onAttachmentAction?.(...args),
+      onContextPillRemove: (...args) => callbacksRef.current.onContextPillRemove?.(...args),
+      onCopy: (...args) => callbacksRef.current.onCopy?.(...args)
+    }),
+    []
+  );
+  const value = useMemo(
+    () => ({ messages, callbacks: stableCallbacks, isStreaming }),
+    [messages, stableCallbacks, isStreaming]
+  );
   return /* @__PURE__ */ React__default.createElement(ConversationContext.Provider, { value }, children);
 }
 
-const TextBlock = ({ part, isStreaming }) => {
-  return /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content: part.text }, isStreaming });
+const TextBlockComponent = ({ block, isStreaming }) => {
+  return /* @__PURE__ */ React__default.createElement(FormattedMessage, { message: { content: block.text }, isStreaming });
 };
 
-const CitationBlock = ({ part, onCitationClick }) => {
-  return /* @__PURE__ */ React__default.createElement("span", { className: "inline-flex flex-wrap gap-1" }, part.citations.map((citation) => /* @__PURE__ */ React__default.createElement(CitationBadge, { key: citation.id, citation, onClick: onCitationClick })));
+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(
@@ -50,39 +74,24 @@ const CitationBadge = ({ citation, onClick }) => {
   )), /* @__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 text-muted-foreground truncate" }, citation.url)));
 };
 
-const ImageBlock = ({ part }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "my-2" }, /* @__PURE__ */ React__default.createElement("img", { src: part.url, alt: part.alt ?? "", className: "max-w-full rounded-lg", loading: "lazy" }));
-};
-
-const ToolCallBlock = ({ part }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "my-2 rounded-lg border border-border bg-muted/50 p-3 text-sm" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement("span", { className: "font-medium" }, part.toolName), /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-muted-foreground capitalize" }, "(", part.status, ")")), part.result && /* @__PURE__ */ React__default.createElement("pre", { className: "mt-2 whitespace-pre-wrap text-xs text-muted-foreground" }, part.result));
-};
-
-const ThinkingBlock = ({ part }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: "my-2 rounded-lg border border-dashed border-border bg-muted/30 p-3 text-sm italic text-muted-foreground" }, part.text);
-};
-
-const BlockRenderer = ({ part, isStreaming, onCitationClick }) => {
-  switch (part.type) {
-    case "text":
-      return /* @__PURE__ */ React__default.createElement(TextBlock, { part, isStreaming });
-    case "citation":
-      return /* @__PURE__ */ React__default.createElement(CitationBlock, { part, onCitationClick });
-    case "image":
-      return /* @__PURE__ */ React__default.createElement(ImageBlock, { part });
-    case "tool-call":
-      return /* @__PURE__ */ React__default.createElement(ToolCallBlock, { part });
-    case "thinking":
-      return /* @__PURE__ */ React__default.createElement(ThinkingBlock, { part });
-    case "action-buttons":
-      return null;
-    default:
-      return null;
+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;
 };
 
-const ConversationLoading = ({ className }) => {
-  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-3 py-4", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-shrink-0 mt-1" }, /* @__PURE__ */ React__default.createElement(Sparkle, { className: "h-5 w-5 text-primary animate-pulse", weight: "fill" })), /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 space-y-3" }, /* @__PURE__ */ React__default.createElement("div", { className: "h-3 w-3/4 animate-pulse rounded bg-muted" }), /* @__PURE__ */ React__default.createElement("div", { className: "h-3 w-full animate-pulse rounded bg-muted" }), /* @__PURE__ */ React__default.createElement("div", { className: "h-3 w-5/6 animate-pulse rounded bg-muted" }), /* @__PURE__ */ React__default.createElement("div", { className: "h-3 w-2/3 animate-pulse rounded bg-muted" })));
+const ConversationStatus = ({ className }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      className: cn(
+        "text-sm font-medium animate-sweep bg-sweep-yellowfin bg-clip-text text-transparent [background-size:200%_auto]",
+        className
+      )
+    },
+    "Working..."
+  );
 };
 
 const ConversationMessageAssistant = ({ message, className }) => {
@@ -90,16 +99,23 @@ const ConversationMessageAssistant = ({ message, className }) => {
   const isStreaming = message.status === "streaming";
   const isPending = message.status === "pending";
   const isCompleted = message.status === "completed";
-  const actionButtonsParts = message.parts.filter((p) => p.type === "action-buttons");
-  const contentParts = message.parts.filter((p) => p.type !== "action-buttons");
   const handleCopy = useCallback(() => {
-    const textContent = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
+    const textContent = message.content.filter((b) => b.type === "text").map((b) => b.text).join("\n");
     callbacks.onCopy?.(message.id, textContent);
   }, [message, callbacks]);
-  if (isPending && contentParts.length === 0) {
-    return /* @__PURE__ */ React__default.createElement(ConversationLoading, { className });
+  const hasContent = message.content.some((block) => block.text.length > 0);
+  if (isPending && message.content.length === 0 || isStreaming && !hasContent) {
+    return /* @__PURE__ */ React__default.createElement(ConversationStatus, { className });
   }
-  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-3 p-4 bg-surface rounded", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, contentParts.map((part, i) => /* @__PURE__ */ React__default.createElement(BlockRenderer, { key: i, part, isStreaming, onCitationClick: callbacks.onCitationClick }))), isCompleted && /* @__PURE__ */ React__default.createElement("div", { className: "mt-3 flex items-center gap-1" }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex gap-3 p-4 bg-surface rounded", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "space-y-1" }, message.content.map((block, i) => /* @__PURE__ */ React__default.createElement(
+    BlockRenderer,
+    {
+      key: i,
+      block,
+      isStreaming,
+      onCitationClick: callbacks.onCitationClick
+    }
+  ))), isCompleted && /* @__PURE__ */ React__default.createElement("div", { className: "mt-3 flex items-center gap-1" }, /* @__PURE__ */ React__default.createElement(
     ActionBarButton,
     {
       tooltip: "Helpful",
@@ -115,18 +131,7 @@ const ConversationMessageAssistant = ({ message, className }) => {
       onClick: () => callbacks.onFeedback?.(message.id, "negative")
     },
     /* @__PURE__ */ React__default.createElement(ThumbsDown, { className: "h-4 w-4", weight: message.feedback === "negative" ? "fill" : "regular" })
-  ), /* @__PURE__ */ React__default.createElement(ActionBarButton, { tooltip: "Copy", onClick: handleCopy }, /* @__PURE__ */ React__default.createElement(Copy, { className: "h-4 w-4" })), /* @__PURE__ */ React__default.createElement(ActionBarButton, { tooltip: "More" }, /* @__PURE__ */ React__default.createElement(DotsThreeVertical, { className: "h-4 w-4" })), actionButtonsParts.map(
-    (part) => part.type === "action-buttons" ? part.actions.map((action) => /* @__PURE__ */ React__default.createElement(
-      "button",
-      {
-        key: action.id,
-        type: "button",
-        className: "ml-2 inline-flex items-center gap-1.5 rounded-full border border-border px-3 py-1 text-xs text-muted-foreground hover:bg-muted transition-colors",
-        onClick: () => callbacks.onActionClick?.(action, message.id)
-      },
-      action.label
-    )) : null
-  ))));
+  ), /* @__PURE__ */ React__default.createElement(ActionBarButton, { tooltip: "Copy", onClick: handleCopy }, /* @__PURE__ */ React__default.createElement(Copy, { className: "h-4 w-4" })), /* @__PURE__ */ React__default.createElement(ActionBarButton, { tooltip: "More" }, /* @__PURE__ */ React__default.createElement(DotsThreeVertical, { className: "h-4 w-4" })))));
 };
 const ActionBarButton = ({ children, tooltip, active, onClick }) => {
   return /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
@@ -144,13 +149,13 @@ const ActionBarButton = ({ children, tooltip, active, onClick }) => {
 };
 
 const ConversationMessageUser = ({ message, className }) => {
-  const textContent = message.parts.filter((p) => p.type === "text").map((p) => p.text).join("\n");
-  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex justify-end py-4", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "max-w-[85%] rounded bg-surface px-4 py-2.5 text-primary-foreground" }, /* @__PURE__ */ React__default.createElement("p", { className: "whitespace-pre-wrap" }, textContent)));
+  const paragraphs = message.content.filter((b) => b.type === "text").map((b) => b.text).join("\n").split(/\n\n+/);
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex justify-end py-4", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "max-w-[85%] rounded bg-surface px-4 py-2.5 text-foreground" }, paragraphs.map((paragraph, i) => /* @__PURE__ */ React__default.createElement("p", { key: i, className: "m-0 mb-4 whitespace-pre-wrap last:mb-0" }, paragraph))));
 };
 
 const ConversationMessage = ({ message, className }) => {
   switch (message.role) {
-    case "assistant":
+    case "ai":
       return /* @__PURE__ */ React__default.createElement(ConversationMessageAssistant, { message, className });
     case "user":
       return /* @__PURE__ */ React__default.createElement(ConversationMessageUser, { message, className });
@@ -182,7 +187,7 @@ const ConversationMessages = ({ className, bottomPadding = 0, onContentBehind })
     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: "px-4" }, messages.map((message) => /* @__PURE__ */ React__default.createElement(ConversationMessage, { key: message.id, message })), /* @__PURE__ */ React__default.createElement("div", { ref: sentinelRef, className: "h-px" })), /* @__PURE__ */ React__default.createElement("div", { style: { height: bottomPadding + 8 } }));
+  return /* @__PURE__ */ React__default.createElement(ScrollArea, { ref: viewportRef, className: cn("h-full", className) }, /* @__PURE__ */ React__default.createElement("div", { className: "px-6" }, messages.map((message) => /* @__PURE__ */ React__default.createElement(ConversationMessage, { key: message.id, message })), /* @__PURE__ */ React__default.createElement("div", { ref: sentinelRef, className: "h-px" })), /* @__PURE__ */ React__default.createElement("div", { style: { height: bottomPadding + 8 } }));
 };
 
 /**
@@ -540,7 +545,7 @@ function LexicalEditor({
         x$1,
         {
           autoFocus,
-          className: "outline-none w-full max-h-[7.5rem] overflow-y-auto [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5"
+          className: "outline-none w-full max-h-[7.5rem] overflow-y-auto [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5 [&_p]:my-0 [&_ul]:my-0 [&_ol]:my-0 [&_pre]:my-0 [&_blockquote]:my-0"
         }
       ),
       placeholder: placeholder ? /* @__PURE__ */ React__default.createElement("div", { className: "pointer-events-none absolute top-0 left-0 select-none text-muted-foreground" }, placeholder) : null,
@@ -633,7 +638,7 @@ const ConversationInput = ({
     },
     [handleAttachmentAction]
   );
-  return /* @__PURE__ */ React__default.createElement("div", { className: cn("px-2", className) }, /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("", className) }, /* @__PURE__ */ React__default.createElement(
     "div",
     {
       className: cn(
@@ -796,7 +801,7 @@ const ConversationRoot = ({
     observer.observe(el);
     return () => observer.disconnect();
   }, []);
-  return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(ConversationProvider, { messages, callbacks }, /* @__PURE__ */ React__default.createElement("div", { className: cn("flex h-full flex-col", className) }, isCompound ? children : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "relative min-h-0 flex-1 grid grid-rows-[1fr] grid-cols-[1fr] pb-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "row-start-1 col-start-1 min-h-0" }, /* @__PURE__ */ React__default.createElement(ConversationMessages, { bottomPadding: bottomHeight, onContentBehind: setContentBehind })), /* @__PURE__ */ React__default.createElement("div", { ref: bottomRef, className: "row-start-1 col-start-1 self-end z-10 pointer-events-none" }, /* @__PURE__ */ React__default.createElement("div", { className: "pointer-events-auto" }, suggestions.length > 0 && /* @__PURE__ */ React__default.createElement(ConversationSuggestions, { items: suggestions }), actions.length > 0 && /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(ConversationProvider, { messages, callbacks }, /* @__PURE__ */ React__default.createElement("div", { className: cn("flex h-full flex-col pb-4", className) }, isCompound ? children : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: "relative min-h-0 flex-1 grid grid-rows-[1fr] grid-cols-[1fr]" }, /* @__PURE__ */ React__default.createElement("div", { className: "row-start-1 col-start-1 min-h-0" }, /* @__PURE__ */ React__default.createElement(ConversationMessages, { bottomPadding: bottomHeight, onContentBehind: setContentBehind })), /* @__PURE__ */ React__default.createElement("div", { ref: bottomRef, className: "row-start-1 col-start-1 self-end z-10 pointer-events-none px-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "pointer-events-auto" }, suggestions.length > 0 && /* @__PURE__ */ React__default.createElement(ConversationSuggestions, { items: suggestions }), actions.length > 0 && /* @__PURE__ */ React__default.createElement(
     ConversationActions,
     {
       actions,
@@ -811,7 +816,7 @@ const ConversationRoot = ({
       contextPills,
       isElevated: hasContentBehind
     }
-  )))), showBranding && /* @__PURE__ */ React__default.createElement("div", { className: "relative z-10 pb-2" }, /* @__PURE__ */ React__default.createElement(Branding, null))))));
+  )))), showBranding && /* @__PURE__ */ React__default.createElement("div", { className: "relative z-10 pt-2" }, /* @__PURE__ */ React__default.createElement(Branding, null))))));
 };
 const Branding = () => /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center gap-1 text-[0.625rem] text-subtle" }, /* @__PURE__ */ React__default.createElement("span", null, "Powered by"), /* @__PURE__ */ React__default.createElement(Logo, { variant: "full", color: "outline", className: "h-2.5 w-auto" }));
 const Conversation = Object.assign(ConversationRoot, {
@@ -819,8 +824,8 @@ const Conversation = Object.assign(ConversationRoot, {
   Input: ConversationInput,
   Suggestions: ConversationSuggestions,
   Actions: ConversationActions,
-  Loading: ConversationLoading
+  Loading: ConversationStatus
 });
 
-export { ContextPillBadge as C, Conversation as a, ConversationActions as b, ConversationInput as c, ConversationLoading as d, ConversationMessageAssistant as e, ConversationMessageUser as f, ConversationMessages as g, ConversationProvider as h, ConversationSuggestions as i, useConversation as u };
-//# sourceMappingURL=Conversation.BEDav4lr.js.map
+export { ContextPillBadge as C, Conversation as a, ConversationActions as b, ConversationInput as c, ConversationMessageAssistant as d, ConversationMessageUser as e, ConversationMessages as f, ConversationProvider as g, ConversationStatus as h, ConversationSuggestions as i, useConversation as u };
+//# sourceMappingURL=Conversation.BriXFYqU.js.map