feat(chat-ai-demo): Implement CustomStore

DevExpress · Nov 26, 2024 · 9c02574 · 9c02574
1 parent 348b7c5
commit 9c02574
Showing 1 changed file with 66 additions and 16 deletions.
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
@@ -110,7 +110,9 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
             const endpoint = 'https://dx-test-apim.azure-api.net/demo-openai';
             const apiKey = 'DEMO';
 
+            const store = [];
             let messages = [];
+            let lastAIResponse = null;
 
             const user = {
                 id: 'user',
@@ -140,7 +142,7 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 async function getAIResponse (messages) {
                     const params = {
                         messages: messages,
-                        max_tokens: 100,
+                        max_tokens: 1000,
                         temperature: 0.7,
                     };
 
@@ -153,46 +155,94 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
                 async function processMessageSending () {
                     instance.option({ typingUsers: [assistant] });
 
-                    const aiResponse = await getAIResponse(messages);
-
-                    setTimeout(() => {
-                        instance.option({ typingUsers: [] });
-
-                        messages.push({ role: 'assistant', content: aiResponse });
-
-                        renderMessage(aiResponse);
-                    }, 200);
+                    try {
+                        const aiResponse = await getAIResponse(messages);
+
+                        setTimeout(() => {
+                            instance.option({ typingUsers: [] });
+
+                            messages.push({ role: 'assistant', content: aiResponse });
+
+                            renderMessage(aiResponse);
+                        }, 200);
+                    } catch {
+                        instance.option({
+                            typingUsers: [],
+                            alerts: [{ message: 'Request limit reached, try again in a minute.' }],
+                        });
+
+                        if (lastAIResponse) {
+                            messages.push(lastAIResponse);
+                            renderMessage(lastAIResponse.content);
+                            lastAIResponse = null;
+                        }
+
+                        setTimeout(() => {
+                            instance.option({ alerts: [] });
+                        }, 10000);
+                    }
                 };
 
                 function renderMessage (text) {
                     const message = {
+                        id: Date.now(),
                         timestamp: new Date(),
                         author: assistant,
                         text,
                     };
 
-                    instance.renderMessage(message);
+                    updateStore('insert', message);
+                };
+
+                function updateStore (type, data, key) {
+                    customStore.push([{ type, data, key }]);
                 };
 
                 function prepareDataToRefresh () {
-                    /* Should we use dataSource here? */
-                    const items = instance.option('items');
-                    const newItems = items.slice(0, -1);
+                    const { items } = instance.option();
+                    const lastMessage = items[items.length - 1];
 
-                    instance.option({ items: newItems });
+                    updateStore('remove', null, lastMessage.id)
 
+                    lastAIResponse = messages[messages.length - 1];
                     messages = messages.slice(0, -1);
                 };
 
+                const customStore = new DevExpress.data.CustomStore({
+                    key: 'id',
+                    load: () => {
+                        const d = $.Deferred();
+
+                        setTimeout(function() {
+                            d.resolve([...store]);
+                        });
+
+                        return d.promise();
+                    },
+                    insert: (message) => {
+                        store.push(message);
+
+                        const d = $.Deferred();
+
+                        setTimeout(function() {
+                            d.resolve();
+                        });
+
+                        return d.promise();
+                    },
+                });
+
                 const instance = $("#ai-chat").dxChat({
+                    dataSource: customStore,
+                    reloadOnChange: false,
                     showAvatar: false,
                     user,
                     height: 600,
                     width: 520,
                     onMessageEntered: (e) => {
                         const { component, message } = e;
 
-                        component.renderMessage(message);
+                        updateStore('insert', { id: Date.now(), ...message });
 
                         messages.push({ role: 'user', content: message.text });