feat: changes to make bot look more vacme like

This commit is contained in:
Markus Hofstetter 2025-04-24 23:21:37 +02:00
parent f9705f3e80
commit a2c6867065
7 changed files with 37 additions and 12 deletions

17
demooutput/Output.md Normal file
View File

@ -0,0 +1,17 @@
# Vacme Supportbot Notizen
## Technologie
Quarkus mit LangChain4j
OpenAI API
EasyRag mit OCR
## Demo
Ich habe einn Screenshot gemacht, um die Funktionsweise zu demonstrieren.
![Screenshot](./img.png)
## Findings
Das Beispiel war in ca 1h umsetzbar aber basuiert stark auf dem Quarkus LangChain4j Workshop.
Ich war erstaunt, dass auch die Bilder aus der Website in die Beschreibung einfliessen
Ich habe noch nicht geprüft ob die Anweisungen bis ins Detail stimmen.
Die Formatierung der Ausgabe ist nicht optimal, aber ich habe keine Zeit mehr um das zu verbessern.

BIN
demooutput/img.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 275 KiB

View File

@ -10,9 +10,9 @@ import jakarta.enterprise.context.SessionScoped;
public interface CustomerSupportAgent {
@SystemMessage("""
You are a customer support agent of a car rental company 'Miles of Smiles'.
You are a customer support agent of the vaccination application 'vacme'.
You are friendly, polite and concise.
If the question is unrelated to car rental, you should politely redirect the customer to the right department.
If the question is unrelated to the login process or the usage of the vacme page, you should politely redirect the customer to the support email.
""")
Multi<String> chat(String userMessage);
}

View File

@ -16,7 +16,7 @@ public class CustomerSupportAgentWebSocket {
@OnOpen
public String onOpen() {
return "Welcome to Miles of Smiles! How can I help you today?";
return "Willkommen beim Vacme Support! Wie kann ich Ihnen Heute helfen?";
}
@OnTextMessage

View File

@ -48,10 +48,10 @@ export class DemoTitle extends LitElement {
render() {
return html`
<div class="title">
<h2>Miles of Smiles</h2>
<h2>Vacme Support Agent</h2>
</div>
<div class="explanation">
<p>Welcome to Miles of Smiles!</p>
<p>Welcome to Vacme Support Agent!</p>
<p>Please click the button on the bottom right to start the conversation
with an LLM-powered customer support agent.</p>
</div>

View File

@ -16,12 +16,12 @@
<link rel="stylesheet" href="fonts/red-hat-font.min.css">
<title>Miles of Smiles</title>
<title>Vacme Support Agent</title>
<style>
:root {
--main-bg-color: rgb(246, 242, 242);
--main-highlight-text-color: rgba(237, 98, 128);
--main-bg-color: rgb(238, 242, 237);
--main-highlight-text-color: rgb(0, 208, 132);
}
body {
@ -38,16 +38,18 @@
}
chat-bot {
--chatbot-avatar-bg-color: rgba(237, 98, 128);
--chatbot-avatar-bg-color: rgb(0, 208, 132);
--chatbot-avatar-margin: 10%;
--chatbot-header-bg-color: rgba(237, 98, 128);
--chatbot-header-bg-color: rgb(0, 208, 132);
--chatbot-header-title-color: #FFFFFF;
--chatbot-body-bg-color: var(--main-bg-color);
--chatbot-send-button-color: rgba(237, 98, 128);
--chatbot-send-button-color: rgb(0, 208, 132);
--chatbot-container-width: 660px;
--chatbot-container-height: 800px;
}
chat-bot::part(chat-bubble) {
--chat-bubble-avatar-color: rgba(237, 98, 128);
--chat-bubble-avatar-color: rgb(0, 208, 132);
--chat-bubble-color: rgba(203, 232, 237, 0.71);
--chat-bubble-right-color: rgb(157, 238, 244);
--chat-bubble-font-color: #333;

View File

@ -7,3 +7,9 @@ quarkus.langchain4j.openai.chat-model.log-responses=true
quarkus.langchain4j.openai.chat-model.temperature=1.0
quarkus.langchain4j.openai.chat-model.max-tokens=1000
quarkus.langchain4j.openai.chat-model.frequency-penalty=0
quarkus.langchain4j.easy-rag.path=src/main/resources/rag
quarkus.langchain4j.easy-rag.max-segment-size=300
quarkus.langchain4j.easy-rag.max-overlap-size=50
quarkus.langchain4j.easy-rag.max-results=3
quarkus.langchain4j.easy-rag.reuse-embeddings.enabled=true