styling user and llm size of messages
This commit is contained in:
Tykayn
tykayn
parent
b7a2331bab
commit
fd12bbb259
6 changed files with 66 additions and 57 deletions
|
|
@ -1,21 +1,4 @@
|
|||
.feedback-button {
|
||||
/*background: #ecf3fa;*/
|
||||
/*color: #083b7d;*/
|
||||
/*padding: 8px;*/
|
||||
/*border-radius: 8px;*/
|
||||
/*border-bottom-left-radius: 0;*/
|
||||
/*border-bottom-right-radius: 0;*/
|
||||
/*transform: rotate(270deg);*/
|
||||
/*cursor: pointer;*/
|
||||
/*display: flex;*/
|
||||
/*align-items: center;*/
|
||||
/*gap: 8px;*/
|
||||
|
||||
/*margin-right: -35px;*/
|
||||
/*position: fixed;*/
|
||||
/*right: 0;*/
|
||||
/*top: 240px;*/
|
||||
/*z-index: 100;*/
|
||||
|
||||
&:hover {
|
||||
background: #d9e8f6;
|
||||
|
|
@ -175,9 +158,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
/
|
||||
/
|
||||
Spinner animation
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
line-height: 16px; /* 114.286% */
|
||||
width: 300px;
|
||||
position: relative;
|
||||
left: -64px;
|
||||
top: -32px;
|
||||
left: -16px;
|
||||
top: -42px;
|
||||
|
||||
.time-ago {
|
||||
color: #1E1F22;
|
||||
|
|
@ -50,21 +50,29 @@
|
|||
max-width: 100%;
|
||||
|
||||
|
||||
.message-content {
|
||||
padding-right: 60px;
|
||||
padding-left: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
&.llm {
|
||||
background: rgba(#3b87cc, 10%);
|
||||
margin-right: 100px;
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
padding-bottom: 16px;
|
||||
|
||||
.message-content {
|
||||
margin-left: -25px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-right: -25px;
|
||||
margin-right: 24px;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.user-infos {
|
||||
top: -22px;
|
||||
}
|
||||
}
|
||||
|
||||
&.user {
|
||||
|
|
@ -73,8 +81,14 @@
|
|||
margin-left: 260px;
|
||||
text-align: right;
|
||||
|
||||
padding-top: 12px;
|
||||
padding-bottom: 12px;
|
||||
.bottom-actions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message-content {
|
||||
top: -16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -26,10 +26,16 @@
|
|||
.navbar-item {
|
||||
padding: 10px;
|
||||
margin-left: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
|
||||
i {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
background: #7FB8E7 !important;
|
||||
border-bottom: 2px solid #7FB8E7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -336,8 +342,8 @@
|
|||
max-height: 90vh;
|
||||
margin: 0 auto;
|
||||
padding-top: 10px;
|
||||
padding-left: 200px;
|
||||
padding-right: 200px;
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
overflow: auto;
|
||||
min-width: 915px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,9 +59,11 @@
|
|||
}
|
||||
</a>
|
||||
|
||||
<a class="navbar-item">
|
||||
Documentation
|
||||
</a>
|
||||
<a class="navbar-item is-active">
|
||||
Ask question
|
||||
</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>
|
||||
|
|
|
|||
|
|
@ -161,7 +161,13 @@ export class Chatbot implements AfterViewChecked {
|
|||
conversation2.addMessage(new ChatbotMessage({
|
||||
kind: 'llm',
|
||||
user: {},
|
||||
content: "Cette application vous permet de discuter avec un assistant IA. Vous pouvez poser des questions et obtenir des réponses.",
|
||||
content: "The documents also highlight various post- incident safety measures implemented, including improved training procedures, enhanced maintenance protocols, and aircraft design modifications. Regulatory agencies such as the NTSB, BEA, AAIB, and others were involved in investigating these incidents and making safety recommendations.
\n" +
|
||||
"This summary provides an overview of significant aviation incidents, their causes, and outcomes, which may be useful for understanding patterns in aircraft accidents and areas for improving aviation safety.\n" +
|
||||
"<br/>" +
|
||||
"Internet Search Not Activated.<br/>" +
|
||||
"No internet search was activated for this query<br/>" +
|
||||
"<br/>" +
|
||||
"Search results.",
|
||||
name: "Assistant"
|
||||
}));
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,9 @@
|
|||
<div class="message {{kind}}" id="message_{{id}}">
|
||||
<div class="actions ">
|
||||
<div class="message message-{{kind}} {{kind}}" id="message_{{id}}">
|
||||
<div class="actions top-actions">
|
||||
@if (kind === 'user') {
|
||||
<button (click)="editMessage()" class="button edit">
|
||||
<i class="ri-edit-box-line"></i>
|
||||
</button>
|
||||
} @else {
|
||||
|
||||
|
||||
<div class="">
|
||||
<div class="action-feedback">
|
||||
<app-feedback-button></app-feedback-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" has-text-right">
|
||||
<button (click)="generateResponse()" class="button generate-response">
|
||||
<i class="ri-refresh-line"></i>
|
||||
<span class="label">
|
||||
Generate Response
|
||||
</span>
|
||||
</button>
|
||||
<app-copy [textToCopy]="content"></app-copy>
|
||||
<button (click)="bookmark()" class="button bookmark">
|
||||
<i class="ri-bookmark-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
<div class="user-infos ">
|
||||
|
|
@ -59,4 +39,25 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
<div class="actions bottom-actions is-{{kind}}">
|
||||
@if (kind === 'llm') {
|
||||
|
||||
<div class="action-feedback">
|
||||
<app-feedback-button></app-feedback-button>
|
||||
</div>
|
||||
|
||||
<div class=" has-text-right">
|
||||
<button (click)="generateResponse()" class="button generate-response">
|
||||
<i class="ri-refresh-line"></i>
|
||||
<span class="label">
|
||||
Generate Response
|
||||
</span>
|
||||
</button>
|
||||
<app-copy [textToCopy]="content"></app-copy>
|
||||
<button (click)="bookmark()" class="button bookmark">
|
||||
<i class="ri-bookmark-line"></i>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue