@dust-tt/sparkle 0.5.9 → 0.5.11

package/src/components/AttachmentChip.tsx

@@ -12,38 +12,43 @@ const attachmentChipOverrides = cn(
   "dark:s-bg-background-night dark:s-text-foreground-night"
 );
 
-type AttachmentChipIconProps = IconProps | DoubleIconProps;
+export type AttachmentChipIconProps = IconProps;
+export type AttachmentChipDoubleIconProps = DoubleIconProps;
 
-function isDoubleIconProps(
-  props: AttachmentChipIconProps
-): props is DoubleIconProps {
-  return "mainIcon" in props;
-}
+type AttachmentChipIconOptions =
+  | { icon?: AttachmentChipIconProps; doubleIcon?: never }
+  | { icon?: never; doubleIcon?: AttachmentChipDoubleIconProps };
 
-interface AttachmentChipBaseProps {
+export type AttachmentChipBaseProps = AttachmentChipIconOptions & {
   label: string;
-  icon?: AttachmentChipIconProps;
   size?: (typeof CHIP_SIZES)[number];
   color?: (typeof CHIP_COLORS)[number];
   className?: string;
   isBusy?: boolean;
   onRemove?: () => void;
-  onClick?: () => void;
-}
+  children?: never;
+};
 
-type AttachmentChipButtonProps = AttachmentChipBaseProps & {
+export type AttachmentChipButtonProps = AttachmentChipBaseProps & {
   href?: never;
+  onClick?: () => void;
 } & {
   [K in keyof Omit<LinkWrapperProps, "children">]?: never;
 };
 
-type AttachmentChipLinkProps = AttachmentChipBaseProps &
-  Omit<LinkWrapperProps, "children">;
+export type AttachmentChipLinkProps = AttachmentChipBaseProps &
+  Omit<LinkWrapperProps, "children" | "href"> & {
+    href: string;
+    onClick?: never;
+  };
 
-type AttachmentChipProps = AttachmentChipButtonProps | AttachmentChipLinkProps;
+export type AttachmentChipProps =
+  | AttachmentChipButtonProps
+  | AttachmentChipLinkProps;
 
 export function AttachmentChip({
   icon,
+  doubleIcon,
   className,
   label,
   size,
@@ -53,14 +58,13 @@ export function AttachmentChip({
   onClick,
   ...linkProps
 }: AttachmentChipProps) {
-  const iconElement = icon && (
+  const chipClassName = cn(attachmentChipOverrides, className);
+  const iconElement = (icon || doubleIcon) && (
     <div className="s-shrink-0">
-      {isDoubleIconProps(icon) ? <DoubleIcon {...icon} /> : <Icon {...icon} />}
+      {doubleIcon ? <DoubleIcon {...doubleIcon} /> : <Icon {...icon} />}
     </div>
   );
 
-  const chipClassName = cn(attachmentChipOverrides, className);
-
   if ("href" in linkProps && linkProps.href) {
     return (
       <Chip

package/src/components/ConversationMessage.tsx

@@ -1,7 +1,12 @@
 import { cva, VariantProps } from "class-variance-authority";
 import React from "react";
 
-import { Avatar, Button, CitationGrid, IconButton } from "@sparkle/components";
+import {
+  Avatar,
+  Button,
+  ConversationMessageContent,
+  IconButton,
+} from "@sparkle/components";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -52,9 +57,9 @@ interface ConversationMessageProps
   type: ConversationMessageType;
 }
 
-export type ConversationMessageType = "user" | "agent";
+type ConversationMessageType = "user" | "agent";
 
-export interface ConversationMessageAction {
+interface ConversationMessageAction {
   icon: React.ComponentType | React.ReactNode;
   label: string;
   onClick: () => void;
@@ -142,37 +147,6 @@ export const ConversationMessage = React.forwardRef<
 
 ConversationMessage.displayName = "ConversationMessage";
 
-interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-  citations?: React.ReactElement[];
-  type: ConversationMessageType;
-}
-
-export const ConversationMessageContent = React.forwardRef<
-  HTMLDivElement,
-  ConversationMessageContentProps
->(({ children, citations, className, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "s-flex s-flex-col s-gap-3 @sm/conversation:s-gap-4",
-        className
-      )}
-      {...props}
-    >
-      <div className="s-text-base s-text-foreground dark:s-text-foreground-night">
-        {children}
-      </div>
-      {citations && citations.length > 0 && (
-        <CitationGrid>{citations}</CitationGrid>
-      )}
-    </div>
-  );
-});
-
-ConversationMessageContent.displayName = "ConversationMessageContent";
-
 interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   actions?: ConversationMessageAction[];
   avatarUrl?: string | React.ReactNode;
@@ -185,7 +159,7 @@ interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivEle
   renderName: (name: string | null) => React.ReactNode;
 }
 
-export const ConversationMessageHeader = React.forwardRef<
+const ConversationMessageHeader = React.forwardRef<
   HTMLDivElement,
   ConversationMessageHeaderProps
 >(

package/src/components/ConversationMessages.tsx

@@ -0,0 +1,180 @@
+import { cva } from "class-variance-authority";
+import React from "react";
+
+import { Avatar, CitationGrid } from "@sparkle/components";
+import { cn } from "@sparkle/lib/utils";
+
+type ConversationMessageType = "user" | "agent";
+type MessageType = "me" | "user" | "agent";
+
+const wrapperVariants = cva("s-flex s-flex-col s-@container @sm:s-flex-row", {
+  variants: {
+    messageType: {
+      agent: "s-pr-0",
+      me: "s-pl-9",
+      user: "s-pr-9",
+    },
+  },
+  defaultVariants: {
+    messageType: "agent",
+  },
+});
+const messageVariants = cva("s-flex s-rounded-2xl s-max-w-full", {
+  variants: {
+    type: {
+      user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-3 s-py-3 s-gap-2 s-w-fit",
+      agent: "s-w-full s-gap-3 s-p-4 @sm:s-flex-row s-flex-col",
+    },
+  },
+  defaultVariants: {
+    type: "agent",
+  },
+});
+
+interface ConversationMessageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  messageType: MessageType;
+  type: ConversationMessageType;
+}
+
+export const ConversationMessageContainer = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageContainerProps
+>(({ children, className, messageType, type, ...props }, ref) => {
+  return (
+    <div ref={ref} className={cn(wrapperVariants({ messageType }))}>
+      <div className={cn(messageVariants({ type, className }))} {...props}>
+        {children}
+      </div>
+    </div>
+  );
+});
+
+ConversationMessageContainer.displayName = "ConversationMessageContainer";
+
+interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  citations?: React.ReactElement[];
+  type: ConversationMessageType;
+  infoChip?: React.ReactNode;
+}
+
+export const ConversationMessageContent = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageContentProps
+>(({ children, citations, className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      className={cn("s-flex s-min-w-0 s-flex-col s-gap-1", className)}
+      {...props}
+    >
+      <div className="s-text-base s-text-foreground dark:s-text-foreground-night">
+        {children}
+      </div>
+      {citations && citations.length > 0 && (
+        <CitationGrid>{citations}</CitationGrid>
+      )}
+    </div>
+  );
+});
+
+ConversationMessageContent.displayName = "ConversationMessageContent";
+
+interface ConversationMessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+  avatarUrl?: string | React.ReactNode;
+  isBusy?: boolean;
+  isDisabled?: boolean;
+  name?: string;
+  type: ConversationMessageType;
+}
+
+export const ConversationMessageAvatar = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageAvatarProps
+>(
+  (
+    { avatarUrl, isBusy, isDisabled, name = "", className, type, ...props },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn("conversation:s-p-0 s-flex s-gap-2", className)}
+        {...props}
+      >
+        <Avatar
+          className="@sm:s-hidden"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          isRounded={type === "user"}
+          size="xs"
+        />
+        <Avatar
+          className="s-hidden @sm:s-flex"
+          name={name}
+          visual={avatarUrl}
+          busy={isBusy}
+          disabled={isDisabled}
+          isRounded={type === "user"}
+          size="sm"
+        />
+      </div>
+    );
+  }
+);
+
+ConversationMessageAvatar.displayName = "ConversationMessageAvatar";
+
+interface ConversationMessageTitleProps extends React.HTMLAttributes<HTMLDivElement> {
+  name?: string;
+  timestamp?: string;
+  infoChip?: React.ReactNode;
+  completionStatus?: React.ReactNode;
+  renderName: (name: string | null) => React.ReactNode;
+}
+
+export const ConversationMessageTitle = React.forwardRef<
+  HTMLDivElement,
+  ConversationMessageTitleProps
+>(
+  (
+    {
+      name = "",
+      timestamp,
+      infoChip,
+      completionStatus,
+      renderName,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "s-inline-flex s-flex-1 s-items-center s-justify-between s-gap-0.5",
+          className
+        )}
+        {...props}
+      >
+        <div className="s-inline-flex s-items-center s-gap-2 s-text-foreground dark:s-text-foreground-night">
+          <span className="s-heading-sm">{renderName(name)}</span>
+          <span className="s-heading-xs s-text-muted-foreground dark:s-text-muted-foreground-night">
+            {timestamp}
+          </span>
+          {infoChip && (
+            <div className="s-inline-flex s-items-center">{infoChip}</div>
+          )}
+        </div>
+        <div className="s-ml-1 s-inline-flex s-items-center">
+          {completionStatus ?? null}
+        </div>
+      </div>
+    );
+  }
+);
+
+ConversationMessageTitle.displayName = "ConversationMessageTitle";

