first commit powerchatbot component

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ramakrishnan Raman
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

PowerChatbot/.eslintrc.json

@@ -0,0 +1,30 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended"
+    ],
+    "globals": {
+      "ComponentFramework": true
+    },
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaVersion": 12,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "@microsoft/power-apps",
+      "@typescript-eslint"
+    ],
+    "rules": {
+      "no-unused-vars": "off"
+    },
+    "settings": {
+      "react": {
+        "version": "detect"
+      }
+    }
+}

PowerChatbot/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# generated directory
+**/generated
+
+# output directory
+/out
+
+# msbuild output directories
+/bin
+/obj
+/solution
+
+# private npm
+/npmrc
+
+# MSBuild Binary and Structured Log
+*.binlog

PowerChatbot/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "compile-hero.disable-compile-files-on-did-save-code": true
+}

PowerChatbot/PowerChatbot.pcfproj

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Project ToolsVersion="15.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
+  <PropertyGroup>
+    <PowerAppsTargetsPath>$(MSBuildExtensionsPath)\Microsoft\VisualStudio\v$(VisualStudioVersion)\PowerApps</PowerAppsTargetsPath>
+  </PropertyGroup>
+
+  <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.props')" />
+
+  <PropertyGroup>
+    <Name>PowerChatbot</Name>
+    <ProjectGuid>76a61f0c-afe6-4dc6-ac1f-a50bc4940e2d</ProjectGuid>
+    <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
+    <PcfBuildMode>production</PcfBuildMode>
+  </PropertyGroup>
+
+  <PropertyGroup>
+    <TargetFrameworkVersion>v4.6.2</TargetFrameworkVersion>
+    <!--Remove TargetFramework when this is available in 16.1-->
+    <TargetFramework>net462</TargetFramework>
+    <RestoreProjectStyle>PackageReference</RestoreProjectStyle>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.PowerApps.MSBuild.Pcf" Version="1.*" />
+    <PackageReference Include="Microsoft.NETFramework.ReferenceAssemblies" Version="1.0.0" PrivateAssets="All" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\.gitignore" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\bin\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\obj\**" />
+    <ExcludeDirectories Include="$(OutputPath)\**" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.pcfproj.user" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\*.sln" />
+    <ExcludeDirectories Include="$(MSBuildThisFileDirectory)\node_modules\**" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="$(MSBuildThisFileDirectory)\**" Exclude="@(ExcludeDirectories)" />
+  </ItemGroup>
+
+  <Import Project="$(MSBuildToolsPath)\Microsoft.Common.targets" />
+  <Import Project="$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets" Condition="Exists('$(PowerAppsTargetsPath)\Microsoft.PowerApps.VisualStudio.Pcf.targets')" />
+
+</Project>

