Hugging Face's logo

Spaces:
SharanB
/
Chatbot
Running

App Files Community
SharanB commited on
Commit
aa0610f
·
verified ·
1 Parent(s): beaafe1

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +38 -19
index.html CHANGED
@@ -1,19 +1,38 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <div class="chat-container" [ngClass]="{ minimized: isMinimized }" (click)="isMinimized ? toggleMinimize() : null" id="chat-container">
2
+ <div class="chat-header">
3
+ <span class="chat-title">ChainBot</span>
4
+ <button class="minimize-btn" (click)="toggleMinimize($event)">_</button>
5
+ <button class="close-btn" (click)="closeChat($event)">x</button>
6
+ </div>
7
+ <div *ngIf="errorMessage" class="error-alert">
8
+ {{ errorMessage }}
9
+ </div>
10
+ <div class="chat-content" id="chat-content" #chatContent>
11
+ <div *ngFor="let message of conversation" class="message" [ngClass]="{ 'user-message': message.speaker === 'user', 'bot-message': message.speaker === 'bot' }">
12
+ <div *ngIf="message.speaker === 'bot'" class="message-icon">
13
+ <img style="width: 35px; height: 35px;" src="https://static.thenounproject.com/png/1156284-200.png" alt="Bot Icon">
14
+ </div>
15
+ <div class="message-text">
16
+ {{ message.text }}
17
+ </div>
18
+ </div>
19
+
20
+ <div *ngIf="currentNode.type === 'question'" class="answers">
21
+ <button *ngFor="let answer of currentNode.answers" (click)="selectAnswer(answer)">
22
+ {{ answer.text }}
23
+ </button>
24
+ </div>
25
+
26
+ <div *ngIf="currentNode.type === 'input'" class="user-input">
27
+ <div class="input-icon">
28
+ <img style="width: 20px; height: 20px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSnRWFs0zshslKNFEmRVUuHgYNfmk5_-M4Qgw&s" alt="User Icon" />
29
+ </div>
30
+ <input [(ngModel)]="userInput" placeholder="Type your response..." />
31
+ <button (click)="submitInput()">Submit</button>
32
+ </div>
33
+ </div>
34
+
35
+ <div class="chat-minimized" id="chat-minimized" (click)="toggleMinimize()" *ngIf="isMinimized">
36
+ <img style="width: 50px; height: 50px;" src="https://chatbot.design/favicon.ico">
37
+ </div>
38
+ </div>