@oneuptime/common 9.2.26 → 9.3.0

package/Types/Permission.ts

@@ -96,6 +96,21 @@ enum Permission {
   EditProjectProbe = "EditProjectProbe",
   ReadProjectProbe = "ReadProjectProbe",
 
+  CreateProjectAIAgent = "CreateProjectAIAgent",
+  DeleteProjectAIAgent = "DeleteProjectAIAgent",
+  EditProjectAIAgent = "EditProjectAIAgent",
+  ReadProjectAIAgent = "ReadProjectAIAgent",
+
+  CreateProjectAIAgentTask = "CreateProjectAIAgentTask",
+  DeleteProjectAIAgentTask = "DeleteProjectAIAgentTask",
+  EditProjectAIAgentTask = "EditProjectAIAgentTask",
+  ReadProjectAIAgentTask = "ReadProjectAIAgentTask",
+
+  CreateProjectAIAgentTaskTelemetryException = "CreateProjectAIAgentTaskTelemetryException",
+  DeleteProjectAIAgentTaskTelemetryException = "DeleteProjectAIAgentTaskTelemetryException",
+  EditProjectAIAgentTaskTelemetryException = "EditProjectAIAgentTaskTelemetryException",
+  ReadProjectAIAgentTaskTelemetryException = "ReadProjectAIAgentTaskTelemetryException",
+
   CreateProjectLlm = "CreateProjectLlm",
   DeleteProjectLlm = "DeleteProjectLlm",
   EditProjectLlm = "EditProjectLlm",
@@ -646,6 +661,16 @@ enum Permission {
   EditProbeOwnerUser = "EditProbeOwnerUser",
   ReadProbeOwnerUser = "ReadProbeOwnerUser",
 
+  CreateAIAgentOwnerTeam = "CreateAIAgentOwnerTeam",
+  DeleteAIAgentOwnerTeam = "DeleteAIAgentOwnerTeam",
+  EditAIAgentOwnerTeam = "EditAIAgentOwnerTeam",
+  ReadAIAgentOwnerTeam = "ReadAIAgentOwnerTeam",
+
+  CreateAIAgentOwnerUser = "CreateAIAgentOwnerUser",
+  DeleteAIAgentOwnerUser = "DeleteAIAgentOwnerUser",
+  EditAIAgentOwnerUser = "EditAIAgentOwnerUser",
+  ReadAIAgentOwnerUser = "ReadAIAgentOwnerUser",
+
   CreateTableView = "CreateTableView",
   DeleteTableView = "DeleteTableView",
   EditTableView = "EditTableView",
@@ -2744,6 +2769,99 @@ export class PermissionHelper {
         isAccessControlPermission: true,
       },
 
+      {
+        permission: Permission.CreateProjectAIAgent,
+        title: "Create AI Agent",
+        description: "This permission can create AI agents for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.DeleteProjectAIAgent,
+        title: "Delete AI Agent",
+        description: "This permission can delete AI agents of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.EditProjectAIAgent,
+        title: "Edit AI Agent",
+        description: "This permission can edit AI agents of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.ReadProjectAIAgent,
+        title: "Read AI Agent",
+        description: "This permission can read AI agents of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+
+      {
+        permission: Permission.CreateProjectAIAgentTask,
+        title: "Create AI Agent Task",
+        description:
+          "This permission can create AI agent tasks for this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteProjectAIAgentTask,
+        title: "Delete AI Agent Task",
+        description:
+          "This permission can delete AI agent tasks of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.EditProjectAIAgentTask,
+        title: "Edit AI Agent Task",
+        description: "This permission can edit AI agent tasks of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.ReadProjectAIAgentTask,
+        title: "Read AI Agent Task",
+        description: "This permission can read AI agent tasks of this project.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+
+      {
+        permission: Permission.CreateProjectAIAgentTaskTelemetryException,
+        title: "Create AI Agent Task Exception Link",
+        description:
+          "This permission can create links between AI agent tasks and telemetry exceptions.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteProjectAIAgentTaskTelemetryException,
+        title: "Delete AI Agent Task Exception Link",
+        description:
+          "This permission can delete links between AI agent tasks and telemetry exceptions.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.EditProjectAIAgentTaskTelemetryException,
+        title: "Edit AI Agent Task Exception Link",
+        description:
+          "This permission can edit links between AI agent tasks and telemetry exceptions.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+      {
+        permission: Permission.ReadProjectAIAgentTaskTelemetryException,
+        title: "Read AI Agent Task Exception Link",
+        description:
+          "This permission can read links between AI agent tasks and telemetry exceptions.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: true,
+      },
+
       {
         permission: Permission.CreateProjectLlm,
         title: "Create LLM",
@@ -3306,6 +3424,64 @@ export class PermissionHelper {
         isAccessControlPermission: false,
       },
 
+      {
+        permission: Permission.CreateAIAgentOwnerTeam,
+        title: "Create AI Agent Owner Team",
+        description: "This permission can create team owners for AI agents.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteAIAgentOwnerTeam,
+        title: "Delete AI Agent Owner Team",
+        description: "This permission can delete team owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditAIAgentOwnerTeam,
+        title: "Edit AI Agent Owner Team",
+        description: "This permission can edit team owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadAIAgentOwnerTeam,
+        title: "Read AI Agent Owner Team",
+        description: "This permission can read team owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
+      {
+        permission: Permission.CreateAIAgentOwnerUser,
+        title: "Create AI Agent Owner User",
+        description: "This permission can create user owners for AI agents.",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.DeleteAIAgentOwnerUser,
+        title: "Delete AI Agent Owner User",
+        description: "This permission can delete user owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.EditAIAgentOwnerUser,
+        title: "Edit AI Agent Owner User",
+        description: "This permission can edit user owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+      {
+        permission: Permission.ReadAIAgentOwnerUser,
+        title: "Read AI Agent Owner User",
+        description: "This permission can read user owners for AI agents",
+        isAssignableToTenant: true,
+        isAccessControlPermission: false,
+      },
+
       {
         permission: Permission.CreateServiceCatalog,
         title: "Create Service Catalog",

package/Types/WhatsApp/WhatsAppTemplates.ts

@@ -30,6 +30,8 @@ type TemplateIdsMap = {
   readonly OnCallUserAddedToPolicyNotification: "oneuptime_oncall_user_added_to_policy_notification";
   readonly OnCallUserRemovedFromPolicyNotification: "oneuptime_oncall_user_removed_from_policy_notification";
   readonly OnCallUserNoLongerActiveNotification: "oneuptime_oncall_user_no_longer_active_notification";
+  readonly AIAgentStatusChangedOwnerNotification: "oneuptime_ai_agent_status_changed_owner_notification";
+  readonly AIAgentOwnerAddedNotification: "oneuptime_ai_agent_owner_added_notification";
 };
 
 const templateIds: TemplateIdsMap = {
@@ -85,6 +87,9 @@ const templateIds: TemplateIdsMap = {
     "oneuptime_oncall_user_removed_from_policy_notification",
   OnCallUserNoLongerActiveNotification:
     "oneuptime_oncall_user_no_longer_active_notification",
+  AIAgentStatusChangedOwnerNotification:
+    "oneuptime_ai_agent_status_changed_owner_notification",
+  AIAgentOwnerAddedNotification: "oneuptime_ai_agent_owner_added_notification",
 } as const;
 
 export const WhatsAppTemplateIds: TemplateIdsMap = templateIds;
@@ -132,6 +137,8 @@ export const WhatsAppTemplateMessages: WhatsAppTemplateMessagesDefinition = {
   [WhatsAppTemplateIds.OnCallUserAddedToPolicyNotification]: `You have been added to on-call policy {{on_call_policy_name}} for {{on_call_context}}. Review the on-call policy using {{policy_link}} on the OneUptime dashboard for full guidelines.`,
   [WhatsAppTemplateIds.OnCallUserRemovedFromPolicyNotification]: `You have been removed from on-call policy {{on_call_policy_name}} for {{on_call_context}}. View on-call policies using {{policy_link}} on the OneUptime dashboard for updates.`,
   [WhatsAppTemplateIds.OnCallUserNoLongerActiveNotification]: `You are no longer on-call for policy {{on_call_policy_name}} on schedule {{schedule_name}}. Review your schedule using {{schedule_link}} on the OneUptime dashboard to stay informed.`,
+  [WhatsAppTemplateIds.AIAgentStatusChangedOwnerNotification]: `AI Agent {{ai_agent_name}} status is {{ai_agent_status}}. Review the AI agent using {{ai_agent_link}} on the OneUptime dashboard for specifics.`,
+  [WhatsAppTemplateIds.AIAgentOwnerAddedNotification]: `You have been added as an owner of AI Agent {{ai_agent_name}}. Manage the AI agent using {{ai_agent_link}} on the OneUptime dashboard to take action.`,
 };
 
 export const WhatsAppTemplateLanguage: Record<WhatsAppTemplateId, string> = {
@@ -166,6 +173,8 @@ export const WhatsAppTemplateLanguage: Record<WhatsAppTemplateId, string> = {
   [WhatsAppTemplateIds.OnCallUserAddedToPolicyNotification]: "en",
   [WhatsAppTemplateIds.OnCallUserRemovedFromPolicyNotification]: "en",
   [WhatsAppTemplateIds.OnCallUserNoLongerActiveNotification]: "en",
+  [WhatsAppTemplateIds.AIAgentStatusChangedOwnerNotification]: "en",
+  [WhatsAppTemplateIds.AIAgentOwnerAddedNotification]: "en",
 };
 
 // Authentication templates that require OTP button components

package/Types/Workflow/ComponentID.ts

@@ -4,6 +4,7 @@ enum ComponentID {
   SlackSendMessageToChannel = "slack-send-message-to-channel",
   MicrosoftTeamsSendMessageToChannel = "microsoft-teams-send-message-to-channel",
   DiscordSendMessageToChannel = "discord-send-message-to-channel",
+  TelegramSendMessageToChat = "telegram-send-message-to-chat",
   Schedule = "schedule",
   JavaScriptCode = "javascript",
   Manual = "manual",

package/Types/Workflow/Components/Telegram.ts

@@ -0,0 +1,76 @@
+import IconProp from "../../Icon/IconProp";
+import ComponentID from "../ComponentID";
+import ComponentMetadata, {
+  ComponentInputType,
+  ComponentType,
+} from "./../Component";
+
+const components: Array<ComponentMetadata> = [
+  {
+    id: ComponentID.TelegramSendMessageToChat,
+    title: "Send Message to Telegram",
+    category: "Telegram",
+    description: "Send message to Telegram chat",
+    iconProp: IconProp.SendMessage,
+    componentType: ComponentType.Component,
+    arguments: [
+      {
+        id: "bot-token",
+        name: "Telegram Bot Token",
+        description:
+          "Need help creating a bot? Check docs here: https://core.telegram.org/bots#how-do-i-create-a-bot",
+        type: ComponentInputType.Text,
+        required: true,
+        placeholder: "1234567890:ABCdefGHIjklMNOpqrsTUVwxyZ",
+      },
+      {
+        id: "chat-id",
+        name: "Chat ID",
+        description:
+          "The unique identifier for the target chat or username of the target channel (in the format @channelusername). Please make sure the bot is added to the channel as an administrator.",
+        type: ComponentInputType.Text,
+        required: true,
+        placeholder: "@channelname",
+      },
+      {
+        id: "text",
+        name: "Message Text",
+        description: "Message to send to Telegram.",
+        type: ComponentInputType.LongText,
+        required: true,
+        placeholder: "Test Telegram message from OneUptime",
+      },
+    ],
+    returnValues: [
+      {
+        id: "error",
+        name: "Error",
+        description: "Error, if there is any.",
+        type: ComponentInputType.Text,
+        required: false,
+      },
+    ],
+    inPorts: [
+      {
+        title: "In",
+        description:
+          "Please connect components to this port for this component to work.",
+        id: "in",
+      },
+    ],
+    outPorts: [
+      {
+        title: "Success",
+        description: "This is executed when the message is successfully posted",
+        id: "success",
+      },
+      {
+        title: "Error",
+        description: "This is executed when there is an error",
+        id: "error",
+      },
+    ],
+  },
+];
+
+export default components;

package/Types/Workflow/Components.ts

@@ -11,6 +11,7 @@ import ManualComponents from "./Components/Manual";
 import MicrosoftTeamsComponents from "./Components/MicrosoftTeams";
 import ScheduleComponents from "./Components/Schedule";
 import SlackComponents from "./Components/Slack";
+import TelegramComponents from "./Components/Telegram";
 import WebhookComponents from "./Components/Webhook";
 import WorkflowComponents from "./Components/Workflow";
 
@@ -20,6 +21,7 @@ const components: Array<ComponentMetadata> = [
   ...ScheduleComponents,
   ...SlackComponents,
   ...DiscordComponents,
+  ...TelegramComponents,
   ...ConditionComponents,
   ...JsonComponents,
   ...JavaScriptComponents,
@@ -58,6 +60,11 @@ export const Categories: Array<ComponentCategory> = [
     description: "Integrate OneUptime with your Microsoft Teams.",
     icon: IconProp.SendMessage,
   },
+  {
+    name: "Telegram",
+    description: "Integrate OneUptime with your Telegram chats and channels.",
+    icon: IconProp.SendMessage,
+  },
   {
     name: "Conditions",
     description: "Add logic to your workflows.",

package/UI/Components/AIAgent/AIAgent.tsx

@@ -0,0 +1,69 @@
+import { FILE_URL } from "../../Config";
+import Icon from "../Icon/Icon";
+import Image from "../Image/Image";
+import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
+import URL from "../../../Types/API/URL";
+import IconProp from "../../../Types/Icon/IconProp";
+import { JSONObject } from "../../../Types/JSON";
+import AIAgent from "../../../Models/DatabaseModels/AIAgent";
+import React, { FunctionComponent, ReactElement } from "react";
+
+export interface ComponentProps {
+  aiAgent?: AIAgent | JSONObject | undefined | null;
+  suffix?: string | undefined;
+}
+
+const AIAgentElement: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  let aiAgent: JSONObject | null | undefined = null;
+
+  if (props.aiAgent instanceof AIAgent) {
+    aiAgent = BaseModel.toJSONObject(props.aiAgent, AIAgent);
+  } else {
+    aiAgent = props.aiAgent;
+  }
+
+  if (!aiAgent) {
+    return (
+      <div className="flex">
+        <div className="bold" data-testid="ai-agent-not-found">
+          No AI agent found.
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex">
+      <div>
+        {props.aiAgent?.iconFileId && (
+          <Image
+            className="h-6 w-6 rounded-full"
+            data-testid="ai-agent-image"
+            imageUrl={URL.fromString(FILE_URL.toString()).addRoute(
+              "/image/" + props.aiAgent?.iconFileId.toString(),
+            )}
+            alt={aiAgent["name"]?.toString() || "AI Agent"}
+          />
+        )}
+        {!props.aiAgent?.iconFileId && (
+          <Icon
+            data-testid="ai-agent-icon"
+            icon={IconProp.Automation}
+            className="text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-0.5 mt-0.5 h-6 w-6"
+          />
+        )}
+      </div>
+      <div className="mt-1 mr-1 ml-3">
+        <div>
+          <span data-testid="ai-agent-name">{`${
+            (aiAgent["name"]?.toString() as string) || ""
+          } ${props.suffix || ""}`}</span>{" "}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AIAgentElement;

package/UI/Components/Badge/Badge.tsx

@@ -15,19 +15,23 @@ export interface ComponentProps {
 const Badge: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  // Base styling for all badges
   let className: string =
-    "bg-white text-gray-600 ring-1 ring-inset ring-gray-300";
+    "bg-gradient-to-r from-gray-50 to-gray-100 text-gray-600 ring-1 ring-inset ring-gray-200 shadow-sm";
 
   if (props.badgeType === BadgeType.DANGER) {
-    className = "bg-white text-red-600 ring-1 ring-inset ring-red-300";
+    className =
+      "bg-gradient-to-r from-red-50 to-red-100 text-red-700 ring-1 ring-inset ring-red-200/80 shadow-sm shadow-red-100";
   }
 
   if (props.badgeType === BadgeType.WARNING) {
-    className = "bg-white text-yellow-600 ring-1 ring-inset ring-yellow-300";
+    className =
+      "bg-gradient-to-r from-amber-50 to-amber-100 text-amber-700 ring-1 ring-inset ring-amber-200/80 shadow-sm shadow-amber-100";
   }
 
   if (props.badgeType === BadgeType.SUCCESS) {
-    className = "bg-white text-emerald-600 ring-1 ring-inset ring-emerald-300";
+    className =
+      "bg-gradient-to-r from-emerald-50 to-emerald-100 text-emerald-700 ring-1 ring-inset ring-emerald-200/80 shadow-sm shadow-emerald-100";
   }
 
   if (props.badgeCount) {
@@ -35,7 +39,7 @@ const Badge: FunctionComponent<ComponentProps> = (
       <span
         id={props.id}
         data-testid={props.id}
-        className={`${className} ml-auto w-11 min-w-max whitespace-nowrap rounded-full  px-2.5 py-0.5 text-center text-sm font-medium leading-5 `}
+        className={`${className} ml-auto min-w-[1.75rem] whitespace-nowrap rounded-full px-2 py-0.5 text-center text-xs font-semibold leading-4 tabular-nums transition-all duration-200`}
         aria-hidden="true"
       >
         {props.badgeCount}

package/UI/Components/Banner/Banner.tsx

@@ -34,7 +34,7 @@ const Banner: FunctionComponent<ComponentProps> = (
 
   return (
     <div
-      className={`flex border-gray-200 rounded-xl border-2 py-2.5 px-6 sm:px-3.5${props.hideOnMobile ? " hidden md:flex" : ""}`}
+      className={`flex border-gray-200 rounded-xl border-2 py-2.5 px-6 sm:px-3.5 mb-5${props.hideOnMobile ? " hidden md:flex" : ""}`}
     >
       <p className="text-sm text-gray-400 hover:text-gray-500">
         {props.link && (

package/UI/Components/Card/Card.tsx

@@ -32,16 +32,18 @@ const Card: FunctionComponent<ComponentProps> = (
 
   return (
     <React.Fragment>
-      <div data-testid="card" className={`mb-4 ${props.className || ""}`}>
-        <div className="shadow md:rounded-md">
-          <div className="bg-white py-6 px-4 md:p-6">
-            <div className="flex flex-col md:flex-row md:justify-between">
-              <div className={`${noRightElementsOrButtons ? "w-full" : ""}`}>
+      <div data-testid="card" className={`mb-5 ${props.className || ""}`}>
+        <div className="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
+          <div className="py-6 px-5 md:px-6">
+            <div className="flex flex-col md:flex-row md:justify-between md:items-start">
+              <div
+                className={`${noRightElementsOrButtons ? "w-full" : "flex-1 min-w-0"}`}
+              >
                 {props.title && (
                   <h2
                     data-testid="card-details-heading"
                     id="card-details-heading"
-                    className="text-lg font-medium leading-6 text-gray-900"
+                    className="text-lg font-semibold leading-6 text-gray-900"
                   >
                     {props.title}
                   </h2>
@@ -49,7 +51,7 @@ const Card: FunctionComponent<ComponentProps> = (
                 {props.description && (
                   <p
                     data-testid="card-description"
-                    className="mt-1 text-sm text-gray-500 w-full hidden md:block"
+                    className="mt-1.5 text-sm text-gray-500 w-full hidden md:block leading-relaxed"
                   >
                     {props.description}
                   </p>
@@ -57,21 +59,21 @@ const Card: FunctionComponent<ComponentProps> = (
               </div>
               {(props.rightElement ||
                 (props.buttons && props.buttons.length > 0)) && (
-                <div className="flex flex-col md:flex-row md:w-fit mt-4 md:mt-0 gap-2 md:gap-0">
+                <div className="flex flex-col md:flex-row md:items-center md:w-fit mt-4 md:mt-0 md:ml-4 gap-2 md:gap-0 flex-shrink-0">
                   {props.rightElement && (
-                    <div className="mb-2 md:mb-0 md:mr-2">
+                    <div className="mb-2 md:mb-0 md:mr-3">
                       {props.rightElement}
                     </div>
                   )}
                   {props.buttons && props.buttons.length > 0 && (
-                    <div className="flex flex-wrap gap-2 md:gap-0">
+                    <div className="flex flex-wrap items-center gap-2">
                       {props.buttons.map(
                         (
                           button: CardButtonSchema | ReactElement,
                           i: number,
                         ) => {
                           return (
-                            <div className="md:ml-2 first:md:ml-0" key={i}>
+                            <div key={i}>
                               {React.isValidElement(button) ? button : null}
                               {React.isValidElement(button) ? null : (
                                 <Button
@@ -112,7 +114,7 @@ const Card: FunctionComponent<ComponentProps> = (
             </div>
 
             {props.children && (
-              <div className={props.bodyClassName || "mt-6"}>
+              <div className={props.bodyClassName || "mt-4"}>
                 {props.children}
               </div>
             )}

package/UI/Components/CodeBlock/CodeBlock.tsx

@@ -1,19 +1,62 @@
 import "highlight.js/styles/a11y-dark.css";
-import React, { FunctionComponent, ReactElement } from "react";
+import React, { FunctionComponent, ReactElement, useState } from "react";
 import Highlight from "react-highlight";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 
 export interface ComponentProps {
   code: string | ReactElement;
   language: string;
+  maxHeight?: string | undefined;
+  showCopyButton?: boolean | undefined;
 }
 
 const CodeBlock: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const [copied, setCopied] = useState<boolean>(false);
+
+  const handleCopy: () => void = (): void => {
+    if (typeof props.code === "string") {
+      navigator.clipboard.writeText(props.code).catch(() => {
+        /* ignore clipboard errors */
+      });
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    }
+  };
+
+  const maxHeight: string = props.maxHeight || "500px";
+  const showCopyButton: boolean = props.showCopyButton !== false;
+
   return (
-    <Highlight className={`p-3 language-${props.language} rounded-md shadow`}>
-      {props.code}
-    </Highlight>
+    <div className="relative group">
+      {showCopyButton && typeof props.code === "string" && (
+        <button
+          onClick={handleCopy}
+          className="absolute top-2 right-2 p-2 rounded-md bg-gray-700 hover:bg-gray-600 text-gray-300 hover:text-white transition-all opacity-0 group-hover:opacity-100 z-10"
+          title={copied ? "Copied!" : "Copy to clipboard"}
+          type="button"
+        >
+          <Icon
+            icon={copied ? IconProp.Check : IconProp.Copy}
+            className="h-4 w-4"
+          />
+        </button>
+      )}
+      <div
+        className="overflow-auto rounded-lg border border-gray-700"
+        style={{ maxHeight: maxHeight }}
+      >
+        <Highlight
+          className={`p-4 language-${props.language} text-sm leading-relaxed`}
+        >
+          {props.code}
+        </Highlight>
+      </div>
+    </div>
   );
 };