From a724faee23ef6e983c021b158f6f76c7aa9297d5 Mon Sep 17 00:00:00 2001
From: Jan Garaj <jan.garaj@gmail.com>
Date: Tue, 2 Jan 2024 20:17:26 +0000
Subject: [PATCH] Init

---
 README.md                       |   2 +-
 package-lock.json               | 216 +++++++++++++++
 package.json                    |   5 +-
 src/assets/styles/md.less       |  23 ++
 src/layouts/default/Default.vue |  68 +++--
 src/main.js                     |  15 +-
 src/plugins/vuetify.js          |   5 +
 src/router/index.js             |   8 +-
 src/views/Grot.vue              | 287 ++++++++++++++++++++
 src/views/Main.vue              | 459 +++++++++++++++++++++-----------
 10 files changed, 904 insertions(+), 184 deletions(-)
 create mode 100644 src/assets/styles/md.less
 create mode 100644 src/views/Grot.vue

diff --git a/README.md b/README.md
index 6c9df56..324bad7 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,3 @@
 # Grafana Debugger
 
-TODO
\ No newline at end of file
+TODO
diff --git a/package-lock.json b/package-lock.json
index 8c81a15..e79354f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,9 +11,11 @@
         "@mdi/font": "7.0.96",
         "core-js": "^3.29.0",
         "md-editor-v3": "^4.10.0",
+        "rison-node": "^2.1.1",
         "roboto-fontface": "*",
         "vue": "^3.3.0",
         "vue-cookies": "^1.8.3",
+        "vue-gtag": "^2.0.1",
         "vue-router": "^4.0.0",
         "vuetify": "^3.4.9"
       },
@@ -21,6 +23,7 @@
         "@vitejs/plugin-vue": "^4.0.0",
         "eslint": "^8.37.0",
         "eslint-plugin-vue": "^9.3.0",
+        "less": "^4.2.0",
         "sass": "^1.60.0",
         "unplugin-fonts": "^1.0.3",
         "vite": "^4.2.0",
@@ -1354,6 +1357,18 @@
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "devOptional": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/copy-to-clipboard": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
@@ -1454,6 +1469,19 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -1869,6 +1897,13 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/graphemer": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
@@ -1884,6 +1919,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz",
@@ -1893,6 +1941,19 @@
         "node": ">= 4"
       }
     },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -1991,6 +2052,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "devOptional": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2036,6 +2103,56 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "devOptional": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less/node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/less/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -2224,6 +2341,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2265,6 +2395,23 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -2363,6 +2510,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "devOptional": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2407,6 +2563,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -2520,6 +2686,13 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2594,6 +2767,11 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rison-node": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/rison-node/-/rison-node-2.1.1.tgz",
+      "integrity": "sha512-GuV0OnSL2erZJ0j/9YUsrAdfSh3mGcrq+4wM4PqRftOYT7+TRhxbMrpVZaGC5YIPwncIoOM7PPnskDku5Ywg1Q=="
+    },
     "node_modules/roboto-fontface": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/roboto-fontface/-/roboto-fontface-0.10.0.tgz",
@@ -2638,6 +2816,13 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/sass": {
       "version": "1.69.5",
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz",
@@ -2655,6 +2840,13 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/semver": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
@@ -2691,6 +2883,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -2763,6 +2965,12 @@
       "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
       "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "devOptional": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2970,6 +3178,14 @@
         "eslint": ">=6.0.0"
       }
     },
+    "node_modules/vue-gtag": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/vue-gtag/-/vue-gtag-2.0.1.tgz",
+      "integrity": "sha512-aM4A58FVL0wV2ptYi+xzAjeg+pQVRyUcfBc5UkXAwQrR4t3WBhor50Izp2I+3Oo7+l+vWJ7u78DGcNzReb8S/A==",
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.2.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.2.5.tgz",
diff --git a/package.json b/package.json
index 409c579..6afd48b 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && cp dist/index.html dist/404.html",
     "preview": "vite preview",
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
@@ -12,9 +12,11 @@
     "@mdi/font": "7.0.96",
     "core-js": "^3.29.0",
     "md-editor-v3": "^4.10.0",
+    "rison-node": "^2.1.1",
     "roboto-fontface": "*",
     "vue": "^3.3.0",
     "vue-cookies": "^1.8.3",
+    "vue-gtag": "^2.0.1",
     "vue-router": "^4.0.0",
     "vuetify": "^3.4.9"
   },
@@ -22,6 +24,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "eslint": "^8.37.0",
     "eslint-plugin-vue": "^9.3.0",
+    "less": "^4.2.0",
     "sass": "^1.60.0",
     "unplugin-fonts": "^1.0.3",
     "vite": "^4.2.0",