PowerChatbot/PowerChatbot/ControlManifest.Input.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<manifest>
+  <control namespace="CustomControl" constructor="PowerChatbot" version="1.0.0" display-name-key="PowerChatbotPCF_key" description-key="PowerChatbotPCF_desc" control-type="virtual">
+    <property name="SubmittedText" display-name-key="PowerChatbot_SubmittedText_Key" description-key="PowerChatbot_SubmittedText_Desc_Key" of-type="SingleLine.Text" usage="output" required="true" />
+    <property name="BotName" display-name-key="PowerChatbot_BotName_Key" description-key="PowerChatbot_BotName_Desc_Key" of-type="SingleLine.Text" usage="input" default-value="Assistance" required="false" />
+    <property name="LoadingText" display-name-key="PowerChatbot_LoadingText_Key" description-key="PowerChatbot_LoadingText_Desc_Key" of-type="SingleLine.Text" usage="input" default-value="Working on it..." required="false" />
+    <property name="PlaceholderText" display-name-key="PowerChatbot_Placeholder_Key" description-key="PowerChatbot_Placeholder_Desc_Key" of-type="SingleLine.Text" default-value="Ask a question or Send a message" usage="input" required="false" />
+    <property name="AccessibleLabel" display-name-key="PowerChatbot_AccessibleLabel_Key" description-key="PowerChatbot_AccessibleLabel_Desc_Key" of-type="SingleLine.Text" default-value="PowerChatbot Chatbot" usage="input" required="false"/>
+    <data-set name="Items" display-name-key="PowerChatbot_Items_Display_Key" description-key="PowerChatbot_Items_Desc_Key" allow-default-selected-items="true" resettable="true"/>
+    <property name="Useplatformtheme" display-name-key="PowerChatbot_Useplatformtheme_Display_Key" description-key="PowerChatbot_Useplatformtheme_Desc_Key" of-type="TwoOptions" default-value="false" usage="input" required="false"/>
+    <property name="ShowIcon" display-name-key="PowerChatbot_ShowIcon_Display_Key" description-key="PowerChatbot_ShowIcon_Desc_Key" of-type="TwoOptions" default-value="false" usage="input" required="false"/>
+    <common-property name="Height" default-value="675" />
+    <common-property name="Width" default-value="320" />
+    <event name="OnSubmit"/>
+    <resources>
+      <code path="index.ts" order="1"/>
+      <platform-library name="React" version="16.8.6" />
+      <resx path="strings/PowerChatbot.1033.resx" version="1.0.0"/>
+    </resources>
+  </control>
+</manifest>

PowerChatbot/PowerChatbot/ManifestConstants.ts

@@ -0,0 +1,17 @@
+export const enum ManifestPropertyNames {
+    dataset = 'dataset'
+}
+
+export const AssistanceIcon = {
+    width : '24px',
+    height : '24px',
+    color: "#19c37d",
+}
+
+export const WelcomeIconInfo = {
+    width : '80px',
+    height : '80px',
+    padding : 100,
+    color: "#19c37d",
+}
+

PowerChatbot/PowerChatbot/PowerChatbot.ts

