| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <div class="d-flex flex-column h-100"> |
| <app-error [error]="error"></app-error> |
| |
| <div class="mt-3 mb-2 mr-3 d-flex justify-content-end"> |
| <select [(ngModel)]="selectedModelId" class="form-control mr-2"> |
| <ng-container *ngFor="let m of allModels()"> |
| <option [ngValue]="m.id">{{m.name}} ({{m.id}}:{{m.version}})</option> |
| </ng-container> |
| </select> |
| </div> |
| |
| <ng-container *ngIf="hasModel"> |
| <div class="mb-2 mr-3 d-flex justify-content-between"> |
| <button (click)="clearConversation()" [disabled]="!selectedModelId" class="btn btn-sm btn-light" type="button"> |
| <fa-icon icon="comment-slash"></fa-icon> |
| Reset Conversation Context |
| </button> |
| |
| <button (click)="clear()" [disabled]="!selectedModelId" class="btn btn-sm btn-light" type="button"> |
| <fa-icon icon="trash-alt"></fa-icon> |
| Clear |
| </button> |
| </div> |
| |
| |
| <div class="border rounded flex-grow-1 mb-3 mr-3 p-3 d-flex flex-column-reverse " style="overflow: auto; height: 0"> |
| <div (click)="selectedQuery = s" *ngFor="let s of states" class="chat-entry"> |
| <div class="alert alert-primary"> |
| {{s.txt}} |
| </div> |
| |
| <div *ngIf="s.status === 'QRY_ENLISTED'" class="alert alert-secondary"> |
| <fa-icon class="mr-2" icon="spinner" pulse="true"></fa-icon> |
| Processing... |
| </div> |
| |
| <ng-container *ngIf="s.status === 'QRY_READY'"> |
| <div *ngIf="s.resBody" class="alert alert-success"> |
| {{s.resBody}} |
| </div> |
| <div *ngIf="s.error" class="alert alert-danger"> |
| {{s.error}} |
| </div> |
| </ng-container> |
| </div> |
| </div> |
| |
| <form (ngSubmit)="ask()" name="askForm"> |
| <div class="row ml-0 mr-3 mb-4"> |
| <input [(ngModel)]="queryText" |
| class="form-control form-control-lg" |
| name="queryText" |
| placeholder="Ask..." |
| type="text"> |
| </div> |
| </form> |
| </ng-container> |
| </div> |