hxy-ai-chat-lit

v1.2.7

Published

2 months ago

A mobile-first AI chat component built with Lit

Downloads

0High
0Medium
0Low

uestchxy

lit ai chat component mobile markdown typescript

AI Chat Lit Component

A mobile-first AI chat component built with Lit, designed for modern web applications. This component provides a clean, responsive chat interface with support for both text and markdown messages.

Features

🎨 Mobile-First Design - Optimized for mobile devices with responsive layout
📝 Text & Markdown Support - Render both plain text and rich markdown content
🌙 Theme Support - Light and dark themes
⚡ Event-Driven - Full event system for integration with your application
📱 Touch-Friendly - Optimized for touch interactions
🎯 TypeScript - Full TypeScript support with type definitions
🚀 Framework Agnostic - Works with any framework or vanilla JavaScript

Installation

npm install hxy-ai-chat-lit

Usage

Basic Usage

<!DOCTYPE html>
<html>
<head>
    <script type="module">
        import { AiChat } from 'hxy-ai-chat-lit';
        customElements.define('ai-chat', AiChat);
    </script>
</head>
<body>
    <ai-chat></ai-chat>
</body>
</html>

React Integration

import React, { useRef, useEffect } from 'react';
import 'hxy-ai-chat-lit';

function ChatApp() {
  const chatRef = useRef(null);

  useEffect(() => {
    const chat = chatRef.current;
    
    // 设置初始消息
    chat.messages = [
      {
        id: '1',
        type: 'text',
        content: 'Hello! How can I help you?',
        timestamp: Date.now(),
        sender: 'assistant'
      }
    ];

    // 监听消息发送事件
    const handleMessageSent = (event) => {
      console.log('Message sent:', event.detail);
      // 处理用户发送的消息
    };

    chat.addEventListener('message-sent', handleMessageSent);

    return () => {
      chat.removeEventListener('message-sent', handleMessageSent);
    };
  }, []);

  return (
    <ai-chat
      ref={chatRef}
      theme="light"
      placeholder="Type your message here..."
      show-timestamp
      enable-markdown
    />
  );
}

Vue Integration

<template>
  <ai-chat
    ref="chatRef"
    :theme="theme"
    :placeholder="placeholder"
    :show-timestamp="showTimestamp"
    :enable-markdown="enableMarkdown"
  />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import 'hxy-ai-chat-lit';

const chatRef = ref(null);
const theme = ref('light');
const placeholder = ref('Type your message here...');
const showTimestamp = ref(true);
const enableMarkdown = ref(true);

onMounted(() => {
  const chat = chatRef.value;
  
  // 设置初始消息
  chat.messages = [
    {
      id: '1',
      type: 'text',
      content: 'Hello! How can I help you?',
      timestamp: Date.now(),
      sender: 'assistant'
    }
  ];

  // 监听消息发送事件
  const handleMessageSent = (event) => {
    console.log('Message sent:', event.detail);
    // 处理用户发送的消息
  };

  chat.addEventListener('message-sent', handleMessageSent);
});
</script>

With Properties

<ai-chat
    theme="dark"
    placeholder="Type your message here..."
    show-timestamp
    enable-markdown
    max-height="500px"
></ai-chat>

JavaScript Integration

import { AiChat } from 'hxy-ai-chat-lit';

// Create component
const chat = new AiChat();

// Set properties
chat.messages = [
    {
        id: '1',
        type: 'text',
        content: 'Hello! How can I help you?',
        timestamp: Date.now(),
        sender: 'assistant'
    }
];

chat.theme = 'dark';
chat.loading = false;

// Listen for events
chat.addEventListener('message-sent', (event) => {
    console.log('Message sent:', event.detail);
    // Handle the message in your application
});

// Add to DOM
document.body.appendChild(chat);

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | messages | Message[] | [] | Array of chat messages | | loading | boolean | false | Shows loading indicator | | placeholder | string | 'Type a message...' | Input placeholder text | | maxHeight | string | '400px' | Maximum height of chat container | | theme | 'light' \| 'dark' | 'light' | Visual theme | | showTimestamp | boolean | true | Show message timestamps | | enableMarkdown | boolean | true | Enable markdown rendering |

Message Format

interface Message {
    id: string;                    // Unique message identifier
    type: 'text' | 'markdown';     // Message content type
    content: string;               // Message content
    timestamp?: number;            // Unix timestamp
    sender?: 'user' | 'assistant'; // Message sender
    metadata?: Record<string, any>; // Additional metadata
}

Events

`message-sent`

Fired when a user sends a message.

chat.addEventListener('message-sent', (event) => {
    const { type, data, messageId } = event.detail;
    // Handle the sent message
});

Event detail:

{
    type: 'message';
    data: Message;
    messageId: string;
}

Styling

The component uses CSS custom properties for theming:

ai-chat {
    --primary-color: #007AFF;
    --background-color: #FFFFFF;
    --text-color: #000000;
    --border-color: #E5E5E7;
    --user-message-bg: #007AFF;
    --assistant-message-bg: #F2F2F7;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

Mobile Optimization

The component is designed with mobile-first principles:

Touch-friendly button sizes (44px minimum)
Optimized font sizes for readability
Responsive layout that adapts to screen size
Smooth scrolling with momentum
Prevents zoom on input focus (iOS)

Browser Support

Chrome 80+
Firefox 78+
Safari 13+
Edge 80+

Development

# Install dependencies
npm install

# Build the component
npm run build

# Watch for changes
npm run dev

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme