Style sources for SSR generated responses

Remove dummy data

Don't pass in "None" to data-session-id

django_app/frontend/style.scss

@@ -82,6 +82,9 @@ $redbox-red: #A50202;
   font-size: 1rem;
   padding-top: 0.5rem;
 }
+.iai-chat-message__sources-heading, .iai-chat-messages__sources-link {
+  font-size: 0.875rem;
+}
 .iai-chat-message__text code {
   display: block;
   overflow-x: auto;

django_app/redbox_app/templates/macros/govuk-notification-banner.html

@@ -1,8 +1,8 @@
-{% macro govukNotificationBanner(title="Important", text_list=None) %}
+{% macro govukNotificationBanner(title="Important", text_list=None, heading_level=2) %}
 
 <div class="govuk-notification-banner" role="region" aria-labelledby="govuk-notification-banner-title" data-module="govuk-notification-banner">
   <div class="govuk-notification-banner__header">
-    <h2 class="govuk-notification-banner__title" id="govuk-notification-banner-title">{{ title }}</h2>
+    <h{{ heading_level }} class="govuk-notification-banner__title" id="govuk-notification-banner-title">{{ title }}</h{{ heading_level }}>
   </div>
   <div class="govuk-notification-banner__content">
     {% for line in text_list %}

django_app/redbox_app/templates/sessions.html

@@ -27,7 +27,7 @@ <h2 class="govuk-heading-s">Recent sessions</h2>
 
   </div>
 
-  <chat-controller data-stream-url="{{ streaming.endpoint }}" data-session-id="{{ session_id }}" class="govuk-grid-column-two-thirds">
+  <chat-controller data-stream-url="{{ streaming.endpoint }}" data-session-id="{{ session_id or '' }}" class="govuk-grid-column-two-thirds">
 
     <h2 class="govuk-heading-m">Current session</h2>
 
@@ -36,13 +36,24 @@ <h2 class="govuk-heading-m">Current session</h2>
       text_list=[
         {"text": "Responses are generated by Artificial Intelligence (AI)"},
         {"text": "You must check the response for accuracy", "bold": True}
-      ]
+      ],
+      heading_level="3"
     ) }}
 
-    {% macro message_box(role, text, classes=None) %}
+    {% macro message_box(role, text, sources, classes=None) %}
       <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>
+        {% if sources %}
+          <h3 class="iai-chat-message__sources-heading govuk-heading-s govuk-!-margin-bottom-1">Sources</h3>
+          <ul class="govuk-list govuk-list--bullet govuk-!-margin-bottom-0">
+            {% for source in sources %}
+              <li class="govuk-!-margin-bottom-0">
+                <a class="iai-chat-messages__sources-link govuk-link" href="{{ source.url }}">{{ source.original_file_name }}</a>
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
       </div>
     {% endmacro %}
 
@@ -52,11 +63,9 @@ <h2 class="govuk-heading-m">Current session</h2>
       {% for message in messages %}
         {{ message_box(
           role = message.role,
-          text = message.text
+          text = message.text,
+          sources = message.source_files.all()
         ) }}
-        {% for source in message.source_files.all() %}
-          <div class="iai-chat-message__text"><a href="{{ source.url }}">{{ source.original_file_name }}</a></div>
-        {% endfor %}
       {% endfor %}
 
       {# CSR messages are inserted here #}