@brainfish-ai/components 0.35.19 → 0.36.0

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

@@ -0,0 +1,210 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+import { NextBestActionType } from './types.js';
+import { MemoizedIcon } from '../ui/icon.js';
+import { Button } from '../ui/button.js';
+import { addPopupWidgetUtm } from '../../lib/addUtmParams.js';
+
+const MotionButton = motion(Button);
+const closeBrainfishWidget = () => {
+  if (window.Brainfish?.HelpWidget?.close) {
+    window.Brainfish.HelpWidget.close();
+  }
+};
+const ActionButton = ({ icon, label, index, onClick, showArrowOut = false, asChild = false, children }) => /* @__PURE__ */ React__default.createElement(
+  MotionButton,
+  {
+    initial: { opacity: 0, x: -20 },
+    animate: { opacity: 1, x: 0 },
+    transition: { delay: index * 0.1 },
+    className: "w-full text-left h-12 text-base [&_svg]:size-6",
+    variant: "ghost",
+    onClick,
+    asChild
+  },
+  asChild ? children : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, icon && /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: icon }), /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow" }, label), showArrowOut && /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: "ArrowSquareOut" }))
+);
+const ActionLink = ({ href, icon, label, index, onClick }) => /* @__PURE__ */ React__default.createElement(ActionButton, { icon, label, index, onClick, asChild: true }, /* @__PURE__ */ React__default.createElement("a", { href, target: "_blank", rel: "noopener noreferrer" }, icon && /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: icon }), /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow" }, label), /* @__PURE__ */ React__default.createElement(MemoizedIcon, { iconName: "ArrowSquareOut" })));
+const NextBestActions = ({ nextBestActions, onActionClick }) => {
+  if (!nextBestActions.length) return null;
+  return /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: -20 },
+      className: "w-full"
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "rounded-lg overflow-hidden bg-card border  divide-y divide-dark-300" }, nextBestActions.map((action, index) => {
+      const handleClick = (success) => {
+        onActionClick(action, success);
+      };
+      const key = `${action.label}-${index}`.replace(/\s+/g, "-");
+      switch (action.type) {
+        case NextBestActionType.Email:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionLink,
+            {
+              key,
+              href: `mailto:${action.value}`,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => handleClick()
+            }
+          );
+        case NextBestActionType.Link:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionLink,
+            {
+              key,
+              href: addPopupWidgetUtm(action.value),
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => handleClick()
+            }
+          );
+        case NextBestActionType.Phone:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionLink,
+            {
+              key,
+              href: `tel:${action.value}`,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => handleClick()
+            }
+          );
+        case NextBestActionType.ZendeskChat:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => {
+                if (window.zE) {
+                  closeBrainfishWidget();
+                  window.zE("webWidget", "open");
+                  handleClick(true);
+                } else {
+                  console.error(
+                    "Zendesk Chat is not loaded. Make sure you've included the Zendesk Chat script in your website."
+                  );
+                  handleClick(false);
+                }
+              }
+            }
+          );
+        case NextBestActionType.ZendeskMessenger:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => {
+                if (window.zE) {
+                  closeBrainfishWidget();
+                  window.zE("messenger", "open");
+                  handleClick(true);
+                } else {
+                  console.error(
+                    "Zendesk Messenger is not loaded. Make sure you've included the Zendesk Messenger script in your website."
+                  );
+                  handleClick(false);
+                }
+              }
+            }
+          );
+        case NextBestActionType.IntercomChat:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => {
+                if (window.Intercom) {
+                  closeBrainfishWidget();
+                  window.Intercom("show");
+                  handleClick(true);
+                } else {
+                  console.error(
+                    "Intercom is not loaded. Make sure you've included the Intercom script in your website."
+                  );
+                  handleClick(false);
+                }
+              }
+            }
+          );
+        case NextBestActionType.Freshdesk:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: action.icon,
+              label: action.label,
+              index,
+              onClick: () => {
+                if (window.fcWidget) {
+                  closeBrainfishWidget();
+                  setTimeout(() => {
+                    window.fcWidget.open();
+                    window.fcWidget.show();
+                  }, 300);
+                  handleClick(true);
+                } else {
+                  console.error(
+                    "Freshdesk is not loaded. Make sure you've included the Freshdesk script in your website."
+                  );
+                  handleClick(false);
+                }
+              }
+            }
+          );
+        case NextBestActionType.ZendeskSunshineChat:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: "CalendarBlank",
+              label: action.label,
+              index,
+              onClick: () => handleClick()
+            }
+          );
+        case NextBestActionType.WebhookHandoff:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: "CalendarBlank",
+              label: action.label,
+              index,
+              onClick: () => handleClick()
+            }
+          );
+        default:
+          return /* @__PURE__ */ React__default.createElement(
+            ActionButton,
+            {
+              key,
+              icon: "ArrowCircleRight",
+              label: action.label,
+              index,
+              onClick: () => handleClick(),
+              showArrowOut: true
+            }
+          );
+      }
+    }))
+  );
+};
+
+export { NextBestActions };

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

