From 88d8deeb1a0cdc02fe544f6d1841c08cad820010 Mon Sep 17 00:00:00 2001 From: Andrew Charneski Date: Sat, 7 Dec 2024 10:10:57 -0500 Subject: [PATCH] wip --- webapp/src/App.css | 16 + webapp/src/App.tsx | 55 +- webapp/src/components/ChatInterface.tsx | 1 + webapp/src/components/InputArea.tsx | 13 +- webapp/src/components/Menu/Menu.tsx | 9 +- webapp/src/components/Menu/ThemeMenu.tsx | 41 +- webapp/src/components/Modal/Modal.tsx | 17 +- webapp/src/services/appConfig.ts | 31 +- webapp/src/store/slices/uiSlice.ts | 1 - .../resources/application/asset-manifest.json | 12 +- .../src/main/resources/application/index.html | 4 +- .../application/static/css/main.5553818f.css | 2 + .../static/css/main.5553818f.css.map | 1 + .../static/css/main.f03fa013.css.map | 2 +- .../application/static/js/main.438c6f5f.js | 1156 ++++++++++++++++ .../static/js/main.438c6f5f.js.LICENSE.txt | 72 + .../static/js/main.438c6f5f.js.map | 1 + .../application/static/js/main.4b9d9c08.js | 1171 +++++++++++++++++ .../static/js/main.4b9d9c08.js.LICENSE.txt | 72 + .../static/js/main.4b9d9c08.js.map | 1 + .../application/static/js/main.6ad171bb.js | 1156 ++++++++++++++++ .../static/js/main.6ad171bb.js.LICENSE.txt | 72 + .../static/js/main.6ad171bb.js.map | 1 + .../application/static/js/main.975738fc.js | 1155 ++++++++++++++++ .../static/js/main.975738fc.js.LICENSE.txt | 72 + .../static/js/main.975738fc.js.map | 1 + .../application/static/js/main.cbe366e6.js | 1155 ++++++++++++++++ .../static/js/main.cbe366e6.js.LICENSE.txt | 72 + .../static/js/main.cbe366e6.js.map | 1 + 29 files changed, 6295 insertions(+), 68 deletions(-) create mode 100644 webui/src/main/resources/application/static/css/main.5553818f.css create mode 100644 webui/src/main/resources/application/static/css/main.5553818f.css.map create mode 100644 webui/src/main/resources/application/static/js/main.438c6f5f.js create mode 100644 webui/src/main/resources/application/static/js/main.438c6f5f.js.LICENSE.txt create mode 100644 webui/src/main/resources/application/static/js/main.438c6f5f.js.map create mode 100644 webui/src/main/resources/application/static/js/main.4b9d9c08.js create mode 100644 webui/src/main/resources/application/static/js/main.4b9d9c08.js.LICENSE.txt create mode 100644 webui/src/main/resources/application/static/js/main.4b9d9c08.js.map create mode 100644 webui/src/main/resources/application/static/js/main.6ad171bb.js create mode 100644 webui/src/main/resources/application/static/js/main.6ad171bb.js.LICENSE.txt create mode 100644 webui/src/main/resources/application/static/js/main.6ad171bb.js.map create mode 100644 webui/src/main/resources/application/static/js/main.975738fc.js create mode 100644 webui/src/main/resources/application/static/js/main.975738fc.js.LICENSE.txt create mode 100644 webui/src/main/resources/application/static/js/main.975738fc.js.map create mode 100644 webui/src/main/resources/application/static/js/main.cbe366e6.js create mode 100644 webui/src/main/resources/application/static/js/main.cbe366e6.js.LICENSE.txt create mode 100644 webui/src/main/resources/application/static/js/main.cbe366e6.js.map diff --git a/webapp/src/App.css b/webapp/src/App.css index f7ced824..ab32540d 100644 --- a/webapp/src/App.css +++ b/webapp/src/App.css @@ -251,4 +251,20 @@ var(--color-gradient-start), var(--color-gradient-end) ); +} +/* Add loading and error container styles */ +.loading-container, +.error-container { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + padding: 2rem; + text-align: center; + background: var(--background-color, #fff); + color: var(--text-color, #333); +} +.error-container { + color: var(--error-color, #dc3545); } \ No newline at end of file diff --git a/webapp/src/App.tsx b/webapp/src/App.tsx index 7f9ec593..ea9aef5d 100644 --- a/webapp/src/App.tsx +++ b/webapp/src/App.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {Provider} from 'react-redux'; -import {store} from './store'; +import {Provider, useSelector} from 'react-redux'; +import {store, RootState} from './store'; import ErrorBoundary from './components/ErrorBoundary/ErrorBoundary'; import ErrorFallback from './components/ErrorBoundary/ErrorFallback'; import './App.css'; @@ -49,12 +49,20 @@ const LOG_PREFIX = '[App]'; Prism.manual = true; -const App: React.FC = () => { +// Create a separate component for the app content +const AppContent: React.FC = () => { console.group(`${LOG_PREFIX} Initializing v${APP_VERSION}`); console.log('Starting component render'); + const appConfig = useSelector((state: RootState) => state.config); const sessionId = websocket.getSessionId(); const isConnected = websocket.isConnected(); + React.useEffect(() => { + if (appConfig.applicationName) { + document.title = appConfig.applicationName; + console.log(`${LOG_PREFIX} Updated page title to:`, appConfig.applicationName); + } + }, [appConfig.applicationName]); console.log('WebSocket state:', { sessionId, isConnected @@ -81,36 +89,31 @@ const App: React.FC = () => { }; }, []); + return ( + +
+ + + +
+
+ ); +}; +// Create the main App component that provides the Redux store +const App: React.FC = () => { return ( - {(() => { - console.debug(`${LOG_PREFIX} Rendering Provider with store`); - return ( - - {(() => { - console.debug(`${LOG_PREFIX} Rendering ThemeProvider with theme`); - return ( - <> -
- - - -
- - ); - })()} -
- ); - })()} +
); }; + console.groupEnd(); console.log(`${LOG_PREFIX} v${APP_VERSION} loaded successfully`); diff --git a/webapp/src/components/ChatInterface.tsx b/webapp/src/components/ChatInterface.tsx index 904352a6..161537cb 100644 --- a/webapp/src/components/ChatInterface.tsx +++ b/webapp/src/components/ChatInterface.tsx @@ -57,6 +57,7 @@ const ChatInterface: React.FC = ({ const loadAppConfig = async () => { if (!sessionId) return; try { + console.info('Fetching app config'); const config = await fetchAppConfig(sessionId); if (mounted && config) { console.info('App config loaded successfully'); diff --git a/webapp/src/components/InputArea.tsx b/webapp/src/components/InputArea.tsx index c29dd052..ad0cce3c 100644 --- a/webapp/src/components/InputArea.tsx +++ b/webapp/src/components/InputArea.tsx @@ -1,5 +1,5 @@ import React, {memo, useCallback, useState} from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import {useSelector} from 'react-redux'; import {RootState} from '../store'; @@ -15,11 +15,14 @@ const log = (message: string, data?: unknown) => { } }; -const InputContainer = styled.div` +interface InputContainerProps { + $hide?: boolean; +} +const InputContainer = styled.div` padding: 1.5rem; background-color: ${(props) => props.theme.colors.surface}; border-top: 1px solid ${(props) => props.theme.colors.border}; - display: ${({theme}) => theme.config?.singleInput ? 'none' : 'block'}; + display: ${({theme, $hide}) => $hide ? 'none' : 'block'}; max-height: 10vh; position: sticky; bottom: 0; @@ -116,8 +119,10 @@ const InputArea = memo(function InputArea({onSendMessage}: InputAreaProps) { log('Initializing component'); const [message, setMessage] = useState(''); const config = useSelector((state: RootState) => state.config); + const messages = useSelector((state: RootState) => state.messages.messages); const [isSubmitting, setIsSubmitting] = useState(false); const textAreaRef = React.useRef(null); + const shouldHideInput = config.singleInput && messages.length > 0; const handleSubmit = useCallback((e: React.FormEvent) => { e.preventDefault(); @@ -167,7 +172,7 @@ const InputArea = memo(function InputArea({onSendMessage}: InputAreaProps) { return ( - +