shelley/ui: show warning icon when conversation exceeds 100k tokens

Philip Zeyliger and Shelley created 3 months ago

Prompt: When a conversation gets to 100k tokens, I want you to put up a ⚠️-type
icon, and some text above it: 'This conversation is getting long. For best
results, start a new conversation.'

When the context window reaches 100k tokens or more, show a ⚠️ warning icon
next to the context usage bar. Clicking the bar shows a popup with the
full warning message.

Co-authored-by: Shelley <[e-mail]>

Change summary

ui/src/components/ChatInterface.tsx | 40 ++++++++++++++++++++++--------
ui/src/styles.css                   | 12 +++++++++
2 files changed, 41 insertions(+), 11 deletions(-)

Detailed changes

ui/src/components/ChatInterface.tsx

@@ -37,6 +37,7 @@ function ContextUsageBar({ contextWindowSize, maxContextTokens }: ContextUsageBa
 
   const percentage = maxContextTokens > 0 ? (contextWindowSize / maxContextTokens) * 100 : 0;
   const clampedPercentage = Math.min(percentage, 100);
+  const showLongConversationWarning = contextWindowSize >= 100000;
 
   const getBarColor = () => {
     if (percentage >= 90) return "var(--error-text)";
@@ -104,20 +105,37 @@ function ContextUsageBar({ contextWindowSize, maxContextTokens }: ContextUsageBa
         >
           {formatTokens(contextWindowSize)} / {formatTokens(maxContextTokens)} (
           {percentage.toFixed(1)}%) tokens used
+          {showLongConversationWarning && (
+            <div style={{ marginTop: "6px", color: "var(--warning-text, #f59e0b)" }}>
+              This conversation is getting long.
+              <br />
+              For best results, start a new conversation.
+            </div>
+          )}
         </div>
       )}
-      <div
-        className="context-usage-bar"
-        onClick={handleClick}
-        title={`Context: ${formatTokens(contextWindowSize)} / ${formatTokens(maxContextTokens)} tokens (${percentage.toFixed(1)}%)`}
-      >
+      <div className="context-usage-bar-container">
+        {showLongConversationWarning && (
+          <span
+            className="context-warning-icon"
+            title="This conversation is getting long. For best results, start a new conversation."
+          >
+            ⚠️
+          </span>
+        )}
         <div
-          className="context-usage-fill"
-          style={{
-            width: `${clampedPercentage}%`,
-            backgroundColor: getBarColor(),
-          }}
-        />
+          className="context-usage-bar"
+          onClick={handleClick}
+          title={`Context: ${formatTokens(contextWindowSize)} / ${formatTokens(maxContextTokens)} tokens (${percentage.toFixed(1)}%)`}
+        >
+          <div
+            className="context-usage-fill"
+            style={{
+              width: `${clampedPercentage}%`,
+              backgroundColor: getBarColor(),
+            }}
+          />
+        </div>
       </div>
     </div>
   );

ui/src/styles.css

@@ -2681,6 +2681,18 @@ svg {
   }
 }
 
+.context-usage-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.context-warning-icon {
+  font-size: 14px;
+  line-height: 1;
+  cursor: help;
+}
+
 .context-usage-bar {
   width: 60px;
   height: 6px;