@copilotkitnext/react 0.0.22-alpha.1 → 0.0.22-alpha.3

package/dist/components/chat/CopilotChatAssistantMessage.js

@@ -0,0 +1,735 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+var CopilotChatAssistantMessage_exports = {};
+__export(CopilotChatAssistantMessage_exports, {
+  CopilotChatAssistantMessage: () => CopilotChatAssistantMessage,
+  default: () => CopilotChatAssistantMessage_default
+});
+module.exports = __toCommonJS(CopilotChatAssistantMessage_exports);
+var import_react15 = require("react");
+var import_lucide_react = require("lucide-react");
+
+// src/providers/CopilotChatConfigurationProvider.tsx
+var import_react = require("react");
+var import_shared = require("@copilotkitnext/shared");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CopilotChatDefaultLabels = {
+  chatInputPlaceholder: "Type a message...",
+  chatInputToolbarStartTranscribeButtonLabel: "Transcribe",
+  chatInputToolbarCancelTranscribeButtonLabel: "Cancel",
+  chatInputToolbarFinishTranscribeButtonLabel: "Finish",
+  chatInputToolbarAddButtonLabel: "Add photos or files",
+  chatInputToolbarToolsButtonLabel: "Tools",
+  assistantMessageToolbarCopyCodeLabel: "Copy",
+  assistantMessageToolbarCopyCodeCopiedLabel: "Copied",
+  assistantMessageToolbarCopyMessageLabel: "Copy",
+  assistantMessageToolbarThumbsUpLabel: "Good response",
+  assistantMessageToolbarThumbsDownLabel: "Bad response",
+  assistantMessageToolbarReadAloudLabel: "Read aloud",
+  assistantMessageToolbarRegenerateLabel: "Regenerate",
+  userMessageToolbarCopyMessageLabel: "Copy",
+  userMessageToolbarEditMessageLabel: "Edit",
+  chatDisclaimerText: "AI can make mistakes. Please verify important information.",
+  chatToggleOpenLabel: "Open chat",
+  chatToggleCloseLabel: "Close chat",
+  modalHeaderTitle: "CopilotKit Chat"
+};
+var CopilotChatConfiguration = (0, import_react.createContext)(null);
+var useCopilotChatConfiguration = () => {
+  const configuration = (0, import_react.useContext)(CopilotChatConfiguration);
+  return configuration;
+};
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+var import_tailwind_merge2 = require("tailwind-merge");
+
+// src/components/ui/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/lib/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/ui/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 cursor-pointer",
+        link: "text-primary underline-offset-4 hover:underline",
+        assistantMessageToolbarButton: [
+          "cursor-pointer",
+          // Background and text
+          "p-0 text-[rgb(93,93,93)] hover:bg-[#E8E8E8]",
+          // Dark mode - lighter gray for better contrast
+          "dark:text-[rgb(243,243,243)] dark:hover:bg-[#303030]",
+          // Shape and sizing
+          "h-8 w-8",
+          // Interactions
+          "transition-colors",
+          // Hover states
+          "hover:text-[rgb(93,93,93)]",
+          "dark:hover:text-[rgb(243,243,243)]"
+        ],
+        chatInputToolbarPrimary: [
+          "cursor-pointer",
+          // Background and text
+          "bg-black text-white",
+          // Dark mode
+          "dark:bg-white dark:text-black dark:focus-visible:outline-white",
+          // Shape and sizing
+          "rounded-full",
+          // Interactions
+          "transition-colors",
+          // Focus states
+          "focus:outline-none",
+          // Hover states
+          "hover:opacity-70 disabled:hover:opacity-100",
+          // Disabled states
+          "disabled:cursor-not-allowed disabled:bg-[#00000014] disabled:text-[rgb(13,13,13)]",
+          "dark:disabled:bg-[#454545] dark:disabled:text-white "
+        ],
+        chatInputToolbarSecondary: [
+          "cursor-pointer",
+          // Background and text
+          "bg-transparent text-[#444444]",
+          // Dark mode
+          "dark:text-white dark:border-[#404040]",
+          // Shape and sizing
+          "rounded-full",
+          // Interactions
+          "transition-colors",
+          // Focus states
+          "focus:outline-none",
+          // Hover states
+          "hover:bg-[#f8f8f8] hover:text-[#333333]",
+          "dark:hover:bg-[#404040] dark:hover:text-[#FFFFFF]",
+          // Disabled states
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "disabled:hover:bg-transparent disabled:hover:text-[#444444]",
+          "dark:disabled:hover:bg-transparent dark:disabled:hover:text-[#CCCCCC]"
+        ]
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        chatInputToolbarIcon: [
+          // Shape and sizing
+          "h-9 w-9 rounded-full"
+        ],
+        chatInputToolbarIconLabel: [
+          // Shape and sizing
+          "h-9 px-3 rounded-full",
+          // Layout
+          "gap-2",
+          // Typography
+          "font-normal"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/components/ui/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    TooltipPrimitive.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    TooltipPrimitive.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(TooltipPrimitive.Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+var import_katex_min = require("katex/dist/katex.min.css");
+
+// src/lib/slots.tsx
+var import_react2 = __toESM(require("react"));
+function renderSlot(slot, DefaultComponent, props) {
+  if (typeof slot === "string") {
+    return import_react2.default.createElement(DefaultComponent, {
+      ...props,
+      className: slot
+    });
+  }
+  if (typeof slot === "function") {
+    const Comp = slot;
+    return import_react2.default.createElement(Comp, props);
+  }
+  if (slot && typeof slot === "object" && !import_react2.default.isValidElement(slot)) {
+    return import_react2.default.createElement(DefaultComponent, {
+      ...props,
+      ...slot
+    });
+  }
+  return import_react2.default.createElement(DefaultComponent, props);
+}
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+var import_streamdown = require("streamdown");
+
+// src/hooks/use-render-tool-call.tsx
+var import_react5 = require("react");
+var import_core2 = require("@copilotkitnext/core");
+
+// src/providers/CopilotKitProvider.tsx
+var import_react4 = require("react");
+var import_zod = require("zod");
+
+// src/lib/react-core.ts
+var import_core = require("@copilotkitnext/core");
+
+// src/components/CopilotKitInspector.tsx
+var React3 = __toESM(require("react"));
+var import_react3 = require("@lit-labs/react");
+var import_web_inspector = require("@copilotkitnext/web-inspector");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+(0, import_web_inspector.defineWebInspector)();
+var CopilotKitInspectorBase = (0, import_react3.createComponent)({
+  tagName: import_web_inspector.WEB_INSPECTOR_TAG,
+  elementClass: import_web_inspector.WebInspectorElement,
+  react: React3
+});
+var CopilotKitInspector = React3.forwardRef(
+  ({ core, ...rest }, ref) => {
+    const innerRef = React3.useRef(null);
+    React3.useImperativeHandle(ref, () => innerRef.current, []);
+    React3.useEffect(() => {
+      if (innerRef.current) {
+        innerRef.current.core = core ?? null;
+      }
+    }, [core]);
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      CopilotKitInspectorBase,
+      {
+        ...rest,
+        ref: innerRef
+      }
+    );
+  }
+);
+CopilotKitInspector.displayName = "CopilotKitInspector";
+
+// src/providers/CopilotKitProvider.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var CopilotKitContext = (0, import_react4.createContext)({
+  copilotkit: null
+});
+var useCopilotKit = () => {
+  const context = (0, import_react4.useContext)(CopilotKitContext);
+  const [, forceUpdate] = (0, import_react4.useReducer)((x) => x + 1, 0);
+  if (!context) {
+    throw new Error("useCopilotKit must be used within CopilotKitProvider");
+  }
+  (0, import_react4.useEffect)(() => {
+    const unsubscribe = context.copilotkit.subscribe({
+      onRuntimeConnectionStatusChanged: () => {
+        forceUpdate();
+      }
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, []);
+  return context;
+};
+
+// src/hooks/use-render-tool-call.tsx
+var import_shared2 = require("@copilotkitnext/shared");
+var import_shared3 = require("@copilotkitnext/shared");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function useRenderToolCall() {
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const agentId = config?.agentId ?? import_shared2.DEFAULT_AGENT_ID;
+  const [executingToolCallIds, setExecutingToolCallIds] = (0, import_react5.useState)(() => /* @__PURE__ */ new Set());
+  const renderToolCalls = (0, import_react5.useSyncExternalStore)(
+    (callback) => {
+      return copilotkit.subscribe({
+        onRenderToolCallsChanged: callback
+      });
+    },
+    () => copilotkit.renderToolCalls,
+    () => copilotkit.renderToolCalls
+  );
+  (0, import_react5.useEffect)(() => {
+    const unsubscribe = copilotkit.subscribe({
+      onToolExecutionStart: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.add(toolCallId);
+          return next;
+        });
+      },
+      onToolExecutionEnd: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (!prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.delete(toolCallId);
+          return next;
+        });
+      }
+    });
+    return () => unsubscribe();
+  }, [copilotkit]);
+  const renderToolCall = (0, import_react5.useCallback)(
+    ({
+      toolCall,
+      toolMessage
+    }) => {
+      const exactMatches = renderToolCalls.filter(
+        (rc) => rc.name === toolCall.function.name
+      );
+      const renderConfig = exactMatches.find((rc) => rc.agentId === agentId) || exactMatches.find((rc) => !rc.agentId) || exactMatches[0] || renderToolCalls.find((rc) => rc.name === "*");
+      if (!renderConfig) {
+        return null;
+      }
+      const RenderComponent = renderConfig.render;
+      const args = (0, import_shared3.partialJSONParse)(toolCall.function.arguments);
+      const toolName = toolCall.function.name;
+      if (toolMessage) {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: import_core2.ToolCallStatus.Complete,
+            result: toolMessage.content
+          },
+          toolCall.id
+        );
+      } else if (executingToolCallIds.has(toolCall.id)) {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: import_core2.ToolCallStatus.Executing,
+            result: void 0
+          },
+          toolCall.id
+        );
+      } else {
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          RenderComponent,
+          {
+            name: toolName,
+            args,
+            status: import_core2.ToolCallStatus.InProgress,
+            result: void 0
+          },
+          toolCall.id
+        );
+      }
+    },
+    [renderToolCalls, executingToolCallIds, agentId]
+  );
+  return renderToolCall;
+}
+
+// src/hooks/use-render-custom-messages.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+
+// src/hooks/use-render-activity-message.tsx
+var import_shared4 = require("@copilotkitnext/shared");
+var import_react6 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+
+// src/hooks/use-frontend-tool.tsx
+var import_react7 = require("react");
+
+// src/hooks/use-human-in-the-loop.tsx
+var import_react8 = require("react");
+var import_react9 = __toESM(require("react"));
+
+// src/hooks/use-agent.tsx
+var import_react10 = require("react");
+var import_shared5 = require("@copilotkitnext/shared");
+
+// src/hooks/use-agent-context.tsx
+var import_react11 = require("react");
+
+// src/hooks/use-suggestions.tsx
+var import_react12 = require("react");
+var import_shared6 = require("@copilotkitnext/shared");
+
+// src/hooks/use-configure-suggestions.tsx
+var import_react13 = require("react");
+var import_shared7 = require("@copilotkitnext/shared");
+
+// src/components/chat/CopilotChatToolCallsView.tsx
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CopilotChatToolCallsView({
+  message,
+  messages = []
+}) {
+  const renderToolCall = useRenderToolCall();
+  if (!message.toolCalls || message.toolCalls.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_jsx_runtime9.Fragment, { children: message.toolCalls.map((toolCall) => {
+    const toolMessage = messages.find(
+      (m) => m.role === "tool" && m.toolCallId === toolCall.id
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_react14.default.Fragment, { children: renderToolCall({
+      toolCall,
+      toolMessage
+    }) }, toolCall.id);
+  }) });
+}
+var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
+
+// src/components/chat/CopilotChatAssistantMessage.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CopilotChatAssistantMessage({
+  message,
+  messages,
+  isRunning,
+  onThumbsUp,
+  onThumbsDown,
+  onReadAloud,
+  onRegenerate,
+  additionalToolbarItems,
+  toolbarVisible = true,
+  markdownRenderer,
+  toolbar,
+  copyButton,
+  thumbsUpButton,
+  thumbsDownButton,
+  readAloudButton,
+  regenerateButton,
+  toolCallsView,
+  children,
+  className,
+  ...props
+}) {
+  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__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-center gap-1", children: [
+        boundCopyButton,
+        (onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
+        (onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
+        (onReadAloud || readAloudButton) && boundReadAloudButton,
+        (onRegenerate || regenerateButton) && boundRegenerateButton,
+        additionalToolbarItems
+      ] })
+    }
+  );
+  const boundToolCallsView = renderSlot(
+    toolCallsView,
+    CopilotChatToolCallsView_default,
+    {
+      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__ */ (0, import_jsx_runtime10.jsx)(import_jsx_runtime10.Fragment, { 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__ */ (0, import_jsx_runtime10.jsxs)(
+    "div",
+    {
+      className: (0, import_tailwind_merge2.twMerge)(
+        "prose max-w-full break-words dark:prose-invert",
+        className
+      ),
+      ...props,
+      "data-message-id": message.id,
+      children: [
+        boundMarkdownRenderer,
+        boundToolCallsView,
+        shouldShowToolbar && boundToolbar
+      ]
+    }
+  );
+}
+((CopilotChatAssistantMessage2) => {
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_streamdown.Streamdown, { className, ...props, children: content ?? "" });
+  CopilotChatAssistantMessage2.Toolbar = ({
+    className,
+    ...props
+  }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "div",
+    {
+      className: (0, import_tailwind_merge2.twMerge)(
+        "w-full bg-transparent flex items-center -ml-[5px] -mt-[0px]",
+        className
+      ),
+      ...props
+    }
+  );
+  CopilotChatAssistantMessage2.ToolbarButton = ({ title, children, ...props }) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        Button,
+        {
+          type: "button",
+          variant: "assistantMessageToolbarButton",
+          "aria-label": title,
+          ...props,
+          children
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TooltipContent, { side: "bottom", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: title }) })
+    ] });
+  };
+  CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    const [copied, setCopied] = (0, import_react15.useState)(false);
+    const handleClick = (event) => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+      if (onClick) {
+        onClick(event);
+      }
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarCopyMessageLabel,
+        onClick: handleClick,
+        className,
+        ...props,
+        children: copied ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Check, { className: "size-[18px]" }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Copy, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarThumbsUpLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ThumbsUp, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarThumbsDownLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.ThumbsDown, { className: "size-[18px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarReadAloudLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.Volume2, { className: "size-[20px]" })
+      }
+    );
+  };
+  CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
+    const config = useCopilotChatConfiguration();
+    const labels = config?.labels ?? CopilotChatDefaultLabels;
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      CopilotChatAssistantMessage2.ToolbarButton,
+      {
+        title: title || labels.assistantMessageToolbarRegenerateLabel,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react.RefreshCw, { className: "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;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CopilotChatAssistantMessage
+});
+//# sourceMappingURL=CopilotChatAssistantMessage.js.map