orchid-ai 1.2.0 → 1.2.2

package/dist/cli/components/ChatPanel.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconName } from './Icon';
 import { CommandTheme, ChatMessage, ModelInfo, ChatTheme, ServerConfig } from '../types/types';
 interface ChatPanelProps {
     isOpen: boolean;
@@ -48,6 +49,9 @@ interface ChatPanelProps {
         query: string;
         context?: string;
     } | undefined>>;
+    headerIcon?: IconName | React.ReactElement;
+    headerTitle?: string;
+    headerSubtitle?: string;
 }
 /**
  * ChatPanel component
@@ -75,6 +79,9 @@ interface ChatPanelProps {
  * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
  * @param initialQuery - Optional initial query to send when modal opens
  * @param setInitialQuery - Optional function to set/clear the initial query
+ * @param headerIcon - Optional icon to display in header - can be IconName string or React component (default: 'command' bot icon)
+ * @param headerTitle - Optional header title text (default: 'AI Logistics & Customs Expert')
+ * @param headerSubtitle - Optional header subtitle text (default: 'Ready to assist you with your queries')
  */
 export declare function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme, // Legacy support
 chatTheme, // New theme system
@@ -82,7 +89,8 @@ themeMode, // Default to system preference
 showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
-serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
+headerTitle, headerSubtitle, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/cli/components/Icon.d.ts

@@ -28,7 +28,7 @@ import { Action } from '../types/types';
  * // Or any numeric value for custom pixel size
  */
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
-export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
+export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'command' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
 export interface IconProps {
     name: IconName;
     size?: IconSize;

package/dist/components/ChatPanel.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconName } from './Icon';
 import { CommandTheme, ChatMessage, ModelInfo, ChatTheme, ServerConfig } from '../types/types';
 interface ChatPanelProps {
     isOpen: boolean;
@@ -48,6 +49,9 @@ interface ChatPanelProps {
         query: string;
         context?: string;
     } | undefined>>;
+    headerIcon?: IconName | React.ReactElement;
+    headerTitle?: string;
+    headerSubtitle?: string;
 }
 /**
  * ChatPanel component
@@ -75,6 +79,9 @@ interface ChatPanelProps {
  * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
  * @param initialQuery - Optional initial query to send when modal opens
  * @param setInitialQuery - Optional function to set/clear the initial query
+ * @param headerIcon - Optional icon to display in header - can be IconName string or React component (default: 'command' bot icon)
+ * @param headerTitle - Optional header title text (default: 'AI Logistics & Customs Expert')
+ * @param headerSubtitle - Optional header subtitle text (default: 'Ready to assist you with your queries')
  */
 export declare function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme, // Legacy support
 chatTheme, // New theme system
@@ -82,7 +89,8 @@ themeMode, // Default to system preference
 showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
-serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
+headerTitle, headerSubtitle, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/components/Icon.d.ts

@@ -28,7 +28,7 @@ import { Action } from '../types/types';
  * // Or any numeric value for custom pixel size
  */
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
-export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
+export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'command' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
 export interface IconProps {
     name: IconName;
     size?: IconSize;

package/dist/index.esm.js

@@ -1104,6 +1104,7 @@ const iconComponents = {
     noImage: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), jsx("polyline", { points: "21,15 16,10 5,21" }), jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] })),
     microphone: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] })),
     send: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsx("polygon", { points: "22,2 15,22 11,13 2,9 22,2" })] })),
