@neo4j-ndl/react/skills/ndl-react/components/ai/thinking.md

React implementation of Neo4j Design System

# Thinking

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

## Props

### Thinking

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `isThinking` | `boolean` |  | `true` | Whether the AI is thinking. If true, will render a thinking presence icon and the text "Thinking". If false, will render the duration of the thinking. |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `thinkingMs` | `number` |  | `1000` | The duration of the thinking in milliseconds |

## Examples

### Ai Thinking Default

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

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

const Component = () => {
  return <Thinking isThinking={true} thinkingMs={1400} />;
};

export default Component;
```

### Ai Thinking Finished

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

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

const Component = () => {
  return <Thinking isThinking={false} thinkingMs={1400} />;
};

export default Component;
```