@dust-tt/sparkle 0.2.508 → 0.2.510
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.
- package/dist/cjs/index.js +1 -1
- package/dist/esm/components/ConversationMessage.d.ts +2 -0
- package/dist/esm/components/ConversationMessage.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessage.js +5 -5
- package/dist/esm/components/ConversationMessage.js.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.d.ts.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.js +2 -1
- package/dist/esm/stories/ConversationMessage.stories.js.map +1 -1
- package/dist/sparkle.css +4 -0
- package/package.json +1 -1
- package/src/components/ConversationMessage.tsx +54 -35
- package/src/stories/ConversationMessage.stories.tsx +12 -0
|
@@ -7,6 +7,7 @@ interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement>,
|
|
|
7
7
|
buttons?: React.ReactElement<typeof Button>[];
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
citations?: React.ReactElement[];
|
|
10
|
+
isDisabled?: boolean;
|
|
10
11
|
name?: string;
|
|
11
12
|
pictureUrl?: string | React.ReactNode | null;
|
|
12
13
|
renderName?: (name: string | null) => React.ReactNode;
|
|
@@ -27,6 +28,7 @@ export declare const ConversationMessageContent: React.ForwardRefExoticComponent
|
|
|
27
28
|
interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
28
29
|
avatarUrl?: string | React.ReactNode;
|
|
29
30
|
isBusy?: boolean;
|
|
31
|
+
isDisabled?: boolean;
|
|
30
32
|
name?: string;
|
|
31
33
|
renderName: (name: string | null) => React.ReactNode;
|
|
32
34
|
}
|
|
@@ -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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,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;CACvD;AAED,QAAA,MAAM,eAAe;;mFAapB,CAAC;AAgBF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,
|
|
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,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;CACvD;AAED,QAAA,MAAM,eAAe;;mFAapB,CAAC;AAgBF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGA2C/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;CAClC;AAED,eAAO,MAAM,0BAA0B,wGA0BrC,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,UAAU,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC;CACtD;AAED,eAAO,MAAM,yBAAyB,uGAsDrC,CAAC"}
|
|
@@ -36,10 +36,10 @@ var buttonsVariants = cva("s-invisible s-flex s-justify-start s-gap-2 s-pt-2 gro
|
|
|
36
36
|
* side buttons and spacing are consistent between the two
|
|
37
37
|
*/
|
|
38
38
|
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, name = _a.name, pictureUrl = _a.pictureUrl,
|
|
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, pictureUrl = _a.pictureUrl, _d = _a.renderName, renderName = _d === void 0 ? function (name) { return React.createElement("span", null, name); } : _d, type = _a.type, className = _a.className, props = __rest(_a, ["avatarBusy", "buttons", "children", "citations", "isDisabled", "name", "pictureUrl", "renderName", "type", "className"]);
|
|
40
40
|
return (React.createElement("div", { ref: ref, className: "s-group/message" },
|
|
41
41
|
React.createElement("div", __assign({ className: cn(messageVariants({ type: type, className: className })) }, props),
|
|
42
|
-
React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, isBusy: avatarBusy, renderName: renderName }),
|
|
42
|
+
React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName }),
|
|
43
43
|
React.createElement(ConversationMessageContent, { citations: citations }, children)),
|
|
44
44
|
buttons && (React.createElement("div", { className: cn(buttonsVariants({ type: type, className: className })) }, buttons))));
|
|
45
45
|
});
|
|
@@ -52,10 +52,10 @@ export var ConversationMessageContent = React.forwardRef(function (_a, ref) {
|
|
|
52
52
|
});
|
|
53
53
|
ConversationMessageContent.displayName = "ConversationMessageContent";
|
|
54
54
|
export var ConversationMessageHeader = React.forwardRef(function (_a, ref) {
|
|
55
|
-
var avatarUrl = _a.avatarUrl, isBusy = _a.isBusy, _b = _a.name, name = _b === void 0 ? "" : _b, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "name", "renderName", "className"]);
|
|
55
|
+
var avatarUrl = _a.avatarUrl, isBusy = _a.isBusy, isDisabled = _a.isDisabled, _b = _a.name, name = _b === void 0 ? "" : _b, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "renderName", "className"]);
|
|
56
56
|
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
|
-
React.createElement(Avatar, { className: "@sm:s-hidden", name: name, visual: avatarUrl, busy: isBusy, size: "xs" }),
|
|
58
|
-
React.createElement(Avatar, { className: "s-hidden @sm:s-flex", name: name, visual: avatarUrl, busy: isBusy, size: "sm" }),
|
|
57
|
+
React.createElement(Avatar, { className: "@sm:s-hidden", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "xs" }),
|
|
58
|
+
React.createElement(Avatar, { className: "s-hidden @sm:s-flex", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "sm" }),
|
|
59
59
|
React.createElement("div", { className: "flex items-center gap-2" },
|
|
60
60
|
React.createElement("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)))));
|
|
61
61
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAgB,MAAM,0BAA0B,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAU,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAExC,MAAM,CAAC,IAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAGnD,UAAC,EAAiC,EAAE,GAAG;IAApC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA/B,yBAAiC,CAAF;IAChC,OAAO,CACL,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,8EAA8E,EAC9E,SAAS,CACV,IACG,KAAK;QAET,6BAAK,SAAS,EAAC,yGAAyG,IACrH,QAAQ,CACL,CACF,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"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"}
|
|
@@ -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;AAkB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBAuF/B,CAAC"}
|
|
@@ -28,7 +28,8 @@ export var ConversationExample = function () {
|
|
|
28
28
|
React.createElement(CitationTitle, null, "Title")),
|
|
29
29
|
] },
|
|
30
30
|
React.createElement(Markdown, { content: example })),
|
|
31
|
-
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg" }, "In the invitation email to members sent by their companies, I'm trying to write a description of dust. I want it convey that: Dust is the place where they can use AI for productivity Dust is where they can find answers on the knwledge of the company Make 10 proposals of short text")
|
|
31
|
+
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg" }, "In the invitation email to members sent by their companies, I'm trying to write a description of dust. I want it convey that: Dust is the place where they can use AI for productivity Dust is where they can find answers on the knwledge of the company Make 10 proposals of short text"),
|
|
32
|
+
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg", isDisabled: true, renderName: function (name) { return (React.createElement("span", { className: "s-text-gray-600 s-text-opacity-25" }, name)); } }, "This is a message with a disabled agent")))));
|
|
32
33
|
};
|
|
33
34
|
var example = "\n# Level 1 Title\n## Level 2 Title\n### Level 3 Title\n#### Level 4 Title\n##### Level 5 Title\n###### Level 6 Title\n\nThis is a paragraph with **bold** text and *italic* text. This is `code` block:\n```\nBlock \n```\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\n# Another Level 1 Title\n\nDemo of a list, showcasing our pets of the month:\n- Soupinou\n- Chawarma\n- Chalom\n- Anakine\n- Goose\n\nOrdered list: \n1. Soupinou\n2. Chawarma\n3. Chalom\n\n---\n\n### Demo of a quote below:\n\n> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.\n\n> You take the blue pill - the story ends, you wake up in your bed and believe whatever you want to believe. You take the red pill - you stay in Wonderland and I show you how deep the rabbit hole goes.\n\nAnother one, a short one:\n> Soupinou fait des miaou miaou.\n\n### Other stuff\n\n~~stuff~~\nlink www.x.com\nfootnote [^1]\n\n* [ ] to do\n* [x] done\n\n### Short Table\n\n| Date | High Temperature (\u00B0C) | Low Temperature (\u00B0C) |\n|-------------|-----------------------|----------------------|\n| October 25 | 19 | 14 |\n| October 26 | 17 | 12 |\n| October 27 | 16 | 10 |\n| October 28 | 16 | 9 |\n| October 29 | 17 | 8 |\n| October 30 | 19 | 8 |\n| October 31 | 19 | 10 |\n\n";
|
|
34
35
|
//# sourceMappingURL=ConversationMessage.stories.js.map
|
|
@@ -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,MAAM,EACN,QAAQ,EACR,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,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,6EAImB;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,CACA,CACpB,CACL,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,OAAO,GAAG,qhEA6Df,CAAC"}
|
|
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,MAAM,EACN,QAAQ,EACR,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,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,6EAImB;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"}
|
package/dist/sparkle.css
CHANGED
package/package.json
CHANGED
|
@@ -33,6 +33,7 @@ interface ConversationMessageProps
|
|
|
33
33
|
buttons?: React.ReactElement<typeof Button>[];
|
|
34
34
|
children?: React.ReactNode;
|
|
35
35
|
citations?: React.ReactElement[];
|
|
36
|
+
isDisabled?: boolean;
|
|
36
37
|
name?: string;
|
|
37
38
|
pictureUrl?: string | React.ReactNode | null;
|
|
38
39
|
renderName?: (name: string | null) => React.ReactNode;
|
|
@@ -81,6 +82,7 @@ export const ConversationMessage = React.forwardRef<
|
|
|
81
82
|
buttons,
|
|
82
83
|
children,
|
|
83
84
|
citations,
|
|
85
|
+
isDisabled = false,
|
|
84
86
|
name,
|
|
85
87
|
pictureUrl,
|
|
86
88
|
renderName = (name) => <span>{name}</span>,
|
|
@@ -97,6 +99,7 @@ export const ConversationMessage = React.forwardRef<
|
|
|
97
99
|
avatarUrl={pictureUrl}
|
|
98
100
|
name={name}
|
|
99
101
|
isBusy={avatarBusy}
|
|
102
|
+
isDisabled={isDisabled}
|
|
100
103
|
renderName={renderName}
|
|
101
104
|
/>
|
|
102
105
|
|
|
@@ -156,6 +159,7 @@ interface ConversationMessageHeaderProps
|
|
|
156
159
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
157
160
|
avatarUrl?: string | React.ReactNode;
|
|
158
161
|
isBusy?: boolean;
|
|
162
|
+
isDisabled?: boolean;
|
|
159
163
|
name?: string;
|
|
160
164
|
renderName: (name: string | null) => React.ReactNode;
|
|
161
165
|
}
|
|
@@ -163,42 +167,57 @@ interface ConversationMessageHeaderProps
|
|
|
163
167
|
export const ConversationMessageHeader = React.forwardRef<
|
|
164
168
|
HTMLDivElement,
|
|
165
169
|
ConversationMessageHeaderProps
|
|
166
|
-
>(
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
170
|
+
>(
|
|
171
|
+
(
|
|
172
|
+
{
|
|
173
|
+
avatarUrl,
|
|
174
|
+
isBusy,
|
|
175
|
+
isDisabled,
|
|
176
|
+
name = "",
|
|
177
|
+
renderName,
|
|
178
|
+
className,
|
|
179
|
+
...props
|
|
180
|
+
},
|
|
181
|
+
ref
|
|
182
|
+
) => {
|
|
183
|
+
return (
|
|
184
|
+
<div
|
|
185
|
+
ref={ref}
|
|
186
|
+
className={cn(
|
|
187
|
+
"s-flex s-items-center s-gap-2 s-p-1 @sm/conversation:s-p-0",
|
|
188
|
+
className
|
|
189
|
+
)}
|
|
190
|
+
{...props}
|
|
191
|
+
>
|
|
192
|
+
<Avatar
|
|
193
|
+
className="@sm:s-hidden"
|
|
194
|
+
name={name}
|
|
195
|
+
visual={avatarUrl}
|
|
196
|
+
busy={isBusy}
|
|
197
|
+
disabled={isDisabled}
|
|
198
|
+
size="xs"
|
|
199
|
+
/>
|
|
200
|
+
<Avatar
|
|
201
|
+
className="s-hidden @sm:s-flex"
|
|
202
|
+
name={name}
|
|
203
|
+
visual={avatarUrl}
|
|
204
|
+
busy={isBusy}
|
|
205
|
+
disabled={isDisabled}
|
|
206
|
+
size="sm"
|
|
207
|
+
/>
|
|
208
|
+
<div className="flex items-center gap-2">
|
|
209
|
+
<div
|
|
210
|
+
className={cn(
|
|
211
|
+
"s-text-sm s-font-semibold @sm:s-pb-1 @sm:s-text-base",
|
|
212
|
+
"s-text-foreground dark:s-text-foreground-night"
|
|
213
|
+
)}
|
|
214
|
+
>
|
|
215
|
+
{renderName(name)}
|
|
216
|
+
</div>
|
|
198
217
|
</div>
|
|
199
218
|
</div>
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
);
|
|
203
222
|
|
|
204
223
|
ConversationMessageHeader.displayName = "ConversationMessageHeader";
|
|
@@ -94,6 +94,18 @@ export const ConversationExample = () => {
|
|
|
94
94
|
they can find answers on the knwledge of the company Make 10
|
|
95
95
|
proposals of short text
|
|
96
96
|
</ConversationMessage>
|
|
97
|
+
|
|
98
|
+
<ConversationMessage
|
|
99
|
+
type="user"
|
|
100
|
+
name="Edouard"
|
|
101
|
+
pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
|
|
102
|
+
isDisabled={true}
|
|
103
|
+
renderName={(name) => (
|
|
104
|
+
<span className="s-text-gray-600 s-text-opacity-25">{name}</span>
|
|
105
|
+
)}
|
|
106
|
+
>
|
|
107
|
+
This is a message with a disabled agent
|
|
108
|
+
</ConversationMessage>
|
|
97
109
|
</ConversationContainer>
|
|
98
110
|
</div>
|
|
99
111
|
</>
|