@mieweb/ui 0.10.0-dev.7 → 0.10.0-dev.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-XEPDIFEA.js → chunk-7G3ZIYFY.js} +3 -3
- package/dist/{chunk-XEPDIFEA.js.map → chunk-7G3ZIYFY.js.map} +1 -1
- package/dist/{chunk-XCENM6ED.cjs → chunk-EZSSESEU.cjs} +3 -3
- package/dist/{chunk-XCENM6ED.cjs.map → chunk-EZSSESEU.cjs.map} +1 -1
- package/dist/components/SuperChat/index.cjs +185 -159
- package/dist/components/SuperChat/index.cjs.map +1 -1
- package/dist/components/SuperChat/index.js +185 -159
- package/dist/components/SuperChat/index.js.map +1 -1
- package/dist/index.cjs +3 -3
- package/dist/index.js +1 -1
- package/dist/tailwind-preset.cjs +4 -4
- package/dist/tailwind-preset.js +1 -1
- package/package.json +1 -1
|
@@ -604,11 +604,7 @@ var MessageActionsBar = React2__namespace.forwardRef(function MessageActionsBar2
|
|
|
604
604
|
{
|
|
605
605
|
ref,
|
|
606
606
|
"data-slot": "superchat-message-actions",
|
|
607
|
-
className: chunkS5RVSXDV_cjs.cn(
|
|
608
|
-
"flex items-center gap-0.5",
|
|
609
|
-
isSelf && "justify-end",
|
|
610
|
-
actionRevealClass
|
|
611
|
-
),
|
|
607
|
+
className: chunkS5RVSXDV_cjs.cn("flex flex-col items-center gap-0.5", actionRevealClass),
|
|
612
608
|
children: actions.map((action) => /* @__PURE__ */ jsxRuntime.jsx(FooterActionButton, { action, isSelf }, action.id))
|
|
613
609
|
}
|
|
614
610
|
);
|
|
@@ -627,7 +623,7 @@ function MessageOverflowMenu({
|
|
|
627
623
|
"div",
|
|
628
624
|
{
|
|
629
625
|
className: chunkS5RVSXDV_cjs.cn(
|
|
630
|
-
"sticky bottom-2 shrink-0
|
|
626
|
+
"sticky bottom-2 mt-auto shrink-0 transition-opacity",
|
|
631
627
|
// Rich content (e.g. NITRO tables) layers internals up to z-50, so the
|
|
632
628
|
// open menu's stacking context must clear that.
|
|
633
629
|
open ? "z-[60]" : "z-10",
|
|
@@ -686,6 +682,7 @@ var MessageRow = React2__namespace.memo(function MessageRow2({
|
|
|
686
682
|
const hasBody = !!message.text || (message.content?.length ?? 0) > 0;
|
|
687
683
|
const [isEditing, setIsEditing] = React2__namespace.useState(false);
|
|
688
684
|
const [draft, setDraft] = React2__namespace.useState(message.text ?? "");
|
|
685
|
+
const [editMinWidth, setEditMinWidth] = React2__namespace.useState();
|
|
689
686
|
const editRef = React2__namespace.useRef(null);
|
|
690
687
|
const bubbleRef = React2__namespace.useRef(null);
|
|
691
688
|
const autosize = React2__namespace.useCallback(() => {
|
|
@@ -715,7 +712,10 @@ ${block.text}
|
|
|
715
712
|
return "";
|
|
716
713
|
}).filter(Boolean).join("\n\n") ?? "";
|
|
717
714
|
const canCopy = !isEditing && (!!message.content?.length || typeof message.text === "string" && message.text.length > 0);
|
|
718
|
-
const
|
|
715
|
+
const showEditAction = canEdit && !isEditing;
|
|
716
|
+
const actionCount = (canCopy ? 1 : 0) + (showEditAction ? 1 : 0);
|
|
717
|
+
const hasActions = actionCount > 0;
|
|
718
|
+
const collapseToMenu = actionCount > 1;
|
|
719
719
|
const copy = useMessageCopy({
|
|
720
720
|
markdown: markdownSource,
|
|
721
721
|
getHtml: () => bubbleRef.current?.innerHTML ?? "",
|
|
@@ -732,7 +732,7 @@ ${block.text}
|
|
|
732
732
|
});
|
|
733
733
|
observer.observe(el);
|
|
734
734
|
return () => observer.disconnect();
|
|
735
|
-
}, [hasActions]);
|
|
735
|
+
}, [hasActions, collapseToMenu]);
|
|
736
736
|
if (message.type === "system") {
|
|
737
737
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
738
738
|
"div",
|
|
@@ -765,6 +765,12 @@ ${block.text}
|
|
|
765
765
|
const accentTextColor = accessibleAccentTextColor(accent);
|
|
766
766
|
const authorName = participant?.name ?? "Unknown";
|
|
767
767
|
const startEdit = () => {
|
|
768
|
+
const el = bubbleRef.current;
|
|
769
|
+
if (el) {
|
|
770
|
+
const cs = getComputedStyle(el);
|
|
771
|
+
const contentWidth = el.clientWidth - parseFloat(cs.paddingLeft) - parseFloat(cs.paddingRight);
|
|
772
|
+
setEditMinWidth(contentWidth > 0 ? contentWidth : void 0);
|
|
773
|
+
}
|
|
768
774
|
setDraft(message.text ?? "");
|
|
769
775
|
setIsEditing(true);
|
|
770
776
|
};
|
|
@@ -838,7 +844,7 @@ ${block.text}
|
|
|
838
844
|
}
|
|
839
845
|
}
|
|
840
846
|
] : [],
|
|
841
|
-
...
|
|
847
|
+
...showEditAction ? [
|
|
842
848
|
{
|
|
843
849
|
id: "edit",
|
|
844
850
|
label: "Edit message",
|
|
@@ -858,172 +864,191 @@ ${block.text}
|
|
|
858
864
|
isSelf ? "flex-row-reverse" : "flex-row"
|
|
859
865
|
),
|
|
860
866
|
children: [
|
|
861
|
-
/* @__PURE__ */ jsxRuntime.
|
|
862
|
-
|
|
863
|
-
|
|
864
|
-
"
|
|
865
|
-
|
|
866
|
-
|
|
867
|
-
|
|
868
|
-
children: [
|
|
867
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
868
|
+
"div",
|
|
869
|
+
{
|
|
870
|
+
"data-slot": "superchat-message-gutter",
|
|
871
|
+
className: "flex shrink-0 flex-col items-center gap-1",
|
|
872
|
+
children: [
|
|
873
|
+
/* @__PURE__ */ jsxRuntime.jsx(ParticipantAvatar, { participant }),
|
|
874
|
+
hasActions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
869
875
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
870
|
-
"span",
|
|
871
|
-
{
|
|
872
|
-
className: "text-xs font-medium",
|
|
873
|
-
style: accentTextColor ? { color: accentTextColor } : void 0,
|
|
874
|
-
children: authorName
|
|
875
|
-
}
|
|
876
|
-
),
|
|
877
|
-
participant?.role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
|
|
878
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
|
|
879
|
-
message.editedAt && /* @__PURE__ */ jsxRuntime.jsx(
|
|
880
|
-
"span",
|
|
881
|
-
{
|
|
882
|
-
"data-slot": "superchat-edited-indicator",
|
|
883
|
-
className: "text-[10px] text-neutral-500 dark:text-neutral-400",
|
|
884
|
-
title: `Edited ${formatTime(message.editedAt)}`,
|
|
885
|
-
children: "(edited)"
|
|
886
|
-
}
|
|
887
|
-
)
|
|
888
|
-
]
|
|
889
|
-
}
|
|
890
|
-
),
|
|
891
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
892
|
-
"div",
|
|
893
|
-
{
|
|
894
|
-
className: chunkS5RVSXDV_cjs.cn(
|
|
895
|
-
"flex items-center gap-1",
|
|
896
|
-
isSelf ? "flex-row-reverse" : "flex-row"
|
|
897
|
-
),
|
|
898
|
-
children: [
|
|
899
|
-
hasActions && /* @__PURE__ */ jsxRuntime.jsx(
|
|
900
876
|
MessageOverflowMenu,
|
|
901
877
|
{
|
|
902
878
|
isSelf,
|
|
903
879
|
actions,
|
|
904
|
-
footerVisible
|
|
880
|
+
footerVisible: collapseToMenu ? false : footerVisible
|
|
905
881
|
}
|
|
906
882
|
),
|
|
907
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
908
|
-
|
|
883
|
+
!collapseToMenu && /* @__PURE__ */ jsxRuntime.jsx(
|
|
884
|
+
MessageActionsBar,
|
|
909
885
|
{
|
|
910
|
-
ref:
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
886
|
+
ref: actionsBarRef,
|
|
887
|
+
actions,
|
|
888
|
+
isSelf
|
|
889
|
+
}
|
|
890
|
+
)
|
|
891
|
+
] })
|
|
892
|
+
]
|
|
893
|
+
}
|
|
894
|
+
),
|
|
895
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
896
|
+
"div",
|
|
897
|
+
{
|
|
898
|
+
className: chunkS5RVSXDV_cjs.cn(
|
|
899
|
+
"flex min-w-0 flex-1 flex-col gap-1",
|
|
900
|
+
isSelf && "items-end"
|
|
901
|
+
),
|
|
902
|
+
children: [
|
|
903
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
904
|
+
"div",
|
|
905
|
+
{
|
|
906
|
+
"data-slot": "superchat-message-meta",
|
|
907
|
+
className: "flex items-baseline gap-2",
|
|
908
|
+
children: [
|
|
909
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
910
|
+
"span",
|
|
917
911
|
{
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
children:
|
|
921
|
-
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
912
|
+
className: "text-xs font-medium",
|
|
913
|
+
style: accentTextColor ? { color: accentTextColor } : void 0,
|
|
914
|
+
children: authorName
|
|
915
|
+
}
|
|
916
|
+
),
|
|
917
|
+
participant?.role && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: participant.role }),
|
|
918
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: formatTime(message.time) }),
|
|
919
|
+
message.editedAt && /* @__PURE__ */ jsxRuntime.jsx(
|
|
920
|
+
"span",
|
|
921
|
+
{
|
|
922
|
+
"data-slot": "superchat-edited-indicator",
|
|
923
|
+
className: "text-[10px] text-neutral-500 dark:text-neutral-400",
|
|
924
|
+
title: `Edited ${formatTime(message.editedAt)}`,
|
|
925
|
+
children: "(edited)"
|
|
926
|
+
}
|
|
927
|
+
)
|
|
928
|
+
]
|
|
929
|
+
}
|
|
930
|
+
),
|
|
931
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
932
|
+
"div",
|
|
933
|
+
{
|
|
934
|
+
className: chunkS5RVSXDV_cjs.cn(
|
|
935
|
+
"flex w-full items-center gap-1",
|
|
936
|
+
isSelf ? "flex-row-reverse" : "flex-row"
|
|
937
|
+
),
|
|
938
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
939
|
+
chunkWIAQQNFU_cjs.ChatBubble,
|
|
940
|
+
{
|
|
941
|
+
ref: bubbleRef,
|
|
942
|
+
"data-slot": "superchat-bubble",
|
|
943
|
+
variant: isSelf ? "user" : "assistant",
|
|
944
|
+
hasError: message.status === "error",
|
|
945
|
+
className: "text-sm has-[[data-slot=superchat-nitro-table]]:w-full has-[[data-slot=superchat-nitro-table]]:max-w-full",
|
|
946
|
+
children: isEditing ? /* @__PURE__ */ jsxRuntime.jsxs(
|
|
947
|
+
"div",
|
|
948
|
+
{
|
|
949
|
+
"data-slot": "superchat-message-editor",
|
|
950
|
+
className: "flex w-80 max-w-full flex-col gap-2",
|
|
951
|
+
style: editMinWidth ? { minWidth: editMinWidth } : void 0,
|
|
952
|
+
children: [
|
|
946
953
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
947
|
-
"
|
|
954
|
+
"textarea",
|
|
948
955
|
{
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
956
|
+
value: draft,
|
|
957
|
+
ref: editRef,
|
|
958
|
+
rows: 2,
|
|
959
|
+
onChange: (e) => {
|
|
960
|
+
setDraft(e.target.value);
|
|
961
|
+
autosize();
|
|
962
|
+
},
|
|
963
|
+
onPaste: handleEditPaste,
|
|
964
|
+
onKeyDown: (e) => {
|
|
965
|
+
if (e.key === "Enter" && !e.shiftKey) {
|
|
966
|
+
e.preventDefault();
|
|
967
|
+
saveEdit();
|
|
968
|
+
} else if (e.key === "Escape") {
|
|
969
|
+
e.preventDefault();
|
|
970
|
+
cancelEdit();
|
|
971
|
+
}
|
|
972
|
+
},
|
|
973
|
+
"aria-label": "Edit message",
|
|
974
|
+
className: "focus:ring-primary-500 max-h-60 min-h-16 w-full resize-none rounded-lg border border-neutral-300 bg-white px-3 py-2 text-sm text-neutral-900 focus:ring-1 focus:outline-none dark:border-neutral-600 dark:bg-neutral-900 dark:text-white"
|
|
953
975
|
}
|
|
954
976
|
),
|
|
955
|
-
/* @__PURE__ */ jsxRuntime.
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
|
|
964
|
-
|
|
965
|
-
|
|
966
|
-
|
|
967
|
-
|
|
968
|
-
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
|
|
976
|
-
|
|
977
|
-
className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
|
|
978
|
-
children: renderText(block.text, {
|
|
979
|
-
messageId: message.id,
|
|
980
|
-
streaming,
|
|
981
|
-
role: participant?.kind === "human" ? "user" : "assistant"
|
|
982
|
-
})
|
|
983
|
-
},
|
|
984
|
-
i
|
|
985
|
-
);
|
|
977
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2", children: [
|
|
978
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
979
|
+
"button",
|
|
980
|
+
{
|
|
981
|
+
type: "button",
|
|
982
|
+
onClick: cancelEdit,
|
|
983
|
+
className: "rounded-md px-2.5 py-1 text-xs font-medium text-neutral-200 hover:bg-white/10",
|
|
984
|
+
children: "Cancel"
|
|
985
|
+
}
|
|
986
|
+
),
|
|
987
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
988
|
+
"button",
|
|
989
|
+
{
|
|
990
|
+
type: "button",
|
|
991
|
+
onClick: saveEdit,
|
|
992
|
+
disabled: !draft.trim() || draft.trim() === message.text,
|
|
993
|
+
className: "rounded-md bg-white px-2.5 py-1 text-xs font-medium text-neutral-900 hover:bg-neutral-100 disabled:opacity-40",
|
|
994
|
+
children: "Save"
|
|
995
|
+
}
|
|
996
|
+
)
|
|
997
|
+
] })
|
|
998
|
+
]
|
|
986
999
|
}
|
|
987
|
-
|
|
988
|
-
|
|
1000
|
+
) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1001
|
+
message.content?.map((block, i) => {
|
|
1002
|
+
if (block.type === "tool_use" && block.toolCall) {
|
|
1003
|
+
return /* @__PURE__ */ jsxRuntime.jsx(chunkWIAQQNFU_cjs.MCPToolCallDisplay, { toolCall: block.toolCall }, i);
|
|
1004
|
+
}
|
|
1005
|
+
if ((block.type === "text" || block.type === "thinking") && block.text) {
|
|
1006
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1007
|
+
"div",
|
|
1008
|
+
{
|
|
1009
|
+
className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
|
|
1010
|
+
children: renderText(block.text, {
|
|
1011
|
+
messageId: message.id,
|
|
1012
|
+
streaming,
|
|
1013
|
+
role: participant?.kind === "human" ? "user" : "assistant"
|
|
1014
|
+
})
|
|
1015
|
+
},
|
|
1016
|
+
i
|
|
1017
|
+
);
|
|
1018
|
+
}
|
|
1019
|
+
if (block.type === "code" && block.text) {
|
|
1020
|
+
const fenced = `\`\`\`${block.language ?? ""}
|
|
989
1021
|
${block.text}
|
|
990
1022
|
\`\`\``;
|
|
991
|
-
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
|
|
1003
|
-
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
{
|
|
1021
|
-
ref: actionsBarRef,
|
|
1022
|
-
actions,
|
|
1023
|
-
isSelf
|
|
1024
|
-
}
|
|
1025
|
-
)
|
|
1026
|
-
] })
|
|
1023
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1024
|
+
"div",
|
|
1025
|
+
{
|
|
1026
|
+
className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word",
|
|
1027
|
+
children: renderText(fenced, {
|
|
1028
|
+
messageId: message.id,
|
|
1029
|
+
streaming,
|
|
1030
|
+
role: participant?.kind === "human" ? "user" : "assistant"
|
|
1031
|
+
})
|
|
1032
|
+
},
|
|
1033
|
+
i
|
|
1034
|
+
);
|
|
1035
|
+
}
|
|
1036
|
+
return null;
|
|
1037
|
+
}),
|
|
1038
|
+
message.text && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-sm dark:prose-invert max-w-none **:wrap-break-word", children: renderText(message.text, {
|
|
1039
|
+
messageId: message.id,
|
|
1040
|
+
streaming,
|
|
1041
|
+
role: participant?.kind === "human" ? "user" : "assistant"
|
|
1042
|
+
}) }),
|
|
1043
|
+
streaming && !hasBody && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(chunkWIAQQNFU_cjs.AITypingIndicator, {}) })
|
|
1044
|
+
] })
|
|
1045
|
+
}
|
|
1046
|
+
)
|
|
1047
|
+
}
|
|
1048
|
+
)
|
|
1049
|
+
]
|
|
1050
|
+
}
|
|
1051
|
+
)
|
|
1027
1052
|
]
|
|
1028
1053
|
}
|
|
1029
1054
|
);
|
|
@@ -1350,6 +1375,7 @@ function SuperChat({
|
|
|
1350
1375
|
onValueChange: handleDraftChange,
|
|
1351
1376
|
onSend: handleComposerSend,
|
|
1352
1377
|
disabled: readOnly,
|
|
1378
|
+
className: "px-4 pb-4",
|
|
1353
1379
|
placeholder: readOnly ? "Read-only conversation" : "Type a message\u2026 use @ to address an agent",
|
|
1354
1380
|
mentionOptions,
|
|
1355
1381
|
allowAttachments: !readOnly,
|