@brainfish-ai/components 0.35.20 → 0.36.1

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

@@ -0,0 +1,35 @@
+import React__default from 'react';
+import { Browser, FileText, Folder, ChatsTeardrop, File, FileDoc, FilePdf, Video, Image, CircleNotch, X } from '@phosphor-icons/react';
+
+const ICON_MAP = {
+  image: Image,
+  video: Video,
+  pdf: FilePdf,
+  doc: FileDoc,
+  file: File,
+  channel: ChatsTeardrop,
+  collection: Folder,
+  article: FileText,
+  page: Browser
+};
+const ContextPillBadge = ({ pill, onRemove }) => {
+  const Icon = pill.iconType ? ICON_MAP[pill.iconType] : null;
+  const fillPercent = pill.loading ? pill.progress ?? 0 : 100;
+  return /* @__PURE__ */ React__default.createElement("span", { className: "relative inline-flex items-center gap-0.5 overflow-hidden rounded-full border border-muted px-2 py-1 text-xs text-muted-foreground" }, /* @__PURE__ */ React__default.createElement(
+    "span",
+    {
+      className: "absolute inset-0 bg-muted transition-[width] duration-300 ease-out",
+      style: { width: `${fillPercent}%` }
+    }
+  ), /* @__PURE__ */ React__default.createElement("span", { className: "relative flex items-center gap-0.5" }, pill.loading ? /* @__PURE__ */ React__default.createElement(CircleNotch, { className: "h-3 w-3 shrink-0 mr-0.5 animate-spin" }) : Icon && /* @__PURE__ */ React__default.createElement(Icon, { className: "h-3 w-3 shrink-0 mr-0.5" }), pill.label, onRemove && /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      className: "ml-0.5 inline-flex h-3.5 w-3.5 items-center justify-center rounded-full hover:bg-muted-foreground/20",
+      onClick: () => onRemove(pill)
+    },
+    /* @__PURE__ */ React__default.createElement(X, { className: "h-2.5 w-2.5" })
+  )));
+};
+
+export { ContextPillBadge };

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

