@hef2024/llmasaservice-ui 0.17.0 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hef2024/llmasaservice-ui",
-  "version": "0.17.0",
+  "version": "0.19.0",
   "description": "Prebuilt UI components for LLMAsAService.io",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AIAgentPanel.css

@@ -190,9 +190,11 @@
 .ai-agent-panel {
   display: flex;
   flex-direction: row;
+  flex-wrap: nowrap; /* Prevent sidebar from wrapping below */
   /* Fill parent height - works in flex containers */
   align-self: stretch;
   height: 100%;
+  min-height: 400px; /* Fallback min-height when parent height is undefined */
   max-height: 100%;
   background-color: var(--ai-sidebar-bg);
   border-left: 1px solid var(--ai-sidebar-border);
@@ -211,7 +213,7 @@
 
 /* Sidebar position - left (default) */
 .ai-agent-panel--sidebar-left {
-  flex-direction: row;
+  flex-direction: row !important;
 }
 
 .ai-agent-panel--sidebar-left .ai-agent-panel__sidebar {
@@ -1369,6 +1371,23 @@
   border: none;
 }
 
+/* --------------------------------------------------------
+   Chat Header (for collapse button when no sidebar)
+-------------------------------------------------------- */
+.ai-agent-panel__chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 8px;
+  background-color: var(--ai-header-bg);
+  border-bottom: 1px solid var(--ai-header-border);
+  flex-shrink: 0;
+}
+
+.ai-agent-panel__chat-header-spacer {
+  flex: 1;
+}
+
 /* --------------------------------------------------------
    Context Change Notification
 -------------------------------------------------------- */

package/src/AIAgentPanel.tsx

@@ -91,6 +91,7 @@ export interface AIAgentPanelProps {
 
   // UI Configuration
   theme?: 'light' | 'dark';
+  collapsible?: boolean;
   defaultCollapsed?: boolean;
   defaultWidth?: number;
   minWidth?: number;
@@ -540,6 +541,7 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   maxContextTokens = 8000,
   data = [],
   theme = 'light',
+  collapsible = true,
   defaultCollapsed = false,
   defaultWidth = 720,
   minWidth = 520,
@@ -567,8 +569,8 @@ const AIAgentPanel = React.forwardRef<AIAgentPanelHandle, AIAgentPanelProps>(({
   historyListLimit = 50,
   showConversationHistory = true,
 }, ref) => {
-  // Panel state
-  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+  // Panel state - only start collapsed if collapsible is true
+  const [isCollapsed, setIsCollapsed] = useState(collapsible && defaultCollapsed);
   const [isHistoryCollapsed, setIsHistoryCollapsed] = useState(() => {
     if (typeof window !== 'undefined') {
       const saved = localStorage.getItem('ai-agent-panel-history-collapsed');
@@ -1642,10 +1644,11 @@ console.log("apiKey", apiKey);
     }
   }, [onConversationChange]);
 
-  // Toggle collapse
+  // Toggle collapse - only if collapsible is enabled
   const toggleCollapse = useCallback(() => {
+    if (!collapsible) return;
     setIsCollapsed((prev) => !prev);
-  }, []);
+  }, [collapsible]);
 
   // Toggle history collapse
   const toggleHistoryCollapse = useCallback(() => {
@@ -1666,8 +1669,8 @@ console.log("apiKey", apiKey);
     !showConversationHistory ? 'ai-agent-panel--no-history' : '',
   ].filter(Boolean).join(' ');
 
-  // Collapsed view
-  if (isCollapsed) {
+  // Collapsed view - only render if collapsible is enabled
+  if (collapsible && isCollapsed) {
     return (
       <div className={panelClasses} ref={panelRef}>
         <div 
@@ -1942,9 +1945,11 @@ console.log("apiKey", apiKey);
                   <SidebarIcon />
                 </Button>
               </Tooltip>
-              <Button variant="ghost" size="icon" onClick={toggleCollapse}>
-                {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
-              </Button>
+              {collapsible && (
+                <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+                  {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+                </Button>
+              )}
             </div>
 
             {/* Conversation list */}
@@ -2060,6 +2065,18 @@ console.log("apiKey", apiKey);
 
       {/* Chat area */}
       <div className="ai-agent-panel__chat">
+        {/* Collapse button when no sidebar is shown */}
+        {!showConversationHistory && collapsible && (
+          <div className="ai-agent-panel__chat-header">
+            <div className="ai-agent-panel__chat-header-spacer" />
+            <Tooltip content="Collapse Panel" side={position === 'right' ? 'left' : 'right'}>
+              <Button variant="ghost" size="icon" onClick={toggleCollapse}>
+                {position === 'right' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+              </Button>
+            </Tooltip>
+          </div>
+        )}
+
         {/* Context change notification */}
         {showContextNotification && (
           <div className="ai-agent-panel__context-notification">