From c7d820a83eff051d55e3d4484449a497b2c1a0c5 Mon Sep 17 00:00:00 2001
From: Ishaan Jaffer <ishaanjaffer0324@gmail.com>
Date: Wed, 6 May 2026 15:03:28 -0700
Subject: [PATCH] feat(ui/agents): add MessageBubble for conversation pane

Renders user/assistant/tool/system messages with role-tagged styling.
Tool calls render via ToolCallCard, not this bubble.
---
 .../components/three-pane/message-bubble.tsx  | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/message-bubble.tsx

diff --git a/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/message-bubble.tsx b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/message-bubble.tsx
new file mode 100644
index 00000000000..a9b9a3fae5f
--- /dev/null
+++ b/ui/litellm-dashboard/src/app/(dashboard)/agents/components/three-pane/message-bubble.tsx
@@ -0,0 +1,51 @@
+"use client";
+
+/**
+ * MessageBubble — one entry in the conversation pane.
+ *
+ * Renders user/assistant/tool/system messages with role-specific styling.
+ * Tool calls are rendered separately (ToolCallCard); this is for plain
+ * text content from the conversation list and assistant_message events.
+ */
+import { Typography, Tag } from "antd";
+import type { CloudAgentConversationRole } from "@/types/cloud-agents";
+
+const { Paragraph, Text } = Typography;
+
+const ROLE_TO_LABEL: Record<CloudAgentConversationRole, string> = {
+  user: "You",
+  assistant: "Agent",
+  tool: "Tool",
+  system: "System",
+};
+
+const ROLE_TO_COLOR: Record<CloudAgentConversationRole, string> = {
+  user: "blue",
+  assistant: "purple",
+  tool: "default",
+  system: "default",
+};
+
+interface MessageBubbleProps {
+  role: CloudAgentConversationRole;
+  content: string;
+  timestamp?: string;
+}
+
+export default function MessageBubble({ role, content, timestamp }: MessageBubbleProps) {
+  return (
+    <div className="mb-3 flex flex-col gap-1" data-testid={`message-bubble-${role}`}>
+      <div className="flex items-center gap-2">
+        <Tag color={ROLE_TO_COLOR[role]} className="!m-0 !text-xs">
+          {ROLE_TO_LABEL[role]}
+        </Tag>
+        {timestamp && (
+          <Text type="secondary" className="!text-xs">
+            {timestamp}
+          </Text>
+        )}
+      </div>
+      <Paragraph className="!mb-0 whitespace-pre-wrap !text-sm">{content}</Paragraph>
+    </div>
+  );
+}