@dust-tt/sparkle 0.2.474 → 0.2.476

package/src/stories/Dropdown.stories.tsx

@@ -12,6 +12,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuSearchbar,
   DropdownMenuSeparator,
   DropdownMenuStaticItem,
   DropdownMenuSub,
@@ -55,8 +56,7 @@ import {
   MagnifyingGlassIcon,
   PlusIcon,
   RobotIcon,
-  ScrollArea,
-  SearchInput,
+  SearchDropdownMenu,
   SuitcaseIcon,
   UserGroupIcon,
   UserIcon,
@@ -87,6 +87,38 @@ export const PickerExamples = () => (
   </div>
 );
 
+export const SearchDropdownMenuExamples = () => {
+  const [searchInputValue, setSearchInputValue] = React.useState("");
+
+  const items = ["Profile", "Billing", "Team", "Subscription"];
+
+  const filteredItems = items.filter((item) =>
+    item.toLowerCase().includes(searchInputValue.toLowerCase())
+  );
+
+  return (
+    <div className="s-flex s-h-80 s-w-full s-flex-col s-items-center s-justify-center s-gap-4 s-text-foreground dark:s-text-foreground-night">
+      <div>
+        <SearchDropdownMenu
+          searchInputValue={searchInputValue}
+          setSearchInputValue={setSearchInputValue}
+        >
+          {filteredItems.map((item) => (
+            <DropdownMenuItem
+              key={item}
+              label={item}
+              onClick={() => {
+                setSearchInputValue("");
+                window.alert(item);
+              }}
+            />
+          ))}
+        </SearchDropdownMenu>
+      </div>
+    </div>
+  );
+};
+
 function SimpleDropdownDemo() {
   return (
     <DropdownMenu>
@@ -135,7 +167,11 @@ function ComplexDropdownDemo() {
       <DropdownMenuContent className="s-w-56">
         <DropdownMenuLabel label="My Account" />
         <DropdownMenuGroup>
-          <DropdownMenuItem icon={UserIcon} label="Profile" />
+          <DropdownMenuItem
+            icon={UserIcon}
+            label="Profile"
+            endComponent={<Button icon={ArrowUpOnSquareIcon} variant="ghost" />}
+          />
           <DropdownMenuItem icon={ArrowDownCircleIcon} label="Billing" />
           <DropdownMenuItem icon={Cog6ToothIcon} label="Settings" />
           <DropdownMenuItem icon={UserIcon} label="Keyboard shortcuts" />
@@ -155,6 +191,14 @@ function ComplexDropdownDemo() {
                 />
                 <DropdownMenuSeparator />
                 <DropdownMenuItem icon={UserIcon} label="More..." />
+                <DropdownMenuItem icon={UserIcon} label="More.." />
+                <DropdownMenuItem icon={UserIcon} label="More..." />
+                <DropdownMenuItem icon={UserIcon} label="More.." />
+                <DropdownMenuItem icon={UserIcon} label="More" />
+                <DropdownMenuItem icon={UserIcon} label="More....." />
+                <DropdownMenuItem icon={UserIcon} label="More.." />
+                <DropdownMenuItem icon={UserIcon} label="More" />
+                <DropdownMenuItem icon={UserIcon} label="More...." />
               </DropdownMenuSubContent>
             </DropdownMenuPortal>
           </DropdownMenuSub>
@@ -505,92 +549,90 @@ function AttachFileDemo() {
             size="sm"
           />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="s-w-[380px]">
-          <div className="s-flex s-gap-1.5 s-p-1.5">
-            <SearchInput
-              ref={searchInputRef}
-              name="search"
+        <DropdownMenuContent
+          className="s-w-[380px]"
+          dropdownHeaders={
+            <DropdownMenuSearchbar
+              value={searchText}
               onChange={setSearchText}
-              onKeyDown={() => {}}
+              name="search"
               placeholder="Search in Dust"
-              value={searchText}
+              button={<Button icon={ArrowUpOnSquareIcon} label="Upload File" />}
             />
-            <Button icon={ArrowUpOnSquareIcon} label="Upload File" />
-          </div>
+          }
+        >
           <DropdownMenuSeparator />
-          <ScrollArea className="s-h-[380px]">
-            {searchText ? (
-              filteredItems.map((item) => {
-                const randomMainIcon =
-                  mainIcons[Math.floor(Math.random() * mainIcons.length)];
-                const randomExtraIcon =
-                  extraIcons[Math.floor(Math.random() * extraIcons.length)];
-                return (
-                  <DropdownMenuItem
-                    key={item}
-                    label={item}
-                    description="Company Space/Notion"
-                    icon={randomMainIcon}
-                    extraIcon={randomExtraIcon}
-                    onClick={() => {
-                      setSelectedItem(item);
-                      setSearchText("");
-                    }}
-                    truncateText
-                  />
-                );
-              })
-            ) : (
-              <div className="s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8">
-                <div className="s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400">
-                  <Icon visual={MagnifyingGlassIcon} size="sm" />
-                  Search in Dust
-                </div>
+          {searchText ? (
+            filteredItems.map((item) => {
+              const randomMainIcon =
+                mainIcons[Math.floor(Math.random() * mainIcons.length)];
+              const randomExtraIcon =
+                extraIcons[Math.floor(Math.random() * extraIcons.length)];
+              return (
+                <DropdownMenuItem
+                  key={item}
+                  label={item}
+                  description="Company Space/Notion"
+                  icon={randomMainIcon}
+                  extraIcon={randomExtraIcon}
+                  onClick={() => {
+                    setSelectedItem(item);
+                    setSearchText("");
+                  }}
+                  truncateText
+                />
+              );
+            })
+          ) : (
+            <div className="s-flex s-h-full s-w-full s-items-center s-justify-center s-py-8">
+              <div className="s-flex s-flex-col s-items-center s-justify-center s-gap-0 s-text-center s-text-base s-font-semibold s-text-primary-400">
+                <Icon visual={MagnifyingGlassIcon} size="sm" />
+                Search in Dust
               </div>
-            )}
-          </ScrollArea>
+            </div>
+          )}
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu open={openAgents} onOpenChange={setOpenAgents}>
         <DropdownMenuTrigger asChild>
           <Button icon={RobotIcon} variant="outline" size="sm" isSelect />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="s-w-[380px]">
-          <div className="s-flex s-gap-1.5 s-p-1.5">
-            <SearchInput
+        <DropdownMenuContent
+          className="s-h-96 s-w-[380px]"
+          dropdownHeaders={
+            <DropdownMenuSearchbar
               ref={agentsSearchInputRef}
               name="search"
               onChange={() => {}}
               onKeyDown={() => {}}
               placeholder="Search Agents"
               value=""
+              button={<Button icon={PlusIcon} label="Create" />}
             />
-            <Button icon={PlusIcon} label="Create" />
-          </div>
+          }
+        >
           <DropdownMenuSeparator />
-          <ScrollArea className="s-h-[380px]">
-            {filteredAgents.map((agent) => {
-              return (
-                <DropdownMenuItem
-                  key={agent.name}
-                  label={agent.name}
-                  description={agent.description}
-                  icon={() => (
-                    <Avatar
-                      size="sm"
-                      emoji={agent.emoji}
-                      backgroundColor={agent.backgroundColor}
-                    />
-                  )}
-                  onClick={() => {
-                    setSelectedItem(agent.name);
-                    setSearchText("");
-                  }}
-                  truncateText
-                />
-              );
-            })}
-          </ScrollArea>
+          {filteredAgents.map((agent) => {
+            return (
+              <DropdownMenuItem
+                key={agent.name}
+                label={agent.name}
+                description={agent.description}
+                icon={() => (
+                  <Avatar
+                    size="sm"
+                    emoji={agent.emoji}
+                    backgroundColor={agent.backgroundColor}
+                  />
+                )}
+                onClick={() => {
+                  setSelectedItem(agent.name);
+                  setSearchText("");
+                }}
+                truncateText
+              />
+            );
+          })}
         </DropdownMenuContent>
       </DropdownMenu>
       <DropdownMenu open={openToolsets} onOpenChange={setOpenToolsets}>
@@ -602,36 +644,36 @@ function AttachFileDemo() {
             size="sm"
           />
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="s-w-[380px]">
-          <div className="s-flex s-gap-1.5 s-p-1.5">
-            <SearchInput
+        <DropdownMenuContent
+          className="s-h-96 s-w-[380px]"
+          dropdownHeaders={
+            <DropdownMenuSearchbar
               ref={toolsetsSearchInputRef}
               name="search"
               onChange={() => {}}
               onKeyDown={() => {}}
               placeholder="Search Tools"
               value=""
+              button={<Button icon={PlusIcon} label="Add MCP Server" />}
             />
-            <Button icon={PlusIcon} label="Add MCP Server" />
-          </div>
+          }
+        >
           <DropdownMenuSeparator />
-          <ScrollArea className="s-h-[380px]">
-            {filteredToolsetList.map((toolset) => {
-              return (
-                <DropdownMenuItem
-                  key={toolset.name}
-                  label={toolset.name}
-                  description={toolset.description}
-                  icon={() => <Avatar size="sm" icon={toolset.icon} />}
-                  onClick={() => {
-                    setSelectedItem(toolset.name);
-                    setSearchText("");
-                  }}
-                  truncateText
-                />
-              );
-            })}
-          </ScrollArea>
+          {filteredToolsetList.map((toolset) => {
+            return (
+              <DropdownMenuItem
+                key={toolset.name}
+                label={toolset.name}
+                description={toolset.description}
+                icon={() => <Avatar size="sm" icon={toolset.icon} />}
+                onClick={() => {
+                  setSelectedItem(toolset.name);
+                  setSearchText("");
+                }}
+                truncateText
+              />
+            );
+          })}
         </DropdownMenuContent>
       </DropdownMenu>
     </div>

package/src/stories/Tree.stories.tsx

@@ -17,6 +17,8 @@ import {
   DustIcon,
   EyeIcon,
   FolderIcon,
+  HistoryIcon,
+  Icon,
   IconButton,
   PlusCircleIcon,
   Tree,
@@ -41,7 +43,7 @@ export const TreeExample = () => {
   return (
     <div className="s-flex s-flex-col s-gap-10">
       <div className="s-flex s-gap-10">
-        <div className="s-flex s-w-44 s-flex-col s-gap-3">
+        <div className="s-flex s-flex-col s-gap-3">
           <div className="s-text-xl">Tree</div>
           <div>
             <Tree>
@@ -131,6 +133,21 @@ export const TreeExample = () => {
                       </>
                     }
                   />
+
+                  <Tree.Item
+                    label="t"
+                    visual={DocumentIcon}
+                    type="leaf"
+                    actions={
+                      <div className="s-flex s-grow s-flex-row s-items-center s-justify-between">
+                        <Button size="mini" variant="outline" icon={EyeIcon} />
+                        <div className="s-flex s-flex-row s-items-center s-gap-1 s-text-sm s-text-muted-foreground">
+                          <Icon visual={HistoryIcon} size="xs" />
+                          1y
+                        </div>
+                      </div>
+                    }
+                  />
                 </Tree>
               </Tree.Item>
               <Tree.Item