npm package: @kreditchat/chat-full
Description: Reusable chat web component built with Lit
Author: KreditChat
Latest version: 1.0.2

# KreditChat Web Component

## Installation

```bash
npm install @kreditchat/chat-component
```

## `kredit-chat` Component

```html
<!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: "►")

```html
<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:

```javascript
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:

```css
/* 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

```html
<!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 <dialog> 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:

```css
/* 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 <dialog> element and focuses on simple, accessible markup.
- All fields are required and use appropriate input types.

## Development

```bash
# Install dependencies
npm install

# Development server
npm run dev

# Build
npm run build

# Preview built component
npm run preview
```

## License

MIT