@kreditchat/chat-full

v1.0.2

Published

a month ago

Reusable chat web component built with Lit

0High
0Medium
0Low

prometa-office

chat web-component lit ai streaming

KreditChat Web Component

Installation

npm install @kreditchat/chat-component

`kredit-chat` Component

<!DOCTYPE html>
<html>
<head>
    <script type="module" src="node_modules/@kreditchat/chat-component/dist/kredit-chat.js"></script>
</head>
<body>
    <kredit-chat placeholder="Type your message..." show-loading>
        <span slot="welcome">Hello! How can I help you?</span>
        <span slot="send-button">→</span>
    </kredit-chat>
</body>
</html>

Attributes

The component exposes the following HTML attributes:

placeholder - Input placeholder text (default: "Type your message...")
throttle-message - Message shown when rate limited (default: "Please wait before sending another message.")
wait-prefix - Prefix for countdown timer (default: "Wait")
show-loading - Boolean attribute to show spinner while sending (default: true)

Slots

The component supports the following slots for customization:

welcome - Initial message from the assistant (default: none)
avatar - Avatar displayed next to assistant messages (default: none)
send-button - Content for the send button (default: "►")

<kredit-chat>
    <span slot="welcome">Hello! How can I help you today?</span>
    <img slot="avatar" src="avatar.png" alt="Assistant" width="40" height="40" />
    <span slot="send-button">
        <svg><!-- Custom icon --></svg>
    </span>
</kredit-chat>

Events

The component dispatches chat-event custom events:

chat.addEventListener('init', (event) => {
    console.log('contact token:', event.detail.contact_token)
})

chat.addEventListener('message-sent', (event) => {
    console.log('User message:', event.detail.message);
})
chat.addEventListener('message-received', (event) => {
    console.log('User message:', event.detail.message);
})

chat.addEventListener('error', (event) => console.error(event.detail))
chat.addEventListener('throttle', (event) => {
    console.log('rate limited', event.detail)
})

Styling

The component uses Shadow DOM and exposes styling through CSS ::part() pseudo-elements. All styles are minimal by default, allowing complete customization:

/* Style message bubbles */
kredit-chat::part(bubble-user) {
    background-color: #007bff;
    color: white;
}

kredit-chat::part(bubble-assistant) {
    background-color: #f8f9fa;
    color: #333;
    border: 1px solid #dee2e6;
}

/* Style the input */
kredit-chat::part(input) {
    border: 2px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
}

kredit-chat::part(input):focus {
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}

/* Style the send button */
kredit-chat::part(button) {
    background-color: #007bff;
    color: white;
}

kredit-chat::part(button):hover:not(:disabled) {
    background-color: #0056b3;
}

/* Style throttle warnings */
kredit-chat::part(warning) {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeeba;
}

/* Style the messages container */
kredit-chat::part(messages) {
    background-color: #ffffff;
}

Available Parts

container - Main container
messages - Scrollable messages area
message - Individual message wrapper
message-user - User message wrapper
message-assistant - Assistant message wrapper
bubble - Message bubble
bubble-user - User message bubble
bubble-assistant - Assistant message bubble
avatar - Avatar container for assistant messages
warning - Throttle warning banner
form - Message input form
input - Textarea input
button - Send button
spinner - Loading spinner

kredit-contact-form Usage

<!DOCTYPE html>
<html>
<head>
  <script type="module" src="node_modules/@kreditchat/chat-component/dist/kredit-chat.js"></script>
</head>
<body>
  <!-- A button will be rendered. Clicking it opens the dialog with the form. -->
  <kredit-contact-form
    toggle-button-text="Contact details"
    submit-button-text="Save"
    first-name-label="First name"
    last-name-label="Last name"
    email-label="Email"
    phone-label="Phone"
  ></kredit-contact-form>
</body>
</html>

Attributes

toggle-button-text – Text for the trigger button that opens the dialog (default: "Kontaktinformationen").
submit-button-text – Text for the submit button (default: "Speichern").
first-name-label – Label for the first name field (default: "Vorname").
last-name-label – Label for the last name field (default: "Nachname").
email-label – Label for the email field (default: "E-Mail").
phone-label – Label for the phone field (default: "Telefon").
success-message – Message shown after a successful submission (default: "Kontaktinformationen erfolgreich gespeichert!").
error-message – Message shown if the submission fails (default: "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.").

The component manages its own dialog; the open property exists for internal state and is not intended for direct control via attribute.

Styling

Like kredit-chat, this component uses Shadow DOM and exposes parts to fully customize the look and feel. Below are the main parts you can target:

container – Main wrapper
toggle-button – The button that opens the dialog
dialog – The element
dialog-header – Header of the dialog
dialog-title – Title in the header
close-button – Close (×) button
dialog-content – Content area
message – Wrapper for feedback messages
success-message – Success feedback
error-message – Error feedback
form – The form element
form-group – Group wrapper for each field
label – Labels
input – Input fields
submit-button – Submit button
spinner – Loading spinner within the submit button

Example customization:

/* Trigger button */
kredit-contact-form::part(toggle-button) {
  background: #0d6efd;
  color: white;
}

/* Dialog */
kredit-contact-form::part(dialog) {
  max-width: 420px;
}

/* Inputs */
kredit-contact-form::part(input) {
  border: 1px solid #ced4da;
  border-radius: 6px;
}

/* Submit button */
kredit-contact-form::part(submit-button) {
  background: #0d6efd;
  color: #fff;
}

/* Messages */
kredit-contact-form::part(success-message) {
  background: #d1e7dd;
  color: #0f5132;
}

kredit-contact-form::part(error-message) {
  background: #f8d7da;
  color: #842029;
}

Accessibility

Uses a native element and focuses on simple, accessible markup.
All fields are required and use appropriate input types.

Development

# Install dependencies
npm install

# Development server
npm run dev

# Build
npm run build

# Preview built component
npm run preview

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

KreditChat Web Component

Installation

kredit-chat Component

Attributes

Slots

Events

Styling

Available Parts

kredit-contact-form Usage

Attributes

Styling

Accessibility

Development

License

`kredit-chat` Component