@brainfish-ai/components 0.35.19 → 0.36.0

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

@@ -0,0 +1,73 @@
+import React__default, { useState, useMemo, useContext, createContext } from 'react';
+import { useAnswerList } from './hooks/useAnswerList.js';
+import { useConversationId } from './hooks/useConversationId.js';
+
+const ChatSearchContext = createContext(void 0);
+const ChatSearchProvider = ({ children, searchPath, contentTypeEndpoint, widgetKey }) => {
+  const [query, setQuery] = useState("");
+  const [queryId, setQueryId] = useState("");
+  const [followUpQuery, setFollowUpQuery] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [showResults, setShowResults] = useState(false);
+  const [answers, answerListDispatch] = useAnswerList();
+  const [activeAnswerIndex, setActiveAnswerIndex] = useState(0);
+  const [isLoadingConversation, setIsLoadingConversation] = useState(false);
+  const [loadError, setLoadError] = useState("");
+  const [showMobileCloseWidgetButton, setShowMobileCloseWidgetButton] = useState(false);
+  const { conversationId, setConversationId, clearConversationId } = useConversationId(searchPath, widgetKey);
+  const contextValue = useMemo(
+    () => ({
+      query,
+      setQuery,
+      queryId,
+      setQueryId,
+      followUpQuery,
+      setFollowUpQuery,
+      isSearching,
+      setIsSearching,
+      showResults,
+      setShowResults,
+      answers,
+      answerListDispatch,
+      activeAnswerIndex,
+      setActiveAnswerIndex,
+      conversationId,
+      setConversationId,
+      clearConversationId,
+      isLoadingConversation,
+      setIsLoadingConversation,
+      loadError,
+      setLoadError,
+      showMobileCloseWidgetButton,
+      setShowMobileCloseWidgetButton,
+      contentTypeEndpoint
+    }),
+    [
+      query,
+      queryId,
+      followUpQuery,
+      isSearching,
+      showResults,
+      answers,
+      answerListDispatch,
+      activeAnswerIndex,
+      conversationId,
+      setConversationId,
+      clearConversationId,
+      isLoadingConversation,
+      loadError,
+      showMobileCloseWidgetButton,
+      contentTypeEndpoint
+    ]
+  );
+  return /* @__PURE__ */ React__default.createElement(ChatSearchContext.Provider, { value: contextValue }, children);
+};
+const useChatSearch = () => {
+  const context = useContext(ChatSearchContext);
+  if (!context) {
+    throw new Error("useChatSearch must be used within a ChatSearchProvider");
+  }
+  return context;
+};
+
+export { ChatSearchProvider, useChatSearch };

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

@@ -0,0 +1,39 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+import { CaretRight } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+
+const MotionButton = motion(Button);
+function FollowUpQuestions({ questions, onQuestionClick }) {
+  if (!questions.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" }, /* @__PURE__ */ React__default.createElement("h3", { className: "px-4 py-3 border-b border-b-dark-300 font-bold" }, "Follow-up questions"), questions.map((question, index) => {
+      if (index < 3) {
+        return /* @__PURE__ */ React__default.createElement(
+          MotionButton,
+          {
+            key: index,
+            initial: { opacity: 0, x: -20 },
+            animate: { opacity: 1, x: 0 },
+            transition: { delay: index * 0.1 },
+            onClick: () => onQuestionClick(question),
+            variant: "ghost",
+            className: "w-full text-left"
+          },
+          /* @__PURE__ */ React__default.createElement("span", { className: "flex-grow" }, question),
+          /* @__PURE__ */ React__default.createElement(CaretRight, { className: "", weight: "bold" })
+        );
+      }
+      return null;
+    }))
+  );
+}
+
+export { FollowUpQuestions };

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

