grill-lab · alespeggio · Sep 4, 2022 · Sep 4, 2022
diff --git a/chat_ui/Dockerfile.dev b/chat_ui/Dockerfile.dev
diff --git a/chat_ui/chat_deployment_dev.yaml b/chat_ui/chat_deployment_dev.yaml
diff --git a/chat_ui/chat_deployment_nginx.yaml → ...loyment_config/cloud/chat_deployment.yaml b/chat_ui/chat_deployment_nginx.yaml → ...loyment_config/cloud/chat_deployment.yaml
@@ -10,8 +10,6 @@ spec:
     name: http
   selector:
     app: chat-app
-  # type: LoadBalancer
-  # loadBalancerIP: "34.118.4.64"
   type: NodePort
 ---
 apiVersion: apps/v1
@@ -32,7 +30,6 @@ spec:
       containers:
       - name: chat
         image: europe-west2-docker.pkg.dev/agentdialogue-2cd4b/task-mad-images-repository/chat:latest
-        #imagePullPolicy: Never
         imagePullPolicy: Always
         stdin: true
         ports:

diff --git a/chat_ui/chat_managed_cert.yaml → ...yment_config/cloud/chat_managed_cert.yaml b/chat_ui/chat_managed_cert.yaml → ...yment_config/cloud/chat_managed_cert.yaml
diff --git a/chat_ui/chat_managed_cert_ingress.yaml → ...nfig/cloud/chat_managed_cert_ingress.yaml b/chat_ui/chat_managed_cert_ingress.yaml → ...nfig/cloud/chat_managed_cert_ingress.yaml
diff --git a/chat_ui/cloudbuild.yaml → ...i/deployment_config/cloud/cloudbuild.yaml b/chat_ui/cloudbuild.yaml → ...i/deployment_config/cloud/cloudbuild.yaml
@@ -13,7 +13,7 @@ steps:
   args:
   - apply
   - -f
-  - ${_ROOT_FOLDER}/${_FRONTEND_CONFIG_FILE}
+  - ${_ROOT_FOLDER}/${_CONFIG_PATH}/${_FRONTEND_CONFIG_FILE}
   env:
   - CLOUDSDK_COMPUTE_REGION=${_CLUSTER_LOCATION}
   - CLOUDSDK_CONTAINER_CLUSTER=${_CLUSTER_NAME}
@@ -22,7 +22,7 @@ steps:
   args:
   - apply
   - -f
-  - ${_ROOT_FOLDER}/${_K8_FILE}
+  - ${_ROOT_FOLDER}/${_CONFIG_PATH}/${_K8_FILE}
   env:
   - CLOUDSDK_COMPUTE_REGION=${_CLUSTER_LOCATION}
   - CLOUDSDK_CONTAINER_CLUSTER=${_CLUSTER_NAME}
@@ -31,21 +31,22 @@ steps:
   args:
   - apply
   - -f
-  - ${_ROOT_FOLDER}/${_INGRESS_FILE}
+  - ${_ROOT_FOLDER}/${_CONFIG_PATH}/${_INGRESS_FILE}
   env:
   - CLOUDSDK_COMPUTE_REGION=${_CLUSTER_LOCATION}
   - CLOUDSDK_CONTAINER_CLUSTER=${_CLUSTER_NAME}
 
 substitutions:
-  _ROOT_FOLDER: chat_ui
   _ARTIFACT_REGISTRY_REPOSITORY: task-mad-images-repository
+  _CLUSTER_LOCATION: europe-central2-a
+  _CLUSTER_NAME: chat-cluster
   _IMAGE_NAME: chat
   _IMAGE_VERSION: latest
+  _ROOT_FOLDER: chat_ui
+  _CONFIG_PATH: deployment_config/cloud
   _FRONTEND_CONFIG_FILE: frontend_config.yaml
-  _K8_FILE: chat_deployment_nginx.yaml
   _INGRESS_FILE: chat_managed_cert_ingress.yaml
-  _CLUSTER_LOCATION: europe-central2-a
-  _CLUSTER_NAME: chat-cluster
+  _K8_FILE: chat_deployment.yaml
 
 
 # Time out after 30 minutes

