refactor UI components and add Spring AI agents app

Author: Yuriy Bezsonov

apps/aiagent-agentcore/aiagent/.gitignore

@@ -0,0 +1,10 @@
+*.class
+*.jar
+*.war
+target/
+build/
+.idea/
+*.iml
+.settings/
+.classpath
+.project

apps/aiagent-agentcore/aiagent/src/main/resources/static/agent-icon.svg

@@ -17,19 +17,56 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     const config = await loadConfig();
 
+    // Auto-resize textarea
+    userInput.addEventListener('input', function() {
+        this.style.height = 'auto';
+        this.style.height = this.scrollHeight + 'px';
+    });
+
+    // Submit on Enter, newline on Shift+Enter
+    userInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            chatForm.requestSubmit();
+        }
+    });
+
     if (uploadBtn) {
         if (isAttachmentsEnabled(config)) {
             uploadBtn.classList.remove('hidden');
         } else {
             uploadBtn.classList.add('hidden');
-            userInput.classList.add('rounded-l-lg');
         }
     }
 
+    // Initialize model selector
+    const modelSelect = document.getElementById('modelSelect');
+    const models = getModels(config);
+    if (modelSelect && models.length > 0) {
+        modelSelect.classList.remove('hidden');
+        models.forEach(m => {
+            const opt = document.createElement('option');
+            opt.value = m.id;
+            opt.textContent = m.name;
+            if (m.default) opt.selected = true;
+            modelSelect.appendChild(opt);
+        });
+        const saved = getSelectedModel();
+        if (saved && models.some(m => m.id === saved)) {
+            modelSelect.value = saved;
+        } else {
+            const def = models.find(m => m.default) || models[0];
+            setSelectedModel(def.id);
+        }
+        modelSelect.addEventListener('change', () => setSelectedModel(modelSelect.value));
+    } else if (modelSelect) {
+        modelSelect.classList.add('hidden');
+    }
+
     const loginMessage = document.getElementById('loginMessage');
     if (loginMessage) {
         if (config.authType === 'simple') {
-            loginMessage.textContent = 'Local Mode - Enter any username to continue';
+            loginMessage.textContent = 'Local Mode — Enter any username to continue';
         } else {
             loginMessage.textContent = 'Sign in with your Cognito credentials';
         }
@@ -43,10 +80,8 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     loginForm.addEventListener('submit', async function(e) {
         e.preventDefault();
-
         const username = document.getElementById('username').value;
         const password = document.getElementById('password').value;
-
         loginError.classList.add('hidden');
 
         try {
@@ -60,7 +95,6 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     chatForm.addEventListener('submit', async function(e) {
         e.preventDefault();
-
         const message = userInput.value.trim();
         if (!message) return;
 
@@ -69,16 +103,19 @@ document.addEventListener('DOMContentLoaded', async function() {
             return;
         }
 
-        addMessage(message, 'user');
+        const userMsg = addMessage(message, 'user');
+        requestAnimationFrame(() => {
+            const headerH = document.querySelector('.chat-header').offsetHeight;
+            const msgTop = userMsg.getBoundingClientRect().top + chatScreen.scrollTop - chatScreen.getBoundingClientRect().top;
+            chatScreen.scrollTo({ top: msgTop - headerH - 24, behavior: 'smooth' });
+        });
         userInput.value = '';
+        userInput.style.height = 'auto';
 
         const auth = loadAuth();
-        if (!auth || Date.now() >= (auth.expiresAt - 300000)) {
+        if (isSessionExpired(auth)) {
             addMessage('Your session has expired. Please log in again.', 'ai', { isError: true });
-            setTimeout(() => {
-                clearAuth();
-                showLoginScreen();
-            }, 2000);
+            setTimeout(() => { clearAuth(); showLoginScreen(); }, 2000);
             return;
         }
 
@@ -91,16 +128,14 @@ document.addEventListener('DOMContentLoaded', async function() {
         } catch (error) {
             removeLoading(loadingId);
             const retryFn = async () => {
-                const errorMsg = messageContainer.lastElementChild;
+                const container = document.getElementById('messageContainer');
+                const errorMsg = container.lastElementChild;
                 if (errorMsg) errorMsg.remove();
 
                 const freshAuth = loadAuth();
-                if (!freshAuth || Date.now() >= (freshAuth.expiresAt - 300000)) {
+                if (isSessionExpired(freshAuth)) {
                     addMessage('Your session has expired. Please log in again.', 'ai', { isError: true });
-                    setTimeout(() => {
-                        clearAuth();
-                        showLoginScreen();
-                    }, 2000);
+                    setTimeout(() => { clearAuth(); showLoginScreen(); }, 2000);
                     return;
                 }
 
@@ -122,15 +157,18 @@ document.addEventListener('DOMContentLoaded', async function() {
 
     const themeIcon = document.getElementById('themeIcon');
     themeToggle.addEventListener('click', function() {
-        const html = document.documentElement;
-        html.classList.toggle('dark');
-        themeIcon.textContent = html.classList.contains('dark') ? '☀️' : '🌙';
-        localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
+        document.documentElement.classList.toggle('light');
+        const isLight = document.documentElement.classList.contains('light');
+        themeIcon.textContent = isLight ? '🌙' : '☀️';
+        localStorage.setItem('theme', isLight ? 'light' : 'dark');
     });
 
     if (localStorage.getItem('theme') === 'dark') {
-        document.documentElement.classList.add('dark');
+        document.documentElement.classList.remove('light');
         themeIcon.textContent = '☀️';
+    } else {
+        document.documentElement.classList.add('light');
+        themeIcon.textContent = '🌙';
     }
 
     logoutBtn.addEventListener('click', function() {
@@ -158,7 +196,7 @@ document.addEventListener('DOMContentLoaded', async function() {
     function showChatScreen() {
         loginScreen.classList.add('hidden');
         chatScreen.classList.remove('hidden');
-
+        chatScreen.scrollTop = 0;
         const auth = loadAuth();
         if (auth) {
             userDisplay.textContent = auth.username;

apps/aiagent-agentcore/aiagent/src/main/resources/static/app.js

@@ -24,11 +24,13 @@ function clearAuth() {
 
 function isAuthenticated() {
     const auth = loadAuth();
-    if (!auth || !auth.accessToken || !auth.expiresAt) {
-        return false;
-    }
-    // 5 minute buffer before expiry
-    return Date.now() < (auth.expiresAt - 300000);
+    if (!auth || !auth.expiresAt) return false;
+    if (auth.authType !== 'simple' && !auth.accessToken) return false;
+    return !isSessionExpired(auth);
+}
+
+function isSessionExpired(auth) {
+    return !auth || Date.now() >= (auth.expiresAt - 300000);
 }
 
 async function authenticateUser(username, password, config) {
@@ -45,9 +47,7 @@ async function authenticateSimple(username, password) {
 
     const auth = {
         username: username,
-        accessToken: 'local-dev-token',
-        idToken: 'local-dev-token',
-        expiresAt: Date.now() + (24 * 60 * 60 * 1000), // 24 hours
+        expiresAt: Date.now() + (24 * 60 * 60 * 1000),
         authType: 'simple'
     };
 
@@ -89,10 +89,15 @@ async function authenticateCognito(username, password, config) {
                 const accessToken = result.getAccessToken().getJwtToken();
                 const idToken = result.getIdToken().getJwtToken();
                 const expiresAt = Date.now() + (result.getAccessToken().getExpiration() * 1000);
-                const payload = JSON.parse(atob(accessToken.split('.')[1]));
+                
+                let parsedUsername = username;
+                try {
+                    const payload = JSON.parse(atob(accessToken.split('.')[1]));
+                    parsedUsername = payload.username || username;
+                } catch (e) {}
 
                 const auth = {
-                    username: payload.username || username,
+                    username: parsedUsername,
                     accessToken: accessToken,
                     idToken: idToken,
                     expiresAt: expiresAt,