@@ -0,0 +1,189 @@
+import React__default, { useState, useRef, useEffect } from 'react';
+import { Image, MagnifyingGlass, ArrowRight } from '@phosphor-icons/react';
+import { motion } from 'framer-motion';
+import styles from './FollowUpSearchBar.module.css.js';
+import { Button } from '../ui/button.js';
+import { Textarea } from '../ui/textarea.js';
+import { AttachmentThumbnails } from './AttachmentThumbnails.js';
+import { cn } from '../../lib/utils.js';
+
+const FollowUpSearchBar = React__default.forwardRef(
+  ({
+    initialQuery = "",
+    onQueryChange,
+    isSearching,
+    handleFollowUpSearch,
+    textConfig,
+    enableFileAttachment = false,
+    attachedFiles = [],
+    isUploading = false,
+    onAddFiles,
+    onRemoveFile,
+    disabled = false
+  }, ref) => {
+    const [localQuery, setLocalQuery] = useState(initialQuery);
+    const [isDragOver, setIsDragOver] = useState(false);
+    const followUpInputRef = useRef(null);
+    const fileInputRef = useRef(null);
+    const setCombinedRef = (instance) => {
+      followUpInputRef.current = instance;
+      if (typeof ref === "function") {
+        ref(instance);
+      } else if (ref && "current" in ref) {
+        ref.current = instance;
+      }
+    };
+    useEffect(() => {
+      if (followUpInputRef.current) {
+        followUpInputRef.current.style.height = "inherit";
+        followUpInputRef.current.style.height = `${followUpInputRef.current.scrollHeight}px`;
+      }
+    }, [localQuery]);
+    useEffect(() => {
+      setLocalQuery(initialQuery);
+    }, [initialQuery]);
+    const isSendDisabled = disabled || isSearching || !localQuery.trim() || isUploading;
+    const handleKeyPress = (e) => {
+      if (e.key === "Enter" && !e.shiftKey && !isSendDisabled) {
+        e.preventDefault();
+        const currentQuery = localQuery;
+        onQueryChange(currentQuery);
+        handleFollowUpSearch(currentQuery);
+        setLocalQuery("");
+      }
+    };
+    const handleChange = (e) => {
+      setLocalQuery(e.target.value);
+    };
+    const handleBlur = () => {
+      if (localQuery !== initialQuery) {
+        onQueryChange(localQuery);
+      }
+    };
+    const handleSearchClick = () => {
+      const currentQuery = localQuery;
+      onQueryChange(currentQuery);
+      handleFollowUpSearch(currentQuery);
+      setLocalQuery("");
+    };
+    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);
+    };
+    return /* @__PURE__ */ React__default.createElement(
+      motion.footer,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5 },
+        className: styles.followUpSearchBar
+      },
+      /* @__PURE__ */ React__default.createElement("div", { className: "container flex items-center justify-center p-3" }, /* @__PURE__ */ React__default.createElement(
+        "div",
+        {
+          className: cn(
+            "relative flex w-full flex-col rounded bg-card border border-dark-400",
+            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",
+            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: "sm",
+            onRemove: onRemoveFile,
+            className: "pt-2 px-2"
+          }
+        ),
+        /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2 px-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-7 hover:bg-opacity-80 disabled:opacity-50 shrink-0",
+            onClick: () => fileInputRef.current?.click(),
+            disabled: disabled || attachedFiles.length >= 5,
+            "aria-label": textConfig.attachImageText
+          },
+          /* @__PURE__ */ React__default.createElement(Image, { weight: "regular", className: "size-4 text-secondary-foreground" })
+        )), !enableFileAttachment && /* @__PURE__ */ React__default.createElement("div", { className: "size-6 flex flex-shrink-0 justify-center items-center" }, /* @__PURE__ */ React__default.createElement(MagnifyingGlass, { className: "size-5 text-secondary-foreground" })), /* @__PURE__ */ React__default.createElement(
+          Textarea,
+          {
+            ref: setCombinedRef,
+            value: localQuery,
+            onChange: handleChange,
+            onBlur: handleBlur,
+            onKeyDown: handleKeyPress,
+            placeholder: textConfig.followUpPlaceholder,
+            disabled,
+            className: "min-h-11 w-full resize-none border-0 shadow-none bg-transparent px-0 py-2.5 focus:outline-none focus:ring-0 focus-visible:ring-0 disabled:opacity-50 disabled:cursor-not-allowed",
+            rows: 1
+          }
+        ), /* @__PURE__ */ React__default.createElement(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            disabled: isSendDisabled,
+            onClick: handleSearchClick,
+            className: cn(
+              "size-8 shrink-0 rounded",
+              localQuery ? "bg-primary text-primary-foreground" : "bg-dark-400 text-white"
+            )
+          },
+          isSearching ? /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-4 sm:size-5 border-2 border-dark/40 !border-t-foreground" }) : /* @__PURE__ */ React__default.createElement(ArrowRight, { className: "size-6" })
+        ))
+      ))
+    );
+  }
+);
+FollowUpSearchBar.displayName = "FollowUpSearchBar";
+
+export { FollowUpSearchBar };

