@dust-tt/sparkle 0.4.7 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/esm/components/ConversationMessage.d.ts +7 -0
  3. package/dist/esm/components/ConversationMessage.d.ts.map +1 -1
  4. package/dist/esm/components/ConversationMessage.js +12 -5
  5. package/dist/esm/components/ConversationMessage.js.map +1 -1
  6. package/dist/esm/stories/ConversationMessage.stories.d.ts +1 -0
  7. package/dist/esm/stories/ConversationMessage.stories.d.ts.map +1 -1
  8. package/dist/esm/stories/ConversationMessage.stories.js +22 -1
  9. package/dist/esm/stories/ConversationMessage.stories.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/ConversationMessage.tsx +44 -2
  12. package/src/stories/ConversationMessage.stories.tsx +46 -0
package/dist/esm/components/ConversationMessage.d.ts CHANGED
@@ -3,6 +3,7 @@ import React from "react";
3
3
  import { Button } from "../components";
4
4
  export declare const ConversationContainer: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
5
5
  interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof messageVariants> {
6
+ actions?: ConversationMessageAction[];
6
7
  avatarBusy?: boolean;
7
8
  buttons?: React.ReactElement<typeof Button>[];
8
9
  children?: React.ReactNode;
@@ -17,6 +18,11 @@ interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement>,
17
18
  type: ConversationMessageType;
18
19
  }
19
20
  export type ConversationMessageType = "user" | "agent";
