Skip to content

Commit d59fed1

Browse files
committed
updates
1 parent 329bbcf commit d59fed1

File tree

148 files changed

+978
-206
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

148 files changed

+978
-206
lines changed

webapp/package.json

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
11
{
2-
"name": "chat-app",
2+
"name": "skyenet-ui",
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
66
"@fortawesome/free-solid-svg-icons": "^6.7.1",
77
"@fortawesome/react-fontawesome": "^0.2.2",
8-
"@reduxjs/toolkit": "^1.9.7",
9-
"@testing-library/jest-dom": "^5.17.0",
10-
"@testing-library/react": "^13.4.0",
11-
"@testing-library/user-event": "^13.5.0",
12-
"dompurify": "^3.2.1",
13-
"mermaid": "^10.0.0",
8+
"@reduxjs/toolkit": "^2.4.0",
9+
"express": "^4.21.1",
10+
"cors": "^2.8.5",
11+
"http-proxy-middleware": "^3.0.3",
12+
"@testing-library/jest-dom": "^6.6.3",
13+
"@testing-library/react": "^16.0.1",
14+
"@testing-library/user-event": "^14.5.2",
15+
"dompurify": "^3.2.2",
16+
"mermaid": "^11.4.1",
1417
"prismjs": "^1.29.0",
1518
"prismjs-components-loader": "^3.0.1",
1619
"qrcode-generator": "^1.4.4",
1720
"react": "^18.3.1",
1821
"react-dom": "^18.3.1",
19-
"react-redux": "^8.1.3",
20-
"react-router-dom": "^6.28.0",
22+
"react-redux": "^9.1.2",
23+
"react-router-dom": "^7.0.1",
2124
"react-scripts": "5.0.1",
22-
"styled-components": "^5.3.11",
23-
"web-vitals": "^2.1.4"
25+
"styled-components": "^6.1.13",
26+
"web-vitals": "^4.2.4"
2427
},
2528
"devDependencies": {
2629
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
2730
"@types/dompurify": "^3.2.0",
31+
"@types/cors": "^2.8.17",
32+
"concurrently": "^9.1.0",
2833
"@types/node": "^22.10.1",
29-
"@types/prismjs": "^1.26.3",
34+
"@types/prismjs": "^1.26.5",
3035
"@types/react": "^18.3.12",
3136
"@types/react-dom": "^18.3.1",
3237
"@types/react-redux": "^7.1.34",
3338
"@types/react-router-dom": "^5.3.3",
3439
"@types/styled-components": "^5.1.34",
3540
"cross-env": "^7.0.3",
36-
"eslint": "^8.0.0",
37-
"typescript": "^4.9.5"
41+
"eslint": "^9.16.0",
42+
"typescript": "^5.7.2",
43+
"@typescript-eslint/parser": "^8.16.0"
3844
},
3945
"scripts": {
4046
"start": "cross-env NODE_ENV='development' react-scripts start",

webapp/src/App.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary';
55
import ErrorFallback from './components/ErrorBoundary/ErrorFallback';
66
import './App.css';
77
import websocket from './services/websocket';
8-
import {GlobalStyles} from './styles/GlobalStyles';
8+
import { GlobalStyles } from './styles/GlobalStyles';
99
import ChatInterface from './components/ChatInterface';
1010
import ThemeProvider from './themes/ThemeProvider';
1111
import {Menu} from "./components/Menu/Menu";
@@ -87,10 +87,9 @@ const App: React.FC = () => {
8787
return (
8888
<ThemeProvider>
8989
{(() => {
90-
console.debug(`${LOG_PREFIX} Rendering ThemeProvider`);
90+
console.debug(`${LOG_PREFIX} Rendering ThemeProvider with theme`);
9191
return (
9292
<>
93-
<GlobalStyles/>
9493
<div className={`App`}>
9594
<Menu/>
9695
<ChatInterface

webapp/src/hooks/useModal.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ export const useModal = () => {
2525
const getModalUrl = (endpoint: string) => {
2626
console.log('[Modal] Constructing modal URL for endpoint:', endpoint);
2727
const protocol = window.location.protocol;
28-
const host = (process.env.NODE_ENV === 'development' ? config.url : null) || window.location.hostname;
29-
const port = (process.env.NODE_ENV === 'development' ? config.port : null) || window.location.port;
28+
const host = window.location.hostname;
29+
const port = window.location.port;
3030
// Handle endpoints that already have query parameters
3131
const separator = endpoint.includes('?') ? '&' : '?';
3232
const url = `${protocol}//${host}:${port}/${endpoint}${separator}sessionId=${WebSocketService.getSessionId()}`;

webapp/src/services/appConfig.ts

Lines changed: 46 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,89 @@
11
import {store} from '../store';
22
import {logger} from '../utils/logger';
33
import {setAppInfo} from '../store/slices/configSlice';
4+
const LOG_PREFIX = '[AppConfig]';
45

56
const BASE_API_URL = process.env.REACT_APP_API_URL || window.location.origin;
67

78

89
export const fetchAppConfig = async (sessionId: string) => {
910
try {
10-
logger.info('Fetching app config for session:', sessionId);
11+
logger.info(`${LOG_PREFIX} Fetching app config:`, {
12+
sessionId,
13+
baseUrl: BASE_API_URL
14+
});
15+
1116
const url = new URL('/appInfo', BASE_API_URL);
1217
url.searchParams.append('session', sessionId);
18+
1319
let response: Response;
14-
// Add error handling for failed requests
20+
1521
try {
1622
response = await fetch(url.toString(), {
1723
headers: {
18-
'Accept': 'application/json, text/json'
19-
}
24+
'Accept': 'application/json, text/json',
25+
'Cache-Control': 'no-cache'
26+
},
27+
credentials: 'include'
2028
});
2129
} catch (networkError) {
22-
logger.warn('Network request failed:', networkError);
30+
logger.warn(`${LOG_PREFIX} Network request failed:`, {
31+
error: networkError,
32+
url: url.toString()
33+
});
34+
// Return default config for development
35+
if (process.env.NODE_ENV === 'development') {
36+
const defaultConfig = {
37+
applicationName: 'Chat App (Offline)',
38+
singleInput: false,
39+
stickyInput: true,
40+
loadImages: true,
41+
showMenubar: true
42+
};
43+
store.dispatch(setAppInfo(defaultConfig));
44+
return defaultConfig;
45+
}
2346
return null;
2447
}
2548

2649
if (!response.ok) {
27-
logger.warn(`API returned error status: ${response.status}`);
50+
logger.warn(`${LOG_PREFIX} API error response:`, {
51+
status: response.status,
52+
statusText: response.statusText,
53+
url: url.toString()
54+
});
55+
const errorText = await response.text();
56+
logger.debug(`${LOG_PREFIX} Error response body:`, errorText);
2857
return null;
2958
}
59+
3060
const contentType = response.headers.get('content-type');
3161
if (!contentType || (!contentType.includes('application/json') && !contentType.includes('text/json'))) {
32-
throw new Error(`Invalid content type: ${contentType}`);
62+
logger.error(`${LOG_PREFIX} Invalid content type:`, {
63+
contentType,
64+
url: url.toString()
65+
});
66+
throw new Error(`Invalid content type received: ${contentType}`);
3367
}
3468

3569

3670
const data = await response.json();
3771
if (!data || typeof data !== 'object') {
72+
logger.error(`${LOG_PREFIX} Invalid response format:`, data);
3873
throw new Error('Invalid response format');
3974
}
4075

41-
logger.info('Received app config:', data);
76+
logger.info(`${LOG_PREFIX} Received valid config:`, data);
4277

4378
store.dispatch(setAppInfo(data));
4479

4580
return data;
4681
} catch (error) {
47-
logger.error('Failed to fetch app config:', {
82+
logger.error(`${LOG_PREFIX} Config fetch failed:`, {
4883
error,
4984
sessionId,
50-
url: BASE_API_URL ? `${BASE_API_URL}/appInfo` : '/api/appInfo'
85+
url: BASE_API_URL ? `${BASE_API_URL}/appInfo` : '/appInfo',
86+
env: process.env.NODE_ENV
5187
});
5288
throw error;
5389
}

webapp/src/store/index.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,25 @@
11
import {configureStore} from '@reduxjs/toolkit';
2+
import { Middleware } from '@reduxjs/toolkit';
23
import configReducer from './slices/configSlice';
34
import messageReducer from './slices/messageSlice';
45
import uiReducer from './slices/uiSlice';
56
import userReducer from './slices/userSlice';
6-
import {Middleware} from 'redux';
7+
78
// Utility function to get formatted timestamp
89
const getTimestamp = () => new Date().toISOString().split('T')[1].slice(0, -1);
910

1011
// Custom middleware for logging actions and state changes
11-
const logger: Middleware = (store) => (next) => (action) => {
12+
const logger: Middleware = (store) => (next) => (action: unknown) => {
1213
const timestamp = getTimestamp();
13-
console.group(`%c Redux Action: ${action.type} @ ${timestamp}`, 'color: #8833FF; font-weight: bold;');
14+
const actionObj = action as any;
15+
console.group(`%c Redux Action: ${actionObj.type} @ ${timestamp}`, 'color: #8833FF; font-weight: bold;');
1416
// Log previous state
1517
console.log('%c Previous State:', 'color: #9E9E9E; font-weight: bold;', store.getState());
1618
// Log action with different styling
1719
console.log('%c Action:', 'color: #00BCD4; font-weight: bold;', {
18-
type: action.type,
19-
payload: action.payload,
20-
meta: action.meta,
20+
type: actionObj.type,
21+
payload: actionObj.payload,
22+
meta: actionObj.meta,
2123
});
2224

2325
const result = next(action);

webapp/src/styles/GlobalStyles.ts

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
1-
import {createGlobalStyle, DefaultTheme} from 'styled-components';
1+
import {createGlobalStyle} from 'styled-components';
2+
import type {DefaultTheme} from 'styled-components';
3+
24
// Enhanced logging function with timestamp
35
const logStyleChange = (component: string, property: string, value: any) => {
46
const timestamp = new Date().toISOString();
57
console.log(`[${timestamp}] GlobalStyles: ${component} - ${property}:`, value);
68
};
79

8-
export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
10+
const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme; }>`
911
/* Theme CSS variables */
1012
:root {
11-
/* Add theme variables */
12-
--theme-background: ${({theme}) => theme.colors.background};
13-
--theme-text: ${({theme}) => theme.colors.text.primary};
14-
--theme-surface: ${({theme}) => theme.colors.surface};
15-
--theme-border: ${({theme}) => theme.colors.border};
16-
--theme-primary: ${({theme}) => theme.colors.primary};
13+
/* Theme variables are now set dynamically in ThemeProvider */
1714
}
1815
1916
/* Override Prism.js theme colors to match current theme */
2017
.token.comment,
2118
.token.prolog,
2219
.token.doctype,
2320
.token.cdata {
24-
color: ${({theme}) => theme.colors.text.secondary};
21+
color: var(--theme-text-secondary);
2522
}
2623
2724
.token.punctuation {
28-
color: ${({theme}) => theme.colors.text.primary};
25+
color: var(--theme-text);
2926
}
3027
3128
.token.property,
3229
.token.tag,
3330
.token.constant,
3431
.token.symbol {
35-
color: ${({theme}) => theme.colors.primary};
32+
color: var(--theme-primary);
3633
}
3734
3835
.token.boolean,
@@ -100,23 +97,11 @@ export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
10097
}
10198
10299
body {
103-
font-family: ${({theme}: { theme: DefaultTheme }) => {
104-
logStyleChange('body', 'font-family', theme.typography.fontFamily);
105-
return theme.typography.fontFamily;
106-
}};
107-
background-color: ${({theme}: { theme: DefaultTheme }) => {
108-
logStyleChange('body', 'background-color', theme.colors.background);
109-
return theme.colors.background;
110-
}};
111-
color: ${({theme}: { theme: DefaultTheme }) => {
112-
logStyleChange('body', 'color', theme.colors.text.primary);
113-
return theme.colors.text.primary;
114-
}};
100+
font-family: var(--theme-font-family);
101+
background-color: var(--theme-background);
102+
color: var(--theme-text);
115103
line-height: 1.5;
116-
font-size: ${({theme}: { theme: DefaultTheme }) => {
117-
logStyleChange('body', 'font-size', theme.typography.fontSize.md);
118-
return theme.typography.fontSize.md;
119-
}};
104+
font-size: var(--theme-font-size-md);
120105
}
121106
122107
.chat-input {
@@ -192,4 +177,5 @@ export const GlobalStyles = createGlobalStyle<{ theme: DefaultTheme }>`
192177
transform: translateY(0);
193178
box-shadow: ${({theme}) => theme.shadows.medium};
194179
}
195-
`;
180+
`;
181+
export { GlobalStyles };

webapp/src/themes/ThemeProvider.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {useSelector} from 'react-redux';
44
import {RootState} from '../store';
55
import {logThemeChange, ThemeName, themes} from './themes';
66
import Prism from 'prismjs';
7+
import {GlobalStyles} from '../styles/GlobalStyles';
78

89
interface ThemeProviderProps {
910
children: React.ReactNode;
@@ -50,12 +51,9 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
5051
// Add theme CSS variables to root
5152
styleEl.textContent = `
5253
:root {
53-
--theme-background: ${themes[currentTheme].colors.background};
54-
--theme-text: ${themes[currentTheme].colors.text.primary};
55-
--theme-surface: ${themes[currentTheme].colors.surface};
56-
--theme-border: ${themes[currentTheme].colors.border};
57-
--theme-primary: ${themes[currentTheme].colors.primary};
58-
--theme-code-font: ${themes[currentTheme].typography.console.fontFamily};
54+
--theme-text-secondary: ${themes[currentTheme].colors.text.secondary};
55+
--theme-font-family: ${themes[currentTheme].typography.fontFamily};
56+
--theme-font-size-md: ${themes[currentTheme].typography.fontSize.md};
5957
}
6058
/* Theme-specific message content styles */
6159
.message-content {
@@ -151,7 +149,10 @@ export const ThemeProvider: React.FC<ThemeProviderProps> = ({children}) => {
151149
);
152150
}
153151

154-
return <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>;
152+
return (
153+
<StyledThemeProvider theme={theme}>
154+
<GlobalStyles theme={theme} />{children}
155+
</StyledThemeProvider>);
155156
};
156157

157158
// Log available themes on module load

webapp/src/types/qrcode.d.ts

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1-
declare module 'qrcode-generator' {
1+
declare module "qrcode-generator" {
22
export interface QRCode {
33
addData(data: string): void;
44

55
make(): void;
6+
createImgTag(cellSize?: number, margin?: number): string;
67

78
createDataURL(cellSize?: number, margin?: number): string;
89

910
createSvgTag(cellSize?: number, margin?: number): string;
11+
createASCII(cellSize?: number, margin?: number): string;
12+
getModuleCount(): number;
13+
isDark(row: number, col: number): boolean;
1014
}
1115

1216
export interface QRCodeGenerator {
13-
TypeNumber: number;
17+
QRCode: QRCode;
18+
TypeNumber: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 40;
1419
ErrorCorrectionLevel: {
1520
L: string;
1621
M: string;
1722
Q: string;
1823
H: string;
1924
};
2025

21-
(type?: number, errorCorrectionLevel?: string): QRCode;
26+
(typeNumber?: number, errorCorrectionLevel?: string): QRCode;
2227
}
2328

2429
const qrcode: QRCodeGenerator;

webapp/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"compilerOptions": {
33
"target": "es6",
44
"lib": ["dom", "dom.iterable", "esnext"],
5-
"types": ["node", "react", "react-dom", "styled-components", "qrcode-generator"],
5+
"types": ["node", "react", "react-dom", "styled-components"],
66
"typeRoots": ["./node_modules/@types", "./src/types"],
77
"allowJs": true,
88
"skipLibCheck": true,

0 commit comments

Comments
 (0)