Chat: AI integration demo

DevExpress · Nov 26, 2024 · 82a71b2 · 82a71b2
1 parent d279d2a
commit 82a71b2
Show file tree

Hide file tree

Showing 10 changed files with 485 additions and 0 deletions.
diff --git a/apps/demos/Demos/Chat/AIIntagration/Vue/App.vue b/apps/demos/Demos/Chat/AIIntagration/Vue/App.vue
@@ -0,0 +1,150 @@
+<template>
+  <DxChat
+    v-model:items="messages"
+    v-model:user="currentUser"
+    v-model:typing-users="userChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="userChatTypingStart()"
+    @typing-end="userChatTypingEnd()"
+  />
+  <DxChat
+    v-model:items="messages"
+    v-model:user="supportAgent"
+    v-model:typing-users="supportChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="supportChatTypingStart()"
+    @typing-end="supportChatTypingEnd()"
+  />
+</template>
+
+<script setup lang="ts">
+import { AzureOpenAI } from 'openai';
+import { ref } from 'vue';
+import DxChat from 'devextreme-vue/chat';
+
+const date = new Date();
+date.setHours(0, 0, 0, 0);
+
+function getTimestamp(date, offsetMinutes = 0) {
+  return date.getTime() + offsetMinutes * 60000;
+}
+
+const deployment = 'gpt-4o-mini';
+const apiVersion = '2024-02-01';
+const endpoint = 'https://dx-test-apim.azure-api.net/demo-openai';
+const apiKey = 'DEMO';
+
+const chatService = ref(new AzureOpenAI({
+  dangerouslyAllowBrowser: true,
+  deployment,
+  endpoint,
+  apiVersion,
+  apiKey,
+}));
+
+async function getAIResponse(messages) {
+  const params = {
+    messages,
+    max_tokens: 100,
+    temperature: 0.7,
+  };
+
+  // @ts-expect-error
+  const responseAzure = await chatService.value.chat.completions.create(params);
+  const data = { choices: responseAzure.choices };
+
+  return data.choices[0].message?.content;
+}
+
+const currentUser = ref({
+  id: 'c94c0e76-fb49-4b9b-8f07-9f93ed93b4f3',
+  name: 'John Doe',
+});
+
+const supportAgent = ref({
+  id: 'd16d1a4c-5c67-4e20-b7v0e-2991c22747c3',
+  name: 'Support Agent',
+  avatarUrl: '../../../../images/petersmith.png',
+});
+
+const userChatTypingUsers = ref([]);
+const supportChatTypingUsers = ref([]);
+
+const messages = ref([
+  {
+    timestamp: getTimestamp(date, -9),
+    author: supportAgent,
+    text: 'Hello, John!\nHow can I assist you today?',
+  },
+  {
+    timestamp: getTimestamp(date, -7),
+    author: currentUser,
+    text: "Hi, I'm having trouble accessing my account.",
+  },
+  {
+    timestamp: getTimestamp(date, -7),
+    author: currentUser,
+    text: 'It says my password is incorrect.',
+  },
+  {
+    timestamp: getTimestamp(date, -7),
+    author: supportAgent,
+    text: 'I can help with that. Can you please confirm your UserID for security purposes?',
+  },
+  {
+    timestamp: getTimestamp(date, 1),
+    author: currentUser,
+    text: 'john.doe1357',
+  },
+  {
+    timestamp: getTimestamp(date, 1),
+    author: supportAgent,
+    text: '✅ Instructions to restore access have been sent to the email address registered to your account.',
+  },
+]);
+
+async function sendMessage(userInput) {
+  // eslint-disable-next-line no-unused-vars, spellcheck/spell-checker
+  const aiResponse = await getAIResponse({ role: 'user', content: userInput });
+
+  // eslint-disable-next-line no-debugger
+  debugger;
+}
+
+function onMessageEntered(event) {
+  messages.value = [...messages.value, event.message];
+
+  sendMessage(event.message.text);
+}
+
+function userChatTypingStart() {
+  supportChatTypingUsers.value = [currentUser];
+}
+
+function userChatTypingEnd() {
+  supportChatTypingUsers.value = [];
+}
+
+function supportChatTypingStart() {
+  userChatTypingUsers.value = [supportAgent];
+}
+
+function supportChatTypingEnd() {
+  userChatTypingUsers.value = [];
+}
+</script>
+
+<style scoped>
+    #app {
+        display: flex;
+        gap: 20px;
+    }
+
+    .dx-chat {
+        height: 810px;
+    }
+
+    .dx-avatar {
+        border: 1px solid var(--dx-color-border);
+    }
+</style>
diff --git a/apps/demos/Demos/Chat/AIIntagration/Vue/index.html b/apps/demos/Demos/Chat/AIIntagration/Vue/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+
+    <script type="module">
+      import * as vueCompilerSFC from "../../../../node_modules/@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js";
+
+      window.vueCompilerSFC = vueCompilerSFC;
+    </script>
+    <script src="../../../../node_modules/typescript/lib/typescript.js"></script>
+    <script src="../../../../node_modules/core-js/client/shim.min.js"></script>
+    <script src="../../../../node_modules/systemjs/dist/system.js"></script>
+    <script type="text/javascript" src="config.js"></script>
+    <script type="text/javascript">
+      System.import("./index.ts");
+    </script>
+  </head>
+
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="app"> </div>
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/Chat/AIIntagration/Vue/index.ts b/apps/demos/Demos/Chat/AIIntagration/Vue/index.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');
diff --git a/apps/demos/Demos/Chat/AIIntagration/jQuery/index.html b/apps/demos/Demos/Chat/AIIntagration/jQuery/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+  <head>
+    <title>DevExtreme Demo</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" />
+    <script src="../../../../node_modules/jquery/dist/jquery.min.js"></script>
+    <link rel="stylesheet" type="text/css" href="../../../../node_modules/devextreme-dist/css/dx.light.css" />
+    <script type="module">
+      import { AzureOpenAI } from "https://esm.sh/openai";
+
+      window.AzureOpenAI = AzureOpenAI;
+    </script>
+    <script src="../../../../node_modules/devextreme-dist/js/dx.all.js"></script>
+    <link rel="stylesheet" type="text/css" href="styles.css" />
+    <script src="index.js"></script>
+  </head>
+  <body class="dx-viewport">
+    <div class="demo-container">
+      <div id="ai-chat"></div>
+    </div>
+  </body>
+</html>
diff --git a/apps/demos/Demos/Chat/AIIntagration/jQuery/index.js b/apps/demos/Demos/Chat/AIIntagration/jQuery/index.js
@@ -0,0 +1,149 @@
+const deployment = 'gpt-4o-mini';
+const apiVersion = '2024-02-01';
+const endpoint = 'https://dx-test-apim.azure-api.net/demo-openai';
+const apiKey = 'DEMO';
+
+let messages = [];
+
+const user = {
+  id: 'user',
+};
+
+const assistant = {
+  id: 'assistant',
+  name: 'Virtual Assistant',
+};
+
+const copyText = (text) => {
+  navigator.clipboard.writeText(text);
+};
+
+$(() => {
+  const chatService = new AzureOpenAI({
+    dangerouslyAllowBrowser: true,
+    deployment,
+    endpoint,
+    apiVersion,
+    apiKey,
+  });
+
+  const getAIResponse = async (messages) => {
+    const params = {
+      messages: messages,
+      max_tokens: 100,
+      temperature: 0.7,
+    };
+
+    const responseAzure = await chatService.chat.completions.create(params);
+    const data = { choices: responseAzure.choices };
+
+    return data.choices[0].message?.content;
+  }
+
+  DevExpress.localization.loadMessages({
+    "en": {
+      "dxChat-emptyListMessage": "Virtual Assistant",
+      "dxChat-emptyListPrompt": "An AI bot ready to provide instant support for your needs.",
+    },
+  });
+
+  const instance = $("#ai-chat").dxChat({
+    showAvatar: false,
+    user,
+    height: 600,
+    width: 400,
+    onMessageEntered: (e) => {
+      const { component, message } = e;
+
+      component.renderMessage(message);
+
+      sendMessage(message.text);
+    },
+    messageTemplate: (data, element) => {
+      const { message } = data;
+
+      const $textElement = $('<div>')
+        .text(message.text)
+        .appendTo(element);
+
+      const $buttonContainer = $('<div>')
+        .addClass('dx-bubble-button-containder');
+
+      $('<div>')
+        .dxButton({
+          icon: 'copy',
+          stylingMode: 'text',
+          onClick: () => {
+            const text = $textElement.text();
+
+            copyText(text);
+          }
+        })
+        .appendTo($buttonContainer);
+
+      $('<div>')
+        .dxButton({
+          icon: 'refresh',
+          stylingMode: 'text',
+          onClick: () => {
+            refreshAnswer();
+          },
+        })
+        .appendTo($buttonContainer);
+
+      $buttonContainer.appendTo(element)
+    },
+  }).dxChat('instance');
+
+  const renderMessage = (aiResponse) => {
+    const message = {
+      timestamp: new Date(),
+      author: assistant,
+      text: aiResponse,
+    };
+
+    instance.renderMessage(message);
+  };
+
+  const sendMessage = async (userInput) => {
+    messages.push({ role: 'user', content: userInput });
+
+    instance.option({ typingUsers: [ assistant ] });
+
+    const aiResponse = await getAIResponse(messages);
+
+    setTimeout(() => {
+      instance.option({ typingUsers: [] });
+
+      messages.push({ role: 'assistant', content: aiResponse });
+
+      renderMessage(aiResponse);
+    }, 200);
+  }
+
+  const refreshAnswer = async () => {
+    deleteLastMessage();
+
+    instance.option({ typingUsers: [ assistant ] });
+
+    const aiResponse = await getAIResponse(messages);
+
+    setTimeout(() => {
+      instance.option({ typingUsers: [] });
+
+      messages.push({ role: 'assistant', content: aiResponse });
+
+      updateChatInterface(aiResponse);
+    }, 200);
+  }
+
+  const deleteLastMessage = () => {
+    /* Should we use dataSource here? */
+    const items = instance.option('items');
+    const newItems = items.slice(0, -1);
+
+    instance.option({ items: newItems });
+
+    messages = messages.slice(0, -1);
+  }
+});
diff --git a/apps/demos/Demos/Chat/AIIntagration/jQuery/styles.css b/apps/demos/Demos/Chat/AIIntagration/jQuery/styles.css
@@ -0,0 +1,31 @@
+.dx-chat-messagelist-empty-image {
+  display: none;
+}
+
+.dx-chat-messagelist-empty-message {
+  font-size: var(--dx-font-size-heading-5);
+}
+
+.dx-chat-messagelist-empty-prompt {
+  width: 270px;
+}
+
+.dx-chat-messagebubble-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.dx-bubble-button-containder {
+  display: none;
+}
+
+.dx-button {
+  display: inline-block;
+  color: var(--dx-color-icon);
+}
+
+.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-containder {
+  display: flex;
+  gap: 4px;
+  margin-top: 8px;
+}
diff --git a/apps/demos/Demos/Chat/AIIntagration/test-code.js b/apps/demos/Demos/Chat/AIIntagration/test-code.js
@@ -0,0 +1,3 @@
+testUtils
+  .postponeUntilFound('.dx-chat')
+  .then(() => testUtils.findElements('.dx-chat').forEach((x) => { x.style.height = '700px'; }));