feat: Validate token count does not exceed limit (#4056)

* feat: add tokenizer library

* feat: add debounced token calculation

* feat: outsource warning and error texts into translations

* feat: disable submission should calculation fail

* feat: outsource functionality into separate hook

* feat: enhance token usage warning information

* feat: outsource constants into config

* feat: return max tokens from hook to cover fallback

* test: add unit test for new hook

* fix: hide joule feedback on cluster list

* test: add integration test

* test: adjust test config

Author: chriskari

kyma/environments/dev/config.yaml

@@ -72,6 +72,8 @@ config:
       isEnabled: true
       config:
         feedbackLink: https://www.youtube.com/watch?v=dQw4w9WgXcQ
+        model: 'gpt-4.1'
+        queryMaxTokens: 8000
     TRACKING:
       isEnabled: false
     GARDENER_LOGIN:

kyma/environments/prod/config.yaml

@@ -75,6 +75,8 @@ config:
       isEnabled: false
       config:
         feedbackLink: ''
+        model: ''
+        queryMaxTokens: 0
     GARDENER_LOGIN:
       isEnabled: false
       kubeconfig: null

kyma/environments/stage/config.yaml

@@ -73,6 +73,8 @@ config:
       isEnabled: true
       config:
         feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/form/SV_dmWATTfes5SstG6
+        model: 'gpt-4.1'
+        queryMaxTokens: 8000
     GARDENER_LOGIN:
       isEnabled: false
       kubeconfig: null

package-lock.json

@@ -86,6 +86,7 @@
     "i18next": "^24.2.3",
     "i18next-http-backend": "^3.0.2",
     "immutable": "^5.1.1",
+    "js-tiktoken": "^1.0.20",
     "js-yaml": "^4.1.0",
     "jsonata": "^1.8.7",
     "jsonpath": "^1.1.1",

package.json

@@ -56,6 +56,8 @@ config:
       isEnabled: false
       config:
         feedbackLink: https://sapinsights.eu.qualtrics.com/jfe/preview/previewId/1fa80b40-56c3-4b20-9902-877df3da3493/SV_dmWATTfes5SstG6?Q_CHL=preview&Q_SurveyVersionID=current
+        model: 'gpt-4.1'
+        queryMaxTokens: 8000
     TRACKING:
       isEnabled: false
     GARDENER_LOGIN:

public/defaultConfig.yaml

@@ -788,6 +788,10 @@ kyma-companion:
     suggestions-error: No suggestions available
     http-error: Response status code is {{statusCode}}. Retrying {{attempt}}.
     http-error-no-retry: Response status code is {{statusCode}}.
+  input-tokens:
+    warning: "Approaching per-query token limit ({{tokenCount}}/{{maxTokens}} tokens used)"
+    error: "Message exceeds per-query token limit ({{tokenCount}}/{{maxTokens}} tokens used)"
+    calculation-error: Unable to calculate token count.
   introduction: Hi, I am your Kyma assistant! You can ask me any question, and I will try to help you to the best of my abilities. Meanwhile, you can check the suggested questions below; you may find them helpful!
   introduction-no-suggestions: Hi, I am your Kyma assistant! You can ask me any question, and I will try to help you to the best of my abilities. While I don't have any initial suggestions for this resource, feel free to ask me anything you'd like!
   placeholder: Message Joule...

public/i18n/en.yaml

@@ -7,6 +7,9 @@ import {
 } from '@ui5/webcomponents-react';
 import { useEffect, useRef, useState, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useFeature } from 'hooks/useFeature';
+import { configFeaturesNames } from 'state/types';
+import { useTokenValidation } from 'components/KymaCompanion/hooks/useTokenValidation';
 import './QueryInput.scss';
 
 // Layout constants
@@ -39,6 +42,19 @@ export default function QueryInput({
   const [maxRows, setMaxRows] = useState(0);
   const [isMultiRowMode, setIsMultiRowMode] = useState(false);
 
+  const { config: companionConfig } = useFeature(
+    configFeaturesNames.KYMA_COMPANION,
+  );
+
+  const {
+    isTokenLimitExceeded,
+    showTokenWarning,
+    tokenError,
+    tokenCount,
+    validateTokenCount,
+    maxTokens,
+  } = useTokenValidation(inputValue, companionConfig);
+
   const checkRowCount = useCallback(() => {
     if (!textareaRef.current) return;
 
@@ -59,11 +75,9 @@ export default function QueryInput({
 
     const canvasHeight = containerRef.current.clientHeight;
     const maxAllowedHeight = canvasHeight * MAX_HEIGHT_RATIO;
-
     const availableContentHeight =
       maxAllowedHeight - 2 * PADDING_BLOCK - 2 * BORDER_SIZE;
     const calculatedMaxRows = Math.floor(availableContentHeight / LINE_HEIGHT);
-
     const finalMaxRows = Math.max(
       1,
       Math.min(calculatedMaxRows, FALLBACK_MAX_ROWS),
@@ -73,11 +87,42 @@ export default function QueryInput({
 
   const onSubmitInput = () => {
     if (inputValue.length === 0) return;
+
+    // Immediate token validation before submission (bypasses debounce)
+    const { isValid } = validateTokenCount(inputValue);
+    if (!isValid) {
+      return;
+    }
+
     const prompt = inputValue;
     setInputValue('');
     sendPrompt(prompt);
   };
 
+  const getValueState = () => {
+    if (isTokenLimitExceeded || tokenError) return 'Negative';
+    if (showTokenWarning) return 'Critical';
+    return 'None';
+  };
+
+  const getValueStateMessage = () => {
+    if (showTokenWarning)
+      return (
+        <Text>
+          {t('kyma-companion.input-tokens.warning', { tokenCount, maxTokens })}
+        </Text>
+      );
+    if (isTokenLimitExceeded)
+      return (
+        <Text>
+          {t('kyma-companion.input-tokens.error', { tokenCount, maxTokens })}
+        </Text>
+      );
+    if (tokenError)
+      return <Text>{t('kyma-companion.input-tokens.calculation-error')}</Text>;
+    return null;
+  };
+
   useEffect(() => {
     if (!loading && textareaRef.current) {
       requestAnimationFrame(() => {
@@ -90,44 +135,29 @@ export default function QueryInput({
   }, [loading]);
 
   useEffect(() => {
-    requestAnimationFrame(() => {
-      calculateMaxRows();
-    });
-
+    requestAnimationFrame(() => calculateMaxRows());
     const handleWindowResize = () => calculateMaxRows();
     window.addEventListener('resize', handleWindowResize);
-
-    return () => {
-      window.removeEventListener('resize', handleWindowResize);
-    };
+    return () => window.removeEventListener('resize', handleWindowResize);
   }, [calculateMaxRows]);
 
   useEffect(() => {
     if (!textareaRef.current) return;
-
     const textarea = textareaRef.current;
-    const resizeObserver = new ResizeObserver(() => {
-      checkRowCount();
-    });
-
+    const resizeObserver = new ResizeObserver(() => checkRowCount());
     resizeObserver.observe(textarea);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
+    return () => resizeObserver.disconnect();
   }, [checkRowCount]);
 
   useEffect(() => {
     requestAnimationFrame(() => {
       const textarea = textareaRef.current;
-
       const mirrorElement = textarea?.shadowRoot?.querySelector(
         '.ui5-textarea-mirror',
       ) as HTMLElement;
       const innerElement = textarea?.shadowRoot?.querySelector(
         '.ui5-textarea-inner',
       ) as HTMLElement;
-
       if (mirrorElement && innerElement) {
         const padding = isMultiRowMode ? PADDING_MULTI_ROW : PADDING_SINGLE_ROW;
         mirrorElement.style.paddingRight = padding;
@@ -148,16 +178,15 @@ export default function QueryInput({
           rows={1}
           placeholder={t('kyma-companion.placeholder')}
           value={inputValue}
+          valueState={getValueState()}
+          valueStateMessage={getValueStateMessage()}
           onKeyDown={e => {
             if (e.key === 'Enter' && !e.shiftKey) {
               e.preventDefault();
               onSubmitInput();
             }
           }}
-          onInput={e => {
-            setInputValue(e.target.value);
-          }}
-          valueState="None"
+          onInput={e => setInputValue(e.target.value)}
         />
         <div
           className={`query-input-actions${isMultiRowMode ? '__column' : ''}`}
@@ -175,7 +204,12 @@ export default function QueryInput({
             id="submit-icon"
             icon="paper-plane"
             design="Emphasized"
-            disabled={loading || inputValue.length === 0}
+            disabled={
+              loading ||
+              inputValue.length === 0 ||
+              isTokenLimitExceeded ||
+              tokenError
+            }
             onClick={onSubmitInput}
           />
         </div>