athena-xai-chat

v1.1.104

Published

20 hours ago

<br />

0High
0Medium
0Low

syncitgroup

ATHENA XAI Chat

Lightweight AI-powered chat and search widget for modern websites.

About The Project

Athena XAI Chat is a lightweight web component that enables AI-powered chat and search experiences directly on your website.

The package includes:

AI Chat Component
Independent AI Search Input
Voice Recognition Support
Easy Script-Based Integration

Main features:

Free Chat
Independent AI Search
Search Redirect Support
Voice Search Support

Built With

Programming Language: TypeScript
Package Manager: npm
Compiler/Bundler: Vite

Requirements

Node.js >= 22.12.0

Installation

Install the package using npm:

npm install athena-xai-chat

Usage

1. Include Stylesheet

Place the stylesheet inside your <head> tag:

<link
    rel="stylesheet"
    href="dist/styles/athena-xai-chat-styles.css"
/>

2. Include Script Bundle

Place the script bundle inside your <head> tag:

<script
    type="module"
    src="dist/athena-xai-chat.umd.js"
    defer
></script>

3. Add Chat Component

Place the chat component where you want the AI chat to render:

<athena-xai-chat
    websiteToken="your-website-token"
></athena-xai-chat>

Components

`<athena-xai-chat>`

Main AI chat component.

Props

| Prop | Required | Description | |---|---|---| | websiteToken | Yes | Website token from the Athena dashboard used to identify your website | | aiSearchRedirect | No | Redirect URL used together with the independent search input | | voiceRecognitionLang | No | Voice recognition language (example: en-US) | | translations | No | Object of UI strings. Partial overrides are merged with English defaults |

Translations

Pass a translations object via JavaScript (object properties cannot be set as HTML attributes).

<athena-xai-chat
    id="athena-chat"
    websiteToken="your-website-token"
></athena-xai-chat>

<script type="module">
    const chat = document.getElementById('athena-chat');

    chat.translations = {
        shoppingAssistantTitle: 'XAI Shopping Assistent',
        shoppingAssistantGreeting: '👋 Hallo! Wie kann ich helfen?',
        recentChats: 'Letzte Chats',
        headerTitle: 'KI-Assistent',
        headerDescriptionHighlight: 'Fragen oder suchen Sie nach allem.',
        headerDescriptionSuffix: 'Die KI erledigt den Rest.',
        searchPlaceholder: 'Wenn Sie nicht sprechen möchten, tippen Sie einfach..',
        independentSearchPlaceholder: 'KI-Assistent',
        restartChat: 'Chat neu starten',
        aiAssistant: 'KI-Assistent',
        uploadImage: 'Bild hochladen',
        talkToMe: 'Sprich mit mir',
        sendToAiAssistant: 'An KI-Assistent senden',
        findSimilarStyle: 'Ähnlichen Stil finden',
        preparingMicrophone: 'Mikrofon wird vorbereitet',
        failedToSendMessage: 'Nachricht konnte nicht gesendet werden',
        errorPrefix: 'Fehler',
        exampleQuestions: [
            'Ich suche Sportkleidung',
            'Ich suche Gusseisen-Kochgeschirr',
            'Ich brauche einen mittelgroßen Rucksack',
        ],
    };
</script>

Omitted keys fall back to English defaults. Setting translations on <athena-xai-chat> also syncs to <athena-xai-chat-search-independent> unless that element has its own translations.

Translation keys

| Key | Default | |---|---| | shoppingAssistantTitle | XAI Shopping Assistant | | shoppingAssistantGreeting | 👋 Hey! How can I help? | | recentChats | Recent Chats | | exampleQuestions | Array of example prompt chips | | headerTitle | AI Assistant | | headerDescriptionHighlight | Ask or Search for anything. | | headerDescriptionSuffix | AI will do the rest. | | searchPlaceholder | if you don't feel like talking, start typing.. | | independentSearchPlaceholder | AI Assistant | | restartChat | Restart the chat | | aiAssistant | AI Assistant | | uploadImage | Upload an image | | talkToMe | Talk to me | | sendToAiAssistant | Send to AI Assistant | | findSimilarStyle | Find similar style | | productImageAlt | Product Image | | userUploadedImageAlt | User Uploaded Image | | preparingMicrophone | Preparing microphone | | failedToSendMessage | Failed to send message | | errorPrefix | Error |

`<athena-xai-chat-search-independent>`

Standalone AI search input component.

This component can be implemented anywhere on your website:

Header
Navigation
Hero section
Search overlay
Landing page

When the user presses Enter, the component automatically redirects the user to the AI search/chat page.

The redirect URL is configured through the aiSearchRedirect prop on the <athena-xai-chat> component.

Props

| Prop | Required | Description | |---|---|---| | aiSearchRedirect | No | Redirect URL (inherited from <athena-xai-chat> when omitted) | | voiceRecognitionLang | No | Voice recognition language | | translations | No | UI strings (inherited from <athena-xai-chat> when omitted) |

Example

<athena-xai-chat
    websiteToken="your-website-token"
    aiSearchRedirect="/ai-search"
></athena-xai-chat>

<athena-xai-chat-search-independent>
</athena-xai-chat-search-independent>

Voice Recognition

Voice recognition can be enabled using the voiceRecognitionLang prop.

Example

<athena-xai-chat
    websiteToken="your-website-token"
    voiceRecognitionLang="en-US"
></athena-xai-chat>

Supported Language Examples

| Language | Value | |---|---| | English (US) | en-US | | English (UK) | en-GB | | German | de-DE | | French | fr-FR | | Serbian | sr-RS |

Full Example

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />

        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />

        <title>Athena XAI Chat</title>

        <link
            rel="stylesheet"
            href="dist/styles/athena-xai-chat-styles.css"
        />

        <script
            type="module"
            src="dist/athena-xai-chat.umd.js"
            defer
        ></script>
    </head>

    <body>
        <athena-xai-chat
            id="athena-chat"
            websiteToken="your-website-token"
            aiSearchRedirect="/ai-search"
            voiceRecognitionLang="en-US"
        ></athena-xai-chat>

        <athena-xai-chat-search-independent>
        </athena-xai-chat-search-independent>

        <script type="module">
            document.getElementById('athena-chat').translations = {
                // Override any UI strings here
            };
        </script>
    </body>
</html>

Notes

websiteToken is required for all Athena XAI Chat integrations.
The website token can be found inside the Athena dashboard.
Make sure the stylesheet is loaded before rendering the components.
The script bundle must be loaded using type="module".
The independent search input redirects users to the page defined in aiSearchRedirect.
UI copy is customized through the translations prop; unset keys use English defaults.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

ATHENA XAI Chat

About The Project

Built With

Requirements

Installation

Usage

1. Include Stylesheet

2. Include Script Bundle

3. Add Chat Component

Components

<athena-xai-chat>

Props

Translations

Translation keys

<athena-xai-chat-search-independent>

Props

Example

Voice Recognition

Example

Supported Language Examples

Full Example

Notes

`<athena-xai-chat>`

`<athena-xai-chat-search-independent>`