up

Author: WSPluta

app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "JETGenAI",
-  "version": "1.0.1",
+  "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

@@ -77,30 +77,34 @@ export const Chat = ({ testId, data, questionChanged, question }: Props) => {
   };
 
   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={handleQuestionChange}
-      ></oj-input-search>
-    </>
+    </div>
   );
 };

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);
   }
 }
+