Merge pull request #26 from oracle-devrel/cleanup-JET-client

code cleanup and random number updates to remove requirement on HTTPS

Author: vmleon

app/src/components/app.tsx

@@ -6,16 +6,18 @@ import { createContext } from "preact";
 type Props = {
   appName: string;
 };
-const convoUUID = window.crypto.randomUUID();
-export const ConvoCtx = createContext(convoUUID);
+const tempArray = new Uint32Array(10);
+const convoUUID = window.crypto.getRandomValues(tempArray);
+
+export const ConvoCtx = createContext("");
 
 export const App = registerCustomElement("app-root", (props: Props) => {
   props.appName = "Generative AI JET UI";
 
   return (
     <div id="appContainer" class="oj-web-applayout-page">
-      <ConvoCtx.Provider value={convoUUID}>
-        {console.log("UUID: ", convoUUID)}
+      <ConvoCtx.Provider value={convoUUID[0].toString()}>
+        {console.log("UUID: ", convoUUID[0].toString())}
         <Header appName={props.appName} />
         <Content />
       </ConvoCtx.Provider>

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

@@ -9,7 +9,6 @@ export const InitStomp = (
   chatData: any,
   serviceType: any
 ) => {
-  //const [test, setTest] = useState();
   const protocol = window.location.protocol === "http:" ? "ws://" : "wss://";
   const hostname =
     window.location.hostname === "localhost"
@@ -47,7 +46,6 @@ export const InitStomp = (
 
   const onMessage = (msg: any) => {
     let aiAnswer = JSON.parse(msg.body).content;
-    //console.log("answer: ", aiAnswer);
     if (msg.data !== "connected") {
       let tempArray = [...chatData.current];
       // remove the animation item before adding answer

app/src/components/content/summary.tsx

@@ -1,5 +1,5 @@
 import "preact";
-import { useState, useRef, useEffect } from "preact/hooks";
+import { useState, useRef, useEffect, useContext } from "preact/hooks";
 import "md-wrapper/loader";
 import "ojs/ojtoolbar";
 import "oj-c/file-picker";
@@ -13,6 +13,7 @@ import { CFilePickerElement } from "oj-c/file-picker";
 import { CInputTextElement } from "oj-c/input-text";
 import { CButtonElement } from "oj-c/button";
 import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
+import { ConvoCtx } from "../app";
 
 declare global {
   namespace preact.JSX {
@@ -47,6 +48,7 @@ export const Summary = ({
   summary,
   backendType,
 }: Props) => {
+  const conversationId = useContext(ConvoCtx);
   const [invalidMessage, setInvalidMessage] = useState<string | null>(null);
   const [summaryPrompt, setSummaryPrompt] = useState<string>("");
   const [summaryResults, setSummaryResults] = useState<string | null>(summary);
@@ -89,6 +91,7 @@ export const Summary = ({
       mode: "cors",
       referrerPolicy: "strict-origin-when-cross-origin",
       body: formData,
+      headers: { conversationID: conversationId, modelId: "" },
     });
     console.log("Response: ", res);
     const responseData = await res.json();
@@ -330,7 +333,11 @@ export const Summary = ({
           </>
         )}
         {invalidFiles.current.length !== 1 && fileNames && summary && (
-          <div id="summaryContent" class="oj-panel oj-sm-width-full">
+          <div
+            id="summaryContent"
+            class="oj-panel oj-sm-width-full oj-color-invert oj-sm-padding-4x oj-sm-margin-6x-top"
+            style="background-color: var(--oj-sp-header-welcome-banner-background-color);"
+          >
             <md-wrapper
               id="TestingOne"
               class="oj-sm-width-full"