@@ -0,0 +1,106 @@
+import React__default, { useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { TooltipProvider } from '../ui/tooltip.js';
+import { cn } from '../../lib/utils.js';
+import { ConversationProvider } from './ConversationContext.js';
+import { ConversationMessages } from './ConversationMessages.js';
+import { ConversationInput } from './ConversationInput.js';
+import { ConversationSuggestions } from './ConversationSuggestions.js';
+import { ConversationActions } from './ConversationActions.js';
+import { ConversationStatus } from './ConversationStatus.js';
+import { ConversationHeader } from './ConversationHeader.js';
+import { Logo } from '../logo/logo.js';
+import { hasUsedConversationBefore, createWelcomeMessageAt, markConversationAsUsed, streamWelcomeText, getWelcomeText, WELCOME_STREAM_CHUNK_SIZE } from './welcome.js';
+
+const ConversationRoot = ({
+  messages,
+  callbacks,
+  children,
+  suggestions = [],
+  actions = [],
+  placeholder,
+  attachments,
+  collections,
+  pages,
+  acceptedFileTypes,
+  showBranding = false,
+  className,
+  showHistoryButton = false,
+  headerTitle = "Ask Brainfish"
+}) => {
+  const isCompound = !!children;
+  const bottomRef = useRef(null);
+  const [bottomHeight, setBottomHeight] = useState(0);
+  const [hasContentBehind, setContentBehind] = useState(false);
+  const [isScrolledFromTop, setIsScrolledFromTop] = useState(false);
+  const [isFirstVisit] = useState(() => {
+    if (typeof window === "undefined") return true;
+    return !hasUsedConversationBefore();
+  });
+  const welcomeText = getWelcomeText(isFirstVisit);
+  const [welcomeMessage, setWelcomeMessage] = useState(
+    () => createWelcomeMessageAt(welcomeText, WELCOME_STREAM_CHUNK_SIZE)
+  );
+  const displayMessages = messages.length > 0 ? messages : [welcomeMessage];
+  useEffect(() => {
+    if (isFirstVisit) {
+      markConversationAsUsed();
+    }
+  }, [isFirstVisit]);
+  useLayoutEffect(() => {
+    if (messages.length > 0) return;
+    return streamWelcomeText(welcomeText, setWelcomeMessage);
+  }, [messages.length, welcomeText]);
+  useEffect(() => {
+    const el = bottomRef.current;
+    if (!el) return;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) setBottomHeight(entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(
+    ConversationProvider,
+    {
+      messages: displayMessages,
+      callbacks,
+      reportScrolledFromTop: setIsScrolledFromTop
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: cn("flex h-full flex-col pb-4", className) }, /* @__PURE__ */ React__default.createElement(
+      ConversationHeader,
+      {
+        headerTitle,
+        showHistoryButton,
+        showBorder: isScrolledFromTop
+      }
+    ), 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-2" }, /* @__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,
+        onActionClick: (action) => callbacks.onActionClick?.(action, "")
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      ConversationInput,
+      {
+        placeholder,
+        attachments,
+        collections,
+        pages,
+        acceptedFileTypes,
+        isElevated: hasContentBehind
+      }
+    )))), 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" }));
+Branding.displayName = "Branding";
+const Conversation = Object.assign(ConversationRoot, {
+  Header: ConversationHeader,
+  Messages: ConversationMessages,
+  Input: ConversationInput,
+  Suggestions: ConversationSuggestions,
+  Actions: ConversationActions,
+  Loading: ConversationStatus
+});
+
+export { Conversation };

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { cn } from '../../lib/utils.js';
+
+const ConversationActions = ({ actions, onActionClick, className }) => {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex flex-wrap gap-2 px-2 py-2", className) }, actions.map((action) => /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      key: action.id,
+      type: "button",
+      className: "inline-flex items-center gap-2 rounded-full border border-border px-4 py-2 text-sm text-foreground hover:bg-muted transition-colors",
+      onClick: () => onActionClick?.(action)
+    },
+    action.label,
+    action.description && /* @__PURE__ */ React__default.createElement("span", { className: "text-muted-foreground" }, action.description)
+  )));
+};
+ConversationActions.displayName = "ConversationActions";
+
+export { ConversationActions };

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

