@neo4j-ndl/react/skills/ndl-react/components/ai/user-bubble.md

React implementation of Neo4j Design System

# UserBubbleComponent

Import: `import { UserBubbleComponent } from '@neo4j-ndl/react/ai'`

## Props

### UserBubbleComponent

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `avatarProps` | `PolymorphicCommonProps<ElementType<any, keyof IntrinsicElements>, AvatarProps>` |  |  | The props for the avatar |
| `children` | `ReactNode` |  |  | The content of the user bubble |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `trailingElement` | `ReactNode` |  |  | The element to display after the content. Could be a CleanIconButton to edit the user bubble. |

## Examples

### Default

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { UserBubble } from '@neo4j-ndl/react/ai';

const Component = () => {
  return (
    <UserBubble
      avatarProps={{
        name: 'KM',
        source:
          'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',
        type: 'image',
      }}
    >
      Can you analyse my data and tell me about...?
    </UserBubble>
  );
};

export default Component;
```

### Action

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { CleanIconButton } from '@neo4j-ndl/react';
import { UserBubble } from '@neo4j-ndl/react/ai';
import { PencilSquareIconOutline } from '@neo4j-ndl/react/icons';

const Component = () => {
  return (
    <UserBubble
      avatarProps={{
        name: 'KM',
        type: 'letters',
      }}
      trailingElement={
        <CleanIconButton description="Edit" size="large">
          <PencilSquareIconOutline />
        </CleanIconButton>
      }
    >
      Can you analyse my data and tell me about...?
    </UserBubble>
  );
};

export default Component;
```

### And Files

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { Menu } from '@neo4j-ndl/react';
import { FileTag, ImageTag, MoreFiles, UserBubble } from '@neo4j-ndl/react/ai';
import {
  DocumentIconOutline,
  PhotoIconOutline,
  TableCellsIconOutline,
} from '@neo4j-ndl/react/icons';
import { useRef, useState } from 'react';

const Component = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const anchorRef = useRef<HTMLButtonElement | null>(null);

  return (
    <div className="n-flex n-flex-coln-gap-token-64 n-w-full n-justify-end">
      <div className="n-flex n-flex-col n-gap-token-8 n-items-end">
        <MoreFiles
          count={3}
          isActive={isMenuOpen}
          onClick={() => setIsMenuOpen(!isMenuOpen)}
          ref={anchorRef}
        />
        <Menu
          isOpen={isMenuOpen}
          anchorRef={anchorRef}
          onClose={() => setIsMenuOpen(false)}
        >
          <Menu.Item
            leadingVisual={<DocumentIconOutline />}
            title="Gardening tips"
            description="PDF"
            onClick={() => alert('Gardening tips')}
          />
          <Menu.Item
            leadingVisual={<TableCellsIconOutline />}
            title="TvSeries"
            description="CSV"
            onClick={() => alert('TvSeries')}
          />
          <Menu.Item
            leadingVisual={<PhotoIconOutline />}
            title="Family photo"
            description="JPG"
            onClick={() => alert('Family photo')}
          />
        </Menu>
        <ImageTag
          src="https://plus.unsplash.com/premium_photo-1676496046182-356a6a0ed002?q=80&w=2952&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
          alt="Landscape image"
          fileName="Landscape image"
          fileType="jpg"
        />
        <FileTag
          icon={<TableCellsIconOutline />}
          fileName="MoviesDecade"
          fileType="csv"
        />
        <FileTag
          icon={<DocumentIconOutline />}
          fileName="Science Fiction Bestsellers"
          fileType="pdf"
        />
        <UserBubble
          avatarProps={{
            name: 'KM',
            source:
              'https://media.istockphoto.com/id/1334716681/photo/a-smiling-man.jpg?s=612x612&w=0&k=20&c=U6rkSDpQMzkcJEqx2hAa63fNLIhqnZb31Xuc_QSi648=',
            type: 'image',
          }}
        >
          Can you analyse my data and tell me about...?
        </UserBubble>
      </div>
    </div>
  );
};

export default Component;
```

### Long

```tsx
import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';

import { UserBubble } from '@neo4j-ndl/react/ai';

const Component = () => {
  return (
    <UserBubble
      avatarProps={{
        name: 'KM',
        type: 'letters',
      }}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in rutrum
      massa, ut congue nisi. Curabitur pulvinar odio id eros ornare dictum.
      Aliquam faucibus dui ligula, ac gravida enim mattis at. Proin pretium
      massa a risus eleifend consectetur. Fusce auctor maximus tellus sed
      lobortis. Nulla congue leo posuere ante accumsan, vel maximus justo
      cursus. Sed cursus varius ante at scelerisque. Fusce non venenatis diam.
      Nam sed dolor ultricies, varius sem sed, vulputate felis. Ut facilisis
      efficitur sem, et laoreet neque. Fusce congue vulputate magna. Mauris
      euismod egestas imperdiet. Sed mollis venenatis nunc eget laoreet.
    </UserBubble>
  );
};

export default Component;
```