21
+ export interface ConversationMessageAction {
22
+ icon: React.ComponentType | React.ReactNode;
23
+ label: string;
24
+ onClick: () => void;
25
+ }
20
26
  declare const messageVariants: (props?: ({
21
27
  type?: "user" | "agent" | null | undefined;
22
28
  } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
@@ -32,6 +38,7 @@ interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivEl
32
38
  }
33
39
  export declare const ConversationMessageContent: React.ForwardRefExoticComponent<ConversationMessageContentProps & React.RefAttributes<HTMLDivElement>>;
34
40
  interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
41
+ actions?: ConversationMessageAction[];
35
42
  avatarUrl?: string | React.ReactNode;
36
43
  isBusy?: boolean;
37
44
  isDisabled?: boolean;
package/dist/esm/components/ConversationMessage.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConversationMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,MAAM,EAAgB,MAAM,qBAAqB,CAAC;AAGnE,eAAO,MAAM,qBAAqB,6GAkBhC,CAAC;AAIH,UAAU,wBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvD,QAAA,MAAM,eAAe;;mFAUnB,CAAC;AAaH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGAiD/B,CAAC;AAIF,UAAU,+BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACjC,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,eAAO,MAAM,0BAA0B,wGAqBrC,CAAC;AAIH,UAAU,8BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,yBAAyB,uGAyDrC,CAAC"}
1
+ {"version":3,"file":"ConversationMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAU,MAAM,EAA4B,MAAM,qBAAqB,CAAC;AAU/E,eAAO,MAAM,qBAAqB,6GAkBhC,CAAC;AAIH,UAAU,wBACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,eAAe,CAAC;IACtC,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,CAAC;IAC7C,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,KAAK,CAAC,aAAa,GAAG,KAAK,CAAC,SAAS,CAAC;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,eAAe;;mFAUnB,CAAC;AAaH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGAmD/B,CAAC;AAIF,UAAU,+BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;IACjC,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,eAAO,MAAM,0BAA0B,wGAqBrC,CAAC;AAIH,UAAU,8BACR,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5C,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,yBAAyB,uGAkFrC,CAAC"}
package/dist/esm/components/ConversationMessage.js CHANGED
@@ -1,7 +1,9 @@
1
1
  import { __assign, __rest } from "tslib";
2
2
  import { cva } from "class-variance-authority";
3
3
  import React from "react";
4
- import { Avatar, CitationGrid } from "../components";
4
+ import { Avatar, CitationGrid, IconButton } from "../components";
5
+ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../components/Dropdown";
6
+ import { MoreIcon } from "../icons/app";
5
7
  import { cn } from "../lib/utils";
6
8
  export var ConversationContainer = React.forwardRef(function (_a, ref) {
7
9
  var children = _a.children, className = _a.className, props = __rest(_a, ["children", "className"]);
@@ -36,10 +38,10 @@ var buttonsVariants = cva("s-flex s-justify-start s-gap-2 s-pt-2", {
36
38
  * side buttons and spacing are consistent between the two
37
39
  */
38
40
  export var ConversationMessage = React.forwardRef(function (_a, ref) {
39
- var _b = _a.avatarBusy, avatarBusy = _b === void 0 ? false : _b, buttons = _a.buttons, children = _a.children, citations = _a.citations, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, name = _a.name, timestamp = _a.timestamp, completionStatus = _a.completionStatus, pictureUrl = _a.pictureUrl, _d = _a.renderName, renderName = _d === void 0 ? function (name) { return React.createElement("span", null, name); } : _d, infoChip = _a.infoChip, type = _a.type, className = _a.className, props = __rest(_a, ["avatarBusy", "buttons", "children", "citations", "isDisabled", "name", "timestamp", "completionStatus", "pictureUrl", "renderName", "infoChip", "type", "className"]);
41
+ var _b = _a.avatarBusy, avatarBusy = _b === void 0 ? false : _b, buttons = _a.buttons, children = _a.children, citations = _a.citations, _c = _a.isDisabled, isDisabled = _c === void 0 ? false : _c, name = _a.name, timestamp = _a.timestamp, completionStatus = _a.completionStatus, pictureUrl = _a.pictureUrl, _d = _a.renderName, renderName = _d === void 0 ? function (name) { return React.createElement("span", null, name); } : _d, infoChip = _a.infoChip, type = _a.type, actions = _a.actions, className = _a.className, props = __rest(_a, ["avatarBusy", "buttons", "children", "citations", "isDisabled", "name", "timestamp", "completionStatus", "pictureUrl", "renderName", "infoChip", "type", "actions", "className"]);
40
42
  return (React.createElement("div", { ref: ref, className: "s-group/message" },
41
43
  React.createElement("div", __assign({ className: cn(messageVariants({ type: type, className: className })) }, props),
42
- React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, timestamp: timestamp, completionStatus: completionStatus, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName, infoChip: infoChip }),
44
+ React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, timestamp: timestamp, completionStatus: completionStatus, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName, infoChip: infoChip, actions: actions }),
43
45
  React.createElement(ConversationMessageContent, { citations: citations, type: type }, children)),
44
46
  buttons && (React.createElement("div", { className: cn(buttonsVariants({ type: type, className: className })) }, buttons))));
45
47
  });
@@ -52,7 +54,7 @@ export var ConversationMessageContent = React.forwardRef(function (_a, ref) {
52
54
  });
53
55
  ConversationMessageContent.displayName = "ConversationMessageContent";
54
56
  export var ConversationMessageHeader = React.forwardRef(function (_a, ref) {
55
- var avatarUrl = _a.avatarUrl, isBusy = _a.isBusy, isDisabled = _a.isDisabled, _b = _a.name, name = _b === void 0 ? "" : _b, timestamp = _a.timestamp, infoChip = _a.infoChip, completionStatus = _a.completionStatus, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "timestamp", "infoChip", "completionStatus", "renderName", "className"]);
57
+ var avatarUrl = _a.avatarUrl, isBusy = _a.isBusy, isDisabled = _a.isDisabled, _b = _a.name, name = _b === void 0 ? "" : _b, timestamp = _a.timestamp, infoChip = _a.infoChip, completionStatus = _a.completionStatus, renderName = _a.renderName, actions = _a.actions, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "timestamp", "infoChip", "completionStatus", "renderName", "actions", "className"]);
56
58
  return (React.createElement("div", __assign({ ref: ref, className: cn("s-flex s-items-center s-gap-2 s-p-1 @sm/conversation:s-p-0", className) }, props),
57
59
  React.createElement(Avatar, { className: "@sm:s-hidden", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "xs" }),
58
60
  React.createElement(Avatar, { className: "s-hidden @sm:s-flex", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "sm" }),
@@ -60,7 +62,12 @@ export var ConversationMessageHeader = React.forwardRef(function (_a, ref) {
60
62
  React.createElement("div", { className: "s-inline-flex s-items-baseline s-gap-2 s-text-foreground dark:s-text-foreground-night" },
61
63
  React.createElement("span", { className: "s-heading-sm" }, renderName(name)),
62
64
  React.createElement("span", { className: "s-heading-xs s-text-muted-foreground dark:s-text-muted-foreground-night" }, timestamp),
63
- infoChip && infoChip), completionStatus !== null && completionStatus !== void 0 ? completionStatus : null)));
65
+ infoChip && infoChip),
66
+ React.createElement("div", { className: "s-flex s-items-center s-gap-2" }, completionStatus !== null && completionStatus !== void 0 ? completionStatus : null,
67
+ actions && actions.length > 0 && (React.createElement(DropdownMenu, null,
68
+ React.createElement(DropdownMenuTrigger, { asChild: true },
69
+ React.createElement(IconButton, { icon: MoreIcon, size: "xs", variant: "highlight-secondary", "aria-label": "Message actions" })),
70
+ React.createElement(DropdownMenuContent, null, actions.map(function (action, index) { return (React.createElement(DropdownMenuItem, { key: index, icon: action.icon, label: action.label, onClick: action.onClick })); }))))))));
64
71
  });
