|
| 1 | +import { Component, ViewChild, ViewEncapsulation, Inject, AfterViewChecked, ElementRef } from '@angular/core'; |
| 2 | +import { AIAssistViewModule, AIAssistViewComponent, AIAssistViewAllModule } from '@syncfusion/ej2-angular-interactive-chat'; |
| 3 | +import { SBDescriptionComponent } from '../common/dp.component'; |
| 4 | +import { SBActionDescriptionComponent } from '../common/adp.component'; |
| 5 | +import { Button } from "@syncfusion/ej2-angular-buttons"; |
| 6 | +import { TextArea } from "@syncfusion/ej2-angular-inputs"; |
| 7 | +import { defaultPromptResponseData, defaultSuggestions } from './promptResponseData'; |
| 8 | + |
| 9 | +@Component({ |
| 10 | + selector: 'control-content', |
| 11 | + templateUrl: 'custom-views.html', |
| 12 | + styleUrls: ['custom-views.component.css'], |
| 13 | + encapsulation: ViewEncapsulation.None, |
| 14 | + standalone: true, |
| 15 | + imports: [AIAssistViewModule, AIAssistViewAllModule, SBActionDescriptionComponent, SBDescriptionComponent] |
| 16 | +}) |
| 17 | +export class AIAssistCustomViewsComponent{ |
| 18 | + constructor(@Inject('sourceFiles') private sourceFiles: any) { |
| 19 | + sourceFiles.files = ['custom-views.component.css']; |
| 20 | + } |
| 21 | + |
| 22 | + @ViewChild('viewsAIAssistView') |
| 23 | + public viewsAIAssistView: AIAssistViewComponent; |
| 24 | + |
| 25 | + public prompts: { [key: string]: string | string[] } [] = defaultPromptResponseData; |
| 26 | + |
| 27 | + public suggestions: string[] = defaultSuggestions; |
| 28 | + |
| 29 | + public viewTemplate: string = '<div class="view-container"><h5>Custom view content</h5></div>'; |
| 30 | + |
| 31 | + public promptViewContent = () => { |
| 32 | + var suggestionsElem = ''; |
| 33 | + this.suggestions.forEach((suggestion) => { |
| 34 | + suggestionsElem += `<li class="suggestion-item e-card">${suggestion}</li>`; |
| 35 | + }); |
| 36 | + return `<div class="view-container"> |
| 37 | + <textarea id="promptTextarea"></textarea> |
| 38 | + <button id="generateBtn"></button> |
| 39 | + <ul class="suggestions">${suggestionsElem}</ul> |
| 40 | + </div>`; |
| 41 | + }; |
| 42 | + |
| 43 | + public responseViewContent = () => { |
| 44 | + return `<div class="view-container response-view"> |
| 45 | + <div class="responseItemContent default-response e-card"> |
| 46 | + <span class="e-icons e-circle-info"></span> |
| 47 | + No prompt provided. Please enter a prompt and click 'Generate Prompt' to see the response.</div> |
| 48 | + </div>`; |
| 49 | + }; |
| 50 | + |
| 51 | + public onCreate = () => { |
| 52 | + var textareaObj: TextArea = new TextArea({ |
| 53 | + placeholder: "Enter your prompt...", |
| 54 | + rows: 5, |
| 55 | + resizeMode: 'None', |
| 56 | + input: (e) => { |
| 57 | + generateBtn.disabled = !e.value; |
| 58 | + } |
| 59 | + }); |
| 60 | + textareaObj.appendTo('#promptTextarea'); |
| 61 | + |
| 62 | + var generateBtn: Button = new Button({ cssClass: 'e-primary generate-btn', content:'Generate Prompt', disabled: true }); |
| 63 | + generateBtn.appendTo('#generateBtn'); |
| 64 | + generateBtn.element.addEventListener('click',() => { |
| 65 | + var promptValue = textareaObj.value; |
| 66 | + if (promptValue) { |
| 67 | + textareaObj.value = ''; |
| 68 | + generateBtn.disabled = true; |
| 69 | + this.viewsAIAssistView.activeView = 1; |
| 70 | + this.viewsAIAssistView.dataBind(); |
| 71 | + this.updateResponseView(promptValue); |
| 72 | + } |
| 73 | + }); |
| 74 | + |
| 75 | + this.viewsAIAssistView.element.querySelector('.view-container .suggestions').addEventListener('click',(e) => { |
| 76 | + if ((e.target as any).classList.contains('suggestion-item')) { |
| 77 | + textareaObj.value = (e.target as any).textContent; |
| 78 | + generateBtn.disabled = false; |
| 79 | + } |
| 80 | + }); |
| 81 | + }; |
| 82 | + |
| 83 | + public updateResponseView = (prompt: string) => { |
| 84 | + var responseView = this.viewsAIAssistView.element.querySelector('.view-container'); |
| 85 | + var separatorElem = '<hr style="height: 1px;margin: 0;">'; |
| 86 | + var responseItemElem = `<div class="responseItemContent e-card"> |
| 87 | + <div class="response-header"><b>Prompt:</b> ${prompt}</div>${separatorElem} |
| 88 | + <div class="content"> |
| 89 | + <div class="e-skeleton e-shimmer-wave" style="width: 100%; height: 20px;"></div> |
| 90 | + <div class="e-skeleton e-shimmer-wave" style="width: 80%; height: 20px;"></div> |
| 91 | + <div class="e-skeleton e-shimmer-wave" style="width: 100%; height: 20px;"></div> |
| 92 | + </div> |
| 93 | + ${separatorElem} |
| 94 | + <div class="options"> |
| 95 | + <button id="copyBtn" class="e-btn e-normal e-skeleton e-shimmer-wave">Copy</button> |
| 96 | + </div> |
| 97 | + </div>`; |
| 98 | + var defaultResponse = responseView.querySelector('.default-response'); |
| 99 | + if (defaultResponse) { |
| 100 | + defaultResponse.remove(); |
| 101 | + } |
| 102 | + responseView.innerHTML = responseItemElem + responseView.innerHTML; |
| 103 | + setTimeout(() => { |
| 104 | + var foundPrompt = this.prompts.find((promptObj) => promptObj.prompt === prompt); |
| 105 | + var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.'; |
| 106 | + |
| 107 | + var response = foundPrompt ? foundPrompt.response : defaultResponse; |
| 108 | + responseView.children[0].querySelector('.content').innerHTML = response as string; |
| 109 | + var copyBtn = responseView.children[0].querySelector('#copyBtn'); |
| 110 | + copyBtn.classList.remove('e-skeleton', 'e-shimmer-wave'); |
| 111 | + copyBtn.addEventListener('click', function(e) { |
| 112 | + var textToCopy = (e.target as any).parentElement.parentElement.querySelector('.content').textContent; |
| 113 | + navigator.clipboard.writeText(textToCopy).then(function() { |
| 114 | + copyBtn.textContent = 'Copied!'; |
| 115 | + setTimeout(() => { |
| 116 | + copyBtn.textContent = 'Copy'; |
| 117 | + }, 1000); |
| 118 | + }); |
| 119 | + }); |
| 120 | + |
| 121 | + }, 2000); |
| 122 | + }; |
| 123 | +} |
0 commit comments