@@ -0,0 +1,415 @@
+import React__default, { useRef, useState, useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Globe, LockSimple, MagnifyingGlass, Image, ArrowRight, CaretRight } from '@phosphor-icons/react';
+import { getCountry } from 'countries-and-timezones';
+import { Button } from '../ui/button.js';
+import { AttachmentThumbnails } from './AttachmentThumbnails.js';
+import { IncludePageToggle } from './IncludePageToggle.js';
+import { Combobox } from '../combobox/combobox.js';
+import { TwoLevelCombobox } from '../two-level-combobox/two-level-combobox.js';
+import { cn } from '../../lib/utils.js';
+import { useBooleanFlagValue } from '../../lib/feature-flags.js';
+
+const PrimarySearch = React__default.forwardRef(
+  ({
+    query,
+    onQueryChange,
+    onSearch,
+    textConfig,
+    collections = [],
+    currentCollectionId,
+    onCollectionChange,
+    allowedRegions = [],
+    onRegionChange,
+    apiKey,
+    fetchRegionConfig,
+    enableFileAttachment = false,
+    attachedFiles = [],
+    isUploading = false,
+    onAddFiles,
+    onRemoveFile,
+    isSearching = false,
+    autocompleteSuggestions = [],
+    onAutocompleteSuggestionSelect,
+    isAgentAssist = false,
+    includePageEnabled = false,
+    includePageLoading = false,
+    includePageDisabled = false,
+    onIncludePageToggle
+  }, ref) => {
+    const fileInputRef = useRef(null);
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const handlePaste = (e) => {
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.clipboardData.files);
+      if (files.length > 0) {
+        e.preventDefault();
+        onAddFiles(files);
+      }
+    };
+    const handleDrop = (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (!enableFileAttachment || !onAddFiles) return;
+      const files = Array.from(e.dataTransfer.files);
+      if (files.length > 0) {
+        onAddFiles(files);
+      }
+    };
+    const handleDragOver = (e) => {
+      e.preventDefault();
+      if (enableFileAttachment) setIsDragOver(true);
+    };
+    const handleDragLeave = () => {
+      setIsDragOver(false);
+    };
+    const showIncludePageToggle = useBooleanFlagValue("showIncludePageToggle", false);
+    const regionItems = [
+      {
+        value: "all",
+        label: "All regions",
+        icon: /* @__PURE__ */ React__default.createElement(Globe, { className: "size-4" })
+      },
+      ...allowedRegions.map((region) => {
+        const country = getCountry(region);
+        return {
+          value: region,
+          label: country?.name || region,
+          icon: /* @__PURE__ */ React__default.createElement(
+            "img",
+            {
+              alt: `${country?.name || region}`,
+              src: `https://purecatamphetamine.github.io/country-flag-icons/3x2/${region}.svg`,
+              className: "w-5"
+            }
+          )
+        };
+      })
+    ];
+    const fetchCollectionsForRegion = React__default.useCallback(
+      async (regionId) => {
+        if (!apiKey || !fetchRegionConfig) {
+          console.warn("No apiKey or fetchRegionConfig provided, falling back to current collections");
+          return collections.map((collection) => ({
+            value: collection.id,
+            label: collection.name,
+            icon: collection.siteEnabled ? /* @__PURE__ */ React__default.createElement(Globe, { className: "size-4" }) : /* @__PURE__ */ React__default.createElement(LockSimple, { className: "size-4" })
+          }));
+        }
+        try {
+          const regionConfig = await fetchRegionConfig(apiKey, regionId);
+          const regionCollections = regionConfig?.settings?.collections || [];
+          return regionCollections.map((collection) => ({
+            value: collection.id,
+            label: collection.name,
+            icon: collection.siteEnabled ? /* @__PURE__ */ React__default.createElement(Globe, { className: "size-4" }) : /* @__PURE__ */ React__default.createElement(LockSimple, { className: "size-4" })
+          }));
+        } catch (error) {
+          console.error("Error fetching collections for region:", error);
+          return collections.map((collection) => ({
+            value: collection.id,
+            label: collection.name,
+            icon: collection.siteEnabled ? /* @__PURE__ */ React__default.createElement(Globe, { className: "size-4" }) : /* @__PURE__ */ React__default.createElement(LockSimple, { className: "size-4" })
+          }));
+        }
+      },
+      [apiKey, fetchRegionConfig, collections]
+    );
+    const handleSelectionChange = (region, collection) => {
+      if (region && onRegionChange) {
+        onRegionChange(region.value);
+      }
+      if (collection && onCollectionChange) {
+        onCollectionChange(collection.value);
+      }
+    };
+    const adjustTextareaHeight = (textarea) => {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    };
+    const handleKeyPress = (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !isUploading) {
+        e.preventDefault();
+        onSearch();
+      }
+    };
+    useEffect(() => {
+      const handleClickOutside = (event) => {
+        if (!event.target.closest(".suggestions-dropdown")) {
+          setShowSuggestions(false);
+        }
+      };
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+    useEffect(() => {
+      if (query.trim()) {
+        setShowSuggestions(true);
+      }
+    }, [query]);
+    const shouldShowSuggestions = showSuggestions && query.trim() && autocompleteSuggestions.length > 0;
+    const dropdownVariants = {
+      hidden: {
+        opacity: 0,
+        scale: 0.95,
+        transformOrigin: "top"
+      },
+      visible: {
+        opacity: 1,
+        scale: 1,
+        transition: {
+          type: "spring",
+          stiffness: 500,
+          damping: 30,
+          mass: 0.5
+        }
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.95,
+        transition: {
+          duration: 0.15,
+          ease: "easeOut"
+        }
+      }
+    };
+    const itemVariants = {
+      hidden: {
+        opacity: 0,
+        x: -4
+      },
+      visible: {
+        opacity: 1,
+        x: 0,
+        transition: {
+          duration: 0.2
+        }
+      }
+    };
+    const listVariants = {
+      visible: {
+        transition: {
+          staggerChildren: 0.03,
+          delayChildren: 0.05
+        }
+      }
+    };
+    return /* @__PURE__ */ React__default.createElement("div", { className: "relative w-full", "data-name": "PrimarySearch" }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        className: cn(
+          "relative w-full overflow-hidden bg-background border border-border transition-all",
+          shouldShowSuggestions ? "rounded-t-md" : "rounded-md",
+          isDragOver && enableFileAttachment && "ring-2 ring-primary"
+        ),
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onPaste: handlePaste
+      },
+      isDragOver && enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: "absolute inset-0 z-10 flex items-center justify-center rounded-md",
+          style: { backgroundColor: "color-mix(in srgb, var(--bfc-card) 90%, transparent)" }
+        },
+        /* @__PURE__ */ React__default.createElement("p", { className: "text-sm font-medium text-muted-foreground" }, "Drop images here to attach")
+      ),
+      enableFileAttachment && /* @__PURE__ */ React__default.createElement(
+        AttachmentThumbnails,
+        {
+          items: attachedFiles.map((f) => ({ id: f.id, src: f.preview, url: f.publicUrl, status: f.status })),
+          size: "md",
+          onRemove: onRemoveFile,
+          className: "pt-3 px-3 bg-card"
+        }
+      ),
+      /* @__PURE__ */ React__default.createElement("div", { className: "p-3 flex items-center bg-card", "data-name": "search-input" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "h-5 w-5 mr-2 text-muted-foreground", "aria-hidden": true, role: "presentation" }), /* @__PURE__ */ React__default.createElement(
+        "textarea",
+        {
+          ref,
+          value: query,
+          onChange: (e) => {
+            onQueryChange(e.target.value);
+            adjustTextareaHeight(e.target);
+          },
+          onKeyDown: handleKeyPress,
+          onFocus: () => setShowSuggestions(true),
+          placeholder: textConfig.searchPlaceholder,
+          className: cn(
+            "w-full resize-none !outline-none text-base py-1 min-h-9",
+            "overflow-hidden border-none bg-transparent shadow-none",
+            "placeholder:text-gray-400 text-dark-900 !ring-0"
+          ),
+          rows: 1
+        }
+      ), isSearching && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-center ml-2" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 border-2 border-t-transparent border-primary" }))),
+      !shouldShowSuggestions && /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center justify-between px-3 py-2 border-t border-border" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, enableFileAttachment && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+        "input",
+        {
+          type: "file",
+          ref: fileInputRef,
+          accept: "image/jpeg,image/png,image/gif,image/webp",
+          multiple: true,
+          className: "hidden",
+          onChange: (e) => {
+            if (e.target.files) {
+              onAddFiles?.(Array.from(e.target.files));
+            }
+            e.target.value = "";
+          }
+        }
+      ), /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "rounded-md size-8 hover:bg-opacity-80 disabled:opacity-50",
+          onClick: () => fileInputRef.current?.click(),
+          disabled: attachedFiles.length >= 5,
+          "aria-label": textConfig.attachImageText
+        },
+        /* @__PURE__ */ React__default.createElement(Image, { weight: "regular", className: "size-4 text-secondary-foreground" })
+      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex gap-1", "data-name": "collections-dropdown" }, allowedRegions.length > 0 && collections.length > 0 ? (
+        // Two-level selection: Region -> Collection
+        /* @__PURE__ */ React__default.createElement(
+          TwoLevelCombobox,
+          {
+            firstLevelItems: regionItems,
+            fetchSecondLevelItems: fetchCollectionsForRegion,
+            onSelectionChange: handleSelectionChange,
+            firstLevelLabel: "Region",
+            secondLevelLabel: "Collection",
+            firstLevelPlaceholder: "All documents",
+            className: "min-w-[200px]",
+            displayLabel: false
+          }
+        )
+      ) : collections.length > 0 ? (
+        // Single-level selection: Collection only (fallback when no regions)
+        /* @__PURE__ */ React__default.createElement(
+          Combobox,
+          {
+            options: collections.map((collection) => ({
+              value: collection.id,
+              label: collection.name,
+              icon: collection.siteEnabled ? /* @__PURE__ */ React__default.createElement(Globe, { className: "size-4" }) : /* @__PURE__ */ React__default.createElement(LockSimple, { className: "size-4" })
+            })),
+            value: currentCollectionId === "all" ? void 0 : currentCollectionId,
+            defaultValueLabel: "All documents",
+            placeholder: "Select collection",
+            noResultsLabel: "No collections found",
+            dropdownWidth: 200,
+            onChange: (value) => onCollectionChange?.(value)
+          }
+        )
+      ) : null), isAgentAssist && onIncludePageToggle && showIncludePageToggle && /* @__PURE__ */ React__default.createElement(
+        IncludePageToggle,
+        {
+          value: includePageEnabled,
+          loading: includePageLoading,
+          disabled: includePageDisabled,
+          onToggle: onIncludePageToggle
+        }
+      )), /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center", "data-name": "search-button" }, /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "sm",
+          disabled: !query || isSearching || isUploading,
+          "aria-disabled": !query || isSearching || isUploading,
+          className: "rounded-md size-8 disabled:opacity-50 bg-primary",
+          onClick: onSearch
+        },
+        isSearching ? /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center", role: "status", "aria-live": "polite" }, /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: "animate-spin rounded-full size-4 border-2 border-t-transparent border-white",
+            "aria-hidden": "true"
+          }
+        ), /* @__PURE__ */ React__default.createElement("span", { className: "sr-only" }, "Loading")) : /* @__PURE__ */ React__default.createElement(
+          ArrowRight,
+          {
+            className: "text-primary-foreground",
+            size: 16,
+            weight: "bold",
+            "aria-label": "Submit question"
+          }
+        )
+      )))
+    ), /* @__PURE__ */ React__default.createElement(AnimatePresence, { mode: "wait" }, shouldShowSuggestions && /* @__PURE__ */ React__default.createElement(
+      motion.div,
+      {
+        variants: dropdownVariants,
+        initial: "hidden",
+        animate: "visible",
+        exit: "exit",
+        className: cn(
+          "suggestions-dropdown absolute",
+          "left-0 right-0 z-50",
+          "overflow-hidden bg-card",
+          "border-border border border-t-0 rounded-b-md shadow-md -mt-px",
+          "md:relative"
+        )
+      },
+      /* @__PURE__ */ React__default.createElement(motion.div, { variants: itemVariants }, query.trim() && /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          role: "option",
+          "aria-selected": false,
+          tabIndex: 0,
+          className: cn(
+            "px-4 py-3",
+            "cursor-pointer",
+            "flex items-center gap-3",
+            "transition-colors duration-200",
+            "hover:bg-dark-100/50 text-foreground bg-dark-200",
+            "border-b border border-border"
+          ),
+          onClick: () => {
+            onSearch();
+            setShowSuggestions(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onSearch();
+              setShowSuggestions(false);
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-4 flex-shrink-0 text-secondary-foreground" }),
+        /* @__PURE__ */ React__default.createElement("span", { className: "text-[15px]" }, query),
+        /* @__PURE__ */ React__default.createElement("div", { className: "ml-auto flex items-center" }, /* @__PURE__ */ React__default.createElement(CaretRight, { className: "size-4 text-secondary-foreground" }))
+      )),
+      /* @__PURE__ */ React__default.createElement(motion.div, { variants: listVariants, initial: "hidden", animate: "visible" }, autocompleteSuggestions.map((suggestion) => /* @__PURE__ */ React__default.createElement(
+        motion.div,
+        {
+          key: suggestion.id,
+          variants: itemVariants,
+          role: "option",
+          "aria-selected": false,
+          tabIndex: 0,
+          className: "px-4 py-3 cursor-pointer flex items-center gap-3 transition-colors duration-200 hover:bg-dark-300 text-foreground",
+          onClick: () => {
+            onAutocompleteSuggestionSelect?.(suggestion);
+            setShowSuggestions(false);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              onAutocompleteSuggestionSelect?.(suggestion);
+              setShowSuggestions(false);
+            }
+          }
+        },
+        /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-4 flex-shrink-0 text-secondary-foreground" }),
+        /* @__PURE__ */ React__default.createElement("span", { className: "text-[15px]" }, suggestion.question),
+        /* @__PURE__ */ React__default.createElement("div", { className: "ml-auto flex items-center" }, /* @__PURE__ */ React__default.createElement(CaretRight, { className: "size-4 text-secondary-foreground" }))
+      )))
+    )));
+  }
+);
+PrimarySearch.displayName = "PrimarySearch";
+
+export { PrimarySearch };

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

