Show token limits per model

i-dot-ai · Feb 5, 2025 · 839fe82 · 839fe82
1 parent 4c0d403
commit 839fe82
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 8 deletions.
diff --git a/django_app/frontend/src/css/chats/chats.scss b/django_app/frontend/src/css/chats/chats.scss
@@ -239,6 +239,17 @@ chat-message {
   font-weight: bold;
   margin-right: 0.5rem;
 }
+.iai-chat-bubble__text details {
+  border: 1px solid var(--iai-colour-secondary-teal);
+  border-radius: 0.5rem;
+  color: var(--iai-colour-secondary-teal);
+  cursor: pointer;
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+}
+.iai-chat-bubble__text details ul {
+  padding-left: 1rem;
+}
 
 @import "./chat-input.scss";
 

diff --git a/django_app/frontend/src/js/web-components/chats/chat-controller.js b/django_app/frontend/src/js/web-components/chats/chat-controller.js
@@ -39,14 +39,23 @@ class ChatController extends HTMLElement {
         fileList += `<li><span>${element.dataset.name}: </span><span>${element.dataset.tokens} tokens</span></li>`;
       });
       if (tokenCount > maxTokens) {
+        const models = JSON.parse(this.dataset.models || "[]");
         this.#showError(`
-          ${tokenElements.length > 1 ? 
-            `<p>The attached files are too large. Please remove some files and try again.</p>` :
-            `<p>The attached file is too large. Please remove this and try again with a smaller file.</p>`
-          }
-          <p>The maximum size for this chat is ${maxTokens} tokens.</p>
+          <p>The attached file(s) are too large. The maximum size for this chat is ${maxTokens} tokens.</p>
+          <p>You can try:</p>
+          <ul>
+            <li>Removing any files attached since the last message</li>
+            <li>Reducing the size of the files attached</li>
+            <li>Selecting a different model</li>
+          </ul>
           <p>Current file sizes:</p>
           <ul class="rb-token-sizes">${fileList}</ul>
+          <details>
+            <summary>Model token limits</summary>
+            <ul class="rb-token-sizes">
+              ${models.map((model) => `<li><span>${model.name}: </span><span>${model.max_tokens} tokens</li>`).join("")}
+            </ul>
+          </details>
         `);
         return;
       }

diff --git a/django_app/frontend/src/js/web-components/chats/model-selector.mjs b/django_app/frontend/src/js/web-components/chats/model-selector.mjs
@@ -5,7 +5,7 @@ import { RedboxElement } from "../redbox-element.mjs";
 export class ModelSelector extends RedboxElement {
 
   static properties = {
-    options: { type: Array, attribute: "data-options" },
+    options: { type: Array, attribute: "data-models" },
     expanded: { type: Boolean, state: true },
     selectedOption: {type: Number, state: true},
     activeOption: {type: Number, state: true} // this is the currently highlighted option when using keyboard, so can be different to selectedOption

diff --git a/django_app/redbox_app/templates/chats.html b/django_app/redbox_app/templates/chats.html
@@ -75,7 +75,7 @@ <h2 class="chat-title__heading govuk-visually-hidden" hidden>Current chat</h2>
           {% endif %}
         </chat-title>
 
-        <chat-controller class="iai-chat-container" data-stream-url="{{ streaming.endpoint }}">
+        <chat-controller class="iai-chat-container" data-stream-url="{{ streaming.endpoint }}" data-models="{{ llm_options | to_json }}">
 
           <div class="rb-chat-message__container js-message-container">
 
@@ -127,7 +127,7 @@ <h2 class="chat-title__heading govuk-visually-hidden" hidden>Current chat</h2>
             </message-input>
             <div class="rb-chat-input__input-container-bottom">
               {% set model_selector %}
-                <model-selector data-options="{{ llm_options | to_json }}"></model-selector>
+                <model-selector data-models="{{ llm_options | to_json }}"></model-selector>
               {% endset %}
               {{ model_selector | render_lit }}
               <p class="govuk-body-xs govuk-!-margin-bottom-0">You can use up to, and including, official sensitive documents</p>