@jidou-ai/chat-widget 1.0.0

package/src/components/ChatWindow.ts

@@ -0,0 +1,283 @@
+import { BaseComponent } from './BaseComponent';
+import { MessageList } from './MessageList';
+import { InputArea } from './InputArea';
+import { ConnectionStatus } from './ConnectionStatus';
+import { QuickReplies } from './QuickReplies';
+import { createIcon } from './icons';
+import { t } from '../i18n';
+import type {
+  ChatWindowConfig,
+  DisplayMode,
+  ConnectionState,
+  Message,
+  QuickReply,
+  LauncherPosition,
+} from '../types';
+
+export interface ChatWindowOptions {
+  config: ChatWindowConfig;
+  displayMode: DisplayMode;
+  position: LauncherPosition;
+  connectionState: ConnectionState;
+  reconnectAttempt?: number;
+  messages: Message[];
+  isTyping: boolean;
+  quickReplies?: QuickReply[];
+  showBranding?: boolean;
+  onClose: () => void;
+  onCollapse?: () => void;
+  onExpand?: () => void;
+  onSend: (message: string) => void;
+  onTypingStart?: () => void;
+  onTypingStop?: () => void;
+  onQuickReplySelect?: (item: QuickReply) => void;
+}
+
+export class ChatWindow extends BaseComponent<ChatWindowOptions> {
+  private messageList!: MessageList;
+  private inputArea!: InputArea;
+  private connectionStatus!: ConnectionStatus;
+  private quickReplies: QuickReplies | null = null;
+
+  protected render(): HTMLElement {
+    const {
+      config,
+      displayMode,
+      position,
+      connectionState,
+      reconnectAttempt,
+      messages,
+      isTyping,
+      quickReplies,
+      showBranding = true,
+      onClose,
+      onCollapse,
+      onExpand,
+      onSend,
+      onTypingStart,
+      onTypingStop,
+      onQuickReplySelect,
+    } = this.options;
+
+    const container = document.createElement('div');
+    container.className = this.getClassName(displayMode, position);
+    container.setAttribute('role', 'dialog');
+    container.setAttribute('aria-label', t('chat.window'));
+
+    // Apply size styles for floating mode
+    if (displayMode === 'floating') {
+      const width = config.width || 380;
+      const height = config.height || 600;
+      container.style.width = typeof width === 'number' ? `${width}px` : width;
+      container.style.height = typeof height === 'number' ? `${height}px` : height;
+      if (config.borderRadius) {
+        container.style.borderRadius = `${config.borderRadius}px`;
+      }
+    }
+
+    // Header (can be hidden via config.header.show = false)
+    if (config.header?.show !== false) {
+      const header = this.renderHeader(config, displayMode, onClose, onCollapse, onExpand);
+      container.appendChild(header);
+    }
+
+    // Body
+    const body = document.createElement('div');
+    body.className = 'jd-chat-body';
+
+    // Connection status
+    const connStatus = new ConnectionStatus({
+      state: connectionState,
+      reconnectAttempt,
+    });
+    this.connectionStatus = connStatus;
+    body.appendChild(connStatus.getElement());
+
+    // Message list
+    this.messageList = new MessageList({
+      messages,
+      isTyping,
+    });
+    body.appendChild(this.messageList.getElement());
+
+    // Quick replies
+    if (quickReplies && quickReplies.length > 0 && onQuickReplySelect) {
+      this.quickReplies = new QuickReplies({
+        items: quickReplies,
+        onSelect: (item) => {
+          onQuickReplySelect(item);
+          // Hide quick replies after selection
+          this.quickReplies?.setVisible(false);
+        },
+      });
+      body.appendChild(this.quickReplies.getElement());
+    }
+
+    container.appendChild(body);
+
+    // Input area
+    this.inputArea = new InputArea({
+      placeholder: config.footer?.input?.placeholder || t('input.placeholder'),
+      maxLength: config.footer?.input?.maxLength,
+      disabled: connectionState !== 'connected',
+      onSend,
+      onTypingStart,
+      onTypingStop,
+    });
+    container.appendChild(this.inputArea.getElement());
+
+    // Branding
+    if (showBranding && config.footer?.branding?.show !== false) {
+      const branding = this.renderBranding(config.footer?.branding?.text);
+      container.appendChild(branding);
+    }
+
+    return container;
+  }
+
+  private getClassName(displayMode: DisplayMode, position: LauncherPosition): string {
+    const classes = [
+      'jd-chat-window',
+      `jd-chat-window--${displayMode}`,
+    ];
+
+    if (displayMode === 'floating') {
+      classes.push(`jd-chat-window--${position}`);
+    }
+
+    return classes.join(' ');
+  }
+
+  private renderHeader(
+    config: ChatWindowConfig,
+    displayMode: DisplayMode,
+    onClose: () => void,
+    onCollapse?: () => void,
+    onExpand?: () => void
+  ): HTMLElement {
+    const header = document.createElement('header');
+    header.className = 'jd-chat-header';
+
+    // Logo
+    if (config.header?.logo?.show !== false) {
+      const logoWrapper = document.createElement('div');
+      logoWrapper.className = 'jd-chat-header__logo';
+
+      if (config.header?.logo?.url) {
+        const img = document.createElement('img');
+        img.src = config.header.logo.url;
+        img.alt = '';
+        if (config.header.logo.size) {
+          img.style.width = `${config.header.logo.size}px`;
+          img.style.height = `${config.header.logo.size}px`;
+        }
+        logoWrapper.appendChild(img);
+      } else {
+        logoWrapper.appendChild(createIcon('bot'));
+      }
+
+      header.appendChild(logoWrapper);
+    }
+
+    // Title and subtitle
+    const content = document.createElement('div');
+    content.className = 'jd-chat-header__content';
+
+    const title = document.createElement('h2');
+    title.className = 'jd-chat-header__title';
+    title.textContent = config.header?.title || t('chat.title');
+    content.appendChild(title);
+
+    if (config.header?.subtitle) {
+      const subtitle = document.createElement('p');
+      subtitle.className = 'jd-chat-header__subtitle';
+      subtitle.textContent = config.header.subtitle;
+      content.appendChild(subtitle);
+    }
+
+    header.appendChild(content);
+
+    // Actions
+    const actions = document.createElement('div');
+    actions.className = 'jd-chat-header__actions';
+
+    const addButton = (icon: Parameters<typeof createIcon>[0], label: string, onClick: () => void) => {
+      const btn = document.createElement('button');
+      btn.className = 'jd-chat-header__btn';
+      btn.type = 'button';
+      btn.setAttribute('aria-label', label);
+      btn.appendChild(createIcon(icon));
+      btn.addEventListener('click', onClick);
+      actions.appendChild(btn);
+    };
+
+    if (displayMode === 'fullscreen' && onCollapse) {
+      addButton('collapse', t('chat.collapse'), onCollapse);
+    }
+
+    if (displayMode === 'floating') {
+      if (onExpand) addButton('expand', t('chat.expand'), onExpand);
+      addButton('close', t('chat.closeChat'), onClose);
+    }
+
+    header.appendChild(actions);
+
+    return header;
+  }
+
+  private renderBranding(text?: string): HTMLElement {
+    const branding = document.createElement('div');
+    branding.className = 'jd-branding';
+
+    const link = document.createElement('a');
+    link.href = 'https://jidou.ai';
+    link.target = '_blank';
+    link.rel = 'noopener noreferrer';
+    link.textContent = text || t('branding.poweredBy');
+    branding.appendChild(link);
+
+    return branding;
+  }
+
+  show(): void {
+    this.element.classList.remove('jd-chat-window--hidden');
+    this.inputArea?.focus();
+  }
+
+  hide(): void {
+    this.element.classList.add('jd-chat-window--hidden');
+  }
+
+  setMessages(messages: Message[]): void {
+    this.messageList?.setMessages(messages);
+  }
+
+  addMessage(message: Message): void {
+    this.messageList?.addMessage(message);
+  }
+
+  updateMessage(id: string, updates: Partial<Message>): void {
+    this.messageList?.updateMessage(id, updates);
+  }
+
+  setTyping(isTyping: boolean): void {
+    this.messageList?.setTyping(isTyping);
+  }
+
+  setConnectionState(state: ConnectionState, reconnectAttempt?: number): void {
+    this.connectionStatus?.setState(state, reconnectAttempt);
+    this.inputArea?.setDisabled(state !== 'connected');
+  }
+
+  focusInput(): void {
+    this.inputArea?.focus();
+  }
+
+  destroy(): void {
+    this.messageList?.destroy();
+    this.inputArea?.destroy();
+    this.connectionStatus?.destroy();
+    this.quickReplies?.destroy();
+    super.destroy();
+  }
+}

