Skip to content

Commit 43c7327

Browse files
eldermoraeseldermoraes
committed
Booking demo added, but not finished yet
1 parent cb768c8 commit 43c7327

1 file changed

Lines changed: 129 additions & 22 deletions

File tree

‎documentation/modules/ROOT/pages/embed_documents.adoc‎

Lines changed: 129 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -188,6 +188,17 @@ public class EmbedBean {
188188

189189
== Create the Booking structure
190190

191+
Create a new `Customer` Java record in `src/main/java` in the `com.redhat.developers` package with the following contents:
192+
193+
[.console-input]
194+
[source,java]
195+
----
196+
package com.redhat.developers;
197+
198+
public record Customer(String name, String surname) {
199+
}
200+
----
201+
191202
Now we create the Booking structure.
192203

193204
Create a new `Booking` Java record in `src/main/java` in the `com.redhat.developers` package with the following contents:
@@ -345,28 +356,6 @@ public interface AssistantForCustomerSupport {
345356
}
346357
----
347358

348-
Create a new `Customer` Java record in `src/main/java` in the `com.redhat.developers` package with the following contents:
349-
350-
[.console-input]
351-
[source,java]
352-
----
353-
package com.redhat.developers;
354-
355-
public record Customer(String name, String surname) {
356-
}
357-
----
358-
359-
Create a new `Customer` Java record in `src/main/java` in the `com.redhat.developers` package with the following contents:
360-
361-
[.console-input]
362-
[source,java]
363-
----
364-
package com.redhat.developers;
365-
366-
public record Customer(String name, String surname) {
367-
}
368-
----
369-
370359
And finally our chat implementation that will do the whole thing.
371360

372361
Create a new `ChatSocket` Java record in `src/main/java` in the `com.redhat.developers` package with the following contents:
@@ -432,6 +421,124 @@ public class ChatSocket {
432421
}
433422
----
434423

424+
== Create the chat frontend
425+
426+
Finally, let's add our chat frontend.
427+
428+
Create a new `index.html` Java record in `src/main/resources/META-INF/resources` with the following contents:
429+
430+
[.console-input]
431+
[source,html]
432+
----
433+
<!DOCTYPE html>
434+
<html>
435+
436+
<head>
437+
<meta charset="UTF-8">
438+
<title>Quarkus Langchain4j Chat!</title>
439+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly.min.css">
440+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/css/patternfly-additions.min.css">
441+
442+
<style>
443+
#chat {
444+
resize: none;
445+
overflow: hidden;
446+
min-height: 300px;
447+
max-height: 300px;
448+
}
449+
</style>
450+
</head>
451+
452+
<body>
453+
<nav class="navbar navbar-default navbar-pf" role="navigation">
454+
<div class="navbar-header">
455+
<a class="navbar-brand" href="/">
456+
<p><strong>>> Quarkus Langchain4j Chat!</strong></p>
457+
</a>
458+
</div>
459+
</nav>
460+
<div class="container">
461+
<br/>
462+
<div class="row">
463+
<textarea data-testid="chatwin" class="col-md-8" id="chat"></textarea>
464+
</div>
465+
<div class="row">
466+
<input class="col-md-6" id="msg" type="text" placeholder="enter your message">
467+
<button class="col-md-1 btn btn-primary" id="send" type="button" disabled>send</button>
468+
</div>
469+
470+
</div>
471+
472+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
473+
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
474+
<script src="https://cdnjs.cloudflare.com/ajax/libs/patternfly/3.24.0/js/patternfly.min.js"></script>
475+
476+
<script type="text/javascript">
477+
var connected = false;
478+
var socket;
479+
480+
$( document ).ready(function() {
481+
connect();
482+
$("#send").click(sendMessage);
483+
484+
$("#name").keypress(function(event){
485+
if(event.keyCode == 13 || event.which == 13) {
486+
connect();
487+
}
488+
});
489+
490+
$("#msg").keypress(function(event) {
491+
if(event.keyCode == 13 || event.which == 13) {
492+
sendMessage();
493+
}
494+
});
495+
496+
$("#chat").change(function() {
497+
scrollToBottom();
498+
});
499+
500+
$("#name").focus();
501+
});
502+
503+
var connect = function() {
504+
if (! connected) {
505+
socket = new WebSocket("ws://" + location.host + "/chat");
506+
socket.onopen = function() {
507+
connected = true;
508+
console.log("Connected to the web socket");
509+
$("#send").attr("disabled", false);
510+
$("#connect").attr("disabled", true);
511+
$("#name").attr("disabled", true);
512+
$("#msg").focus();
513+
};
514+
socket.onmessage =function(m) {
515+
console.log("Got message: " + m.data);
516+
$("#chat").append(m.data + "\n");
517+
scrollToBottom();
518+
};
519+
}
520+
};
521+
522+
var sendMessage = function() {
523+
if (connected) {
524+
var value = $("#msg").val();
525+
console.log("Sending " + value);
526+
socket.send(value);
527+
$("#msg").val("");
528+
}
529+
};
530+
531+
var scrollToBottom = function () {
532+
$('#chat').scrollTop($('#chat')[0].scrollHeight);
533+
};
534+
535+
</script>
536+
</body>
537+
538+
</html>
539+
----
540+
541+
435542
== Invoke the endpoint
436543

437544
You can check your prompt implementation by pointing your browser to http://localhost:8080/chat[window=_blank]

0 commit comments

Comments
 (0)