feat(chat-demo): added vue demo

DevExpress · Nov 20, 2024 · c305526 · c305526
1 parent 60ab7bb
commit c305526
Show file tree

Hide file tree

Showing 3 changed files with 157 additions and 0 deletions.
diff --git a/apps/demos/Demos/Chat/Overview/Vue/App.vue b/apps/demos/Demos/Chat/Overview/Vue/App.vue
@@ -0,0 +1,124 @@
+<template>
+    <DxChat
+        width="760"
+        height="810"
+        v-model:items="messages"
+        v-model:user="currentUser"
+        v-model:typing-users="userChatTypingUsers"
+        @message-entered="onMessageEntered($event)"
+        @typing-start="userChatTypingStart()"
+        @typing-end="userChatTypingEnd()"
+    ></DxChat>
+    <DxChat
+        width="760"
+        height="810"
+        v-model:items="messages"
+        v-model:user="supportAgent"
+        v-model:typing-users="supportChatTypingUsers"
+        @message-entered="onMessageEntered($event)"
+        @typing-start="supportChatTypingStart()"
+        @typing-end="supportChatTypingEnd()"
+    ></DxChat>
+</template>
+
+<style scoped>
+    #app {
+        height: 100%;
+        padding: 30px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 30px;
+    }
+
+    .dx-avatar {
+        border: 1px solid var(--dx-color-border);
+    }
+
+    .dx-chat-messagegroup.dx-chat-messagegroup-alignment-end {
+    padding-left: 44px;
+    }
+
+    .dx-chat-messagegroup .dx-chat-messagegroup-content {
+        max-width: 82.5%;
+    }
+</style>
+
+<script setup lang="ts">
+    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 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."
+        },
+    ]);
+
+    function onMessageEntered(event) {
+        messages.value = [...messages.value, event.message];
+    }
+
+    function userChatTypingStart() {
+        supportChatTypingUsers.value = [currentUser];
+    }
+    
+    function userChatTypingEnd() {
+        supportChatTypingUsers.value = [];
+    }
+    
+    function supportChatTypingStart() {
+        userChatTypingUsers.value = [supportAgent];
+    }
+    
+    function supportChatTypingEnd() {
+        userChatTypingUsers.value = [];
+    }
+</script>
diff --git a/apps/demos/Demos/Chat/Overview/Vue/index.html b/apps/demos/Demos/Chat/Overview/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/Overview/Vue/index.ts b/apps/demos/Demos/Chat/Overview/Vue/index.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue';
+import App from './App.vue';
+
+createApp(App).mount('#app');