From 2c2ed2f8243378e8c9aaa05948bccc5222ca991d Mon Sep 17 00:00:00 2001
From: Rodrigo Rodriguez <rodriguez@pragmatismo.cloud>
Date: Wed, 18 Sep 2024 13:21:21 -0300
Subject: [PATCH] fix (templates): ai-search OK.

---
 packages/core.gbapp/services/GBDeployer.ts    |   2 +-
 packages/core.gbapp/services/GBMinService.ts  |   7 +-
 packages/default.gbtheme/css/SidebarMenu.css  |  10 +-
 packages/default.gbui/public/index.html       |   4 +-
 packages/default.gbui/src/components/GBCss.js |   2 +-
 .../src/components/SidebarMenu.js             |   2 +-
 .../default.gbai/default.gbtheme/css/App.css  | 227 +++++++++++++++++-
 .../default.gbtheme/css/SidebarMenu.css       |  10 +-
 8 files changed, 241 insertions(+), 23 deletions(-)

diff --git a/packages/core.gbapp/services/GBDeployer.ts b/packages/core.gbapp/services/GBDeployer.ts
index 84d68ede..b7573a5b 100644
--- a/packages/core.gbapp/services/GBDeployer.ts
+++ b/packages/core.gbapp/services/GBDeployer.ts
@@ -713,7 +713,7 @@ export class GBDeployer implements IGBDeployer {
       case '.gbtheme':
         // Updates server listeners to serve theme files in .gbtheme.
 
-        GBServer.globals.server.use(`/themes/${packageName}`, express.static(packageWorkFolder));
+        GBServer.globals.server.use( '/' + urlJoin('themes', packageName), express.static(packageWorkFolder));
         GBLogEx.verbose(min, `Theme (.gbtheme) assets accessible at: /themes/${packageName}.`);
 
         break;
diff --git a/packages/core.gbapp/services/GBMinService.ts b/packages/core.gbapp/services/GBMinService.ts
index 4c2466b5..6e6c4204 100644
--- a/packages/core.gbapp/services/GBMinService.ts
+++ b/packages/core.gbapp/services/GBMinService.ts
@@ -298,9 +298,6 @@ export class GBMinService {
 
     await GBVMService.loadConnections(min);
 
-    // Serves individual URL for each bot conversational interface.
-
-    await this.deployer['deployPackage2'](min, user, 'templates/default.gbai/default.gbtheme');
 
     // Install per bot deployed packages.
 
@@ -316,6 +313,10 @@ export class GBMinService {
     if (await GBUtil.exists(packagePath)) {
       await this.deployer['deployPackage2'](min, user, packagePath);
     }
+    else {
+      await this.deployer['deployPackage2'](min, user, path.join('work', 'default.gbai', 'default.gbtheme'));
+    }
+
     packagePath = urlJoin(`work`, GBUtil.getGBAIPath(min.botId, `gblib`));
     if (await GBUtil.exists(packagePath)) {
       await this.deployer['deployPackage2'](min, user, packagePath);
diff --git a/packages/default.gbtheme/css/SidebarMenu.css b/packages/default.gbtheme/css/SidebarMenu.css
index 66e1c411..1cb82998 100644
--- a/packages/default.gbtheme/css/SidebarMenu.css
+++ b/packages/default.gbtheme/css/SidebarMenu.css
@@ -38,7 +38,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         left: 0;
     }
 
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 
@@ -70,7 +70,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
 }
 
 @media screen and (min-width: 520px) and (max-width:1000px) {
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
     .sidebar {
@@ -115,7 +115,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         top: 0;
         left: 0;
     }
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 
@@ -159,7 +159,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         border-right: 14px solid #19baee !important;
     }
 
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         color: white;
         text-align: center;
         margin-top: 10px;
@@ -193,7 +193,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
 }
 
 @media screen and (max-height: 684px) {
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 }
diff --git a/packages/default.gbui/public/index.html b/packages/default.gbui/public/index.html
index f6e49ce3..d955a14a 100644
--- a/packages/default.gbui/public/index.html
+++ b/packages/default.gbui/public/index.html
@@ -61,7 +61,7 @@
   <script>
           // Focus the input field after rendering
           setTimeout(() => {
-        const input = document.querySelector('.webchat-input');
+        const input = document.querySelector('.webchat__send-box-text-box__input');
         if (input) {
           input.focus();
         }
@@ -70,7 +70,7 @@
   </script>
 </head>
 
-<body style="background-color: lightgrey;">
+<body style="background-color: black;">
     <div id="root"></div>
 </body>
 
diff --git a/packages/default.gbui/src/components/GBCss.js b/packages/default.gbui/src/components/GBCss.js
index 5ea60b6c..721fd363 100644
--- a/packages/default.gbui/src/components/GBCss.js
+++ b/packages/default.gbui/src/components/GBCss.js
@@ -44,7 +44,7 @@ class GBCss extends React.Component {
           <link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/MediaPlayer.css"} />
           <link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/NavBar.css"} />
           <link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/App.css"} />
-          <link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/SideBarMenu.css" } />
+          <link rel="stylesheet" type="text/css" href={"/themes/" + this.props.instance.theme + "/css/SidebarMenu.css" } />
         </Helmet>
       );
     } else {
diff --git a/packages/default.gbui/src/components/SidebarMenu.js b/packages/default.gbui/src/components/SidebarMenu.js
index b76784d3..b3e26737 100644
--- a/packages/default.gbui/src/components/SidebarMenu.js
+++ b/packages/default.gbui/src/components/SidebarMenu.js
@@ -46,7 +46,7 @@ class SideBarMenu extends React.Component {
   render() {
     return (
       <div>
-        <div className="tittleSideBarMenu">
+        <div className="titleSideBarMenu">
           <img
             className="pragmatismoLogo"
             src={this.props.instance.logo}
diff --git a/templates/default.gbai/default.gbtheme/css/App.css b/templates/default.gbai/default.gbtheme/css/App.css
index 5fa8a7c5..21972be6 100644
--- a/templates/default.gbai/default.gbtheme/css/App.css
+++ b/templates/default.gbai/default.gbtheme/css/App.css
@@ -1,12 +1,229 @@
-body {
-    background-color: #dadada !important;
+/* Sidebar */
+.ms-Nav {
+    background: #1a1a1a;
+    color: #ffffff;
+    margin-top: 2rem;
+    border-radius: 1rem;
+    padding: 1rem;
 }
 
-.loader {
-    opacity: 1 !important;
-    filter: opacity(100%);
+.ms-Nav-link {
+    color: #ffffff !important;
+    background-color: #2a2a2a !important;
+    border-radius: 0.75rem;
+    margin: 0.5rem 0;
+    padding: 0.75rem;
 }
 
+.ms-Nav-link a:active {
+    border-right: 2px solid #ffffff;
+}
+
+.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
+    background: #2a2a2a !important;
+}
+
+.ms-Nav-compositeLink.is-selected {
+    padding-left: 80px !important;
+}
+
+.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
+.ms-Nav-compositeLink.is-selected a:after {
+    border-left: none !important;
+}
+
+.sidebar {
+    background-color: white !important;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5);
+    border-radius: 1rem;
+    background-repeat: no-repeat;
+}
+
+@media screen and (max-width: 419px),
+screen and (min-width: 420px) and (max-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        height: 10%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .sidebar {
+        border-radius: 1rem 1rem 0 0;
+    }
+
+    .titleSideBarMenu {
+        display: none;
+    }
+
+    .iconMenu {
+        color: #ffffff;
+        font-size: 15px;
+        display: inline;
+        margin-right: 1.5rem;
+    }
+
+    .iconMenu:hover {
+        color: #cccccc;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+
+    @media screen and (max-width: 419px) {
+        .IconsMenu {
+            position: absolute;
+            top: 50%;
+            margin-top: -23px;
+            height: 30px;
+            width: 320px;
+            left: 50%;
+            margin-left: -160px;
+            text-align: center;
+            font-family: "Open Sans", sans-serif;
+        }
+    }
+
+    @media screen and (min-width: 420px) and (max-width: 1000px) {
+        .IconsMenu {
+            position: absolute;
+            top: 50%;
+            margin-top: -15px;
+            height: 30px;
+            width: 450px;
+            left: 100px !important;
+            margin-left: 0px !important;
+            text-align: center;
+            font-family: "Open Sans", sans-serif;
+        }
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        height: 14%;
+        width: 45% !important;
+        background-color: #1a1a1a !important;
+        position: absolute;
+        top: 3%;
+        left: 3%;
+        border-right: 14px solid #4a4a4a !important;
+    }
+
+    .titleSideBarMenu {
+        color: #ffffff;
+        text-align: center;
+        margin-top: 3px;
+
+    }
+
+    .iconMenu {
+        color: #ffffff;
+        font-size: 16px;
+        text-align: center;
+        margin: 0 1.5rem;
+    }
+
+    .IconsMenu {
+        width: 560px;
+        display: inline-flex;
+        position: absolute;
+        left: 50%;
+        margin-left: -280px;
+        bottom: 1rem;
+        height: 30px;
+        font-family: "Open Sans", sans-serif;
+    }
+}
+
+/* Player */
+.player {
+    background-color: white;
+    box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), 0 0 30px rgba(255, 255, 255, 0.5);
+    border-radius: 0.75rem;
+}
+
+@media screen and (max-width: 1000px) {
+    .player {
+        width: 93% !important;
+        height: 26% !important;
+        border: 7px solid #4a4a4a;
+        position: absolute;
+        top: 9%;
+        left: 50%;
+        margin-left: -48%;
+        padding: 50px;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .player {
+        width: 45% !important;
+        height: 75% !important;
+        border: 7px solid #6c6c6c;
+        position: absolute;
+        left: 3%;
+        top: 19%;
+    }
+}
+
+/* Webchat */
+.webchat {
+    background-color: #ffffff !important;
+    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    overflow: auto !important;
+}
+
+.webchat > div {
+    height: 100%;
+    width: 100%;
+}
+
+@media screen and (max-width: 1000px) {
+    .webchat {
+        width: 96% !important;
+        height: 57% !important;
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px;
+        position: absolute;
+        top: 41%;
+        left: 50%;
+        margin-left: -48%;
+        border-radius: 1rem;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .webchat {
+        width: 48% !important;
+        height: 92.6%;
+        position: absolute;
+        right: 20px;
+        margin-left: -8%;
+        top: 19px;
+        bottom: 0;
+        border-bottom: 4px solid #4a4a4a;
+    }
+}
+
+/* General Styles */
+body {
+    background: linear-gradient(135deg, #000000, #ffffff);
+    font-family: 'Open Sans', sans-serif;
+    color: #ffffff;
+    margin: 0;
+    padding: 0;
+}
+
+
 
 .gb-quality-button-yes {
     width: 54px;
diff --git a/templates/default.gbai/default.gbtheme/css/SidebarMenu.css b/templates/default.gbai/default.gbtheme/css/SidebarMenu.css
index 66e1c411..1cb82998 100644
--- a/templates/default.gbai/default.gbtheme/css/SidebarMenu.css
+++ b/templates/default.gbai/default.gbtheme/css/SidebarMenu.css
@@ -38,7 +38,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         left: 0;
     }
 
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 
@@ -70,7 +70,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
 }
 
 @media screen and (min-width: 520px) and (max-width:1000px) {
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
     .sidebar {
@@ -115,7 +115,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         top: 0;
         left: 0;
     }
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 
@@ -159,7 +159,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
         border-right: 14px solid #19baee !important;
     }
 
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         color: white;
         text-align: center;
         margin-top: 10px;
@@ -193,7 +193,7 @@ html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
 }
 
 @media screen and (max-height: 684px) {
-    .tittleSideBarMenu {
+    .titleSideBarMenu {
         display: none;
     }
 }