284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
import React from 'react';
|
|
import { useChatStore } from './stores/chatStore';
|
|
import { useNavigation } from './hooks/useNavigation';
|
|
import { OpenChamberLogo } from './components/OpenChamberLogo';
|
|
|
|
type ConnectionStatus = 'disconnected' | 'connecting' | 'connected' | 'error';
|
|
|
|
function ConnectionStatusBanner({ status, error, onRetry }: {
|
|
status: ConnectionStatus;
|
|
error?: string;
|
|
onRetry: () => void;
|
|
}) {
|
|
if (status === 'connected') return null;
|
|
|
|
// Show full-screen logo for connecting state
|
|
if (status === 'connecting') {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full gap-4">
|
|
<OpenChamberLogo width={80} height={80} isAnimated />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const messages: Record<ConnectionStatus, string> = {
|
|
disconnected: 'Not connected to OpenCode API',
|
|
connecting: '',
|
|
connected: '',
|
|
error: error || 'Connection error',
|
|
};
|
|
|
|
return (
|
|
<div className={`flex items-center justify-center gap-2 px-4 py-2 text-sm border-b ${
|
|
status === 'error' ? 'bg-destructive/10 text-destructive' : 'bg-muted text-muted-foreground'
|
|
}`}>
|
|
<span>{messages[status]}</span>
|
|
{(status === 'disconnected' || status === 'error') && (
|
|
<button onClick={onRetry} className="px-2 py-0.5 text-xs rounded bg-primary text-primary-foreground hover:bg-primary/90">
|
|
Retry
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function SessionsList() {
|
|
const { sessions, currentSessionId, selectSession, createSession, isLoadingSessions } = useChatStore();
|
|
const { goToChat } = useNavigation();
|
|
const [isCreating, setIsCreating] = React.useState(false);
|
|
|
|
const handleSelectSession = async (sessionId: string) => {
|
|
await selectSession(sessionId);
|
|
goToChat();
|
|
};
|
|
|
|
const handleNewSession = async () => {
|
|
setIsCreating(true);
|
|
const sessionId = await createSession();
|
|
setIsCreating(false);
|
|
if (sessionId) {
|
|
goToChat();
|
|
}
|
|
};
|
|
|
|
const formatTime = (timestamp?: number) => {
|
|
if (!timestamp) return '';
|
|
const date = new Date(timestamp);
|
|
const now = new Date();
|
|
const diffDays = Math.floor((now.getTime() - date.getTime()) / 86400000);
|
|
if (diffDays === 0) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
|
if (diffDays === 1) return 'Yesterday';
|
|
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center justify-between px-3 py-2 border-b border-border">
|
|
<h1 className="text-sm font-medium">Sessions</h1>
|
|
<button
|
|
onClick={handleNewSession}
|
|
disabled={isCreating}
|
|
className="p-1.5 rounded hover:bg-muted disabled:opacity-50"
|
|
>
|
|
{isCreating ? (
|
|
<span className="inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
|
|
) : (
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 3v10M3 8h10" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" /></svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto">
|
|
{isLoadingSessions ? (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">Loading...</div>
|
|
) : sessions.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center h-full p-4 text-center">
|
|
<div className="text-muted-foreground text-sm mb-4">No sessions yet</div>
|
|
<button
|
|
onClick={handleNewSession}
|
|
disabled={isCreating}
|
|
className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50"
|
|
>
|
|
{isCreating ? 'Creating...' : 'Start New Chat'}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border">
|
|
{sessions.map((session) => (
|
|
<button
|
|
key={session.id}
|
|
onClick={() => handleSelectSession(session.id)}
|
|
className={`w-full text-left px-3 py-2.5 hover:bg-muted/50 transition-colors ${
|
|
session.id === currentSessionId ? 'bg-primary/10 border-l-2 border-primary' : ''
|
|
}`}
|
|
>
|
|
<div className="text-sm font-medium truncate">{session.title || 'New Session'}</div>
|
|
<div className="text-xs text-muted-foreground">{formatTime(session.time?.created)}</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ChatPanel() {
|
|
const { currentSessionId, sessions, messages, sendMessage, abortMessage, isSending, streamingSessionId } = useChatStore();
|
|
const { goToSessions } = useNavigation();
|
|
const [input, setInput] = React.useState('');
|
|
const messagesEndRef = React.useRef<HTMLDivElement>(null);
|
|
|
|
const currentSession = sessions.find((s) => s.id === currentSessionId);
|
|
const sessionMessages = currentSessionId ? messages.get(currentSessionId) || [] : [];
|
|
const isStreaming = streamingSessionId === currentSessionId;
|
|
|
|
React.useEffect(() => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
}, [sessionMessages.length]);
|
|
|
|
const handleSend = async () => {
|
|
if (!input.trim() || isSending) return;
|
|
const text = input.trim();
|
|
setInput('');
|
|
await sendMessage(text);
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full">
|
|
<div className="flex items-center gap-2 px-3 py-2 border-b border-border">
|
|
<button onClick={goToSessions} className="p-1 rounded hover:bg-muted">
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M11 2L5 8l6 6" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
|
|
</button>
|
|
<h1 className="text-sm font-medium truncate flex-1">{currentSession?.title || 'New Chat'}</h1>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto px-3 py-2">
|
|
{sessionMessages.length === 0 ? (
|
|
<div className="flex items-center justify-center h-full text-muted-foreground text-sm">
|
|
Start a conversation
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{sessionMessages.map((msg, idx) => (
|
|
<MessageBubble key={msg.info.id || idx} message={msg} />
|
|
))}
|
|
{isStreaming && (
|
|
<div className="flex justify-start">
|
|
<div className="bg-muted rounded-lg px-3 py-2 text-sm">
|
|
<span className="inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="border-t border-border p-3">
|
|
<div className="flex gap-2">
|
|
<textarea
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Type a message..."
|
|
rows={1}
|
|
disabled={isSending}
|
|
className="flex-1 resize-none rounded-md border border-input bg-background px-3 py-2 text-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
|
|
style={{ minHeight: 40, maxHeight: 120 }}
|
|
/>
|
|
{isStreaming ? (
|
|
<button onClick={abortMessage} className="px-3 py-2 rounded-md bg-destructive text-destructive-foreground hover:bg-destructive/90">
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><rect x="3" y="3" width="10" height="10" rx="1" fill="currentColor"/></svg>
|
|
</button>
|
|
) : (
|
|
<button onClick={handleSend} disabled={!input.trim() || isSending} className="px-3 py-2 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 disabled:opacity-50">
|
|
<svg width="16" height="16" viewBox="0 0 16 16"><path d="M2 8l12-6-3.5 6 3.5 6L2 8z" fill="currentColor"/></svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function MessageBubble({ message }: { message: { info: { role: string }; parts: Array<{ type: string; text?: string }> } }) {
|
|
const isUser = message.info.role === 'user';
|
|
const text = message.parts.filter((p) => p.type === 'text').map((p) => p.text).join('\n');
|
|
|
|
return (
|
|
<div className={`flex ${isUser ? 'justify-end' : 'justify-start'}`}>
|
|
<div className={`max-w-[85%] rounded-lg px-3 py-2 text-sm ${
|
|
isUser ? 'bg-primary text-primary-foreground' : 'bg-muted'
|
|
}`}>
|
|
<div className="whitespace-pre-wrap break-words">{text || '...'}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function VSCodeApp() {
|
|
const { initialize, isConnected } = useChatStore();
|
|
const { currentView } = useNavigation();
|
|
const [status, setStatus] = React.useState<ConnectionStatus>('connecting');
|
|
const [error, setError] = React.useState<string>();
|
|
|
|
const connect = React.useCallback(async () => {
|
|
setStatus('connecting');
|
|
setError(undefined);
|
|
try {
|
|
await initialize();
|
|
setStatus('connected');
|
|
} catch (err) {
|
|
setStatus('error');
|
|
setError(err instanceof Error ? err.message : 'Failed to connect');
|
|
}
|
|
}, [initialize]);
|
|
|
|
React.useEffect(() => {
|
|
connect();
|
|
}, [connect]);
|
|
|
|
React.useEffect(() => {
|
|
if (isConnected) setStatus('connected');
|
|
}, [isConnected]);
|
|
|
|
// Listen for extension messages
|
|
React.useEffect(() => {
|
|
const handleMessage = (event: MessageEvent) => {
|
|
const msg = event.data;
|
|
if (msg.type === 'connectionStatus') {
|
|
if (msg.status === 'connected') setStatus('connected');
|
|
else if (msg.status === 'error') {
|
|
setStatus('error');
|
|
setError(msg.error);
|
|
}
|
|
}
|
|
};
|
|
window.addEventListener('message', handleMessage);
|
|
return () => window.removeEventListener('message', handleMessage);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-background text-foreground">
|
|
<ConnectionStatusBanner status={status} error={error} onRetry={connect} />
|
|
<div className="flex-1 min-h-0">
|
|
{currentView === 'sessions' ? (
|
|
<SessionsList />
|
|
) : (
|
|
<ChatPanel />
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VSCodeApp;
|