From 014033e7e1ac7609f711a652f22074e7605f9364 Mon Sep 17 00:00:00 2001
From: mmeckes <mmeckes@amazon.com>
Date: Tue, 3 Jun 2025 17:09:09 +0100
Subject: [PATCH 1/3] Created ui project and added thymeleaf frontend. Moved
 APIs under /api path. Added web controller for 2 chat routes. One standard
 HTTP and one streaming.

---
 .../README.md                                 | 70 +++++++++++++++++++
 .../pom.xml                                   | 61 ++++++++++++++++
 .../java/com/unicorn/AgentsApplication.java   | 13 ++++
 .../com/unicorn/agents/ChatController.java    | 28 ++++++++
 .../com/unicorn/agents/DateTimeTools.java     | 14 ++++
 .../com/unicorn/agents/PromptRequest.java     |  3 +
 .../src/main/resources/application.properties |  6 ++
 .../agents/AgentsApplicationTests.java        | 13 ++++
 8 files changed, 208 insertions(+)
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/README.md
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/pom.xml
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/AgentsApplication.java
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/ChatController.java
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/DateTimeTools.java
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/PromptRequest.java
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/resources/application.properties
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/test/java/com/unicorn/agents/AgentsApplicationTests.java

diff --git a/samples/spring-ai-simple-chat-client-with-ui/README.md b/samples/spring-ai-simple-chat-client-with-ui/README.md
new file mode 100644
index 00000000..176ba17f
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/README.md
@@ -0,0 +1,70 @@
+# Spring AI Simple Chat Client
+
+A lightweight Spring Boot application demonstrating the integration of Spring AI with Amazon Bedrock to create a simple chat API. 
+
+## Features
+
+- REST API endpoints for AI chat interactions
+- Support for both synchronous and streaming responses
+- Custom tool integration
+- Integration with Amazon Bedrock's Claude 3 Sonnet model
+
+## Prerequisites
+
+- Java 21
+- Maven
+- AWS account with access to Amazon Bedrock
+- AWS credentials configured locally
+
+## Configuration
+
+The application is configured to use Amazon Bedrock's Claude 3 Sonnet model in the EU West 1 region. You can modify these settings in `application.properties`:
+
+```properties
+spring.application.name=agents
+spring.ai.bedrock.aws.region=eu-west-1
+spring.ai.bedrock.converse.chat.options.model=eu.anthropic.claude-3-7-sonnet-20250219-v1:0
+```
+
+## Building and Running
+
+```bash
+mvn spring-boot:run
+```
+
+The application will start on port 8080 by default.
+
+## API Endpoints
+
+### 1. Synchronous Chat Endpoint
+
+Send a prompt and receive a complete response:
+
+```bash
+curl -XPOST 'http://localhost:8080/ai' \
+  -H "Content-Type: application/json" \
+  -d '{"prompt":"Tell me about Spring AI in 2 sentences."}'
+```
+
+### 2. Streaming Chat Endpoint
+
+Send a prompt and receive the response as a stream (useful for real-time UI updates):
+
+```bash
+curl -XPOST -N 'http://localhost:8080/ai/stream' \
+  -H "Content-Type: application/json" \
+  -d '{"prompt":"Who is George Mallory?"}'
+```
+
+### 3. With tool use
+
+curl -XPOST -N 'http://localhost:8080/ai/stream' \
+  -H "Content-Type: application/json" \
+  -d '{"prompt":"What is the current date and time?"}'
+
+## Project Structure
+
+- `ChatController.java`: Defines the REST endpoints for chat interactions
+- `PromptRequest.java`: Simple record class for the request payload
+- `DateTimeTools.java`: Custom tool that provides date/time information to the AI
+- `AgentsApplication.java`: Spring Boot application entry point
diff --git a/samples/spring-ai-simple-chat-client-with-ui/pom.xml b/samples/spring-ai-simple-chat-client-with-ui/pom.xml
new file mode 100644
index 00000000..79d40658
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/pom.xml
@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
+    <modelVersion>4.0.0</modelVersion>
+    <parent>
+        <groupId>org.springframework.boot</groupId>
+        <artifactId>spring-boot-starter-parent</artifactId>
+        <version>3.4.5</version>
+        <relativePath/> <!-- lookup parent from repository -->
+    </parent>
+    <groupId>com.unicorn</groupId>
+    <artifactId>agents</artifactId>
+    <version>0.0.1-SNAPSHOT</version>
+    <name>agents</name>
+    <description>Simple Bedrock Chat Client for Spring AI</description>
+    <properties>
+        <java.version>21</java.version>
+        <spring-ai.version>1.0.0</spring-ai.version>
+    </properties>
+    <dependencies>
+        <dependency>
+            <groupId>org.springframework.ai</groupId>
+            <artifactId>spring-ai-starter-model-bedrock-converse</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-web</artifactId>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-test</artifactId>
+            <scope>test</scope>
+        </dependency>
+        <dependency>
+            <groupId>org.springframework.boot</groupId>
+            <artifactId>spring-boot-starter-thymeleaf</artifactId>
+        </dependency>
+    </dependencies>
+    <dependencyManagement>
+        <dependencies>
+            <dependency>
+                <groupId>org.springframework.ai</groupId>
+                <artifactId>spring-ai-bom</artifactId>
+                <version>${spring-ai.version}</version>
+                <type>pom</type>
+                <scope>import</scope>
+            </dependency>
+        </dependencies>
+
+    </dependencyManagement>
+
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+        </plugins>
+    </build>
+
+</project>
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/AgentsApplication.java b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/AgentsApplication.java
new file mode 100644
index 00000000..a8288708
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/AgentsApplication.java
@@ -0,0 +1,13 @@
+package com.unicorn;
+
+import org.springframework.boot.SpringApplication;
+import org.springframework.boot.autoconfigure.SpringBootApplication;
+
+@SpringBootApplication
+public class AgentsApplication {
+
+	public static void main(String[] args) {
+		SpringApplication.run(AgentsApplication.class, args);
+	}
+
+}
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/ChatController.java b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/ChatController.java
new file mode 100644
index 00000000..8a9dab60
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/ChatController.java
@@ -0,0 +1,28 @@
+package com.unicorn.agents;
+
+import org.springframework.ai.chat.client.ChatClient;
+import org.springframework.web.bind.annotation.*;
+import reactor.core.publisher.Flux;
+
+@RestController
+@RequestMapping("/api")
+public class ChatController {
+
+	private final ChatClient chatClient;
+
+	public ChatController (ChatClient.Builder chatClient){
+		this.chatClient = chatClient
+				.defaultTools(new DateTimeTools())
+				.build();
+	}
+
+	@PostMapping("/ai")
+	public String myAgent(@RequestBody PromptRequest promptRequest){
+		return chatClient.prompt().user(promptRequest.prompt()).call().chatResponse().getResult().getOutput().getText();
+	}
+
+	@PostMapping("/ai/stream")
+	public Flux<String> myStreamingAgent(@RequestBody PromptRequest promptRequest){
+		return chatClient.prompt().user(promptRequest.prompt()).stream().content();
+	}
+}
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/DateTimeTools.java b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/DateTimeTools.java
new file mode 100644
index 00000000..7d3c3789
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/DateTimeTools.java
@@ -0,0 +1,14 @@
+package com.unicorn.agents;
+
+import java.time.LocalDateTime;
+import org.springframework.ai.tool.annotation.Tool;
+import org.springframework.context.i18n.LocaleContextHolder;
+
+class DateTimeTools {
+
+    @Tool(description = "Get the current date and time in the user's timezone")
+    String getCurrentDateTime(String param) {
+        return LocalDateTime.now().atZone(LocaleContextHolder.getTimeZone().toZoneId()).toString();
+    }
+
+}
\ No newline at end of file
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/PromptRequest.java b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/PromptRequest.java
new file mode 100644
index 00000000..3132b077
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/PromptRequest.java
@@ -0,0 +1,3 @@
+package com.unicorn.agents;
+
+public record PromptRequest(String prompt){};
\ No newline at end of file
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/application.properties b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/application.properties
new file mode 100644
index 00000000..7de8da22
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/application.properties
@@ -0,0 +1,6 @@
+spring.application.name=unicorn-store
+spring.ai.bedrock.aws.region=eu-west-1
+spring.ai.bedrock.converse.chat.options.model=eu.anthropic.claude-3-7-sonnet-20250219-v1:0
+spring.thymeleaf.cache=false
+spring.thymeleaf.prefix=classpath:/templates/
+spring.thymeleaf.suffix=.html
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/test/java/com/unicorn/agents/AgentsApplicationTests.java b/samples/spring-ai-simple-chat-client-with-ui/src/test/java/com/unicorn/agents/AgentsApplicationTests.java
new file mode 100644
index 00000000..a2a7766a
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/test/java/com/unicorn/agents/AgentsApplicationTests.java
@@ -0,0 +1,13 @@
+package com.unicorn.agents;
+
+import org.junit.jupiter.api.Test;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+class AgentsApplicationTests {
+
+	@Test
+	void contextLoads() {
+	}
+
+}

