myoperator-ui 0.0.217 → 0.0.218-beta.0

package/dist/index.js

@@ -5666,7 +5666,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, children, descrip
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-semantic-text-secondary outline-none transition-colors focus:bg-semantic-bg-ui focus:text-semantic-text-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -6432,7 +6432,7 @@ const Tag = React.forwardRef(
         {...props}
       >
         {label && <span className="font-semibold mr-1">{label}</span>}
-        <span className="font-normal">{children}</span>
+        <span className="font-normal inline-flex items-center gap-1">{children}</span>
       </span>
     );
   }
@@ -16563,6 +16563,126 @@ export interface ChatBubbleProps extends React.HTMLAttributes<HTMLDivElement> {
           name: "index.ts",
           content: prefixTailwindClasses(`export { ChatBubble } from "./chat-bubble";
 export type { ChatBubbleProps, ChatBubbleReply, DeliveryStatus } from "./types";
+`, prefix)
+        }
+      ]
+    },
+    "chat-timeline-divider": {
+      name: "chat-timeline-divider",
+      description: "A timeline divider for chat message lists \u2014 renders centered content between horizontal lines with date, unread, and system event variants",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge"
+      ],
+      internalDependencies: [],
+      isMultiFile: true,
+      directory: "chat-timeline-divider",
+      mainFile: "chat-timeline-divider.tsx",
+      files: [
+        {
+          name: "chat-timeline-divider.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+
+/* \u2500\u2500 Types \u2500\u2500 */
+
+export type ChatTimelineDividerVariant = "default" | "unread" | "system";
+
+export interface ChatTimelineDividerProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+  /**
+   * Visual style of the divider.
+   * - \`default\`: plain centered text between lines (e.g. "Today", "Yesterday")
+   * - \`unread\`: bold text in a white pill with border (e.g. "3 unread messages")
+   * - \`system\`: muted text in a white pill with border (e.g. "Assigned to Alex Smith")
+   */
+  variant?: ChatTimelineDividerVariant;
+  /** Content to display \u2014 text or ReactNode for rich content (e.g. linked names) */
+  children: React.ReactNode;
+}
+
+/* \u2500\u2500 Variant styles \u2500\u2500 */
+
+const containerStyles: Record<ChatTimelineDividerVariant, string> = {
+  default: "",
+  unread:
+    "bg-white px-2.5 py-0.5 rounded-full border border-semantic-border-layout shadow-sm",
+  system:
+    "bg-white px-2.5 py-1 rounded-full border border-semantic-border-layout shadow-[0px_1px_2px_0px_rgba(10,13,18,0.05)]",
+};
+
+const textStyles: Record<ChatTimelineDividerVariant, string> = {
+  default: "text-[13px] text-semantic-text-muted",
+  unread: "text-[12px] font-semibold text-semantic-text-primary",
+  system: "text-[13px] text-semantic-text-muted",
+};
+
+/* \u2500\u2500 Component \u2500\u2500 */
+
+/**
+ * ChatTimelineDivider renders a centered label between two horizontal lines
+ * in a chat message timeline.
+ *
+ * Use it to separate messages by date, mark unread boundaries,
+ * or display system/action events (assignments, resolutions, etc.).
+ *
+ * @example
+ * \`\`\`tsx
+ * // Date separator
+ * <ChatTimelineDivider>Today</ChatTimelineDivider>
+ *
+ * // Unread count
+ * <ChatTimelineDivider variant="unread">3 unread messages</ChatTimelineDivider>
+ *
+ * // System event with linked names
+ * <ChatTimelineDivider variant="system">
+ *   Assigned to <span className="text-semantic-text-link font-medium">Alex Smith</span>
+ * </ChatTimelineDivider>
+ * \`\`\`
+ */
+const ChatTimelineDivider = React.forwardRef<
+  HTMLDivElement,
+  ChatTimelineDividerProps
+>(
+  (
+    { variant = "default", children, className, ...props },
+    ref
+  ) => {
+    const showLines = true;
+
+    return (
+      <div
+        ref={ref}
+        role="separator"
+        className={cn("flex items-center gap-4 my-2", className)}
+        {...props}
+      >
+        {showLines && (
+          <div className="flex-1 h-px bg-semantic-border-layout" />
+        )}
+        <div className={cn(containerStyles[variant])}>
+          <span className={cn(textStyles[variant])}>{children}</span>
+        </div>
+        {showLines && (
+          <div className="flex-1 h-px bg-semantic-border-layout" />
+        )}
+      </div>
+    );
+  }
+);
+ChatTimelineDivider.displayName = "ChatTimelineDivider";
+
+export { ChatTimelineDivider };
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export {
+  ChatTimelineDivider,
+  type ChatTimelineDividerProps,
+  type ChatTimelineDividerVariant,
+} from "./chat-timeline-divider";
 `, prefix)
         }
       ]
@@ -16818,8 +16938,8 @@ export interface ChatComposerProps extends Omit<React.HTMLAttributes<HTMLDivElem
   leftActions?: React.ReactNode;
   /** Slot for right action buttons (rendered inside textarea container, bottom-right) */
   rightActions?: React.ReactNode;
-  /** Send button label. Defaults to "Send" */
-  sendLabel?: string;
+  /** Send button label. Accepts text or JSX (e.g. icon + text). Defaults to "Send" */
+  sendLabel?: React.ReactNode;
   /** Whether to show the send dropdown chevron. Defaults to false */
   showSendDropdown?: boolean;
   /** Whether the chat is expired (shows template prompt instead of composer) */
@@ -16913,12 +17033,35 @@ const DocMedia = React.forwardRef(
 
     if (variant === "download") {
       return (
-        <div ref={ref} className={cn("relative", className)} {...props}>
+        <div
+          ref={ref}
+          className={cn("relative rounded-t overflow-hidden", className)}
+          {...props}
+        >
           <img
             src={thumbnailUrl}
             alt={caption || filename || "Document"}
-            className="w-full rounded-t object-cover max-h-[280px]"
+            className="w-full object-cover"
+            style={{ aspectRatio: "442/308" }}
           />
+          <div className="absolute inset-0 bg-gradient-to-t from-[#1d222f] via-[#1d222f]/30 to-transparent" />
+          <div className="absolute bottom-0 left-0 right-0 px-4 py-3">
+            <p className="m-0 text-[14px] font-semibold text-white truncate">
+              {filename || "Document"}
+            </p>
+            <div className="flex items-center gap-1.5 mt-1">
+              <File className="size-3.5 text-white/80" />
+              <span className="text-[12px] text-white/80">
+                {[
+                  fileType,
+                  pageCount && \`\${pageCount} pages\`,
+                  fileSize,
+                ]
+                  .filter(Boolean)
+                  .join("  \\u00B7  ")}
+              </span>
+            </div>
+          </div>
         </div>
       );
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myoperator-ui",
-  "version": "0.0.217",
+  "version": "0.0.218-beta.0",
   "description": "CLI for adding myOperator UI components to your project",
   "type": "module",
   "exports": "./dist/index.js",