@dust-tt/sparkle 0.2.280 → 0.2.281-rc-1
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 +3 -4
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/ConversationMessage.d.ts +3 -7
- package/dist/esm/components/ConversationMessage.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessage.js.map +1 -1
- package/dist/esm/components/ConversationMessageActions.d.ts +2 -7
- package/dist/esm/components/ConversationMessageActions.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessageActions.js +3 -4
- package/dist/esm/components/ConversationMessageActions.js.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.d.ts.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.js +3 -11
- package/dist/esm/stories/ConversationMessage.stories.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ConversationMessage.tsx +3 -7
- package/src/components/ConversationMessageActions.tsx +4 -22
- package/src/stories/ConversationMessage.stories.tsx +11 -10
|
@@ -1,15 +1,11 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Button } from "../components";
|
|
2
3
|
import { ConversationMessageEmojiSelectorProps } from "../components/ConversationMessageActions";
|
|
3
4
|
export type ConversationMessageSizeType = "compact" | "normal";
|
|
4
5
|
type MessageType = "agent" | "user";
|
|
5
6
|
type ConversationMessageProps = {
|
|
6
7
|
avatarBusy?: boolean;
|
|
7
|
-
buttons?:
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
icon: ComponentType;
|
|
10
|
-
label: string;
|
|
11
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
12
|
-
}[];
|
|
8
|
+
buttons?: React.ReactElement<typeof Button>[];
|
|
13
9
|
children?: React.ReactNode;
|
|
14
10
|
citations?: React.ReactElement[];
|
|
15
11
|
messageEmoji?: ConversationMessageEmojiSelectorProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"ConversationMessage.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAEL,qCAAqC,EACtC,MAAM,gDAAgD,CAAC;AAKxD,MAAM,MAAM,2BAA2B,GAAG,SAAS,GAAG,QAAQ,CAAC;AAE/D,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAC;AAYpC,KAAK,wBAAwB,GAAG;IAC9B,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,YAAY,CAAC,EAAE,qCAAqC,CAAC;IACrD,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,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,IAAI,CAAC,EAAE,2BAA2B,CAAC;IACnC,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,UAAkB,EAClB,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,UAEC,EACD,IAAe,EACf,IAAI,GACL,EAAE,wBAAwB,qBA2B1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"ConversationMessage.js","sourceRoot":"","sources":["../../../src/components/ConversationMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EACL,0BAA0B,GAE3B,MAAM,gDAAgD,CAAC;AACxD,OAAO,EAAE,0BAA0B,EAAE,MAAM,gDAAgD,CAAC;AAC5F,OAAO,EAAE,yBAAyB,EAAE,MAAM,+CAA+C,CAAC;AAC1F,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AAMxC,IAAM,kBAAkB,GAAgD;IACtE,OAAO,EAAE,OAAO;IAChB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,IAAM,kBAAkB,GAAgC;IACtD,IAAI,EAAE,mBAAmB;IACzB,KAAK,EAAE,EAAE;CACV,CAAC;AAeF;;;GAGG;AACH,MAAM,UAAU,mBAAmB,CAAC,EAaT;QAZzB,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,kBAEC,EAFD,UAAU,mBAAG,UAAC,IAAI,IAAK,OAAA,CACrB,6BAAK,SAAS,EAAC,2BAA2B,IAAE,IAAI,CAAO,CACxD,EAFsB,CAEtB,KAAA,EACD,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,IAAI,UAAA;IAEJ,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CACX,2EAA2E,EAC3E,kBAAkB,CAAC,IAAI,CAAC,EACxB,kBAAkB,CAAC,IAAI,CAAC,CACzB;QAED,oBAAC,yBAAyB,IACxB,SAAS,EAAE,UAAU,EACrB,IAAI,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,SAAS,EACvB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,UAAU,EAClB,UAAU,EAAE,UAAU,GACtB;QAEF,oBAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,IACzD,QAAQ,CACkB;QAE7B,oBAAC,0BAA0B,IACzB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,YAAY,GAC1B,CACE,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,12 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Button } from "../components/Button";
|
|
3
3
|
type ConversationMessageActionsProps = {
|
|
4
|
-
buttons?:
|
|
5
|
-
label: string;
|
|
6
|
-
icon: ComponentType;
|
|
7
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
8
|
-
disabled?: boolean;
|
|
9
|
-
}[];
|
|
4
|
+
buttons?: React.ReactElement<typeof Button>[];
|
|
10
5
|
messageEmoji?: ConversationMessageEmojiSelectorProps;
|
|
11
6
|
};
|
|
12
7
|
export declare function ConversationMessageActions({ buttons, messageEmoji, }: ConversationMessageActionsProps): false | React.JSX.Element;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConversationMessageActions.d.ts","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAUpD,KAAK,+BAA+B,GAAG;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,MAAM,CAAC,EAAE,CAAC;IAC9C,YAAY,CAAC,EAAE,qCAAqC,CAAC;CACtD,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,EACzC,OAAY,EACZ,YAAY,GACb,EAAE,+BAA+B,6BAgBjC;AAID,MAAM,MAAM,aAAa,GAAG;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,OAAO,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,WAAW,qCAAqC;IACpD,SAAS,EAAE,aAAa,EAAE,CAAC;IAC3B,aAAa,EAAE,CAAC,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5E,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAuDD,UAAU,gBAAgB;IACxB,OAAO,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,KAAK,EACL,KAAK,EACL,OAAO,GACR,EAAE,gBAAgB,qBAalB"}
|
|
@@ -7,14 +7,13 @@ import { ReactionIcon } from "../icons/solid";
|
|
|
7
7
|
import { cn } from "../lib/utils";
|
|
8
8
|
export function ConversationMessageActions(_a) {
|
|
9
9
|
var _b = _a.buttons, buttons = _b === void 0 ? [] : _b, messageEmoji = _a.messageEmoji;
|
|
10
|
-
var buttonNodes = buttons === null || buttons === void 0 ? void 0 : buttons.map(function (button, i) { return (React.createElement(Button, { key: "message-button-".concat(i), variant: "outline", size: "xs", label: button.label, icon: button.icon, onClick: button.onClick, disabled: button.disabled || false })); });
|
|
11
10
|
if (messageEmoji) {
|
|
12
|
-
|
|
11
|
+
buttons.push(React.createElement(ConversationMessageEmojiSelector, { reactions: messageEmoji.reactions, onSubmitEmoji: messageEmoji.onSubmitEmoji, isSubmittingEmoji: messageEmoji.isSubmittingEmoji }));
|
|
13
12
|
}
|
|
14
|
-
if (
|
|
13
|
+
if (buttons.length === 0) {
|
|
15
14
|
return false;
|
|
16
15
|
}
|
|
17
|
-
return React.createElement("div", { className: "s-flex s-justify-end s-gap-2" },
|
|
16
|
+
return React.createElement("div", { className: "s-flex s-justify-end s-gap-2" }, buttons);
|
|
18
17
|
}
|
|
19
18
|
var MAX_MORE_REACTIONS_TO_SHOW = 9;
|
|
20
19
|
function ConversationMessageEmojiSelector(_a) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConversationMessageActions.js","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ConversationMessageActions.js","sourceRoot":"","sources":["../../../src/components/ConversationMessageActions.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;AAE1B,OAAO,
|
|
1
|
+
{"version":3,"file":"ConversationMessage.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAGL,mBAAmB,EAGpB,MAAM,uBAAuB,CAAC;AAE/B,QAAA,MAAM,IAAI;;;CAGkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA+I/B,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Citation, ConversationMessage, MagnifyingGlassIcon, ZoomableImageCitationWrapper, } from "../index_with_tw_base";
|
|
2
|
+
import { Button, Citation, ConversationMessage, MagnifyingGlassIcon, ZoomableImageCitationWrapper, } from "../index_with_tw_base";
|
|
3
3
|
var meta = {
|
|
4
4
|
title: "Modules/ConversationMessage",
|
|
5
5
|
component: ConversationMessage,
|
|
@@ -12,11 +12,7 @@ export var ConversationExample = function () {
|
|
|
12
12
|
React.createElement("h2", { className: "s-pb-6 s-text-xl s-font-bold" }, "Size = normal"),
|
|
13
13
|
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg" }, "I only want to show citations if a citations reactnode has been passed"),
|
|
14
14
|
React.createElement(ConversationMessage, { type: "agent", name: "@assistant", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg", buttons: [
|
|
15
|
-
{
|
|
16
|
-
icon: MagnifyingGlassIcon,
|
|
17
|
-
label: "Search details",
|
|
18
|
-
onClick: function () { },
|
|
19
|
-
},
|
|
15
|
+
React.createElement(Button, { icon: MagnifyingGlassIcon, label: "Search details", onClick: function () { } }),
|
|
20
16
|
], citations: [
|
|
21
17
|
React.createElement(Citation, { title: "Source: Thread on #general message from @ed", size: "xs", sizing: "fluid", type: "slack", index: "1", href: "https://www.google.com" }),
|
|
22
18
|
React.createElement(Citation, { title: "Title", type: "github", size: "xs", sizing: "fluid", index: "2", href: "https://www.google.com" }),
|
|
@@ -27,11 +23,7 @@ export var ConversationExample = function () {
|
|
|
27
23
|
React.createElement("h2", { className: "s-pb-6 s-text-xl s-font-bold" }, "Size = compact"),
|
|
28
24
|
React.createElement(ConversationMessage, { type: "user", name: "Edouard", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Lime_1.jpg" }, "I only want to show citations if a citations reactnode has been passed"),
|
|
29
25
|
React.createElement(ConversationMessage, { type: "agent", name: "@assistant", pictureUrl: "https://dust.tt/static/droidavatar/Droid_Pink_3.jpg", buttons: [
|
|
30
|
-
{
|
|
31
|
-
icon: MagnifyingGlassIcon,
|
|
32
|
-
label: "Search details",
|
|
33
|
-
onClick: function () { },
|
|
34
|
-
},
|
|
26
|
+
React.createElement(Button, { icon: MagnifyingGlassIcon, label: "Search details", onClick: function () { } }),
|
|
35
27
|
], citations: [
|
|
36
28
|
React.createElement(Citation, { title: "Source: Thread on #general message from @ed", size: "xs", sizing: "fluid", type: "slack", index: "1", href: "https://www.google.com" }),
|
|
37
29
|
React.createElement(Citation, { title: "Title", type: "github", size: "xs", sizing: "fluid", index: "2", href: "https://www.google.com" }),
|
|
@@ -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,QAAQ,EACR,mBAAmB,EACnB,mBAAmB,EACnB,4BAA4B,GAC7B,MAAM,uBAAuB,CAAC;AAE/B,IAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,mBAAmB;CACY,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,mBAAmB,GAAG;IACjC,OAAO,CACL;QACE,6BAAK,SAAS,EAAC,0CAA0C;YACvD,6BAAK,SAAS,EAAC,aAAa;gBAC1B,4BAAI,SAAS,EAAC,8BAA8B,oBAAmB;gBAC/D,oBAAC,mBAAmB,IAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,SAAS,EACd,UAAU,EAAC,qDAAqD,6EAI5C;gBAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAC,YAAY,EACjB,UAAU,EAAC,qDAAqD,EAChE,OAAO,EAAE;wBACP
|
|
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,5 +1,6 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from "react";
|
|
2
2
|
|
|
3
|
+
import { Button } from "@sparkle/components";
|
|
3
4
|
import {
|
|
4
5
|
ConversationMessageActions,
|
|
5
6
|
ConversationMessageEmojiSelectorProps,
|
|
@@ -24,12 +25,7 @@ const messageTypeClasses: Record<MessageType, string> = {
|
|
|
24
25
|
|
|
25
26
|
type ConversationMessageProps = {
|
|
26
27
|
avatarBusy?: boolean;
|
|
27
|
-
buttons?:
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
icon: ComponentType;
|
|
30
|
-
label: string;
|
|
31
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
32
|
-
}[];
|
|
28
|
+
buttons?: React.ReactElement<typeof Button>[];
|
|
33
29
|
children?: React.ReactNode;
|
|
34
30
|
citations?: React.ReactElement[];
|
|
35
31
|
messageEmoji?: ConversationMessageEmojiSelectorProps;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React, { useRef } from "react";
|
|
2
|
-
import { ComponentType, MouseEventHandler } from "react";
|
|
3
2
|
|
|
4
3
|
import { Button } from "@sparkle/components/Button";
|
|
5
4
|
import {
|
|
@@ -12,12 +11,7 @@ import { ReactionIcon } from "@sparkle/icons/solid";
|
|
|
12
11
|
import { cn } from "@sparkle/lib/utils";
|
|
13
12
|
|
|
14
13
|
type ConversationMessageActionsProps = {
|
|
15
|
-
buttons?:
|
|
16
|
-
label: string;
|
|
17
|
-
icon: ComponentType;
|
|
18
|
-
onClick: MouseEventHandler<HTMLButtonElement>;
|
|
19
|
-
disabled?: boolean;
|
|
20
|
-
}[];
|
|
14
|
+
buttons?: React.ReactElement<typeof Button>[];
|
|
21
15
|
messageEmoji?: ConversationMessageEmojiSelectorProps;
|
|
22
16
|
};
|
|
23
17
|
|
|
@@ -25,20 +19,8 @@ export function ConversationMessageActions({
|
|
|
25
19
|
buttons = [],
|
|
26
20
|
messageEmoji,
|
|
27
21
|
}: ConversationMessageActionsProps) {
|
|
28
|
-
const buttonNodes = buttons?.map((button, i) => (
|
|
29
|
-
<Button
|
|
30
|
-
key={`message-button-${i}`}
|
|
31
|
-
variant="outline"
|
|
32
|
-
size="xs"
|
|
33
|
-
label={button.label}
|
|
34
|
-
icon={button.icon}
|
|
35
|
-
onClick={button.onClick}
|
|
36
|
-
disabled={button.disabled || false}
|
|
37
|
-
/>
|
|
38
|
-
));
|
|
39
|
-
|
|
40
22
|
if (messageEmoji) {
|
|
41
|
-
|
|
23
|
+
buttons.push(
|
|
42
24
|
<ConversationMessageEmojiSelector
|
|
43
25
|
reactions={messageEmoji.reactions}
|
|
44
26
|
onSubmitEmoji={messageEmoji.onSubmitEmoji}
|
|
@@ -47,11 +29,11 @@ export function ConversationMessageActions({
|
|
|
47
29
|
);
|
|
48
30
|
}
|
|
49
31
|
|
|
50
|
-
if (
|
|
32
|
+
if (buttons.length === 0) {
|
|
51
33
|
return false;
|
|
52
34
|
}
|
|
53
35
|
|
|
54
|
-
return <div className="s-flex s-justify-end s-gap-2">{
|
|
36
|
+
return <div className="s-flex s-justify-end s-gap-2">{buttons}</div>;
|
|
55
37
|
}
|
|
56
38
|
|
|
57
39
|
const MAX_MORE_REACTIONS_TO_SHOW = 9;
|
|
@@ -2,6 +2,7 @@ import type { Meta } from "@storybook/react";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
+
Button,
|
|
5
6
|
Citation,
|
|
6
7
|
ConversationMessage,
|
|
7
8
|
MagnifyingGlassIcon,
|
|
@@ -35,11 +36,11 @@ export const ConversationExample = () => {
|
|
|
35
36
|
name="@assistant"
|
|
36
37
|
pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
|
|
37
38
|
buttons={[
|
|
38
|
-
|
|
39
|
-
icon
|
|
40
|
-
label
|
|
41
|
-
onClick
|
|
42
|
-
|
|
39
|
+
<Button
|
|
40
|
+
icon={MagnifyingGlassIcon}
|
|
41
|
+
label="Search details"
|
|
42
|
+
onClick={() => {}}
|
|
43
|
+
/>,
|
|
43
44
|
]}
|
|
44
45
|
citations={[
|
|
45
46
|
<Citation
|
|
@@ -103,11 +104,11 @@ export const ConversationExample = () => {
|
|
|
103
104
|
name="@assistant"
|
|
104
105
|
pictureUrl="https://dust.tt/static/droidavatar/Droid_Pink_3.jpg"
|
|
105
106
|
buttons={[
|
|
106
|
-
|
|
107
|
-
icon
|
|
108
|
-
label
|
|
109
|
-
onClick
|
|
110
|
-
|
|
107
|
+
<Button
|
|
108
|
+
icon={MagnifyingGlassIcon}
|
|
109
|
+
label="Search details"
|
|
110
|
+
onClick={() => {}}
|
|
111
|
+
/>,
|
|
111
112
|
]}
|
|
112
113
|
citations={[
|
|
113
114
|
<Citation
|