# ai12z Web Components

`ai12z` is a library of web components to integrate ai12z platform to you website / web app.

# Setup

To install from npm:

```
npm install ai12z@latest --save
npm install ai12z-cta --save
npm install ai12z-knowledge-box  --save
```

## Getting Started

### HTML

- Put a script tag similar to this
  `<script type='module' src='https://unpkg.com/ai12z@latest/dist/esm/library.js'></script>`
  in the head of your index.html
- Then you can use the element anywhere in your html
- The tag named as **ai12z-cta** allows us to show the search results along with the follow up chat conversations and customize our search results.
- This control is having two tag element which is mentioned below.

```
<<ai12z-cta>
  <privacy slot="custom-privacy"></privacy>
  <cta slot="cta"></cta>
</<ai12z-cta>
```

- **<privacy slot="custom-privacy"></privacy>** (Optional) This tag element allows us to add the privacy policy links.
- **<cta slot="cta"></cta>** (Optional) This tag element allows us to customize our page by adding our own tag elements within this element.

> The control contains following properties to customize the page.
>
> > - **data-key** (Required) api key from your ai12z project settings.
> > - **data-mode** (Required) Allows us to enter the data-mode which will identify the server as local or dev or prod.
> > - **heading** (Optional) allows us to show the header text.
> > - **button-text** (Optional) allows us to customize the button name.
> > - **help-text** (Optional) allows us to customize the helper text.
> > - **no-results-text** (Optional) allows us to customize the no results found text.
> > - **auto-search** (Optional) allows us to configure the search option.
> > - **placeholder** (Optional) allows us to customize the placeholder text.
> > - **icon-src** (Optional) allows us to add the icon to the search button.
> > - **categorize** (Optional) allows us to customize the search results based on the category. By default the search results will be catogorized.
> > - **clear-memory** (Optional) allows us to clear the previously searched data. By defualt, this property is set to true.
> > - **image-upload** (Optional) allows us to perform a image based search.By default, this property is set to true.

- The second control named as **ai12z-knowledge-box** allows us to send the query programmmatically through javascript and rendering the query results by clicking on the button.

> The control contains following properties to customize the page.
>
> > - **data-key** (Required) api key from your ai12z project settings.
> > - **data-mode** (Required) Allows us to enter the data-mode which will identify the server as local or dev or prod.
> > - **question** (Optional) allows us to set the question for on-load.
> > - **relavance-score** (Optional) allows us to view the score of clicks, engagement, conversions and negative reviews.
> > - **feedback** (Optional) allows us to add the thumbs up and down option for the question. By default this property set to true.

###

### Usage

We are providing the option named as **dataAttributes** for assigning the JSON object programmatically and sending those object to the API payload for furthur use.

```
<script>
  const ele = document.querySelector('ai12z-cta');
  ele.dataAttributes = {
    content: {
      newlist: [
        {
          _uid: "BUY6Drn9e1",
          component: "foo",
          headline: "Foo"
        },
        {
          _uid: "gJZoSLkfZV",
          component: "bar",
          title: "Bar"
        },
        {
          _uid: "X1JAfdsZxy",
          component: "foo",
          headline: "Another headline"
        }
      ]
    }
};
</script>
```

### Events

```
<script>
  // Reference to your component
  const ele = document.querySelector("ai12z-cta")

  // onErrored
  ele.addEventListener("errored", (event) => {
    console.error("Error:", event.detail)
  })

  // onButtonClicked
  ele.addEventListener("buttonClicked", (event) => {
    console.log("Button clicked:", event.detail)
  })

  // onMessageSent
  ele.addEventListener("messageSent", (event) => {
    console.log("Sent message:", event.detail)
  })

  // onMessageReceived
  ele.addEventListener("messageReceived", (event) => {
    console.log("Received message:", event.detail)
  })

  // onOpen
  ele.addEventListener("open", () => {
    console.log("Component opened")
  })

  // onClose
  ele.addEventListener("close", () => {
    console.log("Component closed")
  })
</script>

```

---
