@isartech/chat NPM

Installation

In the following sections we descirbe different methods of installing the Isartech Chat library. The chat frontend is deployed as a web component and can be integrated into most frontend frameworks such as react, angular, vue.js etc. Isartech Chat is primarily delivered as a Javascript Module Library available at: @isartech/chat. This library delivers a single web component as an entry point to configuring your assistant.

The Isartech Chat library can be configured using HTML attributes. Events can be subscribed/listened too through HTML event listeners and finally component state can be updated through a set of public methods provided by the Isartech Chat class.

When importing the <isartech-chat> component via the @isartech/chat library a new custom element gets automatically registered to the CustomElementRegistry. Once the component is registered you can use the isartech-chat HTML element anywhere in your document.

Install the component via npm:

npm install @isartech/chat

Acces via a CDN:

https://esm.sh/@isartech/chat

Importing

We recommend this method to include isartech-chat in your application.

To install Isatech Chat as an ESM module you can add a module script to your project. Below is an example html page that imports the isartech-chat component.

<!-- Imported via the esm.sh CDN -->
<body>
    <isartech-chat id="it-chat" isartechId="gCf8B6BB" isartechKey="8PcQcnGPfsKhvs75255ymtUu"> </isartech-chat>
    <script type="module" src="https://esm.sh/@isartech/chat"></script>
</body>

<!-- Imported via the esm.sh CDN -->
<body>
    <isartech-chat id="it-chat" isartechId="gCf8B6BB" isartechKey="8PcQcnGPfsKhvs75255ymtUu" districtId="273"> </isartech-chat>
    <script type="module">
        import IsartechChat from "https://esm.sh/@isartech/chat";
    </script>
</body>

    // If react is not already imported it needs to be added separately
    // Installed via npm install @isartech/chat
    import 'react' from 'React';
    import { IsartechChatReact as IsartechChat } from "@isartech/chat/react";

        <IsartechChat
            id="it-chat"
            isartechId="gCf8B6BB"
            isartechKey="8PcQcnGPfsKhvs75255ymtUu"
            districtId="273"
        ></IsartechChat>

Example:

import React from "react";
import { IsartechChatReact } from "@isartech/chat/react";

export const IsarTechChatReact = () => {
    return (
        <IsarTechChat
            style={{ width: "400px", height: "800px" }}
            id="it-chat"
            districtId="273"
            url="https://grocery.isartech.io"
            enableHeader
        ></IsarTechChat>
    );
};

Attributes

Additionally to any properties of a HTMLElement The isartech component exposes the following attributes that can be configured.

Name	Type	Example
isartechId	string	'danube'
isartechKey	string	'8PcQcnGPfsKhvs75255ymtUu'
language	string	'en' (or 'ar')
districtId	string	"273" for Al Qutbiyyah
enableHeader	boolean	true or false

Methods

To interact with the Isartech Chat component there are a few public methods available. These can be used by getting a reference to the isartech-chat component and calling the methods on the reference variable.

setCart

Sets items in the shopping chart.

Example:

const itChat = document.queryselector('isartech-chat#it-chat');

const orangeJuice: IsarTechProduct.Product = {
    itemId: "35"
    name: "Orange Juice",
    price: 35,
    quantity: 2,
};

const products = [orangeJuice];

// setProducts(products:  IsartechChatProduct.Product[]): void
itChat.setProducts(products);

getCart

Sets items in the shopping chart.

Example:

const itChat = document.queryselector("isartech-chat#it-chat");

// getCart(): IsarTechProduct.Product[]
const products = itChat.getCart(products);

clearCart

Clears the shopping cart and removes all items.

Example:

const itChat = document.queryselector("isartech-chat#it-chat");

// clearCart(): void
itChat.clearCart();

updateQuantity

updates the quantity of an individual item in the cart

Example:

const itChat = document.queryselector('isartech-chat#it-chat');

const orangeJuice: IsarTechProduct.Product = {
    itemId: "35"
    name: "Orange Juice",
    price: 35,
    quantity: 5,
};

// clearCart(): void
itChat.updateQuantity(orangeJuice);

clearChat

Clears all messages and starts a new conversation.

Example:

const itChat = document.queryselector("isartech-chat#it-chat");

// clearChat(): void
itChat.clearChat();

getStoreLocation

Get the users store location.

Example:

const itChat = document.queryselector("isartech-chat#it-chat");

// getStoreLocation(): {
//     district: defaultStore.state.districtId,
//     supermarket: defaultStore.state.supermarket,
//     country: defaultStore.state.country,
//     deliveryMethod: defaultStore.state.deliveryMethod,
// }
const location = itChat.getStoreLocation();

Events

change-quantity

Every time a user changes the quantity of an item a event is dispatched, which can be consumed through the isartech-chat element.

Example:

const itChat = document.queryselector('isartech-chat#it-chat');

const handleQuantityChange = (ev: IsarTechProduct.ProductQuantityEvent) => {
    const {
        itemId,
        name,
        price,
        quantity,
        ...
    } = ev.detail;
    // do something with the product event:
};

itChat.addEventListener('change-quantity', handleQuantityChange);

Types

export namespace IsarTech {
    export enum LanguageCode {
        English = "en",
        Arabic = "ar",
    }

    export interface DeliveryMethod {
        name: string;
        slug: string;
    }

    export interface District {
        id: number;
        state_id: number;
        country_id: number;
        name: string;
    }

    export interface State {
        id: number;
        country_id: number;
        name: string;
        visible_districts?: District[];
    }

    export interface Country {
        id: number;
        name: string;
        states: State[];
    }

    export interface Supermarket {
        id: number;
        name: string;
        state: State;
        district: District;
    }

    export interface StoreSelector {
        delivery_methods: DeliveryMethod[];
        supermarkets: Supermarket[];
        countries: Country[];
        states: State[];
        districts_to_supermarkets: Record<string, number>;
        selected_district_id: number;
        selected_supermarket_id: number;
        selected_delivery_method: string;
    }

    export interface StoreState {
        language: LanguageCode;
        history: Array<any>;
        cart: Map<string, any>;
        countryId?: string;
        districtId?: string;
        supermarketId?: string;
        deliveryMethod?: string;
        supermarket?: Supermarket;
        country?: Country;
    }
}

export namespace IsarTechProduct {
    export const EVENT_CHANGE_QUANTITY = "change-quantity" as const;
    export const ELEMENT_TAG = "it-product" as const;

    export type Product = Attributes & { name: string };

    export interface Attributes {
        itemId: string;
        quantity: number;
        id?: string;
        brand?: string;
        price?: string;
        priceUnit?: string;
        weight?: string;
        weightUnit?: string;
        origin?: string;
        slug?: string;
        img?: string;
    }

    export interface WeihtedAttributes extends Attributes {
        weight_increment: number;
        max_weight_per_order: number;
        min_weight_per_order: number;
        default_weight_count: number;
    }

    export interface ProductQuantityEvent extends Event {
        detail: Attributes | WeihtedAttributes;
    }

    export interface ProductEventMap {
        ADD_EVENT: ProductQuantityEvent;
        REMOVE_EVENT: ProductQuantityEvent;
    }
}

AI Assistant Chat Web Component

@microsoft/fetch-event-source @shoelace-style/shoelace @vitejs/plugin-react deep-chat markdown-it react react-dom uuid

8 months ago

8 months ago

8 months ago

8 months ago