adding settings and code for changing backend service

Author: jabrock

app/package.json

@@ -3,14 +3,15 @@
   "version": "1.0.0",
   "description": "Sample Client app showing communication with OCI Generative AI services via Websocket",
   "dependencies": {
-    "@oracle/oraclejet": "~16.0.0",
-    "@oracle/oraclejet-core-pack": "~16.0.0",
+    "@oracle/oraclejet": "~16.1.0",
+    "@oracle/oraclejet-core-pack": "~16.1.0",
+    "@stomp/stompjs": "^7.0.0",
     "marked": "^4.3.0",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@oracle/ojet-cli": "~16.0.0",
-    "@oracle/oraclejet-audit": "^16.0.0",
+    "@oracle/ojet-cli": "~16.1.0",
+    "@oracle/oraclejet-audit": "^16.1.0",
     "@types/uuid": "^9.0.7",
     "extract-zip": "^1.7.0",
     "fs-extra": "^8.1.0",

app/path_mapping.json

@@ -380,6 +380,17 @@
         "path": "libs/chai/chai.js",
         "cdnPath": "chai/chai-4.3.10.min"
       }
+    },
+    "stompjs": {
+      "cwd": "node_modules/@stomp/stompjs/bundles",
+      "debug": {
+        "src": "stomp.umd.js",
+        "path": "libs/stompjs/stomp.umd.js"
+      },
+      "release": {
+        "src": "stomp.umd.min.js",
+        "path": "libs/stompjs/stomp.umd.min.js"
+      }
     }
   }
 }

app/src/components/content/index.tsx

@@ -12,8 +12,12 @@ import { InputSearchElement } from "ojs/ojinputsearch";
 import { useState, useEffect, useRef } from "preact/hooks";
 import * as Questions from "text!./data/questions.json";
 import * as Answers from "text!./data/answers.json";
+import { initWebSocket } from "./websocket-interface";
+import { InitStomp, sendPrompt } from "./stomp-interface";
+import { Client } from "@stomp/stompjs";
 
 type ServiceTypes = "text" | "summary" | "sim";
