feat: POST /conversations to companion backend (kyma-project#3691)

* feat: track currently opened resource in ResourceDetails

* feat: use columnLayoutState to track currentResource

* feat: update structure of api call

* feat: proxy API request through our backend

* feat: automate token fetching in the backend

* feat: enhance columnLayouState to also track the start column resource

* feat: adjust resourcetype of cluster overview

* feat: improve initial layout

* feat: adjust column state for cluster overview

* feat: add loading indicator, and refresh when navigate to different resource

* feat: handle different auth method and fix errors regarding this

* feat: skip request if conversation has started

* feat: add properly cased resourceType to navigation nodes

* feat: adjustments regarding previous commit

* feat: adjust introductory message based on existence of suggestions

Author: chriskari

backend/companion/TokenManager.js

@@ -0,0 +1,50 @@
+import { getKcpToken } from './getKcpToken';
+
+export class TokenManager {
+  constructor() {
+    this.currentToken = null;
+    this.tokenExpirationTime = null;
+    // Add buffer time (e.g., 5 minutes) before actual expiration to prevent edge cases
+    this.expirationBuffer = 5 * 60 * 1000;
+  }
+
+  async getToken() {
+    // Check if token exists and is not near expiration
+    if (
+      this.currentToken &&
+      this.tokenExpirationTime &&
+      Date.now() < this.tokenExpirationTime - this.expirationBuffer
+    ) {
+      return this.currentToken;
+    }
+
+    // If token doesn't exist or is expired/near expiration, fetch new token
+    try {
+      const newToken = await getKcpToken();
+      this.currentToken = newToken;
+      // Set expiration time based on JWT expiry
+      // You'll need to decode the JWT to get the actual expiration
+      this.tokenExpirationTime = this.getExpirationFromJWT(newToken);
+      return newToken;
+    } catch (error) {
+      console.error('Failed to refresh token:', error);
+      throw error;
+    }
+  }
+
+  getExpirationFromJWT(token) {
+    try {
+      // Split the token and get the payload
+      const PAYLOAD_INDEX = 1;
+      const payload = JSON.parse(
+        Buffer.from(token.split('.')[PAYLOAD_INDEX], 'base64').toString(),
+      );
+      // exp is in seconds, convert to milliseconds
+      return payload.exp * 1000;
+    } catch (error) {
+      console.error('Error parsing JWT:', error);
+      // If we can't parse the expiration, set a default (e.g., 1 hour from now)
+      return Date.now() + 60 * 60 * 1000;
+    }
+  }
+}

backend/companion/companionRouter.js

@@ -0,0 +1,72 @@
+import express from 'express';
+import { TokenManager } from './TokenManager';
+
+const tokenManager = new TokenManager();
+
+const router = express.Router();
+
+router.use(express.json());
+
+async function handleAIChatRequest(req, res) {
+  const { namespace, resourceType, groupVersion, resourceName } = JSON.parse(
+    req.body.toString(),
+  );
+  const clusterUrl = req.headers['x-cluster-url'];
+  const certificateAuthorityData =
+    req.headers['x-cluster-certificate-authority-data'];
+  const clusterToken = req.headers['x-k8s-authorization']?.replace(
+    /^Bearer\s+/i,
+    '',
+  );
+  const clientCertificateData = req.headers['x-client-certificate-data'];
+  const clientKeyData = req.headers['x-client-key-data'];
+
+  try {
+    const url = 'https://companion.cp.dev.kyma.cloud.sap/api/conversations/';
+    const payload = {
+      resource_kind: resourceType,
+      resource_api_version: groupVersion,
+      resource_name: resourceName,
+      namespace: namespace,
+    };
+
+    const AUTH_TOKEN = await tokenManager.getToken();
+
+    const headers = {
+      Accept: 'application/json',
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${AUTH_TOKEN}`,
+      'X-Cluster-Certificate-Authority-Data': certificateAuthorityData,
+      'X-Cluster-Url': clusterUrl,
+    };
+
+    if (clusterToken) {
+      headers['X-K8s-Authorization'] = clusterToken;
+    } else if (clientCertificateData && clientKeyData) {
+      headers['X-Client-Certificate-Data'] = clientCertificateData;
+      headers['X-Client-Key-Data'] = clientKeyData;
+    } else {
+      throw new Error('Missing authentication credentials');
+    }
+
+    const response = await fetch(url, {
+      method: 'POST',
+      headers,
+      body: JSON.stringify(payload),
+    });
+
+    const data = await response.json();
+
+    res.json({
+      promptSuggestions: data?.initial_questions,
+      conversationId: data?.conversation_id,
+    });
+  } catch (error) {
+    console.error('Error in AI Chat proxy:', error);
+    res.status(500).json({ error: 'Failed to fetch AI chat data' });
+  }
+}
+
+router.post('/suggestions', handleAIChatRequest);
+
+export default router;

backend/companion/getKcpToken.js

@@ -0,0 +1,42 @@
+export async function getKcpToken() {
+  const tokenUrl = 'https://kymatest.accounts400.ondemand.com/oauth2/token';
+  const grantType = 'client_credentials';
+  const clientId = process.env.COMPANION_KCP_AUTH_CLIENT_ID;
+  const clientSecret = process.env.COMPANION_KCP_AUTH_CLIENT_SECRET;
+
+  if (!clientId) {
+    throw new Error('COMPANION_KCP_AUTH_CLIENT_ID is not set');
+  }
+  if (!clientSecret) {
+    throw new Error('COMPANION_KCP_AUTH_CLIENT_SECRET is not set');
+  }
+
+  // Prepare request data
+  const requestBody = new URLSearchParams();
+  requestBody.append('grant_type', grantType);
+
+  // Prepare authorization header
+  const authHeader = Buffer.from(`${clientId}:${clientSecret}`).toString(
+    'base64',
+  );
+
+  try {
+    const response = await fetch(tokenUrl, {
+      method: 'POST',
+      headers: {
+        Authorization: `Basic ${authHeader}`,
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: requestBody.toString(),
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    const data = await response.json();
+    return data.access_token;
+  } catch (error) {
+    throw new Error(`Failed to fetch token: ${error.message}`);
+  }
+}

backend/index.js

@@ -1,6 +1,7 @@
 import { makeHandleRequest, serveStaticApp, serveMonaco } from './common';
 import { handleTracking } from './tracking.js';
 import jsyaml from 'js-yaml';
+import companionRouter from './companion/companionRouter';
 //import { requestLogger } from './utils/other'; //uncomment this to log the outgoing traffic
 
 const express = require('express');
@@ -88,11 +89,13 @@ if (isDocker) {
   // Running in dev mode
   // yup, order matters here
   serveMonaco(app);
+  app.use('/backend/ai-chat', companionRouter);
   app.use('/backend', handleRequest);
   serveStaticApp(app, '/', '/core-ui');
 } else {
   // Running in prod mode
   handleTracking(app);
+  app.use('/backend/ai-chat', companionRouter);
   app.use('/backend', handleRequest);
 }
 

public/i18n/en.yaml

@@ -766,6 +766,7 @@ kyma-companion:
     title: Service is interrupted
     subtitle: A temporary interruption occured. Please try again.
   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
   disclaimer: Joule is powered by generative AI, and the output must be reviewed before use. Do not enter any sensitive personal data, and avoid entering any other data you do not wish to be processed.
   tabs:

src/command-pallette/CommandPalletteUI/useSearchResults.tsx

@@ -56,6 +56,7 @@ export function useSearchResults({
   const navigateAndCloseColumns = (to: To) => {
     setLayoutColumn({
       layout: 'OneColumn',
+      startColumn: null,
       midColumn: null,
       endColumn: null,
     });

src/components/App/ExtensibilityRoutes.js

@@ -36,20 +36,37 @@ const ColumnWrapper = ({
   const { namespaceId, resourceName } = useParams();
   const initialLayoutState = layout
     ? {
-        layout: layout ?? layoutState?.layout,
+        layout: layout,
+        startColumn: {
+          resourceName: null,
+          resourceType: urlPath ?? resourceType,
+          namespaceId: namespaceId,
+          apiGroup: extension?.general.resource.group,
+          apiVersion: extension?.general.resource.version,
+        },
         midColumn: {
           resourceName: resourceName,
           resourceType: urlPath ?? resourceType,
           namespaceId: namespaceId,
+          apiGroup: extension?.general.resource.group,
+          apiVersion: extension?.general.resource.version,
         },
         endColumn: null,
       }
-    : null;
+    : {
+        layout: layoutState?.layout,
+        startColumn: {
+          resourceType: urlPath ?? resourceType,
+          namespaceId: namespaceId,
+          apiGroup: extension?.general.resource.group,
+          apiVersion: extension?.general.resource.version,
+        },
+        midColumn: null,
+        endColumn: null,
+      };
 
   useEffect(() => {
-    if (layout && resourceName && resourceType) {
-      setLayoutColumn(initialLayoutState);
-    }
+    setLayoutColumn(initialLayoutState);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layout, namespaceId, resourceName, resourceType]);
 

src/components/BusolaExtensions/BusolaExtensionCreate.js

@@ -63,6 +63,11 @@ export default function BusolaExtensionCreate({
             setLayoutColumn({
               layout: nextLayout,
               showCreate: null,
+              startColumn: {
+                resourceName: null,
+                resourceType: 'Extensions',
+                namespaceId: 'kube-public',
+              },
               midColumn: {
                 resourceName: crd.metadata.name,
                 resourceType: 'Extensions',

src/components/BusolaExtensions/extensionsNode.ts

@@ -3,6 +3,7 @@ import { configFeaturesNames, NavNode } from 'state/types';
 export const extensionsNavNode: NavNode = {
   category: 'Configuration',
   resourceType: 'configmaps',
+  resourceTypeCased: 'ConfigMap',
   pathSegment: 'busolaextensions',
   label: 'Extensions',
   namespaced: false,

src/components/Clusters/views/ClusterList.js

@@ -50,6 +50,7 @@ function ClusterList() {
   useEffect(() => {
     setLayoutColumn({
       layout: 'OneColumn',
+      startColumn: null,
       midColumn: null,
       endColumn: null,
     });