new(all): WebDav support for all bots.

packages/default.gbtheme/css/App.css

@@ -0,0 +1,171 @@
+body {
+    background-color: #dadada !important;
+}
+
+.loader {
+    opacity: 1 !important;
+    filter: opacity(100%);
+}
+
+
+.gb-quality-button-yes {
+    width: 54px;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: green;
+    color: white;
+    padding: 2px;
+    cursor: pointer;
+    transition: 0.9s;
+    transition-delay: 0.3s;
+    border: none;
+}
+
+.gb-quality-button-no {
+    width: 54px;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: red;
+    color: white;
+    padding: 2px;
+    cursor: pointer;
+    transition: 0.9s;
+    transition-delay: 0.3s;
+    border: none;
+}
+
+.gb-markdown-player-quality {
+    background-color: #f5e4a8;
+    padding: 4px;
+    position: absolute;
+    bottom: 14px;
+    left: -9px;
+    width: 100%;
+    border-radius: 5px;
+    color: #52514e;
+    border: 1px solid #b2a46e;
+    text-align: center;
+}
+
+.media-player {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
+.media-player-container {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.media-player-link {
+    cursor: pointer !important;
+}
+
+.gb-bullet-player {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+    background: white;
+    height: 95%;
+    overflow-y: scroll;
+}
+
+.gb-bullet-player-item {
+    cursor: pointer;
+}
+
+.gb-image-player-outter-div {}
+
+.gb-image-player-img {}
+
+.gb-bullet-player-outter-div {}
+
+.gb-video-player-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.gb-video-react-player {
+
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+body {
+    display: flex;
+}
+
+.App {
+    min-height: 100vh;
+}
+
+.App .body {
+    display: flex;
+    flex-direction: row;
+}
+
+.body {
+    flex-basis: 12em;
+    /* Default value of the element before distribuing the remaing space */
+    flex-grow: 0;
+    /* Defined the ability to groe */
+    flex-shrink: 0;
+    /* Defines the ability to shrink */
+    max-width: 12em;
+    order: -1;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+.media-player-container {
+    overflow: auto;
+    max-height: 90%;
+    font-family: "Open Sans", sans-serif;
+    background: white;
+}
+
+.media-player-scroll {
+    height: 1500px;
+}
+
+@media screen and (max-width: 1000px) {
+    .media-player-scroll h1 {
+        font-size: 15px;
+    }
+    .media-player-scroll p {
+        font-size: 12px;
+    }
+    .media-player-scroll li {
+        font-size: 12px;
+    }
+}
+
+@media screen and (max-width: 451px) {
+    .media-player {
+        position: relative;
+        zoom: 90%;
+        height: 94% !important;
+        width: 95% !important;
+        background-repeat: no-repeat;
+        margin-top: 10px;
+        margin-left: 10px;
+        margin-right: -40px;
+    }
+    .gb-markdown-player-quality {
+        bottom: -1px;
+        left: -3px;
+    }
+}
+
+@media screen and (min-width: 451px) {
+    .media-player {
+        position: relative;
+        zoom: 90%;
+        height: 100% !important;
+        width: 95% !important;
+        background-repeat: no-repeat;
+        margin-top: 10px;
+        margin-left: 20px;
+        margin-right: -40px;
+    }
+}

packages/default.gbtheme/css/ChatPane.css

@@ -0,0 +1,47 @@
+.webchat > div {
+  height: 100%;
+  width: 100%;
+}
+
+.webchat {
+  background-color: white !important;
+  left: 57%;
+  right: 0%;
+  top: 0;
+  bottom: 0;
+  overflow: auto !important;
+}
+
+@media screen and (max-width: 1000px) {
+  .webchat {
+    display: inline-block !important;
+    width: 96% !important;
+    height: 57% !important;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    left: 50%;
+    top: 41%;
+
+    position: absolute;
+    margin-left: -48%;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .webchat {
+    display: inline-block !important;
+    width: 50% !important;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    top: 1% !important;
+
+    height: 96%;
+    position: absolute;
+    right: 0;
+    margin-left: -8%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-bottom: 4px solid #4f4f4f;
+  }
+}

packages/default.gbtheme/css/Content.css

@@ -0,0 +1,18 @@
+.body .container { padding: 1em;width: 100%;height: 100% }
+
+.body .ms-Breadcrumb {
+    margin-bottom: 1em;
+    margin-top: 0;
+}
+
+.body .selection {
+    height: calc(100vh - 16.5em);
+    overflow-x: auto;
+}
+
+.body .selection .selection-item {
+    display: flex;
+    padding: 0.5em;
+}
+
+.body .selection .selection-item .name { margin-left: 1em; }

packages/default.gbtheme/css/Footer.css

@@ -0,0 +1,8 @@
+.footer {
+    align-items: center;
+    background-color: #450a64;
+    display: flex;
+    justify-content: center;
+}
+
+.footer-container { color: white; }

packages/default.gbtheme/css/GifPlayer.css

@@ -0,0 +1,31 @@
+@media screen and (max-width: 1000px) {
+    .player {
+        width: 93% !important;
+        height: 26% !important;
+        border: 7px solid #6c6c6c;
+        position: absolute;
+        top: 9%;
+        left: 50%;
+        margin-left: -48%;
+        background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .player {
+        display: inline-block;
+        width: 46% !important;
+        height: 81% !important;
+        border: 7px solid #6c6c6c;
+        background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        position: absolute;
+        left: 1%;
+        top: 15%;
+    }
+}

packages/default.gbtheme/css/MediaPlayer.css

@@ -0,0 +1,7 @@
+.media { 
+    margin-top: 20px; 
+        height: 280px !important;
+    width: 200px !important;
+
+    }
+

packages/default.gbtheme/css/NavBar.css

@@ -0,0 +1,22 @@
+.NavBar {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.2em 0.5em;
+    border-bottom-width: 1px;
+    color:black;
+    height: 100%;
+}
+
+/*
+.logo {
+    padding-top: 4em;
+}
+*/
+
+.NavBar .searchbox { width: 20em; }
+
+.NavBar .searchbox .ms-SearchBox {
+    background-color: white;
+    margin-bottom: 0;
+}

packages/default.gbtheme/css/SidebarMenu.css

@@ -0,0 +1,206 @@
+.ms-Nav {
+    background: #222;
+    color: white;
+    margin-top: 20px;
+}
+
+.ms-Nav-link {
+    color: white !important;
+    background-color: #222222 !important;
+}
+
+.ms-Nav-link a:active {
+    border-right: 2px solid white;
+}
+
+.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
+    background: #222222 !important;
+}
+
+.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton,
+.ms-Nav-compositeLink.is-selected a {
+    padding-left: 70px !important;
+}
+
+html[dir="ltr"] .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
+html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
+    border-left: none !important;
+}
+
+@media screen and (max-width: 419px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .tittleSideBarMenu {
+        display: none;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 13px;
+        display: inline;
+        margin-right: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -23px;
+        height: 22px;
+        width: 300px;
+        left: 50%;
+        margin-left: -150px;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+@media screen and (min-width: 520px) and (max-width:1000px) {
+    .tittleSideBarMenu {
+        display: none;
+    }
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-image: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/bot-logo.png");
+        background-position: 2px 2px;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        width: 416px;
+        left: 100px !important;
+        margin-left: 0px !important;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+    .iconMenu {
+        color: #d1d1d1;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+}
+
+@media screen and (min-width: 420px) and (max-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .tittleSideBarMenu {
+        display: none;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 14px;
+        display: inline;
+        margin-right: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        width: 416px;
+        left: 50%;
+        margin-left: -208px;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+
+@media screen and (min-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 13%;
+        position: absolute;
+        top: 1%;
+        left: 1%;
+        width: 46% !important;
+        border-right: 14px solid #19baee !important;
+    }
+
+    .tittleSideBarMenu {
+        color: white;
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 14px;
+        text-align: center;
+        margin-right: 20px;
+        margin-left: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        width: 520px;
+        display: inline-flex;
+        position: absolute;
+        left: 50%;
+        margin-left: -249px;
+        bottom: 10px;
+        height: 22px;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+@media screen and (max-height: 684px) {
+    .tittleSideBarMenu {
+        display: none;
+    }
+}
+
+
+
+.iconText:hover {
+    cursor: pointer;
+
+}

packages/default.gbtheme/css/index.css

@@ -0,0 +1,41 @@
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+
+
+/** Main Layout rules */
+
+.App { min-height: 100vh; }
+
+.App {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
+
+.App .body {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+}
+
+.body .sidebar { order: -1; }
+
+.body .content { flex: 1; }
+
+.body .sidebar {
+    flex: 0 0 12em;
+    max-width: 12em;
+}
+
+.App .header { height: 4em; }
+
+.App .footer { height: 4em; }
+
+/** Text */
+
+.text-red { color: red; }

packages/default.gbtheme/css/webchat-style.json

@@ -0,0 +1,50 @@
+{
+  "accent": "Red",
+  "avatarSize": 40,
+
+  "backgroundColor": "White",
+
+  "bubbleBackground": "White",
+  "bubbleBorder": "solid 1px #E6E6E6",
+  "bubbleBorderRadius": 2,
+  "bubbleFromUserBackground": "White",
+  "bubbleFromUserBorder": "solid 1px #E6E6E6",
+  "bubbleFromUserBorderRadius": 2,
+  "bubbleFromUserTextColor": "Black",
+  "bubbleImageHeight": 240,
+  "bubbleMaxWidth": 480,
+  "bubbleMinHeight": 40,
+  "bubbleMinWidth": 250,
+  "bubbleTextColor": "Black",
+
+  "hideSendBox": false,
+
+  "microphoneButtonColorOnDictate": "#F33",
+
+  "paddingRegular": 10,
+  "paddingWide": 20,
+
+  "sendBoxButtonColor": "#999",
+  "sendBoxButtonColorOnDisabled": "#CCC",
+  "sendBoxButtonColorOnFocus": "#333",
+  "sendBoxButtonColorOnHover": "#333",
+
+  "sendBoxHeight": 40,
+
+  "showSpokenText": false,
+
+  "suggestedActionBackground": "White",
+  "suggestedActionBorder": "solid 2px",
+  "suggestedActionBorderRadius": 0,
+  "suggestedActionDisabledBackground": "White",
+  "suggestedActionDisabledBorder": "solid 2px #E6E6E6",
+  "suggestedActionHeight": 40,
+  "transcriptOverlayButtonBackground": "rgba(0, 0, 0, .6)",
+  "transcriptOverlayButtonBackgroundOnFocus": "rgba(0, 0, 0, .8)",
+  "transcriptOverlayButtonBackgroundOnHover": "rgba(0, 0, 0, .8)",
+  "transcriptOverlayButtonColor": "White",
+  "transcriptOverlayButtonColorOnFocus": "White",
+  "transcriptOverlayButtonColorOnHover": "White",
+
+  "videoHeight": 270
+}

packages/default.gbtheme/package.json

@@ -0,0 +1,7 @@
+{
+    "version": "1.0.0",
+    "description": "Default General Bots theme.",
+    "authors": "pragmatismo.io",
+    "license": "AGPL-3.0"
+
+}

templates/default.gbai/default.gbtheme/css/App.css

@@ -0,0 +1,171 @@
+body {
+    background-color: #dadada !important;
+}
+
+.loader {
+    opacity: 1 !important;
+    filter: opacity(100%);
+}
+
+
+.gb-quality-button-yes {
+    width: 54px;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: green;
+    color: white;
+    padding: 2px;
+    cursor: pointer;
+    transition: 0.9s;
+    transition-delay: 0.3s;
+    border: none;
+}
+
+.gb-quality-button-no {
+    width: 54px;
+    text-decoration: none;
+    text-transform: uppercase;
+    background-color: red;
+    color: white;
+    padding: 2px;
+    cursor: pointer;
+    transition: 0.9s;
+    transition-delay: 0.3s;
+    border: none;
+}
+
+.gb-markdown-player-quality {
+    background-color: #f5e4a8;
+    padding: 4px;
+    position: absolute;
+    bottom: 14px;
+    left: -9px;
+    width: 100%;
+    border-radius: 5px;
+    color: #52514e;
+    border: 1px solid #b2a46e;
+    text-align: center;
+}
+
+.media-player {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+}
+
+.media-player-container {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.media-player-link {
+    cursor: pointer !important;
+}
+
+.gb-bullet-player {
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
+    background: white;
+    height: 95%;
+    overflow-y: scroll;
+}
+
+.gb-bullet-player-item {
+    cursor: pointer;
+}
+
+.gb-image-player-outter-div {}
+
+.gb-image-player-img {}
+
+.gb-bullet-player-outter-div {}
+
+.gb-video-player-wrapper {
+    width: 100%;
+    height: 100%;
+}
+
+.gb-video-react-player {
+
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+}
+
+body {
+    display: flex;
+}
+
+.App {
+    min-height: 100vh;
+}
+
+.App .body {
+    display: flex;
+    flex-direction: row;
+}
+
+.body {
+    flex-basis: 12em;
+    /* Default value of the element before distribuing the remaing space */
+    flex-grow: 0;
+    /* Defined the ability to groe */
+    flex-shrink: 0;
+    /* Defines the ability to shrink */
+    max-width: 12em;
+    order: -1;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+.media-player-container {
+    overflow: auto;
+    max-height: 90%;
+    font-family: "Open Sans", sans-serif;
+    background: white;
+}
+
+.media-player-scroll {
+    height: 1500px;
+}
+
+@media screen and (max-width: 1000px) {
+    .media-player-scroll h1 {
+        font-size: 15px;
+    }
+    .media-player-scroll p {
+        font-size: 12px;
+    }
+    .media-player-scroll li {
+        font-size: 12px;
+    }
+}
+
+@media screen and (max-width: 451px) {
+    .media-player {
+        position: relative;
+        zoom: 90%;
+        height: 94% !important;
+        width: 95% !important;
+        background-repeat: no-repeat;
+        margin-top: 10px;
+        margin-left: 10px;
+        margin-right: -40px;
+    }
+    .gb-markdown-player-quality {
+        bottom: -1px;
+        left: -3px;
+    }
+}
+
+@media screen and (min-width: 451px) {
+    .media-player {
+        position: relative;
+        zoom: 90%;
+        height: 100% !important;
+        width: 95% !important;
+        background-repeat: no-repeat;
+        margin-top: 10px;
+        margin-left: 20px;
+        margin-right: -40px;
+    }
+}

templates/default.gbai/default.gbtheme/css/ChatPane.css

@@ -0,0 +1,47 @@
+.webchat > div {
+  height: 100%;
+  width: 100%;
+}
+
+.webchat {
+  background-color: white !important;
+  left: 57%;
+  right: 0%;
+  top: 0;
+  bottom: 0;
+  overflow: auto !important;
+}
+
+@media screen and (max-width: 1000px) {
+  .webchat {
+    display: inline-block !important;
+    width: 96% !important;
+    height: 57% !important;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    left: 50%;
+    top: 41%;
+
+    position: absolute;
+    margin-left: -48%;
+  }
+}
+
+@media screen and (min-width: 1000px) {
+  .webchat {
+    display: inline-block !important;
+    width: 50% !important;
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    top: 1% !important;
+
+    height: 96%;
+    position: absolute;
+    right: 0;
+    margin-left: -8%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    border-bottom: 4px solid #4f4f4f;
+  }
+}

templates/default.gbai/default.gbtheme/css/Content.css

@@ -0,0 +1,18 @@
+.body .container { padding: 1em;width: 100%;height: 100% }
+
+.body .ms-Breadcrumb {
+    margin-bottom: 1em;
+    margin-top: 0;
+}
+
+.body .selection {
+    height: calc(100vh - 16.5em);
+    overflow-x: auto;
+}
+
+.body .selection .selection-item {
+    display: flex;
+    padding: 0.5em;
+}
+
+.body .selection .selection-item .name { margin-left: 1em; }

templates/default.gbai/default.gbtheme/css/Footer.css

@@ -0,0 +1,8 @@
+.footer {
+    align-items: center;
+    background-color: #450a64;
+    display: flex;
+    justify-content: center;
+}
+
+.footer-container { color: white; }

templates/default.gbai/default.gbtheme/css/GifPlayer.css

@@ -0,0 +1,31 @@
+@media screen and (max-width: 1000px) {
+    .player {
+        width: 93% !important;
+        height: 26% !important;
+        border: 7px solid #6c6c6c;
+        position: absolute;
+        top: 9%;
+        left: 50%;
+        margin-left: -48%;
+        background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+    }
+}
+
+@media screen and (min-width: 1000px) {
+    .player {
+        display: inline-block;
+        width: 46% !important;
+        height: 81% !important;
+        border: 7px solid #6c6c6c;
+        background: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/general-bot-background.jpg"), WHITE;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position: center;
+        position: absolute;
+        left: 1%;
+        top: 15%;
+    }
+}

templates/default.gbai/default.gbtheme/css/MediaPlayer.css

@@ -0,0 +1,7 @@
+.media { 
+    margin-top: 20px; 
+        height: 280px !important;
+    width: 200px !important;
+
+    }
+

templates/default.gbai/default.gbtheme/css/NavBar.css

@@ -0,0 +1,22 @@
+.NavBar {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: 0.2em 0.5em;
+    border-bottom-width: 1px;
+    color:black;
+    height: 100%;
+}
+
+/*
+.logo {
+    padding-top: 4em;
+}
+*/
+
+.NavBar .searchbox { width: 20em; }
+
+.NavBar .searchbox .ms-SearchBox {
+    background-color: white;
+    margin-bottom: 0;
+}

templates/default.gbai/default.gbtheme/css/SidebarMenu.css

@@ -0,0 +1,206 @@
+.ms-Nav {
+    background: #222;
+    color: white;
+    margin-top: 20px;
+}
+
+.ms-Nav-link {
+    color: white !important;
+    background-color: #222222 !important;
+}
+
+.ms-Nav-link a:active {
+    border-right: 2px solid white;
+}
+
+.ms-Nav-compositeLink .ms-Nav-chevronButton.ms-Nav-chevronButton--link {
+    background: #222222 !important;
+}
+
+.ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton,
+.ms-Nav-compositeLink.is-selected a {
+    padding-left: 70px !important;
+}
+
+html[dir="ltr"] .ms-Nav-compositeLink.is-selected .ms-Nav-chevronButton:after,
+html[dir="ltr"] .ms-Nav-compositeLink.is-selected a:after {
+    border-left: none !important;
+}
+
+@media screen and (max-width: 419px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+
+    .tittleSideBarMenu {
+        display: none;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 13px;
+        display: inline;
+        margin-right: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -23px;
+        height: 22px;
+        width: 300px;
+        left: 50%;
+        margin-left: -150px;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+@media screen and (min-width: 520px) and (max-width:1000px) {
+    .tittleSideBarMenu {
+        display: none;
+    }
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-image: url("../../../../Archive/ProjectKBot.gbai/ProjectKBot.gbtheme/images/bot-logo.png");
+        background-position: 2px 2px;
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        width: 416px;
+        left: 100px !important;
+        margin-left: 0px !important;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+    .iconMenu {
+        color: #d1d1d1;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+}
+
+@media screen and (min-width: 420px) and (max-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 8%;
+        width: 100% !important;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
+    .tittleSideBarMenu {
+        display: none;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 14px;
+        display: inline;
+        margin-right: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        position: absolute;
+        top: 50%;
+        margin-top: -11px;
+        height: 22px;
+        width: 416px;
+        left: 50%;
+        margin-left: -208px;
+        text-align: center;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+
+@media screen and (min-width: 1000px) {
+    .sidebar {
+        display: inline-block !important;
+        background-color: green !important;
+        height: 13%;
+        position: absolute;
+        top: 1%;
+        left: 1%;
+        width: 46% !important;
+        border-right: 14px solid #19baee !important;
+    }
+
+    .tittleSideBarMenu {
+        color: white;
+        text-align: center;
+        margin-top: 10px;
+    }
+
+    .iconMenu {
+        color: #d1d1d1;
+        font-size: 14px;
+        text-align: center;
+        margin-right: 20px;
+        margin-left: 20px;
+    }
+    .iconMenu:hover {
+        color: white;
+    }
+
+    .IconsMenu {
+        width: 520px;
+        display: inline-flex;
+        position: absolute;
+        left: 50%;
+        margin-left: -249px;
+        bottom: 10px;
+        height: 22px;
+        font-family: "Open Sans", sans-serif;
+    }
+
+    .iconText {
+        cursor: pointer;
+    }
+}
+
+@media screen and (max-height: 684px) {
+    .tittleSideBarMenu {
+        display: none;
+    }
+}
+
+
+
+.iconText:hover {
+    cursor: pointer;
+
+}

templates/default.gbai/default.gbtheme/css/index.css

@@ -0,0 +1,41 @@
+body {
+    font-family: 'Open Sans', sans-serif;
+    font-size: 14px;
+    margin: 0;
+    padding: 0;
+}
+
+
+
+/** Main Layout rules */
+
+.App { min-height: 100vh; }
+
+.App {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+}
+
+.App .body {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+}
+
+.body .sidebar { order: -1; }
+
+.body .content { flex: 1; }
+
+.body .sidebar {
+    flex: 0 0 12em;
+    max-width: 12em;
+}
+
+.App .header { height: 4em; }
+
+.App .footer { height: 4em; }
+
+/** Text */
+
+.text-red { color: red; }

templates/default.gbai/default.gbtheme/css/webchat-style.json

@@ -0,0 +1,50 @@
+{
+  "accent": "Red",
+  "avatarSize": 40,
+
+  "backgroundColor": "White",
+
+  "bubbleBackground": "White",
+  "bubbleBorder": "solid 1px #E6E6E6",
+  "bubbleBorderRadius": 2,
+  "bubbleFromUserBackground": "White",
+  "bubbleFromUserBorder": "solid 1px #E6E6E6",
+  "bubbleFromUserBorderRadius": 2,
+  "bubbleFromUserTextColor": "Black",
+  "bubbleImageHeight": 240,
+  "bubbleMaxWidth": 480,
+  "bubbleMinHeight": 40,
+  "bubbleMinWidth": 250,
+  "bubbleTextColor": "Black",
+
+  "hideSendBox": false,
+
+  "microphoneButtonColorOnDictate": "#F33",
+
+  "paddingRegular": 10,
+  "paddingWide": 20,
+
+  "sendBoxButtonColor": "#999",
+  "sendBoxButtonColorOnDisabled": "#CCC",
+  "sendBoxButtonColorOnFocus": "#333",
+  "sendBoxButtonColorOnHover": "#333",
+
+  "sendBoxHeight": 40,
+
+  "showSpokenText": false,
+
+  "suggestedActionBackground": "White",
+  "suggestedActionBorder": "solid 2px",
+  "suggestedActionBorderRadius": 0,
+  "suggestedActionDisabledBackground": "White",
+  "suggestedActionDisabledBorder": "solid 2px #E6E6E6",
+  "suggestedActionHeight": 40,
+  "transcriptOverlayButtonBackground": "rgba(0, 0, 0, .6)",
+  "transcriptOverlayButtonBackgroundOnFocus": "rgba(0, 0, 0, .8)",
+  "transcriptOverlayButtonBackgroundOnHover": "rgba(0, 0, 0, .8)",
+  "transcriptOverlayButtonColor": "White",
+  "transcriptOverlayButtonColorOnFocus": "White",
+  "transcriptOverlayButtonColorOnHover": "White",
+
+  "videoHeight": 270
+}

templates/default.gbai/default.gbtheme/package.json

@@ -0,0 +1,7 @@
+{
+    "version": "1.0.0",
+    "description": "Default General Bots theme.",
+    "authors": "pragmatismo.io",
+    "license": "AGPL-3.0"
+
+}