@@ -0,0 +1,28 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+
+function ResolvedConversationFooter({
+  onStartNewConversation,
+  message = "This conversation is closed. Messages are read-only."
+}) {
+  return /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.5 },
+      className: "bg-card shadow-top-soft"
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "container flex flex-col items-center justify-center p-3 gap-2 text-center" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-muted-foreground" }, message), /* @__PURE__ */ React__default.createElement("p", { className: "m-0 text-sm font-medium text-foreground" }, "Still need help?"), /* @__PURE__ */ React__default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: onStartNewConversation,
+        className: "h-8 rounded-md px-4 text-sm bg-primary text-primary-foreground"
+      },
+      "Start new conversation"
+    ))
+  );
+}
+
+export { ResolvedConversationFooter };

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

@@ -0,0 +1,20 @@
+import React__default from 'react';
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '../ui/tooltip.js';
+import { Button } from '../ui/button.js';
+
+function Suggestions({ suggestions, onQuestionClick, title = "Suggested questions" }) {
+  if (!suggestions || suggestions.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full p-3 md:p-0", "data-name": "Suggestions" }, /* @__PURE__ */ React__default.createElement("h3", { className: "text-base font-medium mb-4 text-foreground" }, title), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap gap-2" }, suggestions.map((suggestion) => /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      key: suggestion.id,
+      onClick: () => onQuestionClick(suggestion),
+      variant: "outline",
+      className: "border-border font-normal whitespace-normal h-auto text-left"
+    },
+    suggestion.messageCount !== void 0 && /* @__PURE__ */ React__default.createElement(TooltipProvider, null, /* @__PURE__ */ React__default.createElement(Tooltip, null, /* @__PURE__ */ React__default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React__default.createElement("span", { className: "bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full text-xs min-w-[20px] border flex items-center justify-center border-border" }, suggestion.messageCount)), /* @__PURE__ */ React__default.createElement(TooltipContent, null, /* @__PURE__ */ React__default.createElement("p", null, suggestion.messageCount, " messages in this conversation")))),
+    /* @__PURE__ */ React__default.createElement("span", { className: "" }, suggestion.question)
+  ))));
+}
+
+export { Suggestions };