Sysinfocus.AspNetCore.Components.AIChat 0.0.0.1

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

Have issues?

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