Make final tweaks to Redbox design system overlay

Update latest CSS bundle

Tweak response feedback spacing

django_app/frontend/iai-readme.md

@@ -0,0 +1,50 @@
+# i.AI Design System
+
+This is a light-weight wrapper to go over the top of the gov.uk design system, adding styles for i.AI services.
+
+## Installation
+
+1. Import the `iai.scss` file
+
+2. Add the i.AI logo to govuk-assets folder (or other appropriate folder for serving static files)
+
+3. In the footer, replace:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://www.nationalarchives.gov.uk/information-management/re-using-public-sector-information/uk-government-licensing-framework/crown-copyright/"> © Crown copyright</a>
+```
+
+With:
+
+```
+<a class="govuk-footer__link govuk-footer__copyright-logo" href="https://ai.gov.uk">
+    <img src="/static/govuk-assets/i-dot-ai-Official-Logo.svg" alt="Incubator for Artificial Intelligence" loading="lazy"/>
+</a>
+```
+
+## Optional styles and components
+
+## Brand colour
+
+The default brand colour is the i.AI pink. It is possible to change this by updating the `--product-colour` css variable at the top of the `iai.scss` file.
+
+### Phase banner
+
+Instead of using the standard phase banner, it is possible to add this to the header.
+
+Replace:
+
+```
+<a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+```
+
+With:
+
+```
+<div class="iai-header__service-name-container">
+    <a href="/" class="govuk-header__link govuk-header__service-name">Service name</a>
+    <strong class="govuk-tag govuk-phase-banner__content__tag">Beta</strong>
+</div>
+```
+
+You may also wish to add a feedback link to the footer. Using the example at https://design-system.service.gov.uk/components/footer/#footer-with-links-and-secondary-navigation replace "Built by the Government Digital Service" with "This is a new service – your feedback will help us to improve it.".

django_app/frontend/style.scss

@@ -56,6 +56,9 @@ $redbox-red: #A50202;
     width: auto;
   }
 }
+.iai-docs__status {
+  margin-top: 2px;
+}
 
 
 /* File upload */
@@ -65,10 +68,14 @@ $redbox-red: #A50202;
 
 
 /* Chat page */
+.iai-chat-message__container {
+  margin-top: -1rem;
+}
 .iai-chat-message {
   background-color: #f3f2f1;
   border: 1px solid #b1b4b6;
   border-radius: var(--border-radius);
+  margin-bottom: 0.75rem;
   padding: 1rem;
 }
 .iai-chat-message--ai {
@@ -120,7 +127,7 @@ $redbox-red: #A50202;
 .iai-response-feedback {
   display: none;
   position: relative;
-  top: -0.75rem;
+  top: -0.5rem;
 }
 /* only show response feedback for last AI message */
 [data-role="ai"] + .iai-response-feedback {

django_app/redbox_app/templates/documents.html

@@ -43,9 +43,9 @@ <h1 class="govuk-heading-l govuk-!-margin-bottom-0">Documents</h1>
               <td class="govuk-table__cell govuk-!-padding-top-3">{{file.name}}</td>
               <td class="govuk-table__cell govuk-!-padding-top-3">
                 {% if file.get_processing_status_text() == 'complete' %}
-                  <strong class="govuk-tag govuk-tag--green">{{file.get_processing_status_text()}}</strong>
+                  <strong class="govuk-tag govuk-tag--green iai-docs__status">{{file.get_processing_status_text()}}</strong>
                 {% else %}
-                  <strong class="govuk-tag govuk-tag--yellow" x-data="file-status" data-id="{{file.id}}" x-text="status">{{file.get_processing_status_text()}}</strong>
+                  <strong class="govuk-tag govuk-tag--yellow iai-docs__status" x-data="file-status" data-id="{{file.id}}" x-text="status">{{file.get_processing_status_text()}}</strong>
                 {% endif %}
               </td>
               <td class="govuk-table__cell iai-docs__actions">

django_app/redbox_app/templates/sessions.html

@@ -46,14 +46,14 @@ <h2 class="govuk-heading-m">Current session</h2>
       ]
     ) }}
 
-    {% macro message_box(role, text, classes=None) %}
+    {% macro message_box(role, text, classes="") %}
       <div class="iai-chat-message iai-chat-message--{{ role }} govuk-body {{ classes }}" data-role="{{ role }}">
         <div class="iai-chat-message__role">{{ role | upper }}</div>
         <markdown-converter class="iai-chat-message__text">{{ text }}</markdown-converter>
       </div>
     {% endmacro %}
 
-    <div class="js-message-container">
+    <div class="iai-chat-message__container js-message-container">
 
       {# SSR messages #}
       {% for message in messages %}