diff --git a/chat_ui/frontend_config.yaml → ...loyment_config/cloud/frontend_config.yaml b/chat_ui/frontend_config.yaml → ...loyment_config/cloud/frontend_config.yaml
diff --git a/chat_ui/src/App.module.css b/chat_ui/src/App.module.css
@@ -3,7 +3,6 @@
 
 
 :root{
-  --main-background-image: url("https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80");
   --header-height: 60px;
   --logo-height: 40px;
   --main-title-font-size: 40px;
@@ -21,14 +20,12 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background-image: var(--main-background-image);
   background-size: cover;
 }
 
 .appHeader {
   background-color: var(--header-top);
   height: var(--header-height);
-  background-color: black;
 }
 
 .appLogo {

diff --git a/chat_ui/src/App.tsx b/chat_ui/src/App.tsx
@@ -1,8 +1,7 @@
 import React, { Component } from "react"
 import css from "./App.module.css"
-// import {HomePanel} from "./home/HomePanel"
-// import {RatingsPanel} from "./ratings/RatingsPanel"
-import logo from "./resources/img/uog_logo.png"
+import { ChatConfigs } from "./common/chat_ui_configs"
+import logo from "./resources/img/chat_ui_logo.png"
 import { WoZPanel } from "./woz/WoZPanel"
 
 // tslint:disable-next-line:interface-name
@@ -18,12 +17,14 @@ class App extends Component<{}, IAppState> {
     super(props)
 
     const params: StringMap = {
-      conversationID: "test",
-      url: "https://backend-server.online",
-      userID: "user",
-      isAudioRecordingEnabled: '',
-      isTextToSpeechEnabled: '',
-      isSequentialNavigationEnabled: ''
+      conversationID: ChatConfigs.conversation_id,
+      url: ChatConfigs.url,
+      userID: ChatConfigs.userID,
+      isAudioRecordingEnabled: ChatConfigs.isAudioRecordingEnabled,
+      isTextToSpeechEnabled: ChatConfigs.isTextToSpeechEnabled,
+      isSequentialNavigationEnabled: ChatConfigs.isSequentialNavigationEnabled,
+      isSequentialComponentFullPage: ChatConfigs.isSequentialComponentFullPage,
+      showSequentialPageCheckboxes: ChatConfigs.showSequentialPageCheckboxes
     }
     new URL(window.location.href)
       .searchParams.forEach((value, key) => {
@@ -38,39 +39,14 @@ class App extends Component<{}, IAppState> {
 
   public render() {
 
-    // const panes = [
-    //   {
-    //     menuItem: "Home",
-    //     render: () => <Tab.Pane
-    //         className={css.mainTabPane} attached><HomePanel/></Tab.Pane>,
-    //   },
-    //   { menuItem: "Offline MT Ratings",
-    //     render: () => <Tab.Pane
-    //         className={css.mainTabPane} attached><RatingsPanel/></Tab.Pane>,
-    //   },
-    //   { menuItem: "TaskMAD",
-    //     render: () => <Tab.Pane
-    //         className={css.mainTabPane} attached>
-    //       <WoZPanel params={this.state.params}/></Tab.Pane>,
-    //   },
-    // ]
-
     return (
-      <div className={css.app}>
+      <div className={css.app} style={{ backgroundImage: `url(${ChatConfigs.chat_ui_background_image})` }}>
         <div className={css.overlayLayer}>
-          <header className={css.appHeader}>
+          <header className={css.appHeader} style={{ backgroundColor: ChatConfigs.chat_ui_header_color }}>
             <img src={logo} className={css.appLogo} alt="logo" />
-            <h1 className={css.appTitle}>TaskMAD</h1>
+            <h1 className={css.appTitle}>{ChatConfigs.chat_ui_title}</h1>
           </header>
-          {/* <Tab className={css.mainTab}
-              menu={{
-                attached: true,
-                color: "orange",
-                inverted: true,
-                tabular: false }}
-              panes={panes} /> */}
           <WoZPanel params={this.state.params} />
-          <a className={css.appFooter} href="https://www.flaticon.com/free-icons/chatbot" title="chatbot icons"></a>
         </div>
       </div>
     )

diff --git a/chat_ui/src/common/chat_ui_configs.ts b/chat_ui/src/common/chat_ui_configs.ts
@@ -0,0 +1,15 @@
+export class ChatConfigs{
+    public static chat_ui_title:string = "TaskMAD";
+    public static chat_ui_background_image:string = "https://images.unsplash.com/photo-1547592180-85f173990554?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80";
+    public static chat_ui_header_color:string = "rgba(0,0,0,1)";
+
+    public static conversation_id:string = "test";
+    public static url:string = "https://backend-server.online";
+    public static userID:string = "user";
+    public static isAudioRecordingEnabled:string = "false";
+    public static isTextToSpeechEnabled:string = "false";
+    public static isSequentialNavigationEnabled:string = "false";
+    public static isSequentialComponentFullPage:string = "false";
+    public static showSequentialPageCheckboxes:string = "false";
+
+}
diff --git a/...components/RecipePageComponent.module.css → ...onents/SequentialPageComponent.module.css b/...components/RecipePageComponent.module.css → ...onents/SequentialPageComponent.module.css
@@ -6,7 +6,7 @@
   overflow-y: scroll;
   padding: var(--chat-container-top);
 }
-.recipeCheckbox{
+.sequentialCheckbox{
   float: left;
 }
 
@@ -15,11 +15,11 @@
   margin-bottom: 5px;
 }
 
-.recipeSectionDiv{
+.sectionDiv{
   margin-bottom: 15px;
 }
 
-.recipeStepImage{
+.stepImage{
   height: auto;
   width: 60%;
   border-radius: 1em;
@@ -36,7 +36,7 @@
   color: white !important;
 }
 
-.recipeComponentContainer{
+.componentContainer{
   background-color: var(--chat-container-background);
   padding: var(--chat-container-top);
   border-radius: var(--chat-container-border-radius);