Custom Agent CSS Themes

When embedding an agent or panel into a website or application, you can use our default light and dark themes or specify your own.

The requirements for using one of our supplied CSS themes or creating your own are as follows -

1. A CSS file needs to be publicly accessible from a https:// fully qualified URL
2. The CSS file needs to support both light and dark theme.

You specify the fully qualified URL in the UI Panel Agent Editing page -

Theme Library

We plan to post some specific themes here coming soon. If you have a theme that you want to share, email it to us support@llmasaservice.io or support@predictabilityatscale.com

Creating your own CSS Theme

Start with the following CSS and modify as needed. The CSS default has 2 parts, side-panel (for light theme) and side-panel-dark (dark theme).

All styling is controlled with these CSS entries.

.side-panel {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: small;
  color: #333;
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  max-height: 90%;
}

.side-panel .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
  color: #007bff;
}
  
.side-panel .input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 5px;
}

.side-panel textarea {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border-radius: 8px;
  height: 50px;
  min-height: 50px;
  resize: vertical;
  border: 1px solid #ddd;
  color: #333;
  background-color: #fff;
}

.side-panel .send-button {
  background-color: lightblue;
  color: #0056b3;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 40px;
  width: 40px;
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.side-panel .send-button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
  color: white;
}

.side-panel .history-entry {
  background-color: #f1f3f5;
  padding-bottom: 10px;
  border-radius: 10px;
}

.side-panel .responseArea {
  flex: 1;
  background-color: #f1f3f5;
  border-radius: 10px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.side-panel .prompt {
  align-self: flex-start;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-right: 5%;
  margin-bottom: 10px;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: pre-wrap;
  background-color: #e0f7fa;
  color: #000;
}

.side-panel .response {
  align-self: flex-end;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  margin-left: 5%;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: linear-gradient(to right, #e0f7fa, #ffefd5);
  color: #000;
}

.side-panel .copy-button {
  font-size: 12px;
  border: 0;
  background-color: transparent;
  color: #007bff;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-panel .icon-svg {
  width: 20px;
  height: 20px;
}

.side-panel .icon-svg-large {
  margin-right: 4px;
  margin-top: 5px;
}

.side-panel .copy-button:hover,
.side-panel .thumbs-button:hover {
  color: white;
  border-radius: 50%;
  background-color: #0056b3;
}

.side-panel .thumbs-button {
  font-size: 12px;
  border: 0;
  background-color: transparent;
  color: #007bff;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-panel .button-container {
  display: flex;
  margin-top: 10px;
}

.side-panel .button-container-actions {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  gap: 5px;
}

.side-panel .scroll-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.side-panel .scroll-button:hover {
  background-color: #0056b3;
}

.side-panel table {
  border-collapse: collapse;
  margin-bottom: 1em;
  border: 1px solid #777;
}

.side-panel th {
  border: 1px solid #777;
  padding: 8px;
}

.side-panel td {
  border: 1px solid #777;
  padding: 8px;
}

.side-panel .save-button {
  flex: 1;
  background-color: lightblue;
  color: #0056b3;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 0.8em;
  margin-top: 5px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.side-panel .save-button:hover {
  background-color: #0056b3;
  color: white;
}

.suggestions-container {
  display: flex;
  flex-wrap: wrap;
}

.side-panel .suggestion-button {
  background-color: lightblue;
  color: #0056b3;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 0.8em;
  cursor: pointer;
  margin: 5px;
}

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

.suggestion-button:disabled {
  background-color: #cccccc;
  color: #666666;
  cursor: not-allowed;
}

.side-panel-dark {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: small;
  color: #eee;
  background-color: #424242;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.1);
  max-height: 90%;
}
.side-panel-dark .title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  text-align: center;
}
.side-panel-dark .input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 5px;
}
.side-panel-dark textarea {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border-radius: 8px;
  height: 50px;
  min-height: 50px;
  resize: vertical;
  color: #333;
  border: 1px solid #ddd;
}
.side-panel-dark .send-button {
  background-color: #424242;
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  height: 40px;
  width: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 123, 255, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.side-panel-dark .send-button:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}
.side-panel-dark .history-entry {
  background-color: #424242;
  padding-bottom: 10px;
  border-radius: 10px;
}
.side-panel-dark .responseArea {
  flex: 1;
  background-color: #424242;
  border-radius: 10px;
  overflow-y: auto;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.side-panel-dark .prompt {
  align-self: flex-start;
  background-color: #303030;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-right: 5%;
  margin-bottom: 10px;
  max-width: 90%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  white-space: pre-wrap;
}
.side-panel-dark .response {
  align-self: flex-end;
  padding: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  margin-left: 5%;
  max-width: 90%;
  background-color: #3a3737;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.side-panel-dark .copy-button {
  font-size: 12px;
  border: 0;
  background-color: transparent;
  color: #aaa;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.side-panel-dark .icon-svg {
  width: 20px;
  height: 20px;
}
.side-panel-dark .icon-svg-large {
  margin-right: 4px;
  margin-top: 5px;
}
.side-panel-dark .copy-button:hover,
.side-panel-dark .thumbs-button:hover {
  color: #0056b3;
  border-radius: 50%;
  background-color: #e2e6ea;
}
.side-panel-dark .thumbs-button {
  font-size: 12px;
  border: 0;
  background-color: transparent;
  color: #aaa;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.side-panel-dark .button-container {
  display: flex;
  margin-top: 10px;
}

.side-panel-dark .button-container-actions {
  display: flex;
  margin-top: 10px;
  justify-content: space-between;
  gap: 5px;
}

.side-panel-dark .scroll-button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.side-panel-dark .scroll-button:hover {
  background-color: #0056b3;
}

.side-panel-dark table {
  border-collapse: collapse;
  margin-bottom: 1em;
  border: 1px solid #ddd;
}

.side-panel-dark th {
  border: 1px solid #ddd;
  padding: 8px;
}

.side-panel-dark td {
  border: 1px solid #ddd;
  padding: 8px;
}

.side-panel-dark a {
  color: #ddd;
}

.side-panel-dark a:hover {
  color: #fff;
}

.side-panel-dark .save-button {
  flex: 1;
  background-color: #3a3737;
  color: white;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 0.8em;
  margin-top: 5px;
}

.side-panel-dark .save-button:hover {
  background-color: #0056b3;
  color: white;
}

.side-panel-dark .suggestion-button {
  background-color: #0056b3;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 0.8em;
  cursor: pointer;
  margin: 5px;
}

.side-panel-dark .suggestion-button:hover {
  background-color: lightblue;
  color: black;
}

.powered-by {
  margin-top: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: lightgrey;
  font-size: 0.8em;
  height: 100%;
  text-align: center;
}

.powered-by a {
  color: lightgrey;
  text-decoration: underline;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  color: #333;
}

.modal-text {
  color: black;
}

.modal-buttons {
  padding: 5px 10px;
  display: flex;
  justify-content: space-between;
}

.modal-buttons button {
  padding: 5px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.modal-buttons button:first-child {
  background: #ccc;
}

.modal-buttons button:last-child {
  background: #007bff;
  color: white;
}

.invalid {
  border-color: red;
}

.error-message {
  color: red;
  font-size: 0.8em;
  margin-top: 5px;
}