Fix: add option to put agent conversation inside the panel

packages/ui/src/core/components/SidePanel.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Minus, X } from 'lucide-react';
 import { Button } from './shadcn/button';
@@ -7,14 +7,15 @@ interface SidePanelProps {
     isOpen: boolean;
     onClose: () => void;
     children: React.ReactNode;
-    title?: string;
+    title?: React.ReactNode;
     panelWidth?: number;
     backdrop?: boolean;
     side?: 'left' | 'right';
     resizable?: boolean;
     className?: string;
+    contentClassName?: string;
 }
-export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className }: SidePanelProps) {
+export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768, backdrop = false, side = 'right', resizable = true, className, contentClassName }: SidePanelProps) {
     const [_panelWidth, setPanelWidth] = useState(panelWidth);
 
     const handleDragStart = (e: React.MouseEvent) => {
@@ -101,7 +102,7 @@ export function SidePanel({ isOpen, title, onClose, children, panelWidth = 768,
                                             )}
 
                                             {/* Scrollable content */}
-                                            <div className="flex-1 overflow-y-auto px-2 sm:px-4 py-4">
+                                            <div className={contentClassName ?? "flex-1 overflow-y-auto px-2 sm:px-4 py-4"}>
                                                 {children}
                                             </div>
                                         </div>

packages/ui/src/features/agent/chat/AgentRightPanel.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { Badge, Button, useToast, Tabs, TabsBar, TabsPanel, type Tab as TabDefinition } from '@vertesia/ui/core';
 import {
     CheckCircleIcon,
@@ -216,11 +216,13 @@ function WorkstreamsTab({ workstreams }: WorkstreamsTabProps) {
 // Right panel tabs
 // ---------------------------------------------------------------------------
 
-type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload';
+type RightPanelTab = 'plan' | 'workstreams' | 'documents' | 'uploads' | 'artifacts' | 'payload' | 'conversation';
 
 export interface AgentRightPanelProps {
     /** Optional payload content to show as a "Payload" tab */
     payloadContent?: React.ReactNode;
+    /** Optional conversation content to show as a "Conversation" tab */
+    conversationContent?: React.ReactNode;
     // Plan
     plan?: Plan;
     workstreamStatus?: Map<string, 'pending' | 'in_progress' | 'completed' | 'skipped'>;
@@ -288,20 +290,16 @@ function AgentRightPanelComponent({
     // Payload
     payloadContent,
 
+    // Conversation
+    conversationContent,
+
     // Panel
     onClose,
     defaultTab,
 }: AgentRightPanelProps) {
     const [activeTab, setActiveTab] = useState<RightPanelTab>(defaultTab || 'plan');
 
-    // Auto-switch to relevant tab when content appears
-    useEffect(() => {
-        if (defaultTab) {
-            setActiveTab(defaultTab);
-        }
-    }, [defaultTab]);
-
-    // Determine which tabs have content (for badges/indicators)
+// Determine which tabs have content (for badges/indicators)
     const hasWorkstreams = !hideWorkstreams && activeWorkstreams.length > 0;
     const hasDocuments = openDocuments.length > 0;
     const hasUploads = processingFiles ? processingFiles.size > 0 : false;
@@ -311,7 +309,15 @@ function AgentRightPanelComponent({
         setActiveTab('plan');
     }, []);
 
+    const conversationTab: TabDefinition = {
+        name: 'conversation',
+        label: 'Conversation',
+        content: conversationContent ? <div className="flex flex-col h-full min-h-0">{conversationContent}</div> : null,
+        is_allowed: !!conversationContent,
+    };
+
     const tabs: TabDefinition[] = [
+        ...(conversationContent ? [conversationTab] : []),
         {
             name: 'plan',
             label: hasPlan
@@ -398,11 +404,13 @@ function AgentRightPanelComponent({
         >
             <div className="flex items-center border-b shrink-0 px-1">
                 <div className="flex-1 overflow-x-auto">
-                    <TabsBar className="border-b-0 mb-0" />
+                    <TabsBar className="border-b-0 mb-0 min-w-max" />
                 </div>
-                <Button variant="ghost" size="sm" className="shrink-0 ml-1" onClick={onClose}>
-                    <XIcon className="size-4" />
-                </Button>
+                {!conversationContent && (
+                    <Button variant="ghost" size="sm" className="shrink-0 ml-1" onClick={onClose}>
+                        <XIcon className="size-4" />
+                    </Button>
+                )}
             </div>
             <TabsPanel className="pt-0" />
         </Tabs>