@copilotkit/react-core 1.54.1 → 1.55.0-next.8

package/src/v2/components/chat/CopilotChatAssistantMessage.tsx

@@ -0,0 +1,375 @@
+import { AssistantMessage, Message } from "@ag-ui/core";
+import { useState } from "react";
+import {
+  Copy,
+  Check,
+  ThumbsUp,
+  ThumbsDown,
+  Volume2,
+  RefreshCw,
+} from "lucide-react";
+import {
+  useCopilotChatConfiguration,
+  CopilotChatDefaultLabels,
+} from "../../providers/CopilotChatConfigurationProvider";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../../components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "../../components/ui/tooltip";
+import { useKatexStyles } from "../../hooks/useKatexStyles";
+import { WithSlots, renderSlot } from "../../lib/slots";
+import { Streamdown } from "streamdown";
+import CopilotChatToolCallsView from "./CopilotChatToolCallsView";
+
+export type CopilotChatAssistantMessageProps = WithSlots<
+  {
+    markdownRenderer: typeof CopilotChatAssistantMessage.MarkdownRenderer;
+    toolbar: typeof CopilotChatAssistantMessage.Toolbar;
+    copyButton: typeof CopilotChatAssistantMessage.CopyButton;
+    thumbsUpButton: typeof CopilotChatAssistantMessage.ThumbsUpButton;
+    thumbsDownButton: typeof CopilotChatAssistantMessage.ThumbsDownButton;
+    readAloudButton: typeof CopilotChatAssistantMessage.ReadAloudButton;
+    regenerateButton: typeof CopilotChatAssistantMessage.RegenerateButton;
+    toolCallsView: typeof CopilotChatToolCallsView;
+  },
+  {
+    onThumbsUp?: (message: AssistantMessage) => void;
+    onThumbsDown?: (message: AssistantMessage) => void;
+    onReadAloud?: (message: AssistantMessage) => void;
+    onRegenerate?: (message: AssistantMessage) => void;
+    message: AssistantMessage;
+    messages?: Message[];
+    isRunning?: boolean;
+    additionalToolbarItems?: React.ReactNode;
+    toolbarVisible?: boolean;
+  } & React.HTMLAttributes<HTMLDivElement>
+>;
+
+export function CopilotChatAssistantMessage({
+  message,
+  messages,
+  isRunning,
+  onThumbsUp,
+  onThumbsDown,
+  onReadAloud,
+  onRegenerate,
+  additionalToolbarItems,
+  toolbarVisible = true,
+  markdownRenderer,
+  toolbar,
+  copyButton,
+  thumbsUpButton,
+  thumbsDownButton,
+  readAloudButton,
+  regenerateButton,
+  toolCallsView,
+  children,
+  className,
+  ...props
+}: CopilotChatAssistantMessageProps) {
+  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: (
+        <div className="cpk:flex cpk:items-center cpk:gap-1">
+          {boundCopyButton}
+          {(onThumbsUp || thumbsUpButton) && boundThumbsUpButton}
+          {(onThumbsDown || thumbsDownButton) && boundThumbsDownButton}
+          {(onReadAloud || readAloudButton) && boundReadAloudButton}
+          {(onRegenerate || regenerateButton) && boundRegenerateButton}
+          {additionalToolbarItems}
+        </div>
+      ),
+    },
+  );
+
+  const boundToolCallsView = renderSlot(
+    toolCallsView,
+    CopilotChatToolCallsView,
+    {
+      message,
+      messages,
+    },
+  );
+
+  // Don't show toolbar if message has no content (only tool calls)
+  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 (
+      <div data-copilotkit style={{ display: "contents" }}>
+        {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,
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-copilotkit
+      data-testid="copilot-assistant-message"
+      className={twMerge(
+        "copilotKitMessage copilotKitAssistantMessage",
+        className,
+      )}
+      {...props}
+      data-message-id={message.id}
+    >
+      <div className="cpk:prose cpk:max-w-full cpk:break-words cpk:dark:prose-invert">
+        {boundMarkdownRenderer}
+      </div>
+      {boundToolCallsView}
+      {shouldShowToolbar && boundToolbar}
+    </div>
+  );
+}
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace CopilotChatAssistantMessage {
+  export const MarkdownRenderer: React.FC<
+    Omit<React.ComponentProps<typeof Streamdown>, "children"> & {
+      content: string;
+    }
+  > = ({ content, className, ...props }) => (
+    <Streamdown className={className} {...props}>
+      {content ?? ""}
+    </Streamdown>
+  );
+
+  export const Toolbar: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
+    className,
+    ...props
+  }) => (
+    <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}
+    />
+  );
+
+  export const ToolbarButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement> & {
+      title: string;
+      children: React.ReactNode;
+    }
+  > = ({ title, children, ...props }) => {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <Button
+            type="button"
+            variant="assistantMessageToolbarButton"
+            aria-label={title}
+            {...props}
+          >
+            {children}
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent side="bottom">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  };
+
+  export const CopyButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  > = ({ className, title, onClick, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    const [copied, setCopied] = useState(false);
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    return (
+      <ToolbarButton
+        data-testid="copilot-copy-button"
+        title={title || labels.assistantMessageToolbarCopyMessageLabel}
+        onClick={handleClick}
+        className={className}
+        {...props}
+      >
+        {copied ? (
+          <Check className="cpk:size-[18px]" />
+        ) : (
+          <Copy className="cpk:size-[18px]" />
+        )}
+      </ToolbarButton>
+    );
+  };
+
+  export const ThumbsUpButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  > = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return (
+      <ToolbarButton
+        data-testid="copilot-thumbs-up-button"
+        title={title || labels.assistantMessageToolbarThumbsUpLabel}
+        {...props}
+      >
+        <ThumbsUp className="cpk:size-[18px]" />
+      </ToolbarButton>
+    );
+  };
+
+  export const ThumbsDownButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  > = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return (
+      <ToolbarButton
+        data-testid="copilot-thumbs-down-button"
+        title={title || labels.assistantMessageToolbarThumbsDownLabel}
+        {...props}
+      >
+        <ThumbsDown className="cpk:size-[18px]" />
+      </ToolbarButton>
+    );
+  };
+
+  export const ReadAloudButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  > = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return (
+      <ToolbarButton
+        data-testid="copilot-read-aloud-button"
+        title={title || labels.assistantMessageToolbarReadAloudLabel}
+        {...props}
+      >
+        <Volume2 className="cpk:size-[20px]" />
+      </ToolbarButton>
+    );
+  };
+
+  export const RegenerateButton: React.FC<
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  > = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return (
+      <ToolbarButton
+        data-testid="copilot-regenerate-button"
+        title={title || labels.assistantMessageToolbarRegenerateLabel}
+        {...props}
+      >
+        <RefreshCw className="cpk:size-[18px]" />
+      </ToolbarButton>
+    );
+  };
+}
+
+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";
+
+export default CopilotChatAssistantMessage;