Added all basic components and services

2019-01-31 02:05:59 +05:30
parent 1ae7addd72
commit 78e89209e9
56 changed files with 2104 additions and 149 deletions
--- a/angular.json
+++ b/angular.json
@@ -27,10 +27,10 @@
              "src/assets"
            ],
            "styles": [
-              "src/sass/styles.scss",
              "./node_modules/bootstrap/dist/css/bootstrap.css",
              "./node_modules/bootstrap/dist/css/bootstrap-grid.css",
-              "./node_modules/bootstrap/dist/css/bootstrap-reboot.css"
+              "./node_modules/bootstrap/dist/css/bootstrap-reboot.css",
+              "src/sass/styles.scss"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js",
--- a/package-lock.json
+++ b/package-lock.json
@@ -596,9 +596,9 @@
      "dev": true
    },
    "@types/selenium-webdriver": {
-      "version": "2.53.43",
-      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-2.53.43.tgz",
-      "integrity": "sha512-UBYHWph6P3tutkbXpW6XYg9ZPbTKjw/YC2hGG1/GEvWwTbvezBUv3h+mmUFw79T3RFPnmedpiXdOBbXX+4l0jg==",
+      "version": "3.0.14",
+      "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.14.tgz",
+      "integrity": "sha512-4GbNCDs98uHCT/OMv40qQC/OpoPbYn9XdXeTiFwHBBFO6eJhYEPUu2zDKirXSbHlvDV8oZ9l8EQ+HrEx/YS9DQ==",
      "dev": true
    },
    "@webassemblyjs/ast": {
@@ -876,9 +876,9 @@
      }
    },
    "adm-zip": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.4.tgz",
-      "integrity": "sha1-ph7VrmkFw66lizplfSUDMJEFJzY=",
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.13.tgz",
+      "integrity": "sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==",
      "dev": true
    },
    "after": {
@@ -1512,6 +1512,11 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
      "dev": true
    },
+    "bootstrap": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz",
+      "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q=="
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1638,6 +1643,15 @@
        "electron-to-chromium": "^1.3.47"
      }
    },
