Untitled Document

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="jakarta.faces.html"
      xmlns:f="jakarta.faces.core"
      xmlns:ui="jakarta.faces.facelets"
      xmlns:p="http://primefaces.org/ui">
<h:head>
    <h:outputStylesheet name="css/mycsslayout.css"/>
    <h:outputScript name="js/script.js" target="head" />
    <title>Chat GPT</title>
</h:head>
<h:body>
    <f:view>
        <h:messages errorStyle="color: red" showDetail="true" showSummary="false"/>
        <h:form id="formId">
            <p:outputLabel for="systemrole" value="Rôle de l'API : "/>
            <p:selectOneMenu id="systemrole" value="#{bb.systemRole}" editable="true">
                <f:selectItems value="#{bb.systemRoles}"/>
            </p:selectOneMenu>
            <h:panelGrid id="paneltotal" columns="2" columnClasses="topAligned,topAligned">
                <h:panelGrid id="panelgauche" columns="1">
                    <h:panelGrid id="questionetreponse" columns="1">
                        <h:panelGroup>
                            <h:outputText value="Question :"/>
                            <button onclick="copyToClipboard('formId:questionId')">Copier question</button>
                            <button onclick="toutEffacer()">Effacer question et réponse</button>
                        </h:panelGroup>
                        <h:inputTextarea id="questionId" value="#{bb.question}" title="Question"
                                         cols="50" rows="5"/>

                        <h:commandButton value="Envoyer la question" action="#{bb.envoyer}">
                            <f:ajax execute="@form" render="conversationId reponseId"/>
                        </h:commandButton>

                        <h:panelGroup>
                            <h:outputText value="Réponse :"/>
                            <button onclick="copyToClipboard('formId:reponseId')">Copier réponse</button>
                        </h:panelGroup>
                        <h:inputTextarea id="reponseId" value="#{bb.reponse}" title="Réponse"
                                         cols="50"
                                         rows="15"/>
                    </h:panelGrid>
                    <f:websocket channel="chat" scope="view" onmessage="socketListener">
                        <f:ajax event="streamingfinished" listener="#{bb.miseAJourConversation}"
                                render="conversationId reponseId"/>
                    </f:websocket>
                </h:panelGrid>
                <h:panelGrid id="paneldroit" columns="1" style="vertical-align: top;">
                    <h:panelGroup>
                        <h:outputText value="Conversation :"/>
                        <button onclick="copyToClipboard('formId:conversationId')">Copier conversation</button>
                    </h:panelGroup>
                    <h:inputTextarea id="conversationId" rows="30" cols="50" readonly="true"
                                     value="#{bb.conversation}" title="Conversation entière"/>
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </f:view>
</h:body>
</html>