@dust-tt/sparkle 0.2.615 → 0.2.616
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 +4 -0
- package/dist/esm/components/ConversationMessage.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessage.js +9 -4
- 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 +3 -3
- package/dist/esm/stories/ConversationMessage.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ConversationMessage.tsx +26 -7
- package/src/stories/ConversationMessage.stories.tsx +6 -0
|
@@ -9,8 +9,10 @@ interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement>,
|
|
|
9
9
|
citations?: React.ReactElement[];
|
|
10
10
|
isDisabled?: boolean;
|
|
11
11
|
name?: string;
|
|
12
|
+
timestamp?: string;
|
|
12
13
|
pictureUrl?: string | React.ReactNode | null;
|
|
13
14
|
renderName?: (name: string | null) => React.ReactNode;
|
|
15
|
+
infoChip?: React.ReactNode;
|
|
14
16
|
}
|
|
15
17
|
declare const messageVariants: (props?: ({
|
|
16
18
|
type?: "user" | "agent" | null | undefined;
|
|
@@ -30,6 +32,8 @@ interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivEle
|
|
|
30
32
|
isBusy?: boolean;
|
|
31
33
|
isDisabled?: boolean;
|
|
32
34
|
name?: string;
|
|
35
|
+
timestamp?: string;
|
|
36
|
+
infoChip?: React.ReactNode;
|
|
33
37
|
renderName: (name: string | null) => React.ReactNode;
|
|
34
38
|
}
|
|
35
39
|
export declare const ConversationMessageHeader: React.ForwardRefExoticComponent<ConversationMessageHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -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,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;
|
|
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,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;CAC5B;AAED,QAAA,MAAM,eAAe;;mFAUnB,CAAC;AAgBH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGA+C/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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,uGA+DrC,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, _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"]);
|
|
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, 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", "pictureUrl", "renderName", "infoChip", "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, isDisabled: isDisabled, renderName: renderName }),
|
|
42
|
+
React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, timestamp: timestamp, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName, infoChip: infoChip }),
|
|
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,11 +52,16 @@ 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, 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"]);
|
|
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, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "timestamp", "infoChip", "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
57
|
React.createElement(Avatar, { className: "@sm:s-hidden", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "xs" }),
|
|
58
58
|
React.createElement(Avatar, { className: "s-hidden @sm:s-flex", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "sm" }),
|
|
59
|
-
React.createElement("div", { className:
|
|
59
|
+
React.createElement("div", { className: "s-flex s-w-full s-flex-row s-justify-between s-gap-0.5" },
|
|
60
|
+
React.createElement("div", { className: cn("s-text-sm s-font-semibold @sm:s-text-base", "s-text-foreground dark:s-text-foreground-night", "s-flex s-flex-row s-items-center s-gap-2") },
|
|
61
|
+
renderName(name),
|
|
62
|
+
infoChip),
|
|
63
|
+
React.createElement("div", null,
|
|
64
|
+
React.createElement("span", { className: "s-text-xs s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night" }, timestamp)))));
|
|
60
65
|
});
|
|
61
66
|
ConversationMessageHeader.displayName = "ConversationMessageHeader";
|
|
62
67
|
//# sourceMappingURL=ConversationMessage.js.map
|
|
@@ -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":";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;AAiB5D,IAAM,eAAe,GAAG,GAAG,CAAC,0CAA0C,EAAE;IACtE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,8EAA8E;YACpF,KAAK,EAAE,kBAAkB;SAC1B;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;KACd;CACF,CAAC,CAAC;AAEH,IAAM,eAAe,GAAG,GAAG,CACzB,iFAAiF,EACjF;IACE,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,iBAAiB;SACzB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,OAAO;KACd;CACF,CACF,CAAC;AACF;;;GAGG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,KAAK,CAAC,UAAU,CAIjD,UACE,EAcC,EACD,GAAG;IAdD,IAAA,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,IAAI,UAAA,EACJ,SAAS,eAAA,EACT,UAAU,gBAAA,EACV,kBAA0C,EAA1C,UAAU,mBAAG,UAAC,IAAI,IAAK,OAAA,kCAAO,IAAI,CAAQ,EAAnB,CAAmB,KAAA,EAC1C,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,SAAS,eAAA,EACN,KAAK,cAbV,kJAcC,CADS;IAIV,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAC,iBAAiB;QACxC,sCAAK,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,MAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,IAAM,KAAK;YACjE,oBAAC,yBAAyB,IACxB,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,QAAQ,GAClB;YAEF,oBAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACzB;QACL,OAAO,IAAI,CACV,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,CAAC,EAAE,IAAI,MAAA,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC,IACrD,OAAO,CACJ,CACP,CACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB,CAAC;AAQxD,MAAM,CAAC,IAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CAGxD,UAAC,EAA4C,EAAE,GAAG;IAA/C,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA1C,sCAA4C,CAAF;IAC3C,OAAO,CACL,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,oDAAoD,EACpD,SAAS,CACV,IACG,KAAK;QAET,6BACE,SAAS,EAAE,EAAE,CACX,sCAAsC,EACtC,gDAAgD,CACjD,IAEA,QAAQ,CACL;QACL,SAAS,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,IAAI,CACpC,oBAAC,YAAY,QAAE,SAAS,CAAgB,CACzC,CACG,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,0BAA0B,CAAC,WAAW,GAAG,4BAA4B,CAAC;AAatE,MAAM,CAAC,IAAM,yBAAyB,GAAG,KAAK,CAAC,UAAU,CAIvD,UACE,EAUC,EACD,GAAG;IAVD,IAAA,SAAS,eAAA,EACT,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EACT,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,UAAU,gBAAA,EACV,SAAS,eAAA,EACN,KAAK,cATV,iGAUC,CADS;IAIV,OAAO,CACL,sCACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,4DAA4D,EAC5D,SAAS,CACV,IACG,KAAK;QAET,oBAAC,MAAM,IACL,SAAS,EAAC,cAAc,EACxB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAC,IAAI,GACT;QACF,oBAAC,MAAM,IACL,SAAS,EAAC,qBAAqB,EAC/B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,SAAS,EACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,UAAU,EACpB,IAAI,EAAC,IAAI,GACT;QACF,6BAAK,SAAS,EAAC,wDAAwD;YACrE,6BACE,SAAS,EAAE,EAAE,CACX,2CAA2C,EAC3C,gDAAgD,EAChD,0CAA0C,CAC3C;gBAEA,UAAU,CAAC,IAAI,CAAC;gBAChB,QAAQ,CACL;YACN;gBACE,8BAAM,SAAS,EAAC,oFAAoF,IACjG,SAAS,CACL,CACH,CACF,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,yBAAyB,CAAC,WAAW,GAAG,2BAA2B,CAAC"}
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAoB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA2F/B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Button, Citation, CitationIcons, CitationTitle, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
|
|
2
|
+
import { Avatar, Button, Citation, CitationIcons, CitationTitle, ClockIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
|
|
3
3
|
var meta = {
|
|
4
4
|
title: "Modules/ConversationMessage",
|
|
5
5
|
};
|
|
@@ -8,12 +8,12 @@ export var ConversationExample = function () {
|
|
|
8
8
|
return (React.createElement(React.Fragment, null,
|
|
9
9
|
React.createElement("div", { className: "s-flex s-w-full s-justify-center s-gap-6" },
|
|
10
10
|
React.createElement(ConversationContainer, null,
|
|
11
|
-
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg", citations: [
|
|
11
|
+
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg", timestamp: "14:30", citations: [
|
|
12
12
|
React.createElement(Citation, { href: "https://www.google.com" },
|
|
13
13
|
React.createElement(CitationIcons, null,
|
|
14
14
|
React.createElement(Icon, { visual: TableIcon, size: "sm" })),
|
|
15
15
|
React.createElement(CitationTitle, null, "Title")),
|
|
16
|
-
] }, "I only want to show citations if a citations reactnode has been passed"),
|
|
16
|
+
], infoChip: React.createElement(Avatar, { size: "xs", visual: React.createElement(ClockIcon, { className: "h-4 w-4" }) }) }, "I only want to show citations if a citations reactnode has been passed"),
|
|
17
17
|
React.createElement(ConversationMessage, { type: "agent", name: "@agent", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg", buttons: [
|
|
18
18
|
React.createElement(Button, { icon: HandThumbUpIcon, onClick: function () { }, size: "xs", variant: "outline" }),
|
|
19
19
|
React.createElement(Button, { icon: HandThumbDownIcon, onClick: function () { }, size: "xs", variant: "outline" }),
|
|
@@ -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,
|
|
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,MAAM,EACN,QAAQ,EACR,aAAa,EACb,aAAa,EACb,SAAS,EACT,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,oBAAC,MAAM,IAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAE,oBAAC,SAAS,IAAC,SAAS,EAAC,SAAS,GAAG,GAAI,6EAK7C;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/package.json
CHANGED
|
@@ -35,8 +35,10 @@ interface ConversationMessageProps
|
|
|
35
35
|
citations?: React.ReactElement[];
|
|
36
36
|
isDisabled?: boolean;
|
|
37
37
|
name?: string;
|
|
38
|
+
timestamp?: string;
|
|
38
39
|
pictureUrl?: string | React.ReactNode | null;
|
|
39
40
|
renderName?: (name: string | null) => React.ReactNode;
|
|
41
|
+
infoChip?: React.ReactNode;
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
|
|
@@ -81,8 +83,10 @@ export const ConversationMessage = React.forwardRef<
|
|
|
81
83
|
citations,
|
|
82
84
|
isDisabled = false,
|
|
83
85
|
name,
|
|
86
|
+
timestamp,
|
|
84
87
|
pictureUrl,
|
|
85
88
|
renderName = (name) => <span>{name}</span>,
|
|
89
|
+
infoChip,
|
|
86
90
|
type,
|
|
87
91
|
className,
|
|
88
92
|
...props
|
|
@@ -95,9 +99,11 @@ export const ConversationMessage = React.forwardRef<
|
|
|
95
99
|
<ConversationMessageHeader
|
|
96
100
|
avatarUrl={pictureUrl}
|
|
97
101
|
name={name}
|
|
102
|
+
timestamp={timestamp}
|
|
98
103
|
isBusy={avatarBusy}
|
|
99
104
|
isDisabled={isDisabled}
|
|
100
105
|
renderName={renderName}
|
|
106
|
+
infoChip={infoChip}
|
|
101
107
|
/>
|
|
102
108
|
|
|
103
109
|
<ConversationMessageContent citations={citations}>
|
|
@@ -158,6 +164,8 @@ interface ConversationMessageHeaderProps
|
|
|
158
164
|
isBusy?: boolean;
|
|
159
165
|
isDisabled?: boolean;
|
|
160
166
|
name?: string;
|
|
167
|
+
timestamp?: string;
|
|
168
|
+
infoChip?: React.ReactNode;
|
|
161
169
|
renderName: (name: string | null) => React.ReactNode;
|
|
162
170
|
}
|
|
163
171
|
|
|
@@ -171,6 +179,8 @@ export const ConversationMessageHeader = React.forwardRef<
|
|
|
171
179
|
isBusy,
|
|
172
180
|
isDisabled,
|
|
173
181
|
name = "",
|
|
182
|
+
timestamp,
|
|
183
|
+
infoChip,
|
|
174
184
|
renderName,
|
|
175
185
|
className,
|
|
176
186
|
...props
|
|
@@ -202,13 +212,22 @@ export const ConversationMessageHeader = React.forwardRef<
|
|
|
202
212
|
disabled={isDisabled}
|
|
203
213
|
size="sm"
|
|
204
214
|
/>
|
|
205
|
-
<div
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
215
|
+
<div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
|
|
216
|
+
<div
|
|
217
|
+
className={cn(
|
|
218
|
+
"s-text-sm s-font-semibold @sm:s-text-base",
|
|
219
|
+
"s-text-foreground dark:s-text-foreground-night",
|
|
220
|
+
"s-flex s-flex-row s-items-center s-gap-2"
|
|
221
|
+
)}
|
|
222
|
+
>
|
|
223
|
+
{renderName(name)}
|
|
224
|
+
{infoChip}
|
|
225
|
+
</div>
|
|
226
|
+
<div>
|
|
227
|
+
<span className="s-text-xs s-font-normal s-text-muted-foreground dark:s-text-muted-foreground-night">
|
|
228
|
+
{timestamp}
|
|
229
|
+
</span>
|
|
230
|
+
</div>
|
|
212
231
|
</div>
|
|
213
232
|
</div>
|
|
214
233
|
);
|
|
@@ -2,10 +2,12 @@ import type { Meta } from "@storybook/react";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
+
Avatar,
|
|
5
6
|
Button,
|
|
6
7
|
Citation,
|
|
7
8
|
CitationIcons,
|
|
8
9
|
CitationTitle,
|
|
10
|
+
ClockIcon,
|
|
9
11
|
ConversationContainer,
|
|
10
12
|
ConversationMessage,
|
|
11
13
|
GithubIcon,
|
|
@@ -32,6 +34,7 @@ export const ConversationExample = () => {
|
|
|
32
34
|
type="user"
|
|
33
35
|
name="Edouard"
|
|
34
36
|
pictureUrl="https://dust.tt/static/droidavatar/Droid_Lime_1.jpg"
|
|
37
|
+
timestamp="14:30"
|
|
35
38
|
citations={[
|
|
36
39
|
<Citation href="https://www.google.com">
|
|
37
40
|
<CitationIcons>
|
|
@@ -40,6 +43,9 @@ export const ConversationExample = () => {
|
|
|
40
43
|
<CitationTitle>Title</CitationTitle>
|
|
41
44
|
</Citation>,
|
|
42
45
|
]}
|
|
46
|
+
infoChip={
|
|
47
|
+
<Avatar size="xs" visual={<ClockIcon className="h-4 w-4" />} />
|
|
48
|
+
}
|
|
43
49
|
>
|
|
44
50
|
I only want to show citations if a citations reactnode has been
|
|
45
51
|
passed
|