Merge pull request #358 from FlowiseAI/feat/add-clear-chat-functionality

Add functionality to clear chat externally

Author: mmattu-wd

README.md

@@ -82,16 +82,33 @@ To enable full screen, add `margin: 0` to <code>body</code> style. The default h
 
 `height` and `width` accept a **number** (pixels) or a **CSS string**:
 
-| Value | Behaviour |
-|---|---|
-| `height: 700` | Fixed 700px, automatically shrinks on smaller screens |
-| `height: '700px'` | Same as above via string |
-| `height: '80dvh'` | Responsive — 80% of viewport height on all screen sizes |
-| `height: 'min(700px, 80dvh)'` | Caps at 700px on large screens, shrinks proportionally on small screens |
-| `height: '100%'` | Relative to the `<flowise-fullchatbot>` host element — only works if the host has an explicit height set (e.g. via CSS). Use `'100dvh'` or omit `height` for full-viewport behaviour instead. |
+| Value                         | Behaviour                                                                                                                                                                                     |
+| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `height: 700`                 | Fixed 700px, automatically shrinks on smaller screens                                                                                                                                         |
+| `height: '700px'`             | Same as above via string                                                                                                                                                                      |
+| `height: '80dvh'`             | Responsive — 80% of viewport height on all screen sizes                                                                                                                                       |
+| `height: 'min(700px, 80dvh)'` | Caps at 700px on large screens, shrinks proportionally on small screens                                                                                                                       |
+| `height: '100%'`              | Relative to the `<flowise-fullchatbot>` host element — only works if the host has an explicit height set (e.g. via CSS). Use `'100dvh'` or omit `height` for full-viewport behaviour instead. |
 
 The same options apply to `width`.
 
+### Clear Chat
+
+```html
+<script type="module">
+  import Chatbot from 'https://cdn.jsdelivr.net/npm/flowise-embed/dist/web.js';
+  Chatbot.initFull({
+    chatflowid: '<chatflowid>',
+    apiHost: 'http://localhost:3000',
+    id: 'my-chatbot',
+  });
+</script>
+
+<!-- Call clearChat after the bot has mounted, e.g. from a button -->
+<button onclick="Chatbot.clearChat()">Clear All Chats</button>
+<button onclick="Chatbot.clearChat('my-chatbot')">Clear Specific Chat</button>
+```
+
 ## Configuration
 
 You can also customize chatbot with different configuration

dist/components/Bot.d.ts.map

@@ -20,6 +20,7 @@ declare const chatbot: {
         theme?: import(".").BubbleTheme | undefined;
     }) => void;
     destroy: () => void;
+    clearChat: (id?: string | undefined) => void;
 };
 export default chatbot;
 //# sourceMappingURL=web.d.ts.map

dist/web.d.ts

@@ -14,17 +14,20 @@ export declare const initFull: (props: BotProps & {
 }) => void;
 export declare const init: (props: BotProps) => void;
 export declare const destroy: () => void;
+export declare const clearChat: (id?: string) => void;
 type Chatbot = {
     initFull: typeof initFull;
     init: typeof init;
     destroy: typeof destroy;
+    clearChat: typeof clearChat;
 };
 export declare const parseChatbot: () => {
     initFull: (props: BotProps & {
         id?: string;
     }) => void;
     init: (props: BotProps) => void;
     destroy: () => void;
+    clearChat: (id?: string) => void;
 };
 export declare const injectChatbotInWindow: (bot: Chatbot) => void;
 export {};

dist/web.d.ts.map

@@ -594,6 +594,19 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
     chatContainer?.addEventListener('scroll', handleScroll, { passive: true });
     onCleanup(() => chatContainer?.removeEventListener('scroll', handleScroll));
 
+    const handleExternalClearChat = async (e: Event) => {
+      const targetId = (e as CustomEvent).detail?.id;
+      if (targetId) {
+        const root = chatContainer?.getRootNode();
+        const hostEl = root instanceof ShadowRoot ? root.host : chatContainer?.closest(`#${CSS.escape(targetId)}`);
+        if (!hostEl || hostEl.id !== targetId) return;
+      }
+      if (loading()) await handleAbort();
+      clearChat();
+    };
+    document.addEventListener('flowise-clear-chat', handleExternalClearChat);
+    onCleanup(() => document.removeEventListener('flowise-clear-chat', handleExternalClearChat));
+
     // Expose programmatic scroll guard to outer scope
     let guardTimeout: ReturnType<typeof setTimeout> | null = null;
     programmaticScrollGuard = (fn: () => void) => {
@@ -1365,18 +1378,15 @@ export const Bot = (botProps: BotProps & { class?: string }) => {
       setMessages(messages);
       setShowScrollButton(false);
     } catch (error: any) {
-      const errorData = error.response.data || `${error.response.status}: ${error.response.statusText}`;
-      console.error(`error: ${errorData}`);
+      console.error('clearChat failed:', error);
     }
   };
 
   onMount(() => {
     if (props.clearChatOnReload) {
       clearChat();
       window.addEventListener('beforeunload', clearChat);
-      return () => {
-        window.removeEventListener('beforeunload', clearChat);
-      };
+      onCleanup(() => window.removeEventListener('beforeunload', clearChat));
     }
   });
 

dist/web.js

@@ -47,10 +47,15 @@ export const destroy = () => {
   elementUsed?.remove();
 };
 
+export const clearChat = (id?: string) => {
+  document.dispatchEvent(new CustomEvent('flowise-clear-chat', id ? { detail: { id } } : undefined));
+};
+
 type Chatbot = {
   initFull: typeof initFull;
   init: typeof init;
   destroy: typeof destroy;
+  clearChat: typeof clearChat;
 };
 
 declare const window:
@@ -63,6 +68,7 @@ export const parseChatbot = () => ({
   initFull,
   init,
   destroy,
+  clearChat,
 });
 
 export const injectChatbotInWindow = (bot: Chatbot) => {