pull_request_ai 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 747534e2b7a4327fb3a3eb986df97000e737072500f1e70839b2d61c5edeaf57
+  data.tar.gz: 2647f3525b95e48a268a05ded206e5a644e6a6e10494680af11f398dd9f4173d
+SHA512:
+  metadata.gz: c918aa851b69ba5b5f079bcc75ad308132083e3a83638786063917022dc1d6cc919c69524422d64b173f4e378b923d771a3a79d6c8caa7e392f6139325f95bf8
+  data.tar.gz: 6afa49e24926c1895088fb60704b6e5008239b1e2214e4900cbc3e313f8a4490561a5925915c357cd173196c3f09e4650286f5bfd504573f2af43abd8966a667

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2023 André Franco
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,125 @@
+# PullRequestAi
+This Rails Engine offers a way to request Pull Request descriptions from OpenAI chatGPT and optionally allows direct creation or updating of Pull Requests on GitHub or Bitbucket.
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "pull_request_ai"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+OR, install it yourself as:
+```bash
+$ gem install pull_request_ai
+```
+
+## Contributing
+Contribution directions go here.
+
+## License
+This Rails Engine is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+
+## Configuration
+
+To configure this Rails Engine you can **just** set some specific Environment Variables or you can use the Rails Engine initializer class.
+
+The minimum requirement that allows this Rails Engine to ask chatGPT Pull Request descriptions based on Git respository changes is the [OpenAI Key](https://platform.openai.com/account/usage).
+
+Using **only** Environment Variable you need to set:
+- [OPENAI_API_KEY](https://platform.openai.com/account/usage)
+
+OR, if you choose to use the initializer:
+```ruby
+PullRequestAi.configure do |config|
+    config.openai_api_key = 'YOUR_OPENAI_API_KEY'
+end
+```
+
+## Integrations
+
+To enable direct creation or updating of Pull Requests this Rails Engine can integrate with GitHub or Bitbucket.
+
+For GitHub you need to provide a [GitHub Access Token](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token).
+And for Bitbucket you need to provide a [Bitbucket App Password](https://bitbucket.org/account/settings/app-passwords/) and your Bitbucket Username.
+
+### GitHub Configuration
+
+Using **only** Environment Variable you need to set:
+- [GITHUB_ACCESS_TOKEN](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)
+
+OR, if you choose to use the initializer:
+```ruby
+PullRequestAi.configure do |config|
+    config.github_access_token = 'YOUR_GITHUB_ACCESS_TOKEN'
+end
+```
+
+### Bitbucket Configuration
+
+Using **only** Environment Variable you need to set:
+- [BITBUCKET_APP_PASSWORD](https://bitbucket.org/account/settings/app-passwords/)
+- [BITBUCKET_USERNAME](https://bitbucket.org/account/settings/)
+
+OR, if you choose to use the initializer:
+```ruby
+PullRequestAi.configure do |config|
+    config.bitbucket_app_password = 'YOUR_BITBUCKET_APP_PASSWORD'
+    config.bitbucket_username = 'YOUR_BITBUCKET_USERNAME'
+end
+```
+
+## Usage
+
+To use the Rails Engine interface on the browser you need to mount the engine route into your project routes. To do that include on your `routes.rb` file the following:
+
+```ruby
+mount PullRequestAi::Engine => ''
+```
+
+Then you navigate to:
+
+```
+http://127.0.0.1:3000/rrtools/pull_request_ai
+```
+
+Another way to use this Rails Engine is through code, to do that create an instance of the main client object.
+
+```ruby
+client = PullRequestAi::Client.new
+```
+
+This object offers the following actions:
+- current_opened_pull_requests(base) - method that receives a base branch and based on the current branch will return any existing open pull request from GitHub.
+- destination_branches - method without arguments that will return a list of all available remote branches.
+- open_pull_request(base, title, description) - method that will communicate with the GitHub API to open a new pull request with the given parameters.
+- update_pull_request(number, base, title, description) - method to update an existing pull request base, title, and description.
+- flatten_current_changes(branch) - method that returns changes between the current branch and the given branch in a single string.
+
+Notes about the return of these methods, all methods take advantage of [dry-monads](https://dry-rb.org/gems/dry-monads/1.3/).
+
+## Extra Configurations
+
+If you need you have access to some aditional configurations which are:
+- openai_api_endpoint - The OpenAI API endpoint.
+- github_api_endpoint - The GitHub API endpoint.
+- bitbucket_api_endpoint - The Bitbucket API endpoint.
+- model - The [`model`](https://platform.openai.com/docs/models/model-endpoint-compatibility) parameter allows the user to select which OpenAI model to use for Pull Request suggestions. The default model used by this Gem is `gpt-3.5-turbo`, which is the most accessible. However, if you have access to version 4, we recommend using the `gpt-4` model.
+- temperature - The [`temperature`](https://platform.openai.com/docs/api-reference/completions/create#completions/create-temperature) parameter is an OpenAI API configuration that affects the randomness of the output. Higher values produce more random results, while lower values like 0.2 produce more focused and deterministic output.
+
+The only way to configure these parameters is using the initializer, above it is listing as well their default values:
+
+```ruby
+PullRequestAi.configure do |config|
+  ...
+  config.openai_api_endpoint = 'https://api.openai.com'
+  config.github_api_endpoint = 'https://api.github.com'
+  config.bitbucket_api_endpoint = 'https://api.bitbucket.org'
+  config.model = 'gpt-3.5-turbo'
+  config.temperature = 0.6
+end
+```

data/Rakefile

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require 'bundler/setup'
+
+APP_RAKEFILE = File.expand_path('test/dummy/Rakefile', __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'

data/app/assets/config/pull_request_ai_manifest.js

@@ -0,0 +1 @@
+//= link_directory ../stylesheets/pull_request_ai .css

data/app/assets/javascripts/application.js

@@ -0,0 +1,248 @@
+//= require_tree .
+
+const reloadButton = document.getElementById('reload-btn');
+const requestDescriptionButton = document.getElementById('request-description-btn');
+const copyChatToClipboardButton = document.getElementById('copy-chat-to-clipboard-btn');
+const copyChatToDescriptionButton = document.getElementById('copy-chat-to-description-btn');
+const createPullRequestButton = document.getElementById('create-pull-request-btn');
+const updatePullRequestButton = document.getElementById('update-pull-request-btn');
+const copyDescriptionToClipboardButton = document.getElementById('copy-description-to-clipboard-btn');
+const pullRequestWebsiteButton = document.getElementById('pull-request-website-btn');
+
+const loadingContainer = document.getElementById('loading-container');
+const prepareContainer = document.getElementById('prepare-container');
+const chatDescriptionContainer = document.getElementById('chat-description-container');
+const pullRequestContainer = document.getElementById('pull-request-container');
+
+const branchField = document.getElementById('branch-field');
+const typeField = document.getElementById('type-field');
+const summaryField = document.getElementById('summary-field');
+
+const chatDescriptionField = document.getElementById('chat-description-field');
+
+const pullRequestNumberField = document.getElementById('pull-request-number-field');
+const pullRequestTitleField = document.getElementById('pull-request-title-field');
+const pullRequestDescriptionField = document.getElementById('pull-request-description-field');
+
+async function jsonPost(path, data) {
+  showSpinner();
+
+  const response = await fetch(path, {
+    method: 'post',
+    body: JSON.stringify(data),
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
+    },
+    credentials: 'same-origin'
+  });
+
+  if (!response.ok && response.status != 422) {
+    hideSpinner();
+    unlockSelectors();
+    disableSubmission();
+    throw new Error(`An error has occured: ${response.statusText}`);
+  }
+  return await response.json();
+}
+
+reloadButton.onclick = () => {
+  window.location.reload();
+}
+
+copyChatToClipboardButton.onclick = () => {
+  copyToClipboardValueFrom(
+    chatDescriptionField,
+    "Chat description copied to the Clipboard."
+  );
+}
+
+copyDescriptionToClipboardButton.onclick = () => {
+  copyToClipboardValueFrom(
+    pullRequestDescriptionField,
+    "Description copied to the Clipboard."
+  );
+}
+
+requestDescriptionButton.onclick = () => {
+  const data = { branch: branchField.value, type: typeField.value, summary: summaryField.value };
+
+  lockSelectors();
+
+  jsonPost('/rrtools/pull_request_ai/prepare', data).then(data => {
+    hideSpinner();
+    unlockSelectors();
+    if ('errors' in data) {
+      window.showNotification({ message: data.errors, theme: "error" });
+    }
+    else if ('notice' in data) {
+      window.showNotification({ message: data.notice, theme: "warning" });
+    }
+    else {
+      enableSubmission(data);
+    }
+  }).catch(errorMsg => {
+    window.showNotification({ message: errorMsg, theme: "error" });
+  });
+}
+
+copyChatToDescriptionButton.onclick = () => {
+  const chat = chatDescriptionField.value;
+  const current = pullRequestDescriptionField.value;
+  pullRequestDescriptionField.value = current + "\n\n" + chat;
+  window.showNotification({
+    message: "Chat description copied to the Pull Request description."
+  });
+}
+
+createPullRequestButton.onclick = () => {
+  const data = {
+    branch: branchField.value, title: pullRequestTitleField.value, description: pullRequestDescriptionField.value
+  };
+  jsonPost('/rrtools/pull_request_ai/create', data).then(data => {
+    hideSpinner();
+    processData(data, "Pull Request created successfully.");
+  }).catch(errorMsg => {
+    window.showNotification({ message: errorMsg, theme: "error" });
+  });
+}
+
+updatePullRequestButton.onclick = () => {
+  const data = {
+    number: pullRequestNumberField.value, branch: branchField.value, title: pullRequestTitleField.value, description: pullRequestDescriptionField.value
+  };
+  jsonPost('/rrtools/pull_request_ai/update', data).then(data => {
+    hideSpinner();
+    processData(data, "Pull Request updated successfully.");
+  }).catch(errorMsg => {
+    window.showNotification({ message: errorMsg, theme: "error" });
+  });
+}
+
+function showSpinner() {
+  loadingContainer.style.display = 'block';
+}
+
+function hideSpinner() {
+  loadingContainer.style.display = 'none';
+}
+
+function lockSelectors() {
+  branchField.setAttribute('disabled', '');
+  typeField.setAttribute('disabled', '');
+  summaryField.setAttribute('disabled', '');
+  requestDescriptionButton.setAttribute('disabled', '');
+}
+
+function unlockSelectors() {
+  branchField.removeAttribute('disabled');
+  typeField.removeAttribute('disabled');
+  summaryField.removeAttribute('disabled');
+  requestDescriptionButton.removeAttribute('disabled');
+}
+
+function copyToClipboardValueFrom(field, successMessage) {
+  if (navigator.clipboard) {
+    const text = field.value;
+    navigator.clipboard.writeText(text);
+  } else {
+    field.select();
+    document.execCommand("copy");
+  }
+  window.showNotification({ message: successMessage });
+}
+
+function processData(data, successMessage) {
+  if ('errors' in data) {
+    window.showNotification({ message: data.errors, theme: "error" });
+  }
+  else if ('notice' in data) {
+    window.showNotification({ message: data.notice, theme: "warning" });
+  }
+  else {
+    window.showNotification({ message: successMessage });
+    updateForm(data)
+  }
+}
+
+function enableSubmission(data) {
+  chatDescriptionField.value = data.description;
+  pullRequestWebsiteButton.classList.add('hide');
+
+  if (data.remote_enabled) {
+    // With Remote configured we always show the Pull Request form.
+    pullRequestContainer.classList.remove('hide');
+    if (data.open_pr) {
+      // With a Pull Request open we show the chat description on top with the button to copy to the form.
+      chatDescriptionContainer.classList.remove('hide');
+      copyChatToDescriptionButton.classList.remove('hide');
+
+      // Update the Pull Request form buttons accordingly.
+      createPullRequestButton.classList.add('hide');
+      updatePullRequestButton.classList.remove('hide');
+
+      // Fill the form with the existing values.
+      pullRequestNumberField.value = data.open_pr.number;
+      pullRequestTitleField.value = data.open_pr.title;
+      pullRequestDescriptionField.value = data.open_pr.description;
+
+      checkPullRequestVisibility(data.open_pr.link);
+    } 
+    else {
+      // Without a Pull Request open we don't need to show the chat suggestion text area 
+      // because we will use the form already filled with the suggestion.
+      chatDescriptionContainer.classList.add('hide');
+
+      // Update the Pull Request form buttons accordingly.
+      createPullRequestButton.classList.remove('hide');
+      updatePullRequestButton.classList.add('hide');
+
+      // Clear the form and fill the description with the chat suggestion.
+      pullRequestNumberField.value = '';
+      pullRequestTitleField.value = '';
+      pullRequestDescriptionField.value = data.description;
+    }
+  } 
+  else {
+    // Without Remote configured we show the chat description with the copy button.
+    pullRequestContainer.classList.add('hide');
+    chatDescriptionContainer.classList.remove('hide');
+    copyChatToDescriptionButton.classList.add('hide');
+  }
+}
+
+function updateForm(data) {
+  if (data.number && data.title) {
+    chatDescriptionField.value = pullRequestDescriptionField.value;
+
+    // With Remote configured we always show the Pull Request form.
+    pullRequestContainer.classList.remove('hide');
+
+    // Update the Pull Request form buttons accordingly.
+    createPullRequestButton.classList.add('hide');
+    updatePullRequestButton.classList.remove('hide');
+
+    // Fill the form with the existing values.
+    pullRequestNumberField.value = data.number;
+    pullRequestTitleField.value = data.title;
+    pullRequestDescriptionField.value = data.description;
+    
+    checkPullRequestVisibility(data.link);
+  }
+}
+
+function checkPullRequestVisibility(link) {
+  if (link && link.length > 0) {
+    pullRequestWebsiteButton.classList.remove('hide');
+    pullRequestWebsiteButton.onclick = function() {
+      window.open(link, "_blank");
+    };
+  } else {
+    pullRequestWebsiteButton.classList.add('hide');
+  }
+}
+
+function disableSubmission() {
+  chatDescriptionContainer.classList.add('hide');
+  pullRequestContainer.classList.add('hide');
+}

data/app/assets/javascripts/notifications.js

@@ -0,0 +1,76 @@
+(function Notifications(window) {
+
+	const partial = (fn, ...presetArgs) => (...laterArgs) => fn(...presetArgs, ...laterArgs);
+
+	const append = (el, ...children) => children.forEach(child => el.appendChild(child));
+
+	const isString = input => typeof input === 'string';
+
+	const createElement = (elementType, ...classNames) => {
+		const element = document.createElement(elementType);
+		if(classNames.length) {
+			classNames.forEach(currentClass => element.classList.add(currentClass));
+		}
+		return element;
+	};
+
+	const setInnerText = (element, text) => {
+		element.innerText = text;
+		return element;
+	};
+
+	const createTextElement = (elementType, ...classNames) => partial(setInnerText, createElement(elementType, ...classNames));
+
+	const createParagraph = (...classNames) => createTextElement('p', ...classNames);
+
+	const defaultOptions = {
+		showDuration: 3000,
+		theme: 'success'
+	};
+
+	function showNotification(options) {
+		if(typeof options.showDuration !== 'number') {
+			options.showDuration = defaultOptions.showDuration;
+		}
+		if(!isString(options.theme) || options.theme.length === 0) {
+			options.theme = defaultOptions.theme;
+		}
+		if(!isString(options.message) || options.message.length === 0) {
+			options.message = defaultOptions.theme;
+		}
+
+		const container = createNotificationContainer();
+		const notificationEl = createElement('div', 'notification', options.theme);
+		notificationEl.addEventListener('click', () => container.removeChild(notificationEl));
+		
+		if(isString(options.title) && options.title.length > 0) {
+			append(notificationEl, createParagraph('notification-title')(options.title));
+		}
+		append(notificationEl, createParagraph('notification-message')(options.message));
+		append(container, notificationEl);
+
+		if(options.showDuration && options.showDuration > 0) {
+			const timeout = setTimeout(() => {
+				container.removeChild(notificationEl);
+				if(container.querySelectorAll('.notification').length === 0) {
+					document.body.removeChild(container);
+				}
+			}, options.showDuration);
+
+			notificationEl.addEventListener('click', () => clearTimeout(timeout));
+		}
+	}
+
+	function createNotificationContainer() {
+		let container = document.querySelector(`notification-container`);
+		if(!container) {
+			container = createElement('div', 'notification-container');
+			append(document.body, container);
+		}
+		return container;
+	}
+
+	if (!window.showNotification) {
+		window.showNotification = showNotification;
+	}
+})(window);

data/app/assets/stylesheets/pull_request_ai/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/assets/stylesheets/pull_request_ai/blocs.css

@@ -0,0 +1,4 @@
+main {
+  display: flex;
+  justify-content: center;
+}

data/app/assets/stylesheets/pull_request_ai/helpers.css

@@ -0,0 +1,26 @@
+.hide { display: none; }
+.block { display: block; }
+.clear:after { content: ''; clear: both; display: block; }
+
+.mt-5 { margin-top: 5px; }
+
+.mt-10 { margin-top: 10px; }
+.mt-20 { margin-top: 20px; }
+.mt-40 { margin-top: 40px; }
+.mr-10 { margin-right: 10px; }
+.mr-20 { margin-right: 20px; }
+.ml-10 { margin-left: 10px; }
+
+.fw { width: 100% }
+
+.w-760 { width: 760px; }
+
+.mh-40 { min-height: 40px; }
+.h-100 { height: 100px; }
+.h-220 { height: 220px; }
+
+.flex {
+  display: flex;
+}
+
+.red { color: #BD362F; }

data/app/assets/stylesheets/pull_request_ai/inputs.css

@@ -0,0 +1,64 @@
+
+input, select {
+  background: white;
+  border: 1px solid gray;
+  border-radius: 4px;
+  box-shadow: none;
+  color: black;
+  padding: 10px 12px;
+}
+
+button {
+  appearance: none;
+  background-color: #3d898b;
+  border: 1px solid rgba(27, 31, 35, .15);
+  border-radius: 6px;
+  box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
+  box-sizing: border-box;
+  color: #fff;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+  padding: 6px 16px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+button:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+button:hover {
+  background-color: #2D7072;
+}
+
+button:focus {
+  box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
+  outline: none;
+}
+
+button:disabled {
+  background-color: #a0a0a0;
+  border-color: rgba(27, 31, 35, .1);
+  color: rgba(255, 255, 255, 0.594);
+  cursor: default;
+}
+
+button:active {
+  background-color: #2D7072;
+  box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
+}
+
+textarea {
+  width: 760px;
+  resize: none;
+}

data/app/assets/stylesheets/pull_request_ai/notification.css

@@ -0,0 +1,71 @@
+.notification-container {
+  font-size: 14px;
+  box-sizing: border-box;
+  position: fixed;
+  z-index: 999999;
+  top: 12px;
+  right: 12px;
+}
+
+.notification-container .notification {
+  background: #ffffff;
+  transition: .3s ease;
+  position: relative;
+  pointer-events: auto;
+  overflow: hidden;
+  padding: 15px 15px 15px 50px;
+  margin: 0 0 6px;
+  width: 300px;
+  border-radius: 3px 3px 3px 3px;
+  box-shadow: 0 0 12px #999999;
+  color: #000000;
+  opacity: 0.9;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
+  filter: alpha(opacity=90);
+  background-position: 15px center !important;
+  background-repeat: no-repeat !important;
+  -webkit-user-select: none; /* Chrome all / Safari all */
+  -moz-user-select: none; /* Firefox all */
+  -ms-user-select: none; /* IE 10+ */
+  user-select: none; /* Likely future */
+}
+
+.notification:hover {
+  box-shadow: 0 0 12px #000000;
+  opacity: 1;
+  cursor: pointer;
+}
+
+.notification .notification-title {
+  font-weight: bold;
+  font-size: 16px;
+  text-align: left;
+  margin-top: 0;
+  margin-bottom: 6px;
+  word-wrap: break-word;
+}
+
+.notification .notification-message {
+  margin: 0;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+.notification p {
+  color: #ffffff;
+}
+
+.notification-container .success {
+  background: #51A351;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==");
+}
+
+.notification-container .warning {
+  background: #f87400;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=");
+}
+
+.notification-container .error {
+  background: #BD362F;
+  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=");
+}