add header to bubble chat

README.md

@@ -170,6 +170,7 @@ You can also customize chatbot with different configuration
         clearChatOnReload: false, // If set to true, the chat will be cleared when the page reloads
         sourceDocsTitle: 'Sources:',
         renderHTML: true,
+        headerHtml: '<div style="padding: 10px; background: #f0f0f0;"><h3>My Custom Header</h3></div>', // Optional HTML rendered at the top of the chat window
         botMessage: {
           backgroundColor: '#f7f8ff',
           textColor: '#303235',

dist/components/Bot.d.ts

@@ -121,6 +121,8 @@ export type BotProps = {
     dateTimeToggle?: DateTimeToggleTheme;
     renderHTML?: boolean;
     closeBot?: () => void;
+    hasCustomHeader?: boolean;
+    dialogContainer?: HTMLElement;
 };
 export type LeadsConfig = {
     status: boolean;

dist/components/bubbles/BotBubble.d.ts

@@ -26,6 +26,8 @@ type Props = {
     isTTSPlaying?: Record<string, boolean>;
     handleTTSClick?: (messageId: string, messageText: string) => void;
     handleTTSStop?: (messageId: string) => void;
+    hasCustomHeader?: boolean;
+    dialogContainer?: HTMLElement;
 };
 export declare const BotBubble: (props: Props) => import("solid-js").JSX.Element;
 export {};

dist/components/treeview/NodeDetailsDialog.d.ts

@@ -12,6 +12,8 @@ type NodeDetailsDialogProps = {
     apiHost?: string;
     chatflowid?: string;
     chatId?: string;
+    dialogContainer?: HTMLElement;
+    hasCustomHeader?: boolean;
 };
 export declare const NodeDetailsDialog: (props: NodeDetailsDialogProps) => import("solid-js").JSX.Element;
 export {};

dist/components/treeview/WorkflowTreeView.d.ts

@@ -17,6 +17,8 @@ type WorkflowTreeViewProps = {
     apiHost?: string;
     chatflowid?: string;
     chatId?: string;
+    hasCustomHeader?: boolean;
+    dialogContainer?: HTMLElement;
 };
 export declare const WorkflowTreeView: (props: WorkflowTreeViewProps) => import("solid-js").JSX.Element;
 export {};

dist/features/bubble/types.d.ts

@@ -75,6 +75,7 @@ export type ChatWindowTheme = {
     clearChatOnReload?: boolean;
     dateTimeToggle?: DateTimeToggleTheme;
     renderHTML?: boolean;
+    headerHtml?: string;
 };
 export type ButtonTheme = {
     size?: 'small' | 'medium' | 'large' | number;