package/src/components/ConnectionStatus.ts

@@ -0,0 +1,50 @@
+import { BaseComponent } from './BaseComponent';
+import type { ConnectionState } from '../types';
+import { t } from '../i18n';
+
+export interface ConnectionStatusOptions {
+  state: ConnectionState;
+  reconnectAttempt?: number;
+}
+
+const STATUS_KEYS: Record<ConnectionState, Parameters<typeof t>[0]> = {
+  connecting: 'status.connecting',
+  connected: 'status.connected',
+  disconnected: 'status.disconnected',
+  reconnecting: 'status.reconnecting',
+  failed: 'status.failed',
+};
+
+export class ConnectionStatus extends BaseComponent<ConnectionStatusOptions> {
+  protected render(): HTMLElement {
+    const { state, reconnectAttempt } = this.options;
+
+    const container = document.createElement('div');
+    container.className = `jd-connection-status jd-connection-status--${state}`;
+
+    const dot = document.createElement('span');
+    dot.className = 'jd-connection-status__dot';
+    container.appendChild(dot);
+
+    const text = document.createElement('span');
+    text.className = 'jd-connection-status__text';
+
+    let statusText = t(STATUS_KEYS[state]);
+    if (state === 'reconnecting' && reconnectAttempt) {
+      statusText = `${t('status.reconnecting').replace('...', '')} (${reconnectAttempt}/5)...`;
+    }
+    text.textContent = statusText;
+    container.appendChild(text);
+
+    // Don't show if connected (hide the indicator)
+    if (state === 'connected') {
+      container.style.display = 'none';
+    }
+
+    return container;
+  }
+
+  setState(state: ConnectionState, reconnectAttempt?: number): void {
+    this.update({ state, reconnectAttempt });
+  }
+}

