SyslogSolution/ra-h-os
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(rah-light): remove chat pane, simplify to two-panel layout

Browse Source 
- Deleted src/components/panes/ChatPane.tsx
- Removed 'chat' from PaneType in types.ts
- Updated ThreePanelLayout.tsx to remove chat pane case and references
- Updated LeftToolbar.tsx to remove chat icon and type
- Default slot B is now null (closed) instead of chat
- Cmd+\ now opens node pane instead of chat

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
2026-01-29 15:27:53 +11:00
co-authored by Claude Opus 4.5
parent d9c0ba89fe
commit a398819e26
5 changed files with 30 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/LeftToolbar.tsx
+3 -6
View File
@@ -5,7 +5,6 @@ import {
Search,
Plus,
LayoutList,
MessageSquare,
Map,
Folder,
Workflow,
@@ -23,10 +22,9 @@ interface LeftToolbarProps {
slotBType: PaneType | null;
}
// Map pane types to their icons
// Map pane types to their icons (chat removed in rah-light)
const PANE_TYPE_ICONS: Record<string, typeof LayoutList> = {
views: LayoutList,
chat: MessageSquare,
map: Map,
dimensions: Folder,
workflows: Workflow,
@@ -34,14 +32,13 @@ const PANE_TYPE_ICONS: Record<string, typeof LayoutList> = {
const PANE_TYPE_LABELS: Record<string, string> = {
views: 'Feed',
chat: 'Chat',
map: 'Map',
dimensions: 'Dimensions',
workflows: 'Workflows',
};
// Pane types shown in the toolbar (excludes 'node' which is opened via Feed)
const TOOLBAR_PANE_TYPES: PaneType[] = ['views', 'chat', 'map', 'dimensions', 'workflows'];
// Pane types shown in the toolbar (excludes 'node' which is opened via Feed, chat removed in rah-light)
const TOOLBAR_PANE_TYPES: PaneType[] = ['views', 'map', 'dimensions', 'workflows'];
interface ToolbarButtonProps {
icon: typeof Search;
src/components/layout/ThreePanelLayout.tsx
+23 -56
View File
@@ -6,7 +6,7 @@ import SearchModal from '../nodes/SearchModal';
import { Node } from '@/types/database';
import { DatabaseEvent } from '@/services/events';
import { usePersistentState } from '@/hooks/usePersistentState';
import type { ChatMessage } from '@/components/agents/hooks/useSSEChat';
// ChatMessage import removed - chat disabled in rah-light
// Stub type for delegation (delegation system removed in rah-light)
type AgentDelegation = {
@@ -25,8 +25,8 @@ type AgentDelegation = {
import LeftToolbar from './LeftToolbar';
import SplitHandle from './SplitHandle';
// Pane components
import { NodePane, ChatPane, WorkflowsPane, DimensionsPane, MapPane, ViewsPane } from '../panes';
// Pane components (ChatPane removed in rah-light)
import { NodePane, WorkflowsPane, DimensionsPane, MapPane, ViewsPane } from '../panes';
import QuickAddInput from '../agents/QuickAddInput';
import type { PaneType, SlotState, PaneAction } from '../panes/types';
@@ -35,14 +35,14 @@ export default function ThreePanelLayout() {
const containerRef = useRef<HTMLDivElement>(null);
// Slot states - the core of the flexible pane system
// Default: Feed on left, Chat on right
const [slotA, setSlotA] = usePersistentState<SlotState | null>('ui.slotA.v3', {
// Default: Feed on left, closed on right (chat removed in rah-light)
const [slotA, setSlotA] = usePersistentState<SlotState | null>('ui.slotA.v4', {
type: 'views',
});
// SlotB can be null (closed) or a SlotState
// Default: Chat on the right
const [slotB, setSlotB] = usePersistentState<SlotState | null>('ui.slotB.v3', { type: 'chat' });
// Default: closed (chat removed in rah-light)
const [slotB, setSlotB] = usePersistentState<SlotState | null>('ui.slotB.v4', null);
// SlotB width as percentage (when open)
const [slotBWidth, setSlotBWidth] = usePersistentState<number>('ui.slotBWidth', 50);
@@ -75,17 +75,14 @@ export default function ThreePanelLayout() {
const [focusPanelRefresh, setFocusPanelRefresh] = useState(0);
const [folderViewRefresh, setFolderViewRefresh] = useState(0);
// Active dimension tracking (for chat context)
// Active dimension tracking
const [activeDimension, setActiveDimension] = usePersistentState<string | null>('ui.focus.activeDimension', null);
// Delegations state (deprecated - kept for component compatibility)
const [delegationsMap] = useState<Record<string, AgentDelegation>>({});
const delegations = useMemo(() => Object.values(delegationsMap), [delegationsMap]);
// Chat state (lifted to persist across pane type changes)
const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
// Source awareness - highlighted passage context for agent
// Source awareness - highlighted passage context
const [highlightedPassage, setHighlightedPassage] = useState<{
nodeId: number;
nodeTitle: string;
@@ -95,29 +92,13 @@ export default function ThreePanelLayout() {
// Ref to get current openTabs value in SSE handler
const openTabsRef = useRef<number[]>([]);
// Get open tabs from the slot that has nodes (for chat context)
// Get open tabs from the slot that has nodes
// Memoize to prevent infinite re-renders
const { openTabs, activeTab } = useMemo(() => {
const slotAHasNodes = slotA?.type === 'node';
const slotBHasNodes = slotB?.type === 'node';
// If chat is in Slot A, use Slot B's nodes
if (slotA?.type === 'chat' && slotBHasNodes) {
return {
openTabs: slotB.nodeTabs ?? [],
activeTab: slotB.activeNodeTab ?? null,
};
}
// If chat is in Slot B (default), use Slot A's nodes
if (slotB?.type === 'chat' && slotAHasNodes && slotA) {
return {
openTabs: slotA.nodeTabs ?? [],
activeTab: slotA.activeNodeTab ?? null,
};
}
// Fallback: use Slot A if it has nodes
// Use Slot A if it has nodes
if (slotAHasNodes && slotA) {
return {
openTabs: slotA.nodeTabs ?? [],
@@ -125,6 +106,14 @@ export default function ThreePanelLayout() {
};
}
// Fallback: use Slot B if it has nodes
if (slotBHasNodes && slotB) {
return {
openTabs: slotB.nodeTabs ?? [],
activeTab: slotB.activeNodeTab ?? null,
};
}
return { openTabs: [], activeTab: null };
}, [slotA, slotB]);
@@ -189,8 +178,8 @@ export default function ThreePanelLayout() {
if (slotB) {
setSlotB(null);
} else {
// Open with chat by default
setSlotB({ type: 'chat' });
// Open with node pane by default (chat removed in rah-light)
setSlotB({ type: 'node', nodeTabs: [], activeNodeTab: null });
}
}
// Cmd+N - open Add Stuff modal
@@ -749,7 +738,7 @@ export default function ThreePanelLayout() {
// Split handle callbacks
const handleOpenSecondPane = useCallback(() => {
setSlotB({ type: 'chat' }); // Default to chat when opening
setSlotB({ type: 'node', nodeTabs: [], activeNodeTab: null }); // Default to node pane (chat removed in rah-light)
setActivePane('B');
}, [setSlotB]);
@@ -816,29 +805,7 @@ export default function ThreePanelLayout() {
/>
);
case 'chat':
return (
<ChatPane
slot={slot}
isActive={isActive}
onPaneAction={slot === 'A' ? handleSlotAAction : handleSlotBAction}
onCollapse={onCollapse}
onSwapPanes={slotB ? handleSwapPanes : undefined}
openTabsData={openTabsData}
activeTabId={activeTab}
activeDimension={activeDimension}
onClearDimension={() => setActiveDimension(null)}
onNodeClick={(nodeId) => {
handleNodeSelect(nodeId, false);
setActivePane(slot);
}}
delegations={delegations}
chatMessages={chatMessages as unknown[]}
setChatMessages={setChatMessages as React.Dispatch<React.SetStateAction<unknown[]>>}
highlightedPassage={highlightedPassage}
onClearPassage={() => setHighlightedPassage(null)}
/>
);
// case 'chat' removed in rah-light
case 'workflows':
return (
src/components/panes/ChatPane.tsx
-183
View File
@@ -1,183 +0,0 @@
"use client";
import { useState, useEffect } from 'react';
import RAHChat from '@/components/agents/RAHChat';
import PaneHeader from './PaneHeader';
import { ChatPaneProps } from './types';
import type { ChatMessage } from '@/components/agents/hooks/useSSEChat';
export default function ChatPane({
slot,
isActive,
onPaneAction,
onCollapse,
onSwapPanes,
openTabsData,
activeTabId,
activeDimension,
onClearDimension,
onNodeClick,
delegations,
chatMessages: externalMessages,
setChatMessages: externalSetMessages,
highlightedPassage,
onClearPassage,
}: ChatPaneProps) {
const [rahMode, setRahMode] = useState<'easy' | 'hard'>('easy');
const [hasStarted, setHasStarted] = useState(false);
// Use lifted state if provided, otherwise fall back to local state
const [internalMessages, setInternalMessages] = useState<ChatMessage[]>([]);
const rahMessages = (externalMessages as ChatMessage[]) ?? internalMessages;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const setRahMessages = (externalSetMessages as any) ?? setInternalMessages;
// Load mode from localStorage
useEffect(() => {
if (typeof window === 'undefined') return;
const stored = window.localStorage.getItem('rah-mode');
if (stored === 'easy' || stored === 'hard') {
setRahMode(stored);
}
}, []);
// Persist mode to localStorage
useEffect(() => {
if (typeof window === 'undefined') return;
window.localStorage.setItem('rah-mode', rahMode);
}, [rahMode]);
// Listen for mode toggle events
useEffect(() => {
const handler = (event: Event) => {
const detail = (event as CustomEvent<{ mode: 'easy' | 'hard' }>).detail;
if (detail?.mode) {
setRahMode(detail.mode);
}
};
window.addEventListener('rah:mode-toggle', handler as EventListener);
return () => {
window.removeEventListener('rah:mode-toggle', handler as EventListener);
};
}, []);
// Auto-start if there are existing messages
useEffect(() => {
if (rahMessages.length > 0 && !hasStarted) {
setHasStarted(true);
}
}, [rahMessages.length, hasStarted]);
return (
<div style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
background: 'transparent',
overflow: 'hidden',
}}>
<PaneHeader slot={slot} onCollapse={onCollapse} onSwapPanes={onSwapPanes} />
<div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
{!hasStarted ? (
<div style={{
height: '100%',
display: 'flex',
flexDirection: 'column',
padding: '20px',
}}>
{/* Start Chat button */}
<div style={{
flex: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center'
}}>
<button
onClick={() => {
setHasStarted(true);
setRahMode('easy');
}}
style={{
display: 'flex',
alignItems: 'center',
gap: '14px',
padding: '0',
background: 'transparent',
border: 'none',
cursor: 'pointer'
}}
onMouseEnter={(e) => {
const text = e.currentTarget.querySelector('.start-text') as HTMLElement;
const icon = e.currentTarget.querySelector('.start-icon') as HTMLElement;
if (text) text.style.color = '#22c55e';
if (icon) {
icon.style.transform = 'translateY(-3px)';
icon.style.boxShadow = '0 8px 20px rgba(34, 197, 94, 0.3), 0 0 0 4px rgba(34, 197, 94, 0.1)';
}
}}
onMouseLeave={(e) => {
const text = e.currentTarget.querySelector('.start-text') as HTMLElement;
const icon = e.currentTarget.querySelector('.start-icon') as HTMLElement;
if (text) text.style.color = '#737373';
if (icon) {
icon.style.transform = 'translateY(0)';
icon.style.boxShadow = '0 0 0 0 rgba(34, 197, 94, 0)';
}
}}
>
<span
className="start-text"
style={{
color: '#737373',
fontSize: '11px',
fontWeight: 500,
letterSpacing: '0.15em',
textTransform: 'uppercase',
transition: 'color 0.2s ease'
}}
>
Start
</span>
<div
className="start-icon"
style={{
width: '44px',
height: '44px',
borderRadius: '50%',
background: '#22c55e',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)',
boxShadow: '0 0 0 0 rgba(34, 197, 94, 0)'
}}
>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
<path d="M12 19V5"/>
<path d="M5 12l7-7 7 7"/>
</svg>
</div>
</button>
</div>
</div>
) : (
<RAHChat
openTabsData={openTabsData}
activeTabId={activeTabId}
activeDimension={activeDimension}
onClearDimension={onClearDimension}
onNodeClick={onNodeClick}
delegations={delegations}
messages={rahMessages}
setMessages={setRahMessages}
mode={rahMode}
highlightedPassage={highlightedPassage}
onClearPassage={onClearPassage}
/>
)}
</div>
</div>
);
}
src/components/panes/index.ts
-1
View File
@@ -1,5 +1,4 @@
export { default as NodePane } from './NodePane';
export { default as ChatPane } from './ChatPane';
export { default as WorkflowsPane } from './WorkflowsPane';
export { default as DimensionsPane } from './DimensionsPane';
export { default as MapPane } from './MapPane';
src/components/panes/types.ts
+4 -19
View File
@@ -14,8 +14,8 @@ export type AgentDelegation = {
updatedAt: string;
};
// The six pane types
export type PaneType = 'node' | 'chat' | 'workflows' | 'dimensions' | 'map' | 'views';
// The five pane types (chat removed in rah-light)
export type PaneType = 'node' | 'workflows' | 'dimensions' | 'map' | 'views';
// State for each slot
export interface SlotState {
@@ -66,21 +66,7 @@ export interface HighlightedPassage {
selectedText: string;
}
// ChatPane specific props
export interface ChatPaneProps extends BasePaneProps {
openTabsData: Node[];
activeTabId: number | null;
activeDimension?: string | null;
onClearDimension?: () => void;
onNodeClick?: (nodeId: number) => void;
delegations: AgentDelegation[];
// Lifted state for persistence
chatMessages?: unknown[];
setChatMessages?: React.Dispatch<React.SetStateAction<unknown[]>>;
// Source awareness
highlightedPassage?: HighlightedPassage | null;
onClearPassage?: () => void;
}
// ChatPaneProps removed in rah-light
// WorkflowsPane specific props
export interface WorkflowsPaneProps extends BasePaneProps {
@@ -124,7 +110,6 @@ export interface PaneHeaderProps {
// Labels for pane types
export const PANE_LABELS: Record<PaneType, string> = {
node: 'Nodes',
chat: 'Chat',
workflows: 'Workflows',
dimensions: 'Dimensions',
map: 'Map',
@@ -139,5 +124,5 @@ export const DEFAULT_SLOT_A: SlotState = {
};
export const DEFAULT_SLOT_B: SlotState = {
type: 'chat',
type: 'workflows',
};