@dust-tt/sparkle 0.2.509 → 0.2.511

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.509",
+  "version": "0.2.511",
   "scripts": {
     "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
     "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",

package/src/components/ConversationMessage.tsx

@@ -33,6 +33,7 @@ interface ConversationMessageProps
   buttons?: React.ReactElement<typeof Button>[];
   children?: React.ReactNode;
   citations?: React.ReactElement[];
+  isDisabled?: boolean;
   name?: string;
   pictureUrl?: string | React.ReactNode | null;
   renderName?: (name: string | null) => React.ReactNode;
@@ -81,6 +82,7 @@ export const ConversationMessage = React.forwardRef<
       buttons,
       children,
       citations,
+      isDisabled = false,
       name,
       pictureUrl,
       renderName = (name) => <span>{name}</span>,
@@ -97,6 +99,7 @@ export const ConversationMessage = React.forwardRef<
             avatarUrl={pictureUrl}
             name={name}
             isBusy={avatarBusy}
+            isDisabled={isDisabled}
             renderName={renderName}
           />
 
@@ -156,6 +159,7 @@ interface ConversationMessageHeaderProps
   extends React.HTMLAttributes<HTMLDivElement> {
   avatarUrl?: string | React.ReactNode;
   isBusy?: boolean;
+  isDisabled?: boolean;
   name?: string;
   renderName: (name: string | null) => React.ReactNode;
 }
@@ -163,42 +167,57 @@ interface ConversationMessageHeaderProps
 export const ConversationMessageHeader = React.forwardRef<
   HTMLDivElement,
   ConversationMessageHeaderProps
->(({ avatarUrl, isBusy, name = "", renderName, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-flex s-items-center s-gap-2 s-p-1 @sm/conversation:s-p-0",
-        className
-      )}
-      {...props}
-    >
-      <Avatar
-        className="@sm:s-hidden"
-        name={name}
-        visual={avatarUrl}
-        busy={isBusy}
-        size="xs"
-      />
-      <Avatar
-        className="s-hidden @sm:s-flex"
-        name={name}
-        visual={avatarUrl}
-        busy={isBusy}
-        size="sm"
-      />
-      <div className="flex items-center gap-2">
-        <div
-          className={cn(
-            "s-text-sm s-font-semibold @sm:s-pb-1 @sm:s-text-base",
-            "s-text-foreground dark:s-text-foreground-night"
-          )}
-        >
-          {renderName(name)}
+>(
+  (
+    {
+      avatarUrl,
+      isBusy,
+      isDisabled,
+      name = "",
+      renderName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-flex s-items-center s-gap-2 s-p-1 @sm/conversation:s-p-0",
+          className
+        )}
+        {...props}
+      >
+        <Avatar
+          className="@sm:s-hidden"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          size="xs"
+        />
+        <Avatar
+          className="s-hidden @sm:s-flex"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          size="sm"
+        />
+        <div className="flex items-center gap-2">
+          <div
+            className={cn(
+              "s-text-sm s-font-semibold @sm:s-pb-1 @sm:s-text-base",
+              "s-text-foreground dark:s-text-foreground-night"
+            )}
+          >
+            {renderName(name)}
+          </div>
         </div>
       </div>
-    </div>
-  );
-});
+    );
+  }
+);
 
 ConversationMessageHeader.displayName = "ConversationMessageHeader";

package/src/components/Dropdown.tsx

@@ -3,6 +3,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { useRef } from "react";
 
+import { Chip } from "@sparkle/components/Chip";
 import { Icon } from "@sparkle/components/Icon";
 import { LinkWrapper, LinkWrapperProps } from "@sparkle/components/LinkWrapper";
 import { ScrollArea } from "@sparkle/components/ScrollArea";
@@ -438,6 +439,37 @@ const DropdownMenuRadioItem = React.forwardRef<
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
+interface DropdownMenuTagItemProps
+  extends Omit<DropdownMenuItemProps, "label" | "icon"> {
+  label: string;
+  size?: React.ComponentProps<typeof Chip>["size"];
+  color?: React.ComponentProps<typeof Chip>["color"];
+  onRemove?: () => void;
+}
+
+const DropdownMenuTagItem = React.forwardRef<
+  HTMLDivElement,
+  DropdownMenuTagItemProps
+>(
+  (
+    { label, size = "xs", color = "primary", onRemove, className, ...props },
+    ref
+  ) => {
+    return (
+      <DropdownMenuPrimitive.Item
+        ref={ref}
+        className={cn(menuStyleClasses.item({ variant: "default" }), className)}
+        {...props}
+        asChild
+      >
+        <Chip label={label} size={size} color={color} onRemove={onRemove} />
+      </DropdownMenuPrimitive.Item>
+    );
+  }
+);
+
+DropdownMenuTagItem.displayName = "DropdownMenuTagItem";
+
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   MutuallyExclusiveProps<
@@ -617,5 +649,6 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
+  DropdownMenuTagItem,
   DropdownMenuTrigger,
 };

