297 lines
11 KiB
HTML
297 lines
11 KiB
HTML
<div [ngClass]="{
|
||
'is-expanded-left': appState.displayConversationListPanelLarge,
|
||
'is-small-left': ! appState.displayConversationListPanelLarge,
|
||
'is-expanded-right': appState.displaySourcesPanelLarge,
|
||
'is-small-right': ! appState.displaySourcesPanelLarge,
|
||
}" class="visible-imbrication chatbot-land"
|
||
id="layout_demo"
|
||
>
|
||
|
||
<div class="demo-airwatch">
|
||
<div class="layout-split">
|
||
<nav aria-label="main navigation" class="navbar" role="navigation">
|
||
<div class="navbar-brand">
|
||
<a class="navbar-item" href="/#">
|
||
<!-- <i class="ri-robot-2-fill"></i>-->
|
||
<img alt="safran logo" class="logo" src="/safran_logo_large.svg">
|
||
</a>
|
||
|
||
<a aria-expanded="false" aria-label="menu" class="navbar-burger" data-target="navbarBasicExample"
|
||
role="button">
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
<span aria-hidden="true"></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="navbar-menu" id="airwatchNavigation">
|
||
<div class="navbar-start">
|
||
<a (click)="toggleSidePanelConversationsList()" class="navbar-item aside-toggle-button">
|
||
<span class="label">
|
||
airwatch
|
||
</span>
|
||
@if (appState.displayConversationListPanelLarge) {
|
||
<i class="ri-sidebar-unfold-line"></i>
|
||
|
||
} @else {
|
||
|
||
<i class="ri-sidebar-fold-line"></i>
|
||
}
|
||
</a>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="navbar-end">
|
||
<a (click)="toggleSourcesPanel()" class="navbar-item aside-toggle-button">
|
||
@if (appState.displaySourcesPanelLarge) {
|
||
<i class="ri-layout-right-2-line"></i>
|
||
} @else {
|
||
<i class="ri-layout-right-line"></i>
|
||
}
|
||
</a>
|
||
|
||
<a class="navbar-item">
|
||
Documentation
|
||
</a>
|
||
<div class="navbar-item has-dropdown is-hoverable">
|
||
<a class="navbar-link">
|
||
<i class="ri-notification-2-line"></i>
|
||
</a>
|
||
|
||
<div class="navbar-dropdown">
|
||
<a class="navbar-item">
|
||
About
|
||
</a>
|
||
<a class="navbar-item is-selected">
|
||
Jobs
|
||
</a>
|
||
<a class="navbar-item">
|
||
Contact
|
||
</a>
|
||
<hr class="navbar-divider">
|
||
<a class="navbar-item">
|
||
Report an issue
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div class="chatbot-container-box">
|
||
<main class="columns ">
|
||
<div
|
||
[ngClass]="{'is-expanded': appState.displayConversationListPanelLarge, 'is-small': ! appState.displayConversationListPanelLarge}"
|
||
class="aside column-conversation ">
|
||
|
||
<div (click)="newChat()" class="new-button">
|
||
<i class="ri-chat-ai-line"></i>
|
||
<span class="label">
|
||
New chat
|
||
</span>
|
||
</div>
|
||
|
||
|
||
@if (appState.displayConversationListPanelLarge) {
|
||
|
||
<div class="search-button is-expanded is-clickable">
|
||
<i class="ri-search-line"></i>
|
||
|
||
<input type="text" class="no-borders" placeholder="Search a chat" value="blah">
|
||
<i class="funnel ri-filter-3-line"></i>
|
||
|
||
</div>
|
||
} @else {
|
||
|
||
<div class="search-button is-clickable">
|
||
<i class="ri-search-line"></i>
|
||
</div>
|
||
|
||
}
|
||
@if (appState.displayConversationListPanelLarge) {
|
||
<div class="conversation-container">
|
||
@for (conversation of conversationsList; track conversation) {
|
||
<div class="conversation-item"
|
||
[ngClass]="{'is-active' : conversation.name == activeConversation?.name }"
|
||
(click)="updateActiveConversation(conversation)">
|
||
|
||
<!-- @if (conversation.pinned) {-->
|
||
|
||
<!-- }-->
|
||
<!-- <i class="ri-arrow-right-s-line"></i>-->
|
||
<div class="container-text">
|
||
<span class="pinned-icon">
|
||
<i class="ri-pushpin-line"></i>
|
||
<!-- pinned-->
|
||
</span>
|
||
<span class="name">
|
||
{{ conversation.name || 'New Conversation' }}
|
||
</span>
|
||
|
||
<span class="date">
|
||
{{ conversation.lastMessageDate | date: 'dd/MM/yyyy' }}
|
||
</span>
|
||
<span class="description">
|
||
{{ conversation.description || 'No description' }}
|
||
</span>
|
||
<input type="text" [(ngModel)]="conversation.name"
|
||
[ngClass]="{'is-expanded': ! conversation.visibleInput}">
|
||
<!-- <i class="ri-pencil-line" (click)="toggleVisibleEditInput(conversation)"></i>-->
|
||
</div>
|
||
<div class="active-peak">
|
||
<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 7L0 13.9282V0.0717969L12 7Z" fill="#3B87CC" fill-opacity="0.1"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
}
|
||
<app-version-infos [versionInfo]="appVersion"></app-version-infos>
|
||
</div>
|
||
<!-- <div class="admin-actions debug">-->
|
||
<!-- <app-theme-selector></app-theme-selector>-->
|
||
<!-- <app-language-selector></app-language-selector>-->
|
||
<!-- <br>-->
|
||
<!-- <app-main-button (click)="changeTheme()" icon="chat-new-line" label="thème"></app-main-button>-->
|
||
<!-- <app-main-button (click)="newChat()" icon="chat-new-line" label="nouveau"></app-main-button>-->
|
||
<!-- <app-main-button (click)="addMockMessage('user')" icon="user-line"-->
|
||
<!-- label="ajout message utilisateur"></app-main-button>-->
|
||
<!-- <app-main-button (click)="addMockMessage('llm')" icon="robot-2-line"-->
|
||
<!-- label="ajout message llm"></app-main-button>-->
|
||
|
||
<!-- <app-tuto-tour></app-tuto-tour>-->
|
||
<!-- </div>-->
|
||
}
|
||
|
||
</div>
|
||
|
||
|
||
<div class="chat chat-column ">
|
||
<div id="newChatBar">
|
||
<div class="new-chat-title">
|
||
|
||
<div class="title">
|
||
|
||
{{ translate('newChat') }}
|
||
|
||
|
||
</div>
|
||
|
||
<div class="chips">
|
||
@if (displayChipsTitleConversations) {
|
||
<div class="chips-container is-grey">
|
||
<i class="ri-pushpin-line"></i>
|
||
<span class="label">
|
||
Chips land
|
||
</span>
|
||
</div>
|
||
}
|
||
|
||
</div>
|
||
<div class="action">
|
||
@if (displayExportConversation) {
|
||
<div class="export-chat-button is-clickable">
|
||
<i class="ri-download-2-line"></i>
|
||
<span class="label">
|
||
Export chat
|
||
</span>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- tchatt-->
|
||
@if (!activeConversation?.messages?.length) {
|
||
<app-new-input></app-new-input>
|
||
} @else {
|
||
<div #conversationContainer class="main-conversation-container">
|
||
<!-- main-conversation-container-->
|
||
<!-- <div class="top-bar">-->
|
||
<!-- top bar-->
|
||
<!-- <div class="conversation-title">-->
|
||
<!-- {{ activeConversation?.name || 'New Conversation' }}-->
|
||
<!-- </div>-->
|
||
<!-- <div class="conversation-typing">-->
|
||
<!-- typing-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="conversation-messages-container">
|
||
|
||
@if (activeConversation && activeConversation.messages) {
|
||
@for (message of activeConversation.messages; track message) {
|
||
<app-message-box [message]="message" [kind]="message.kind"
|
||
[content]="message.content"></app-message-box>
|
||
}
|
||
}
|
||
|
||
@if (appState.loading) {
|
||
<app-loading-notification></app-loading-notification>
|
||
}
|
||
<!-- <app-time-separator></app-time-separator>-->
|
||
|
||
|
||
<!-- <sae-alert-box _alertKind="error" message="">System error - I couldn’t process your request.-->
|
||
<!-- Please-->
|
||
<!-- try-->
|
||
<!-- again in-->
|
||
<!-- few moments-->
|
||
<!-- </sae-alert-box>-->
|
||
</div>
|
||
<div class="conversation-bottom">
|
||
<app-prompt-input></app-prompt-input>
|
||
<app-tools-options [alignLeft]="true" [hideDisabledButtons]="true"></app-tools-options>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
}
|
||
<div class="bottom-warning-container">
|
||
<app-warning-bugs></app-warning-bugs>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div [ngClass]="{'expanded': appState.displaySourcesPanelLarge}" class="column panel-more">
|
||
<div class="has-text-right">
|
||
|
||
<div class="export-chat-button is-clickable">
|
||
<i class="ri-download-2-line"></i>
|
||
<span class="label">
|
||
Export all sources
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="panel-more-inside">
|
||
<div class="main-title">Knowledge Base documents :</div>
|
||
<div class="sources-list">
|
||
@if (activeConversation && activeConversation.sources && activeConversation.sources.length > 0) {
|
||
@for (source of activeConversation.sources; track source) {
|
||
<app-source-block [source]="source"></app-source-block>
|
||
}
|
||
} @else {
|
||
<div class="no-sources">
|
||
Aucune source disponible
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<app-feedback-button></app-feedback-button>
|
||
|
||
|
||
</main>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|