+    "browserstack": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/browserstack/-/browserstack-1.5.2.tgz",
+      "integrity": "sha512-+6AFt9HzhKykcPF79W6yjEUJcdvZOV0lIXdkORXMJftGrDl0OKWqRF4GHqpDNkxiceDT/uB7Fb/aDwktvXX7dg==",
+      "dev": true,
+      "requires": {
+        "https-proxy-agent": "^2.2.1"
+      }
+    },
    "buffer": {
      "version": "4.9.1",
      "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
@@ -7588,15 +7602,15 @@
      "dev": true
    },
    "protractor": {
-      "version": "5.3.2",
-      "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.3.2.tgz",
-      "integrity": "sha512-pw4uwwiy5lHZjIguxNpkEwJJa7hVz+bJsvaTI+IbXlfn2qXwzbF8eghW/RmrZwE2sGx82I8etb8lVjQ+JrjejA==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/protractor/-/protractor-5.4.2.tgz",
+      "integrity": "sha512-zlIj64Cr6IOWP7RwxVeD8O4UskLYPoyIcg0HboWJL9T79F1F0VWtKkGTr/9GN6BKL+/Q/GmM7C9kFVCfDbP5sA==",
      "dev": true,
      "requires": {
-        "@types/node": "^6.0.46",
        "@types/q": "^0.0.32",
-        "@types/selenium-webdriver": "~2.53.39",
+        "@types/selenium-webdriver": "^3.0.0",
        "blocking-proxy": "^1.0.0",
+        "browserstack": "^1.5.1",
        "chalk": "^1.1.3",
        "glob": "^7.0.3",
        "jasmine": "2.8.0",
@@ -7606,22 +7620,10 @@
        "saucelabs": "^1.5.0",
        "selenium-webdriver": "3.6.0",
        "source-map-support": "~0.4.0",
-        "webdriver-js-extender": "^1.0.0",
+        "webdriver-js-extender": "2.1.0",
        "webdriver-manager": "^12.0.6"
      },
      "dependencies": {
-        "@types/node": {
-          "version": "6.14.2",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.14.2.tgz",
-          "integrity": "sha512-JWB3xaVfsfnFY8Ofc9rTB/op0fqqTSqy4vBcVk1LuRJvta7KTX+D//fCkiTMeLGhdr2EbFZzQjC97gvmPilk9Q==",
-          "dev": true
-        },
-        "adm-zip": {
-          "version": "0.4.13",
-          "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.13.tgz",
-          "integrity": "sha512-fERNJX8sOXfel6qCBCMPvZLzENBEhZTzKqg6vrOW5pvoEaQuJhRU4ndTAh6lHOxn1I6jnz2NHra56ZODM751uw==",
-          "dev": true
-        },
        "ansi-styles": {
          "version": "2.2.1",
          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
@@ -9992,50 +9994,13 @@
      }
    },
    "webdriver-js-extender": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-1.0.0.tgz",
-      "integrity": "sha1-gcUzqeM9W/tZe05j4s2yW1R3dRU=",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/webdriver-js-extender/-/webdriver-js-extender-2.1.0.tgz",
+      "integrity": "sha512-lcUKrjbBfCK6MNsh7xaY2UAUmZwe+/ib03AjVOpFobX4O7+83BUveSrLfU0Qsyb1DaKJdQRbuU+kM9aZ6QUhiQ==",
      "dev": true,
      "requires": {
-        "@types/selenium-webdriver": "^2.53.35",
-        "selenium-webdriver": "^2.53.2"
-      },
-      "dependencies": {
-        "sax": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/sax/-/sax-0.6.1.tgz",
-          "integrity": "sha1-VjsZx8HeiS4Jv8Ty/DDjwn8JUrk=",
-          "dev": true
-        },
-        "selenium-webdriver": {
-          "version": "2.53.3",
-          "resolved": "https://registry.npmjs.org/selenium-webdriver/-/selenium-webdriver-2.53.3.tgz",
-          "integrity": "sha1-0p/1qVff8aG0ncRXdW5OS/vc4IU=",
-          "dev": true,
-          "requires": {
-            "adm-zip": "0.4.4",
-            "rimraf": "^2.2.8",
-            "tmp": "0.0.24",
-            "ws": "^1.0.1",
-            "xml2js": "0.4.4"
-          }
-        },
-        "tmp": {
-          "version": "0.0.24",
-          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.24.tgz",
-          "integrity": "sha1-1qXhmNFKmDXMby18PZ4wJCjIzxI=",
-          "dev": true
-        },
-        "xml2js": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.4.tgz",
-          "integrity": "sha1-MREBAAMAiuGSQOuhdJe1fHKcVV0=",
-          "dev": true,
-          "requires": {
-            "sax": "0.6.x",
-            "xmlbuilder": ">=1.0.0"
-          }
-        }
+        "@types/selenium-webdriver": "^3.0.0",
+        "selenium-webdriver": "^3.0.1"
      }
    },
    "webpack": {
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -1,12 +1,11 @@
-
-
-:host {
+.wrapper {
    /* height: 100%; */
    display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: stretch;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
-}
+}
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,2 +1,4 @@
-<app-sidebar></app-sidebar>
-
+<div class="wrapper">
+    <app-sidebar></app-sidebar>
+    <app-content></app-content>
+</div>
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -4,17 +4,42 @@ import { FormsModule } from '@angular/forms';

 import { AppComponent } from './app.component';
 import { SidebarComponent } from './components/l2/sidebar/sidebar.component';
+import { TextFieldComponent } from './components/l1/text-field/text-field.component';
+import { ButtonComponent } from './components/l1/button/button.component';
+import { CommandPromptComponent } from './components/l2/content/command-prompt/command-prompt.component';
+import { ContentComponent } from './components/l2/content/content.component';
+import { DomOpsService } from './services/dom/dom-ops.service';
+import { JsonReaderService } from './services/io/json-reader.service';
+import { PrimaryContainerComponent } from './components/l2/content/primary-container/primary-container.component';
+import { ModalComponent } from './components/l2/content/modal/modal.component';
+import { MessageComponent } from './components/l2/content/primary-container/message/message.component';
+import { WidgetComponent } from './components/l2/content/primary-container/widget/widget.component';
+import { CardComponent } from './components/l2/content/primary-container/card/card.component';
+import { RecastOpsService } from './services/recast/recast-ops.service';
+import { GithubOpsService } from './services/github/github-ops.service';
+import { PersistenceOpsService } from './services/io/persistence-ops.service';
+import { IntentBoxComponent } from './components/l2/content/primary-container/intent-box/intent-box.component';

@NgModule({
  declarations: [
    AppComponent,
-    SidebarComponent
+    SidebarComponent,
+    TextFieldComponent,
+    ButtonComponent,
+    CommandPromptComponent,
+    ContentComponent,
+    PrimaryContainerComponent,
+    ModalComponent,
+    MessageComponent,
+    WidgetComponent,
+    CardComponent,
+    IntentBoxComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
-  providers: [],
+  providers: [DomOpsService, JsonReaderService, RecastOpsService, GithubOpsService, PersistenceOpsService],
  bootstrap: [AppComponent]
 })
 export class AppModule { }
--- a/src/app/components/l1/button/button.component.html
+++ b/src/app/components/l1/button/button.component.html
@@ -0,0 +1,3 @@
+<p>
+  button works!
+</p>
--- a/src/app/components/l1/button/button.component.scss
+++ b/src/app/components/l1/button/button.component.scss
--- a/src/app/components/l1/button/button.component.ts
+++ b/src/app/components/l1/button/button.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l1/text-field/text-field.component.html
+++ b/src/app/components/l1/text-field/text-field.component.html
@@ -0,0 +1 @@
+<input type="{{type}}" id="textFieldId" placeholder="{{placeHolderText}}">
--- a/src/app/components/l1/text-field/text-field.component.scss
+++ b/src/app/components/l1/text-field/text-field.component.scss
--- a/src/app/components/l1/text-field/text-field.component.ts
+++ b/src/app/components/l1/text-field/text-field.component.ts
@@ -0,0 +1,25 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-text-field',
+  templateUrl: './text-field.component.html',
+  styleUrls: ['./text-field.component.scss']
+})
+export class TextFieldComponent implements OnInit {
+
+  @Input() textFieldId: String;
+  @Input() placeHolderText: String;
+  @Input() disabled: boolean;
+  @Input() maxLength: String;
+  @Input() pattern: String;
+  @Input() readOnly: boolean;
+  @Input() type: String;
+  @Input() value: String;
+  @Input() classes: String;
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/command-prompt/command-prompt.component.html
+++ b/src/app/components/l2/content/command-prompt/command-prompt.component.html
@@ -0,0 +1,30 @@
+<div id="header" class="headerprompt">
+    <div class="prompt">
+        <p class="promptext">$_</p>
+    </div>
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container-fluid">
+            <input type="text" class="form-control" placeholder="What you need..." name="command" id="command" (keyup)="initiateDomOpsOnEnter($event)">
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="nav navbar-nav ml-auto">
+                    <li id="btnFavorites" class="nav-item">
+                        <a class="nav-link" href="#">
+                            <i class="far fa-star" (mouseenter)="toggleClass($event)" (mouseleave)="toggleClass($event)"></i>
+                        </a>
+                    </li>
+                    <li id="btnClearCommand" class="nav-item">
+                        <a class="nav-link" href="#">
+                            <i class="far fa-trash-alt" (mouseenter)="toggleClass($event)" (mouseleave)="toggleClass($event)"></i>
+                        </a>
+                    </li>
+                    <li id="btnFireCommand" class="nav-item">
+                        <a class="nav-link" href="#">
+                            <i class="far fa-paper-plane" (mouseenter)="toggleClass($event)" (mouseleave)="toggleClass($event)"></i>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <input type="hidden" id="intentHidden" value="createissue">
+</div>
--- a/src/app/components/l2/content/command-prompt/command-prompt.component.scss
+++ b/src/app/components/l2/content/command-prompt/command-prompt.component.scss
@@ -0,0 +1,441 @@
+@import "./src/sass/_variables.scss";
+
+:host {
+    height: 100%;
+}
+
+a,
+a:hover,
+a:focus {
+    color: inherit;
+    text-decoration: none;
+    transition: all 0.3s;
+}
+
+.navbar {
+    padding: 15px 10px;
+    background: #fff;
+    border: none;
+    border-radius: 0 5px 5px 0;
+    margin-bottom: 40px;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.navbar-btn {
+    box-shadow: none;
+    outline: none !important;
+    border: none;
+}
+
+.line {
+    width: 100%;
+    height: 1px;
+    border-bottom: 1px dashed #ddd;
+    margin: 20px 0;
+}
+
+i,
+span {
+    display: inline-block;
+}
+
+/* ---------------------------------------------------
+    SIDEBAR STYLE
+----------------------------------------------------- */
+
+.wrapper {
+    display: flex;
+    align-items: stretch;
+    height: 100%;
+}
+
+#sidebar {
+    min-width: 250px;
+    max-width: 250px;
+    background: $theme-supplementer;
+    color: $themeColor-Dark;
+    transition: all 0.3s;
+}
+
+#sidebar.active {
+    min-width: 80px;
+    max-width: 80px;
+    text-align: center;
+}
+
+#sidebar.active .sidebar-header h3,
+#sidebar.active .CTAs {
+    display: none;
+}
+
+.sidebar-header h3 {
+  display: inline;
+  padding-left: 0.6em;
+  vertical-align: middle;
+}
+
+#sidebar.active .sidebar-header strong {
+    display: block;
+}
+
+#sidebar ul li a {
+    text-align: left;
+}
+
+#sidebar.active ul li a {
+    padding: 20px 10px;
+    text-align: center;
+    font-size: 0.85em;
+}
+
+#sidebar.active ul li a i {
+    margin-right: 0;
+    display: block;
+    font-size: 1.8em;
+    margin-bottom: 5px;
+}
+
+#sidebar.active ul ul a {
+    padding: 10px !important;
+}
+
+#sidebar.active .dropdown-toggle::after {
+    top: auto;
+    bottom: 10px;
+    right: 50%;
+    -webkit-transform: translateX(50%);
+    -ms-transform: translateX(50%);
+    transform: translateX(50%);
+}
+
+#sidebar .sidebar-header {
+    padding: 20px;
+    background:$themeColor-Dark;
+}
+
+#sidebar .sidebar-header strong {
+    display: none;
+    font-size: 1.8em;
+}
+
+#sidebar ul.components {
+    padding: 20px 0;
+    border-bottom: 3px solid $themeColor-Dark;
+}
+
+#sidebar ul li a {
+    padding: 10px;
+    font-size: 1.1em;
+    display: block;
+}
+
+#sidebar ul li a:hover {
+    color: #7386D5;
+    background: #fff;
+}
+
+#sidebar ul li a i {
+    margin-right: 10px;
+}
+
+#sidebar ul li.active>a,
+a[aria-expanded="true"] {
+    color: $theme-supplementer;
+    background:$themeColor-Dark;
+}
+
+a[data-toggle="collapse"] {
+    position: relative;
+}
+
+.dropdown-toggle::after {
+    display: block;
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+}
+
+ul ul a {
+    font-size: 0.9em !important;
+    padding-left: 30px !important;
+    background: white;
+    font-weight: bolder;
+}
+
+ul.CTAs {
+    padding: 20px;
+}
+
+ul.CTAs a {
+    text-align: center;
+    font-size: 0.9em !important;
+    display: block;
+    border-radius: 5px;
+    margin-bottom: 5px;
+}
+
+a.download {
+    background: #fff;
+    color: #7386D5;
+}
+
+a.article,
+a.article:hover {
+    background: #6d7fcc !important;
+    color: #fff !important;
+}
+
+/* ---------------------------------------------------
+    CONTENT STYLE
+----------------------------------------------------- */
+
+#content {
+    width: 100%;
+    padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
+}
+
+/* ---------------------------------------------------
+    MEDIAQUERIES
+----------------------------------------------------- */
+
+@media (max-width: 768px) {
+    #sidebar {
+        min-width: 80px;
+        max-width: 80px;
+        text-align: center;
+        margin-left: -80px !important;
+    }
+    .dropdown-toggle::after {
+        top: auto;
+        bottom: 10px;
+        right: 50%;
+        -webkit-transform: translateX(50%);
+        -ms-transform: translateX(50%);
+        transform: translateX(50%);
+    }
+    #sidebar.active {
+        margin-left: 0 !important;
+    }
+    #sidebar .sidebar-header h3,
+    #sidebar .CTAs {
+        display: none;
+    }
+    #sidebar .sidebar-header strong {
+        display: block;
+    }
+    #sidebar ul li a {
+        padding: 20px 10px;
+    }
+    #sidebar ul li a span {
+        font-size: 0.85em;
+    }
+    #sidebar ul li a i {
+        margin-right: 0;
+        display: block;
+    }
+    #sidebar ul ul a {
+        padding: 10px !important;
+    }
+    #sidebar ul li a i {
+        font-size: 1.3em;
+    }
+    #sidebar {
+        margin-left: 0;
+    }
+    #sidebarCollapse span {
+        display: none;
+    }
+    .text-muted {
+        color: #bcb !important;
+    }
+}
+
+@media(min-width: 576px) {
+    .card-group>.card:first-child {
+        border-top-right-radius: .25rem;
+        border-bottom-right-radius: .25rem;
+    }
+    .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
+        border-radius: .25rem;
+    }
+    .card-group>.card:last-child {
+        border-top-left-radius: .25rem;
+        border-bottom-left-radius: .25rem;
+    }
+}
+/* -------------------------------------------------
+ADDITIONS
+--------------------------------------------------*/
+.hide {
+  display: none;
+}
+
+.prompt {
+  display: flex;
+  width: 2em;
+  border-right: 1px solid #c99034;
+  background-color: #f5d38b;
+  width: 4%;
+  margin-bottom: 40px;
+  border-radius: 4px 0 0 4px;
+}
+
+.promptext {
+  animation:blinkingText 0.8s infinite;
+  color: #975f04;
+  text-align: center;
+  line-height: 2em;
+  font: 1.5em bolder;
+  margin: auto;
+}
+
+.good {
+    animation: anim .3s ease-in-out;
+}
+
+.repoLink {
+    color: #000;
+    font-weight: bolder;
+    text-decoration: underline;
+}
+
+.headerprompt {
+  display: flex;
+  width: 100%;
+}
+
+.logotext {
+  color: $theme-supplementer;
+}
+
+nav div.collapse li a.nav-link i.far {
+  color: $theme-supplementer;
+  font-size: 1.8em;
+  padding: 0.2em;
+}
+
+#loading-img {
+    background: url(http://preloaders.net/preloaders/360/Velocity.gif) center center no-repeat;
+    height: 100%;
+    z-index: 20;
+}
+
+.overlay {
+    background: #e9e9e9;
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    opacity: 0.5;
+}
+
+.loader {
+    border: 0px solid #f3f3f3;
+    border-radius: 50%;
+    border-top: 2px solid #3498db;
+    border-right: 2px solid #3498db;
+    width: 20px;
+    height: 20px;
+    -webkit-animation: spin 2s linear infinite; /* Safari */
+    animation: spin 2s linear infinite;
+  }
+.card:not(.widget) {
+    background: linear-gradient(to right, white, lightblue)
+}
+.light-red {
+    // background:linear-gradient(white, lightblue);
+    background: linear-gradient(to right, white, #dfc99a)
+}
+  
+// f3d98c
+.featureRequest {
+    background-color : #007bff;
+    color: white;
+    font-size: 1.5em;
+    padding: 10px 20px;
+    border-radius: 30px;
+}
+  
+  #featureRequest {
+    position: fixed;
+    bottom: 2em;
+    right: 2.5em;
+  }
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@keyframes anim {
+    0% {
+      display: none;
+      opacity: 0;
+    }
+    1% {
+      display: block;
+      opacity: 0;
+      transform: scale(0);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+}
+@keyframes blinkingText {
+  0%{     color: #000;    }
+  49%{    color: transparent; }
+  50%{    color: transparent; }
+  99%{    color:transparent;  }
+  100%{   color: #000;    }
+}
+
+/* --------------------------------------------------
+  OVERRIDES
+  --------------------------------------------------*/
+  .btn:not(.featureRequest) {
+    background-color: $theme-supplementer;
+    color: $themeColor-Dark
+  }
+
+  #header .navbar {
+    width: 96%;
+  }
+
+  .navbar-form {
+    width: 88%;
+  }
+
+  .form-control {
+    padding: .6rem 1em;
+  }
+
+  .container-fluid {
+    padding-left: 0.3em;
+  }
+
+  .card-group {
+    flex-direction:column;
+  }
+
+  #command.form-control {
+      width: 87%;
+  }
+
+  .ml-auto {
+      margin-left: 0!important;
+  }
+
+  .btn-info {
+      border-color: orange;
+  }
+
+  .btn-info:hover {
+    border-color: orange;
+    opacity: 1
+}
--- a/src/app/components/l2/content/command-prompt/command-prompt.component.ts
+++ b/src/app/components/l2/content/command-prompt/command-prompt.component.ts
@@ -0,0 +1,39 @@
+import { Component, OnInit } from '@angular/core';
+import { RecastOpsService } from 'src/app/services/recast/recast-ops.service';
+
+import * as $ from 'node_modules/jquery/dist/jquery';
+import { DomOpsService } from 'src/app/services/dom/dom-ops.service';
+
+@Component({
+  selector: 'app-command-prompt',
+  templateUrl: './command-prompt.component.html',
+  styleUrls: ['./command-prompt.component.scss']
+})
+export class CommandPromptComponent implements OnInit {
+
+  constructor(private recastOpsService: RecastOpsService, private domOpsService: DomOpsService) { }
+
+  ngOnInit() { }
+
+  toggleClass(event: MouseEvent) {
+    $(event.target).toggleClass('fas');
+  }
+
+  initiateDomOpsOnEnter(event: any) {
+    const code = (event.keyCode ? event.keyCode : event.which);
+    if (code === 13) {
+      $('#widgets').children().addClass('hide');
+      $('#successAlert').addClass('hide');
+      $('#dangerAlert').addClass('hide');
+      $('#intentBox').addClass('hide');
+      const command = event.target.value;
+      if (command) {
+        const text = { text: command };
+        this.recastOpsService.getAndCallProcessIntent(command, text);
+      } else {
+        // this.domOpsService.showEmptyCommandMessage('Please type some relevant words in the command box.');
+      }
+    }
+  }
+
+}
--- a/src/app/components/l2/content/content.component.html
+++ b/src/app/components/l2/content/content.component.html
@@ -0,0 +1 @@
+<app-command-prompt></app-command-prompt>
--- a/src/app/components/l2/content/content.component.scss
+++ b/src/app/components/l2/content/content.component.scss
@@ -0,0 +1,11 @@
+:host {
+    padding: 20px;
+    width: 100%;
+}
+
+#content {
+    // width: 100%;
+    // padding: 20px;
+    min-height: 100vh;
+    transition: all 0.3s;
+}
--- a/src/app/components/l2/content/content.component.ts
+++ b/src/app/components/l2/content/content.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-content',
+  templateUrl: './content.component.html',
+  styleUrls: ['./content.component.scss']
+})
+export class ContentComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/modal/modal.component.html
+++ b/src/app/components/l2/content/modal/modal.component.html
@@ -0,0 +1,3 @@
+<p>
+  modal works!
+</p>
--- a/src/app/components/l2/content/modal/modal.component.scss
+++ b/src/app/components/l2/content/modal/modal.component.scss
--- a/src/app/components/l2/content/modal/modal.component.spec.ts
+++ b/src/app/components/l2/content/modal/modal.component.spec.ts
@@ -1,20 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';