package/src/components/InputArea.ts

@@ -0,0 +1,164 @@
+import { BaseComponent } from './BaseComponent';
+import { createIcon } from './icons';
+import { t } from '../i18n';
+
+export interface InputAreaOptions {
+  placeholder?: string;
+  maxLength?: number;
+  disabled?: boolean;
+  onSend: (message: string) => void;
+  onTypingStart?: () => void;
+  onTypingStop?: () => void;
+}
+
+export class InputArea extends BaseComponent<InputAreaOptions> {
+  private textarea!: HTMLTextAreaElement;
+  private sendButton!: HTMLButtonElement;
+  private isTyping = false;
+  private typingTimeout: ReturnType<typeof setTimeout> | null = null;
+
+  protected render(): HTMLElement {
+    const { placeholder, maxLength, disabled } = this.options;
+
+    const container = document.createElement('div');
+    container.className = 'jd-input-area';
+
+    // Input wrapper
+    const wrapper = document.createElement('div');
+    wrapper.className = 'jd-input-wrapper';
+
+    // Textarea
+    this.textarea = document.createElement('textarea');
+    this.textarea.className = 'jd-input';
+    this.textarea.placeholder = placeholder || t('input.placeholder');
+    this.textarea.rows = 1;
+    this.textarea.disabled = disabled || false;
+    if (maxLength) {
+      this.textarea.maxLength = maxLength;
+    }
+    this.textarea.setAttribute('aria-label', t('input.ariaLabel'));
+
+    // Event handlers
+    this.textarea.addEventListener('input', this.handleInput.bind(this));
+    this.textarea.addEventListener('keydown', this.handleKeyDown.bind(this));
+
+    wrapper.appendChild(this.textarea);
+    container.appendChild(wrapper);
+
+    // Send button
+    this.sendButton = document.createElement('button');
+    this.sendButton.className = 'jd-send-btn';
+    this.sendButton.type = 'button';
+    this.sendButton.disabled = true;
+    this.sendButton.setAttribute('aria-label', t('input.send'));
+    this.sendButton.appendChild(createIcon('send'));
+    this.sendButton.addEventListener('click', this.handleSend.bind(this));
+
+    container.appendChild(this.sendButton);
+
+    return container;
+  }
+
+  private handleInput(): void {
+    if (!this.textarea || !this.sendButton) return;
+
+    const value = this.textarea.value.trim();
+    this.sendButton.disabled = value.length === 0;
+
+    // Auto-resize textarea
+    this.textarea.style.height = 'auto';
+    this.textarea.style.height = `${Math.min(this.textarea.scrollHeight, 120)}px`;
+
+    // Handle typing indicators
+    if (value.length > 0 && !this.isTyping) {
+      this.isTyping = true;
+      this.options.onTypingStart?.();
+    }
+
+    // Reset typing timeout
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+    }
+
+    if (value.length > 0) {
+      this.typingTimeout = setTimeout(() => {
+        if (this.isTyping) {
+          this.isTyping = false;
+          this.options.onTypingStop?.();
+        }
+      }, 1000);
+    } else if (this.isTyping) {
+      this.isTyping = false;
+      this.options.onTypingStop?.();
+    }
+  }
+
+  private handleKeyDown(e: KeyboardEvent): void {
+    // Send on Enter (without Shift)
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      this.handleSend();
+    }
+  }
+
+  private handleSend(): void {
+    if (!this.textarea) return;
+
+    const value = this.textarea.value.trim();
+    if (value.length === 0) return;
+
+    // Stop typing indicator
+    if (this.isTyping) {
+      this.isTyping = false;
+      this.options.onTypingStop?.();
+    }
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+      this.typingTimeout = null;
+    }
+
+    // Clear input
+    this.textarea.value = '';
+    this.textarea.style.height = 'auto';
+    if (this.sendButton) {
+      this.sendButton.disabled = true;
+    }
+
+    // Send message
+    this.options.onSend(value);
+  }
+
+  focus(): void {
+    this.textarea?.focus();
+  }
+
+  clear(): void {
+    if (this.textarea) {
+      this.textarea.value = '';
+      this.textarea.style.height = 'auto';
+    }
+    if (this.sendButton) {
+      this.sendButton.disabled = true;
+    }
+  }
+
+  setDisabled(disabled: boolean): void {
+    if (this.textarea) {
+      this.textarea.disabled = disabled;
+    }
+    if (this.sendButton) {
+      this.sendButton.disabled = disabled || !this.textarea?.value.trim();
+    }
+  }
+
+  getValue(): string {
+    return this.textarea?.value.trim() || '';
+  }
+
+  destroy(): void {
+    if (this.typingTimeout) {
+      clearTimeout(this.typingTimeout);
+    }
+    super.destroy();
+  }
+}

