feat: add kyma companion

package.json

@@ -73,6 +73,7 @@
     "cronstrue": "^1.114.0",
     "didyoumean": "^1.2.2",
     "file-saver": "^2.0.2",
+    "fingerprintjs2": "^2.1.4",
     "graphviz-react": "^1.2.5",
     "http-status-codes": "^2.2.0",
     "i18next": "^22.0.4",

public/i18n/en.yaml

@@ -3,6 +3,22 @@ horizontal-pod-autoscalers: Horizontal Pod Autoscalers
 subscriptions: Subscriptions
 apps:
   title: Apps
+ai-assistant:
+  name: Joule
+  opener:
+    use-ai: AI Companion
+    suggestions: Suggestions
+    input-placeholder: Ask about this resource
+    error-message: Couldn't fetch suggestions. Please try again.
+  error:
+    title: Service is interrupted
+    subtitle: A temporary interruption occured. Please try again.
+  introduction1: Hello there,
+  introduction2: How can I help you?
+  placeholder: Type something
+  tabs:
+    chat: Chat
+    page-insights: Page Insights
 cluster-overview:
   headers:
     cpu: CPU
@@ -264,6 +280,7 @@ common:
     remove-all: Remove all
     reset: Reset
     restart: Restart
+    retry: Retry
     save: Save
     submit: Submit
     update: Update

src/components/AIassistant/api/getChatResponse.js

@@ -0,0 +1,74 @@
+import { getClusterConfig } from 'state/utils/getBackendInfo';
+import { parseWithNestedBrackets } from '../utils/parseNestedBrackets';
+
+export default async function getChatResponse({
+  prompt,
+  handleChatResponse,
+  handleError,
+  sessionID,
+  clusterUrl,
+  token,
+  certificateAuthorityData,
+}) {
+  const { backendAddress } = getClusterConfig();
+  const url = `${backendAddress}/api/v1/namespaces/ai-core/services/http:ai-backend-clusterip:5000/proxy/api/v1/chat`;
+  const payload = { question: prompt, session_id: sessionID };
+  const k8sAuthorization = `Bearer ${token}`;
+
+  fetch(url, {
+    headers: {
+      accept: 'application/json',
+      'content-type': 'application/json',
+      'X-Cluster-Certificate-Authority-Data': certificateAuthorityData,
+      'X-Cluster-Url': clusterUrl,
+      'X-K8s-Authorization': k8sAuthorization,
+      'X-User': sessionID,
+    },
+    body: JSON.stringify(payload),
+    method: 'POST',
+  })
+    .then(response => {
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      readChunk(reader, decoder, handleChatResponse, handleError, sessionID);
+    })
+    .catch(error => {
+      handleError();
+      console.error('Error fetching data:', error);
+    });
+}
+
+function readChunk(
+  reader,
+  decoder,
+  handleChatResponse,
+  handleError,
+  sessionID,
+) {
+  reader
+    .read()
+    .then(({ done, value }) => {
+      if (done) {
+        return;
+      }
+      // Also handles the rare case of two chunks being sent at once
+      const receivedString = decoder.decode(value, { stream: true });
+      const chunks = parseWithNestedBrackets(receivedString).map(chunk => {
+        return JSON.parse(chunk);
+      });
+      chunks.forEach(chunk => {
+        if ('error' in chunk) {
+          throw new Error(chunk.error);
+        }
+        handleChatResponse(chunk);
+      });
+      readChunk(reader, decoder, handleChatResponse, handleError, sessionID);
+    })
+    .catch(error => {
+      handleError();
+      console.error('Error reading stream:', error);
+    });
+}

src/components/AIassistant/api/getFollowUpQuestions.js

