Hugging Face's logo

Spaces:
Subbu1304
/
chatbotyaswanth
Sleeping

App Files Community
chatbotyaswanth
File size: 2,209 Bytes 
00bfbaf
 
 
 
 
 
 
f2490ec
00bfbaf
f2490ec
00bfbaf
 
 
f2490ec
 
 
 
00bfbaf
 
 
 
 
f2490ec
 
00bfbaf
 
 
 
 
 
 
 
f2490ec
00bfbaf
 
 
f2490ec
00bfbaf
 
f2490ec
00bfbaf
 
 
 
 
 
 
 
f2490ec
00bfbaf
 
 
 
 
 
 
 
 
 
f2490ec
00bfbaf
 
 
 
 
 
f2490ec
00bfbaf
 
 
 
 
 
 
f2490ec
00bfbaf
 
 
 
 
 
 
 
 
 
f2490ec
 
 
 
 
00bfbaf
 
 
 
 
 
 
 
 
 
 
f2490ec
00bfbaf
 
 
 
 
 
 
 
a6f7e17
f2490ec
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
 
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f0f2f5;
    overflow: auto;
}

.chat-container {
    width: 100%;
    max-width: 400px; /* Maximum width for larger screens */
    height: 80vh; /* Use viewport height for responsiveness */
    max-height: 600px; /* Maximum height cap */
    border: 1px solid #ccc;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: white;
    display: flex;
    flex-direction: column;
}

.chat-header {
    background-color: #f28c38;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    flex-shrink: 0;
}

.chat-messages {
    flex: 1; /* Allow messages to take available space */
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.bot-message {
    background-color: #fffbe6;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    max-width: 70%;
    word-wrap: break-word;
}

.user-message {
    background-color: #e1f5fe;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    max-width: 70%;
    margin-left: auto;
    text-align: right;
    word-wrap: break-word;
}

.chat-input {
    display: flex;
    padding: 10px;
    border-top: 1px solid #ccc;
    flex-shrink: 0;
}

.chat-input input {
    flex: 1;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.chat-input button {
    padding: 5px 10px;
    margin-left: 10px;
    background-color: #f28c38;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.chat-input button:hover {
    background-color: #d8702a;
}

.option-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 5px;
    background-color: #9c27b0;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.option-button.green {
    background-color: #4caf50;
}

.option-button.red {
    background-color: #f44336;
}

.option-button:hover {
    opacity: 0.9;
}