Add AI chat panel to Platform website (#11346)

[msynk]

closes #11346

Summary by CodeRabbit

• New Features
  • Added an AI chat panel with a floating trigger, responsive behavior, message history, quick prompts, and markdown rendering.
• Style
  • Introduced component-specific styles for the chat panel.
  • Refined responsive breakpoints and added a new gt-xs mixin for smoother layouts.
  • Updated dark theme with a new tertiary background color for improved contrast.
• Chores
  • Integrated UI extras library and assets.
  • Registered related services and included required CSS/JS in the app shell.

[coderabbitai]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

Adds an AI chat panel feature to the Platform client: new component (UI, logic, styles), DI wiring, shared DTOs, and inclusion in MainLayout. Updates theme variables and media-query mixins. Adds Bit.BlazorUI.Extras dependency and assets and minor build target tweak.

Changes

Cohort / File(s)	Summary
AI Chat UI Component src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor, .../Shared/AppAiChatPanel.razor.cs, .../Shared/AppAiChatPanel.razor.scss, .../Shared/MainLayout.razor	Introduces AppAiChatPanel component (UI, logic, styles) with responsive panel, message list, input/send, prompts; adds component to MainLayout.
DI/Packages/Assets ...Platform.Client/Bit.Websites.Platform.Client.csproj, ...Platform.Client/Extensions/IServiceCollectionExtensions.cs, ...Platform.Server/Components/App.razor	Adds Bit.BlazorUI.Extras package and registers services; includes Extras CSS/JS in server App.razor; adjusts build SCSS Outputs escaping.
Shared DTOs for AI Chat ...Platform.Shared/Dtos/AiChat/AiChatMessage.cs, .../AiChatMessageRole.cs, .../StartChatbotRequest.cs	Adds DTOs: AiChatMessage, AiChatMessageRole enum, and StartChatbotRequest for chat history/start parameters.
Base Component Update ...Platform.Client/Shared/AppComponentBase.cs	Adds CurrentCancellationToken property and async disposal hook.
Styling Foundations ...Platform.Client/Styles/abstracts/_media-queries.scss, ...Platform.Client/Styles/app.scss	Adjusts lt/gt media-query mixins; adds gt-xs; adds dark theme var --bit-clr-bg-ter and reorders --bit-clr-bg-sec.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant P as AppAiChatPanel (Razor)
  participant C as Channel<string>
  participant UI as UI State

  U->>P: Open panel, type message, click Send
  activate P
  P->>C: StartChannel() / Write(userInput)
  P->>UI: Add user message + placeholder assistant<br/>isLoading = true
  UI-->>U: Render updated chat

  Note over P,C: Streaming placeholder (future hub/service)

  C-->>P: Read chunks / completion
  P->>UI: Update last assistant message<br/>isLoading = false
  UI-->>U: Render assistant response
  deactivate P

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Add the AiChatPanel to the Platform website (#11346)	✅

Assessment against linked issues: Out-of-scope changes

None found.

Poem

I thump my paw, deploy with cheer—
A chatty panel now appears!
With prompts that bloom and streams that flow,
I twitch my ears and watch it grow.
In bits and bytes I softly rhyme,
“Ping!”—the bunny’s online, on time. 🐇💬

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 13

🧹 Nitpick comments (18)

src/Websites/Platform/src/Bit.Websites.Platform.Server/Components/App.razor (1)

35-35: Consider deferring Extras script for faster first paint

If supported by the Script tag helper, add defer to avoid blocking parsing.

-        <Script Src="_content/Bit.BlazorUI.Extras/scripts/bit.blazorui.extras.js"></Script>
+        <Script Src="_content/Bit.BlazorUI.Extras/scripts/bit.blazorui.extras.js" defer></Script>

src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj (1)

39-39: Package addition is consistent with the Bit stack

Version aligns with other Bit packages. Optionally move Bit.* versions to central package management (Directory.Packages.props) or a $(BitPackagesVersion) property to keep them in sync.

src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/AiChatMessageRole.cs (1)

3-7: Stabilize enum wire format with explicit values

Add explicit numeric values to prevent unintended reordering/renumbering in future.

 public enum AiChatMessageRole
 {
-    User,
-    Assistant
+    User = 0,
+    Assistant = 1
 }

src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/app.scss (1)

7-10: Add light‐theme fallback for --bit-clr-bg-ter
Prevent undefined var in light mode by defining a base value in :root:

+:root {
+  --bit-clr-bg-ter: var(--bit-clr-bg-pri, #ffffff);
+}

src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_media-queries.scss (1)

76-98: Clarify inclusivity and add a brief doc block for gt- and new gt-xs.*

To avoid ambiguity over inclusive edges, add a short comment noting that lt-* uses max-width (inclusive) and gt-* uses min-width (inclusive). This helps future contributors reason about off-by-one expectations across all mixins.

 // media gt queries
+// Note: All lt-* use inclusive max-width; all gt-* use inclusive min-width.
+// Example: lt-md => <= $screen-sm-max, gt-md => >= $screen-lg-min.
 @mixin gt-lg {

src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppComponentBase.cs (1)

35-36: Avoid throwing from a getter; let consumers decide when to observe cancellation.

Calling ThrowIfCancellationRequested in the property getter can cause unexpected exceptions at read time. Prefer returning the token and letting the awaited operation surface OperationCanceledException.

-            cts.Token.ThrowIfCancellationRequested();
             return cts.Token;

src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor (1)

21-22: Stacking and overlay order: ensure MessageBox remains on top.

If both use fixed positioning, DOM order may affect stacking when z-index ties. Either swap render order or assign explicit z-indexes.

-<MessageBox />
-<AppAiChatPanel />
+<AppAiChatPanel />
+<MessageBox />

Optionally set z-indexes in the panel’s SCSS (see AppAiChatPanel.razor.scss note) so MessageBox is always above.

src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.scss (3)

13-33: Make the FAB reliably overlay content.

Add an explicit z-index to the open-panel button to avoid being obscured by page content or other overlays.

 .open-panel-button {
     padding: 0;
     left: unset;
     right: unset;
     inset-inline-end: 2rem;
+    z-index: var(--z-index-ai-chat-fab, 1100);

---

23-26: Prefer logical property for vertical offset.

Use inset-block-end for RTL awareness and writing-mode friendliness.

-            bottom: 4rem;
+            inset-block-end: 4rem;

---

44-47: Less aggressive wrapping for code text.

word-break: break-all can hurt readability. Consider overflow-wrap:anywhere plus word-break:break-word.

-            white-space: pre-wrap;
-            word-break: break-all;
+            white-space: pre-wrap;
+            overflow-wrap: anywhere;
+            word-break: break-word;

src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/StartChatbotRequest.cs (1)

3-12: DTO immutability and intent signaling.

Prefer a record with init-only and a read-only collection to avoid mid-flight mutation of history during streaming.

-public class StartChatbotRequest
+public sealed record StartChatbotRequest
 {
-    public int CultureId { get; set; }
+    public int CultureId { get; init; }
 
-    public string? DeviceInfo { get; set; }
+    public string? DeviceInfo { get; init; }
 
-    public List<AiChatMessage> ChatMessagesHistory { get; set; } = [];
+    public IReadOnlyList<AiChatMessage> ChatMessagesHistory { get; init; } = Array.Empty<AiChatMessage>();
 
-    public Uri? ServerApiAddress { get; set; }
+    public Uri? ServerApiAddress { get; init; } // See SSRF note above.
 }

src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor (5)

7-15: Missing accessible label on the floating trigger button.

Add a Title/AriaLabel so screen readers can announce the action.

 <BitButton Float
            Draggable
            FloatOffset="1rem"
            Class="open-panel-button"
            Variant="BitVariant.Outline"
            OnClick="() => isOpen = true"
            Color="BitColor.PrimaryBackground"
            IconUrl="/images/ai-chat-icon-64.webp"
+           Title="Open AI chat"
+           AriaLabel="Open AI chat"
            FloatPosition="BitPosition.BottomRight" />

---

17-21: Simplify responsive props (avoid is true/false patterns).

Use direct boolean expressions for clarity.

-    <BitProPanel ShowCloseButton
-                 @bind-IsOpen="isOpen"
-                 ModeFull="isSmallScreen is true"
-                 Modeless="isSmallScreen is false"
+    <BitProPanel ShowCloseButton
+                 @bind-IsOpen="isOpen"
+                 ModeFull="@isSmallScreen"
+                 Modeless="@(!isSmallScreen)"
                  OnDismiss="WrapHandled(HandleOnDismissPanel)">

---

24-25: String casing / localization.

Consider title-casing and localizing the header text.

-                <BitText Typography="BitTypography.H5">AI chat panel</BitText>
+                <BitText Typography="BitTypography.H5">AI Chat Panel</BitText>

---

74-74: Minor formatting nit.

Remove leading space in the attribute value.

-                    <BitStack Alignment=" BitAlignment.Center" FitHeight FillContent Class="default-prompt-container">
+                    <BitStack Alignment="BitAlignment.Center" FitHeight FillContent Class="default-prompt-container">

---

114-123: Send button accessibility.

Since the button is icon-only, ensure Title/AriaLabel are present for AT users.

                     <BitButton Float
                                AutoLoading
                                FloatAbsolute
-                               Title="Send"
+                               Title="Send"
+                               AriaLabel="Send message"
                                IconName="Up"
                                FloatOffset="0.5rem"
                                Class="send-message-button"

src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.cs (2)

150-156: Async without awaits.

StopChannel doesn’t await anything. Make it synchronous to reduce noise.

-    private async Task StopChannel()
+    private Task StopChannel()
     {
         if (channel is null) return;
 
         channel.Writer.Complete();
         channel = null;
+        return Task.CompletedTask;
     }

(Alternatively, keep async and add awaits once hub wiring is in.)

---

85-93: Localization for the initial assistant message.

Hard-coded English string; consider using your localization pipeline.

-                Content = "I'm here to make your app experience awesome! Got a question or need a hand?",
+                Content = AppStrings.AiChatPanel_WelcomeMessage, // example resource

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between c7f5e6c and d763af6.

⛔ Files ignored due to path filters (2)

• src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/github-icon-dark.svg is excluded by !**/*.svg
• src/Websites/Platform/src/Bit.Websites.Platform.Client/wwwroot/images/github-icon-light.svg is excluded by !**/*.svg

📒 Files selected for processing (13)

• src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj (2 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Extensions/IServiceCollectionExtensions.cs (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.cs (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppAiChatPanel.razor.scss (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/AppComponentBase.cs (3 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Shared/MainLayout.razor (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_media-queries.scss (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/app.scss (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Server/Components/App.razor (2 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/AiChatMessage.cs (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/AiChatMessageRole.cs (1 hunks)
• src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/StartChatbotRequest.cs (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build and test

🔇 Additional comments (6)

src/Websites/Platform/src/Bit.Websites.Platform.Server/Components/App.razor (1)

13-13: Extras CSS inclusion looks correct

Loaded after core Bit.BlazorUI CSS; ordering is fine.

src/Websites/Platform/src/Bit.Websites.Platform.Client/Bit.Websites.Platform.Client.csproj (1)

103-105: XML escape fix for Outputs is correct

Using ->Replace in MSBuild attributes is required; this resolves parsing issues.

src/Websites/Platform/src/Bit.Websites.Platform.Client/Extensions/IServiceCollectionExtensions.cs (1)

27-28: Registering Bit.BlazorUI.Extras services is appropriate

Placed after core Bit UI services; good ordering.

src/Websites/Platform/src/Bit.Websites.Platform.Client/Styles/abstracts/_media-queries.scss (1)

50-74: Breakpoints remap for lt- looks correct.*

Using the next-lower max as the upper bound preserves continuity (no gaps/overlaps) and matches the defined min/max pairs.

src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/AiChatMessage.cs (1)

9-10: Ensure JsonIgnore resolves without relying on global usings.

If there’s no using System.Text.Json.Serialization; in scope, this won’t compile. Fully qualify to be safe.

-[JsonIgnore]
+[System.Text.Json.Serialization.JsonIgnore]
 public bool Successful { get; set; } = true;

Alternatively, add using System.Text.Json.Serialization; at the top of the file.

src/Websites/Platform/src/Bit.Websites.Platform.Shared/Dtos/AiChat/StartChatbotRequest.cs (1)

9-9: Ignore C# version warning. The Bit.Websites.Platform.Shared project targets net9.0 (default C# 13), so the C# 12 collection expression (= []) is fully supported—no change needed.

Likely an incorrect or invalid review comment.