Merge pull request #43 from tarkalabs/v2

Merge all of v2 branch to main

.github/workflows/bump-version.yaml

@@ -23,7 +23,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
 
       - name: Bump version
         run: |
@@ -52,4 +52,4 @@ jobs:
           git config user.email "[email protected]"
           git add package.json dist/
           git commit -m "Bump version to ${{ steps.get_version.outputs.version }}"
-          git push origin HEAD:v2
+          git push origin HEAD:v2

.nvmrc

@@ -0,0 +1 @@
+18.19.0

.prettierrc

@@ -0,0 +1 @@
+{}

README.md

@@ -2,15 +2,20 @@
 
 Tarka Chat UI is a plug and play javascript library to integrate a chat assistant to your website in one line
 
-
 ## Usage
 
 1. Incude the following script (hosted in CDN) in your html
 
- ```
- <script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.0.2.umd.js"></script>
- ```
+```
+<script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.2.1.umd.js"></script>
+```
 
+Include highcharts library to generate charts by highcharts
+
+```
+<script src="https://code.highcharts.com/highcharts.js"></script>
+<script src="https://code.highcharts.com/modules/exporting.js"></script>
+```
 
 2. Initialise the global `TarkaChat` component with options in any script tag
 
@@ -22,6 +27,7 @@ TarkaChat.init({
         themeColor: "#F0DAFB",
         selectorId: "chatbot",
         expand: true,
+        enableUpload: true,
         preChatRenderer: function (onClose) {
           // Return a DOM Node that can be attached to the chatbot UI
           // Use the onClose callback to close the pre-chat screen
@@ -43,20 +49,92 @@ where,
 - [Optional] **title** is the title of the chatbot window
 - [Optional] **botName** will be displayed below each bot message
 - [Optional] **expand** opens the chat window in expanded mode on init when set to true, otherwise opens in collapse mode. Defaults to false.
+- [Optional] **enableUpload** will show the option to upload a file when set to true. False by default
 - **greeting** will be the first message displayed on the chatbot when opened for the first time
 - **themeColor** will set the color scheme of the chat window
 - **selectorId** the DOM element selector (id) inside which the bot will be rendered
 - **submitHandler** this function will be called whenever a user types a message in the bot and submits
-
+  Returned response from submitHandler should be one the below types:
+
+  1. _String_
+  2. One of the below objects:
+
+  - _Text type:_
+
+  ```
+    {
+        "type": "text",
+        "message": "MESSAGE"
+    }
+  ```
+
+  - _File type:_
+
+  ```
+    {
+      "type": "file",
+      "link": "LINK_TO_FILE",
+      "name": "FILE_NAME",
+    }
+  ```
+
+  - _Image type:_
+
+  ```
+    {
+      "type": "image",
+      "link": "LINK_TO_IMAGE",
+      "name": "IMAGE_NAME",
+    }
+  ```
+
+  - _HighCharts config type:_
+
+  ```
+    {
+      "type": "highchart-config",
+      "high_chart_config": { highcharts_config_obj  }
+    }
+  ```
+
+  - _Table type:_
+
+  ```
+    {
+      "type": "table",
+      "table_data": { "header":[],"rows":[{}] }
+    }
+  ```
+
+  3. _Array containing one/multiple of above mentioned types:_
+     E.g.
+
+  ```
+  [
+    {
+      "type": "text",
+      "message": "MESSAGE"
+    },
+    {
+      "type": "file",
+      "link": "LINK_TO_FILE",
+      "name": "FILE_NAME",
+    }
+  ]
+  ```
 
 ## Demo
 
 Demo is deployed from the application code in `demo/` folder.
 Link: https://tarkalabs.github.io/tarka-chat/demo/
 
+## Dev notes
+
+If you wanted to run this code in your local for development purposes, Run the following command from project root folder `yarn dev` and open `dev/index.html` in your browser to see the chat window. Your local changes will be hot reloaded
+
 ## Old versions
 
-* v1.1 : https://d1fmfone96g0x2.cloudfront.net/tarka-chat-1.1.umd.js
-* v1.0 : https://d1fmfone96g0x2.cloudfront.net/tarka-chat-1.1.umd.js
+- v1.1 : https://d1fmfone96g0x2.cloudfront.net/tarka-chat-1.1.umd.js
+- v1.0 : https://d1fmfone96g0x2.cloudfront.net/tarka-chat-1.1.umd.js
 
 Check [release notes](RELEASE.md) for details

demo/index.html

@@ -12,8 +12,10 @@
       }
     </style>
 
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
     <!-- Include this javscript -->
-    <script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.0.2.umd.js"></script>
+    <script src="https://d1fmfone96g0x2.cloudfront.net/tarka-chat-2.2.1.umd.js"></script>
   </head>
   <body>
     <div class="container">

dev/index.html

@@ -3,6 +3,8 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+    <script src="https://code.highcharts.com/modules/exporting.js"></script>
     <title>TarkaChat DevMode</title>
   </head>
   <body>

dev/init.js

@@ -1,5 +1,20 @@
 import TarkaChat from "../src/main.js";
-import "./style.css"
+import "./style.css";
+
+const UPLOAD_TYPES = ["image/png", "image/jpeg"];
+
+function generateImageThumbnail(file) {
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = function (e) {
+      const thumbnail = document.createElement("img");
+      thumbnail.src = e.target.result;
+      thumbnail.alt = file.name;
+      resolve(thumbnail);
+    };
+    reader.readAsDataURL(file);
+  });
+}
 
 function getPreChatScreen(onClose) {
   const title = document.createElement("h3");
@@ -16,11 +31,73 @@ function getPreChatScreen(onClose) {
   return container;
 }
 
-async function sendMessage(message) {
+async function sendMessage(message, optionalFiles) {
+  console.log(optionalFiles);
   // Do API calls
-  await new Promise((resolve) => setTimeout(resolve, 3000));
-  // after getting response
-  return Promise.resolve("Recieved: " + message);
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+
+  // after getting response use any one of the following to simulate different types of responses
+  let textResponse =
+    "This is a **markdown** __enabled__ text response \n * First \n * Second";
+  let textObjResponse = { type: "text", message: "hi tehreee" };
+  let fileObjResponse = {
+    type: "file",
+    name: "tarka trends",
+    link: "https://tarkalabs.com",
+  };
+  let imageObjResponse = {
+    type: "image",
+    name: "tarka logo",
+    link: "https://tarkalabs.com/assets/img/teamg2.94f91078.jpg",
+  };
+  let tableObjResponse = {
+    type: "table",
+    table_data: {
+      header: ["col1", "col2"],
+      rows: [
+        { col1: "a", col2: 1 },
+        { col1: "b", col2: 2 },
+      ],
+    },
+  };
+  let blankTableObjResponse = {
+    type: "table",
+    table_data: {
+      header: ["col1", "col2"],
+      rows: [],
+    },
+  };
+  let highchartsResponse = {
+    type: "highchart-config",
+    high_chart_config: {
+      chart: {
+        type: "pie",
+      },
+      title: {
+        text: "Browsers market share",
+      },
+      series: [
+        {
+          name: "Brands",
+          data: [
+            {
+              name: "Chrome",
+              y: 70,
+            },
+            {
+              name: "Firefox",
+              y: 20,
+            },
+            {
+              name: "Others",
+              y: 10,
+            },
+          ],
+        },
+      ],
+    },
+  };
+  return Promise.resolve(textResponse);
 }
 
 const chat = TarkaChat.init({
@@ -29,9 +106,11 @@ const chat = TarkaChat.init({
   greeting: "Hello. How can I assist you today?",
   themeColor: "#F0DAFB",
   selectorId: "tarkachatbot",
+  uploadTypes: UPLOAD_TYPES,
+  generateUploadPreview: generateImageThumbnail,
   preChatRenderer: getPreChatScreen,
   submitHandler: sendMessage,
   expand: true,
 });
 
-// chat.toggle(), chat.isOpen()
+// chat.toggle(), chat.isOpen()