File size: 2,364 Bytes
95a56c0 627a746 95a56c0 168593d 95a56c0 676fb19 95a56c0 f034d8d 95a56c0 f034d8d 95a56c0 f034d8d 627a746 c12d231 f034d8d c12d231 676fb19 c12d231 f034d8d 95a56c0 c12d231 95a56c0 f034d8d 95a56c0 168593d 95a56c0 168593d 95a56c0 95461d0 627a746 e11aebe 627a746 |
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 |
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0px;
padding: 0;
display: flex;
justify-content: center;
}
.container {
max-width: 45%;
margin: 50px auto;
background-color: #fff;
padding: 20px;
padding: 20px;
border-radius: 5px;
width: 600px;
}
.chat-box {
border: 1px solid #e0e0e0;
padding: 20px;
height: 300px;
overflow-y: scroll;
margin-bottom: 10px;
}
.demo {
margin: 50px auto;
/* display: flex;
justify-content: flex-end;
align-items: center; */
width: 45%;
/* flex-direction: column; */
margin-right: auto;
}
button {
background-color: #007BFF;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
width: 100%;
margin: 10px;
}
.user-message, .bot-message {
margin: 10px 0;
width: 70%; /* Each message takes up half of the screen width */
padding: 10px;
border-radius: 5px;
}
.user-message {
background-color: #e0e0e0;
/* align-self: flex-end; */
float: right;
}
.bot-message {
background-color: #007BFF;
color: white;
/* align-self: flex-start; */
float: left;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: #007BFF;
box-shadow: 0 0 5px rgba(0,123,255,0.5);
}
/* Placeholder style */
input[type="text"]::placeholder {
color: #aaa;
}
/* If you'd like to style the API Key label as well */
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
/* Add these styles to your style.css */
.outside-container {
position: relative;
}
.typing-indicator {
width: 50px;
position: absolute; /* Position the indicator absolutely */
bottom: 0; /* Align to the bottom */
left: 0; /* Align to the left */
padding: 5px 10px; /* Some padding around the text */
background-color: #f0f0f0; /* Light gray background */
border-radius: 10px;
margin: 10px; /* Add some space from the bottom left corner */
color: #757575; /* Gray color for the text */
font-size: 0.8em; /* Smaller font size */
}
.typing-indicator span {
/* You can add styles for the span if needed */
}
|