build: add Docker deployment

Created a Dockerfile and nginx configuration and added environment
variables into the codebase to support Docker compose.

ref: N25B-282
This commit is contained in:
2025-11-14 14:06:12 +01:00
parent 04818f48d4
commit c05c74e412
5 changed files with 102 additions and 11 deletions

View File

@@ -4,13 +4,13 @@ export default function Robot() {
const [message, setMessage] = useState('');
const [listening, setListening] = useState(false);
const [conversation, setConversation] = useState<{"role": "user" | "assistant", "content": string}[]>([])
const [conversation, setConversation] = useState<{ "role": "user" | "assistant", "content": string }[]>([])
const conversationRef = useRef<HTMLDivElement | null>(null);
const [conversationIndex, setConversationIndex] = useState(0);
const sendMessage = async () => {
try {
const response = await fetch("http://localhost:8000/message", {
const response = await fetch(`${process.env.BACKEND_ADDRESS}/message`, {
method: "POST",
headers: {
"Content-Type": "application/json",
@@ -25,14 +25,14 @@ export default function Robot() {
};
useEffect(() => {
const eventSource = new EventSource("http://localhost:8000/sse");
const eventSource = new EventSource(`${process.env.BACKEND_ADDRESS}/sse`);
eventSource.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
if ("voice_active" in data) setListening(data.voice_active);
if ("speech" in data) setConversation(conversation => [...conversation, {"role": "user", "content": data.speech}]);
if ("llm_response" in data) setConversation(conversation => [...conversation, {"role": "assistant", "content": data.llm_response}]);
if ("speech" in data) setConversation(conversation => [...conversation, { "role": "user", "content": data.speech }]);
if ("llm_response" in data) setConversation(conversation => [...conversation, { "role": "assistant", "content": data.llm_response }]);
} catch {
console.log("Unparsable SSE message:", event.data);
}
@@ -65,7 +65,7 @@ export default function Robot() {
<div className={"flex-col gap-lg align-center"}>
<h2>Conversation</h2>
<p>Listening {listening ? "🟢" : "🔴"}</p>
<div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto"}} ref={conversationRef}>
<div style={{ maxHeight: "200px", maxWidth: "600px", overflowY: "auto" }} ref={conversationRef}>
{conversation.map((item, i) => (
<p key={i}
style={{