@@ -0,0 +1,141 @@
+import { IInputs, IOutputs } from "./generated/ManifestTypes";
+import { ChatComponent } from "./components/Chat";
+import * as React from "react";
+import { ManifestPropertyNames } from "./ManifestConstants";
+import { Column, RecordSet } from "./components/Component.types";
+import { IChatInputProps, IChatMessage } from "./interface/IChatProps";
+import { IPropBag } from "./components/Events.types";
+
+export class PowerChatbot implements ComponentFramework.ReactControl<IInputs, IOutputs> {
+    private static readonly DATASET_PAGE_SIZE: number = 1000;
+    notifyOutputChanged: () => void;
+    items: IChatMessage[];
+    context: IPropBag<IInputs>;
+    submittedText: string;
+    eventtobeTriggered: boolean;
+    /**
+     * Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
+     * Data-set values are not initialized here, use updateView.
+     * @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.
+     * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
+     * @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.
+     */
+    public init(
+        context: IPropBag<IInputs>, notifyOutputChanged: () => void): void {
+        this.context = context;
+        this.context.mode.trackContainerResize(true);
+        this.notifyOutputChanged = notifyOutputChanged;
+        // Upper limit of options to fetch.
+        if (context.parameters.Items.paging.pageSize !== PowerChatbot.DATASET_PAGE_SIZE) {
+            context.parameters.Items.paging.setPageSize(PowerChatbot.DATASET_PAGE_SIZE);
+            context.parameters.Items.refresh();
+        }
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * 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.
+     * @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
+     * @returns ReactElement root react element for the control
+     */
+    public updateView(context: IPropBag<IInputs>): React.ReactElement {
+        const { columns, records, sortedRecordIds } = context.parameters.Items;
+        const datasetChanged = context.updatedProperties.indexOf(ManifestPropertyNames.dataset) > -1 || !this.items;
+        const botName = context.parameters.BotName.raw ?? '';
+        const showIcon = context.parameters.ShowIcon.raw;
+        const accessibleLabel = context.parameters.AccessibleLabel.raw;
+        const loadingText = context.parameters.LoadingText.raw ?? '';
+        const placeholdertext = context.parameters.PlaceholderText.raw ?? '';
+        const usePlatformtheme = context.parameters.Useplatformtheme.raw;
+        const allocatedWidth = parseInt(context.mode.allocatedWidth as unknown as string);
+        const allocatedHeight = parseInt(context.mode.allocatedHeight as unknown as string);
+        if (datasetChanged) {
+            this.items = this.createOptionItems(columns, records, sortedRecordIds);
+        }
+        this.eventtobeTriggered && this.triggerOnSubmit();
+        const chatComponentProps = {
+                                        items:this.items,
+                                        botName: botName,
+                                        showIcon: showIcon,
+                                        placeholdertext:placeholdertext,
+                                        allocatedWidth: allocatedWidth,
+                                        allocatedHeight: allocatedHeight,
+                                        loadingText: loadingText,
+                                        accessibleLabel: accessibleLabel,
+                                        onSubmit:this._onSubmit,
+                                        disabledState: this.disableChatComponent(records, sortedRecordIds),
+                                        usePlatformtheme: usePlatformtheme
+                                    } as IChatInputProps;
+        return React.createElement(
+            ChatComponent, chatComponentProps
+        );
+    }
+
+    private triggerOnSubmit() {
+        this.eventtobeTriggered = false;
+        console.log("OnSubmit");
+        this.submittedText = "";
+        this.context.events.OnSubmit();
+    }
+
+    private _onSubmit(submittedText: string): void {
+        this.eventtobeTriggered = true;
+        this.submittedText = submittedText;
+        this.notifyOutputChanged();
+    }
+
+    private disableChatComponent(records: RecordSet, sortedRecordIds: string[]): Boolean {
+        if (sortedRecordIds.length > 0) {
+            // false - if last record is from Open AI - 'assistance'
+           return records[sortedRecordIds[sortedRecordIds.length-1]].getFormattedValue('role') === 'user'
+        }
+        return false;
+    }
+
+    private createOptionItems(columns: Column[], records: RecordSet, sortedRecordIds: string[]): IChatMessage[] {
+        if (!sortedRecordIds.length || records.error) {
+            return [];
+        }
+        // take first column alias, or undefined if no column is specified.
+        let contentcolumnAlias = columns[0] && columns[0].alias;
+        let rolecolumnAlias = columns[1] && columns[1].alias;
+        // if no column is specified and the first record has a value column, use that.
+        if (!contentcolumnAlias && records[sortedRecordIds[0]].getFormattedValue('content') !== null &&
+        !contentcolumnAlias && records[sortedRecordIds[0]].getFormattedValue('role') !== null) {
+            contentcolumnAlias = 'content';
+            rolecolumnAlias = 'role';
+        }
+
+        // for each record, return formatted value, or recordId if no column is specified.
+        return sortedRecordIds.map((recordId) => {
+            const content = contentcolumnAlias
+                ? (records[recordId] && records[recordId].getFormattedValue(contentcolumnAlias)) || ''
+                : recordId;
+            const role = rolecolumnAlias
+                ? (records[recordId] && records[recordId].getFormattedValue(rolecolumnAlias)) || ''
+                : recordId;
+
+            return {
+                key: recordId,
+                content: content,
+                role: role
+            };
+        });
+    }
+
+    /**
+     * It is called by the framework prior to a control receiving new data.
+     * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
+     */
+    public getOutputs(): IOutputs {
+        return { SubmittedText: this.submittedText };
+    }
+
+    /**
+     * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
+     * i.e. cancelling any pending remote calls, removing listeners, etc.
+     */
+    public destroy(): void {
+        // Add code to cleanup control if necessary
+    }
+}