package/src/components/Launcher.ts

@@ -0,0 +1,121 @@
+import { BaseComponent } from './BaseComponent';
+import { createIcon } from './icons';
+import { t } from '../i18n';
+import type { LauncherConfig, LauncherPosition, LauncherSize, LauncherShape } from '../types';
+
+export interface LauncherOptions {
+  config: LauncherConfig;
+  isOpen: boolean;
+  unreadCount: number;
+  onClick: () => void;
+}
+
+export class Launcher extends BaseComponent<LauncherOptions> {
+  protected render(): HTMLElement {
+    const {
+      config,
+      isOpen,
+      unreadCount,
+      onClick,
+    } = this.options;
+
+    const position = config.position || 'bottom-right';
+    const size = config.size || 'medium';
+    const shape = config.shape || 'circle';
+
+    const button = document.createElement('button');
+    button.className = this.getClassName(position, size, shape, isOpen);
+    button.setAttribute('aria-label', isOpen ? t('chat.closeChat') : t('chat.openChat'));
+    button.setAttribute('type', 'button');
+
+    // Apply offset styles
+    if (config.offsetX !== undefined) {
+      const isRight = position.includes('right');
+      button.style[isRight ? 'right' : 'left'] = `${config.offsetX}px`;
+    }
+    if (config.offsetY !== undefined) {
+      button.style.bottom = `${config.offsetY}px`;
+    }
+
+    // Icon
+    const iconWrapper = document.createElement('span');
+    iconWrapper.className = 'jd-launcher__icon';
+
+    if (config.icon?.type === 'custom' && config.icon.url) {
+      const img = document.createElement('img');
+      img.className = 'jd-launcher__img';
+      img.src = config.icon.url;
+      img.alt = '';
+      iconWrapper.appendChild(img);
+      button.appendChild(iconWrapper);
+    } else if (config.icon?.type === 'text' && config.icon.text) {
+      const textSpan = document.createElement('span');
+      textSpan.className = 'jd-launcher__text';
+      textSpan.textContent = config.icon.text;
+      button.appendChild(textSpan);
+    } else {
+      // Default icon - toggle between chat and close
+      const icon = isOpen ? createIcon('close') : createIcon('chat');
+      iconWrapper.appendChild(icon);
+      button.appendChild(iconWrapper);
+    }
+
+    // Badge for unread count
+    if (unreadCount > 0 && !isOpen) {
+      const badge = document.createElement('span');
+      badge.className = 'jd-launcher__badge';
+      badge.textContent = unreadCount > 99 ? '99+' : String(unreadCount);
+      badge.setAttribute('aria-label', `${unreadCount} unread messages`);
+      button.appendChild(badge);
+    }
+
+    // Tooltip
+    if (config.tooltip?.show && config.tooltip.text && !isOpen) {
+      const tooltip = document.createElement('span');
+      tooltip.className = 'jd-launcher__tooltip';
+      tooltip.textContent = config.tooltip.text;
+      button.appendChild(tooltip);
+    }
+
+    // Click handler
+    button.addEventListener('click', onClick);
+
+    return button;
+  }
+
+  private getClassName(
+    position: LauncherPosition,
+    size: LauncherSize,
+    shape: LauncherShape,
+    isOpen: boolean
+  ): string {
+    const classes = [
+      'jd-launcher',
+      `jd-launcher--${position}`,
+      `jd-launcher--${size}`,
+      `jd-launcher--${shape}`,
+    ];
+
+    if (isOpen) {
+      classes.push('jd-launcher--open');
+    }
+
+    return classes.join(' ');
+  }
+
+  show(): void {
+    this.element.classList.remove('jd-launcher--hidden');
+  }
+
+  hide(): void {
+    this.element.classList.add('jd-launcher--hidden');
+  }
+
+  setOpen(isOpen: boolean): void {
+    this.update({ ...this.options, isOpen });
+  }
+
+  setUnreadCount(count: number): void {
+    this.update({ ...this.options, unreadCount: count });
+  }
+}