Fix TS in Vue demos. Editors (#30893)

Author: GoodDayForSurf

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue

@@ -49,10 +49,12 @@
 
 <script setup lang="ts">
 import { ref, onBeforeMount } from 'vue';
+import { AzureOpenAI } from 'openai';
 import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
 import DxButton from 'devextreme-vue/button';
 import { loadMessages } from 'devextreme-vue/common/core/localization';
-import { AzureOpenAI } from 'openai';
+import { type Events } from 'devextreme-vue/common/core';
+
 import {
   dictionary,
   messages,
@@ -67,40 +69,40 @@ import {
 
 const chatService = new AzureOpenAI(AzureOpenAIConfig);
 
-const typingUsers = ref([]);
-const alerts = ref([]);
+const typingUsers = ref<{ id: string, name: string }[]>([]);
+const alerts = ref<{ message: string }[]>([]);
 const isDisabled = ref(false);
 const copyButtonIcon = ref('copy');
 
 onBeforeMount(() => {
   loadMessages(dictionary);
 });
 
-async function getAIResponse(messages) {
-  const params = {
-    messages,
+async function getAIResponse(messages: DxChatTypes.Message[]): Promise<string> {
+  const params: Record<string, any> = {
+    messages: messages,
     model: AzureOpenAIConfig.deployment,
     max_tokens: 1000,
     temperature: 0.7,
   };
 
-  const response = await chatService.chat.completions.create(params);
+  const response = await chatService.chat.completions.create(params as any);
   const data = { choices: response.choices };
 
-  return data.choices[0].message?.content;
+  return data.choices[0].message?.content || '';
 }
 
-function toggleDisabledState(disabled, event = undefined) {
+function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void {
   isDisabled.value = disabled;
 
   if (disabled) {
-    event?.target.blur();
+    (event?.target as HTMLElement)?.blur();
   } else {
-    event?.target.focus();
+    (event?.target as HTMLElement)?.focus();
   }
 }
 
-function updateLastMessage(text = REGENERATION_TEXT) {
+function updateLastMessage(text: string = REGENERATION_TEXT): void {
   const items = dataSource.items();
   const lastMessage = items.at(-1);
 
@@ -111,7 +113,7 @@ function updateLastMessage(text = REGENERATION_TEXT) {
   }]);
 }
 
-function renderAssistantMessage(text) {
+function renderAssistantMessage(text: string): void {
   const message = {
     id: Date.now(),
     timestamp: new Date(),
@@ -122,7 +124,7 @@ function renderAssistantMessage(text) {
   dataSource.store().push([{ type: 'insert', data: message }]);
 }
 
-async function processMessageSending(message, event) {
+async function processMessageSending(message: DxChatTypes.TextMessage, event: Events.EventObject | undefined): Promise<void> {
   toggleDisabledState(true, event);
 
   messages.push({ role: 'user', content: message.text });
@@ -145,7 +147,7 @@ async function processMessageSending(message, event) {
   }
 }
 
-function alertLimitReached() {
+function alertLimitReached(): void {
   alerts.value = [{
     message: 'Request limit reached, try again in a minute.',
   }];
@@ -155,7 +157,7 @@ function alertLimitReached() {
   }, ALERT_TIMEOUT);
 }
 
-async function regenerate() {
+async function regenerate(): Promise<void> {
   toggleDisabledState(true);
 
   try {
@@ -171,15 +173,15 @@ async function regenerate() {
   }
 }
 
-function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent) {
+function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent): void {
   dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
 
   if (!alerts.value.length) {
     processMessageSending(message, event);
   }
 }
 
-function onCopyButtonClick(message) {
+function onCopyButtonClick(message: { text: string }): void {
   navigator.clipboard?.writeText(message.text);
   copyButtonIcon.value = 'check';
 
@@ -188,7 +190,7 @@ function onCopyButtonClick(message) {
   }, 2500);
 }
 
-function onRegenerateButtonClick() {
+function onRegenerateButtonClick(): void {
   updateLastMessage();
   regenerate();
 }

apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts

@@ -1,4 +1,5 @@
 import { CustomStore, DataSource } from 'devextreme-vue/common/data';
+import { type DxChatTypes } from 'devextreme-vue/chat';
 import { unified } from 'unified';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
@@ -34,8 +35,8 @@ export const assistant = {
   name: 'Virtual Assistant',
 };
 
-export const store = [];
-export const messages = [];
+export const messages: DxChatTypes.Message[] = [];
+const store: DxChatTypes.Message[] = [];
 
 const customStore = new CustomStore({
   key: 'id',
@@ -44,7 +45,7 @@ const customStore = new CustomStore({
       resolve([...store]);
     }, 0);
   }),
-  insert: (message) => new Promise((resolve) => {
+  insert: (message: DxChatTypes.Message) => new Promise((resolve) => {
     setTimeout(() => {
       store.push(message);
       resolve(message);

apps/demos/Demos/Chat/Customization/Vue/App.vue

@@ -82,7 +82,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxChat from 'devextreme-vue/chat';
+import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
 import DxCheckBox from 'devextreme-vue/check-box';
 import DxSelectBox from 'devextreme-vue/select-box';
 import {
@@ -103,7 +103,7 @@ const dayHeaderFormat = ref(headerFormats[0]);
 const messageTimestampFormat = ref(messageFormats[0]);
 const isDisabled = ref(false);
 
-function onMessageEntered(event) {
+function onMessageEntered(event: DxChatTypes.MessageEnteredEvent): void {
   messages.value = [...messages.value, event.message];
 }
 

apps/demos/Demos/Chat/Customization/Vue/data.ts

@@ -1,7 +1,9 @@
+import type { DxChatTypes } from "devextreme-vue/chat";
+
 const date = new Date();
 date.setHours(0, 0, 0, 0);
 
-function getTimestamp(date, offsetMinutes = 0) {
+function getTimestamp(date: Date, offsetMinutes: number = 0) {
   return date.getTime() + offsetMinutes * 60000;
 }
 
@@ -16,7 +18,7 @@ export const supportAgent = {
   avatarUrl: '../../../../images/petersmith.png',
 };
 
-export const messages = [
+export const messages: Array<DxChatTypes.Message> = [
   {
     timestamp: getTimestamp(date, -9),
     author: supportAgent,

apps/demos/Demos/Chat/MessageEditing/Vue/App.vue

@@ -44,8 +44,8 @@
 
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import { DxChat, DxEditing } from 'devextreme-vue/chat';
-import { DxSelectBox } from 'devextreme-vue/select-box';
+import { DxChat, DxEditing, type DxChatTypes } from 'devextreme-vue/chat';
+import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import { Guid } from 'devextreme-vue/common';
 import { CustomStore, DataSource } from 'devextreme-vue/common/data';
 import {
@@ -56,12 +56,13 @@ import {
   allowDeletingLabel,
 } from './data.ts';
 
+type CustomStrategyOptions = { component: DxChat['instance'], message: DxChatTypes.Message };
 const store = [...initialMessages];
 
 const customStore = new CustomStore({
   key: 'id',
   load: async() => store,
-  insert: async(message) => {
+  insert: async(message: DxChatTypes.Message) => {
     store.push(message);
     return message;
   },
@@ -72,7 +73,7 @@ const dataSource = computed(() => new DataSource({
   paginate: false,
 }));
 
-const onMessageEntered = ({ message }) => {
+const onMessageEntered = ({ message }: DxChatTypes.MessageEnteredEvent) => {
   const newMessage = {
     id: new Guid().toString(),
     ...message,
@@ -87,7 +88,7 @@ const onMessageEntered = ({ message }) => {
   ]);
 };
 
-const onMessageDeleted = ({ message }) => {
+const onMessageDeleted = ({ message }: DxChatTypes.MessageDeletedEvent) => {
   dataSource.value.store().push([
     {
       type: 'update',
@@ -97,7 +98,7 @@ const onMessageDeleted = ({ message }) => {
   ]);
 };
 
-const onMessageUpdated = ({ message, text }) => {
+const onMessageUpdated = ({ message, text }: DxChatTypes.MessageUpdatedEvent) => {
   dataSource.value.store().push([
     {
       type: 'update',
@@ -107,15 +108,17 @@ const onMessageUpdated = ({ message, text }) => {
   ]);
 };
 
-const editingStrategy = {
+const editingStrategy: Record<string, boolean | ((options: CustomStrategyOptions) => boolean)> = {
   enabled: true,
   disabled: false,
-  custom: ({ component, message }) => {
+  custom: ({ component, message }: CustomStrategyOptions) => {
+    if (!component) return;
+    
     const { items, user } = component.option();
-    const userId = user.id;
+    const userId = user?.id;
 
-    const lastNotDeletedMessage = items.findLast(
-      (item) => item.author?.id === userId && !item.isDeleted
+    const lastNotDeletedMessage = items?.findLast(
+      (item: DxChatTypes.Message) => item.author?.id === userId && !item.isDeleted
     );
 
     return message.id === lastNotDeletedMessage?.id;
@@ -128,12 +131,12 @@ const selectedDeletingStrategy = ref('enabled');
 const allowUpdating = ref(editingStrategy[selectedEditingStrategy.value]);
 const allowDeleting = ref(editingStrategy[selectedDeletingStrategy.value]);
 
-const onAllowEditingChange = (event) => {
+const onAllowEditingChange = (event: DxSelectBoxTypes.ValueChangedEvent) => {
   selectedEditingStrategy.value = event.value;
   allowUpdating.value = editingStrategy[event.value];
 };
 
-const onAllowDeletingChange = (event) => {
+const onAllowDeletingChange = (event: DxSelectBoxTypes.ValueChangedEvent) => {
   selectedDeletingStrategy.value = event.value;
   allowDeleting.value = editingStrategy[event.value];
 };

apps/demos/Demos/Chat/MessageEditing/Vue/data.ts

@@ -1,6 +1,7 @@
 import { Guid } from 'devextreme-vue/common';
+import type { DxChatTypes } from "devextreme-vue/chat";
 
-function getTimestamp(date, offsetMinutes = 0): number {
+function getTimestamp(date: Date, offsetMinutes: number = 0) {
   return date.getTime() + offsetMinutes * 60000;
 }
 
@@ -18,7 +19,7 @@ export const supportAgent = {
   avatarUrl: '../../../../images/petersmith.png',
 };
 
-export const messages = [
+export const messages: DxChatTypes.Message[] = [
   {
     id: new Guid().toString(),
     timestamp: getTimestamp(date, -9),

apps/demos/Demos/Chat/Overview/Vue/App.vue

@@ -19,14 +19,14 @@
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxChat from 'devextreme-vue/chat';
+import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
 import { messages as initialMessages, supportAgent, currentUser } from './data.ts';
 
 const messages = ref(initialMessages);
-const userChatTypingUsers = ref([]);
-const supportChatTypingUsers = ref([]);
+const userChatTypingUsers = ref<Record<string, string>[]>([]);
+const supportChatTypingUsers = ref<Record<string, string>[]>([]);
 
-function onMessageEntered(event) {
+function onMessageEntered(event: DxChatTypes.MessageEnteredEvent) {
   messages.value = [...messages.value, event.message];
 }
 

apps/demos/Demos/Chat/Overview/Vue/data.ts

@@ -1,7 +1,9 @@
+import { type DxChatTypes } from "devextreme-vue/chat";
+
 const date = new Date();
 date.setHours(0, 0, 0, 0);
 
-function getTimestamp(date, offsetMinutes = 0) {
+function getTimestamp(date: Date, offsetMinutes: number = 0) {
   return date.getTime() + offsetMinutes * 60000;
 }
 
@@ -16,7 +18,7 @@ export const supportAgent = {
   avatarUrl: '../../../../images/petersmith.png',
 };
 
-export const messages = [
+export const messages: DxChatTypes.Message[] = [
   {
     timestamp: getTimestamp(date, -9),
     author: supportAgent,

apps/demos/Demos/Common/CustomTextEditorButtons/Vue/App.vue

@@ -76,6 +76,7 @@ import { ref } from 'vue';
 import { DxTextBox, DxButton as DxTextBoxButton, type DxTextBoxTypes } from 'devextreme-vue/text-box';
 import { DxNumberBox, DxButton as DxNumberBoxButton } from 'devextreme-vue/number-box';
 import { DxDateBox, DxButton as DxDateBoxButton } from 'devextreme-vue/date-box';
+import { type DxButtonTypes } from 'devextreme-vue/button';
 
 const millisecondsInDay = 24 * 60 * 60 * 1000;
 const passwordMode = ref<DxTextBoxTypes.TextBoxType>('password');
@@ -95,7 +96,7 @@ const currencyButton = {
   elementAttr: {
     class: 'currency',
   },
-  onClick: (e) => {
+  onClick: (e: DxButtonTypes.ClickEvent) => {
     if (e.component.option('text') === '$') {
       e.component.option('text', '€');
       currencyFormat.value = '$ #.##';

apps/demos/Demos/Common/EditorsRightToLeftSupport/Vue/App.vue

@@ -114,7 +114,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from 'vue';
-import DxSelectBox from 'devextreme-vue/select-box';
+import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
 import DxAutocomplete from 'devextreme-vue/autocomplete';
 import DxCheckBox from 'devextreme-vue/check-box';
 import DxSwitch from 'devextreme-vue/switch';
@@ -133,7 +133,7 @@ const displayExpr = ref('nameEn');
 const rtlEnabled = ref(false);
 const textValue = ref('text');
 
-function onLanguageChanged(args) {
+function onLanguageChanged(args: DxSelectBoxTypes.ValueChangedEvent) {
   const isRTL = args.value === languages[0];
 
   displayExpr.value = isRTL ? 'nameAr' : 'nameEn';