176 lines
8.2 KiB
JavaScript
176 lines
8.2 KiB
JavaScript
import { CopilotChatDefaultLabels, useCopilotChatConfiguration } from "../../providers/CopilotChatConfigurationProvider.mjs";
|
|
import { Button } from "../ui/button.mjs";
|
|
import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.mjs";
|
|
import { renderSlot } from "../../lib/slots.mjs";
|
|
import { useKatexStyles } from "../../hooks/useKatexStyles.mjs";
|
|
import CopilotChatToolCallsView from "./CopilotChatToolCallsView.mjs";
|
|
import { useState } from "react";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp, Volume2 } from "lucide-react";
|
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
import { Streamdown } from "streamdown";
|
|
|
|
//#region src/components/chat/CopilotChatAssistantMessage.tsx
|
|
function CopilotChatAssistantMessage({ message, messages, isRunning, onThumbsUp, onThumbsDown, onReadAloud, onRegenerate, additionalToolbarItems, toolbarVisible = true, markdownRenderer, toolbar, copyButton, thumbsUpButton, thumbsDownButton, readAloudButton, regenerateButton, toolCallsView, children, className, ...props }) {
|
|
useKatexStyles();
|
|
const boundMarkdownRenderer = renderSlot(markdownRenderer, CopilotChatAssistantMessage.MarkdownRenderer, { content: message.content || "" });
|
|
const boundCopyButton = renderSlot(copyButton, CopilotChatAssistantMessage.CopyButton, { onClick: async () => {
|
|
if (message.content) try {
|
|
await navigator.clipboard.writeText(message.content);
|
|
} catch (err) {
|
|
console.error("Failed to copy message:", err);
|
|
}
|
|
} });
|
|
const boundThumbsUpButton = renderSlot(thumbsUpButton, CopilotChatAssistantMessage.ThumbsUpButton, { onClick: onThumbsUp });
|
|
const boundThumbsDownButton = renderSlot(thumbsDownButton, CopilotChatAssistantMessage.ThumbsDownButton, { onClick: onThumbsDown });
|
|
const boundReadAloudButton = renderSlot(readAloudButton, CopilotChatAssistantMessage.ReadAloudButton, { onClick: onReadAloud });
|
|
const boundRegenerateButton = renderSlot(regenerateButton, CopilotChatAssistantMessage.RegenerateButton, { onClick: onRegenerate });
|
|
const boundToolbar = renderSlot(toolbar, CopilotChatAssistantMessage.Toolbar, { children: /* @__PURE__ */ jsxs("div", {
|
|
className: "cpk:flex cpk:items-center cpk:gap-1",
|
|
children: [
|
|
boundCopyButton,
|
|
(onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
|
|
(onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
|
|
(onReadAloud || readAloudButton) && boundReadAloudButton,
|
|
(onRegenerate || regenerateButton) && boundRegenerateButton,
|
|
additionalToolbarItems
|
|
]
|
|
}) });
|
|
const boundToolCallsView = renderSlot(toolCallsView, CopilotChatToolCallsView, {
|
|
message,
|
|
messages
|
|
});
|
|
const hasContent = !!(message.content && message.content.trim().length > 0);
|
|
const isLatestAssistantMessage = message.role === "assistant" && messages?.[messages.length - 1]?.id === message.id;
|
|
const shouldShowToolbar = toolbarVisible && hasContent && !(isRunning && isLatestAssistantMessage);
|
|
if (children) return /* @__PURE__ */ jsx("div", {
|
|
"data-copilotkit": true,
|
|
style: { display: "contents" },
|
|
children: children({
|
|
markdownRenderer: boundMarkdownRenderer,
|
|
toolbar: boundToolbar,
|
|
toolCallsView: boundToolCallsView,
|
|
copyButton: boundCopyButton,
|
|
thumbsUpButton: boundThumbsUpButton,
|
|
thumbsDownButton: boundThumbsDownButton,
|
|
readAloudButton: boundReadAloudButton,
|
|
regenerateButton: boundRegenerateButton,
|
|
message,
|
|
messages,
|
|
isRunning,
|
|
onThumbsUp,
|
|
onThumbsDown,
|
|
onReadAloud,
|
|
onRegenerate,
|
|
additionalToolbarItems,
|
|
toolbarVisible: shouldShowToolbar
|
|
})
|
|
});
|
|
return /* @__PURE__ */ jsxs("div", {
|
|
"data-copilotkit": true,
|
|
"data-testid": "copilot-assistant-message",
|
|
className: twMerge("copilotKitMessage copilotKitAssistantMessage", className),
|
|
...props,
|
|
"data-message-id": message.id,
|
|
children: [
|
|
/* @__PURE__ */ jsx("div", {
|
|
className: "cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert",
|
|
children: boundMarkdownRenderer
|
|
}),
|
|
boundToolCallsView,
|
|
shouldShowToolbar && boundToolbar
|
|
]
|
|
});
|
|
}
|
|
(function(_CopilotChatAssistantMessage) {
|
|
_CopilotChatAssistantMessage.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx(Streamdown, {
|
|
className,
|
|
...props,
|
|
children: content ?? ""
|
|
});
|
|
_CopilotChatAssistantMessage.Toolbar = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
|
|
"data-testid": "copilot-assistant-toolbar",
|
|
className: twMerge("cpk:w-full cpk:bg-transparent cpk:flex cpk:items-center cpk:-ml-[5px] cpk:-mt-[0px]", className),
|
|
...props
|
|
});
|
|
const ToolbarButton = _CopilotChatAssistantMessage.ToolbarButton = ({ title, children, ...props }) => {
|
|
return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
|
|
asChild: true,
|
|
children: /* @__PURE__ */ jsx(Button, {
|
|
type: "button",
|
|
variant: "assistantMessageToolbarButton",
|
|
"aria-label": title,
|
|
...props,
|
|
children
|
|
})
|
|
}), /* @__PURE__ */ jsx(TooltipContent, {
|
|
side: "bottom",
|
|
children: /* @__PURE__ */ jsx("p", { children: title })
|
|
})] });
|
|
};
|
|
_CopilotChatAssistantMessage.CopyButton = ({ className, title, onClick, ...props }) => {
|
|
const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
|
|
const [copied, setCopied] = useState(false);
|
|
const handleClick = (event) => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2e3);
|
|
if (onClick) onClick(event);
|
|
};
|
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
"data-testid": "copilot-copy-button",
|
|
title: title || labels.assistantMessageToolbarCopyMessageLabel,
|
|
onClick: handleClick,
|
|
className,
|
|
...props,
|
|
children: copied ? /* @__PURE__ */ jsx(Check, { className: "cpk:size-[18px]" }) : /* @__PURE__ */ jsx(Copy, { className: "cpk:size-[18px]" })
|
|
});
|
|
};
|
|
_CopilotChatAssistantMessage.ThumbsUpButton = ({ title, ...props }) => {
|
|
const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
|
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
"data-testid": "copilot-thumbs-up-button",
|
|
title: title || labels.assistantMessageToolbarThumbsUpLabel,
|
|
...props,
|
|
children: /* @__PURE__ */ jsx(ThumbsUp, { className: "cpk:size-[18px]" })
|
|
});
|
|
};
|
|
_CopilotChatAssistantMessage.ThumbsDownButton = ({ title, ...props }) => {
|
|
const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
|
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
"data-testid": "copilot-thumbs-down-button",
|
|
title: title || labels.assistantMessageToolbarThumbsDownLabel,
|
|
...props,
|
|
children: /* @__PURE__ */ jsx(ThumbsDown, { className: "cpk:size-[18px]" })
|
|
});
|
|
};
|
|
_CopilotChatAssistantMessage.ReadAloudButton = ({ title, ...props }) => {
|
|
const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
|
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
"data-testid": "copilot-read-aloud-button",
|
|
title: title || labels.assistantMessageToolbarReadAloudLabel,
|
|
...props,
|
|
children: /* @__PURE__ */ jsx(Volume2, { className: "cpk:size-[20px]" })
|
|
});
|
|
};
|
|
_CopilotChatAssistantMessage.RegenerateButton = ({ title, ...props }) => {
|
|
const labels = useCopilotChatConfiguration()?.labels ?? CopilotChatDefaultLabels;
|
|
return /* @__PURE__ */ jsx(ToolbarButton, {
|
|
"data-testid": "copilot-regenerate-button",
|
|
title: title || labels.assistantMessageToolbarRegenerateLabel,
|
|
...props,
|
|
children: /* @__PURE__ */ jsx(RefreshCw, { className: "cpk:size-[18px]" })
|
|
});
|
|
};
|
|
})(CopilotChatAssistantMessage || (CopilotChatAssistantMessage = {}));
|
|
CopilotChatAssistantMessage.MarkdownRenderer.displayName = "CopilotChatAssistantMessage.MarkdownRenderer";
|
|
CopilotChatAssistantMessage.Toolbar.displayName = "CopilotChatAssistantMessage.Toolbar";
|
|
CopilotChatAssistantMessage.CopyButton.displayName = "CopilotChatAssistantMessage.CopyButton";
|
|
CopilotChatAssistantMessage.ThumbsUpButton.displayName = "CopilotChatAssistantMessage.ThumbsUpButton";
|
|
CopilotChatAssistantMessage.ThumbsDownButton.displayName = "CopilotChatAssistantMessage.ThumbsDownButton";
|
|
CopilotChatAssistantMessage.ReadAloudButton.displayName = "CopilotChatAssistantMessage.ReadAloudButton";
|
|
CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistantMessage.RegenerateButton";
|
|
var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
|
|
|
|
//#endregion
|
|
export { CopilotChatAssistantMessage_default as default };
|
|
//# sourceMappingURL=CopilotChatAssistantMessage.mjs.map
|