65
72
  ConversationMessageHeader.displayName = "ConversationMessageHeader";
66
73
  //# sourceMappingURL=ConversationMessage.js.map
package/dist/esm/components/ConversationMessage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"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"}
package/dist/esm/stories/ConversationMessage.stories.d.ts CHANGED
@@ -5,4 +5,5 @@ declare const meta: {
5
5
  export default meta;
6
6
  export declare const ConversationExample: () => React.JSX.Element;
7
7
  export declare const ConversationHandoffExample: () => React.JSX.Element;
8
+ export declare const ConversationWithActions: () => React.JSX.Element;
8
9
  //# sourceMappingURL=ConversationMessage.stories.d.ts.map
package/dist/esm/stories/ConversationMessage.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA6F/B,CAAC;AAiEF,eAAO,MAAM,0BAA0B,yBAyEtC,CAAC"}
1
+ {"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAwB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA6F/B,CAAC;AAiEF,eAAO,MAAM,0BAA0B,yBAyEtC,CAAC;AAyBF,eAAO,MAAM,uBAAuB,yBA0CnC,CAAC"}
package/dist/esm/stories/ConversationMessage.stories.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- import { ArrowPathIcon, BoltIcon, Button, ChevronRightIcon, Citation, CitationIcons, CitationTitle, ClipboardIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
2
+ import { ArrowPathIcon, BoltIcon, Button, ChevronRightIcon, Citation, CitationIcons, CitationTitle, ClipboardIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, PencilSquareIcon, SlackLogo, TableIcon, TrashIcon, } from "../index_with_tw_base";
3
3
  var meta = {
4
4
  title: "Modules/ConversationMessage",
5
5
  };
@@ -58,4 +58,25 @@ export var ConversationHandoffExample = function () {
58
58
  React.createElement(Markdown, { content: handoffAnswer }))))));
59
59
  };
