@dust-tt/sparkle 0.4.6 → 0.4.8

package/src/stories/ConversationMessage.stories.tsx

@@ -17,8 +17,10 @@ import {
   HandThumbUpIcon,
   Icon,
   Markdown,
+  PencilSquareIcon,
   SlackLogo,
   TableIcon,
+  TrashIcon,
 } from "../index_with_tw_base";
 
 const meta = {
@@ -282,3 +284,47 @@ Operates on a simple value exchange - provides unlimited affection in return for
 **Limitations:**
 Occasional system crashes when presented with empty food bowl. Single whisker may cause slight navigation errors when squeezing through spaces designed for two-whiskered models.
 `;
+
+export const ConversationWithActions = () => {
+  return (
+    <div className="s-flex s-w-full s-justify-center s-gap-6">
+      <ConversationContainer>
+        <ConversationMessage
+          type="user"
+          name="Edouard"
+          pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
+          timestamp="14:30"
+          actions={[
+            {
+              icon: PencilSquareIcon,
+              label: "Edit",
+              onClick: () => {
+                console.log("Edit clicked");
+              },
+            },
+            {
+              icon: TrashIcon,
+              label: "Delete",
+              onClick: () => {
+                console.log("Delete clicked");
+              },
+            },
+          ]}
+        >
+          This is a user message with edit and delete actions available in the
+          dropdown menu.
+        </ConversationMessage>
+
+        <ConversationMessage
+          type="agent"
+          name="@agent"
+          pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
+          timestamp="14:31"
+        >
+          This is an agent message with edit and delete actions available in the
+          dropdown menu.
+        </ConversationMessage>
+      </ConversationContainer>
+    </div>
+  );
+};

package/src/stories/Dialog.stories.tsx

@@ -32,14 +32,13 @@ export const Basic: Story = {
       </DialogTrigger>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogTitle>Enable notifications for new messages</DialogTitle>
           <DialogDescription>
             Make changes to your profile settings here
           </DialogDescription>
         </DialogHeader>
         <DialogContainer>
-          Your profile details will be updated based on the information you
-          provide.
+          Get notified in your browser when messages arrive.
         </DialogContainer>
         <DialogFooter
           leftButtonProps={{

package/src/stories/ScrollArea.stories.tsx

@@ -128,3 +128,42 @@ export const ScrollWithActiveState: Story = {
     );
   },
 };
+
+export const ScrollAreaHideScrollbar: Story = {
+  render: () => (
+    <div className="s-flex s-flex-row s-gap-6 s-bg-muted s-p-8">
+      <div className="s-h-[400px]">
+        <ScrollArea
+          className="s-h-full s-w-[200px] s-border-b s-border-t s-border-border s-bg-white"
+          hideScrollBar
+        >
+          <h4 className="s-mb-4 s-text-sm s-font-medium s-leading-none">
+            Mini ScrollBar
+          </h4>
+          {tags.map((tag) => (
+            <React.Fragment key={tag}>
+              <div className="s-text-sm">{tag}</div>
+              <Separator className="s-my-2" />
+            </React.Fragment>
+          ))}
+        </ScrollArea>
+      </div>
+      <div className="s-h-[400px]">
+        <ScrollArea
+          className="s-h-full s-w-[200px] s-border-b s-border-t s-border-border s-bg-white"
+          hideScrollBar
+        >
+          <h4 className="s-mb-4 s-text-sm s-font-medium s-leading-none">
+            Classic ScrollBar
+          </h4>
+          {tags.map((tag) => (
+            <React.Fragment key={tag}>
+              <div className="s-text-sm">{tag}</div>
+              <Separator className="s-my-2" />
+            </React.Fragment>
+          ))}
+        </ScrollArea>
+      </div>
+    </div>
+  ),
+};