import { ArgTypes, Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
import { AILabel, AILabelContent, AILabelActions } from '.';
import * as AILabelStories from './AILabel.stories';
import { stackblitzPrefillConfig } from '../../../previewer/codePreviewer';

<Meta isTemplate />

# AILabel

[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/AILabel)
|
[AILabel release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
|
[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)

{/* <!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> */}

## Table of Contents

- [Overview](#overview)
- [AILabel anatomy](#ailabel-anatomy)
- [Component API](#component-api)
  - [AILabel `aiText`](#ailabel-aitext)
  - [AILabel `aiTextLabel`](#ailabel-aitextlabel)
  - [AILabel `kind`](#ailabel-kind)
  - [AILabel `revertActive` and `onRevertClick`](#ailabel-revertactive-and-onrevertclick)
- [Feedback](#feedback)

{/* <!-- END doctoc generated TOC please keep comment here to allow auto update --> */}

## Overview

The AI Label is intended for any scenario where something is being generated by
(or with) AI to reinforce AI transparency, accountability, and explainability at
any interface level. This also enables more effective recognition and recall of
AI instances in a way that is identifiable across any IBM product.

<Canvas
  of={AILabelStories.Default}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(AILabelStories.Default),
    },
  ]}
/>
## Inline

<Canvas
  of={AILabelStories.Inline}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(AILabelStories.Inline),
    },
  ]}
/>

## Inline with content

<Canvas
  of={AILabelStories.InlineWithContent}
  additionalActions={[
    {
      title: 'Open in Stackblitz',
      onClick: () => stackblitzPrefillConfig(AILabelStories.InlineWithContent),
    },
  ]}
/>

## AILabel anatomy

The `AILabel` itself is a button that acts as a `Toggletip` trigger. To
construct the contents of the `AILabel` callout, you can place the desired
elements as a child of `AILabel` in `AILabelContent`, like so:

```jsx
<AILabel>
  <AILabelContent>
    {Content Here}
  </AILabelContent>
</AILabel>
```

The `AILabel` also supports the rendering of an action bar at the bottom of the
callout. To achieve this, you can pass in `AILabelActions` as a child of
`AILabel`, placed inside the `AILabelContent`

```jsx
<AILabel>
  <AILabelContent>
    {Content Here}
    {Optional AILabel action bar}
    <AILabelActions>
      <IconButton kind="ghost" label="View">
        <View />
      </IconButton>
      <IconButton kind="ghost" label="Open Folder">
        <FolderOpen />
      </IconButton>
      <IconButton kind="ghost" label="Folders">
        <Folders />
      </IconButton>
      <Button>View details</Button>
    </AILabelActions>
  </AILabelContent>
</AILabel>
```

## Component API

<ArgTypes />

### AILabel `aiText`

If needed, you can change the text inside the `AILabel` when translating to
different languages.

<AILabel aiText="IA" className="sbdocs-ai-label">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>

```jsx
<AILabel aiText="IA">
  <AILabelContent>Explanation of AI-generated content</AILabelContent>
</AILabel>
```

### AILabel `aiTextLabel`

When using the `inline` variant, you can add text adjacent to the AI label with
the `aiTextLabel` prop.

<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>
<br />
<AILabel kind="inline" className="sbdocs-ai-label">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>

```jsx
<AILabel kind="inline" textLabel="Text goes here">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>

<AILabel kind="inline">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>
```

### AILabel `kind`

The `AILabel` component has two variants, `default` and `inline`.

<AILabel size="xs" className="sbdocs-ai-label">
  <AILabelContent>AI was used to generate this content</AILabelContent>
</AILabel>

```jsx
<AILabel size="xs">
  <AILabelContent>AI was used to generate this content</AILabelContent>
</AILabel>
```

The `inline` `AILabel` with the standard icon can also trigger the AI
explainability callout.

<AILabel kind="inline" textLabel="Text goes here" className="sbdocs-ai-label">
  <AILabelContent>Explanation of AI generated content</AILabelContent>
</AILabel>

```jsx
<AILabel kind="inline" textLabel="Text goes here" size="xs">
  <AILabelContent>Explanation of AI-generated content</AILabelContent>
</AILabel>
```

### AILabel `revertActive` and `onRevertClick`

`revertActive` is a boolean prop that can be set on `AILabel` that transforms
the `AILabel` into a revert action button. This is useful if a user edits an
AI-generated input to show that the element has been modified. This can be used
in conjunction with the `onRevertClick` callback to handle restoring the element
to the AI-generated state. For an example, please take a look at the
[Revert Test story](https://react.carbondesignsystem.com/?path=/story/components-form--with-ai-label&args=revertActive:!true)
or take a look at the example story
[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Form/Form.stories.js#L272).

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/AILabel/AILabel.mdx).
