@dust-tt/sparkle 0.5.21 → 0.7.0

package/src/components/ConversationMessage.tsx

@@ -29,7 +29,7 @@ export const ConversationContainer = React.forwardRef<
       )}
       {...props}
     >
-      <div className="s-flex s-w-full s-max-w-3xl s-flex-col s-gap-6 s-p-2 @sm/conversation:s-gap-8 @md/conversation:s-gap-10">
+      <div className="s-flex s-w-full s-max-w-4xl s-flex-col s-gap-6 s-p-2 @sm/conversation:s-gap-8 @md/conversation:s-gap-10">
         {children}
       </div>
     </div>

package/src/components/ListItem.tsx

@@ -96,17 +96,85 @@ export function ListGroup({ children, className }: ListGroupProps) {
 type ListItemSectionProps = {
   children: ReactNode;
   className?: string;
+  size?: "xs" | "sm";
+  action?: ReactNode;
+  onClick?: () => void;
 };
 
-export function ListItemSection({ children, className }: ListItemSectionProps) {
+const listItemSectionVariants = cva("", {
+  variants: {
+    size: {
+      xs: "s-heading-xs s-uppercase s-pb-2 s-pt-4 s-text-muted-foreground dark:s-text-muted-foreground-night",
+      sm: "s-heading-sm s-bg-muted-background s-p-2 dark:s-bg-muted-background-night/50 s-text-foreground dark:s-text-foreground-night",
+    },
+    interactive: {
+      true: cn(
+        "s-cursor-pointer s-transition s-duration-200",
+        "active:s-bg-primary-100 dark:active:s-bg-primary-100-night"
+      ),
+      false: "",
+    },
+    isHovered: {
+      true: "hover:s-bg-primary-100 hover:dark:s-bg-primary-100-night active:s-bg-primary-150 active:dark:s-bg-primary-150-night",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    size: "xs",
+    interactive: false,
+    isHovered: false,
+  },
+});
+
+export function ListItemSection({
+  children,
+  className,
+  size = "xs",
+  action,
+  onClick,
+}: ListItemSectionProps) {
+  const [isHoveringAction, setIsHoveringAction] = React.useState(false);
+  const [isHoveringMain, setIsHoveringMain] = React.useState(false);
+
   return (
-    <h3
+    <div
       className={cn(
-        "s-pb-2 s-pt-6 s-text-xs s-font-semibold s-uppercase s-tracking-wide s-text-muted-foreground dark:s-text-muted-foreground-night",
+        listItemSectionVariants({
+          size,
+          interactive: !!onClick,
+          isHovered: !!onClick && isHoveringMain && !isHoveringAction,
+        }),
+        "s-group/section-item s-flex s-items-center s-justify-between",
         className
       )}
+      onClick={onClick}
+      onMouseEnter={() => {
+        setIsHoveringMain(true);
+      }}
+      onMouseLeave={() => {
+        setIsHoveringMain(false);
+        setIsHoveringAction(false);
+      }}
     >
-      {children}
-    </h3>
+      <div className="s-flex s-items-center s-gap-1 s-overflow-hidden s-text-ellipsis">
+        {children}
+      </div>
+      {action && (
+        <div
+          className="s-flex s-gap-1"
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onMouseEnter={() => {
+            setIsHoveringAction(true);
+          }}
+          onMouseLeave={() => {
+            setIsHoveringAction(false);
+          }}
+        >
+          {action}
+        </div>
+      )}
+    </div>
   );
 }

package/src/components/NavigationList.tsx

@@ -130,6 +130,7 @@ const NavigationListItem = React.forwardRef<
 
     const shouldShowStatusDot = status !== "idle";
     const counterValue = count && count > 0 ? count : undefined;
+    const shouldHideStatusIndicators = Boolean(moreMenu && selected);
 
     return (
       <div
@@ -166,26 +167,28 @@ const NavigationListItem = React.forwardRef<
             {icon && <Icon visual={icon} size="xs" className="s-m-0.5" />}
             {avatar}
             {label && (
-              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
+              <span className="s-grow s-overflow-hidden s-text-ellipsis s-whitespace-nowrap group-hover/menu-item:s-pr-8 group-focus-within/menu-item:s-pr-8 group-data-[selected=true]/menu-item:s-pr-8">
                 {label}
               </span>
             )}
-            {counterValue && (
+            {counterValue !== undefined && !shouldHideStatusIndicators && (
               <Counter
                 value={counterValue}
                 size="xs"
                 variant="outline"
                 className={cn(
                   "s-flex-shrink-0 s-translate-x-0.5",
-                  moreMenu && "group-hover/menu-item:s-hidden"
+                  moreMenu &&
+                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden"
                 )}
               />
             )}
-            {shouldShowStatusDot && (
+            {shouldShowStatusDot && !shouldHideStatusIndicators && (
               <div
                 className={cn(
                   "s-heading-xs s-flex s-flex-shrink-0 s-items-center s-justify-center s-rounded-full",
-                  moreMenu && "group-hover/menu-item:s-hidden",
+                  moreMenu &&
+                    "group-hover/menu-item:s-hidden group-focus-within/menu-item:s-hidden",
                   getStatusDotColor()
                 )}
               />
@@ -213,7 +216,7 @@ const NavigationListItemAction = React.forwardRef<
       data-sidebar="menu-action"
       className={cn(
         "s-absolute s-right-2 s-top-1.5 s-opacity-0 s-transition-opacity",
-        "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100 group-data-[selected=true]/menu-item:s-opacity-100",
+        "s-opacity-0 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100",
         className
       )}
       {...props}
@@ -384,32 +387,34 @@ const NavigationListCollapsibleSection = React.forwardRef<
   ) => {
     const isCollapsible = type !== "static";
     const labelElement = (
-      <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
-        <div className={collapseableStyles({ variant, isCollapsible })}>
-          {label}
-        </div>
-        {action && (
-          <div
-            className={cn(
-              "s-m-1.5 s-flex s-gap-1 s-pr-0.5 s-transition-opacity",
-              actionOnHover
-                ? "s-opacity-0 hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
-                : "s-opacity-100"
-            )}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            {action}
-          </div>
+      <div className={collapseableStyles({ variant, isCollapsible })}>
+        {label}
+      </div>
+    );
+
+    const actionElement = action && (
+      <div
+        className={cn(
+          "s-m-1.5 s-flex s-gap-1 s-pr-0.5 s-transition-opacity",
+          actionOnHover
+            ? "s-opacity-0 hover:s-opacity-100 group-focus-within/menu-item:s-opacity-100 group-hover/menu-item:s-opacity-100"
+            : "s-opacity-100"
         )}
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {action}
       </div>
     );
 
     if (type === "static") {
       return (
         <div ref={ref} className={className} {...props}>
-          {labelElement}
+          <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+            {labelElement}
+            {actionElement}
+          </div>
           <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
         </div>
       );
@@ -425,7 +430,10 @@ const NavigationListCollapsibleSection = React.forwardRef<
     if (type === "collapseAndScroll") {
       return (
         <Collapsible ref={ref} className={className} {...collapsibleProps}>
-          <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+          <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+            <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+            {actionElement}
+          </div>
           <CollapsibleContent>
             <ScrollArea>
               <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
@@ -439,7 +447,10 @@ const NavigationListCollapsibleSection = React.forwardRef<
     // type === "collapse" (default collapsible behavior)
     return (
       <Collapsible ref={ref} className={className} {...collapsibleProps}>
-        <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+        <div className="s-group/menu-item s-relative s-mt-2 s-flex s-flex-1 s-items-center s-justify-start s-gap-1">
+          <CollapsibleTrigger hideChevron>{labelElement}</CollapsibleTrigger>
+          {actionElement}
+        </div>
         <CollapsibleContent>
           <div className="s-flex s-flex-col s-gap-0.5">{children}</div>
         </CollapsibleContent>

package/src/components/Sheet.tsx

@@ -191,7 +191,7 @@ const SheetHeader = ({
     {...props}
   >
     {children}
-    <SheetClose asChild className="s-absolute s-right-3">
+    <SheetClose asChild className="s-absolute s-right-3 s-top-4">
       {!hideButton && <Button icon={XMarkIcon} variant="ghost" size="sm" />}
     </SheetClose>
   </div>

package/src/components/SidebarLayout.tsx

@@ -2,7 +2,7 @@
 
 import "../styles/allotment.css";
 
-import { Allotment } from "allotment";
+import { Allotment, LayoutPriority } from "allotment";
 import * as React from "react";
 
 import { customColors } from "@sparkle/lib/colors";
@@ -58,7 +58,7 @@ export const SidebarLayout = React.forwardRef<
     sidebar,
     content,
     defaultSidebarWidth = 280,
-    minSidebarWidth: _minSidebarWidth = 200,
+    minSidebarWidth = 200,
     maxSidebarWidth = 400,
     collapsible = true,
     onSidebarToggle,
@@ -71,8 +71,7 @@ export const SidebarLayout = React.forwardRef<
   const allotmentRef = React.useRef<React.ComponentRef<typeof Allotment>>(null);
   const [isSidebarCollapsed, setIsSidebarCollapsed] = React.useState(false);
   const [isHovering, setIsHovering] = React.useState(false);
-  const [lastSidebarSize, setLastSidebarSize] =
-    React.useState(defaultSidebarWidth);
+  const [sidebarWidth, setSidebarWidth] = React.useState(defaultSidebarWidth);
   const isTogglingRef = React.useRef(false);
 
   // Toggle sidebar function
@@ -80,10 +79,10 @@ export const SidebarLayout = React.forwardRef<
     if (allotmentRef.current) {
       isTogglingRef.current = true;
       if (isSidebarCollapsed) {
-        // Expand to last stored size - use requestAnimationFrame to ensure size is set correctly
+        // Expand to last stored width - use requestAnimationFrame to ensure size is set correctly
         requestAnimationFrame(() => {
           if (allotmentRef.current) {
-            allotmentRef.current.resize([lastSidebarSize]);
+            allotmentRef.current.resize([sidebarWidth]);
           }
         });
         setIsSidebarCollapsed(false);
@@ -101,7 +100,7 @@ export const SidebarLayout = React.forwardRef<
         isTogglingRef.current = false;
       }, 300);
     }
-  }, [isSidebarCollapsed, lastSidebarSize, onSidebarToggle]);
+  }, [isSidebarCollapsed, sidebarWidth, onSidebarToggle]);
 
   // Handle hover reveal when collapsed
   const handleLeftEdgeHover = React.useCallback(() => {
@@ -121,38 +120,13 @@ export const SidebarLayout = React.forwardRef<
   // Handle size changes from Allotment
   const handleChange = React.useCallback(
     (sizes: number[]) => {
-      let sidebarSize = sizes[0] ?? 0;
+      const sidebarSize = sizes[0] ?? 0;
       const wasCollapsed = isSidebarCollapsed;
       const nowCollapsed = sidebarSize === 0;
 
-      // Enforce 220px minimum when visible and not toggling
-      if (
-        !isTogglingRef.current &&
-        !wasCollapsed &&
-        sidebarSize > 0 &&
-        sidebarSize < 220 &&
-        collapsible
-      ) {
-        // Clamp to 220px minimum
-        sidebarSize = 220;
-        if (allotmentRef.current) {
-          allotmentRef.current.resize([sidebarSize]);
-        }
-      }
-
-      // Track manual resize (not from toggle or hover)
-      // Only save size when:
-      // - Not toggling
-      // - Not hovering
-      // - Sidebar is visible (not collapsed)
-      // - Size is greater than 0
-      if (
-        !isTogglingRef.current &&
-        !isHovering &&
-        sidebarSize > 0 &&
-        !wasCollapsed
-      ) {
-        setLastSidebarSize(sidebarSize);
+      // Track sidebar width whenever it changes (when not toggling and not collapsed)
+      if (!isTogglingRef.current && !wasCollapsed && sidebarSize > 0) {
+        setSidebarWidth(sidebarSize);
       }
 
       // Only update collapsed state if it's from toggle button
@@ -165,7 +139,7 @@ export const SidebarLayout = React.forwardRef<
         onSidebarToggle?.(nowCollapsed);
       }
     },
-    [isSidebarCollapsed, isHovering, collapsible, onSidebarToggle]
+    [isSidebarCollapsed, onSidebarToggle]
   );
 
   // Expose methods via ref
@@ -190,7 +164,7 @@ export const SidebarLayout = React.forwardRef<
           isTogglingRef.current = true;
           requestAnimationFrame(() => {
             if (allotmentRef.current) {
-              allotmentRef.current.resize([lastSidebarSize]);
+              allotmentRef.current.resize([sidebarWidth]);
             }
           });
           setIsSidebarCollapsed(false);
@@ -202,7 +176,7 @@ export const SidebarLayout = React.forwardRef<
         }
       },
     }),
-    [toggleSidebar, isSidebarCollapsed, lastSidebarSize, onSidebarToggle]
+    [toggleSidebar, isSidebarCollapsed, sidebarWidth, onSidebarToggle]
   );
 
   return (
@@ -223,6 +197,7 @@ export const SidebarLayout = React.forwardRef<
           > .allotment-module_splitViewContainer__rQnVa
           > .allotment-module_splitViewView__MGZ6O:not(:first-child)::before {
           width: 1px;
+          transition: width 200ms, background-color 200ms;
         }
       `}</style>
       {/* Hover zone when collapsed */}
@@ -253,15 +228,15 @@ export const SidebarLayout = React.forwardRef<
       <Allotment
         ref={allotmentRef}
         vertical={false}
+        proportionalLayout={false}
         onChange={handleChange}
         className="s-h-full s-w-full"
       >
         {/* Always render sidebar pane, but keep at width 0 when collapsed */}
         <Allotment.Pane
-          minSize={collapsible ? 0 : 220}
+          minSize={minSidebarWidth}
           maxSize={maxSidebarWidth}
-          preferredSize={isSidebarCollapsed ? 0 : lastSidebarSize}
-          snap={collapsible}
+          preferredSize={isSidebarCollapsed ? 0 : sidebarWidth}
           className={cn(
             "s-flex s-flex-col s-overflow-hidden",
             sidebarClassName
@@ -273,7 +248,10 @@ export const SidebarLayout = React.forwardRef<
           )}
         </Allotment.Pane>
 
-        <Allotment.Pane className={cn("s-flex s-flex-col", contentClassName)}>
+        <Allotment.Pane
+          priority={LayoutPriority.High}
+          className={cn("s-flex s-flex-col", contentClassName)}
+        >
           <div className="s-flex s-h-full s-w-full s-flex-col">{content}</div>
         </Allotment.Pane>
       </Allotment>

package/src/components/index.ts

@@ -44,6 +44,8 @@ export {
   ContentMessageInline,
 } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
+export type { ConversationListItemProps, ReplySectionProps } from "./ConversationListItem";
+export { ConversationListItem, ReplySection } from "./ConversationListItem";
 export {
   ConversationContainer,
   ConversationMessage,

package/src/styles/allotment.css

@@ -17,37 +17,28 @@
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_sashContainer__fzwJF
-  > .allotment-module_sash__QA-2t {
+.allotment-module_splitView__L-yRc > .allotment-module_sashContainer__fzwJF > .allotment-module_sash__QA-2t {
   pointer-events: auto;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_splitViewContainer__rQnVa {
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa {
   height: 100%;
   position: relative;
   white-space: nowrap;
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   overflow: hidden;
   position: absolute;
   white-space: initial;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   width: 100%;
 }
 
-.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8
-  > .allotment-module_splitViewContainer__rQnVa
-  > .allotment-module_splitViewView__MGZ6O {
+.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8 > .allotment-module_splitViewContainer__rQnVa > .allotment-module_splitViewView__MGZ6O {
   height: 100%;
 }
 
@@ -138,8 +129,7 @@
   height: var(--sash-size);
 }
 
-.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx)
-  > .sash-module_orthogonal-drag-handle__Yii2- {
+.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx) > .sash-module_orthogonal-drag-handle__Yii2- {
   content: " ";
   height: calc(var(--sash-size) * 2);
   width: calc(var(--sash-size) * 2);
@@ -149,48 +139,36 @@
   position: absolute;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   cursor: nwse-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(
-    .sash-module_disabled__Hm-wx
-  )
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)
   > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   cursor: nesw-resize;
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   left: calc(var(--sash-size) * -0.5);
   top: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_vertical__pB-rs
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_vertical__pB-rs > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   left: calc(var(--sash-size) * -0.5);
   bottom: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk {
   top: calc(var(--sash-size) * -0.5);
   left: calc(var(--sash-size) * -1);
 }
 
-.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw
-  > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
+.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw > .sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R {
   top: calc(var(--sash-size) * -0.5);
   right: calc(var(--sash-size) * -1);
 }

package/src/styles/global.css

@@ -1,3 +1,5 @@
+@import "./allotment.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

package/src/styles/global_with_tw_base.css

@@ -1,3 +1,5 @@
+@import "./allotment.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;