Skip to main content

Types

Chat Assistant Typescript types

tip

New to Typescript? Check this ;)

ChatConfig​

ChatConfig.ts
export interface ChatConfig {
    store_uuid?: string
    store_id?: number
    title?: string
    subtitle?: string
    primaryColor?: string
    thumbnail?: string
    fullSizeMode?: boolean
    chatWindowSide?: 'left' | 'right'
    hideFloatingButton?: boolean
    alwaysOnDisplay?: boolean
    containerWidth?: number
    welcomeMessages?: WelcomeMessages
    customTexts?: CustomTexts
}

export interface CustomTexts {
    quickAdd?: string
    moreLikeThis?: string
    visualSearchTooltip?: string
    newChatTooltip?: string
}

Message​

messages.ts
export interface Message {
    role: MessageRole
    content: string
    type: MessageType
    products?: ServerProduct[]
    messageId?: string
    questions?: string[]
    feedback?: Feedback
}

export enum MessageRole {
    user = 'user',
    assistant = 'assistant',
    system = 'system'
}

export enum MessageType {
    regular = 'regular',
    userImage = 'user-image'
}

export interface Feedback {
    type: 'positive' | 'negative'
    submitted: boolean
    text?: string
    options?: string[]
}

export type Messages = Message[]

ServerProduct​

product.ts
export interface ServerProduct {
    c: string                 // category
    d: string                 // description
    f: number                 // ???
    id: string               // product ID
    iso: boolean             // in stock only
    l: string                // label/title
    p: string                // price
    p_c: string              // price currency
    p_max: string            // max price
    p_max_c: string          // max price currency
    p_min: string            // min price
    p_min_c: string          // min price currency
    p_spl: number            // price special
    review?: number          // review rating
    reviews_count?: number   // number of reviews
    s: string                // image URL
    sku: string              // SKU
    skus: string[]           // all SKUs
    t: string                // title
    t2: string               // subtitle
    u: string                // URL
    v_c: number              // variant count
    v: string                // vendor
    vra: any[]               // variants array
    vrc: object              // variants config
    att?: any[]              // attributes
    real_sku?: string        // real SKU
    imageID?: string         // image ID
    alt?: AlternativeProduct[]  // alternative products
    inventory_lvl?: number   // inventory level
}

export interface AlternativeProduct {
    color: string
    url: string
    id: string
    variants?: Variant[]
    s?: string
    price: number
    comparePrice: number
    formattedCompare?: string
    formattedPrice?: string
    attributes?: Attribute[]
}

export interface Variant {
    v_id: string
    sellable: boolean
    price: number
    comparePrice: number
    attributes: Attribute[]
}

export type Attribute = [string, AttributeData[]]
export type AttributeData = string[] | string[][]

WelcomeMessages​

welcomeMessage.ts
export interface WelcomeMessage {
    content: string
    questions?: string[]
}

export type WelcomeMessages = WelcomeMessage[]

ChatPageContext​

chatPageContext.ts
export interface ChatPageContext {
    pageType?: string
    productId?: string
    category?: string
    price?: number
    [key: string]: any  // Allow additional custom fields
}

Hook Callback Signature​

hooks.ts
type HookCallback = (params: object) => void

// Example hook params for each event:

// ChatHeader hook
interface ChatHeaderParams {
    element: HTMLElement
    title: string
    subtitle: string
    config: ChatConfig
}

// ChatFooter hook
interface ChatFooterParams {
    element: HTMLElement
    currentInput: string
    isMessageLoading: boolean
}

// ChatBody hook
interface ChatBodyParams {
    element: HTMLElement
    messages: Message[]
    isMessageLoading: boolean
}

// Message hook
interface MessageParams {
    element: HTMLElement
    content: string
    type: MessageType
    messageType: 'user' | 'system'
    products?: ServerProduct[]
    messageId?: string
}

CustomizationEvent Enum​

customizationEvents.ts
export enum CustomizationEvent {
    ChatHeader = "chat-header",
    ChatFooter = "chat-footer",
    ChatBody = "chat-body",
    Message = "message",
}