Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/elements/MessageBubble/MessageBubble.tsx

@@ -0,0 +1,72 @@
+import { Group, Image, Paper, Stack, Text } from "@mantine/core";
+import { CopyButton } from "../CopyButton/CopyButton";
+
+export interface MessageBubbleProps {
+  index: number;
+  role: "user" | "assistant";
+  content: string;
+  imageContent?: { data: string; mimeType: string };
+  audioContent?: { data: string; mimeType: string };
+}
+
+function buildDataUri(mimeType: string, data: string): string {
+  return `data:${mimeType};base64,${data}`;
+}
+
+function formatRoleLabel(index: number, role: string): string {
+  return `[${index}] role: ${role}`;
+}
+
+function formatQuotedContent(content: string): string {
+  return `"${content}"`;
+}
+
+const BubbleContainer = Paper.withProps({
+  p: "md",
+  radius: "md",
+  withBorder: true,
+});
+
+const RoleLabel = Text.withProps({
+  size: "xs",
+  c: "dimmed",
+});
+
+const PreviewImage = Image.withProps({
+  maw: 300,
+  radius: "sm",
+  mt: "xs",
+});
+
+export function MessageBubble({
+  index,
+  role,
+  content,
+  imageContent,
+  audioContent,
+}: MessageBubbleProps) {
+  return (
+    <BubbleContainer>
+      <Stack gap="xs">
+        <Group justify="space-between">
+          <RoleLabel>{formatRoleLabel(index, role)}</RoleLabel>
+          <CopyButton value={content} />
+        </Group>
+        <Text size="sm">{formatQuotedContent(content)}</Text>
+        {imageContent && (
+          <PreviewImage
+            src={buildDataUri(imageContent.mimeType, imageContent.data)}
+          />
+        )}
+        {audioContent && (
+          <audio controls>
+            <source
+              src={buildDataUri(audioContent.mimeType, audioContent.data)}
+              type={audioContent.mimeType}
+            />
+          </audio>
+        )}
+      </Stack>
+    </BubbleContainer>
+  );
+}