package/src/components/index.ts

@@ -76,6 +76,7 @@ export {
   DropdownMenuSub,
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
+  DropdownMenuTagItem,
   DropdownMenuTrigger,
 } from "./Dropdown";
 export { default as DropzoneOverlay } from "./DropzoneOverlay";

package/src/stories/ConversationMessage.stories.tsx

@@ -94,6 +94,18 @@ export const ConversationExample = () => {
             they can find answers on the knwledge of the company Make 10
             proposals of short text
           </ConversationMessage>
+
+          <ConversationMessage
+            type="user"
+            name="Edouard"
+            pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
+            isDisabled={true}
+            renderName={(name) => (
+              <span className="s-text-gray-600 s-text-opacity-25">{name}</span>
+            )}
+          >
+            This is a message with a disabled agent
+          </ConversationMessage>
         </ConversationContainer>
       </div>
     </>

package/src/stories/Dropdown.stories.tsx

@@ -1,7 +1,9 @@
 import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu";
 import type { Meta } from "@storybook/react";
 import React from "react";
+import { useState } from "react";
 
+import { Spinner } from "@sparkle/components";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -20,6 +22,7 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from "@sparkle/components/Dropdown";
+import { DropdownMenuTagItem } from "@sparkle/components/Dropdown";
 import {
   AnthropicLogo,
   DriveLogo,
@@ -62,6 +65,7 @@ import {
   UserGroupIcon,
   UserIcon,
 } from "../index_with_tw_base";
+import { Chip } from "../index_with_tw_base";
 
 const meta = {
   title: "Primitives/Dropdown",
@@ -729,3 +733,99 @@ function StaticItemDropdownDemo() {
     </DropdownMenu>
   );
 }
+
+export const TagsDropdownExample = () => {
+  const [tags, setTags] = useState([
+    "react",
+    "typescript",
+    "ui",
+    "design-system",
+  ]);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleRemoveTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  const handleAddTag = () => {
+    setIsLoading(true);
+
+    // Simulate API call delay
+    setTimeout(() => {
+      const newTag = `tag-${Math.floor(Math.random() * 1000)}`;
+      setTags([...tags, newTag]);
+      setIsLoading(false);
+    }, 1500);
+  };
+
+  return (
+    <div className="s-flex s-flex-col s-gap-4 s-p-4">
+      <div className="s-flex s-items-center s-gap-2">
+        <DropdownMenu open={true}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="outline"
+              label="Select Tags"
+              icon={PlusIcon}
+              size="sm"
+              isSelect
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="s-w-80">
+            <DropdownMenuLabel label="Available Tags" />
+            <DropdownMenuSeparator />
+
+            <div className="s-w-full">
+              {tags.map((tag) => (
+                <DropdownMenuTagItem
+                  key={tag}
+                  label={tag}
+                  color="highlight"
+                  className="s-m-0.5"
+                  onRemove={() => handleRemoveTag(tag)}
+                  onClick={() => console.log(tag)}
+                />
+              ))}
+            </div>
+
+            <DropdownMenuSeparator />
+            <div className="s-p-2">
+              <Button
+                label={isLoading ? "Adding..." : "Add Random Tag"}
+                onClick={handleAddTag}
+                className="s-w-full"
+                size="sm"
+                disabled={isLoading}
+                icon={
+                  isLoading
+                    ? () => <Spinner size="xs" variant="color" />
+                    : undefined
+                }
+              />
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+
+        <div className="s-text-sm s-text-muted-foreground">
+          Click to view available tags
+        </div>
+      </div>
+
+      <div className="s-flex s-flex-wrap s-gap-2 s-rounded-lg s-border s-border-border s-p-4">
+        <span className="s-mr-2 s-text-sm s-text-muted-foreground">
+          Current tags:
+        </span>
+        {tags.map((tag) => (
+          <div key={tag} className="s-inline-flex">
+            <Chip
+              label={tag}
+              color="highlight"
+              size="xs"
+              onRemove={() => handleRemoveTag(tag)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};