60
60
  var handoffAnswer = "\n**A Complete Technical Overview of Soupinou: The Frontier Feline Model**\n\nSoupinou represents a breakthrough in black cat architecture, featuring a revolutionary single-whisker design that challenges conventional multi-whisker paradigms. This asymmetric sensor configuration demonstrates remarkable efficiency gains in cuddle detection and lap-finding algorithms.\n\n**Technical Specifications:**\n- Processing unit: One (1) whisker sensor array\n- Color depth: Maximum black saturation\n- Purr frequency: Variable, optimized for human dopamine release\n- Cuddle latency: Near-zero response time\n\n**Benchmark Performance:**\n- Achieves 99.7% accuracy in identifying the exact moment you sit down\n- Outperforms all competitors in the \"appearing from nowhere when you're sad\" metric\n- Sets new industry standards for selective hearing (responds to treat bags but not \"get off the counter\")\n\n**Business Model:**\nOperates on a simple value exchange - provides unlimited affection in return for food, shelter, and accepting that everything you own now has black fur on it. Market penetration strategy involves strategic placement on keyboards during important work calls.\n\n**Limitations:**\nOccasional system crashes when presented with empty food bowl. Single whisker may cause slight navigation errors when squeezing through spaces designed for two-whiskered models.\n";
61
+ export var ConversationWithActions = function () {
62
+ return (React.createElement("div", { className: "s-flex s-w-full s-justify-center s-gap-6" },
63
+ React.createElement(ConversationContainer, null,
64
+ React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg", timestamp: "14:30", actions: [
65
+ {
66
+ icon: PencilSquareIcon,
67
+ label: "Edit",
68
+ onClick: function () {
69
+ console.log("Edit clicked");
70
+ },
71
+ },
72
+ {
73
+ icon: TrashIcon,
74
+ label: "Delete",
75
+ onClick: function () {
76
+ console.log("Delete clicked");
77
+ },
78
+ },
79
+ ] }, "This is a user message with edit and delete actions available in the dropdown menu."),
80
+ React.createElement(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."))));
81
+ };
61
82
  //# sourceMappingURL=ConversationMessage.stories.js.map
package/dist/esm/stories/ConversationMessage.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConversationMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,aAAa,EACb,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,QAAQ,EACR,aAAa,EACb,aAAa,EACb,aAAa,EACb,qBAAqB,EACrB,mBAAmB,EACnB,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,SAAS,GACV,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;CACM,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,0CAA0C;YACvD,oBAAC,qBAAqB;gBACpB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,EAChE,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE;wBACT,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB;4BAChB,oBAAC,aAAa,gBAAsB,CAC3B;qBACZ,EACD,QAAQ,EACN,8BAAM,SAAS,EAAC,4EAA4E;wBAC1F,oBAAC,IAAI,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,QAAQ,GAAI,CAC/B,6EAKW;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,QAAQ,EACb,UAAU,EAAC,qDAAqD,EAChE,OAAO,EAAE;wBACP,oBAAC,MAAM,IACL,IAAI,EAAE,eAAe,EACrB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;wBACF,oBAAC,MAAM,IACL,IAAI,EAAE,iBAAiB,EACvB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;qBACH,EACD,SAAS,EAAE;wBACT,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB;4BAChB,oBAAC,aAAa,sDAEE,CACP;wBACX,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,GAAG,CACxB;4BAChB,oBAAC,aAAa,gBAAsB,CAC3B;qBACZ;oBAED,oBAAC,QAAQ,IAAC,OAAO,EAAE,OAAO,GAAI,CACV;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,gSAO5C;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,EAChE,UAAU,EAAE,IAAI,EAChB,UAAU,EAAE,UAAC,IAAI,IAAK,OAAA,CACpB,8BAAM,SAAS,EAAC,mCAAmC,IAAE,IAAI,CAAQ,CAClE,EAFqB,CAErB,8CAGmB,CACA,CACpB,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,qhEA6Df,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACxC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,0CAA0C;YACvD,oBAAC,qBAAqB;gBACpB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,UAAU,EAAC,qDAAqD,EAChE,SAAS,EAAC,OAAO,2LAKG;gBACtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,WAAW,EAChB,SAAS,EAAC,OAAO,EACjB,UAAU,EAAC,wDAAwD,EACnE,OAAO,EAAE;wBACP,oBAAC,MAAM,IACL,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;wBACF,oBAAC,MAAM,IACL,IAAI,EAAE,aAAa,EACnB,OAAO,EAAE,cAAO,CAAC,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,SAAS,GAClB;qBACH;oBAED,oBAAC,QAAQ,IACP,OAAO,EACL,0GAA0G,GAE5G,CACkB;gBACtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,YAAY,EACjB,IAAI,EAAC,OAAO,EACZ,gBAAgB,EACd,8BAAM,SAAS,EAAC,0DAA0D;wBACxE,8DAAsC;wBACtC,oBAAC,IAAI,IAAC,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAC,IAAI,GAAG,CACvC,EAET,SAAS,EAAE;wBACT,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAC,IAAI,GAAG,CACvB;4BAChB,oBAAC,aAAa,sDAEE,CACP;wBACX,oBAAC,QAAQ,IAAC,IAAI,EAAC,wBAAwB;4BACrC,oBAAC,aAAa;gCACZ,oBAAC,IAAI,IAAC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAC,IAAI,GAAG,CACxB;4BAChB,oBAAC,aAAa,yBAA+B,CACpC;qBACZ;oBAED,oBAAC,QAAQ,IAAC,OAAO,EAAE,aAAa,GAAI,CAChB,CACA,CACpB,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,aAAa,GAAG,w2CAqBrB,CAAC"}
1
+ {"version":3,"file":"ConversationMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dust-tt/sparkle",
3
- "version": "0.4.7",
3
+ "version": "0.4.8",
4
4
  "scripts": {
5
5
  "build": "rm -rf dist && npm run tailwind && npm run build:esm && npm run build:cjs",
6
6
  "tailwind": "tailwindcss -i ./src/styles/tailwind.css -o dist/sparkle.css",
package/src/components/ConversationMessage.tsx CHANGED
@@ -1,7 +1,14 @@
1
1
  import { cva, VariantProps } from "class-variance-authority";
2
2
  import React from "react";
3
3
 
4
- import { Avatar, Button, CitationGrid } from "@sparkle/components";
4
+ import { Avatar, Button, CitationGrid, IconButton } from "@sparkle/components";
5
+ import {
6
+ DropdownMenu,
7
+ DropdownMenuContent,
8
+ DropdownMenuItem,
9
+ DropdownMenuTrigger,
10
+ } from "@sparkle/components/Dropdown";
11
+ import { MoreIcon } from "@sparkle/icons/app";
5
12
  import { cn } from "@sparkle/lib/utils";
6
13
 
7
14
  export const ConversationContainer = React.forwardRef<
@@ -29,6 +36,7 @@ ConversationContainer.displayName = "ConversationContainer";
29
36
  interface ConversationMessageProps
30
37
  extends React.HTMLAttributes<HTMLDivElement>,
31
38
  VariantProps<typeof messageVariants> {
39
+ actions?: ConversationMessageAction[];
32
40
  avatarBusy?: boolean;
33
41
  buttons?: React.ReactElement<typeof Button>[];
34
42
  children?: React.ReactNode;
@@ -45,6 +53,12 @@ interface ConversationMessageProps
45
53
 
46
54
  export type ConversationMessageType = "user" | "agent";
47
55
 
56
+ export interface ConversationMessageAction {
57
+ icon: React.ComponentType | React.ReactNode;
58
+ label: string;
59
+ onClick: () => void;
60
+ }
61
+
48
62
  const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
49
63
  variants: {
50
64
  type: {
@@ -90,6 +104,7 @@ export const ConversationMessage = React.forwardRef<
90
104
  renderName = (name) => <span>{name}</span>,
91
105
  infoChip,
92
106
  type,
107
+ actions,
93
108
  className,
94
109
  ...props
95
110
  },
@@ -107,6 +122,7 @@ export const ConversationMessage = React.forwardRef<
107
122
  isDisabled={isDisabled}
108
123
  renderName={renderName}
109
124
  infoChip={infoChip}
125
+ actions={actions}
110
126
  />
111
127
 
112
128
  <ConversationMessageContent citations={citations} type={type}>
@@ -159,6 +175,7 @@ ConversationMessageContent.displayName = "ConversationMessageContent";
159
175
 
160
176
  interface ConversationMessageHeaderProps
161
177
  extends React.HTMLAttributes<HTMLDivElement> {
178
+ actions?: ConversationMessageAction[];
162
179
  avatarUrl?: string | React.ReactNode;
163
180
  isBusy?: boolean;
164
181
  isDisabled?: boolean;
@@ -183,6 +200,7 @@ export const ConversationMessageHeader = React.forwardRef<
183
200
  infoChip,
184
201
  completionStatus,
185
202
  renderName,
203
+ actions,
186
204
  className,
187
205
  ...props
188
206
  },
@@ -221,7 +239,31 @@ export const ConversationMessageHeader = React.forwardRef<
221
239
  </span>
222
240
  {infoChip && infoChip}
223
241
  </div>
224
- {completionStatus ?? null}
242
+ <div className="s-flex s-items-center s-gap-2">
243
+ {completionStatus ?? null}
244
+ {actions && actions.length > 0 && (
245
+ <DropdownMenu>
246
+ <DropdownMenuTrigger asChild>
247
+ <IconButton
248
+ icon={MoreIcon}
249
+ size="xs"
250
+ variant="highlight-secondary"
251
+ aria-label="Message actions"
252
+ />
253
+ </DropdownMenuTrigger>
254
+ <DropdownMenuContent>
255
+ {actions.map((action, index) => (
256
+ <DropdownMenuItem
257
+ key={index}
258
+ icon={action.icon}
259
+ label={action.label}
260
+ onClick={action.onClick}
261
+ />
262
+ ))}
263
+ </DropdownMenuContent>
264
+ </DropdownMenu>
265
+ )}
266
+ </div>
225
267
  </div>
226
268
  </div>
227
269
  );
package/src/stories/ConversationMessage.stories.tsx CHANGED
@@ -17,8 +17,10 @@ import {
17
17
  HandThumbUpIcon,
18
18
  Icon,
19
19
  Markdown,
20
+ PencilSquareIcon,
20
21
  SlackLogo,
21
22
  TableIcon,
23
+ TrashIcon,
22
24
  } from "../index_with_tw_base";
23
25
 
24
26
  const meta = {
@@ -282,3 +284,47 @@ Operates on a simple value exchange - provides unlimited affection in return for
282
284
  **Limitations:**
283
285
  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.
284
286
  `;
287
+
288
+ export const ConversationWithActions = () => {
289
+ return (
290
+ <div className="s-flex s-w-full s-justify-center s-gap-6">
291
+ <ConversationContainer>
292
+ <ConversationMessage
293
+ type="user"
294
+ name="Edouard"
295
+ pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
296
+ timestamp="14:30"
297
+ actions={[
298
+ {
299
+ icon: PencilSquareIcon,
300
+ label: "Edit",
301
+ onClick: () => {
302
+ console.log("Edit clicked");
303
+ },
304
+ },
305
+ {
306
+ icon: TrashIcon,
307
+ label: "Delete",
308
+ onClick: () => {
309
+ console.log("Delete clicked");
310
+ },
311
+ },
312
+ ]}
313
+ >
314
+ This is a user message with edit and delete actions available in the
315
+ dropdown menu.
316
+ </ConversationMessage>
317
+
318
+ <ConversationMessage
319
+ type="agent"
320
+ name="@agent"
321
+ pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
322
+ timestamp="14:31"
323
+ >
324
+ This is an agent message with edit and delete actions available in the
325
+ dropdown menu.
326
+ </ConversationMessage>
327
+ </ConversationContainer>
328
+ </div>
329
+ );
330
+ };