package/dist/esm/components/chat-search/FollowUpSearchBar.module.css

@@ -0,0 +1,4 @@
+._followUpSearchBar_x7ads_1 {
+  box-shadow: 0px -2px 4px 0px rgba(18, 18, 23, 0.05);
+  background-color: var(--bfc-card);
+}

package/dist/esm/components/chat-search/FollowUpSearchBar.module.css.js

@@ -0,0 +1,6 @@
+import './FollowUpSearchBar.module.css';const followUpSearchBar = "_followUpSearchBar_x7ads_1";
+const styles = {
+	followUpSearchBar: followUpSearchBar
+};
+
+export { styles as default, followUpSearchBar };

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

@@ -0,0 +1,104 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+import { ArrowLeft, ArrowsInSimple, ArrowsOutSimple, ClockCounterClockwise, X } from '@phosphor-icons/react';
+import { Button } from '../ui/button.js';
+import { useIsChatSearchDirty } from './hooks/useIsChatSearchDirty.js';
+import { useChatSearch } from './ChatSearchContext.js';
+import { cn } from '../../lib/utils.js';
+
+function Header({
+  headerText,
+  onToggleSizeButtonClick,
+  onBackButtonClick,
+  onCloseWidgetClick,
+  isSearchWidget,
+  onHistoryButtonClick,
+  onHistoryBackClick,
+  showHistory,
+  hasUnreadConversations,
+  className,
+  showHistoryButton,
+  ...props
+}) {
+  const isDirty = useIsChatSearchDirty();
+  const [isExpanded, setIsExpanded] = React__default.useState(false);
+  const { isSearching, showMobileCloseWidgetButton: hideExpandButton } = useChatSearch();
+  const handleToggleSizeButtonClick = () => {
+    setIsExpanded((prev) => !prev);
+    onToggleSizeButtonClick();
+  };
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: cn(
+        "w-full px-3 py-4 flex items-center justify-between",
+        "bg-primary h-14 leading-6",
+        "md:hidden",
+        "@3xl:bg-transparent @3xl:h-auto @3xl:leading-normal",
+        "@3xl:justify-center @3xl:space-y-4 @3xl:p-0",
+        isSearchWidget ? "hidden bg-transparent" : "",
+        className
+      ),
+      ...props
+    },
+    /* @__PURE__ */ React__default.createElement(
+      motion.h2,
+      {
+        initial: { opacity: 0, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.5, delay: 0.3 },
+        className: cn(
+          "m-0 text-primary-foreground @3xl:text-foreground flex gap-1 items-center font-bold text-base",
+          isSearchWidget ? "" : "@3xl:text-5xl"
+        )
+      },
+      (showHistory || isDirty) && /* @__PURE__ */ React__default.createElement(
+        Button,
+        {
+          size: "icon",
+          variant: "ghost",
+          onClick: showHistory ? onHistoryBackClick : onBackButtonClick,
+          "aria-label": "Go back",
+          className: cn("shrink-0 text-primary-foreground", isSearchWidget ? "" : "@3xl:hidden"),
+          disabled: isSearching
+        },
+        /* @__PURE__ */ React__default.createElement(ArrowLeft, null)
+      ),
+      /* @__PURE__ */ React__default.createElement("span", null, showHistory ? "History" : headerText)
+    ),
+    /* @__PURE__ */ React__default.createElement("div", { className: "@3xl:hidden shrink-0", "data-name": "HeaderButtons" }, !hideExpandButton && /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "icon",
+        variant: "ghost",
+        onClick: handleToggleSizeButtonClick,
+        "aria-label": isExpanded ? "Collapse widget" : "Expand widget",
+        className: "text-primary-foreground device-touch:hidden device-desktop:inline-flex device-desktop-touch:inline-flex"
+      },
+      isExpanded ? /* @__PURE__ */ React__default.createElement(ArrowsInSimple, null) : /* @__PURE__ */ React__default.createElement(ArrowsOutSimple, null)
+    ), showHistoryButton && /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "icon",
+        variant: "ghost",
+        onClick: onHistoryButtonClick,
+        "aria-label": "Conversation history",
+        className: "relative text-primary-foreground"
+      },
+      /* @__PURE__ */ React__default.createElement(ClockCounterClockwise, null),
+      hasUnreadConversations && !showHistory && /* @__PURE__ */ React__default.createElement("span", { className: "absolute top-1 right-1 size-2 rounded-full bg-red-500" })
+    ), /* @__PURE__ */ React__default.createElement(
+      Button,
+      {
+        size: "icon",
+        variant: "ghost",
+        onClick: onCloseWidgetClick,
+        "aria-label": "Close widget",
+        className: "text-primary-foreground"
+      },
+      /* @__PURE__ */ React__default.createElement(X, null)
+    ))
+  );
+}
+
+export { Header };

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

