Display a message when there are no chats in chat-history

i-dot-ai · Jan 27, 2025 · f64afd5 · f64afd5
1 parent 6e31725
commit f64afd5
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/django_app/frontend/src/css/chats/chat-history.scss b/django_app/frontend/src/css/chats/chat-history.scss
@@ -2,6 +2,13 @@
   background-color: white;
   position: relative;
 }
+.rb-chat-history__no-chats {
+  margin-bottom: 0.75rem;
+  margin-top: 0.5rem;
+}
+.rb-chat-history:has(li) .rb-chat-history__no-chats {
+  display: none;
+}
 .iai-panel__scrollable--chat-history {
   margin-top: -0.75rem;
   max-height: calc(100vh - 20rem);

diff --git a/django_app/redbox_app/templates/chats.html b/django_app/redbox_app/templates/chats.html
@@ -24,8 +24,10 @@ <h1 class="govuk-visually-hidden">Chats</h1>
           New chat
         </a>
 
-        <div class="iai-panel govuk-!-margin-top-5 govuk-!-padding-top-3">
+        <div class="rb-chat-history iai-panel govuk-!-margin-top-5 govuk-!-padding-top-3">
           <h2 class="govuk-body-s govuk-!-font-weight-bold govuk-!-margin-bottom-0 rb-chat-history__title">Recent chats</h2>
+          <p class="rb-chat-history__no-chats govuk-body-s">You have no saved chats</p>
+
           <div class="iai-panel__scrollable iai-panel__scrollable--chat-history govuk-!-padding-right-3">
 
             <chat-history>