package/src/components/index.ts

@@ -45,13 +45,16 @@ export {
   ContentMessageInline,
 } from "./ContentMessage";
 export { ContextItem } from "./ContextItem";
-export type { ConversationMessageAction } from "./ConversationMessage";
 export {
   ConversationContainer,
   ConversationMessage,
-  ConversationMessageContent,
-  ConversationMessageHeader,
 } from "./ConversationMessage";
+export {
+  ConversationMessageAvatar,
+  ConversationMessageContainer,
+  ConversationMessageContent,
+  ConversationMessageTitle,
+} from "./ConversationMessages";
 export { Counter } from "./Counter";
 export type { DataTableMoreButtonProps, MenuItem } from "./DataTable";
 export {

package/src/stories/AttachmentChip.stories.tsx

@@ -85,7 +85,7 @@ export const LongLabel: Story = {
 export const WithDoubleIcon: Story = {
   args: {
     label: "My Drive Folder",
-    icon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
+    doubleIcon: { mainIcon: FolderIcon, secondaryIcon: DriveLogo, size: "sm" },
   },
   decorators: [
     (Story) => (
@@ -99,7 +99,11 @@ export const WithDoubleIcon: Story = {
 export const WithDoubleIconAndLink: Story = {
   args: {
     label: "Notion Document",
-    icon: { mainIcon: DocumentIcon, secondaryIcon: NotionLogo, size: "sm" },
+    doubleIcon: {
+      mainIcon: DocumentIcon,
+      secondaryIcon: NotionLogo,
+      size: "sm",
+    },
     href: "https://notion.so",
     target: "_blank",
   },