@@ -0,0 +1,82 @@
+import React__default from 'react';
+import { ChatLogo } from '../logo/chat-logo.js';
+import { cn } from '../../lib/utils.js';
+
+function ConversationAvatar({
+  isHandoff,
+  agentAvatarUrl,
+  botAvatarUrl
+}) {
+  if (isHandoff && agentAvatarUrl) {
+    return /* @__PURE__ */ React__default.createElement("img", { src: agentAvatarUrl, className: "h-8 w-8 shrink-0 rounded-full object-cover", alt: "Agent avatar" });
+  }
+  if (isHandoff && botAvatarUrl) {
+    return /* @__PURE__ */ React__default.createElement("img", { src: botAvatarUrl, className: "h-8 w-8 shrink-0 rounded-full object-cover", alt: "Support" });
+  }
+  return /* @__PURE__ */ React__default.createElement(ChatLogo, { className: "border border-neutral-200 rounded-full" });
+}
+function ConversationRow({
+  item,
+  onSelect,
+  botAvatarUrl
+}) {
+  return /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      onClick: () => onSelect({
+        conversationId: item.conversationId,
+        isHandoff: item.isHandoff,
+        isCompleted: item.status === "completed"
+      }),
+      className: cn(
+        "w-full flex items-center gap-3 p-3 rounded-lg bg-card text-left",
+        "hover:bg-accent transition-colors",
+        "border-l-4 border-transparent hover:border-primary/40"
+      )
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "relative shrink-0" }, /* @__PURE__ */ React__default.createElement(
+      ConversationAvatar,
+      {
+        isHandoff: item.isHandoff,
+        agentAvatarUrl: item.agentAvatarUrl,
+        botAvatarUrl
+      }
+    ), item.hasUnread && /* @__PURE__ */ React__default.createElement("span", { className: "absolute top-0 right-0 size-2 rounded-full bg-red-500" })),
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React__default.createElement("span", { className: "text-sm font-medium truncate" }, item.title), /* @__PURE__ */ React__default.createElement("span", { className: "text-xs text-muted-foreground truncate" }, item.subtitle ? `${item.subtitle} replied • ${item.timestamp}` : item.timestamp))
+  );
+}
+function ConversationSection({
+  title,
+  items,
+  onSelect,
+  isReadOnly = false,
+  botAvatarUrl
+}) {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ React__default.createElement("section", null, /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-muted-foreground" }, title), isReadOnly && /* @__PURE__ */ React__default.createElement("span", { className: "text-[10px] font-medium px-1.5 py-0.5 rounded bg-muted text-muted-foreground" }, "View only")), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2" }, items.map((item) => /* @__PURE__ */ React__default.createElement(ConversationRow, { key: item.conversationId, item, onSelect, botAvatarUrl }))));
+}
+function ConversationRowSkeleton() {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "w-full flex items-center gap-3 p-3 rounded-lg bg-card animate-pulse" }, /* @__PURE__ */ React__default.createElement("div", { className: "size-8 rounded-full bg-muted shrink-0" }), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 flex-1 min-w-0" }, /* @__PURE__ */ React__default.createElement("div", { className: "h-3.5 bg-muted rounded w-3/4" }), /* @__PURE__ */ React__default.createElement("div", { className: "h-3 bg-muted rounded w-1/2" })));
+}
+const noop = () => {
+};
+function HistoryPage({ conversations, isLoading, onSelectConversation, botAvatarUrl }) {
+  const handleSelect = onSelectConversation ?? noop;
+  const active = conversations.filter((c) => c.status === "active");
+  const previous = conversations.filter((c) => c.status === "completed");
+  if (isLoading) {
+    return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2 px-3 py-4 overflow-hidden" }, /* @__PURE__ */ React__default.createElement("div", { className: "h-4 w-16 bg-muted rounded animate-pulse mb-2" }), [...Array(3)].map((_, i) => /* @__PURE__ */ React__default.createElement(ConversationRowSkeleton, { key: i })));
+  }
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-4 px-3 py-4 min-h-full" }, /* @__PURE__ */ React__default.createElement(ConversationSection, { title: "Active", items: active, onSelect: handleSelect, botAvatarUrl }), /* @__PURE__ */ React__default.createElement(
+    ConversationSection,
+    {
+      title: "Previous",
+      items: previous,
+      onSelect: handleSelect,
+      isReadOnly: true,
+      botAvatarUrl
+    }
+  ), conversations.length === 0 && /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col items-center justify-center gap-3 mt-16 text-center px-6" }, /* @__PURE__ */ React__default.createElement(ChatLogo, { size: 40, className: "text-muted-foreground opacity-40" }), /* @__PURE__ */ React__default.createElement("p", { className: "text-sm font-medium text-foreground" }, "No Threads yet"), /* @__PURE__ */ React__default.createElement("p", { className: "text-xs text-muted-foreground" }, "Start a conversation and it will appear here.")));
+}
+
+export { ConversationRow, HistoryPage };

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

