Sysinfocus.AspNetCore.Components.AIChat 0.0.0.3

Sysinfocus.AspNetCore.Components.AIChat

An AI chat component which is part of Sysinfocus simple/ui library.

Setup Instructions

1. Download the NuGet package Sysinfocus.AspNetCore.Components.AIChat to your project. Note: This depends upon the Sysinfocus.AspNetCore.Components library.

2. Add @using Sysinfocus.AspNetCore.Components.AIChat to your _import.razor file.

3. Add builder.Services.AddSysinfocus(false); to your Program.cs file.

4. Add the following CSS to your project's appropriate file as this depends upon the type of project being used.

   /// For .NET 8
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/styles.css" />
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" />
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components.AIChat/Sysinfocus.AspNetCore.Components.AIChat.bundle.scp.css" />
   
   /// For .NET 9
   <link rel="stylesheet" href="@Assets["_content/Sysinfocus.AspNetCore.Components/styles.css"]" />
   <link rel="stylesheet" href="@Assets["_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css"]" />
   <link rel="stylesheet" href="@Assets["_content/Sysinfocus.AspNetCore.Components.AIChat/Sysinfocus.AspNetCore.Components.AIChat.bundle.scp.css"]" />
   
   /// For .NET 9 - if UI is initialized in .html page
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/styles.css" />
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components/Sysinfocus.AspNetCore.Components.bundle.scp.css" />
   <link rel="stylesheet" href="_content/Sysinfocus.AspNetCore.Components.AIChat/Sysinfocus.AspNetCore.Components.AIChat.bundle.scp.css" />
   

5. Add the following initialization code to your MainLayout.razor or any layout file which you host the components.

   @inherits LayoutComponentBase
   @inject Initialization init
   
   <div @onclick="init.HandleMainLayoutClickEvent"> // this is required for some components to close on click outside of its hosting component.
     @Body
   </div>
   
   @code
   {
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
       // This initializes the theme for the components.
       // Then you can use init.ToggleTheme() to toggle between light and dark modes.    
       if (firstRender) await init.InitializeTheme(); 
     }
   }
   

6. This component requires Interactivity either Server or WebAssembly to works.

7. To see the demo of each component, check out Demo

Releases

Version 0.0.0.2

• Added OnResult event handler to handle output in an array of AIChatResponseChoiceMessage object.
• Added OnError event handler to handle error message.
• Added IsHeadless parameter and SendAsync method to use it without UI.

Version 0.0.0.1

• First release with Chat UI
• Compatible with any OpenAI API specifications

Have issues?

Open an issue on this repo or email to issues@sysinfocus.com