-import { SidebarComponent } from './sidebar.component';
+import { ModalComponent } from './modal.component';

-describe('SidebarComponent', () => {
-  let component: SidebarComponent;
-  let fixture: ComponentFixture<SidebarComponent>;
+describe('ModalComponent', () => {
+  let component: ModalComponent;
+  let fixture: ComponentFixture<ModalComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
-      declarations: [ SidebarComponent ]
+      declarations: [ ModalComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
-    fixture = TestBed.createComponent(SidebarComponent);
+    fixture = TestBed.createComponent(ModalComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });
--- a/src/app/components/l2/content/modal/modal.component.ts
+++ b/src/app/components/l2/content/modal/modal.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-modal',
+  templateUrl: './modal.component.html',
+  styleUrls: ['./modal.component.scss']
+})
+export class ModalComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/primary-container/card/card.component.html
+++ b/src/app/components/l2/content/primary-container/card/card.component.html
@@ -0,0 +1,3 @@
+<p>
+  card works!
+</p>
--- a/src/app/components/l2/content/primary-container/card/card.component.scss
+++ b/src/app/components/l2/content/primary-container/card/card.component.scss
--- a/src/app/components/l2/content/primary-container/card/card.component.spec.ts
+++ b/src/app/components/l2/content/primary-container/card/card.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CardComponent } from './card.component';
+
+describe('CardComponent', () => {
+  let component: CardComponent;
+  let fixture: ComponentFixture<CardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CardComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/l2/content/primary-container/card/card.component.ts
+++ b/src/app/components/l2/content/primary-container/card/card.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-card',
+  templateUrl: './card.component.html',
+  styleUrls: ['./card.component.scss']
+})
+export class CardComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/primary-container/intent-box/intent-box.component.html
+++ b/src/app/components/l2/content/primary-container/intent-box/intent-box.component.html
@@ -0,0 +1,3 @@
+<p>
+  intent-box works!
+</p>
--- a/src/app/components/l2/content/primary-container/intent-box/intent-box.component.scss
+++ b/src/app/components/l2/content/primary-container/intent-box/intent-box.component.scss
--- a/src/app/components/l2/content/primary-container/intent-box/intent-box.component.ts
+++ b/src/app/components/l2/content/primary-container/intent-box/intent-box.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-intent-box',
+  templateUrl: './intent-box.component.html',
+  styleUrls: ['./intent-box.component.scss']
+})
+export class IntentBoxComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/primary-container/message/message.component.html
+++ b/src/app/components/l2/content/primary-container/message/message.component.html
@@ -0,0 +1,3 @@
+<p>
+  message works!
+</p>
--- a/src/app/components/l2/content/primary-container/message/message.component.scss
+++ b/src/app/components/l2/content/primary-container/message/message.component.scss
--- a/src/app/components/l2/content/primary-container/message/message.component.spec.ts
+++ b/src/app/components/l2/content/primary-container/message/message.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessageComponent } from './message.component';
+
+describe('MessageComponent', () => {
+  let component: MessageComponent;
+  let fixture: ComponentFixture<MessageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MessageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MessageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/l2/content/primary-container/message/message.component.ts
+++ b/src/app/components/l2/content/primary-container/message/message.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.scss']
+})
+export class MessageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/primary-container/primary-container.component.html
+++ b/src/app/components/l2/content/primary-container/primary-container.component.html
@@ -0,0 +1,3 @@
+<p>
+  primary-container works!
+</p>
--- a/src/app/components/l2/content/primary-container/primary-container.component.scss
+++ b/src/app/components/l2/content/primary-container/primary-container.component.scss
--- a/src/app/components/l2/content/primary-container/primary-container.component.spec.ts
+++ b/src/app/components/l2/content/primary-container/primary-container.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PrimaryContainerComponent } from './primary-container.component';
+
+describe('PrimaryContainerComponent', () => {
+  let component: PrimaryContainerComponent;
+  let fixture: ComponentFixture<PrimaryContainerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PrimaryContainerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PrimaryContainerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/l2/content/primary-container/primary-container.component.ts
+++ b/src/app/components/l2/content/primary-container/primary-container.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-primary-container',
+  templateUrl: './primary-container.component.html',
+  styleUrls: ['./primary-container.component.scss']
+})
+export class PrimaryContainerComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/content/primary-container/widget/widget.component.html
+++ b/src/app/components/l2/content/primary-container/widget/widget.component.html
@@ -0,0 +1,3 @@
+<p>
+  widget works!
+</p>
--- a/src/app/components/l2/content/primary-container/widget/widget.component.scss
+++ b/src/app/components/l2/content/primary-container/widget/widget.component.scss
--- a/src/app/components/l2/content/primary-container/widget/widget.component.spec.ts
+++ b/src/app/components/l2/content/primary-container/widget/widget.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { WidgetComponent } from './widget.component';
+
+describe('WidgetComponent', () => {
+  let component: WidgetComponent;
+  let fixture: ComponentFixture<WidgetComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WidgetComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(WidgetComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/src/app/components/l2/content/primary-container/widget/widget.component.ts
+++ b/src/app/components/l2/content/primary-container/widget/widget.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-widget',
+  templateUrl: './widget.component.html',
+  styleUrls: ['./widget.component.scss']
+})
+export class WidgetComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
--- a/src/app/components/l2/sidebar/sidebar.component.html
+++ b/src/app/components/l2/sidebar/sidebar.component.html
@@ -1,64 +1,63 @@
-<div class="wrapper">
-  <nav id="sidebar" class="active">
+<nav id="sidebar" class="active">

-    <div class="sidebar-header">
-      <button type="button" id="sidebarCollapse" class="btn btn-info">
-        <i class="fas fa-align-justify"></i>
-      </button>
-      <h3 class="logotext">Microbot</h3>
-      <!-- <strong>MB</strong> -->
-    </div>
+  <div class="sidebar-header">
+    <button type="button" id="sidebarCollapse" class="btn btn-info">
+      <i class="fas fa-align-justify"></i>
+    </button>
+    <h3 class="logotext">Microbot</h3>
+    <!-- <strong>MB</strong> -->
+  </div>

-    <ul class="list-unstyled components">
-      <li class="active">
-        <!-- data-toggle="collapse"  -->
-        <a href="#homeSubmenu">
-          <i class="fas fa-home"></i>
-          <span class="hideable hide">Home</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-briefcase"></i>
-          <span class="hideable hide">About</span>
-        </a>
-        <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
-          <i class="fas fa-copy"></i>
-          <span class="hideable hide">Tasks</span>
-        </a>
-        <ul class="collapse list-unstyled" id="pageSubmenu">
-          <li>
-            <a href="#">Repo</a>
-          </li>
-          <li>
-            <a href="#">Issues</a>
-          </li>
-          <li>
-            <a href="#">Admin</a>
-          </li>
-        </ul>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-image"></i>
-          <span class="hideable hide">Favorites</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-question"></i>
-          <span class="hideable hide">FAQ</span>
-        </a>
-      </li>
-      <li>
-        <a href="#">
-          <i class="fas fa-paper-plane"></i>
-          <span class="hideable hide">Contact</span>
-        </a>
-      </li>
-    </ul>
+  <ul class="list-unstyled components">
+    <li class="active">
+      <!-- data-toggle="collapse"  -->
+      <a href="#homeSubmenu">
+        <i class="fas fa-home"></i>
+        <span class="hideable hide">Home</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-briefcase"></i>
+        <span class="hideable hide">About</span>
+      </a>
+      <a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
+        <i class="fas fa-copy"></i>
+        <span class="hideable hide">Tasks</span>
+      </a>
+      <ul class="collapse list-unstyled" id="pageSubmenu">
+        <li>
+          <a href="#">Repo</a>
+        </li>
+        <li>
+          <a href="#">Issues</a>
+        </li>
+        <li>
+          <a href="#">Admin</a>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-image"></i>
+        <span class="hideable hide">Favorites</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-question"></i>
+        <span class="hideable hide">FAQ</span>
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        <i class="fas fa-paper-plane"></i>
+        <span class="hideable hide">Contact</span>
+      </a>
+    </li>
+  </ul>

-    <!-- <ul class="list-unstyled CTAs">
+  <!-- <ul class="list-unstyled CTAs">
      <li>
          <a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
      </li>
@@ -66,5 +65,4 @@
          <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
      </li>
  </ul> -->
-  </nav>
-</div>
+</nav>
--- a/src/app/components/l2/sidebar/sidebar.component.scss
+++ b/src/app/components/l2/sidebar/sidebar.component.scss
@@ -42,18 +42,13 @@ span {
 /* ---------------------------------------------------
    SIDEBAR STYLE
 ----------------------------------------------------- */
-
-.wrapper {
-    display: flex;
-    align-items: stretch;
-}
-
 #sidebar {
    min-width: 250px;
    max-width: 250px;
    background: $theme-supplementer;
    color: $themeColor-Dark;
    transition: all 0.3s;
+    height: 100%;
 }

 #sidebar.active {
--- a/src/app/configuration/config.js
+++ b/src/app/configuration/config.js
@@ -0,0 +1,118 @@
+module.exports = {
+  gitToken: '96ead73c54cbbf023a73ee57af145b205d460851',
+  recasttoken: '26021d055040a9d9f1ad48476efab4a0',
+  intentSlugToOperations: {
+    createrepo: {
+      requestMethod: 'post',
+      intentMessage: 'Create a Repository in Github',
+      getDataOperation: 'getCreateRepoJson',
+      githubOperation: 'createRepository',
+      showWidgetOperation: 'showCreateRepoWidget',
+      populateDataOperation: 'populateCreateRepoData',
+      successMessage: 'Repository Added!',
+      cardMsg: 'Requested Repository has been added and is available at ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'name',
+      action: { type: 'ADD_REPO' },
+      response_action: { type: 'ADD_REPO_RESPONSE' },
+    },
+    createissue: {
+      requestMethod: 'post',
+      intentMessage: 'Raise an issue in Github',
+      getDataOperation: 'getCreateIssueJson',
+      githubOperation: 'createIssue',
+      showWidgetOperation: 'showCreateIssueWidget',
+      populateDataOperation: 'populateCreateIssueData',
+      successMessage: 'Issue Created!',
+      cardMsg: 'Issue Created as requested, issue details available at ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'title',
+      action: { type: 'ADD_ISSUE' },
+      response_action: { type: 'ADD_ISSUE_RESPONSE' },
+    },
+    closeissue: {
+      requestMethod: 'post',
+      intentMessage: 'Close an issue in Github',
+      getDataOperation: 'getCloseIssueJson',
+      githubOperation: 'closeIssue',
+      showWidgetOperation: 'showCloseIssueWidget',
+      populateDataOperation: 'populateCloseIssueData',
+      successMessage: 'Issue Closed!',
+      cardMsg: 'Issue Closed as requested, closed issue available at: ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'title',
+      action: { type: 'CLOSE_ISSUE' },
+      response_action: { type: 'CLOSE_ISSUE_RESPONSE' },
+    },
+    addissuecomment: {
+      requestMethod: 'post',
+      intentMessage: 'Add a comment on an issue in Github',
+      getDataOperation: 'getAddCommentJson',
+      githubOperation: 'addIssueComment',
+      showWidgetOperation: 'showAddCommentWidget',
+      populateDataOperation: 'populateAddCommentData',
+      successMessage: 'Comment Added!',
+      cardMsg: 'Comment Added as Requested, view here: ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'title',
+      action: { type: 'ADD_COMMENT' },
+      response_action: { type: 'ADD_ISSUE_COMMENT_RESPONSE' },
+    },
+    displaylastcomment: {
+      requestMethod: 'get',
+      intentMessage: 'Display last comment of an issue in Github',
+      getDataOperation: 'getDisplayCommentJson',
+      githubOperation: 'displayLastComment',
+      showWidgetOperation: 'showDisplayCommentWidget',
+      populateDataOperation: 'populateDisplayCommentData',
+      successMessage: 'Comment Retrieved!',
+      cardMsg: 'Please find requested comment below: ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'title',
+      action: { type: 'SHOW_LAST_COMMENT' },
+      response_action: { type: 'SHOW_LAST_COMMENT_RESPONSE' },
+    },
+    addcollab: {
+      requestMethod: 'post',
+      intentMessage: 'Add a collaborator',
+      getDataOperation: 'getAddCollaboratorJson',
+      githubOperation: 'addCollaborator',
+      showWidgetOperation: 'showAddCollaboratorWidget',
+      populateDataOperation: 'populateAddCollaboratorData',
+      successMessage: 'Collaborator Added!',
+      cardMsg: 'Collaborator added, details available at ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'invitee,login',
+      action: { type: 'ADD_COLLAB' },
+      response_action: { type: 'ADD_COLLAB_RESPONSE' },
+    },
+    viewrepos: {
+      requestMethod: 'get',
+      intentMessage: 'View Repositories for current user',
+      getDataOperation: 'getViewRepositoryJson',
+      githubOperation: 'viewRepositories',
+      showWidgetOperation: 'showViewRepoWidget',
+      populateDataOperation: 'populateViewRepoData',
+      successMessage: 'Showing repositories',
+      cardMsg: 'Repository Details available below: ',
+      cardDataUrl: 'html_url',
+      cardDataName: 'invitee,login',
+      action: { type: 'VIEW_REPO' },
+      response_action: { type: 'VIEW_REPO_RESPONSE' },
+    },
+    resethistory: {
+      requestMethod: 'purge',
+      intentMessage: 'Clear all Operations History',
+      successMessage: 'Purged!',
+      cardMsg: 'Purged history of all Operations and Commands!',
+      action: { type: 'CLEAR_HISTORY' },
+      response_action: { type: 'CLEAR_HISTORY_RESPONSE' },
+    },
+    addquery: {
+      action: { type: 'ADD_QUERY' },
+    },
+  },
+  constants: {
+    hiddenIntentFieldId: 'intentHidden',
+  },
+};
--- a/src/app/services/dom/dom-ops.service.spec.ts
+++ b/src/app/services/dom/dom-ops.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { DomOpsService } from './dom-ops.service';
+
+describe('DomOpsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [DomOpsService]
+    });
+  });
+
+  it('should be created', inject([DomOpsService], (service: DomOpsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/dom/dom-ops.service.ts
+++ b/src/app/services/dom/dom-ops.service.ts
@@ -0,0 +1,507 @@
+import { Injectable } from '@angular/core';
+import * as $ from 'node_modules/jquery/dist/jquery';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DomOpsService {
+
+  createRepoWidgetCreated: boolean = false;
+  commandCardCounter: number = 1;
+  widgets = $("#widgets"); 
+
+  constructor() {
+    // this.map = {
+    //   addcollab,
+    //   addissuecomment,z
+    //   closeissue,
+    //   createissue,
+    //   createrepo,
+    //   displaylastcomment,
+    //   viewrepos,
+    // };
+  }
+
+  // showWidget(intent) {
+  //   let widget = document.getElementById(intent);
+  //   if (!widget) {
+  //     widget = this.getWidget(intent);
+  //     this.widgets.prepend(widget);
+  //   }
+  //   if (!this.isVisible(widget)) {
+  //     widget.classList.remove("hide");
+  //     $("#underWidgetLine").removeClass("hide");
+  //   }
+  // }
+
+  // getWidget(intent) {
+  //   const template = document.createElement("template");
+  //   template.innerHTML = this.map[intent];
+  //   let widget = template.content.firstChild;
+  //   return widget;
+  // }
+
+  // displayIntentBox(intent) {
+  //   const intentBox = document.getElementById("intentBox");
+  //   if (!this.isVisible(intentBox)) {
+  //     intentBox.classList.remove("hide");
+  //   }
+  //   $("#intentName").text(`${$config.intentSlugToOperations[intent].intentMessage} [slug: ${intent}].`);
+  // }
+
+  // showEmptyCommandMessage(message) {
+  //   $("#randomModal").text(message);
+  //   $("#emptyCommandMsgDisplayer").click();
+  // }
+
+  // populateRecastData(widgetName, recastResponse) {
+  //   // var requestMethod = $config.intentSlugToOperations[widgetName]['requestMethod'];
+  //   const operation = $config.intentSlugToOperations[widgetName].populateDataOperation;
+  //   if (typeof this[operation] === "function") {
+  //     this[operation](recastResponse);
+  //   }
+  // }
+
+  // populateCreateRepoData(recastResponse) {
+  //   const repoNameTextField = document.getElementById("repositoryName");
+  //   if (repoNameTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoName = recastResponse.entities["git-repository"]["0"].value;
+  //     repoNameTextField.value = repoName;
+  //   }
+  // }
+
+  // populateCreateIssueData(recastResponse) {
+  //   const issueTitleTextField = document.getElementById("issueTitle");
+  //   const issueRepositoryTextField = document.getElementById("issueRepository");
+  //   if (issueTitleTextField && recastResponse && recastResponse.entities.issue_title && recastResponse.entities.issue_title.length > 0
+  //     && recastResponse.entities.issue_title["0"].value) {
+  //     const issueTitle = recastResponse.entities.issue_title["0"].value;
+  //     issueTitleTextField.value = issueTitle;
+  //   }
+  //   if (issueRepositoryTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoName = recastResponse.entities["git-repository"]["0"].value;
+  //     issueRepositoryTextField.value = repoName;
+  //   }
+  // }
+
+  // populateCloseIssueData(recastResponse) {
+  //   const issueNumberTextField = document.getElementById("issueNumerToClose");
+  //   const issueRepositoryTextField = document.getElementById("repoForIssueClose");
+  //   if (issueNumberTextField && recastResponse && recastResponse.entities.issue_id && recastResponse.entities.issue_id.length > 0
+  //     && recastResponse.entities.issue_id["0"].value) {
+  //     const issueNumber = recastResponse.entities.issue_id["0"].value;
+  //     issueNumberTextField.value = issueNumber;
+  //   }
+  //   if (issueRepositoryTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoName = recastResponse.entities["git-repository"]["0"].value;
+  //     issueRepositoryTextField.value = repoName;
+  //   }
+  // }
+
+  // populateAddCollaboratorData(recastResponse) {
+  //   const collaboratorNameTextField = document.getElementById("collaboratorName");
+  //   const repoForCollabTextField = document.getElementById("repoForCollab");
+  //   if (collaboratorNameTextField && recastResponse && recastResponse.entities.git_collaborator && recastResponse.entities.git_collaborator.length > 0
+  //     && recastResponse.entities.git_collaborator["0"].value) {
+  //     const collaboratorName = recastResponse.entities.git_collaborator["0"].value;
+  //     collaboratorNameTextField.value = collaboratorName;
+  //   }
+  //   if (repoForCollabTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoName = recastResponse.entities["git-repository"]["0"].value;
+  //     repoForCollabTextField.value = repoName;
+  //   }
+  // }
+
+  // populateAddCommentData(recastResponse) {
+  //   const repoForIssueCommentTextField = document.getElementById("repoForIssueComment");
+  //   const issueNumberTextField = document.getElementById("issueNumber");
+  //   const issueCommentTextArea = document.getElementById("issueComment");
+  //   if (repoForIssueCommentTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoForIssueComment = recastResponse.entities["git-repository"]["0"].value;
+  //     repoForIssueCommentTextField.value = repoForIssueComment;
+  //   }
+  //   if (issueNumberTextField && recastResponse && recastResponse.entities.issue_id && recastResponse.entities.issue_id.length > 0
+  //     && recastResponse.entities.issue_id["0"].value) {
+  //     const issueNumber = recastResponse.entities.issue_id["0"].value;
+  //     issueNumberTextField.value = issueNumber;
+  //   }
+  //   if (issueCommentTextArea && recastResponse && recastResponse.entities.issue_comment && recastResponse.entities.issue_comment.length > 0
+  //     && recastResponse.entities.issue_comment["0"].value) {
+  //     const issueComment = recastResponse.entities.issue_comment["0"].value;
+  //     issueCommentTextArea.value = issueComment;
+  //   }
+  // }
+
+  // populateDisplayCommentData(recastResponse) {
+  //   const issueNumberTextField = document.getElementById("issueNumberForCommentView");
+  //   const issueRepositoryTextField = document.getElementById("repoForCommentView");
+  //   if (issueNumberTextField && recastResponse && recastResponse.entities.issue_id && recastResponse.entities.issue_id.length > 0
+  //     && recastResponse.entities.issue_id["0"].value) {
+  //     const issueNumber = recastResponse.entities.issue_id["0"].value;
+  //     issueNumberTextField.value = issueNumber;
+  //   }
+  //   if (issueRepositoryTextField && recastResponse && recastResponse.entities["git-repository"] && recastResponse.entities["git-repository"].length > 0
+  //     && recastResponse.entities["git-repository"]["0"].value) {
+  //     const repoName = recastResponse.entities["git-repository"]["0"].value;
+  //     issueRepositoryTextField.value = repoName;
+  //   }
+  // }
+
+  // isVisible(element) {
+  //   return element ? !element.classList.contains("hide") : false;
+  // }
+
+  // getDataFromFormAsJSON() {
+  //   let data = {};
+  //   const intent = $(`#${$config.constants.hiddenIntentFieldId}`).val();
+  //   const requestMethod = $config.intentSlugToOperations[intent].requestMethod;
+  //   if (intent) {
+  //     const operation = $config.intentSlugToOperations[intent].getDataOperation;
+  //     if (typeof this[operation] === "function") {
+  //       data = this[operation]();
+  //     }
+  //   }
+  //   return data;
+  // }
+
+  // getCreateRepoJson() {
+  //   const data = {};
+  //   const request = {};
+  //   if (this.isVisible(document.getElementById("createrepo"))) {
+  //     request.name = document.getElementById("repositoryName").value;
+  //     request.description = document.getElementById("description").value;
+  //     request.homepage = document.getElementById("homePageURL").value;
+  //     request.private = document.getElementById("privateRepoChk").checked;
+  //     request.has_issues = document.getElementById("issuesChk").checked;
+  //     request.has_wiki = document.getElementById("wikiChk").checked;
+  //   }
+  //   data.request = request;
+  //   return data;
+  // }
+
+  // getCreateIssueJson() {
+  //   const data = {};
+  //   data.urlParams = {};
+  //   const request = {};
+  //   if (this.isVisible(document.getElementById("createissue"))) {
+  //     request.title = document.getElementById("issueTitle").value;
+  //     request.body = document.getElementById("description").value;
+  //     request.assignees = document.getElementById("assignees").value ? document.getElementById("assignees").value.split(",") : [];
+  //     request.labels = document.getElementById("labels").value ? document.getElementById("labels").value.split(",") : [];
+  //     data.urlParams.repoName = document.getElementById("issueRepository").value;
+  //   }
+  //   data.request = request;
+  //   return data;
+  // }
+
+  // getCloseIssueJson() {
+  //   const data = {};
+  //   data.urlParams = {};
+  //   if (this.isVisible(document.getElementById("closeissue"))) {
+  //     data.urlParams.issueId = document.getElementById("issueNumerToClose").value;
+  //     data.urlParams.repoName = document.getElementById("repoForIssueClose").value;
+  //   }
+  //   return data;
+  // }
+
+  // getAddCollaboratorJson() {
+  //   const data = {};
+  //   data.urlParams = {};
+  //   if (this.isVisible(document.getElementById("addcollab"))) {
+  //     data.urlParams.collaborator = document.getElementById("collaboratorName").value;
+  //     data.urlParams.repoName = document.getElementById("repoForCollab").value;
+  //   }
+  //   return data;
+  // }
+
+  // getAddCommentJson() {
+  //   const data = {};
+  //   data.urlParams = {};
+  //   const request = {};
+  //   if (this.isVisible(document.getElementById("addissuecomment"))) {
+  //     request.body = document.getElementById("issueComment").value;
+  //     data.urlParams.issueId = document.getElementById("issueNumber").value;
+  //     data.urlParams.repoName = document.getElementById("repoForIssueComment").value;
+  //   }
+  //   data.request = request;
+  //   return data;
+  // }
+
+  // getDisplayCommentJson() {
+  //   const data = {};
+  //   data.urlParams = {};
+  //   if (this.isVisible(document.getElementById("displaylastcomment"))) {
+  //     data.urlParams.issueId = document.getElementById("issueNumberForCommentView").value;
+  //     data.urlParams.repoName = document.getElementById("repoForCommentView").value;
+  //   }
+  //   return data;
+  // }
+
+  // addGitOperationHistory(data) {
+  //   const intent = data.intent;
+  //   let requestMethod = "";
+  //   if (intent) {
+  //     requestMethod = $config.intentSlugToOperations[intent].requestMethod;
+  //   }
+  //   const conversations = document.getElementById("conversations");
+  //   let table;
+  //   let comment;
+  //   // Create Elements
+  //   const card = document.createElement("div");
+  //   const cardBody = document.createElement("div");
+  //   const cardTitle = document.createElement("h5");
+  //   const closeAnchor = document.createElement("a");
+  //   const closeHeader = document.createElement("h6");
+  //   const cardText = document.createElement("p");
+  //   const cardFooter = document.createElement("div");
+  //   const textMuted = document.createElement("small");
+  //   const underCardLine = document.createElement("div");
+
+
+  //   // Add Attributes
+  //   card.classList.add("card");
+  //   cardBody.classList.add("card-body");
+  //   cardTitle.classList.add("card-title");
+  //   closeAnchor.classList.add("close");
+  //   // closeAnchor.setAttribute('href', '#');
+  //   cardText.classList.add("card-text");
+  //   cardFooter.classList.add("card-footer");
+  //   textMuted.classList.add("text-muted");
+  //   underCardLine.classList.add("line");
+
+  //   // Add content
+  //   closeHeader.innerHTML = "x";
+
+  //   const x = this.display_ct(0, textMuted);
+  //   if (data.type === "command") {
+  //     // Add content
+  //     cardTitle.innerHTML = "You Said";
+  //     cardText.innerHTML = data.command;
+  //     card.classList.add("light-red");
+  //     const repeat = document.createElement("a");
+  //     repeat.classList.add("btn", "btn-info", "float-right");
+  //     repeat.setAttribute("role", "button");
+  //     repeat.setAttribute("href", "#");
+  //     repeat.setAttribute("id", `btnRepeatCommand${data.insertionCounter}`);
+  //     repeat.innerHTML = "Repeat";
+  //     cardText.appendChild(repeat);
+  //   } else if (data.type === "response") {
+  //     // Add content
+  //     cardTitle.innerHTML = "Server Responded As..";
+  //     if (requestMethod == "post") {
+  //       cardText.innerHTML = `${$config.intentSlugToOperations[intent].cardMsg}<a class='repoLink' href='${data[$config.intentSlugToOperations[intent].cardDataUrl]}'>${this.getVariable(data, $config.intentSlugToOperations[intent].cardDataName)}</a>`;
+  //     } else if (requestMethod == "get") {
+  //       cardText.innerHTML = $config.intentSlugToOperations[intent].cardMsg;
+  //       if (data && data.length && data.length > 0) {
+  //         if (intent === "viewrepos") {
+  //           table = this.createRepoTable(data);
+  //         } else if (intent === "displaylastcomment") {
+  //           comment = this.createCommentBody(data);
+  //         }
+  //       }
+  //     } else if (requestMethod == "purge") {
+  //       cardTitle.innerHTML = "Operation Completed!";
+  //       cardText.innerHTML = data.command;
+  //     }
+  //   } else if (data.type = 'widget') {
+  //     cardTitle.innerHTML = "Operation recorded with below data, click submit to repeat.";
+  //     cardText.innerHTML = $config.intentSlugToOperations[intent].cardMsg;
+  //     if (data && data.length && data.length > 0) {
+  //       if (intent === "viewrepos") {
+  //         table = this.createRepoTable(data);
+  //       } else if (intent === "displaylastcomment") {
+  //         comment = this.createCommentBody(data);
+  //       }
+  //     }
+  //   } else {
+  //     cardTitle.innerHTML = "Server Responded As..";
+  //     cardText.innerHTML = `Operation failed with status: ${data.status}`;
+  //   }
+
+  //   // Associations
+  //   closeAnchor.appendChild(closeHeader);
+  //   cardTitle.appendChild(closeAnchor);
+  //   cardBody.appendChild(cardTitle);
+  //   cardBody.appendChild(cardText);
+  //   if (comment) { cardBody.appendChild(comment); }
+  //   cardFooter.appendChild(textMuted);
+  //   card.appendChild(cardBody);
+  //   if (table) { card.appendChild(table); }
+  //   card.appendChild(cardFooter);
+
+  //   conversations.insertBefore(underCardLine, conversations.firstChild);
+  //   conversations.insertBefore(card, conversations.firstChild);
+  // }
+
+  // getVariable(data, commaSeparatedValue) {
+  //   const arr = commaSeparatedValue.split(",");
+  //   for (let i = 0; i < arr.length; i++) {
+  //     data = data[arr[i]];
+  //   }
+  //   return data;
+  // }
+
+  // // Create table of repositories ==================================================================================================
+  // createRepoTable(data) {
+  //   // Create Elements
+  //   const table = document.createElement("table");
+  //   const thead = document.createElement("thead");
+  //   const tr_head = document.createElement("tr");
+  //   const th_1 = document.createElement("th");
+  //   const th_2 = document.createElement("th");
+  //   const th_3 = document.createElement("th");
+  //   const th_4 = document.createElement("th");
+  //   const th_5 = document.createElement("th");
+  //   const th_6 = document.createElement("th");
+  //   const th_7 = document.createElement("th");
+
+  //   // Add Attributes
+  //   table.classList.add("table", "tabled-bordered", "table-striped", "table-hover");
+  //   thead.classList.add("thead-dark");
+  //   th_1.setAttribute("scope", "col");
+  //   th_2.setAttribute("scope", "col");
+  //   th_3.setAttribute("scope", "col");
+  //   th_4.setAttribute("scope", "col");
+  //   th_5.setAttribute("scope", "col");
+  //   th_6.setAttribute("scope", "col");
+  //   th_7.setAttribute("scope", "col");
+
+  //   // Add Inner HTML
+  //   th_1.innerHTML = "#";
+  //   th_2.innerHTML = "Repository Name";
+  //   th_3.innerHTML = "Repository ID";
+  //   th_4.innerHTML = "Created On";
+  //   th_5.innerHTML = "Created By";
+  //   th_6.innerHTML = "View Raw";
+  //   th_7.innerHTML = "Delete Repository";
+
+  //   // Associations
+  //   tr_head.appendChild(th_1);
+  //   tr_head.appendChild(th_2);
+  //   tr_head.appendChild(th_3);
+  //   tr_head.appendChild(th_4);
+  //   tr_head.appendChild(th_5);
+  //   tr_head.appendChild(th_6);
+  //   tr_head.appendChild(th_7);
+  //   thead.appendChild(tr_head);
+  //   table.appendChild(thead);
+
+
+  //   for (let i = 0; i < data.length; i++) {
+  //     const currentRepo = data[i];
+  //     // Create Elements
+  //     const tbody = document.createElement("tbody");
+  //     const tr_body = document.createElement("tr");
+  //     const th_vertical = document.createElement("th");
+  //     const td_1 = document.createElement("td");
+  //     const td_2 = document.createElement("td");
+  //     const td_3 = document.createElement("td");
+  //     const td_4 = document.createElement("td");
+  //     const td_5 = document.createElement("td");
+  //     const td_6 = document.createElement("td");
+
+  //     // Add Attributes
+  //     th_vertical.setAttribute("scope", "row");
+  //     tr_body.setAttribute("id", `repoRow${i}`);
+
+  //     // Add Inner HTML
+  //     th_vertical.innerHTML = i + 1;
+  //     td_1.innerHTML = currentRepo.name;
+  //     td_2.innerHTML = `<a href='${currentRepo.html_url}' class='repoLink'>${currentRepo.id}</a>`;
+  //     td_3.innerHTML = currentRepo.created_at;
+  //     td_4.innerHTML = `<a href='${currentRepo.owner.html_url}' class='btn btn-info'>${currentRepo.owner.login}</a>`;
+  //     td_5.innerHTML = `<a href='${currentRepo.url}' class='btn btn-info'>View</a>`;
+  //     td_6.innerHTML = `<a href='${currentRepo.owner.html_url}' class='btn btn-danger'>Delete</a>`;
+
+  //     // Associations
+  //     tr_body.appendChild(th_vertical);
+  //     tr_body.appendChild(td_1);
+  //     tr_body.appendChild(td_2);
+  //     tr_body.appendChild(td_3);
+  //     tr_body.appendChild(td_4);
+  //     tr_body.appendChild(td_5);
+  //     tr_body.appendChild(td_6);
+  //     tbody.appendChild(tr_body);
+  //     table.appendChild(tbody);
+  //   }
+
+  //   return table;
+  // }
+
+  // loadConversations(historyAll) {
+  //   if (historyAll) {
+  //     historyAll.forEach((element) => {
+  //       this.addGitOperationHistory(element);
+  //     });
+  //   }
+  // }
+
+  // createCommentBody(data) {
+  //   const commentPara = document.createElement("p");
+  //   const lastComment = helper.getLatestComment(data);
+  //   commentPara.classList.add("card-text");
+  //   commentPara.innerHTML = `<strong style='color:black'>COMMENT:</strong> <i>${lastComment}</i>`;
+  //   return commentPara;
+  // }
+
+  // concealCodeInUrl() {
+  //   window.location = "http://localhost:8080";
+  // }
+
+  // toggleModals(response) {
+  //   const self = this;
+  //   const promise = response.json();
+  //   const intent = $(`#${$config.constants.hiddenIntentFieldId}`).val();
+  //   $("#submitConfirm").addClass("hide");
+  //   $("#btnCancelConfirm").click();
+  //   $(".modal-backdrop").removeClass("modal-backdrop");
+  //   $("#underWidgetLine").addClass("hide");
+  //   $("#intentBox").addClass("hide");
+  //   $("#widgets").children().addClass("hide");
+  //   if (response && response.status && (response.status === 201 || response.status === 200 || response.status === 204)) {
+  //     $("#successAlert").removeClass("hide");
+  //     promise.then((body) => {
+  //       $("#op-msg").text($config.intentSlugToOperations[intent].successMessage);
+  //       $("#successAlert").removeClass("hide");
+  //       const action = $config.intentSlugToOperations[intent].response_action;
+  //       body.intent = intent;
+  //       action.payload = body;
+  //       store.dispatch(action);
+  //       // self.addGitOperationHistory(body, 'response');
+  //     });
+  //   } else {
+  //     $("#dangerAlert").removeClass("hide");
+  //     // self.addGitOperationHistory(response.status);
+  //   }
+  //   // clear intent
+  //   $(`#${$config.constants.hiddenIntentFieldId}`).val("");
+  // }
+
+  // display_ct(start, element) {
+  //   this.start = start;
+  //   this.element = element;
+  //   const days = Math.floor(this.start / 86400);
+  //   const hours = Math.floor((this.start - (days * 86400)) / 3600);
+  //   const minutes = Math.floor((this.start - (days * 86400) - (hours * 3600)) / 60);
+  //   const secs = Math.floor((this.start - (days * 86400) - (hours * 3600) - (minutes * 60)));
+  //   let x = "";
+  //   if (days != 0) {
+  //     x = `${x + days} days`;
+  //   }
+  //   if (hours != 0) {
+  //     x = `${x + hours} hours`;
+  //   }
+  //   if (minutes != 0) {
+  //     x = `${x + minutes} minutes`;
+  //   }
+  //   x = `${x + secs} seconds ago`;
+  //   element.innerHTML = x;
+  //   this.start = this.start + 1;
+  //   // setTimeout(this['display_ct](this.start, this.element)', 1000 )
+  // }
+}
--- a/src/app/services/general-helper.service.spec.ts
+++ b/src/app/services/general-helper.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GeneralHelperService } from './general-helper.service';
+
+describe('GeneralHelperService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [GeneralHelperService]
+    });
+  });
+
+  it('should be created', inject([GeneralHelperService], (service: GeneralHelperService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/general-helper.service.ts
+++ b/src/app/services/general-helper.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GeneralHelperService {
+
+  constructor() { }
+}
--- a/src/app/services/github/github-ops.service.spec.ts
+++ b/src/app/services/github/github-ops.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GithubOpsService } from './github-ops.service';
+
+describe('GithubOpsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [GithubOpsService]
+    });
+  });
+
+  it('should be created', inject([GithubOpsService], (service: GithubOpsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/github/github-ops.service.ts
+++ b/src/app/services/github/github-ops.service.ts
@@ -0,0 +1,318 @@
+import { Injectable } from '@angular/core';
+import { PersistenceOpsService } from '../io/persistence-ops.service';
+import { DomOpsService } from '../dom/dom-ops.service';
+import * as $ from '../../../../node_modules/jquery/dist/jquery';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GithubOpsService {
+
+//   constructor(private persistenceOpsService: PersistenceOpsService, private dom: DomOpsService) { }
+
+//   getToken(code) {
+//     let token = "";
+//     // let self = this;
+//     $.getJSON(`https://micobot.herokuapp.com/authenticate/${code}`, (data) => {
+//         console.log(data.token);
+//         token = data.token;
+//         // set cookie here
+//         this.persistenceOpsService.setCookie("gitToken", token, 30);
+//         // self.authorizationToken = "token " + persistentOps.getCookie('gitToken');
+//         this.dom.concealCodeInUrl();
+//     });
+//     return token;
+//   }
+  
+//   getCurrentUser() {
+//       let repositories = "";
+//       const url = "https://api.github.com/user/";
+//       fetch(url, {
+//           method: "GET",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//           },
+//       })
+//           .then((response) => {
+//               response.json().then((body) => {
+//                   repositories = body;
+//                   console.log(repositories);
+//                   return repositories;
+//               });
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//       return repositories;
+//   }
+  
+//   authenticate() {
+  
+//   }
+  
+//   viewRepositories() {
+//       const repositories = "";
+//       const url = "https://api.github.com/user/repos";
+//       fetch(url, {
+//           method: "GET",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then((response) => {
+//               // response.json().then(function(body){
+//               //     repositories = body;
+//               //     console.log(repositories);
+//               //     return repositories;
+//               // });
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//       return repositories;
+//   }
+  
+//   createRepository(newRepoJson) {
+//       const url = "https://api.github.com/user/repos";
+//       const responsePromise = "";
+//       fetch(url, {
+//           method: "POST",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(newRepoJson),
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   updateRepository(updateRepoJson, repoName) {
+//       repoName = "Hello-World3";
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}`;
+//       fetch(url, {
+//           method: "PATCH",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(updateRepoJson),
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   deleteRepository(repoName) {
+//       repoName = "Hello-World2";
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}`;
+//       fetch(url, {
+//           method: "DELETE",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   createIssue(newIssueJson, repoName) {
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues`;
+//       fetch(url, {
+//           method: "POST",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(newIssueJson),
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   updateIssue(updateIssueJson, repoName, issueNumber) {
+//       repoName = "stack_route_prj7";
+//       issueNumber = 2;
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueNumber}`;
+//       fetch(url, {
+//           method: "PATCH",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(updateIssueJson),
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   closeIssue(closeIssueJson, repoName, issueNumber) {
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueNumber}`;
+//       fetch(url, {
+//           method: "PATCH",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(closeIssueJson),
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   reopenIssue(reopenIssueJson, repoName, issueNumber) {
+//       repoName = "stack_route_prj7";
+//       issueNumber = 2;
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueNumber}`;
+//       fetch(url, {
+//           method: "PATCH",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(reopenIssueJson),
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   displayIssue(repoName, issueNumber) {
+//       repoName = "stack_route_prj7";
+//       issueNumber = 2;
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueNumber}`;
+//       let issues = "";
+//       fetch(url, {
+//           method: "GET",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then((response) => {
+//               response.json().then((body) => {
+//                   issues = body;
+//                   console.log(issues);
+//                   return issues;
+//               });
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//       return issues;
+//   }
+  
+//   addIssueComment(commentBodyJson, repoName, issueId) {
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueId}/comments`;
+//       fetch(url, {
+//           method: "POST",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(commentBodyJson),
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   displayLastComment(repoName, issueNumber) {
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/${issueNumber}/comments`;
+//       const comments = [];
+//       const latestComment = "";
+//       fetch(url, {
+//           method: "GET",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//               // response.json().then(function(body){
+//               //     comments = body;
+//               //     latestComment = githubHelper.getLatestComment(comments);
+//               //     console.log(comments);
+//               //     console.log(latestComment);
+//               // });
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   displayIssuesForUser() {
+//       const url = "https://api.github.com/user/issues";
+//       fetch(url, {
+//           method: "GET",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   displayIssuesOnRepo() {
+//       repoName = "stack_route_prj7";
+//       issueNumber = 2;
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/issues/`;
+//       fetch(url, {
+//           method: "PATCH",
+//           headers: {
+//               "Content-Type": "application/json; charset=utf-8",
+//               Authorization: this.authorizationToken,
+//           },
+//           body: JSON.stringify(updateIssueJson),
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   addCollaborator(repoName, collaborator) {
+//       repoName = "stack_route_prj7";
+//       collaborator = "swat1508";
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/collaborators/${collaborator}`;
+//       fetch(url, {
+//           method: "PUT",
+//           headers: {
+//               "Content-Type": "application/json",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then((response) => {
+//               dom.toggleModals(response);
+//           })
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   removeCollaborator(repoName, collaborator) {
+//       repoName = "stack_route_prj7";
+//       collaborator = "swat1508";
+//       const url = `https://api.github.com/repos/mohiit1502/${repoName}/collaborators/${collaborator}`;
+//       fetch(url, {
+//           method: "DELETE",
+//           headers: {
+//               "Content-Type": "application/json",
+//               Authorization: this.authorizationToken,
+//           },
+//       })
+//           .then(response => response.json())
+//           .catch(error => console.error("Fetch Error =\n", error));
+//   }
+  
+//   createUser(newuserJson) {
+  
+//   }
+  
+//   updateUser(updateUserJson) {
+  
+//   }
+  
+//   deleteUser(userId) {
+  
+//   }
+}
--- a/src/app/services/helpers/helper-service.service.ts
+++ b/src/app/services/helpers/helper-service.service.ts
@@ -0,0 +1,40 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HelperServiceService {
+
+  constructor() { }
+
+
+  getLatestComment(comments) {
+    if (comments && comments.length > 0) { return comments[comments.length - 1].body; }
+  }
+
+  compareByProperty(property) {
+    return function (a, b) {
+      if (a[property] < b[property]) return -1;
+      if (a[property] > b[property]) return 1;
+      return 0;
+    };
+  }
+
+  clone(obj) {
+    if (obj == null || typeof obj !== "object") return obj;
+    const copy = Object.assign({}, obj);
+    return copy;
+  }
+
+  concatenateAndSort(history) {
+    // let counter = 1;
+    let historyAll = [];
+    for (const property in history) {
+      if (history.hasOwnProperty(property) && Array.isArray(history[property])) {
+        historyAll = historyAll.concat(history[property]);
+      }
+    }
+    historyAll.sort(this.compareByProperty("insertionCounter"));
+    return historyAll;
+  }
+}
--- a/src/app/services/io/json-reader.service.spec.ts
+++ b/src/app/services/io/json-reader.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { JsonReaderService } from './json-reader.service';
+
+describe('JsonReaderService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [JsonReaderService]
+    });
+  });
+
+  it('should be created', inject([JsonReaderService], (service: JsonReaderService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/io/json-reader.service.ts
+++ b/src/app/services/io/json-reader.service.ts
@@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class JsonReaderService {
+
+  constructor() { }
+}
--- a/src/app/services/io/persistence-ops.service.spec.ts
+++ b/src/app/services/io/persistence-ops.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { PersistenceOpsService } from './persistence-ops.service';
+
+describe('PersistenceOpsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [PersistenceOpsService]
+    });
+  });
+
+  it('should be created', inject([PersistenceOpsService], (service: PersistenceOpsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/io/persistence-ops.service.ts
+++ b/src/app/services/io/persistence-ops.service.ts
@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PersistenceOpsService {
+
+  constructor() { }
+
+  setCookie(cname, cvalue, exdays) {
+    const d = new Date();
+    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
+    const expires = `expires=${d.toUTCString()}`;
+    document.cookie = `${cname} =${cvalue};${expires};path=/`;
+  }
+  
+  getCookie(cname) {
+      const name = `${cname}=`;
+      const decodedCookie = decodeURIComponent(document.cookie);
+      const ca = decodedCookie.split(";");
+      for (let i = 0; i < ca.length; i++) {
+          let c = ca[i];
+          while (c.charAt(0) == " ") {
+              c = c.substring(1);
+          }
+          if (c.indexOf(name) == 0) {
+              return c.substring(name.length, c.length);
+          }
+      }
+      return "";
+  }
+}
+
+
--- a/src/app/services/recast/recast-ops.service.spec.ts
+++ b/src/app/services/recast/recast-ops.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { RecastOpsService } from './recast-ops.service';
+
+describe('RecastOpsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [RecastOpsService]
+    });
+  });
+
+  it('should be created', inject([RecastOpsService], (service: RecastOpsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
--- a/src/app/services/recast/recast-ops.service.ts
+++ b/src/app/services/recast/recast-ops.service.ts
@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import * as $config from "../../configuration/config";
+import * as $ from 'node_modules/jquery/dist/jquery';
+import { PersistenceOpsService } from '../io/persistence-ops.service';
+import { DomOpsService } from '../dom/dom-ops.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RecastOpsService {
+  recastToken: string = $config.recasttoken;
+  requestUrl: string = "https://api.recast.ai/v2/request";
+  // store: any = PersistenceOpsService.store;
+  
+  constructor(private domOpsService: DomOpsService) {}
+
+  getAndCallProcessIntent(command: string, text: {}) {
+    let self = this;
+    const url = `${this.requestUrl}?text=${command}`;
+    let bodyRelevant: any;
+    let intent = "";
+    let requestInit: any = {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json; charset=utf-8",
+        Authorization: `Token ${this.recastToken}`,
+      },
+      data: text,
+    }
+    fetch(url, requestInit)
+      .then((response) => {
+        response.json().then((body) => {
+          bodyRelevant = body.results;
+          intent = bodyRelevant.intents[0] ? bodyRelevant.intents[0].slug : "";
+          if (intent !== undefined && intent !== "") {
+            if (!Object.keys($config.intentSlugToOperations).includes(intent)) {
+              // domOpsService.showEmptyCommandMessage("Intent is either not Identified or is not supported, please try again with a different text.");
+              return;
+            }
+            $(`#${$config.constants.hiddenIntentFieldId}`).val(intent);
+            // domOpsService.displayIntentBox(intent);
+            if (intent == "resethistory") {
+              // store.dispatch($config.intentSlugToOperations.resethistory.action);
+              return;
+            }
+            // domOpsService.showWidget(intent);
+            // domOpsService.populateRecastData(intent, bodyRelevant);
+            // store.dispatch($config.intentSlugToOperations.addquery.action);
+          }
+          return intent;
+        });
+      })
+      .catch((error) => {
+        console.error("Fetch Error =\n", error);
+      });
+  }
+}
				`@@ -0,0 +1 @@`
				`<input type="{{type}}" id="textFieldId" placeholder="{{placeHolderText}}">`