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,24 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -0,0 +1,75 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
|
||||
|
||||
Note: This will impact Vite dev & build performances.
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -0,0 +1,23 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs.flat.recommended,
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Luna - Command Center</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+5065
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "luna-webinterface",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@chakra-ui/react": "^3.34.0",
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@microsoft/signalr": "^10.0.0",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^19.2.4",
|
||||
"react-dom": "^19.2.4",
|
||||
"react-icons": "^5.6.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.29.0",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@rolldown/plugin-babel": "^0.2.1",
|
||||
"@types/babel__core": "^7.20.5",
|
||||
"@types/node": "^24.12.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@vitejs/plugin-react": "^6.0.1",
|
||||
"babel-plugin-react-compiler": "^1.0.0",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react-hooks": "^7.0.1",
|
||||
"eslint-plugin-react-refresh": "^0.5.2",
|
||||
"globals": "^17.4.0",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.57.0",
|
||||
"vite": "^8.0.1"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||
</symbol>
|
||||
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||
</symbol>
|
||||
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||
</symbol>
|
||||
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||
</symbol>
|
||||
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.9 KiB |
@@ -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;
|
||||
@@ -0,0 +1,31 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ESNext",
|
||||
"module": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2023", "DOM", "DOM.Iterable"],
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
},
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": ["node"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react, { reactCompilerPreset } from '@vitejs/plugin-react'
|
||||
import babel from '@rolldown/plugin-babel'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
react(),
|
||||
babel({ presets: [reactCompilerPreset()] })
|
||||
],
|
||||
resolve: {
|
||||
tsconfigPaths: true,
|
||||
},
|
||||
server: {
|
||||
proxy: {
|
||||
'/chat': {
|
||||
target: 'http://localhost:5000',
|
||||
ws: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user