Refactor renamed the component groups to something less obtuse:

Elements -> Groups -> Screens -> Views

clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { fn } from "storybook/test";
+import { PromptMessagesDisplay } from "./PromptMessagesDisplay";
+
+const meta: Meta<typeof PromptMessagesDisplay> = {
+  title: "Groups/PromptMessagesDisplay",
+  component: PromptMessagesDisplay,
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof PromptMessagesDisplay>;
+
+export const SingleMessage: Story = {
+  args: {
+    messages: [
+      {
+        role: "user",
+        content: "What is the capital of France?",
+      },
+    ],
+  },
+};
+
+export const Conversation: Story = {
+  args: {
+    onCopyAll: fn(),
+    messages: [
+      {
+        role: "user",
+        content: "What is the capital of France?",
+      },
+      {
+        role: "assistant",
+        content:
+          "The capital of France is Paris. It is the largest city in France and serves as the country's political, economic, and cultural center.",
+      },
+    ],
+  },
+};
+
+export const WithImage: Story = {
+  args: {
+    messages: [
+      {
+        role: "user",
+        content: "Here is a photo for you to analyze.",
+        imageContent: {
+          data: "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==",
+          mimeType: "image/png",
+        },
+      },
+    ],
+  },
+};
+
+export const LongConversation: Story = {
+  args: {
+    onCopyAll: fn(),
+    messages: [
+      {
+        role: "user",
+        content: "Can you help me write a haiku about programming?",
+      },
+      {
+        role: "assistant",
+        content:
+          "Sure! Here is a haiku about programming:\n\nSilent keys tap fast\nLogic flows through glowing screens\nBugs hide in the code",
+      },
+      {
+        role: "user",
+        content: "That is great! Can you write another one about debugging?",
+      },
+      {
+        role: "assistant",
+        content:
+          "Here is a debugging haiku:\n\nStack trace lines scroll down\nOne missing semicolon\nHours lost to a typo",
+      },
+      {
+        role: "user",
+        content: "I love it! One more about open source?",
+      },
+    ],
+  },
+};

clients/web/src/components/groups/PromptMessagesDisplay/PromptMessagesDisplay.tsx

@@ -0,0 +1,49 @@
+import { Button, Group, Stack, Text, Title } from "@mantine/core";
+import { MessageBubble } from "../../elements/MessageBubble/MessageBubble";
+
+export interface PromptMessage {
+  role: string;
+  content: string;
+  imageContent?: { data: string; mimeType: string };
+  audioContent?: { data: string; mimeType: string };
+}
+
+const CopyAllButton = Button.withProps({
+  variant: "light",
+  size: "sm",
+});
+
+export interface PromptMessagesDisplayProps {
+  messages: PromptMessage[];
+  onCopyAll?: () => void;
+}
+
+export function PromptMessagesDisplay({
+  messages,
+  onCopyAll,
+}: PromptMessagesDisplayProps) {
+  return (
+    <Stack gap="md">
+      <Group justify="space-between">
+        <Title order={4}>Messages</Title>
+        {onCopyAll && messages.length > 0 && (
+          <CopyAllButton onClick={onCopyAll}>Copy All</CopyAllButton>
+        )}
+      </Group>
+      {messages.length === 0 ? (
+        <Text c="dimmed">No messages to display</Text>
+      ) : (
+        messages.map((message, index) => (
+          <MessageBubble
+            key={index}
+            index={index}
+            role={message.role as "user" | "assistant"}
+            content={message.content}
+            imageContent={message.imageContent}
+            audioContent={message.audioContent}
+          />
+        ))
+      )}
+    </Stack>
+  );
+}