chore: POC for selectable bubbles

Author: pan-kot

pages/app/templates.tsx

@@ -39,8 +39,6 @@ export function Page({
       navigationHide={true}
       activeDrawerId={toolsOpen ? "settings" : null}
       onDrawerChange={({ detail }) => setToolsOpen(!!detail.activeDrawerId)}
-      tools={settings && <Drawer header={<Header variant="h2">Page settings</Header>}>{settings}</Drawer>}
-      toolsHide={!settings}
       drawers={drawers}
       content={
         <Box>

pages/chat-bubble/selectable.page.tsx

@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { useState } from "react";
+
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import Container from "@cloudscape-design/components/container";
+import Header from "@cloudscape-design/components/header";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+import { ChatBubble } from "../../lib/components";
+import { Page } from "../app/templates";
+import { ChatBubbleAvatarGenAI, ChatBubbleAvatarUser } from "./util-components";
+
+export default function ChatBubbleSelectablePage() {
+  const [selectedCardId, setSelectedCardId] = useState<null | string>(null);
+  return (
+    <Page title="Chat bubble: selectable">
+      <SpaceBetween direction="horizontal" size="l">
+        <Container header={<Header variant="h3">Chat container</Header>}>
+          <SpaceBetween size="m">
+            <ChatBubble avatar={<ChatBubbleAvatarUser />} type="outgoing" ariaLabel="User at 4:24:12pm">
+              <Box color="text-body-secondary">User request example</Box>
+            </ChatBubble>
+
+            <ChatBubble avatar={<ChatBubbleAvatarGenAI />} type="incoming" ariaLabel="Gen AI at 4:24:24pm">
+              <Box color="text-body-secondary">Normal response example</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              selectionType="card-click"
+              onSelect={() => setSelectedCardId((prev) => (prev !== "1" ? "1" : null))}
+              selected={selectedCardId === "1"}
+            >
+              <Box variant="h4">Selectable response example</Box>
+              <Box variant="p">This entire card is clickable</Box>
+            </ChatBubble>
+
+            <ChatBubble
+              avatar={<ChatBubbleAvatarGenAI />}
+              hideAvatar={true}
+              type="incoming"
+              ariaLabel="Gen AI at 4:24:25pm"
+              selectionType="custom"
+              selected={selectedCardId === "2"}
+            >
+              <div style={{ display: "flex", gap: 8, justifyContent: "space-between" }}>
+                <Box variant="h4">Selectable response example</Box>
+                {selectedCardId !== "2" ? (
+                  <Button variant="inline-link" onClick={() => setSelectedCardId("2")}>
+                    Show
+                  </Button>
+                ) : (
+                  <Button variant="inline-link" onClick={() => setSelectedCardId(null)}>
+                    Hide
+                  </Button>
+                )}
+              </div>
+              <Box variant="p">
+                This entire card is not clickable. Instead, there is a custom action in the top-right.
+              </Box>
+            </ChatBubble>
+          </SpaceBetween>
+        </Container>
+
+        <Container header={<Header variant="h3">Presentation container</Header>}>
+          {selectedCardId ? (
+            <SpaceBetween size="m">
+              <Box>{selectedCardId === "1" ? "First" : "Second"} card is selected</Box>
+              <Button onClick={() => setSelectedCardId(null)}>Clear selection</Button>
+            </SpaceBetween>
+          ) : null}
+        </Container>
+      </SpaceBetween>
+    </Page>
+  );
+}

src/chat-bubble/index.tsx

@@ -1,5 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import useBaseComponent from "../internal/base-component/use-base-component";
 import { applyDisplayName } from "../internal/utils/apply-display-name";
 import { ChatBubbleProps } from "./interfaces";

src/chat-bubble/interfaces.ts

@@ -1,6 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { NonCancelableEventHandler } from "../internal/events";
+
 export interface ChatBubbleProps {
   /** Avatar slot paired with the chat bubble content. Use [avatar](/components/avatar/). */
   avatar: React.ReactNode;
@@ -31,6 +33,11 @@ export interface ChatBubbleProps {
    * Useful for when there are multiple consecutive messages coming from the same author.
    */
   hideAvatar?: boolean;
+
+  // TBA
+  selectionType?: "card-click" | "custom";
+  selected?: boolean;
+  onSelect?: NonCancelableEventHandler<null>;
 }
 
 export namespace ChatBubbleProps {

src/chat-bubble/internal.tsx

@@ -1,10 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import { useEffect, useRef } from "react";
 import clsx from "clsx";
 
 import { getDataAttributes } from "../internal/base-component/get-data-attributes";
 import { InternalBaseComponentProps } from "../internal/base-component/use-base-component";
+import { fireNonCancelableEvent } from "../internal/events";
 import { InternalLoadingBar } from "../loading-bar/internal";
 import { ChatBubbleProps } from "./interfaces.js";
 
@@ -20,6 +22,9 @@ export default function InternalChatBubble({
   showLoadingBar,
   hideAvatar = false,
   ariaLabel,
+  selectionType,
+  selected,
+  onSelect,
   __internalRootRef = null,
   ...rest
 }: InternalChatBubbleProps) {
@@ -36,6 +41,8 @@ export default function InternalChatBubble({
     }
   }, [hideAvatar]);
 
+  const Tag = selectionType === "card-click" && onSelect ? "button" : "div";
+
   return (
     <div
       className={styles.root}
@@ -50,17 +57,22 @@ export default function InternalChatBubble({
         </div>
       )}
 
-      <div
+      <Tag
+        aria-pressed={selected}
+        onClick={() => fireNonCancelableEvent(onSelect)}
         className={clsx(styles["message-area"], styles[`chat-bubble-type-${type}`], {
           [styles["with-loading-bar"]]: showLoadingBar,
+          [styles["message-area-selectable"]]: !!selectionType,
+          [styles["message-area-clickable"]]: selectionType === "card-click",
+          [styles["message-area-selected"]]: selected,
         })}
       >
         <div className={styles.content}>{children}</div>
 
         {actions && <div className={styles.actions}>{actions}</div>}
 
         {showLoadingBar && <InternalLoadingBar variant="gen-ai-masked" />}
-      </div>
+      </Tag>
     </div>
   );
 }

src/chat-bubble/styles.scss

@@ -18,12 +18,14 @@
 }
 
 .message-area {
+  @include shared.styles-reset;
+
   display: flex;
   flex-direction: column;
   gap: cs.$space-scaled-s;
   padding: cs.$space-scaled-s;
   min-width: 0;
-  overflow-x: auto;
+  // overflow-x: auto;
 
   border-start-start-radius: cs.$border-radius-chat-bubble;
   border-start-end-radius: cs.$border-radius-chat-bubble;
@@ -39,6 +41,34 @@
     background-color: cs.$color-background-chat-bubble-outgoing;
   }
 
+  // TODO: create new tokens for outgoing-selectable (background, border, selected background, selected border)
+  // Potentially, need some for border width, too.
+  &.message-area-selectable.message-area-selectable {
+    border-color: cs.$color-border-divider-default;
+    border-width: 2px;
+    border-style: solid;
+    background-color: cs.$color-background-layout-main;
+  }
+
+  &.message-area-clickable.message-area-clickable {
+    cursor: pointer;
+
+    &:focus-visible {
+      @include shared.focus-highlight(6px, cs.$border-radius-chat-bubble);
+    }
+
+    &:hover {
+      background-color: cs.$color-background-dropdown-item-hover;
+    }
+  }
+
+  &.message-area-selected.message-area-selected.message-area-selected {
+    border-color: cs.$color-border-item-selected;
+    border-width: 2px;
+    border-style: solid;
+    background-color: cs.$color-background-item-selected;
+  }
+
   &.chat-bubble-type-incoming {
     color: cs.$color-text-chat-bubble-incoming;
     background-color: cs.$color-background-chat-bubble-incoming;

tsconfig.json

@@ -7,7 +7,7 @@
     "types": [],
     "lib": ["es2019", "dom", "dom.iterable"],
     "module": "ESNext",
-    "moduleResolution": "nodenext",
+    "moduleResolution": "Node",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,