@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
96 lines (80 loc) • 3.38 kB
Markdown
# 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. - Does nothing, will be removed in v5 |
| `isExpanded` | `boolean` | | | Whether the section is expanded. - 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. - 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 '-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;
```