+type BackendTypes = "java" | "python";
 type Chat = {
   id?: number;
   question?: string;
@@ -25,12 +29,13 @@ const Content = () => {
   const [busy, setBusy] = useState<boolean>(false);
   const [summaryResults, setSummaryResults] = useState<string | null>("");
   const [summaryPrompt, setSummaryPrompt] = useState<string>();
-  const [serviceType, setServiceType] = useState<ServiceTypes>("summary");
+  const [serviceType, setServiceType] = useState<ServiceTypes>("text");
+  const [backendType, setBackendType] = useState<BackendTypes>("java");
   const [settingsOpened, setSettingsOpened] = useState<boolean>(false);
   const question = useRef<string>();
   const chatData = useRef<Array<object>>([]);
   const socket = useRef<WebSocket>();
-  const [connState, setConnState] = useState<string>("Disconnected");
+  const [client, setClient] = useState<Client | null>(null);
 
   const messagesDP = useRef(
     new MutableArrayDataProvider<MessageToastItem["summary"], MessageToastItem>(
@@ -39,77 +44,6 @@ const Content = () => {
     )
   );
 
-  const gateway = `ws://${window.location.hostname}:1986`;
-  let sockTimer: any = null;
-
-  // setup the websocket connection
-  const initWebSocket = () => {
-    console.log("Trying to open a WebSocket connection...");
-    socket.current = new WebSocket(gateway);
-    socket.current.binaryType = "arraybuffer";
-    socket.current.onopen = onOpen;
-    socket.current.onerror = onError;
-    socket.current.onclose = onClose;
-    socket.current.onmessage = onMessage;
-  };
-
-  // handle all messages coming from the websocket service
-  const onMessage = (event: any) => {
-    const msg = JSON.parse(event.data);
-
-    switch (msg.msgType) {
-      // switch (Object.keys(msg)[0]) {
-      case "message":
-        console.log("message: ", msg.data);
-        return msg.data;
-      case "question":
-        console.log("question: ", msg.data);
-        return msg.data;
-      case "summary":
-        console.log("summary");
-        setSummaryResults(msg.data);
-        return;
-      case "answer":
-        console.log("answer: ", msg.data);
-        if (msg.data !== "connected") {
-          let tempArray = [...chatData.current];
-          // remove the animation item before adding answer
-          setBusy(false);
-          tempArray.pop();
-          messagesDP.current.data = [];
-          tempArray.push({
-            id: tempArray.length as number,
-            answer: msg.data,
-          });
-          chatData.current = tempArray;
-          setUpdate(chatData.current);
-        }
-        return msg.data;
-      default:
-        return "unknown";
-    }
-  };
-
-  const onOpen = () => {
-    clearInterval(sockTimer);
-    console.log("Connection opened");
-    socket.current?.send(
-      JSON.stringify({ msgType: "message", data: "connected" })
-    );
-    setConnState("Connected");
-  };
-
-  // if the connection is lost, wait one minute and try again.
-  const onError = () => {
-    sockTimer = setInterval(initWebSocket, 1000 * 60);
-  };
-  function onClose() {
-    console.log("Connection closed");
-    setConnState("Disconnected");
-    socket.current ? (socket.current.onclose = () => {}) : null;
-    socket.current?.close();
-  }
-
   // Simulation code
   const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
   const runSimulation = async () => {
@@ -138,21 +72,33 @@ const Content = () => {
   useEffect(() => {
     switch (serviceType) {
       case "text":
-        initWebSocket();
+        if (backendType === "python") {
+          initWebSocket(
+            setSummaryResults,
+            setBusy,
+            setUpdate,
+            messagesDP,
+            socket,
+            chatData
+          );
+        } else {
+          setClient(InitStomp(setBusy, setUpdate, messagesDP, chatData));
+        }
         console.log("Running Gen AI");
         return;
       case "sim":
         runSimulation();
         console.log("running simulation");
         return;
       case "summary":
-        initWebSocket();
+        // initWebSocket();
         console.log("summary loading");
         return;
     }
     return () => {
       socket.current ? (socket.current.onclose = () => {}) : null;
       socket.current?.close();
+      client?.deactivate();
     };
   }, [serviceType]);
 
@@ -193,9 +139,13 @@ const Content = () => {
 
       // simulating the delay for now just to show what the animation looks like.
       setTimeout(() => {
-        socket.current?.send(
-          JSON.stringify({ msgType: "question", data: question.current })
-        );
+        if (backendType === "python") {
+          socket.current?.send(
+            JSON.stringify({ msgType: "question", data: question.current })
+          );
+        } else {
+          sendPrompt(client, question.current!);
+        }
       }, 300);
     }
   };
@@ -218,7 +168,28 @@ const Content = () => {
     setUpdate([]);
     chatData.current = [];
     setServiceType(service);
-    toggleDrawer();
+    //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();
   };
 
   const clearSummary = () => {
@@ -238,8 +209,10 @@ const Content = () => {
         aria-label="Settings Drawer"
       >
         <Settings
-          serviceType={serviceType}
-          serviceChange={serviceTypeChangeHandler}
+          aiServiceType={serviceType}
+          backendType={backendType}
+          aiServiceChange={serviceTypeChangeHandler}
+          backendChange={backendTypeChangeHandler}
         />
       </oj-c-drawer-popup>
       <div class="oj-flex-bar oj-flex-item demo-header oj-sm-12">
@@ -257,11 +230,14 @@ const Content = () => {
         </div>
       </div>
       {serviceType === "text" && (
-        <Chat
-          data={update}
-          question={question}
-          questionChanged={handleQuestionChange}
-        />
+        <>
+          {/* <oj-button onojAction={sendPrompt}>Send Prompt</oj-button> */}
+          <Chat
+            data={update}
+            question={question}
+            questionChanged={handleQuestionChange}
+          />
+        </>
       )}
       {serviceType === "sim" && (
         <Simulation

app/src/components/content/settings.tsx

@@ -6,43 +6,69 @@ import { CRadiosetElement } from "oj-c/radioset";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
 
 type ServiceTypeVal = "text" | "summary" | "sim";
+type BackendTypeVal = "java" | "python";
 type Services = {
   label: string;
   value: ServiceTypeVal;
 };
 type Props = {
-  serviceType: "text" | "summary" | "sim";
-  serviceChange: (service: ServiceTypeVal) => void;
+  aiServiceType: ServiceTypeVal;
+  backendType: BackendTypeVal;
+  aiServiceChange: (service: ServiceTypeVal) => void;
+  backendChange: (backend: BackendTypeVal) => void;
 };
 
 const serviceTypes = [
   { value: "text", label: "Generative Text" },
   { value: "summary", label: "Summarize" },
   { value: "sim", label: "Simulation" },
 ];
+
+const backendTypes = [
+  { value: "java", label: "Java" },
+  { value: "python", label: "Python" },
+];
 const serviceOptionsDP = new MutableArrayDataProvider<
   Services["value"],
   Services
 >(serviceTypes, { keyAttributes: "value" });
+const backendOptionsDP = new MutableArrayDataProvider<
+  Services["value"],
+  Services
+>(backendTypes, { keyAttributes: "value" });
 
 export const Settings = (props: Props) => {
   const handleServiceTypeChange = (event: any) => {
     if (event.detail.updatedFrom === "internal")
-      props.serviceChange(event.detail.value);
+      props.aiServiceChange(event.detail.value);
+  };
+  const handleBackendTypeChange = (event: any) => {
+    if (event.detail.updatedFrom === "internal")
+      props.backendChange(event.detail.value);
   };
 
   return (
     <div class="oj-sm-margin-4x">
       <h2 class="oj-typography-heading-sm">Service Settings</h2>
       <oj-c-form-layout>
         <oj-c-radioset
-          id="enabledRadioset"
-          value={props.serviceType}
+          id="serviceTypeRadioset"
+          value={props.aiServiceType}
           labelHint="AI Service Type"
           options={serviceOptionsDP}
           onvalueChanged={handleServiceTypeChange}
         ></oj-c-radioset>
       </oj-c-form-layout>
+      <h2 class="oj-typography-heading-sm">Backend Service Type</h2>
+      <oj-c-form-layout>
+        <oj-c-radioset
+          id="backendTypeRadioset"
+          value={props.backendType}
+          labelHint="Backend Service Type"
+          options={backendOptionsDP}
+          onvalueChanged={handleBackendTypeChange}
+        ></oj-c-radioset>
+      </oj-c-form-layout>
     </div>
   );
 };