@dust-tt/sparkle 0.2.571 → 0.2.573

package/dist/sparkle.css

@@ -2426,6 +2426,11 @@ select {
   border-bottom-right-radius: 0px;
 }
 
+.s-rounded-t-2xl {
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+}
+
 .s-border {
   border-width: 1px;
 }
@@ -4457,6 +4462,10 @@ select {
   line-height: 1.625;
 }
 
+.s-leading-tight {
+  line-height: 1.25;
+}
+
 .s-tracking-widest {
   letter-spacing: 0.1em;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dust-tt/sparkle",
-  "version": "0.2.571",
+  "version": "0.2.573",
   "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/AnnouncementCard.tsx

@@ -0,0 +1,90 @@
+import React from "react";
+
+import { Button } from "@sparkle/components/Button";
+import { cn } from "@sparkle/lib/utils";
+
+export interface MessageCardProps {
+  className?: string;
+  haveImage?: boolean;
+  imageSrc?: string;
+  announcementTitle?: string;
+  announcementMessage: string;
+  learnMoreHref?: string;
+  onLearnMore?: () => void;
+  onDismiss?: () => void;
+  dismissible?: boolean;
+}
+
+export const MessageCard = React.forwardRef<HTMLDivElement, MessageCardProps>(
+  (
+    {
+      className,
+      haveImage = false,
+      imageSrc,
+      announcementTitle = "New on Dust",
+      announcementMessage,
+      learnMoreHref,
+      onLearnMore,
+      onDismiss,
+      dismissible = true,
+      ...props
+    },
+    ref
+  ) => {
+    const handleLearnMore = () => {
+      if (onLearnMore) {
+        onLearnMore();
+      } else if (learnMoreHref) {
+        window.open(learnMoreHref, "_blank", "noopener,noreferrer");
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-flex s-flex-col s-overflow-hidden",
+          "s-bg-white dark:s-bg-black",
+          "s-rounded-2xl s-shadow-md",
+          "s-border s-border-border/0 dark:s-border-border-night/0",
+          className
+        )}
+        {...props}
+      >
+        {haveImage && imageSrc && (
+          <div
+            className="s-relative s-h-48 s-overflow-hidden s-rounded-t-2xl s-bg-cover s-bg-center s-bg-no-repeat"
+            style={{ backgroundImage: `url(${imageSrc})` }}
+          />
+        )}
+
+        <div className="s-p-4">
+          <div className="s-mb-2 s-text-sm s-font-medium s-text-primary dark:s-text-primary-night">
+            {announcementTitle}
+          </div>
+          <h4 className="s-mb-4 s-text-lg s-font-medium s-leading-tight s-text-foreground dark:s-text-foreground-night">
+            {announcementMessage}
+          </h4>
+          <div className="s-flex s-items-center s-justify-between">
+            <Button
+              variant="highlight"
+              size="sm"
+              onClick={handleLearnMore}
+              label="Learn more"
+            />
+            {dismissible && onDismiss && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onDismiss}
+                label="Dismiss"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+MessageCard.displayName = "MessageCard";

package/src/components/ContentMessage.tsx

@@ -1,6 +1,7 @@
 import { cva } from "class-variance-authority";
 import React, { ComponentType } from "react";
 
+import { Button, ButtonProps } from "@sparkle/components/Button";
 import { Icon } from "@sparkle/components/Icon";
 import { cn } from "@sparkle/lib/utils";
 
@@ -23,27 +24,26 @@ const CONTENT_MESSAGE_SIZES = ["sm", "md", "lg"] as const;
 
 type ContentMessageSizeType = (typeof CONTENT_MESSAGE_SIZES)[number];
 
+const sharedVariantStyles = {
+  primary:
+    "s-bg-muted-background dark:s-bg-muted-background-night s-border-border dark:s-border-border-night",
+  success: "s-bg-success-100 dark:s-bg-success-100-night s-border-transparent",
+  warning: "s-bg-warning-100 dark:s-bg-warning-100-night s-border-transparent",
+  highlight:
+    "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
+  info: "s-bg-info-100 dark:s-bg-info-100-night s-border-transparent",
+  green: "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
+  blue: "s-bg-blue-100 dark:s-bg-blue-100-night s-border-transparent",
+  rose: "s-bg-rose-100 dark:s-bg-rose-100-night s-border-transparent",
+  golden: "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
+  outline: "s-bg-transparent s-border-border dark:s-border-border-night",
+};
+
 const contentMessageVariants = cva(
   "s-flex s-flex-col s-gap-1 s-rounded-xl s-py-4 s-px-5 s-border",
   {
     variants: {
-      variant: {
-        primary:
-          "s-bg-muted-background dark:s-bg-muted-background-night s-border-border dark:s-border-border-night",
-        success:
-          "s-bg-success-100 dark:s-bg-success-100-night s-border-transparent",
-        warning:
-          "s-bg-warning-100 dark:s-bg-warning-100-night s-border-transparent",
-        highlight:
-          "s-bg-highlight-100 dark:s-bg-highlight-100-night s-border-transparent",
-        info: "s-bg-info-100 dark:s-bg-info-100-night s-border-transparent",
-        green: "s-bg-green-100 dark:s-bg-green-100-night s-border-transparent",
-        blue: "s-bg-blue-100 dark:s-bg-blue-100-night s-border-transparent",
-        rose: "s-bg-rose-100 dark:s-bg-rose-100-night s-border-transparent",
-        golden:
-          "s-bg-golden-100 dark:s-bg-golden-100-night s-border-transparent",
-        outline: "s-bg-transparent s-border-border dark:s-border-border-night",
-      },
+      variant: sharedVariantStyles,
       size: {
         lg: "",
         md: "s-max-w-[500px]",
@@ -57,6 +57,18 @@ const contentMessageVariants = cva(
   }
 );
 
+const contentMessageInlineVariants = cva(
+  "s-flex s-items-center s-gap-3 s-rounded-lg s-py-3 s-px-4 s-border",
+  {
+    variants: {
+      variant: sharedVariantStyles,
+    },
+    defaultVariants: {
+      variant: "info",
+    },
+  }
+);
+
 const iconVariants = cva("s-shrink-0", {
   variants: {
     variant: {
@@ -117,7 +129,7 @@ export interface ContentMessageProps {
   icon?: ComponentType;
 }
 
-export function ContentMessage({
+function ContentMessage({
   title,
   variant = "info",
   children,
@@ -140,6 +152,66 @@ export function ContentMessage({
         </div>
       )}
       {children && <div className={textVariants({ variant })}>{children}</div>}
+      {/* TODO(2025-08-13 aubin): Allow passing a ContentMessageAction here. */}
+    </div>
+  );
+}
+
+function ContentMessageAction(props: ButtonProps) {
+  return (
+    <Button
+      size="xs"
+      className={cn("s-shrink-0", props.className)}
+      {...props}
+    />
+  );
+}
+
+export interface ContentMessageInlineProps {
+  title?: string;
+  className?: string;
+  children?: React.ReactNode;
+  variant?: ContentMessageVariantType;
+  icon?: ComponentType;
+}
+
+function ContentMessageInline({
+  title,
+  variant = "info",
+  children,
+  className = "",
+  icon,
+}: ContentMessageInlineProps) {
+  const childrenArray = React.Children.toArray(children);
+
+  const { actionChilds, contentChildren } = childrenArray.reduce(
+    ({ actionChilds, contentChildren }, child) => {
+      if (React.isValidElement(child) && child.type === ContentMessageAction) {
+        actionChilds.push(child);
+      } else {
+        contentChildren.push(child);
+      }
+      return { actionChilds, contentChildren };
+    },
+    {
+      actionChilds: [] as React.ReactNode[],
+      contentChildren: [] as React.ReactNode[],
+    }
+  );
+
+  return (
+    <div className={cn(contentMessageInlineVariants({ variant }), className)}>
+      {icon && (
+        <Icon size="xs" visual={icon} className={iconVariants({ variant })} />
+      )}
+      <div className={cn("s-flex-1", textVariants({ variant }))}>
+        {title && <span className={titleVariants({ variant })}>{title}</span>}
+        {title && contentChildren.length > 0 && ": "}
+        {contentChildren}
+      </div>
+      {actionChilds}
     </div>
   );
 }
+
+export { ContentMessage, ContentMessageAction, ContentMessageInline };

package/src/components/Dialog.tsx

@@ -174,7 +174,7 @@ const DialogFooter = ({
   <div className="s-flex s-flex-none s-flex-col s-gap-0">
     <div
       className={cn(
-        "s-flex s-flex-none s-flex-row s-justify-end s-gap-2 s-px-3 s-py-3",
+        "s-flex s-flex-none s-flex-row s-justify-end s-gap-2 s-px-3 s-pb-3",
         className
       )}
       {...props}

package/src/components/MessageCard.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+
+import { Button } from "@sparkle/components/Button";
+import { cn } from "@sparkle/lib/utils";
+
+export interface MessageCardProps {
+  className?: string;
+  haveImage?: boolean;
+  imageSrc?: string;
+  announcementTitle?: string;
+  announcementMessage: string;
+  learnMoreHref?: string;
+  onLearnMore?: () => void;
+  onDismiss?: () => void;
+  dismissible?: boolean;
+}
+
+export const MessageCard = React.forwardRef<
+  HTMLDivElement,
+  MessageCardProps
+>(
+  (
+    {
+      className,
+      haveImage = false,
+      imageSrc,
+      announcementTitle = "New on Dust",
+      announcementMessage,
+      learnMoreHref,
+      onLearnMore,
+      onDismiss,
+      dismissible = true,
+      ...props
+    },
+    ref
+  ) => {
+    const handleLearnMore = () => {
+      if (onLearnMore) {
+        onLearnMore();
+      } else if (learnMoreHref) {
+        window.open(learnMoreHref, "_blank", "noopener,noreferrer");
+      }
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-flex s-flex-col s-overflow-hidden",
+          "s-bg-white dark:s-bg-black",
+          "s-rounded-2xl s-shadow-md",
+          "s-border s-border-border/0 dark:s-border-border-night/0",
+          className
+        )}
+        {...props}
+      >
+        {haveImage && imageSrc && (
+          <div
+            className="s-relative s-h-48 s-overflow-hidden s-rounded-t-2xl s-bg-cover s-bg-center s-bg-no-repeat"
+            style={{ backgroundImage: `url(${imageSrc})` }}
+          />
+        )}
+
+        <div className="s-p-4">
+          <div className="s-mb-2 s-text-sm s-font-medium s-text-primary dark:s-text-primary-night">
+            {announcementTitle}
+          </div>
+          <h4 className="s-mb-4 s-text-lg s-font-medium s-leading-tight s-text-foreground dark:s-text-foreground-night">
+            {announcementMessage}
+          </h4>
+          <div className="s-flex s-items-center s-justify-between">
+            <Button
+              variant="highlight"
+              size="sm"
+              onClick={handleLearnMore}
+              label="Learn more"
+            />
+            {dismissible && onDismiss && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={onDismiss}
+                label="Dismiss"
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+MessageCard.displayName = "MessageCard";

package/src/components/index.ts

@@ -35,7 +35,11 @@ export {
 } from "./Collapsible";
 export { default as ConfettiBackground } from "./ConfettiBackground";
 export { Container } from "./Container";
-export { ContentMessage } from "./ContentMessage";
+export {
+  ContentMessage,
+  ContentMessageAction,
+  ContentMessageInline,
+} from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
 export {
   ConversationContainer,
@@ -102,6 +106,7 @@ export { LinkWrapper } from "./LinkWrapper";
 export { LoadingBlock } from "./LoadingBlock";
 export * from "./markdown";
 export { markdownStyles } from "./markdown/styles";
+export { MessageCard } from "./MessageCard";
 export type {
   MultiPageDialogFooterProps,
   MultiPageDialogPage,

package/src/stories/AnnouncementCard.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { MessageCard } from "../components/MessageCard";
+
+const meta: Meta<typeof MessageCard> = {
+  title: "Components/MessageCard",
+  component: MessageCard,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A dismissible message card component designed for sidebar usage, featuring an optional image section and a new feature announcement section.",
+      },
+    },
+  },
+  argTypes: {
+    haveImage: {
+      control: { type: "boolean" },
+      description: "Whether to show an image in the top section",
+    },
+    imageSrc: {
+      control: { type: "text" },
+      description: "URL of the image to display in the top section",
+      if: { arg: "haveImage", truthy: true },
+    },
+    announcementTitle: {
+      control: { type: "text" },
+      description: "Title for the announcement section",
+    },
+    announcementMessage: {
+      control: { type: "text" },
+      description: "The main announcement message",
+    },
+    dismissible: {
+      control: { type: "boolean" },
+      description: "Whether the card can be dismissed",
+    },
+    onDismiss: {
+      description: "Callback when dismiss button is clicked",
+    },
+  },
+  args: {
+    haveImage: true,
+    imageSrc:
+      "https://blog.dust.tt/content/images/size/w2000/2025/05/cover.jpg",
+    announcementTitle: "New on Dust",
+    announcementMessage: "Create interactive content with Dust Shareables",
+    dismissible: true,
+    onDismiss: () => {
+      alert("Dismiss clicked!");
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithoutImage: Story = {
+  args: {
+    haveImage: false,
+    imageSrc: undefined,
+  },
+};

package/src/stories/ContentMessage.stories.tsx

@@ -4,6 +4,8 @@ import React from "react";
 import {
   ChatBubbleBottomCenterTextIcon,
   ContentMessage,
+  ContentMessageAction,
+  ContentMessageInline,
   HeartIcon,
   InformationCircleIcon,
 } from "../index_with_tw_base";
@@ -68,6 +70,15 @@ export const Basic: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  args: {
+    title: "This is a title",
+    icon: InformationCircleIcon,
+    children: "This is a message. It can be multiple lines long.",
+    size: "md",
+  },
+};
+
 export const WithList: Story = {
   args: {
     title: "Agent Thoughts",
@@ -146,3 +157,78 @@ export const ColorVariants: Story = {
     </div>
   ),
 };
+
+export const InlineBasic: Story = {
+  render: () => (
+    <ContentMessageInline icon={InformationCircleIcon} variant="info">
+      This is an inline message. It can be used to display a short message.
+    </ContentMessageInline>
+  ),
+};
+
+export const InlineWithAction: Story = {
+  render: () => (
+    <ContentMessageInline icon={InformationCircleIcon} variant="info">
+      This is an inline message. It can be used to display a short message.
+      <ContentMessageAction variant="primary" label="Button" />
+    </ContentMessageInline>
+  ),
+};
+
+export const InlineWithTwoActions: Story = {
+  render: () => (
+    <ContentMessageInline icon={InformationCircleIcon} variant="info">
+      This is an inline message. It can be used to display a short message.
+      <ContentMessageAction variant="primary" label="Button" />
+      <ContentMessageAction variant="highlight" label="Button" />
+    </ContentMessageInline>
+  ),
+};
+
+export const InlineWithTitle: Story = {
+  render: () => (
+    <div className="s-flex s-flex-col s-gap-4">
+      <ContentMessageInline
+        title="Status"
+        icon={InformationCircleIcon}
+        variant="info"
+      >
+        This is an inline message.
+        <ContentMessageAction variant="primary" label="Button" />
+      </ContentMessageInline>
+      <ContentMessageInline
+        title="Alert"
+        icon={InformationCircleIcon}
+        variant="warning"
+      />
+    </div>
+  ),
+};
+
+export const InlineVariants: Story = {
+  render: () => (
+    <div className="s-flex s-flex-col s-gap-4">
+      {["primary", "warning", "success", "highlight", "info"].map((variant) => (
+        <ContentMessageInline
+          key={variant}
+          icon={InformationCircleIcon}
+          variant={
+            variant as
+              | "primary"
+              | "warning"
+              | "success"
+              | "highlight"
+              | "info"
+              | "green"
+              | "blue"
+              | "rose"
+              | "golden"
+          }
+        >
+          {variant.charAt(0).toUpperCase() + variant.slice(1)} inline message
+          <ContentMessageAction variant="primary" label="Action" />
+        </ContentMessageInline>
+      ))}
+    </div>
+  ),
+};

package/src/stories/MessageCard.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { MessageCard } from "../components/MessageCard";
+
+const meta: Meta<typeof MessageCard> = {
+  title: "Components/MessageCard",
+  component: MessageCard,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A dismissible message card component designed for sidebar usage, featuring an optional image section and a new feature announcement section.",
+      },
+    },
+  },
+  argTypes: {
+    haveImage: {
+      control: { type: "boolean" },
+      description: "Whether to show an image in the top section",
+    },
+    imageSrc: {
+      control: { type: "text" },
+      description: "URL of the image to display in the top section",
+      if: { arg: "haveImage", truthy: true },
+    },
+    announcementTitle: {
+      control: { type: "text" },
+      description: "Title for the announcement section",
+    },
+    announcementMessage: {
+      control: { type: "text" },
+      description: "The main announcement message",
+    },
+    dismissible: {
+      control: { type: "boolean" },
+      description: "Whether the card can be dismissed",
+    },
+    onDismiss: {
+      description: "Callback when dismiss button is clicked",
+    },
+  },
+  args: {
+    haveImage: true,
+    imageSrc:
+      "https://blog.dust.tt/content/images/size/w2000/2025/05/cover.jpg",
+    announcementTitle: "New on Dust",
+    announcementMessage: "Create interactive content with Dust Shareables",
+    dismissible: true,
+    onDismiss: () => {
+      alert("Dismiss clicked!");
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithoutImage: Story = {
+  args: {
+    haveImage: false,
+    imageSrc: undefined,
+  },
+};