Add React/TypeScript web interface with Chakra UI and SignalR integration
Implement web frontend using Vite + React + TypeScript with: - Chakra UI component library for theming and styling - SignalR bridge (lunaBridge) for real-time server communication - Chat components (ChatPanel, ChatInput, ChatMessage) - Layout components (AppLayout, Sidebar, StatusBar, SystemPanel) - Custom useChat hook for conversation state management - Dark/light theme support via ColorModeProvider - Mock conversation data for development
This commit is contained in:
@@ -0,0 +1,21 @@
|
||||
|
||||
import { AppLayout } from './components/layout/AppLayout';
|
||||
import { ChatPanel } from './components/chat/ChatPanel';
|
||||
import { SystemPanel } from './components/system/SystemPanel';
|
||||
import {useLunaBridge} from "@/lib/lunaBridge";
|
||||
|
||||
function App() {
|
||||
const { status, messages, isStreaming, sendMessage } = useLunaBridge();
|
||||
|
||||
return (
|
||||
<AppLayout systemPanel={<SystemPanel />}>
|
||||
<ChatPanel
|
||||
messages={messages}
|
||||
onSendMessage={sendMessage}
|
||||
isTyping={isStreaming}
|
||||
/>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,87 @@
|
||||
import { Box, Flex, Input } from '@chakra-ui/react';
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import type { KeyboardEvent } from 'react';
|
||||
|
||||
interface ChatInputProps {
|
||||
onSend: (message: string) => void;
|
||||
isTyping?: boolean;
|
||||
}
|
||||
|
||||
export const ChatInput = ({ onSend, isTyping }: ChatInputProps) => {
|
||||
const [value, setValue] = useState('');
|
||||
const [isFocused, setIsFocused] = useState(false);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter' && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
if (value.trim()) {
|
||||
onSend(value.trim());
|
||||
setValue('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
inputRef.current?.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Box
|
||||
px={8}
|
||||
py={3}
|
||||
bg="black"
|
||||
borderTop="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
fontFamily="'JetBrains Mono', monospace"
|
||||
fontSize="sm"
|
||||
onClick={() => inputRef.current?.focus()}
|
||||
cursor="text"
|
||||
>
|
||||
<Flex align="center" gap={0}>
|
||||
<Box color="green.400" fontWeight="bold" flexShrink={0}>
|
||||
{isTyping ? (
|
||||
<Box as="span" color="gray.500">luna is processing...</Box>
|
||||
) : (
|
||||
'guest@luna:~ $'
|
||||
)}
|
||||
</Box>
|
||||
<Box position="relative" flex="1" ml={2}>
|
||||
<Input
|
||||
ref={inputRef}
|
||||
variant="flushed"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onFocus={() => setIsFocused(true)}
|
||||
onBlur={() => setIsFocused(false)}
|
||||
disabled={isTyping}
|
||||
color="gray.200"
|
||||
css={{ caretColor: 'transparent' }}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
p={0}
|
||||
h="auto"
|
||||
lineHeight="1.5"
|
||||
borderBottom="none"
|
||||
_focus={{ borderBottom: 'none', boxShadow: 'none' }}
|
||||
_placeholder={{ color: 'transparent' }}
|
||||
/>
|
||||
{!isTyping && isFocused && (
|
||||
<Box
|
||||
position="absolute"
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
left={`${value.length}ch`}
|
||||
w="8px"
|
||||
h="1.1em"
|
||||
bg="green.400"
|
||||
css={{ animation: 'blink 1s step-end infinite' }}
|
||||
pointerEvents="none"
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,88 @@
|
||||
import { Box, Flex, Text } from '@chakra-ui/react';
|
||||
import type { Message } from '../../mocks/conversations';
|
||||
|
||||
interface ChatMessageProps {
|
||||
message: Message;
|
||||
}
|
||||
|
||||
export const ChatMessage = ({ message }: ChatMessageProps) => {
|
||||
const isLuna = message.role === 'luna';
|
||||
const isSystem = message.role === 'system';
|
||||
|
||||
if (isSystem) {
|
||||
return (
|
||||
<Box mb={4} py={2} px={4} bg="whiteAlpha.50" borderLeft="2px solid" borderColor="gray.500" color="gray.400" fontSize="sm" fontFamily="'JetBrains Mono', monospace">
|
||||
<Text>{message.content}</Text>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
const prefix = isLuna ? 'luna:~ $' : '$ ~:guest@luna';
|
||||
const accentColor = isLuna ? 'green.400' : 'cyan.400';
|
||||
const borderAccent = isLuna ? 'green.500' : 'cyan.500';
|
||||
const textColor = isLuna ? 'gray.300' : 'gray.200';
|
||||
|
||||
return (
|
||||
<Box mb={6} fontFamily="'JetBrains Mono', monospace">
|
||||
<Flex gap={3} align="flex-start" direction={isLuna ? 'row' : 'row-reverse'}>
|
||||
<Text color={accentColor} fontWeight="bold" flexShrink={0} mt="2px">
|
||||
{prefix}
|
||||
</Text>
|
||||
|
||||
<Box
|
||||
maxW="85%"
|
||||
p={0}
|
||||
borderLeft={isLuna ? '2px solid' : 'none'}
|
||||
borderRight={isLuna ? 'none' : '2px solid'}
|
||||
borderColor={borderAccent}
|
||||
pl={isLuna ? 4 : 0}
|
||||
pr={isLuna ? 0 : 4}
|
||||
w="full"
|
||||
>
|
||||
|
||||
<Box
|
||||
color={textColor}
|
||||
fontSize="sm"
|
||||
w="full"
|
||||
>
|
||||
{message.content.split('```').map((part, index) => {
|
||||
if (index % 2 !== 0) {
|
||||
const lines = part.split('\\n');
|
||||
const lang = lines[0];
|
||||
const code = lines.slice(1).join('\\n');
|
||||
return (
|
||||
<Box
|
||||
key={`code_${message.id}_${index}`}
|
||||
bg="blackAlpha.500"
|
||||
p={3}
|
||||
borderRadius="md"
|
||||
my={2}
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
overflowX="auto"
|
||||
>
|
||||
<Text color="gray.500" fontSize="xs" mb={2}>{lang}</Text>
|
||||
<Box as="pre" color="green.200">
|
||||
<code>{code || part}</code>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Text key={`text_${message.id}_${index}`} whiteSpace="pre-wrap" my={1}>
|
||||
{part}
|
||||
</Text>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
|
||||
<Flex justify={isLuna ? 'flex-start' : 'flex-end'} mt={2}>
|
||||
<Text fontSize="10px" color="gray.600">
|
||||
{new Date(message.timestamp).toLocaleTimeString([], { hour12: false })}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,62 @@
|
||||
import { Box, Flex } from '@chakra-ui/react';
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { ChatMessage } from './ChatMessage';
|
||||
import { ChatInput } from './ChatInput';
|
||||
import type { Message } from '../../mocks/conversations';
|
||||
|
||||
interface ChatPanelProps {
|
||||
messages: Message[];
|
||||
onSendMessage: (content: string) => void;
|
||||
isTyping: boolean;
|
||||
}
|
||||
|
||||
export const ChatPanel = ({ messages, onSendMessage, isTyping }: ChatPanelProps) => {
|
||||
const scrollRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
useEffect(() => {
|
||||
if (scrollRef.current) {
|
||||
scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<Flex direction="column" flex="1" h="100%" position="relative">
|
||||
<Box
|
||||
flex="1"
|
||||
overflowY="auto"
|
||||
p={8}
|
||||
ref={scrollRef}
|
||||
fontFamily="'JetBrains Mono', monospace"
|
||||
>
|
||||
<Box maxW="1000px" mx="auto">
|
||||
{messages.map((msg) => (
|
||||
<ChatMessage key={msg.id} message={msg} />
|
||||
))}
|
||||
|
||||
{isTyping && (
|
||||
<Box mb={6} fontFamily="'JetBrains Mono', monospace">
|
||||
<Flex gap={3} align="flex-start" justify="flex-start">
|
||||
<Box color="green.400" fontWeight="bold" flexShrink={0} mt="2px">
|
||||
luna:~ $
|
||||
</Box>
|
||||
<Box
|
||||
maxW="85%"
|
||||
p={0}
|
||||
borderLeft="2px solid"
|
||||
borderColor="green.500"
|
||||
pl={4}
|
||||
color="gray.500"
|
||||
>
|
||||
<Box as="span" css={{ animation: 'blink 1s step-end infinite' }}>_</Box>
|
||||
</Box>
|
||||
</Flex>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<ChatInput onSend={onSendMessage} isTyping={isTyping} />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Flex, Grid, GridItem } from '@chakra-ui/react';
|
||||
import type { ReactNode } from 'react';
|
||||
import { Sidebar } from './Sidebar';
|
||||
import { StatusBar } from './StatusBar';
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: ReactNode;
|
||||
systemPanel: ReactNode;
|
||||
}
|
||||
|
||||
export const AppLayout = ({ children, systemPanel }: AppLayoutProps) => {
|
||||
return (
|
||||
<Flex direction="column" h="100vh" w="100vw" bg="black" overflow="hidden">
|
||||
<style>{`
|
||||
@keyframes blink {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
@keyframes scanline {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: #111;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #333;
|
||||
border-radius: 4px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #444;
|
||||
}
|
||||
`}</style>
|
||||
|
||||
{/* Scanline overlay */}
|
||||
<div
|
||||
style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '4px',
|
||||
background: 'rgba(0, 255, 0, 0.05)',
|
||||
opacity: 0.5,
|
||||
pointerEvents: 'none',
|
||||
zIndex: 9999,
|
||||
animation: 'scanline 8s linear infinite'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Grid
|
||||
flex="1"
|
||||
templateColumns="auto 1fr auto"
|
||||
overflow="hidden"
|
||||
>
|
||||
<GridItem overflow="hidden">
|
||||
<Sidebar />
|
||||
</GridItem>
|
||||
|
||||
<GridItem position="relative" overflow="hidden" display="flex" flexDirection="column" bg="gray.950">
|
||||
{children}
|
||||
</GridItem>
|
||||
|
||||
<GridItem overflow="hidden" w="300px" bg="gray.900" borderLeft="1px solid" borderColor="whiteAlpha.200">
|
||||
{systemPanel}
|
||||
</GridItem>
|
||||
</Grid>
|
||||
|
||||
<StatusBar />
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,65 @@
|
||||
import { Box, Flex, Text, VStack } from '@chakra-ui/react';
|
||||
import { LuTerminal, LuActivity, LuMessageSquare, LuSettings } from 'react-icons/lu';
|
||||
import { mockSessions } from '../../mocks/conversations';
|
||||
|
||||
export const Sidebar = () => {
|
||||
return (
|
||||
<Flex
|
||||
direction="column"
|
||||
w="280px"
|
||||
bg="gray.900"
|
||||
borderRight="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
fontFamily="'JetBrains Mono', monospace"
|
||||
p={4}
|
||||
color="white"
|
||||
>
|
||||
<Flex align="center" gap={3} mb={8} color="green.400">
|
||||
<LuTerminal size={24} />
|
||||
<Text fontSize="xl" fontWeight="bold" letterSpacing="widest">
|
||||
LUNA_OS
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<VStack align="stretch" gap={6} flex="1">
|
||||
<Box>
|
||||
<Text fontSize="xs" color="gray.500" mb={3} fontWeight="bold" letterSpacing="wider">
|
||||
SESSIONS
|
||||
</Text>
|
||||
<VStack align="stretch" gap={1}>
|
||||
{mockSessions.map((session) => (
|
||||
<Flex
|
||||
key={session.id}
|
||||
align="center"
|
||||
gap={2}
|
||||
p={2}
|
||||
borderRadius="md"
|
||||
bg={session.isActive ? 'whiteAlpha.200' : 'transparent'}
|
||||
color={session.isActive ? 'green.300' : 'gray.400'}
|
||||
cursor="pointer"
|
||||
_hover={{ bg: 'whiteAlpha.100', color: 'gray.200' }}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<LuMessageSquare size={14} />
|
||||
<Text fontSize="sm" truncate>
|
||||
{session.title}
|
||||
</Text>
|
||||
</Flex>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
<VStack align="stretch" gap={2} pt={4} borderTop="1px solid" borderColor="whiteAlpha.200">
|
||||
<Flex align="center" gap={3} p={2} color="gray.400" _hover={{ color: 'white' }} cursor="pointer">
|
||||
<LuActivity size={16} />
|
||||
<Text fontSize="sm">System Metrics</Text>
|
||||
</Flex>
|
||||
<Flex align="center" gap={3} p={2} color="gray.400" _hover={{ color: 'white' }} cursor="pointer">
|
||||
<LuSettings size={16} />
|
||||
<Text fontSize="sm">Configuration</Text>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,35 @@
|
||||
import { Flex, Text, Box } from '@chakra-ui/react';
|
||||
|
||||
export const StatusBar = () => {
|
||||
return (
|
||||
<Flex
|
||||
h="28px"
|
||||
bg="gray.950"
|
||||
borderTop="1px solid"
|
||||
borderColor="green.900"
|
||||
align="center"
|
||||
px={4}
|
||||
justify="space-between"
|
||||
fontFamily="'JetBrains Mono', monospace"
|
||||
fontSize="11px"
|
||||
color="green.500"
|
||||
css={{
|
||||
boxShadow: 'inset 0 1px 0 rgba(0,255,0,0.1)'
|
||||
}}
|
||||
>
|
||||
<Flex gap={6} align="center">
|
||||
<Flex gap={2} align="center">
|
||||
<Box w="6px" h="6px" borderRadius="full" bg="green.400" css={{ animation: 'blink 2s infinite' }} />
|
||||
<Text fontWeight="bold">LUNA_CORE_ONLINE</Text>
|
||||
</Flex>
|
||||
<Text color="gray.500">SESSION: sess_99x</Text>
|
||||
<Text color="gray.500">MEM: 4.2GB / 16GB</Text>
|
||||
</Flex>
|
||||
|
||||
<Flex gap={6}>
|
||||
<Text color="gray.500">{new Date().toISOString()}</Text>
|
||||
<Text>v2.4.1</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,115 @@
|
||||
import { Box, Flex, Text, VStack, Progress } from '@chakra-ui/react';
|
||||
import { LuCpu, LuMemoryStick, LuMonitor, LuMessageCircle, LuGlobe } from 'react-icons/lu';
|
||||
|
||||
const channels = [
|
||||
{ name: 'CLI', icon: LuMonitor, status: 'connected' as const },
|
||||
{ name: 'Telegram', icon: LuMessageCircle, status: 'connected' as const },
|
||||
{ name: 'Web Interface', icon: LuGlobe, status: 'connected' as const },
|
||||
];
|
||||
|
||||
const statusColor = {
|
||||
connected: 'green.400',
|
||||
disconnected: 'red.400',
|
||||
degraded: 'amber.400',
|
||||
} as const;
|
||||
|
||||
export const SystemPanel = () => {
|
||||
return (
|
||||
<Box p={4} fontFamily="'JetBrains Mono', monospace" color="white" h="100%">
|
||||
<Text fontSize="xs" color="gray.500" mb={4} fontWeight="bold" letterSpacing="wider">
|
||||
SYSTEM_STATUS
|
||||
</Text>
|
||||
|
||||
<VStack align="stretch" gap={6}>
|
||||
<Box>
|
||||
<Flex justify="space-between" mb={2}>
|
||||
<Flex align="center" gap={2} color="gray.400">
|
||||
<LuCpu size={14} />
|
||||
<Text fontSize="xs">CPU_LOAD</Text>
|
||||
</Flex>
|
||||
<Text fontSize="xs" color="green.400">24%</Text>
|
||||
</Flex>
|
||||
<Progress.Root value={24} size="sm" colorPalette="green">
|
||||
<Progress.Track bg="whiteAlpha.100">
|
||||
<Progress.Range />
|
||||
</Progress.Track>
|
||||
</Progress.Root>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Flex justify="space-between" mb={2}>
|
||||
<Flex align="center" gap={2} color="gray.400">
|
||||
<LuMemoryStick size={14} />
|
||||
<Text fontSize="xs">MEMORY_USAGE</Text>
|
||||
</Flex>
|
||||
<Text fontSize="xs" color="amber.400">4.2GB</Text>
|
||||
</Flex>
|
||||
<Progress.Root value={65} size="sm" colorPalette="orange">
|
||||
<Progress.Track bg="whiteAlpha.100">
|
||||
<Progress.Range />
|
||||
</Progress.Track>
|
||||
</Progress.Root>
|
||||
</Box>
|
||||
|
||||
<Box borderTop="1px solid" borderColor="whiteAlpha.200" my={2} />
|
||||
|
||||
<Box>
|
||||
<Text fontSize="xs" color="gray.500" mb={3} fontWeight="bold" letterSpacing="wider">
|
||||
MODEL_INFO
|
||||
</Text>
|
||||
<VStack align="stretch" gap={2} fontSize="xs" color="gray.400">
|
||||
<Flex justify="space-between">
|
||||
<Text>Core:</Text>
|
||||
<Text color="white">Llama-3-70b-Instruct</Text>
|
||||
</Flex>
|
||||
<Flex justify="space-between">
|
||||
<Text>Context:</Text>
|
||||
<Text color="white">32k tokens</Text>
|
||||
</Flex>
|
||||
<Flex justify="space-between">
|
||||
<Text>Temp:</Text>
|
||||
<Text color="white">0.7</Text>
|
||||
</Flex>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box borderTop="1px solid" borderColor="whiteAlpha.200" my={2} />
|
||||
|
||||
<Box>
|
||||
<Text fontSize="xs" color="gray.500" mb={3} fontWeight="bold" letterSpacing="wider">
|
||||
CHANNELS
|
||||
</Text>
|
||||
<VStack align="stretch" gap={2}>
|
||||
{channels.map((ch) => (
|
||||
<Flex key={ch.name} justify="space-between" align="center">
|
||||
<Flex align="center" gap={2} color="gray.400">
|
||||
<ch.icon size={14} />
|
||||
<Text fontSize="xs">{ch.name}</Text>
|
||||
</Flex>
|
||||
<Flex align="center" gap={2}>
|
||||
<Box w="6px" h="6px" borderRadius="full" bg={statusColor[ch.status]} />
|
||||
<Text fontSize="10px" color={statusColor[ch.status]}>{ch.status.toUpperCase()}</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
))}
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
<Box borderTop="1px solid" borderColor="whiteAlpha.200" my={2} />
|
||||
|
||||
<Box>
|
||||
<Text fontSize="xs" color="gray.500" mb={3} fontWeight="bold" letterSpacing="wider">
|
||||
RECENT_ACTIVITY
|
||||
</Text>
|
||||
<VStack align="stretch" gap={2} fontSize="10px" color="gray.500">
|
||||
<Text>_ Loaded workspace indices (2.4s)</Text>
|
||||
<Text>_ Synthesizing code context...</Text>
|
||||
<Text>_ Found 14 relevant files.</Text>
|
||||
<Text color="green.500">_ Awaiting user input.</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
|
||||
</VStack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,40 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { initialMessages } from '../mocks/conversations';
|
||||
import type { Message } from '../mocks/conversations';
|
||||
|
||||
export function useChat() {
|
||||
const [messages, setMessages] = useState<Message[]>(initialMessages);
|
||||
const [isTyping, setIsTyping] = useState(false);
|
||||
|
||||
const addMessage = useCallback((content: string) => {
|
||||
// Add user message
|
||||
const userMsg: Message = {
|
||||
id: `msg_${Date.now()}`,
|
||||
role: 'user',
|
||||
content,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, userMsg]);
|
||||
setIsTyping(true);
|
||||
|
||||
// Simulate Luna thinking and responding
|
||||
setTimeout(() => {
|
||||
const lunaMsg: Message = {
|
||||
id: `msg_${Date.now() + 1}`,
|
||||
role: 'luna',
|
||||
content: `Acknowledged: "${content}". This is a mock response from the Luna core processing module. I have analyzed the command and logged it to the active session buffer.`,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, lunaMsg]);
|
||||
setIsTyping(false);
|
||||
}, 1500 + Math.random() * 1000); // 1.5 - 2.5s delay
|
||||
}, []);
|
||||
|
||||
return {
|
||||
messages,
|
||||
addMessage,
|
||||
isTyping
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import type {Message} from "@/mocks/conversations.ts";
|
||||
import * as React from "react";
|
||||
import {createContext, type PropsWithChildren, useCallback, useContext, useEffect, useRef, useState} from "react";
|
||||
import {HubConnection, HubConnectionBuilder, HubConnectionState} from "@microsoft/signalr";
|
||||
import type ChatStreamUpdate from "@/models/luna/ChatStreamUpdate.ts";
|
||||
import type ChannelMessage from "@/models/luna/ChannelMessage.ts";
|
||||
|
||||
export type LunaBridgeType = "disconnected" | "connecting" | "connected";
|
||||
|
||||
export interface LunaBridgeState {
|
||||
status: LunaBridgeType;
|
||||
messages: Array<Message>;
|
||||
isStreaming: boolean;
|
||||
sendMessage: (content: string) => Promise<void>;
|
||||
}
|
||||
|
||||
const initialState: LunaBridgeState = {
|
||||
status: "disconnected",
|
||||
messages: [],
|
||||
isStreaming: false,
|
||||
sendMessage: (): Promise<void> => {
|
||||
throw new Error("[LunaBridgeContext] sendMessage is not implemented!")
|
||||
}
|
||||
}
|
||||
|
||||
const LunaBridgeContext = createContext<LunaBridgeState>(initialState);
|
||||
|
||||
export const LunaBridgeProvider: React.FC<PropsWithChildren> = ({ children }) => {
|
||||
const [status, setStatus] = useState<LunaBridgeState["status"]>(initialState.status);
|
||||
const [messages, setMessages] = useState<LunaBridgeState["messages"]>(initialState.messages);
|
||||
const [isStreaming, setIsStreaming] = useState(false);
|
||||
|
||||
const connectionRef = useRef<HubConnection | null>(null);
|
||||
const streamingContentRef = useRef<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const connection = new HubConnectionBuilder()
|
||||
.withUrl("/chat?clientType=web")
|
||||
.withAutomaticReconnect()
|
||||
.build();
|
||||
|
||||
connectionRef.current = connection;
|
||||
|
||||
connection.onreconnecting(() => setStatus("connecting"));
|
||||
connection.onreconnected(() => setStatus("connected"));
|
||||
connection.onclose(() => setStatus("disconnected"));
|
||||
|
||||
connection.on("OnMessageStreamReceived", (update: ChatStreamUpdate) => {
|
||||
switch (update.type) {
|
||||
case "text": {
|
||||
const chunk = update.content ?? "";
|
||||
streamingContentRef.current = (streamingContentRef.current ?? "") + chunk;
|
||||
setIsStreaming(true);
|
||||
break;
|
||||
}
|
||||
case "thinking":
|
||||
case "toolCall":
|
||||
case "toolResult":
|
||||
case "usage":
|
||||
break;
|
||||
case "complete": {
|
||||
const finalContent = streamingContentRef.current;
|
||||
const messageId = update.messageId ?? crypto.randomUUID();
|
||||
streamingContentRef.current = null;
|
||||
setIsStreaming(false);
|
||||
|
||||
if (finalContent) {
|
||||
setMessages((prev) => {
|
||||
if (prev.some((m) => m.id === messageId)) return prev;
|
||||
return [...prev, {
|
||||
id: messageId,
|
||||
role: "luna",
|
||||
content: finalContent,
|
||||
timestamp: new Date().toISOString(),
|
||||
}];
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
connection.on("OnMessageReceived", (message: ChannelMessage) => {
|
||||
setMessages((prev) => [...prev, {
|
||||
id: message.messageId,
|
||||
role: "luna",
|
||||
content: message.content,
|
||||
timestamp: message.timestamp
|
||||
}]);
|
||||
});
|
||||
|
||||
let disposed = false;
|
||||
|
||||
setStatus("connecting");
|
||||
connection.start()
|
||||
.then(() => {
|
||||
if (!disposed) setStatus("connected");
|
||||
})
|
||||
.catch(() => {
|
||||
if (!disposed) setStatus("disconnected");
|
||||
});
|
||||
|
||||
return () => {
|
||||
disposed = true;
|
||||
connectionRef.current = null;
|
||||
connection.stop();
|
||||
};
|
||||
}, []);
|
||||
|
||||
const sendMessage = useCallback(async (content: string) => {
|
||||
const connection = connectionRef.current;
|
||||
if (!connection || connection.state != HubConnectionState.Connected) {
|
||||
throw new Error("[LunaBridgeContext] Not connected!");
|
||||
}
|
||||
|
||||
const message: ChannelMessage = {
|
||||
messageId: crypto.randomUUID(),
|
||||
conversationId: "default",
|
||||
senderId: "user",
|
||||
senderName: "User",
|
||||
content,
|
||||
timestamp: new Date().toISOString(),
|
||||
};
|
||||
|
||||
setMessages((prev) => [...prev, {
|
||||
id: message.messageId,
|
||||
role: "user",
|
||||
content,
|
||||
timestamp: message.timestamp
|
||||
}]);
|
||||
|
||||
await connection.invoke("OnMessageReceived", message);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<LunaBridgeContext.Provider value={{ status, messages, isStreaming, sendMessage}}>
|
||||
{ children }
|
||||
</LunaBridgeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export const useLunaBridge = () => useContext(LunaBridgeContext);
|
||||
@@ -0,0 +1,15 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.tsx'
|
||||
import ThemeProvider from "@/theme/ThemeProvider.tsx";
|
||||
import {LunaBridgeProvider} from "@/lib/lunaBridge";
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<ThemeProvider>
|
||||
<LunaBridgeProvider>
|
||||
<App />
|
||||
</LunaBridgeProvider>
|
||||
</ThemeProvider>
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -0,0 +1,58 @@
|
||||
export interface Message {
|
||||
id: string;
|
||||
role: 'user' | 'luna' | 'system';
|
||||
content: string;
|
||||
timestamp: string;
|
||||
}
|
||||
|
||||
export interface Session {
|
||||
id: string;
|
||||
title: string;
|
||||
isActive: boolean;
|
||||
messages: Message[];
|
||||
}
|
||||
|
||||
export const initialMessages: Message[] = [
|
||||
{
|
||||
id: 'msg_01',
|
||||
role: 'system',
|
||||
content: '[SESSION INITIATED] Connecting to local context...',
|
||||
timestamp: new Date(Date.now() - 600000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'msg_02',
|
||||
role: 'user',
|
||||
content: 'Luna, I need help setting up a WebSocket server in Node.js that handles authentication before upgrading the connection.',
|
||||
timestamp: new Date(Date.now() - 590000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'msg_03',
|
||||
role: 'luna',
|
||||
content: 'I can help with that. To authenticate before the connection upgrades, you should intercept the `upgrade` event on the HTTP server rather than handling it inside the WebSocket connection event. This prevents unauthenticated connections from keeping file descriptors open.\n\nHere is a robust implementation using `ws`:',
|
||||
timestamp: new Date(Date.now() - 585000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'msg_04',
|
||||
role: 'luna',
|
||||
content: '```javascript\nimport { createServer } from "http";\nimport { WebSocketServer } from "ws";\n\nconst server = createServer();\nconst wss = new WebSocketServer({ noServer: true });\n\nserver.on("upgrade", function upgrade(request, socket, head) {\n // Perform auth here (e.g., check headers, cookies)\n authenticate(request, (err, client) => {\n if (err || !client) {\n socket.write("HTTP/1.1 401 Unauthorized\\r\\n\\r\\n");\n socket.destroy();\n return;\n }\n\n wss.handleUpgrade(request, socket, head, function done(ws) {\n wss.emit("connection", ws, request, client);\n });\n });\n});\n\nserver.listen(8080);\n```',
|
||||
timestamp: new Date(Date.now() - 584000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'msg_05',
|
||||
role: 'user',
|
||||
content: 'Perfect. What if I want to pass the authenticated user ID down to the connection handler?',
|
||||
timestamp: new Date(Date.now() - 120000).toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'msg_06',
|
||||
role: 'luna',
|
||||
content: 'Notice the `client` parameter in `wss.emit("connection", ws, request, client);` above. You can capture it in your connection listener like this:\n\n```javascript\nwss.on("connection", function connection(ws, request, client) {\n console.log(`User ${client.id} connected`);\n \n ws.on("message", function message(data) {\n console.log(`Received from ${client.id}: ${data}`);\n });\n});\n```',
|
||||
timestamp: new Date(Date.now() - 110000).toISOString(),
|
||||
}
|
||||
];
|
||||
|
||||
export const mockSessions: Session[] = [
|
||||
{ id: 'sess_99x', title: 'WebSocket Auth Flow', isActive: true, messages: initialMessages },
|
||||
{ id: 'sess_88y', title: 'React Compiler Migration', isActive: false, messages: [] },
|
||||
{ id: 'sess_77z', title: 'Docker Postgres Issue', isActive: false, messages: [] }
|
||||
];
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
export default interface ChannelMessage {
|
||||
messageId: string;
|
||||
conversationId: string;
|
||||
senderId: string;
|
||||
senderName: string;
|
||||
content: string;
|
||||
timestamp: string;
|
||||
metadata?: Record<string, string>;
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
|
||||
export type ChatStreamUpdateType = "thinking" | "text" | "toolCall" | "toolResult" | "usage" | "complete";
|
||||
|
||||
export default interface ChatStreamUpdate {
|
||||
type: ChatStreamUpdateType;
|
||||
content?: string;
|
||||
role?: string;
|
||||
isComplete: boolean;
|
||||
messageId?: string;
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import type { IconButtonProps, SpanProps } from "@chakra-ui/react"
|
||||
import { ClientOnly, IconButton, Skeleton, Span } from "@chakra-ui/react"
|
||||
import { ThemeProvider, useTheme } from "next-themes"
|
||||
import type { ThemeProviderProps } from "next-themes"
|
||||
import { LuMoon, LuSun } from "react-icons/lu"
|
||||
|
||||
export interface ColorModeProviderProps extends ThemeProviderProps {}
|
||||
|
||||
export function ColorModeProvider(props: ColorModeProviderProps) {
|
||||
return (
|
||||
<ThemeProvider attribute="class" disableTransitionOnChange {...props} />
|
||||
)
|
||||
}
|
||||
|
||||
export type ColorMode = "light" | "dark"
|
||||
|
||||
export interface UseColorModeReturn {
|
||||
colorMode: ColorMode
|
||||
setColorMode: (colorMode: ColorMode) => void
|
||||
toggleColorMode: () => void
|
||||
}
|
||||
|
||||
export function useColorMode(): UseColorModeReturn {
|
||||
const { resolvedTheme, setTheme, forcedTheme } = useTheme()
|
||||
const colorMode = forcedTheme || resolvedTheme
|
||||
const toggleColorMode = () => {
|
||||
setTheme(resolvedTheme === "dark" ? "light" : "dark")
|
||||
}
|
||||
return {
|
||||
colorMode: colorMode as ColorMode,
|
||||
setColorMode: setTheme,
|
||||
toggleColorMode,
|
||||
}
|
||||
}
|
||||
|
||||
export function useColorModeValue<T>(light: T, dark: T) {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? dark : light
|
||||
}
|
||||
|
||||
export function ColorModeIcon() {
|
||||
const { colorMode } = useColorMode()
|
||||
return colorMode === "dark" ? <LuMoon /> : <LuSun />
|
||||
}
|
||||
|
||||
interface ColorModeButtonProps extends Omit<IconButtonProps, "aria-label"> {}
|
||||
|
||||
export const ColorModeButton = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
ColorModeButtonProps
|
||||
>(function ColorModeButton(props, ref) {
|
||||
const { toggleColorMode } = useColorMode()
|
||||
return (
|
||||
<ClientOnly fallback={<Skeleton boxSize="9" />}>
|
||||
<IconButton
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
aria-label="Toggle color mode"
|
||||
size="sm"
|
||||
ref={ref}
|
||||
{...props}
|
||||
css={{
|
||||
_icon: {
|
||||
width: "5",
|
||||
height: "5",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ColorModeIcon />
|
||||
</IconButton>
|
||||
</ClientOnly>
|
||||
)
|
||||
})
|
||||
|
||||
export const LightMode = React.forwardRef<HTMLSpanElement, SpanProps>(
|
||||
function LightMode(props, ref) {
|
||||
return (
|
||||
<Span
|
||||
color="fg"
|
||||
display="contents"
|
||||
className="chakra-theme light"
|
||||
colorPalette="gray"
|
||||
colorScheme="light"
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
export const DarkMode = React.forwardRef<HTMLSpanElement, SpanProps>(
|
||||
function DarkMode(props, ref) {
|
||||
return (
|
||||
<Span
|
||||
color="fg"
|
||||
display="contents"
|
||||
className="chakra-theme dark"
|
||||
colorPalette="gray"
|
||||
colorScheme="dark"
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
},
|
||||
)
|
||||
@@ -0,0 +1,15 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react";
|
||||
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
|
||||
import {ColorModeProvider, type ColorModeProviderProps} from "@/theme/ColorModeProvider.tsx";
|
||||
|
||||
export const ThemeProvider: React.FC<ColorModeProviderProps> = (props) => {
|
||||
return (
|
||||
<ChakraProvider value={defaultSystem}>
|
||||
<ColorModeProvider {...props} />
|
||||
</ChakraProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ThemeProvider;
|
||||
Reference in New Issue
Block a user