Add CodeMie chat integration

[callmevladik]

This task expands the EDP Portal's functionality by adding a new "Gen AI" section with a "CodeMie" tab for CodeMie configuration. It includes the implementation of a secure token authentication mechanism for API requests and mandates the secure storage of sensitive data.

Implementation Plan

1. Section and Tab Addition:

Add a "Gen AI" section under the Configuration tab.
Introduce a "CodeMie" tab within the "Gen AI" section with control elements:
Quick Link URL, For example: https://codemie-fixme.example.com/
API URL, For example: https://codemie-fixme.example.com/code-assistant-api
Chat Assistant ID, For example: c91155e4-be2f-42f8-aea1-8dc2530e8ccb
Authentication:
Client,
Client Secret
Token Endpoint URL (The URL of the server endpoint that issues tokens), eg https://keycloak.example.com/auth/realms/REALM/protocol/openid-connect/token

2. Token Authentication Mechanism:

Implement a procedure to obtain an authentication token via a POST request before any API call to CodeMie.
Dynamically source the client_id, grant_type, and client_secret from the user inputs in the CodeMie configuration tab for the token request.
Implement token renewal logic for handling token expiration.

3. Secure Storage of Sensitive Data:

Ensure that all sensitive data, including client secrets and tokens, are securely stored in the "ci-codemie" secret, similar to handling Sonar and other tools' sensitive data.
Acceptance Criteria:

1. The "Gen AI" section and "CodeMie" tab are accurately implemented in the EDP Portal.
2. All specified control elements are present in the CodeMie tab, with input validation where applicable.
3. The frontend acquires authentication tokens as required and renews them upon expiration effectively, ensuring uninterrupted API communication.
4. Sensitive data related to CodeMie configuration and token authentication are securely stored in the "ci-codemie" secret.
5. The implementation does not negatively impact the portal's security, functionality, or user experience.
6. Comprehensive testing validates the functionality and security of the new features.

Technical details

Code snippet for token acquisition (ensure to replace placeholders with actual dynamic values from user inputs):

const myHeaders = new Headers();
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");

const urlencoded = new URLSearchParams();
urlencoded.append("client_id", "codemie");
urlencoded.append("grant_type", "client_credentials");
urlencoded.append("client_secret", "SOMESECRET");

const requestOptions = {
method: "POST",
headers: myHeaders,
body: urlencoded,
redirect: "follow"
};

fetch("https://keycloak.example.com/auth/realms/REALM/protocol/openid-connect/token", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error(error));

Goal: Implement a simple chat UI in the KubeRocketCI UI Portal to interact with a pre-configured AI Assistant. The chat should support streaming JSON over HTTP (NDJSON) for real-time communication and store chat history in the browser's local storage.

Acceptance Criteria:

1. The Chat UI should be accessible from the main UI Portal.
2. Users should be able to send messages through the chat interface and receive responses from the AI Assistant in real time.
3. The chat should implement NDJSON streaming for real-time communication with the AI Assistant API endpoint.
4. Chat history should be stored in the browser's local storage and be available across sessions for the same user.
5. Ensure the chat UI design is consistent with the existing KubeRocketCI UI Portal theme.

Technical details:
Review CodeMie UI approach https://git/codemie-ui/
https://codemieexample.com/code-assistant-api/docs#/Assistant/ask_assistant_v1_assistants__assistant_id__model_post

Use:
Request URL: https://codemie-fixme.example.com/code-assistant-api/v1/assistants/fa92f7fc-0ed6-403d-9550-cdbd664ba352/model
Request Method: POST
Content-Type: application/json

Request Payload:

{
"conversationId": "04eb938a-9dc8-40e8-a88d-b623ee4b7e60",
"text": "hi",
"file": null,
"prompt": "You are a nice chatbot having a conversation with a human.",
"history": [],
"llmModel": "gpt-4",
"stream": true,
"_debug": true,
"topK": 10
}

Response:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://codemie-fixme.example.com
Connection: keep-alive
Content-Type: application/x-ndjson
Date: Mon, 03 Jun 2024 18:05:51 GMT
Strict-Transport-Security: max-age=63072000; includeSubDomains
Transfer-Encoding: chunked
Vary: Origin
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN

Further conversation looks like below: you are sending payload:

{
"conversationId": "04eb938a-9dc8-40e8-a88d-b623ee4b7e60",
"text": "How to enable CORS in nginx annotation?",
"file": null,
"prompt": "You are a nice chatbot having a conversation with a human.",
"history": [
{
"role": "User",
"message": "hi",
"createdAt": "2024-06-03T18:05:51.800Z"
},
{
"role": "Assistant",
"message": "Hello! How can I help you today?",
"createdAt": "2024-06-03T18:05:51.800Z"
},
{
"role": "User",
"message": "hello",
"createdAt": "2024-06-03T18:11:29.245Z"
},
{
"role": "Assistant",
"message": "Hi again! What's on your mind?",
"createdAt": "2024-06-03T18:11:29.245Z"
}
],
"llmModel": "gpt-4",
"stream": true,
"_debug": true,
"topK": 10
}