|
| 1 | +import { NgModule, Component, ViewChild, enableProdMode } from '@angular/core'; |
| 2 | +import { BrowserModule } from '@angular/platform-browser'; |
| 3 | +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; |
| 4 | +import { AzureOpenAI, type OpenAI } from 'openai'; |
| 5 | +import { DxTextAreaModule } from 'devextreme-angular'; |
| 6 | +import { |
| 7 | + AIIntegration, |
| 8 | + RequestParams, |
| 9 | + Response, |
| 10 | +} from 'devextreme-angular/common/ai-integration'; |
| 11 | +import { DxButtonModule, type DxButtonTypes } from 'devextreme-angular/ui/button'; |
| 12 | +import { DxFormModule, DxFormComponent } from 'devextreme-angular/ui/form'; |
| 13 | +import notify from 'devextreme/ui/notify'; |
| 14 | + |
| 15 | +import { Service } from './app.service'; |
| 16 | + |
| 17 | +if (!/localhost/.test(document.location.host)) { |
| 18 | + enableProdMode(); |
| 19 | +} |
| 20 | + |
| 21 | +let modulePrefix = ''; |
| 22 | +// @ts-ignore |
| 23 | +if (window && window.config?.packageConfigPaths) { |
| 24 | + modulePrefix = '/app'; |
| 25 | +} |
| 26 | + |
| 27 | +const stylingMode = 'filled'; |
| 28 | + |
| 29 | +type AIMessage = (OpenAI.ChatCompletionUserMessageParam | OpenAI.ChatCompletionSystemMessageParam) & { |
| 30 | + content: string; |
| 31 | +}; |
| 32 | + |
| 33 | +const showNotification = (message: string, of: string, isError?: boolean, offset?: string) => { |
| 34 | + notify({ |
| 35 | + message, |
| 36 | + position: { |
| 37 | + my: 'bottom center', |
| 38 | + at: 'bottom center', |
| 39 | + of, |
| 40 | + offset: offset ?? '0 -50', |
| 41 | + }, |
| 42 | + width: 'fit-content', |
| 43 | + maxWidth: 'fit-content', |
| 44 | + minWidth: 'fit-content', |
| 45 | + }, isError ? 'error' : 'info', 1500); |
| 46 | +}; |
| 47 | + |
| 48 | +@Component({ |
| 49 | + selector: 'demo-app', |
| 50 | + templateUrl: `.${modulePrefix}/app.component.html`, |
| 51 | + styleUrls: [`.${modulePrefix}/app.component.css`], |
| 52 | + providers: [Service], |
| 53 | +}) |
| 54 | +export class AppComponent { |
| 55 | + @ViewChild(DxFormComponent, { static: false }) form: DxFormComponent; |
| 56 | + |
| 57 | + colCountByScreen = { |
| 58 | + xs: 2, |
| 59 | + sm: 2, |
| 60 | + md: 2, |
| 61 | + lg: 2, |
| 62 | + }; |
| 63 | + |
| 64 | + amountDueEditorOptions = { placeholder: '$0.00', stylingMode }; |
| 65 | + |
| 66 | + amountDueAIOptions = { instruction: 'Format as the following: $0.00' }; |
| 67 | + |
| 68 | + statementDueEditorOptions = { placeholder: 'MM/DD/YYYY', stylingMode }; |
| 69 | + |
| 70 | + statementDueAIOptions = { instruction: 'Format as the following: MM/DD/YYYY' }; |
| 71 | + |
| 72 | + textEditorOptions = { stylingMode }; |
| 73 | + |
| 74 | + phoneEditorOptions = { placeholder: '(000) 000-0000', stylingMode }; |
| 75 | + |
| 76 | + phoneAIOptions = { instruction: 'Format as the following: (000) 000-0000' }; |
| 77 | + |
| 78 | + 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' }; |
| 79 | + |
| 80 | + zipEditorOptions = { stylingMode, mode: 'text', value: null }; |
| 81 | + |
| 82 | + zipAIOptions = { instruction: 'If the text does not contain a ZIP, determine the ZIP code from the provided address.' }; |
| 83 | + |
| 84 | + resetButtonOptions: DxButtonTypes.Properties = { |
| 85 | + stylingMode: 'outlined', |
| 86 | + type: 'normal', |
| 87 | + }; |
| 88 | + |
| 89 | + smartPasteButtonOptions: DxButtonTypes.Properties = { |
| 90 | + stylingMode: 'contained', |
| 91 | + type: 'default', |
| 92 | + }; |
| 93 | + |
| 94 | + azureOpenAIConfig: any; |
| 95 | + |
| 96 | + aiService: AzureOpenAI; |
| 97 | + |
| 98 | + aiIntegration: AIIntegration; |
| 99 | + |
| 100 | + valueContent: string; |
| 101 | + |
| 102 | + text: string; |
| 103 | + |
| 104 | + constructor(service: Service) { |
| 105 | + this.azureOpenAIConfig = service.getAzureOpenAIConfig(); |
| 106 | + |
| 107 | + this.aiService = new AzureOpenAI(this.azureOpenAIConfig); |
| 108 | + this.aiIntegration = new AIIntegration({ |
| 109 | + sendRequest: this.sendRequest.bind(this), |
| 110 | + }); |
| 111 | + |
| 112 | + this.text = service.getDefaultText(); |
| 113 | + } |
| 114 | + |
| 115 | + ngAfterViewInit() { |
| 116 | + const form = this.form.instance; |
| 117 | + |
| 118 | + form.registerKeyHandler('V', (event: KeyboardEvent) => { |
| 119 | + if (event.ctrlKey && event.shiftKey) { |
| 120 | + navigator.clipboard.readText() |
| 121 | + .then((clipboardText) => { |
| 122 | + if (clipboardText) { |
| 123 | + form.smartPaste(clipboardText); |
| 124 | + } else { |
| 125 | + showNotification('Copy the text to paste into the form', '#form'); |
| 126 | + } |
| 127 | + }) |
| 128 | + .catch(() => { |
| 129 | + showNotification('Could not access the clipboard', '#form'); |
| 130 | + }); |
| 131 | + } |
| 132 | + }); |
| 133 | + } |
| 134 | + |
| 135 | + sendRequest({ prompt }: RequestParams): Response { |
| 136 | + const controller = new AbortController(); |
| 137 | + const signal = controller.signal; |
| 138 | + |
| 139 | + const aiPrompt: AIMessage[] = [ |
| 140 | + { role: 'system', content: prompt.system }, |
| 141 | + { role: 'user', content: prompt.user }, |
| 142 | + ]; |
| 143 | + const promise = this.getAIResponse(aiPrompt, signal); |
| 144 | + |
| 145 | + promise.catch(() => { |
| 146 | + showNotification('Something went wrong. Please try again.', '#form', true); |
| 147 | + }); |
| 148 | + |
| 149 | + const result: Response = { |
| 150 | + promise, |
| 151 | + abort: () => { |
| 152 | + controller.abort(); |
| 153 | + }, |
| 154 | + }; |
| 155 | + |
| 156 | + return result; |
| 157 | + } |
| 158 | + |
| 159 | + async getAIResponse(messages: AIMessage[], signal: AbortSignal) { |
| 160 | + const params = { |
| 161 | + messages, |
| 162 | + model: this.azureOpenAIConfig.deployment, |
| 163 | + max_tokens: 1000, |
| 164 | + temperature: 0.7, |
| 165 | + }; |
| 166 | + |
| 167 | + const response = await this.aiService.chat.completions.create(params, { signal }); |
| 168 | + const result = response.choices[0].message?.content; |
| 169 | + |
| 170 | + return result; |
| 171 | + } |
| 172 | + |
| 173 | + onCopy() { |
| 174 | + navigator.clipboard.writeText(this.text); |
| 175 | + showNotification('Text copied to clipboard', '#textarea', false, '0 -20'); |
| 176 | + } |
| 177 | +} |
| 178 | + |
| 179 | +@NgModule({ |
| 180 | + imports: [ |
| 181 | + BrowserModule, |
| 182 | + DxButtonModule, |
| 183 | + DxFormModule, |
| 184 | + DxTextAreaModule, |
| 185 | + ], |
| 186 | + declarations: [AppComponent], |
| 187 | + bootstrap: [AppComponent], |
| 188 | +}) |
| 189 | +export class AppModule { } |
| 190 | + |
| 191 | +platformBrowserDynamic().bootstrapModule(AppModule); |
0 commit comments