myoperator-ui 0.0.222 → 0.0.223-beta.1

package/dist/index.js

@@ -16577,6 +16577,306 @@ 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-list-item": {
+      name: "chat-list-item",
+      description: "A chat list item showing contact name, message preview, timestamp, delivery status, and channel badge",
+      category: "custom",
+      dependencies: [
+        "clsx",
+        "tailwind-merge",
+        "lucide-react"
+      ],
+      internalDependencies: [],
+      isMultiFile: true,
+      directory: "chat-list-item",
+      mainFile: "chat-list-item.tsx",
+      files: [
+        {
+          name: "chat-list-item.tsx",
+          content: prefixTailwindClasses(`import * as React from "react";
+import { cn } from "../../../lib/utils";
+import {
+  Bot,
+  Check,
+  CheckCheck,
+  Clock,
+  FileText,
+  Image as ImageIcon,
+} from "lucide-react";
+
+/* \u2500\u2500 Types \u2500\u2500 */
+
+export type MessageStatus = "sent" | "delivered" | "read";
+
+export type MessageType = "text" | "document" | "image";
+
+export interface ChatListItemProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** Contact or customer name (supports ReactNode for highlighted search matches) */
+  name: React.ReactNode;
+  /** Last message preview text (supports ReactNode for highlighted search matches) */
+  message: React.ReactNode;
+  /** Timestamp display string (e.g. "2:30 PM", "Yesterday") */
+  timestamp: string;
+  /**
+   * Delivery status of the last outbound message.
+   * Mutually exclusive with \`unreadCount\` \u2014 when set, no unread badge is shown.
+   * - \`sent\`: single gray checkmark (message left the server)
+   * - \`delivered\`: double gray checkmarks (reached the customer's device)
+   * - \`read\`: double blue checkmarks (customer opened the message)
+   */
+  messageStatus?: MessageStatus;
+  /**
+   * Number of unread messages from the customer.
+   * Only shown when \`messageStatus\` is not set (i.e., last message was inbound).
+   */
+  unreadCount?: number;
+  /**
+   * SLA timer label showing how long the customer has been waiting (e.g. "2h", "50m").
+   * Displayed as a warning-colored tag next to the name.
+   * Typically appears on unread/inbound conversations.
+   */
+  slaTimer?: string;
+  /**
+   * Type of the last message \u2014 controls the icon prefix before the message text.
+   * - \`text\`: no icon (default)
+   * - \`document\`: file icon
+   * - \`image\`: image icon
+   */
+  messageType?: MessageType;
+  /** Channel identifier (e.g. "MY01") */
+  channel: string;
+  /** Name of the assigned agent */
+  agentName?: string;
+  /** Whether the assigned agent's account has been deleted \u2014 renders in error color */
+  isAgentDeleted?: boolean;
+  /** Whether the conversation is handled by an AI/IVR bot \u2014 shows bot icon */
+  isBot?: boolean;
+  /** Whether this item is currently selected/active in the inbox */
+  isSelected?: boolean;
+  /** Callback when the chat item is clicked */
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+/* \u2500\u2500 Sub-components \u2500\u2500 */
+
+function StatusIndicator({ status }: { status: MessageStatus }) {
+  if (status === "sent") {
+    return (
+      <span aria-label="Sent">
+        <Check className="size-4 text-semantic-text-placeholder shrink-0" aria-hidden="true" />
+      </span>
+    );
+  }
+  if (status === "delivered") {
+    return (
+      <span aria-label="Delivered">
+        <CheckCheck className="size-4 text-semantic-text-placeholder shrink-0" aria-hidden="true" />
+      </span>
+    );
+  }
+  // read
+  return (
+    <span aria-label="Read">
+      <CheckCheck className="size-4 text-[#47b5bc] shrink-0" aria-hidden="true" />
+    </span>
+  );
+}
+
+function UnreadBadge({ count }: { count: number }) {
+  return (
+    <span
+      className="shrink-0 inline-flex items-center justify-center rounded-full bg-semantic-border-accent font-semibold text-white"
+      style={{ width: 18, height: 18, fontSize: 10, lineHeight: 1 }}
+      aria-label={\`\${count > 99 ? "99+" : count} unread messages\`}
+    >
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}
+
+function SlaTag({ timer }: { timer: string }) {
+  return (
+    <span
+      className="flex items-center gap-2 h-5 px-[6px] py-[2px] rounded bg-semantic-warning-surface shrink-0"
+      aria-label={\`SLA timer: \${timer}\`}
+    >
+      <Clock className="size-3 text-semantic-warning-text" aria-hidden="true" />
+      <span className="text-[12px] text-semantic-warning-text">{timer}</span>
+    </span>
+  );
+}
+
+function MessageTypeIcon({ type }: { type: MessageType }) {
+  if (type === "document") {
+    return <FileText className="size-[14px] text-semantic-text-placeholder shrink-0" />;
+  }
+  if (type === "image") {
+    return <ImageIcon className="size-[14px] text-semantic-text-placeholder shrink-0" />;
+  }
+  return null;
+}
+
+function ChannelPill({
+  channel,
+  agentName,
+  isAgentDeleted,
+  isBot,
+}: {
+  channel: string;
+  agentName?: string;
+  isAgentDeleted?: boolean;
+  isBot?: boolean;
+}) {
+  const textColor = isAgentDeleted ? "text-semantic-error-text" : "text-semantic-text-primary";
+
+  return (
+    <div className="flex items-center gap-3">
+      <span
+        className={cn(
+          "inline-flex items-center gap-[6px] px-2 py-1 rounded-[12px] border border-solid border-semantic-border-layout text-[12px]",
+          textColor
+        )}
+      >
+        {channel}
+        {agentName && (
+          <>
+            <span>-</span>
+            <span className="truncate">{agentName}</span>
+          </>
+        )}
+        {isBot && <Bot className="size-[14px] text-semantic-text-primary" aria-hidden="true" />}
+      </span>
+    </div>
+  );
+}
+
+/* \u2500\u2500 Main Component \u2500\u2500 */
+
+/**
+ * ChatListItem displays a conversation preview in an inbox-style list.
+ *
+ * Each item shows the contact name, last message preview, timestamp,
+ * delivery status or unread count, optional SLA timer, and channel/agent info.
+ *
+ * @example
+ * \`\`\`tsx
+ * <ChatListItem
+ *   name="Aditi Kumar"
+ *   message="Have a look at this document"
+ *   timestamp="2:30 PM"
+ *   messageStatus="sent"
+ *   messageType="document"
+ *   channel="MY01"
+ *   agentName="Alex Smith"
+ *   onClick={() => setSelectedChat("1")}
+ * />
+ * \`\`\`
+ */
+const ChatListItem = React.forwardRef(
+  (
+    {
+      name,
+      message,
+      timestamp,
+      messageStatus,
+      unreadCount,
+      slaTimer,
+      messageType = "text",
+      channel,
+      agentName,
+      isAgentDeleted = false,
+      isBot = false,
+      isSelected = false,
+      onClick,
+      className,
+      ...props
+    }: ChatListItemProps,
+    ref: React.Ref<HTMLDivElement>
+  ) => {
+    const nameText = typeof name === "string" ? name : "";
+    const messageText = typeof message === "string" ? message : "";
+    const defaultAriaLabel = \`\${nameText}. \${messageText}. \${timestamp}\${unreadCount ? \`. \${unreadCount} unread\` : ""}\${slaTimer ? \`. SLA: \${slaTimer}\` : ""}\${messageStatus ? \`. \${messageStatus}\` : ""}\`;
+
+    return (
+      <div
+        ref={ref}
+        role="button"
+        tabIndex={0}
+        aria-selected={isSelected}
+        aria-label={defaultAriaLabel}
+        onClick={onClick}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick?.(e as unknown as React.MouseEvent<HTMLDivElement>);
+          }
+        }}
+        className={cn(
+          "flex items-start px-4 py-5 w-full transition-colors cursor-pointer",
+          isSelected
+            ? "bg-[var(--color-neutral-50)] border-l-4 border-solid border-l-semantic-border-accent border-b border-b-semantic-border-layout"
+            : "bg-white hover:bg-[var(--color-neutral-50)] border-b border-solid border-semantic-border-layout",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex flex-col gap-2 flex-1 min-w-0">
+          {/* Row 1: Name + SLA Timer + Status/Unread Badge */}
+          <div className="flex items-center gap-[6px]">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <span className="text-[14px] text-semantic-text-primary truncate">
+                {name}
+              </span>
+              {slaTimer && <SlaTag timer={slaTimer} />}
+            </div>
+            {messageStatus ? (
+              <StatusIndicator status={messageStatus} />
+            ) : unreadCount ? (
+              <UnreadBadge count={unreadCount} />
+            ) : null}
+          </div>
+
+          {/* Row 2: Message Type Icon + Message Preview + Timestamp */}
+          <div className="flex items-center gap-[6px]">
+            <MessageTypeIcon type={messageType} />
+            <p className="flex-1 text-[14px] text-semantic-text-muted truncate min-w-0 m-0">
+              {message}
+            </p>
+            <span className="text-[12px] text-semantic-text-placeholder tracking-[0.06px] shrink-0">
+              {timestamp}
+            </span>
+          </div>
+
+          {/* Row 3: Channel + Agent Pill */}
+          <ChannelPill
+            channel={channel}
+            agentName={agentName}
+            isAgentDeleted={isAgentDeleted}
+            isBot={isBot}
+          />
+        </div>
+      </div>
+    );
+  }
+);
+ChatListItem.displayName = "ChatListItem";
+
+export { ChatListItem };
+`, prefix)
+        },
+        {
+          name: "index.ts",
+          content: prefixTailwindClasses(`export { ChatListItem } from "./chat-list-item";
+export type {
+  ChatListItemProps,
+  MessageStatus,
+  MessageType,
+} from "./chat-list-item";
 `, prefix)
         }
       ]
