ChatUI

Overview

This package provides an out of the box React Chat UI component to integrate with the Squiz DXP Chat AI capability.

Styling

Out of the box this component includes classes, using the BEM class naming method, but does not load styles automatically. An example set of styling is provided in this packages lib directory.

Usage Example

When running in Squiz Matrix or another system where __dxp is routed correctly to the Squiz DXP

import { ChatUI } from '@squiz/chat-ui';

export function Chat = ()=>{
    return <ChatUI ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE" greeting="Help can i help?" />
}

When running from a system without automatic routing via the origins /__dxp path a full path to the @squiz/ai-service needs to be provided:

import { ChatUI } from '@squiz/chat-ui';

export function Chat = ()=>{
    return (
        <ChatUI 
            ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE"
            aiApiUrl="https://my-domain/__myRoute/to/the/dxp/service/ai" 
            greeting="Help can i help?" 
        />
    )
}

If you have a pre-existing DxpAiService from the @squiz/dxp-ai-client package you can pass this in instead of a aiApiUrl:

import { ChatUI } from '@squiz/chat-ui';
import { DxpAiService } from '@squiz/dxp-ai-client';

export function Chat = ({dxpAiService}: {dxpAiService: DxpAiService<unknown>})=>{
    return (
        <ChatUI 
            ai="CHAT_AI_SQUIZ_DXP_CONSOLE_HERE"
            aiService={dxpAiService} 
            greeting="Help can i help?" 
        />
    )
}