updating services for Java backend

Author: jabrock

app/package.json

@@ -13,11 +13,13 @@
     "@oracle/ojet-cli": "~16.1.0",
     "@oracle/oraclejet-audit": "^16.1.0",
     "@types/uuid": "^9.0.7",
+    "express-http-proxy": "^2.0.0",
     "extract-zip": "^1.7.0",
     "fs-extra": "^8.1.0",
     "glob": "7.2.0",
     "typescript": "5.3.2",
     "underscore": "^1.10.2",
+    "url": "^0.11.3",
     "yargs-parser": "13.1.2"
   },
   "engines": {

app/scripts/hooks/before_serve.js

@@ -5,19 +5,28 @@
 
 */
 
-'use strict';
+"use strict";
 
 module.exports = function (configObj) {
   return new Promise((resolve, reject) => {
-    console.log('Running before_serve hook.');
+    console.log("Running before_serve hook.");
     // ojet custom connect and serve options
-    // { connectOpts, serveOpts } = configObj;
-    // const express = require('express');
-    // const http = require('http');
+    const { connectOpts, serveOpts } = configObj;
+    const express = require("express");
+    const http = require("http");
+    const proxy = require("express-http-proxy");
+    const url = require("url");
+
+    // New hostname+path as specified by question:
+    const apiProxy = proxy("http://localhost:8080", {
+      proxyReqPathResolver: (req) => url.parse("/api" + req.url).path,
+    });
+    const app = express();
+    app.use("/api", apiProxy);
     // pass back custom http
-    // configObj['http'] = http;
+    configObj["http"] = http;
     // pass back custom express app
-    // configObj['express'] = express();
+    configObj["express"] = app;
     // pass back custom options for http.createServer
     // const serverOptions = {...};
     // configObj['serverOptions'] = serverOptions;

app/src/components/content/index.tsx

@@ -24,13 +24,21 @@ type Chat = {
   answer?: string;
   loading?: string;
 };
+
+const defaultServiceType: string = localStorage.getItem("service") || "text";
+const defaultBackendType: String = localStorage.getItem("backend") || "java";
+
 const Content = () => {
   const [update, setUpdate] = useState<Array<object>>([]);
   const [busy, setBusy] = useState<boolean>(false);
-  const [summaryResults, setSummaryResults] = useState<string | null>("");
+  const [summaryResults, setSummaryResults] = useState<string>("");
   const [summaryPrompt, setSummaryPrompt] = useState<string>();
-  const [serviceType, setServiceType] = useState<ServiceTypes>("text");
-  const [backendType, setBackendType] = useState<BackendTypes>("java");
+  const [serviceType, setServiceType] = useState<ServiceTypes>(
+    defaultServiceType as ServiceTypes
+  );
+  const [backendType, setBackendType] = useState<BackendTypes>(
+    defaultBackendType as BackendTypes
+  );
   const [settingsOpened, setSettingsOpened] = useState<boolean>(false);
   const question = useRef<string>();
   const chatData = useRef<Array<object>>([]);
@@ -55,7 +63,6 @@ const Content = () => {
       if (Q) {
         if (x > 0) tempArray.pop();
         tempArray.push({ question: JSON.parse(Questions)[x] });
-        // tempArray.push({ loading: "loading" });
         Q = false;
         x++;
       } else {
@@ -82,17 +89,32 @@ const Content = () => {
             chatData
           );
         } else {
-          setClient(InitStomp(setBusy, setUpdate, messagesDP, chatData));
+          setClient(
+            InitStomp(setBusy, setUpdate, messagesDP, chatData, serviceType)
+          );
         }
-        console.log("Running Gen AI");
+        console.log("Running Generative service");
         return;
       case "sim":
         runSimulation();
-        console.log("running simulation");
+        console.log("Running simulation");
         return;
       case "summary":
-        // initWebSocket();
-        console.log("summary loading");
+        if (backendType === "python") {
+          initWebSocket(
+            setSummaryResults,
+            setBusy,
+            setUpdate,
+            messagesDP,
+            socket,
+            chatData
+          );
+        } else {
+          setClient(
+            InitStomp(setBusy, setUpdate, messagesDP, chatData, serviceType)
+          );
+        }
+        console.log("Running Summarization service");
         return;
     }
     return () => {
@@ -114,7 +136,6 @@ const Content = () => {
           autoTimeout: "on",
         },
       ];
-      //alert("Still waiting for an answer!  Hang in there a little longer.");
       return;
     }
     if (event.detail.value) {
@@ -165,31 +186,17 @@ const Content = () => {
   };
 
   const serviceTypeChangeHandler = (service: ServiceTypes) => {
+    localStorage.setItem("service", service);
     setUpdate([]);
     chatData.current = [];
     setServiceType(service);
-    //toggleDrawer();
   };
   const backendTypeChangeHandler = (backend: BackendTypes) => {
     setUpdate([]);
     chatData.current = [];
     setBackendType(backend);
-    switch (backend) {
-      case "java":
-        setClient(InitStomp(setBusy, setUpdate, messagesDP, chatData));
-        return;
-      case "python":
-        initWebSocket(
-          setSummaryPrompt,
-          setBusy,
-          setUpdate,
-          messagesDP,
-          socket,
-          chatData
-        );
-        return;
-    }
-    //toggleDrawer();
+    localStorage.setItem("backend", backend);
+    location.reload();
   };
 
   const clearSummary = () => {
@@ -199,6 +206,9 @@ const Content = () => {
   const updateSummaryPrompt = (val: string) => {
     setSummaryPrompt(val);
   };
+  const updateSummaryResults = (summary: string) => {
+    setSummaryResults(summary);
+  };
 
   return (
     <div class="oj-web-applayout-max-width oj-web-applayout-content oj-flex oj-sm-flex-direction-column demo-bg-main">
@@ -221,23 +231,18 @@ const Content = () => {
           position="top"
           onojClose={handleToastClose}
         ></oj-c-message-toast>
-        {/* <h1 class="oj-typography-heading-lg oj-flex-bar-start"> </h1> */}
         <div class="oj-flex-bar-end oj-color-invert demo-header-end">
-          {/* <h6 class="oj-sm-margin-2x-end">{connState}</h6> */}
           <oj-button onojAction={toggleDrawer} label="Toggle" display="icons">
             <span slot="startIcon" class="oj-ux-ico-menu"></span>
           </oj-button>
         </div>
       </div>
       {serviceType === "text" && (
-        <>
-          {/* <oj-button onojAction={sendPrompt}>Send Prompt</oj-button> */}
-          <Chat
-            data={update}
-            question={question}
-            questionChanged={handleQuestionChange}
-          />
-        </>
+        <Chat
+          data={update}
+          question={question}
+          questionChanged={handleQuestionChange}
+        />
       )}
       {serviceType === "sim" && (
         <Simulation
@@ -249,9 +254,11 @@ const Content = () => {
       {serviceType === "summary" && (
         <Summary
           fileChanged={handleFileUpload}
+          summaryChanged={updateSummaryResults}
           summary={summaryResults}
           clear={clearSummary}
           prompt={updateSummaryPrompt}
+          backendType={backendType}
         />
       )}
     </div>

app/src/components/content/settings.tsx

@@ -1,7 +1,8 @@
 import "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 import "oj-c/radioset";
 import "oj-c/form-layout";
+import "oj-c/select-single";
 import { CRadiosetElement } from "oj-c/radioset";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
 
@@ -47,28 +48,63 @@ export const Settings = (props: Props) => {
       props.backendChange(event.detail.value);
   };
 
+  const modelDP = useRef(
+    new MutableArrayDataProvider<string, {}>([], { keyAttributes: "id" })
+  );
+
+  const fetchModels = async () => {
+    try {
+      const response = await fetch("/api/genai/models");
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+      const json = await response.json();
+      modelDP.current.data = json;
+    } catch (error: any) {
+      console.log(
+        "Java service not available for fetching list of Models: ",
+        error.message
+      );
+    }
+  };
+
+  useEffect(() => {
+    fetchModels();
+  }, []);
   return (
     <div class="oj-sm-margin-4x">
-      <h2 class="oj-typography-heading-sm">Service Settings</h2>
+      <h2 class="oj-typography-heading-sm">AI service types</h2>
       <oj-c-form-layout>
         <oj-c-radioset
           id="serviceTypeRadioset"
           value={props.aiServiceType}
-          labelHint="AI Service Type"
+          labelHint="AI service options"
           options={serviceOptionsDP}
           onvalueChanged={handleServiceTypeChange}
         ></oj-c-radioset>
       </oj-c-form-layout>
-      <h2 class="oj-typography-heading-sm">Backend Service Type</h2>
+      <h2 class="oj-typography-heading-sm">Backend service types</h2>
       <oj-c-form-layout>
         <oj-c-radioset
           id="backendTypeRadioset"
           value={props.backendType}
-          labelHint="Backend Service Type"
+          labelHint="Backend options"
           options={backendOptionsDP}
           onvalueChanged={handleBackendTypeChange}
         ></oj-c-radioset>
       </oj-c-form-layout>
+      {props.aiServiceType == "summary" && props.backendType == "java" && (
+        <>
+          <h2 class="oj-typography-heading-sm">Model options</h2>
+          <oj-c-form-layout>
+            <oj-c-select-single
+              data={modelDP.current}
+              labelHint={"Model"}
+              itemText={"name"}
+            ></oj-c-select-single>
+          </oj-c-form-layout>
+        </>
+      )}
     </div>
   );
 };

app/src/components/content/stomp-interface.tsx

@@ -6,30 +6,48 @@ export const InitStomp = (
   setBusy: any,
   setUpdate: any,
   messagesDP: any,
-  chatData: any
+  chatData: any,
+  serviceType: any
 ) => {
   //const [test, setTest] = useState();
+  const protocol = window.location.protocol === "http:" ? "ws://" : "wss://";
+  const hostname =
+    window.location.hostname === "localhost"
+      ? "localhost:8080"
+      : window.location.hostname;
+  const serviceURL = `${protocol}${hostname}/websocket`;
+  console.log("in the stomp init module");
   const client = new Client({
-    brokerURL: "ws://localhost:8080/websocket",
+    brokerURL: serviceURL,
     onConnect: () => {
-      client.subscribe("/user/queue/answer", (message: any) => {
-        console.log("Answer message: ", JSON.parse(message.body).content);
-        onMessage(message);
-      });
+      if (serviceType === "text") {
+        client.subscribe("/user/queue/answer", (message: any) => {
+          console.log("Answer message: ", JSON.parse(message.body).content);
+          onMessage(message);
+        });
+      } else if (serviceType === "summary") {
+        client.subscribe("/user/queue/summary", (message: any) => {
+          console.log("Summary message: ", JSON.parse(message.body).content);
+          onMessage(message);
+        });
+      }
     },
     onStompError: (e) => {
       console.log("Stomp Error: ", e);
     },
     onWebSocketError: () => {
       console.log("Error connecting to Websocket service");
+      serviceType === "text"
+        ? client.unsubscribe("/user/queue/answer")
+        : client.unsubscribe("/user/queue/summary");
       client.deactivate();
     },
   });
   client.activate();
 
   const onMessage = (msg: any) => {
     let aiAnswer = JSON.parse(msg.body).content;
-    // console.log("answer: ", aiAnswer);
+    //console.log("answer: ", aiAnswer);
     if (msg.data !== "connected") {
       let tempArray = [...chatData.current];
       // remove the animation item before adding answer