Angular Form - Smart Paste

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { AzureOpenAI, type OpenAI } from 'openai'; import { DxTextAreaModule } from 'devextreme-angular'; import { AIIntegration, RequestParams, Response, } from 'devextreme-angular/common/ai-integration'; import { DxButtonModule, type DxButtonTypes } from 'devextreme-angular/ui/button'; import { DxFormModule, DxFormComponent } from 'devextreme-angular/ui/form'; import notify from 'devextreme/ui/notify'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } const stylingMode = 'filled'; type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & { content: string; }; const showNotification = (message: string, of: string, isError?: boolean, offset?: string) => { notify({ message, position: { my: 'bottom center', at: 'bottom center', of, offset: offset ?? '0 -50', }, width: 'fit-content', maxWidth: 'fit-content', minWidth: 'fit-content', }, isError ? 'error' : 'info', 1500); }; @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxButtonModule, DxFormModule, DxTextAreaModule, ], }) export class AppComponent { @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent; colCountByScreen = { xs: 2, sm: 2, md: 2, lg: 2, }; amountDueEditorOptions = { placeholder: '$0.00', stylingMode }; amountDueAIOptions = { instruction: 'Format as the following: $0.00' }; statementDueEditorOptions = { placeholder: 'MM/DD/YYYY', stylingMode }; statementDueAIOptions = { instruction: 'Format as the following: MM/DD/YYYY' }; textEditorOptions = { stylingMode }; phoneEditorOptions = { placeholder: '(000) 000-0000', stylingMode }; phoneAIOptions = { instruction: 'Format as the following: (000) 000-0000' }; emailAIOptions = { instruction: 'Do not fill this field if the text contains an invalid email address. A valid email is in the following format: email@example.com' }; zipEditorOptions = { stylingMode, mode: 'text' }; zipAIOptions = { instruction: 'If the text does not contain a ZIP, determine the ZIP code from the provided address.' }; resetButtonOptions: DxButtonTypes.Properties = { stylingMode: 'outlined', type: 'normal', }; smartPasteButtonOptions: DxButtonTypes.Properties = { stylingMode: 'contained', type: 'default', }; azureOpenAIConfig: any; aiService: AzureOpenAI; aiIntegration: AIIntegration; valueContent: string; text: string; constructor(service: Service) { this.azureOpenAIConfig = service.getAzureOpenAIConfig(); this.aiService = new AzureOpenAI(this.azureOpenAIConfig); this.aiIntegration = new AIIntegration({ sendRequest: this.sendRequest.bind(this), }); this.text = service.getDefaultText(); } ngAfterViewInit() { const form = this.form.instance; form.registerKeyHandler('V', (event: KeyboardEvent) => { if (event.ctrlKey && event.shiftKey) { navigator.clipboard.readText() .then((clipboardText) => { if (clipboardText) { form.smartPaste(clipboardText); } else { showNotification('Clipboard is empty. Copy text before pasting', '#form'); } }) .catch(() => { showNotification('Could not access the clipboard', '#form'); }); } }); } sendRequest({ prompt }: RequestParams): Response { const controller = new AbortController(); const signal = controller.signal; const aiPrompt: AIMessage[] = [ { role: 'system', content: prompt.system }, { role: 'user', content: prompt.user }, ]; const promise = this.getAIResponse(aiPrompt, signal); promise.catch(() => { showNotification('Something went wrong. Please try again.', '#form', true); }); const result: Response = { promise, abort: () => { controller.abort(); }, }; return result; } async getAIResponse(messages: AIMessage[], signal: AbortSignal) { const params = { messages, model: this.azureOpenAIConfig.deployment, max_completion_tokens: 1000, temperature: 0.7, }; const response = await this.aiService.chat.completions.create(params, { signal }); const result = response.choices[0].message?.content; return result; } onCopy() { navigator.clipboard.writeText(this.text); showNotification('Text copied to clipboard', '#textarea', false, '0 -20'); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

#form-container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto auto; gap: 24px 40px; min-width: 720px; max-width: 900px; margin: auto; } .instruction { color: var(--dx-texteditor-color-label); } .textarea-container { display: flex; flex-direction: column; gap: 16px; } ::ng-deep .dx-layout-manager .dx-field-item.dx-last-row { padding-top: 4px; } ::ng-deep .dx-toast-info .dx-toast-icon { display: none; } ::ng-deep .buttons-group { display: flex; width: 100%; justify-content: end; } ::ng-deep .buttons-group .dx-item-content { gap: 8px; } ::ng-deep .buttons-group .dx-field-item:not(.dx-first-col), ::ng-deep .buttons-group .dx-field-item:not(.dx-last-col) { padding: 0; } ::ng-deep .buttons-group .dx-item { flex: unset !important; }

import { Injectable } from '@angular/core'; const AzureOpenAIConfig = { dangerouslyAllowBrowser: true, deployment: 'demo-mini', apiVersion: '2024-02-01', endpoint: 'https://public-api.devexpress.com/demo-openai', apiKey: 'DEMO', }; const defaultText = `Payment: Amount - $123.00 Statement Date: 10/15/2024 Name: John Smith Contact: (123) 456-7890 Email: john@myemail.com Address: - 123 Elm St Apt 4B - New York, NY 10001 `; @Injectable({ providedIn: 'root', }) export class Service { getDefaultText() { return defaultText; } getAzureOpenAIConfig() { return AzureOpenAIConfig; } }

<!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="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>