graphdb-workbench/dist/js/angular/ttyg/templates/chat-panel.html

The web application for GraphDB APIs

<link href="css/ttyg/chat-panel.css?v=3.2.0-TR-design-system-1" rel="stylesheet"/>

<div class="chat-panel h-100" ng-class="!chat && !askingChatItem ? 'no-content' : ''">

    <div class="chat-loading" ng-if="loadingChat" onto-loader-new size="40"></div>

    <div class="chat-details" ng-class="{'hidden': !chat}" ng-if="!loadingChat && (!chat.chatHistory.isEmpty() || askingChatItem)" guide-selector="chat-details">
        <div ng-repeat="chatItemDetail in chat.chatHistory.items" guide-selector="chat-item">

            <!-- Before the first chat item is displayed, show the agent change info if the agent of the first response is different from the selected agent. -->
            <!--            <div class="alert alert-info agent-changed-info" ng-if="$first && selectedAgent && chatItemDetail.agentId !== selectedAgent.id"-->
            <!--                 ng-bind-html="'ttyg.chat_panel.messages.agent_changed_info' | trnaslate: {agentName: getAgentName(chatItemDetail.agentId)} | trustAsHtml">-->
            <!--            </div>-->

            <!-- Before each chat item, except the first one, is displayed, show the agent change info if the currently used agent is different from the previous one. -->
            <div class="alert alert-info agent-changed-info"
                 ng-if="!$first && chatItemDetail.agentId !== chat.chatHistory.items[$index - 1].agentId"
                 ng-bind-html="'ttyg.chat_panel.messages.agent_changed_info' | translate: {agentName: getAgentName(chatItemDetail.agentId)} | trustAsHtml">
            </div>

            <chat-item-detail
                chat-item-detail="chatItemDetail"
                show-actions="!waitingForLastMessage && $last"
                on-regenerate-question="regenerateQuestion(chatItem)"
                on-copy-answer-to-clipboard="copyAnswerToClipboard(chatItem)"
                on-ask-how-delivered-answer="onAskHowDeliveredAnswer(chatItem)"
                asking="!askingChatItem && waitingForLastMessage && $last"
                disabled="waitingForLastMessage">
            </chat-item-detail>
        </div>

        <!-- After all chat items are displayed, show the agent change info if the selected agent is different from the one used in the last chat item. -->
        <div class="alert alert-info agent-changed-info"
             ng-if="askingChatItem && selectedAgent && chat.chatHistory.items.length && chat.chatHistory.items[chat.chatHistory.items.length -1].agentId !== selectedAgent.id"
             ng-bind-html="'ttyg.chat_panel.messages.agent_changed_info' | translate: {agentName: getAgentName(selectedAgent.id)} | trustAsHtml">
        </div>
        <chat-item-detail ng-if="askingChatItem" chat-item-detail="askingChatItem"
                          asking="!!askingChatItem"></chat-item-detail>
    </div>
    <div class="new-question mt-3" ng-if="!loadingChat" guide-selector="question-box">
        <div class="form-control">
            <editable-content
                    placeholder="{{'ttyg.chat_panel.placeholder.ask-input' | translate}}"
                    ng-model="chatItem.question.message"
                    guide-selector="question-input"
                    ng-disabled="loadingChat || !selectedAgent || selectedAgent.isDeleted"
                    ng-keypress="onKeypressOnInput($event)"
                    class="question-input">
            </editable-content>
            <div class="new-question-actions">
                <div class="left-side-actions"></div>
                <div class="right-side-actions">
                    <button class="btn btn-primary ask-button" guide-selector="question-ask" ng-if="!showCancelButton"
                            ng-disabled="!chatItem.question.message || !selectedAgent || selectedAgent.isDeleted || waitingForLastMessage || loadingChat || cancelling"
                            ng-click="ask()">
                        <i class="fa fa-arrow-up"></i>
                    </button>
                    <button class="btn btn-secondary cancel-ask-button" ng-if="showCancelButton" ng-click="cancelPendingQuestion()"
                            gdb-tooltip="{{'ttyg.chat_panel.btn.stop_generation.tooltip' | translate}}">
                        <i class="fa-solid fa-square"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="messages-hint text-muted" ng-if="!loadingChat && !chat && !waitingForLastMessage" ng-cloak>
        <div class="hint2" ng-bind="'ttyg.chat_panel.hint2' | translate"></div>
        <div class="hint1" ng-bind-html="'ttyg.chat_panel.hint1' | translate | trustAsHtml"></div>
    </div>
</div>