@brainfish-ai/components 0.37.0 → 0.37.2

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

@@ -1169,7 +1169,7 @@ const ChatSearchComponent = forwardRef(
             offset
           }
         )),
-        disclaimer?.trim() !== "" && isWidgetMode && !(showResults && showFollowUp) && /* @__PURE__ */ React__default.createElement(
+        disclaimer && isWidgetMode && !(showResults && showFollowUp) && /* @__PURE__ */ React__default.createElement(
           "div",
           {
             "data-name": "disclaimer",

package/dist/esm/global.css

@@ -3641,6 +3641,48 @@ strong {
   color: var(--bfc-warning-text);
 }
 
+.before\:pointer-events-none::before{
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
+.before\:absolute::before{
+  content: var(--tw-content);
+  position: absolute;
+}
+
+.before\:inset-0::before{
+  content: var(--tw-content);
+  inset: 0px;
+}
+
+@keyframes article-drop-pulse{0%{
+    content: var(--tw-content);
+    opacity: 0.1;
+  }20%{
+    content: var(--tw-content);
+    opacity: 0.2;
+  }50%{
+    content: var(--tw-content);
+    opacity: 0.6;
+  }
+}
+
+.before\:animate-article-drop-pulse::before{
+  content: var(--tw-content);
+  animation: article-drop-pulse 600ms ease-out;
+}
+
+.before\:bg-primary::before{
+  content: var(--tw-content);
+  background-color: var(--bfc-primary);
+}
+
+.before\:opacity-0::before{
+  content: var(--tw-content);
+  opacity: 0;
+}
+
 .after\:absolute::after{
   content: var(--tw-content);
   position: absolute;

package/dist/esm/layouts/sidebar/article-nav/article-item.js

@@ -7,6 +7,7 @@ import { Button as Button$1 } from '../../../components/ui/button.js';
 import { ButtonGroup } from '../../../components/ui/button-group.js';
 import { ArticleStatusIcon } from './status-icons/article-status-icon.js';
 
+const JustDroppedIdContext = React.createContext(null);
 function ArticleItem({
   item,
   hasChildItems,
@@ -20,6 +21,8 @@ function ArticleItem({
   level
 }) {
   const { isSearching } = useSidebar();
+  const justDroppedId = React.useContext(JustDroppedIdContext);
+  const justDropped = justDroppedId === item.value.id;
   const treeState = React.useContext(TreeStateContext);
   const shouldPreventNavigation = Boolean(isSelected);
   const handleAddClick = (e) => {
@@ -60,7 +63,8 @@ function ArticleItem({
       className: cn(
         "group relative flex items-center gap-1 rounded-md py-1 pl-1 ml-[calc((var(--tree-item-level)-1)*var(--line-offset))] pr-4 h-9",
         isDraft && "text-subtlest italic",
-        isSelected ? "bg-lime-100 text-default font-bold after:absolute after:-right-0.5 after:top-1/2 after:h-1/2 after:w-1 after:-translate-y-1/2 after:bg-lime-400" : "hover:bg-dark-200 hover:text-accent-foreground"
+        isSelected ? "bg-lime-100 text-default font-bold after:absolute after:-right-0.5 after:top-1/2 after:h-1/2 after:w-1 after:-translate-y-1/2 after:bg-lime-400" : "hover:bg-dark-200 hover:text-accent-foreground",
+        justDropped && "before:animate-article-drop-pulse before:bg-primary before:opacity-0 before:inset-0 before:absolute before:pointer-events-none"
       )
     },
     Array.from({ length: level - 1 }, (_, i) => /* @__PURE__ */ React.createElement(
@@ -135,4 +139,4 @@ function ArticleItem({
   );
 }
 
-export { ArticleItem };
+export { ArticleItem, JustDroppedIdContext };

package/dist/esm/layouts/sidebar/article-nav/article-tree.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useTreeData, useDragAndDrop, DropIndicator, Tree, TreeItem, TreeItemContent, Collection } from 'react-aria-components';
-import { ArticleItem } from './article-item.js';
+import { JustDroppedIdContext, ArticleItem } from './article-item.js';
 import { ArticleSearchResults } from './article-search-results.js';
 import { useSidebar } from '../context.js';
 import { getNewlyExpandedKeys } from './expansion.js';
@@ -68,6 +68,14 @@ function ArticleTree({ articles, isSearching, renderEmptyState }) {
       }
     });
   }, [articles, articlesTree]);
+  const [expandedKeysState, setExpandedKeysState] = React.useState(/* @__PURE__ */ new Set());
+  const [justDroppedId, setJustDroppedId] = React.useState(null);
+  React.useEffect(() => {
+    if (!justDroppedId) return;
+    const ANIMATION_DURATION = 600;
+    const timeoutId = window.setTimeout(() => setJustDroppedId(null), ANIMATION_DURATION);
+    return () => window.clearTimeout(timeoutId);
+  }, [justDroppedId]);
   const { dragAndDropHooks } = useDragAndDrop({
     getItems: (_keys, items) => items.map((item) => ({
       "text/plain": item.value.label
@@ -103,14 +111,20 @@ function ArticleTree({ articles, isSearching, renderEmptyState }) {
       const originalIndex = originalSiblings.findIndex((i) => i.key === movedArticleId);
       if (e.target.dropPosition === "on") {
         articlesTree.move(movedArticleId, movedToParentId, movedToIndex);
+        if (movedToParentId) {
+          setExpandedKeysState((prev) => /* @__PURE__ */ new Set([...prev, movedToParentId]));
+          onExpandArticle?.(movedToParentId);
+        }
       } else if (e.target.dropPosition === "before") {
         articlesTree.moveBefore(e.target.key, e.keys);
       } else {
         articlesTree.moveAfter(e.target.key, e.keys);
       }
+      setJustDroppedId(movedArticleId.toString());
       const result = onMoveArticle?.(moveDetails);
       if (result && typeof result.then === "function") {
         result.catch(() => {
+          setJustDroppedId(null);
           articlesTree.move(movedArticleId, originalParentId, originalIndex);
         });
       }
@@ -133,7 +147,6 @@ function ArticleTree({ articles, isSearching, renderEmptyState }) {
     const path = getParentKeys(articles, effectiveActiveId);
     return path ?? [];
   }, [articles, effectiveActiveId, isSearching]);
-  const [expandedKeysState, setExpandedKeysState] = React.useState(/* @__PURE__ */ new Set());
   const expandedKeys = React.useMemo(
     () => /* @__PURE__ */ new Set([...pathToActive, ...expandedKeysState]),
     [pathToActive, expandedKeysState]
@@ -183,7 +196,7 @@ function ArticleTree({ articles, isSearching, renderEmptyState }) {
   if (isSearching) {
     return /* @__PURE__ */ React.createElement(ArticleSearchResults, { articles });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(JustDroppedIdContext.Provider, { value: justDroppedId }, /* @__PURE__ */ React.createElement(
     Tree,
     {
       "aria-label": isSearching ? "Search results" : "Articles tree",
@@ -237,7 +250,7 @@ function ArticleTree({ articles, isSearching, renderEmptyState }) {
         !isSearching && item.children && /* @__PURE__ */ React.createElement(Collection, { items: item.children }, renderItem)
       );
     }
-  );
+  ));
 }
 
 export { ArticleTree, getParentKeys };

package/dist/esm/tailwind.preset.js

@@ -131,12 +131,18 @@ const preset = {
         sweep: {
           "0%": { backgroundPosition: "100% center" },
           "100%": { backgroundPosition: "-100% center" }
+        },
+        "article-drop-pulse": {
+          "0%": { opacity: "0.1" },
+          "20%": { opacity: "0.2" },
+          "50%": { opacity: "0.6" }
         }
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
-        sweep: "sweep 1.8s linear infinite"
+        sweep: "sweep 1.8s linear infinite",
+        "article-drop-pulse": "article-drop-pulse 600ms ease-out"
       },
       maxWidth: {
         threadWidth: "1400px"

package/dist/layouts/sidebar/article-nav/article-item.d.ts

@@ -1,6 +1,7 @@
 import { Key, TreeItemContentRenderProps } from 'react-aria-components';
 import { ArticleNavItem, ItemLinkComponent } from '../types';
 import * as React from 'react';
+export declare const JustDroppedIdContext: React.Context<string | null>;
 type ArticleItemTreeNode = {
     key: Key;
     value: ArticleNavItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brainfish-ai/components",
-  "version": "0.37.0",
+  "version": "0.37.2",
   "description": "Brainfish Components",
   "license": "MIT",
   "main": "./dist/esm/index.js",

package/tailwind.preset.ts

@@ -137,11 +137,17 @@ const preset: Partial<Config> = {
           '0%': { backgroundPosition: '100% center' },
           '100%': { backgroundPosition: '-100% center' },
         },
+        'article-drop-pulse': {
+          '0%': { opacity: '0.1' },
+          '20%': { opacity: '0.2' },
+          '50%': { opacity: '0.6' },
+        },
       },
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
         sweep: 'sweep 1.8s linear infinite',
+        'article-drop-pulse': 'article-drop-pulse 600ms ease-out',
       },
       maxWidth: {
         threadWidth: '1400px',