diff --git a/src/assets/styles/md.less b/src/assets/styles/md.less
new file mode 100644
index 0000000..a99146e
--- /dev/null
+++ b/src/assets/styles/md.less
@@ -0,0 +1,23 @@
+.css-vars(@isDark) {
+    --md-color: if(@isDark, #999, #222);
+    --md-hover-color: if(@isDark, #bbb, #000);
+    --md-bk-color: if(@isDark, #000, #E0E0E0);
+    --md-bk-color-outstand: if(@isDark, #111, #f6f6f6);
+    --md-bk-hover-color: if(@isDark, #1b1a1a, #f5f7fa);
+    --md-border-color: if(@isDark, #2d2d2d, #e6e6e6);
+    --md-border-hover-color: if(@isDark, #636262, #b9b9b9);
+    --md-border-active-color: if(@isDark, #777, #999);
+    --md-modal-mask: #00000073;
+    --md-scrollbar-bg-color: if(@isDark, #0f0f0f, #e2e2e2);
+    --md-scrollbar-thumb-color: if(@isDark, #2d2d2d, #0000004d);
+    --md-scrollbar-thumb-hover-color: if(@isDark, #3a3a3a, #00000059);
+    --md-scrollbar-thumb-active-color: if(@isDark, #3a3a3a, #00000061);
+  }
+  
+  .md-editor {
+    .css-vars(false);
+  }
+  
+  .md-editor-dark {
+    .css-vars(true);
+  }
\ No newline at end of file
diff --git a/src/layouts/default/Default.vue b/src/layouts/default/Default.vue
index db46473..ad2d8e7 100644
--- a/src/layouts/default/Default.vue
+++ b/src/layouts/default/Default.vue
@@ -1,9 +1,11 @@
 <template>
   <v-app>
-    <v-app-bar flat>
+    <v-app-bar flat scroll-behavior="hide" scroll-threshold="10">
       <v-app-bar-title>
-        <v-icon icon="mdi-bug" size="x-large"></v-icon>
-        Grafana Debugger
+        <router-link to="/" class="text-decoration-none logo" >
+          <v-icon icon="mdi-bug" size="x-large"></v-icon>
+          Grafana Debugger
+        </router-link>
       </v-app-bar-title>
       <v-btn @click="toggleTheme"><v-icon>mdi-theme-light-dark</v-icon></v-btn>
     </v-app-bar>
@@ -16,23 +18,43 @@
         class="d-flex align-center justify-center"
         style="font-size: 0.75rem;"
       >
-        
-          <div class="text-no-wrap ml-2 float-left">
-            Maintained by:&nbsp;<a href="https://monitoringartist.com" _target="_blank">Monitoring Artist</a>
-          </div>
-          <div class="ml-2 float-left">
+        <v-row justify="center">
+          <v-col cols="3"></v-col>
+          <v-spacer></v-spacer>
+          <v-col>
+            <div class="text-no-wrap">
+              <a class="footer text-decoration-none" href="https://monitoringartist.com" _target="_blank">Crafted with <v-icon icon="mdi-cards-heart" color="red"></v-icon> by Monitoring Artist</a>
+            </div>
+          </v-col>
+          <v-col> 
+          </v-col>
+          <v-col> 
             |
-          </div>
-          <div class="text-no-wrap ml-2 float-left">
-            Star:&nbsp;<a target="_blank" href="https://github.com/jangaraj/gv">GitHub repository</a>
-          </div>
-          <div class="ml-2 float-left">
+          </v-col>
+          <v-col> 
+            <div class="text-no-wrap">
+              <a class="footer text-decoration-none" target="_blank" href="https://github.com/monitoringartist/grafana-debugger"><v-icon icon="mdi-github"></v-icon> GitHub repository</a>
+            </div>
+          </v-col>
+          <v-col> 
             | 
-          </div>
-          <div class="text-no-wrap ml-2 float-left">
-            Feedback:&nbsp;<a target="_blank" href="https://github.com/jangaraj/gv/issues/new">New GitHub issue</a>
-          </div>
-        
+          </v-col>
+          <v-col> 
+            <div class="text-no-wrap">
+              <a class="footer text-decoration-none" target="_blank" href="todo"><v-icon icon="mdi-scale-balance"></v-icon> Legal</a>
+            </div>
+          </v-col>
+          <v-col> 
+            | 
+          </v-col>
+          <v-col> 
+            <div class="text-no-wrap">
+              <router-link class="footer text-decoration-none" to="/grot"><v-icon icon="mdi-chat"></v-icon> Grot</router-link>
+            </div>
+          </v-col>
+          <v-spacer></v-spacer>
+          <v-col cols="3"></v-col>
+        </v-row>
       </v-card>
     </v-footer>
   </v-app>
@@ -65,7 +87,15 @@ const theme = useTheme()
 
 function toggleTheme () {
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
-  // save theme to lcocal storage
   localStorage.setItem('theme', theme.global.name.value)
 }
 </script>
+
+<style>
+.v-theme--dark .logo, .v-theme--dark .footer {
+  color: white;
+}
+.v-theme--light .logo, .v-theme--light .footer {
+  color: #404040;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index da621e6..078da63 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,9 +17,20 @@ const app = createApp(App)
 
 registerPlugins(app)
 
-app.mount('#app')
-
 import { VueCookies } from 'vue-cookies'
 app.use(VueCookies)
 
+import VueGtag from 'vue-gtag'
+import router from './router'
+app.use(
+    VueGtag, 
+    {
+        config: { id: 'G-KY34G7DB1G' },
+        appName: 'Grafana Debugger',
+        pageTrackerScreenviewEnabled: true,
+    },
+    router
+)
+
+app.mount('#app')
 app.config.globalProperties.window = window
diff --git a/src/plugins/vuetify.js b/src/plugins/vuetify.js
index 6beffa6..14a5b9e 100644
--- a/src/plugins/vuetify.js
+++ b/src/plugins/vuetify.js
@@ -20,6 +20,11 @@ export default createVuetify({
         colors: {
           primary: '#1867C0',
           secondary: '#5CBBF6',
+        }
+      },
+      dark: {
+        colors: {
+          secondary: '#5CBBF6',
         },
       },
     },
diff --git a/src/router/index.js b/src/router/index.js
index b16547c..b863159 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,10 +9,12 @@ const routes = [
       {
         path: '',
         name: 'Introduction',
-        // route level code-splitting
-        // this generates a separate chunk (Home-[hash].js) for this route
-        // which is lazy-loaded when the route is visited.
         component: () => import('@/views/Main.vue'),
+      },
+      {
+        path: '/grot',
+        name: 'Grot',
+        component: () => import('@/views/Grot.vue'),
       }
     ],
   },
diff --git a/src/views/Grot.vue b/src/views/Grot.vue
new file mode 100644
index 0000000..bce7675
--- /dev/null
+++ b/src/views/Grot.vue
@@ -0,0 +1,287 @@
+<template>
+  <div>
+
+          <v-card flat>
+            <v-card-text>
+
+              <!-- Grot chat -->
+              <div v-if="grotShow">
+                <v-container>
+                  <v-row>
+                    <v-col>
+                      <div v-for="(item, index) in chat" :key="index" 
+                          :class="['d-flex flex-row my-2']">
+
+                        <v-avatar v-if="item.from == 'user'" :color="item.from == 'user' ? 'transparent': 'red'" size="36">
+                          <v-icon icon="mdi-account-circle"></v-icon>
+                        </v-avatar>
+                        <span v-if="item.from == 'user'" class="rounded ml-3 bg-grey-darken-3">
+                          <MdPreview
+                            :modelValue="item.msg"
+                            :theme="getCurrentTheme()" 
+                            language="en-US" 
+                            :toolbars="['code','preview']"
+                            :footers="[]" 
+                            previewTheme="github" 
+                            codeTheme="github"
+                          />
+                        </span>
+
+                        <v-avatar v-if="item.from != 'user'" :color="item.from == 'user' ? 'indigo': 'transparent'" image="/grot-icon.png" size="36">
+                        </v-avatar>
+                        <span v-if="item.from != 'user'" class="rounded ml-3 bg-grey-darken-3">
+                          <MdPreview
+                            :modelValue="item.msg"
+                            :theme="getCurrentTheme()" 
+                            language="en-US" 
+                            :toolbars="['code','preview']"
+                            :footers="[]" 
+                            previewTheme="github" 
+                            codeTheme="github"
+                          />
+                        </span>
+
+                      </div>
+                    </v-col>
+                  </v-row>
+                  <v-row no-gutters>
+                    <v-col>
+
+                      <div class="d-flex flex-row align-center">
+                        <v-text-field ref="chat" v-model="msg" clearable placeholder="Discuss with Grot" @keypress.enter="sendToGrot()"></v-text-field>
+                        <div class="mb-4">
+                          <v-btn v-if="recognition" class='ml-2' d-flex @click.stop="toggle ? endSpeechRecognition() : startSpeechRecognition()" icon :color="!toggle ? 'primary' : speaking ? 'red lighten-2' : 'red darken-4'" :class="{ pulse: toggle }">
+                            <v-icon>{{ micIcon }}</v-icon>
+                          </v-btn>
+                          <v-btn 
+                            icon 
+                            class="ml-4" 
+                            @click="sendToGrot()"
+                            :loading="loading"
+                            color="primary"
+                          >
+                            <v-icon>mdi-send</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </div>
+              
+            </v-card-text>
+          </v-card>
+  </div>
+</template>
+
+<script setup>
+import { MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+</script>
+<script>
+import { useTheme } from 'vuetify'
+import { event } from 'vue-gtag'
+
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const recognition = SpeechRecognition ? new SpeechRecognition() : false;
+
+export default {
+  created() {
+    window.addEventListener("resize", this.setMobile())
+    this.setMobile()
+  },
+  beforeDestroy() {
+    recognition.stop();
+    recognition.abort();
+  },
+  data: () => ({
+    lang: "en_US",
+    error: false,
+    speaking: false,
+    toggle: false,
+    micIcon: "mdi-microphone",
+    mobile: false,
+    loading: false,
+    theme: 'dark',
+    grotApplicationId: "06a226e5-ecb6-4193-8996-aab4460a15e0",
+    grotConversationId: null,
+    grotShow: true,
+    chat: [],
+    msg: "",
+  }),
+  watch: {
+    msg: function (val) {
+      if (val == null || val.trim().replace(/\.$/, '').trim() == "") {
+        this.msg = ""
+        return
+      } else {
+        if (this.loading) {
+          return
+        } else {
+          var tmp = val.toLowerCase().trim().replace(/\.$/, '').trim()
+          if (tmp.endsWith('send') | tmp.endsWith('sent')) {
+            this.msg = this.msg.trim()
+            this.msg = this.msg.split(" ").slice(0, -1).join(" ")
+            this.sendToGrot()
+          } 
+        }
+      }
+    }
+  },
+  methods: {
+    scrollDown() {
+      return
+      //this.$refs["chat"].scrollIntoView({ behavior: "smooth", block: "end" });
+    },
+    endSpeechRecognition() {
+      this.toggle = false;
+      this.speaking = false;
+      this.micIcon = "mdi-microphone";
+      recognition.stop();
+      recognition.abort();
+    },
+    startSpeechRecognition() {
+      this.toggle = true;
+      this.micIcon = "mdi-microphone-off";
+      recognition.lang = this.lang;
+      recognition.continuous = true;
+      recognition.interimResults = false;
+      recognition.maxAlternatives = 1;
+
+      recognition.onend = (event) => {
+        if (this.toggle) {
+          this.startSpeechRecognition()
+        } else {
+          this.toggle = false;
+          this.speaking = false;
+          this.micIcon = "mdi-microphone";
+        }
+      };
+
+      recognition.onresult = (event) => {
+        if (typeof event.results === "undefined") {
+          recognition.stop();
+          return;
+        }
+        for (var i = event.resultIndex; i < event.results.length; ++i) {
+          if (event.results[i].isFinal & event.results[i][0].transcript.trim() != "") {
+            this.msg += this.capitalizeFirstLetter(event.results[i][0].transcript).trim() + ". ";
+          }
+        }
+      };
+
+      try {
+        recognition.start();
+      } catch (e) {
+        this.toggle = false
+        console.log(e)
+      }
+    },
+    capitalizeFirstLetter(string) {
+      string = string.trim();
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+    setMobile() {
+      const orientation = window.screen.orientation.type
+      if (orientation === "portrait-primary") {
+        this.mobile = true;
+      } else if (orientation === "landscape-primary") {
+        if (screen.width <= 760) {
+          this.mobile = true;
+        } else {
+          this.mobile = false;
+        }
+      }
+    },
+    sendToGrot() {
+      if (this.msg == null || this.msg.trim() == "") {
+        return
+      }
+      this.loading = true
+      this.askGrot(this.msg)
+      this.msg = ""
+    },
+    askGrot(message) {
+      var url = `https://api.pal.ai/v1/conversations`;
+      var data = {
+        "applicationId": this.grotApplicationId,
+        "conversationId": this.grotConversationId,
+        "messageContent": message,
+        "isStreaming": false,
+      };
+      this.chat.push({from: 'user', msg: data.messageContent});
+      this.chat.push({from: 'grot', msg: "Moment, Grot is thinking..."})
+      event('askGrot', { source: 'user' })
+      fetch(url, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(data),
+      })
+      .then(response => response.json())
+      .then(data => {
+        this.grotConversationId = data.conversationId;
+        this.chat.pop()
+        this.chat.push({from: 'grot', msg: data.messages[data.messages.length - 1].content});
+        this.loading = false
+        this.scrollDown()
+      })
+      .catch((error) => {
+        console.error('Error:', error);
+        this.chat.pop()
+        this.chat.push({from: 'grot', msg: "Error during communication with Grot: " + error});
+        this.loading = false
+      });
+    },
+    getCurrentTheme() {
+      const theme = useTheme()
+      return theme.global.current.value.dark ? 'dark' : 'light'
+    }
+  },
+}
+</script>
+
+<style>
+.mdi-bug {
+  background: -webkit-linear-gradient(#f05a28, #fbc90b);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.md-editor-preview-wrapper {
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
+  padding-bottom: 0;
+  width: 100%;
+}
+.md-editor-preview-wrapper {
+  word-break: normal;
+}
+
+@keyframes pulse {
+  from {
+    transform: scale3d(1, 1, 1);
+  }
+  50% {
+    transform: scale3d(1.15, 1.15, 1.15);
+  }
+  to {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+.pulse {
+  animation-name: pulse;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+  animation-delay: 1s;
+  animation-iteration-count: infinite;
+}
+</style>
+
+<style lang="less">
+@import '../assets/styles/md.less';
+</style>
diff --git a/src/views/Main.vue b/src/views/Main.vue
index da9d390..ad5ea3c 100644
--- a/src/views/Main.vue
+++ b/src/views/Main.vue
@@ -77,20 +77,45 @@
         <v-stepper-window-item :value="1">
           <v-card title="Introduction" flat>
             <v-card-text>
-              Grafana debugger provides a structured guide on resolving issues with Grafana, covering aspects such as configuration, visualization creation, and queries.
+              Grafana Debugger provides a structured guide on resolving issues with Grafana, covering aspects such as configuration, visualization creation, and queries.
               <br /><br />
               A notable 73% of Grafana Debugger users swiftly identified their issues and find further resources with this tool immediately. Others are able to create community posts, 
               which will have much higher chance to attracts the attention of Grafana community members, because it contains all details required for quick problem assesment.
               All debugging steps are based on long term experience of Grafana community members and on regular communication with Grafana Enterprise support engineers.
               <br /><br />
-              <v-btn color="info" @click="step = 2">Start debugging</v-btn>
+              <v-btn color="info" @click="setDefault()">Start new debugging</v-btn>
 
-              <v-divider class="ma-4"></v-divider>
+              <v-divider class="ma-4 mt-8"></v-divider>
 
-              Some debugging examples:
+              Examples of debugged issues:
               <br /><br />
-              <a href="#step=2&step1Version=v10.2.4&step1Type=Enterprise (Free %26 unlicensed)&step1Cloud=false&step1Installation=installed as container with orchestration&step1Os=Linux&step1DeploymentDetails=My docker-compose yaml file%3A%0A```yaml%0Aversion%3A '3.8'%0Aservices%3A%0A%20 grafana%3A%0A%20%20%20 image%3A grafana%2Fgrafana-enterprise%3Alatest%0A%20%20%20 ports%3A%0A%20%20%20%20%20 - 3000%3A3000%0A%20%20%20 environment%3A%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ENABLED%3Dtrue%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ROLE%3DAdmin%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_NAME%3DMain Org.%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ID%3D1%0A%20%20%20 volumes%3A%0A%20%20%20%20%20 - grafana-storage%3A%2Fvar%2Flib%2Fgrafana%0Avolumes%3A%0A%20 grafana-storage%3A%0A```&step2WhatHappened=I don't see SAML login option in the login page.&step2WhatsExpected=I expect to see SAML login option in the login page.&step2HowReproduce=1. Open Grafana login page.%0A2. See that SAML login option is missing.&step2AdditionalDetails=I have configured SAML authentication according to the documentation. I use Azure IDP.&step3DocumentationLink=https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fauth%2Fsaml%2F&step4Title=Missing SAML Login Option in Grafana Enterprise Deployment&step4Category=Authentication&step4SearchQuery=Grafana Enterprise missing SAML login option&step4Tags=saml%2Clogin%2C grafana enterprise%2C deployment%2C docker%2C linux%2C azure idp">Issue: SAML login is not available</a>
-
+              <v-row>
+                <v-col>
+                  <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:'My docker-compose yaml file%3A%0A```yaml%0Aversion%3A !'3.8!'%0Aservices%3A%0A%20 grafana%3A%0A%20%20%20 image%3A grafana%2Fgrafana-enterprise%3Alatest%0A%20%20%20 ports%3A%0A%20%20%20%20%20 - 3000%3A3000%0A%20%20%20 environment%3A%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ENABLED%3Dtrue%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ROLE%3DAdmin%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_NAME%3DMain Org.%0A%20%20%20%20%20 - GF_AUTH_ANONYMOUS_ORG_ID%3D1%0A%20%20%20 volumes%3A%0A%20%20%20%20%20 - grafana-storage%3A%2Fvar%2Flib%2Fgrafana%0Avolumes%3A%0A%20 grafana-storage%3A%0A```',step2Installation:installed as simple container,step2Os:Linux,step2Type:'Enterprise (Free %26 unlicensed)',step2Version:v10.2.3,step3AdditionalDetails:I have configured SAML authentication according to the documentation. I use Azure IDP.,step3HowReproduce:'1. Open Grafana login page.%0A2. See that SAML login option is missing.',step3WhatHappened:'I don!'t see SAML login option in the login page.',step3WhatsExpected:I expect to see SAML login option in the login page.,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fauth%2Fsaml%2F,step5Category:Authentication%2FIdentity Management,step5SearchQuery:Grafana SAML login option missing,step5Tags:grafana%2Csaml%2C login%2C authentication%2C azure idp,step5Title:SAML login option missing in Grafana login page)">
+                    <v-btn color="secondary">SAML login issue</v-btn>
+                  </a>
+                </v-col>
+                <v-col>
+                  <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:My%20%60start-grafana.sh%60%20script%3A%0A%60%60%60sh%0Adocker%20rm%20-f%20grafana%20%7C%7C%20true%0A%0Adocker%20run%20-d%20%5C%0A%20%20--name%20grafana%20%5C%0A%20%20-p%2080%3A80%20%5C%0A%20%20grafana%2Fgrafana%3Alatest%0A%60%60%60,step2Installation:installed%20as%20simple%20container,step2Os:Linux,step2Type:Open%20Source,step2Version:v8.2.3,step3AdditionalDetails:I%20tried%20Firefox%2C%20Chrome%2C%20Edge.%20All%20of%20them%20have%20the%20same%20problem.,step3HowReproduce:'1.%20Run%20%60start-grafana.sh%60%20script%0A2.%20Try%20to%20open%20http%3A%2F%2Flocalhost%20in%20the%20browser',step3WhatHappened:'I%20can!'t%20open%20Grafana%20on%20http%3A%2F%2Flocalhost',step3WhatsExpected:I%20can%20see%20Grafana%20on%20http%3A%2F%2Flocalhost,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fsetup-grafana%2Finstallation%2Fdocker%2F,step5Category:Grafana%20Troubleshooting,step5SearchQuery:Grafana%20Docker%20deployment%20access%20issue,step5Tags:grafana%2Cdeployment%2C%20docker%2C%20access%20issue%2C%20documentation,step5Title:Unable%20to%20Access%20Grafana%20after%20Deployment)">
+                    <v-btn color="secondary">Grafana not available</v-btn>
+                  </a>
+                </v-col>
+                <v-col>
+                  <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:My%20%60start-grafana.sh%60%20script%3A%0A%60%60%60sh%0Adocker%20rm%20-f%20grafana%20%7C%7C%20true%0A%0Adocker%20run%20-d%20%5C%0A%20%20--name%20grafana%20%5C%0A%20%20-p%2080%3A80%20%5C%0A%20%20grafana%2Fgrafana%3Alatest%0A%60%60%60,step2Installation:installed%20as%20simple%20container,step2Os:Linux,step2Type:Open%20Source,step2Version:v8.2.3,step3AdditionalDetails:I%20tried%20Firefox%2C%20Chrome%2C%20Edge.%20All%20of%20them%20have%20the%20same%20problem.,step3HowReproduce:'1.%20Run%20%60start-grafana.sh%60%20script%0A2.%20Try%20to%20open%20http%3A%2F%2Flocalhost%20in%20the%20browser',step3WhatHappened:'I%20can!'t%20open%20Grafana%20on%20http%3A%2F%2Flocalhost',step3WhatsExpected:I%20can%20see%20Grafana%20on%20http%3A%2F%2Flocalhost,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fsetup-grafana%2Finstallation%2Fdocker%2F,step5Category:Grafana%20Troubleshooting,step5SearchQuery:Grafana%20Docker%20deployment%20access%20issue,step5Tags:grafana%2Cdeployment%2C%20docker%2C%20access%20issue%2C%20documentation,step5Title:Unable%20to%20Access%20Grafana%20after%20Deployment)">
+                    <v-btn color="secondary">TODO 1 issue</v-btn>
+                  </a>
+                </v-col>
+                <v-col>
+                  <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:My%20%60start-grafana.sh%60%20script%3A%0A%60%60%60sh%0Adocker%20rm%20-f%20grafana%20%7C%7C%20true%0A%0Adocker%20run%20-d%20%5C%0A%20%20--name%20grafana%20%5C%0A%20%20-p%2080%3A80%20%5C%0A%20%20grafana%2Fgrafana%3Alatest%0A%60%60%60,step2Installation:installed%20as%20simple%20container,step2Os:Linux,step2Type:Open%20Source,step2Version:v8.2.3,step3AdditionalDetails:I%20tried%20Firefox%2C%20Chrome%2C%20Edge.%20All%20of%20them%20have%20the%20same%20problem.,step3HowReproduce:'1.%20Run%20%60start-grafana.sh%60%20script%0A2.%20Try%20to%20open%20http%3A%2F%2Flocalhost%20in%20the%20browser',step3WhatHappened:'I%20can!'t%20open%20Grafana%20on%20http%3A%2F%2Flocalhost',step3WhatsExpected:I%20can%20see%20Grafana%20on%20http%3A%2F%2Flocalhost,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fsetup-grafana%2Finstallation%2Fdocker%2F,step5Category:Grafana%20Troubleshooting,step5SearchQuery:Grafana%20Docker%20deployment%20access%20issue,step5Tags:grafana%2Cdeployment%2C%20docker%2C%20access%20issue%2C%20documentation,step5Title:Unable%20to%20Access%20Grafana%20after%20Deployment)">
+                    <v-btn color="secondary">TODO 2 issue</v-btn>
+                  </a>
+                </v-col>
+                <v-col>
+                  <a class="text-decoration-none" href="#(step:'2',step2Cloud:false,step2DeploymentDetails:My%20%60start-grafana.sh%60%20script%3A%0A%60%60%60sh%0Adocker%20rm%20-f%20grafana%20%7C%7C%20true%0A%0Adocker%20run%20-d%20%5C%0A%20%20--name%20grafana%20%5C%0A%20%20-p%2080%3A80%20%5C%0A%20%20grafana%2Fgrafana%3Alatest%0A%60%60%60,step2Installation:installed%20as%20simple%20container,step2Os:Linux,step2Type:Open%20Source,step2Version:v8.2.3,step3AdditionalDetails:I%20tried%20Firefox%2C%20Chrome%2C%20Edge.%20All%20of%20them%20have%20the%20same%20problem.,step3HowReproduce:'1.%20Run%20%60start-grafana.sh%60%20script%0A2.%20Try%20to%20open%20http%3A%2F%2Flocalhost%20in%20the%20browser',step3WhatHappened:'I%20can!'t%20open%20Grafana%20on%20http%3A%2F%2Flocalhost',step3WhatsExpected:I%20can%20see%20Grafana%20on%20http%3A%2F%2Flocalhost,step4DocumentationLink:https%3A%2F%2Fgrafana.com%2Fdocs%2Fgrafana%2Flatest%2Fsetup-grafana%2Finstallation%2Fdocker%2F,step5Category:Grafana%20Troubleshooting,step5SearchQuery:Grafana%20Docker%20deployment%20access%20issue,step5Tags:grafana%2Cdeployment%2C%20docker%2C%20access%20issue%2C%20documentation,step5Title:Unable%20to%20Access%20Grafana%20after%20Deployment)">
+                    <v-btn color="secondary">TODO 3 issue</v-btn>
+                  </a>
+                </v-col>
+              </v-row>
             </v-card-text>
           </v-card>
         </v-stepper-window-item>
@@ -105,7 +130,7 @@
                 You can find Grafana details, when you visit Grafana login page <code>/login</code> 
                 (e.g. <code>https://grafana.example.com/login</code>), where you should see Grafana version and type in the footer.
                 <v-text-field
-                  v-model="step1Version"
+                  v-model="step2Version"
                   :autofocus="true"
                   :clearable="true"
                   placeholder="v10.2.3 "
@@ -121,7 +146,7 @@
                 </h3>
 
                 <v-chip-group
-                  v-model="step1Type"
+                  v-model="step2Type"
                   column
                   :multiple="false"
                   :mandatory="true"
@@ -157,7 +182,7 @@
               </h3>
 
               <v-chip-group
-                v-model="step1Cloud"
+                v-model="step2Cloud"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -181,13 +206,13 @@
 
               <v-divider :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'true'">
+              <h3 v-if="step2Cloud == 'true'">
                 Which cloud provider do you use?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'true'"
-                v-model="step1CloudProvider"
+                v-if="step2Cloud == 'true'"
+                v-model="step2CloudProvider"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -223,13 +248,13 @@
                 </v-chip>
               </v-chip-group>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 How did you deploy/install your on-premise Grafana instance?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'false'"
-                v-model="step1Installation"
+                v-if="step2Cloud == 'false'"
+                v-model="step2Installation"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -265,15 +290,15 @@
                 </v-chip>
               </v-chip-group>
 
-              <v-divider v-if="step1Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
+              <v-divider v-if="step2Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 Which operating system do you use to run on-premise Grafana?
               </h3>
 
               <v-chip-group
-                v-if="step1Cloud == 'false'"
-                v-model="step1Os"
+                v-if="step2Cloud == 'false'"
+                v-model="step2Os"
                 column
                 :multiple="false"
                 :mandatory="true"
@@ -309,17 +334,17 @@
                 </v-chip>
               </v-chip-group>
 
-              <v-divider v-if="step1Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
+              <v-divider v-if="step2Cloud == 'false'" :thickness="20" class="border-opacity-0"></v-divider>
 
-              <h3 v-if="step1Cloud == 'false'">
+              <h3 v-if="step2Cloud == 'false'">
                 Details about your on-premise Grafana deployment:
               </h3>
-              <div v-if="step1Cloud == 'false'">
-                {{ step1DeploymentDetailsDescription }} Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+              <div v-if="step2Cloud == 'false'">
+                {{ step2DeploymentDetailsDescription }} Please use 3 backticks (```) to format your commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
-              <MdEditor v-if="step1Cloud == 'false'" 
-                v-model="step1DeploymentDetails" 
+              <MdEditor v-if="step2Cloud == 'false'" 
+                v-model="step2DeploymentDetails" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -348,11 +373,11 @@
                 What kind of problem happened?
               </h3>
               <div>
-                Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2WhatHappened" 
+                v-model="step3WhatHappened" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -369,11 +394,11 @@
                 What did you expect to happen?
               </h3>
               <div>
-                Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2WhatsExpected" 
+                v-model="step3WhatsExpected" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -390,11 +415,11 @@
                 How to reproduce it?
               </h3>
               <div>
-                Please provide a steps. Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please provide a steps. Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2HowReproduce" 
+                v-model="step3HowReproduce" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -411,11 +436,11 @@
                 Additional problem details
               </h3>
               <div>
-                Please provide more details, which can be usefull. Did it work before? If it worked before, what Grafana version worked correctly? Provide more details about plugin (name, version, installation method) if problem is related to plugin. Please use 3 backticks (```) to format your logs, commands or configuration files for readibility.
+                Please provide more details, which can be usefull. Did it work before? If it worked before, what Grafana version worked correctly? Provide more details about plugin (name, version, installation method) if problem is related to plugin. Please use 3 backticks (```) to format your logs, commands or configuration files for readability. Markdown formatting is supported.
               </div>
 
               <MdEditor 
-                v-model="step2AdditionalDetails" 
+                v-model="step3AdditionalDetails" 
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -442,15 +467,15 @@
             <v-card-text>
 
               <h3>
-                Documentation link
+                Documentation link(s)
               </h3>
               <div>
-                Please provide a link(s) to documentation, which you have used to configure Grafana. Make sure that you have used documentation applicable for your Grafana version and type - {{ step1Type }} {{ step1Version }}.
+                Please provide a link(s) to documentation, which you have used to configure Grafana. Make sure that you have used documentation applicable for your Grafana version and type - {{ step2Type }} {{ step2Version }}.
                 Users make a mistake very often, when they use documentation for different Grafana version or type (e.g. latest where is more features, when they have in their older version or paid licensed features, which are not available for free).
               </div>
 
               <MdEditor 
-                v-model="step3DocumentationLink"
+                v-model="step4DocumentationLink"
                 :theme="getCurrentTheme()" 
                 language="en-US" 
                 :toolbars="['code','preview']"
@@ -476,8 +501,8 @@
           <v-card title="Recommendations" flat>
             <v-card-text>
               See recommendations with their pros and cons.<br /><br />
-              <div v-if="step1Type.toLowerCase().includes('licensed') && !step1Type.toLowerCase().includes('unlicensed')">
-                You have Enteprise licensed Grafana, so you can contact Grafana Enterprise support.
+              <div v-if="step2Type.toLowerCase().includes('licensed') && !step2Type.toLowerCase().includes('unlicensed')">
+                You have Enteprise licensed Grafana, so you can contact Grafana Enterprise support. Make sure that you are using email address, which is associated with your Grafana Cloud account.
                 <br /><br />
                 <v-table>
                   <thead>
@@ -503,13 +528,16 @@
                   </tbody>
                 </v-table>
 
-                <v-btn color="info" :href="'mailto:support@grafana.com?subject='+step4Title+'&body='+getPrompt()+createSignature()">Email Grafana Enterprise support</v-btn>
+                <v-btn color="info" :href="'mailto:support@grafana.com?subject='+step5Title+'&body='+getPrompt()+createSignature()">Email Grafana Enterprise support</v-btn>
+
+                <!-- <v-btn color="info" :href="'mailto:support@grafana.com?subject='+step5Title+'&body='+getPrompt()+createSignature()">22 Email Grafana Enterprise support</v-btn> -->
+
               </div>
 
-              <v-divider v-if="step1Type.toLowerCase().includes('licensed') && !step1Type.toLowerCase().includes('unlicensed')" class="ma-4"></v-divider>
+              <v-divider v-if="step2Type.toLowerCase().includes('licensed') && !step2Type.toLowerCase().includes('unlicensed')" class="ma-4"></v-divider>
 
               Try to talk to Grot (AI) - the chatbot has been trained with large language models (LLM) on Grafana Labs’ own content. 
-              See <a target="_blank" href="https://grafana.com/blog/2023/10/12/ask-grot-how-were-building-a-chatbot-thats-actually-helpful-on-our-website/">blogpost</a> for more details.
+              See <a class="text-decoration-none" target="_blank" href="https://grafana.com/blog/2023/10/12/ask-grot-how-were-building-a-chatbot-thats-actually-helpful-on-our-website/">blogpost</a> for more details.
               <br /><br />
               <v-table>
                 <thead>
@@ -543,8 +571,12 @@
                   <v-row>
                     <v-col>
                       <div v-for="(item, index) in chat" :key="index" 
-                          :class="['d-flex flex-row align-center my-2', item.from == 'user' ? 'justify-end': null]">
-                        <span v-if="item.from == 'user'" class="rounded mr-3 bg-grey-darken-3">
+                          :class="['d-flex flex-row my-2']">
+
+                        <v-avatar v-if="item.from == 'user'" :color="item.from == 'user' ? 'transparent': 'red'" size="36">
+                          <v-icon icon="mdi-account-circle"></v-icon>
+                        </v-avatar>
+                        <span v-if="item.from == 'user'" class="rounded ml-3 bg-grey-darken-3">
                           <MdPreview
                             :modelValue="item.msg"
                             :theme="getCurrentTheme()" 
@@ -555,9 +587,7 @@
                             codeTheme="github"
                           />
                         </span>
-                        <v-avatar v-if="item.from == 'user'" :color="item.from == 'user' ? 'transparent': 'red'" size="36">
-                          <v-icon icon="mdi-account-circle"></v-icon>
-                        </v-avatar>
+
                         <v-avatar v-if="item.from != 'user'" :color="item.from == 'user' ? 'indigo': 'transparent'" image="/grot-icon.png" size="36">
                         </v-avatar>
                         <span v-if="item.from != 'user'" class="rounded ml-3 bg-grey-darken-3">
@@ -571,21 +601,28 @@
                             codeTheme="github"
                           />
                         </span>
+
                       </div>
                     </v-col>
                   </v-row>
                   <v-row no-gutters>
                     <v-col>
                       <div class="d-flex flex-row align-center">
-                        <v-text-field v-model="msg" placeholder="Write response to Grot" @keypress.enter="sendToGrot()"></v-text-field>
-                        <v-btn 
-                          icon 
-                          class="ml-4" 
-                          @click="sendToGrot()"
-                          :loading="loading"
-                        >
-                          <v-icon>mdi-send</v-icon>
-                        </v-btn>
+                        <v-text-field v-model="msg" clearable placeholder="Discuss with Grot" @keypress.enter="sendToGrot()"></v-text-field>
+                        <div class="mb-4">
+                          <v-btn v-if="recognition" class='ml-2' d-flex @click.stop="toggle ? endSpeechRecognition() : startSpeechRecognition()" icon :color="!toggle ? 'primary' : speaking ? 'red lighten-2' : 'red darken-4'" :class="{ pulse: toggle }">
+                            <v-icon>{{ micIcon }}</v-icon>
+                          </v-btn>
+                          <v-btn 
+                            icon 
+                            class="ml-4" 
+                            @click="sendToGrot()"
+                            :loading="loading"
+                            color="primary"
+                          >
+                            <v-icon>mdi-send</v-icon>
+                          </v-btn>
+                        </div>
                       </div>
                     </v-col>
                   </v-row>
@@ -622,25 +659,25 @@
               
               <v-row>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://community.grafana.com/search?q='+encodeURIComponent(step4SearchQuery.replace('Grafana ', ''))+'%20order%3Alatest')">Search on Community Forum</v-btn>
+                  <v-btn color="info" @click="window.open('https://community.grafana.com/search?q='+encodeURI(step5SearchQuery.replace('Grafana ', ''))+'%20order%3Alatest')">Search on Community Forum</v-btn>
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://stackoverflow.com/search?q=%5Bgrafana%5D+'+encodeURIComponent(step4SearchQuery).replace('Grafana ', ''))">Search on Stack Overflow</v-btn>                  
+                  <v-btn color="info" @click="window.open('https://stackoverflow.com/search?q=%5Bgrafana%5D+'+encodeURI(step5SearchQuery).replace('Grafana ', ''))">Search on Stack Overflow</v-btn>                  
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://github.com/grafana/grafana/issues?q=is%3Aissue+'+encodeURIComponent(step4SearchQuery.replace('Grafana ', '')))">Search in Github Grafana issues</v-btn>                  
+                  <v-btn color="info" @click="window.open('https://github.com/grafana/grafana/issues?q=is%3Aissue+'+encodeURI(step5SearchQuery.replace('Grafana ', '')))">Search in Github Grafana issues</v-btn>                  
                 </v-col>
                 <v-col>
-                  <v-btn color="info" @click="window.open('https://www.google.com/search?q='+encodeURIComponent(step4SearchQuery))">Search on Google</v-btn>
+                  <v-btn color="info" @click="window.open('https://www.google.com/search?q='+encodeURI(step5SearchQuery))">Search on Google</v-btn>
                 </v-col>
                 <v-col v-if="getPrompt().toLowerCase().includes('influx')">
-                  <v-btn v-if="getPrompt().toLowerCase().includes('influx')" color="info" @click="window.open('https://community.influxdata.com/search?q='+encodeURIComponent(step4Title))">Search on Influx Community Forum</v-btn>
+                  <v-btn v-if="getPrompt().toLowerCase().includes('influx')" color="info" @click="window.open('https://community.influxdata.com/search?q='+encodeURI(step5Title))">Search on InfluxData Forum</v-btn>
                 </v-col>
               </v-row>
               
               <v-divider class="ma-4"></v-divider>
 
-              Create a new topic on <a target="_blank" href="https://community.grafana.com/">Grafana community forum</a>. All already provided details will be prefilled in the new topic form, when you click on next button:
+              Create a new topic on <a class="text-decoration-none" target="_blank" href="https://community.grafana.com/">Grafana community forum</a>. All already provided details will be prefilled in the new topic form, when you click on next button:
               <br /><br />
               <v-table>
                 <thead>
@@ -665,7 +702,7 @@
                   </tr>
                 </tbody>
               </v-table>
-              <v-btn color="info" @click="window.open('https://community.grafana.com/new-topic?title=' + encodeURIComponent(step4Title) + '&category=' + encodeURIComponent(step4Category) + '&tags=' + step4Tags + '&body=' + encodeURIComponent(getPrompt()+createSignature('markdown')))">Create community post</v-btn>
+              <v-btn color="info" @click="window.open('https://community.grafana.com/new-topic?title=' + encodeURIComponent(step5Title) + '&category=' + encodeURI(step5Category) + '&tags=' + step5Tags + '&body=' + encodeURIComponent(getPrompt()+createSignature('markdown')))">Create community post</v-btn>
 
               <br /><br />
               <br /><br />
@@ -682,97 +719,185 @@
 </template>
 
 <script setup>
-import { MdEditor, MdPreview } from 'md-editor-v3';
-import 'md-editor-v3/lib/style.css';
+import { MdEditor, MdPreview } from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
 
 </script>
 <script>
 import { useTheme } from 'vuetify'
+import rison from 'rison-node'
+import { event } from 'vue-gtag'
 
-//import { router } from '../router'
-// import { useRouter } from 'vue-router'
-// var router = useRouter()
-// router.afterEach(() => {
-//   this.setVariablesFromHash()
-//   console.log('router.afterEach')
-// });
+const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+const recognition = SpeechRecognition ? new SpeechRecognition() : false;
 
 export default {
-  created() {
-    window.addEventListener("resize", this.setMobile());
-    this.setMobile();
-    // test data prefill
-    if (false) {
-      this.step1Version = "v10.2.3";
-      this.step1Type = "Enterprise (Free & unlicensed)";
-      //this.step1Type = "Enterprise (Licensed)";
-      this.step1Cloud = "false";
-      this.step1Installation = "installed as container with orchestration";
-      this.step1Os = "Linux";
-      this.step1DeploymentDetails = "My docker-compose yaml file:\n```yaml\nversion: '3.8'\nservices:\n  grafana:\n    image: grafana/grafana-enterprise:latest\n    ports:\n      - 3000:3000\n    environment:\n      - GF_AUTH_ANONYMOUS_ENABLED=true\n      - GF_AUTH_ANONYMOUS_ORG_ROLE=Admin\n      - GF_AUTH_ANONYMOUS_ORG_NAME=Main Org.\n      - GF_AUTH_ANONYMOUS_ORG_ID=1\n    volumes:\n      - grafana-storage:/var/lib/grafana\nvolumes:\n  grafana-storage:\n```";
-      this.step2WhatHappened  = "I don't see SAML login option in the login page.";
-      this.step2WhatsExpected = "I expect to see SAML login option in the login page.";
-      this.step2HowReproduce  = "1. Open Grafana login page.\n2. See that SAML login option is missing.";
-      this.step2AdditionalDetails = "I have configured SAML authentication according to the documentation. I use Azure IDP.";
-      this.step3DocumentationLink = "https://grafana.com/docs/grafana/latest/auth/saml/";
-    }
+  mounted() {
     this.setVariablesFromHash();
+    //required workaround
+    this.step++;
+    this.step--;
+  },
+  created() {
+    window.addEventListener("resize", this.setMobile())
+    this.setMobile()
   },
   data: () => ({
+    lang: "en_US",
+    error: false,
+    speaking: false,
+    toggle: false,
+    micIcon: "mdi-microphone",
     step: 1,
     mobile: false,
     loading: false,
     theme: 'dark',
-    step1Version: null,
-    step1Type: null,
-    step1Cloud: null,
-    step1CloudProvider: null,
-    step1Installation: null,
-    step1Os: null,
-    step1DeploymentDetails: "",
-    step1DeploymentDetailsDescription: "Please provide more details about deployment",
-    step2WhatHappened: "",
-    step2WhatsExpected: "",
-    step2HowReproduce: "",
-    step2AdditionalDetails: "",
-    step3DocumentationLink: "",
-    step4Title: "",
-    step4Category: "",
-    step4SearchQuery: "",
-    step4Tags: "",
+    step2Version: null,
+    step2Type: null,
+    step2Cloud: null,
+    step2CloudProvider: null,
+    step2Installation: null,
+    step2Os: null,
+    step2DeploymentDetails: "",
+    step2DeploymentDetailsDescription: "Please provide more details about deployment. ",
+    step3WhatHappened: "",
+    step3WhatsExpected: "",
+    step3HowReproduce: "",
+    step3AdditionalDetails: "",
+    step4DocumentationLink: "",
+    step5Title: "",
+    step5Category: "",
+    step5SearchQuery: "",
+    step5Tags: "",
     grotApplicationId: "06a226e5-ecb6-4193-8996-aab4460a15e0",
     grotConversationId: null,
     grotShow: false,
     chat: [],
     msg: "",
-    inputVariables: ['step', 'step1Version', 'step1Type', 'step1Cloud', 'step1CloudProvider', 'step1Installation', 'step1Os', 'step1DeploymentDetails', 'step2WhatHappened', 'step2WhatsExpected', 'step2HowReproduce', 'step2AdditionalDetails', 'step3DocumentationLink', 'step4Title', 'step4Category', 'step4SearchQuery', 'step4Tags'],
+    inputVariables: ['step', 'step2Version', 'step2Type', 'step2Cloud', 'step2CloudProvider', 'step2Installation', 'step2Os', 'step2DeploymentDetails', 'step3WhatHappened', 'step3WhatsExpected', 'step3HowReproduce', 'step3AdditionalDetails', 'step4DocumentationLink', 'step5Title', 'step5Category', 'step5SearchQuery', 'step5Tags'],
   }),
   watch : {
-    // $route() {
-    //   this.setVariablesFromHash()
-    // },
+    msg: function (val) {
+      if (val == null || val.trim().replace(/\.$/, '').trim() == "") {
+        this.msg = ""
+        return
+      } else {
+        if (this.loading) {
+          return
+        } else {
+          var tmp = val.toLowerCase().replace(/\.$/, '').trim()
+          if (tmp.endsWith('send') | tmp.endsWith('sent')) {
+            this.msg = this.msg.split(" ").slice(0, -1).join(" ")
+            this.sendToGrot()
+          } 
+        }
+      }
+    },
+    $route() {
+      this.setVariablesFromHash()
+      //required workaround
+      this.step++;
+      this.step--;
+    },
     step() {
       if (this.step == 5) {
+        this.grotShow = false
         this.askGrotForSummary();
       }
       this.setHash();
+      event('step', {
+        'event-label': this.step,
+        value: 1
+      })
     },
-    installation() {
-      if (this.step1Installation.toLowerCase().includes('simple')) {
-        this.step1DeploymentDetailsDescription = "Please provide command how did you started simple Grafana container.";
+    step2Installation() {
+      if (this.step2Installation && this.step2Installation.toLowerCase().includes('simple')) {
+        this.step2DeploymentDetailsDescription = "Please provide command how did you started simple Grafana container.";
       }
-      if (this.step1Installation.toLowerCase().includes('package')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
+      if (this.step2Installation && this.step2Installation.toLowerCase().includes('package')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
       }
-      if (this.step1Installation.toLowerCase().includes('orchestration')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details about used orchestration configuration, e.g. Kubernetes (used container images, helm charts and their versions, how Grafana service is exposed), Docker Compose (docker-compose yaml file), AWS ECS (ECS task definition).";
+      if (this.step2Installation && this.step2Installation.toLowerCase().includes('orchestration')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details about used orchestration configuration, e.g. Kubernetes (used container images, helm charts and their versions, how Grafana service is exposed), Docker Compose (docker-compose yaml file), AWS ECS (ECS task definition).";
       }
-      if (this.step1Installation.toLowerCase().includes('source')) {
-        this.step1DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
+      if (this.step2Installation && this.step2Installation.toLowerCase().includes('source')) {
+        this.step2DeploymentDetailsDescription = "Please provide more details how do you start your Grafana service.";
       }
     }
   },
   methods: {
+    scrollDown() {
+      return
+      //this.$refs["chat"].scrollIntoView({ behavior: "smooth", block: "end" });
+    },
+    endSpeechRecognition() {
+      this.toggle = false;
+      this.speaking = false;
+      this.micIcon = "mdi-microphone";
+      recognition.stop();
+      recognition.abort();
+    },
+    startSpeechRecognition() {
+      this.toggle = true;
+      this.micIcon = "mdi-microphone-off";
+      recognition.lang = this.lang;
+      recognition.continuous = true;
+      recognition.interimResults = false;
+      recognition.maxAlternatives = 1;
+
+      recognition.onend = (event) => {
+        if (this.toggle) {
+          this.startSpeechRecognition()
+        } else {
+          this.toggle = false;
+          this.speaking = false;
+          this.micIcon = "mdi-microphone";
+        }
+      };
+
+      recognition.onresult = (event) => {
+        if (typeof event.results === "undefined") {
+          recognition.stop();
+          return;
+        }
+        for (var i = event.resultIndex; i < event.results.length; ++i) {
+          if (event.results[i].isFinal & event.results[i][0].transcript.trim() != "") {
+            this.msg += this.capitalizeFirstLetter(event.results[i][0].transcript).trim() + ". ";
+          }
+        }
+      };
+
+      try {
+        recognition.start();
+      } catch (e) {
+        this.toggle = false
+        console.log(e)
+      }
+    },
+    capitalizeFirstLetter(string) {
+      string = string.trim();
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
+    setDefault() {
+      this.step2Version = null
+      this.step2Type = null
+      this.step2Cloud = null
+      this.step2CloudProvider = null
+      this.step2Installation = null
+      this.step2Os = null
+      this.step2DeploymentDetails = ""
+      this.step2DeploymentDetailsDescription = "Please provide more details about deployment. "
+      this.step3WhatHappened = ""
+      this.step3WhatsExpected = ""
+      this.step3HowReproduce = ""
+      this.step3AdditionalDetails = ""
+      this.step4DocumentationLink = ""
+      this.step5Title = ""
+      this.step5Category = ""
+      this.step5SearchQuery = ""
+      this.step5Tags = ""
+      this.step = 2
+    },
     setMobile() {
       const orientation = window.screen.orientation.type
       if (orientation === "portrait-primary") {
@@ -786,14 +911,24 @@ export default {
       }
     },
     setHash() {
-      var hash = ''
+      var obj = {}
       for (var i = 0; i < this.inputVariables.length; i++) {
         var variable = this.inputVariables[i]
         if (this[variable] != null && this[variable] != "") {
-          hash = hash + "&" + variable + "=" + encodeURIComponent(this[variable])
+          obj[variable] = encodeURIComponent(this[variable]);
         }
       }
-      window.location.hash = hash.substring(1)
+      window.location.hash = rison.encode(obj)
+    },
+    setVariablesFromHash() {
+      var hash = window.location.hash.substring(1)
+      var obj = {}
+      if (hash != null && hash != "") {
+        obj = rison.decode(hash);
+      }
+      for (var variable in obj) {
+        this[variable] = decodeURIComponent(obj[variable]);
+      }
     },
     createSignature(format) {
       if (format=='markdown') {
@@ -801,24 +936,13 @@ export default {
       }
       return '\n\nProblem debugged with Grafana Debugger: ' + window.location.href;
     },
-    setVariablesFromHash() {
-      var hash = window.location.hash.substring(1)
-      var variables = hash.split("&")
-      for (var i = 0; i < variables.length; i++) {
-        var variable = variables[i]
-        var parts = variable.split("=")
-        if (parts.length == 2) {
-          this[parts[0]] = decodeURIComponent(parts[1])
-        }
-      }
-    },
     sendToGrot() {
       if (this.msg == null || this.msg == "") {
         return
       }
       this.loading = true
       this.askGrot(this.msg)
-      this.msg = null
+      this.msg = ""
     },
     initialSendToGrot() {
       this.chat = []
@@ -832,7 +956,7 @@ export default {
       var data = {
         "applicationId": this.grotApplicationId,
         "conversationId": null,
-        "messageContent": "Please suggest title and category and tags and search query for my problem, but don't use 'Enterprise' or 'Open Source' words and Grafana version there and don't use quotes. I have a problem. " + this.getPrompt(),
+        "messageContent": "Please suggest title and category (one term from this list: Installation, Configuration, Authentication, Alerting, Dashboards, Data Links, Live, Explore, Bar Gauge Panel, Bar Chart Panel, Gauge Panel, Geomap Panel, Pie Chart Panel, Stat Panel, Table Panel, Time Series Panel, Prometheus, InfluxDB, Elasticsearch, MySQL, PostgreSQL, MSSQL, Cloudwatch, Graphite, Azure Monitor, Zabbix, Developers & API, Grafana Agent) and tags and search query for my problem, but don't use 'Enterprise' or 'Open Source' words and Grafana version there and don't use quotes. I have a problem. " + this.getPrompt(),
         "isStreaming": false
       };
       fetch(url, {
@@ -844,22 +968,21 @@ export default {
       })
       .then(response => response.json())
       .then(data => {
-        console.log("Grot problem summary: " + data.messages[data.messages.length - 1].content);
         var msg = data.messages[data.messages.length - 1].content;
         var lines = msg.split("\n");
         for (var i = 0; i < lines.length; i++) {
           var line = lines[i];
           if (line.startsWith("Title: ")) {
-            this.step4Title = line.substring(7);
+            this.step5Title = line.substring(7);
           }
           if (line.startsWith("Category: ")) {
-            this.step4Category = line.substring(10);
+            this.step5Category = line.substring(10);
           }
           if (line.startsWith("Search Query: ")) {
-            this.step4SearchQuery = line.substring(14).replace("Enteprise ", "").replace("Open Source ", "");
+            this.step5SearchQuery = line.substring(14).replace("Enteprise ", "").replace("Open Source ", "");
           }
           if (line.startsWith("Tags: ")) {
-            this.step4Tags = line.substring(6).replace(" ","").toLowerCase();
+            this.step5Tags = line.substring(6).replace(" ","").toLowerCase();
           }
         }
         this.setHash();
@@ -875,9 +998,10 @@ export default {
         "conversationId": this.grotConversationId,
         "messageContent": message,
         "isStreaming": false,
-        "role": "system"
       };
       this.chat.push({from: 'user', msg: data.messageContent});
+      this.chat.push({from: 'grot', msg: "Moment, Grot is thinking..."})
+      event('askGrot', { source: 'user' })
       fetch(url, {
         method: 'POST',
         headers: {
@@ -888,11 +1012,14 @@ export default {
       .then(response => response.json())
       .then(data => {
         this.grotConversationId = data.conversationId;
+        this.chat.pop()
         this.chat.push({from: 'grot', msg: data.messages[data.messages.length - 1].content});
         this.loading = false
+        this.scrollDown()
       })
       .catch((error) => {
         console.error('Error:', error);
+        this.chat.pop()
         this.chat.push({from: 'grot', msg: "Error during communication with Grot: " + error});
         this.loading = false
       });
@@ -903,30 +1030,39 @@ export default {
     },
     getPrompt() {
       var deployment;
-      if (this.step1Cloud == 'true') {
-        deployment = `It is managed by ${this.step1CloudProvider}`;
+      if (this.step2Cloud == 'true') {
+        deployment = `It is managed by ${this.step2CloudProvider}`;
+      }
+      if (this.step2Cloud == 'false') {
+        deployment = `It is on-premise (selfhosted) Grafana, ${this.step2Installation} on ${this.step2Os}.`;
+      }
+      if (this.step2Type == null) {
+        this.step2Type = ''
+      }
+      if (this.step2Version == null) {
+        this.step2Version = ''
       }
-      if (this.step1Cloud == 'false') {
-        deployment = `It is on-premise (selfhosted) Grafana, ${this.step1Installation} on ${this.step1Os}.`;
+      if (deployment == null) {
+        deployment = ''
       }
-      var msg = `### Deployment:\nI have Grafana ${this.step1Type} ${this.step1Version}. ${deployment}`
-      if (this.step1DeploymentDetails!="") {
-        msg = msg + "\n\n### Deployment details:\n" + this.step1DeploymentDetails;
+      var msg = `### Deployment:\nI have Grafana ${this.step2Type} ${this.step2Version}. ${deployment}`
+      if (this.step2DeploymentDetails!="") {
+        msg = msg + "\n\n### Deployment details:\n" + this.step2DeploymentDetails;
       }
-      if (this.step2WhatHappened!="") {
-        msg = msg + "\n\n### Problem, which happened:\n" + this.step2WhatHappened;
+      if (this.step3WhatHappened!="") {
+        msg = msg + "\n\n### Problem, which happened:\n" + this.step3WhatHappened;
       }
-      if (this.step2WhatsExpected!="") {
-        msg = msg + "\n\n### What I expected:\n" + this.step2WhatsExpected;
+      if (this.step3WhatsExpected!="") {
+        msg = msg + "\n\n### What I expected:\n" + this.step3WhatsExpected;
       }
-      if (this.step2HowReproduce!="") {
-        msg = msg + "\n\n### How to reproduce it:\n" + this.step2HowReproduce;
+      if (this.step3HowReproduce!="") {
+        msg = msg + "\n\n### How to reproduce it:\n" + this.step3HowReproduce;
       }
-      if (this.step2AdditionalDetails!="") {
-        msg = msg + "\n\n### Additional problem details:\n" + this.step2AdditionalDetails;
+      if (this.step3AdditionalDetails!="") {
+        msg = msg + "\n\n### Additional problem details:\n" + this.step3AdditionalDetails;
       }
-      if (this.step3DocumentationLink!="") {
-        msg = msg + "\n\n### I followed this documentation link(s):\n" + this.step3DocumentationLink;
+      if (this.step4DocumentationLink!="") {
+        msg = msg + "\n\n### I followed this documentation link(s):\n" + this.step4DocumentationLink;
       }
       return msg;
     }
@@ -957,4 +1093,11 @@ export default {
   padding-bottom: 0;
   width: 100%;
 }
+.md-editor-preview-wrapper {
+  word-break: normal;
+}
+</style>
+
+<style lang="less">
+@import '../assets/styles/md.less';
 </style>