@@ -23518,12 +23818,12 @@ export type { ChatContextValue } from "./types"
         {
           name: "chat-sidebar.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import { TextField } from "../../text-field"
 import { Tabs, TabsList, TabsTrigger } from "../../tabs"
 import { Badge } from "../../badge"
-import { ChatListItem, type MessageType } from "../chat-list-item"
+import { ChatListItem, type MessageType } from "../../chat-list-item"
 import { useChatContext } from "../chat-provider"
 import type { Tab } from "../chat-types"
 import { Search, Plus, CircleAlert } from "lucide-react"
@@ -23846,11 +24146,15 @@ export function ChatFilterPanel({ onClose, onApply }: ChatFilterPanelProps) {
   const isDirty = () => {
     if (selectedAssignees.size !== initialAssignees.current.size) return true
     if (selectedChannels.size !== initialChannels.current.size) return true
-    for (const id of selectedAssignees)
-      if (!initialAssignees.current.has(id)) return true
-    for (const id of selectedChannels)
-      if (!initialChannels.current.has(id)) return true
-    return false
+    let dirty = false
+    selectedAssignees.forEach((id) => {
+      if (!initialAssignees.current.has(id)) dirty = true
+    })
+    if (dirty) return true
+    selectedChannels.forEach((id) => {
+      if (!initialChannels.current.has(id)) dirty = true
+    })
+    return dirty
   }
 
   const handleBack = () => {
@@ -24231,7 +24535,7 @@ export type { ChatFilterPanelProps } from "./chat-filter-panel"
         {
           name: "chat-new-panel.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import { TextField } from "../../text-field"
 import {
@@ -24392,7 +24696,7 @@ export { ChatNewPanel }
         {
           name: "add-contact-modal.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import { TextField } from "../../text-field"
 import {
@@ -24933,7 +25237,7 @@ export {
         {
           name: "chat-message-list.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import {
   Tooltip,
@@ -24949,8 +25253,8 @@ import {
   File,
   ArrowDown,
 } from "lucide-react"
-import { ChatTimelineDivider } from "../chat-timeline-divider"
-import { DocMedia } from "../doc-media"
+import { ChatTimelineDivider } from "../../chat-timeline-divider"
+import { DocMedia } from "../../doc-media"
 import { useChatContext } from "../chat-provider"
 import type { ChatMessage } from "../chat-types"
 import {
@@ -25566,7 +25870,7 @@ export { AssignmentDropdown }
           name: "resolve-button.tsx",
           content: prefixTailwindClasses(`import { useState } from "react"
 import { Check } from "lucide-react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import { useChatContext } from "../chat-provider"
 
@@ -25930,7 +26234,7 @@ import {
   TooltipTrigger,
   TooltipArrow,
 } from "../../tooltip"
-import { ChatComposer } from "../chat-composer"
+import { ChatComposer } from "../../chat-composer"
 import { ComposerAttachmentPreview } from "./composer-attachment-preview"
 import { CannedMessagesDropdown } from "./canned-messages"
 import { useChatContext } from "../chat-provider"
@@ -27597,7 +27901,7 @@ export function resolveVars(
         {
           name: "chat-app.tsx",
           content: prefixTailwindClasses(`import * as React from "react"
-import { cn } from "../../../lib/utils"
+import { cn } from "../../../../lib/utils"
 import { Button } from "../../button"
 import {
   TooltipProvider,

package/package.json

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