@@ -0,0 +1,32 @@
+import { getClusterConfig } from 'state/utils/getBackendInfo';
+
+export default async function getFollowUpQuestions({
+  sessionID = '',
+  handleFollowUpQuestions,
+  clusterUrl,
+  token,
+  certificateAuthorityData,
+}) {
+  try {
+    const { backendAddress } = getClusterConfig();
+    const url = `${backendAddress}/api/v1/namespaces/ai-core/services/http:ai-backend-clusterip:5000/proxy/api/v1/llm/followup`;
+    const payload = JSON.parse(`{"session_id":"${sessionID}"}`);
+    const k8sAuthorization = `Bearer ${token}`;
+
+    let { results } = await fetch(url, {
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json',
+        'X-Cluster-Certificate-Authority-Data': certificateAuthorityData,
+        'X-Cluster-Url': clusterUrl,
+        'X-K8s-Authorization': k8sAuthorization,
+        'X-User': sessionID,
+      },
+      body: JSON.stringify(payload),
+      method: 'POST',
+    }).then(result => result.json());
+    handleFollowUpQuestions(results);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+  }
+}

src/components/AIassistant/api/getPromptSuggestions.js

@@ -0,0 +1,42 @@
+import { getClusterConfig } from 'state/utils/getBackendInfo';
+import { extractApiGroup } from 'resources/Roles/helpers';
+
+export default async function getPromptSuggestions({
+  namespace = '',
+  resourceType = '',
+  groupVersion = '',
+  resourceName = '',
+  sessionID = '',
+  clusterUrl,
+  token,
+  certificateAuthorityData,
+}) {
+  try {
+    const { backendAddress } = getClusterConfig();
+    const url = `${backendAddress}/api/v1/namespaces/ai-core/services/http:ai-backend-clusterip:5000/proxy/api/v1/llm/init`;
+    const apiGroup = extractApiGroup(groupVersion);
+    const payload = JSON.parse(
+      `{"resource_type":"${resourceType.toLowerCase()}${
+        apiGroup.length ? `.${apiGroup}` : ''
+      }","resource_name":"${resourceName}","namespace":"${namespace}","session_id":"${sessionID}"}`,
+    );
+    const k8sAuthorization = `Bearer ${token}`;
+
+    let { results } = await fetch(url, {
+      headers: {
+        accept: 'application/json',
+        'content-type': 'application/json',
+        'X-Cluster-Certificate-Authority-Data': certificateAuthorityData,
+        'X-Cluster-Url': clusterUrl,
+        'X-K8s-Authorization': k8sAuthorization,
+        'X-User': sessionID,
+      },
+      body: JSON.stringify(payload),
+      method: 'POST',
+    }).then(result => result.json());
+    return results;
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return false;
+  }
+}

src/components/AIassistant/components/AIOpener.js

