Hugging Face's logo

Spaces:
Akshat1000
/
llama222
Paused

App Files Community
llama222
File size: 2,635 Bytes 
4f29464
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
/* Reset some default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

/* Container for the entire chat application */
.container {
    display: flex;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 0;
    box-shadow: none;
}

/* Sidebar for chat history */
.sidebar {
    width: 30%;
    padding: 20px;
    border-right: 0px solid; 
    overflow-y: auto;
    background-color:inherit;
    height: 100%;
}

.sidebar h2 {
    margin-bottom: 15px;
    color: #444;
    font-size: 20px;
}

.sidebar ul {
    list-style: none;
}

.sidebar ul li {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #e9e9f0;
    border-radius: 5px;
    color: black;
}

/* Chatbox for displaying and sending messages */
.chatbox {
    width: 70%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.chatbox h2 {
    margin-bottom: 15px;
    color: #444;
    font-size: 20px;
}

#messages {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 20px;
}

#messages p {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    color: black;
}

#messages p strong {
    display: block;
    margin-bottom: 5px;

}

#messages p.user-message {
    background-color: #d4f4dd;
}

#messages p.bot-response {
    background-color: #e0e0e0;
}

form {
    display: flex;
    align-items: center;
}

input[type="text"] {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* Add a scrollbar style for better look */
.sidebar, #messages {
    scrollbar-width: none;
    scrollbar-color:inherit;
}

.sidebar::-webkit-scrollbar, #messages::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track, #messages::-webkit-scrollbar-track {
    background: #f7f7fa;
}

.sidebar::-webkit-scrollbar-thumb, #messages::-webkit-scrollbar-thumb {
    background-color: #bbb;
    border-radius: 10px;
}