Skip to content

Commit 7e920ea

Browse files
GoodDayForSurfGoodDayForSurf
authored
Fix TS in Vue demos (Editors and some other) (#31174)
1 parent 876d89f commit 7e920ea

68 files changed

Lines changed: 492 additions & 373 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 32 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,12 @@
4949

5050
<script setup lang="ts">
5151
import { ref, onBeforeMount } from 'vue';
52+
import { AzureOpenAI } from 'openai';
5253
import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
5354
import DxButton from 'devextreme-vue/button';
5455
import { loadMessages } from 'devextreme-vue/common/core/localization';
55-
import { AzureOpenAI } from 'openai';
56+
import { type Events } from 'devextreme-vue/common/core';
57+
5658
import {
5759
dictionary,
5860
messages,
@@ -67,40 +69,40 @@ import {
6769
6870
const chatService = new AzureOpenAI(AzureOpenAIConfig);
6971
70-
const typingUsers = ref([]);
71-
const alerts = ref([]);
72+
const typingUsers = ref<{ id: string, name: string }[]>([]);
73+
const alerts = ref<{ message: string }[]>([]);
7274
const isDisabled = ref(false);
7375
const copyButtonIcon = ref('copy');
7476
7577
onBeforeMount(() => {
7678
loadMessages(dictionary);
7779
});
7880
79-
async function getAIResponse(messages) {
80-
const params = {
81+
async function getAIResponse(messages: DxChatTypes.Message[]): Promise<string> {
82+
const params: Record<string, any> = {
8183
messages,
8284
model: AzureOpenAIConfig.deployment,
8385
max_tokens: 1000,
8486
temperature: 0.7,
8587
};
8688
87-
const response = await chatService.chat.completions.create(params);
89+
const response = await chatService.chat.completions.create(params as any);
8890
const data = { choices: response.choices };
8991
90-
return data.choices[0].message?.content;
92+
return data.choices[0].message?.content || '';
9193
}
9294
93-
function toggleDisabledState(disabled, event = undefined) {
95+
function toggleDisabledState(disabled: boolean, event?: Events.EventObject): void {
9496
isDisabled.value = disabled;
9597
9698
if (disabled) {
97-
event?.target.blur();
99+
(event?.target as HTMLElement)?.blur();
98100
} else {
99-
event?.target.focus();
101+
(event?.target as HTMLElement)?.focus();
100102
}
101103
}
102104
103-
function updateLastMessage(text = REGENERATION_TEXT) {
105+
function updateLastMessage(text: string = REGENERATION_TEXT): void {
104106
const items = dataSource.items();
105107
const lastMessage = items.at(-1);
106108
@@ -111,7 +113,7 @@ function updateLastMessage(text = REGENERATION_TEXT) {
111113
}]);
112114
}
113115
114-
function renderAssistantMessage(text) {
116+
function renderAssistantMessage(text: string): void {
115117
const message = {
116118
id: Date.now(),
117119
timestamp: new Date(),
@@ -122,7 +124,10 @@ function renderAssistantMessage(text) {
122124
dataSource.store().push([{ type: 'insert', data: message }]);
123125
}
124126
125-
async function processMessageSending(message, event) {
127+
async function processMessageSending(
128+
message: DxChatTypes.TextMessage,
129+
event: Events.EventObject | undefined,
130+
): Promise<void> {
126131
toggleDisabledState(true, event);
127132
128133
messages.push({ role: 'user', content: message.text });
@@ -145,7 +150,7 @@ async function processMessageSending(message, event) {
145150
}
146151
}
147152
148-
function alertLimitReached() {
153+
function alertLimitReached(): void {
149154
alerts.value = [{
150155
message: 'Request limit reached, try again in a minute.',
151156
}];
@@ -155,31 +160,38 @@ function alertLimitReached() {
155160
}, ALERT_TIMEOUT);
156161
}
157162
158-
async function regenerate() {
163+
async function regenerate(): Promise<void> {
159164
toggleDisabledState(true);
165+
const lastMessage = messages.at(-1);
160166
161167
try {
162168
const aiResponse = await getAIResponse(messages.slice(0, -1));
163169
164170
updateLastMessage(aiResponse);
165-
messages.at(-1).content = aiResponse;
171+
172+
if (lastMessage?.content) {
173+
lastMessage.content = aiResponse;
174+
}
166175
} catch {
167-
updateLastMessage(messages.at(-1).content);
176+
if (lastMessage?.content) {
177+
updateLastMessage(lastMessage.content);
178+
}
179+
168180
alertLimitReached();
169181
} finally {
170182
toggleDisabledState(false);
171183
}
172184
}
173185
174-
function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent) {
186+
function onMessageEntered({ message, event }: DxChatTypes.MessageEnteredEvent): void {
175187
dataSource.store().push([{ type: 'insert', data: { id: Date.now(), ...message } }]);
176188
177189
if (!alerts.value.length) {
178190
processMessageSending(message, event);
179191
}
180192
}
181193
182-
function onCopyButtonClick(message) {
194+
function onCopyButtonClick(message: { text: string }): void {
183195
navigator.clipboard?.writeText(message.text);
184196
copyButtonIcon.value = 'check';
185197
@@ -188,7 +200,7 @@ function onCopyButtonClick(message) {
188200
}, 2500);
189201
}
190202
191-
function onRegenerateButtonClick() {
203+
function onRegenerateButtonClick(): void {
192204
updateLastMessage();
193205
regenerate();
194206
}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { CustomStore, DataSource } from 'devextreme-vue/common/data';
2+
import { type DxChatTypes } from 'devextreme-vue/chat';
23
import { unified } from 'unified';
34
import remarkParse from 'remark-parse';
45
import remarkRehype from 'remark-rehype';
@@ -34,17 +35,17 @@ export const assistant = {
3435
name: 'Virtual Assistant',
3536
};
3637

37-
export const store = [];
38-
export const messages = [];
38+
export const messages: DxChatTypes.Message[] = [];
39+
const store: DxChatTypes.Message[] = [];
3940

40-
const customStore = new CustomStore({
41+
const customStore = new CustomStore<DxChatTypes.Message>({
4142
key: 'id',
4243
load: () => new Promise((resolve) => {
4344
setTimeout(() => {
4445
resolve([...store]);
4546
}, 0);
4647
}),
47-
insert: (message) => new Promise((resolve) => {
48+
insert: (message: DxChatTypes.Message) => new Promise((resolve) => {
4849
setTimeout(() => {
4950
store.push(message);
5051
resolve(message);

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@
8282

8383
<script setup lang="ts">
8484
import { ref } from 'vue';
85-
import DxChat from 'devextreme-vue/chat';
85+
import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
8686
import DxCheckBox from 'devextreme-vue/check-box';
8787
import DxSelectBox from 'devextreme-vue/select-box';
8888
import {
@@ -103,7 +103,7 @@ const dayHeaderFormat = ref(headerFormats[0]);
103103
const messageTimestampFormat = ref(messageFormats[0]);
104104
const isDisabled = ref(false);
105105
106-
function onMessageEntered(event) {
106+
function onMessageEntered(event: DxChatTypes.MessageEnteredEvent): void {
107107
messages.value = [...messages.value, event.message];
108108
}
109109

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import type { DxChatTypes } from "devextreme-vue/chat";
2+
13
const date = new Date();
24
date.setHours(0, 0, 0, 0);
35

4-
function getTimestamp(date, offsetMinutes = 0) {
6+
function getTimestamp(date: Date, offsetMinutes: number = 0) {
57
return date.getTime() + offsetMinutes * 60000;
68
}
79

@@ -16,7 +18,7 @@ export const supportAgent = {
1618
avatarUrl: '../../../../images/petersmith.png',
1719
};
1820

19-
export const messages = [
21+
export const messages: DxChatTypes.Message[] = [
2022
{
2123
timestamp: getTimestamp(date, -9),
2224
author: supportAgent,

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

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@
4444

4545
<script setup lang="ts">
4646
import { ref, computed } from 'vue';
47-
import { DxChat, DxEditing } from 'devextreme-vue/chat';
48-
import { DxSelectBox } from 'devextreme-vue/select-box';
47+
import { DxChat, DxEditing, type DxChatTypes } from 'devextreme-vue/chat';
48+
import { DxSelectBox, type DxSelectBoxTypes } from 'devextreme-vue/select-box';
4949
import { Guid } from 'devextreme-vue/common';
5050
import { CustomStore, DataSource } from 'devextreme-vue/common/data';
5151
import {
@@ -56,12 +56,13 @@ import {
5656
allowDeletingLabel,
5757
} from './data.ts';
5858
59+
type CustomStrategyOptions = { component: DxChat['instance'], message: DxChatTypes.Message };
5960
const store = [...initialMessages];
6061
6162
const customStore = new CustomStore({
6263
key: 'id',
6364
load: async () => store,
64-
insert: async (message) => {
65+
insert: async (message: DxChatTypes.Message) => {
6566
store.push(message);
6667
return message;
6768
},
@@ -72,7 +73,7 @@ const dataSource = computed(() => new DataSource({
7273
paginate: false,
7374
}));
7475
75-
const onMessageEntered = ({ message }) => {
76+
const onMessageEntered = ({ message }: DxChatTypes.MessageEnteredEvent) => {
7677
const newMessage = {
7778
id: new Guid().toString(),
7879
...message,
@@ -87,7 +88,7 @@ const onMessageEntered = ({ message }) => {
8788
]);
8889
};
8990
90-
const onMessageDeleted = ({ message }) => {
91+
const onMessageDeleted = ({ message }: DxChatTypes.MessageDeletedEvent) => {
9192
dataSource.value.store().push([
9293
{
9394
type: 'update',
@@ -97,7 +98,7 @@ const onMessageDeleted = ({ message }) => {
9798
]);
9899
};
99100
100-
const onMessageUpdated = ({ message, text }) => {
101+
const onMessageUpdated = ({ message, text }: DxChatTypes.MessageUpdatedEvent) => {
101102
dataSource.value.store().push([
102103
{
103104
type: 'update',
@@ -107,15 +108,17 @@ const onMessageUpdated = ({ message, text }) => {
107108
]);
108109
};
109110
110-
const editingStrategy = {
111+
const editingStrategy: Record<string, boolean | ((options: CustomStrategyOptions) => boolean)> = {
111112
enabled: true,
112113
disabled: false,
113-
custom: ({ component, message }) => {
114+
custom: ({ component, message }: CustomStrategyOptions) => {
115+
if (!component) return false;
116+
114117
const { items, user } = component.option();
115-
const userId = user.id;
118+
const userId = user?.id;
116119
117-
const lastNotDeletedMessage = items.findLast(
118-
(item) => item.author?.id === userId && !item.isDeleted,
120+
const lastNotDeletedMessage = items?.findLast(
121+
(item: DxChatTypes.Message) => item.author?.id === userId && !item.isDeleted,
119122
);
120123
121124
return message.id === lastNotDeletedMessage?.id;
@@ -128,12 +131,12 @@ const selectedDeletingStrategy = ref('enabled');
128131
const allowUpdating = ref(editingStrategy[selectedEditingStrategy.value]);
129132
const allowDeleting = ref(editingStrategy[selectedDeletingStrategy.value]);
130133
131-
const onAllowEditingChange = (event) => {
134+
const onAllowEditingChange = (event: DxSelectBoxTypes.ValueChangedEvent) => {
132135
selectedEditingStrategy.value = event.value;
133136
allowUpdating.value = editingStrategy[event.value];
134137
};
135138
136-
const onAllowDeletingChange = (event) => {
139+
const onAllowDeletingChange = (event: DxSelectBoxTypes.ValueChangedEvent) => {
137140
selectedDeletingStrategy.value = event.value;
138141
allowDeleting.value = editingStrategy[event.value];
139142
};

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Guid } from 'devextreme-vue/common';
2+
import type { DxChatTypes } from "devextreme-vue/chat";
23

3-
function getTimestamp(date, offsetMinutes = 0): number {
4+
function getTimestamp(date: Date, offsetMinutes: number = 0) {
45
return date.getTime() + offsetMinutes * 60000;
56
}
67

@@ -18,7 +19,7 @@ export const supportAgent = {
1819
avatarUrl: '../../../../images/petersmith.png',
1920
};
2021

21-
export const messages = [
22+
export const messages: DxChatTypes.Message[] = [
2223
{
2324
id: new Guid().toString(),
2425
timestamp: getTimestamp(date, -9),

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,14 @@
1919

2020
<script setup lang="ts">
2121
import { ref } from 'vue';
22-
import DxChat from 'devextreme-vue/chat';
22+
import DxChat, { type DxChatTypes } from 'devextreme-vue/chat';
2323
import { messages as initialMessages, supportAgent, currentUser } from './data.ts';
2424
2525
const messages = ref(initialMessages);
26-
const userChatTypingUsers = ref([]);
27-
const supportChatTypingUsers = ref([]);
26+
const userChatTypingUsers = ref<Record<string, string>[]>([]);
27+
const supportChatTypingUsers = ref<Record<string, string>[]>([]);
2828
29-
function onMessageEntered(event) {
29+
function onMessageEntered(event: DxChatTypes.MessageEnteredEvent) {
3030
messages.value = [...messages.value, event.message];
3131
}
3232

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1+
import { type DxChatTypes } from "devextreme-vue/chat";
2+
13
const date = new Date();
24
date.setHours(0, 0, 0, 0);
35

4-
function getTimestamp(date, offsetMinutes = 0) {
6+
function getTimestamp(date: Date, offsetMinutes: number = 0) {
57
return date.getTime() + offsetMinutes * 60000;
68
}
79

@@ -16,7 +18,7 @@ export const supportAgent = {
1618
avatarUrl: '../../../../images/petersmith.png',
1719
};
1820

19-
export const messages = [
21+
export const messages: DxChatTypes.Message[] = [
2022
{
2123
timestamp: getTimestamp(date, -9),
2224
author: supportAgent,

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ import { ref } from 'vue';
7676
import { DxTextBox, DxButton as DxTextBoxButton, type DxTextBoxTypes } from 'devextreme-vue/text-box';
7777
import { DxNumberBox, DxButton as DxNumberBoxButton } from 'devextreme-vue/number-box';
7878
import { DxDateBox, DxButton as DxDateBoxButton } from 'devextreme-vue/date-box';
79+
import { type DxButtonTypes } from 'devextreme-vue/button';
7980
8081
const millisecondsInDay = 24 * 60 * 60 * 1000;
8182
const passwordMode = ref<DxTextBoxTypes.TextBoxType>('password');
@@ -95,7 +96,7 @@ const currencyButton = {
9596
elementAttr: {
9697
class: 'currency',
9798
},
98-
onClick: (e) => {
99+
onClick: (e: DxButtonTypes.ClickEvent) => {
99100
if (e.component.option('text') === '$') {
100101
e.component.option('text', '€');
101102
currencyFormat.value = '$ #.##';

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
</template>
115115
<script setup lang="ts">
116116
import { ref } from 'vue';
117-
import DxSelectBox from 'devextreme-vue/select-box';
117+
import DxSelectBox, { type DxSelectBoxTypes } from 'devextreme-vue/select-box';
118118
import DxAutocomplete from 'devextreme-vue/autocomplete';
119119
import DxCheckBox from 'devextreme-vue/check-box';
120120
import DxSwitch from 'devextreme-vue/switch';
@@ -133,7 +133,7 @@ const displayExpr = ref('nameEn');
133133
const rtlEnabled = ref(false);
134134
const textValue = ref('text');
135135
136-
function onLanguageChanged(args) {
136+
function onLanguageChanged(args: DxSelectBoxTypes.ValueChangedEvent) {
137137
const isRTL = args.value === languages[0];
138138
139139
displayExpr.value = isRTL ? 'nameAr' : 'nameEn';

0 commit comments

Comments
 (0)