Information Label:<\/strong> When utilizing AI-generated text, it is crucial to review the content carefully before use. This is a message to the user to review AI generated content before use.<\/p>\n \r\n<div\r\nstyle={{\r\nwidth: \"100%\",\r\ndisplay: \"flex\",\r\nflexDirection: \"column\",\r\nposition: \"relative\",\r\n}}\r\n>\r\n<div\r\nstyle={{\r\ndisplay: \"flex\",\r\nflexDirection: \"row\",\r\npadding: \"10px 0px 10px 0px\",\r\n}}\r\n>\r\n<div style={{ flexGrow: 1, marginRight: \"10px\" }}>\r\n<TextField\r\ntype=\"\"\r\nmultiline\r\nrows={10}\r\nautoAdjustHeight\r\nvalue={inputValue}\r\ndisabled={isButtonDisabled}\r\nonChange={handleChange}\r\n\/>\r\n<\/div>\r\n<\/div>\r\n<div>\r\n<PrimaryButton\r\ntext=\"Submit\"\r\nonClick={handleSubmit}\r\ndisabled={isButtonDisabled}\r\n\/>\r\n<\/div>\r\n<div\r\nstyle={{\r\nposition: \"absolute\",\r\ntop: \"50%\",\r\nleft: \"50%\",\r\ntransform: \"translate(-50%, -50%)\",\r\n}}\r\n>\r\n{isLoading && (\r\n<Spinner\r\nlabel=\"Generating...\"\r\nstyles={{\r\nlabel: {\r\nfontWeight: \"bold\",\r\ncolor: \"blue\",\r\nfontFamily: \"Segoe UI\",\r\n},\r\n}}\r\n\/>\r\n)}\r\n<\/div>\r\n<\/div>\r\n<\/pre>\nUsing of Azure OpenAI in PCF:<\/strong><\/p>\n\n- In the onSubmitClick<\/strong> function, ensure to input the endpoint and azureApiKey obtained from the Azure AI Studio<\/strong> as explained above. It is recommended to use a secure method to access or use Keys and endpoints in the code.<\/li>\n
- Azure OpenAI needs a system instruction\/message and a user prompt to generate content. It generates the content based on the instruction provided in the natural language.<\/li>\n
- In this demo, we are providing the static system message alongside the user prompt. Obtain the result using Azure OpenAI’s getChatCompletions(deploymentId, messages, options)<\/strong> Once the response is received, the output message will be sent back to the control and bound to the text field.<\/li>\n<\/ul>\n
\r\n\/\/ Function to handle form submission\r\nconst onSubmitClick = async () => {\r\nconst endpoint = \"\"; \/\/ OpenAI endpoint\r\nconst azureApiKey = \"\"; \/\/ Azure API key\r\n\r\n\/\/ Chat messages to be sent to OpenAI\r\nconst messages: ChatRequestMessage[] = [\r\n{ role: \"system\", content:\"You are an AI Text Editor where you primary role is to analyze text and help users transform it into a desired structure. \" },\r\n{ role: \"user\", content: prompt +\" : \"+ inputValue },\r\n];\r\n\r\ntry {\r\n\/\/ Confirmation dialog before proceeding\r\nconst confirmationResult = await context.navigation.openConfirmDialog(\r\n{\r\ntext: \"Proceeding will result in the restructuring of data. Click 'Ok' to proceed with the process. Please ensure that you have backed up any important data before proceeding.\",\r\ntitle: \"Caution: Data Restructuring Ahead\",\r\n},\r\n{ height: 200, width: 450 }\r\n);\r\n\r\nif (!confirmationResult.confirmed) return;\r\n\r\n\/\/ Disable button and show loading spinner\r\nsetIsButtonDisabled(true);\r\nsetIsLoading(true);\r\n\r\n\/\/ Check for empty input or prompt\r\nif (!inputValue.trim() || inputValue == \"\" || prompt == \"\") {\r\nreturn;\r\n}\r\n\r\n\/\/ Initialize OpenAI client\r\nconst client = new OpenAIClient(\r\nendpoint,\r\nnew AzureKeyCredential(azureApiKey)\r\n);\r\nconst deploymentId = \"\"; \/\/ Deployment ID\r\nconst options: GetChatCompletionsOptions = {\r\ntemperature:0,\r\ntopP: 0,\r\nfrequencyPenalty: 0.0,\r\npresencePenalty: 0.0,\r\nmaxTokens: 800,\r\nstop: [],\r\n};\r\n\r\n\/\/ Get completion from OpenAI\r\nconst result = await client.getChatCompletions(\r\ndeploymentId,\r\nmessages,\r\noptions\r\n);\r\n\r\n\/\/ Extract result value\r\nconst resultValue = result.choices[0].message?.content;\r\n\r\n\/\/ Update input value and notify parent component\r\nsetInputValue(resultValue || \"\");\r\nnotifyChange?.(resultValue || \"\");\r\n\r\n\/\/ Enable button and hide loading spinner\r\nsetIsButtonDisabled(false);\r\nsetIsLoading(false);\r\n} catch (error:any) {\r\n\/\/ Show error dialog and log error\r\ncontext.navigation.openConfirmDialog(\r\n{\r\ntext: error.message,\r\ntitle: error.code,\r\n},\r\n{ height: 200, width: 450 }\r\n);\r\nconsole.error(\"An error occurred:\", error.message);\r\nsetIsButtonDisabled(false);\r\nsetIsLoading(false);\r\n}\r\n};\r\n<\/pre>\n\n- Build the solution and import the solution.zip file in Dataverse. While configuration of control in the description field we are providing the prompt to convert the paragraph into a number list as shown below:<\/li>\n<\/ul>\n
![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-6.png\")
<\/div>\n
\n- In the description field of CRM, we are providing a random paragraph to demonstrate the conversion to number list.<\/li>\n<\/ul>\n
![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-7.png\")
<\/div>\n
\n- Once the input has been submitted, the output from OpenAI is displayed in the description field as shown below.<\/li>\n<\/ul>\n
![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-8.png\")
<\/div>\n
index.ts<\/strong><\/p>\nimport { IInputs, IOutputs } from \".\/generated\/ManifestTypes\";\r\nimport * as React from \"react\";\r\nimport { ITextProps, AITextControl } from \".\/components\/App\";\r\n\r\nexport class AIDescriptionEditorControl\r\nimplements ComponentFramework.ReactControl<IInputs, IOutputs>\r\n{\r\nprivate theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;\r\nprivate _navigation: ComponentFramework.Navigation;\r\n\/**\r\n* Empty constructor.\r\n*\/\r\nconstructor() {}\r\nprivate notifyOutputChanged: () => void;\r\nprivate _container: HTMLDivElement;\r\nprivate _value: any;\r\nprivate _context: ComponentFramework.Context;\r\n\/**\r\n* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.\r\n* Data-set values are not initialized here, use updateView.\r\n* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.\r\n* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.\r\n* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.\r\n*\/\r\npublic init(\r\ncontext: ComponentFramework.Context,\r\nnotifyOutputChanged: () => void,\r\nstate: ComponentFramework.Dictionary,\r\ncontainer: HTMLDivElement\r\n): void {\r\nthis.notifyOutputChanged = notifyOutputChanged;\r\n\/\/ this._context = context;\r\n\/\/ this._container = document.createElement(\"div\");\r\n\/\/ this._value = context.parameters.sampleProperty.raw || \"\";\r\n\/\/ container.appendChild(this._container);\r\n}\r\npublic async notifyOnSelect(value: string) {\r\nthis._value = value != null || value != undefined ? value : null;\r\nthis.notifyOutputChanged();\r\n}\r\n\/**\r\n* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.\r\n* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions\r\n* @returns ReactElement root react element for the control\r\n*\/\r\npublic updateView(\r\ncontext: ComponentFramework.Context\r\n): React.ReactElement {\r\n\/\/ Prepare props for the AITextControl component\r\nlet descriptionProps: ITextProps = {};\r\ndescriptionProps = {\r\nvalue: context.parameters.AIDescriptionEditorControl.raw ?? \"\",\r\nprompt: context.parameters.Prompt.raw ?? \"\",\r\ncontext,\r\nnotifyChange: this.notifyOnSelect.bind(this),\r\n};\r\n\/\/Render the AITextControl component\r\nreturn (\r\nReact.createElement(AITextControl, descriptionProps)\r\n);\r\n}\r\n\r\n\/**\r\n* It is called by the framework prior to a control receiving new data.\r\n* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as \"bound\" or \"output\"\r\n*\/\r\npublic getOutputs(): IOutputs {\r\nreturn {\r\nAIDescriptionEditorControl: this._value != null ? this._value : null,\r\n};\r\n}\r\n\r\n\/**\r\n* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.\r\n* i.e. cancelling any pending remote calls, removing listeners, etc.\r\n*\/\r\npublic destroy(): void {\r\n\/\/ Add code to cleanup control if necessary\r\n}\r\n}\r\n<\/pre>\nApp.tsx<\/strong><\/p>\n \r\nimport * as React from \"react\";\r\nimport { TextField, PrimaryButton, Spinner, Label } from \"@fluentui\/react\";\r\nimport { ChatRequestMessage, OpenAIClient, AzureKeyCredential, GetChatCompletionsOptions } from \"@azure\/openai\";\r\n\r\n\/\/ Props interface for the AI Text Control component\r\nexport interface ITextProps {\r\ncontext?: any; \/\/ Context for the component\r\nprompt ?: any; \/\/ prompt for the text\r\nvalue?: string; \/\/ Initial value for the text field\r\nnotifyChange?: (value: string) => void; \/\/ Callback function to notify parent component of changes\r\n}\r\n\r\n\/\/ AI Text Control component\r\nexport const AITextControl: React.FC<ITextProps> = ({\r\ncontext,\r\nprompt ,\r\nvalue,\r\nnotifyChange,\r\n}) => {\r\n\/\/ State variables\r\nconst [inputValue, setInputValue] = React.useState<string>(value || \"\"); \/\/ State for input value\r\nconst [isButtonDisabled, setIsButtonDisabled] = React.useState<boolean>(false); \/\/ State for button disabled state\r\nconst [isLoading, setIsLoading] = React.useState<boolean>(false); \/\/ State for loading spinner\r\n\r\n\/\/ Function to handle input change\r\nconst onFieldTextChange = (\r\nevent: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>,\r\nnewValue?: string\r\n) => {\r\nif (newValue !== undefined) {\r\nsetInputValue(newValue);\r\nnotifyChange?.(newValue);\r\n}\r\n};\r\n\r\n\/\/ Function to handle form submission\r\nconst onSubmitClick = async () => {\r\nconst endpoint = \"<YOUR_ENDPOINT_KEY_GOES_HERE>\"; \/\/ OpenAI endpoint\r\nconst azureApiKey = \"<YOUR_AZUREAPIKEY_GOES_HERE>\"; \/\/ Azure API key\r\n\r\n\/\/ Chat messages to be sent to OpenAI\r\nconst messages: ChatRequestMessage[] = [\r\n{ role: \"system\", content:\"You are an AI Text Editor where you primary role is to analyze text and help users transform it into a desired structure. \" },\r\n{ role: \"user\", content: prompt +\" : \"+ inputValue },\r\n];\r\n\r\ntry {\r\n\/\/ Confirmation dialog before proceeding\r\nconst confirmationResult = await context.navigation.openConfirmDialog(\r\n{\r\ntext: \"Proceeding will result in the restructuring of data. Click 'Ok' to proceed with the process. Please ensure that you have backed up any important data before proceeding.\",\r\ntitle: \"Caution: Data Restructuring Ahead\",\r\n},\r\n{ height: 200, width: 450 }\r\n);\r\n\r\nif (!confirmationResult.confirmed) return;\r\n\r\n\/\/ Disable button and show loading spinner\r\nsetIsButtonDisabled(true);\r\nsetIsLoading(true);\r\n\r\n\/\/ Check for empty input or prompt\r\nif (!inputValue.trim() || inputValue == \"\" || prompt == \"\") {\r\nreturn;\r\n}\r\n\r\n\/\/ Initialize OpenAI client\r\nconst client = new OpenAIClient(\r\nendpoint,\r\nnew AzureKeyCredential(azureApiKey)\r\n);\r\nconst deploymentId = \"<YOUR_DEPLOYMENTID_GOES_HERE>\"; \/\/ Deployment ID\r\nconst options: GetChatCompletionsOptions = {\r\ntemperature:0,\r\ntopP: 0,\r\nfrequencyPenalty: 0.0,\r\npresencePenalty: 0.0,\r\nmaxTokens: 800,\r\nstop: [],\r\n};\r\n\r\n\/\/ Get completion from OpenAI\r\nconst result = await client.getChatCompletions(\r\ndeploymentId,\r\nmessages,\r\noptions\r\n);\r\n\r\n\/\/ Extract result value\r\nconst resultValue = result.choices[0].message?.content;\r\n\r\n\/\/ Update input value and notify parent component\r\nsetInputValue(resultValue || \"\");\r\nnotifyChange?.(resultValue || \"\");\r\n\r\n\/\/ Enable button and hide loading spinner\r\nsetIsButtonDisabled(false);\r\nsetIsLoading(false);\r\n} catch (error:any) {\r\n\/\/ Show error dialog and log error\r\ncontext.navigation.openConfirmDialog(\r\n{\r\ntext: error.message,\r\ntitle: error.code,\r\n},\r\n{ height: 200, width: 450 }\r\n);\r\nconsole.error(\"An error occurred:\", error.message);\r\nsetIsButtonDisabled(false);\r\nsetIsLoading(false);\r\n}\r\n};\r\n\/\/ Render component\r\nreturn (\r\n<div\r\nstyle={{\r\nwidth: \"100%\",\r\ndisplay: \"flex\",\r\nflexDirection: \"column\",\r\nposition: \"relative\",\r\n}}\r\n>\r\n<div\r\nstyle={{\r\ndisplay: \"flex\",\r\nflexDirection: \"row\",\r\npadding: \"10px 0px 0px 0px\",\r\n}}\r\n>\r\n<div style={{ flexGrow: 1, marginRight: \"10px\" }}>\r\n<TextField\r\ntype=\"\"\r\nmultiline\r\nrows={10}\r\nautoAdjustHeight\r\nvalue={inputValue}\r\ndisabled={isButtonDisabled}\r\nonChange={onFieldTextChange}\r\n\/>\r\n<\/div>\r\n<\/div>\r\n<Label styles={{ root: { fontSize: 11, fontFamily: \"Calibri\" } }}>\r\n*The text generated by AI may not always be accurate or reliable. Verify\r\nthe inpromption before saving.\r\n<\/Label>\r\n<div>\r\n<PrimaryButton\r\ntext=\"Submit\"\r\nonClick={onSubmitClick}\r\ndisabled={isButtonDisabled}\r\n\/>\r\n<\/div>\r\n<div\r\nstyle={{\r\nposition: \"absolute\",\r\ntop: \"50%\",\r\nleft: \"50%\",\r\ntransform: \"translate(-50%, -50%)\",\r\n}}\r\n>\r\n{\/* Loading spinner *\/}\r\n{isLoading && (\r\n<Spinner\r\nlabel=\"Generating...\"\r\nstyles={{\r\nlabel: {\r\nfontWeight: \"bold\",\r\ncolor: \"blue\",\r\nfontFamily: \"Segoe UI\",\r\n},\r\n}}\r\n\/>\r\n)}\r\n<\/div>\r\n<\/div>\r\n);\r\n};\r\n \r\n<\/pre>\nPreview<\/strong><\/p>\n
![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-1.png\")
<\/div>\n<\/li>\n![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-2.png\")
<\/li>\n![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-3.png\")
<\/li>\n![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-4.png\")
<\/p>\n<\/div>\n![\"AI](\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2024\/04\/AI-Text-Editor-using-Azure-OpenAI-5.png\")
<\/p>\n<\/div>\n