+    command: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsx("circle", { cx: "9", cy: "9", r: "1.5" }), jsx("circle", { cx: "15", cy: "9", r: "1.5" }), jsx("path", { d: "M9 14h6" }), jsx("path", { d: "M9 17h6" }), jsx("path", { d: "M12 6v2" })] })),
     // Action Icons
     plus: ({ size, className = '', color = 'currentColor' }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
     // AI Provider Icons
@@ -1216,6 +1217,8 @@ const getBasicSvgString = (name, size, color, className) => {
             return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
         case 'send':
             return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9 22,2"/></svg>`;
+        case 'command':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${classAttr}><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="9" cy="9" r="1.5"/><circle cx="15" cy="9" r="1.5"/><path d="M9 14h6"/><path d="M9 17h6"/><path d="M12 6v2"/></svg>`;
         case 'error':
             return `<svg width="${size}" height="${size}" fill="#EF4444" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`;
         case 'warning':
@@ -3027,6 +3030,9 @@ const getTextFromMessage = (msg) => {
  * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
  * @param initialQuery - Optional initial query to send when modal opens
  * @param setInitialQuery - Optional function to set/clear the initial query
+ * @param headerIcon - Optional icon to display in header - can be IconName string or React component (default: 'command' bot icon)
+ * @param headerTitle - Optional header title text (default: 'AI Logistics & Customs Expert')
+ * @param headerSubtitle - Optional header subtitle text (default: 'Ready to assist you with your queries')
  */
 function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme = defaultTheme, // Legacy support
 chatTheme, // New theme system
@@ -3034,7 +3040,8 @@ themeMode = 'system', // Default to system preference
 showHistory = false, // Default to hidden
 showProfileBubbles = false, // Default to hidden
 modalPosition = 'left', // Default to left position
-serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }) {
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon = 'command', // Default to bot icon
+headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', }) {
     const handleSuggestionClick = (s) => {
         if (setFormState && s.formState)
             setFormState(s.formState, s.actionType);
@@ -3228,7 +3235,7 @@ serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {},
                                 }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: [jsx("div", { className: `flex items-center justify-between px-6 py-4 border-b min-h-[72px] transition-all duration-500 delay-100 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`, style: {
                                             borderColor: finalTheme.colors.border.primary,
                                             backgroundColor: finalTheme.colors.background.primary,
-                                        }, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: jsx(Icon, { name: "ai", size: "sm", style: { color: finalTheme.colors.text.primary } }) }), jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: "AI Logistics & Customs Expert" }), jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: "Ready to assist you with your queries" })] })] }) }), jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: () => { }, newChat: () => { }, theme: finalTheme, isOpen: isOpen })), jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
+                                        }, children: jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: typeof headerIcon === 'string' ? (jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.text.primary } })) : (headerIcon || (jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.text.primary } }))) }), jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }) }), jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: () => { }, newChat: () => { }, theme: finalTheme, isOpen: isOpen })), jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
                                                         backgroundColor: finalTheme.colors.background.primary,
                                                     }, children: jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, 
                                                         // AI functionality props

package/dist/index.js

@@ -1106,6 +1106,7 @@ const iconComponents = {
     noImage: ({ size, className = '', color = 'currentColor' }) => (jsxRuntime.jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }), jsxRuntime.jsx("polyline", { points: "21,15 16,10 5,21" }), jsxRuntime.jsx("line", { x1: "3", y1: "3", x2: "21", y2: "21" })] })),
     microphone: ({ size, className = '', color = 'currentColor' }) => (jsxRuntime.jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsxRuntime.jsx("path", { d: "M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z" }), jsxRuntime.jsx("path", { d: "M19 10v2a7 7 0 0 1-14 0v-2" }), jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "23" }), jsxRuntime.jsx("line", { x1: "8", y1: "23", x2: "16", y2: "23" })] })),
     send: ({ size, className = '', color = 'currentColor' }) => (jsxRuntime.jsxs("svg", { width: size, height: size, fill: "none", stroke: color, strokeWidth: "2", viewBox: "0 0 24 24", className: className, children: [jsxRuntime.jsx("line", { x1: "22", y1: "2", x2: "11", y2: "13" }), jsxRuntime.jsx("polygon", { points: "22,2 15,22 11,13 2,9 22,2" })] })),
+    command: ({ size, className = '', color = 'currentColor' }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "1.5" }), jsxRuntime.jsx("circle", { cx: "15", cy: "9", r: "1.5" }), jsxRuntime.jsx("path", { d: "M9 14h6" }), jsxRuntime.jsx("path", { d: "M9 17h6" }), jsxRuntime.jsx("path", { d: "M12 6v2" })] })),
     // Action Icons
     plus: ({ size, className = '', color = 'currentColor' }) => (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [jsxRuntime.jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }), jsxRuntime.jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })] })),
     // AI Provider Icons
@@ -1218,6 +1219,8 @@ const getBasicSvgString = (name, size, color, className) => {
             return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
         case 'send':
             return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2"${classAttr}><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22,2 15,22 11,13 2,9 22,2"/></svg>`;
+        case 'command':
+            return `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="${color}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"${classAttr}><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="9" cy="9" r="1.5"/><circle cx="15" cy="9" r="1.5"/><path d="M9 14h6"/><path d="M9 17h6"/><path d="M12 6v2"/></svg>`;
         case 'error':
             return `<svg width="${size}" height="${size}" fill="#EF4444" viewBox="0 0 20 20"${classAttr}><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>`;
         case 'warning':
@@ -3029,6 +3032,9 @@ const getTextFromMessage = (msg) => {
  * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
  * @param initialQuery - Optional initial query to send when modal opens
  * @param setInitialQuery - Optional function to set/clear the initial query
+ * @param headerIcon - Optional icon to display in header - can be IconName string or React component (default: 'command' bot icon)
+ * @param headerTitle - Optional header title text (default: 'AI Logistics & Customs Expert')
+ * @param headerSubtitle - Optional header subtitle text (default: 'Ready to assist you with your queries')
  */
 function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme = defaultTheme, // Legacy support
 chatTheme, // New theme system
@@ -3036,7 +3042,8 @@ themeMode = 'system', // Default to system preference
 showHistory = false, // Default to hidden
 showProfileBubbles = false, // Default to hidden
 modalPosition = 'left', // Default to left position
-serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }) {
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {}, showFloatingButton = false, floatingButtonIcon, floatingButtonPosition = 'bottom-right', floatingButtonSize = 'md', floatingButtonClassName = '', chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon = 'command', // Default to bot icon
+headerTitle = 'AI Logistics & Customs Expert', headerSubtitle = 'Ready to assist you with your queries', }) {
     const handleSuggestionClick = (s) => {
         if (setFormState && s.formState)
             setFormState(s.formState, s.actionType);
@@ -3230,7 +3237,7 @@ serverConfig, models, defaultModel, showUsageStats, maxFileSize, features = {},
                                 }, ref: containerRef, onClick: (e) => e.stopPropagation(), children: [jsxRuntime.jsx("div", { className: `flex items-center justify-between px-6 py-4 border-b min-h-[72px] transition-all duration-500 delay-100 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'}`, style: {
                                             borderColor: finalTheme.colors.border.primary,
                                             backgroundColor: finalTheme.colors.background.primary,
-                                        }, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: jsxRuntime.jsx(Icon, { name: "ai", size: "sm", style: { color: finalTheme.colors.text.primary } }) }), jsxRuntime.jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsxRuntime.jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: "AI Logistics & Customs Expert" }), jsxRuntime.jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: "Ready to assist you with your queries" })] })] }) }), jsxRuntime.jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsxRuntime.jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: () => { }, newChat: () => { }, theme: finalTheme, isOpen: isOpen })), jsxRuntime.jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsxRuntime.jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
+                                        }, children: jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: `inline-flex items-center justify-center rounded-full w-8 h-8 transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100 rotate-0' : 'opacity-0 scale-75 rotate-12'}`, style: { backgroundColor: finalTheme.colors.primary[600] }, children: typeof headerIcon === 'string' ? (jsxRuntime.jsx(Icon, { name: headerIcon, size: "sm", style: { color: finalTheme.colors.text.primary } })) : (headerIcon || (jsxRuntime.jsx(Icon, { name: "command", size: "sm", style: { color: finalTheme.colors.text.primary } }))) }), jsxRuntime.jsxs("div", { className: `transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-2'}`, children: [jsxRuntime.jsx("div", { className: "font-bold text-lg leading-tight", style: { color: finalTheme.colors.text.primary }, children: headerTitle }), jsxRuntime.jsx("div", { className: "text-xs", style: { color: finalTheme.colors.text.tertiary }, children: headerSubtitle })] })] }) }), jsxRuntime.jsxs("div", { className: `flex flex-1 min-h-0 h-full transition-all duration-500 delay-200 ${isOpen ? 'opacity-100 scale-100' : 'opacity-0 scale-95'}`, children: [showHistory && (jsxRuntime.jsx(ChatHistorySidebar, { chats: chats || {}, currentChatId: currentChatId || 'default', switchChat: () => { }, newChat: () => { }, theme: finalTheme, isOpen: isOpen })), jsxRuntime.jsx("div", { className: "flex-1 flex flex-col min-h-0 h-full", children: jsxRuntime.jsx("div", { className: `flex-1 px-6 py-4 min-h-0 transition-all duration-500 delay-300 ${isOpen ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4'}`, style: {
                                                         backgroundColor: finalTheme.colors.background.primary,
                                                     }, children: jsxRuntime.jsx(Conversation, { onSuggestionClick: handleSuggestionClick, theme: finalTheme, showProfileBubbles: showProfileBubbles, autoScroll: true, showInput: true, 
                                                         // AI functionality props

package/dist/server/components/ChatPanel.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import { type IconName } from './Icon';
 import { CommandTheme, ChatMessage, ModelInfo, ChatTheme, ServerConfig } from '../types/types';
 interface ChatPanelProps {
     isOpen: boolean;
@@ -48,6 +49,9 @@ interface ChatPanelProps {
         query: string;
         context?: string;
     } | undefined>>;
+    headerIcon?: IconName | React.ReactElement;
+    headerTitle?: string;
+    headerSubtitle?: string;
 }
 /**
  * ChatPanel component
@@ -75,6 +79,9 @@ interface ChatPanelProps {
  * @param chatLevel - Optional chat level - 'full' or 'basic' or 'none'
  * @param initialQuery - Optional initial query to send when modal opens
  * @param setInitialQuery - Optional function to set/clear the initial query
+ * @param headerIcon - Optional icon to display in header - can be IconName string or React component (default: 'command' bot icon)
+ * @param headerTitle - Optional header title text (default: 'AI Logistics & Customs Expert')
+ * @param headerSubtitle - Optional header subtitle text (default: 'Ready to assist you with your queries')
  */
 export declare function ChatPanel({ isOpen, setIsOpen, onClose, onOpen, userId, formData, setFormState, onNavigate, theme, // Legacy support
 chatTheme, // New theme system
@@ -82,7 +89,8 @@ themeMode, // Default to system preference
 showHistory, // Default to hidden
 showProfileBubbles, // Default to hidden
 modalPosition, // Default to left position
-serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
+serverConfig, models, defaultModel, showUsageStats, maxFileSize, features, showFloatingButton, floatingButtonIcon, floatingButtonPosition, floatingButtonSize, floatingButtonClassName, chats, setChats, currentChatId, setCurrentChatId, chatLevel, initialQuery, setInitialQuery, headerIcon, // Default to bot icon
+headerTitle, headerSubtitle, }: ChatPanelProps): import("react/jsx-runtime").JSX.Element;
 /**
  * ChatInput component
  * @param query - The current query

package/dist/server/components/Icon.d.ts

@@ -28,7 +28,7 @@ import { Action } from '../types/types';
  * // Or any numeric value for custom pixel size
  */
 export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
-export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
+export type IconName = 'ai' | 'user' | 'system' | 'paperclip' | 'image' | 'noImage' | 'microphone' | 'send' | 'command' | 'plus' | 'pencil' | 'trash' | 'eye' | 'claude' | 'openai' | 'gemini' | 'grok' | 'error' | 'warning' | 'timeout' | 'auth-error' | 'pdf' | 'word' | 'excel' | 'csv' | 'text' | 'rtf' | 'file-generic';
 export interface IconProps {
     name: IconName;
     size?: IconSize;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orchid-ai",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "description": "AI-powered command processing and chat interface for React applications",
   "main": "dist/index.js",