feat: add ai chat container #998
Conversation
Killusions
changed the title
There was a problem hiding this comment.
Pull Request Overview
This PR introduces two new chat container components (SiChatContainerComponent and SiAiChatContainerComponent) to provide complete chat interfaces for Angular applications. The changes include consolidating chat message models into a single file, converting some inputs to models for two-way binding, and adding comprehensive test coverage for the new components.
- Adds container components for managing chat UI layout and state
- Consolidates
MessageActionandAttachmentinterfaces into a unifiedchat-message.model.ts - Changes
sendingandinterruptibleinputs to models inSiChatInputComponentfor bidirectional state synchronization
Reviewed Changes
Copilot reviewed 40 out of 40 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
projects/element-ng/chat-messages/chat-message.model.ts |
New unified model file containing all chat message types and interfaces |
projects/element-ng/chat-messages/si-chat-container.component.ts |
New base container component with auto-scroll and layout management |
projects/element-ng/chat-messages/si-ai-chat-container.component.ts |
New high-level AI chat container with message rendering and state management |
projects/element-ng/chat-messages/si-chat-input.component.ts |
Converted sending and interruptible from inputs to models; added registerStates method |
projects/element-ng/chat-messages/si-user-message.component.html |
Added null-safe checks for actions arrays |
projects/element-ng/chat-messages/si-ai-message.component.html |
Added null-safe checks for actions arrays |
projects/element-ng/chat-messages/si-chat-message.component.scss |
Refactored CSS to move .message-wrapper styles outside media queries |
projects/element-ng/chat-messages/message-action.model.ts |
Removed (consolidated into chat-message.model.ts) |
src/app/examples/si-chat-messages/si-chat-container.ts |
Example implementation of base chat container |
src/app/examples/si-chat-messages/si-ai-chat-container.ts |
Example implementation of AI chat container |
docs/patterns/ai/ai-chat.md |
Documentation for new chat container components |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
from
6b82cff to
c073e0f
Compare
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
from
c073e0f to
da3e829
Compare
|
Documentation. Coverage Reports: |
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
from
da3e829 to
5ac3fdd
Compare
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
7 times, most recently
from
c23c428 to
7eb4235
Compare
|
@timowolf @spike-rabbit Can you please review this? We already merged #600 that introduces a basic chat container that does handle some scrolling and stuff. I'm discussed this with @Killusions offline and I understand why he is doing it like this. I'm just not so happy with the "declarative" API surface we're opening up here - looks a bit complex, but I don't have a good solution other than simply not exposing this as a component and fully hide it behind a service (that would need to be developed first). WDYT? 🤔 |
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
3 times, most recently
from
2e35d3e to
5d6e0ca
Compare
|
Warning Rate limit exceeded@Killusions has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 27 minutes and 5 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (7)
📒 Files selected for processing (48)
📝 WalkthroughWalkthroughAdds a new AI chat container component (SiAiChatContainerComponent) and a strongly-typed chat message model (chat-message.model.ts) consolidating message/action/attachment types. Refactors SiChatInputComponent to use signals and a registerParent(...) API and adds lifecycle cleanup. Enhances SiChatContainerComponent with debounced scrolling and public scrollToTop/scrollToBottom methods. Extends markdown renderer with MarkdownRendererOptions, optional syntax highlighting and LaTeX rendering (KaTeX), related renderer inputs, caching, and helpers. Adds translatable keys and example apps/tests/snapshots exercising the new AI chat UI and markdown features. Sequence Diagram(s)sequenceDiagram
participant User
participant Input as SiChatInputComponent
participant AIContainer as SiAiChatContainerComponent
participant Container as SiChatContainerComponent
participant Renderer as MarkdownRenderer
User->>Input: types message (+attachments)
Input->>AIContainer: emits messageSent
AIContainer->>AIContainer: append UserChatMessage to messages
AIContainer->>Renderer: render message content
Renderer-->>Container: provide rendered nodes
Container->>User: display user message
AIContainer->>AIContainer: set loading, start AI response
AIContainer->>Container: show loading AI message
loop streaming chunks
AIContainer->>AIContainer: update AiChatMessage content (Signal)
AIContainer->>Renderer: re-render updated content
Renderer-->>Container: update displayed AI message
Container->>Container: debounce scrollToBottomDuringStreaming()
end
AIContainer->>AIContainer: set loading=false
Container->>User: display final AI response
Suggested labels
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
2 times, most recently
from
4691f0d to
8c3b63e
Compare
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
…markdown renderer
…ulti-line formulas
Killusions
force-pushed
the
feat/add-ai-chat-continer-in-chat-messages
branch
from
73d5744 to
9b9f9d7
Compare
|
|
Merge after #1231
An ai-chat-container wrapper (model based with a nice signal-based API for streaming), based on #600 (merged), potential follow-up (tool message) is here #967.
This PR adds a model-driven AI chat UI: SiAiChatContainerComponent plus supporting models, input components, renderer enhancements, tests, docs and examples.
Key changes
Lines changed: substantial (new components, renderer, tests, docs, examples).