Meta Shell
Y la respuesta?
(/assistant.service.ts </filepath>
import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Message } from '../model/message';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
@Injectable({
providedIn: 'root'
})
export class AssistantService {
private messages: Message[] = [];
private sessionId: string = '';
constructor(private http: HttpClient, private router: Router, private route: ActivatedRoute) {
http://this.route.queryParams.subscribe(params => {
http://this.sessionId = params['sessionId'] || '';
});
}
getMessages(): Observable<Message[]> {
return of(this.messages);
}
sendMessage(message: string): Observable<any> {
const body = { user_input: message, session_id: http://this.sessionId };
const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
return http://this.http.post(`${environment.apiUrl}/chat`, body, { headers });
}
// Add message locally and handle scrolling
addMessage(message: Message): void {
http://this.messages.push(message);
}
// Clear messages
clearMessages(): void {
http://this.messages = [];
}
}
<filepath> my-app/src/app/assistant/assistant.component.css </filepath>
.messages-container {
display: flex;
flex-direction: column;
gap: 10px;
height: calc(100vh - 150px);
overflow-y: auto;
padding: 10px;
}
.message {
padding: 10px;
border-radius: 10px;
max-width: 80%;
}
.user-message {
align-self: flex-end;
background-color: #dcf8c6;
}
.assistant-message {
align-self: flex-start;
background-color: #f1f0f0;
}
.input-container {
display: flex;
padding: 10px;
border-top: 1px solid #ddd;
}
.input-container input {
flex: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
.input-container button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
cursor: pointer;
}
.input-container button:hover {
background-color: #0056b3;
}
.center {
text-align: center;
}
.robot-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
color: #007bff;
}
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 10px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.robot-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 100px;
color: #007bff;
}
.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
margin: 10px auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/_ Add this to your CSS file _/
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: calc(100vh - 150px); /_ Adjust height to fit within the viewport _/
}
.loading-container.robot-icon {
font-size: 100px;
color: #007bff;
margin-bottom: 20px;
}
.loading-container.loader {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 30px;
height: 30px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
<filepath> my-app/src/app/assistant/assistant.component.ts </filepath>
import { Component, OnInit, ViewChild, ElementRef, AfterViewChecked } from '@angular/core';
import { AssistantService } from './assistant.service';
import { Message } from '../model/message';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Router } from '@angular/router';
@Component({
selector: 'app-assistant',
standalone: true,
imports:,
templateUrl: './assistant.component.html',
styleUrls: ['./assistant.component.css']
})
export class AssistantComponent implements OnInit, AfterViewChecked {
messages: Message[] = [];
userInput: string = '';
isLoading: boolean = false;[CommonModule][FormsModule]
@ViewChild('messagesContainer') private messagesContainer!: ElementRef;
constructor(private assistantService: AssistantService, private router: Router) {}
ngOnInit(): void {
http://this.assistantService.getMessages().subscribe(messages => {
http://this.messages = messages;
});
}
ngAfterViewChecked(): void {
}
sendMessage(): void {
if (!this.userInput.trim()) return;
const userMessage: Message = { sender: 'user', text: http://this.userInput };
http://this.assistantService.addMessage(userMessage);
http://this.messages.push(userMessage);
http://this.isLoading = true;
http://this.assistantService.sendMessage(this.userInput).subscribe(response => {
const assistantMessage: Message = { sender: 'assistant', text: http://response.response };
http://this.assistantService.addMessage(assistantMessage);
http://this.messages.push(assistantMessage);
http://this.isLoading = false;
http://this.userInput = '';
}, error => {
http://console.error('Error sending message', error);
http://this.isLoading = false;
});
}
private scrollToBottom(): void {
try {
http://this.messagesContainer.nativeElement.scrollTop = http://this.messagesContainer.nativeElement.scrollHeight;
} catch (err) {
http://console.error('Error scrolling to bottom:', err);
}
}
}
<filepath> my-app/src/app.component.html </filepath>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" routerLink="/">Chatbot</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" routerLink="/" routerLinkActive="active" ="{ exact: true }">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLink="/assistant" routerLinkActive="active">Assistant</a>
</li>
</ul>
</div>
</div>
</nav>[routerLinkActiveOptions]
<main class="container mt-4">
<router-outlet></router-outlet>
</main>
<filepath> my-app/src/app.module.ts </filepath>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AssistantComponent } from './assistant/assistant.component';
import { FormsModule } from '@angular/forms';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
AssistantComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
FormsModule
],
providers: [],
bootstrap:
})
export class AppModule { }
<filepath> Dockerfile </filepath>
Stage 1: Build the Angular app
FROM node:18 AS build
WORKDIR /app
COPY./my-app/package*.json./
RUN npm install
COPY./my-app.
RUN npm run build --configuration production[AppComponent]
Stage 2: Serve the Angular app with Nginx
FROM nginx:alpine
COPY --from=build /app/dist/my-app/browser /usr/share/nginx/html
COPY./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]<|end_of_text|>)
Lol