urasoft-live-support 1.1.14 → 1.1.15

package/dist/core/ChatWidget.d.ts

@@ -8,6 +8,8 @@ export declare class ChatWidget {
     private isEmojiPickerOpen;
     private scaleFactor;
     private resizeObserver;
+    private typingDebounceTimer;
+    private typingDisplayTimer;
     constructor(config?: ChatConfig);
     private init;
     private createContainer;
@@ -33,6 +35,9 @@ export declare class ChatWidget {
     close(): void;
     destroy(): Promise<void>;
     addChatMessage(message: string, sender: 'agent' | 'user', avatar?: string): void;
+    private showAgentTyping;
+    private clearAgentTyping;
+    private sendTypingIndicator;
     private escapeHtml;
     private formatTime;
     private handleFileSelect;

package/dist/core/ChatWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/core/ChatWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAgD,MAAM,UAAU,CAAC;AAKpF,qBAAa,UAAU;IACnB,OAAO,CAAC,MAAM,CAYZ;IACF,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAA8B;IACnD,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,cAAc,CAA+B;gBAEzC,MAAM,GAAE,UAAe;IAiDnC,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,gBAAgB;IAuGxB,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,oBAAoB;YAoCd,cAAc;YA0Ed,iBAAiB;YAgCjB,WAAW;YAyEX,kBAAkB;IAuEhC,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,MAAM;IAKP,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IAKP,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAW9B,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAYvF,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;YAIJ,gBAAgB;IA2D9B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,cAAc;YAQR,eAAe;YAwCf,iBAAiB;IAqB/B,OAAO,CAAC,kBAAkB,CAWzB;CACJ"}
+{"version":3,"file":"ChatWidget.d.ts","sourceRoot":"","sources":["../../src/core/ChatWidget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAkE,MAAM,UAAU,CAAC;AAKtG,qBAAa,UAAU;IACnB,OAAO,CAAC,MAAM,CAaZ;IACF,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,SAAS,CAA4B;IAC7C,OAAO,CAAC,aAAa,CAA8B;IACnD,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,iBAAiB,CAAkB;IAC3C,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,cAAc,CAA+B;IACrD,OAAO,CAAC,mBAAmB,CAA8C;IACzE,OAAO,CAAC,kBAAkB,CAA8C;gBAE5D,MAAM,GAAE,UAAe;IAmDnC,OAAO,CAAC,IAAI;IAUZ,OAAO,CAAC,eAAe;IAyBvB,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,iBAAiB;IAczB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,mBAAmB;IAoB3B,OAAO,CAAC,iBAAiB;IAqBzB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,MAAM;IAgBd,OAAO,CAAC,gBAAgB;IAgHxB,OAAO,CAAC,aAAa;IA6BrB,OAAO,CAAC,oBAAoB;YA2Cd,cAAc;YAoFd,iBAAiB;YAgCjB,WAAW;YAyEX,kBAAkB;IAuEhC,OAAO,CAAC,UAAU;IAgBlB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,MAAM;IAKP,IAAI,IAAI,IAAI;IAKZ,KAAK,IAAI,IAAI;IAKP,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAW9B,cAAc,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,GAAG,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI;IAYvF,OAAO,CAAC,eAAe;IAmCvB,OAAO,CAAC,gBAAgB;YAeV,mBAAmB;IAiDjC,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;YAIJ,gBAAgB;IA2D9B,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,iBAAiB;IAgCzB,OAAO,CAAC,cAAc;YAQR,eAAe;YAwCf,iBAAiB;IAqB/B,OAAO,CAAC,kBAAkB,CAWzB;CACJ"}

package/dist/index.d.ts

@@ -51,6 +51,12 @@ interface SignalRConfig {
     onRetry?: (retryCount: number, nextDelay: number, error?: Error) => void;
     onReconnectFailed?: () => void;
     onMessageReceived?: (message: any) => void;
+    onTypingReceived?: (data: {
+        sessionId: string;
+        senderType: string;
+        userId: string;
+    }) => void;
+    receiveTypingMethodName?: string;
     onBeforeSend?: (message: string) => string | Promise<string>;
     onAfterSend?: (message: string) => void;
     onError?: (error: Error) => void;
@@ -97,6 +103,7 @@ interface ChatConfig {
     customClasses?: CustomClasses;
     signalR?: SignalRConfig;
     http?: HttpConfig;
+    httpTyping?: HttpTypingConfig;
     onSendMessage?: (message: string, attachments?: FileAttachment[]) => void;
     onFileSelect?: (files: FileAttachment[]) => void;
     maxFileSize?: number;
@@ -104,12 +111,20 @@ interface ChatConfig {
     disableAttachments?: boolean;
     onBeforeDisconnect?: () => boolean | Promise<boolean>;
 }
+interface HttpTypingConfig {
+    sendEndpoint: string;
+    method?: 'POST' | 'PUT' | 'PATCH';
+    headers?: Record<string, string> | (() => Record<string, string> | Promise<Record<string, string>>);
+    bodyMapper?: (sessionId: string) => any;
+    timeout?: number;
+}
 interface ChatWidgetState {
     isOpen: boolean;
     messages: ChatMessage[];
     isConnected: boolean;
     isConnecting: boolean;
     selectedFiles: FileAttachment[];
+    isAgentTyping: boolean;
 }
 
 declare class ChatWidget {
@@ -121,6 +136,8 @@ declare class ChatWidget {
     private isEmojiPickerOpen;
     private scaleFactor;
     private resizeObserver;
+    private typingDebounceTimer;
+    private typingDisplayTimer;
     constructor(config?: ChatConfig);
     private init;
     private createContainer;
@@ -146,6 +163,9 @@ declare class ChatWidget {
     close(): void;
     destroy(): Promise<void>;
     addChatMessage(message: string, sender: 'agent' | 'user', avatar?: string): void;
+    private showAgentTyping;
+    private clearAgentTyping;
+    private sendTypingIndicator;
     private escapeHtml;
     private formatTime;
     private handleFileSelect;
@@ -180,4 +200,4 @@ declare class SignalRClient {
 }
 
 export { ChatWidget, SignalRClient };
-export type { ChatConfig, ChatMessage, ChatWidgetState, CustomClasses, FileAttachment, HttpConfig, SignalRConfig, SignalRReconnectOptions };
+export type { ChatConfig, ChatMessage, ChatWidgetState, CustomClasses, FileAttachment, HttpConfig, HttpTypingConfig, SignalRConfig, SignalRReconnectOptions };

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EACR,UAAU,EACV,aAAa,EACb,UAAU,EACV,aAAa,EACb,WAAW,EACX,cAAc,EACd,uBAAuB,EACvB,eAAe,EAClB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EACR,UAAU,EACV,aAAa,EACb,UAAU,EACV,gBAAgB,EAChB,aAAa,EACb,WAAW,EACX,cAAc,EACd,uBAAuB,EACvB,eAAe,EAClB,MAAM,SAAS,CAAC"}

package/dist/index.esm.js

@@ -3498,6 +3498,13 @@ class SignalRClient {
                 this.config.onMessageReceived(message);
             }
         });
+        // Typing indicator listener
+        const typingMethod = this.config.receiveTypingMethodName || 'receive-typing-indicator';
+        this.connection.on(typingMethod, (data) => {
+            if (this.config.onTypingReceived) {
+                this.config.onTypingReceived(data);
+            }
+        });
     }
     getTransportType() {
         const transport = this.config.transport || 'All';
@@ -3669,6 +3676,8 @@ class ChatWidget {
         this.isEmojiPickerOpen = false;
         this.scaleFactor = 1;
         this.resizeObserver = null;
+        this.typingDebounceTimer = null;
+        this.typingDisplayTimer = null;
         this.handleOutsideClick = (event) => {
             const pickerContainer = document.getElementById('chat-emoji-picker-container');
             const emojiButton = document.getElementById('chat-emoji-button');
@@ -3694,6 +3703,7 @@ class ChatWidget {
             onSendMessage: config.onSendMessage,
             signalR: config.signalR,
             http: config.http,
+            httpTyping: config.httpTyping,
             onFileSelect: config.onFileSelect,
             maxFileSize: config.maxFileSize,
             allowedFileTypes: config.allowedFileTypes,
@@ -3712,6 +3722,7 @@ class ChatWidget {
             isConnected: false,
             isConnecting: false,
             selectedFiles: [],
+            isAgentTyping: false,
         };
         this.init();
         // autoConnect true ise ve SignalR config varsa, otomatik bağlan
@@ -3903,6 +3914,15 @@ class ChatWidget {
         ` : `
           <div class="${this.mergeClasses('chat-messages', this.config.customClasses?.messagesContainer)}" id="chat-messages">
             ${this.state.messages.map((msg) => this.renderMessage(msg)).join('')}
+            ${this.state.isAgentTyping ? `
+              <div class="chat-message chat-message-agent">
+                <div class="chat-message-content">
+                  <div class="chat-typing-indicator" id="chat-typing-indicator">
+                    <span></span><span></span><span></span>
+                  </div>
+                </div>
+              </div>
+            ` : ''}
           </div>
 
           ${showDisconnectButton ? `
@@ -4019,6 +4039,12 @@ class ChatWidget {
                 this.sendMessage();
             }
         });
+        // Typing indicator - kullanıcı yazarken gönder
+        input?.addEventListener('input', () => {
+            if (input.value.trim()) {
+                this.sendTypingIndicator();
+            }
+        });
     }
     async connectSignalR() {
         if (!this.config.signalR || this.state.isConnected || this.state.isConnecting) {
@@ -4065,10 +4091,18 @@ class ChatWidget {
                     }
                 },
                 onMessageReceived: (message) => {
+                    // Mesaj geldiğinde typing indicator'ı temizle
+                    this.clearAgentTyping();
                     if (this.config.signalR?.onMessageReceived) {
                         this.config.signalR.onMessageReceived(message);
                     }
                 },
+                onTypingReceived: (data) => {
+                    this.showAgentTyping();
+                    if (this.config.signalR?.onTypingReceived) {
+                        this.config.signalR.onTypingReceived(data);
+                    }
+                },
             });
             await this.signalRClient.connect();
         }
@@ -4303,6 +4337,95 @@ class ChatWidget {
             avatar: avatar || this.config.agentAvatar,
         });
     }
+    showAgentTyping() {
+        // Mevcut timeout'u temizle
+        if (this.typingDisplayTimer) {
+            clearTimeout(this.typingDisplayTimer);
+        }
+        const wasTyping = this.state.isAgentTyping;
+        this.state.isAgentTyping = true;
+        // DOM'u güncelle (tam render yerine)
+        if (!wasTyping) {
+            const messagesContainer = document.getElementById('chat-messages');
+            if (messagesContainer) {
+                // Typing indicator ekle
+                const typingEl = document.createElement('div');
+                typingEl.className = 'chat-message chat-message-agent';
+                typingEl.id = 'chat-typing-message';
+                typingEl.innerHTML = `
+                    <div class="chat-message-content">
+                        <div class="chat-typing-indicator" id="chat-typing-indicator">
+                            <span></span><span></span><span></span>
+                        </div>
+                    </div>
+                `;
+                messagesContainer.appendChild(typingEl);
+                this.scrollToBottom();
+            }
+        }
+        // 3 saniye sonra typing'i kaldır
+        this.typingDisplayTimer = setTimeout(() => {
+            this.clearAgentTyping();
+        }, 3000);
+    }
+    clearAgentTyping() {
+        if (this.typingDisplayTimer) {
+            clearTimeout(this.typingDisplayTimer);
+            this.typingDisplayTimer = null;
+        }
+        this.state.isAgentTyping = false;
+        // DOM'dan typing indicator'ı kaldır
+        const typingMessage = document.getElementById('chat-typing-message');
+        if (typingMessage) {
+            typingMessage.remove();
+        }
+    }
+    async sendTypingIndicator() {
+        if (this.typingDebounceTimer)
+            return; // Zaten bekliyor
+        this.typingDebounceTimer = setTimeout(() => { this.typingDebounceTimer = null; }, 2000);
+        if (!this.config.httpTyping)
+            return;
+        const httpTyping = this.config.httpTyping;
+        const method = httpTyping.method || 'POST';
+        const timeout = httpTyping.timeout || 5000;
+        // Headers'ı resolve et
+        let headers = {
+            'Content-Type': 'application/json',
+        };
+        if (httpTyping.headers) {
+            if (typeof httpTyping.headers === 'function') {
+                headers = { ...headers, ...(await httpTyping.headers()) };
+            }
+            else {
+                headers = { ...headers, ...httpTyping.headers };
+            }
+        }
+        // Body
+        let body;
+        if (httpTyping.bodyMapper) {
+            body = httpTyping.bodyMapper('');
+        }
+        else {
+            body = {};
+        }
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        try {
+            await fetch(httpTyping.sendEndpoint, {
+                method,
+                headers,
+                body: JSON.stringify(body),
+                signal: controller.signal,
+            });
+            clearTimeout(timeoutId);
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            // Typing indicator hataları sessizce yutulur
+            console.debug('Typing indicator send failed:', error);
+        }
+    }
     escapeHtml(text) {
         const div = document.createElement('div');
         div.textContent = text;