mirror of
https://github.com/siteboon/claudecodeui.git
synced 2025-12-10 23:09:46 +00:00
Compare commits
2 Commits
69b7b59f00
...
2fb1e1cfb0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2fb1e1cfb0 | ||
|
|
0f4b3666fc |
@@ -467,20 +467,37 @@ function Sidebar({
|
|||||||
|
|
||||||
<div
|
<div
|
||||||
className="h-full flex flex-col bg-card md:select-none"
|
className="h-full flex flex-col bg-card md:select-none"
|
||||||
|
style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
|
||||||
>
|
>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="md:p-4 md:border-b md:border-border">
|
<div className="md:p-4 md:border-b md:border-border">
|
||||||
{/* Desktop Header */}
|
{/* Desktop Header */}
|
||||||
<div className="hidden md:flex items-center justify-between">
|
<div className="hidden md:flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
{import.meta.env.VITE_IS_PLATFORM === 'true' ? (
|
||||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
|
<a
|
||||||
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
href="https://cloudcli.ai/dashboard"
|
||||||
|
className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
|
||||||
|
title="View Environments"
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
)}
|
||||||
<h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
|
|
||||||
<p className="text-sm text-muted-foreground">AI coding assistant interface</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{onToggleSidebar && (
|
{onToggleSidebar && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
@@ -500,21 +517,38 @@ function Sidebar({
|
|||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Header */}
|
{/* Mobile Header */}
|
||||||
<div
|
<div
|
||||||
className="md:hidden p-3 border-b border-border"
|
className="md:hidden p-3 border-b border-border"
|
||||||
|
style={isPWA && isMobile ? { paddingTop: '16px' } : {}}
|
||||||
>
|
>
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
{import.meta.env.VITE_IS_PLATFORM === 'true' ? (
|
||||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
<a
|
||||||
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
href="https://cloudcli.ai/dashboard"
|
||||||
|
className="flex items-center gap-3 active:opacity-70 transition-opacity"
|
||||||
|
title="View Environments"
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Projects</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
) : (
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||||
|
<MessageSquare className="w-4 h-4 text-primary-foreground" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
|
||||||
|
<p className="text-sm text-muted-foreground">Projects</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
)}
|
||||||
<h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
|
|
||||||
<p className="text-sm text-muted-foreground">Projects</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
<button
|
<button
|
||||||
className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
|
className="w-8 h-8 rounded-md bg-background border border-border flex items-center justify-center active:scale-95 transition-all duration-150"
|
||||||
@@ -1306,7 +1340,7 @@ function Sidebar({
|
|||||||
{/* Settings Section */}
|
{/* Settings Section */}
|
||||||
<div className="md:p-2 md:border-t md:border-border flex-shrink-0">
|
<div className="md:p-2 md:border-t md:border-border flex-shrink-0">
|
||||||
{/* Mobile Settings */}
|
{/* Mobile Settings */}
|
||||||
<div className="md:hidden p-4 pb-mobile-nav border-t border-border/50">
|
<div className="md:hidden p-4 pb-20 border-t border-border/50">
|
||||||
<button
|
<button
|
||||||
className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
|
className="w-full h-14 bg-muted/50 hover:bg-muted/70 rounded-2xl flex items-center justify-start gap-4 px-4 active:scale-[0.98] transition-all duration-150"
|
||||||
onClick={onShowSettings}
|
onClick={onShowSettings}
|
||||||
|
|||||||
@@ -21,20 +21,25 @@ export function useWebSocket() {
|
|||||||
|
|
||||||
const connect = async () => {
|
const connect = async () => {
|
||||||
try {
|
try {
|
||||||
// Get authentication token
|
// Get authentication token (skip in platform mode)
|
||||||
const token = localStorage.getItem('auth-token');
|
let token = null;
|
||||||
if (!token) {
|
const isPlatform = import.meta.env.VITE_IS_PLATFORM === 'true';
|
||||||
console.warn('No authentication token found for WebSocket connection');
|
|
||||||
return;
|
if (!isPlatform) {
|
||||||
|
token = localStorage.getItem('auth-token');
|
||||||
|
if (!token) {
|
||||||
|
console.warn('No authentication token found for WebSocket connection');
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fetch server configuration to get the correct WebSocket URL
|
// Fetch server configuration to get the correct WebSocket URL
|
||||||
let wsBaseUrl;
|
let wsBaseUrl;
|
||||||
try {
|
try {
|
||||||
const configResponse = await fetch('/api/config', {
|
const configResponse = await fetch('/api/config', {
|
||||||
headers: {
|
headers: token ? {
|
||||||
'Authorization': `Bearer ${token}`
|
'Authorization': `Bearer ${token}`
|
||||||
}
|
} : {}
|
||||||
});
|
});
|
||||||
const config = await configResponse.json();
|
const config = await configResponse.json();
|
||||||
wsBaseUrl = config.wsUrl;
|
wsBaseUrl = config.wsUrl;
|
||||||
@@ -53,9 +58,12 @@ export function useWebSocket() {
|
|||||||
const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
|
const apiPort = window.location.port === '3001' ? '3002' : window.location.port;
|
||||||
wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
|
wsBaseUrl = `${protocol}//${window.location.hostname}:${apiPort}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Include token in WebSocket URL as query parameter
|
// Include token in WebSocket URL as query parameter (only in OSS mode)
|
||||||
const wsUrl = `${wsBaseUrl}/ws?token=${encodeURIComponent(token)}`;
|
let wsUrl = `${wsBaseUrl}/ws`;
|
||||||
|
if (token) {
|
||||||
|
wsUrl += `?token=${encodeURIComponent(token)}`;
|
||||||
|
}
|
||||||
const websocket = new WebSocket(wsUrl);
|
const websocket = new WebSocket(wsUrl);
|
||||||
|
|
||||||
websocket.onopen = () => {
|
websocket.onopen = () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user