updating conversationId and other cleanup

Author: jabrock

app/src/components/app.tsx

@@ -1,19 +1,24 @@
 import { Header } from "./header";
 import Content from "./content/index";
 import { registerCustomElement } from "ojs/ojvcomponent";
-import "preact";
+import { createContext } from "preact";
 
 type Props = {
   appName: string;
 };
+const convoUUID = window.crypto.randomUUID();
+export const ConvoCtx = createContext(convoUUID);
 
 export const App = registerCustomElement("app-root", (props: Props) => {
   props.appName = "Generative AI JET UI";
 
   return (
     <div id="appContainer" class="oj-web-applayout-page">
-      <Header appName={props.appName} />
-      <Content />
+      <ConvoCtx.Provider value={convoUUID}>
+        {console.log("UUID: ", convoUUID)}
+        <Header appName={props.appName} />
+        <Content />
+      </ConvoCtx.Provider>
     </div>
   );
 });

app/src/components/content/index.tsx

@@ -9,12 +9,13 @@ import "oj-c/drawer-popup";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
 import { MessageToastItem } from "oj-c/message-toast";
 import { InputSearchElement } from "ojs/ojinputsearch";
-import { useState, useEffect, useRef } from "preact/hooks";
+import { useState, useEffect, useRef, useContext } 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";
+import { ConvoCtx } from "../app";
 
 type ServiceTypes = "text" | "summary" | "sim";
 type BackendTypes = "java" | "python";
@@ -26,12 +27,14 @@ type Chat = {
 };
 
 const defaultServiceType: string = localStorage.getItem("service") || "text";
-const defaultBackendType: String = localStorage.getItem("backend") || "java";
+const defaultBackendType: string = localStorage.getItem("backend") || "java";
 
 const Content = () => {
+  const conversationId = useContext(ConvoCtx);
   const [update, setUpdate] = useState<Array<object>>([]);
   const [busy, setBusy] = useState<boolean>(false);
   const [summaryResults, setSummaryResults] = useState<string>("");
+  const [modelId, setModelId] = useState<string | null>(null);
   const [summaryPrompt, setSummaryPrompt] = useState<string>();
   const [serviceType, setServiceType] = useState<ServiceTypes>(
     defaultServiceType as ServiceTypes
@@ -76,6 +79,7 @@ const Content = () => {
       await sleep(2000);
     }
   };
+
   useEffect(() => {
     switch (serviceType) {
       case "text":
@@ -158,16 +162,13 @@ const Content = () => {
       setUpdate(chatData.current);
       setBusy(true);
 
-      // simulating the delay for now just to show what the animation looks like.
-      setTimeout(() => {
-        if (backendType === "python") {
-          socket.current?.send(
-            JSON.stringify({ msgType: "question", data: question.current })
-          );
-        } else {
-          sendPrompt(client, question.current!);
-        }
-      }, 300);
+      if (backendType === "python") {
+        socket.current?.send(
+          JSON.stringify({ msgType: "question", data: question.current })
+        );
+      } else {
+        sendPrompt(client, question.current!, modelId!, conversationId!);
+      }
     }
   };
 
@@ -198,7 +199,10 @@ const Content = () => {
     localStorage.setItem("backend", backend);
     location.reload();
   };
-
+  const modelIdChangeHandler = (event: CustomEvent) => {
+    console.log("model Id: ", event.detail.value);
+    if (event.detail.value != null) setModelId(event.detail.value);
+  };
   const clearSummary = () => {
     setSummaryResults("");
   };
@@ -223,6 +227,7 @@ const Content = () => {
           backendType={backendType}
           aiServiceChange={serviceTypeChangeHandler}
           backendChange={backendTypeChangeHandler}
+          modelIdChange={modelIdChangeHandler}
         />
       </oj-c-drawer-popup>
       <div class="oj-flex-bar oj-flex-item demo-header oj-sm-12">

app/src/components/content/settings.tsx

@@ -1,4 +1,4 @@
-import "preact";
+import { ComponentProps } from "preact";
 import { useEffect, useRef } from "preact/hooks";
 import "oj-c/radioset";
 import "oj-c/form-layout";
@@ -17,13 +17,14 @@ type Props = {
   backendType: BackendTypeVal;
   aiServiceChange: (service: ServiceTypeVal) => void;
   backendChange: (backend: BackendTypeVal) => void;
+  modelIdChange: (modelName: any) => void;
 };
 
 const serviceTypes = [
   { value: "text", label: "Generative Text" },
   { value: "summary", label: "Summarize" },
-  { value: "sim", label: "Simulation" },
 ];
+// { value: "sim", label: "Simulation" },
 
 const backendTypes = [
   { value: "java", label: "Java" },
@@ -93,14 +94,15 @@ export const Settings = (props: Props) => {
           onvalueChanged={handleBackendTypeChange}
         ></oj-c-radioset>
       </oj-c-form-layout>
-      {props.aiServiceType == "summary" && props.backendType == "java" && (
+      {props.aiServiceType == "text" && 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"}
+              onvalueChanged={props.modelIdChange}
             ></oj-c-select-single>
           </oj-c-form-layout>
         </>

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

@@ -65,15 +65,20 @@ export const InitStomp = (
   return client;
 };
 
-export const sendPrompt = (client: Client | null, prompt: string) => {
+export const sendPrompt = (
+  client: Client | null,
+  prompt: string,
+  modelId: string,
+  convoId: string
+) => {
   if (client?.connected) {
     console.log("Sending prompt: ", prompt);
     client.publish({
       destination: "/genai/prompt",
       body: JSON.stringify({
-        conversationId: "something",
-        content: prompt, //"Show me code for a websocket service using JavaScript",
-        modelId: "notapply",
+        conversationId: convoId,
+        content: prompt,
+        modelId: modelId,
       }),
     });
   } else {

app/src/components/content/summary.tsx

@@ -282,16 +282,18 @@ export const Summary = ({
               FILE_SIZE / 1000
             }KB per PDF file.`}
           ></oj-c-file-picker>
-          <oj-c-input-text
-            id="promptInput"
-            ref={promptInputRef}
-            required
-            aria-label="enter document summary prompt"
-            class="oj-sm-width-full oj-md-width-1/2 oj-sm-margin-4x-top oj-sm-margin-4x-bottom"
-            labelHint="Enter the document summary prompt"
-            labelEdge="top"
-            onvalueChanged={submitPrompt}
-          ></oj-c-input-text>
+          {backendType === "python" && (
+            <oj-c-input-text
+              id="promptInput"
+              ref={promptInputRef}
+              required
+              aria-label="enter document summary prompt"
+              class="oj-sm-width-full oj-md-width-1/2 oj-sm-margin-4x-top oj-sm-margin-4x-bottom"
+              labelHint="Enter the document summary prompt"
+              labelEdge="top"
+              onvalueChanged={submitPrompt}
+            ></oj-c-input-text>
+          )}
         </oj-validation-group>
         {invalidFiles.current.length !== 1 && fileNames && (
           <>