# Reasoning

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

## Props

### Reasoning

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` |  |  | What should be displayed inside the reasoning component. |
| `currentAction` | `string` |  | `Thinking` | The current action the AI is performing |
| `isThinking` | `boolean` |  | `true` | Whether the AI is thinking |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |
| `thinkingMs` | `number` |  | `1000` | The duration of the thinking in milliseconds |

### Reasoning.Footer

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` | ✅ |  |  |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |

### Reasoning.Section

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `children` | `ReactNode` |  |  | The children of the section |
| `heading` | `ReactNode` |  |  | The heading of the section |
| `isDefaultExpanded` | `boolean` |  |  | The default value of the section is expanded. @deprecated - Does nothing, will be removed in v5 |
| `isExpanded` | `boolean` |  |  | Whether the section is expanded. @deprecated - Does nothing, will be removed in v5 |
| `leadingVisual` | `ReactNode` |  |  | The visual leading the section |
| `onExpandChange` | `(isExpanded: boolean) => void` |  |  | Callback function triggered when the section is expanded. @deprecated - Does nothing, will be removed in v5 |
| `ref` | `Ref<HTMLDivElement>` |  |  | A ref to apply to the root element. |

## Examples

### Full

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

import { FilledButton, Tooltip } from '@neo4j-ndl/react';
import { Reasoning } from '@neo4j-ndl/react/ai';
import {
  InformationCircleIconOutline,
  PencilSquareIconOutline,
  WrenchIconOutline,
} from '@neo4j-ndl/react/icons';
import { useState } from 'react';

const Component = () => {
  const [isThinking, setThinking] = useState(true);

  return (
    <div className="n-flex n-flex-col n-gap-token-12">
      <FilledButton onClick={() => setThinking(!isThinking)}>
        {isThinking ? 'Stop Thinking' : 'Start Thinking'}
      </FilledButton>
      <Reasoning
        isThinking={isThinking}
        thinkingMs={1400}
        currentAction="Creating an action plan"
      >
        <Reasoning.Section
          leadingVisual={<PencilSquareIconOutline />}
          heading="Creating an action plan"
          isDefaultExpanded={true}
        >
          Step 1 content
        </Reasoning.Section>
        <Reasoning.Section
          leadingVisual={<WrenchIconOutline />}
          heading="Applying agent tools"
        >
          Step 2 content
        </Reasoning.Section>
        <Reasoning.Footer>
          Footer information
          <Tooltip type="simple">
            <Tooltip.Trigger
              htmlAttributes={{ 'aria-label': 'Info about things like tokens' }}
            >
              <InformationCircleIconOutline className="n-size-token-16" />
            </Tooltip.Trigger>
            <Tooltip.Content>Info about things like tokens</Tooltip.Content>
          </Tooltip>
        </Reasoning.Footer>
      </Reasoning>
    </div>
  );
};

export default Component;
```