updating python and adding send on enter

.gitignore

@@ -75,4 +75,5 @@ build/
 .idea
 bin/
 dist/
-application-local.yaml
+application-local.yaml
+service/python/config.json

K8S.md

@@ -48,7 +48,7 @@ Change to the new folder:
 cd oci-generative-ai-jet-ui
 ```
 
-Install Node.js 16 on Cloud Shell.
+Install Node.js 18 on Cloud Shell.
 
 ```bash
 nvm install 18 && nvm use 18
@@ -130,6 +130,7 @@ Run `get deploy` a few times:
 
 ```bash
 kubectl get deploy -n backend
+kubectl get pods -n backend
 ```
 
 Wait for all deployments to be `Ready` and `Available`.

LOCAL.md

@@ -1,4 +1,13 @@
-# Run Local
+# Running Java Backend for Local Development
+
+This guide provides step-by-step instructions for running the Java backend application locally for development purposes.
+
+Prerequisites
+Ensure you have the following installed on your system:
+Java Development Kit (JDK) 11 or later
+Gradle 6.8 or later
+Oracle JDBC Driver (if using an Oracle database)
+Familiarize yourself with the project structure and configuration files.
 
 ## Run components
 

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "JETGenAI",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Sample Client app showing communication with OCI Generative AI services via Websocket",
   "dependencies": {
     "@oracle/oraclejet": "~16.1.0",

app/src/components/content/answer.tsx

@@ -43,22 +43,22 @@ export const Answer = ({ item, sim }: Props) => {
       )}
       {!sim && (
         <li class="oj-flex demo-answer-layout">
-          <div class="oj-flex-item oj-flex-bar">
-            <div class="oj-sm-justify-content-flex-end oj-flex-bar-middle oj-sm-padding-2x demo-copy-paste oj-color-invert">
+          <div class="oj-flex-item">
+            <div class="oj-sm-justify-content-flex-end oj-sm-padding-2x-end oj-sm-12 demo-copy-paste oj-color-invert">
               <md-wrapper
                 id="TestingOne"
-                class="oj-sm-width-full"
+                class="oj-sm-12"
                 markdown={answer}
               />
             </div>
-            <div class="oj-flex-bar-end">
+            {/* <div class="oj-flex-bar-end">
               <oj-avatar
                 initials="A"
                 size="sm"
                 role="presentation"
                 background="orange"
               ></oj-avatar>
-            </div>
+            </div> */}
           </div>
         </li>
       )}

app/src/components/content/chat.tsx

@@ -68,31 +68,43 @@ export const Chat = ({ testId, data, questionChanged, question }: Props) => {
     );
   };
 
+  const handleQuestionChange = (event: any) => {
+    const newValue = event.detail.value.trim();
+    if (newValue !== "") {
+      questionChanged(event);
+      question.current = ""; // Clear the input field after adding the question
+    }
+  };
+
   return (
-    <>
-      <div class="oj-flex-item">
-        <oj-list-view
-          id="chatlist"
-          ref={listRef}
-          data-oj-context="true"
-          aria-label="list of questions and answers"
-          data={dataProvider.current}
-          selectionMode="none"
-          scrollPosition={scrollPos}
-          class="oj-sm-width-full demo-chat-layout"
-        >
-          <template slot="itemTemplate" render={chatItemTemplate}></template>
-          <template slot="noData" render={chatNoDataTemplate}></template>
-        </oj-list-view>
+    <div class="chat-wrapper">
+      <div class="chat-container">
+        <div class="chat-list-container">
+          <oj-list-view
+            id="chatlist"
+            ref={listRef}
+            data-oj-context="true"
+            aria-label="list of questions and answers"
+            data={dataProvider.current}
+            selectionMode="none"
+            scrollPosition={scrollPos}
+            class="oj-sm-width-full demo-chat-layout"
+          >
+            <template slot="itemTemplate" render={chatItemTemplate}></template>
+            <template slot="noData" render={chatNoDataTemplate}></template>
+          </oj-list-view>
+        </div>
+        <div class="chat-input-container">
+          <oj-input-search
+            id="search1"
+            class="oj-input-search-hero oj-sm-width-3"
+            value={question?.current}
+            placeholder="ask me anything..."
+            aria-label="enter a question"
+            onojValueAction={handleQuestionChange}
+          ></oj-input-search>
+        </div>
       </div>
-      <oj-input-search
-        id="search1"
-        class="oj-input-search-hero oj-sm-width-3"
-        value={question?.current}
-        placeholder="ask me anything..."
-        aria-label="enter a question"
-        onojValueAction={questionChanged}
-      ></oj-input-search>
-    </>
+    </div>
   );
-};
+};

app/src/components/content/settings.tsx

@@ -81,9 +81,8 @@ export const Settings = (props: Props) => {
       const json = await response.json();
       const result = json.filter((model: Model) => {
         if (
-          model.capabilities.includes("TEXT_GENERATION") &&
-          (model.vendor == "cohere" || model.vendor == "") &&
-          model.version != "14.2"
+          model.capabilities.includes("CHAT") &&
+          (model.vendor == "cohere" || model.vendor == "meta")
         )
           return model;
       });

app/src/styles/app.css

@@ -34,6 +34,13 @@ header.oj-web-applayout-header {
 
 oj-sample-markdown-viewer .legacyStyling pre {
   color: black;
+  white-space:pre-wrap;
+  margin: unset;
+
+}
+oj-sample-markdown-viewer .legacyStyling p {
+  margin-right: 10px;
+
 }
 
 .copy-to-clip-btn {
@@ -52,6 +59,7 @@ oj-sample-markdown-viewer .legacyStyling pre {
   user-select: text;
 }
 
+
 .demo-bg-main {
   background-color: rgb(var(--oj-palette-neutral-rgb-10));
   box-shadow: var(--oj-core-box-shadow-md);
@@ -78,10 +86,14 @@ samp {
   margin: 20px 10px 50px 10px;
   border: 2px black;
   border-radius: 10px;
-  padding: 10px 10px 10px 65px;
+  padding: 10px;
   text-align: start;
   max-width: 1440px;
 }
+
+.demo-answer-padding {
+  margin-top:65px;
+}
 .demo-sim-answer-layout {
   min-height: 50px;
   display: inherit;
@@ -92,6 +104,7 @@ samp {
   text-align: end;
   max-width: 1440px;
 }
+
 .demo-question-layout {
   min-height: 50px;
   /* background-color: #226b95; */
@@ -114,13 +127,13 @@ samp {
 }
 
 .demo-chat-layout {
-  max-height: 100%;
-  height: 80%;
-  min-height: 400px;
+  max-height: 80%;
+  height: 20%;
+  min-height: calc(100vh - 200px);
 }
 
 .demo-no-data-layout {
-  height: 100%;
+  height: 50%;
   align-items: center;
 }
 
@@ -178,3 +191,4 @@ html[dir="rtl"] .demo-oracle-icon {
     transform: translate(-25%, -25%) scale(0.5);
   }
 }
+