@@ -0,0 +1,162 @@
+import {
+  Button,
+  CustomListItem,
+  FlexBox,
+  Icon,
+  Input,
+  List,
+  Loader,
+  Popover,
+  Text,
+  Title,
+} from '@ui5/webcomponents-react';
+import { spacing } from '@ui5/webcomponents-react-base';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
+import { showAIassistantState } from 'components/AIassistant/state/showAIassistantAtom';
+import { initialPromptState } from '../state/initalPromptAtom';
+import getPromptSuggestions from 'components/AIassistant/api/getPromptSuggestions';
+import { createPortal } from 'react-dom';
+import { authDataState } from 'state/authDataAtom';
+import { sessionIDState } from '../state/sessionIDAtom';
+import generateSessionID from '../utils/generateSesssionID';
+import './AIOpener.scss';
+import { clusterState } from 'state/clusterAtom';
+
+export default function AIOpener({
+  namespace,
+  resourceType,
+  groupVersion,
+  resourceName,
+}) {
+  const { t } = useTranslation();
+  const [showAssistant, setShowAssistant] = useRecoilState(
+    showAIassistantState,
+  );
+  const setInitialPrompt = useSetRecoilState(initialPromptState);
+  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [suggestions, setSuggestions] = useState([]);
+  const [inputValue, setInputValue] = useState('');
+  const [errorOccured, setErrorOccured] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const authData = useRecoilValue(authDataState);
+  const setSessionID = useSetRecoilState(sessionIDState);
+  const cluster = useRecoilValue(clusterState);
+
+  const fetchSuggestions = async () => {
+    setErrorOccured(false);
+    setPopoverOpen(true);
+    if (!isLoading && suggestions.length === 0) {
+      setIsLoading(true);
+      const sessionID = await generateSessionID(authData);
+      setSessionID(sessionID);
+      const promptSuggestions = await getPromptSuggestions({
+        namespace,
+        resourceType,
+        groupVersion,
+        resourceName,
+        sessionID,
+        clusterUrl: cluster.currentContext.cluster.cluster.server,
+        token: authData.token,
+        certificateAuthorityData:
+          cluster.currentContext.cluster.cluster['certificate-authority-data'],
+      });
+      setIsLoading(false);
+      if (!promptSuggestions) {
+        setErrorOccured(true);
+      } else {
+        setSuggestions(promptSuggestions);
+      }
+    }
+  };
+
+  const sendInitialPrompt = prompt => {
+    setInitialPrompt(prompt);
+    setPopoverOpen(false);
+    setShowAssistant({
+      show: true,
+      fullScreen: false,
+    });
+  };
+
+  const onSubmitInput = () => {
+    if (inputValue.length === 0) return;
+    const prompt = inputValue;
+    setInputValue('');
+    sendInitialPrompt(prompt);
+  };
+
+  return (
+    <>
+      <Button
+        icon="ai"
+        className="ai-button"
+        id="openPopoverBtn"
+        disabled={showAssistant.show}
+        onClick={fetchSuggestions}
+      >
+        {t('ai-assistant.opener.use-ai')}
+      </Button>
+      {createPortal(
+        <Popover
+          className="suggestions-popover"
+          open={popoverOpen}
+          onAfterClose={() => setPopoverOpen(false)}
+          opener="openPopoverBtn"
+          placementType="Bottom"
+          horizontalAlign="Right"
+        >
+          <Input
+            icon={<Icon name="paper-plane" onClick={onSubmitInput} />}
+            value={inputValue}
+            onKeyDown={e => e.key === 'Enter' && onSubmitInput()}
+            onInput={e => setInputValue(e.target.value)}
+            placeholder={t('ai-assistant.opener.input-placeholder')}
+            className="popover-input"
+          />
+          <Title level="H5" style={spacing.sapUiTinyMargin}>
+            {t('ai-assistant.opener.suggestions')}
+          </Title>
+          {errorOccured || (!isLoading && suggestions.length === 0) ? (
+            <FlexBox
+              alignItems="Center"
+              direction="Column"
+              style={{ gap: '8px', ...spacing.sapUiTinyMarginBottom }}
+            >
+              <Text style={spacing.sapUiTinyMargin}>
+                {t('ai-assistant.opener.error-message')}
+              </Text>
+              <Button onClick={fetchSuggestions}>
+                {t('common.buttons.retry')}
+              </Button>
+            </FlexBox>
+          ) : isLoading ? (
+            <div
+              style={{
+                ...spacing.sapUiTinyMargin,
+                ...spacing.sapUiSmallMarginTop,
+              }}
+            >
+              <Loader progress="60%" />
+            </div>
+          ) : (
+            <List style={spacing.sapUiTinyMarginTop}>
+              {suggestions.map((suggestion, index) => (
+                <CustomListItem
+                  key={index}
+                  onClick={() => sendInitialPrompt(suggestion)}
+                  className="custom-list-item"
+                >
+                  <Text className="text">{suggestion}</Text>
+                  <Icon name="navigation-right-arrow" />
+                </CustomListItem>
+              ))}
+            </List>
+          )}
+        </Popover>,
+        document.body,
+      )}
+    </>
+  );
+}