@jidou-ai/chat-widget 1.0.0

package/src/styles/messages.ts

@@ -0,0 +1,329 @@
+/**
+ * Message list and input area styles
+ */
+
+export const MESSAGE_STYLES = `
+/* Message List Container */
+.jd-message-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* Message */
+.jd-message {
+  display: flex;
+  flex-direction: column;
+  max-width: 85%;
+  animation: jd-message-in 0.3s ease;
+}
+
+@keyframes jd-message-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.jd-message--user {
+  align-self: flex-end;
+}
+
+.jd-message--assistant {
+  align-self: flex-start;
+}
+
+/* Message Bubble */
+.jd-message__bubble {
+  padding: 12px 16px;
+  border-radius: var(--jd-radius);
+  font-family: var(--jd-font);
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+}
+
+.jd-message--user .jd-message__bubble {
+  background: var(--jd-user-bubble);
+  color: var(--jd-user-bubble-text);
+  border-bottom-right-radius: 4px;
+}
+
+.jd-message--assistant .jd-message__bubble {
+  background: var(--jd-bot-bubble);
+  color: var(--jd-text);
+  border-bottom-left-radius: 4px;
+}
+
+/* Message Time */
+.jd-message__time {
+  font-family: var(--jd-font);
+  font-size: 11px;
+  color: var(--jd-text-secondary);
+  margin-top: 4px;
+  padding: 0 4px;
+}
+
+.jd-message--user .jd-message__time {
+  text-align: right;
+}
+
+/* Message Status */
+.jd-message__status {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: var(--jd-text-secondary);
+  margin-top: 4px;
+  padding: 0 4px;
+}
+
+.jd-message--user .jd-message__status {
+  justify-content: flex-end;
+}
+
+.jd-message__status svg {
+  width: 12px;
+  height: 12px;
+}
+
+.jd-message__status--sending {
+  color: var(--jd-text-secondary);
+}
+
+.jd-message__status--error {
+  color: #EF4444;
+}
+
+/* Typing Indicator */
+.jd-typing-indicator {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 12px 16px;
+  background: var(--jd-bot-bubble);
+  border-radius: var(--jd-radius);
+  border-bottom-left-radius: 4px;
+  width: fit-content;
+  animation: jd-message-in 0.3s ease;
+}
+
+.jd-typing-indicator__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: var(--jd-radius-full);
+  background: var(--jd-text-secondary);
+  animation: jd-typing-bounce 1.4s infinite ease-in-out;
+}
+
+.jd-typing-indicator__dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.jd-typing-indicator__dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes jd-typing-bounce {
+  0%, 60%, 100% {
+    transform: translateY(0);
+    opacity: 0.4;
+  }
+  30% {
+    transform: translateY(-4px);
+    opacity: 1;
+  }
+}
+
+/* Welcome Screen */
+.jd-welcome {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  text-align: center;
+}
+
+.jd-welcome__icon {
+  width: 64px;
+  height: 64px;
+  border-radius: var(--jd-radius-full);
+  background: var(--jd-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 16px;
+}
+
+.jd-welcome__icon svg {
+  width: 32px;
+  height: 32px;
+  color: var(--jd-primary);
+}
+
+.jd-welcome__title {
+  font-family: var(--jd-font);
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--jd-text);
+  margin: 0 0 8px 0;
+}
+
+.jd-welcome__subtitle {
+  font-family: var(--jd-font);
+  font-size: 14px;
+  color: var(--jd-text-secondary);
+  margin: 0 0 24px 0;
+}
+
+/* Quick Replies */
+.jd-quick-replies {
+  display: flex;
+  gap: 6px;
+  padding: 8px 12px;
+  flex-shrink: 0;
+  border-top: 1px solid var(--jd-border);
+  background: var(--jd-surface);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.jd-quick-replies::-webkit-scrollbar {
+  display: none;
+}
+
+.jd-quick-reply {
+  padding: 6px 12px;
+  border: 1px solid var(--jd-border);
+  border-radius: var(--jd-radius-full);
+  background: var(--jd-background);
+  color: var(--jd-text);
+  font-family: var(--jd-font);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all var(--jd-transition);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.jd-quick-reply:hover {
+  border-color: var(--jd-primary);
+  color: var(--jd-primary);
+  background: var(--jd-surface);
+}
+
+.jd-quick-reply:focus {
+  outline: 2px solid var(--jd-primary);
+  outline-offset: 2px;
+}
+
+/* Input Area */
+.jd-input-area {
+  display: flex;
+  align-items: flex-end;
+  gap: 8px;
+  padding: 12px 16px;
+  border-top: 1px solid var(--jd-border);
+  background: var(--jd-background);
+}
+
+.jd-input-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: flex-end;
+  background: var(--jd-surface);
+  border: 1px solid var(--jd-border);
+  border-radius: var(--jd-radius);
+  padding: 8px 12px;
+  transition: border-color var(--jd-transition);
+}
+
+.jd-input-wrapper:focus-within {
+  border-color: var(--jd-primary);
+}
+
+.jd-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--jd-font);
+  font-size: 14px;
+  color: var(--jd-text);
+  resize: none;
+  max-height: 120px;
+  line-height: 1.5;
+}
+
+.jd-input:focus {
+  outline: none;
+}
+
+.jd-input::placeholder {
+  color: var(--jd-text-secondary);
+}
+
+.jd-send-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  border-radius: var(--jd-radius-full);
+  background: var(--jd-primary);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all var(--jd-transition);
+  flex-shrink: 0;
+}
+
+.jd-send-btn:hover:not(:disabled) {
+  background: var(--jd-primary-hover);
+}
+
+.jd-send-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.jd-send-btn:focus {
+  outline: 2px solid var(--jd-primary);
+  outline-offset: 2px;
+}
+
+.jd-send-btn svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Empty State */
+.jd-empty-state {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+  text-align: center;
+  color: var(--jd-text-secondary);
+}
+
+.jd-empty-state__icon {
+  width: 48px;
+  height: 48px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+`;