From 36705253be1db532919386145e7cc56522bd7dc5 Mon Sep 17 00:00:00 2001
From: mmeckes <mmeckes@amazon.com>
Date: Tue, 3 Jun 2025 17:12:52 +0100
Subject: [PATCH 2/3] Created ui project and added thymeleaf frontend. Moved
 APIs under /api path. Added web controller for 2 chat routes. One standard
 HTTP and one streaming.

---
 .../com/unicorn/agents/WebController.java     |  23 ++
 .../src/main/resources/static/css/main.css    |  10 +
 .../resources/static/images/unicorn-logo.svg  |   9 +
 .../src/main/resources/templates/chat.html    | 174 ++++++++++++++++
 .../main/resources/templates/stream-chat.html | 196 ++++++++++++++++++
 5 files changed, 412 insertions(+)
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/WebController.java
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/css/main.css
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/images/unicorn-logo.svg
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
 create mode 100644 samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html

diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/WebController.java b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/WebController.java
new file mode 100644
index 00000000..492c4b0a
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/java/com/unicorn/agents/WebController.java
@@ -0,0 +1,23 @@
+package com.unicorn.agents;
+
+import org.springframework.stereotype.Controller;
+import org.springframework.web.bind.annotation.GetMapping;
+
+@Controller
+public class WebController {
+
+    @GetMapping("/")
+    public String home() {
+        return "redirect:/chat";
+    }
+
+    @GetMapping("/chat")
+    public String chatPage() {
+        return "chat";
+    }
+
+    @GetMapping("/stream-chat")
+    public String streamChatPage() {
+        return "stream-chat";
+    }
+}
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/css/main.css b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/css/main.css
new file mode 100644
index 00000000..b1bb673b
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/css/main.css
@@ -0,0 +1,10 @@
+/* Custom styles for Unicorn Store */
+.unicorn-gradient {
+    background: linear-gradient(135deg, #f5f3ff, #fce7f3);
+}
+
+.unicorn-shadow {
+    box-shadow: 0 4px 14px rgba(156, 39, 176, 0.1);
+}
+
+/* Any additional custom styles can be added here */
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/images/unicorn-logo.svg b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/images/unicorn-logo.svg
new file mode 100644
index 00000000..108f881c
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/static/images/unicorn-logo.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
+  <path fill="#99AAB5" d="M36 36v-2c0-3.314-2.686-6-6-6H14c-3.313 0-6 2.686-6 6v2h28z"/>
+  <path fill="#E1E8ED" d="M29 3.278C29 1.468 23.18 0 16 0S3 1.468 3 3.278v18.496C3 23.532 8.82 25 16 25s13-1.468 13-3.226V3.278z"/>
+  <path fill="#99AAB5" d="M16 18c-7.18 0-13-1.468-13-3.278v3.556C3 20.086 8.82 21.5 16 21.5s13-1.414 13-3.222v-3.556C29 16.532 23.18 18 16 18z"/>
+  <path fill="#99AAB5" d="M16 11c-7.18 0-13-1.468-13-3.278v3.556C3 13.086 8.82 14.5 16 14.5s13-1.414 13-3.222V7.722C29 9.532 23.18 11 16 11z"/>
+  <path fill="#F4ABBA" d="M16 7c-7.18 0-13-1.468-13-3.278S8.82.5 16 .5s13 1.414 13 3.222S23.18 7 16 7z"/>
+  <path fill="#DD2E44" d="M16 4c-4.411 0-8-1.119-8-2.5S11.589-1 16-1s8 1.119 8 2.5-3.589 2.5-8 2.5z"/>
+  <path fill="#EA596E" d="M18 3.5c0 .829-2 1.5-2 1.5s-2-.671-2-1.5S14.5 2 16 2s2 .671 2 1.5z"/>
+</svg>
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
new file mode 100644
index 00000000..99f2b20d
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unicorn Store Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .chat-container {
+            height: calc(100vh - 180px);
+        }
+        .message-container {
+            height: calc(100vh - 280px);
+            overflow-y: auto;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-r from-purple-100 to-pink-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-8">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                    <h1 class="text-3xl font-bold text-purple-800">🦄 Unicorn Store</h1>
+                </div>
+                <nav class="flex space-x-4">
+                    <a href="/chat" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">Standard Chat</a>
+                    <a href="/stream-chat" class="px-4 py-2 bg-pink-500 text-white rounded-lg font-medium hover:bg-pink-600">Streaming Chat</a>
+                </nav>
+            </div>
+            <p class="text-gray-600 mt-2">Chat with our magical assistant to find your perfect unicorn!</p>
+        </header>
+
+        <!-- Chat Interface -->
+        <div class="bg-white rounded-xl shadow-lg p-6 chat-container">
+            <div class="message-container mb-4" id="messageContainer">
+                <div class="flex mb-4">
+                    <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                        <span class="text-lg">🦄</span>
+                    </div>
+                    <div class="bg-purple-100 rounded-lg p-3 max-w-3xl">
+                        <p class="text-gray-800">Welcome to the Unicorn Store! How can I help you find your magical companion today?</p>
+                    </div>
+                </div>
+                <!-- Messages will be added here dynamically -->
+            </div>
+
+            <!-- Input Area -->
+            <div class="border-t pt-4">
+                <form id="chatForm" class="flex">
+                    <input type="text" id="userInput" class="flex-grow border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ask about our unicorns...">
+                    <button type="submit" class="bg-purple-600 text-white px-6 py-2 rounded-r-lg hover:bg-purple-700 transition">Send</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const messageContainer = document.getElementById('messageContainer');
+            const chatForm = document.getElementById('chatForm');
+            const userInput = document.getElementById('userInput');
+
+            chatForm.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                
+                const message = userInput.value.trim();
+                if (!message) return;
+                
+                // Add user message to chat
+                addMessage(message, 'user');
+                userInput.value = '';
+                
+                try {
+                    // Show loading indicator
+                    const loadingId = showLoading();
+                    
+                    // Send request to backend
+                    const response = await fetch('/api/ai', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ prompt: message })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error('Failed to get response');
+                    }
+                    
+                    const data = await response.text();
+                    
+                    // Remove loading indicator
+                    removeLoading(loadingId);
+                    
+                    // Add AI response to chat
+                    addMessage(data, 'ai');
+                } catch (error) {
+                    console.error('Error:', error);
+                    addMessage('Sorry, I encountered an error. Please try again.', 'ai');
+                }
+            });
+            
+            function addMessage(content, sender) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'flex mb-4';
+                
+                if (sender === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="ml-auto flex">
+                            <div class="bg-blue-100 rounded-lg p-3 max-w-3xl">
+                                <p class="text-gray-800">${escapeHtml(content)}</p>
+                            </div>
+                            <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center ml-3">
+                                <span class="text-lg">👤</span>
+                            </div>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                            <span class="text-lg">🦄</span>
+                        </div>
+                        <div class="bg-purple-100 rounded-lg p-3 max-w-3xl">
+                            <p class="text-gray-800">${escapeHtml(content)}</p>
+                        </div>
+                    `;
+                }
+                
+                messageContainer.appendChild(messageDiv);
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }
+            
+            function showLoading() {
+                const loadingId = 'loading-' + Date.now();
+                const loadingDiv = document.createElement('div');
+                loadingDiv.id = loadingId;
+                loadingDiv.className = 'flex mb-4';
+                loadingDiv.innerHTML = `
+                    <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                        <span class="text-lg">🦄</span>
+                    </div>
+                    <div class="bg-purple-100 rounded-lg p-3">
+                        <div class="flex space-x-2">
+                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                        </div>
+                    </div>
+                `;
+                messageContainer.appendChild(loadingDiv);
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+                return loadingId;
+            }
+            
+            function removeLoading(loadingId) {
+                const loadingDiv = document.getElementById(loadingId);
+                if (loadingDiv) {
+                    loadingDiv.remove();
+                }
+            }
+            
+            function escapeHtml(unsafe) {
+                return unsafe
+                    .replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#039;");
+            }
+        });
+    </script>
+</body>
+</html>
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html
new file mode 100644
index 00000000..39e66664
--- /dev/null
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html
@@ -0,0 +1,196 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Unicorn Store Streaming Chat</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .chat-container {
+            height: calc(100vh - 180px);
+        }
+        .message-container {
+            height: calc(100vh - 280px);
+            overflow-y: auto;
+        }
+        @keyframes blink {
+            0% { opacity: 1; }
+            50% { opacity: 0; }
+            100% { opacity: 1; }
+        }
+        .cursor {
+            display: inline-block;
+            width: 2px;
+            height: 1em;
+            background-color: #6b46c1;
+            margin-left: 2px;
+            animation: blink 1s infinite;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-r from-pink-100 to-purple-100 min-h-screen">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="mb-8">
+            <div class="flex justify-between items-center">
+                <div class="flex items-center">
+                    <h1 class="text-3xl font-bold text-pink-800">🦄 Unicorn Store</h1>
+                </div>
+                <nav class="flex space-x-4">
+                    <a href="/chat" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">Standard Chat</a>
+                    <a href="/stream-chat" class="px-4 py-2 bg-pink-500 text-white rounded-lg font-medium hover:bg-pink-600">Streaming Chat</a>
+                </nav>
+            </div>
+            <p class="text-gray-600 mt-2">Experience real-time streaming responses from our magical assistant!</p>
+        </header>
+
+        <!-- Chat Interface -->
+        <div class="bg-white rounded-xl shadow-lg p-6 chat-container">
+            <div class="message-container mb-4" id="messageContainer">
+                <div class="flex mb-4">
+                    <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
+                        <span class="text-lg">🦄</span>
+                    </div>
+                    <div class="bg-pink-100 rounded-lg p-3 max-w-3xl">
+                        <p class="text-gray-800">Welcome to the Unicorn Store streaming chat! Watch as responses appear in real-time. How can I help you find your magical companion today?</p>
+                    </div>
+                </div>
+                <!-- Messages will be added here dynamically -->
+            </div>
+
+            <!-- Input Area -->
+            <div class="border-t pt-4">
+                <form id="chatForm" class="flex">
+                    <input type="text" id="userInput" class="flex-grow border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Ask about our unicorns...">
+                    <button type="submit" class="bg-pink-600 text-white px-6 py-2 rounded-r-lg hover:bg-pink-700 transition">Send</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const messageContainer = document.getElementById('messageContainer');
+            const chatForm = document.getElementById('chatForm');
+            const userInput = document.getElementById('userInput');
+            let isStreaming = false;
+            let currentResponseElement = null;
+            let currentResponseText = '';
+
+            chatForm.addEventListener('submit', async function(e) {
+                e.preventDefault();
+                
+                const message = userInput.value.trim();
+                if (!message || isStreaming) return;
+                
+                // Add user message to chat
+                addMessage(message, 'user');
+                userInput.value = '';
+                
+                try {
+                    // Create AI response container
+                    currentResponseElement = createResponseContainer();
+                    isStreaming = true;
+                    
+                    // Send request to backend
+                    const response = await fetch('/api/ai/stream', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({ prompt: message })
+                    });
+                    
+                    if (!response.ok) {
+                        throw new Error('Failed to get response');
+                    }
+                    
+                    const reader = response.body.getReader();
+                    const decoder = new TextDecoder();
+                    
+                    // Process the stream
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        
+                        if (done) {
+                            // Remove cursor when stream ends
+                            const cursor = currentResponseElement.querySelector('.cursor');
+                            if (cursor) cursor.remove();
+                            break;
+                        }
+                        
+                        // Decode and append the chunk
+                        const chunk = decoder.decode(value);
+                        appendToResponse(chunk);
+                    }
+                } catch (error) {
+                    console.error('Error:', error);
+                    appendToResponse('Sorry, I encountered an error. Please try again.');
+                } finally {
+                    isStreaming = false;
+                    currentResponseElement = null;
+                    currentResponseText = '';
+                }
+            });
+            
+            function addMessage(content, sender) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = 'flex mb-4';
+                
+                if (sender === 'user') {
+                    messageDiv.innerHTML = `
+                        <div class="ml-auto flex">
+                            <div class="bg-blue-100 rounded-lg p-3 max-w-3xl">
+                                <p class="text-gray-800">${escapeHtml(content)}</p>
+                            </div>
+                            <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center ml-3">
+                                <span class="text-lg">👤</span>
+                            </div>
+                        </div>
+                    `;
+                }
+                
+                messageContainer.appendChild(messageDiv);
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }
+            
+            function createResponseContainer() {
+                const responseDiv = document.createElement('div');
+                responseDiv.className = 'flex mb-4';
+                responseDiv.innerHTML = `
+                    <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
+                        <span class="text-lg">🦄</span>
+                    </div>
+                    <div class="bg-pink-100 rounded-lg p-3 max-w-3xl">
+                        <p class="text-gray-800 response-text"></p>
+                        <span class="cursor"></span>
+                    </div>
+                `;
+                
+                messageContainer.appendChild(responseDiv);
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+                
+                return responseDiv;
+            }
+            
+            function appendToResponse(text) {
+                if (!currentResponseElement) return;
+                
+                currentResponseText += text;
+                const responseTextElement = currentResponseElement.querySelector('.response-text');
+                responseTextElement.textContent = currentResponseText;
+                messageContainer.scrollTop = messageContainer.scrollHeight;
+            }
+            
+            function escapeHtml(unsafe) {
+                return unsafe
+                    .replace(/&/g, "&amp;")
+                    .replace(/</g, "&lt;")
+                    .replace(/>/g, "&gt;")
+                    .replace(/"/g, "&quot;")
+                    .replace(/'/g, "&#039;");
+            }
+        });
+    </script>
+</body>
+</html>

From 00d3d58e74e7e244d49221d75c72d37617b8d370 Mon Sep 17 00:00:00 2001
From: mmeckes <mmeckes@amazon.com>
Date: Thu, 5 Jun 2025 09:19:58 +0100
Subject: [PATCH 3/3] Updated frontend to use a dark mode theme

---
 .../src/main/resources/templates/chat.html    | 80 +++++++++++++------
 .../main/resources/templates/stream-chat.html | 72 ++++++++++++-----
 2 files changed, 110 insertions(+), 42 deletions(-)

diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
index 99f2b20d..2b533b9b 100644
--- a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/chat.html
@@ -5,6 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unicorn Store Chat</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'dev-dark': '#1a1a1a',
+                        'dev-darker': '#121212',
+                        'dev-accent': '#6366f1',
+                        'dev-accent-hover': '#4f46e5',
+                        'dev-secondary': '#3b82f6',
+                        'dev-text': '#e2e8f0',
+                        'dev-text-muted': '#94a3b8',
+                        'dev-border': '#2d3748',
+                        'dev-message-user': '#1e293b',
+                        'dev-message-ai': '#1e1e2d'
+                    }
+                }
+            }
+        }
+    </script>
     <style>
         .chat-container {
             height: calc(100vh - 180px);
@@ -13,43 +33,57 @@
             height: calc(100vh - 280px);
             overflow-y: auto;
         }
+        /* Custom scrollbar for dark mode */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #3b3b3b;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #4b4b4b;
+        }
     </style>
 </head>
-<body class="bg-gradient-to-r from-purple-100 to-pink-100 min-h-screen">
+<body class="bg-dev-darker min-h-screen text-dev-text">
     <div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="mb-8">
             <div class="flex justify-between items-center">
                 <div class="flex items-center">
-                    <h1 class="text-3xl font-bold text-purple-800">🦄 Unicorn Store</h1>
+                    <h1 class="text-3xl font-bold text-dev-accent">🦄 Unicorn Store</h1>
                 </div>
                 <nav class="flex space-x-4">
-                    <a href="/chat" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">Standard Chat</a>
-                    <a href="/stream-chat" class="px-4 py-2 bg-pink-500 text-white rounded-lg font-medium hover:bg-pink-600">Streaming Chat</a>
+                    <a href="/chat" class="px-4 py-2 bg-dev-accent text-white rounded-lg font-medium hover:bg-dev-accent-hover transition">Standard Chat</a>
+                    <a href="/stream-chat" class="px-4 py-2 bg-dev-secondary text-white rounded-lg font-medium hover:opacity-90 transition">Streaming Chat</a>
                 </nav>
             </div>
-            <p class="text-gray-600 mt-2">Chat with our magical assistant to find your perfect unicorn!</p>
+            <p class="text-dev-text-muted mt-2">Chat with our magical assistant to find your perfect unicorn!</p>
         </header>
 
         <!-- Chat Interface -->
-        <div class="bg-white rounded-xl shadow-lg p-6 chat-container">
+        <div class="bg-dev-dark rounded-xl shadow-lg p-6 chat-container border border-dev-border">
             <div class="message-container mb-4" id="messageContainer">
                 <div class="flex mb-4">
-                    <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                    <div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
                         <span class="text-lg">🦄</span>
                     </div>
-                    <div class="bg-purple-100 rounded-lg p-3 max-w-3xl">
-                        <p class="text-gray-800">Welcome to the Unicorn Store! How can I help you find your magical companion today?</p>
+                    <div class="bg-dev-message-ai rounded-lg p-3 max-w-3xl border border-dev-border">
+                        <p class="text-dev-text">Welcome to the Unicorn Store! How can I help you find your magical companion today?</p>
                     </div>
                 </div>
                 <!-- Messages will be added here dynamically -->
             </div>
 
             <!-- Input Area -->
-            <div class="border-t pt-4">
+            <div class="border-t border-dev-border pt-4">
                 <form id="chatForm" class="flex">
-                    <input type="text" id="userInput" class="flex-grow border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-purple-500" placeholder="Ask about our unicorns...">
-                    <button type="submit" class="bg-purple-600 text-white px-6 py-2 rounded-r-lg hover:bg-purple-700 transition">Send</button>
+                    <input type="text" id="userInput" class="flex-grow bg-dev-darker border border-dev-border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-dev-accent text-dev-text" placeholder="Ask about our unicorns...">
+                    <button type="submit" class="bg-dev-accent text-white px-6 py-2 rounded-r-lg hover:bg-dev-accent-hover transition">Send</button>
                 </form>
             </div>
         </div>
@@ -108,21 +142,21 @@ <h1 class="text-3xl font-bold text-purple-800">🦄 Unicorn Store</h1>
                 if (sender === 'user') {
                     messageDiv.innerHTML = `
                         <div class="ml-auto flex">
-                            <div class="bg-blue-100 rounded-lg p-3 max-w-3xl">
-                                <p class="text-gray-800">${escapeHtml(content)}</p>
+                            <div class="bg-dev-message-user rounded-lg p-3 max-w-3xl border border-dev-border">
+                                <p class="text-dev-text">${escapeHtml(content)}</p>
                             </div>
-                            <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center ml-3">
+                            <div class="w-10 h-10 rounded-full bg-dev-secondary bg-opacity-20 flex items-center justify-center ml-3">
                                 <span class="text-lg">👤</span>
                             </div>
                         </div>
                     `;
                 } else {
                     messageDiv.innerHTML = `
-                        <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                        <div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
                             <span class="text-lg">🦄</span>
                         </div>
-                        <div class="bg-purple-100 rounded-lg p-3 max-w-3xl">
-                            <p class="text-gray-800">${escapeHtml(content)}</p>
+                        <div class="bg-dev-message-ai rounded-lg p-3 max-w-3xl border border-dev-border">
+                            <p class="text-dev-text">${escapeHtml(content)}</p>
                         </div>
                     `;
                 }
@@ -137,14 +171,14 @@ <h1 class="text-3xl font-bold text-purple-800">🦄 Unicorn Store</h1>
                 loadingDiv.id = loadingId;
                 loadingDiv.className = 'flex mb-4';
                 loadingDiv.innerHTML = `
-                    <div class="w-10 h-10 rounded-full bg-purple-200 flex items-center justify-center mr-3">
+                    <div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
                         <span class="text-lg">🦄</span>
                     </div>
-                    <div class="bg-purple-100 rounded-lg p-3">
+                    <div class="bg-dev-message-ai rounded-lg p-3 border border-dev-border">
                         <div class="flex space-x-2">
-                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce"></div>
-                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
-                            <div class="w-2 h-2 bg-purple-600 rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
+                            <div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
+                            <div class="w-2 h-2 bg-dev-accent rounded-full animate-bounce" style="animation-delay: 0.4s"></div>
                         </div>
                     </div>
                 `;
diff --git a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html
index 39e66664..32db8a49 100644
--- a/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html
+++ b/samples/spring-ai-simple-chat-client-with-ui/src/main/resources/templates/stream-chat.html
@@ -5,6 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Unicorn Store Streaming Chat</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'dev-dark': '#1a1a1a',
+                        'dev-darker': '#121212',
+                        'dev-accent': '#6366f1',
+                        'dev-accent-hover': '#4f46e5',
+                        'dev-secondary': '#3b82f6',
+                        'dev-text': '#e2e8f0',
+                        'dev-text-muted': '#94a3b8',
+                        'dev-border': '#2d3748',
+                        'dev-message-user': '#1e293b',
+                        'dev-message-ai': '#1e1e2d'
+                    }
+                }
+            }
+        }
+    </script>
     <style>
         .chat-container {
             height: calc(100vh - 180px);
@@ -22,47 +42,61 @@
             display: inline-block;
             width: 2px;
             height: 1em;
-            background-color: #6b46c1;
+            background-color: #6366f1;
             margin-left: 2px;
             animation: blink 1s infinite;
         }
+        /* Custom scrollbar for dark mode */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #1a1a1a;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #3b3b3b;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #4b4b4b;
+        }
     </style>
 </head>
-<body class="bg-gradient-to-r from-pink-100 to-purple-100 min-h-screen">
+<body class="bg-dev-darker min-h-screen text-dev-text">
     <div class="container mx-auto px-4 py-8">
         <!-- Header -->
         <header class="mb-8">
             <div class="flex justify-between items-center">
                 <div class="flex items-center">
-                    <h1 class="text-3xl font-bold text-pink-800">🦄 Unicorn Store</h1>
+                    <h1 class="text-3xl font-bold text-dev-accent">🦄 Unicorn Store</h1>
                 </div>
                 <nav class="flex space-x-4">
-                    <a href="/chat" class="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700">Standard Chat</a>
-                    <a href="/stream-chat" class="px-4 py-2 bg-pink-500 text-white rounded-lg font-medium hover:bg-pink-600">Streaming Chat</a>
+                    <a href="/chat" class="px-4 py-2 bg-dev-accent text-white rounded-lg font-medium hover:bg-dev-accent-hover transition">Standard Chat</a>
+                    <a href="/stream-chat" class="px-4 py-2 bg-dev-secondary text-white rounded-lg font-medium hover:opacity-90 transition">Streaming Chat</a>
                 </nav>
             </div>
-            <p class="text-gray-600 mt-2">Experience real-time streaming responses from our magical assistant!</p>
+            <p class="text-dev-text-muted mt-2">Experience real-time streaming responses from our magical assistant!</p>
         </header>
 
         <!-- Chat Interface -->
-        <div class="bg-white rounded-xl shadow-lg p-6 chat-container">
+        <div class="bg-dev-dark rounded-xl shadow-lg p-6 chat-container border border-dev-border">
             <div class="message-container mb-4" id="messageContainer">
                 <div class="flex mb-4">
-                    <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
+                    <div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
                         <span class="text-lg">🦄</span>
                     </div>
-                    <div class="bg-pink-100 rounded-lg p-3 max-w-3xl">
-                        <p class="text-gray-800">Welcome to the Unicorn Store streaming chat! Watch as responses appear in real-time. How can I help you find your magical companion today?</p>
+                    <div class="bg-dev-message-ai rounded-lg p-3 max-w-3xl border border-dev-border">
+                        <p class="text-dev-text">Welcome to the Unicorn Store streaming chat! Watch as responses appear in real-time. How can I help you find your magical companion today?</p>
                     </div>
                 </div>
                 <!-- Messages will be added here dynamically -->
             </div>
 
             <!-- Input Area -->
-            <div class="border-t pt-4">
+            <div class="border-t border-dev-border pt-4">
                 <form id="chatForm" class="flex">
-                    <input type="text" id="userInput" class="flex-grow border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-pink-500" placeholder="Ask about our unicorns...">
-                    <button type="submit" class="bg-pink-600 text-white px-6 py-2 rounded-r-lg hover:bg-pink-700 transition">Send</button>
+                    <input type="text" id="userInput" class="flex-grow bg-dev-darker border border-dev-border rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-dev-accent text-dev-text" placeholder="Ask about our unicorns...">
+                    <button type="submit" class="bg-dev-accent text-white px-6 py-2 rounded-r-lg hover:bg-dev-accent-hover transition">Send</button>
                 </form>
             </div>
         </div>
@@ -140,10 +174,10 @@ <h1 class="text-3xl font-bold text-pink-800">🦄 Unicorn Store</h1>
                 if (sender === 'user') {
                     messageDiv.innerHTML = `
                         <div class="ml-auto flex">
-                            <div class="bg-blue-100 rounded-lg p-3 max-w-3xl">
-                                <p class="text-gray-800">${escapeHtml(content)}</p>
+                            <div class="bg-dev-message-user rounded-lg p-3 max-w-3xl border border-dev-border">
+                                <p class="text-dev-text">${escapeHtml(content)}</p>
                             </div>
-                            <div class="w-10 h-10 rounded-full bg-blue-200 flex items-center justify-center ml-3">
+                            <div class="w-10 h-10 rounded-full bg-dev-secondary bg-opacity-20 flex items-center justify-center ml-3">
                                 <span class="text-lg">👤</span>
                             </div>
                         </div>
@@ -158,11 +192,11 @@ <h1 class="text-3xl font-bold text-pink-800">🦄 Unicorn Store</h1>
                 const responseDiv = document.createElement('div');
                 responseDiv.className = 'flex mb-4';
                 responseDiv.innerHTML = `
-                    <div class="w-10 h-10 rounded-full bg-pink-200 flex items-center justify-center mr-3">
+                    <div class="w-10 h-10 rounded-full bg-dev-accent bg-opacity-20 flex items-center justify-center mr-3">
                         <span class="text-lg">🦄</span>
                     </div>
-                    <div class="bg-pink-100 rounded-lg p-3 max-w-3xl">
-                        <p class="text-gray-800 response-text"></p>
+                    <div class="bg-dev-message-ai rounded-lg p-3 max-w-3xl border border-dev-border">
+                        <p class="text-dev-text response-text"></p>
                         <span class="cursor"></span>
                     </div>
                 `;