@@ -0,0 +1,8 @@
+import React__default from 'react';
+import { Switch } from '../ui/switch.js';
+
+function IncludePageToggle({ value, loading, disabled, onToggle }) {
+  return /* @__PURE__ */ React__default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React__default.createElement(Switch, { id: "include-page", checked: value, onCheckedChange: onToggle, disabled: loading || disabled }), /* @__PURE__ */ React__default.createElement("label", { htmlFor: "include-page", className: "text-sm text-foreground flex items-center gap-2" }, "Include page", loading && /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-3 border-2 border-t-transparent border-primary" })));
+}
+
+export { IncludePageToggle };

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

@@ -0,0 +1,23 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '../ui/button.js';
+
+const MotionButton = motion(Button);
+function KnowledgeGroupSelector({ groups, onGroupSelect }) {
+  if (!groups.length) return null;
+  return /* @__PURE__ */ React__default.createElement(motion.div, { initial: { opacity: 0, y: 20 }, animate: { opacity: 1, y: 0 }, className: "w-full px-4 py-3", "data-name": "KnowledgeGroupSelector" }, /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-muted-foreground mb-2 text-right" }, "Please select an option"), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap justify-end gap-2" }, groups.map((group, index) => /* @__PURE__ */ React__default.createElement(
+    MotionButton,
+    {
+      key: group.id,
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      transition: { delay: index * 0.05 },
+      onClick: () => onGroupSelect(group),
+      variant: "outline",
+      className: "border-border font-normal h-auto rounded-full px-4 py-1.5 text-sm"
+    },
+    group.name
+  ))));
+}
+
+export { KnowledgeGroupSelector };

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

@@ -0,0 +1,19 @@
+import React__default from 'react';
+import { motion } from 'framer-motion';
+
+const LoadingConversation = () => {
+  return /* @__PURE__ */ React__default.createElement(
+    motion.div,
+    {
+      key: "loading",
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      className: "w-full flex items-center justify-center py-20",
+      "data-name": "loading"
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col items-center gap-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "animate-spin rounded-full size-8 border-2 border-t-transparent border-primary" }), /* @__PURE__ */ React__default.createElement("p", { className: "text-sm text-secondary-foreground" }, "Loading conversation..."))
+  );
+};
+
+export { LoadingConversation };