npm package: @justeattakeaway/pie-ai-suggestions
Description: PIE Design System Ai Suggestions built using Web Components
Author: Just Eat Takeaway.com - Design System Team
Latest version: 0.6.1

<p align="center">
  <img align="center" src="../../../readme_image.png" height="200" alt="">
</p>

<p align="center">
  <a href="https://www.npmjs.com/@justeattakeaway/pie-ai-suggestions">
    <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-ai-suggestions.svg">
  </a>
</p>

# Table of Contents

1. [Introduction](#pie-ai-suggestions)
2. [Installation](#installation)
3. [Importing the component](#importing-the-component)
4. [Peer Dependencies](#peer-dependencies)
5. [Props](#props)
6. [Events](#events)
7. [Contributing](#contributing)

## pie-ai-suggestions

`pie-ai-suggestions` is a Web Component built using the Lit library.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.

## Installation

To install `pie-ai-suggestions` in your application, run the following on your command line:

```bash
# npm
$ npm i @justeattakeaway/pie-ai-suggestions

# yarn
$ yarn add @justeattakeaway/pie-ai-suggestions
```

For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).

### Importing the component

#### JavaScript

```js
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
import { PieAiSuggestions } from '@justeattakeaway/pie-ai-suggestions';

// If you don't need to reference the imported object, you can simply
// import the module which registers the component as a custom element.
import '@justeattakeaway/pie-ai-suggestions';
```

#### React

```js
// React
// For React, you will need to import our React-specific component build
// which wraps the web component using ​@lit/react
import { PieAiSuggestions } from '@justeattakeaway/pie-ai-suggestions/dist/react';
```

> [!NOTE]
> When using the React version of the component, please make sure to also
> include React as a [peer dependency](#peer-dependencies) in your project.


## Peer Dependencies

> [!IMPORTANT]
> When using `pie-ai-suggestions`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.


## Props

| Property | Type | Default | Description |
|----------|------|---------|-------------|
| `itemName` | `string` | `''` | The name of the menu item with AI suggestions |
| `texts` | `AiSuggestionsTexts` | - | UI text strings for the component |
| `sections` | `AiSuggestionsSections` | `{}` | Configuration for AI suggestion sections (tags, abv, allergens, gtin) |
| `intro` | `Intro` | `undefined` | Optional intro dialog configuration |
| `isOpen` | `boolean` | `false` | Controls whether the modal is displayed |

See [defs.ts](./src/defs.ts) for complete TypeScript definitions.

### Sections

The component supports four optional section types:

| Section | Purpose |
|---------|---------|
| `tags` | Dietary information tags (vegan, vegetarian, etc.) |
| `abv` | Alcohol by volume percentage |
| `allergens` | Allergen information with confirmation modal |
| `gtin` | Product barcode identification |

## Events

| Event | Description |
|-------|-------------|
| `pie-ai-suggestions-submit` | Fired when user submits or rejects suggestions |
| `pie-ai-suggestions-close` | Fired when the component is closed |
| `pie-ai-suggestions-error` | Fired when an error occurs |

### Usage

In your markup or JSX, you can then use these to set the properties for the `pie-ai-suggestions` component:

```html
<!-- Native HTML -->
<pie-ai-suggestions
    itemName="Pepsi can"
    .texts="${textsConfig}"
    .sections="${sectionsConfig}"
    ?isOpen="${true}"
    @pie-ai-suggestions-submit="${handleSubmit}">
</pie-ai-suggestions>

<!-- JSX -->
<PieAiSuggestions
    itemName="Pepsi can"
    texts={textsConfig}
    sections={sectionsConfig}
    isOpen={true}
    onPieAiSuggestionsSubmit={handleSubmit}
/>
```

## Contributing

Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).