package/src/types/index.ts

@@ -0,0 +1,345 @@
+// ============================================
+// Display Mode Types
+// ============================================
+
+export type DisplayMode = 'floating' | 'fullscreen' | 'embedded';
+
+export type Theme = 'light' | 'dark' | 'auto';
+
+export type Language = 'zh-TW' | 'zh-CN' | 'en' | 'ja' | 'auto';
+
+export type LauncherPosition = 'bottom-right' | 'bottom-left';
+
+export type LauncherSize = 'small' | 'medium' | 'large';
+
+export type LauncherShape = 'circle' | 'rounded' | 'square';
+
+// ============================================
+// Connection Types
+// ============================================
+
+export type ConnectionState =
+  | 'connecting'
+  | 'connected'
+  | 'disconnected'
+  | 'reconnecting'
+  | 'failed';
+
+// ============================================
+// Message Types
+// ============================================
+
+export interface Message {
+  id: string;
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp: number;
+  status?: 'sending' | 'sent' | 'error';
+}
+
+export interface QuickReply {
+  text: string;
+  value?: string;
+  icon?: string;
+}
+
+// ============================================
+// Widget Configuration
+// ============================================
+
+export interface WidgetColors {
+  primary?: string;
+  background?: string;
+  text?: string;
+  botBubble?: string;
+  userBubble?: string;
+  headerBackground?: string | { type: 'gradient'; from: string; to: string };
+}
+
+export interface LauncherConfig {
+  show?: boolean;
+  position?: LauncherPosition;
+  offsetX?: number;
+  offsetY?: number;
+  icon?: {
+    type?: 'default' | 'custom' | 'text';
+    url?: string;
+    text?: string;
+  };
+  size?: LauncherSize;
+  shape?: LauncherShape;
+  animation?: {
+    entrance?: string;
+    hover?: string;
+    notification?: string;
+  };
+  badge?: {
+    show?: boolean;
+    color?: string;
+  };
+  tooltip?: {
+    show?: boolean;
+    text?: string;
+  };
+}
+
+export interface ChatWindowConfig {
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  header?: {
+    show?: boolean;
+    logo?: {
+      show?: boolean;
+      url?: string;
+      size?: number;
+    };
+    title?: string;
+    subtitle?: string;
+    statusIndicator?: {
+      show?: boolean;
+    };
+  };
+  footer?: {
+    input?: {
+      placeholder?: string;
+      maxLength?: number;
+    };
+    branding?: {
+      show?: boolean;
+      text?: string;
+    };
+  };
+  welcomeScreen?: {
+    show?: boolean;
+    quickReplies?: {
+      items?: QuickReply[];
+    };
+  };
+}
+
+export interface FullscreenConfig {
+  background?: {
+    type?: 'solid' | 'gradient' | 'image';
+    color?: string;
+    gradient?: {
+      from: string;
+      to: string;
+      direction?: string;
+    };
+    image?: {
+      url: string;
+      size?: string;
+      position?: string;
+      overlay?: string;
+    };
+  };
+  layout?: {
+    maxWidth?: number | string;
+    position?: 'center' | 'left' | 'right';
+    padding?: {
+      top?: number;
+      bottom?: number;
+      left?: number;
+      right?: number;
+    };
+  };
+  header?: {
+    show?: boolean;
+    height?: number;
+    sticky?: boolean;
+    logo?: {
+      show?: boolean;
+      url?: string;
+      maxHeight?: number;
+    };
+    title?: string;
+    backButton?: {
+      show?: boolean;
+      text?: string;
+      url?: string;
+    };
+  };
+  footer?: {
+    show?: boolean;
+    branding?: {
+      show?: boolean;
+      text?: string;
+    };
+    links?: Array<{
+      text: string;
+      url: string;
+    }>;
+  };
+  sidebar?: {
+    show?: boolean;
+    position?: 'left' | 'right';
+    width?: number;
+    content?: {
+      type?: 'history' | 'faq' | 'custom';
+      customHtml?: string;
+    };
+  };
+}
+
+export interface BehaviorConfig {
+  autoOpen?: {
+    enabled?: boolean;
+    delay?: number;
+    trigger?: string;
+    once?: boolean;
+  };
+  proactiveMessage?: {
+    enabled?: boolean;
+    delay?: number;
+    message?: string;
+  };
+  sounds?: {
+    enabled?: boolean;
+    newMessage?: boolean;
+    volume?: number;
+  };
+  persistence?: {
+    enabled?: boolean;
+    duration?: number;
+  };
+  rating?: {
+    enabled?: boolean;
+    style?: 'emoji' | 'stars' | 'thumbs';
+  };
+  offline?: {
+    mode?: 'hide' | 'form' | 'message';
+  };
+}
+
+export interface EventHooks {
+  onLoad?: () => void;
+  onReady?: () => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onDisplayModeChange?: (mode: DisplayMode) => void;
+  onMessageSent?: (message: string) => void;
+  onMessageReceived?: (message: string) => void;
+  onConversationStarted?: (sessionId: string) => void;
+  onConnectionStateChange?: (state: ConnectionState) => void;
+  onReconnect?: (attempt: number) => void;
+  onError?: (error: Error) => void;
+}
+
+export interface WidgetConfig {
+  // Required
+  clientId: string;
+
+  // Basic settings
+  language?: Language;
+  timezone?: string;
+
+  // Display mode
+  displayMode?: DisplayMode;
+  container?: string | HTMLElement;
+
+  // Appearance
+  theme?: Theme;
+  colors?: WidgetColors;
+  launcher?: LauncherConfig;
+  chatWindow?: ChatWindowConfig;
+  fullscreen?: FullscreenConfig;
+
+  // Behavior
+  behavior?: BehaviorConfig;
+
+  // Hooks
+  hooks?: EventHooks;
+
+  // Advanced
+  zIndex?: number;
+  customData?: Record<string, unknown>;
+
+  // WebSocket
+  wsUrl?: string;
+}
+
+// ============================================
+// WebSocket Protocol Types
+// ============================================
+
+export type ClientMessageType =
+  | 'session:init'
+  | 'message:send'
+  | 'typing:start'
+  | 'typing:stop'
+  | 'ping';
+
+export type ServerMessageType =
+  | 'connection:ack'
+  | 'session:ready'
+  | 'session:expired'
+  | 'message:receive'
+  | 'bot:typing'
+  | 'pong'
+  | 'error';
+
+export interface WSMessage<T = unknown> {
+  type: ClientMessageType | ServerMessageType;
+  payload?: T;
+  timestamp?: number;
+}
+
+export interface ConnectionAckPayload {
+  sessionId: string;
+  isResumed: boolean;
+}
+
+export interface MessagePayload {
+  id: string;
+  content: string;
+  role?: 'user' | 'assistant';
+  timestamp?: number;
+}
+
+export interface ErrorPayload {
+  code: string;
+  message: string;
+}
+
+// ============================================
+// State Types
+// ============================================
+
+export interface WidgetState {
+  isOpen: boolean;
+  displayMode: DisplayMode;
+  connectionState: ConnectionState;
+  messages: Message[];
+  isTyping: boolean;
+  unreadCount: number;
+  sessionId: string | null;
+}
+
+// ============================================
+// Chat History Types
+// ============================================
+
+export interface LocalChatHistory {
+  sessionId: string;
+  messages: Message[];
+  savedAt: number;
+}
+
+// ============================================
+// Public API Types
+// ============================================
+
+export interface JidouChatAPI {
+  open(): void;
+  close(): void;
+  toggle(): void;
+  setDisplayMode(mode: DisplayMode, options?: { container?: string | HTMLElement }): void;
+  getDisplayMode(): DisplayMode;
+  sendMessage(text: string): void;
+  on<K extends keyof EventHooks>(event: K, callback: NonNullable<EventHooks[K]>): void;
+  off<K extends keyof EventHooks>(event: K, callback: NonNullable<EventHooks[K]>): void;
+  isOpen(): boolean;
+  destroy(): void;
+  getState(): Readonly<WidgetState>;
+}