From a44630baa1ecf7a8c50298015d2317010f5bd839 Mon Sep 17 00:00:00 2001 From: Akshay Mayekar Date: Mon, 15 Apr 2024 19:16:35 +0530 Subject: [PATCH 1/4] Add report message functionality --- dev/init.js | 11 + package-lock.json | 484 ++++++++++++++++++++++++++++++++++++++++++ src/images/report.svg | 10 + src/layout.html | 12 ++ src/main.js | 130 ++++++++++-- src/style.scss | 84 +++++++- 6 files changed, 714 insertions(+), 17 deletions(-) create mode 100644 package-lock.json create mode 100644 src/images/report.svg diff --git a/dev/init.js b/dev/init.js index d9d8695..5567427 100644 --- a/dev/init.js +++ b/dev/init.js @@ -98,6 +98,7 @@ async function sendMessage(message, optionalFiles) { }, }; let arrayResponse = [ + { requestId: "request-id" }, { type: "text", message: "Message **One**" }, { type: "text", message: "Message 2" }, { type: "text", message: "Message 3" }, @@ -105,6 +106,12 @@ async function sendMessage(message, optionalFiles) { return Promise.resolve(arrayResponse); } +async function reportMessage(messageId, payload, message) { + console.log("messageId " + messageId); + console.log("message " + message); + console.log("payload :>> ", JSON.parse(payload)); +} + const chat = TarkaChat.init({ title: "Stocks Advisor", botName: "Stad", @@ -115,6 +122,10 @@ const chat = TarkaChat.init({ generateUploadPreview: generateImageThumbnail, preChatRenderer: getPreChatScreen, submitHandler: sendMessage, + reportMessage: { + reportType: "ONLY_LAST_MESSAGE", + handle: reportMessage, + }, expand: true, }); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..38498b4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,484 @@ +{ + "name": "tarka-chat", + "version": "2.4.1", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "tarka-chat", + "version": "2.4.1", + "dependencies": { + "@ctrl/tinycolor": "^4.0.2", + "lottie-web": "^5.12.2", + "marked": "^12.0.1" + }, + "devDependencies": { + "prettier": "3.2.5", + "sass": "^1.68.0", + "vite": "^4.4.5", + "vite-plugin-css-injected-by-js": "^3.3.0" + } + }, + "node_modules/@ctrl/tinycolor": { + "version": "4.0.2", + "license": "MIT", + "engines": { + "node": ">=14" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz", + "integrity": "sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.5.3", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", + "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + ], + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/esbuild": { + "version": "0.18.20", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz", + "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.18.20", + "@esbuild/android-arm64": "0.18.20", + "@esbuild/android-x64": "0.18.20", + "@esbuild/darwin-arm64": "0.18.20", + "@esbuild/darwin-x64": "0.18.20", + "@esbuild/freebsd-arm64": "0.18.20", + "@esbuild/freebsd-x64": "0.18.20", + "@esbuild/linux-arm": "0.18.20", + "@esbuild/linux-arm64": "0.18.20", + "@esbuild/linux-ia32": "0.18.20", + "@esbuild/linux-loong64": "0.18.20", + "@esbuild/linux-mips64el": "0.18.20", + "@esbuild/linux-ppc64": "0.18.20", + "@esbuild/linux-riscv64": "0.18.20", + "@esbuild/linux-s390x": "0.18.20", + "@esbuild/linux-x64": "0.18.20", + "@esbuild/netbsd-x64": "0.18.20", + "@esbuild/openbsd-x64": "0.18.20", + "@esbuild/sunos-x64": "0.18.20", + "@esbuild/win32-arm64": "0.18.20", + "@esbuild/win32-ia32": "0.18.20", + "@esbuild/win32-x64": "0.18.20" + } + }, + "node_modules/fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/immutable": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", + "integrity": "sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==", + "dev": true, + "license": "MIT" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/lottie-web": { + "version": "5.12.2", + "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.12.2.tgz", + "integrity": "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==", + "license": "MIT" + }, + "node_modules/marked": { + "version": "12.0.1", + "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.1.tgz", + "integrity": "sha512-Y1/V2yafOcOdWQCX0XpAKXzDakPOpn6U0YLxTJs3cww6VxOzZV1BTOOYWLvH3gX38cq+iLwljHHTnMtlDfg01Q==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/nanoid": { + "version": "3.3.6", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", + "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.4.30", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prettier": { + "version": "3.2.5", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz", + "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/rollup": { + "version": "3.29.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.29.3.tgz", + "integrity": "sha512-T7du6Hum8jOkSWetjRgbwpM6Sy0nECYrYRSmZjayFcOddtKJWU4d17AC3HNUk7HRuqy4p+G7aEZclSHytqUmEg==", + "dev": true, + "license": "MIT", + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=14.18.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/sass": { + "version": "1.68.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.68.0.tgz", + "integrity": "sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": ">=3.0.0 <4.0.0", + "immutable": "^4.0.0", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.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", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/vite": { + "version": "4.4.9", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.18.10", + "postcss": "^8.4.27", + "rollup": "^3.27.1" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + }, + "peerDependencies": { + "@types/node": ">= 14", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/vite-plugin-css-injected-by-js": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/vite-plugin-css-injected-by-js/-/vite-plugin-css-injected-by-js-3.3.0.tgz", + "integrity": "sha512-xG+jyHNCmUqi/TXp6q88wTJGeAOrNLSyUUTp4qEQ9QZLGcHWQQsCsSSKa59rPMQr8sOzfzmWDd8enGqfH/dBew==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "vite": ">2.0.0-0" + } + } + } +} diff --git a/src/images/report.svg b/src/images/report.svg new file mode 100644 index 0000000..a47d003 --- /dev/null +++ b/src/images/report.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/layout.html b/src/layout.html index 0ababdd..9bf11e2 100644 --- a/src/layout.html +++ b/src/layout.html @@ -7,6 +7,18 @@
+
+ +
+ + +
+
diff --git a/src/main.js b/src/main.js index 468b6bc..25ace20 100644 --- a/src/main.js +++ b/src/main.js @@ -1,9 +1,10 @@ -import "./style.scss"; -import layout from "./layout.html?raw"; import lottie from "lottie-web"; +import { configHighcharts, createHighchartsNode } from "./highcharts"; +import reportIcon from "./images/report.svg"; +import layout from "./layout.html?raw"; import animationData from "./logo.json"; import { renderPreChat } from "./prechat"; -import { configHighcharts, createHighchartsNode } from "./highcharts"; +import "./style.scss"; import { createFileAttachmentNode, createImageNode, @@ -14,6 +15,15 @@ import { const INITIAL_STATE = false; +const AVAILABLE_DATA_TYPES = [ + "text", + "file", + "image", + "table", + "highchart-config", + "thumbnails", +]; + configHighcharts(); function loadLottie(element) { @@ -43,6 +53,7 @@ export default { this.enableUpload = config.enableUpload ?? false; this.uploadTypes = config.uploadTypes; this.generateUploadPreview = config.generateUploadPreview; + this.reportMessage = config.reportMessage || undefined; setThemeColors(config.themeColor); this.render(config.submitHandler); @@ -158,7 +169,7 @@ export default { this.insertMessage(text, false); } const response = await submitHandler(text, optionalFiles); - this.insertMessage(response, true); + this.insertMessage(response, true, !!this.reportMessage); setProcessing(false); const previewsContainer = document.querySelector( @@ -175,12 +186,50 @@ export default { this.setupLaucher(); loadLottie(document.querySelector("#tarka-chat .logo")); document.querySelector("#tarka-chat .title").textContent = this.title; - this.insertMessage(this.greeting, true); + this.insertMessage(this.greeting, true, false); const uploadBtn = document.querySelector("#tarka-chat .upload-btn"); const uploadInput = document.querySelector("#tarka-chat .upload-input"); const sendBtn = document.querySelector("#tarka-chat .send-btn"); const msgInput = document.querySelector("#tarka-chat .chat-input"); + const cancelButton = document.querySelector(".cancel-btn"); + const reportButton = document.querySelector(".report-btn"); + + cancelButton.addEventListener("click", () => { + const messageContainer = document.querySelector( + "#tarka-chat .message-container", + ); + const footer = document.querySelector(".footer"); + const reportDialog = document.querySelector(".report-dialog"); + const reportText = document.querySelector(".report-dialog .report-text"); + reportText.value = ""; + reportDialog.style.display = "none"; + messageContainer.classList.remove("blur-background"); + footer.classList.remove("blur-background"); + }); + + reportButton.addEventListener("click", () => { + const messageContainer = document.querySelector( + "#tarka-chat .message-container", + ); + const footer = document.querySelector(".footer"); + const reportDialog = document.querySelector(".report-dialog"); + const reportMessageInput = document.querySelector( + ".report-dialog .report-text", + ); + + const messageId = reportButton.getAttribute("data-id"); + const wrapper = document.querySelector(`#${messageId}`); + + this.reportMessage.handle( + messageId, + wrapper.getAttribute("data-payload"), + reportMessageInput.value, + ); + reportDialog.style.display = "none"; + messageContainer.classList.remove("blur-background"); + footer.classList.remove("blur-background"); + }); if (this.enableUpload) { uploadBtn.style.display = "block"; @@ -257,28 +306,85 @@ export default { } }, - insertMessage(data = "", incoming = false) { + handleReportMessage(messageId) { + const messageContainer = document.querySelector( + "#tarka-chat .message-container", + ); + const footer = document.querySelector(".footer"); + const reportDialog = document.querySelector(".report-dialog"); + const reportButton = document.querySelector(".report-dialog .report-btn"); + messageContainer.classList.add("blur-background"); + footer.classList.add("blur-background"); + reportButton.setAttribute("data-id", messageId); + reportDialog.style.display = "flex"; + }, + + insertMessage(data = "", incoming = false, showReportMessage = false) { const messageContainer = document.querySelector( "#tarka-chat .message-container", ); const wrapper = this.createNode("wrapper"); + wrapper.id = `msg-${Date.now()}`; + wrapper.setAttribute("data-payload", JSON.stringify(data)); if (Array.isArray(data)) { - data.forEach((d) => { - wrapper.appendChild(this.createNodeByType(d)); - }); + data + .filter( + (d) => + typeof data === "string" || AVAILABLE_DATA_TYPES.includes(d.type), + ) + .forEach((d) => { + wrapper.appendChild(this.createNodeByType(d)); + }); } else if (typeof data === "string" || typeof data === "object") { wrapper.appendChild(this.createNodeByType(data)); } - wrapper.appendChild( - this.createNode("message-meta", incoming ? this.botName : "You"), - ); + const messageMeta = this.createNode("message-meta"); + if (incoming) { + const usernameSpan = document.createElement("span"); + usernameSpan.className = "username"; + usernameSpan.innerHTML = this.botName; + messageMeta.appendChild(usernameSpan); + + if (showReportMessage) { + const reportSpan = document.createElement("span"); + reportSpan.className = "report-icon"; + reportSpan.setAttribute( + "data-tooltip", + "Report unsatisfactory response", + ); + reportSpan.innerHTML = `Thumbs Down`; + reportSpan.onclick = () => { + const wrapperId = reportSpan.closest(".wrapper").id; + this.handleReportMessage(wrapperId); + }; + messageMeta.appendChild(reportSpan); + } + } else { + messageMeta.innerHTML = `You`; + } + wrapper.appendChild(messageMeta); + const msg = this.createNode( `message ${incoming ? "incoming" : "outgoing"}`, ); msg.appendChild(wrapper); messageContainer.appendChild(msg); + + this.updateReportIcon(); messageContainer.lastElementChild.scrollIntoView(); }, + + updateReportIcon() { + const incomingMessages = document.querySelectorAll(".message.incoming"); + if (this.reportMessage.reportType === "ONLY_LAST_MESSAGE") { + incomingMessages.forEach((message, index) => { + const reportIcon = message.querySelector(".report-icon"); + if (index !== incomingMessages.length - 1 && !!reportIcon) { + reportIcon.style.display = "none"; + } + }); + } + }, }; diff --git a/src/style.scss b/src/style.scss index d2bc9fc..f110217 100644 --- a/src/style.scss +++ b/src/style.scss @@ -58,6 +58,11 @@ } } + .blur-background { + filter: blur(5px); + pointer-events: none; + } + .body { background: var(--gradient-background); padding: 0px 24px; @@ -94,6 +99,28 @@ margin: 4px 0; } + .report-icon { + display: inline-block; + color: red; + margin-left: 5px; + cursor: pointer; + font-size: 14px; + font-weight: bold; + + &:hover::after { + content: attr(data-tooltip); + position: absolute; + background-color: rgba(0, 0, 0, 0.8); + color: white; + padding: 5px; + border-radius: 3px; + font-size: 12px; + margin-left: 10px; + white-space: nowrap; + z-index: 1; + } + } + .attachment { display: flex; align-items: center; @@ -148,21 +175,22 @@ border-radius: 15px; overflow-x: auto; - table { border-collapse: collapse; border-radius: 5px; min-width: 100%; } - th,td { + th, + td { white-space: nowrap; padding: 5px; - - border-right: 1px solid var(--primary-primary-subtle, #f0dafb); + + border-right: 1px solid var(--primary-primary-subtle, #f0dafb); border-bottom: 1px solid var(--primary-primary-subtle, #f0dafb); } - th:last-child,td:last-child { + th:last-child, + td:last-child { border-right: 0px solid var(--primary-primary-subtle, #f0dafb); /* Left-most border for the first cell */ } } @@ -211,6 +239,8 @@ font-weight: 400; line-height: 14px; letter-spacing: 0.12px; + display: flex; + align-items: center; } } @@ -223,6 +253,50 @@ color: var(--primary-primary); } } + + .report-dialog { + position: absolute; + width: 70%; + height: 30%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border: 1px solid #ccc; + border-radius: 12px; + z-index: 9999; + display: none; + flex-direction: column; + + .report-text { + width: 93%; + margin-bottom: 10px; + resize: none; + border: 1px solid var(--primary-primary-subtle, #9500b3); + border-radius: 8px; + padding: 10px; + font-size: 16px; + font-weight: 500; + } + + .button-container { + display: flex; + justify-content: right; + + button { + background-color: var(--primary-primary, #9500b3); + color: #fff; + border: none; + padding: 8px 16px; + font-size: 14px; + cursor: pointer; + margin-left: 10px; + border: 1px solid var(--primary-primary, #9500b3); + border-radius: 5px; + } + } + } } .footer { From b2164e7ace3526c953aeb88c8220cfdff2b93ad4 Mon Sep 17 00:00:00 2001 From: Akshay Mayekar Date: Mon, 15 Apr 2024 19:54:42 +0530 Subject: [PATCH 2/4] Add readme for report message --- README.md | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/README.md b/README.md index 9693277..70bdab4 100644 --- a/README.md +++ b/README.md @@ -123,6 +123,28 @@ where, ] ``` +- [Optional] **reportMessage** Set this config when you want to report any incoming messages. + + Config: + ``` + { + reportType: "REPORT_MESSAGE_TYPE", + handle: (messsageId, payload, feedbackMessage) => { + // messageId: unique message id generated by tarka chat + // payload: It's the same response payload being shown in tarka chat. + // feedbackMessage: The feedback message. + + // TODO: YOUR_BUSINESS_LOGIC + }, + } + ``` + + where, + - Available report types are: + ALL: To report any incoming message + ONLY_LAST_MESSAGE: To report only last message + + ## Demo Demo is deployed from the application code in `demo/` folder. From 3216d0a6f6d580ae07971ed45ac7741a83ae6e7c Mon Sep 17 00:00:00 2001 From: Akshay Mayekar Date: Tue, 16 Apr 2024 13:16:46 +0530 Subject: [PATCH 3/4] Parsing the data attribute of wrapper before returning --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 25ace20..13b2f9b 100644 --- a/src/main.js +++ b/src/main.js @@ -223,7 +223,7 @@ export default { this.reportMessage.handle( messageId, - wrapper.getAttribute("data-payload"), + JSON.parse(wrapper.getAttribute("data-payload")), reportMessageInput.value, ); reportDialog.style.display = "none"; From d184024ff0aa7927c555778be69af62bee1b8164 Mon Sep 17 00:00:00 2001 From: Akshay Mayekar Date: Tue, 16 Apr 2024 13:23:00 +0530 Subject: [PATCH 4/4] Fixed issue with reportMessage not present --- src/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.js b/src/main.js index 13b2f9b..9c50ceb 100644 --- a/src/main.js +++ b/src/main.js @@ -378,7 +378,7 @@ export default { updateReportIcon() { const incomingMessages = document.querySelectorAll(".message.incoming"); - if (this.reportMessage.reportType === "ONLY_LAST_MESSAGE") { + if (this.reportMessage && this.reportMessage.reportType === "ONLY_LAST_MESSAGE") { incomingMessages.forEach((message, index) => { const reportIcon = message.querySelector(".report-icon"); if (index !== incomingMessages.length - 1 && !!reportIcon) {