@@ -0,0 +1,49 @@
+import React__default, { useRef, useLayoutEffect, useMemo, useContext, createContext } from 'react';
+import { WELCOME_MESSAGE_ID } from './welcome.js';
+
+const ConversationContext = createContext(null);
+const defaultCallbacks = {
+  onCopy: (_messageId, content) => void navigator.clipboard.writeText(content)
+};
+function useConversation() {
+  const ctx = useContext(ConversationContext);
+  if (!ctx) {
+    throw new Error("useConversation must be used within a <Conversation> provider");
+  }
+  return ctx;
+}
+function ConversationProvider({
+  messages,
+  callbacks,
+  reportScrolledFromTop,
+  children
+}) {
+  const isStreaming = messages.some((m) => m.status === "streaming" && m.id !== WELCOME_MESSAGE_ID);
+  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),
+      onCitationClick: (...args) => callbacksRef.current.onCitationClick?.(...args),
+      onAttachmentAdd: (...args) => callbacksRef.current.onAttachmentAdd?.(...args),
+      onAttachmentRemove: (...args) => callbacksRef.current.onAttachmentRemove?.(...args),
+      onCopy: (...args) => callbacksRef.current.onCopy?.(...args),
+      onClose: (...args) => callbacksRef.current.onClose?.(...args),
+      onHistoryClick: (...args) => callbacksRef.current.onHistoryClick?.(...args),
+      onNewConversationClick: (...args) => callbacksRef.current.onNewConversationClick?.(...args)
+    }),
+    []
+  );
+  const value = useMemo(
+    () => ({ messages, callbacks: stableCallbacks, isStreaming, reportScrolledFromTop }),
+    [messages, stableCallbacks, isStreaming, reportScrolledFromTop]
+  );
+  return /* @__PURE__ */ React__default.createElement(ConversationContext.Provider, { value }, children);
+}
+
+export { ConversationProvider, useConversation };

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

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { ClockCounterClockwise, Plus, X } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+import { AIBadge } from '../ai-button/ai-badge.js';
+import { Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { useConversation } from './ConversationContext.js';
+import { cn } from '../../lib/utils.js';
+
+const HeaderButtonGroup = ({
+  className,
+  showHistoryButton = false,
+  onClose,
+  onHistoryClick,
+  onNewConversationClick
+}) => {
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("flex items-center h-8", className) }, showHistoryButton && /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", onClick: onHistoryClick }, /* @__PURE__ */ React__default.createElement(ClockCounterClockwise, { size: 24 }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, "Conversation history")), /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", className: "", onClick: onNewConversationClick }, /* @__PURE__ */ React__default.createElement(Plus, { size: 24 }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, "New conversation")), /* @__PURE__ */ React__default.createElement("div", { className: "mx-1.5 w-px h-4 bg-base-primary" }), /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(Button, { variant: "ghost", size: "icon", onClick: onClose }, /* @__PURE__ */ React__default.createElement(X, { size: 24 }))), /* @__PURE__ */ React__default.createElement(TooltipContent, null, "Close Ask Brainfish")));
+};
+const ConversationHeader = ({
+  className,
+  headerTitle,
+  showHistoryButton = false,
+  showBorder = false
+}) => {
+  const { callbacks } = useConversation();
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-between border-b p-2 transition-colors duration-200",
+        showBorder ? "border-border" : "border-transparent",
+        className
+      )
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(AIBadge, { size: 24 }), headerTitle && /* @__PURE__ */ React__default.createElement("div", { className: "text-dark text-sm" }, headerTitle)),
+    /* @__PURE__ */ React__default.createElement(
+      HeaderButtonGroup,
+      {
+        className: "self-end",
+        showHistoryButton,
+        onClose: callbacks.onClose,
+        onHistoryClick: callbacks.onHistoryClick,
+        onNewConversationClick: callbacks.onNewConversationClick
+      }
+    )
+  );
+};
+ConversationHeader.displayName = "ConversationHeader";
+
+export { ConversationHeader };

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

