Azure Open AI V1 (#515)

* Azure Open AI V1

* Slash check

* Deployment url add

* code reviewed and removed duplication by extending azureOpenAi with OpenAiClient

* Resolving Review

* Solve smells

---------

Co-authored-by: Alfred Rubin <[email protected]>

Author: BennuFire

cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

docs/modules/ROOT/pages/user-guide/extensions/natural-language-queries.adoc

@@ -11,7 +11,7 @@ To enable Natural Language Queries in NeoDash, follow these configuration steps:
 1. Open NeoDash and navigate to the "Extensions" section in the left sidebar.
 2. Locate the "Natural Language Queries" extension and click on it to activate it.
 3. Once activated, a new button will appear in the sidebar(see image below). Click on the button to open the configuration window.
-4. In the configuration window, you will be prompted to provide the necessary information to connect to the Language Model (LLM). Enter the model provider, API key, and select the desired model to use.
+4. In the configuration window, you will be prompted to provide the necessary information to connect to the Language Model (LLM). Enter the model provider, API key, deployment url if needed by the model provider, and select the desired model to use.
 5. After providing the required information, click on the "Start Querying" button to finalize the configuration.
 
 image::extensionbutton.png[Extension Button enables Natural Language Queries button in the sidebar]

package.json

@@ -34,6 +34,7 @@
   "keywords": [],
   "author": "Neo4j Labs",
   "dependencies": {
+    "@azure/openai": "^1.0.0-beta.2",
     "@codemirror/lang-markdown": "^6.1.1",
     "@codemirror/language-data": "^6.3.1",
     "@mui/icons-material": "^5.11.16",

src/dashboard/drawer/DashboardDrawer.tsx

@@ -51,9 +51,13 @@ export const NeoDrawer = ({
   function renderDrawerExtensionsButtons() {
     const res = (
       <>
-        {Object.keys(EXTENSIONS_DRAWER_BUTTONS).map((name) => {
+        {Object.keys(EXTENSIONS_DRAWER_BUTTONS).map((name, idx) => {
           const Component = extensions[name] ? EXTENSIONS_DRAWER_BUTTONS[name] : '';
-          return Component ? <Component database={connection.database} navItemClass={navItemClass} /> : <></>;
+          return Component ? (
+            <Component key={`ext-${  idx}`} database={connection.database} navItemClass={navItemClass} />
+          ) : (
+            <></>
+          );
         })}
       </>
     );

src/extensions/query-translator/QueryTranslatorConfig.ts

@@ -4,6 +4,7 @@ import { OpenAiClient } from './clients/OpenAi/OpenAiClient';
 
 // TODO: implement VertexAiClient
 import { VertexAiClient } from './clients/VertexAiClient';
+import { AzureOpenAiClient } from './clients/AzureOpenAi/AzureOpenAiClient';
 
 interface ClientSettingEntry {
   label: string;
@@ -58,29 +59,33 @@ export const QUERY_TRANSLATOR_CONFIG: QueryTranslatorConfig = {
         },
       },
     },
-    // vertexAi: {
-    //   clientName: "vertexAi",
-    //   clientClass: VertexAiClient,
-    //   settings: {
-    //     apiKey: {
-    //       label: 'Api Key to authenticate the client',
-    //       type: SELECTION_TYPES.TEXT,
-    //       default: '',
-    //     },
-    //     modelType: {
-    //       label: 'Select from the possible model types',
-    //       type: SELECTION_TYPES.LIST,
-    //       needsStateValues: true,
-    //       default: "Insert your Api Key first",
-    //     },
-    //     region: {
-    //       label: 'GCP Region',
-    //       type: SELECTION_TYPES.LIST,
-    //       needsStateValues: true,
-    //       default: [],
-    //     }
-    //   }
-    // },
+    AzureOpenAI: {
+      clientName: 'AzureOpenAI',
+      clientClass: AzureOpenAiClient,
+      settings: {
+        endpoint: {
+          label: 'Azure OpenAI EndPoint',
+          type: SELECTION_TYPES.TEXT,
+          default: '',
+          hasAuthButton: false,
+          authentication: true,
+        },
+        apiKey: {
+          label: 'Subscription Key',
+          type: SELECTION_TYPES.TEXT,
+          default: '',
+          hasAuthButton: true,
+          authentication: true,
+        },
+        modelType: {
+          label: 'Model',
+          type: SELECTION_TYPES.LIST,
+          methodFromClient: 'getListModels',
+          default: '',
+          authentication: false,
+        },
+      },
+    },
   },
 };
 

src/extensions/query-translator/clients/AzureOpenAi/AzureOpenAiClient.ts

@@ -0,0 +1,70 @@
+import { AzureKeyCredential, OpenAIClient } from '@azure/openai';
+
+import { OpenAiClient } from '../OpenAi/OpenAiClient';
+
+const consoleLogAsync = async (message: string, other?: any) => {
+  await new Promise((resolve) => setTimeout(resolve, 0)).then(() => console.info(message, other));
+};
+
+export class AzureOpenAiClient extends OpenAiClient {
+  modelType: string | undefined;
+
+  createSystemMessage: any;
+
+  modelClient!: OpenAIClient;
+
+  driver: any;
+
+  constructor(settings) {
+    super(settings);
+  }
+
+  /**
+   * Function used to create the OpenAiApi object.
+   * */
+  setModelClient() {
+    if (typeof this.endpoint === 'string') {
+      this.modelClient = new OpenAIClient(this.endpoint, new AzureKeyCredential(this.apiKey));
+    }
+  }
+
+  async getListModels() {
+    let res;
+    try {
+      if (!this.modelClient) {
+        throw new Error('no client defined');
+      }
+
+      const response = await fetch(
+        `${this.endpoint + (this.endpoint?.endsWith('/') ? '' : '/')}openai/deployments?api-version=2023-03-15-preview`,
+        {
+          method: 'GET',
+          mode: 'cors',
+          headers: {
+            'Api-Key': this.apiKey,
+          },
+        }
+      );
+      const req = await response.json();
+      res = req.data.filter((x) => x.model.startsWith('gpt-')).map((x) => x.id);
+    } catch (e) {
+      consoleLogAsync('Error while loading the model list: ', e);
+      res = [];
+    }
+    this.setListAvailableModels(res);
+    return res;
+  }
+
+  async chatCompletion(history) {
+    let completion;
+    if (typeof this.modelType === 'string') {
+      completion = await this.modelClient.getChatCompletions(this.modelType, history);
+    }
+    // If the status is correct
+    if (completion?.choices?.[0]?.message || false) {
+      let { message } = completion.choices[0];
+      return message;
+    }
+    throw Error(`Request returned with status: ${completion.id}`);
+  }
+}

src/extensions/query-translator/clients/AzureOpenAi/AzureOpenAiLogo.png

@@ -21,10 +21,13 @@ export abstract class ModelClient {
 
   driver: any;
 
+  endpoint: string | undefined;
+
   constructor(settings) {
     this.apiKey = settings.apiKey;
     this.modelType = settings.modelType;
     this.listAvailableModels = [];
+    this.endpoint = settings.endpoint;
     this.setModelClient();
   }
 

src/extensions/query-translator/clients/ModelClient.ts

@@ -83,6 +83,7 @@ export class OpenAiClient extends ModelClient {
       consoleLogAsync('Error while loading the model list: ', e);
       res = [];
     }
+    this.setListAvailableModels(res);
     return res;
   }
 

src/extensions/query-translator/clients/OpenAi/OpenAiClient.ts

@@ -118,6 +118,7 @@ export const ClientSettings = ({
   // Prevent authentication if all required fields are not full (EX: look at checkIfDisabled)
   const authButton = (
     <IconButton
+      key={'auth-setting'}
       aria-label='connect'
       onClick={(e) => {
         e.preventDefault();
@@ -152,7 +153,7 @@ export const ClientSettings = ({
         .map((setting) => {
           let disabled = checkIfDisabled(setting);
           return (
-            <ListItem style={{ padding: 0 }}>
+            <ListItem key={`list-${  setting}`} style={{ padding: 0 }}>
               <NeoSetting
                 key={setting}
                 style={{ marginLeft: 0, marginRight: 0 }}

src/extensions/query-translator/component/ClientSettings.tsx

@@ -15,6 +15,7 @@
     "noEmit": true,
     "jsx": "react",
     "noImplicitAny": false,
+    "useDefineForClassFields": false,
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src"]