@dust-tt/sparkle 0.2.635 → 0.2.636-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 +1 -1
- package/dist/esm/components/ConversationMessage.d.ts +5 -1
- package/dist/esm/components/ConversationMessage.d.ts.map +1 -1
- package/dist/esm/components/ConversationMessage.js +10 -7
- package/dist/esm/components/ConversationMessage.js.map +1 -1
- package/dist/esm/icons/actions/Atom.js +1 -1
- package/dist/esm/icons/actions/Atom.js.map +1 -1
- package/dist/esm/icons/app/Atom.js +1 -1
- package/dist/esm/icons/app/Atom.js.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.d.ts +1 -0
- package/dist/esm/stories/ConversationMessage.stories.d.ts.map +1 -1
- package/dist/esm/stories/ConversationMessage.stories.js +26 -1
- package/dist/esm/stories/ConversationMessage.stories.js.map +1 -1
- package/dist/sparkle.css +10 -0
- package/package.json +1 -1
- package/src/components/ConversationMessage.tsx +35 -20
- package/src/icons/actions/Atom.tsx +1 -1
- package/src/icons/app/Atom.tsx +1 -1
- package/src/stories/ConversationMessage.stories.tsx +106 -0
|
@@ -13,9 +13,11 @@ interface ConversationMessageProps extends React.HTMLAttributes<HTMLDivElement>,
|
|
|
13
13
|
pictureUrl?: string | React.ReactNode | null;
|
|
14
14
|
renderName?: (name: string | null) => React.ReactNode;
|
|
15
15
|
infoChip?: React.ReactNode;
|
|
16
|
+
type: ConversationMessageType;
|
|
16
17
|
}
|
|
18
|
+
export type ConversationMessageType = "user" | "agent" | "agentHandoff";
|
|
17
19
|
declare const messageVariants: (props?: ({
|
|
18
|
-
type?: "user" | "agent" | null | undefined;
|
|
20
|
+
type?: "user" | "agent" | "agentHandoff" | null | undefined;
|
|
19
21
|
} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
|
|
20
22
|
/**
|
|
21
23
|
* Parent component for both UserMessage and AgentMessage, to ensure avatar,
|
|
@@ -25,6 +27,7 @@ export declare const ConversationMessage: React.ForwardRefExoticComponent<Conver
|
|
|
25
27
|
interface ConversationMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
26
28
|
children: React.ReactNode;
|
|
27
29
|
citations?: React.ReactElement[];
|
|
30
|
+
type: ConversationMessageType;
|
|
28
31
|
}
|
|
29
32
|
export declare const ConversationMessageContent: React.ForwardRefExoticComponent<ConversationMessageContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
30
33
|
interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
@@ -35,6 +38,7 @@ interface ConversationMessageHeaderProps extends React.HTMLAttributes<HTMLDivEle
|
|
|
35
38
|
timestamp?: string;
|
|
36
39
|
infoChip?: React.ReactNode;
|
|
37
40
|
renderName: (name: string | null) => React.ReactNode;
|
|
41
|
+
type: ConversationMessageType;
|
|
38
42
|
}
|
|
39
43
|
export declare const ConversationMessageHeader: React.ForwardRefExoticComponent<ConversationMessageHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
40
44
|
export {};
|
|
@@ -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,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;
|
|
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;IAC3B,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,MAAM,MAAM,uBAAuB,GAAG,MAAM,GAAG,OAAO,GAAG,cAAc,CAAC;AAExE,QAAA,MAAM,eAAe;;mFAYnB,CAAC;AAcH;;;GAGG;AACH,eAAO,MAAM,mBAAmB,iGAgD/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,wGA2BrC,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;IACrD,IAAI,EAAE,uBAAuB,CAAC;CAC/B;AAED,eAAO,MAAM,yBAAyB,uGAkErC,CAAC"}
|
|
@@ -14,6 +14,7 @@ var messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
|
|
|
14
14
|
type: {
|
|
15
15
|
user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-5 s-py-4 s-gap-2",
|
|
16
16
|
agent: "s-w-full s-gap-3",
|
|
17
|
+
agentHandoff: "s-w-full s-gap-3 s-border s-border-border dark:s-border-border-night s-rounded-2xl s-px-5 s-py-5",
|
|
17
18
|
},
|
|
18
19
|
},
|
|
19
20
|
defaultVariants: {
|
|
@@ -25,6 +26,7 @@ var buttonsVariants = cva("s-flex s-justify-start s-gap-2 s-pt-2", {
|
|
|
25
26
|
type: {
|
|
26
27
|
user: "s-justify-end",
|
|
27
28
|
agent: "s-justify-start",
|
|
29
|
+
agentHandoff: "s-justify-start",
|
|
28
30
|
},
|
|
29
31
|
},
|
|
30
32
|
defaultVariants: {
|
|
@@ -39,23 +41,24 @@ export var ConversationMessage = React.forwardRef(function (_a, ref) {
|
|
|
39
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, 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
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, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName, infoChip: infoChip }),
|
|
43
|
-
React.createElement(ConversationMessageContent, { citations: citations }, children)),
|
|
44
|
+
React.createElement(ConversationMessageHeader, { avatarUrl: pictureUrl, name: name, timestamp: timestamp, isBusy: avatarBusy, isDisabled: isDisabled, renderName: renderName, infoChip: infoChip, type: type }),
|
|
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
|
});
|
|
46
48
|
ConversationMessage.displayName = "ConversationMessage";
|
|
47
49
|
export var ConversationMessageContent = React.forwardRef(function (_a, ref) {
|
|
48
|
-
var children = _a.children, citations = _a.citations, className = _a.className, props = __rest(_a, ["children", "citations", "className"]);
|
|
50
|
+
var children = _a.children, citations = _a.citations, className = _a.className, type = _a.type, props = __rest(_a, ["children", "citations", "className", "type"]);
|
|
49
51
|
return (React.createElement("div", __assign({ ref: ref, className: cn("s-flex s-flex-col s-gap-3 @sm/conversation:s-gap-4", className) }, props),
|
|
50
|
-
React.createElement("div", { className: cn("s-text-sm @sm:s-text-base
|
|
52
|
+
React.createElement("div", { className: cn("s-text-sm @sm:s-text-base", "s-text-foreground dark:s-text-foreground-night", type !== "agentHandoff" && "@md:s-px-4") }, children),
|
|
51
53
|
citations && citations.length > 0 && (React.createElement(CitationGrid, null, citations))));
|
|
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, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "timestamp", "infoChip", "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, type = _a.type, renderName = _a.renderName, className = _a.className, props = __rest(_a, ["avatarUrl", "isBusy", "isDisabled", "name", "timestamp", "infoChip", "type", "renderName", "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
|
-
|
|
58
|
-
|
|
59
|
+
type !== "agentHandoff" && (React.createElement(React.Fragment, null,
|
|
60
|
+
React.createElement(Avatar, { className: "@sm:s-hidden", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "xs" }),
|
|
61
|
+
React.createElement(Avatar, { className: "s-hidden @sm:s-flex", name: name, visual: avatarUrl, busy: isBusy, disabled: isDisabled, size: "sm" }))),
|
|
59
62
|
React.createElement("div", { className: "s-flex s-w-full s-flex-row s-justify-between s-gap-0.5" },
|
|
60
63
|
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
64
|
renderName(name),
|
|
@@ -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,6 +1,6 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
var SvgAtom = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 25" }, props),
|
|
4
|
-
React.createElement("path", { fill: "
|
|
4
|
+
React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z", clipRule: "evenodd" }))); };
|
|
5
5
|
export default SvgAtom;
|
|
6
6
|
//# sourceMappingURL=Atom.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Atom.js","sourceRoot":"","sources":["../../../../src/icons/actions/Atom.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAM,OAAO,GAAG,UAAC,KAA8B,IAAK,OAAA,CAClD,sCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK;IAET,8BACE,IAAI,EAAC,
|
|
1
|
+
{"version":3,"file":"Atom.js","sourceRoot":"","sources":["../../../../src/icons/actions/Atom.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAM,OAAO,GAAG,UAAC,KAA8B,IAAK,OAAA,CAClD,sCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK;IAET,8BACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,s6FAAs6F,EACx6F,QAAQ,EAAC,SAAS,GAClB,CACE,CACP,EAhBmD,CAgBnD,CAAC;AACF,eAAe,OAAO,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __assign } from "tslib";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
var SvgAtom = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 25" }, props),
|
|
4
|
-
React.createElement("path", { fill: "
|
|
4
|
+
React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z", clipRule: "evenodd" }))); };
|
|
5
5
|
export default SvgAtom;
|
|
6
6
|
//# sourceMappingURL=Atom.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Atom.js","sourceRoot":"","sources":["../../../../src/icons/app/Atom.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAM,OAAO,GAAG,UAAC,KAA8B,IAAK,OAAA,CAClD,sCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK;IAET,8BACE,IAAI,EAAC,
|
|
1
|
+
{"version":3,"file":"Atom.js","sourceRoot":"","sources":["../../../../src/icons/app/Atom.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,IAAM,OAAO,GAAG,UAAC,KAA8B,IAAK,OAAA,CAClD,sCACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,KAAK,EACZ,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW,IACf,KAAK;IAET,8BACE,IAAI,EAAC,cAAc,EACnB,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,s6FAAs6F,EACx6F,QAAQ,EAAC,SAAS,GAClB,CACE,CACP,EAhBmD,CAgBnD,CAAC;AACF,eAAe,OAAO,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;AAuB1B,QAAA,MAAM,IAAI;;CAEkC,CAAC;AAE7C,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,mBAAmB,yBA2F/B,CAAC;AAiEF,eAAO,MAAM,0BAA0B,yBA8EtC,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Avatar, Button, Citation, CitationIcons, CitationTitle, ClockIcon, ConversationContainer, ConversationMessage, GithubIcon, HandThumbDownIcon, HandThumbUpIcon, Icon, Markdown, SlackLogo, TableIcon, } from "../index_with_tw_base";
|
|
2
|
+
import { ArrowPathIcon, AtomIcon, Avatar, Button, Citation, CitationIcons, CitationTitle, ClipboardIcon, 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
|
};
|
|
@@ -32,4 +32,29 @@ export var ConversationExample = function () {
|
|
|
32
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")))));
|
|
33
33
|
};
|
|
34
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";
|
|
35
|
+
export var ConversationHandoffExample = function () {
|
|
36
|
+
return (React.createElement(React.Fragment, null,
|
|
37
|
+
React.createElement("div", { className: "s-flex s-w-full s-justify-center s-gap-6" },
|
|
38
|
+
React.createElement(ConversationContainer, null,
|
|
39
|
+
React.createElement(ConversationMessage, { type: "user", name: "Daph", pictureUrl: "https://avatars.githubusercontent.com/u/3803406?v=4", timestamp: "17:09" }, "Can you provide an overview of the major frontier language models and their specificities. I'm curious about technical details, benchmarks, business etc.. I need a complete picture"),
|
|
40
|
+
React.createElement(ConversationMessage, { type: "agent", name: "@soupinou", pictureUrl: "https://avatars.githubusercontent.com/u/138893015?&v=4", buttons: [
|
|
41
|
+
React.createElement(Button, { icon: ClipboardIcon, onClick: function () { }, size: "xs", variant: "outline" }),
|
|
42
|
+
React.createElement(Button, { icon: ArrowPathIcon, onClick: function () { }, size: "xs", variant: "outline" }),
|
|
43
|
+
] },
|
|
44
|
+
React.createElement(Markdown, { content: "Let me use Deep Dive to explore this comprehensively. I'll need some time to gather all the information." })),
|
|
45
|
+
React.createElement(ConversationMessage, { type: "agentHandoff", name: "Deep Dive", renderName: function (name) { return (React.createElement("span", { className: "s-inline-flex s-items-center s-text-faint dark:s-text-faint-night" },
|
|
46
|
+
React.createElement(Icon, { visual: AtomIcon, size: "sm", className: "s-text-element-600 dark:s-text-element-600-dark" }),
|
|
47
|
+
React.createElement("span", { className: "s-ml-1" }, name))); }, citations: [
|
|
48
|
+
React.createElement(Citation, { href: "https://www.google.com" },
|
|
49
|
+
React.createElement(CitationIcons, null,
|
|
50
|
+
React.createElement(Icon, { visual: SlackLogo, size: "sm" })),
|
|
51
|
+
React.createElement(CitationTitle, null, "Source: Thread on #general message from @ed")),
|
|
52
|
+
React.createElement(Citation, { href: "https://www.google.com" },
|
|
53
|
+
React.createElement(CitationIcons, null,
|
|
54
|
+
React.createElement(Icon, { visual: GithubIcon, size: "sm" })),
|
|
55
|
+
React.createElement(CitationTitle, null, "PR from @henry")),
|
|
56
|
+
] },
|
|
57
|
+
React.createElement(Markdown, { content: handoffAnswer }))))));
|
|
58
|
+
};
|
|
59
|
+
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";
|
|
35
60
|
//# 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,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"}
|
|
1
|
+
{"version":3,"file":"ConversationMessage.stories.js","sourceRoot":"","sources":["../../../src/stories/ConversationMessage.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/sparkle.css
CHANGED
|
@@ -4304,6 +4304,11 @@ select {
|
|
|
4304
4304
|
padding-bottom: 1rem;
|
|
4305
4305
|
}
|
|
4306
4306
|
|
|
4307
|
+
.s-py-5 {
|
|
4308
|
+
padding-top: 1.25rem;
|
|
4309
|
+
padding-bottom: 1.25rem;
|
|
4310
|
+
}
|
|
4311
|
+
|
|
4307
4312
|
.s-py-8 {
|
|
4308
4313
|
padding-top: 2rem;
|
|
4309
4314
|
padding-bottom: 2rem;
|
|
@@ -7983,6 +7988,11 @@ select {
|
|
|
7983
7988
|
color: rgb(236 253 245 / var(--tw-text-opacity));
|
|
7984
7989
|
}
|
|
7985
7990
|
|
|
7991
|
+
:is(.s-dark .dark\:s-text-faint-night) {
|
|
7992
|
+
--tw-text-opacity: 1;
|
|
7993
|
+
color: rgb(84 93 108 / var(--tw-text-opacity));
|
|
7994
|
+
}
|
|
7995
|
+
|
|
7986
7996
|
:is(.s-dark .dark\:s-text-foreground-night) {
|
|
7987
7997
|
--tw-text-opacity: 1;
|
|
7988
7998
|
color: rgb(211 213 217 / var(--tw-text-opacity));
|
package/package.json
CHANGED
|
@@ -39,13 +39,18 @@ interface ConversationMessageProps
|
|
|
39
39
|
pictureUrl?: string | React.ReactNode | null;
|
|
40
40
|
renderName?: (name: string | null) => React.ReactNode;
|
|
41
41
|
infoChip?: React.ReactNode;
|
|
42
|
+
type: ConversationMessageType;
|
|
42
43
|
}
|
|
43
44
|
|
|
45
|
+
export type ConversationMessageType = "user" | "agent" | "agentHandoff";
|
|
46
|
+
|
|
44
47
|
const messageVariants = cva("s-flex s-w-full s-flex-col s-rounded-2xl", {
|
|
45
48
|
variants: {
|
|
46
49
|
type: {
|
|
47
50
|
user: "s-bg-muted-background dark:s-bg-muted-background-night s-px-5 s-py-4 s-gap-2",
|
|
48
51
|
agent: "s-w-full s-gap-3",
|
|
52
|
+
agentHandoff:
|
|
53
|
+
"s-w-full s-gap-3 s-border s-border-border dark:s-border-border-night s-rounded-2xl s-px-5 s-py-5",
|
|
49
54
|
},
|
|
50
55
|
},
|
|
51
56
|
defaultVariants: {
|
|
@@ -58,6 +63,7 @@ const buttonsVariants = cva("s-flex s-justify-start s-gap-2 s-pt-2", {
|
|
|
58
63
|
type: {
|
|
59
64
|
user: "s-justify-end",
|
|
60
65
|
agent: "s-justify-start",
|
|
66
|
+
agentHandoff: "s-justify-start",
|
|
61
67
|
},
|
|
62
68
|
},
|
|
63
69
|
defaultVariants: {
|
|
@@ -101,9 +107,10 @@ export const ConversationMessage = React.forwardRef<
|
|
|
101
107
|
isDisabled={isDisabled}
|
|
102
108
|
renderName={renderName}
|
|
103
109
|
infoChip={infoChip}
|
|
110
|
+
type={type}
|
|
104
111
|
/>
|
|
105
112
|
|
|
106
|
-
<ConversationMessageContent citations={citations}>
|
|
113
|
+
<ConversationMessageContent citations={citations} type={type}>
|
|
107
114
|
{children}
|
|
108
115
|
</ConversationMessageContent>
|
|
109
116
|
</div>
|
|
@@ -123,12 +130,13 @@ interface ConversationMessageContentProps
|
|
|
123
130
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
124
131
|
children: React.ReactNode;
|
|
125
132
|
citations?: React.ReactElement[];
|
|
133
|
+
type: ConversationMessageType;
|
|
126
134
|
}
|
|
127
135
|
|
|
128
136
|
export const ConversationMessageContent = React.forwardRef<
|
|
129
137
|
HTMLDivElement,
|
|
130
138
|
ConversationMessageContentProps
|
|
131
|
-
>(({ children, citations, className, ...props }, ref) => {
|
|
139
|
+
>(({ children, citations, className, type, ...props }, ref) => {
|
|
132
140
|
return (
|
|
133
141
|
<div
|
|
134
142
|
ref={ref}
|
|
@@ -140,8 +148,9 @@ export const ConversationMessageContent = React.forwardRef<
|
|
|
140
148
|
>
|
|
141
149
|
<div
|
|
142
150
|
className={cn(
|
|
143
|
-
"s-text-sm @sm:s-text-base
|
|
144
|
-
"s-text-foreground dark:s-text-foreground-night"
|
|
151
|
+
"s-text-sm @sm:s-text-base",
|
|
152
|
+
"s-text-foreground dark:s-text-foreground-night",
|
|
153
|
+
type !== "agentHandoff" && "@md:s-px-4"
|
|
145
154
|
)}
|
|
146
155
|
>
|
|
147
156
|
{children}
|
|
@@ -164,6 +173,7 @@ interface ConversationMessageHeaderProps
|
|
|
164
173
|
timestamp?: string;
|
|
165
174
|
infoChip?: React.ReactNode;
|
|
166
175
|
renderName: (name: string | null) => React.ReactNode;
|
|
176
|
+
type: ConversationMessageType;
|
|
167
177
|
}
|
|
168
178
|
|
|
169
179
|
export const ConversationMessageHeader = React.forwardRef<
|
|
@@ -178,6 +188,7 @@ export const ConversationMessageHeader = React.forwardRef<
|
|
|
178
188
|
name = "",
|
|
179
189
|
timestamp,
|
|
180
190
|
infoChip,
|
|
191
|
+
type,
|
|
181
192
|
renderName,
|
|
182
193
|
className,
|
|
183
194
|
...props
|
|
@@ -193,22 +204,26 @@ export const ConversationMessageHeader = React.forwardRef<
|
|
|
193
204
|
)}
|
|
194
205
|
{...props}
|
|
195
206
|
>
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
207
|
+
{type !== "agentHandoff" && (
|
|
208
|
+
<>
|
|
209
|
+
<Avatar
|
|
210
|
+
className="@sm:s-hidden"
|
|
211
|
+
name={name}
|
|
212
|
+
visual={avatarUrl}
|
|
213
|
+
busy={isBusy}
|
|
214
|
+
disabled={isDisabled}
|
|
215
|
+
size="xs"
|
|
216
|
+
/>
|
|
217
|
+
<Avatar
|
|
218
|
+
className="s-hidden @sm:s-flex"
|
|
219
|
+
name={name}
|
|
220
|
+
visual={avatarUrl}
|
|
221
|
+
busy={isBusy}
|
|
222
|
+
disabled={isDisabled}
|
|
223
|
+
size="sm"
|
|
224
|
+
/>
|
|
225
|
+
</>
|
|
226
|
+
)}
|
|
212
227
|
<div className="s-flex s-w-full s-flex-row s-justify-between s-gap-0.5">
|
|
213
228
|
<div
|
|
214
229
|
className={cn(
|
|
@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
|
|
|
10
10
|
{...props}
|
|
11
11
|
>
|
|
12
12
|
<path
|
|
13
|
-
fill="
|
|
13
|
+
fill="currentColor"
|
|
14
14
|
fillRule="evenodd"
|
|
15
15
|
d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
|
|
16
16
|
clipRule="evenodd"
|
package/src/icons/app/Atom.tsx
CHANGED
|
@@ -10,7 +10,7 @@ const SvgAtom = (props: SVGProps<SVGSVGElement>) => (
|
|
|
10
10
|
{...props}
|
|
11
11
|
>
|
|
12
12
|
<path
|
|
13
|
-
fill="
|
|
13
|
+
fill="currentColor"
|
|
14
14
|
fillRule="evenodd"
|
|
15
15
|
d="M14.974 2.284c.831-.248 1.733-.268 2.526.19.793.458 1.227 1.249 1.428 2.093.2.841.196 1.827.047 2.866-.029.196-.065.396-.104.599.196.068.387.137.571.21.975.39 1.83.88 2.46 1.474C22.531 10.313 23 11.084 23 12c0 .915-.468 1.687-1.099 2.283-.628.594-1.484 1.084-2.459 1.473-.184.074-.375.143-.57.211.038.204.074.404.103.6.15 1.039.153 2.025-.047 2.866-.201.844-.635 1.635-1.428 2.093-.793.458-1.695.438-2.526.19-.83-.247-1.681-.743-2.506-1.392a12.997 12.997 0 0 1-.468-.389c-.157.136-.312.266-.468.389-.825.649-1.677 1.145-2.506 1.392-.831.248-1.733.268-2.526-.19-.793-.458-1.227-1.249-1.428-2.093-.2-.841-.196-1.827-.047-2.866.029-.196.064-.396.103-.6a13.01 13.01 0 0 1-.57-.21c-.975-.39-1.83-.88-2.46-1.474C1.469 13.687 1 12.915 1 12c0-.916.468-1.687 1.099-2.284.628-.594 1.484-1.083 2.459-1.473.184-.074.374-.143.57-.211-.04-.203-.074-.403-.103-.599-.15-1.039-.153-2.025.047-2.866.201-.844.635-1.635 1.428-2.093.793-.458 1.695-.438 2.526-.19.83.247 1.681.743 2.506 1.392.156.123.312.253.468.388.156-.135.312-.265.468-.388.825-.649 1.677-1.145 2.506-1.392ZM7.06 16.502a10.7 10.7 0 0 0-.056.35c-.128.89-.11 1.605.013 2.118.121.51.319.73.482.825.163.094.452.155.955.005.506-.15 1.134-.492 1.84-1.049.092-.07.182-.146.274-.223a21.574 21.574 0 0 1-1.368-1.683 21.558 21.558 0 0 1-2.14-.343Zm9.878 0c-.677.145-1.394.26-2.141.343a21.577 21.577 0 0 1-1.368 1.683c.092.077.183.152.274.224.707.556 1.335.898 1.84 1.048.504.15.793.089.956-.006.163-.094.36-.314.482-.824.123-.513.141-1.229.013-2.119a10.715 10.715 0 0 0-.056-.35ZM12 17l-.114-.002.113.127.114-.127L12 17Zm0-8c-.582 0-1.15.022-1.698.061A23.841 23.841 0 0 0 8.605 12a23.888 23.888 0 0 0 1.697 2.939 23.855 23.855 0 0 0 3.395 0 23.915 23.915 0 0 0 1.697-2.94 23.902 23.902 0 0 0-1.697-2.937A23.853 23.853 0 0 0 12 9Zm4.33 5.5c-.019.033-.04.065-.058.098l.168-.035-.054-.163c-.02.033-.037.067-.056.1Zm-8.77.063.168.034-.058-.097-.057-.1-.053.163Zm10.808-4.59c-.212.66-.47 1.338-.772 2.027.301.688.56 1.366.772 2.025.113-.041.224-.082.331-.125.835-.334 1.445-.708 1.828-1.07.381-.36.473-.642.473-.83 0-.19-.092-.47-.473-.83-.383-.363-.993-.737-1.828-1.07a10.657 10.657 0 0 0-.33-.127Zm-12.737 0c-.113.041-.223.083-.33.126-.835.334-1.445.708-1.828 1.07-.381.36-.473.642-.473.83 0 .19.092.47.473.83.383.363.993.737 1.828 1.071.107.043.217.084.33.125.212-.659.471-1.337.772-2.025a21.546 21.546 0 0 1-.772-2.027Zm1.929-.537.053.162.057-.098.058-.098-.168.034Zm8.77.064.056.098.053-.162-.168-.035.06.099ZM8.455 4.2c-.503-.15-.792-.089-.955.006-.163.094-.36.314-.482.824-.123.513-.141 1.229-.013 2.119.016.114.035.23.056.349a21.543 21.543 0 0 1 2.14-.345c.446-.605.904-1.17 1.368-1.683-.091-.077-.183-.15-.273-.221-.707-.557-1.335-.898-1.84-1.05Zm8.045.006c-.163-.095-.452-.156-.955-.006-.506.15-1.134.492-1.84 1.049-.091.07-.184.144-.275.221a21.56 21.56 0 0 1 1.368 1.683c.747.083 1.464.199 2.14.345.021-.119.04-.235.057-.349.128-.89.11-1.606-.013-2.12-.121-.51-.319-.73-.482-.823ZM11.887 7 12 7h.112A17.69 17.69 0 0 0 12 6.874L11.887 7Z"
|
|
16
16
|
clipRule="evenodd"
|
|
@@ -2,11 +2,14 @@ import type { Meta } from "@storybook/react";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
+
ArrowPathIcon,
|
|
6
|
+
AtomIcon,
|
|
5
7
|
Avatar,
|
|
6
8
|
Button,
|
|
7
9
|
Citation,
|
|
8
10
|
CitationIcons,
|
|
9
11
|
CitationTitle,
|
|
12
|
+
ClipboardIcon,
|
|
10
13
|
ClockIcon,
|
|
11
14
|
ConversationContainer,
|
|
12
15
|
ConversationMessage,
|
|
@@ -180,3 +183,106 @@ footnote [^1]
|
|
|
180
183
|
| October 31 | 19 | 10 |
|
|
181
184
|
|
|
182
185
|
`;
|
|
186
|
+
|
|
187
|
+
export const ConversationHandoffExample = () => {
|
|
188
|
+
return (
|
|
189
|
+
<>
|
|
190
|
+
<div className="s-flex s-w-full s-justify-center s-gap-6">
|
|
191
|
+
<ConversationContainer>
|
|
192
|
+
<ConversationMessage
|
|
193
|
+
type="user"
|
|
194
|
+
name="Daph"
|
|
195
|
+
pictureUrl="https://avatars.githubusercontent.com/u/3803406?v=4"
|
|
196
|
+
timestamp="17:09"
|
|
197
|
+
>
|
|
198
|
+
Can you provide an overview of the major frontier language models
|
|
199
|
+
and their specificities. I'm curious about technical details,
|
|
200
|
+
benchmarks, business etc.. I need a complete picture
|
|
201
|
+
</ConversationMessage>
|
|
202
|
+
|
|
203
|
+
<ConversationMessage
|
|
204
|
+
type="agent"
|
|
205
|
+
name="@soupinou"
|
|
206
|
+
pictureUrl="https://avatars.githubusercontent.com/u/138893015?&v=4"
|
|
207
|
+
buttons={[
|
|
208
|
+
<Button
|
|
209
|
+
icon={ClipboardIcon}
|
|
210
|
+
onClick={() => {}}
|
|
211
|
+
size="xs"
|
|
212
|
+
variant={"outline"}
|
|
213
|
+
/>,
|
|
214
|
+
<Button
|
|
215
|
+
icon={ArrowPathIcon}
|
|
216
|
+
onClick={() => {}}
|
|
217
|
+
size="xs"
|
|
218
|
+
variant={"outline"}
|
|
219
|
+
/>,
|
|
220
|
+
]}
|
|
221
|
+
>
|
|
222
|
+
<Markdown
|
|
223
|
+
content={
|
|
224
|
+
"Let me use Deep Dive to explore this comprehensively. I'll need some time to gather all the information."
|
|
225
|
+
}
|
|
226
|
+
/>
|
|
227
|
+
</ConversationMessage>
|
|
228
|
+
|
|
229
|
+
<ConversationMessage
|
|
230
|
+
type="agentHandoff"
|
|
231
|
+
name="Deep Dive"
|
|
232
|
+
renderName={(name) => (
|
|
233
|
+
<span className="s-inline-flex s-items-center s-text-faint dark:s-text-faint-night">
|
|
234
|
+
<Icon
|
|
235
|
+
visual={AtomIcon}
|
|
236
|
+
size="sm"
|
|
237
|
+
className="s-text-element-600 dark:s-text-element-600-dark"
|
|
238
|
+
/>
|
|
239
|
+
<span className="s-ml-1">{name}</span>
|
|
240
|
+
</span>
|
|
241
|
+
)}
|
|
242
|
+
citations={[
|
|
243
|
+
<Citation href="https://www.google.com">
|
|
244
|
+
<CitationIcons>
|
|
245
|
+
<Icon visual={SlackLogo} size="sm" />
|
|
246
|
+
</CitationIcons>
|
|
247
|
+
<CitationTitle>
|
|
248
|
+
Source: Thread on #general message from @ed
|
|
249
|
+
</CitationTitle>
|
|
250
|
+
</Citation>,
|
|
251
|
+
<Citation href="https://www.google.com">
|
|
252
|
+
<CitationIcons>
|
|
253
|
+
<Icon visual={GithubIcon} size="sm" />
|
|
254
|
+
</CitationIcons>
|
|
255
|
+
<CitationTitle>PR from @henry</CitationTitle>
|
|
256
|
+
</Citation>,
|
|
257
|
+
]}
|
|
258
|
+
>
|
|
259
|
+
<Markdown content={handoffAnswer} />
|
|
260
|
+
</ConversationMessage>
|
|
261
|
+
</ConversationContainer>
|
|
262
|
+
</div>
|
|
263
|
+
</>
|
|
264
|
+
);
|
|
265
|
+
};
|
|
266
|
+
|
|
267
|
+
const handoffAnswer = `
|
|
268
|
+
**A Complete Technical Overview of Soupinou: The Frontier Feline Model**
|
|
269
|
+
|
|
270
|
+
Soupinou 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.
|
|
271
|
+
|
|
272
|
+
**Technical Specifications:**
|
|
273
|
+
- Processing unit: One (1) whisker sensor array
|
|
274
|
+
- Color depth: Maximum black saturation
|
|
275
|
+
- Purr frequency: Variable, optimized for human dopamine release
|
|
276
|
+
- Cuddle latency: Near-zero response time
|
|
277
|
+
|
|
278
|
+
**Benchmark Performance:**
|
|
279
|
+
- Achieves 99.7% accuracy in identifying the exact moment you sit down
|
|
280
|
+
- Outperforms all competitors in the "appearing from nowhere when you're sad" metric
|
|
281
|
+
- Sets new industry standards for selective hearing (responds to treat bags but not "get off the counter")
|
|
282
|
+
|
|
283
|
+
**Business Model:**
|
|
284
|
+
Operates 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.
|
|
285
|
+
|
|
286
|
+
**Limitations:**
|
|
287
|
+
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.
|
|
288
|
+
`;
|