@@ -0,0 +1,350 @@
+import React__default, { useState, useRef, useCallback } from 'react';
+import { Files, Plus, CaretRight, Stop, ArrowUp } from '@phosphor-icons/react';
+import { cn } from '../../lib/utils.js';
+import { useConversation } from './ConversationContext.js';
+import { ContextPillBadge } from './ContextPillBadge.js';
+import { InputImageThumbnails } from './AttachmentPreviews.js';
+import { mimeTypeToIconType } from './attachmentUtils.js';
+import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from '../ui/dropdown-menu.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover.js';
+import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../ui/command.js';
+import { RichTextInput } from '../rich-text-input/RichTextInput.js';
+
+const COLLECTION_SEARCH_THRESHOLD = 5;
+const MAX_FILE_ATTACHMENTS = 10;
+function isFileAccepted(file, acceptedTypes) {
+  if (!acceptedTypes || acceptedTypes.length === 0) return true;
+  return acceptedTypes.some((type) => {
+    if (type.startsWith(".")) return file.name.toLowerCase().endsWith(type.toLowerCase());
+    if (type.endsWith("/*")) return file.type.startsWith(type.slice(0, -1));
+    return file.type === type;
+  });
+}
+function attachmentToPill(attachment) {
+  switch (attachment.type) {
+    case "file":
+      return {
+        id: attachment.id,
+        label: attachment.file.name,
+        iconType: mimeTypeToIconType(attachment.file.mimeType),
+        loading: attachment.loading,
+        progress: attachment.progress
+      };
+    case "page":
+      return { id: attachment.id, label: attachment.page.title, iconType: "page" };
+    case "entity":
+      return { id: attachment.id, label: attachment.entity.title, iconType: attachment.entity.type };
+  }
+}
+const ConversationInput = ({
+  placeholder = "Ask anything…",
+  attachments = [],
+  collections = [],
+  pages = [],
+  acceptedFileTypes,
+  disabled = false,
+  isElevated = false,
+  className
+}) => {
+  const { callbacks, isStreaming } = useConversation();
+  const [hasText, setHasText] = useState(false);
+  const latestMarkdown = useRef("");
+  const editorRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragCounterRef = useRef(0);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [collectionPickerOpen, setCollectionPickerOpen] = useState(false);
+  const collectionCloseTimer = useRef(null);
+  const collectionHasFocus = useRef(false);
+  const openCollectionPicker = useCallback(() => {
+    if (collectionCloseTimer.current) {
+      clearTimeout(collectionCloseTimer.current);
+      collectionCloseTimer.current = null;
+    }
+    setCollectionPickerOpen(true);
+  }, []);
+  const scheduleCollectionPickerClose = useCallback(() => {
+    collectionCloseTimer.current = setTimeout(() => {
+      if (!collectionHasFocus.current) {
+        setCollectionPickerOpen(false);
+      }
+    }, 150);
+  }, []);
+  const imageAttachments = attachments.filter(
+    (a) => a.type === "file" && a.file.mimeType.startsWith("image/")
+  );
+  const otherAttachments = attachments.filter((a) => !(a.type === "file" && a.file.mimeType.startsWith("image/")));
+  const pills = otherAttachments.map(attachmentToPill);
+  const hasUploadingAttachments = attachments.some((a) => a.type === "file" && a.loading);
+  const isSendDisabled = disabled || isStreaming || hasUploadingAttachments;
+  const showMenu = collections.length > 0 || pages.length > 0;
+  const handleSend = useCallback(
+    (markdown) => {
+      const trimmed = (markdown ?? latestMarkdown.current).trim();
+      if (!trimmed || isSendDisabled) return;
+      callbacks.onSend?.(trimmed, attachments.length > 0 ? attachments : void 0);
+      editorRef.current?.clear();
+      editorRef.current?.focus();
+    },
+    [isSendDisabled, callbacks, attachments]
+  );
+  const handleStop = useCallback(() => {
+    callbacks.onStop?.();
+  }, [callbacks]);
+  const handleCollectionSelect = useCallback(
+    (collection) => {
+      setCollectionPickerOpen(false);
+      setMenuOpen(false);
+      callbacks.onAttachmentAdd?.({
+        type: "select-entity",
+        entity: { id: collection.id, type: "collection", title: collection.title, url: collection.url }
+      });
+    },
+    [callbacks]
+  );
+  const handlePageSelect = useCallback(() => {
+    if (!pages[0]) return;
+    setMenuOpen(false);
+    callbacks.onAttachmentAdd?.({ type: "select-page", page: pages[0] });
+  }, [pages, callbacks]);
+  const fileAttachmentCount = attachments.filter((a) => a.type === "file").length;
+  const addFiles = useCallback(
+    (files) => {
+      const toAdd = files.slice(0, MAX_FILE_ATTACHMENTS - fileAttachmentCount);
+      if (toAdd.length < files.length) alert(`You can only attach up to ${MAX_FILE_ATTACHMENTS} files at a time.`);
+      if (toAdd.length > 0) callbacks.onAttachmentAdd?.({ type: "add-files", files: toAdd });
+    },
+    [fileAttachmentCount, callbacks]
+  );
+  const handleFileChange = useCallback(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      e.target.value = "";
+      if (files.length > 0) addFiles(files);
+    },
+    [addFiles]
+  );
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    dragCounterRef.current++;
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    dragCounterRef.current--;
+    if (dragCounterRef.current === 0) setIsDragging(false);
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "copy";
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      dragCounterRef.current = 0;
+      setIsDragging(false);
+      if (disabled || isStreaming) return;
+      const dropped = Array.from(e.dataTransfer.files);
+      const files = dropped.filter((f) => isFileAccepted(f, acceptedFileTypes));
+      if (dropped.length > 0 && files.length === 0) {
+        alert("That file type isn't supported. Please try a different format.");
+        return;
+      }
+      if (files.length > 0) addFiles(files);
+    },
+    [disabled, isStreaming, acceptedFileTypes, addFiles]
+  );
+  const handlePaste = useCallback(
+    (e) => {
+      if (disabled || isStreaming) return;
+      const files = [];
+      if (e.clipboardData.files.length > 0) {
+        files.push(...Array.from(e.clipboardData.files));
+      } else {
+        for (const item of Array.from(e.clipboardData.items)) {
+          if (item.kind === "file") {
+            const file = item.getAsFile();
+            if (file) files.push(file);
+          }
+        }
+      }
+      const accepted = files.filter((f) => isFileAccepted(f, acceptedFileTypes));
+      if (files.length > 0 && accepted.length === 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        alert("That file type isn't supported. Please try a different format.");
+        return;
+      }
+      if (accepted.length > 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        addFiles(accepted);
+      }
+    },
+    [disabled, isStreaming, acceptedFileTypes, addFiles]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: cn("w-full", className) }, /* @__PURE__ */ React__default.createElement(
+    "input",
+    {
+      ref: fileInputRef,
+      type: "file",
+      multiple: true,
+      accept: acceptedFileTypes?.join(","),
+      className: "sr-only",
+      onChange: handleFileChange
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "relative w-full rounded-t-2xl rounded-b-lg bg-gradient-yellowfin p-2 transition-shadow duration-300",
+        isElevated && "shadow-[0_-20px_25px_-5px_rgba(0,0,0,0.1),0_-8px_10px_-6px_rgba(0,0,0,0.1)]"
+      )
+    },
+    /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: "relative w-full rounded-t-lg rounded-b bg-surface shadow-md",
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onPasteCapture: handlePaste
+      },
+      isDragging && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 z-10 flex items-center justify-center rounded-t-lg rounded-b pointer-events-none",
+          style: { backgroundColor: "color-mix(in srgb, var(--bfc-surface) 90%, transparent)" }
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col items-center gap-1.5" }, /* @__PURE__ */ React__default.createElement(Files, { className: "h-5 w-5 text-muted-foreground" }), /* @__PURE__ */ React__default.createElement("span", { className: "text-sm text-muted-foreground" }, "Drop files here"))
+      ),
+      /* @__PURE__ */ React__default.createElement(
+        InputImageThumbnails,
+        {
+          attachments: imageAttachments,
+          onRemove: (a) => callbacks.onAttachmentRemove?.(a),
+          className: "px-3 pt-3"
+        }
+      ),
+      pills.length > 0 && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap gap-1.5 px-3 pt-3" }, pills.map((pill) => {
+        const attachment = otherAttachments.find((a) => a.id === pill.id);
+        return /* @__PURE__ */ React__default.createElement(
+          ContextPillBadge,
+          {
+            key: pill.id,
+            pill,
+            onRemove: attachment ? () => callbacks.onAttachmentRemove?.(attachment) : void 0
+          }
+        );
+      })),
+      /* @__PURE__ */ React__default.createElement(
+        RichTextInput,
+        {
+          ref: editorRef,
+          placeholder,
+          disabled,
+          autoFocus: true,
+          className: "w-full bg-transparent p-4 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+          onChange: (markdown) => {
+            latestMarkdown.current = markdown;
+            setHasText(markdown.trim().length > 0);
+          },
+          onSubmit: handleSend
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-2 pb-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-1" }, showMenu ? /* @__PURE__ */ React__default.createElement(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen }, /* @__PURE__ */ React__default.createElement(DropdownMenuTrigger, { asChild: true, disabled: disabled || isStreaming }, /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex h-6 w-6 items-center justify-center rounded text-default hover:bg-muted transition-all",
+            menuOpen && "shadow-md dark:shadow-md"
+          ),
+          disabled: disabled || isStreaming
+        },
+        /* @__PURE__ */ React__default.createElement(Plus, { className: cn("h-4 w-4 transition-transform duration-200", menuOpen && "-rotate-45") })
+      )), /* @__PURE__ */ React__default.createElement(
+        DropdownMenuContent,
+        {
+          align: "end",
+          side: "right",
+          className: "rounded border-none shadow-md bg-surface p-2 min-w-[200px] dark:border-none dark:shadow-md"
+        },
+        collections.length > 0 && /* @__PURE__ */ React__default.createElement(Popover, { open: collectionPickerOpen, onOpenChange: setCollectionPickerOpen }, /* @__PURE__ */ React__default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+          DropdownMenuItem,
+          {
+            className: "p-2",
+            onSelect: (e) => e.preventDefault(),
+            onMouseEnter: openCollectionPicker,
+            onMouseLeave: scheduleCollectionPickerClose,
+            onFocus: openCollectionPicker
+          },
+          "Collection",
+          /* @__PURE__ */ React__default.createElement(CaretRight, { className: "ml-auto h-4 w-4" })
+        )), /* @__PURE__ */ React__default.createElement(
+          PopoverContent,
+          {
+            className: "w-[200px] rounded border-none p-0 shadow-md dark:border-none dark:shadow-md",
+            side: "right",
+            align: "start",
+            onMouseEnter: openCollectionPicker,
+            onMouseLeave: scheduleCollectionPickerClose,
+            onFocusCapture: () => {
+              collectionHasFocus.current = true;
+            },
+            onBlurCapture: () => {
+              collectionHasFocus.current = false;
+              scheduleCollectionPickerClose();
+            }
+          },
+          /* @__PURE__ */ React__default.createElement(Command, null, collections.length > COLLECTION_SEARCH_THRESHOLD && /* @__PURE__ */ React__default.createElement(CommandInput, { placeholder: "Search collections..." }), /* @__PURE__ */ React__default.createElement(CommandList, null, /* @__PURE__ */ React__default.createElement(CommandEmpty, null, "No collections found."), /* @__PURE__ */ React__default.createElement(CommandGroup, null, collections.map((collection) => /* @__PURE__ */ React__default.createElement(
+            CommandItem,
+            {
+              key: collection.id,
+              value: collection.title,
+              onSelect: () => handleCollectionSelect(collection)
+            },
+            collection.title
+          )))))
+        )),
+        pages.length > 0 && /* @__PURE__ */ React__default.createElement(DropdownMenuItem, { className: "p-2", onSelect: handlePageSelect }, "Attach page"),
+        /* @__PURE__ */ React__default.createElement(DropdownMenuItem, { className: "p-2", onSelect: () => fileInputRef.current?.click() }, "Add image or file")
+      )) : /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-6 w-6 items-center justify-center rounded text-default hover:bg-muted transition-all",
+          disabled: disabled || isStreaming,
+          onClick: () => fileInputRef.current?.click()
+        },
+        /* @__PURE__ */ React__default.createElement(Plus, { className: "h-4 w-4" })
+      )), isStreaming ? /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "inline-flex h-6 w-6 items-center justify-center rounded transition-colors bg-input text-primary-foreground hover:bg-input/90",
+          onClick: handleStop,
+          disabled
+        },
+        /* @__PURE__ */ React__default.createElement(Stop, { className: "h-4 w-4", weight: "fill" })
+      ) : /* @__PURE__ */ React__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: cn(
+            "inline-flex h-6 w-6 items-center justify-center rounded transition-colors",
+            hasText && !hasUploadingAttachments ? "bg-input text-primary-foreground hover:bg-input/90" : "bg-muted text-muted-foreground"
+          ),
+          onClick: () => handleSend(),
+          disabled: isSendDisabled || !hasText
+        },
+        /* @__PURE__ */ React__default.createElement(ArrowUp, { className: "h-4 w-4", weight: "bold" })
+      ))
+    )
+  ));
+};
+ConversationInput.displayName = "ConversationInput";
+
+export { ConversationInput };

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

@@ -0,0 +1,16 @@
+import React__default from 'react';
+import { ConversationMessageAssistant } from './ConversationMessageAssistant.js';
+import { ConversationMessageUser } from './ConversationMessageUser.js';
+
+const ConversationMessage = ({ message, className }) => {
+  switch (message.role) {
+    case "ai":
+      return /* @__PURE__ */ React__default.createElement(ConversationMessageAssistant, { message, className });
+    case "user":
+      return /* @__PURE__ */ React__default.createElement(ConversationMessageUser, { message, className });
+    default:
+      return null;
+  }
+};
+
+export { ConversationMessage };